@simplybusiness/mobius 4.4.6 → 4.5.1

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

@@ -12,56 +12,16 @@ Object.defineProperty(exports, "Modal", {
 const _jsxruntime = require("react/jsx-runtime");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _react = require("react");
-const _useBodyScrollLock = require("../../hooks/useBodyScrollLock");
 const _polyfilltests = require("../../utils/polyfill-tests");
 const _utils = require("../../utils");
+const _ModalContext = require("./ModalContext");
+const _hooks = require("../../hooks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-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 TRANSITION_CLASS_NAME = "--transition";
+const TRANSITION_CSS_VARIABLE = "--modal-transition-duration";
 const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { isOpen, onClose, onOpen, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
     size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector } = props;
@@ -73,108 +33,42 @@ const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             hasWarnedAboutMissingLabels.current = true;
         }
     }
-    const hasOpened = (0, _react.useRef)(false);
-    const modalRef = (0, _react.useRef)(null);
-    const hasDialogSupport = (0, _polyfilltests.supportsDialog)();
-    // Fire onOpen once
-    if (onOpen && !hasOpened.current) {
-        onOpen();
-        hasOpened.current = true;
-    }
-    (0, _useBodyScrollLock.useBodyScrollLock)({
-        enabled: isOpen
-    });
-    // Add close handler, to enable closing animations
-    const handleClose = (0, _react.useCallback)((event)=>{
-        // `transitionend` may be called from another component but `event` may be undefined.
-        // This fixes an issue where closing `<Accordion>` inside `<Modal>` will close both
-        if (!event) return;
-        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 = (0, _polyfilltests.supportsDialog)();
+    const dialogRef = (0, _react.useRef)(null);
+    const { close } = (0, _hooks.useDialog)({
+        ref: dialogRef,
+        isOpen,
+        onOpen,
         onClose,
-        hasDialogSupport,
-        animation
-    ]);
+        transition: {
+            isEnabled: !!animation,
+            CSSVariable: TRANSITION_CSS_VARIABLE
+        }
+    });
     const modalClasses = (0, _dedupe.default)("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
-    (0, _react.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 Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("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 = (0, _react.useMemo)(()=>({
+            onClose: close,
+            closeLabel
+        }), [
+        close,
+        closeLabel
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("dialog", {
         ref: (0, _utils.mergeRefs)([
-            modalRef,
+            dialogRef,
             ref
         ]),
-        onCancel: handleClose,
+        onCancel: close,
         className: modalClasses,
-        children: _react.Children.map(children, (child)=>{
-            if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
-                return /*#__PURE__*/ (0, _react.cloneElement)(child, {
-                    onClose: handleClose,
-                    closeLabel
-                });
-            }
-            return child;
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalContext.ModalContext.Provider, {
+            value: contextValue,
+            children: children
         })
     });
 });

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 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      // `transitionend` may be called from another component but `event` may be undefined.\n      // This fixes an issue where closing `<Accordion>` inside `<Modal>` will close both\n      if (!event) return;\n\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":["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","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","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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"}
+{"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":["Modal","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","useRef","current","console","warn","shouldTransition","supportsDialog","dialogRef","close","useDialog","transition","isEnabled","CSSVariable","modalClasses","classNames","contextValue","useMemo","dialog","mergeRefs","onCancel","ModalContext","Provider","value","displayName"],"mappings":"AAAA;;;;;+BAiGSA;;;eAAAA;;;;+DA/Fc;uBAC0B;+BAClB;uBAEL;8BACG;uBACH;;;;;;AAK1B,MAAMC,0BAA0B;AAEhC,MAAMD,sBAAQE,IAAAA,iBAAU,EAAC,CAACC,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,8BAA8BC,IAAAA,aAAM,EAAU;IACpD,0BAA0B;IAC1B,IAAI,CAACD,4BAA4BE,OAAO,EAAE;QACxC,IACEP,QACAC,cACAC,qBACAC,0BACAC,gBACA;YACAI,QAAQC,IAAI,CACV,CAAC,yJAAyJ,CAAC;YAE7JJ,4BAA4BE,OAAO,GAAG;QACxC;IACF;IAEA,MAAMG,mBAAmBC,IAAAA,6BAAc;IACvC,MAAMC,YAAYN,IAAAA,aAAM,EAA2B;IACnD,MAAM,EAAEO,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1BvB,KAAKqB;QACLpB;QACAE;QACAD;QACAsB,YAAY;YACVC,WAAW,CAAC,CAACjB;YACbkB,aAAa7B;QACf;IACF;IAEA,MAAM8B,eAAeC,IAAAA,eAAU,EAC7B,UACA,gBACA;QACE,uBAAuB,CAACT;QACxB,uBAAuBA,oBAAoBX;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,MAAMwB,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACL5B,SAASoB;YACThB;QACF,CAAA,GACA;QAACgB;QAAOhB;KAAW;IAGrB,qBACE,qBAACyB;QACC/B,KAAKgC,IAAAA,gBAAS,EAAC;YAACX;YAAWrB;SAAI;QAC/BiC,UAAUX;QACVjB,WAAWsB;kBAEX,cAAA,qBAACO,0BAAY,CAACC,QAAQ;YAACC,OAAOP;sBAC3BzB;;;AAIT;AAEAR,MAAMyC,WAAW,GAAG"}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ModalContext", {
+    enumerable: true,
+    get: function() {
+        return ModalContext;
+    }
+});
+const _react = require("react");
+const ModalContext = /*#__PURE__*/ (0, _react.createContext)({
+    onClose: ()=>{},
+    closeLabel: undefined
+});
+
+//# sourceMappingURL=ModalContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Modal/ModalContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { ModalContextProps } from \"./types\";\n\nexport const ModalContext = createContext<ModalContextProps>({\n  onClose: () => {},\n  closeLabel: undefined,\n});\n"],"names":["ModalContext","createContext","onClose","closeLabel","undefined"],"mappings":";;;;+BAGaA;;;eAAAA;;;uBAHiB;AAGvB,MAAMA,6BAAeC,IAAAA,oBAAa,EAAoB;IAC3DC,SAAS,KAAO;IAChBC,YAAYC;AACd"}

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

