@simplybusiness/mobius 4.3.0 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 4.3.2
+
+### Patch Changes
+
+- 047db6d: Fix intermittent iOS <=15.2 issue when dialog-polyfill loads
+- 424ba56: Fix exported types
+- Updated dependencies [424ba56]
+  - @simplybusiness/icons@4.2.8
+
+## 4.3.1
+
+### Patch Changes
+
+- ee6a685: Fix an issue where `<Drawer>` positions incorrectly on iPhone/iPad rotation. This also fixes `<Modal>` positioning in iOS <= 15.2
+- 7af10a5: Fix runtime errors for `<Modal>` and `<Drawer>` when using dialog-polyfill on iOS <= 15.2
+
 ## 4.3.0
 
 ### Minor Changes

package/dist/cjs/components/Drawer/Drawer.js

@@ -62,11 +62,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const TRANSITION_CLASS_NAME = "--transition";
 const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { isOpen, className, closeLabel, direction, announce = "Drawer opened on screen", onOpen, onClose, children } = props;
     const hasOpened = (0, _react.useRef)(false);
     const modalRef = (0, _react.useRef)(null);
-    const dialog = modalRef.current;
+    const hasDialogSupport = (0, _polyfilltests.supportsDialog)();
     // Fire onOpen once
     if (onOpen && !hasOpened.current) {
         onOpen();
@@ -75,43 +76,58 @@ const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     (0, _useBodyScrollLock.useBodyScrollLock)({
         enabled: isOpen
     });
-    // Add close handler, to enable closing animations
+    // Add close handler, to enable closing transitions
     const handleClose = (0, _react.useCallback)((event)=>{
         if (event) {
             event.preventDefault();
             event.stopPropagation();
         }
         const doClose = ()=>{
-            dialog === null || dialog === void 0 ? void 0 : dialog.close();
+            var _modalRef_current;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
             onClose === null || onClose === void 0 ? void 0 : onClose();
         };
-        // Delay close to allow exit animation
-        dialog === null || dialog === void 0 ? void 0 : dialog.classList.add("close");
-        dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("animationend", ()=>{
-            dialog.classList.remove("close");
+        // Delay close to allow backdrop exit transition
+        if (hasDialogSupport) {
+            var _modalRef_current, _modalRef_current1;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.classList.remove(TRANSITION_CLASS_NAME);
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", ()=>{
+                doClose();
+            }, {
+                once: true
+            });
+        } else {
             doClose();
-        }, {
-            once: true
-        });
+        }
     }, [
         onClose,
-        dialog
+        hasDialogSupport
     ]);
