@kaizen/components 0.0.0-canary-rollup-plugin-node-externals-v7-20240206233319 → 0.0.0-canary-unscrollable-20240221032028

package/dist/cjs/Modal/GenericModal/GenericModal.cjs

@@ -81,11 +81,20 @@ const GenericModal = /*#__PURE__*/function () {
         });
       }
     };
-    var onAfterLeaveHandler = function () {
+    var cleanUpAfterClose = function () {
       document.documentElement.classList.remove(GenericModal_module.unscrollable, GenericModal_module.pseudoScrollbar);
       if (onEscapeKeyup) {
         document.removeEventListener("keyup", onEscapeKeyup);
       }
+    };
+    /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
+    React.useEffect(function () {
+      return function () {
+        return cleanUpAfterClose();
+      };
+    }, []);
+    var onAfterLeaveHandler = function () {
+      cleanUpAfterClose();
       propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
     };
     return ReactDOM.createPortal(React.createElement(react.Transition, {

package/dist/cjs/Modal/GenericModal/GenericModal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GenericModal.cjs","sources":["../../../../src/Modal/GenericModal/GenericModal.tsx"],"sourcesContent":["import React, { useId, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { Transition } from \"@headlessui/react\"\nimport FocusLock from \"react-focus-lock\"\nimport { warn } from \"../util/console\"\nimport { ModalContext } from \"./context/ModalContext\"\nimport styles from \"./GenericModal.module.scss\"\n\nexport type GenericModalProps = {\n  id?: string\n  isOpen: boolean\n  children: React.ReactNode\n  focusLockDisabled?: boolean\n  onEscapeKeyup?: (event: KeyboardEvent) => void\n  onOutsideModalClick?: (event: React.MouseEvent) => void\n  onAfterLeave?: () => void\n}\n\nexport const GenericModal = ({\n  id: propsId,\n  children,\n  isOpen = true,\n  focusLockDisabled,\n  onEscapeKeyup,\n  onOutsideModalClick,\n  onAfterLeave: propsOnAfterLeave,\n}: GenericModalProps): JSX.Element => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  const labelledByID = useId()\n  const describedByID = useId()\n\n  const [scrollLayer, setScrollLayer] = useState<HTMLDivElement | null>(null)\n  const [modalLayer, setModalLayer] = useState<HTMLDivElement | null>(null)\n\n  const scrollModalToTop = (): void => {\n    // If we have a really long modal, the autofocus could land on an element down below\n    // causing the modal to scroll down and skipping over the content near the modal's top.\n    // Ensure that when the modal opens, we are at the top of its content.\n    requestAnimationFrame(() => {\n      if (!scrollLayer) return\n      scrollLayer.scrollTop = 0\n    })\n  }\n\n  const outsideModalClickHandler = (event: React.MouseEvent): void => {\n    if (event.target === scrollLayer || event.target === modalLayer) {\n      onOutsideModalClick?.(event)\n    }\n  }\n\n  const focusAccessibleLabel = (): void => {\n    if (modalLayer) {\n      const labelElement: HTMLElement | null =\n        document.getElementById(labelledByID)\n      if (labelElement) {\n        labelElement.focus()\n      }\n    }\n  }\n\n  const a11yWarn = (): void => {\n    if (!modalLayer) return\n    // Ensure that consumers have provided an element that labels the modal\n    // to meet ARIA accessibility guidelines.\n    if (!document.getElementById(labelledByID)) {\n      warn(\n        `When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.`\n      )\n    }\n  }\n\n  const preventBodyScroll = (): void => {\n    const hasScrollbar =\n      window.innerWidth > document.documentElement.clientWidth\n    const scrollStyles = [styles.unscrollable]\n\n    if (hasScrollbar) {\n      scrollStyles.push(styles.pseudoScrollbar)\n    }\n\n    document.documentElement.classList.add(...scrollStyles)\n  }\n\n  const onAfterEnterHandler = (): void => {\n    scrollModalToTop()\n    focusAccessibleLabel()\n    a11yWarn()\n  }\n\n  const onBeforeEnterHandler = (): void => {\n    preventBodyScroll()\n\n    if (onEscapeKeyup) {\n      document.addEventListener(\"keyup\", event => {\n        if (event.key === \"Escape\") {\n          onEscapeKeyup?.(event)\n        }\n      })\n    }\n  }\n\n  const onAfterLeaveHandler = (): void => {\n    document.documentElement.classList.remove(\n      styles.unscrollable,\n      styles.pseudoScrollbar\n    )\n\n    if (onEscapeKeyup) {\n      document.removeEventListener(\"keyup\", onEscapeKeyup)\n    }\n\n    propsOnAfterLeave?.()\n  }\n\n  return createPortal(\n    <Transition\n      appear={true}\n      show={isOpen}\n      enter={styles.animatingEnter}\n      leave={styles.animatingLeave}\n      beforeEnter={onBeforeEnterHandler}\n      afterEnter={onAfterEnterHandler}\n      afterLeave={onAfterLeaveHandler}\n      data-generic-modal-transition-wrapper\n      onClick={(e: React.MouseEvent): void => e.stopPropagation()}\n    >\n      <FocusLock\n        disabled={focusLockDisabled}\n        returnFocus={true}\n        // Disabling false positive\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={false}\n      >\n        <div className={styles.backdropLayer} />\n        {/* Disabling these because we don't want this to be keyboard focusable. Users can use Esc to achieve this with a keyboard.\n         */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={styles.scrollLayer}\n          ref={(scrollLayerRef): void => {\n            setScrollLayer(scrollLayerRef)\n          }}\n          onClick={outsideModalClickHandler}\n          data-testid={`${id}-scrollLayer`}\n        >\n          <ModalContext.Provider\n            value={{\n              labelledByID,\n              describedByID,\n            }}\n          >\n            <div\n              role=\"dialog\"\n              className={styles.modalLayer}\n              aria-labelledby={labelledByID}\n              aria-describedby={describedByID}\n              ref={(modalLayerRef): void => setModalLayer(modalLayerRef)}\n              data-testid={id}\n            >\n              {children}\n            </div>\n          </ModalContext.Provider>\n        </div>\n      </FocusLock>\n    </Transition>,\n    document.body\n  )\n}\n\nGenericModal.displayName = \"GenericModal\"\n"],"names":["GenericModal","_a","propsId","id","children","_b","isOpen","focusLockDisabled","onEscapeKeyup","onOutsideModalClick","propsOnAfterLeave","onAfterLeave","reactId","useId","labelledByID","describedByID","_c","useState","scrollLayer","setScrollLayer","_d","modalLayer","setModalLayer","scrollModalToTop","requestAnimationFrame","scrollTop","outsideModalClickHandler","event","target","focusAccessibleLabel","labelElement","document","getElementById","focus","a11yWarn","warn","preventBodyScroll","hasScrollbar","window","innerWidth","documentElement","clientWidth","scrollStyles","styles","unscrollable","push","pseudoScrollbar","classList","add","apply","onAfterEnterHandler","onBeforeEnterHandler","addEventListener","key","onAfterLeaveHandler","remove","removeEventListener","createPortal","React","createElement","Transition","appear","show","enter","animatingEnter","leave","animatingLeave","beforeEnter","afterEnter","afterLeave","onClick","e","stopPropagation","FocusLock","disabled","returnFocus","autoFocus","className","backdropLayer","ref","scrollLayerRef","concat","ModalContext","Provider","value","role","modalLayerRef","body","displayName"],"mappings":"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"}
+{"version":3,"file":"GenericModal.cjs","sources":["../../../../src/Modal/GenericModal/GenericModal.tsx"],"sourcesContent":["import React, { useEffect, useId, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { Transition } from \"@headlessui/react\"\nimport FocusLock from \"react-focus-lock\"\nimport { warn } from \"../util/console\"\nimport { ModalContext } from \"./context/ModalContext\"\nimport styles from \"./GenericModal.module.scss\"\n\nexport type GenericModalProps = {\n  id?: string\n  isOpen: boolean\n  children: React.ReactNode\n  focusLockDisabled?: boolean\n  onEscapeKeyup?: (event: KeyboardEvent) => void\n  onOutsideModalClick?: (event: React.MouseEvent) => void\n  onAfterLeave?: () => void\n}\n\nexport const GenericModal = ({\n  id: propsId,\n  children,\n  isOpen = true,\n  focusLockDisabled,\n  onEscapeKeyup,\n  onOutsideModalClick,\n  onAfterLeave: propsOnAfterLeave,\n}: GenericModalProps): JSX.Element => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  const labelledByID = useId()\n  const describedByID = useId()\n\n  const [scrollLayer, setScrollLayer] = useState<HTMLDivElement | null>(null)\n  const [modalLayer, setModalLayer] = useState<HTMLDivElement | null>(null)\n\n  const scrollModalToTop = (): void => {\n    // If we have a really long modal, the autofocus could land on an element down below\n    // causing the modal to scroll down and skipping over the content near the modal's top.\n    // Ensure that when the modal opens, we are at the top of its content.\n    requestAnimationFrame(() => {\n      if (!scrollLayer) return\n      scrollLayer.scrollTop = 0\n    })\n  }\n\n  const outsideModalClickHandler = (event: React.MouseEvent): void => {\n    if (event.target === scrollLayer || event.target === modalLayer) {\n      onOutsideModalClick?.(event)\n    }\n  }\n\n  const focusAccessibleLabel = (): void => {\n    if (modalLayer) {\n      const labelElement: HTMLElement | null =\n        document.getElementById(labelledByID)\n      if (labelElement) {\n        labelElement.focus()\n      }\n    }\n  }\n\n  const a11yWarn = (): void => {\n    if (!modalLayer) return\n    // Ensure that consumers have provided an element that labels the modal\n    // to meet ARIA accessibility guidelines.\n    if (!document.getElementById(labelledByID)) {\n      warn(\n        `When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.`\n      )\n    }\n  }\n\n  const preventBodyScroll = (): void => {\n    const hasScrollbar =\n      window.innerWidth > document.documentElement.clientWidth\n    const scrollStyles = [styles.unscrollable]\n\n    if (hasScrollbar) {\n      scrollStyles.push(styles.pseudoScrollbar)\n    }\n\n    document.documentElement.classList.add(...scrollStyles)\n  }\n\n  const onAfterEnterHandler = (): void => {\n    scrollModalToTop()\n    focusAccessibleLabel()\n    a11yWarn()\n  }\n\n  const onBeforeEnterHandler = (): void => {\n    preventBodyScroll()\n\n    if (onEscapeKeyup) {\n      document.addEventListener(\"keyup\", event => {\n        if (event.key === \"Escape\") {\n          onEscapeKeyup?.(event)\n        }\n      })\n    }\n  }\n\n  const cleanUpAfterClose = (): void => {\n    document.documentElement.classList.remove(\n      styles.unscrollable,\n      styles.pseudoScrollbar\n    )\n\n    if (onEscapeKeyup) {\n      document.removeEventListener(\"keyup\", onEscapeKeyup)\n    }\n  }\n\n  /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/\n  useEffect(() => () => cleanUpAfterClose(), [])\n\n  const onAfterLeaveHandler = (): void => {\n    cleanUpAfterClose()\n    propsOnAfterLeave?.()\n  }\n\n  return createPortal(\n    <Transition\n      appear={true}\n      show={isOpen}\n      enter={styles.animatingEnter}\n      leave={styles.animatingLeave}\n      beforeEnter={onBeforeEnterHandler}\n      afterEnter={onAfterEnterHandler}\n      afterLeave={onAfterLeaveHandler}\n      data-generic-modal-transition-wrapper\n      onClick={(e: React.MouseEvent): void => e.stopPropagation()}\n    >\n      <FocusLock\n        disabled={focusLockDisabled}\n        returnFocus={true}\n        // Disabling false positive\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={false}\n      >\n        <div className={styles.backdropLayer} />\n        {/* Disabling these because we don't want this to be keyboard focusable. Users can use Esc to achieve this with a keyboard.\n         */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={styles.scrollLayer}\n          ref={(scrollLayerRef): void => {\n            setScrollLayer(scrollLayerRef)\n          }}\n          onClick={outsideModalClickHandler}\n          data-testid={`${id}-scrollLayer`}\n        >\n          <ModalContext.Provider\n            value={{\n              labelledByID,\n              describedByID,\n            }}\n          >\n            <div\n              role=\"dialog\"\n              className={styles.modalLayer}\n              aria-labelledby={labelledByID}\n              aria-describedby={describedByID}\n              ref={(modalLayerRef): void => setModalLayer(modalLayerRef)}\n              data-testid={id}\n            >\n              {children}\n            </div>\n          </ModalContext.Provider>\n        </div>\n      </FocusLock>\n    </Transition>,\n    document.body\n  )\n}\n\nGenericModal.displayName = \"GenericModal\"\n"],"names":["GenericModal","_a","propsId","id","children","_b","isOpen","focusLockDisabled","onEscapeKeyup","onOutsideModalClick","propsOnAfterLeave","onAfterLeave","reactId","useId","labelledByID","describedByID","_c","useState","scrollLayer","setScrollLayer","_d","modalLayer","setModalLayer","scrollModalToTop","requestAnimationFrame","scrollTop","outsideModalClickHandler","event","target","focusAccessibleLabel","labelElement","document","getElementById","focus","a11yWarn","warn","preventBodyScroll","hasScrollbar","window","innerWidth","documentElement","clientWidth","scrollStyles","styles","unscrollable","push","pseudoScrollbar","classList","add","apply","onAfterEnterHandler","onBeforeEnterHandler","addEventListener","key","cleanUpAfterClose","remove","removeEventListener","useEffect","onAfterLeaveHandler","createPortal","React","createElement","Transition","appear","show","enter","animatingEnter","leave","animatingLeave","beforeEnter","afterEnter","afterLeave","onClick","e","stopPropagation","FocusLock","disabled","returnFocus","autoFocus","className","backdropLayer","ref","scrollLayerRef","concat","ModalContext","Provider","value","role","modalLayerRef","body","displayName"],"mappings":"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"}

package/dist/cjs/index.css

@@ -1,11 +1,11 @@
 .Select-module_container__TaMKg{position:relative;width:100%}.Select-module_notFullWidth__Mr-3G{width:180px}
 .Main-module_main__hMyB1{z-index:0}
 .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
-.FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
 .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
+.FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
+.FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
 .Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
 .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
-.FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
 .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
 .Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 3px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
 .SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}

package/dist/esm/Modal/GenericModal/GenericModal.mjs

@@ -1,4 +1,4 @@
-import React, { useId, useState } from 'react';
+import React, { useId, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { Transition } from '@headlessui/react';
 import FocusLock from 'react-focus-lock';
@@ -79,11 +79,20 @@ const GenericModal = /*#__PURE__*/function () {
         });
       }
     };
