@simplybusiness/mobius 4.2.8 → 4.3.1

package/dist/cjs/components/Modal/Modal.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+export interface ModalProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    children?: ReactNode;
+    className?: string;
+    closeLabel?: string;
+    animation?: "slideUp" | "fade";
+    isFullScreen?: boolean;
+    /**
+     * **Deprecated:** No longer needed
+     */
+    size?: string;
+    /**
+     * **Deprecated:** No longer needed
+     */
+    appElement?: string;
+    /**
+     * **Deprecated:** No longer needed
+     */
+    preventCloseOnEsc?: boolean;
+    /**
+     * **Deprecated:** No longer needed
+     */
+    shouldFocusAfterRender?: boolean;
+    /**
+     * **Deprecated:** No longer needed
+     */
+    parentSelector?: () => HTMLElement;
+}
+declare const Modal: {
+    ({ isOpen, onClose, children, className, closeLabel, isFullScreen, animation, size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Modal };

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

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */ "use client";
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -14,6 +14,7 @@ const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedup
 const _react = require("react");
 const _useBodyScrollLock = require("../../hooks/useBodyScrollLock");
 const _polyfilltests = require("../../utils/polyfill-tests");
+const _utils = require("../../utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -60,9 +61,10 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const Modal = ({ isOpen, onClose, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
-size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector })=>{
-    var _window;
+const TRANSITION_CLASS_NAME = "--transition";
+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;
     const hasWarnedAboutMissingLabels = (0, _react.useRef)(false);
     // Handle deprecated props
     if (!hasWarnedAboutMissingLabels.current) {
@@ -71,9 +73,14 @@ size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector })=>
             hasWarnedAboutMissingLabels.current = true;
         }
     }
+    const hasOpened = (0, _react.useRef)(false);
     const modalRef = (0, _react.useRef)(null);