-    const modalClasses = (0, _dedupe.default)("mobius", "mobius/Drawer", `--${direction}`, className);
+    const modalClasses = (0, _dedupe.default)("mobius", "mobius/Drawer", `--${direction}`, className, {
+        "--should-transition": hasDialogSupport
+    });
     // Add polyfill for HTML Dialog in old browsers
     (0, _react.useEffect)(()=>{
         async function toggleModal() {
-            var _modalRef_current;
-            if (!(0, _polyfilltests.supportsDialog)() && typeof window !== "undefined") {
+            var _modalRef_current, _modalRef_current1;
+            if (!hasDialogSupport && typeof window !== "undefined" && modalRef.current !== null) {
                 // eslint-disable-next-line import/no-extraneous-dependencies
                 const { default: dialogPolyfill } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("dialog-polyfill")));
-                dialogPolyfill.registerDialog(modalRef.current);
+                try {
+                    dialogPolyfill.registerDialog(modalRef.current);
+                } catch (error) {
+                    // In iOS 15 <= 15.2 this intermittently fails with
+                    // TypeError: null is not an object (evaluating 'element.showModal')
+                    // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
+                    console.error("Failed to load dialog-polyfill", error);
+                }
             }
-            if (isOpen) {
-                var _modalRef_current1;
-                (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.showModal();
+            if (isOpen && !((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open)) {
+                var _modalRef_current2, _modalRef_current3;
+                (_modalRef_current2 = modalRef.current) === null || _modalRef_current2 === void 0 ? void 0 : _modalRef_current2.showModal();
+                (_modalRef_current3 = modalRef.current) === null || _modalRef_current3 === void 0 ? void 0 : _modalRef_current3.classList.add(TRANSITION_CLASS_NAME);
                 onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-            } else if ((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open) {
+            } else if (!isOpen && ((_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.open)) {
                 handleClose();
             }
         }
@@ -119,7 +135,8 @@ const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     }, [
         isOpen,
         onOpen,
-        handleClose
+        handleClose,
+        hasDialogSupport
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("dialog", {
         ref: (0, _utils.mergeRefs)([

package/dist/cjs/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement>(null);\n  const dialog = modalRef.current as HTMLDialogElement;\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        dialog?.close();\n        onClose?.();\n      };\n\n      // Delay close to allow exit animation\n      dialog?.classList.add(\"close\");\n      dialog?.addEventListener(\n        \"animationend\",\n        () => {\n          dialog.classList.remove(\"close\");\n          doClose();\n        },\n        { once: true },\n      );\n    },\n    [onClose, dialog],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (!supportsDialog() && typeof window !== \"undefined\") {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);\n      }\n\n      if (isOpen) {\n        modalRef.current?.showModal();\n        onOpen?.();\n      } else if (modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","useRef","modalRef","dialog","current","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","doClose","close","classList","add","addEventListener","remove","once","modalClasses","classNames","useEffect","toggleModal","supportsDialog","window","default","dialogPolyfill","registerDialog","showModal","open","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"AAAA;;;;;+BA6HSA;;;eAAAA;;;;+DA3Hc;uBAWhB;mCAC2B;+BACH;gCACA;uBAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,MAAMA,uBAASC,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,YAAYC,IAAAA,aAAM,EAAU;IAClC,MAAMC,WAAWD,IAAAA,aAAM,EAAoB;IAC3C,MAAME,SAASD,SAASE,OAAO;IAE/B,mBAAmB;IACnB,IAAIP,UAAU,CAACG,UAAUI,OAAO,EAAE;QAChCP;QACAG,UAAUI,OAAO,GAAG;IACtB;IAEAC,IAAAA,oCAAiB,EAAC;QAAEC,SAASd;IAAO;IAEpC,kDAAkD;IAClD,MAAMe,cAAcC,IAAAA,kBAAW,EAC7B,CAACC;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,MAAMC,UAAU;YACdT,mBAAAA,6BAAAA,OAAQU,KAAK;YACbf,oBAAAA,8BAAAA;QACF;QAEA,sCAAsC;QACtCK,mBAAAA,6BAAAA,OAAQW,SAAS,CAACC,GAAG,CAAC;QACtBZ,mBAAAA,6BAAAA,OAAQa,gBAAgB,CACtB,gBACA;YACEb,OAAOW,SAAS,CAACG,MAAM,CAAC;YACxBL;QACF,GACA;YAAEM,MAAM;QAAK;IAEjB,GACA;QAACpB;QAASK;KAAO;IAGnB,MAAMgB,eAAeC,IAAAA,eAAU,EAC7B,UACA,iBACA,CAAC,EAAE,EAAEzB,UAAU,CAAC,EAChBF;IAGF,+CAA+C;IAC/C4B,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBAUFpB;YATX,IAAI,CAACqB,IAAAA,6BAAc,OAAM,OAAOC,WAAW,aAAa;gBACtD,6DAA6D;gBAC7D,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBACjDA,eAAeC,cAAc,CAACzB,SAASE,OAAO;YAChD;YAEA,IAAIZ,QAAQ;oBACVU;iBAAAA,qBAAAA,SAASE,OAAO,cAAhBF,yCAAAA,mBAAkB0B,SAAS;gBAC3B/B,mBAAAA,6BAAAA;YACF,OAAO,KAAIK,oBAAAA,SAASE,OAAO,cAAhBF,wCAAAA,kBAAkB2B,IAAI,EAAE;gBACjCtB;YACF;QACF;QAEAe;IACF,GAAG;QAAC9B;QAAQK;QAAQU;KAAY;IAEhC,qBACE,sBAACJ;QACCZ,KAAKuC,IAAAA,gBAAS,EAAC;YAAC5B;YAAUX;SAAI;QAC9BwC,UAAUxB;QACVd,WAAW0B;QACXa,oBAAiB;;0BAEjB,qBAACC,8BAAc;0BACb,cAAA,qBAACC;oBAAIC,IAAG;8BAA0BvC;;;YAEnCwC,eAAQ,CAACC,GAAG,CAACtC,UAAUuC,CAAAA;gBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;oBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;wBACzBxC,SAASS;wBACTb;oBACF;gBACF;gBAEA,OAAO4C;YACT;;;AAGN;AAEAlD,OAAOqD,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\n          \"transitionend\",\n          () => {\n            doClose();\n          },\n          { once: true },\n        );\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": hasDialogSupport,\n    },\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","TRANSITION_CLASS_NAME","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","useRef","modalRef","hasDialogSupport","supportsDialog","current","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","doClose","close","classList","remove","addEventListener","once","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","dialog","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"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"}

package/dist/cjs/components/Modal/Modal.js

@@ -61,8 +61,8 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+const TRANSITION_CLASS_NAME = "--transition";
 const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
-    var _window;
     const { isOpen, onClose, onOpen, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
     size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector } = props;
     const hasWarnedAboutMissingLabels = (0, _react.useRef)(false);
@@ -75,8 +75,7 @@ const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     }
     const hasOpened = (0, _react.useRef)(false);
     const modalRef = (0, _react.useRef)(null);
-    const dialog = modalRef.current;
-    const noPreference = (_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia("(prefers-reduced-motion: no-preference)");
+    const hasDialogSupport = (0, _polyfilltests.supportsDialog)();
     // Fire onOpen once
     if (onOpen && !hasOpened.current) {
         onOpen();
@@ -92,13 +91,15 @@ const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             event.stopPropagation();
         }
         const doClose = ()=>{
-            dialog === null || dialog === void 0 ? void 0 : dialog.close();
+            var _modalRef_current;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
             onClose === null || onClose === void 0 ? void 0 : onClose();
         };
-        if (animation) {
-            dialog === null || dialog === void 0 ? void 0 : dialog.classList.add("close");
-            dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("animationend", ()=>{
-                dialog.classList.remove("close");
+        // Delay close to allow backdrop exit transition
+        if (hasDialogSupport && animation) {
+            var _modalRef_current, _modalRef_current1;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.classList.remove(TRANSITION_CLASS_NAME);
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", ()=>{
                 doClose();
             }, {
                 once: true
@@ -107,31 +108,39 @@ const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             doClose();
         }
     }, [
-        animation,
-        dialog,
-        onClose
+        onClose,
+        hasDialogSupport,
+        animation
     ]);
     const modalClasses = (0, _dedupe.default)("mobius", "mobius/Modal", {
-        animation,
+        "--no-dialog-support": !hasDialogSupport,
+        "--should-transition": hasDialogSupport && animation,
         "--slide-up": animation === "slideUp",
         "--fade": animation === "fade",
-        "--has-reduced-motion": !noPreference.matches,
         "--is-fullscreen": isFullScreen
     }, className);
     // Add polyfill for HTML Dialog in old browsers
     (0, _react.useEffect)(()=>{
         async function toggleModal() {
-            var _modalRef_current;
-            if (!(0, _polyfilltests.supportsDialog)() && typeof window !== "undefined") {
+            var _modalRef_current, _modalRef_current1;
+            if (!hasDialogSupport && typeof window !== "undefined" && modalRef.current !== null) {
                 // eslint-disable-next-line import/no-extraneous-dependencies
                 const { default: dialogPolyfill } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("dialog-polyfill")));
-                dialogPolyfill.registerDialog(modalRef.current);
+                try {
+                    dialogPolyfill.registerDialog(modalRef.current);
+                } catch (error) {
+                    // In iOS 15 <= 15.2 this intermittently fails with
+                    // TypeError: null is not an object (evaluating 'element.showModal')
+                    // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
+                    console.error("Failed to load dialog-polyfill", error);
+                }
             }
-            if (isOpen) {
-                var _modalRef_current1;
-                (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.showModal();
+            if (isOpen && !((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open)) {
+                var _modalRef_current2, _modalRef_current3;
+                (_modalRef_current2 = modalRef.current) === null || _modalRef_current2 === void 0 ? void 0 : _modalRef_current2.showModal();
+                (_modalRef_current3 = modalRef.current) === null || _modalRef_current3 === void 0 ? void 0 : _modalRef_current3.classList.add(TRANSITION_CLASS_NAME);
                 onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-            } else if ((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open) {
+            } else if (!isOpen && ((_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.open)) {
                 handleClose();
             }
         }
@@ -139,7 +148,8 @@ const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     }, [
         isOpen,
         onOpen,
-        handleClose
+        handleClose,
+        hasDialogSupport
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("dialog", {
         ref: (0, _utils.mergeRefs)([

package/dist/cjs/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement>(null);\n  const dialog = modalRef.current as HTMLDialogElement;\n  const noPreference = window?.matchMedia(\n    \"(prefers-reduced-motion: no-preference)\",\n  );\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        dialog?.close();\n        onClose?.();\n      };\n\n      if (animation) {\n        dialog?.classList.add(\"close\");\n        dialog?.addEventListener(\n          \"animationend\",\n          () => {\n            dialog.classList.remove(\"close\");\n            doClose();\n          },\n          { once: true },\n        );\n      } else {\n        doClose();\n      }\n    },\n    [animation, dialog, onClose],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--has-reduced-motion\": !noPreference.matches,\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (!supportsDialog() && typeof window !== \"undefined\") {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);\n      }\n\n      if (isOpen) {\n        modalRef.current?.showModal();\n        onOpen?.();\n      } else if (modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n    >\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","forwardRef","props","ref","window","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","useRef","current","console","warn","hasOpened","modalRef","dialog","noPreference","matchMedia","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","doClose","close","classList","add","addEventListener","remove","once","modalClasses","classNames","matches","useEffect","toggleModal","supportsDialog","default","dialogPolyfill","registerDialog","showModal","open","mergeRefs","onCancel","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport && animation) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\n          \"transitionend\",\n          () => {\n            doClose();\n          },\n          { once: true },\n        );\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport, animation],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": hasDialogSupport && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n    >\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","TRANSITION_CLASS_NAME","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","useRef","current","console","warn","hasOpened","modalRef","hasDialogSupport","supportsDialog","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","doClose","close","classList","remove","addEventListener","once","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","dialog","mergeRefs","onCancel","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"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"}