-    var onAfterLeaveHandler = function () {
+    var cleanUpAfterClose = function () {
       document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar);
       if (onEscapeKeyup) {
         document.removeEventListener("keyup", onEscapeKeyup);
       }
+    };
+    /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
+    useEffect(function () {
+      return function () {
+        return cleanUpAfterClose();
+      };
+    }, []);
+    var onAfterLeaveHandler = function () {
+      cleanUpAfterClose();
       propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();
     };
     return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {

package/dist/esm/Modal/GenericModal/GenericModal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GenericModal.mjs","sources":["../../../../src/Modal/GenericModal/GenericModal.tsx"],"sourcesContent":["import React, { useId, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { Transition } from \"@headlessui/react\"\nimport FocusLock from \"react-focus-lock\"\nimport { warn } from \"../util/console\"\nimport { ModalContext } from \"./context/ModalContext\"\nimport styles from \"./GenericModal.module.scss\"\n\nexport type GenericModalProps = {\n  id?: string\n  isOpen: boolean\n  children: React.ReactNode\n  focusLockDisabled?: boolean\n  onEscapeKeyup?: (event: KeyboardEvent) => void\n  onOutsideModalClick?: (event: React.MouseEvent) => void\n  onAfterLeave?: () => void\n}\n\nexport const GenericModal = ({\n  id: propsId,\n  children,\n  isOpen = true,\n  focusLockDisabled,\n  onEscapeKeyup,\n  onOutsideModalClick,\n  onAfterLeave: propsOnAfterLeave,\n}: GenericModalProps): JSX.Element => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  const labelledByID = useId()\n  const describedByID = useId()\n\n  const [scrollLayer, setScrollLayer] = useState<HTMLDivElement | null>(null)\n  const [modalLayer, setModalLayer] = useState<HTMLDivElement | null>(null)\n\n  const scrollModalToTop = (): void => {\n    // If we have a really long modal, the autofocus could land on an element down below\n    // causing the modal to scroll down and skipping over the content near the modal's top.\n    // Ensure that when the modal opens, we are at the top of its content.\n    requestAnimationFrame(() => {\n      if (!scrollLayer) return\n      scrollLayer.scrollTop = 0\n    })\n  }\n\n  const outsideModalClickHandler = (event: React.MouseEvent): void => {\n    if (event.target === scrollLayer || event.target === modalLayer) {\n      onOutsideModalClick?.(event)\n    }\n  }\n\n  const focusAccessibleLabel = (): void => {\n    if (modalLayer) {\n      const labelElement: HTMLElement | null =\n        document.getElementById(labelledByID)\n      if (labelElement) {\n        labelElement.focus()\n      }\n    }\n  }\n\n  const a11yWarn = (): void => {\n    if (!modalLayer) return\n    // Ensure that consumers have provided an element that labels the modal\n    // to meet ARIA accessibility guidelines.\n    if (!document.getElementById(labelledByID)) {\n      warn(\n        `When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.`\n      )\n    }\n  }\n\n  const preventBodyScroll = (): void => {\n    const hasScrollbar =\n      window.innerWidth > document.documentElement.clientWidth\n    const scrollStyles = [styles.unscrollable]\n\n    if (hasScrollbar) {\n      scrollStyles.push(styles.pseudoScrollbar)\n    }\n\n    document.documentElement.classList.add(...scrollStyles)\n  }\n\n  const onAfterEnterHandler = (): void => {\n    scrollModalToTop()\n    focusAccessibleLabel()\n    a11yWarn()\n  }\n\n  const onBeforeEnterHandler = (): void => {\n    preventBodyScroll()\n\n    if (onEscapeKeyup) {\n      document.addEventListener(\"keyup\", event => {\n        if (event.key === \"Escape\") {\n          onEscapeKeyup?.(event)\n        }\n      })\n    }\n  }\n\n  const onAfterLeaveHandler = (): void => {\n    document.documentElement.classList.remove(\n      styles.unscrollable,\n      styles.pseudoScrollbar\n    )\n\n    if (onEscapeKeyup) {\n      document.removeEventListener(\"keyup\", onEscapeKeyup)\n    }\n\n    propsOnAfterLeave?.()\n  }\n\n  return createPortal(\n    <Transition\n      appear={true}\n      show={isOpen}\n      enter={styles.animatingEnter}\n      leave={styles.animatingLeave}\n      beforeEnter={onBeforeEnterHandler}\n      afterEnter={onAfterEnterHandler}\n      afterLeave={onAfterLeaveHandler}\n      data-generic-modal-transition-wrapper\n      onClick={(e: React.MouseEvent): void => e.stopPropagation()}\n    >\n      <FocusLock\n        disabled={focusLockDisabled}\n        returnFocus={true}\n        // Disabling false positive\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={false}\n      >\n        <div className={styles.backdropLayer} />\n        {/* Disabling these because we don't want this to be keyboard focusable. Users can use Esc to achieve this with a keyboard.\n         */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={styles.scrollLayer}\n          ref={(scrollLayerRef): void => {\n            setScrollLayer(scrollLayerRef)\n          }}\n          onClick={outsideModalClickHandler}\n          data-testid={`${id}-scrollLayer`}\n        >\n          <ModalContext.Provider\n            value={{\n              labelledByID,\n              describedByID,\n            }}\n          >\n            <div\n              role=\"dialog\"\n              className={styles.modalLayer}\n              aria-labelledby={labelledByID}\n              aria-describedby={describedByID}\n              ref={(modalLayerRef): void => setModalLayer(modalLayerRef)}\n              data-testid={id}\n            >\n              {children}\n            </div>\n          </ModalContext.Provider>\n        </div>\n      </FocusLock>\n    </Transition>,\n    document.body\n  )\n}\n\nGenericModal.displayName = \"GenericModal\"\n"],"names":["GenericModal","_a","propsId","id","children","_b","isOpen","focusLockDisabled","onEscapeKeyup","onOutsideModalClick","propsOnAfterLeave","onAfterLeave","reactId","useId","labelledByID","describedByID","_c","useState","scrollLayer","setScrollLayer","_d","modalLayer","setModalLayer","scrollModalToTop","requestAnimationFrame","scrollTop","outsideModalClickHandler","event","target","focusAccessibleLabel","labelElement","document","getElementById","focus","a11yWarn","warn","preventBodyScroll","hasScrollbar","window","innerWidth","documentElement","clientWidth","scrollStyles","styles","unscrollable","push","pseudoScrollbar","classList","add","apply","onAfterEnterHandler","onBeforeEnterHandler","addEventListener","key","onAfterLeaveHandler","remove","removeEventListener","createPortal","React","createElement","Transition","appear","show","enter","animatingEnter","leave","animatingLeave","beforeEnter","afterEnter","afterLeave","onClick","e","stopPropagation","FocusLock","disabled","returnFocus","autoFocus","className","backdropLayer","ref","scrollLayerRef","concat","ModalContext","Provider","value","role","modalLayerRef","body","displayName"],"mappings":"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"}
+{"version":3,"file":"GenericModal.mjs","sources":["../../../../src/Modal/GenericModal/GenericModal.tsx"],"sourcesContent":["import React, { useEffect, useId, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { Transition } from \"@headlessui/react\"\nimport FocusLock from \"react-focus-lock\"\nimport { warn } from \"../util/console\"\nimport { ModalContext } from \"./context/ModalContext\"\nimport styles from \"./GenericModal.module.scss\"\n\nexport type GenericModalProps = {\n  id?: string\n  isOpen: boolean\n  children: React.ReactNode\n  focusLockDisabled?: boolean\n  onEscapeKeyup?: (event: KeyboardEvent) => void\n  onOutsideModalClick?: (event: React.MouseEvent) => void\n  onAfterLeave?: () => void\n}\n\nexport const GenericModal = ({\n  id: propsId,\n  children,\n  isOpen = true,\n  focusLockDisabled,\n  onEscapeKeyup,\n  onOutsideModalClick,\n  onAfterLeave: propsOnAfterLeave,\n}: GenericModalProps): JSX.Element => {\n  const reactId = useId()\n  const id = propsId ?? reactId\n\n  const labelledByID = useId()\n  const describedByID = useId()\n\n  const [scrollLayer, setScrollLayer] = useState<HTMLDivElement | null>(null)\n  const [modalLayer, setModalLayer] = useState<HTMLDivElement | null>(null)\n\n  const scrollModalToTop = (): void => {\n    // If we have a really long modal, the autofocus could land on an element down below\n    // causing the modal to scroll down and skipping over the content near the modal's top.\n    // Ensure that when the modal opens, we are at the top of its content.\n    requestAnimationFrame(() => {\n      if (!scrollLayer) return\n      scrollLayer.scrollTop = 0\n    })\n  }\n\n  const outsideModalClickHandler = (event: React.MouseEvent): void => {\n    if (event.target === scrollLayer || event.target === modalLayer) {\n      onOutsideModalClick?.(event)\n    }\n  }\n\n  const focusAccessibleLabel = (): void => {\n    if (modalLayer) {\n      const labelElement: HTMLElement | null =\n        document.getElementById(labelledByID)\n      if (labelElement) {\n        labelElement.focus()\n      }\n    }\n  }\n\n  const a11yWarn = (): void => {\n    if (!modalLayer) return\n    // Ensure that consumers have provided an element that labels the modal\n    // to meet ARIA accessibility guidelines.\n    if (!document.getElementById(labelledByID)) {\n      warn(\n        `When using the Modal component, you must provide a label for the modal.\n        Make sure you have a <ModalAccessibleLabel /> component with content that labels the modal.`\n      )\n    }\n  }\n\n  const preventBodyScroll = (): void => {\n    const hasScrollbar =\n      window.innerWidth > document.documentElement.clientWidth\n    const scrollStyles = [styles.unscrollable]\n\n    if (hasScrollbar) {\n      scrollStyles.push(styles.pseudoScrollbar)\n    }\n\n    document.documentElement.classList.add(...scrollStyles)\n  }\n\n  const onAfterEnterHandler = (): void => {\n    scrollModalToTop()\n    focusAccessibleLabel()\n    a11yWarn()\n  }\n\n  const onBeforeEnterHandler = (): void => {\n    preventBodyScroll()\n\n    if (onEscapeKeyup) {\n      document.addEventListener(\"keyup\", event => {\n        if (event.key === \"Escape\") {\n          onEscapeKeyup?.(event)\n        }\n      })\n    }\n  }\n\n  const cleanUpAfterClose = (): void => {\n    document.documentElement.classList.remove(\n      styles.unscrollable,\n      styles.pseudoScrollbar\n    )\n\n    if (onEscapeKeyup) {\n      document.removeEventListener(\"keyup\", onEscapeKeyup)\n    }\n  }\n\n  /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/\n  useEffect(() => () => cleanUpAfterClose(), [])\n\n  const onAfterLeaveHandler = (): void => {\n    cleanUpAfterClose()\n    propsOnAfterLeave?.()\n  }\n\n  return createPortal(\n    <Transition\n      appear={true}\n      show={isOpen}\n      enter={styles.animatingEnter}\n      leave={styles.animatingLeave}\n      beforeEnter={onBeforeEnterHandler}\n      afterEnter={onAfterEnterHandler}\n      afterLeave={onAfterLeaveHandler}\n      data-generic-modal-transition-wrapper\n      onClick={(e: React.MouseEvent): void => e.stopPropagation()}\n    >\n      <FocusLock\n        disabled={focusLockDisabled}\n        returnFocus={true}\n        // Disabling false positive\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={false}\n      >\n        <div className={styles.backdropLayer} />\n        {/* Disabling these because we don't want this to be keyboard focusable. Users can use Esc to achieve this with a keyboard.\n         */}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n        <div\n          className={styles.scrollLayer}\n          ref={(scrollLayerRef): void => {\n            setScrollLayer(scrollLayerRef)\n          }}\n          onClick={outsideModalClickHandler}\n          data-testid={`${id}-scrollLayer`}\n        >\n          <ModalContext.Provider\n            value={{\n              labelledByID,\n              describedByID,\n            }}\n          >\n            <div\n              role=\"dialog\"\n              className={styles.modalLayer}\n              aria-labelledby={labelledByID}\n              aria-describedby={describedByID}\n              ref={(modalLayerRef): void => setModalLayer(modalLayerRef)}\n              data-testid={id}\n            >\n              {children}\n            </div>\n          </ModalContext.Provider>\n        </div>\n      </FocusLock>\n    </Transition>,\n    document.body\n  )\n}\n\nGenericModal.displayName = \"GenericModal\"\n"],"names":["GenericModal","_a","propsId","id","children","_b","isOpen","focusLockDisabled","onEscapeKeyup","onOutsideModalClick","propsOnAfterLeave","onAfterLeave","reactId","useId","labelledByID","describedByID","_c","useState","scrollLayer","setScrollLayer","_d","modalLayer","setModalLayer","scrollModalToTop","requestAnimationFrame","scrollTop","outsideModalClickHandler","event","target","focusAccessibleLabel","labelElement","document","getElementById","focus","a11yWarn","warn","preventBodyScroll","hasScrollbar","window","innerWidth","documentElement","clientWidth","scrollStyles","styles","unscrollable","push","pseudoScrollbar","classList","add","apply","onAfterEnterHandler","onBeforeEnterHandler","addEventListener","key","cleanUpAfterClose","remove","removeEventListener","useEffect","onAfterLeaveHandler","createPortal","React","createElement","Transition","appear","show","enter","animatingEnter","leave","animatingLeave","beforeEnter","afterEnter","afterLeave","onClick","e","stopPropagation","FocusLock","disabled","returnFocus","autoFocus","className","backdropLayer","ref","scrollLayerRef","concat","ModalContext","Provider","value","role","modalLayerRef","body","displayName"],"mappings":"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"}

package/dist/esm/index.css

@@ -1,11 +1,11 @@
 .Select-module_container__TaMKg{position:relative;width:100%}.Select-module_notFullWidth__Mr-3G{width:180px}
 .Main-module_main__hMyB1{z-index:0}
 .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
-.Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
 .FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
 .FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
-.Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
+.Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
 .Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
+.Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
 .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
 .Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 3px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
 .SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}