@simplybusiness/mobius 4.4.6 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.5.0
+
+### Minor Changes
+
+- d1ba747: Refactor `onClose`, `closeLabel` child props in `<Drawer>` / `<Modal>`
+
 ## 4.4.6
 
 ### Patch Changes

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

@@ -10,18 +10,11 @@ Object.defineProperty(exports, "Content", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const Content = /*#__PURE__*/ (0, _react.forwardRef)(({ children, onClose, closeLabel: _, ...otherProps }, ref)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+const Content = /*#__PURE__*/ (0, _react.forwardRef)(({ children, ...otherProps }, ref)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         ref: ref,
         ...otherProps,
         className: "mobius/DrawerContent",
-        children: _react.Children.map(children, (child)=>{
-            if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
-                return /*#__PURE__*/ (0, _react.cloneElement)(child, {
-                    onClose
-                });
-            }
-            return child;
-        })
+        children: children
     }));
 Content.displayName = "Content";
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/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/DrawerContent\">\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"}
+{"version":3,"sources":["../../../../src/components/Drawer/Content.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } 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\nconst Content = forwardRef(\n  ({ children, ...otherProps }: ContentProps, ref: DivRef) => (\n    <div ref={ref} {...otherProps} className=\"mobius/DrawerContent\">\n      {children}\n    </div>\n  ),\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["Content","forwardRef","children","otherProps","ref","div","className","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnByD;AAUlE,MAAMA,wBAAUC,IAAAA,iBAAU,EACxB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAA0B,EAAEC,oBAC1C,qBAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCJ;;AAKPF,QAAQO,WAAW,GAAG"}

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

@@ -16,6 +16,7 @@ const _useBodyScrollLock = require("../../hooks/useBodyScrollLock");
 const _polyfilltests = require("../../utils/polyfill-tests");
 const _VisuallyHidden = require("../VisuallyHidden");
 const _utils = require("../../utils");
+const _DrawerContext = require("./DrawerContext");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -78,9 +79,6 @@ const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     });
     // Add close handler, to enable closing transitions
     const handleClose = (0, _react.useCallback)((event)=>{
-        // `transitionend` may be called from another component but `event` may be undefined.
-        // This fixes an issue where closing `<Accordion>` inside `<Drawer>` will close both
-        if (!event) return;
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -147,6 +145,13 @@ const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         handleClose,
         hasDialogSupport
     ]);
