@launchpad-ui/drawer 0.9.13 → 0.9.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.es.js +21 -34
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +24 -47
  4. package/dist/index.js.map +1 -1
  5. package/package.json +11 -13
package/dist/index.es.js CHANGED
@@ -4,41 +4,32 @@ import { FocusTrap } from "@launchpad-ui/focus-trap";
4
4
  import { Icon } from "@launchpad-ui/icons";
5
5
  import { Portal } from "@launchpad-ui/portal";
6
6
  import { Progress } from "@launchpad-ui/progress";
7
- import { useFocusWithin } from "@react-aria/interactions";
8
- import { usePreventScroll } from "@react-aria/overlays";
9
7
  import { cx } from "classix";
10
8
  import { LazyMotion, m } from "framer-motion";
11
9
  import { Suspense, useEffect, useRef, useState } from "react";
10
+ import { useFocusWithin } from "react-aria/useFocusWithin";
11
+ import { usePreventScroll } from "react-aria/usePreventScroll";
12
12
  import { jsx, jsxs } from "react/jsx-runtime";
13
13
  const DRAWER_LABELLED_BY = "drawer-title";
14
- const closeButton = "sj_sSW_closeButton";
15
- const content = "sj_sSW_content";
16
- const drawer = "sj_sSW_drawer";
17
- const full = "sj_sSW_full";
18
- const large = "sj_sSW_large";
19
- const medium = "sj_sSW_medium";
20
- const overlay$1 = "sj_sSW_overlay";
21
- const small = "sj_sSW_small";
22
- const xLarge = "sj_sSW_xLarge";
23
14
  var Drawer_module_default = {
24
- closeButton,
25
- content,
26
- drawer,
27
- full,
28
- large,
29
- medium,
30
- overlay: overlay$1,
31
- small,
32
- xLarge
15
+ closeButton: "sj_sSW_closeButton",
16
+ content: "sj_sSW_content",
17
+ drawer: "sj_sSW_drawer",
18
+ full: "sj_sSW_full",
19
+ large: "sj_sSW_large",
20
+ medium: "sj_sSW_medium",
21
+ overlay: "sj_sSW_overlay",
22
+ small: "sj_sSW_small",
23
+ xLarge: "sj_sSW_xLarge"
33
24
  };
34
- const overlay = {
25
+ var overlay = {
35
26
  visible: {
36
27
  opacity: 1,
37
28
  transition: { duration: .15 }
38
29
  },
39
30
  hidden: { opacity: 0 }
40
31
  };
41
- const slideRight = {
32
+ var slideRight = {
42
33
  hidden: {
43
34
  opacity: 0,
44
35
  x: "25%"
@@ -54,17 +45,13 @@ const slideRight = {
54
45
  }
55
46
  }
56
47
  };
57
- const loadFeatures = () => import(
58
- /* webpackChunkName: "lp-drawer-framer-features" */
59
- /* webpackExports: "domAnimation" */
60
- "framer-motion").then((res) => res.domAnimation);
61
- /**
62
- * @deprecated use `Modal` from `@launchpad-ui/components` instead
63
- *
64
- * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer
65
- */
66
- const Drawer = (props) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DrawerContainer, { ...props }) });
67
- const DrawerContainer = ({ className, children, onCancel, size = "small", "data-test-id": testId = "drawer", theme, hideCancel = false }) => {
48
+ var loadFeatures = () => import(
49
+ /* webpackChunkName: "lp-drawer-framer-features" */
50
+ /* webpackExports: "domAnimation" */
51
+ "framer-motion"
52
+ ).then((res) => res.domAnimation);
53
+ var Drawer = (props) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DrawerContainer, { ...props }) });
54
+ var DrawerContainer = ({ className, children, onCancel, size = "small", "data-test-id": testId = "drawer", theme, hideCancel = false }) => {
68
55
  const ref = useRef(null);
69
56
  const [isFocusWithin, setIsFocusWithin] = useState(false);
70
57
  const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocusWithin$1) => setIsFocusWithin(isFocusWithin$1) });
@@ -145,7 +132,7 @@ const DrawerContainer = ({ className, children, onCancel, size = "small", "data-
145
132
  })
146
133
  });
147
134
  };
