@simplybusiness/mobius 4.4.6 → 4.5.0

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

@@ -1,17 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement } from "react";
-const Content = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel: _, ...otherProps }, ref)=>/*#__PURE__*/ _jsx("div", {
+import { forwardRef } from "react";
+const Content = /*#__PURE__*/ forwardRef(({ children, ...otherProps }, ref)=>/*#__PURE__*/ _jsx("div", {
         ref: ref,
         ...otherProps,
         className: "mobius/DrawerContent",
-        children: Children.map(children, (child)=>{
-            if (/*#__PURE__*/ isValidElement(child)) {
-                return /*#__PURE__*/ cloneElement(child, {
-                    onClose
-                });
-            }
-            return child;
-        })
+        children: children
     }));
 Content.displayName = "Content";
 export { Content };

package/dist/esm/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":["Children","cloneElement","forwardRef","isValidElement","Content","children","onClose","closeLabel","_","otherProps","ref","div","className","map","child","displayName"],"mappings":";AAAA,SACEA,QAAQ,EAIRC,YAAY,EACZC,UAAU,EACVC,cAAc,QACT,QAAQ;AAaf,MAAMC,wBAAUF,WACd,CACE,EAAEG,QAAQ,EAAEC,OAAO,EAAEC,YAAYC,CAAC,EAAE,GAAGC,YAA0B,EACjEC,oBAEA,KAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCZ,SAASa,GAAG,CAACR,UAAUS,CAAAA;YACtB,kBAAIX,eAAeW,QAAQ;gBACzB,qBAAOb,aAAaa,OAAO;oBACzBR;gBACF;YACF;YAEA,OAAOQ;QACT;;AAKNV,QAAQW,WAAW,GAAG;AACtB,SAASX,OAAO,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":["forwardRef","Content","children","otherProps","ref","div","className","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAU1E,MAAMC,wBAAUD,WACd,CAAC,EAAEE,QAAQ,EAAE,GAAGC,YAA0B,EAAEC,oBAC1C,KAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCJ;;AAKPD,QAAQM,WAAW,GAAG;AACtB,SAASN,OAAO,GAAG"}

package/dist/esm/components/Drawer/Drawer.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
-import { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
 import { supportsDialog } from "../../utils/polyfill-tests";
 import { VisuallyHidden } from "../VisuallyHidden";
 import { mergeRefs } from "../../utils";
+import { DrawerContext } from "./DrawerContext";
 const TRANSITION_CLASS_NAME = "--transition";
 const Drawer = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { isOpen, className, closeLabel, direction, announce = "Drawer opened on screen", onOpen, onClose, children } = props;
@@ -22,9 +23,6 @@ const Drawer = /*#__PURE__*/ forwardRef((props, ref)=>{
     });
     // Add close handler, to enable closing transitions
     const handleClose = 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();
@@ -91,6 +89,13 @@ const Drawer = /*#__PURE__*/ forwardRef((props, ref)=>{
         handleClose,
         hasDialogSupport
     ]);
+    const contextValue = useMemo(()=>({
+            onClose: handleClose,
+            closeLabel
+        }), [
+        handleClose,
+        closeLabel
+    ]);
     return /*#__PURE__*/ _jsxs("dialog", {
         ref: mergeRefs([
             modalRef,
@@ -106,14 +111,9 @@ const Drawer = /*#__PURE__*/ forwardRef((props, ref)=>{
                     children: announce
                 })
             }),
-            Children.map(children, (child)=>{
-                if (/*#__PURE__*/ isValidElement(child)) {
-                    return /*#__PURE__*/ cloneElement(child, {
-                        onClose: handleClose,
-                        closeLabel
-                    });
-                }
-                return child;
+            /*#__PURE__*/ _jsx(DrawerContext.Provider, {
+                value: contextValue,
+                children: children
             })
         ]
     });

package/dist/esm/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":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","VisuallyHidden","mergeRefs","TRANSITION_CLASS_NAME","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","modalRef","hasDialogSupport","current","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","dialog","onCancel","aria-describedby","div","id","map","child","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":["classNames","forwardRef","useCallback","useEffect","useMemo","useRef","useBodyScrollLock","supportsDialog","VisuallyHidden","mergeRefs","DrawerContext","TRANSITION_CLASS_NAME","Drawer","props","ref","isOpen","className","closeLabel","direction","announce","onOpen","onClose","children","hasOpened","modalRef","hasDialogSupport","current","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","console","open","showModal","add","contextValue","dialog","onCancel","aria-describedby","div","id","Provider","value","displayName"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { createContext } from "react";
 export const DrawerContext = /*#__PURE__*/ createContext({
-    closeDrawer: ()=>{},
-    closeLabel: ""
+    onClose: ()=>{},
+    closeLabel: undefined
 });
 
 //# sourceMappingURL=DrawerContext.js.map

package/dist/esm/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":["createContext","DrawerContext","closeDrawer","closeLabel"],"mappings":"AAAA,SAAyBA,aAAa,QAAQ,QAAQ;AAOtD,OAAO,MAAMC,8BAAgBD,cAAkC;IAC7DE,aAAa,KAAO;IACpBC,YAAY;AACd,GAAG"}
+{"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":["createContext","DrawerContext","onClose","closeLabel","undefined"],"mappings":"AAAA,SAASA,aAAa,QAAQ,QAAQ;AAGtC,OAAO,MAAMC,8BAAgBD,cAAkC;IAC7DE,SAAS,KAAO;IAChBC,YAAYC;AACd,GAAG"}

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

@@ -3,7 +3,10 @@ import { forwardRef } from "react";
 import { cross } from "@simplybusiness/icons";
 import { Button } from "../Button";
 import { Icon } from "../Icon";
-const Header = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel, ...otherProps }, ref)=>/*#__PURE__*/ _jsxs("header", {
+import { useDrawer } from "./useDrawer";
+const Header = /*#__PURE__*/ forwardRef(({ children, ...otherProps }, ref)=>{
+    const { onClose, closeLabel } = useDrawer();
+    return /*#__PURE__*/ _jsxs("header", {
         ref: ref,
         ...otherProps,
         className: "mobius/DrawerHeader",
@@ -23,7 +26,8 @@ const Header = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel, ...oth
                 ]
             })
         ]
-    }));
+    });
+});
 Header.displayName = "Header";
 export { Header };
 

