@launchpad-ui/drawer 0.2.6 → 0.3.0

package/dist/Drawer.d.ts

@@ -5,9 +5,10 @@ type DrawerProps = {
     onCancel?(): void;
     'data-test-id'?: string;
     size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';
+    theme?: 'dark' | 'default';
     hideCancel?: boolean;
 };
-declare const Drawer: ({ className, children, onCancel, size, "data-test-id": testId, hideCancel, }: DrawerProps) => JSX.Element;
+declare const Drawer: ({ className, children, onCancel, size, "data-test-id": testId, theme, hideCancel, }: 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,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,MAAM,iFAOT,WAAW,gBA+Eb,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;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"}

package/dist/index.es.js

@@ -10,15 +10,15 @@ import { LazyMotion, m } from "framer-motion";
 import { useRef, useEffect, Suspense } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 const DRAWER_LABELLED_BY = "drawer-title";
-const drawer = "_drawer_9a6so_17";
-const overlay$1 = "_overlay_9a6so_27";
-const content = "_content_9a6so_40";
-const small = "_small_9a6so_53";
-const medium = "_medium_9a6so_57";
-const large = "_large_9a6so_61";
-const xLarge = "_xLarge_9a6so_65";
-const full = "_full_9a6so_69";
-const closeButton = "_closeButton_9a6so_83";
+const drawer = "_drawer_b2us9_12";
+const overlay$1 = "_overlay_b2us9_34";
+const content = "_content_b2us9_43";
+const small = "_small_b2us9_57";
+const medium = "_medium_b2us9_61";
+const large = "_large_b2us9_65";
+const xLarge = "_xLarge_b2us9_69";
+const full = "_full_b2us9_73";
+const closeButton = "_closeButton_b2us9_87";
 const styles = {
   drawer,
   overlay: overlay$1,
@@ -68,6 +68,7 @@ const Drawer = ({
   onCancel,
   size = "small",
   "data-test-id": testId = "drawer",
+  theme,
   hideCancel = false
 }) => {
   const ref = useRef(null);
@@ -126,6 +127,9 @@ const Drawer = ({
               "aria-modal": true,
               className: styles.content,
               tabIndex: -1,
+              ...theme ? {
+                "data-theme": theme
+              } : {},
               children: [!hideCancel && /* @__PURE__ */ jsx(IconButton, {
                 "aria-label": "close",
                 icon: /* @__PURE__ */ jsx(Close, {

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  hideCancel?: boolean;\n};\n\nconst Drawer = ({\n  className,\n  children,\n  onCancel,\n  size = 'small',\n  'data-test-id': testId = 'drawer',\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              >\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","hideCancel","ref","useRef","useEffect","handleEscape","event","stopImmediatePropagation","latest","document","querySelectorAll","pop","key","current","close","body","classList","add","addEventListener","remove","removeEventListener","handleOverlayClick","target","currentTarget","cx","styles","drawer","_jsx","_jsxs","DRAWER_LABELLED_BY","content","closeButton","DrawerHeader","titleID","titleClassName","rest"],"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 { 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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"}

package/dist/index.js

@@ -30,15 +30,15 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 const DRAWER_LABELLED_BY = "drawer-title";
-const drawer = "_drawer_9a6so_17";
-const overlay$1 = "_overlay_9a6so_27";
-const content = "_content_9a6so_40";
-const small = "_small_9a6so_53";
-const medium = "_medium_9a6so_57";
-const large = "_large_9a6so_61";
-const xLarge = "_xLarge_9a6so_65";
-const full = "_full_9a6so_69";
-const closeButton = "_closeButton_9a6so_83";
+const drawer = "_drawer_b2us9_12";
+const overlay$1 = "_overlay_b2us9_34";
+const content = "_content_b2us9_43";
+const small = "_small_b2us9_57";
+const medium = "_medium_b2us9_61";
+const large = "_large_b2us9_65";
+const xLarge = "_xLarge_b2us9_69";
+const full = "_full_b2us9_73";
+const closeButton = "_closeButton_b2us9_87";
 const styles = {
   drawer,
   overlay: overlay$1,
@@ -86,6 +86,7 @@ const Drawer = ({
   onCancel,
   size = "small",
   "data-test-id": testId = "drawer",
+  theme,
   hideCancel = false
 }) => {
   const ref = react.useRef(null);
@@ -144,6 +145,9 @@ const Drawer = ({
               "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, {

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  hideCancel?: boolean;\n};\n\nconst Drawer = ({\n  className,\n  children,\n  onCancel,\n  size = 'small',\n  'data-test-id': testId = 'drawer',\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              >\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","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","cx","styles","drawer","_jsx","m","FocusTrap","_jsxs","DRAWER_LABELLED_BY","content","IconButton","Close","closeButton","Suspense","Progress","DrawerHeader","titleID","titleClassName","rest"],"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 { 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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"}

package/dist/style.css

@@ -1,15 +1,13 @@
-:root {
-  --page-gutter-width: 1rem;
+:root,
+[data-theme='default'] {
+  --lp-component-drawer-color-bg-overlay: rgba(40, 40, 40, 0.5);
 }
-@media screen and (min-width: 740px) {
-  :root {
-    --page-gutter-width: 4rem;
-  }
+[data-theme='dark'] {
+  --lp-component-drawer-color-bg-overlay: rgba(25, 25, 25, 0.75);
 }
-.has-overlay {
-  overflow: hidden;
-}
-._drawer_9a6so_17 {
+._drawer_b2us9_12 {
+  --page-gutter-width: 1rem;
+
   z-index: var(--lp-z-index-400);
   position: fixed;
   top: 0;
@@ -18,18 +16,24 @@
   left: 0;
   transform: translateZ(0);
 }
-._overlay_9a6so_27 {
+@media screen and (min-width: 740px) {
+  ._drawer_b2us9_12 {
+    --page-gutter-width: 4rem;
+  }
+}
+.has-overlay {
+  overflow: hidden;
+}
+._overlay_b2us9_34 {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(40, 40, 40, 0.5);
+  background-color: var(--lp-component-drawer-color-bg-overlay);
 }
-:root[data-theme='dark'] ._overlay_9a6so_27 {
-    background-color: rgba(25, 25, 25, 0.75);
-  }
-._content_9a6so_40 {
+._content_b2us9_43 {
   background-color: var(--lp-color-bg-ui-primary);
   position: absolute;
   top: 0;
@@ -38,39 +42,39 @@
   overflow: auto;
   width: 100vw;
   max-width: 100vw;
+  color: var(--lp-color-text-ui-secondary);
   box-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);
 }
 @media screen and (min-width: 740px) {
-  ._small_9a6so_53 ._content_9a6so_40 {
+  ._small_b2us9_57 ._content_b2us9_43 {
     width: 45rem;
   }
 
-  ._medium_9a6so_57 ._content_9a6so_40 {
+  ._medium_b2us9_61 ._content_b2us9_43 {
     width: 65rem;
   }
 
-  ._large_9a6so_61 ._content_9a6so_40 {
+  ._large_b2us9_65 ._content_b2us9_43 {
     width: 80rem;
   }
 
-  ._xLarge_9a6so_65 ._content_9a6so_40 {
+  ._xLarge_b2us9_69 ._content_b2us9_43 {
     width: 120rem;
   }
 
-  ._full_9a6so_69 ._content_9a6so_40 {
+  ._full_b2us9_73 ._content_b2us9_43 {
     width: 100%;
     max-width: none;
     max-width: initial;
   }
 }
-._content_9a6so_40 section {
-  padding: 3.2rem 1rem;
+._content_b2us9_43 section {
   padding: 3.2rem var(--page-gutter-width);
 }
-._content_9a6so_40 section + section {
+._content_b2us9_43 section + section {
   border-top: 1px dotted var(--lp-color-gray-100);
 }
-._closeButton_9a6so_83 {
+._closeButton_b2us9_87 {
   position: absolute;
   right: 1rem;
   top: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpad-ui/drawer",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "status": "alpha",
   "publishConfig": {
     "access": "public"
@@ -29,12 +29,12 @@
     "@react-aria/overlays": "3.12.1",
     "classix": "2.1.17",
     "framer-motion": "9.0.3",
-    "@launchpad-ui/button": "~0.7.31",
+    "@launchpad-ui/button": "~0.8.0",
     "@launchpad-ui/focus-trap": "~0.1.4",
-    "@launchpad-ui/icons": "~0.7.0",
+    "@launchpad-ui/icons": "~0.7.2",
     "@launchpad-ui/portal": "~0.1.2",
-    "@launchpad-ui/progress": "~0.5.17",
-    "@launchpad-ui/tokens": "~0.4.9"
+    "@launchpad-ui/progress": "~0.5.19",
+    "@launchpad-ui/tokens": "~0.5.0"
   },
   "peerDependencies": {
     "react": "18.2.0",