From 5aebd33a5e24e66ecc22b159dd14d49e1527175d Mon Sep 17 00:00:00 2001
From: adeboyedn <adeboyed93@gmail.com>
Date: Sun, 20 Apr 2025 14:10:10 +0100
Subject: [PATCH 1/2] Add defaultOpen prop to Collapse for initial open state
 control.

---
 src/Collapse/Collapse.stories.tsx | 17 +++++++++++++++++
 src/Collapse/Collapse.test.tsx    | 18 ++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/src/Collapse/Collapse.stories.tsx b/src/Collapse/Collapse.stories.tsx
index 20692786..99f1f7b6 100644
--- a/src/Collapse/Collapse.stories.tsx
+++ b/src/Collapse/Collapse.stories.tsx
@@ -189,3 +189,20 @@ export const CheckboxEvents: Story<CollapseProps> = (args) => {
     </div>
   )
 }
+
+export const DefaultOpen: Story<CollapseProps> = (args) => {
+  return (
+    <Collapse {...args}>
+      <Collapse.Title className="text-xl font-medium">
+        Hi, 👋🏾 I am open by default
+      </Collapse.Title>
+      <Collapse.Content>
+        This content is visible by default because defaultOpen is set to true
+      </Collapse.Content>
+    </Collapse>
+  )
+}
+DefaultOpen.args = {
+  className: 'border border-base-300 bg-base-200',
+  defaultOpen: true
+}
diff --git a/src/Collapse/Collapse.test.tsx b/src/Collapse/Collapse.test.tsx
index 54498f73..394bd359 100644
--- a/src/Collapse/Collapse.test.tsx
+++ b/src/Collapse/Collapse.test.tsx
@@ -63,4 +63,22 @@ describe('Collapse', () => {
     const contentElement = screen.getByText('Test Content')
     expect(contentElement).toBeInTheDocument()
   })
+
+  test('Should be closed by default without defaultOpen prop', () => {
+    render(<Collapse checkbox data-testid="collapse" />)
+    const checkboxInput = screen.getByRole('checkbox')
+    expect(checkboxInput).not.toBeChecked()
+  })
+
+  test('Should be open by default with defaultOpen prop', () => {
+    render(<Collapse checkbox defaultOpen data-testid="collapse" />)
+    const checkboxInput = screen.getByRole('checkbox')
+    expect(checkboxInput).toBeChecked()
+  })
+
+  test('Should respect open prop over defaultOpen', () => {
+    render(<Collapse checkbox defaultOpen open={false} data-testid="collapse" />)
+    const checkboxInput = screen.getByRole('checkbox')
+    expect(checkboxInput).not.toBeChecked()
+  })
 })

From 4b815c6e61cb941ab2f7ddbf40213bdb56ba2140 Mon Sep 17 00:00:00 2001
From: adeboyedn <adeboyed93@gmail.com>
Date: Sun, 20 Apr 2025 15:29:11 +0100
Subject: [PATCH 2/2] fix commit issue

---
 src/Collapse/Collapse.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Collapse/Collapse.tsx b/src/Collapse/Collapse.tsx
index ff344fe5..e811cbfe 100644
--- a/src/Collapse/Collapse.tsx
+++ b/src/Collapse/Collapse.tsx
@@ -14,6 +14,9 @@ export type CollapseProps<T extends HTMLElement = HTMLDivElement> =
       checkbox?: boolean
       icon?: 'arrow' | 'plus'
       open?: boolean
+
+      // The default open state ( From the issue suggestion )
+      defaultOpen?: boolean
       onOpen?: () => void
       onClose?: () => void
       onToggle?: () => void
@@ -42,6 +45,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
       checkbox,
       icon,
       open,
+      defaultOpen = false,
       dataTheme,
       className,
       onOpen,
@@ -51,7 +55,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
     },
     ref
   ): JSX.Element => {
-    const [isChecked, setIsChecked] = useState(open)
+    const [isChecked, setIsChecked] = useState(open ?? defaultOpen)
     const checkboxRef = useRef<HTMLInputElement>(null)
 
     // Handle events for checkbox changes
@@ -65,7 +69,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
         onClose()
       }
 
-      setIsChecked(checkboxRef.current?.checked)
+      setIsChecked(checkboxRef.current?.checked ?? false)
     }
 
     // Handle blur events, specifically handling open/close for non checkbox types
@@ -100,6 +104,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
             className="peer"
             ref={checkboxRef}
             onChange={handleCheckboxChange}
+            defaultChecked={defaultOpen}
           />
         )}
         {children}