@simplybusiness/mobius 4.5.0 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 4.6.0
+
+### Minor Changes
+
+- b0d7505: Add new variant "link" to `<Button>`
+
+## 4.5.1
+
+### Patch Changes
+
+- 8a50b45: Fix `<Drawer>`, `<Modal>` transition-in not working in Safari
+
 ## 4.5.0
 
 ### Minor Changes

package/dist/cjs/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":["Button","HAS_DEPRECATION_WARNING_SHOWN","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","useButton","console","warn","classes","classNames","className","Loading","displayName"],"mappings":"AAAA;;;;;+BAqGSA;;;eAAAA;;;;uBAnGiD;+DACnC;yBAGC;2BACkB;;;;;;AAE1C,IAAIC,gCAAgC;AAyCpC,MAAMD,uBACJE,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,oBAAS,EAAChB;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCmB,QAAQC,IAAI,CACV;QAEFpB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMqB,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEZ,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWO,SAAS;IAEtBP,WAAWO,SAAS,GAAGF;IAEvB,qBACE,qBAACf;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,qBAACgB,gBAAO,QAAMpB,YAAYA;;AAG7C;AAEFL,OAAO0B,WAAW,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":["Button","HAS_DEPRECATION_WARNING_SHOWN","forwardRef","props","ref","children","elementType","Component","isDisabled","isLoading","isSuccess","variant","size","icon","iconPosition","onPress","onClick","otherProps","buttonProps","useButton","console","warn","classes","classNames","className","Loading","displayName"],"mappings":"AAAA;;;;;+BAsGSA;;;eAAAA;;;;uBApGiD;+DACnC;yBAGC;2BACkB;;;;;;AAE1C,IAAIC,gCAAgC;AA0CpC,MAAMD,uBACJE,IAAAA,iBAAU,EAAC,CAACC,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,GAAGC,IAAAA,oBAAS,EAAChB;IAElC,IAAI,AAACU,CAAAA,QAAQC,YAAW,KAAM,CAACb,+BAA+B;QAC5D,sCAAsC;QACtCmB,QAAQC,IAAI,CACV;QAEFpB,gCAAgC;IAClC;IAEA,gDAAgD;IAChD,MAAMqB,UAAUC,IAAAA,eAAU,EACxB,UACA,iBACA,CAAC,UAAU,EAAEZ,QAAQ,CAAC,EACtB,CAAC,OAAO,EAAEC,KAAK,CAAC,EAChB;QACE,iBAAiBJ;QACjB,gBAAgBC;QAChB,gBAAgBC,aAAa,CAACD;IAChC,GACAQ,WAAWO,SAAS;IAEtBP,WAAWO,SAAS,GAAGF;IAEvB,qBACE,qBAACf;QAAUH,KAAKA;QAAM,GAAGc,WAAW;QAAG,GAAGD,UAAU;kBACjDR,0BAAY,qBAACgB,gBAAO,QAAMpB,YAAYA;;AAG7C;AAEFL,OAAO0B,WAAW,GAAG"}

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