148
- const DrawerHeader = ({ className, children, titleID, titleClassName, "data-test-id": testId = "drawer-header",...rest }) => {
135
+ var DrawerHeader = ({ className, children, titleID, titleClassName, "data-test-id": testId = "drawer-header", ...rest }) => {
149
136
  return /* @__PURE__ */ jsx("div", {
150
137
  "data-test-id": testId,
151
138
  className,
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","names":["overlay: Variants","slideRight: Variants","props: DrawerProps","event: KeyboardEvent","event: MouseEvent<HTMLDivElement>"],"sources":["../src/constants.ts","../src/styles/Drawer.module.css","../../tokens/dist/media-queries.css","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","@import '../../../tokens/dist/media-queries.css';\n\n:root,\n[data-theme='default'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(40 40 40 / 0.5);\n}\n\n[data-theme='dark'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(25 25 25 / 0.75);\n}\n\n.drawer {\n\t--page-gutter-width: 0.625rem;\n\n\tz-index: var(--lp-z-index-400);\n\tposition: fixed;\n\tinset: 0;\n\ttransform: translateZ(0);\n}\n\n@media (--tablet) {\n\t.drawer {\n\t\t--page-gutter-width: 2.5rem;\n\t}\n}\n\n:global(.has-overlay) {\n\toverflow: hidden;\n}\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground-color: var(--lp-component-drawer-color-bg-overlay);\n}\n\n.content {\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\toverflow: auto;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tbox-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);\n}\n\n@media (--tablet) {\n\t.small .content {\n\t\twidth: 28.125rem;\n\t}\n\n\t.medium .content {\n\t\twidth: 40.625rem;\n\t}\n\n\t.large .content {\n\t\twidth: 50rem;\n\t}\n\n\t.xLarge .content {\n\t\twidth: 75rem;\n\t}\n\n\t.full .content {\n\t\twidth: 100%;\n\t\tmax-width: unset;\n\t}\n}\n\n.content section {\n\tpadding: 2rem var(--page-gutter-width);\n}\n\n.content section + section {\n\tborder-top: 1px dotted var(--lp-color-gray-100);\n}\n\n.closeButton {\n\tposition: absolute;\n\tright: 0.625rem;\n\ttop: 0.625rem;\n}\n","@custom-media --mobile screen and (min-width: 0);\n@custom-media --tablet screen and (min-width: 46.25rem);\n@custom-media --desktop screen and (min-width: 62rem);\n@custom-media --wide screen and (min-width: 75rem);","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 { Icon } 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 { Suspense, useEffect, useRef, useState } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\n */\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\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\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.es.js","names":["overlay: Variants","slideRight: Variants"],"sources":["../src/constants.ts","../src/styles/Drawer.module.css","../../tokens/dist/media-queries.css","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","@import '../../../tokens/dist/media-queries.css';\n\n:root,\n[data-theme='default'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(40 40 40 / 0.5);\n}\n\n[data-theme='dark'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(25 25 25 / 0.75);\n}\n\n.drawer {\n\t--page-gutter-width: 0.625rem;\n\n\tz-index: var(--lp-z-index-400);\n\tposition: fixed;\n\tinset: 0;\n\ttransform: translateZ(0);\n}\n\n@media (--tablet) {\n\t.drawer {\n\t\t--page-gutter-width: 2.5rem;\n\t}\n}\n\n:global(.has-overlay) {\n\toverflow: hidden;\n}\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground-color: var(--lp-component-drawer-color-bg-overlay);\n}\n\n.content {\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\toverflow: auto;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tbox-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);\n}\n\n@media (--tablet) {\n\t.small .content {\n\t\twidth: 28.125rem;\n\t}\n\n\t.medium .content {\n\t\twidth: 40.625rem;\n\t}\n\n\t.large .content {\n\t\twidth: 50rem;\n\t}\n\n\t.xLarge .content {\n\t\twidth: 75rem;\n\t}\n\n\t.full .content {\n\t\twidth: 100%;\n\t\tmax-width: unset;\n\t}\n}\n\n.content section {\n\tpadding: 2rem var(--page-gutter-width);\n}\n\n.content section + section {\n\tborder-top: 1px dotted var(--lp-color-gray-100);\n}\n\n.closeButton {\n\tposition: absolute;\n\tright: 0.625rem;\n\ttop: 0.625rem;\n}\n","@custom-media --mobile screen and (min-width: 0);\n@custom-media --tablet screen and (min-width: 46.25rem);\n@custom-media --desktop screen and (min-width: 62rem);\n@custom-media --wide screen and (min-width: 75rem);","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 { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { Suspense, useEffect, useRef, useState } from 'react';\nimport { useFocusWithin } from 'react-aria/useFocusWithin';\nimport { usePreventScroll } from 'react-aria/usePreventScroll';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\n */\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\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\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,35 +1,16 @@
1
1
  require('./style.css');
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __copyProps = (to, from, except, desc) => {
9
- if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
10
- key = keys[i];
11
- if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
12
- get: ((k) => from[k]).bind(null, key),
13
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
14
- });
15
- }
16
- return to;
17
- };
18
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
19
- value: mod,
20
- enumerable: true
21
- }) : target, mod));
22
- const __launchpad_ui_button = __toESM(require("@launchpad-ui/button"));
23
- const __launchpad_ui_focus_trap = __toESM(require("@launchpad-ui/focus-trap"));
24
- const __launchpad_ui_icons = __toESM(require("@launchpad-ui/icons"));
25
- const __launchpad_ui_portal = __toESM(require("@launchpad-ui/portal"));
26
- const __launchpad_ui_progress = __toESM(require("@launchpad-ui/progress"));
27
- const __react_aria_interactions = __toESM(require("@react-aria/interactions"));
28
- const __react_aria_overlays = __toESM(require("@react-aria/overlays"));
29
- const classix = __toESM(require("classix"));
30
- const framer_motion = __toESM(require("framer-motion"));
31
- const react = __toESM(require("react"));
32
- const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ let __launchpad_ui_button = require("@launchpad-ui/button");
4
+ let __launchpad_ui_focus_trap = require("@launchpad-ui/focus-trap");
5
+ let __launchpad_ui_icons = require("@launchpad-ui/icons");
6
+ let __launchpad_ui_portal = require("@launchpad-ui/portal");
7
+ let __launchpad_ui_progress = require("@launchpad-ui/progress");
8
+ let classix = require("classix");
9
+ let framer_motion = require("framer-motion");
10
+ let react = require("react");
11
+ let react_aria_useFocusWithin = require("react-aria/useFocusWithin");
12
+ let react_aria_usePreventScroll = require("react-aria/usePreventScroll");
13
+ let react_jsx_runtime = require("react/jsx-runtime");
33
14
  const DRAWER_LABELLED_BY = "drawer-title";
