@launchpad-ui/drawer 0.5.72 → 0.5.73

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 (6) hide show
  1. package/dist/index.es.js +133 -136
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +154 -157
  4. package/dist/index.js.map +1 -1
  5. package/dist/style.css +2 -1
  6. package/package.json +4 -4
package/dist/index.es.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import './style.css';
2
- import { jsx, jsxs } from "react/jsx-runtime";
3
2
  import { IconButton } from "@launchpad-ui/button";
4
3
  import { FocusTrap } from "@launchpad-ui/focus-trap";
5
4
  import { Icon } from "@launchpad-ui/icons";
@@ -9,7 +8,8 @@ import { useFocusWithin } from "@react-aria/interactions";
9
8
  import { usePreventScroll } from "@react-aria/overlays";
10
9
  import { cx } from "classix";
11
10
  import { LazyMotion, m } from "framer-motion";
12
- import { useRef, useState, useEffect, Suspense } from "react";
11
+ import { Suspense, useEffect, useRef, useState } from "react";
12
+ import { jsx, jsxs } from "react/jsx-runtime";
13
13
  const DRAWER_LABELLED_BY = "drawer-title";
14
14
  const closeButton = "sj_sSW_closeButton";
15
15
  const content = "sj_sSW_content";
@@ -20,147 +20,144 @@ const medium = "sj_sSW_medium";
20
20
  const overlay$1 = "sj_sSW_overlay";
21
21
  const small = "sj_sSW_small";
22
22
  const xLarge = "sj_sSW_xLarge";
23
- const styles = {
24
- closeButton,
25
- content,
26
- drawer,
27
- full,
28
- large,
29
- medium,
30
- overlay: overlay$1,
31
- small,
32
- xLarge
23
+ var Drawer_module_default = {
24
+ closeButton,
25
+ content,
26
+ drawer,
27
+ full,
28
+ large,
29
+ medium,
30
+ overlay: overlay$1,
31
+ small,
32
+ xLarge
33
33
  };
34
34
  const overlay = {
35
- visible: { opacity: 1, transition: { duration: 0.15 } },
36
- hidden: { opacity: 0 }
35
+ visible: {
36
+ opacity: 1,
37
+ transition: { duration: .15 }
38
+ },
39
+ hidden: { opacity: 0 }
37
40
  };
38
41
  const slideRight = {
39
- hidden: { opacity: 0, x: "25%" },
40
- visible: {
41
- opacity: 1,
42
- x: "0%",
43
- transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
44
- }
42
+ hidden: {
43
+ opacity: 0,
44
+ x: "25%"
45
+ },
46
+ visible: {
47
+ opacity: 1,
48
+ x: "0%",
49
+ transition: {
50
+ type: "spring",
51
+ delay: .15,
52
+ duration: .2,
53
+ bounce: 0
54
+ }
55
+ }
45
56
  };
46
57
  const loadFeatures = () => import(
47
- /* webpackChunkName: "lp-drawer-framer-features" */
48
- /* webpackExports: "domAnimation" */
49
- "framer-motion"
58
+ /* webpackChunkName: "lp-drawer-framer-features" */
59
+ /* webpackExports: "domAnimation" */
60
+ "framer-motion"
50
61
  ).then((res) => res.domAnimation);
62
+ /**
63
+ * @deprecated use `Modal` from `@launchpad-ui/components` instead
64
+ *
65
+ * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer
66
+ */
51
67
  const Drawer = (props) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DrawerContainer, { ...props }) });