package/dist/esm/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":["forwardRef","cross","Button","Icon","Header","children","onClose","closeLabel","otherProps","ref","header","className","aria-label","variant","onPress","icon","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAa/B,MAAMC,uBAASJ,WACb,CACE,EAAEK,QAAQ,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,YAAyB,EAC7DC,oBAEA,MAACC;QAAOD,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;;YACzCN;0BACD,MAACH;gBACCU,cAAW;gBACXC,SAAQ;gBACRC,SAASR;gBACTK,WAAU;;kCAEV,KAACR;wBAAKY,MAAMd;;oBAAS;oBAAEM;;;;;AAM/BH,OAAOY,WAAW,GAAG;AACrB,SAASZ,MAAM,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":["forwardRef","cross","Button","Icon","useDrawer","Header","children","otherProps","ref","onClose","closeLabel","header","className","aria-label","variant","onPress","icon","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,SAAS,QAAQ,cAAc;AAUxC,MAAMC,uBAASL,WACb,CAAC,EAAEM,QAAQ,EAAE,GAAGC,YAAyB,EAAEC;IACzC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGN;IAEhC,qBACE,MAACO;QAAOH,KAAKA;QAAM,GAAGD,UAAU;QAAEK,WAAU;;YACzCN;0BACD,MAACJ;gBACCW,cAAW;gBACXC,SAAQ;gBACRC,SAASN;gBACTG,WAAU;;kCAEV,KAACT;wBAAKa,MAAMf;;oBAAS;oBAAES;;;;;AAI/B;AAGFL,OAAOY,WAAW,GAAG;AACrB,SAASZ,MAAM,GAAG"}

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

@@ -1,11 +1,12 @@
 import { Content } from "./Content";
 import { Drawer as DrawerComponent } from "./Drawer";
