@launchpad-ui/drawer 0.4.2 → 0.4.4

package/dist/Drawer.d.ts

@@ -8,7 +8,7 @@ type DrawerProps = {
     theme?: 'dark' | 'default';
     hideCancel?: boolean;
 };
-declare const Drawer: ({ className, children, onCancel, size, "data-test-id": testId, theme, hideCancel, }: DrawerProps) => JSX.Element;
+declare const Drawer: (props: DrawerProps) => JSX.Element;
 export { Drawer };
 export type { DrawerProps };
 //# sourceMappingURL=Drawer.d.ts.map

package/dist/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAoCnD,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,MAAM,wFAQT,WAAW,gBAgFb,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCnD,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,gBAIjC,CAAC;AA8GF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/DrawerHeader.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from 'react';
-type DrawerHeaderProps = HTMLAttributes<HTMLDivElement> & {
+import type { ComponentProps } from 'react';
+type DrawerHeaderProps = ComponentProps<'div'> & {
     closeable?: boolean;
     titleID?: string;
     titleClassName?: string;

package/dist/DrawerHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../src/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,YAAY,sFAOf,iBAAiB,gBAQnB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../src/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,YAAY,sFAOf,iBAAiB,gBAQnB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/index.es.js

@@ -4,10 +4,11 @@ import { FocusTrap } from "@launchpad-ui/focus-trap";
 import { Close } from "@launchpad-ui/icons";
 import { Portal } from "@launchpad-ui/portal";
 import { Progress } from "@launchpad-ui/progress";
+import { useFocusWithin } from "@react-aria/interactions";
 import { usePreventScroll } from "@react-aria/overlays";
 import { cx } from "classix";
 import { LazyMotion, m } from "framer-motion";
-import { useRef, useEffect, Suspense } from "react";
+import { useRef, useState, useEffect, Suspense } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 const DRAWER_LABELLED_BY = "drawer-title";
 const drawer = "_drawer_b2us9_12";
@@ -62,7 +63,12 @@ const loadFeatures = () => import(
   /* webpackExports: "domAnimation" */
   "framer-motion"
 ).then((res) => res.domAnimation);
-const Drawer = ({
+const Drawer = (props) => /* @__PURE__ */ jsx(Portal, {
+  children: /* @__PURE__ */ jsx(DrawerContainer, {
+    ...props
+  })
+});
+const DrawerContainer = ({
   className,
   children,
   onCancel,
@@ -72,77 +78,94 @@ const Drawer = ({
   hideCancel = false
 }) => {
   const ref = useRef(null);
+  const [isFocusWithin, setIsFocusWithin] = useState(false);
+  const {
+    focusWithinProps
+  } = useFocusWithin({
+    onFocusWithinChange: (isFocusWithin2) => setIsFocusWithin(isFocusWithin2)
+  });
   usePreventScroll();
   useEffect(() => {
     const handleEscape = (event) => {
       event.stopImmediatePropagation();
       const latest = [...document.querySelectorAll("[data-drawer]")].pop();
-      if (event.key === "Escape" && latest === ref.current) {
+      if (event.key === "Escape" && latest === ref.current && isFocusWithin) {
         close();
       }
     };
+    const addOverlayAndEventHandler = () => {
+      document.body.classList.add("has-overlay");
+      document.addEventListener("keydown", handleEscape);
+    };
+    const removeOverlayAndEventHandler = () => {
+      document.body.classList.remove("has-overlay");
+      document.removeEventListener("keydown", handleEscape);
+    };
     const close = () => {
       onCancel == null ? void 0 : onCancel();
     };
-    document.body.classList.add("has-overlay");
-    document.addEventListener("keydown", handleEscape);
+    if (isFocusWithin) {
+      addOverlayAndEventHandler();
+    }
+    if (!isFocusWithin) {
+      removeOverlayAndEventHandler();
+    }
     return () => {
-      document.body.classList.remove("has-overlay");
-      document.removeEventListener("keydown", handleEscape);
+      removeOverlayAndEventHandler();
     };
-  }, [onCancel, testId]);
+  }, [onCancel, testId, isFocusWithin]);
   const handleOverlayClick = (event) => {
     if (event.target === event.currentTarget) {
       onCancel && onCancel();
     }
   };
-  return /* @__PURE__ */ jsx(Portal, {
-    children: /* @__PURE__ */ jsx(LazyMotion, {
-      strict: true,
-      features: loadFeatures,
-      children: /* @__PURE__ */ jsx("div", {
-        className: cx(styles.drawer, styles[size], className),
-        "data-drawer": true,
-        "data-test-id": testId,
-        ref,
-        children: /* @__PURE__ */ jsx(m.div, {
-          initial: "hidden",
-          animate: "visible",
-          variants: overlay,
-          transition: {
-            duration: 0.15
-          },
-          role: "presentation",
-          className: styles.overlay,
-          onMouseDown: handleOverlayClick,
-          children: /* @__PURE__ */ jsx(FocusTrap, {
-            autoFocus: true,
-            restoreFocus: true,
-            children: /* @__PURE__ */ jsxs(m.div, {
-              initial: "hidden",
-              animate: "visible",
-              variants: slideRight,
-              role: "dialog",
-              "aria-labelledby": DRAWER_LABELLED_BY,
-              "aria-modal": true,
-              className: styles.content,
-              tabIndex: -1,
-              ...theme ? {
-                "data-theme": theme
-              } : {},
-              children: [!hideCancel && /* @__PURE__ */ jsx(IconButton, {
-                "aria-label": "close",
-                icon: /* @__PURE__ */ jsx(Close, {
-                  size: "medium"
-                }),
-                className: styles.closeButton,
-                onClick: onCancel,
-                "data-test-id": "drawer-close-button"
-              }), /* @__PURE__ */ jsx(Suspense, {
-                fallback: /* @__PURE__ */ jsx(Progress, {}),
-                children
-              })]
-            })
+  return /* @__PURE__ */ jsx(LazyMotion, {
+    strict: true,
+    features: loadFeatures,
+    children: /* @__PURE__ */ jsx("div", {
+      ...focusWithinProps,
+      className: cx(styles.drawer, styles[size], className),
+      "data-drawer": true,
+      "data-test-id": testId,
+      ref,
+      children: /* @__PURE__ */ jsx(m.div, {
+        initial: "hidden",
+        animate: "visible",
+        variants: overlay,
+        transition: {
+          duration: 0.15
+        },
+        role: "presentation",
+        className: styles.overlay,
+        onMouseDown: handleOverlayClick,
+        children: /* @__PURE__ */ jsx(FocusTrap, {
+          autoFocus: true,
+          restoreFocus: true,
+          children: /* @__PURE__ */ jsxs(m.div, {
+            initial: "hidden",
+            animate: "visible",
+            variants: slideRight,
+            role: "dialog",
+            "aria-labelledby": DRAWER_LABELLED_BY,
+            "aria-describedby": DRAWER_LABELLED_BY,
+            "aria-modal": true,
+            className: styles.content,
+            tabIndex: -1,
+            ...theme ? {
+              "data-theme": theme
+            } : {},
+            children: [!hideCancel && /* @__PURE__ */ jsx(IconButton, {
+              "aria-label": "close",
+              icon: /* @__PURE__ */ jsx(Close, {
+                size: "medium"
+              }),
+              className: styles.closeButton,
+              onClick: onCancel,
+              "data-test-id": "drawer-close-button"
+            }), /* @__PURE__ */ jsx(Suspense, {
+              fallback: /* @__PURE__ */ jsx(Progress, {}),
+              children
+            })]
           })
         })
       })

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/constants.ts","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n  visible: { opacity: 1, transition: { duration: 0.15 } },\n  hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n  hidden: { opacity: 0, x: '25%' },\n  visible: {\n    opacity: 1,\n    x: '0%',\n    transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n  },\n};\n\nconst loadFeatures = () =>\n  import(\n    /* webpackChunkName: \"lp-drawer-framer-features\" */\n    /* webpackExports: \"domAnimation\" */\n    'framer-motion'\n  ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n  children?: ReactNode;\n  className?: string;\n  onCancel?(): void;\n  'data-test-id'?: string;\n  size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n  theme?: 'dark' | 'default';\n  hideCancel?: boolean;\n};\n\nconst Drawer = ({\n  className,\n  children,\n  onCancel,\n  size = 'small',\n  'data-test-id': testId = 'drawer',\n  theme,\n  hideCancel = false,\n}: DrawerProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  usePreventScroll();\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      event.stopImmediatePropagation();\n      const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n      if (event.key === 'Escape' && latest === ref.current) {\n        close();\n      }\n    };\n\n    const close = () => {\n      onCancel?.();\n    };\n\n    document.body.classList.add('has-overlay');\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.body.classList.remove('has-overlay');\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [onCancel, testId]);\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === event.currentTarget) {\n      onCancel && onCancel();\n    }\n  };\n\n  return (\n    <Portal>\n      <LazyMotion strict features={loadFeatures}>\n        <div\n          className={cx(styles.drawer, styles[size], className)}\n          data-drawer\n          data-test-id={testId}\n          ref={ref}\n        >\n          <m.div\n            initial=\"hidden\"\n            animate=\"visible\"\n            variants={overlay}\n            transition={{ duration: 0.15 }}\n            role=\"presentation\"\n            className={styles.overlay}\n            onMouseDown={handleOverlayClick}\n          >\n            <FocusTrap autoFocus restoreFocus>\n              <m.div\n                initial=\"hidden\"\n                animate=\"visible\"\n                variants={slideRight}\n                role=\"dialog\"\n                aria-labelledby={DRAWER_LABELLED_BY}\n                aria-modal\n                className={styles.content}\n                tabIndex={-1}\n                {...(theme ? { 'data-theme': theme } : {})}\n              >\n                {!hideCancel && (\n                  <IconButton\n                    aria-label=\"close\"\n                    icon={<Close size=\"medium\" />}\n                    className={styles.closeButton}\n                    onClick={onCancel}\n                    data-test-id=\"drawer-close-button\"\n                  />\n                )}\n                <Suspense fallback={<Progress />}>{children}</Suspense>\n              </m.div>\n            </FocusTrap>\n          </m.div>\n        </div>\n      </LazyMotion>\n    </Portal>\n  );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = HTMLAttributes<HTMLDivElement> & {\n  closeable?: boolean;\n  titleID?: string;\n  titleClassName?: string;\n  onClose?(): void;\n  'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n  className,\n  children,\n  titleID,\n  titleClassName,\n  'data-test-id': testId = 'drawer-header',\n  ...rest\n}: DrawerHeaderProps) => {\n  return (\n    <div data-test-id={testId} className={className} {...rest}>\n      <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n        {children}\n      </h2>\n    </div>\n  );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["overlay","visible","opacity","transition","duration","hidden","slideRight","x","type","delay","bounce","loadFeatures","then","res","domAnimation","Drawer","className","children","onCancel","size","testId","theme","hideCancel","ref","useRef","useEffect","handleEscape","event","stopImmediatePropagation","latest","document","querySelectorAll","pop","key","current","close","body","classList","add","addEventListener","remove","removeEventListener","handleOverlayClick","target","currentTarget","Portal","LazyMotion","strict","features","cx","styles","drawer","m","div","initial","animate","variants","role","onMouseDown","FocusTrap","autoFocus","restoreFocus","DRAWER_LABELLED_BY","content","tabIndex","IconButton","icon","Close","closeButton","onClick","_jsx","Suspense","fallback","Progress","DrawerHeader","titleID","titleClassName","rest","id"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/constants.ts","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { useState, Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n  visible: { opacity: 1, transition: { duration: 0.15 } },\n  hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n  hidden: { opacity: 0, x: '25%' },\n  visible: {\n    opacity: 1,\n    x: '0%',\n    transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n  },\n};\n\nconst loadFeatures = () =>\n  import(\n    /* webpackChunkName: \"lp-drawer-framer-features\" */\n    /* webpackExports: \"domAnimation\" */\n    'framer-motion'\n  ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n  children?: ReactNode;\n  className?: string;\n  onCancel?(): void;\n  'data-test-id'?: string;\n  size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n  theme?: 'dark' | 'default';\n  hideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n  <Portal>\n    <DrawerContainer {...props} />\n  </Portal>\n);\n\nconst DrawerContainer = ({\n  className,\n  children,\n  onCancel,\n  size = 'small',\n  'data-test-id': testId = 'drawer',\n  theme,\n  hideCancel = false,\n}: DrawerProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n  });\n\n  usePreventScroll();\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      event.stopImmediatePropagation();\n      const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n      if (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n        close();\n      }\n    };\n\n    const addOverlayAndEventHandler = () => {\n      document.body.classList.add('has-overlay');\n      document.addEventListener('keydown', handleEscape);\n    };\n\n    const removeOverlayAndEventHandler = () => {\n      document.body.classList.remove('has-overlay');\n      document.removeEventListener('keydown', handleEscape);\n    };\n\n    const close = () => {\n      onCancel?.();\n    };\n\n    if (isFocusWithin) {\n      addOverlayAndEventHandler();\n    }\n\n    if (!isFocusWithin) {\n      removeOverlayAndEventHandler();\n    }\n\n    return () => {\n      removeOverlayAndEventHandler();\n    };\n  }, [onCancel, testId, isFocusWithin]);\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === event.currentTarget) {\n      onCancel && onCancel();\n    }\n  };\n\n  return (\n    <LazyMotion strict features={loadFeatures}>\n      <div\n        {...focusWithinProps}\n        className={cx(styles.drawer, styles[size], className)}\n        data-drawer\n        data-test-id={testId}\n        ref={ref}\n      >\n        <m.div\n          initial=\"hidden\"\n          animate=\"visible\"\n          variants={overlay}\n          transition={{ duration: 0.15 }}\n          role=\"presentation\"\n          className={styles.overlay}\n          onMouseDown={handleOverlayClick}\n        >\n          <FocusTrap autoFocus restoreFocus>\n            <m.div\n              initial=\"hidden\"\n              animate=\"visible\"\n              variants={slideRight}\n              role=\"dialog\"\n              aria-labelledby={DRAWER_LABELLED_BY}\n              aria-describedby={DRAWER_LABELLED_BY}\n              aria-modal\n              className={styles.content}\n              tabIndex={-1}\n              {...(theme ? { 'data-theme': theme } : {})}\n            >\n              {!hideCancel && (\n                <IconButton\n                  aria-label=\"close\"\n                  icon={<Close size=\"medium\" />}\n                  className={styles.closeButton}\n                  onClick={onCancel}\n                  data-test-id=\"drawer-close-button\"\n                />\n              )}\n              <Suspense fallback={<Progress />}>{children}</Suspense>\n            </m.div>\n          </FocusTrap>\n        </m.div>\n      </div>\n    </LazyMotion>\n  );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { ComponentProps } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = ComponentProps<'div'> & {\n  closeable?: boolean;\n  titleID?: string;\n  titleClassName?: string;\n  onClose?(): void;\n  'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n  className,\n  children,\n  titleID,\n  titleClassName,\n  'data-test-id': testId = 'drawer-header',\n  ...rest\n}: DrawerHeaderProps) => {\n  return (\n    <div data-test-id={testId} className={className} {...rest}>\n      <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n        {children}\n      </h2>\n    </div>\n  );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["overlay","visible","opacity","transition","duration","hidden","slideRight","x","type","delay","bounce","loadFeatures","then","res","domAnimation","Drawer","props","_jsx","Portal","children","DrawerContainer","className","onCancel","size","testId","theme","hideCancel","ref","useRef","isFocusWithin","setIsFocusWithin","useState","focusWithinProps","useFocusWithin","onFocusWithinChange","useEffect","handleEscape","event","stopImmediatePropagation","latest","document","querySelectorAll","pop","key","current","addOverlayAndEventHandler","body","classList","add","addEventListener","removeOverlayAndEventHandler","remove","removeEventListener","close","handleOverlayClick","target","currentTarget","LazyMotion","strict","features","cx","styles","drawer","m","div","initial","animate","variants","role","onMouseDown","FocusTrap","autoFocus","restoreFocus","DRAWER_LABELLED_BY","content","tabIndex","IconButton","icon","Close","closeButton","onClick","Suspense","fallback","Progress","DrawerHeader","titleID","titleClassName","rest","id"],"mappings":"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"}

package/dist/index.js

@@ -6,6 +6,7 @@ const focusTrap = require("@launchpad-ui/focus-trap");
 const icons = require("@launchpad-ui/icons");
 const portal = require("@launchpad-ui/portal");
 const progress = require("@launchpad-ui/progress");
+const interactions = require("@react-aria/interactions");
 const overlays = require("@react-aria/overlays");
 const classix = require("classix");
 const framerMotion = require("framer-motion");
@@ -80,7 +81,12 @@ const slideRight = {
 const loadFeatures = () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespace(require(
   "framer-motion"
 ))).then((res) => res.domAnimation);
-const Drawer = ({
+const Drawer = (props) => /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, {
+  children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContainer, {
+    ...props
+  })
+});
+const DrawerContainer = ({
   className,
   children,
   onCancel,
@@ -90,77 +96,94 @@ const Drawer = ({
   hideCancel = false
 }) => {
   const ref = react.useRef(null);
+  const [isFocusWithin, setIsFocusWithin] = react.useState(false);
+  const {
+    focusWithinProps
+  } = interactions.useFocusWithin({
+    onFocusWithinChange: (isFocusWithin2) => setIsFocusWithin(isFocusWithin2)
+  });
   overlays.usePreventScroll();
   react.useEffect(() => {
     const handleEscape = (event) => {
       event.stopImmediatePropagation();
       const latest = [...document.querySelectorAll("[data-drawer]")].pop();
-      if (event.key === "Escape" && latest === ref.current) {
+      if (event.key === "Escape" && latest === ref.current && isFocusWithin) {
         close();
       }
     };
+    const addOverlayAndEventHandler = () => {
+      document.body.classList.add("has-overlay");
+      document.addEventListener("keydown", handleEscape);
+    };
+    const removeOverlayAndEventHandler = () => {
+      document.body.classList.remove("has-overlay");
+      document.removeEventListener("keydown", handleEscape);
+    };
     const close = () => {
       onCancel == null ? void 0 : onCancel();
     };
-    document.body.classList.add("has-overlay");
-    document.addEventListener("keydown", handleEscape);
+    if (isFocusWithin) {
+      addOverlayAndEventHandler();
+    }
+    if (!isFocusWithin) {
+      removeOverlayAndEventHandler();
+    }
     return () => {
-      document.body.classList.remove("has-overlay");
-      document.removeEventListener("keydown", handleEscape);
+      removeOverlayAndEventHandler();
     };
-  }, [onCancel, testId]);
+  }, [onCancel, testId, isFocusWithin]);
   const handleOverlayClick = (event) => {
     if (event.target === event.currentTarget) {
       onCancel && onCancel();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, {
-    children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, {
-      strict: true,
-      features: loadFeatures,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classix.cx(styles.drawer, styles[size], className),
-        "data-drawer": true,
-        "data-test-id": testId,
-        ref,
-        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.m.div, {
-          initial: "hidden",
-          animate: "visible",
-          variants: overlay,
-          transition: {
-            duration: 0.15
-          },
-          role: "presentation",
-          className: styles.overlay,
-          onMouseDown: handleOverlayClick,
-          children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, {
-            autoFocus: true,
-            restoreFocus: true,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.m.div, {
-              initial: "hidden",
-              animate: "visible",
-              variants: slideRight,
-              role: "dialog",
-              "aria-labelledby": DRAWER_LABELLED_BY,
-              "aria-modal": true,
-              className: styles.content,
-              tabIndex: -1,
-              ...theme ? {
-                "data-theme": theme
-              } : {},
-              children: [!hideCancel && /* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
-                "aria-label": "close",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, {
-                  size: "medium"
-                }),
-                className: styles.closeButton,
-                onClick: onCancel,
-                "data-test-id": "drawer-close-button"
-              }), /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, {
-                fallback: /* @__PURE__ */ jsxRuntime.jsx(progress.Progress, {}),
-                children
-              })]
-            })
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, {
+    strict: true,
+    features: loadFeatures,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ...focusWithinProps,
+      className: classix.cx(styles.drawer, styles[size], className),
+      "data-drawer": true,
+      "data-test-id": testId,
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.m.div, {
+        initial: "hidden",
+        animate: "visible",
+        variants: overlay,
+        transition: {
+          duration: 0.15
+        },
+        role: "presentation",
+        className: styles.overlay,
+        onMouseDown: handleOverlayClick,
+        children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, {
+          autoFocus: true,
+          restoreFocus: true,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.m.div, {
+            initial: "hidden",
+            animate: "visible",
+            variants: slideRight,
+            role: "dialog",
+            "aria-labelledby": DRAWER_LABELLED_BY,
+            "aria-describedby": DRAWER_LABELLED_BY,
+            "aria-modal": true,
+            className: styles.content,
+            tabIndex: -1,
+            ...theme ? {
+              "data-theme": theme
+            } : {},
+            children: [!hideCancel && /* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
+              "aria-label": "close",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, {
+                size: "medium"
+              }),
+              className: styles.closeButton,
+              onClick: onCancel,
+              "data-test-id": "drawer-close-button"
+            }), /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, {
+              fallback: /* @__PURE__ */ jsxRuntime.jsx(progress.Progress, {}),
+              children
+            })]
           })
         })
       })

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/constants.ts","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n  visible: { opacity: 1, transition: { duration: 0.15 } },\n  hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n  hidden: { opacity: 0, x: '25%' },\n  visible: {\n    opacity: 1,\n    x: '0%',\n    transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n  },\n};\n\nconst loadFeatures = () =>\n  import(\n    /* webpackChunkName: \"lp-drawer-framer-features\" */\n    /* webpackExports: \"domAnimation\" */\n    'framer-motion'\n  ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n  children?: ReactNode;\n  className?: string;\n  onCancel?(): void;\n  'data-test-id'?: string;\n  size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n  theme?: 'dark' | 'default';\n  hideCancel?: boolean;\n};\n\nconst Drawer = ({\n  className,\n  children,\n  onCancel,\n  size = 'small',\n  'data-test-id': testId = 'drawer',\n  theme,\n  hideCancel = false,\n}: DrawerProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  usePreventScroll();\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      event.stopImmediatePropagation();\n      const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n      if (event.key === 'Escape' && latest === ref.current) {\n        close();\n      }\n    };\n\n    const close = () => {\n      onCancel?.();\n    };\n\n    document.body.classList.add('has-overlay');\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.body.classList.remove('has-overlay');\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [onCancel, testId]);\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === event.currentTarget) {\n      onCancel && onCancel();\n    }\n  };\n\n  return (\n    <Portal>\n      <LazyMotion strict features={loadFeatures}>\n        <div\n          className={cx(styles.drawer, styles[size], className)}\n          data-drawer\n          data-test-id={testId}\n          ref={ref}\n        >\n          <m.div\n            initial=\"hidden\"\n            animate=\"visible\"\n            variants={overlay}\n            transition={{ duration: 0.15 }}\n            role=\"presentation\"\n            className={styles.overlay}\n            onMouseDown={handleOverlayClick}\n          >\n            <FocusTrap autoFocus restoreFocus>\n              <m.div\n                initial=\"hidden\"\n                animate=\"visible\"\n                variants={slideRight}\n                role=\"dialog\"\n                aria-labelledby={DRAWER_LABELLED_BY}\n                aria-modal\n                className={styles.content}\n                tabIndex={-1}\n                {...(theme ? { 'data-theme': theme } : {})}\n              >\n                {!hideCancel && (\n                  <IconButton\n                    aria-label=\"close\"\n                    icon={<Close size=\"medium\" />}\n                    className={styles.closeButton}\n                    onClick={onCancel}\n                    data-test-id=\"drawer-close-button\"\n                  />\n                )}\n                <Suspense fallback={<Progress />}>{children}</Suspense>\n              </m.div>\n            </FocusTrap>\n          </m.div>\n        </div>\n      </LazyMotion>\n    </Portal>\n  );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = HTMLAttributes<HTMLDivElement> & {\n  closeable?: boolean;\n  titleID?: string;\n  titleClassName?: string;\n  onClose?(): void;\n  'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n  className,\n  children,\n  titleID,\n  titleClassName,\n  'data-test-id': testId = 'drawer-header',\n  ...rest\n}: DrawerHeaderProps) => {\n  return (\n    <div data-test-id={testId} className={className} {...rest}>\n      <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n        {children}\n      </h2>\n    </div>\n  );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["overlay","visible","opacity","transition","duration","hidden","slideRight","x","type","delay","bounce","loadFeatures","then","res","domAnimation","Drawer","className","children","onCancel","size","testId","theme","hideCancel","ref","useRef","usePreventScroll","useEffect","handleEscape","event","stopImmediatePropagation","latest","document","querySelectorAll","pop","key","current","close","body","classList","add","addEventListener","remove","removeEventListener","handleOverlayClick","target","currentTarget","Portal","LazyMotion","strict","features","cx","styles","drawer","m","div","initial","animate","variants","role","onMouseDown","FocusTrap","autoFocus","restoreFocus","DRAWER_LABELLED_BY","content","tabIndex","IconButton","icon","Close","closeButton","onClick","_jsx","Suspense","fallback","Progress","DrawerHeader","titleID","titleClassName","rest","id"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/constants.ts","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { useState, Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n  visible: { opacity: 1, transition: { duration: 0.15 } },\n  hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n  hidden: { opacity: 0, x: '25%' },\n  visible: {\n    opacity: 1,\n    x: '0%',\n    transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n  },\n};\n\nconst loadFeatures = () =>\n  import(\n    /* webpackChunkName: \"lp-drawer-framer-features\" */\n    /* webpackExports: \"domAnimation\" */\n    'framer-motion'\n  ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n  children?: ReactNode;\n  className?: string;\n  onCancel?(): void;\n  'data-test-id'?: string;\n  size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n  theme?: 'dark' | 'default';\n  hideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n  <Portal>\n    <DrawerContainer {...props} />\n  </Portal>\n);\n\nconst DrawerContainer = ({\n  className,\n  children,\n  onCancel,\n  size = 'small',\n  'data-test-id': testId = 'drawer',\n  theme,\n  hideCancel = false,\n}: DrawerProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n  });\n\n  usePreventScroll();\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      event.stopImmediatePropagation();\n      const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n      if (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n        close();\n      }\n    };\n\n    const addOverlayAndEventHandler = () => {\n      document.body.classList.add('has-overlay');\n      document.addEventListener('keydown', handleEscape);\n    };\n\n    const removeOverlayAndEventHandler = () => {\n      document.body.classList.remove('has-overlay');\n      document.removeEventListener('keydown', handleEscape);\n    };\n\n    const close = () => {\n      onCancel?.();\n    };\n\n    if (isFocusWithin) {\n      addOverlayAndEventHandler();\n    }\n\n    if (!isFocusWithin) {\n      removeOverlayAndEventHandler();\n    }\n\n    return () => {\n      removeOverlayAndEventHandler();\n    };\n  }, [onCancel, testId, isFocusWithin]);\n\n  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === event.currentTarget) {\n      onCancel && onCancel();\n    }\n  };\n\n  return (\n    <LazyMotion strict features={loadFeatures}>\n      <div\n        {...focusWithinProps}\n        className={cx(styles.drawer, styles[size], className)}\n        data-drawer\n        data-test-id={testId}\n        ref={ref}\n      >\n        <m.div\n          initial=\"hidden\"\n          animate=\"visible\"\n          variants={overlay}\n          transition={{ duration: 0.15 }}\n          role=\"presentation\"\n          className={styles.overlay}\n          onMouseDown={handleOverlayClick}\n        >\n          <FocusTrap autoFocus restoreFocus>\n            <m.div\n              initial=\"hidden\"\n              animate=\"visible\"\n              variants={slideRight}\n              role=\"dialog\"\n              aria-labelledby={DRAWER_LABELLED_BY}\n              aria-describedby={DRAWER_LABELLED_BY}\n              aria-modal\n              className={styles.content}\n              tabIndex={-1}\n              {...(theme ? { 'data-theme': theme } : {})}\n            >\n              {!hideCancel && (\n                <IconButton\n                  aria-label=\"close\"\n                  icon={<Close size=\"medium\" />}\n                  className={styles.closeButton}\n                  onClick={onCancel}\n                  data-test-id=\"drawer-close-button\"\n                />\n              )}\n              <Suspense fallback={<Progress />}>{children}</Suspense>\n            </m.div>\n          </FocusTrap>\n        </m.div>\n      </div>\n    </LazyMotion>\n  );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { ComponentProps } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = ComponentProps<'div'> & {\n  closeable?: boolean;\n  titleID?: string;\n  titleClassName?: string;\n  onClose?(): void;\n  'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n  className,\n  children,\n  titleID,\n  titleClassName,\n  'data-test-id': testId = 'drawer-header',\n  ...rest\n}: DrawerHeaderProps) => {\n  return (\n    <div data-test-id={testId} className={className} {...rest}>\n      <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n        {children}\n      </h2>\n    </div>\n  );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["overlay","visible","opacity","transition","duration","hidden","slideRight","x","type","delay","bounce","loadFeatures","then","res","domAnimation","Drawer","props","_jsx","Portal","children","DrawerContainer","className","onCancel","size","testId","theme","hideCancel","ref","useRef","isFocusWithin","setIsFocusWithin","useState","focusWithinProps","useFocusWithin","onFocusWithinChange","usePreventScroll","useEffect","handleEscape","event","stopImmediatePropagation","latest","document","querySelectorAll","pop","key","current","addOverlayAndEventHandler","body","classList","add","addEventListener","removeOverlayAndEventHandler","remove","removeEventListener","close","handleOverlayClick","target","currentTarget","LazyMotion","strict","features","cx","styles","drawer","m","div","initial","animate","variants","role","onMouseDown","FocusTrap","autoFocus","restoreFocus","DRAWER_LABELLED_BY","content","tabIndex","IconButton","icon","Close","closeButton","onClick","Suspense","fallback","Progress","DrawerHeader","titleID","titleClassName","rest","id"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpad-ui/drawer",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "status": "alpha",
   "publishConfig": {
     "access": "public"
@@ -26,13 +26,14 @@
   },
   "source": "src/index.ts",
   "dependencies": {
+    "@react-aria/interactions": "3.14.0",
     "@react-aria/overlays": "3.12.1",
     "classix": "2.1.17",
     "framer-motion": "9.0.3",
-    "@launchpad-ui/button": "~0.8.12",
+    "@launchpad-ui/button": "~0.8.13",
     "@launchpad-ui/focus-trap": "~0.1.6",
     "@launchpad-ui/icons": "~0.8.6",
-    "@launchpad-ui/portal": "~0.1.2",
+    "@launchpad-ui/portal": "~0.1.3",
     "@launchpad-ui/progress": "~0.5.25",
     "@launchpad-ui/tokens": "~0.5.6"
   },