52
- const DrawerContainer = ({
53
- className,
54
- children,
55
- onCancel,
56
- size = "small",
57
- "data-test-id": testId = "drawer",
58
- theme,
59
- hideCancel = false
60
- }) => {
61
- const ref = useRef(null);
62
- const [isFocusWithin, setIsFocusWithin] = useState(false);
63
- const { focusWithinProps } = useFocusWithin({
64
- onFocusWithinChange: (isFocusWithin2) => setIsFocusWithin(isFocusWithin2)
65
- });
66
- usePreventScroll();
67
- useEffect(() => {
68
- const handleEscape = (event) => {
69
- event.stopImmediatePropagation();
70
- const latest = [...document.querySelectorAll("[data-drawer]")].pop();
71
- if (event.key === "Escape" && latest === ref.current && isFocusWithin) {
72
- close();
73
- }
74
- };
75
- const addOverlayAndEventHandler = () => {
76
- document.body.classList.add("has-overlay");
77
- document.addEventListener("keydown", handleEscape);
78
- };
79
- const removeOverlayAndEventHandler = () => {
80
- document.body.classList.remove("has-overlay");
81
- document.removeEventListener("keydown", handleEscape);
82
- };
83
- const close = () => {
84
- onCancel == null ? void 0 : onCancel();
85
- };
86
- if (isFocusWithin) {
87
- addOverlayAndEventHandler();
88
- }
89
- if (!isFocusWithin) {
90
- removeOverlayAndEventHandler();
91
- }
92
- return () => {
93
- removeOverlayAndEventHandler();
94
- };
95
- }, [onCancel, isFocusWithin]);
96
- const handleOverlayClick = (event) => {
97
- if (event.target === event.currentTarget) {
98
- onCancel == null ? void 0 : onCancel();
99
- }
100
- };
101
- return /* @__PURE__ */ jsx(LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsx(
102
- "div",
103
- {
104
- ...focusWithinProps,
105
- className: cx(styles.drawer, styles[size], className),
106
- "data-drawer": true,
107
- "data-test-id": testId,
108
- ref,
109
- children: /* @__PURE__ */ jsx(
110
- m.div,
111
- {
112
- initial: "hidden",
113
- animate: "visible",
114
- variants: overlay,
115
- transition: { duration: 0.15 },
116
- role: "presentation",
117
- className: styles.overlay,
118
- onMouseDown: handleOverlayClick,
119
- children: /* @__PURE__ */ jsx(FocusTrap, { autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxs(
120
- m.div,
121
- {
122
- initial: "hidden",
123
- animate: "visible",
124
- variants: slideRight,
125
- role: "dialog",
126
- "aria-labelledby": DRAWER_LABELLED_BY,
127
- "aria-describedby": DRAWER_LABELLED_BY,
128
- "aria-modal": true,
129
- className: styles.content,
130
- tabIndex: -1,
131
- ...theme ? { "data-theme": theme } : {},
132
- children: [
133
- !hideCancel && /* @__PURE__ */ jsx(
134
- IconButton,
135
- {
136
- "aria-label": "close",
137
- icon: /* @__PURE__ */ jsx(Icon, { name: "cancel", size: "medium" }),
138
- className: styles.closeButton,
139
- onClick: onCancel,
140
- "data-test-id": "drawer-close-button"
141
- }
142
- ),
143
- /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Progress, {}), children })
144
- ]
145
- }
146
- ) })
147
- }
148
- )
149
- }
150
- ) });
151
- };
152
- const DrawerHeader = ({
153
- className,
154
- children,
155
- titleID,
156
- titleClassName,
157
- "data-test-id": testId = "drawer-header",
158
- ...rest
159
- }) => {
160
- return /* @__PURE__ */ jsx("div", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
68
+ const DrawerContainer = ({ className, children, onCancel, size = "small", "data-test-id": testId = "drawer", theme, hideCancel = false }) => {
69
+ const ref = useRef(null);
70
+ const [isFocusWithin, setIsFocusWithin] = useState(false);
71
+ const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocusWithin$1) => setIsFocusWithin(isFocusWithin$1) });
72
+ usePreventScroll();
73
+ useEffect(() => {
74
+ const handleEscape = (event) => {
75
+ event.stopImmediatePropagation();
76
+ const latest = [...document.querySelectorAll("[data-drawer]")].pop();
77
+ if (event.key === "Escape" && latest === ref.current && isFocusWithin) close();
78
+ };
79
+ const addOverlayAndEventHandler = () => {
80
+ document.body.classList.add("has-overlay");
81
+ document.addEventListener("keydown", handleEscape);
82
+ };
83
+ const removeOverlayAndEventHandler = () => {
84
+ document.body.classList.remove("has-overlay");
85
+ document.removeEventListener("keydown", handleEscape);
86
+ };
87
+ const close = () => {
88
+ onCancel?.();
89
+ };
90
+ if (isFocusWithin) addOverlayAndEventHandler();
91
+ if (!isFocusWithin) removeOverlayAndEventHandler();
92
+ return () => {
93
+ removeOverlayAndEventHandler();
94
+ };
95
+ }, [onCancel, isFocusWithin]);
96
+ const handleOverlayClick = (event) => {
97
+ if (event.target === event.currentTarget) onCancel?.();
98
+ };
99
+ return /* @__PURE__ */ jsx(LazyMotion, {
100
+ strict: true,
101
+ features: loadFeatures,
102
+ children: /* @__PURE__ */ jsx("div", {
103
+ ...focusWithinProps,
104
+ className: cx(Drawer_module_default.drawer, Drawer_module_default[size], className),
105
+ "data-drawer": true,
106
+ "data-test-id": testId,
107
+ ref,
108
+ children: /* @__PURE__ */ jsx(m.div, {
109
+ initial: "hidden",
110
+ animate: "visible",
111
+ variants: overlay,
112
+ transition: { duration: .15 },
113
+ role: "presentation",
114
+ className: Drawer_module_default.overlay,
115
+ onMouseDown: handleOverlayClick,
116
+ children: /* @__PURE__ */ jsx(FocusTrap, {
117
+ autoFocus: true,
118
+ restoreFocus: true,
119
+ children: /* @__PURE__ */ jsxs(m.div, {
120
+ initial: "hidden",
121
+ animate: "visible",
122
+ variants: slideRight,
123
+ role: "dialog",
124
+ "aria-labelledby": DRAWER_LABELLED_BY,
125
+ "aria-describedby": DRAWER_LABELLED_BY,
126
+ "aria-modal": true,
127
+ className: Drawer_module_default.content,
128
+ tabIndex: -1,
129
+ ...theme ? { "data-theme": theme } : {},
130
+ children: [!hideCancel && /* @__PURE__ */ jsx(IconButton, {
131
+ "aria-label": "close",
132
+ icon: /* @__PURE__ */ jsx(Icon, {
133
+ name: "cancel",
134
+ size: "medium"
135
+ }),
136
+ className: Drawer_module_default.closeButton,
137
+ onClick: onCancel,
138
+ "data-test-id": "drawer-close-button"
139
+ }), /* @__PURE__ */ jsx(Suspense, {
140
+ fallback: /* @__PURE__ */ jsx(Progress, {}),
141
+ children
142
+ })]
143
+ })
144
+ })
145
+ })
146
+ })
147
+ });
161
148
  };