+import { useDrawer } from "./useDrawer";
 import { Header } from "./Header";
 const Drawer = Object.assign(DrawerComponent, {
     Header,
     Content
 });
 Drawer.displayName = "Drawer";
-export { Drawer };
+export { Drawer, useDrawer };
 
 //# sourceMappingURL=index.js.map

package/dist/esm/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":["Content","Drawer","DrawerComponent","Header","Object","assign","displayName"],"mappings":"AAAA,SACEA,OAAO,QAGF,YAAY;AACnB,SAASC,UAAUC,eAAe,QAAQ,WAAW;AAErD,SAGEC,MAAM,QACD,WAAW;AAElB,MAAMF,SAASG,OAAOC,MAAM,CAACH,iBAAiB;IAC5CC;IACAH;AACF;AAEAC,OAAOK,WAAW,GAAG;AACrB,SAASL,MAAM,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":["Content","Drawer","DrawerComponent","useDrawer","Header","Object","assign","displayName"],"mappings":"AAAA,SACEA,OAAO,QAGF,YAAY;AACnB,SAASC,UAAUC,eAAe,QAAQ,WAAW;AAErD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAGEC,MAAM,QACD,WAAW;AAElB,MAAMH,SAASI,OAAOC,MAAM,CAACJ,iBAAiB;IAC5CE;IACAJ;AACF;AAEAC,OAAOM,WAAW,GAAG;AACrB,SAASN,MAAM,EAAEE,SAAS,GAAG"}

package/dist/esm/components/Drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Drawer/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  /**\n   * Direction that drawer will open from\n   */\n  direction: \"top\" | \"bottom\" | \"left\" | \"right\";\n  className?: string;\n  closeLabel?: string;\n  /**\n   * Announce text for screen readers when drawer opens\n   */\n  announce?: string;\n  onOpen?: () => void;\n  onClose?: () => void;\n  children?: ReactNode;\n}\n"],"names":[],"mappings":"AAEA,WAeC"}
+{"version":3,"sources":["../../../../src/components/Drawer/types.ts"],"sourcesContent":["import { ReactNode, SyntheticEvent } from \"react\";\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  /**\n   * Direction that drawer will open from\n   */\n  direction: \"top\" | \"bottom\" | \"left\" | \"right\";\n  className?: string;\n  closeLabel?: string;\n  /**\n   * Announce text for screen readers when drawer opens\n   */\n  announce?: string;\n  onOpen?: () => void;\n  onClose?: () => void;\n  children?: ReactNode;\n}\n\nexport type DrawerContextProps = {\n  onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;\n  closeLabel: string | undefined;\n};\n"],"names":[],"mappings":"AAmBA,WAGE"}

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

@@ -1,9 +1,9 @@
 import { useContext } from "react";
 import { DrawerContext } from "./DrawerContext";
 export const useDrawer = ()=>{
-    const { closeDrawer, closeLabel } = useContext(DrawerContext);
+    const { onClose, closeLabel } = useContext(DrawerContext);
     return {
-        closeDrawer,
+        onClose,
         closeLabel
     };
 };

package/dist/esm/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":["useContext","DrawerContext","useDrawer","closeDrawer","closeLabel"],"mappings":"AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,OAAO,MAAMC,YAAY;IACvB,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAE,GAAGJ,WAAWC;IAE/C,OAAO;QACLE;QACAC;IACF;AACF,EAAE"}
+{"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":["useContext","DrawerContext","useDrawer","onClose","closeLabel"],"mappings":"AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,OAAO,MAAMC,YAAY;IACvB,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGJ,WAAWC;IAE3C,OAAO;QAAEE;QAASC;IAAW;AAC/B,EAAE"}

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

