new changes to improve collapsible component #528

Author: g-charan

src/components/ui/Collapsible/Collapsible.tsx

@@ -25,9 +25,9 @@ export type CollapsibleProps = {
   open?: boolean;
   title?: string;
   trigger?: ReactNode;
-  items: { content: any }[];
+  items: { content: string | ReactNode }[];
   disabled?: boolean;
-  defaultOpen?: { content: any };
+  defaultOpen?: { content: string | ReactNode };
   onOpenChange?: Dispatch<SetStateAction<boolean>>;
 } & PropsWithChildren;
 
@@ -37,7 +37,7 @@ const Collapsible = ({ children, items, ...props }: CollapsibleProps) => {
 
 
   // Disable or enable collapse
-  const disabled = props.disabled;
+  const disabled = props.disabled ?? false;
 
   // Title for the component
   const title = props.title;
@@ -51,15 +51,16 @@ const Collapsible = ({ children, items, ...props }: CollapsibleProps) => {
     <CollapsibleRoot
       open={props.open ?? open}
       onOpenChange={props.onOpenChange ?? onOpenChange}
+      disabled={disabled}
     >
       <CollapsibleHeader title={title}>
         {/* Button */}
-        {!disabled && (
+        
           <CollapsibleTrigger asChild >
             {props.trigger && props.trigger}
 
           </CollapsibleTrigger>
-        )}
+       
       </CollapsibleHeader>
 
       {/* Conditonal Loop */}
@@ -77,11 +78,9 @@ const Collapsible = ({ children, items, ...props }: CollapsibleProps) => {
           {/* Collapsable Content  */}
           <CollapsibleContent state={props.open ?? open}>
             {items.map((item, index) => (
-              <>
-                {item != defaultOpen && (
-                  <CollapsibleItem key={index}>{item.content}</CollapsibleItem>
-                )}
-              </>
+              item !== defaultOpen && (
+                <CollapsibleItem key={index}>{item.content}</CollapsibleItem>
+              )
             ))}
           </CollapsibleContent>
         </>

src/components/ui/Collapsible/fragments/CollapsibleRoot.tsx

@@ -14,9 +14,10 @@ export type CollapsibleRootProps = {
   open: boolean;
   onOpenChange: Dispatch<SetStateAction<boolean>>;
   className?: string
+  disabled?: boolean
 };
 
-const CollapsibleRoot = ({children,className="", customRootClass, open, onOpenChange}: CollapsibleRootProps) => {
+const CollapsibleRoot = ({children,className="",disabled, customRootClass, open, onOpenChange}: CollapsibleRootProps) => {
 
     const rootClass = customClassSwitcher(customRootClass,COMPONENT_NAME)
 
@@ -25,7 +26,8 @@ const CollapsibleRoot = ({children,className="", customRootClass, open, onOpenCh
     value={{
         rootClass,
         open,
-        onOpenChange
+        onOpenChange,
+        disabled
     }}
     ><div className={clsx(`${rootClass}-root`,className)}>
         {children}</div></CollapsibleContext.Provider>

src/components/ui/Collapsible/fragments/CollapsibleTrigger.tsx

@@ -47,17 +47,34 @@ type CollapsibleTriggerProps = {
 
 
 const CollapsibleTrigger = ({children, asChild=false}: CollapsibleTriggerProps) => {
-    const {rootClass,open,onOpenChange} = useContext(CollapsibleContext)
-      const toggleCollapse = () => onOpenChange && onOpenChange((p) => (!p))
+    const {rootClass,open,onOpenChange,disabled} = useContext(CollapsibleContext)
+      const toggleCollapse = () => onOpenChange && !disabled && onOpenChange((p) => (!p))
 
-   
+      
   return (
-    <div className={clsx(`${rootClass}-trigger`)} onClick={toggleCollapse}>
-      {asChild? children: <ButtonPrimitive>
-                      {open ? <CollapseIcon /> : <ExpandIcon />}
-                    </ButtonPrimitive>}
-        
-
+    <div
+      className={clsx(`${rootClass}-trigger`)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggleCollapse();
+        }
+      }}
+      aria-expanded={open}
+      onClick={
+      
+         toggleCollapse
+      }
+    >
+      {asChild ? (
+        children
+      ) : (
+        <ButtonPrimitive>
+          {open ? <CollapseIcon /> : <ExpandIcon />}
+        </ButtonPrimitive>
+      )}
     </div>
   );
 }

src/components/ui/Collapsible/stories/Collapsible.stories.tsx

@@ -59,6 +59,7 @@ export const ExternalTrigger = () => {
           title="Quote"
           items={Items}
           defaultOpen={Items[0]}
+          disabled={true}
           trigger={
             <Button  style={{ margin: "0" }}>
               {open ? "CLOSE" : "OPEN"}

src/components/ui/Collapsible/tests/Collapsible.test.tsx

@@ -41,10 +41,17 @@ describe("Collapsible Component", () => {
     });
 
     it("disables collapsible when disabled prop is true", () => {
-        const { getByText } = render(
-            <Collapsible disabled={true} items={[{ content: "Item 1" }]} />
-        );
-        expect(getByText("Item 1")).toBeInTheDocument();
+      const { getByText, queryByText } = render(
+        <Collapsible
+          disabled={true}
+          trigger={<button>Toggle</button>}
+          items={[{ content: "Item 1" }]}
+        />
+      );
+      const trigger = getByText("Toggle");
+      const initialState = queryByText("Item 1");
+      fireEvent.click(trigger);
+      expect(queryByText("Item 1")).toBe(initialState); // Content state should not change
     });
 
     it("renders default open content when provided", () => {
@@ -58,55 +65,7 @@ describe("Collapsible Component", () => {
 });
 
 
-describe("Collapsible Component", () => {
-    it("renders without crashing", () => {
-        const { getByText } = render(
-            <Collapsible items={[{ content: "Item 1" }]} />
-        );
-        expect(getByText("Item 1")).toBeInTheDocument();
-    });
 
-    it("renders title when provided", () => {
-        const { getByText } = render(
-            <Collapsible title="Test Title" items={[{ content: "Item 1" }]} />
-        );
-        expect(getByText("Test Title")).toBeInTheDocument();
-    });
-
-    it("renders trigger when provided", () => {
-        const { getByText } = render(
-            <Collapsible trigger={<button>Toggle</button>} items={[{ content: "Item 1" }]} />
-        );
-        expect(getByText("Toggle")).toBeInTheDocument();
-    });
-
-    it("toggles content visibility on trigger click", () => {
-        const { getByText, queryByText } = render(
-            <Collapsible trigger={<button>Toggle</button>} items={[{ content: "Item 1" }]} />
-        );
-        const trigger = getByText("Toggle");
-        fireEvent.click(trigger);
-        expect(queryByText("Item 1")).not.toBeInTheDocument();
-        fireEvent.click(trigger);
-        expect(queryByText("Item 1")).toBeInTheDocument();
-    });
-
-    it("disables collapsible when disabled prop is true", () => {
-        const { getByText } = render(
-            <Collapsible disabled={true} items={[{ content: "Item 1" }]} />
-        );
-        expect(getByText("Item 1")).toBeInTheDocument();
-    });
-
-    it("renders default open content when provided", () => {
-        const { getByText } = render(
-            <Collapsible defaultOpen={{ content: "Default Item" }} items={[{ content: "Item 1" }]} />
-        );
-        expect(getByText("Default Item")).toBeInTheDocument();
-    });
-
-     
-});
 
 describe("CollapsibleHeader Component", () => {
     it("renders title", () => {