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 = (args) => { ) } + +export const DefaultOpen: Story = (args) => { + return ( + + + Hi, 👋🏾 I am open by default + + + This content is visible by default because defaultOpen is set to true + + + ) +} +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() + const checkboxInput = screen.getByRole('checkbox') + expect(checkboxInput).not.toBeChecked() + }) + + test('Should be open by default with defaultOpen prop', () => { + render() + const checkboxInput = screen.getByRole('checkbox') + expect(checkboxInput).toBeChecked() + }) + + test('Should respect open prop over defaultOpen', () => { + render() + const checkboxInput = screen.getByRole('checkbox') + expect(checkboxInput).not.toBeChecked() + }) }) 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 = 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( checkbox, icon, open, + defaultOpen = false, dataTheme, className, onOpen, @@ -51,7 +55,7 @@ const Collapse = React.forwardRef( }, ref ): JSX.Element => { - const [isChecked, setIsChecked] = useState(open) + const [isChecked, setIsChecked] = useState(open ?? defaultOpen) const checkboxRef = useRef(null) // Handle events for checkbox changes @@ -65,7 +69,7 @@ const Collapse = React.forwardRef( 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( className="peer" ref={checkboxRef} onChange={handleCheckboxChange} + defaultChecked={defaultOpen} /> )} {children}