feat(Collapse): allow custom multiples & disabled

Author: dev-ABsid

src/app/components/collapse/collapse.mdx

@@ -82,4 +82,43 @@ Display large amounts of text in collapsible sections. Commonly referred to as a
 `}
 />
 
+<Playground
+  title="Disabled"
+  desc="Disabled Collapse component where interactions are blocked."
+  scope={{ Collapse, Text }}
+  code={`
+<Collapse disabled title="Disabled Question" >
+  <Text>This content is static and the collapse functionality is disabled. Users cannot expand or collapse this section.</Text>
+</Collapse>
+`}
+/>
+
+<Playground
+  title="Custom Multiple"
+  desc="Controlling multiple collapse components with the 'value' prop and tracking their state."
+  scope={{ Collapse, Collapse, Text }}
+  code={`
+  <Collapse.Group multiple={true} value={[1, 4]} 
+    onChange={(open) => console.log("Open collapses:", open)}>
+    <Collapse title="Question A" index={1}>
+      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</Text>
+    </Collapse>
+    <Collapse title="Question B" index={2}>
+      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</Text>
+    </Collapse>
+    <Collapse title="Question C" index={3}>
+      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</Text>
+    </Collapse>
+    <Collapse title="Question D" index={4}>
+      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</Text>
+    </Collapse>
+  </Collapse.Group>
+`}
+/>
+
+
 <Attributes component="Collapse" edit="/app/components/collapse.mdx"></Attributes>

src/components/collapse/collapse-group.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import Collapse from './collapse';
 import useCurrentState from '../utils/use-current-state';
 import { setChildrenIndex } from '../utils/collections';
@@ -8,39 +8,53 @@ import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
 
 interface Props {
-  accordion?: boolean;
+  multiple?: boolean;
   className?: string;
+  value?: number[];
+  onChange?: (openIndices: number[]) => void;
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
 export type CollapseGroupProps = Props & NativeAttrs;
 
 const CollapseGroupComponent: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
   children,
-  accordion = true,
-  className = '',
+  multiple = true,
+  className,
+  value = [],
+  onChange,
   ...props
 }: React.PropsWithChildren<CollapseGroupProps>) => {
   const { SCALE, UNIT, CLASS_NAMES } = useScale();
 
-  const [state, setState, stateRef] = useCurrentState<Array<number>>([]);
+  const [state, setState, stateRef] = useCurrentState<Array<number>>(value);
   const classes = useClasses('collapse-group', className, CLASS_NAMES);
 
-  const updateValues = (currentIndex: number, nextState: boolean) => {
-    const hasChild = stateRef.current.find(val => val === currentIndex);
-    if (accordion) {
-      if (nextState) return setState([currentIndex]);
-      return setState([]);
+  useEffect(() => {
+    setState(value);
+  }, [value.join(',')]);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(state);
     }
+  }, [state]);
 
-    if (nextState) {
-      // In a few cases, the user will set Collapse Component state manually.
-      // If the user incorrectly set the state, Group component should ignore it.
-      /* istanbul ignore if */
-      if (hasChild) return;
-      return setState([...stateRef.current, currentIndex]);
+  const updateValues = (currentIndex: number, nextState: boolean) => {
+    if (!multiple) {
+      if (nextState) {
+        setState([currentIndex]);
+      } else {
+        setState([]);
+      }
+    } else {
+      const currentIndexExists = state.includes(currentIndex);
+      if (nextState && !currentIndexExists) {
+        setState([...state, currentIndex]);
+      } else if (!nextState && currentIndexExists) {
+        setState(state.filter(item => item !== currentIndex));
+      }
     }
-    setState(stateRef.current.filter(item => item !== currentIndex));
   };
 
   const initialValue = useMemo<CollapseConfig>(

src/components/collapse/collapse.tsx

@@ -14,6 +14,7 @@ interface Props {
   shadow?: boolean;
   className?: string;
   index?: number;
+  disabled?: boolean;
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
@@ -27,6 +28,7 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
   shadow = false,
   className = '',
   index,
+  disabled = false,
   ...props
 }: React.PropsWithChildren<CollapseProps>) => {
   const { SCALE, UNIT, CLASS_NAMES } = useScale();
@@ -39,6 +41,7 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
       shadow,
     },
     className,
+    disabled && 'disabled',
     CLASS_NAMES,
   );
 
@@ -53,6 +56,7 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
   }, [values.join(',')]);
 
   const clickHandler = () => {
+    if (disabled) return;
     const next = !visibleRef.current;
     setVisible(next);
     updateValues && updateValues(index, next);
@@ -73,6 +77,9 @@ 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);
+          }
         }
 
         .shadow {
@@ -123,8 +130,8 @@ const CollapseComponent: React.FC<React.PropsWithChildren<CollapseProps>> = ({
         ${SCALE.padding(
           {
             top: 1.2,
-            right: 0,
-            left: 0,
+            right: 0.5,
+            left: 0.5,
             bottom: 1.2,
           },
           value => `padding: ${value.top} ${value.right} ${value.bottom} ${value.left};`,