-    const dialog = modalRef.current;
-    const noPreference = (_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia("(prefers-reduced-motion: no-preference)");
+    const hasDialogSupport = (0, _polyfilltests.supportsDialog)();
+    // Fire onOpen once
+    if (onOpen && !hasOpened.current) {
+        onOpen();
+        hasOpened.current = true;
+    }
     (0, _useBodyScrollLock.useBodyScrollLock)({
         enabled: isOpen
     });
@@ -82,57 +89,66 @@ size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector })=>
         if (event) {
             event.preventDefault();
             event.stopPropagation();
-            const doClose = ()=>{
-                dialog.close();
-                onClose === null || onClose === void 0 ? void 0 : onClose();
-            };
-            if (animation) {
-                dialog.classList.add("close");
-                dialog.addEventListener("animationend", ()=>{
-                    dialog.classList.remove("close");
-                    doClose();
-                }, {
-                    once: true
-                });
-            } else {
+        }
+        const doClose = ()=>{
+            var _modalRef_current;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        };
+        // Delay close to allow backdrop exit transition
+        if (hasDialogSupport && animation) {
+            var _modalRef_current, _modalRef_current1;
+            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.classList.remove(TRANSITION_CLASS_NAME);
+            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", ()=>{
                 doClose();
-            }
+            }, {
+                once: true
+            });
+        } else {
+            doClose();
         }
     }, [
-        animation,
-        dialog,
-        onClose
+        onClose,
+        hasDialogSupport,
+        animation
     ]);
     const modalClasses = (0, _dedupe.default)("mobius", "mobius/Modal", {
-        animation,
+        "--no-dialog-support": !hasDialogSupport,
+        "--should-transition": hasDialogSupport && animation,
         "--slide-up": animation === "slideUp",
         "--fade": animation === "fade",
-        "--has-reduced-motion": !noPreference.matches,
         "--is-fullscreen": isFullScreen
     }, className);
     // Add polyfill for HTML Dialog in old browsers
     (0, _react.useEffect)(()=>{
         async function toggleModal() {
-            var _modalRef_current;
-            if (!(0, _polyfilltests.supportsDialog)() && typeof window !== "undefined") {
+            var _modalRef_current, _modalRef_current1;
+            if (!hasDialogSupport && typeof window !== "undefined" && modalRef.current !== null) {
                 // eslint-disable-next-line import/no-extraneous-dependencies
                 const { default: dialogPolyfill } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("dialog-polyfill")));
                 dialogPolyfill.registerDialog(modalRef.current);
             }
-            if (isOpen) {
-                var _modalRef_current1;
-                (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.showModal();
-            } else if ((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open) {
-                var _modalRef_current2;
-                (_modalRef_current2 = modalRef.current) === null || _modalRef_current2 === void 0 ? void 0 : _modalRef_current2.close();
+            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
+        isOpen,
+        onOpen,
+        handleClose,
+        hasDialogSupport
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("dialog", {
-        ref: modalRef,
+        ref: (0, _utils.mergeRefs)([
+            modalRef,
+            ref
+        ]),
         onCancel: handleClose,
         className: modalClasses,
         children: _react.Children.map(children, (child)=>{
@@ -145,7 +161,7 @@ size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector })=>
             return child;
         })
     });
-};
+});
 Modal.displayName = "Modal";
 
 //# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable no-console */\n\n\"use client\";\n\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  ReactEventHandler,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onClose?: () => void;\n  children?: ReactNode;\n  className?: string;\n  closeLabel?: string;\n  animation?: \"slideUp\" | \"fade\";\n  isFullScreen?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  size?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  appElement?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  preventCloseOnEsc?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  shouldFocusAfterRender?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  parentSelector?: () => HTMLElement;\n}\n\nconst Modal = ({\n  isOpen,\n  onClose,\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}: ModalProps) => {\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 modalRef = useRef<HTMLDialogElement>(null);\n  const dialog = modalRef.current as HTMLDialogElement;\n  const noPreference = window?.matchMedia(\n    \"(prefers-reduced-motion: no-preference)\",\n  );\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose: ReactEventHandler<HTMLDialogElement> = useCallback(\n    event => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const doClose = () => {\n          dialog.close();\n          onClose?.();\n        };\n\n        if (animation) {\n          dialog.classList.add(\"close\");\n          dialog.addEventListener(\n            \"animationend\",\n            () => {\n              dialog.classList.remove(\"close\");\n              doClose();\n            },\n            { once: true },\n          );\n        } else {\n          doClose();\n        }\n      }\n    },\n    [animation, dialog, onClose],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--has-reduced-motion\": !noPreference.matches,\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (!supportsDialog() && typeof window !== \"undefined\") {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        dialogPolyfill.registerDialog(modalRef.current as HTMLDialogElement);\n      }\n\n      if (isOpen) {\n        modalRef.current?.showModal();\n      } else if (modalRef.current?.open) {\n        modalRef.current?.close();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen]);\n\n  return (\n    <dialog ref={modalRef} onCancel={handleClose} className={modalClasses}>\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","isOpen","onClose","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","window","hasWarnedAboutMissingLabels","useRef","current","console","warn","modalRef","dialog","noPreference","matchMedia","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","doClose","close","classList","add","addEventListener","remove","once","modalClasses","classNames","matches","useEffect","toggleModal","supportsDialog","default","dialogPolyfill","registerDialog","showModal","open","ref","onCancel","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"AAAA,6BAA6B,GAE7B;;;;;+BAsKSA;;;eAAAA;;;;+DAnKc;uBAUhB;mCAC2B;+BACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgC/B,MAAMA,QAAQ,CAAC,EACbC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,SAAS,EACT,yBAAyB;AACzBC,IAAI,EACJC,UAAU,EACVC,iBAAiB,EACjBC,sBAAsB,EACtBC,cAAc,EACH;QAoBUC;IAnBrB,MAAMC,8BAA8BC,IAAAA,aAAM,EAAU;IACpD,0BAA0B;IAC1B,IAAI,CAACD,4BAA4BE,OAAO,EAAE;QACxC,IACER,QACAC,cACAC,qBACAC,0BACAC,gBACA;YACAK,QAAQC,IAAI,CACV,CAAC,yJAAyJ,CAAC;YAE7JJ,4BAA4BE,OAAO,GAAG;QACxC;IACF;IAEA,MAAMG,WAAWJ,IAAAA,aAAM,EAAoB;IAC3C,MAAMK,SAASD,SAASH,OAAO;IAC/B,MAAMK,gBAAeR,UAAAA,oBAAAA,8BAAAA,QAAQS,UAAU,CACrC;IAGFC,IAAAA,oCAAiB,EAAC;QAAEC,SAASvB;IAAO;IAEpC,kDAAkD;IAClD,MAAMwB,cAAoDC,IAAAA,kBAAW,EACnEC,CAAAA;QACE,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;YAErB,MAAMC,UAAU;gBACdV,OAAOW,KAAK;gBACZ7B,oBAAAA,8BAAAA;YACF;YAEA,IAAIK,WAAW;gBACba,OAAOY,SAAS,CAACC,GAAG,CAAC;gBACrBb,OAAOc,gBAAgB,CACrB,gBACA;oBACEd,OAAOY,SAAS,CAACG,MAAM,CAAC;oBACxBL;gBACF,GACA;oBAAEM,MAAM;gBAAK;YAEjB,OAAO;gBACLN;YACF;QACF;IACF,GACA;QAACvB;QAAWa;QAAQlB;KAAQ;IAG9B,MAAMmC,eAAeC,IAAAA,eAAU,EAC7B,UACA,gBACA;QACE/B;QACA,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,wBAAwB,CAACc,aAAakB,OAAO;QAC7C,mBAAmBjC;IACrB,GACAF;IAGF,+CAA+C;IAC/CoC,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBASFtB;YARX,IAAI,CAACuB,IAAAA,6BAAc,OAAM,OAAO7B,WAAW,aAAa;gBACtD,6DAA6D;gBAC7D,MAAM,EAAE8B,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBACjDA,eAAeC,cAAc,CAAC1B,SAASH,OAAO;YAChD;YAEA,IAAIf,QAAQ;oBACVkB;iBAAAA,qBAAAA,SAASH,OAAO,cAAhBG,yCAAAA,mBAAkB2B,SAAS;YAC7B,OAAO,KAAI3B,oBAAAA,SAASH,OAAO,cAAhBG,wCAAAA,kBAAkB4B,IAAI,EAAE;oBACjC5B;iBAAAA,qBAAAA,SAASH,OAAO,cAAhBG,yCAAAA,mBAAkBY,KAAK;YACzB;QACF;QAEAU;IACF,GAAG;QAACxC;KAAO;IAEX,qBACE,qBAACmB;QAAO4B,KAAK7B;QAAU8B,UAAUxB;QAAarB,WAAWiC;kBACtDa,eAAQ,CAACC,GAAG,CAAChD,UAAUiD,CAAAA;YACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;gBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;oBACzBlD,SAASuB;oBACTpB;gBACF;YACF;YAEA,OAAO+C;QACT;;AAGN;AAEApD,MAAMuD,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport && animation) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\n          \"transitionend\",\n          () => {\n            doClose();\n          },\n          { once: true },\n        );\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport, animation],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": hasDialogSupport && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        dialogPolyfill.registerDialog(modalRef.current);\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n    >\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","TRANSITION_CLASS_NAME","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","useRef","current","console","warn","hasOpened","modalRef","hasDialogSupport","supportsDialog","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","doClose","close","classList","remove","addEventListener","once","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","open","showModal","add","dialog","mergeRefs","onCancel","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"AAAA;;;;;+BA+JSA;;;eAAAA;;;;+DA7Jc;uBAWhB;mCAC2B;+BACH;uBAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,MAAMC,wBAAwB;AAE9B,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,YAAYJ,IAAAA,aAAM,EAAU;IAClC,MAAMK,WAAWL,IAAAA,aAAM,EAA2B;IAClD,MAAMM,mBAAmBC,IAAAA,6BAAc;IAEvC,mBAAmB;IACnB,IAAInB,UAAU,CAACgB,UAAUH,OAAO,EAAE;QAChCb;QACAgB,UAAUH,OAAO,GAAG;IACtB;IAEAO,IAAAA,oCAAiB,EAAC;QAAEC,SAASvB;IAAO;IAEpC,kDAAkD;IAClD,MAAMwB,cAAcC,IAAAA,kBAAW,EAC7B,CAACC;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,MAAMC,UAAU;gBACdV;aAAAA,oBAAAA,SAASJ,OAAO,cAAhBI,wCAAAA,kBAAkBW,KAAK;YACvB7B,oBAAAA,8BAAAA;QACF;QAEA,gDAAgD;QAChD,IAAImB,oBAAoBb,WAAW;gBACjCY,mBACAA;aADAA,oBAAAA,SAASJ,OAAO,cAAhBI,wCAAAA,kBAAkBY,SAAS,CAACC,MAAM,CAACpC;aACnCuB,qBAAAA,SAASJ,OAAO,cAAhBI,yCAAAA,mBAAkBc,gBAAgB,CAChC,iBACA;gBACEJ;YACF,GACA;gBAAEK,MAAM;YAAK;QAEjB,OAAO;YACLL;QACF;IACF,GACA;QAAC5B;QAASmB;QAAkBb;KAAU;IAGxC,MAAM4B,eAAeC,IAAAA,eAAU,EAC7B,UACA,gBACA;QACE,uBAAuB,CAAChB;QACxB,uBAAuBA,oBAAoBb;QAC3C,cAAcA,cAAc;QAC5B,UAAUA,cAAc;QACxB,mBAAmBD;IACrB,GACAF;IAGF,+CAA+C;IAC/CiC,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBAWEnB,mBAIOA;YAdtB,IACE,CAACC,oBACD,OAAOmB,WAAW,eAClBpB,SAASJ,OAAO,KAAK,MACrB;gBACA,6DAA6D;gBAC7D,MAAM,EAAEyB,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBACjDA,eAAeC,cAAc,CAACvB,SAASJ,OAAO;YAChD;YAEA,IAAIf,UAAU,GAACmB,oBAAAA,SAASJ,OAAO,cAAhBI,wCAAAA,kBAAkBwB,IAAI,GAAE;oBACrCxB,oBACAA;iBADAA,qBAAAA,SAASJ,OAAO,cAAhBI,yCAAAA,mBAAkByB,SAAS;iBAC3BzB,qBAAAA,SAASJ,OAAO,cAAhBI,yCAAAA,mBAAkBY,SAAS,CAACc,GAAG,CAACjD;gBAChCM,mBAAAA,6BAAAA;YACF,OAAO,IAAI,CAACF,YAAUmB,qBAAAA,SAASJ,OAAO,cAAhBI,yCAAAA,mBAAkBwB,IAAI,GAAE;gBAC5CnB;YACF;QACF;QAEAc;IACF,GAAG;QAACtC;QAAQE;QAAQsB;QAAaJ;KAAiB;IAElD,qBACE,qBAAC0B;QACC/C,KAAKgD,IAAAA,gBAAS,EAAC;YAAC5B;YAAUpB;SAAI;QAC9BiD,UAAUxB;QACVpB,WAAW+B;kBAEVc,eAAQ,CAACC,GAAG,CAAC/C,UAAUgD,CAAAA;YACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;gBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;oBACzBlD,SAASuB;oBACTnB;gBACF;YACF;YAEA,OAAO8C;QACT;;AAGN;AAEAxD,MAAM2D,WAAW,GAAG"}

