@simplybusiness/mobius 4.2.8 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 4.3.0
+
+### Minor Changes
+
+- 1aed87a: Modal: add `onOpen` prop and wrap component with `forwardRef`. This is to bring parity between Modal and Drawer which share similar implementation details
+
+### Patch Changes
+
+- 66ac8be: Change Storybook url and upload folder
+
 ## 4.2.8
 
 ### Patch Changes

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

@@ -82,7 +82,7 @@ const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
             event.stopPropagation();
         }
         const doClose = ()=>{
-            dialog.close();
+            dialog === null || dialog === void 0 ? void 0 : dialog.close();
             onClose === null || onClose === void 0 ? void 0 : onClose();
         };
         // Delay close to allow exit animation

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  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst 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);\n  const dialog = modalRef.current as HTMLDialogElement;\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        dialog.close();\n        onClose?.();\n      };\n\n      // Delay close to allow exit 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    },\n    [onClose, dialog],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\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        onOpen?.();\n      } else if (modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","useRef","modalRef","dialog","current","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","doClose","close","classList","add","addEventListener","remove","once","modalClasses","classNames","useEffect","toggleModal","supportsDialog","window","default","dialogPolyfill","registerDialog","showModal","open","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"AAAA;;;;;+BA6HSA;;;eAAAA;;;;+DA3Hc;uBAWhB;mCAC2B;+BACH;gCACA;uBAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,MAAMA,uBAASC,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,YAAYC,IAAAA,aAAM,EAAU;IAClC,MAAMC,WAAWD,IAAAA,aAAM,EAAoB;IAC3C,MAAME,SAASD,SAASE,OAAO;IAE/B,mBAAmB;IACnB,IAAIP,UAAU,CAACG,UAAUI,OAAO,EAAE;QAChCP;QACAG,UAAUI,OAAO,GAAG;IACtB;IAEAC,IAAAA,oCAAiB,EAAC;QAAEC,SAASd;IAAO;IAEpC,kDAAkD;IAClD,MAAMe,cAAcC,IAAAA,kBAAW,EAC7B,CAACC;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,MAAMC,UAAU;YACdT,OAAOU,KAAK;YACZf,oBAAAA,8BAAAA;QACF;QAEA,sCAAsC;QACtCK,mBAAAA,6BAAAA,OAAQW,SAAS,CAACC,GAAG,CAAC;QACtBZ,mBAAAA,6BAAAA,OAAQa,gBAAgB,CACtB,gBACA;YACEb,OAAOW,SAAS,CAACG,MAAM,CAAC;YACxBL;QACF,GACA;YAAEM,MAAM;QAAK;IAEjB,GACA;QAACpB;QAASK;KAAO;IAGnB,MAAMgB,eAAeC,IAAAA,eAAU,EAC7B,UACA,iBACA,CAAC,EAAE,EAAEzB,UAAU,CAAC,EAChBF;IAGF,+CAA+C;IAC/C4B,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBAUFpB;YATX,IAAI,CAACqB,IAAAA,6BAAc,OAAM,OAAOC,WAAW,aAAa;gBACtD,6DAA6D;gBAC7D,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBACjDA,eAAeC,cAAc,CAACzB,SAASE,OAAO;YAChD;YAEA,IAAIZ,QAAQ;oBACVU;iBAAAA,qBAAAA,SAASE,OAAO,cAAhBF,yCAAAA,mBAAkB0B,SAAS;gBAC3B/B,mBAAAA,6BAAAA;YACF,OAAO,KAAIK,oBAAAA,SAASE,OAAO,cAAhBF,wCAAAA,kBAAkB2B,IAAI,EAAE;gBACjCtB;YACF;QACF;QAEAe;IACF,GAAG;QAAC9B;QAAQK;QAAQU;KAAY;IAEhC,qBACE,sBAACJ;QACCZ,KAAKuC,IAAAA,gBAAS,EAAC;YAAC5B;YAAUX;SAAI;QAC9BwC,UAAUxB;QACVd,WAAW0B;QACXa,oBAAiB;;0BAEjB,qBAACC,8BAAc;0BACb,cAAA,qBAACC;oBAAIC,IAAG;8BAA0BvC;;;YAEnCwC,eAAQ,CAACC,GAAG,CAACtC,UAAUuC,CAAAA;gBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;oBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;wBACzBxC,SAASS;wBACTb;oBACF;gBACF;gBAEA,OAAO4C;YACT;;;AAGN;AAEAlD,OAAOqD,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst 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);\n  const dialog = modalRef.current as HTMLDialogElement;\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        dialog?.close();\n        onClose?.();\n      };\n\n      // Delay close to allow exit 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    },\n    [onClose, dialog],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\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        onOpen?.();\n      } else if (modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","useRef","modalRef","dialog","current","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","doClose","close","classList","add","addEventListener","remove","once","modalClasses","classNames","useEffect","toggleModal","supportsDialog","window","default","dialogPolyfill","registerDialog","showModal","open","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"AAAA;;;;;+BA6HSA;;;eAAAA;;;;+DA3Hc;uBAWhB;mCAC2B;+BACH;gCACA;uBAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,MAAMA,uBAASC,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,YAAYC,IAAAA,aAAM,EAAU;IAClC,MAAMC,WAAWD,IAAAA,aAAM,EAAoB;IAC3C,MAAME,SAASD,SAASE,OAAO;IAE/B,mBAAmB;IACnB,IAAIP,UAAU,CAACG,UAAUI,OAAO,EAAE;QAChCP;QACAG,UAAUI,OAAO,GAAG;IACtB;IAEAC,IAAAA,oCAAiB,EAAC;QAAEC,SAASd;IAAO;IAEpC,kDAAkD;IAClD,MAAMe,cAAcC,IAAAA,kBAAW,EAC7B,CAACC;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,MAAMC,UAAU;YACdT,mBAAAA,6BAAAA,OAAQU,KAAK;YACbf,oBAAAA,8BAAAA;QACF;QAEA,sCAAsC;QACtCK,mBAAAA,6BAAAA,OAAQW,SAAS,CAACC,GAAG,CAAC;QACtBZ,mBAAAA,6BAAAA,OAAQa,gBAAgB,CACtB,gBACA;YACEb,OAAOW,SAAS,CAACG,MAAM,CAAC;YACxBL;QACF,GACA;YAAEM,MAAM;QAAK;IAEjB,GACA;QAACpB;QAASK;KAAO;IAGnB,MAAMgB,eAAeC,IAAAA,eAAU,EAC7B,UACA,iBACA,CAAC,EAAE,EAAEzB,UAAU,CAAC,EAChBF;IAGF,+CAA+C;IAC/C4B,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBAUFpB;YATX,IAAI,CAACqB,IAAAA,6BAAc,OAAM,OAAOC,WAAW,aAAa;gBACtD,6DAA6D;gBAC7D,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBACjDA,eAAeC,cAAc,CAACzB,SAASE,OAAO;YAChD;YAEA,IAAIZ,QAAQ;oBACVU;iBAAAA,qBAAAA,SAASE,OAAO,cAAhBF,yCAAAA,mBAAkB0B,SAAS;gBAC3B/B,mBAAAA,6BAAAA;YACF,OAAO,KAAIK,oBAAAA,SAASE,OAAO,cAAhBF,wCAAAA,kBAAkB2B,IAAI,EAAE;gBACjCtB;YACF;QACF;QAEAe;IACF,GAAG;QAAC9B;QAAQK;QAAQU;KAAY;IAEhC,qBACE,sBAACJ;QACCZ,KAAKuC,IAAAA,gBAAS,EAAC;YAAC5B;YAAUX;SAAI;QAC9BwC,UAAUxB;QACVd,WAAW0B;QACXa,oBAAiB;;0BAEjB,qBAACC,8BAAc;0BACb,cAAA,qBAACC;oBAAIC,IAAG;8BAA0BvC;;;YAEnCwC,eAAQ,CAACC,GAAG,CAACtC,UAAUuC,CAAAA;gBACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;oBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;wBACzBxC,SAASS;wBACTb;oBACF;gBACF;gBAEA,OAAO4C;YACT;;;AAGN;AAEAlD,OAAOqD,WAAW,GAAG"}

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