@@ -1,17 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement } from "react";
-const Content = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel: _, ...otherProps }, ref)=>/*#__PURE__*/ _jsx("div", {
+import { forwardRef } from "react";
+const Content = /*#__PURE__*/ forwardRef(({ children, ...otherProps }, ref)=>/*#__PURE__*/ _jsx("div", {
         ref: ref,
         ...otherProps,
         className: "mobius/ModalContent",
-        children: Children.map(children, (child)=>{
-            if (/*#__PURE__*/ isValidElement(child)) {
-                return /*#__PURE__*/ cloneElement(child, {
-                    onClose
-                });
-            }
-            return child;
-        })
+        children: children
     }));
 Content.displayName = "Content";
 export { Content };

package/dist/esm/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":["Children","cloneElement","forwardRef","isValidElement","Content","children","onClose","closeLabel","_","otherProps","ref","div","className","map","child","displayName"],"mappings":";AAAA,SACEA,QAAQ,EAIRC,YAAY,EACZC,UAAU,EACVC,cAAc,QACT,QAAQ;AAaf,MAAMC,wBAAUF,WACd,CACE,EAAEG,QAAQ,EAAEC,OAAO,EAAEC,YAAYC,CAAC,EAAE,GAAGC,YAA0B,EACjEC,oBAEA,KAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCZ,SAASa,GAAG,CAACR,UAAUS,CAAAA;YACtB,kBAAIX,eAAeW,QAAQ;gBACzB,qBAAOb,aAAaa,OAAO;oBACzBR;gBACF;YACF;YAEA,OAAOQ;QACT;;AAKNV,QAAQW,WAAW,GAAG;AACtB,SAASX,OAAO,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":["forwardRef","Content","children","otherProps","ref","div","className","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAU1E,MAAMC,wBAAUD,WACd,CAAC,EAAEE,QAAQ,EAAE,GAAGC,YAA0B,EAAEC,oBAC1C,KAACC;QAAID,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;kBACtCJ;;AAKPD,QAAQM,WAAW,GAAG;AACtB,SAASN,OAAO,GAAG"}

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

@@ -3,7 +3,10 @@ import { forwardRef } from "react";
 import { cross } from "@simplybusiness/icons";
 import { Button } from "../Button";
 import { Icon } from "../Icon";
-const Header = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel, ...otherProps }, ref)=>/*#__PURE__*/ _jsxs("header", {
+import { useModal } from "./useModal";
+const Header = /*#__PURE__*/ forwardRef(({ children, ...otherProps }, ref)=>{
+    const { onClose, closeLabel } = useModal();
+    return /*#__PURE__*/ _jsxs("header", {
         ref: ref,
         ...otherProps,
         className: "mobius/ModalHeader",
@@ -23,7 +26,8 @@ const Header = /*#__PURE__*/ forwardRef(({ children, onClose, closeLabel, ...oth
                 ]
             })
         ]
-    }));
+    });
+});
 Header.displayName = "Header";
 export { Header };
 

package/dist/esm/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":["forwardRef","cross","Button","Icon","Header","children","onClose","closeLabel","otherProps","ref","header","className","aria-label","variant","onPress","icon","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAa/B,MAAMC,uBAASJ,WACb,CACE,EAAEK,QAAQ,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGC,YAAyB,EAC7DC,oBAEA,MAACC;QAAOD,KAAKA;QAAM,GAAGD,UAAU;QAAEG,WAAU;;YACzCN;0BACD,MAACH;gBACCU,cAAW;gBACXC,SAAQ;gBACRC,SAASR;gBACTK,WAAU;;kCAEV,KAACR;wBAAKY,MAAMd;;oBAAS;oBAAEM;;;;;AAM/BH,OAAOY,WAAW,GAAG;AACrB,SAASZ,MAAM,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":["forwardRef","cross","Button","Icon","useModal","Header","children","otherProps","ref","onClose","closeLabel","header","className","aria-label","variant","onPress","icon","displayName"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,KAAK,QAAQ,wBAAwB;AAE9C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,QAAQ,QAAQ,aAAa;AAUtC,MAAMC,uBAASL,WACb,CAAC,EAAEM,QAAQ,EAAE,GAAGC,YAAyB,EAAEC;IACzC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGN;IAEhC,qBACE,MAACO;QAAOH,KAAKA;QAAM,GAAGD,UAAU;QAAEK,WAAU;;YACzCN;0BACD,MAACJ;gBACCW,cAAW;gBACXC,SAAQ;gBACRC,SAASN;gBACTG,WAAU;;kCAEV,KAACT;wBAAKa,MAAMf;;oBAAS;oBAAES;;;;;AAI/B;AAGFL,OAAOY,WAAW,GAAG;AACrB,SAASZ,MAAM,GAAG"}

