@launchpad-ui/drawer 0.9.16 → 0.9.18
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.
- package/dist/Drawer.d.ts.map +1 -1
- package/dist/index.es.js +153 -136
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +168 -140
- package/dist/index.js.map +1 -1
- package/dist/style.css +0 -1
- package/package.json +12 -12
package/dist/Drawer.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAuCnD,KAAK,WAAW,GAAG;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,4CAIjC,CAAC;AA8GF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}
|
package/dist/index.es.js
CHANGED
|
@@ -1,149 +1,166 @@
|
|
|
1
1
|
import './style.css';
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useRef, useState, useEffect, Suspense } from "react";
|
|
4
|
+
import { useFocusWithin } from "react-aria/useFocusWithin";
|
|
5
|
+
import { usePreventScroll } from "react-aria/usePreventScroll";
|
|
6
|
+
import { cx } from "classix";
|
|
7
|
+
import { LazyMotion, m } from "framer-motion";
|
|
2
8
|
import { IconButton } from "@launchpad-ui/button";
|
|
3
9
|
import { FocusTrap } from "@launchpad-ui/focus-trap";
|
|
4
10
|
import { Icon } from "@launchpad-ui/icons";
|
|
5
11
|
import { Portal } from "@launchpad-ui/portal";
|
|
6
12
|
import { Progress } from "@launchpad-ui/progress";
|
|
7
|
-
import { cx } from "classix";
|
|
8
|
-
import { LazyMotion, m } from "framer-motion";
|
|
9
|
-
import { Suspense, useEffect, useRef, useState } from "react";
|
|
10
|
-
import { useFocusWithin } from "react-aria/useFocusWithin";
|
|
11
|
-
import { usePreventScroll } from "react-aria/usePreventScroll";
|
|
12
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
13
|
const DRAWER_LABELLED_BY = "drawer-title";
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
+
const styles = {
|
|
24
|
+
closeButton,
|
|
25
|
+
content,
|
|
26
|
+
drawer,
|
|
27
|
+
full,
|
|
28
|
+
large,
|
|
29
|
+
medium,
|
|
30
|
+
overlay: overlay$1,
|
|
31
|
+
small,
|
|
32
|
+
xLarge
|
|
24
33
|
};
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
transition: { duration: .15 }
|
|
29
|
-
},
|
|
30
|
-
hidden: { opacity: 0 }
|
|
34
|
+
const overlay = {
|
|
35
|
+
visible: { opacity: 1, transition: { duration: 0.15 } },
|
|
36
|
+
hidden: { opacity: 0 }
|
|
31
37
|
};
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
x: "0%",
|
|
40
|
-
transition: {
|
|
41
|
-
type: "spring",
|
|
42
|
-
delay: .15,
|
|
43
|
-
duration: .2,
|
|
44
|
-
bounce: 0
|
|
45
|
-
}
|
|
46
|
-
}
|
|
38
|
+
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
|
+
}
|
|
47
45
|
};
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
46
|
+
const loadFeatures = () => import(
|
|
47
|
+
/* webpackChunkName: "lp-drawer-framer-features" */
|
|
48
|
+
/* webpackExports: "domAnimation" */
|
|
49
|
+
"framer-motion"
|
|
52
50
|
).then((res) => res.domAnimation);
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
51
|
+
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: (focusWithin) => setIsFocusWithin(focusWithin)
|
|
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?.();
|
|
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?.();
|
|
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 }) });
|
|
134
161
|
};
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
className,
|
|
139
|
-
...rest,
|
|
140
|
-
children: /* @__PURE__ */ jsx("h2", {
|
|
141
|
-
id: DRAWER_LABELLED_BY,
|
|
142
|
-
className: titleClassName,
|
|
143
|
-
children
|
|
144
|
-
})
|
|
145
|
-
});
|
|
162
|
+
export {
|
|
163
|
+
Drawer,
|
|
164
|
+
DrawerHeader
|
|
146
165
|
};
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
//# sourceMappingURL=index.es.js.map
|
|
166
|
+
//# sourceMappingURL=index.es.js.map
|
package/dist/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","
|
|
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 { MouseEvent, ReactNode } from 'react';\nimport { Suspense, useEffect, useRef, useState } from 'react';\nimport { useFocusWithin } from 'react-aria/useFocusWithin';\nimport { usePreventScroll } from 'react-aria/usePreventScroll';\nimport { cx } from 'classix';\nimport type { Variants } from 'framer-motion';\nimport { LazyMotion, m } from 'framer-motion';\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';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\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: (focusWithin) => setIsFocusWithin(focusWithin),\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\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\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":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,39 @@
|
|
|
1
1
|
require('./style.css');
|
|
2
|
+
"use strict";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
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;
|
|
16
|
+
};
|
|
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
|
+
));
|
|
2
25
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
26
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
27
|
+
const react = require("react");
|
|
28
|
+
const useFocusWithin = require("react-aria/useFocusWithin");
|
|
29
|
+
const usePreventScroll = require("react-aria/usePreventScroll");
|
|
30
|
+
const classix = require("classix");
|
|
31
|
+
const framerMotion = require("framer-motion");
|
|
32
|
+
const button = require("@launchpad-ui/button");
|
|
33
|
+
const focusTrap = require("@launchpad-ui/focus-trap");
|
|
34
|
+
const icons = require("@launchpad-ui/icons");
|
|
35
|
+
const portal = require("@launchpad-ui/portal");
|
|
36
|
+
const progress = require("@launchpad-ui/progress");
|
|
14
37
|
const DRAWER_LABELLED_BY = "drawer-title";
|
|
15
38
|
const closeButton = "sj_sSW_closeButton";
|
|
16
39
|
const content = "sj_sSW_content";
|
|
@@ -21,140 +44,145 @@ const medium = "sj_sSW_medium";
|
|
|
21
44
|
const overlay$1 = "sj_sSW_overlay";
|
|
22
45
|
const small = "sj_sSW_small";
|
|
23
46
|
const xLarge = "sj_sSW_xLarge";
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
47
|
+
const styles = {
|
|
48
|
+
closeButton,
|
|
49
|
+
content,
|
|
50
|
+
drawer,
|
|
51
|
+
full,
|
|
52
|
+
large,
|
|
53
|
+
medium,
|
|
54
|
+
overlay: overlay$1,
|
|
55
|
+
small,
|
|
56
|
+
xLarge
|
|
34
57
|
};
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
transition: { duration: .15 }
|
|
39
|
-
},
|
|
40
|
-
hidden: { opacity: 0 }
|
|
58
|
+
const overlay = {
|
|
59
|
+
visible: { opacity: 1, transition: { duration: 0.15 } },
|
|
60
|
+
hidden: { opacity: 0 }
|
|
41
61
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
x: "0%",
|
|
50
|
-
transition: {
|
|
51
|
-
type: "spring",
|
|
52
|
-
delay: .15,
|
|
53
|
-
duration: .2,
|
|
54
|
-
bounce: 0
|
|
55
|
-
}
|
|
56
|
-
}
|
|
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
|
+
}
|
|
57
69
|
};
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
70
|
+
const loadFeatures = () => import(
|
|
71
|
+
/* webpackChunkName: "lp-drawer-framer-features" */
|
|
72
|
+
/* webpackExports: "domAnimation" */
|
|
73
|
+
"framer-motion"
|
|
62
74
|
).then((res) => res.domAnimation);
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
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 } = useFocusWithin.useFocusWithin({
|
|
88
|
+
onFocusWithinChange: (focusWithin) => setIsFocusWithin(focusWithin)
|
|
89
|
+
});
|
|
90
|
+
usePreventScroll.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?.();
|
|
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?.();
|
|
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
|
+
) });
|
|
144
175
|
};
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
})
|
|
155
|
-
});
|
|
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 }) });
|
|
156
185
|
};
|
|
157
186
|
exports.Drawer = Drawer;
|
|
158
187
|
exports.DrawerHeader = DrawerHeader;
|
|
159
|
-
|
|
160
|
-
//# sourceMappingURL=index.js.map
|
|
188
|
+
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":"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"}
|
|
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 { MouseEvent, ReactNode } from 'react';\nimport { Suspense, useEffect, useRef, useState } from 'react';\nimport { useFocusWithin } from 'react-aria/useFocusWithin';\nimport { usePreventScroll } from 'react-aria/usePreventScroll';\nimport { cx } from 'classix';\nimport type { Variants } from 'framer-motion';\nimport { LazyMotion, m } from 'framer-motion';\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';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\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: (focusWithin) => setIsFocusWithin(focusWithin),\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\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\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","usePreventScroll","useEffect","LazyMotion","cx","m","FocusTrap","jsxs","IconButton","Icon","Suspense","Progress"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;ACkBlC,MAAM,UAAoB;AAAA,EACzB,SAAS,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,OAAK;AAAA,EACpD,QAAQ,EAAE,SAAS,EAAA;AACpB;AAEA,MAAM,aAAuB;AAAA,EAC5B,QAAQ,EAAE,SAAS,GAAG,GAAG,MAAA;AAAA,EACzB,SAAS;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,IACH,YAAY,EAAE,MAAM,UAAU,OAAO,MAAM,UAAU,KAAK,QAAQ,EAAA;AAAA,EAAE;AAEtE;AAEA,MAAM,eAAe,MACpB;AAAA;AAAA;AAAA,EAGC;AACD,EAAE,KAAK,CAAC,QAAQ,IAAI,YAAY;AAiBjC,MAAM,SAAS,CAAC,UACfA,2BAAAA,IAACC,iBACA,UAAAD,2BAAAA,IAAC,iBAAA,EAAiB,GAAG,MAAA,CAAO,EAAA,CAC7B;AAGD,MAAM,kBAAkB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,gBAAgB,SAAS;AAAA,EACzB;AAAA,EACA,aAAa;AACd,MAAmB;AAClB,QAAM,MAAME,MAAAA,OAAuB,IAAI;AACvC,QAAM,CAAC,eAAe,gBAAgB,IAAIC,MAAAA,SAAS,KAAK;AACxD,QAAM,EAAE,iBAAA,IAAqBC,8BAAe;AAAA,IAC3C,qBAAqB,CAAC,gBAAgB,iBAAiB,WAAW;AAAA,EAAA,CAClE;AAEDC,oCAAA;AAEAC,QAAAA,UAAU,MAAM;AACf,UAAM,eAAe,CAAC,UAAyB;AAC9C,YAAM,yBAAA;AACN,YAAM,SAAS,CAAC,GAAG,SAAS,iBAAiB,eAAe,CAAC,EAAE,IAAA;AAC/D,UAAI,MAAM,QAAQ,YAAY,WAAW,IAAI,WAAW,eAAe;AACtE,cAAA;AAAA,MACD;AAAA,IACD;AAEA,UAAM,4BAA4B,MAAM;AACvC,eAAS,KAAK,UAAU,IAAI,aAAa;AACzC,eAAS,iBAAiB,WAAW,YAAY;AAAA,IAClD;AAEA,UAAM,+BAA+B,MAAM;AAC1C,eAAS,KAAK,UAAU,OAAO,aAAa;AAC5C,eAAS,oBAAoB,WAAW,YAAY;AAAA,IACrD;AAEA,UAAM,QAAQ,MAAM;AACnB,iBAAA;AAAA,IACD;AAEA,QAAI,eAAe;AAClB,gCAAA;AAAA,IACD;AAEA,QAAI,CAAC,eAAe;AACnB,mCAAA;AAAA,IACD;AAEA,WAAO,MAAM;AACZ,mCAAA;AAAA,IACD;AAAA,EACD,GAAG,CAAC,UAAU,aAAa,CAAC;AAE5B,QAAM,qBAAqB,CAAC,UAAsC;AACjE,QAAI,MAAM,WAAW,MAAM,eAAe;AACzC,iBAAA;AAAA,IACD;AAAA,EACD;AAEA,SACCN,2BAAAA,IAACO,aAAAA,YAAA,EAAW,QAAM,MAAC,UAAU,cAC5B,UAAAP,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAWQ,QAAAA,GAAG,OAAO,QAAQ,OAAO,IAAI,GAAG,SAAS;AAAA,MACpD,eAAW;AAAA,MACX,gBAAc;AAAA,MACd;AAAA,MAEA,UAAAR,2BAAAA;AAAAA,QAACS,aAAAA,EAAE;AAAA,QAAF;AAAA,UACA,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,UAAU;AAAA,UACV,YAAY,EAAE,UAAU,KAAA;AAAA,UACxB,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,aAAa;AAAA,UAEb,UAAAT,2BAAAA,IAACU,UAAAA,WAAA,EAAU,WAAS,MAAC,cAAY,MAChC,UAAAC,2BAAAA;AAAAA,YAACF,aAAAA,EAAE;AAAA,YAAF;AAAA,cACA,SAAQ;AAAA,cACR,SAAQ;AAAA,cACR,UAAU;AAAA,cACV,MAAK;AAAA,cACL,mBAAiB;AAAA,cACjB,oBAAkB;AAAA,cAClB,cAAU;AAAA,cACV,WAAW,OAAO;AAAA,cAClB,UAAU;AAAA,cACT,GAAI,QAAQ,EAAE,cAAc,MAAA,IAAU,CAAA;AAAA,cAEtC,UAAA;AAAA,gBAAA,CAAC,cACDT,2BAAAA;AAAAA,kBAACY,OAAAA;AAAAA,kBAAA;AAAA,oBACA,cAAW;AAAA,oBACX,MAAMZ,2BAAAA,IAACa,YAAA,EAAK,MAAK,UAAS,MAAK,UAAS;AAAA,oBACxC,WAAW,OAAO;AAAA,oBAClB,SAAS;AAAA,oBACT,gBAAa;AAAA,kBAAA;AAAA,gBAAA;AAAA,+CAGdC,MAAAA,UAAA,EAAS,UAAUd,2BAAAA,IAACe,mBAAA,CAAA,CAAS,GAAK,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,EAC7C,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA,GAEF;AAEF;AC1JA,MAAM,eAAe,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB,SAAS;AAAA,EACzB,GAAG;AACJ,MAAyB;AACxB,SACCf,2BAAAA,IAAC,OAAA,EAAI,gBAAc,QAAQ,WAAuB,GAAG,MACpD,UAAAA,2BAAAA,IAAC,MAAA,EAAG,IAAI,oBAAoB,WAAW,gBACrC,UACF,GACD;AAEF;;;"}
|
package/dist/style.css
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
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.9.
|
|
3
|
+
"version": "0.9.18",
|
|
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,21 +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.
|
|
26
|
-
"@launchpad-ui/focus-trap": "~0.5.
|
|
27
|
-
"@launchpad-ui/icons": "~0.26.
|
|
28
|
-
"@launchpad-ui/portal": "~0.4.
|
|
29
|
-
"@launchpad-ui/tokens": "~0.
|
|
25
|
+
"@launchpad-ui/button": "~0.15.18",
|
|
26
|
+
"@launchpad-ui/focus-trap": "~0.5.5",
|
|
27
|
+
"@launchpad-ui/icons": "~0.26.3",
|
|
28
|
+
"@launchpad-ui/portal": "~0.4.4",
|
|
29
|
+
"@launchpad-ui/tokens": "~0.17.1"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"react": "19.2.
|
|
33
|
-
"react-aria": "3.
|
|
34
|
-
"react-dom": "19.2.
|
|
32
|
+
"react": "19.2.8",
|
|
33
|
+
"react-aria": "3.50.0",
|
|
34
|
+
"react-dom": "19.2.8"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"react": "19
|
|
38
|
-
"react-aria": "3.
|
|
39
|
-
"react-dom": "19
|
|
37
|
+
"react": "^19",
|
|
38
|
+
"react-aria": "^3.50.0",
|
|
39
|
+
"react-dom": "^19"
|
|
40
40
|
},
|
|
41
41
|
"exports": {
|
|
42
42
|
".": {
|