+    const contextValue = (0, _react.useMemo)(()=>({
+            onClose: handleClose,
+            closeLabel
+        }), [
+        handleClose,
+        closeLabel
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("dialog", {
         ref: (0, _utils.mergeRefs)([
             modalRef,
@@ -162,14 +167,9 @@ const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
                     children: announce
                 })
             }),
-            _react.Children.map(children, (child)=>{
-                if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
-                    return /*#__PURE__*/ (0, _react.cloneElement)(child, {
-                        onClose: handleClose,
-                        closeLabel
-                    });
-                }
-                return child;
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_DrawerContext.DrawerContext.Provider, {
+                value: contextValue,
+                children: children
             })
         ]
     });

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 TRANSITION_CLASS_NAME = \"--transition\";\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      // `transitionend` may be called from another component but `event` may be undefined.\n      // This fixes an issue where closing `<Accordion>` inside `<Drawer>` will close both\n      if (!event) return;\n\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close drawer only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\"transitionend\", transitionCallback);\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": hasDialogSupport,\n    },\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  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","TRANSITION_CLASS_NAME","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","useRef","modalRef","hasDialogSupport","supportsDialog","current","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","dialog","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Ref,\n  SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\nimport { DrawerContext } from \"./DrawerContext\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close drawer only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\"transitionend\", transitionCallback);\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": hasDialogSupport,\n    },\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: handleClose,\n      closeLabel,\n    }),\n    [handleClose, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      <DrawerContext.Provider value={contextValue}>\n        {children}\n      </DrawerContext.Provider>\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","TRANSITION_CLASS_NAME","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","useRef","modalRef","hasDialogSupport","supportsDialog","current","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","contextValue","useMemo","dialog","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","DrawerContext","Provider","value","displayName"],"mappings":"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"}

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

@@ -10,8 +10,8 @@ Object.defineProperty(exports, "DrawerContext", {
 });
 const _react = require("react");
 const DrawerContext = /*#__PURE__*/ (0, _react.createContext)({
-    closeDrawer: ()=>{},
-    closeLabel: ""
+    onClose: ()=>{},
+    closeLabel: undefined
 });
 
 //# sourceMappingURL=DrawerContext.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/DrawerContext.tsx"],"sourcesContent":["import { SyntheticEvent, createContext } from \"react\";\nimport { DrawerProps } from \"./types\";\n\nexport interface DrawerContextProps extends Pick<DrawerProps, \"closeLabel\"> {\n  closeDrawer: (event?: SyntheticEvent<HTMLElement, Event>) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextProps>({\n  closeDrawer: () => {},\n  closeLabel: \"\",\n});\n"],"names":["DrawerContext","createContext","closeDrawer","closeLabel"],"mappings":";;;;+BAOaA;;;eAAAA;;;uBAPiC;AAOvC,MAAMA,8BAAgBC,IAAAA,oBAAa,EAAqB;IAC7DC,aAAa,KAAO;IACpBC,YAAY;AACd"}
+{"version":3,"sources":["../../../../src/components/Drawer/DrawerContext.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { DrawerContextProps } from \"./types\";\n\nexport const DrawerContext = createContext<DrawerContextProps>({\n  onClose: () => {},\n  closeLabel: undefined,\n});\n"],"names":["DrawerContext","createContext","onClose","closeLabel","undefined"],"mappings":";;;;+BAGaA;;;eAAAA;;;uBAHiB;AAGvB,MAAMA,8BAAgBC,IAAAA,oBAAa,EAAqB;IAC7DC,SAAS,KAAO;IAChBC,YAAYC;AACd"}

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

@@ -13,7 +13,10 @@ const _react = require("react");
 const _icons = require("@simplybusiness/icons");
 const _Button = require("../Button");
 const _Icon = require("../Icon");
-const Header = /*#__PURE__*/ (0, _react.forwardRef)(({ children, onClose, closeLabel, ...otherProps }, ref)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("header", {
+const _useDrawer = require("./useDrawer");
+const Header = /*#__PURE__*/ (0, _react.forwardRef)(({ children, ...otherProps }, ref)=>{
+    const { onClose, closeLabel } = (0, _useDrawer.useDrawer)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("header", {
         ref: ref,
         ...otherProps,
         className: "mobius/DrawerHeader",
@@ -33,7 +36,8 @@ const Header = /*#__PURE__*/ (0, _react.forwardRef)(({ children, onClose, closeL
                 ]
             })
         ]
-    }));
+    });
+});
 Header.displayName = "Header";
 
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/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/DrawerHeader\">\n      {children}\n      <Button\n        aria-label=\"Close\"\n        variant=\"basic\"\n        onPress={onClose}\n        className=\"mobius/DrawerClose\"\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"}
+{"version":3,"sources":["../../../../src/components/Drawer/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\";\nimport { useDrawer } from \"./useDrawer\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType>,\n    PropsWithChildren {}\n\nconst Header = forwardRef(\n  ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {\n    const { onClose, closeLabel } = useDrawer();\n\n    return (\n      <header ref={ref} {...otherProps} className=\"mobius/DrawerHeader\">\n        {children}\n        <Button\n          aria-label=\"Close\"\n          variant=\"basic\"\n          onPress={onClose}\n          className=\"mobius/DrawerClose\"\n        >\n          <Icon icon={cross} /> {closeLabel}\n        </Button>\n      </header>\n    );\n  },\n);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["Header","forwardRef","children","otherProps","ref","onClose","closeLabel","useDrawer","header","className","Button","aria-label","variant","onPress","Icon","icon","cross","displayName"],"mappings":";;;;+BAqCSA;;;eAAAA;;;;uBArCyD;uBAE5C;wBAEC;sBACF;2BACK;AAU1B,MAAMA,uBAASC,IAAAA,iBAAU,EACvB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAAyB,EAAEC;IACzC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,IAAAA,oBAAS;IAEzC,qBACE,sBAACC;QAAOJ,KAAKA;QAAM,GAAGD,UAAU;QAAEM,WAAU;;YACzCP;0BACD,sBAACQ,cAAM;gBACLC,cAAW;gBACXC,SAAQ;gBACRC,SAASR;gBACTI,WAAU;;kCAEV,qBAACK,UAAI;wBAACC,MAAMC,YAAK;;oBAAI;oBAAEV;;;;;AAI/B;AAGFN,OAAOiB,WAAW,GAAG"}

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

@@ -2,14 +2,23 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "Drawer", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Drawer: function() {
         return Drawer;
+    },
+    useDrawer: function() {
+        return _useDrawer.useDrawer;
     }
 });
 const _Content = require("./Content");
 const _Drawer = require("./Drawer");
