minor changes rad-ui#1 to improve collapsible component rad-ui#528

Author: g-charan

src/components/ui/Collapsible/Collapsible.tsx

@@ -33,7 +33,7 @@ export type CollapsibleProps = {
 
 const Collapsible = ({ children, items, ...props }: CollapsibleProps) => {
   //State values if not provided by the user
-  const [open, onOpenChange] = useState(props.open ?? true);
+  const [open, onOpenChange] = useState(props.open ?? false);
 
 
   // Disable or enable collapse
@@ -56,9 +56,8 @@ const Collapsible = ({ children, items, ...props }: CollapsibleProps) => {
       <CollapsibleHeader title={title}>
         {/* Button */}
 
-          <CollapsibleTrigger asChild >
+          <CollapsibleTrigger asChild>
             {props.trigger && props.trigger}
-            
           </CollapsibleTrigger>
 
       </CollapsibleHeader>

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

@@ -1,12 +1,17 @@
 import clsx from 'clsx'
 import React, { useContext } from 'react'
-import ButtonPrimitive from '~/core/primitives/Button'
+import Primitive from '~/core/primitives/Primitive'
 import { CollapsibleContext } from '../contexts/CollapsibleContext'
 
 
 type CollapsibleTriggerProps = {
-    children: React.ReactNode
+    children?: React.ReactNode
     asChild?: boolean
+    className?: string
+    id?: string
+    key?: string
+    style?: React.CSSProperties
+    index?: number
 }
 
 // Icons
@@ -46,15 +51,14 @@ type CollapsibleTriggerProps = {
 
 
 
-const CollapsibleTrigger = ({children, asChild=false}: CollapsibleTriggerProps) => {
+const CollapsibleTrigger = ({children,className, ...props}: CollapsibleTriggerProps) => {
     const {rootClass,open,onOpenChange,disabled} = useContext(CollapsibleContext)
-      const toggleCollapse = () => onOpenChange && !disabled && onOpenChange((p) => (!p))
-
 
+    const toggleCollapse = () => onOpenChange && !disabled && onOpenChange((p) => (!p))
   return (
-    <div
-      className={clsx(`${rootClass}-trigger`)}
-      role="button"
+    <Primitive.button
+      className={clsx(`${rootClass}-trigger`, className)}
+      role={"button"}
       tabIndex={0}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -63,19 +67,12 @@ const CollapsibleTrigger = ({children, asChild=false}: CollapsibleTriggerProps)
         }
       }}
       aria-expanded={open}
-      onClick={
-      
-         toggleCollapse
-      }
+      onClick={toggleCollapse}
+      {...props}
+
     >
-      {asChild ? (
-        children
-      ) : (
-        <ButtonPrimitive>
-          {open ? <CollapseIcon /> : <ExpandIcon />}
-        </ButtonPrimitive>
-      )}
-    </div>
+      {children}
+    </Primitive.button>
   );
 }
 

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

@@ -59,7 +59,6 @@ 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

@@ -10,7 +10,7 @@ import CollapsibleTrigger from "../fragments/CollapsibleTrigger";
 describe("Collapsible Component", () => {
     it("renders without crashing", () => {
         const { getByText } = render(
-            <Collapsible items={[{ content: "Item 1" }]} />
+            <Collapsible items={[{ content: "Item 1" }]} open={true}/>
         );
         expect(getByText("Item 1")).toBeInTheDocument();
     });
@@ -35,9 +35,9 @@ describe("Collapsible Component", () => {
         );
         const trigger = getByText("Toggle");
         fireEvent.click(trigger);
-        expect(queryByText("Item 1")).not.toBeInTheDocument();
-        fireEvent.click(trigger);
         expect(queryByText("Item 1")).toBeInTheDocument();
+        fireEvent.click(trigger);
+        expect(queryByText("Item 1")).not.toBeInTheDocument();
     });
 
     it("disables collapsible when disabled prop is true", () => {