162
- export {
163
- Drawer,
164
- DrawerHeader
149
+ const DrawerHeader = ({ className, children, titleID, titleClassName, "data-test-id": testId = "drawer-header",...rest }) => {
150
+ return /* @__PURE__ */ jsx("div", {
151
+ "data-test-id": testId,
152
+ className,
153
+ ...rest,
154
+ children: /* @__PURE__ */ jsx("h2", {
155
+ id: DRAWER_LABELLED_BY,
156
+ className: titleClassName,
157
+ children
158
+ })
159
+ });
165
160
  };
166
- //# sourceMappingURL=index.es.js.map
161
+ export { Drawer, DrawerHeader };
162
+
163
+ //# sourceMappingURL=index.es.js.map
package/dist/index.es.js.map CHANGED
@@ -1 +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 { 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"],"names":["isFocusWithin"],"mappings":"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"}
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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"}
package/dist/index.js CHANGED
@@ -7,33 +7,30 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
7
7
  var __getProtoOf = Object.getPrototypeOf;
8
8
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
9
  var __copyProps = (to, from, except, desc) => {
10
- if (from && typeof from === "object" || typeof from === "function") {
11
- for (let key of __getOwnPropNames(from))
12
- if (!__hasOwnProp.call(to, key) && key !== except)
13
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
- }
15
- return to;
10
+ if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
11
+ key = keys[i];
12
+ if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
13
+ get: ((k) => from[k]).bind(null, key),
14
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
15
+ });
16
+ }
17
+ return to;
16
18
  };
