fix(Collapse): close disabled with custom value

Author: dev-ABsid

src/components/collapse/collapse-group.tsx

@@ -36,7 +36,14 @@ const CollapseGroupComponent: React.FC<React.PropsWithChildren<CollapseGroupProp
 
   useEffect(() => {
     if (onChange) {
-      onChange(state);
+      const openIndices = stateRef.current.filter(index => {
+        if (!Array.isArray(hasIndexChildren)) {
+          return true;
+        }
+        const isDisabled = hasIndexChildren.find((child: React.ReactElement) => child.props.index === index)?.props.disabled;
+        return !isDisabled;
+      });
+      onChange(openIndices);
     }
   }, [state]);
 

src/components/collapse/collapse.tsx

@@ -50,7 +50,7 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
   }
 
   useEffect(() => {
-    if (!values.length) return;
+    if (!values.length || disabled) return;
     const isActive = !!values.find(item => item === index);
     setVisible(isActive);
   }, [values.join(',')]);
@@ -66,7 +66,8 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
     <div className={classes} {...props}>
       <div className="view" role="button" onClick={clickHandler}>
         <div className="title">
-          <span>{title}</span> <CollapseIcon active={visible} />
+          <span>{title}</span>
+          {!disabled && <CollapseIcon active={visible} />}
         </div>
         {subtitle && <div className="subtitle">{subtitle}</div>}
       </div>
@@ -77,9 +78,11 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
         .collapse {
           border-top: 1px solid var(--color-border-1000);
           border-bottom: 1px solid var(--color-border-1000);
-          &.disabled {
-            background: var(--color-background-900);
-          }
+        }
+
+        .collapse.disabled .title {
+          color: var(--color-foreground-700);
+          cursor: not-allowed;
         }
 
         .shadow {
@@ -93,6 +96,9 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
           cursor: pointer;
           outline: none;
         }
+        &.disabled {
+          pointer-events: none;
+        }
 
         .title {
           display: flex;