package/dist/esm/components/Modal/Modal.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames/dedupe";
-import { Children, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import { useBodyScrollLock } from "../../hooks/useBodyScrollLock";
 import { supportsDialog } from "../../utils/polyfill-tests";
 import { mergeRefs } from "../../utils";
+import { ModalContext } from "./ModalContext";
 const TRANSITION_CLASS_NAME = "--transition";
 const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { isOpen, onClose, onOpen, children, className, closeLabel, isFullScreen, animation, // Deprecated props below
@@ -30,9 +31,6 @@ const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
     });
     // Add close handler, to enable closing animations
     const handleClose = 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();
@@ -104,6 +102,13 @@ const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
         handleClose,
         hasDialogSupport
     ]);
+    const contextValue = useMemo(()=>({
+            onClose: handleClose,
+            closeLabel
+        }), [
+        handleClose,
+        closeLabel
+    ]);
     return /*#__PURE__*/ _jsx("dialog", {
         ref: mergeRefs([
             modalRef,
@@ -111,14 +116,9 @@ const Modal = /*#__PURE__*/ forwardRef((props, ref)=>{
         ]),
         onCancel: handleClose,
         className: modalClasses,
-        children: Children.map(children, (child)=>{
-            if (/*#__PURE__*/ isValidElement(child)) {
-                return /*#__PURE__*/ cloneElement(child, {
-                    onClose: handleClose,
-                    closeLabel
-                });
-            }
-            return child;
+        children: /*#__PURE__*/ _jsx(ModalContext.Provider, {
+            value: contextValue,
+            children: children
         })
     });
 });

package/dist/esm/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":["classNames","Children","cloneElement","forwardRef","isValidElement","useCallback","useEffect","useRef","useBodyScrollLock","supportsDialog","mergeRefs","TRANSITION_CLASS_NAME","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","hasOpened","modalRef","hasDialogSupport","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","dialog","onCancel","map","child","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":["classNames","forwardRef","useCallback","useEffect","useMemo","useRef","useBodyScrollLock","supportsDialog","mergeRefs","ModalContext","TRANSITION_CLASS_NAME","Modal","props","ref","isOpen","onClose","onOpen","children","className","closeLabel","isFullScreen","animation","size","appElement","preventCloseOnEsc","shouldFocusAfterRender","parentSelector","hasWarnedAboutMissingLabels","current","console","warn","hasOpened","modalRef","hasDialogSupport","enabled","handleClose","event","preventDefault","stopPropagation","transitionCallback","e","target","doClose","close","removeEventListener","classList","remove","addEventListener","modalClasses","toggleModal","window","default","dialogPolyfill","registerDialog","error","open","showModal","add","contextValue","dialog","onCancel","Provider","value","displayName"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+export const ModalContext = /*#__PURE__*/ createContext({
+    onClose: ()=>{},
+    closeLabel: undefined
+});
+
+//# sourceMappingURL=ModalContext.js.map

package/dist/esm/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":["createContext","ModalContext","onClose","closeLabel","undefined"],"mappings":"AAAA,SAASA,aAAa,QAAQ,QAAQ;AAGtC,OAAO,MAAMC,6BAAeD,cAAiC;IAC3DE,SAAS,KAAO;IAChBC,YAAYC;AACd,GAAG"}

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

@@ -1,11 +1,12 @@
 import { Content } from "./Content";
 import { Header } from "./Header";
 import { Modal as ModalComponent } from "./Modal";
+import { useModal } from "./useModal";
 const Modal = Object.assign(ModalComponent, {
     Header,
     Content
 });
 Modal.displayName = "Modal";
-export { Modal };
+export { Modal, useModal };
 
 //# sourceMappingURL=index.js.map