@@ -12,153 +12,47 @@ Object.defineProperty(exports, "Drawer", {
 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 _VisuallyHidden = require("../VisuallyHidden");
 const _utils = require("../../utils");
 const _DrawerContext = require("./DrawerContext");
+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 = "--drawer-transition-duration";
 const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { isOpen, className, closeLabel, direction, announce = "Drawer opened on screen", onOpen, onClose, children } = props;
-    const hasOpened = (0, _react.useRef)(false);
-    const modalRef = (0, _react.useRef)(null);
-    const 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 transitions
-    const handleClose = (0, _react.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 = (0, _dedupe.default)("mobius", "mobius/Drawer", `--${direction}`, className, {
-        "--should-transition": hasDialogSupport
-    });
-    // Add polyfill for HTML Dialog in old browsers
-    (0, _react.useEffect)(()=>{
-        async function toggleModal() {
-            var _modalRef_current, _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();
-    }, [
+    const shouldTransition = (0, _utils.supportsDialog)();
+    const dialogRef = (0, _react.useRef)(null);
+    const { close } = (0, _hooks.useDialog)({
+        ref: dialogRef,
         isOpen,
         onOpen,
-        handleClose,
-        hasDialogSupport
-    ]);
+        onClose,
+        transition: {
+            isEnabled: true,
+            CSSVariable: TRANSITION_CSS_VARIABLE
+        }
+    });
+    const dialogClasses = (0, _dedupe.default)("mobius", "mobius/Drawer", `--${direction}`, className, {
+        "--should-transition": shouldTransition
+    });
     const contextValue = (0, _react.useMemo)(()=>({
-            onClose: handleClose,
+            onClose: close,
             closeLabel
         }), [
-        handleClose,
+        close,
         closeLabel
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("dialog", {
         ref: (0, _utils.mergeRefs)([
-            modalRef,
+            dialogRef,
             ref
         ]),
-        onCancel: handleClose,
-        className: modalClasses,
+        onCancel: close,
+        className: dialogClasses,
         "aria-describedby": "screen-reader-announce",
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  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":["Drawer","TRANSITION_CLASS_NAME","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","useRef","modalRef","hasDialogSupport","supportsDialog","current","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","contextValue","useMemo","dialog","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","DrawerContext","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":["Drawer","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","shouldTransition","supportsDialog","dialogRef","useRef","close","useDialog","transition","isEnabled","CSSVariable","dialogClasses","classNames","contextValue","useMemo","dialog","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","DrawerContext","Provider","value","displayName"],"mappings":"AAAA;;;;;+BA2ESA;;;eAAAA;;;;+DAzEc;uBAC0B;gCAClB;uBAEW;+BACZ;uBACJ;;;;;;AAK1B,MAAMC,0BAA0B;AAEhC,MAAMD,uBAASE,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,mBAAmBC,IAAAA,qBAAc;IACvC,MAAMC,YAAYC,IAAAA,aAAM,EAA2B;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1Bd,KAAKW;QACLV;QACAK;QACAC;QACAQ,YAAY;YACVC,WAAW;YACXC,aAAapB;QACf;IACF;IAEA,MAAMqB,gBAAgBC,IAAAA,eAAU,EAC9B,UACA,iBACA,CAAC,EAAE,EAAEf,UAAU,CAAC,EAChBF,WACA;QACE,uBAAuBO;IACzB;IAGF,MAAMW,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACLd,SAASM;YACTV;QACF,CAAA,GACA;QAACU;QAAOV;KAAW;IAGrB,qBACE,sBAACmB;QACCtB,KAAKuB,IAAAA,gBAAS,EAAC;YAACZ;YAAWX;SAAI;QAC/BwB,UAAUX;QACVX,WAAWgB;QACXO,oBAAiB;;0BAEjB,qBAACC,8BAAc;0BACb,cAAA,qBAACC;oBAAIC,IAAG;8BAA0BvB;;;0BAEpC,qBAACwB,4BAAa,CAACC,QAAQ;gBAACC,OAAOX;0BAC5BZ;;;;AAIT;AAEAZ,OAAOoC,WAAW,GAAG"}

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

@@ -12,57 +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;
@@ -74,103 +33,38 @@ 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)=>{
-        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: handleClose,
+            onClose: close,
             closeLabel
         }), [
-        handleClose,
+        close,
         closeLabel
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("dialog", {
         ref: (0, _utils.mergeRefs)([
-            modalRef,
+            dialogRef,
             ref
         ]),
-        onCancel: handleClose,
+        onCancel: close,
         className: modalClasses,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalContext.ModalContext.Provider, {
             value: contextValue,

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  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":["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","contextValue","useMemo","dialog","mergeRefs","onCancel","ModalContext","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":["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/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"}