@@ -9,20 +9,11 @@ Object.defineProperty(exports, "Content", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _react = require("react");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const Content = /*#__PURE__*/ (0, _react.forwardRef)((// eslint-disable-next-line @typescript-eslint/no-unused-vars
-{ children, onClose, closeLabel, ...otherProps }, ref)=>{
-    const classes = (0, _dedupe.default)("mobius/ModalContent");
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+const Content = /*#__PURE__*/ (0, _react.forwardRef)(({ children, onClose, closeLabel: _, ...otherProps }, ref)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         ref: ref,
         ...otherProps,
-        className: classes,
+        className: "mobius/ModalContent",
         children: _react.Children.map(children, (child)=>{
             if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
                 return /*#__PURE__*/ (0, _react.cloneElement)(child, {
@@ -31,8 +22,7 @@ const Content = /*#__PURE__*/ (0, _react.forwardRef)((// eslint-disable-next-lin
             }
             return child;
         })
-    });
-});
+    }));
 Content.displayName = "Content";
 
 //# sourceMappingURL=Content.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Content.tsx"],"sourcesContent":["import classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type DivRef = Ref<HTMLDivElement>;\nexport type DivElementType = HTMLDivElement;\nexport interface ContentProps extends DOMProps, RefAttributes<DivElementType> {\n  children?: ReactNode;\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nconst Content = forwardRef(\n  (\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    { children, onClose, closeLabel, ...otherProps }: ContentProps,\n    ref: DivRef,\n  ) => {\n    const classes = classNames(\"mobius/ModalContent\");\n\n    return (\n      <div ref={ref} {...otherProps} className={classes}>\n        {Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child, {\n              onClose,\n            } as any);\n          }\n\n          return child;\n        })}\n      </div>\n    );\n  },\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["Content","forwardRef","children","onClose","closeLabel","otherProps","ref","classes","classNames","div","className","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":";;;;+BA6CSA;;;eAAAA;;;;+DA7Cc;uBAShB;;;;;;AAWP,MAAMA,wBAAUC,IAAAA,iBAAU,EACxB,CACE,6DAA6D;AAC7D,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,YAA0B,EAC9DC;IAEA,MAAMC,UAAUC,IAAAA,eAAU,EAAC;IAE3B,qBACE,qBAACC;QAAIH,KAAKA;QAAM,GAAGD,UAAU;QAAEK,WAAWH;kBACvCI,eAAQ,CAACC,GAAG,CAACV,UAAUW,CAAAA;YACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;gBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;oBACzBV;gBACF;YACF;YAEA,OAAOU;QACT;;AAGN;AAGFb,QAAQgB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Content.tsx"],"sourcesContent":["import {\n  Children,\n  PropsWithChildren,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\nimport { DOMProps } from \"../../types/dom\";\n\nexport type DivRef = Ref<HTMLDivElement>;\nexport type DivElementType = HTMLDivElement;\nexport interface ContentProps\n  extends DOMProps,\n    RefAttributes<DivElementType>,\n    PropsWithChildren {\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nconst Content = forwardRef(\n  (\n    { children, onClose, closeLabel: _, ...otherProps }: ContentProps,\n    ref: DivRef,\n  ) => (\n    <div ref={ref} {...otherProps} className=\"mobius/ModalContent\">\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose,\n          } as any);\n        }\n\n        return child;\n      })}\n    </div>\n  ),\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["Content","forwardRef","children","onClose","closeLabel","_","otherProps","ref","div","className","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":";;;;+BAyCSA;;;eAAAA;;;;uBAjCF;AAaP,MAAMA,wBAAUC,IAAAA,iBAAU,EACxB,CACE,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,YAAYC,CAAC,EAAE,GAAGC,YAA0B,EACjEC,oBAEA,qBAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCC,eAAQ,CAACC,GAAG,CAACT,UAAUU,CAAAA;YACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;gBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;oBACzBT;gBACF;YACF;YAEA,OAAOS;QACT;;AAKNZ,QAAQe,WAAW,GAAG"}

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