17
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
18
- // If the importer is in node compatibility mode or this is not an ESM
19
- // file that has been converted to a CommonJS file using a Babel-
20
- // compatible transform (i.e. "__esModule" has not been set), then set
21
- // "default" to the CommonJS "module.exports" for node compatibility.
22
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
23
- mod
24
- ));
25
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
26
- const jsxRuntime = require("react/jsx-runtime");
27
- const button = require("@launchpad-ui/button");
28
- const focusTrap = require("@launchpad-ui/focus-trap");
29
- const icons = require("@launchpad-ui/icons");
30
- const portal = require("@launchpad-ui/portal");
31
- const progress = require("@launchpad-ui/progress");
32
- const interactions = require("@react-aria/interactions");
33
- const overlays = require("@react-aria/overlays");
34
- const classix = require("classix");
35
- const framerMotion = require("framer-motion");
36
- const react = require("react");
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
20
+ value: mod,
21
+ enumerable: true
22
+ }) : target, mod));
23
+ const __launchpad_ui_button = __toESM(require("@launchpad-ui/button"));
24
+ const __launchpad_ui_focus_trap = __toESM(require("@launchpad-ui/focus-trap"));
25
+ const __launchpad_ui_icons = __toESM(require("@launchpad-ui/icons"));
26
+ const __launchpad_ui_portal = __toESM(require("@launchpad-ui/portal"));
27
+ const __launchpad_ui_progress = __toESM(require("@launchpad-ui/progress"));
28
+ const __react_aria_interactions = __toESM(require("@react-aria/interactions"));
29
+ const __react_aria_overlays = __toESM(require("@react-aria/overlays"));
30
+ const classix = __toESM(require("classix"));
31
+ const framer_motion = __toESM(require("framer-motion"));
32
+ const react = __toESM(require("react"));
33
+ const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
37
34
  const DRAWER_LABELLED_BY = "drawer-title";
38
35
  const closeButton = "sj_sSW_closeButton";
39
36
  const content = "sj_sSW_content";
@@ -44,145 +41,145 @@ const medium = "sj_sSW_medium";
44
41
  const overlay$1 = "sj_sSW_overlay";
45
42
  const small = "sj_sSW_small";
46
43
  const xLarge = "sj_sSW_xLarge";