+const _useDrawer = require("./useDrawer");
 const _Header = require("./Header");
 const Drawer = Object.assign(_Drawer.Drawer, {
     Header: _Header.Header,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/index.tsx"],"sourcesContent":["import {\n  Content,\n  DivElementType as DrawerContentDivElementType,\n  ContentProps as DrawerContentProps,\n} from \"./Content\";\nimport { Drawer as DrawerComponent } from \"./Drawer\";\nimport { DrawerProps } from \"./types\";\nimport {\n  HeaderElementType as DrawerHeaderElementType,\n  HeaderProps as DrawerHeaderProps,\n  Header,\n} from \"./Header\";\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Header,\n  Content,\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n\nexport type {\n  DrawerContentDivElementType,\n  DrawerContentProps,\n  DrawerHeaderElementType,\n  DrawerHeaderProps,\n  DrawerProps,\n};\n"],"names":["Drawer","Object","assign","DrawerComponent","Header","Content","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;yBAfF;wBACmC;wBAMnC;AAEP,MAAMA,SAASC,OAAOC,MAAM,CAACC,cAAe,EAAE;IAC5CC,QAAAA,cAAM;IACNC,SAAAA,gBAAO;AACT;AAEAL,OAAOM,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Drawer/index.tsx"],"sourcesContent":["import {\n  Content,\n  DivElementType as DrawerContentDivElementType,\n  ContentProps as DrawerContentProps,\n} from \"./Content\";\nimport { Drawer as DrawerComponent } from \"./Drawer\";\nimport { DrawerProps, DrawerContextProps } from \"./types\";\nimport { useDrawer } from \"./useDrawer\";\nimport {\n  HeaderElementType as DrawerHeaderElementType,\n  HeaderProps as DrawerHeaderProps,\n  Header,\n} from \"./Header\";\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Header,\n  Content,\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer, useDrawer };\n\nexport type {\n  DrawerContextProps,\n  DrawerContentDivElementType,\n  DrawerContentProps,\n  DrawerHeaderElementType,\n  DrawerHeaderProps,\n  DrawerProps,\n};\n"],"names":["Drawer","useDrawer","Object","assign","DrawerComponent","Header","Content","displayName"],"mappings":";;;;;;;;;;;IAoBSA,MAAM;eAANA;;IAAQC,SAAS;eAATA,oBAAS;;;yBAhBnB;wBACmC;2BAEhB;wBAKnB;AAEP,MAAMD,SAASE,OAAOC,MAAM,CAACC,cAAe,EAAE;IAC5CC,QAAAA,cAAM;IACNC,SAAAA,gBAAO;AACT;AAEAN,OAAOO,WAAW,GAAG"}

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

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "useDrawer", {
 const _react = require("react");
 const _DrawerContext = require("./DrawerContext");
 const useDrawer = ()=>{
-    const { closeDrawer, closeLabel } = (0, _react.useContext)(_DrawerContext.DrawerContext);
+    const { onClose, closeLabel } = (0, _react.useContext)(_DrawerContext.DrawerContext);
     return {
-        closeDrawer,
+        onClose,
         closeLabel
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/useDrawer.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { DrawerContext } from \"./DrawerContext\";\n\nexport const useDrawer = () => {\n  const { closeDrawer, closeLabel } = useContext(DrawerContext);\n\n  return {\n    closeDrawer,\n    closeLabel,\n  };\n};\n"],"names":["useDrawer","closeDrawer","closeLabel","useContext","DrawerContext"],"mappings":";;;;+BAGaA;;;eAAAA;;;uBAHc;+BACG;AAEvB,MAAMA,YAAY;IACvB,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAE,GAAGC,IAAAA,iBAAU,EAACC,4BAAa;IAE5D,OAAO;QACLH;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../../../src/components/Drawer/useDrawer.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { DrawerContext } from \"./DrawerContext\";\n\nexport const useDrawer = () => {\n  const { onClose, closeLabel } = useContext(DrawerContext);\n\n  return { onClose, closeLabel };\n};\n"],"names":["useDrawer","onClose","closeLabel","useContext","DrawerContext"],"mappings":";;;;+BAGaA;;;eAAAA;;;uBAHc;+BACG;AAEvB,MAAMA,YAAY;IACvB,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,IAAAA,iBAAU,EAACC,4BAAa;IAExD,OAAO;QAAEH;QAASC;IAAW;AAC/B"}

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