34
15
  const closeButton = "sj_sSW_closeButton";
35
16
  const content = "sj_sSW_content";
@@ -51,14 +32,14 @@ var Drawer_module_default = {
51
32
  small,
52
33
  xLarge
53
34
  };
54
- const overlay = {
35
+ var overlay = {
55
36
  visible: {
56
37
  opacity: 1,
57
38
  transition: { duration: .15 }
58
39
  },
59
40
  hidden: { opacity: 0 }
60
41
  };
61
- const slideRight = {
42
+ var slideRight = {
62
43
  hidden: {
63
44
  opacity: 0,
64
45
  x: "25%"
@@ -74,21 +55,17 @@ const slideRight = {
74
55
  }
75
56
  }
76
57
  };
77
- const loadFeatures = () => import(
78
- /* webpackChunkName: "lp-drawer-framer-features" */
79
- /* webpackExports: "domAnimation" */
80
- "framer-motion").then((res) => res.domAnimation);
81
- /**
82
- * @deprecated use `Modal` from `@launchpad-ui/components` instead
83
- *
84
- * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer
85
- */
86
- const Drawer = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContainer, { ...props }) });
87
- const DrawerContainer = ({ className, children, onCancel, size = "small", "data-test-id": testId = "drawer", theme, hideCancel = false }) => {
58
+ var loadFeatures = () => import(
59
+ /* webpackChunkName: "lp-drawer-framer-features" */
60
+ /* webpackExports: "domAnimation" */
61
+ "framer-motion"
62
+ ).then((res) => res.domAnimation);
63
+ var Drawer = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContainer, { ...props }) });
64
+ var DrawerContainer = ({ className, children, onCancel, size = "small", "data-test-id": testId = "drawer", theme, hideCancel = false }) => {
88
65
  const ref = (0, react.useRef)(null);
89
66
  const [isFocusWithin, setIsFocusWithin] = (0, react.useState)(false);
90
- const { focusWithinProps } = (0, __react_aria_interactions.useFocusWithin)({ onFocusWithinChange: (isFocusWithin$1) => setIsFocusWithin(isFocusWithin$1) });
91
- (0, __react_aria_overlays.usePreventScroll)();
67
+ const { focusWithinProps } = (0, react_aria_useFocusWithin.useFocusWithin)({ onFocusWithinChange: (isFocusWithin$1) => setIsFocusWithin(isFocusWithin$1) });
68
+ (0, react_aria_usePreventScroll.usePreventScroll)();
92
69
  (0, react.useEffect)(() => {
93
70
  const handleEscape = (event) => {
94
71
  event.stopImmediatePropagation();
@@ -165,7 +142,7 @@ const DrawerContainer = ({ className, children, onCancel, size = "small", "data-
165
142
  })
166
143
  });
167
144
  };
168
- const DrawerHeader = ({ className, children, titleID, titleClassName, "data-test-id": testId = "drawer-header",...rest }) => {
145
+ var DrawerHeader = ({ className, children, titleID, titleClassName, "data-test-id": testId = "drawer-header", ...rest }) => {
169
146
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
170
147
  "data-test-id": testId,
171
148
  className,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["overlay: Variants","slideRight: Variants","props: DrawerProps","event: KeyboardEvent","event: MouseEvent<HTMLDivElement>"],"sources":["../src/constants.ts","../src/styles/Drawer.module.css","../../tokens/dist/media-queries.css","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","@import '../../../tokens/dist/media-queries.css';\n\n:root,\n[data-theme='default'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(40 40 40 / 0.5);\n}\n\n[data-theme='dark'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(25 25 25 / 0.75);\n}\n\n.drawer {\n\t--page-gutter-width: 0.625rem;\n\n\tz-index: var(--lp-z-index-400);\n\tposition: fixed;\n\tinset: 0;\n\ttransform: translateZ(0);\n}\n\n@media (--tablet) {\n\t.drawer {\n\t\t--page-gutter-width: 2.5rem;\n\t}\n}\n\n:global(.has-overlay) {\n\toverflow: hidden;\n}\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground-color: var(--lp-component-drawer-color-bg-overlay);\n}\n\n.content {\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\toverflow: auto;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tbox-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);\n}\n\n@media (--tablet) {\n\t.small .content {\n\t\twidth: 28.125rem;\n\t}\n\n\t.medium .content {\n\t\twidth: 40.625rem;\n\t}\n\n\t.large .content {\n\t\twidth: 50rem;\n\t}\n\n\t.xLarge .content {\n\t\twidth: 75rem;\n\t}\n\n\t.full .content {\n\t\twidth: 100%;\n\t\tmax-width: unset;\n\t}\n}\n\n.content section {\n\tpadding: 2rem var(--page-gutter-width);\n}\n\n.content section + section {\n\tborder-top: 1px dotted var(--lp-color-gray-100);\n}\n\n.closeButton {\n\tposition: absolute;\n\tright: 0.625rem;\n\ttop: 0.625rem;\n}\n","@custom-media --mobile screen and (min-width: 0);\n@custom-media --tablet screen and (min-width: 46.25rem);\n@custom-media --desktop screen and (min-width: 62rem);\n@custom-media --wide screen and (min-width: 75rem);","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 { Icon } 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 { Suspense, useEffect, useRef, useState } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\n */\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\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\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["overlay: Variants","slideRight: Variants"],"sources":["../src/constants.ts","../src/styles/Drawer.module.css","../../tokens/dist/media-queries.css","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","@import '../../../tokens/dist/media-queries.css';\n\n:root,\n[data-theme='default'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(40 40 40 / 0.5);\n}\n\n[data-theme='dark'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(25 25 25 / 0.75);\n}\n\n.drawer {\n\t--page-gutter-width: 0.625rem;\n\n\tz-index: var(--lp-z-index-400);\n\tposition: fixed;\n\tinset: 0;\n\ttransform: translateZ(0);\n}\n\n@media (--tablet) {\n\t.drawer {\n\t\t--page-gutter-width: 2.5rem;\n\t}\n}\n\n:global(.has-overlay) {\n\toverflow: hidden;\n}\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground-color: var(--lp-component-drawer-color-bg-overlay);\n}\n\n.content {\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\toverflow: auto;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tbox-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);\n}\n\n@media (--tablet) {\n\t.small .content {\n\t\twidth: 28.125rem;\n\t}\n\n\t.medium .content {\n\t\twidth: 40.625rem;\n\t}\n\n\t.large .content {\n\t\twidth: 50rem;\n\t}\n\n\t.xLarge .content {\n\t\twidth: 75rem;\n\t}\n\n\t.full .content {\n\t\twidth: 100%;\n\t\tmax-width: unset;\n\t}\n}\n\n.content section {\n\tpadding: 2rem var(--page-gutter-width);\n}\n\n.content section + section {\n\tborder-top: 1px dotted var(--lp-color-gray-100);\n}\n\n.closeButton {\n\tposition: absolute;\n\tright: 0.625rem;\n\ttop: 0.625rem;\n}\n","@custom-media --mobile screen and (min-width: 0);\n@custom-media --tablet screen and (min-width: 46.25rem);\n@custom-media --desktop screen and (min-width: 62rem);\n@custom-media --wide screen and (min-width: 75rem);","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 { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { Suspense, useEffect, useRef, useState } from 'react';\nimport { useFocusWithin } from 'react-aria/useFocusWithin';\nimport { usePreventScroll } from 'react-aria/usePreventScroll';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\n */\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\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\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"mappings":";;;;;;;;;;;;AAAA,MAAa,qBAAqB;;;;;;;;;;;;;;;;;;;;;AGiBlC,IAAMA,UAAoB;CACzB,SAAS;EAAE,SAAS;EAAG,YAAY,EAAE,UAAU,KAAM;EAAE;CACvD,QAAQ,EAAE,SAAS,GAAG;CACtB;AAED,IAAMC,aAAuB;CAC5B,QAAQ;EAAE,SAAS;EAAG,GAAG;EAAO;CAChC,SAAS;EACR,SAAS;EACT,GAAG;EACH,YAAY;GAAE,MAAM;GAAU,OAAO;GAAM,UAAU;GAAK,QAAQ;GAAG;EACrE;CACD;AAED,IAAM,qBACL;;;CAGC;EACC,MAAM,QAAQ,IAAI,aAAa;AAiBlC,IAAM,UAAU,UACf,iBAAA,GAAA,kBAAA,KAAC,sBAAA,QAAA,EAAA,UACA,iBAAA,GAAA,kBAAA,KAAC,iBAAA,EAAgB,GAAI,OAAA,CAAS,EAAA,CACtB;AAGV,IAAM,mBAAmB,EACxB,WACA,UACA,UACA,OAAO,SACP,gBAAgB,SAAS,UACzB,OACA,aAAa,YACK;CAClB,MAAM,OAAA,GAAA,MAAA,QAA6B,KAAK;CACxC,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,UAA6B,MAAM;CACzD,MAAM,EAAE,sBAAA,GAAA,0BAAA,gBAAoC,EAC3C,sBAAsB,oBAAkB,iBAAiB,gBAAc,EACvE,CAAC;AAEF,EAAA,GAAA,4BAAA,mBAAkB;AAElB,EAAA,GAAA,MAAA,iBAAgB;EACf,MAAM,gBAAgB,UAAyB;AAC9C,SAAM,0BAA0B;GAChC,MAAM,SAAS,CAAC,GAAG,SAAS,iBAAiB,gBAAgB,CAAC,CAAC,KAAK;AACpE,OAAI,MAAM,QAAQ,YAAY,WAAW,IAAI,WAAW,cACvD,QAAO;;EAIT,MAAM,kCAAkC;AACvC,YAAS,KAAK,UAAU,IAAI,cAAc;AAC1C,YAAS,iBAAiB,WAAW,aAAa;;EAGnD,MAAM,qCAAqC;AAC1C,YAAS,KAAK,UAAU,OAAO,cAAc;AAC7C,YAAS,oBAAoB,WAAW,aAAa;;EAGtD,MAAM,cAAc;AACnB,eAAY;;AAGb,MAAI,cACH,4BAA2B;AAG5B,MAAI,CAAC,cACJ,+BAA8B;AAG/B,eAAa;AACZ,iCAA8B;;IAE7B,CAAC,UAAU,cAAc,CAAC;CAE7B,MAAM,sBAAsB,UAAsC;AACjE,MAAI,MAAM,WAAW,MAAM,cAC1B,aAAY;;AAId,QACC,iBAAA,GAAA,kBAAA,KAAC,cAAA,YAAA;EAAW,QAAA;EAAO,UAAU;YAC5B,iBAAA,GAAA,kBAAA,KAAC,OAAA;GACA,GAAI;GACJ,YAAA,GAAA,QAAA,IAAc,sBAAO,QAAQ,sBAAO,OAAO,UAAU;GACrD,eAAA;GACA,gBAAc;GACT;aAEL,iBAAA,GAAA,kBAAA,KAAC,cAAA,EAAE,KAAA;IACF,SAAQ;IACR,SAAQ;IACR,UAAU;IACV,YAAY,EAAE,UAAU,KAAM;IAE9B,MAAK;IACL,WAAW,sBAAO;IAClB,aAAa;cAEb,iBAAA,GAAA,kBAAA,KAAC,0BAAA,WAAA;KAAU,WAAA;KAAU,cAAA;eACpB,iBAAA,GAAA,kBAAA,MAAC,cAAA,EAAE,KAAA;MACF,SAAQ;MACR,SAAQ;MACR,UAAU;MAEV,MAAK;MACL,mBAAiB;MACjB,oBAAkB;MAClB,cAAA;MACA,WAAW,sBAAO;MAClB,UAAU;MACV,GAAK,QAAQ,EAAE,cAAc,OAAO,GAAG,EAAE;iBAExC,CAAC,cACD,iBAAA,GAAA,kBAAA,KAAC,sBAAA,YAAA;OACA,cAAW;OACX,MAAM,iBAAA,GAAA,kBAAA,KAAC,qBAAA,MAAA;QAAK,MAAK;QAAS,MAAK;SAAW;OAC1C,WAAW,sBAAO;OAClB,SAAS;OACT,gBAAa;QACZ,EAEH,iBAAA,GAAA,kBAAA,KAAC,MAAA,UAAA;OAAS,UAAU,iBAAA,GAAA,kBAAA,KAAC,wBAAA,UAAA,EAAA,CAAW;OAAG;QAAoB,CAAA;OAChD;MACG;KACL;IACH;GACM;;ACzJf,IAAM,gBAAgB,EACrB,WACA,UACA,SACA,gBACA,gBAAgB,SAAS,iBACzB,GAAG,WACqB;AACxB,QACC,iBAAA,GAAA,kBAAA,KAAC,OAAA;EAAI,gBAAc;EAAmB;EAAW,GAAI;YACpD,iBAAA,GAAA,kBAAA,KAAC,MAAA;GAAG,IAAI;GAAoB,WAAW;GACrC;IACG;GACA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/drawer",
3
- "version": "0.9.13",
3
+ "version": "0.9.15",
4
4
  "description": "A partial overlay that appears from the right side of the screen.",
5
5
  "repository": "launchdarkly/launchpad-ui",
6
6
  "license": "Apache-2.0",
@@ -22,23 +22,21 @@
22
22
  "@launchpad-ui/progress": "0.5.57",
23
23
  "classix": "2.2.0",
24
24
  "framer-motion": "12.23.22",
25
- "@launchpad-ui/button": "~0.15.13",
26
- "@launchpad-ui/focus-trap": "~0.5.1",
27
- "@launchpad-ui/icons": "~0.25.4",
28
- "@launchpad-ui/portal": "~0.4.2",
25
+ "@launchpad-ui/button": "~0.15.15",
26
+ "@launchpad-ui/focus-trap": "~0.5.2",
27
+ "@launchpad-ui/icons": "~0.25.6",
28
+ "@launchpad-ui/portal": "~0.4.3",
29
29
  "@launchpad-ui/tokens": "~0.15.1"
30
30
  },
31
31
  "devDependencies": {
32
- "@react-aria/interactions": "3.25.6",
33
- "@react-aria/overlays": "3.30.0",
34
- "react": "19.2.0",
35
- "react-dom": "19.2.0"
32
+ "react": "19.2.6",
33
+ "react-aria": "3.48.0",
34
+ "react-dom": "19.2.6"
36
35
  },
37
36
  "peerDependencies": {
38
- "@react-aria/interactions": "3.25.6",
39
- "@react-aria/overlays": "3.30.0",
40
- "react": "19.2.0",
41
- "react-dom": "19.2.0"
37
+ "react": "19.2.6",
38
+ "react-aria": "3.48.0",
39
+ "react-dom": "19.2.6"
42
40
  },
43
41
  "exports": {
44
42
  ".": {