package/dist/esm/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":["Content","Header","Modal","ModalComponent","Object","assign","displayName"],"mappings":"AAAA,SACEA,OAAO,QAGF,YAAY;AACnB,SACEC,MAAM,QAGD,WAAW;AAClB,SAASC,SAASC,cAAc,QAAQ,UAAU;AAGlD,MAAMD,QAAQE,OAAOC,MAAM,CAACF,gBAAgB;IAC1CF;IACAD;AACF;AAEAE,MAAMI,WAAW,GAAG;AACpB,SAASJ,KAAK,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":["Content","Header","Modal","ModalComponent","useModal","Object","assign","displayName"],"mappings":"AAAA,SACEA,OAAO,QAGF,YAAY;AACnB,SACEC,MAAM,QAGD,WAAW;AAClB,SAASC,SAASC,cAAc,QAAQ,UAAU;AAElD,SAASC,QAAQ,QAAQ,aAAa;AAEtC,MAAMF,QAAQG,OAAOC,MAAM,CAACH,gBAAgB;IAC1CF;IACAD;AACF;AAEAE,MAAMK,WAAW,GAAG;AACpB,SAASL,KAAK,EAAEE,QAAQ,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Modal/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n  children?: ReactNode;\n  className?: string;\n  closeLabel?: string;\n  animation?: \"slideUp\" | \"fade\";\n  isFullScreen?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  size?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  appElement?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  preventCloseOnEsc?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  shouldFocusAfterRender?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  parentSelector?: () => HTMLElement;\n}\n"],"names":[],"mappings":"AAEA,WA6BC"}
+{"version":3,"sources":["../../../../src/components/Modal/types.ts"],"sourcesContent":["import { ReactNode, SyntheticEvent } from \"react\";\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n  children?: ReactNode;\n  className?: string;\n  closeLabel?: string;\n  animation?: \"slideUp\" | \"fade\";\n  isFullScreen?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  size?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  appElement?: string;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  preventCloseOnEsc?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  shouldFocusAfterRender?: boolean;\n  /**\n   * **Deprecated:** No longer needed\n   */\n  parentSelector?: () => HTMLElement;\n}\n\nexport type ModalContextProps = {\n  onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;\n  closeLabel: string | undefined;\n};\n"],"names":[],"mappings":"AAiCA,WAGE"}

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

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { ModalContext } from "./ModalContext";
+export const useModal = ()=>{
+    const { onClose, closeLabel } = useContext(ModalContext);
+    return {
+        onClose,
+        closeLabel
+    };
+};
+
+//# sourceMappingURL=useModal.js.map

package/dist/esm/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":["useContext","ModalContext","useModal","onClose","closeLabel"],"mappings":"AAAA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,OAAO,MAAMC,WAAW;IACtB,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGJ,WAAWC;IAE3C,OAAO;QAAEE;QAASC;IAAW;AAC/B,EAAE"}

package/dist/types/components/Drawer/Content.d.ts

@@ -3,8 +3,6 @@ import { DOMProps } from "../../types/dom";
 export type DivRef = Ref<HTMLDivElement>;
 export type DivElementType = HTMLDivElement;
 export interface ContentProps extends DOMProps, RefAttributes<DivElementType>, PropsWithChildren {
-    onClose?: () => void;
-    closeLabel?: string;
 }
 declare const Content: import("react").ForwardRefExoticComponent<Omit<ContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
 export { Content };

package/dist/types/components/Drawer/DrawerContext.d.ts

@@ -0,0 +1,2 @@
+import { DrawerContextProps } from "./types";
+export declare const DrawerContext: import("react").Context<DrawerContextProps>;

package/dist/types/components/Drawer/Header.d.ts

@@ -3,8 +3,6 @@ import { DOMProps } from "../../types/dom";
 export type HeaderElementType = HTMLDivElement;
 export type HeaderRef = Ref<HTMLElement>;
 export interface HeaderProps extends DOMProps, RefAttributes<HeaderElementType>, PropsWithChildren {
-    onClose?: () => void;
-    closeLabel?: string;
 }
 declare const Header: import("react").ForwardRefExoticComponent<Omit<HeaderProps, "ref"> & RefAttributes<HTMLElement>>;
 export { Header };

package/dist/types/components/Drawer/index.d.ts

