@simplybusiness/mobius 4.4.0 → 4.4.2

package/dist/esm/components/Drawer/Drawer.js

@@ -26,20 +26,26 @@ const Drawer = /*#__PURE__*/ forwardRef((props, ref)=>{
             event.preventDefault();
             event.stopPropagation();
         }
+        // Name the callback function, so we can add and remove event listener
+        const transitionCallback = (e)=>{
+            // Close drawer only if the transition is on the dialog element
+            // As it can be on a child element (ie `<Button>` inside the drawer)
+            if (e.target === modalRef.current) {
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                doClose();
+            }
+        };
         const doClose = ()=>{
-            var _modalRef_current;
+            var _modalRef_current, _modalRef_current1;
             (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
             onClose === null || onClose === void 0 ? void 0 : onClose();
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.removeEventListener("transitionend", transitionCallback);
         };
         // 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
-            });
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", transitionCallback);
         } else {
             doClose();
         }

package/dist/esm/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 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":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","VisuallyHidden","mergeRefs","TRANSITION_CLASS_NAME","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","modalRef","hasDialogSupport","current","enabled","handleClose","event","preventDefault","stopPropagation","doClose","close","classList","remove","addEventListener","once","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","dialog","onCancel","aria-describedby","div","id","map","child","displayName"],"mappings":"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"}
+{"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      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close drawer only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\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(\"transitionend\", transitionCallback);\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":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","VisuallyHidden","mergeRefs","TRANSITION_CLASS_NAME","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","modalRef","hasDialogSupport","current","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","dialog","onCancel","aria-describedby","div","id","map","child","displayName"],"mappings":"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"}

package/dist/esm/components/Modal/Modal.js

@@ -34,20 +34,26 @@ const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
             event.preventDefault();
             event.stopPropagation();
         }
+        // Name the callback function, so we can add and remove event listener
+        const transitionCallback = (e)=>{
+            // Close modal only if the transition is on the dialog element
+            // As it can be on a child element (ie `<Button>` inside the drawer)
+            if (e.target === modalRef.current) {
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                doClose();
+            }
+        };
         const doClose = ()=>{
-            var _modalRef_current;
+            var _modalRef_current, _modalRef_current1;
             (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
             onClose === null || onClose === void 0 ? void 0 : onClose();
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.removeEventListener("transitionend", transitionCallback);
         };
         // 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
-            });
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", transitionCallback);
         } else {
             doClose();
         }

package/dist/esm/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 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":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","mergeRefs","TRANSITION_CLASS_NAME","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","hasOpened","modalRef","hasDialogSupport","enabled","handleClose","event","preventDefault","stopPropagation","doClose","close","classList","remove","addEventListener","once","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","dialog","onCancel","map","child","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      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close modal only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\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(\"transitionend\", transitionCallback);\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":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","mergeRefs","TRANSITION_CLASS_NAME","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","hasOpened","modalRef","hasDialogSupport","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","dialog","onCancel","map","child","displayName"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.4.0",
+  "version": "4.4.2",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -25,8 +25,8 @@
   "scripts": {
     "clean": "rm -rf dist",
     "build": "yarn run -T turbo run turbo:build",
-    "build:cjs": "swc --config-file ../.swcrc ./src -d ./dist/cjs -C module.type=commonjs",
-    "build:esm": "swc --config-file ../.swcrc ./src -d ./dist/esm -C module.type=es6",
+    "build:cjs": "cd src && swc --config-file ../../.swcrc . -d ../dist/cjs -C module.type=commonjs",
+    "build:esm": "cd src && swc --config-file ../../.swcrc . -d ../dist/esm -C module.type=es6",
     "build:types": "tsc --emitDeclarationOnly",
     "lint": "eslint --ext .tsx,.ts,.js,.jsx,.mjs .",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
@@ -40,20 +40,21 @@
     "@react-types/button": "^3.9.1",
     "@react-types/dialog": "^3.5.7",
     "@react-types/progress": "^3.5.1",
-    "@storybook/addon-links": "^7.6.7",
-    "@swc/core": "^1.3.102",
-    "@swc/jest": "^0.2.29",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/react": "^14.1.2",
+    "@storybook/addon-links": "^7.6.12",
+    "@swc/cli": "^0.3.9",
+    "@swc/core": "^1.4.0",
+    "@swc/jest": "^0.2.36",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "6.2.0",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^29.5.12",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "^20.10.6",
-    "@types/react": "18.2.46",
+    "@types/node": "^20.11.16",
+    "@types/react": "18.2.51",
     "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@typescript-eslint/parser": "^6.17.0",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "csstype": "^3.1.3",
     "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -61,15 +62,15 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.1.1",
-    "ts-jest": "^29.1.1",
+    "prettier": "^3.2.4",
+    "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"
   },
@@ -78,9 +79,8 @@
     "react-dom": "^16.13.1 || ^17.0.1 || ^18.0.0"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.4",
+    "@floating-ui/react": "^0.26.8",
     "@simplybusiness/icons": "^4.2.9",
-    "@swc/cli": "^0.1.63",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/Drawer/Drawer.tsx

@@ -54,21 +54,29 @@ const Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {
         event.stopPropagation();
       }
 
+      // Name the callback function, so we can add and remove event listener
+      const transitionCallback = (e: Event) => {
+        // Close drawer only if the transition is on the dialog element
+        // As it can be on a child element (ie `<Button>` inside the drawer)
+        if (e.target === modalRef.current) {
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          doClose();
+        }
+      };
+
       const doClose = () => {
         modalRef.current?.close();
         onClose?.();
+        modalRef.current?.removeEventListener(
+          "transitionend",
+          transitionCallback,
+        );
       };
 
       // Delay close to allow backdrop exit transition
       if (hasDialogSupport) {
         modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);
-        modalRef.current?.addEventListener(
-          "transitionend",
-          () => {
-            doClose();
-          },
-          { once: true },
-        );
+        modalRef.current?.addEventListener("transitionend", transitionCallback);
       } else {
         doClose();
       }

package/src/components/Modal/Modal.tsx

@@ -76,21 +76,29 @@ const Modal = forwardRef((props: ModalProps, ref: ModalRef) => {
         event.stopPropagation();
       }
 
+      // Name the callback function, so we can add and remove event listener
+      const transitionCallback = (e: Event) => {
+        // Close modal only if the transition is on the dialog element
+        // As it can be on a child element (ie `<Button>` inside the drawer)
+        if (e.target === modalRef.current) {
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          doClose();
+        }
+      };
+
       const doClose = () => {
         modalRef.current?.close();
         onClose?.();
+        modalRef.current?.removeEventListener(
+          "transitionend",
+          transitionCallback,
+        );
       };
 
       // Delay close to allow backdrop exit transition
       if (hasDialogSupport && animation) {
         modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);
-        modalRef.current?.addEventListener(
-          "transitionend",
-          () => {
-            doClose();
-          },
-          { once: true },
-        );
+        modalRef.current?.addEventListener("transitionend", transitionCallback);
       } else {
         doClose();
       }