Call conceal after button callback

Author: garronej

src/Modal/useIsModalOpen.ts

@@ -24,7 +24,9 @@ export function useIsModalOpen(
         const observeDialogHtmlElement = (element: HTMLElement) => {
             const onConceal = () => {
                 setIsModalOpen(false);
-                getCurrentCallbacks()?.onConceal?.();
+                setTimeout(() => {
+                    getCurrentCallbacks()?.onConceal?.();
+                }, 0);
             };
             const onDisclose = () => {
                 setIsModalOpen(true);

test/integration/cra/public/index.html

@@ -5,8 +5,6 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="Web site created using create-react-app" />
-  <meta http-equiv="Content-Security-Policy"
-    content="require-trusted-types-for 'script'; trusted-types react-dsfr react-dsfr-asap" />
 
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/dsfr/favicon/apple-touch-icon.png" />
   <link rel="icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.svg" type="image/svg+xml" />

test/integration/cra/src/Home.tsx

@@ -1,9 +1,12 @@
+import { useState } from "react";
 import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import { fr } from "@codegouvfr/react-dsfr";
 import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
 import { SideMenu } from "@codegouvfr/react-dsfr/SideMenu";
 import { Table } from "@codegouvfr/react-dsfr/Table";
 import { routes } from "./router";
+import { Button } from "@codegouvfr/react-dsfr/Button";
+import { MyDialog, type DialogParams, type DialogResponse } from "./MyDialog";
 
 const sideMenuItems = [
     {
@@ -77,6 +80,10 @@ const sideMenuItems = [
 export function Home() {
     const { isDark, setIsDark } = useIsDark();
 
+    const [myDialogActions] = useState<{
+        open?: (params: DialogParams) => Promise<DialogResponse>
+    }>({});
+
     return (
         <>
             <Alert
@@ -106,8 +113,23 @@ export function Home() {
                 title="Titre de rubrique"
                 burgerMenuButtonText="Dans cette rubrique"
             />
-
             <TableExample />
+            <Button
+                type="button"
+                onClick={async () => {
+
+                    const response = await myDialogActions.open!({
+                        title: "Ma question",
+                        body: "Voulez-vous continuer ?",
+                    });
+
+                    alert(`Continuer: ${response.doProceed ? "oui" : "non"}`);
+
+                }}
+            >
+                Open Dialog 
+            </Button>
+            <MyDialog actions={myDialogActions} />
         </>
     );
 }

test/integration/cra/src/MyDialog.tsx

@@ -0,0 +1,89 @@
+import { createModal } from '@codegouvfr/react-dsfr/Modal'
+import { useIsModalOpen } from '@codegouvfr/react-dsfr/Modal/useIsModalOpen'
+import { useState, useEffect, useId } from 'react'
+
+type Props = {
+    actions: {
+        open?: (params: DialogParams) => Promise<DialogResponse>
+    }
+}
+
+export type DialogParams = {
+    title: string;
+    body: string;
+};
+
+export type DialogResponse = {
+    doProceed: boolean;
+};
+
+export function MyDialog(props: Props) {
+    const { actions } = props
+
+    const id = useId()
+
+    const [modal] = useState(() =>
+        createModal({
+            id: `myDialog-${id}`,
+            isOpenedByDefault: false,
+        })
+    );
+
+    const [openState, setOpenState] = useState<
+        | {
+            dialogParams: DialogParams;
+            resolve: (params: DialogResponse) => void
+        }
+        | undefined
+    >(undefined)
+
+    useEffect(() => {
+        actions.open = dialogParams =>
+            new Promise<DialogResponse>((resolve) => {
+                setOpenState({
+                    dialogParams,
+                    resolve,
+                })
+                modal.open();
+            })
+    }, []);
+
+    useIsModalOpen(modal, {
+        onConceal: async () => {
+
+            openState?.resolve({ doProceed: false });
+
+            setOpenState(undefined);
+        }
+    });
+
+    return (
+        <modal.Component
+            title={openState?.dialogParams.title}
+            buttons={[
+                {
+                    children: 'Annuler',
+                    onClick: () => {
+                        openState?.resolve({ doProceed: false })
+
+                        setOpenState(undefined)
+                    },
+                },
+                {
+                    children: 'Ok',
+                    onClick: () => {
+
+                        openState?.resolve({ 
+                            doProceed: true
+                        })
+
+                        setOpenState(undefined)
+                    },
+                },
+            ]}
+            concealingBackdrop={true}
+        >
+            {openState?.dialogParams.body}
+        </modal.Component>
+    );
+}