@@ -10,29 +10,20 @@ Object.defineProperty(exports, "Header", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _icons = require("@simplybusiness/icons");
 const _Button = require("../Button");
 const _Icon = require("../Icon");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const Header = /*#__PURE__*/ (0, _react.forwardRef)(({ children, onClose, closeLabel, ...otherProps }, ref)=>{
-    const classes = (0, _dedupe.default)("mobius/ModalHeader");
-    const closeClasses = (0, _dedupe.default)("mobius/ModalClose");
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("header", {
+const Header = /*#__PURE__*/ (0, _react.forwardRef)(({ children, onClose, closeLabel, ...otherProps }, ref)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("header", {
         ref: ref,
         ...otherProps,
-        className: classes,
+        className: "mobius/ModalHeader",
         children: [
             children,
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Button.Button, {
                 "aria-label": "Close",
                 variant: "basic",
                 onPress: onClose,
-                className: closeClasses,
+                className: "mobius/ModalClose",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.Icon, {
                         icon: _icons.cross
@@ -42,8 +33,7 @@ const Header = /*#__PURE__*/ (0, _react.forwardRef)(({ children, onClose, closeL
                 ]
             })
         ]
-    });
-});
+    }));
 Header.displayName = "Header";
 
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Header.tsx"],"sourcesContent":["import { ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType> {\n  children?: ReactNode;\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nconst Header = forwardRef(\n  (\n    { children, onClose, closeLabel, ...otherProps }: HeaderProps,\n    ref: HeaderRef,\n  ) => {\n    const classes = classNames(\"mobius/ModalHeader\");\n    const closeClasses = classNames(\"mobius/ModalClose\");\n\n    return (\n      <header ref={ref} {...otherProps} className={classes}>\n        {children}\n        <Button\n          aria-label=\"Close\"\n          variant=\"basic\"\n          onPress={onClose}\n          className={closeClasses}\n        >\n          <Icon icon={cross} /> {closeLabel}\n        </Button>\n      </header>\n    );\n  },\n);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["Header","forwardRef","children","onClose","closeLabel","otherProps","ref","classes","classNames","closeClasses","header","className","Button","aria-label","variant","onPress","Icon","icon","cross","displayName"],"mappings":";;;;+BA4CSA;;;eAAAA;;;;uBA5CiD;+DACnC;uBAED;wBAEC;sBACF;;;;;;AAarB,MAAMA,uBAASC,IAAAA,iBAAU,EACvB,CACE,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,YAAyB,EAC7DC;IAEA,MAAMC,UAAUC,IAAAA,eAAU,EAAC;IAC3B,MAAMC,eAAeD,IAAAA,eAAU,EAAC;IAEhC,qBACE,sBAACE;QAAOJ,KAAKA;QAAM,GAAGD,UAAU;QAAEM,WAAWJ;;YAC1CL;0BACD,sBAACU,cAAM;gBACLC,cAAW;gBACXC,SAAQ;gBACRC,SAASZ;gBACTQ,WAAWF;;kCAEX,qBAACO,UAAI;wBAACC,MAAMC,YAAK;;oBAAI;oBAAEd;;;;;AAI/B;AAGFJ,OAAOmB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Modal/Header.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } from \"react\";\n\nimport { cross } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType>,\n    PropsWithChildren {\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nconst Header = forwardRef(\n  (\n    { children, onClose, closeLabel, ...otherProps }: HeaderProps,\n    ref: HeaderRef,\n  ) => (\n    <header ref={ref} {...otherProps} className=\"mobius/ModalHeader\">\n      {children}\n      <Button\n        aria-label=\"Close\"\n        variant=\"basic\"\n        onPress={onClose}\n        className=\"mobius/ModalClose\"\n      >\n        <Icon icon={cross} /> {closeLabel}\n      </Button>\n    </header>\n  ),\n);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["Header","forwardRef","children","onClose","closeLabel","otherProps","ref","header","className","Button","aria-label","variant","onPress","Icon","icon","cross","displayName"],"mappings":";;;;+BAsCSA;;;eAAAA;;;;uBAtCyD;uBAE5C;wBAEC;sBACF;AAarB,MAAMA,uBAASC,IAAAA,iBAAU,EACvB,CACE,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,YAAyB,EAC7DC,oBAEA,sBAACC;QAAOD,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;;YACzCN;0BACD,sBAACO,cAAM;gBACLC,cAAW;gBACXC,SAAQ;gBACRC,SAAST;gBACTK,WAAU;;kCAEV,qBAACK,UAAI;wBAACC,MAAMC,YAAK;;oBAAI;oBAAEX;;;;;AAM/BJ,OAAOgB,WAAW,GAAG"}

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 })=>{
+const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     var _window;
+    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,15 @@ 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)");
+    // Fire onOpen once
+    if (onOpen && !hasOpened.current) {
+        onOpen();
+        hasOpened.current = true;
+    }
     (0, _useBodyScrollLock.useBodyScrollLock)({
         enabled: isOpen
     });
@@ -82,21 +90,21 @@ 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 = ()=>{
+            dialog === null || dialog === void 0 ? void 0 : dialog.close();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        };
+        if (animation) {
+            dialog === null || dialog === void 0 ? void 0 : dialog.classList.add("close");
+            dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("animationend", ()=>{
+                dialog.classList.remove("close");
                 doClose();
-            }
+            }, {
+                once: true
+            });
+        } else {
+            doClose();
         }
     }, [
         animation,
@@ -122,17 +130,22 @@ size, appElement, preventCloseOnEsc, shouldFocusAfterRender, parentSelector })=>
             if (isOpen) {
                 var _modalRef_current1;
                 (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.showModal();
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
             } 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();
+                handleClose();
             }
         }
         toggleModal();
     }, [
-        isOpen
+        isOpen,
+        onOpen,
+        handleClose
     ]);
     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 +158,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 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);\n  const dialog = modalRef.current as HTMLDialogElement;\n  const noPreference = window?.matchMedia(\n    \"(prefers-reduced-motion: no-preference)\",\n  );\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        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    [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        onOpen?.();\n      } else if (modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose]);\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","forwardRef","props","ref","window","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","useRef","current","console","warn","hasOpened","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","mergeRefs","onCancel","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"AAAA;;;;;+BA2JSA;;;eAAAA;;;;+DAzJc;uBAWhB;mCAC2B;+BACH;uBAEL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,MAAMA,sBAAQC,IAAAA,iBAAU,EAAC,CAACC,OAAmBC;QAqCtBC;IApCrB,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,GAAGf;IACJ,MAAMgB,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,EAAoB;IAC3C,MAAMM,SAASD,SAASJ,OAAO;IAC/B,MAAMM,gBAAetB,UAAAA,oBAAAA,8BAAAA,QAAQuB,UAAU,CACrC;IAGF,mBAAmB;IACnB,IAAIpB,UAAU,CAACgB,UAAUH,OAAO,EAAE;QAChCb;QACAgB,UAAUH,OAAO,GAAG;IACtB;IAEAQ,IAAAA,oCAAiB,EAAC;QAAEC,SAASxB;IAAO;IAEpC,kDAAkD;IAClD,MAAMyB,cAAcC,IAAAA,kBAAW,EAC7B,CAACC;QACC,IAAIA,OAAO;YACTA,MAAMC,cAAc;YACpBD,MAAME,eAAe;QACvB;QAEA,MAAMC,UAAU;YACdV,mBAAAA,6BAAAA,OAAQW,KAAK;YACb9B,oBAAAA,8BAAAA;QACF;QAEA,IAAIM,WAAW;YACba,mBAAAA,6BAAAA,OAAQY,SAAS,CAACC,GAAG,CAAC;YACtBb,mBAAAA,6BAAAA,OAAQc,gBAAgB,CACtB,gBACA;gBACEd,OAAOY,SAAS,CAACG,MAAM,CAAC;gBACxBL;YACF,GACA;gBAAEM,MAAM;YAAK;QAEjB,OAAO;YACLN;QACF;IACF,GACA;QAACvB;QAAWa;QAAQnB;KAAQ;IAG9B,MAAMoC,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;gBAUFtB;YATX,IAAI,CAACuB,IAAAA,6BAAc,OAAM,OAAO3C,WAAW,aAAa;gBACtD,6DAA6D;gBAC7D,MAAM,EAAE4C,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBACjDA,eAAeC,cAAc,CAAC1B,SAASJ,OAAO;YAChD;YAEA,IAAIf,QAAQ;oBACVmB;iBAAAA,qBAAAA,SAASJ,OAAO,cAAhBI,yCAAAA,mBAAkB2B,SAAS;gBAC3B5C,mBAAAA,6BAAAA;YACF,OAAO,KAAIiB,oBAAAA,SAASJ,OAAO,cAAhBI,wCAAAA,kBAAkB4B,IAAI,EAAE;gBACjCtB;YACF;QACF;QAEAgB;IACF,GAAG;QAACzC;QAAQE;QAAQuB;KAAY;IAEhC,qBACE,qBAACL;QACCtB,KAAKkD,IAAAA,gBAAS,EAAC;YAAC7B;YAAUrB;SAAI;QAC9BmD,UAAUxB;QACVrB,WAAWiC;kBAEVa,eAAQ,CAACC,GAAG,CAAChD,UAAUiD,CAAAA;YACtB,kBAAIC,IAAAA,qBAAc,EAACD,QAAQ;gBACzB,qBAAOE,IAAAA,mBAAY,EAACF,OAAO;oBACzBnD,SAASwB;oBACTpB;gBACF;YACF;YAEA,OAAO+C;QACT;;AAGN;AAEAzD,MAAM4D,WAAW,GAAG"}

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/hooks/useTextField/useTextField.js

@@ -9,8 +9,8 @@ Object.defineProperty(exports, "useTextField", {
     }
 });
 const _react = require("react");