@@ -1,9 +1,10 @@
 import { DivElementType as DrawerContentDivElementType, ContentProps as DrawerContentProps } from "./Content";
-import { DrawerProps } from "./types";
+import { DrawerProps, DrawerContextProps } from "./types";
+import { useDrawer } from "./useDrawer";
 import { HeaderElementType as DrawerHeaderElementType, HeaderProps as DrawerHeaderProps } from "./Header";
 declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDialogElement>> & {
     Header: import("react").ForwardRefExoticComponent<Omit<DrawerHeaderProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
-export { Drawer };
-export type { DrawerContentDivElementType, DrawerContentProps, DrawerHeaderElementType, DrawerHeaderProps, DrawerProps, };
+export { Drawer, useDrawer };
+export type { DrawerContextProps, DrawerContentDivElementType, DrawerContentProps, DrawerHeaderElementType, DrawerHeaderProps, DrawerProps, };

package/dist/types/components/Drawer/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, SyntheticEvent } from "react";
 export interface DrawerProps {
     isOpen: boolean;
     /**
@@ -15,3 +15,7 @@ export interface DrawerProps {
     onClose?: () => void;
     children?: ReactNode;
 }
+export type DrawerContextProps = {
+    onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;
+    closeLabel: string | undefined;
+};

package/dist/types/components/Drawer/useDrawer.d.ts

@@ -0,0 +1,4 @@
+export declare const useDrawer: () => {
+    onClose: (event?: import("react").SyntheticEvent<HTMLElement, Event> | undefined) => void;
+    closeLabel: string | undefined;
+};

package/dist/types/components/Modal/Content.d.ts

@@ -3,8 +3,6 @@ import { DOMProps } from "../../types/dom";
 export type DivRef = Ref<HTMLDivElement>;
 export type DivElementType = HTMLDivElement;
 export interface ContentProps extends DOMProps, RefAttributes<DivElementType>, PropsWithChildren {
-    onClose?: () => void;
-    closeLabel?: string;
 }
 declare const Content: import("react").ForwardRefExoticComponent<Omit<ContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
 export { Content };

package/dist/types/components/Modal/Header.d.ts

@@ -3,8 +3,6 @@ import { DOMProps } from "../../types/dom";
 export type HeaderElementType = HTMLDivElement;
 export type HeaderRef = Ref<HTMLElement>;
 export interface HeaderProps extends DOMProps, RefAttributes<HeaderElementType>, PropsWithChildren {
-    onClose?: () => void;
-    closeLabel?: string;
 }
 declare const Header: import("react").ForwardRefExoticComponent<Omit<HeaderProps, "ref"> & RefAttributes<HTMLElement>>;
 export { Header };

package/dist/types/components/Modal/ModalContext.d.ts

@@ -0,0 +1,2 @@
+import { ModalContextProps } from "./types";
+export declare const ModalContext: import("react").Context<ModalContextProps>;

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

@@ -1,9 +1,10 @@
 import { DivElementType as ModalContentDivElementType, ContentProps as ModalContentProps } from "./Content";
 import { HeaderElementType as ModalHeaderElementType, HeaderProps as ModalHeaderProps } from "./Header";
-import { ModalProps } from "./types";
+import { ModalProps, ModalContextProps } from "./types";
+import { useModal } from "./useModal";
 declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDialogElement>> & {
     Header: import("react").ForwardRefExoticComponent<Omit<ModalHeaderProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<ModalContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
-export { Modal };
-export type { ModalContentDivElementType, ModalContentProps, ModalHeaderElementType, ModalHeaderProps, ModalProps, };
+export { Modal, useModal };
+export type { ModalContextProps, ModalContentDivElementType, ModalContentProps, ModalHeaderElementType, ModalHeaderProps, ModalProps, };

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, SyntheticEvent } from "react";
 export interface ModalProps {
     isOpen: boolean;
     onOpen?: () => void;
@@ -29,3 +29,7 @@ export interface ModalProps {
      */
     parentSelector?: () => HTMLElement;
 }
+export type ModalContextProps = {
+    onClose: (event?: SyntheticEvent<HTMLElement, Event>) => void;
+    closeLabel: string | undefined;
+};