@@ -2,15 +2,24 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "Modal", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Modal: function() {
         return Modal;
+    },
+    useModal: function() {
+        return _useModal.useModal;
     }
 });
 const _Content = require("./Content");
 const _Header = require("./Header");
 const _Modal = require("./Modal");
+const _useModal = require("./useModal");
 const Modal = Object.assign(_Modal.Modal, {
     Header: _Header.Header,
     Content: _Content.Content

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import {\n  Content,\n  DivElementType as ModalContentDivElementType,\n  ContentProps as ModalContentProps,\n} from \"./Content\";\nimport {\n  Header,\n  HeaderElementType as ModalHeaderElementType,\n  HeaderProps as ModalHeaderProps,\n} from \"./Header\";\nimport { Modal as ModalComponent } from \"./Modal\";\nimport { ModalProps } from \"./types\";\n\nconst Modal = Object.assign(ModalComponent, {\n  Header,\n  Content,\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n\nexport type {\n  ModalContentDivElementType,\n  ModalContentProps,\n  ModalHeaderElementType,\n  ModalHeaderProps,\n  ModalProps,\n};\n"],"names":["Modal","Object","assign","ModalComponent","Header","Content","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;yBAfF;wBAKA;uBACiC;AAGxC,MAAMA,QAAQC,OAAOC,MAAM,CAACC,YAAc,EAAE;IAC1CC,QAAAA,cAAM;IACNC,SAAAA,gBAAO;AACT;AAEAL,MAAMM,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import {\n  Content,\n  DivElementType as ModalContentDivElementType,\n  ContentProps as ModalContentProps,\n} from \"./Content\";\nimport {\n  Header,\n  HeaderElementType as ModalHeaderElementType,\n  HeaderProps as ModalHeaderProps,\n} from \"./Header\";\nimport { Modal as ModalComponent } from \"./Modal\";\nimport { ModalProps, ModalContextProps } from \"./types\";\nimport { useModal } from \"./useModal\";\n\nconst Modal = Object.assign(ModalComponent, {\n  Header,\n  Content,\n});\n\nModal.displayName = \"Modal\";\nexport { Modal, useModal };\n\nexport type {\n  ModalContextProps,\n  ModalContentDivElementType,\n  ModalContentProps,\n  ModalHeaderElementType,\n  ModalHeaderProps,\n  ModalProps,\n};\n"],"names":["Modal","useModal","Object","assign","ModalComponent","Header","Content","displayName"],"mappings":";;;;;;;;;;;IAoBSA,KAAK;eAALA;;IAAOC,QAAQ;eAARA,kBAAQ;;;yBAhBjB;wBAKA;uBACiC;0BAEf;AAEzB,MAAMD,QAAQE,OAAOC,MAAM,CAACC,YAAc,EAAE;IAC1CC,QAAAA,cAAM;IACNC,SAAAA,gBAAO;AACT;AAEAN,MAAMO,WAAW,GAAG"}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useModal", {
+    enumerable: true,
+    get: function() {
+        return useModal;
+    }
+});
+const _react = require("react");
+const _ModalContext = require("./ModalContext");
+const useModal = ()=>{
+    const { onClose, closeLabel } = (0, _react.useContext)(_ModalContext.ModalContext);
+    return {
+        onClose,
+        closeLabel
+    };
+};
+
+//# sourceMappingURL=useModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Modal/useModal.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { ModalContext } from \"./ModalContext\";\n\nexport const useModal = () => {\n  const { onClose, closeLabel } = useContext(ModalContext);\n\n  return { onClose, closeLabel };\n};\n"],"names":["useModal","onClose","closeLabel","useContext","ModalContext"],"mappings":";;;;+BAGaA;;;eAAAA;;;uBAHc;8BACE;AAEtB,MAAMA,WAAW;IACtB,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,IAAAA,iBAAU,EAACC,0BAAY;IAEvD,OAAO;QAAEH;QAASC;IAAW;AAC/B"}