@@ -10,18 +10,11 @@ Object.defineProperty(exports, "Content", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const Content = /*#__PURE__*/ (0, _react.forwardRef)(({ children, onClose, closeLabel: _, ...otherProps }, ref)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+const Content = /*#__PURE__*/ (0, _react.forwardRef)(({ children, ...otherProps }, ref)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         ref: ref,
         ...otherProps,
         className: "mobius/ModalContent",
-        children: _react.Children.map(children, (child)=>{
-            if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
-                return /*#__PURE__*/ (0, _react.cloneElement)(child, {
-                    onClose
-                });
-            }
-            return child;
-        })
+        children: children
     }));
 Content.displayName = "Content";
 

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../../../../src/components/Modal/Content.tsx"],"sourcesContent":["import { PropsWithChildren, Ref, RefAttributes, forwardRef } 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\nconst Content = forwardRef(\n  ({ children, ...otherProps }: ContentProps, ref: DivRef) => (\n    <div ref={ref} {...otherProps} className=\"mobius/ModalContent\">\n      {children}\n    </div>\n  ),\n);\n\nContent.displayName = \"Content\";\nexport { Content };\n"],"names":["Content","forwardRef","children","otherProps","ref","div","className","displayName"],"mappings":";;;;+BAmBSA;;;eAAAA;;;;uBAnByD;AAUlE,MAAMA,wBAAUC,IAAAA,iBAAU,EACxB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAA0B,EAAEC,oBAC1C,qBAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCJ;;AAKPF,QAAQO,WAAW,GAAG"}

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

@@ -13,7 +13,10 @@ const _react = require("react");
 const _icons = require("@simplybusiness/icons");
 const _Button = require("../Button");
 const _Icon = require("../Icon");
