controlled Accordion

Author: ddecrulle

src/Accordion.tsx

@@ -1,12 +1,13 @@
-import React, { forwardRef, memo, ReactNode, useId } from "react";
+import React, { forwardRef, memo, ReactNode, useId, useState } from "react";
 import { assert } from "tsafe";
 import type { Equals } from "tsafe";
 import { fr } from "./lib";
 import { cx } from "./lib/tools/cx";
 import "@gouvfr/dsfr/dist/component/accordion/accordion.css";
 import { symToStr } from "tsafe/symToStr";
+import { useConstCallback } from "./lib/tools/powerhooks/useConstCallback";
 
-export type AccordionProps = AccordionProps.Controlled;
+export type AccordionProps = AccordionProps.Controlled | AccordionProps.Uncontrolled;
 
 //TODO Controlled mode (callback onClick, expended etc ...)
 export namespace AccordionProps {
@@ -16,9 +17,18 @@ export namespace AccordionProps {
         label: ReactNode;
         classes?: Partial<Record<"root" | "accordion" | "title" | "collapse", string>>;
         content: NonNullable<ReactNode>;
+        defaultExpanded?: boolean;
     };
 
-    export type Controlled = Common & {};
+    export type Uncontrolled = Common & {
+        expanded?: undefined;
+        onChange?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, expanded: boolean) => void;
+    };
+
+    export type Controlled = Common & {
+        expanded: boolean;
+        onChange: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, expanded: boolean) => void;
+    };
 }
 
 /** @see <https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon>  */
@@ -30,20 +40,37 @@ export const Accordion = memo(
             label,
             classes = {},
             content,
+            expanded: expandedProp,
+            defaultExpanded = false,
+            onChange,
             ...rest
         } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
         const id = useId();
 
+        const [expandedState, setExpandedState] = useState(defaultExpanded);
+
+        const value = expandedProp ? expandedProp : expandedState;
+
+        const handleChange = useConstCallback(
+            (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                setExpandedState(!value);
+                if (onChange) {
+                    onChange(event, !value);
+                }
+            }
+        );
+
         return (
             <section className={cx(fr.cx("fr-accordion"), className)} ref={ref} {...rest}>
                 <HtmlTitleTag className={cx(fr.cx("fr-accordion__title"), classes.title)}>
                     <button
                         className={fr.cx("fr-accordion__btn")}
-                        aria-expanded="true"
+                        aria-expanded={value}
                         aria-controls={`accordion-${id}`}
+                        onClick={handleChange}
                     >
                         {label}
                     </button>

stories/Accordion.stories.tsx

@@ -15,9 +15,9 @@ _NOTE: In controlled mode there is no animation transition when expanding or col
 
 \`\`\`tsx
 function ControlledAccordion() {
-
+    const [expanded,setExpanded] = useState(true)
     return (
-        <Accordion label="Name of the Accordion" content="Content of the Accordion"/>
+        <Accordion label="Name of the Accordion" content="Content of the Accordion" onChange={(e,value) => setExpanded(!value)} expanded={expanded}/>
     );
 
 }
@@ -29,5 +29,6 @@ export default meta;
 
 export const Default = getStory({
     "label": "Name of the Accordion",
-    "content": "Content of the Accordion"
+    "content": "Content of the Accordion",
+    "defaultExpanded": false
 });

test/integration/next/pages/test.tsx

@@ -0,0 +1,13 @@
+import React, { useState } from "react"
+import { Accordion } from "@codegouvfr/react-dsfr/Accordion";
+
+
+export default function Test() {
+  const [expanded, setExpanded] = useState<boolean>();
+  return (
+    <>
+      <Accordion label="Accordion Uncontrolled" content="Content of the Uncontrolled Accordion" />
+      <Accordion label="Accordion Controlled" content="Content of the controlled Accordion" defaultExpanded={true} expanded={expanded} onChange={(e, expanded) => { console.log(e); setExpanded(!expanded); }} />
+    </>
+  )
+}