Add a hook to observe if the header modal menu is open or not

Author: garronej

src/Header.tsx src/Header/Header.tsxsrc/Header.tsx renamed to src/Header/Header.tsx

@@ -1,20 +1,20 @@
 import React, { memo, forwardRef, useId, type ReactNode, type CSSProperties } from "react";
-import { fr } from "./fr";
-import { createComponentI18nApi } from "./i18n";
+import { fr } from "../fr";
+import { createComponentI18nApi } from "../i18n";
 import { symToStr } from "tsafe/symToStr";
-import { cx } from "./tools/cx";
-import { getLink } from "./link";
-import type { RegisteredLinkProps } from "./link";
+import { cx } from "../tools/cx";
+import { getLink } from "../link";
+import type { RegisteredLinkProps } from "../link";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import type { FrIconClassName, RiIconClassName } from "./fr/generatedFromCss/classNames";
-import type { MainNavigationProps } from "./MainNavigation";
-import { MainNavigation } from "./MainNavigation";
-import { Display } from "./Display/Display";
-import { setBrandTopAndHomeLinkProps } from "./zz_internal/brandTopAndHomeLinkProps";
+import type { FrIconClassName, RiIconClassName } from "../fr/generatedFromCss/classNames";
+import type { MainNavigationProps } from "../MainNavigation";
+import { MainNavigation } from "../MainNavigation";
+import { Display } from "../Display/Display";
+import { setBrandTopAndHomeLinkProps } from "../zz_internal/brandTopAndHomeLinkProps";
 import { typeGuard } from "tsafe/typeGuard";
-import { SearchButton } from "./SearchBar/SearchButton";
-import { useTranslation as useSearchBarTranslation } from "./SearchBar/SearchBar";
+import { SearchButton } from "../SearchBar/SearchButton";
+import { useTranslation as useSearchBarTranslation } from "../SearchBar/SearchBar";
 
 export type HeaderProps = {
     className?: string;
@@ -96,6 +96,8 @@ export namespace HeaderProps {
     }
 }
 
+export const headerMenuModalId = "header-menu-modal";
+
 /** @see <https://components.react-dsfr.fr/?path=/docs/components-header> */
 export const Header = memo(
     forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
@@ -122,17 +124,15 @@ export const Header = memo(
 
         setBrandTopAndHomeLinkProps({ brandTop, homeLinkProps });
 
-        const { menuButtonId, menuModalId, searchModalId, searchInputId } = (function useClosure() {
+        const { menuButtonId, searchModalId, searchInputId } = (function useClosure() {
             const id = useId();
 
             const menuButtonId = `button-${id}`;
-            const menuModalId = `modal-${id}`;
             const searchModalId = `modal-${id}`;
             const searchInputId = `search-${id}-input`;
 
             return {
                 menuButtonId,
-                menuModalId,
                 searchModalId,
                 searchInputId
             };
@@ -253,7 +253,7 @@ export const Header = memo(
                                                 <button
                                                     className={fr.cx("fr-btn--menu", "fr-btn")}
                                                     data-fr-opened="false"
-                                                    aria-controls={menuModalId}
+                                                    aria-controls={headerMenuModalId}
                                                     aria-haspopup="menu"
                                                     id={menuButtonId}
                                                     title={t("menu")}
@@ -372,13 +372,13 @@ export const Header = memo(
                     {(navigation !== undefined || quickAccessItems.length !== 0) && (
                         <div
                             className={cx(fr.cx("fr-header__menu", "fr-modal"), classes.menu)}
-                            id={menuModalId}
+                            id={headerMenuModalId}
                             aria-labelledby={menuButtonId}
                         >
                             <div className={fr.cx("fr-container")}>
                                 <button
                                     className={fr.cx("fr-btn--close", "fr-btn")}
-                                    aria-controls={menuModalId}
+                                    aria-controls={headerMenuModalId}
                                     title={t("close")}
                                 >
                                     {t("close")}

src/Header/index.ts

@@ -0,0 +1,9 @@
+export { default } from "./Header";
+export {
+    Header,
+    type HeaderProps,
+    HeaderQuickAccessItem,
+    type HeaderQuickAccessItemProps,
+    addHeaderTranslations,
+    useTranslation
+} from "./Header";

src/Header/useIsHeaderMenuModalOpen.ts

@@ -0,0 +1,9 @@
+import { headerMenuModalId } from "./Header";
+import { useIsModalOpen } from "../Modal/useIsModalOpen";
+
+export function useIsHeaderMenuModalOpen() {
+    return useIsModalOpen({
+        "id": headerMenuModalId,
+        "isOpenedByDefault": false
+    });
+}

stories/Header.stories.tsx

@@ -12,10 +12,20 @@ const { meta, getStory } = getStoryFactory({
     "wrappedComponent": { Header },
     "description": `
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete)
-- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Header.tsx))  
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Header.tsx)  
   
-See also [\\<MainNavigation \\/\\>](https://components.react-dsfr.fr/?path=/docs/components-mainnavigation)
+See also [\\<MainNavigation \\/\\>](https://components.react-dsfr.fr/?path=/docs/components-mainnavigation)  
+  
+*NOTE*: On small screens (mobile), you can click on the burger menu to open the menu modal.
+You can watch if the menu modal is open or not with the \`useIsHeaderMenuModalOpen\` hook.  
+
+\`\`\`tsx  
+
+import { useIsHeaderMenuModalOpen } from "@codegouvfr/react-dsfr/Header/useIsHeaderMenuModalOpen";
+
+const isOpen = useIsHeaderMenuModalOpen();
 
+\`\`\`  
 
 `,
     "argTypes": {

stories/getStory.tsx

@@ -149,7 +149,11 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
                             ...(doHideImportInstruction
                                 ? []
                                 : [
-                                      `\`import { ${componentName} } from "@codegouvfr/react-dsfr/${componentName}"\``
+                                      `\`\`\`tsx  `,
+                                      `  `,
+                                      `import { ${componentName} } from "@codegouvfr/react-dsfr/${componentName}"\``,
+                                      ` `,
+                                      `\`\`\``
                                   ]),
                             ...(description === undefined ? [] : [description])
                         ].join("  \n")

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

@@ -6,14 +6,18 @@ 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";
+import { useIsHeaderMenuModalOpen } from "@codegouvfr/react-dsfr/Header/useIsHeaderMenuModalOpen";
 
 export function ClientComponent() {
 
   const { isDark } = useIsDark();
 
   const isModalOpen = useIsModalOpen(modal);
 
-  //console.log(`Modal ${modal.id} is currently: ${isModalOpen ? "open" : "closed"}`);
+  const isHeaderMenuModalOpen = useIsHeaderMenuModalOpen();
+
+  console.log(`Modal ${modal.id} is currently: ${isModalOpen ? "open" : "closed"}`);
+  console.log(`Header Modal is currently: ${isHeaderMenuModalOpen ? "open" : "closed"}`);
 
   return (
     <>