-const Header = /*#__PURE__*/ (0, _react.forwardRef)(({ children, onClose, closeLabel, ...otherProps }, ref)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("header", {
+const _useModal = require("./useModal");
+const Header = /*#__PURE__*/ (0, _react.forwardRef)(({ children, ...otherProps }, ref)=>{
+    const { onClose, closeLabel } = (0, _useModal.useModal)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("header", {
         ref: ref,
         ...otherProps,
         className: "mobius/ModalHeader",
@@ -33,7 +36,8 @@ 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 { 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"}
+{"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\";\nimport { useModal } from \"./useModal\";\n\nexport type HeaderElementType = HTMLDivElement;\nexport type HeaderRef = Ref<HTMLElement>;\n\nexport interface HeaderProps\n  extends DOMProps,\n    RefAttributes<HeaderElementType>,\n    PropsWithChildren {}\n\nconst Header = forwardRef(\n  ({ children, ...otherProps }: HeaderProps, ref: HeaderRef) => {\n    const { onClose, closeLabel } = useModal();\n\n    return (\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);\n\nHeader.displayName = \"Header\";\nexport { Header };\n"],"names":["Header","forwardRef","children","otherProps","ref","onClose","closeLabel","useModal","header","className","Button","aria-label","variant","onPress","Icon","icon","cross","displayName"],"mappings":";;;;+BAqCSA;;;eAAAA;;;;uBArCyD;uBAE5C;wBAEC;sBACF;0BACI;AAUzB,MAAMA,uBAASC,IAAAA,iBAAU,EACvB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,YAAyB,EAAEC;IACzC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,IAAAA,kBAAQ;IAExC,qBACE,sBAACC;QAAOJ,KAAKA;QAAM,GAAGD,UAAU;QAAEM,WAAU;;YACzCP;0BACD,sBAACQ,cAAM;gBACLC,cAAW;gBACXC,SAAQ;gBACRC,SAASR;gBACTI,WAAU;;kCAEV,qBAACK,UAAI;wBAACC,MAAMC,YAAK;;oBAAI;oBAAEV;;;;;AAI/B;AAGFN,OAAOiB,WAAW,GAAG"}

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

@@ -15,6 +15,7 @@ const _react = require("react");
 const _useBodyScrollLock = require("../../hooks/useBodyScrollLock");
 const _polyfilltests = require("../../utils/polyfill-tests");
 const _utils = require("../../utils");
+const _ModalContext = require("./ModalContext");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -86,9 +87,6 @@ const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     });
     // Add close handler, to enable closing animations
     const handleClose = (0, _react.useCallback)((event)=>{
-        // `transitionend` may be called from another component but `event` may be undefined.
-        // This fixes an issue where closing `<Accordion>` inside `<Modal>` will close both
-        if (!event) return;
         if (event) {
             event.preventDefault();
             event.stopPropagation();
@@ -160,6 +158,13 @@ const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         handleClose,
         hasDialogSupport
     ]);
+    const contextValue = (0, _react.useMemo)(()=>({
+            onClose: handleClose,
+            closeLabel
+        }), [
+        handleClose,
+        closeLabel
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("dialog", {
         ref: (0, _utils.mergeRefs)([
             modalRef,
@@ -167,14 +172,9 @@ const Modal = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         ]),
         onCancel: handleClose,
         className: modalClasses,
-        children: _react.Children.map(children, (child)=>{
-            if (/*#__PURE__*/ (0, _react.isValidElement)(child)) {
-                return /*#__PURE__*/ (0, _react.cloneElement)(child, {
-                    onClose: handleClose,
-                    closeLabel
-                });
-            }
-            return child;
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalContext.ModalContext.Provider, {
+            value: contextValue,
+            children: children
         })
     });
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Children,\n  Ref,\n  SyntheticEvent,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      // `transitionend` may be called from another component but `event` may be undefined.\n      // This fixes an issue where closing `<Accordion>` inside `<Modal>` will close both\n      if (!event) return;\n\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close modal only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport && animation) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\"transitionend\", transitionCallback);\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport, animation],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": hasDialogSupport && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n    >\n      {Children.map(children, child => {\n        if (isValidElement(child)) {\n          return cloneElement(child, {\n            onClose: handleClose,\n            closeLabel,\n          } as any);\n        }\n\n        return child;\n      })}\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","TRANSITION_CLASS_NAME","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","useRef","current","console","warn","hasOpened","modalRef","hasDialogSupport","supportsDialog","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","dialog","mergeRefs","onCancel","Children","map","child","isValidElement","cloneElement","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport {\n  Ref,\n  SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useBodyScrollLock } from \"../../hooks/useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils/polyfill-tests\";\nimport { ModalProps } from \"./types\";\nimport { mergeRefs } from \"../../utils\";\nimport { ModalContext } from \"./ModalContext\";\n\nexport type ModalElementType = HTMLDialogElement;\nexport type ModalRef = Ref<ModalElementType>;\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\n\nconst Modal = forwardRef((props: ModalProps, ref: ModalRef) => {\n  const {\n    isOpen,\n    onClose,\n    onOpen,\n    children,\n    className,\n    closeLabel,\n    isFullScreen,\n    animation,\n    // Deprecated props below\n    size,\n    appElement,\n    preventCloseOnEsc,\n    shouldFocusAfterRender,\n    parentSelector,\n  } = props;\n  const hasWarnedAboutMissingLabels = useRef<boolean>(false);\n  // Handle deprecated props\n  if (!hasWarnedAboutMissingLabels.current) {\n    if (\n      size ||\n      appElement ||\n      preventCloseOnEsc ||\n      shouldFocusAfterRender ||\n      parentSelector\n    ) {\n      console.warn(\n        `Deprecation warning: Mobius Modal no longer supports the following props: size, appElement, preventCloseOnEsc, shouldFocusAfterRender and parentSelector.`,\n      );\n      hasWarnedAboutMissingLabels.current = true;\n    }\n  }\n\n  const hasOpened = useRef<boolean>(false);\n  const modalRef = useRef<HTMLDialogElement | null>(null);\n  const hasDialogSupport = supportsDialog();\n\n  // Fire onOpen once\n  if (onOpen && !hasOpened.current) {\n    onOpen();\n    hasOpened.current = true;\n  }\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  // Add close handler, to enable closing animations\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n\n      // Name the callback function, so we can add and remove event listener\n      const transitionCallback = (e: Event) => {\n        // Close modal only if the transition is on the dialog element\n        // As it can be on a child element (ie `<Button>` inside the drawer)\n        if (e.target === modalRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-use-before-define\n          doClose();\n        }\n      };\n\n      const doClose = () => {\n        modalRef.current?.close();\n        onClose?.();\n        modalRef.current?.removeEventListener(\n          \"transitionend\",\n          transitionCallback,\n        );\n      };\n\n      // Delay close to allow backdrop exit transition\n      if (hasDialogSupport && animation) {\n        modalRef.current?.classList.remove(TRANSITION_CLASS_NAME);\n        modalRef.current?.addEventListener(\"transitionend\", transitionCallback);\n      } else {\n        doClose();\n      }\n    },\n    [onClose, hasDialogSupport, animation],\n  );\n\n  const modalClasses = classNames(\n    \"mobius\",\n    \"mobius/Modal\",\n    {\n      \"--no-dialog-support\": !hasDialogSupport, // This class is used to correctly position modal in x/y middle on iOS <= 15.2\n      \"--should-transition\": hasDialogSupport && animation,\n      \"--slide-up\": animation === \"slideUp\",\n      \"--fade\": animation === \"fade\",\n      \"--is-fullscreen\": isFullScreen,\n    },\n    className,\n  );\n\n  // Add polyfill for HTML Dialog in old browsers\n  useEffect(() => {\n    async function toggleModal() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        modalRef.current !== null\n      ) {\n        // eslint-disable-next-line import/no-extraneous-dependencies\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(modalRef.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n\n      if (isOpen && !modalRef.current?.open) {\n        modalRef.current?.showModal();\n        modalRef.current?.classList.add(TRANSITION_CLASS_NAME);\n        onOpen?.();\n      } else if (!isOpen && modalRef.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleModal();\n  }, [isOpen, onOpen, handleClose, hasDialogSupport]);\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: handleClose,\n      closeLabel,\n    }),\n    [handleClose, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([modalRef, ref])}\n      onCancel={handleClose}\n      className={modalClasses}\n    >\n      <ModalContext.Provider value={contextValue}>\n        {children}\n      </ModalContext.Provider>\n    </dialog>\n  );\n});\n\nModal.displayName = \"Modal\";\nexport { Modal };\n"],"names":["Modal","TRANSITION_CLASS_NAME","forwardRef","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","useRef","current","console","warn","hasOpened","modalRef","hasDialogSupport","supportsDialog","useBodyScrollLock","enabled","handleClose","useCallback","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","classNames","useEffect","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","contextValue","useMemo","dialog","mergeRefs","onCancel","ModalContext","Provider","value","displayName"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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