package/dist/cjs/hooks/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./useBodyScrollLock"), exports);
 _export_star(require("./useBreakpoint"), exports);
 _export_star(require("./useButton"), exports);
+_export_star(require("./useDialog"), exports);
 _export_star(require("./useLabel"), exports);
 _export_star(require("./useOnClickOutside"), exports);
 _export_star(require("./useTextField"), exports);

package/dist/cjs/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":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}
+{"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":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./useDialog"), 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/useDialog/index.js.map

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

package/dist/cjs/hooks/useDialog/useDialog.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDialog", {
+    enumerable: true,
+    get: function() {
+        return useDialog;
+    }
+});
+const _react = require("react");
+const _useDialogPolyfill = require("../useDialogPolyfill");
+const _useBodyScrollLock = require("../useBodyScrollLock");
+const _utils = require("../../utils");
+const TRANSITION_CLASS_NAME = "--transition";
+const FALLBACK_TRANSITION_DURATION = 0;
+const useDialog = (props)=>{
+    const { ref, isOpen, transition, onOpen, onClose } = props;
+    const shouldTransition = (0, _utils.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;
+    (0, _useDialogPolyfill.useDialogPolyfill)(ref);
+    (0, _useBodyScrollLock.useBodyScrollLock)({
+        enabled: isOpen
+    });
+    const open = (0, _react.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 = (0, _react.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 = (0, _react.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
+    ]);
+    (0, _react.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/cjs/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":["useDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","supportsDialog","isEnabled","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","useDialogPolyfill","useBodyScrollLock","enabled","open","useCallback","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","useEffect","toggleDialog","add"],"mappings":";;;;+BA0BaA;;;eAAAA;;;uBArBN;mCAC2B;mCACA;uBACH;AAe/B,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAE9B,MAAMF,YAAY,CAACG;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBC,IAAAA,qBAAc,OAAMJ,WAAWK,SAAS;IAEjE,oCAAoC;IACpC,MAAMC,4BACJ,AAACR,IAAIS,OAAO,IACVC,OACEC,iBAAiBX,IAAIS,OAAO,EACzBG,gBAAgB,CAACV,WAAWW,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBhB;IAEFiB,IAAAA,oCAAiB,EAACf;IAClBgB,IAAAA,oCAAiB,EAAC;QAAEC,SAAShB;IAAO;IAEpC,MAAMiB,OAAOC,IAAAA,kBAAW,EAAC;YACvBnB;SAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAaoB,SAAS;QACtBjB,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMqB,QAAQF,IAAAA,kBAAW,EAAC;YACxBnB;SAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAaqB,KAAK;QAClBjB,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMsB,cAAcH,IAAAA,kBAAW,EAC7B,CAACI;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIpB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAa0B,SAAS,CAACC,MAAM,CAAC9B;YAC9B,uCAAuC;YACvC+B,WAAW,IAAMP,SAASb;QAC5B,OAAO;YACLa;QACF;IACF,GACA;QAACb;QAA2Ba;QAAOrB;QAAKK;KAAiB;IAG3DwB,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBACE9B,cAOOA;YAPtB,IAAIC,UAAU,GAACD,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAakB,IAAI,GAAE;gBAChCA;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BU,WAAW;wBACT5B;qBAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAa0B,SAAS,CAACK,GAAG,CAAClC;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACI,YAAUD,gBAAAA,IAAIS,OAAO,cAAXT,oCAAAA,cAAakB,IAAI,GAAE;gBACvCI;YACF;QACF;QAEAQ;IACF,GAAG;QAACR;QAAarB;QAAQiB;QAAMlB;KAAI;IAEnC,OAAO;QACLkB;QACAG,OAAOC;IACT;AACF"}

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"}