package/dist/cjs/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Modal } from ".";
+type StoryType = StoryObj<typeof Modal>;
+declare const meta: Meta<typeof Modal>;
+export declare const Normal: StoryType;
+export declare const FullScreen: StoryType;
+export declare const WithAnimation: StoryType;
+export declare const WithLongContent: StoryType;
+export declare const WithNested: StoryType;
+export default meta;

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithNested = exports.WithLongContent = exports.WithAnimation = exports.FullScreen = exports.Normal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const utils_1 = require("../../utils");
+const Button_1 = require("../Button");
+const Text_1 = require("../Text");
+const meta = {
+    title: "Components/Modal",
+    component: _1.Modal,
+    argTypes: Object.assign({ animation: {
+            options: ["slideUp", "fade", "neither"],
+            control: { type: "radio" },
+            mapping: {
+                slideUp: "slideUp",
+                fade: "fade",
+                neither: undefined,
+            },
+        } }, (0, utils_1.excludeControls)("appElement", "parentSelector", "isOpen", "preventCloseOnEsc", "shouldFocusAfterRender", "size")),
+    args: {
+        isFullScreen: false,
+    },
+};
+const Demo = (props) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Modal" }), (0, jsx_runtime_1.jsxs)(_1.Modal, Object.assign({}, props, { isOpen: open, onClose: () => setOpen(false), children: [(0, jsx_runtime_1.jsx)(_1.Modal.Header, { children: "The Latin Modal" }), (0, jsx_runtime_1.jsx)(_1.Modal.Content, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] }))] }));
+};
+const FullScreenDemo = (props) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), variant: "secondary", children: "Show Fullscreen Modal \uD83D\uDE80" }), (0, jsx_runtime_1.jsxs)(_1.Modal, Object.assign({}, props, { isOpen: open, isFullScreen: true, onClose: () => setOpen(false), children: [(0, jsx_runtime_1.jsx)(_1.Modal.Header, { children: "The Full Screen Modal" }), (0, jsx_runtime_1.jsx)(_1.Modal.Content, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] }))] }));
+};
+const WithAnimationDemo = ({ animation, isFullScreen, closeLabel, }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Modal With Animation \uD83E\uDDD9\u200D\u2642\uFE0F" }), (0, jsx_runtime_1.jsxs)(_1.Modal, { isOpen: open, onClose: () => setOpen(false), animation: animation, isFullScreen: isFullScreen, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Modal.Header, { children: "The Latin Modal" }), (0, jsx_runtime_1.jsx)(_1.Modal.Content, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] })] }));
+};
+const WithLongContentDemo = (props) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Modal" }), (0, jsx_runtime_1.jsxs)(_1.Modal, Object.assign({}, props, { isOpen: open, onClose: () => setOpen(false), children: [(0, jsx_runtime_1.jsx)(_1.Modal.Header, { children: "Aliquam fringilla quam vel purus rhoncus isuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Int" }), (0, jsx_runtime_1.jsxs)(_1.Modal.Content, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Aliquam fringilla quam vel purus rhoncus interdum in quis sapien. Sed at eros et lectus mollis posuere. Morbi augue augue, venenatis vel consectetur sed, vulputate et lorem. Integer venenatis nibh molestie commodo lobortis. Phasellus sit amet dignissim nisi. Vivamus nisi augue, scelerisque commodo libero vitae, vulputate interdum ex. Integer non risus sollicitudin, cursus ipsum vitae, rhoncus nulla." })] })] }))] }));
+};
+const ChildModal = () => {
+    const [showModal, setShowModal] = (0, react_1.useState)(false);
+    const show = () => setShowModal(true);
+    const hide = () => setShowModal(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: show, children: "Show child modal" }), (0, jsx_runtime_1.jsxs)(_1.Modal, { isOpen: showModal, onClose: hide, animation: "slideUp", children: [(0, jsx_runtime_1.jsx)(_1.Modal.Header, { children: "Howdy" }), (0, jsx_runtime_1.jsx)(_1.Modal.Content, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Closing or cancelling (with Escape key) should leave the parent modal open." }) })] })] }));
+};
+const WithNestedDemo = ({ animation, closeLabel }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setOpen(true), children: "Show Nested Modal" }), (0, jsx_runtime_1.jsxs)(_1.Modal, { isOpen: open, onClose: () => setOpen(false), animation: animation, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Modal.Header, { children: "The Latin Modal" }), (0, jsx_runtime_1.jsxs)(_1.Modal.Content, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Closing or cancelling the next modal should leave me open." }), (0, jsx_runtime_1.jsx)(ChildModal, {})] })] })] }));
+};
+exports.Normal = {
+    render: (args) => (0, jsx_runtime_1.jsx)(Demo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        closeLabel: "Close",
+    },
+};
+exports.FullScreen = {
+    render: (args) => (0, jsx_runtime_1.jsx)(FullScreenDemo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        closeLabel: "Close",
+        isFullScreen: true,
+    },
+};
+exports.WithAnimation = {
+    render: (args) => (0, jsx_runtime_1.jsx)(WithAnimationDemo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        animation: "slideUp",
+        closeLabel: "Close",
+    },
+};
+exports.WithLongContent = {
+    render: (args) => (0, jsx_runtime_1.jsx)(WithLongContentDemo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        closeLabel: "Close",
+    },
+};
+exports.WithNested = {
+    render: (args) => (0, jsx_runtime_1.jsx)(WithNestedDemo, Object.assign({}, args)),
+    args: {
+        isOpen: false,
+        closeLabel: "Close",
+    },
+};
+exports.default = meta;
+//# sourceMappingURL=Modal.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Modal/Modal.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,137 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const _1 = require(".");
+const jestHTMLDialogPolyfill_1 = require("../../utils/jestHTMLDialogPolyfill");
+(0, jestHTMLDialogPolyfill_1.jestHTMLDialogPolyfill)();
+const MODAL_CLASS_NAME = "mobius/Modal";
+const MODAL_CLOSE_CLASS_NAME = "mobius/ModalClose";
+const mockMatchMedia = (matches) => {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(query => ({
+            matches,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        })),
+    });
+};
+describe("Modal", () => {
+    beforeEach(() => {
+        mockMatchMedia(true);
+    });
+    afterAll(() => {
+        jest.resetAllMocks();
+    });
+    it("should render without errors", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Modal, { isOpen: true, onClose: () => { } }));
+        expect(container).toBeTruthy();
+    });
+    it("should render with default class names", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Modal, { isOpen: true, onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Modal.Header, {}) }));
+        const dialog = react_1.screen.getByRole("dialog");
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(dialog).toHaveClass(MODAL_CLASS_NAME);
+        expect(closeButton).toHaveClass(MODAL_CLOSE_CLASS_NAME);
+    });
+    it("should render with custom class name", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Modal, { className: "my-test-modal", isOpen: true, onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Modal.Header, {}) }));
+        const dialog = react_1.screen.getByRole("dialog");
+        const closeButton = react_1.screen.getByLabelText("Close");
+        expect(dialog).toHaveClass(MODAL_CLASS_NAME);
+        expect(dialog).toHaveClass("my-test-modal");
+        expect(closeButton).toHaveClass(MODAL_CLOSE_CLASS_NAME);
+    });
+    describe("given the animation prop is set to slideUp", () => {
+        it("should render with appropriate class name", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Modal, { isOpen: true, onClose: () => { }, animation: "slideUp" }));
+            const dialog = react_1.screen.getByRole("dialog");
+            expect(dialog).toHaveClass("--slide-up");
+        });
+    });
+    describe("given the animation prop is set to fade", () => {
+        it("should render with appropriate class name", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Modal, { isOpen: true, onClose: () => { }, animation: "fade" }));
+            const dialog = react_1.screen.getByRole("dialog");
+            expect(dialog).toHaveClass("--fade");
+        });
+    });
+    describe("given the user has reduced motion preference enabled", () => {
+        beforeEach(() => {
+            mockMatchMedia(false);
+        });
+        it("renders with appropriate class name", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Modal, { isOpen: true, onClose: () => { } }));
+            const dialog = react_1.screen.getByRole("dialog");
+            expect(dialog).toHaveClass("--has-reduced-motion");
+        });
+    });
+    // TODO: Cannot test until HTML Dialog is supported in JSDom
+    xdescribe("closing and cancelling", () => {
+        beforeAll(() => {
+            HTMLDialogElement.prototype.show = jest.fn(function mock() {
+                this.open = true;
+            });
+            HTMLDialogElement.prototype.showModal = jest.fn(function mock() {
+                this.open = true;
+            });
+            HTMLDialogElement.prototype.close = jest.fn(function mock() {
+                this.open = false;
+            });
+        });
+        it.only("pressing close button should close the modal", async () => {
+            const content = (0, jsx_runtime_1.jsx)(_1.Modal.Content, { children: "Sample content" });
+            let modalOpen = true;
+            const onClose = () => {
+                modalOpen = false;
+            };
+            const user = user_event_1.default.setup();
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Modal, { isOpen: modalOpen, onClose: onClose, closeLabel: "Close Me", children: [(0, jsx_runtime_1.jsx)(_1.Modal.Header, {}), content] }));
+            const modal = react_1.screen.getByRole("dialog", { hidden: true });
+            expect(modal).toBeInTheDocument();
+            expect(modal.open).toBe(true);
+            react_1.screen.debug();
+            const closeButton = react_1.screen.getByRole("button");
+            await user.click(closeButton); // This errors because
+            expect(modal.open).toBe(false);
+        });
+        it("should cancel the modal", async () => {
+            const content = (0, jsx_runtime_1.jsx)(_1.Modal.Content, { children: "Sample content" });
+            const onClose = jest.fn();
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Modal, { isOpen: true, onClose: onClose, children: [(0, jsx_runtime_1.jsx)(_1.Modal.Header, {}), content] }));
+            const modalContent = react_1.screen.getByText("Sample content");
+            expect(modalContent).toBeInTheDocument();
+            await user_event_1.default.keyboard("{escape}");
+            expect(onClose).toHaveBeenCalled();
+        });
+    });
+    describe("closeLabel prop", () => {
+        describe("given the label is defined", () => {
+            it("should render the label", () => {
+                const closeLabel = "Leave";
+                (0, react_1.render)((0, jsx_runtime_1.jsxs)(_1.Modal, { isOpen: true, onClose: () => { }, closeLabel: closeLabel, children: [(0, jsx_runtime_1.jsx)(_1.Modal.Header, {}), "Sample content"] }));
+                const closeButton = react_1.screen.getByText(closeLabel);
+                expect(closeButton).toBeInTheDocument();
+            });
+        });
+        describe("given the label is not defined", () => {
+            it("should render the default close button", () => {
+                (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Modal, { isOpen: true, onClose: () => { }, children: (0, jsx_runtime_1.jsx)(_1.Modal.Header, {}) }));
+                const closeButton = react_1.screen.getByLabelText("Close");
+                expect(closeButton).toBeInTheDocument();
+            });
+        });
+    });
+});
+//# sourceMappingURL=Modal.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.test.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.test.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Modal/index.d.ts