-const _useLabel = require("../useLabel/useLabel");
 const _spaceDelimitedList = require("../../utils/spaceDelimitedList");
+const _useLabel = require("../useLabel/useLabel");
 function useTextField(props) {
     const { isDisabled = false, isReadOnly = false, isRequired = false, inputElementType = "input" } = props;
     const { labelProps, fieldProps } = (0, _useLabel.useLabel)(props);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useTextField/useTextField.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n  const {\n    isDisabled = false,\n    isReadOnly = false,\n    isRequired = false,\n    inputElementType = \"input\",\n  } = props;\n  const { labelProps, fieldProps } = useLabel(props);\n\n  const descriptionId = useId();\n  const descriptionProps = { id: descriptionId };\n\n  const errorMessageId = useId();\n  const errorMessageProps = { id: errorMessageId };\n\n  const ariaDescribedBy = spaceDelimitedList([\n    props.description && descriptionId,\n    props.errorMessage && errorMessageId,\n    props[\"aria-describedby\"],\n  ]);\n\n  return {\n    descriptionProps,\n    errorMessageProps,\n    labelProps,\n    inputProps: {\n      defaultValue: props.defaultValue,\n      value: props.value,\n      onChange: props.onChange,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      \"aria-required\": isRequired === true ? true : undefined,\n      \"aria-invalid\":\n        props.validationState === \"invalid\"\n          ? true\n          : props.validationState === \"valid\"\n          ? false\n          : undefined,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": props[\"aria-errormessage\"],\n\n      type: inputElementType === \"input\" ? props.type : undefined,\n      pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n      autoComplete: props.autoComplete,\n      maxLength: props.maxLength,\n      minLength: props.minLength,\n      name: props.name,\n      placeholder: props.placeholder,\n      inputMode: props.inputMode,\n\n      // Clipboard events\n      onCopy: props.onCopy,\n      onCut: props.onCut,\n      onPaste: props.onPaste,\n\n      // Composition events\n      onCompositionEnd: props.onCompositionEnd,\n      onCompositionStart: props.onCompositionStart,\n      onCompositionUpdate: props.onCompositionUpdate,\n\n      // Selection events\n      onSelect: props.onSelect,\n\n      // Input events\n      onBeforeInput: props.onBeforeInput,\n      onInput: props.onInput,\n\n      // Focus events\n      onFocus: props.onFocus,\n      onBlur: props.onBlur,\n\n      ...fieldProps,\n    },\n  };\n}\n"],"names":["useTextField","props","isDisabled","isReadOnly","isRequired","inputElementType","labelProps","fieldProps","useLabel","descriptionId","useId","descriptionProps","id","errorMessageId","errorMessageProps","ariaDescribedBy","spaceDelimitedList","description","errorMessage","inputProps","defaultValue","value","onChange","disabled","readOnly","undefined","validationState","type","pattern","autoComplete","maxLength","minLength","name","placeholder","inputMode","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onSelect","onBeforeInput","onInput","onFocus","onBlur"],"mappings":";;;;+BAKgBA;;;eAAAA;;;uBALM;0BACG;oCAEU;AAE5B,SAASA,aAAaC,KAAwB;IACnD,MAAM,EACJC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,mBAAmB,OAAO,EAC3B,GAAGJ;IACJ,MAAM,EAAEK,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,kBAAQ,EAACP;IAE5C,MAAMQ,gBAAgBC,IAAAA,YAAK;IAC3B,MAAMC,mBAAmB;QAAEC,IAAIH;IAAc;IAE7C,MAAMI,iBAAiBH,IAAAA,YAAK;IAC5B,MAAMI,oBAAoB;QAAEF,IAAIC;IAAe;IAE/C,MAAME,kBAAkBC,IAAAA,sCAAkB,EAAC;QACzCf,MAAMgB,WAAW,IAAIR;QACrBR,MAAMiB,YAAY,IAAIL;QACtBZ,KAAK,CAAC,mBAAmB;KAC1B;IAED,OAAO;QACLU;QACAG;QACAR;QACAa,YAAY;YACVC,cAAcnB,MAAMmB,YAAY;YAChCC,OAAOpB,MAAMoB,KAAK;YAClBC,UAAUrB,MAAMqB,QAAQ;YACxBC,UAAUrB;YACVsB,UAAUrB;YACV,iBAAiBC,eAAe,OAAO,OAAOqB;YAC9C,gBACExB,MAAMyB,eAAe,KAAK,YACtB,OACAzB,MAAMyB,eAAe,KAAK,UAC1B,QACAD;YACN,oBAAoBV;YACpB,qBAAqBd,KAAK,CAAC,oBAAoB;YAE/C0B,MAAMtB,qBAAqB,UAAUJ,MAAM0B,IAAI,GAAGF;YAClDG,SAASvB,qBAAqB,UAAUJ,MAAM2B,OAAO,GAAGH;YAExDI,cAAc5B,MAAM4B,YAAY;YAChCC,WAAW7B,MAAM6B,SAAS;YAC1BC,WAAW9B,MAAM8B,SAAS;YAC1BC,MAAM/B,MAAM+B,IAAI;YAChBC,aAAahC,MAAMgC,WAAW;YAC9BC,WAAWjC,MAAMiC,SAAS;YAE1B,mBAAmB;YACnBC,QAAQlC,MAAMkC,MAAM;YACpBC,OAAOnC,MAAMmC,KAAK;YAClBC,SAASpC,MAAMoC,OAAO;YAEtB,qBAAqB;YACrBC,kBAAkBrC,MAAMqC,gBAAgB;YACxCC,oBAAoBtC,MAAMsC,kBAAkB;YAC5CC,qBAAqBvC,MAAMuC,mBAAmB;YAE9C,mBAAmB;YACnBC,UAAUxC,MAAMwC,QAAQ;YAExB,eAAe;YACfC,eAAezC,MAAMyC,aAAa;YAClCC,SAAS1C,MAAM0C,OAAO;YAEtB,eAAe;YACfC,SAAS3C,MAAM2C,OAAO;YACtBC,QAAQ5C,MAAM4C,MAAM;YAEpB,GAAGtC,UAAU;QACf;IACF;AACF"}
+{"version":3,"sources":["../../../../src/hooks/useTextField/useTextField.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n  const {\n    isDisabled = false,\n    isReadOnly = false,\n    isRequired = false,\n    inputElementType = \"input\",\n  } = props;\n  const { labelProps, fieldProps } = useLabel(props);\n\n  const descriptionId = useId();\n  const descriptionProps = { id: descriptionId };\n\n  const errorMessageId = useId();\n  const errorMessageProps = { id: errorMessageId };\n\n  const ariaDescribedBy = spaceDelimitedList([\n    props.description && descriptionId,\n    props.errorMessage && errorMessageId,\n    props[\"aria-describedby\"],\n  ]);\n\n  return {\n    descriptionProps,\n    errorMessageProps,\n    labelProps,\n    inputProps: {\n      defaultValue: props.defaultValue,\n      value: props.value,\n      onChange: props.onChange,\n      disabled: isDisabled,\n      readOnly: isReadOnly,\n      \"aria-required\": isRequired === true ? true : undefined,\n      \"aria-invalid\":\n        props.validationState === \"invalid\"\n          ? true\n          : props.validationState === \"valid\"\n            ? false\n            : undefined,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": props[\"aria-errormessage\"],\n\n      type: inputElementType === \"input\" ? props.type : undefined,\n      pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n      autoComplete: props.autoComplete,\n      maxLength: props.maxLength,\n      minLength: props.minLength,\n      name: props.name,\n      placeholder: props.placeholder,\n      inputMode: props.inputMode,\n\n      // Clipboard events\n      onCopy: props.onCopy,\n      onCut: props.onCut,\n      onPaste: props.onPaste,\n\n      // Composition events\n      onCompositionEnd: props.onCompositionEnd,\n      onCompositionStart: props.onCompositionStart,\n      onCompositionUpdate: props.onCompositionUpdate,\n\n      // Selection events\n      onSelect: props.onSelect,\n\n      // Input events\n      onBeforeInput: props.onBeforeInput,\n      onInput: props.onInput,\n\n      // Focus events\n      onFocus: props.onFocus,\n      onBlur: props.onBlur,\n\n      ...fieldProps,\n    },\n  };\n}\n"],"names":["useTextField","props","isDisabled","isReadOnly","isRequired","inputElementType","labelProps","fieldProps","useLabel","descriptionId","useId","descriptionProps","id","errorMessageId","errorMessageProps","ariaDescribedBy","spaceDelimitedList","description","errorMessage","inputProps","defaultValue","value","onChange","disabled","readOnly","undefined","validationState","type","pattern","autoComplete","maxLength","minLength","name","placeholder","inputMode","onCopy","onCut","onPaste","onCompositionEnd","onCompositionStart","onCompositionUpdate","onSelect","onBeforeInput","onInput","onFocus","onBlur"],"mappings":";;;;+BAKgBA;;;eAAAA;;;uBALM;oCACa;0BACV;AAGlB,SAASA,aAAaC,KAAwB;IACnD,MAAM,EACJC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,aAAa,KAAK,EAClBC,mBAAmB,OAAO,EAC3B,GAAGJ;IACJ,MAAM,EAAEK,UAAU,EAAEC,UAAU,EAAE,GAAGC,IAAAA,kBAAQ,EAACP;IAE5C,MAAMQ,gBAAgBC,IAAAA,YAAK;IAC3B,MAAMC,mBAAmB;QAAEC,IAAIH;IAAc;IAE7C,MAAMI,iBAAiBH,IAAAA,YAAK;IAC5B,MAAMI,oBAAoB;QAAEF,IAAIC;IAAe;IAE/C,MAAME,kBAAkBC,IAAAA,sCAAkB,EAAC;QACzCf,MAAMgB,WAAW,IAAIR;QACrBR,MAAMiB,YAAY,IAAIL;QACtBZ,KAAK,CAAC,mBAAmB;KAC1B;IAED,OAAO;QACLU;QACAG;QACAR;QACAa,YAAY;YACVC,cAAcnB,MAAMmB,YAAY;YAChCC,OAAOpB,MAAMoB,KAAK;YAClBC,UAAUrB,MAAMqB,QAAQ;YACxBC,UAAUrB;YACVsB,UAAUrB;YACV,iBAAiBC,eAAe,OAAO,OAAOqB;YAC9C,gBACExB,MAAMyB,eAAe,KAAK,YACtB,OACAzB,MAAMyB,eAAe,KAAK,UACxB,QACAD;YACR,oBAAoBV;YACpB,qBAAqBd,KAAK,CAAC,oBAAoB;YAE/C0B,MAAMtB,qBAAqB,UAAUJ,MAAM0B,IAAI,GAAGF;YAClDG,SAASvB,qBAAqB,UAAUJ,MAAM2B,OAAO,GAAGH;YAExDI,cAAc5B,MAAM4B,YAAY;YAChCC,WAAW7B,MAAM6B,SAAS;YAC1BC,WAAW9B,MAAM8B,SAAS;YAC1BC,MAAM/B,MAAM+B,IAAI;YAChBC,aAAahC,MAAMgC,WAAW;YAC9BC,WAAWjC,MAAMiC,SAAS;YAE1B,mBAAmB;YACnBC,QAAQlC,MAAMkC,MAAM;YACpBC,OAAOnC,MAAMmC,KAAK;YAClBC,SAASpC,MAAMoC,OAAO;YAEtB,qBAAqB;YACrBC,kBAAkBrC,MAAMqC,gBAAgB;YACxCC,oBAAoBtC,MAAMsC,kBAAkB;YAC5CC,qBAAqBvC,MAAMuC,mBAAmB;YAE9C,mBAAmB;YACnBC,UAAUxC,MAAMwC,QAAQ;YAExB,eAAe;YACfC,eAAezC,MAAMyC,aAAa;YAClCC,SAAS1C,MAAM0C,OAAO;YAEtB,eAAe;YACfC,SAAS3C,MAAM2C,OAAO;YACtBC,QAAQ5C,MAAM4C,MAAM;YAEpB,GAAGtC,UAAU;QACf;IACF;AACF"}