Enable the modal to be opened by default

Author: garronej

src/Modal.tsx

@@ -181,27 +181,47 @@ addModalTranslations({
 
 export { addModalTranslations };
 
-function createOpenModalButtonProps(id: string) {
+function createOpenModalButtonProps(params: { modalId: string; isOpenedByDefault: boolean }) {
+    const { modalId, isOpenedByDefault } = params;
+
     return {
+        //For RSC we don't want to pass an empty function.
         "onClick": undefined as any as () => void,
         "nativeButtonProps": {
-            "aria-controls": id,
-            "data-fr-opened": false
+            "aria-controls": modalId,
+            "data-fr-opened": isOpenedByDefault
         }
     };
 }
 
 let counter = 0;
 
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-modal> */
-export function createModal<Name extends string>(
-    name: Name
-): Record<`${Uncapitalize<Name>}ModalButtonProps`, ReturnType<typeof createOpenModalButtonProps>> &
+export function createModal<Name extends string>(params: {
+    name: Name;
+    isOpenedByDefault: boolean;
+}): Record<`${Uncapitalize<Name>}ModalButtonProps`, ReturnType<typeof createOpenModalButtonProps>> &
     Record<`${Capitalize<Name>}Modal`, (props: ModalProps) => JSX.Element> {
+    const { name, isOpenedByDefault } = params;
+
     const modalId = `${uncapitalize(name)}-modal-${counter++}`;
 
+    const openModalButtonProps = createOpenModalButtonProps({
+        modalId,
+        isOpenedByDefault
+    });
+
     function InternalModal(props: ModalProps) {
-        return <Modal {...props} id={modalId} />;
+        return (
+            <>
+                {isOpenedByDefault && (
+                    <Button {...openModalButtonProps} className={fr.cx("fr-hidden")}>
+                        {" "}
+                    </Button>
+                )}
+                <Modal {...props} id={modalId} />
+            </>
+        );
     }
 
     InternalModal.displayName = `${capitalize(name)}Modal`;
@@ -210,6 +230,6 @@ export function createModal<Name extends string>(
 
     return {
         [InternalModal.displayName]: InternalModal,
-        [`${uncapitalize(name)}ModalButtonProps`]: createOpenModalButtonProps(modalId)
+        [`${uncapitalize(name)}ModalButtonProps`]: openModalButtonProps
     } as any;
 }

stories/Modal.stories.tsx

@@ -14,6 +14,10 @@ const { meta, getStory } = getStoryFactory({
 
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/modale)
 - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Modal.tsx)
+
+This is a uncontrolled implementation of the modal, compatible with Server Components.  
+An controlled variant is coming soon.  
+
 `,
     "argTypes": {
         "title": {
@@ -68,7 +72,10 @@ const { meta, getStory } = getStoryFactory({
 
 export default meta;
 
-const { SimpleModal, simpleModalButtonProps } = createModal("simple");
+const { SimpleModal, simpleModalButtonProps } = createModal({
+    "name": "simple",
+    "isOpenedByDefault": false
+});
 
 function Template(args: ModalProps) {
     return (
@@ -109,7 +116,10 @@ Default.parameters = {
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 
-const { AcceptTermsModal, acceptTermsModalButtonProps } = createModal("acceptTerms");
+const { AcceptTermsModal, acceptTermsModalButtonProps } = createModal(
+    name: "simple",
+    isOpenedByDefault: false
+);
 
 function MyComponent(){