@@ -0,0 +1,12 @@
+import { DivElementType as ModalContentDivElementType, ContentProps as ModalContentProps } from "./Content";
+import { HeaderElementType as ModalHeaderElementType, HeaderProps as ModalHeaderProps } from "./Header";
+import { ModalProps } from "./Modal";
+declare const Modal: {
+    ({ isOpen, onClose, children, className, closeLabel, isFullScreen, animation, size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Header: import("react").ForwardRefExoticComponent<Omit<ModalHeaderProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<ModalContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Modal };
+export type { ModalContentDivElementType, ModalContentProps, ModalHeaderElementType, ModalHeaderProps, ModalProps, };

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, ModalProps } from \"./Modal\";\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":";;;;+BAkBSA;;;eAAAA;;;yBAdF;wBAKA;uBAC6C;AAEpD,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 } 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"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Modal/types.ts"],"names":[],"mappings":""}

package/dist/cjs/components/NumberField/NumberField.d.ts

@@ -0,0 +1,35 @@
+import { ChangeEvent, Ref, RefAttributes } from "react";
+import { DOMProps } from "../../types/dom";
+import { UseLabelProps } from "../../hooks";
+import { ForwardedRefComponent } from "../../types/components";
+export type NumberFieldElementType = HTMLInputElement;
+export interface NumberFieldProps extends DOMProps, UseLabelProps, RefAttributes<NumberFieldElementType> {
+    id?: string;
+    /** Custom class name for setting specific CSS */
+    className?: string;
+    validationState?: "valid" | "invalid" | undefined;
+    /** The smallest value allowed for the input. */
+    minValue?: number;
+    /** The largest value allowed for the input. */
+    maxValue?: number;
+    /** The amount that the input value changes with each increment or decrement "tick". */
+    step?: number;
+    /** The default value (uncontrolled). */
+    defaultValue?: number;
+    /** Handler that is called when the value changes. */
+    onChange?: (event: ChangeEvent<NumberFieldElementType>) => void;
+    /** Temporary text that occupies the text input when it is empty. */
+    placeholder?: string;
+    /** Whether user input is required on the input before form submission. */
+    isRequired?: boolean;
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** Whether the input can be selected but not changed by the user. */
+    isReadOnly?: boolean;
+    /** An error message for the field. */
+    errorMessage?: string;
+    /** Identifies the element (or elements) that describes the object. */
+    "aria-describedby"?: string | undefined;
+}
+export type NumberFieldRef = Ref<NumberFieldElementType>;
+export declare const NumberField: ForwardedRefComponent<NumberFieldProps, NumberFieldElementType>;

package/dist/cjs/components/NumberField/NumberField.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NumberField } from "./NumberField";
+type StoryType = StoryObj<typeof NumberField>;
+declare const meta: Meta<typeof NumberField>;
+export declare const Normal: StoryType;
+export declare const LimitedRange: StoryType;
+export declare const Valid: StoryType;
+export declare const Invalid: StoryType;
+export declare const Disabled: StoryType;
+export default meta;