Add a hook for observing if a modal is open

Author: garronej

src/Modal.tsx renamed to src/Modal/Modal.tsx

@@ -1,12 +1,12 @@
 import React, { memo, forwardRef, type CSSProperties, type ReactNode } from "react";
-import { fr } from "./fr";
-import { cx } from "./tools/cx";
+import { fr } from "../fr";
+import { cx } from "../tools/cx";
 import { assert } from "tsafe/assert";
 import { symToStr } from "tsafe/symToStr";
 import type { Equals } from "tsafe";
-import { createComponentI18nApi } from "./i18n";
-import type { FrIconClassName, RiIconClassName } from "./fr/generatedFromCss/classNames";
-import Button, { ButtonProps } from "./Button";
+import { createComponentI18nApi } from "../i18n";
+import type { FrIconClassName, RiIconClassName } from "../fr/generatedFromCss/classNames";
+import Button, { ButtonProps } from "../Button";
 import { typeGuard } from "tsafe/typeGuard";
 import { overwriteReadonlyProp } from "tsafe/lab/overwriteReadonlyProp";
 
@@ -24,6 +24,7 @@ export type ModalProps = {
         | [ModalProps.ActionAreaButtonProps, ...ModalProps.ActionAreaButtonProps[]]
         | ModalProps.ActionAreaButtonProps;
     style?: CSSProperties;
+    onClose?: () => void;
 };
 
 export namespace ModalProps {
@@ -53,6 +54,7 @@ const Modal = memo(
             buttons: buttons_props,
             size = "medium",
             style,
+            onClose,
             ...rest
         } = props;
 
@@ -76,6 +78,7 @@ const Modal = memo(
                 style={style}
                 ref={ref}
                 data-fr-concealing-backdrop={concealingBackdrop}
+                onClose={onClose}
             >
                 <div className={fr.cx("fr-container", "fr-container--fluid", "fr-container-md")}>
                     <div className={fr.cx("fr-grid-row", "fr-grid-row--center")}>
@@ -205,6 +208,8 @@ export function createModal(params: { isOpenedByDefault: boolean; id: string }):
     Component: (props: ModalProps) => JSX.Element;
     close: () => void;
     open: () => void;
+    isOpenedByDefault: boolean;
+    id: string;
 } {
     const { isOpenedByDefault, id } = params;
 
@@ -266,6 +271,8 @@ export function createModal(params: { isOpenedByDefault: boolean; id: string }):
         Component,
         buttonProps,
         open,
-        close
+        close,
+        isOpenedByDefault,
+        id
     };
 }

src/Modal/index.ts

@@ -0,0 +1 @@
+export * from "./Modal";

src/Modal/useIsModalOpen.ts

@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { assert } from "tsafe/assert";
+
+export function useIsModalOpen(modal: { isOpenedByDefault: boolean; id: string }): boolean {
+    const { id, isOpenedByDefault } = modal;
+
+    const [isModalOpen, setIsModalOpen] = useState(isOpenedByDefault);
+
+    useEffect(() => {
+        const element = document.getElementById(id);
+
+        assert(element !== null, `The ${id} modal isn't mounted`);
+
+        const onConceal = () => setIsModalOpen(false);
+
+        element.addEventListener("dsfr.conceal", onConceal);
+
+        const onDisclose = () => setIsModalOpen(true);
+
+        element.addEventListener("dsfr.disclose", onDisclose);
+
+        return () => {
+            element.removeEventListener("dsfr.conceal", onConceal);
+            element.removeEventListener("dsfr.disclose", onDisclose);
+        };
+    }, [id]);
+
+    return isModalOpen;
+}

src/useIsDark/client.ts

@@ -91,7 +91,7 @@ function getCurrentIsDarkFromHtmlAttribute(): boolean | undefined {
             return true;
     }
 
-    assert(false);
+    assert(false, `Unrecognized ${data_fr_theme} attribute value: ${colorSchemeFromHtmlAttribute}`);
 }
 
 export function startClientSideIsDarkLogic(params: {

stories/Modal.stories.tsx

@@ -14,10 +14,14 @@ 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)
 
-**Eg.:**  
-
 \`\`\`tsx
+"use client"; 
+// NOTE for Next App Router: As long as you avoid using the useIsModalOpen hook and use 
+// modal.buttonProps instead of modal.open() the Modal component can be used as a 
+// server component (you can remove "use client";) 
+
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
+import { useIsModalOpen } from "@codegouvfr/react-dsfr/Modal/useIsModalOpen";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 
 const modal = createModal({
@@ -26,23 +30,26 @@ const modal = createModal({
 });
 
 function Home(){
+
+    const isOpen = useIsModalOpen(modal);
+
+    console.log(\`Modal is currently: \${isOpen ? "open" : "closed"}\`);
+
     return (
         <>
             {/* ... */}
             <modal.Component title="foo modal title">
                 <h1>Foo modal content</h1>
             </modal.Component>
-            <Button nativeButtonProps={fooModal.buttonProps}>Open foo modal</Button> {/* Use this if you are in a Server component (Next AppDir) and you don't want to add "use client"; just because of the the Modal */}
-            <Button onClick={fooModal.open}>Open foo modal</Button> {/* ...otherwise this works just as well and is more versatile */}
-            <Button onClick={fooModal.close}>Close foo modal</Button>
+            <Button nativeButtonProps={modal.buttonProps}>Open foo modal</Button> {/* Use this if you are in Next App Dir and you don't want to label the "use client"; the component hosting the Modal. */}
+            <Button onClick={()=> modal.open()}>Open foo modal</Button> {/* ...otherwise modal.open() works just as well and is more versatile */}
+            <Button onClick={()=> modal.close()}>Close foo modal</Button>
         </>
     );
 );
 
 \`\`\`
 
-## The Modal component
-
 `,
     "argTypes": {
         "title": {

test/integration/next-appdir/ui/ClientComponent.tsx

@@ -5,11 +5,16 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
+import { useIsModalOpen } from "@codegouvfr/react-dsfr/Modal/useIsModalOpen";
 
 export function ClientComponent() {
 
   const { isDark } = useIsDark();
 
+  const isModalOpen = useIsModalOpen(modal);
+
+  console.log(`Modal ${modal.id} is currently: ${isModalOpen ? "open" : "closed"}`);
+
   return (
     <>
       <Stack spacing={2} direction="row" sx={{ mt: 5 }}>