#258

Author: garronej

src/Accordion.tsx

@@ -1,6 +1,13 @@
 "use client";
 
-import React, { forwardRef, memo, useState, type ReactNode, type CSSProperties } from "react";
+import React, {
+    forwardRef,
+    memo,
+    useState,
+    useEffect,
+    type ReactNode,
+    type CSSProperties
+} from "react";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import { fr } from "./fr";
@@ -24,15 +31,15 @@ export namespace AccordionProps {
 
     export type Uncontrolled = Common & {
         defaultExpanded?: boolean;
-        expanded?: undefined;
+        expanded?: never;
         onExpandedChange?: (
             expanded: boolean,
             e: React.MouseEvent<HTMLButtonElement, MouseEvent>
         ) => void;
     };
 
     export type Controlled = Common & {
-        defaultExpanded?: undefined;
+        defaultExpanded?: never;
         expanded: boolean;
         onExpandedChange: (
             expanded: boolean,
@@ -52,7 +59,7 @@ export const Accordion = memo(
             classes = {},
             style,
             children,
-            expanded: expandedProp,
+            expanded: expanded_props,
             defaultExpanded = false,
             onExpandedChange,
             ...rest
@@ -67,14 +74,25 @@ export const Accordion = memo(
 
         const collapseElementId = `${id}-collapse`;
 
-        const [expandedState, setExpandedState] = useState(defaultExpanded);
+        const [isExpanded, setIsExpanded] = useState(expanded_props ?? defaultExpanded);
 
-        const value = expandedProp ? expandedProp : expandedState;
+        useEffect(() => {
+            if (expanded_props === undefined) {
+                return;
+            }
+
+            setIsExpanded(expanded_props);
+        }, [expanded_props]);
 
         const onExtendButtonClick = useConstCallback(
             (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                setExpandedState(!value);
-                onExpandedChange?.(!value, event);
+                const isExpended_newValue = !isExpanded;
+
+                onExpandedChange?.(isExpended_newValue, event);
+
+                if (expanded_props === undefined) {
+                    setIsExpanded(isExpended_newValue);
+                }
             }
         );
 
@@ -88,7 +106,7 @@ export const Accordion = memo(
                 <HtmlTitleTag className={cx(fr.cx("fr-accordion__title"), classes.title)}>
                     <button
                         className={fr.cx("fr-accordion__btn")}
-                        aria-expanded={value}
+                        aria-expanded={isExpanded}
                         aria-controls={collapseElementId}
                         onClick={onExtendButtonClick}
                         type="button"

stories/Accordion.stories.tsx

@@ -32,7 +32,7 @@ function ControlledAccordion() {
     return (
         <Accordion 
             label="Name of the Accordion" 
-            onChange={(value,) => setExpanded(!value)} 
+            onExpandedChange={(value,) => setExpanded(!value)} 
             expanded={expanded}
         >
             Content of the Accordion

test/integration/vite/src/Home.tsx

@@ -10,6 +10,8 @@ import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
 import { useState } from "react";
 import { Table } from "@codegouvfr/react-dsfr/Table";
 
+import { Accordion } from "@codegouvfr/react-dsfr/Accordion";
+
 export function Home() {
     const { isDark, setIsDark } = useIsDark();
     return (
@@ -66,6 +68,7 @@ export function Home() {
             </div>
             <Form />
             <TableExample />
+            <ControlledAccordion />
         </>
     );
 }
@@ -202,4 +205,20 @@ function TableExample() {
     );
 }
 
+function ControlledAccordion(){
+
+    const [ expanded, setExpanded ] = useState(false)
+
+    return (
+        <Accordion 
+            label="Name of the Accordion" 
+            onExpandedChange={(value,) => setExpanded(!value)} 
+            expanded={expanded}
+        >
+            Content of the Accordion
+        </Accordion>
+    );
+
+}
+