47
- const styles = {
48
- closeButton,
49
- content,
50
- drawer,
51
- full,
52
- large,
53
- medium,
54
- overlay: overlay$1,
55
- small,
56
- xLarge
44
+ var Drawer_module_default = {
45
+ closeButton,
46
+ content,
47
+ drawer,
48
+ full,
49
+ large,
50
+ medium,
51
+ overlay: overlay$1,
52
+ small,
53
+ xLarge
57
54
  };
58
55
  const overlay = {
59
- visible: { opacity: 1, transition: { duration: 0.15 } },
60
- hidden: { opacity: 0 }
56
+ visible: {
57
+ opacity: 1,
58
+ transition: { duration: .15 }
59
+ },
60
+ hidden: { opacity: 0 }
61
61
  };
62
62
  const slideRight = {
63
- hidden: { opacity: 0, x: "25%" },
64
- visible: {
65
- opacity: 1,
66
- x: "0%",
67
- transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
68
- }
63
+ hidden: {
64
+ opacity: 0,
65
+ x: "25%"
66
+ },
67
+ visible: {
68
+ opacity: 1,
69
+ x: "0%",
70
+ transition: {
71
+ type: "spring",
72
+ delay: .15,
73
+ duration: .2,
74
+ bounce: 0
75
+ }
76
+ }
69
77
  };
70
78
  const loadFeatures = () => import(
71
- /* webpackChunkName: "lp-drawer-framer-features" */
72
- /* webpackExports: "domAnimation" */
73
- "framer-motion"
79
+ /* webpackChunkName: "lp-drawer-framer-features" */
80
+ /* webpackExports: "domAnimation" */
81
+ "framer-motion"
74
82
  ).then((res) => res.domAnimation);
75
- const Drawer = (props) => /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContainer, { ...props }) });
76
- const DrawerContainer = ({
77
- className,
78
- children,
79
- onCancel,
80
- size = "small",
81
- "data-test-id": testId = "drawer",
82
- theme,
83
- hideCancel = false
84
- }) => {
85
- const ref = react.useRef(null);
86
- const [isFocusWithin, setIsFocusWithin] = react.useState(false);
87
- const { focusWithinProps } = interactions.useFocusWithin({
88
- onFocusWithinChange: (isFocusWithin2) => setIsFocusWithin(isFocusWithin2)
89
- });
90
- overlays.usePreventScroll();
91
- react.useEffect(() => {
92
- const handleEscape = (event) => {
93
- event.stopImmediatePropagation();
94
- const latest = [...document.querySelectorAll("[data-drawer]")].pop();
95
- if (event.key === "Escape" && latest === ref.current && isFocusWithin) {
96
- close();
97
- }
98
- };
99
- const addOverlayAndEventHandler = () => {
100
- document.body.classList.add("has-overlay");
101
- document.addEventListener("keydown", handleEscape);
102
- };
103
- const removeOverlayAndEventHandler = () => {
104
- document.body.classList.remove("has-overlay");
105
- document.removeEventListener("keydown", handleEscape);
106
- };
107
- const close = () => {
108
- onCancel == null ? void 0 : onCancel();
109
- };
110
- if (isFocusWithin) {
111
- addOverlayAndEventHandler();
112
- }
113
- if (!isFocusWithin) {
114
- removeOverlayAndEventHandler();
115
- }
116
- return () => {
117
- removeOverlayAndEventHandler();
118
- };
119
- }, [onCancel, isFocusWithin]);
120
- const handleOverlayClick = (event) => {
121
- if (event.target === event.currentTarget) {
122
- onCancel == null ? void 0 : onCancel();
123
- }
124
- };
125
- return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsxRuntime.jsx(
126
- "div",
127
- {
128
- ...focusWithinProps,
129
- className: classix.cx(styles.drawer, styles[size], className),
130
- "data-drawer": true,
131
- "data-test-id": testId,
132
- ref,
133
- children: /* @__PURE__ */ jsxRuntime.jsx(
134
- framerMotion.m.div,
135
- {
136
- initial: "hidden",
137
- animate: "visible",
138
- variants: overlay,
139
- transition: { duration: 0.15 },
140
- role: "presentation",
141
- className: styles.overlay,
142
- onMouseDown: handleOverlayClick,
143
- children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, { autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
144
- framerMotion.m.div,
145
- {
146
- initial: "hidden",
147
- animate: "visible",
148
- variants: slideRight,
149
- role: "dialog",
150
- "aria-labelledby": DRAWER_LABELLED_BY,
151
- "aria-describedby": DRAWER_LABELLED_BY,
152
- "aria-modal": true,
153
- className: styles.content,
154
- tabIndex: -1,
155
- ...theme ? { "data-theme": theme } : {},
156
- children: [
157
- !hideCancel && /* @__PURE__ */ jsxRuntime.jsx(
158
- button.IconButton,
159
- {
160
- "aria-label": "close",
161
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "cancel", size: "medium" }),
162
- className: styles.closeButton,
163
- onClick: onCancel,
164
- "data-test-id": "drawer-close-button"
165
- }
166
- ),
167
- /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(progress.Progress, {}), children })
168
- ]
169
- }
170
- ) })
171
- }
172
- )
173
- }
174
- ) });
83
+ /**
84
+ * @deprecated use `Modal` from `@launchpad-ui/components` instead
85
+ *
86
+ * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer
87
+ */
88
+ const Drawer = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContainer, { ...props }) });
89
+ const DrawerContainer = ({ className, children, onCancel, size = "small", "data-test-id": testId = "drawer", theme, hideCancel = false }) => {
90
+ const ref = (0, react.useRef)(null);
91
+ const [isFocusWithin, setIsFocusWithin] = (0, react.useState)(false);
92
+ const { focusWithinProps } = (0, __react_aria_interactions.useFocusWithin)({ onFocusWithinChange: (isFocusWithin$1) => setIsFocusWithin(isFocusWithin$1) });
93
+ (0, __react_aria_overlays.usePreventScroll)();
94
+ (0, react.useEffect)(() => {
95
+ const handleEscape = (event) => {
96
+ event.stopImmediatePropagation();
97
+ const latest = [...document.querySelectorAll("[data-drawer]")].pop();
98
+ if (event.key === "Escape" && latest === ref.current && isFocusWithin) close();
99
+ };
100
+ const addOverlayAndEventHandler = () => {
101
+ document.body.classList.add("has-overlay");
102
+ document.addEventListener("keydown", handleEscape);
103
+ };
104
+ const removeOverlayAndEventHandler = () => {
105
+ document.body.classList.remove("has-overlay");
106
+ document.removeEventListener("keydown", handleEscape);
107
+ };
108
+ const close = () => {
109
+ onCancel?.();
110
+ };
111
+ if (isFocusWithin) addOverlayAndEventHandler();
112
+ if (!isFocusWithin) removeOverlayAndEventHandler();
113
+ return () => {
114
+ removeOverlayAndEventHandler();
115
+ };
116
+ }, [onCancel, isFocusWithin]);
117
+ const handleOverlayClick = (event) => {
118
+ if (event.target === event.currentTarget) onCancel?.();
119
+ };
120
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.LazyMotion, {
121
+ strict: true,
122
+ features: loadFeatures,
123
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
124
+ ...focusWithinProps,
125
+ className: (0, classix.cx)(Drawer_module_default.drawer, Drawer_module_default[size], className),
126
+ "data-drawer": true,
127
+ "data-test-id": testId,
128
+ ref,
129
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.m.div, {
130
+ initial: "hidden",
131
+ animate: "visible",
132
+ variants: overlay,
133
+ transition: { duration: .15 },
134
+ role: "presentation",
135
+ className: Drawer_module_default.overlay,
136
+ onMouseDown: handleOverlayClick,
137
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_focus_trap.FocusTrap, {
138
+ autoFocus: true,
139
+ restoreFocus: true,
140
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.m.div, {
141
+ initial: "hidden",
142
+ animate: "visible",
143
+ variants: slideRight,
144
+ role: "dialog",
145
+ "aria-labelledby": DRAWER_LABELLED_BY,
146
+ "aria-describedby": DRAWER_LABELLED_BY,
147
+ "aria-modal": true,
148
+ className: Drawer_module_default.content,
149
+ tabIndex: -1,
150
+ ...theme ? { "data-theme": theme } : {},
151
+ children: [!hideCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_button.IconButton, {
152
+ "aria-label": "close",
153
+ icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
154
+ name: "cancel",
155
+ size: "medium"
156
+ }),
157
+ className: Drawer_module_default.closeButton,
158
+ onClick: onCancel,
159
+ "data-test-id": "drawer-close-button"
160
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
161
+ fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_progress.Progress, {}),
162
+ children
163
+ })]
164
+ })
165
+ })
166
+ })
167
+ })
168
+ });
175
169
  };
