@simplybusiness/mobius 4.5.0 → 4.6.0

package/dist/cjs/hooks/useDialogPolyfill/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./useDialogPolyfill"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}
+
+//# sourceMappingURL=index.js.map

package/dist/cjs/hooks/useDialogPolyfill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/index.ts"],"sourcesContent":["export * from \"./useDialogPolyfill\";\n"],"names":[],"mappings":";;;;qBAAc"}

package/dist/cjs/hooks/useDialogPolyfill/useDialogPolyfill.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDialogPolyfill", {
+    enumerable: true,
+    get: function() {
+        return useDialogPolyfill;
+    }
+});
+const _react = require("react");
+const _utils = require("../../utils");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const useDialogPolyfill = (ref)=>{
+    const hasDialogSupport = (0, _utils.supportsDialog)();
+    (0, _react.useEffect)(()=>{
+        async function polyfillDialog() {
+            if (!hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
+                const { default: dialogPolyfill } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("dialog-polyfill")));
+                try {
+                    dialogPolyfill.registerDialog(ref.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);
+                }
+            }
+        }
+        polyfillDialog();
+    }, [
+        ref,
+        hasDialogSupport
+    ]);
+};
+
+//# sourceMappingURL=useDialogPolyfill.js.map

package/dist/cjs/hooks/useDialogPolyfill/useDialogPolyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts"],"sourcesContent":["import { MutableRefObject, useEffect } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = (\n  ref: MutableRefObject<HTMLDialogElement | null>,\n) => {\n  const hasDialogSupport = supportsDialog();\n\n  useEffect(() => {\n    async function polyfillDialog() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        ref.current !== null\n      ) {\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(ref.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\n    polyfillDialog();\n  }, [ref, hasDialogSupport]);\n};\n"],"names":["useDialogPolyfill","ref","hasDialogSupport","supportsDialog","useEffect","polyfillDialog","window","current","default","dialogPolyfill","registerDialog","error","console"],"mappings":";;;;+BAIaA;;;eAAAA;;;uBAJ+B;uBACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGxB,MAAMA,oBAAoB,CAC/BC;IAEA,MAAMC,mBAAmBC,IAAAA,qBAAc;IAEvCC,IAAAA,gBAAS,EAAC;QACR,eAAeC;YACb,IACE,CAACH,oBACD,OAAOI,WAAW,eAClBL,IAAIM,OAAO,KAAK,MAChB;gBACA,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBAEjD,IAAI;oBACFA,eAAeC,cAAc,CAACT,IAAIM,OAAO;gBAC3C,EAAE,OAAOI,OAAO;oBACd,mDAAmD;oBACnD,oEAAoE;oBACpE,qGAAqG;oBACrGC,QAAQD,KAAK,CAAC,kCAAkCA;gBAClD;YACF;QACF;QAEAN;IACF,GAAG;QAACJ;QAAKC;KAAiB;AAC5B"}

package/dist/esm/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  icon?: string;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  iconPosition?: \"left\" | \"right\";\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      icon,\n      iconPosition,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.\",\n      );\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${variant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["forwardRef","classNames","Loading","useButton","HAS_DEPRECATION_WARNING_SHOWN","Button","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","console","warn","classes","className","displayName"],"mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAAyBC,SAAS,QAAQ,wBAAwB;AAElE,IAAIC,gCAAgC;AAyCpC,MAAMC,uBACJL,WAAW,CAACM,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,IAAI,EACJC,YAAY,EACZ,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGd;IACJ,MAAM,EAAEe,WAAW,EAAE,GAAGlB,UAAUG;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCkB,QAAQC,IAAI,CACV;QAEFnB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMoB,UAAUvB,WACd,UACA,iBACA,CAAC,UAAU,EAAEa,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWK,SAAS;IAEtBL,WAAWK,SAAS,GAAGD;IAEvB,qBACE,KAACd;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,KAACV,eAAaM,YAAYA;;AAG7C;AAEFH,OAAOqB,WAAW,GAAG;AACrB,SAASrB,MAAM,GAAG"}
+{"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Loading } from \"./Loading\";\nimport { UseButtonProps, useButton } from \"../../hooks/useButton\";\n\nlet HAS_DEPRECATION_WARNING_SHOWN = false;\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant =\n  | \"primary\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"inverse\"\n  | \"inverse-ghost\"\n  | \"basic\"\n  | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n  extends UseButtonProps,\n    DOMProps,\n    RefAttributes<ButtonElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Shortlist of styles */\n  variant?: Variant;\n  size?: Size;\n  /** Display loading spinner */\n  isLoading?: boolean;\n  /** Display success style */\n  isSuccess?: boolean;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  icon?: string;\n  /**\n   * **Deprecated:** Please pass icon as part of component's children instead.\n   */\n  iconPosition?: \"left\" | \"right\";\n  children?: ReactNode;\n}\n\nexport type ButtonRef = Ref<ButtonElementType>;\n\nconst Button: ForwardedRefComponent<ButtonProps, ButtonElementType> =\n  forwardRef((props: ButtonProps, ref: ButtonRef) => {\n    const {\n      children,\n      elementType: Component = \"button\",\n      isDisabled,\n      isLoading,\n      isSuccess,\n      variant = \"primary\",\n      size = \"md\",\n      icon,\n      iconPosition,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onPress,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onClick,\n      ...otherProps\n    } = props;\n    const { buttonProps } = useButton(props);\n\n    if ((icon || iconPosition) && !HAS_DEPRECATION_WARNING_SHOWN) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"icon, iconPosition props have been deprecated in <Button> and will be removed in Mobius v4. Please pass icon as part of component's children instead.\",\n      );\n      HAS_DEPRECATION_WARNING_SHOWN = true;\n    }\n\n    // Reshape class name and apply to outer element\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Button\",\n      `--variant-${variant}`,\n      `--size-${size}`,\n      {\n        \"--is-disabled\": isDisabled,\n        \"--is-loading\": isLoading,\n        \"--is-success\": isSuccess && !isLoading,\n      },\n      otherProps.className,\n    );\n    otherProps.className = classes;\n\n    return (\n      <Component ref={ref} {...buttonProps} {...otherProps}>\n        {isLoading ? <Loading /> : children && children}\n      </Component>\n    );\n  });\n\nButton.displayName = \"Button\";\nexport { Button };\n"],"names":["forwardRef","classNames","Loading","useButton","HAS_DEPRECATION_WARNING_SHOWN","Button","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","console","warn","classes","className","displayName"],"mappings":"AAAA;;AAEA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAG3C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAAyBC,SAAS,QAAQ,wBAAwB;AAElE,IAAIC,gCAAgC;AA0CpC,MAAMC,uBACJL,WAAW,CAACM,OAAoBC;IAC9B,MAAM,EACJC,QAAQ,EACRC,aAAaC,YAAY,QAAQ,EACjCC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,IAAI,EACJC,YAAY,EACZ,6DAA6D;IAC7DC,OAAO,EACP,6DAA6D;IAC7DC,OAAO,EACP,GAAGC,YACJ,GAAGd;IACJ,MAAM,EAAEe,WAAW,EAAE,GAAGlB,UAAUG;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCkB,QAAQC,IAAI,CACV;QAEFnB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMoB,UAAUvB,WACd,UACA,iBACA,CAAC,UAAU,EAAEa,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWK,SAAS;IAEtBL,WAAWK,SAAS,GAAGD;IAEvB,qBACE,KAACd;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,KAACV,eAAaM,YAAYA;;AAG7C;AAEFH,OAAOqB,WAAW,GAAG;AACrB,SAASrB,MAAM,GAAG"}

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

@@ -1,108 +1,43 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
-import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
-import { supportsDialog } from "../../utils/polyfill-tests";
+import { forwardRef, useMemo, useRef } from "react";
 import { VisuallyHidden } from "../VisuallyHidden";
-import { mergeRefs } from "../../utils";
+import { mergeRefs, supportsDialog } from "../../utils";
 import { DrawerContext } from "./DrawerContext";
-const TRANSITION_CLASS_NAME = "--transition";
+import { useDialog } from "../../hooks";
+const TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
 const Drawer = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { isOpen, className, closeLabel, direction, announce = "Drawer opened on screen", onOpen, onClose, children } = props;
-    const hasOpened = useRef(false);
-    const modalRef = useRef(null);
-    const hasDialogSupport = supportsDialog();
-    // Fire onOpen once
-    if (onOpen && !hasOpened.current) {
-        onOpen();
-        hasOpened.current = true;
-    }
-    useBodyScrollLock({
-        enabled: isOpen
-    });
-    // Add close handler, to enable closing transitions
-    const handleClose = useCallback((event)=>{
-        if (event) {
-            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, _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", transitionCallback);
-        } else {
-            doClose();
-        }
-    }, [
-        onClose,
-        hasDialogSupport
-    ]);
-    const modalClasses = classNames("mobius", "mobius/Drawer", `--${direction}`, className, {
-        "--should-transition": hasDialogSupport
-    });
-    // Add polyfill for HTML Dialog in old browsers
-    useEffect(()=>{
-        async function toggleModal() {
-            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 import("dialog-polyfill");
-                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 && !((_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 (!isOpen && ((_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.open)) {
-                handleClose();
-            }
-        }
-        toggleModal();
-    }, [
+    const shouldTransition = supportsDialog();
+    const dialogRef = useRef(null);
+    const { close } = useDialog({
+        ref: dialogRef,
         isOpen,
         onOpen,
-        handleClose,
-        hasDialogSupport
-    ]);
+        onClose,
+        transition: {
+            isEnabled: true,
+            CSSVariable: TRANSITION_CSS_VARIABLE
+        }
+    });
+    const dialogClasses = classNames("mobius", "mobius/Drawer", `--${direction}`, className, {
+        "--should-transition": shouldTransition
+    });
     const contextValue = useMemo(()=>({
-            onClose: handleClose,
+            onClose: close,
             closeLabel
         }), [
-        handleClose,
+        close,
         closeLabel
     ]);
     return /*#__PURE__*/ _jsxs("dialog", {
         ref: mergeRefs([
-            modalRef,
+            dialogRef,
             ref
         ]),
-        onCancel: handleClose,
-        className: modalClasses,
+        onCancel: close,
+        className: dialogClasses,
         "aria-describedby": "screen-reader-announce",
         children: [
             /*#__PURE__*/ _jsx(VisuallyHidden, {

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  Ref,\n  SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\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\";\nimport { DrawerContext } from \"./DrawerContext\";\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  const contextValue = useMemo(\n    () => ({\n      onClose: handleClose,\n      closeLabel,\n    }),\n    [handleClose, closeLabel],\n  );\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      <DrawerContext.Provider value={contextValue}>\n        {children}\n      </DrawerContext.Provider>\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["classNames","forwardRef","useCallback","useEffect","useMemo","useRef","useBodyScrollLock","supportsDialog","VisuallyHidden","mergeRefs","DrawerContext","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","contextValue","dialog","onCancel","aria-describedby","div","id","Provider","value","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useMemo, useRef } from \"react\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs, supportsDialog } from \"../../utils\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport { useDialog } from \"../../hooks\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--drawer-transition-duration\";\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 shouldTransition = supportsDialog();\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: true,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const dialogClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": shouldTransition,\n    },\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={dialogClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      <DrawerContext.Provider value={contextValue}>\n        {children}\n      </DrawerContext.Provider>\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["classNames","forwardRef","useMemo","useRef","VisuallyHidden","mergeRefs","supportsDialog","DrawerContext","useDialog","TRANSITION_CSS_VARIABLE","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","shouldTransition","dialogRef","close","transition","isEnabled","CSSVariable","dialogClasses","contextValue","dialog","onCancel","aria-describedby","div","id","Provider","value","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAcC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AACzD,SAASC,cAAc,QAAQ,oBAAoB;AAEnD,SAASC,SAAS,EAAEC,cAAc,QAAQ,cAAc;AACxD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,SAAS,QAAQ,cAAc;AAKxC,MAAMC,0BAA0B;AAEhC,MAAMC,uBAAST,WAAW,CAACU,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,mBAAmBf;IACzB,MAAMgB,YAAYnB,OAAiC;IACnD,MAAM,EAAEoB,KAAK,EAAE,GAAGf,UAAU;QAC1BI,KAAKU;QACLT;QACAK;QACAC;QACAK,YAAY;YACVC,WAAW;YACXC,aAAajB;QACf;IACF;IAEA,MAAMkB,gBAAgB3B,WACpB,UACA,iBACA,CAAC,EAAE,EAAEgB,UAAU,CAAC,EAChBF,WACA;QACE,uBAAuBO;IACzB;IAGF,MAAMO,eAAe1B,QACnB,IAAO,CAAA;YACLiB,SAASI;YACTR;QACF,CAAA,GACA;QAACQ;QAAOR;KAAW;IAGrB,qBACE,MAACc;QACCjB,KAAKP,UAAU;YAACiB;YAAWV;SAAI;QAC/BkB,UAAUP;QACVT,WAAWa;QACXI,oBAAiB;;0BAEjB,KAAC3B;0BACC,cAAA,KAAC4B;oBAAIC,IAAG;8BAA0BhB;;;0BAEpC,KAACV,cAAc2B,QAAQ;gBAACC,OAAOP;0BAC5BR;;;;AAIT;AAEAV,OAAO0B,WAAW,GAAG;AACrB,SAAS1B,MAAM,GAAG"}

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
-import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
+import { forwardRef, useMemo, useRef } from "react";
 import { supportsDialog } from "../../utils/polyfill-tests";
 import { mergeRefs } from "../../utils";
 import { ModalContext } from "./ModalContext";
-const TRANSITION_CLASS_NAME = "--transition";
+import { useDialog } from "../../hooks";
+const TRANSITION_CSS_VARIABLE = "--modal-transition-duration";
 const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { isOpen, onClose, onOpen, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
     size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector } = props;
@@ -18,103 +18,38 @@ const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
             hasWarnedAboutMissingLabels.current = true;
         }
     }
-    const hasOpened = useRef(false);
-    const modalRef = useRef(null);
-    const hasDialogSupport = supportsDialog();
-    // Fire onOpen once
-    if (onOpen && !hasOpened.current) {
-        onOpen();
-        hasOpened.current = true;
-    }
-    useBodyScrollLock({
-        enabled: isOpen
-    });
-    // Add close handler, to enable closing animations
-    const handleClose = useCallback((event)=>{
-        if (event) {
-            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, _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", transitionCallback);
-        } else {
-            doClose();
-        }
-    }, [
+    const shouldTransition = supportsDialog();
+    const dialogRef = useRef(null);
+    const { close } = useDialog({
+        ref: dialogRef,
+        isOpen,
+        onOpen,
         onClose,
-        hasDialogSupport,
-        animation
-    ]);
+        transition: {
+            isEnabled: !!animation,
+            CSSVariable: TRANSITION_CSS_VARIABLE
+        }
+    });
     const modalClasses = classNames("mobius", "mobius/Modal", {
-        "--no-dialog-support": !hasDialogSupport,
-        "--should-transition": hasDialogSupport && animation,
+        "--no-dialog-support": !shouldTransition,
+        "--should-transition": shouldTransition && animation,
         "--slide-up": animation === "slideUp",
         "--fade": animation === "fade",
         "--is-fullscreen": isFullScreen
     }, className);
-    // Add polyfill for HTML Dialog in old browsers
-    useEffect(()=>{
-        async function toggleModal() {
-            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 import("dialog-polyfill");
-                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 && !((_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 (!isOpen && ((_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.open)) {
-                handleClose();
-            }
-        }
-        toggleModal();
-    }, [
-        isOpen,
-        onOpen,
-        handleClose,
-        hasDialogSupport
-    ]);
     const contextValue = useMemo(()=>({
-            onClose: handleClose,
+            onClose: close,
             closeLabel
         }), [
-        handleClose,
+        close,
         closeLabel
     ]);
     return /*#__PURE__*/ _jsx("dialog", {
         ref: mergeRefs([
-            modalRef,
+            dialogRef,
             ref
         ]),
-        onCancel: handleClose,
+        onCancel: close,
         className: modalClasses,
         children: /*#__PURE__*/ _jsx(ModalContext.Provider, {
             value: contextValue,

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  Ref,\n  SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\nimport { ModalContext } from \"./ModalContext\";\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  const contextValue = useMemo(\n    () => ({\n      onClose: handleClose,\n      closeLabel,\n    }),\n    [handleClose, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","forwardRef","useCallback","useEffect","useMemo","useRef","useBodyScrollLock","supportsDialog","mergeRefs","ModalContext","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","contextValue","dialog","onCancel","Provider","value","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { Ref, forwardRef, useMemo, useRef } from \"react\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\nimport { ModalContext } from \"./ModalContext\";\nimport { useDialog } from \"../../hooks\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--modal-transition-duration\";\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 shouldTransition = supportsDialog();\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: !!animation,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !shouldTransition, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": shouldTransition && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={modalClasses}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["classNames","forwardRef","useMemo","useRef","supportsDialog","mergeRefs","ModalContext","useDialog","TRANSITION_CSS_VARIABLE","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","shouldTransition","dialogRef","close","transition","isEnabled","CSSVariable","modalClasses","contextValue","dialog","onCancel","Provider","value","displayName"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,oBAAoB;AAC3C,SAAcC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AACzD,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,SAAS,QAAQ,cAAc;AAKxC,MAAMC,0BAA0B;AAEhC,MAAMC,sBAAQR,WAAW,CAACS,OAAmBC;IAC3C,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;IACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACf,GAAGd;IACJ,MAAMe,8BAA8BtB,OAAgB;IACpD,0BAA0B;IAC1B,IAAI,CAACsB,4BAA4BC,OAAO,EAAE;QACxC,IACEN,QACAC,cACAC,qBACAC,0BACAC,gBACA;YACAG,QAAQC,IAAI,CACV,CAAC,yJAAyJ,CAAC;YAE7JH,4BAA4BC,OAAO,GAAG;QACxC;IACF;IAEA,MAAMG,mBAAmBzB;IACzB,MAAM0B,YAAY3B,OAAiC;IACnD,MAAM,EAAE4B,KAAK,EAAE,GAAGxB,UAAU;QAC1BI,KAAKmB;QACLlB;QACAE;QACAD;QACAmB,YAAY;YACVC,WAAW,CAAC,CAACd;YACbe,aAAa1B;QACf;IACF;IAEA,MAAM2B,eAAenC,WACnB,UACA,gBACA;QACE,uBAAuB,CAAC6B;QACxB,uBAAuBA,oBAAoBV;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMoB,eAAelC,QACnB,IAAO,CAAA;YACLW,SAASkB;YACTd;QACF,CAAA,GACA;QAACc;QAAOd;KAAW;IAGrB,qBACE,KAACoB;QACC1B,KAAKN,UAAU;YAACyB;YAAWnB;SAAI;QAC/B2B,UAAUP;QACVf,WAAWmB;kBAEX,cAAA,KAAC7B,aAAaiC,QAAQ;YAACC,OAAOJ;sBAC3BrB;;;AAIT;AAEAN,MAAMgC,WAAW,GAAG;AACpB,SAAShC,KAAK,GAAG"}

package/dist/esm/hooks/index.js

@@ -1,6 +1,7 @@
 export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
+export * from "./useDialog";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";

package/dist/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,mBAAmB"}
+{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDialog\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,mBAAmB"}

package/dist/esm/hooks/useDialog/index.js

@@ -0,0 +1,3 @@
+export * from "./useDialog";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/useDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/useDialog/index.ts"],"sourcesContent":["export * from \"./useDialog\";\n"],"names":[],"mappings":"AAAA,cAAc,cAAc"}

package/dist/esm/hooks/useDialog/useDialog.js

@@ -0,0 +1,84 @@
+import { useCallback, useEffect } from "react";
+import { useDialogPolyfill } from "../useDialogPolyfill";
+import { useBodyScrollLock } from "../useBodyScrollLock";
+import { supportsDialog } from "../../utils";
+const TRANSITION_CLASS_NAME = "--transition";
+const FALLBACK_TRANSITION_DURATION = 0;
+export const useDialog = (props)=>{
+    const { ref, isOpen, transition, onOpen, onClose } = props;
+    const shouldTransition = supportsDialog() && transition.isEnabled;
+    // Read CSS variable value as number
+    const TRANSITION_DURATION_IN_MS = ref.current && Number(getComputedStyle(ref.current).getPropertyValue(transition.CSSVariable).replace("ms", "")) || FALLBACK_TRANSITION_DURATION;
+    useDialogPolyfill(ref);
+    useBodyScrollLock({
+        enabled: isOpen
+    });
+    const open = useCallback(()=>{
+        var _ref_current;
+        (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.showModal();
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    }, [
+        onOpen,
+        ref
+    ]);
+    const close = useCallback(()=>{
+        var _ref_current;
+        (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.close();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [
+        onClose,
+        ref
+    ]);
+    // Add close handler, to enable closing transitions
+    const handleClose = useCallback((event)=>{
+        if (event) {
+            // Prevent default event coming from onCancel,
+            // which is triggered by pressing ESC key
+            event.preventDefault();
+            // Ensure that nested `<dialog>` elements
+            // don't close the parent
+            event.stopPropagation();
+        }
+        if (shouldTransition) {
+            var _ref_current;
+            (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.classList.remove(TRANSITION_CLASS_NAME);
+            // Delay close to allow exit transition
+            setTimeout(()=>close(), TRANSITION_DURATION_IN_MS);
+        } else {
+            close();
+        }
+    }, [
+        TRANSITION_DURATION_IN_MS,
+        close,
+        ref,
+        shouldTransition
+    ]);
+    useEffect(()=>{
+        async function toggleDialog() {
+            var _ref_current, _ref_current1;
+            if (isOpen && !((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.open)) {
+                open();
+                // Fix opening transition in Safari being skipped
+                // by wrapping with setTimeout
+                setTimeout(()=>{
+                    var _ref_current;
+                    (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.classList.add(TRANSITION_CLASS_NAME);
+                }, 0);
+            } else if (!isOpen && ((_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.open)) {
+                handleClose();
+            }
+        }
+        toggleDialog();
+    }, [
+        handleClose,
+        isOpen,
+        open,
+        ref
+    ]);
+    return {
+        open,
+        close: handleClose
+    };
+};
+
+//# sourceMappingURL=useDialog.js.map

package/dist/esm/hooks/useDialog/useDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/useDialog/useDialog.ts"],"sourcesContent":["import {\n  MutableRefObject,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { useDialogPolyfill } from \"../useDialogPolyfill\";\nimport { useBodyScrollLock } from \"../useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils\";\n\nexport type TransitionProps = {\n  isEnabled: boolean;\n  CSSVariable: string;\n};\n\nexport type useDialogProps = {\n  ref: MutableRefObject<HTMLDialogElement | null>;\n  transition: TransitionProps;\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n};\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\nconst FALLBACK_TRANSITION_DURATION = 0;\n\nexport const useDialog = (props: useDialogProps) => {\n  const { ref, isOpen, transition, onOpen, onClose } = props;\n  const shouldTransition = supportsDialog() && transition.isEnabled;\n\n  // Read CSS variable value as number\n  const TRANSITION_DURATION_IN_MS =\n    (ref.current &&\n      Number(\n        getComputedStyle(ref.current)\n          .getPropertyValue(transition.CSSVariable)\n          .replace(\"ms\", \"\"),\n      )) ||\n    FALLBACK_TRANSITION_DURATION;\n\n  useDialogPolyfill(ref);\n  useBodyScrollLock({ enabled: isOpen });\n\n  const open = useCallback(() => {\n    ref.current?.showModal();\n    onOpen?.();\n  }, [onOpen, ref]);\n\n  const close = useCallback(() => {\n    ref.current?.close();\n    onClose?.();\n  }, [onClose, ref]);\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        // Prevent default event coming from onCancel,\n        // which is triggered by pressing ESC key\n        event.preventDefault();\n        // Ensure that nested `<dialog>` elements\n        // don't close the parent\n        event.stopPropagation();\n      }\n\n      if (shouldTransition) {\n        ref.current?.classList.remove(TRANSITION_CLASS_NAME);\n        // Delay close to allow exit transition\n        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);\n      } else {\n        close();\n      }\n    },\n    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition],\n  );\n\n  useEffect(() => {\n    async function toggleDialog() {\n      if (isOpen && !ref.current?.open) {\n        open();\n        // Fix opening transition in Safari being skipped\n        // by wrapping with setTimeout\n        setTimeout(() => {\n          ref.current?.classList.add(TRANSITION_CLASS_NAME);\n        }, 0);\n      } else if (!isOpen && ref.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleDialog();\n  }, [handleClose, isOpen, open, ref]);\n\n  return {\n    open,\n    close: handleClose,\n  };\n};\n"],"names":["useCallback","useEffect","useDialogPolyfill","useBodyScrollLock","supportsDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","useDialog","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","isEnabled","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","enabled","open","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","toggleDialog","add"],"mappings":"AAAA,SAGEA,WAAW,EACXC,SAAS,QACJ,QAAQ;AACf,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,cAAc,QAAQ,cAAc;AAe7C,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAErC,OAAO,MAAMC,YAAY,CAACC;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBV,oBAAoBO,WAAWI,SAAS;IAEjE,oCAAoC;IACpC,MAAMC,4BACJ,AAACP,IAAIQ,OAAO,IACVC,OACEC,iBAAiBV,IAAIQ,OAAO,EACzBG,gBAAgB,CAACT,WAAWU,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBhB;IAEFJ,kBAAkBO;IAClBN,kBAAkB;QAAEoB,SAASb;IAAO;IAEpC,MAAMc,OAAOxB,YAAY;YACvBS;SAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAagB,SAAS;QACtBb,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMiB,QAAQ1B,YAAY;YACxBS;SAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAaiB,KAAK;QAClBb,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMkB,cAAc3B,YAClB,CAAC4B;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIhB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAasB,SAAS,CAACC,MAAM,CAAC3B;YAC9B,uCAAuC;YACvC4B,WAAW,IAAMP,SAASV;QAC5B,OAAO;YACLU;QACF;IACF,GACA;QAACV;QAA2BU;QAAOjB;QAAKK;KAAiB;IAG3Db,UAAU;QACR,eAAeiC;gBACEzB,cAOOA;YAPtB,IAAIC,UAAU,GAACD,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAae,IAAI,GAAE;gBAChCA;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BS,WAAW;wBACTxB;qBAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAasB,SAAS,CAACI,GAAG,CAAC9B;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACK,YAAUD,gBAAAA,IAAIQ,OAAO,cAAXR,oCAAAA,cAAae,IAAI,GAAE;gBACvCG;YACF;QACF;QAEAO;IACF,GAAG;QAACP;QAAajB;QAAQc;QAAMf;KAAI;IAEnC,OAAO;QACLe;QACAE,OAAOC;IACT;AACF,EAAE"}

package/dist/esm/hooks/useDialogPolyfill/index.js

@@ -0,0 +1,3 @@
+export * from "./useDialogPolyfill";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/useDialogPolyfill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/index.ts"],"sourcesContent":["export * from \"./useDialogPolyfill\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB"}