@launchpad-ui/drawer 0.9.12 → 0.9.13
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 +19 -0
- package/dist/Drawer.d.ts.map +1 -0
- package/dist/DrawerHeader.d.ts +12 -0
- package/dist/DrawerHeader.d.ts.map +1 -0
- package/dist/constants.d.ts +2 -0
- package/dist/constants.d.ts.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.es.js +162 -0
- package/dist/index.es.js.map +1 -0
- package/dist/index.js +183 -0
- package/dist/index.js.map +1 -0
- package/dist/style.css +2 -0
- package/package.json +3 -3
package/dist/Drawer.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
type DrawerProps = {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
onCancel?(): void;
|
|
6
|
+
'data-test-id'?: string;
|
|
7
|
+
size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';
|
|
8
|
+
theme?: 'dark' | 'default';
|
|
9
|
+
hideCancel?: boolean;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated use `Modal` from `@launchpad-ui/components` instead
|
|
13
|
+
*
|
|
14
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer
|
|
15
|
+
*/
|
|
16
|
+
declare const Drawer: (props: DrawerProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export { Drawer };
|
|
18
|
+
export type { DrawerProps };
|
|
19
|
+
//# sourceMappingURL=Drawer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCnD,KAAK,WAAW,GAAG;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;AAgHF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
type DrawerHeaderProps = ComponentProps<'div'> & {
|
|
3
|
+
closeable?: boolean;
|
|
4
|
+
titleID?: string;
|
|
5
|
+
titleClassName?: string;
|
|
6
|
+
onClose?(): void;
|
|
7
|
+
'data-test-id'?: string;
|
|
8
|
+
};
|
|
9
|
+
declare const DrawerHeader: ({ className, children, titleID, titleClassName, "data-test-id": testId, ...rest }: DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { DrawerHeader };
|
|
11
|
+
export type { DrawerHeaderProps };
|
|
12
|
+
//# sourceMappingURL=DrawerHeader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../src/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,YAAY,GAAI,mFAOnB,iBAAiB,4CAQnB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,iBAAiB,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
|
package/dist/index.es.js
ADDED
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import './style.css';
|
|
2
|
+
import { IconButton } from "@launchpad-ui/button";
|
|
3
|
+
import { FocusTrap } from "@launchpad-ui/focus-trap";
|
|
4
|
+
import { Icon } from "@launchpad-ui/icons";
|
|
5
|
+
import { Portal } from "@launchpad-ui/portal";
|
|
6
|
+
import { Progress } from "@launchpad-ui/progress";
|
|
7
|
+
import { useFocusWithin } from "@react-aria/interactions";
|
|
8
|
+
import { usePreventScroll } from "@react-aria/overlays";
|
|
9
|
+
import { cx } from "classix";
|
|
10
|
+
import { LazyMotion, m } from "framer-motion";
|
|
11
|
+
import { Suspense, useEffect, useRef, useState } from "react";
|
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
+
const DRAWER_LABELLED_BY = "drawer-title";
|
|
14
|
+
const closeButton = "sj_sSW_closeButton";
|
|
15
|
+
const content = "sj_sSW_content";
|
|
16
|
+
const drawer = "sj_sSW_drawer";
|
|
17
|
+
const full = "sj_sSW_full";
|
|
18
|
+
const large = "sj_sSW_large";
|
|
19
|
+
const medium = "sj_sSW_medium";
|
|
20
|
+
const overlay$1 = "sj_sSW_overlay";
|
|
21
|
+
const small = "sj_sSW_small";
|
|
22
|
+
const xLarge = "sj_sSW_xLarge";
|
|
23
|
+
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
|
+
};
|
|
34
|
+
const overlay = {
|
|
35
|
+
visible: {
|
|
36
|
+
opacity: 1,
|
|
37
|
+
transition: { duration: .15 }
|
|
38
|
+
},
|
|
39
|
+
hidden: { opacity: 0 }
|
|
40
|
+
};
|
|
41
|
+
const slideRight = {
|
|
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
|
+
}
|
|
56
|
+
};
|
|
57
|
+
const loadFeatures = () => import(
|
|
58
|
+
/* webpackChunkName: "lp-drawer-framer-features" */
|
|
59
|
+
/* webpackExports: "domAnimation" */
|
|
60
|
+
"framer-motion").then((res) => res.domAnimation);
|
|
61
|
+
/**
|
|
62
|
+
* @deprecated use `Modal` from `@launchpad-ui/components` instead
|
|
63
|
+
*
|
|
64
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer
|
|
65
|
+
*/
|
|
66
|
+
const Drawer = (props) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DrawerContainer, { ...props }) });
|
|
67
|
+
const DrawerContainer = ({ className, children, onCancel, size = "small", "data-test-id": testId = "drawer", theme, hideCancel = false }) => {
|
|
68
|
+
const ref = useRef(null);
|
|
69
|
+
const [isFocusWithin, setIsFocusWithin] = useState(false);
|
|
70
|
+
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocusWithin$1) => setIsFocusWithin(isFocusWithin$1) });
|
|
71
|
+
usePreventScroll();
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
const handleEscape = (event) => {
|
|
74
|
+
event.stopImmediatePropagation();
|
|
75
|
+
const latest = [...document.querySelectorAll("[data-drawer]")].pop();
|
|
76
|
+
if (event.key === "Escape" && latest === ref.current && isFocusWithin) close();
|
|
77
|
+
};
|
|
78
|
+
const addOverlayAndEventHandler = () => {
|
|
79
|
+
document.body.classList.add("has-overlay");
|
|
80
|
+
document.addEventListener("keydown", handleEscape);
|
|
81
|
+
};
|
|
82
|
+
const removeOverlayAndEventHandler = () => {
|
|
83
|
+
document.body.classList.remove("has-overlay");
|
|
84
|
+
document.removeEventListener("keydown", handleEscape);
|
|
85
|
+
};
|
|
86
|
+
const close = () => {
|
|
87
|
+
onCancel?.();
|
|
88
|
+
};
|
|
89
|
+
if (isFocusWithin) addOverlayAndEventHandler();
|
|
90
|
+
if (!isFocusWithin) removeOverlayAndEventHandler();
|
|
91
|
+
return () => {
|
|
92
|
+
removeOverlayAndEventHandler();
|
|
93
|
+
};
|
|
94
|
+
}, [onCancel, isFocusWithin]);
|
|
95
|
+
const handleOverlayClick = (event) => {
|
|
96
|
+
if (event.target === event.currentTarget) onCancel?.();
|
|
97
|
+
};
|
|
98
|
+
return /* @__PURE__ */ jsx(LazyMotion, {
|
|
99
|
+
strict: true,
|
|
100
|
+
features: loadFeatures,
|
|
101
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
102
|
+
...focusWithinProps,
|
|
103
|
+
className: cx(Drawer_module_default.drawer, Drawer_module_default[size], className),
|
|
104
|
+
"data-drawer": true,
|
|
105
|
+
"data-test-id": testId,
|
|
106
|
+
ref,
|
|
107
|
+
children: /* @__PURE__ */ jsx(m.div, {
|
|
108
|
+
initial: "hidden",
|
|
109
|
+
animate: "visible",
|
|
110
|
+
variants: overlay,
|
|
111
|
+
transition: { duration: .15 },
|
|
112
|
+
role: "presentation",
|
|
113
|
+
className: Drawer_module_default.overlay,
|
|
114
|
+
onMouseDown: handleOverlayClick,
|
|
115
|
+
children: /* @__PURE__ */ jsx(FocusTrap, {
|
|
116
|
+
autoFocus: true,
|
|
117
|
+
restoreFocus: true,
|
|
118
|
+
children: /* @__PURE__ */ jsxs(m.div, {
|
|
119
|
+
initial: "hidden",
|
|
120
|
+
animate: "visible",
|
|
121
|
+
variants: slideRight,
|
|
122
|
+
role: "dialog",
|
|
123
|
+
"aria-labelledby": DRAWER_LABELLED_BY,
|
|
124
|
+
"aria-describedby": DRAWER_LABELLED_BY,
|
|
125
|
+
"aria-modal": true,
|
|
126
|
+
className: Drawer_module_default.content,
|
|
127
|
+
tabIndex: -1,
|
|
128
|
+
...theme ? { "data-theme": theme } : {},
|
|
129
|
+
children: [!hideCancel && /* @__PURE__ */ jsx(IconButton, {
|
|
130
|
+
"aria-label": "close",
|
|
131
|
+
icon: /* @__PURE__ */ jsx(Icon, {
|
|
132
|
+
name: "cancel",
|
|
133
|
+
size: "medium"
|
|
134
|
+
}),
|
|
135
|
+
className: Drawer_module_default.closeButton,
|
|
136
|
+
onClick: onCancel,
|
|
137
|
+
"data-test-id": "drawer-close-button"
|
|
138
|
+
}), /* @__PURE__ */ jsx(Suspense, {
|
|
139
|
+
fallback: /* @__PURE__ */ jsx(Progress, {}),
|
|
140
|
+
children
|
|
141
|
+
})]
|
|
142
|
+
})
|
|
143
|
+
})
|
|
144
|
+
})
|
|
145
|
+
})
|
|
146
|
+
});
|
|
147
|
+
};
|
|
148
|
+
const DrawerHeader = ({ className, children, titleID, titleClassName, "data-test-id": testId = "drawer-header",...rest }) => {
|
|
149
|
+
return /* @__PURE__ */ jsx("div", {
|
|
150
|
+
"data-test-id": testId,
|
|
151
|
+
className,
|
|
152
|
+
...rest,
|
|
153
|
+
children: /* @__PURE__ */ jsx("h2", {
|
|
154
|
+
id: DRAWER_LABELLED_BY,
|
|
155
|
+
className: titleClassName,
|
|
156
|
+
children
|
|
157
|
+
})
|
|
158
|
+
});
|
|
159
|
+
};
|
|
160
|
+
export { Drawer, DrawerHeader };
|
|
161
|
+
|
|
162
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","names":["overlay: Variants","slideRight: Variants","props: DrawerProps","event: KeyboardEvent","event: MouseEvent<HTMLDivElement>"],"sources":["../src/constants.ts","../src/styles/Drawer.module.css","../../tokens/dist/media-queries.css","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","@import '../../../tokens/dist/media-queries.css';\n\n:root,\n[data-theme='default'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(40 40 40 / 0.5);\n}\n\n[data-theme='dark'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(25 25 25 / 0.75);\n}\n\n.drawer {\n\t--page-gutter-width: 0.625rem;\n\n\tz-index: var(--lp-z-index-400);\n\tposition: fixed;\n\tinset: 0;\n\ttransform: translateZ(0);\n}\n\n@media (--tablet) {\n\t.drawer {\n\t\t--page-gutter-width: 2.5rem;\n\t}\n}\n\n:global(.has-overlay) {\n\toverflow: hidden;\n}\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground-color: var(--lp-component-drawer-color-bg-overlay);\n}\n\n.content {\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\toverflow: auto;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tbox-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);\n}\n\n@media (--tablet) {\n\t.small .content {\n\t\twidth: 28.125rem;\n\t}\n\n\t.medium .content {\n\t\twidth: 40.625rem;\n\t}\n\n\t.large .content {\n\t\twidth: 50rem;\n\t}\n\n\t.xLarge .content {\n\t\twidth: 75rem;\n\t}\n\n\t.full .content {\n\t\twidth: 100%;\n\t\tmax-width: unset;\n\t}\n}\n\n.content section {\n\tpadding: 2rem var(--page-gutter-width);\n}\n\n.content section + section {\n\tborder-top: 1px dotted var(--lp-color-gray-100);\n}\n\n.closeButton {\n\tposition: absolute;\n\tright: 0.625rem;\n\ttop: 0.625rem;\n}\n","@custom-media --mobile screen and (min-width: 0);\n@custom-media --tablet screen and (min-width: 46.25rem);\n@custom-media --desktop screen and (min-width: 62rem);\n@custom-media --wide screen and (min-width: 75rem);","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { Suspense, useEffect, useRef, useState } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\n */\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { ComponentProps } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = ComponentProps<'div'> & {\n\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"mappings":"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"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
require('./style.css');
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
10
|
+
key = keys[i];
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
12
|
+
get: ((k) => from[k]).bind(null, key),
|
|
13
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
19
|
+
value: mod,
|
|
20
|
+
enumerable: true
|
|
21
|
+
}) : target, mod));
|
|
22
|
+
const __launchpad_ui_button = __toESM(require("@launchpad-ui/button"));
|
|
23
|
+
const __launchpad_ui_focus_trap = __toESM(require("@launchpad-ui/focus-trap"));
|
|
24
|
+
const __launchpad_ui_icons = __toESM(require("@launchpad-ui/icons"));
|
|
25
|
+
const __launchpad_ui_portal = __toESM(require("@launchpad-ui/portal"));
|
|
26
|
+
const __launchpad_ui_progress = __toESM(require("@launchpad-ui/progress"));
|
|
27
|
+
const __react_aria_interactions = __toESM(require("@react-aria/interactions"));
|
|
28
|
+
const __react_aria_overlays = __toESM(require("@react-aria/overlays"));
|
|
29
|
+
const classix = __toESM(require("classix"));
|
|
30
|
+
const framer_motion = __toESM(require("framer-motion"));
|
|
31
|
+
const react = __toESM(require("react"));
|
|
32
|
+
const react_jsx_runtime = __toESM(require("react/jsx-runtime"));
|
|
33
|
+
const DRAWER_LABELLED_BY = "drawer-title";
|
|
34
|
+
const closeButton = "sj_sSW_closeButton";
|
|
35
|
+
const content = "sj_sSW_content";
|
|
36
|
+
const drawer = "sj_sSW_drawer";
|
|
37
|
+
const full = "sj_sSW_full";
|
|
38
|
+
const large = "sj_sSW_large";
|
|
39
|
+
const medium = "sj_sSW_medium";
|
|
40
|
+
const overlay$1 = "sj_sSW_overlay";
|
|
41
|
+
const small = "sj_sSW_small";
|
|
42
|
+
const xLarge = "sj_sSW_xLarge";
|
|
43
|
+
var Drawer_module_default = {
|
|
44
|
+
closeButton,
|
|
45
|
+
content,
|
|
46
|
+
drawer,
|
|
47
|
+
full,
|
|
48
|
+
large,
|
|
49
|
+
medium,
|
|
50
|
+
overlay: overlay$1,
|
|
51
|
+
small,
|
|
52
|
+
xLarge
|
|
53
|
+
};
|
|
54
|
+
const overlay = {
|
|
55
|
+
visible: {
|
|
56
|
+
opacity: 1,
|
|
57
|
+
transition: { duration: .15 }
|
|
58
|
+
},
|
|
59
|
+
hidden: { opacity: 0 }
|
|
60
|
+
};
|
|
61
|
+
const slideRight = {
|
|
62
|
+
hidden: {
|
|
63
|
+
opacity: 0,
|
|
64
|
+
x: "25%"
|
|
65
|
+
},
|
|
66
|
+
visible: {
|
|
67
|
+
opacity: 1,
|
|
68
|
+
x: "0%",
|
|
69
|
+
transition: {
|
|
70
|
+
type: "spring",
|
|
71
|
+
delay: .15,
|
|
72
|
+
duration: .2,
|
|
73
|
+
bounce: 0
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
const loadFeatures = () => import(
|
|
78
|
+
/* webpackChunkName: "lp-drawer-framer-features" */
|
|
79
|
+
/* webpackExports: "domAnimation" */
|
|
80
|
+
"framer-motion").then((res) => res.domAnimation);
|
|
81
|
+
/**
|
|
82
|
+
* @deprecated use `Modal` from `@launchpad-ui/components` instead
|
|
83
|
+
*
|
|
84
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer
|
|
85
|
+
*/
|
|
86
|
+
const Drawer = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContainer, { ...props }) });
|
|
87
|
+
const DrawerContainer = ({ className, children, onCancel, size = "small", "data-test-id": testId = "drawer", theme, hideCancel = false }) => {
|
|
88
|
+
const ref = (0, react.useRef)(null);
|
|
89
|
+
const [isFocusWithin, setIsFocusWithin] = (0, react.useState)(false);
|
|
90
|
+
const { focusWithinProps } = (0, __react_aria_interactions.useFocusWithin)({ onFocusWithinChange: (isFocusWithin$1) => setIsFocusWithin(isFocusWithin$1) });
|
|
91
|
+
(0, __react_aria_overlays.usePreventScroll)();
|
|
92
|
+
(0, react.useEffect)(() => {
|
|
93
|
+
const handleEscape = (event) => {
|
|
94
|
+
event.stopImmediatePropagation();
|
|
95
|
+
const latest = [...document.querySelectorAll("[data-drawer]")].pop();
|
|
96
|
+
if (event.key === "Escape" && latest === ref.current && isFocusWithin) close();
|
|
97
|
+
};
|
|
98
|
+
const addOverlayAndEventHandler = () => {
|
|
99
|
+
document.body.classList.add("has-overlay");
|
|
100
|
+
document.addEventListener("keydown", handleEscape);
|
|
101
|
+
};
|
|
102
|
+
const removeOverlayAndEventHandler = () => {
|
|
103
|
+
document.body.classList.remove("has-overlay");
|
|
104
|
+
document.removeEventListener("keydown", handleEscape);
|
|
105
|
+
};
|
|
106
|
+
const close = () => {
|
|
107
|
+
onCancel?.();
|
|
108
|
+
};
|
|
109
|
+
if (isFocusWithin) addOverlayAndEventHandler();
|
|
110
|
+
if (!isFocusWithin) removeOverlayAndEventHandler();
|
|
111
|
+
return () => {
|
|
112
|
+
removeOverlayAndEventHandler();
|
|
113
|
+
};
|
|
114
|
+
}, [onCancel, isFocusWithin]);
|
|
115
|
+
const handleOverlayClick = (event) => {
|
|
116
|
+
if (event.target === event.currentTarget) onCancel?.();
|
|
117
|
+
};
|
|
118
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.LazyMotion, {
|
|
119
|
+
strict: true,
|
|
120
|
+
features: loadFeatures,
|
|
121
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
122
|
+
...focusWithinProps,
|
|
123
|
+
className: (0, classix.cx)(Drawer_module_default.drawer, Drawer_module_default[size], className),
|
|
124
|
+
"data-drawer": true,
|
|
125
|
+
"data-test-id": testId,
|
|
126
|
+
ref,
|
|
127
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.m.div, {
|
|
128
|
+
initial: "hidden",
|
|
129
|
+
animate: "visible",
|
|
130
|
+
variants: overlay,
|
|
131
|
+
transition: { duration: .15 },
|
|
132
|
+
role: "presentation",
|
|
133
|
+
className: Drawer_module_default.overlay,
|
|
134
|
+
onMouseDown: handleOverlayClick,
|
|
135
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_focus_trap.FocusTrap, {
|
|
136
|
+
autoFocus: true,
|
|
137
|
+
restoreFocus: true,
|
|
138
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.m.div, {
|
|
139
|
+
initial: "hidden",
|
|
140
|
+
animate: "visible",
|
|
141
|
+
variants: slideRight,
|
|
142
|
+
role: "dialog",
|
|
143
|
+
"aria-labelledby": DRAWER_LABELLED_BY,
|
|
144
|
+
"aria-describedby": DRAWER_LABELLED_BY,
|
|
145
|
+
"aria-modal": true,
|
|
146
|
+
className: Drawer_module_default.content,
|
|
147
|
+
tabIndex: -1,
|
|
148
|
+
...theme ? { "data-theme": theme } : {},
|
|
149
|
+
children: [!hideCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_button.IconButton, {
|
|
150
|
+
"aria-label": "close",
|
|
151
|
+
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_icons.Icon, {
|
|
152
|
+
name: "cancel",
|
|
153
|
+
size: "medium"
|
|
154
|
+
}),
|
|
155
|
+
className: Drawer_module_default.closeButton,
|
|
156
|
+
onClick: onCancel,
|
|
157
|
+
"data-test-id": "drawer-close-button"
|
|
158
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
|
|
159
|
+
fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__launchpad_ui_progress.Progress, {}),
|
|
160
|
+
children
|
|
161
|
+
})]
|
|
162
|
+
})
|
|
163
|
+
})
|
|
164
|
+
})
|
|
165
|
+
})
|
|
166
|
+
});
|
|
167
|
+
};
|
|
168
|
+
const DrawerHeader = ({ className, children, titleID, titleClassName, "data-test-id": testId = "drawer-header",...rest }) => {
|
|
169
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
170
|
+
"data-test-id": testId,
|
|
171
|
+
className,
|
|
172
|
+
...rest,
|
|
173
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
|
|
174
|
+
id: DRAWER_LABELLED_BY,
|
|
175
|
+
className: titleClassName,
|
|
176
|
+
children
|
|
177
|
+
})
|
|
178
|
+
});
|
|
179
|
+
};
|
|
180
|
+
exports.Drawer = Drawer;
|
|
181
|
+
exports.DrawerHeader = DrawerHeader;
|
|
182
|
+
|
|
183
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["overlay: Variants","slideRight: Variants","props: DrawerProps","event: KeyboardEvent","event: MouseEvent<HTMLDivElement>"],"sources":["../src/constants.ts","../src/styles/Drawer.module.css","../../tokens/dist/media-queries.css","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","@import '../../../tokens/dist/media-queries.css';\n\n:root,\n[data-theme='default'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(40 40 40 / 0.5);\n}\n\n[data-theme='dark'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(25 25 25 / 0.75);\n}\n\n.drawer {\n\t--page-gutter-width: 0.625rem;\n\n\tz-index: var(--lp-z-index-400);\n\tposition: fixed;\n\tinset: 0;\n\ttransform: translateZ(0);\n}\n\n@media (--tablet) {\n\t.drawer {\n\t\t--page-gutter-width: 2.5rem;\n\t}\n}\n\n:global(.has-overlay) {\n\toverflow: hidden;\n}\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground-color: var(--lp-component-drawer-color-bg-overlay);\n}\n\n.content {\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\toverflow: auto;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tbox-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);\n}\n\n@media (--tablet) {\n\t.small .content {\n\t\twidth: 28.125rem;\n\t}\n\n\t.medium .content {\n\t\twidth: 40.625rem;\n\t}\n\n\t.large .content {\n\t\twidth: 50rem;\n\t}\n\n\t.xLarge .content {\n\t\twidth: 75rem;\n\t}\n\n\t.full .content {\n\t\twidth: 100%;\n\t\tmax-width: unset;\n\t}\n}\n\n.content section {\n\tpadding: 2rem var(--page-gutter-width);\n}\n\n.content section + section {\n\tborder-top: 1px dotted var(--lp-color-gray-100);\n}\n\n.closeButton {\n\tposition: absolute;\n\tright: 0.625rem;\n\ttop: 0.625rem;\n}\n","@custom-media --mobile screen and (min-width: 0);\n@custom-media --tablet screen and (min-width: 46.25rem);\n@custom-media --desktop screen and (min-width: 62rem);\n@custom-media --wide screen and (min-width: 75rem);","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { Suspense, useEffect, useRef, useState } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\n */\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\t/* @ts-ignore framer */\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { ComponentProps } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = ComponentProps<'div'> & {\n\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"mappings":"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"}
|
package/dist/style.css
ADDED
|
@@ -0,0 +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;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.13",
|
|
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,9 +22,9 @@
|
|
|
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.
|
|
25
|
+
"@launchpad-ui/button": "~0.15.13",
|
|
26
26
|
"@launchpad-ui/focus-trap": "~0.5.1",
|
|
27
|
-
"@launchpad-ui/icons": "~0.25.
|
|
27
|
+
"@launchpad-ui/icons": "~0.25.4",
|
|
28
28
|
"@launchpad-ui/portal": "~0.4.2",
|
|
29
29
|
"@launchpad-ui/tokens": "~0.15.1"
|
|
30
30
|
},
|