176
- const DrawerHeader = ({
177
- className,
178
- children,
179
- titleID,
180
- titleClassName,
181
- "data-test-id": testId = "drawer-header",
182
- ...rest
183
- }) => {
184
- return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
170
+ const DrawerHeader = ({ className, children, titleID, titleClassName, "data-test-id": testId = "drawer-header",...rest }) => {
171
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
172
+ "data-test-id": testId,
173
+ className,
174
+ ...rest,
175
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
176
+ id: DRAWER_LABELLED_BY,
177
+ className: titleClassName,
178
+ children
179
+ })
180
+ });
185
181
  };
186
182
  exports.Drawer = Drawer;
187
183
  exports.DrawerHeader = DrawerHeader;
188
- //# sourceMappingURL=index.js.map
184
+
185
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +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 { 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"],"names":["jsx","Portal","useRef","useState","useFocusWithin","isFocusWithin","usePreventScroll","useEffect","LazyMotion","cx","m","FocusTrap","jsxs","IconButton","Icon","Suspense","Progress"],"mappings":"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"}
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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"}
package/dist/style.css CHANGED
@@ -1 +1,2 @@
1
- :root,[data-theme=default]{--lp-component-drawer-color-bg-overlay:#28282880}[data-theme=dark]{--lp-component-drawer-color-bg-overlay:#191919bf}.sj_sSW_drawer{--page-gutter-width:.625rem;z-index:var(--lp-z-index-400);position:fixed;top:0;bottom:0;left:0;right:0;transform:translateZ(0)}@media screen and (min-width:46.25rem){.sj_sSW_drawer{--page-gutter-width:2.5rem}}.has-overlay{overflow:hidden}.sj_sSW_overlay{background-color:var(--lp-component-drawer-color-bg-overlay);position:fixed;top:0;bottom:0;left:0;right:0}.sj_sSW_content{background-color:var(--lp-color-bg-ui-primary);width:100vw;max-width:100vw;color:var(--lp-color-text-ui-secondary);box-shadow:-1px 0 4px var(--lp-color-shadow-ui-primary);position:absolute;top:0;bottom:0;right:0;overflow:auto}@media screen and (min-width:46.25rem){.sj_sSW_small .sj_sSW_content{width:28.125rem}.sj_sSW_medium .sj_sSW_content{width:40.625rem}.sj_sSW_large .sj_sSW_content{width:50rem}.sj_sSW_xLarge .sj_sSW_content{width:75rem}.sj_sSW_full .sj_sSW_content{width:100%;max-width:unset}}.sj_sSW_content section{padding:2rem var(--page-gutter-width)}.sj_sSW_content section+section{border-top:1px dotted var(--lp-color-gray-100)}.sj_sSW_closeButton{position:absolute;top:.625rem;right:.625rem}
1
+ :root,[data-theme=default]{--lp-component-drawer-color-bg-overlay:#28282880}[data-theme=dark]{--lp-component-drawer-color-bg-overlay:#191919bf}.sj_sSW_drawer{--page-gutter-width:.625rem;z-index:var(--lp-z-index-400);position:fixed;inset:0;transform:translateZ(0)}@media screen and (min-width:46.25rem){.sj_sSW_drawer{--page-gutter-width:2.5rem}}.has-overlay{overflow:hidden}.sj_sSW_overlay{background-color:var(--lp-component-drawer-color-bg-overlay);position:fixed;inset:0}.sj_sSW_content{background-color:var(--lp-color-bg-ui-primary);width:100vw;max-width:100vw;color:var(--lp-color-text-ui-secondary);box-shadow:-1px 0 4px var(--lp-color-shadow-ui-primary);position:absolute;top:0;bottom:0;right:0;overflow:auto}@media screen and (min-width:46.25rem){.sj_sSW_small .sj_sSW_content{width:28.125rem}.sj_sSW_medium .sj_sSW_content{width:40.625rem}.sj_sSW_large .sj_sSW_content{width:50rem}.sj_sSW_xLarge .sj_sSW_content{width:75rem}.sj_sSW_full .sj_sSW_content{width:100%;max-width:unset}}.sj_sSW_content section{padding:2rem var(--page-gutter-width)}.sj_sSW_content section+section{border-top:1px dotted var(--lp-color-gray-100)}.sj_sSW_closeButton{position:absolute;top:.625rem;right:.625rem}
2
+ /*$vite$:1*/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/drawer",
3
- "version": "0.5.72",
3
+ "version": "0.5.73",
4
4
  "status": "alpha",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -35,10 +35,10 @@
35
35
  "@react-aria/interactions": "3.25.0",
36
36
  "@react-aria/overlays": "3.27.0",
37
37
  "classix": "2.2.0",
38
- "framer-motion": "12.6.5",
39
- "@launchpad-ui/button": "~0.12.50",
38
+ "framer-motion": "12.9.4",
39
+ "@launchpad-ui/button": "~0.12.51",
40
40
  "@launchpad-ui/focus-trap": "~0.1.29",
41
- "@launchpad-ui/icons": "~0.21.9",
41
+ "@launchpad-ui/icons": "~0.21.10",
42
42
  "@launchpad-ui/portal": "~0.1.5",
43
43
  "@launchpad-ui/tokens": "~0.12.3"
44
44
  },