@simplybusiness/mobius 4.4.6 → 4.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 4.5.1
+
+### Patch Changes
+
+- 8a50b45: Fix `<Drawer>`, `<Modal>` transition-in not working in Safari
+
+## 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

@@ -12,148 +12,47 @@ Object.defineProperty(exports, "Drawer", {
 const _jsxruntime = require("react/jsx-runtime");
 const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedupe"));
 const _react = require("react");
-const _useBodyScrollLock = require("../../hooks/useBodyScrollLock");
-const _polyfilltests = require("../../utils/polyfill-tests");
 const _VisuallyHidden = require("../VisuallyHidden");
 const _utils = require("../../utils");
+const _DrawerContext = require("./DrawerContext");
+const _hooks = require("../../hooks");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const TRANSITION_CLASS_NAME = "--transition";
+const TRANSITION_CSS_VARIABLE = "--drawer-transition-duration";
 const Drawer = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     const { isOpen, className, closeLabel, direction, announce = "Drawer opened on screen", onOpen, onClose, children } = props;
-    const hasOpened = (0, _react.useRef)(false);
-    const modalRef = (0, _react.useRef)(null);
-    const hasDialogSupport = (0, _polyfilltests.supportsDialog)();
-    // Fire onOpen once
-    if (onOpen && !hasOpened.current) {
-        onOpen();
-        hasOpened.current = true;
-    }
-    (0, _useBodyScrollLock.useBodyScrollLock)({
-        enabled: isOpen
-    });
-    // Add close handler, to enable closing transitions
-    const handleClose = (0, _react.useCallback)((event)=>{
-        // `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();
-        }
-        // Name the callback function, so we can add and remove event listener
-        const transitionCallback = (e)=>{
-            // Close drawer only if the transition is on the dialog element
-            // As it can be on a child element (ie `<Button>` inside the drawer)
-            if (e.target === modalRef.current) {
-                // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                doClose();
-            }
-        };
-        const doClose = ()=>{
-            var _modalRef_current, _modalRef_current1;
-            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.close();
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.removeEventListener("transitionend", transitionCallback);
-        };
-        // Delay close to allow backdrop exit transition
-        if (hasDialogSupport) {
-            var _modalRef_current, _modalRef_current1;
-            (_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.classList.remove(TRANSITION_CLASS_NAME);
-            (_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.addEventListener("transitionend", transitionCallback);
-        } else {
-            doClose();
-        }
-    }, [
-        onClose,
-        hasDialogSupport
-    ]);
-    const modalClasses = (0, _dedupe.default)("mobius", "mobius/Drawer", `--${direction}`, className, {
-        "--should-transition": hasDialogSupport
-    });
-    // Add polyfill for HTML Dialog in old browsers
-    (0, _react.useEffect)(()=>{
-        async function toggleModal() {
-            var _modalRef_current, _modalRef_current1;
-            if (!hasDialogSupport && typeof window !== "undefined" && modalRef.current !== null) {
-                // eslint-disable-next-line import/no-extraneous-dependencies
-                const { default: dialogPolyfill } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("dialog-polyfill")));
-                try {
-                    dialogPolyfill.registerDialog(modalRef.current);
-                } catch (error) {
-                    // In iOS 15 <= 15.2 this intermittently fails with
-                    // TypeError: null is not an object (evaluating 'element.showModal')
-                    // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
-                    console.error("Failed to load dialog-polyfill", error);
-                }
-            }
-            if (isOpen && !((_modalRef_current = modalRef.current) === null || _modalRef_current === void 0 ? void 0 : _modalRef_current.open)) {
-                var _modalRef_current2, _modalRef_current3;
-                (_modalRef_current2 = modalRef.current) === null || _modalRef_current2 === void 0 ? void 0 : _modalRef_current2.showModal();
-                (_modalRef_current3 = modalRef.current) === null || _modalRef_current3 === void 0 ? void 0 : _modalRef_current3.classList.add(TRANSITION_CLASS_NAME);
-                onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-            } else if (!isOpen && ((_modalRef_current1 = modalRef.current) === null || _modalRef_current1 === void 0 ? void 0 : _modalRef_current1.open)) {
-                handleClose();
-            }
-        }
-        toggleModal();
-    }, [
+    const shouldTransition = (0, _utils.supportsDialog)();
+    const dialogRef = (0, _react.useRef)(null);
+    const { close } = (0, _hooks.useDialog)({
+        ref: dialogRef,
         isOpen,
         onOpen,
-        handleClose,
-        hasDialogSupport
+        onClose,
+        transition: {
+            isEnabled: true,
+            CSSVariable: TRANSITION_CSS_VARIABLE
+        }
+    });
+    const dialogClasses = (0, _dedupe.default)("mobius", "mobius/Drawer", `--${direction}`, className, {
+        "--should-transition": shouldTransition
+    });
+    const contextValue = (0, _react.useMemo)(()=>({
+            onClose: close,
+            closeLabel
+        }), [
+        close,
+        closeLabel
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("dialog", {
         ref: (0, _utils.mergeRefs)([
-            modalRef,
+            dialogRef,
             ref
         ]),
-        onCancel: handleClose,
-        className: modalClasses,
+        onCancel: close,
+        className: dialogClasses,
         "aria-describedby": "screen-reader-announce",
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
@@ -162,14 +61,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 { Ref, forwardRef, useMemo, useRef } from \"react\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport { DrawerProps } from \"./types\";\nimport { mergeRefs, supportsDialog } from \"../../utils\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport { useDialog } from \"../../hooks\";\n\nexport type DialogElementType = HTMLDialogElement;\nexport type DialogRef = Ref<DialogElementType>;\n\nconst TRANSITION_CSS_VARIABLE = \"--drawer-transition-duration\";\n\nconst Drawer = forwardRef((props: DrawerProps, ref: DialogRef) => {\n  const {\n    isOpen,\n    className,\n    closeLabel,\n    direction,\n    announce = \"Drawer opened on screen\",\n    onOpen,\n    onClose,\n    children,\n  } = props;\n  const shouldTransition = supportsDialog();\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const { close } = useDialog({\n    ref: dialogRef,\n    isOpen,\n    onOpen,\n    onClose,\n    transition: {\n      isEnabled: true,\n      CSSVariable: TRANSITION_CSS_VARIABLE,\n    },\n  });\n\n  const dialogClasses = classNames(\n    \"mobius\",\n    \"mobius/Drawer\",\n    `--${direction}`,\n    className,\n    {\n      \"--should-transition\": shouldTransition,\n    },\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      onClose: close,\n      closeLabel,\n    }),\n    [close, closeLabel],\n  );\n\n  return (\n    <dialog\n      ref={mergeRefs([dialogRef, ref])}\n      onCancel={close}\n      className={dialogClasses}\n      aria-describedby=\"screen-reader-announce\"\n    >\n      <VisuallyHidden>\n        <div id=\"screen-reader-announce\">{announce}</div>\n      </VisuallyHidden>\n      <DrawerContext.Provider value={contextValue}>\n        {children}\n      </DrawerContext.Provider>\n    </dialog>\n  );\n});\n\nDrawer.displayName = \"Drawer\";\nexport { Drawer };\n"],"names":["Drawer","TRANSITION_CSS_VARIABLE","forwardRef","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","shouldTransition","supportsDialog","dialogRef","useRef","close","useDialog","transition","isEnabled","CSSVariable","dialogClasses","classNames","contextValue","useMemo","dialog","mergeRefs","onCancel","aria-describedby","VisuallyHidden","div","id","DrawerContext","Provider","value","displayName"],"mappings":"AAAA;;;;;+BA2ESA;;;eAAAA;;;;+DAzEc;uBAC0B;gCAClB;uBAEW;+BACZ;uBACJ;;;;;;AAK1B,MAAMC,0BAA0B;AAEhC,MAAMD,uBAASE,IAAAA,iBAAU,EAAC,CAACC,OAAoBC;IAC7C,MAAM,EACJC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,WAAW,yBAAyB,EACpCC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACT,GAAGT;IACJ,MAAMU,mBAAmBC,IAAAA,qBAAc;IACvC,MAAMC,YAAYC,IAAAA,aAAM,EAA2B;IACnD,MAAM,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gBAAS,EAAC;QAC1Bd,KAAKW;QACLV;QACAK;QACAC;QACAQ,YAAY;YACVC,WAAW;YACXC,aAAapB;QACf;IACF;IAEA,MAAMqB,gBAAgBC,IAAAA,eAAU,EAC9B,UACA,iBACA,CAAC,EAAE,EAAEf,UAAU,CAAC,EAChBF,WACA;QACE,uBAAuBO;IACzB;IAGF,MAAMW,eAAeC,IAAAA,cAAO,EAC1B,IAAO,CAAA;YACLd,SAASM;YACTV;QACF,CAAA,GACA;QAACU;QAAOV;KAAW;IAGrB,qBACE,sBAACmB;QACCtB,KAAKuB,IAAAA,gBAAS,EAAC;YAACZ;YAAWX;SAAI;QAC/BwB,UAAUX;QACVX,WAAWgB;QACXO,oBAAiB;;0BAEjB,qBAACC,8BAAc;0BACb,cAAA,qBAACC;oBAAIC,IAAG;8BAA0BvB;;;0BAEpC,qBAACwB,4BAAa,CAACC,QAAQ;gBAACC,OAAOX;0BAC5BZ;;;;AAIT;AAEAZ,OAAOoC,WAAW,GAAG"}

package/dist/cjs/components/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"}