From 4a32205b678f71a847ae4bef28a7d63520ed1d6c Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 19 Jan 2024 19:48:13 +1100
Subject: [PATCH] feat(components/standalone-accordion): make controlled

---
 .../standalone-accordion.stories.tsx          |  5 ++++-
 .../accordion/standalone-accordion.tsx        | 20 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/lib/components/accordion/standalone-accordion.stories.tsx b/lib/components/accordion/standalone-accordion.stories.tsx
index b389286..8ff380a 100644
--- a/lib/components/accordion/standalone-accordion.stories.tsx
+++ b/lib/components/accordion/standalone-accordion.stories.tsx
@@ -1,3 +1,4 @@
+import { useDisclosure } from '@chakra-ui/react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../tabs';
@@ -15,12 +16,14 @@ export default meta;
 type Story = StoryObj<typeof StandaloneAccordion>;
 
 const Component = (props: StandaloneAccordionProps) => {
+  const { isOpen, onToggle } = useDisclosure();
   return (
     <StandaloneAccordion
       {...props}
       label="The Best Flavours of Banana Sushi"
       badges={['Yum', 'Gourmet', 'Barf']}
-      defaultIsOpen
+      isOpen={isOpen}
+      onToggle={onToggle}
     >
       <Tabs variant="collapse">
         <TabList>
diff --git a/lib/components/accordion/standalone-accordion.tsx b/lib/components/accordion/standalone-accordion.tsx
index 619753d..e1a41a0 100644
--- a/lib/components/accordion/standalone-accordion.tsx
+++ b/lib/components/accordion/standalone-accordion.tsx
@@ -1,5 +1,5 @@
-import type { PropsWithChildren } from 'react';
-import { memo } from 'react';
+import type { MouseEventHandler, PropsWithChildren } from 'react';
+import { memo, useCallback } from 'react';
 
 import { AccordionButton } from './accordion-button';
 import { Accordion, AccordionItem, AccordionPanel } from './wrapper';
@@ -7,14 +7,24 @@ import { Accordion, AccordionItem, AccordionPanel } from './wrapper';
 export type StandaloneAccordionProps = PropsWithChildren<{
   label: string;
   badges?: (string | number)[];
-  defaultIsOpen?: boolean;
+  isOpen: boolean;
+  onToggle: () => void;
 }>;
 
 export const StandaloneAccordion = memo((props: StandaloneAccordionProps) => {
+  const onClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (e) => {
+      e.preventDefault();
+      props.onToggle();
+    },
+    [props]
+  );
   return (
-    <Accordion allowToggle defaultIndex={props.defaultIsOpen ? 0 : undefined}>
+    <Accordion index={props.isOpen ? 0 : undefined} allowToggle>
       <AccordionItem>
-        <AccordionButton badges={props.badges}>{props.label}</AccordionButton>
+        <AccordionButton badges={props.badges} onClick={onClick}>
+          {props.label}
+        </AccordionButton>
         <AccordionPanel>{props.children}</AccordionPanel>
       </AccordionItem>
     </Accordion>