@launchpad-ui/drawer 0.1.18 → 0.1.19
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/index.es.js +65 -39
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +86 -62
- package/dist/index.js.map +1 -1
- package/package.json +13 -13
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 { Close } from "@launchpad-ui/icons";
|
@@ -9,6 +8,7 @@ import { usePreventScroll } from "@react-aria/overlays";
|
|
9
8
|
import { cx } from "classix";
|
10
9
|
import { LazyMotion, m } from "framer-motion";
|
11
10
|
import { useRef, useEffect, Suspense } from "react";
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
12
12
|
const DRAWER_LABELLED_BY = "drawer-title";
|
13
13
|
const drawer = "_drawer_1amby_17";
|
14
14
|
const overlay$1 = "_overlay_1amby_27";
|
@@ -31,15 +31,30 @@ const styles = {
|
|
31
31
|
closeButton
|
32
32
|
};
|
33
33
|
const overlay = {
|
34
|
-
visible: {
|
35
|
-
|
34
|
+
visible: {
|
35
|
+
opacity: 1,
|
36
|
+
transition: {
|
37
|
+
duration: 0.15
|
38
|
+
}
|
39
|
+
},
|
40
|
+
hidden: {
|
41
|
+
opacity: 0
|
42
|
+
}
|
36
43
|
};
|
37
44
|
const slideRight = {
|
38
|
-
hidden: {
|
45
|
+
hidden: {
|
46
|
+
opacity: 0,
|
47
|
+
x: "25%"
|
48
|
+
},
|
39
49
|
visible: {
|
40
50
|
opacity: 1,
|
41
51
|
x: "0%",
|
42
|
-
transition: {
|
52
|
+
transition: {
|
53
|
+
type: "spring",
|
54
|
+
delay: 0.15,
|
55
|
+
duration: 0.2,
|
56
|
+
bounce: 0
|
57
|
+
}
|
43
58
|
}
|
44
59
|
};
|
45
60
|
const loadFeatures = () => import(
|
@@ -79,26 +94,29 @@ const Drawer = ({
|
|
79
94
|
onCancel && onCancel();
|
80
95
|
}
|
81
96
|
};
|
82
|
-
return /* @__PURE__ */ jsx(Portal, {
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
"
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
{
|
97
|
+
return /* @__PURE__ */ jsx(Portal, {
|
98
|
+
children: /* @__PURE__ */ jsx(LazyMotion, {
|
99
|
+
strict: true,
|
100
|
+
features: loadFeatures,
|
101
|
+
children: /* @__PURE__ */ jsx("div", {
|
102
|
+
className: cx(styles.drawer, styles[size], className),
|
103
|
+
"data-drawer": true,
|
104
|
+
"data-test-id": testId,
|
105
|
+
ref,
|
106
|
+
children: /* @__PURE__ */ jsx(m.div, {
|
92
107
|
initial: "hidden",
|
93
108
|
animate: "visible",
|
94
109
|
variants: overlay,
|
95
|
-
transition: {
|
110
|
+
transition: {
|
111
|
+
duration: 0.15
|
112
|
+
},
|
96
113
|
role: "presentation",
|
97
114
|
className: styles.overlay,
|
98
115
|
onMouseDown: handleOverlayClick,
|
99
|
-
children: /* @__PURE__ */ jsx(FocusTrap, {
|
100
|
-
|
101
|
-
|
116
|
+
children: /* @__PURE__ */ jsx(FocusTrap, {
|
117
|
+
autoFocus: true,
|
118
|
+
restoreFocus: true,
|
119
|
+
children: /* @__PURE__ */ jsxs(m.div, {
|
102
120
|
initial: "hidden",
|
103
121
|
animate: "visible",
|
104
122
|
variants: slideRight,
|
@@ -107,25 +125,24 @@ const Drawer = ({
|
|
107
125
|
"aria-modal": true,
|
108
126
|
className: styles.content,
|
109
127
|
tabIndex: -1,
|
110
|
-
children: [
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
) }) });
|
128
|
+
children: [/* @__PURE__ */ jsx(IconButton, {
|
129
|
+
"aria-label": "close",
|
130
|
+
icon: /* @__PURE__ */ jsx(Close, {
|
131
|
+
size: "medium"
|
132
|
+
}),
|
133
|
+
className: styles.closeButton,
|
134
|
+
onClick: onCancel,
|
135
|
+
"data-test-id": "drawer-close-button"
|
136
|
+
}), /* @__PURE__ */ jsx(Suspense, {
|
137
|
+
fallback: /* @__PURE__ */ jsx(Progress, {}),
|
138
|
+
children
|
139
|
+
})]
|
140
|
+
})
|
141
|
+
})
|
142
|
+
})
|
143
|
+
})
|
144
|
+
})
|
145
|
+
});
|
129
146
|
};
|
130
147
|
const DrawerHeader = ({
|
131
148
|
className,
|
@@ -135,7 +152,16 @@ const DrawerHeader = ({
|
|
135
152
|
"data-test-id": testId = "drawer-header",
|
136
153
|
...rest
|
137
154
|
}) => {
|
138
|
-
return /* @__PURE__ */ jsx("div", {
|
155
|
+
return /* @__PURE__ */ jsx("div", {
|
156
|
+
"data-test-id": testId,
|
157
|
+
className,
|
158
|
+
...rest,
|
159
|
+
children: /* @__PURE__ */ jsx("h2", {
|
160
|
+
id: DRAWER_LABELLED_BY,
|
161
|
+
className: titleClassName,
|
162
|
+
children
|
163
|
+
})
|
164
|
+
});
|
139
165
|
};
|
140
166
|
export {
|
141
167
|
Drawer,
|
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 { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n visible: { opacity: 1, transition: { duration: 0.15 } },\n hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n hidden: { opacity: 0, x: '25%' },\n visible: {\n opacity: 1,\n x: '0%',\n transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n },\n};\n\nconst loadFeatures = () =>\n import(\n /* webpackChunkName: \"lp-drawer-framer-features\" */\n /* webpackExports: \"domAnimation\" */\n 'framer-motion'\n ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n children?: ReactNode;\n className?: string;\n onCancel?(): void;\n 'data-test-id'?: string;\n size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n};\n\nconst Drawer = ({\n className,\n children,\n onCancel,\n size = 'small',\n 'data-test-id': testId = 'drawer',\n}: DrawerProps) => {\n const ref = useRef<HTMLDivElement>(null);\n\n usePreventScroll();\n\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n event.stopImmediatePropagation();\n const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n if (event.key === 'Escape' && latest === ref.current) {\n close();\n }\n };\n\n const close = () => {\n onCancel?.();\n };\n\n document.body.classList.add('has-overlay');\n document.addEventListener('keydown', handleEscape);\n\n return () => {\n document.body.classList.remove('has-overlay');\n document.removeEventListener('keydown', handleEscape);\n };\n }, [onCancel, testId]);\n\n const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target === event.currentTarget) {\n onCancel && onCancel();\n }\n };\n\n return (\n <Portal>\n <LazyMotion strict features={loadFeatures}>\n <div\n className={cx(styles.drawer, styles[size], className)}\n data-drawer\n data-test-id={testId}\n ref={ref}\n >\n <m.div\n initial=\"hidden\"\n animate=\"visible\"\n variants={overlay}\n transition={{ duration: 0.15 }}\n role=\"presentation\"\n className={styles.overlay}\n onMouseDown={handleOverlayClick}\n >\n <FocusTrap autoFocus restoreFocus>\n <m.div\n initial=\"hidden\"\n animate=\"visible\"\n variants={slideRight}\n role=\"dialog\"\n aria-labelledby={DRAWER_LABELLED_BY}\n aria-modal\n className={styles.content}\n tabIndex={-1}\n >\n <IconButton\n aria-label=\"close\"\n icon={<Close size=\"medium\" />}\n className={styles.closeButton}\n onClick={onCancel}\n data-test-id=\"drawer-close-button\"\n />\n <Suspense fallback={<Progress />}>{children}</Suspense>\n </m.div>\n </FocusTrap>\n </m.div>\n </div>\n </LazyMotion>\n </Portal>\n );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = HTMLAttributes<HTMLDivElement> & {\n closeable?: boolean;\n titleID?: string;\n titleClassName?: string;\n onClose?(): void;\n 'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n className,\n children,\n titleID,\n titleClassName,\n 'data-test-id': testId = 'drawer-header',\n ...rest\n}: DrawerHeaderProps) => {\n return (\n <div data-test-id={testId} className={className} {...rest}>\n <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n {children}\n </h2>\n </div>\n );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":[],"mappings":";;;;;;;;;;AAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;ACgBlC,
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../src/constants.ts","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n visible: { opacity: 1, transition: { duration: 0.15 } },\n hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n hidden: { opacity: 0, x: '25%' },\n visible: {\n opacity: 1,\n x: '0%',\n transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n },\n};\n\nconst loadFeatures = () =>\n import(\n /* webpackChunkName: \"lp-drawer-framer-features\" */\n /* webpackExports: \"domAnimation\" */\n 'framer-motion'\n ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n children?: ReactNode;\n className?: string;\n onCancel?(): void;\n 'data-test-id'?: string;\n size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n};\n\nconst Drawer = ({\n className,\n children,\n onCancel,\n size = 'small',\n 'data-test-id': testId = 'drawer',\n}: DrawerProps) => {\n const ref = useRef<HTMLDivElement>(null);\n\n usePreventScroll();\n\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n event.stopImmediatePropagation();\n const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n if (event.key === 'Escape' && latest === ref.current) {\n close();\n }\n };\n\n const close = () => {\n onCancel?.();\n };\n\n document.body.classList.add('has-overlay');\n document.addEventListener('keydown', handleEscape);\n\n return () => {\n document.body.classList.remove('has-overlay');\n document.removeEventListener('keydown', handleEscape);\n };\n }, [onCancel, testId]);\n\n const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target === event.currentTarget) {\n onCancel && onCancel();\n }\n };\n\n return (\n <Portal>\n <LazyMotion strict features={loadFeatures}>\n <div\n className={cx(styles.drawer, styles[size], className)}\n data-drawer\n data-test-id={testId}\n ref={ref}\n >\n <m.div\n initial=\"hidden\"\n animate=\"visible\"\n variants={overlay}\n transition={{ duration: 0.15 }}\n role=\"presentation\"\n className={styles.overlay}\n onMouseDown={handleOverlayClick}\n >\n <FocusTrap autoFocus restoreFocus>\n <m.div\n initial=\"hidden\"\n animate=\"visible\"\n variants={slideRight}\n role=\"dialog\"\n aria-labelledby={DRAWER_LABELLED_BY}\n aria-modal\n className={styles.content}\n tabIndex={-1}\n >\n <IconButton\n aria-label=\"close\"\n icon={<Close size=\"medium\" />}\n className={styles.closeButton}\n onClick={onCancel}\n data-test-id=\"drawer-close-button\"\n />\n <Suspense fallback={<Progress />}>{children}</Suspense>\n </m.div>\n </FocusTrap>\n </m.div>\n </div>\n </LazyMotion>\n </Portal>\n );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = HTMLAttributes<HTMLDivElement> & {\n closeable?: boolean;\n titleID?: string;\n titleClassName?: string;\n onClose?(): void;\n 'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n className,\n children,\n titleID,\n titleClassName,\n 'data-test-id': testId = 'drawer-header',\n ...rest\n}: DrawerHeaderProps) => {\n return (\n <div data-test-id={testId} className={className} {...rest}>\n <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n {children}\n </h2>\n </div>\n );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["overlay","visible","opacity","transition","duration","hidden","slideRight","x","type","delay","bounce","loadFeatures","then","res","domAnimation","Drawer","className","children","onCancel","size","testId","ref","useRef","useEffect","handleEscape","event","stopImmediatePropagation","latest","document","querySelectorAll","pop","key","current","close","body","classList","add","addEventListener","remove","removeEventListener","handleOverlayClick","target","currentTarget","cx","styles","drawer","_jsx","_jsxs","DRAWER_LABELLED_BY","content","closeButton","DrawerHeader","titleID","titleClassName","rest"],"mappings":"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"}
|
package/dist/index.js
CHANGED
@@ -1,25 +1,6 @@
|
|
1
1
|
require('./style.css');
|
2
2
|
"use strict";
|
3
|
-
|
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
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
19
|
-
mod
|
20
|
-
));
|
21
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
22
|
-
const jsxRuntime = require("react/jsx-runtime");
|
3
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
23
4
|
const button = require("@launchpad-ui/button");
|
24
5
|
const focusTrap = require("@launchpad-ui/focus-trap");
|
25
6
|
const icons = require("@launchpad-ui/icons");
|
@@ -29,6 +10,25 @@ const overlays = require("@react-aria/overlays");
|
|
29
10
|
const classix = require("classix");
|
30
11
|
const framerMotion = require("framer-motion");
|
31
12
|
const react = require("react");
|
13
|
+
const jsxRuntime = require("react/jsx-runtime");
|
14
|
+
function _interopNamespace(e) {
|
15
|
+
if (e && e.__esModule)
|
16
|
+
return e;
|
17
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
18
|
+
if (e) {
|
19
|
+
for (const k in e) {
|
20
|
+
if (k !== "default") {
|
21
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
22
|
+
Object.defineProperty(n, k, d.get ? d : {
|
23
|
+
enumerable: true,
|
24
|
+
get: () => e[k]
|
25
|
+
});
|
26
|
+
}
|
27
|
+
}
|
28
|
+
}
|
29
|
+
n.default = e;
|
30
|
+
return Object.freeze(n);
|
31
|
+
}
|
32
32
|
const DRAWER_LABELLED_BY = "drawer-title";
|
33
33
|
const drawer = "_drawer_1amby_17";
|
34
34
|
const overlay$1 = "_overlay_1amby_27";
|
@@ -51,22 +51,35 @@ const styles = {
|
|
51
51
|
closeButton
|
52
52
|
};
|
53
53
|
const overlay = {
|
54
|
-
visible: {
|
55
|
-
|
54
|
+
visible: {
|
55
|
+
opacity: 1,
|
56
|
+
transition: {
|
57
|
+
duration: 0.15
|
58
|
+
}
|
59
|
+
},
|
60
|
+
hidden: {
|
61
|
+
opacity: 0
|
62
|
+
}
|
56
63
|
};
|
57
64
|
const slideRight = {
|
58
|
-
hidden: {
|
65
|
+
hidden: {
|
66
|
+
opacity: 0,
|
67
|
+
x: "25%"
|
68
|
+
},
|
59
69
|
visible: {
|
60
70
|
opacity: 1,
|
61
71
|
x: "0%",
|
62
|
-
transition: {
|
72
|
+
transition: {
|
73
|
+
type: "spring",
|
74
|
+
delay: 0.15,
|
75
|
+
duration: 0.2,
|
76
|
+
bounce: 0
|
77
|
+
}
|
63
78
|
}
|
64
79
|
};
|
65
|
-
const loadFeatures = () =>
|
66
|
-
/* webpackChunkName: "lp-drawer-framer-features" */
|
67
|
-
/* webpackExports: "domAnimation" */
|
80
|
+
const loadFeatures = () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespace(require(
|
68
81
|
"framer-motion"
|
69
|
-
).then((res) => res.domAnimation);
|
82
|
+
))).then((res) => res.domAnimation);
|
70
83
|
const Drawer = ({
|
71
84
|
className,
|
72
85
|
children,
|
@@ -99,26 +112,29 @@ const Drawer = ({
|
|
99
112
|
onCancel && onCancel();
|
100
113
|
}
|
101
114
|
};
|
102
|
-
return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, {
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
"
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
{
|
115
|
+
return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, {
|
116
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, {
|
117
|
+
strict: true,
|
118
|
+
features: loadFeatures,
|
119
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
120
|
+
className: classix.cx(styles.drawer, styles[size], className),
|
121
|
+
"data-drawer": true,
|
122
|
+
"data-test-id": testId,
|
123
|
+
ref,
|
124
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.m.div, {
|
112
125
|
initial: "hidden",
|
113
126
|
animate: "visible",
|
114
127
|
variants: overlay,
|
115
|
-
transition: {
|
128
|
+
transition: {
|
129
|
+
duration: 0.15
|
130
|
+
},
|
116
131
|
role: "presentation",
|
117
132
|
className: styles.overlay,
|
118
133
|
onMouseDown: handleOverlayClick,
|
119
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, {
|
120
|
-
|
121
|
-
|
134
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, {
|
135
|
+
autoFocus: true,
|
136
|
+
restoreFocus: true,
|
137
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.m.div, {
|
122
138
|
initial: "hidden",
|
123
139
|
animate: "visible",
|
124
140
|
variants: slideRight,
|
@@ -127,25 +143,24 @@ const Drawer = ({
|
|
127
143
|
"aria-modal": true,
|
128
144
|
className: styles.content,
|
129
145
|
tabIndex: -1,
|
130
|
-
children: [
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
) }) });
|
146
|
+
children: [/* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
|
147
|
+
"aria-label": "close",
|
148
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, {
|
149
|
+
size: "medium"
|
150
|
+
}),
|
151
|
+
className: styles.closeButton,
|
152
|
+
onClick: onCancel,
|
153
|
+
"data-test-id": "drawer-close-button"
|
154
|
+
}), /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, {
|
155
|
+
fallback: /* @__PURE__ */ jsxRuntime.jsx(progress.Progress, {}),
|
156
|
+
children
|
157
|
+
})]
|
158
|
+
})
|
159
|
+
})
|
160
|
+
})
|
161
|
+
})
|
162
|
+
})
|
163
|
+
});
|
149
164
|
};
|
150
165
|
const DrawerHeader = ({
|
151
166
|
className,
|
@@ -155,7 +170,16 @@ const DrawerHeader = ({
|
|
155
170
|
"data-test-id": testId = "drawer-header",
|
156
171
|
...rest
|
157
172
|
}) => {
|
158
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
173
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
174
|
+
"data-test-id": testId,
|
175
|
+
className,
|
176
|
+
...rest,
|
177
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("h2", {
|
178
|
+
id: DRAWER_LABELLED_BY,
|
179
|
+
className: titleClassName,
|
180
|
+
children
|
181
|
+
})
|
182
|
+
});
|
159
183
|
};
|
160
184
|
exports.Drawer = Drawer;
|
161
185
|
exports.DrawerHeader = DrawerHeader;
|
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 { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n visible: { opacity: 1, transition: { duration: 0.15 } },\n hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n hidden: { opacity: 0, x: '25%' },\n visible: {\n opacity: 1,\n x: '0%',\n transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n },\n};\n\nconst loadFeatures = () =>\n import(\n /* webpackChunkName: \"lp-drawer-framer-features\" */\n /* webpackExports: \"domAnimation\" */\n 'framer-motion'\n ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n children?: ReactNode;\n className?: string;\n onCancel?(): void;\n 'data-test-id'?: string;\n size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n};\n\nconst Drawer = ({\n className,\n children,\n onCancel,\n size = 'small',\n 'data-test-id': testId = 'drawer',\n}: DrawerProps) => {\n const ref = useRef<HTMLDivElement>(null);\n\n usePreventScroll();\n\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n event.stopImmediatePropagation();\n const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n if (event.key === 'Escape' && latest === ref.current) {\n close();\n }\n };\n\n const close = () => {\n onCancel?.();\n };\n\n document.body.classList.add('has-overlay');\n document.addEventListener('keydown', handleEscape);\n\n return () => {\n document.body.classList.remove('has-overlay');\n document.removeEventListener('keydown', handleEscape);\n };\n }, [onCancel, testId]);\n\n const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target === event.currentTarget) {\n onCancel && onCancel();\n }\n };\n\n return (\n <Portal>\n <LazyMotion strict features={loadFeatures}>\n <div\n className={cx(styles.drawer, styles[size], className)}\n data-drawer\n data-test-id={testId}\n ref={ref}\n >\n <m.div\n initial=\"hidden\"\n animate=\"visible\"\n variants={overlay}\n transition={{ duration: 0.15 }}\n role=\"presentation\"\n className={styles.overlay}\n onMouseDown={handleOverlayClick}\n >\n <FocusTrap autoFocus restoreFocus>\n <m.div\n initial=\"hidden\"\n animate=\"visible\"\n variants={slideRight}\n role=\"dialog\"\n aria-labelledby={DRAWER_LABELLED_BY}\n aria-modal\n className={styles.content}\n tabIndex={-1}\n >\n <IconButton\n aria-label=\"close\"\n icon={<Close size=\"medium\" />}\n className={styles.closeButton}\n onClick={onCancel}\n data-test-id=\"drawer-close-button\"\n />\n <Suspense fallback={<Progress />}>{children}</Suspense>\n </m.div>\n </FocusTrap>\n </m.div>\n </div>\n </LazyMotion>\n </Portal>\n );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = HTMLAttributes<HTMLDivElement> & {\n closeable?: boolean;\n titleID?: string;\n titleClassName?: string;\n onClose?(): void;\n 'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n className,\n children,\n titleID,\n titleClassName,\n 'data-test-id': testId = 'drawer-header',\n ...rest\n}: DrawerHeaderProps) => {\n return (\n <div data-test-id={testId} className={className} {...rest}>\n <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n {children}\n </h2>\n </div>\n );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["useRef","usePreventScroll","useEffect","
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/constants.ts","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","import type { Variants } from 'framer-motion';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { IconButton } from '@launchpad-ui/button';\nimport { FocusTrap } from '@launchpad-ui/focus-trap';\nimport { Close } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { Suspense, useEffect, useRef } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n visible: { opacity: 1, transition: { duration: 0.15 } },\n hidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n hidden: { opacity: 0, x: '25%' },\n visible: {\n opacity: 1,\n x: '0%',\n transition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n },\n};\n\nconst loadFeatures = () =>\n import(\n /* webpackChunkName: \"lp-drawer-framer-features\" */\n /* webpackExports: \"domAnimation\" */\n 'framer-motion'\n ).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n children?: ReactNode;\n className?: string;\n onCancel?(): void;\n 'data-test-id'?: string;\n size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n};\n\nconst Drawer = ({\n className,\n children,\n onCancel,\n size = 'small',\n 'data-test-id': testId = 'drawer',\n}: DrawerProps) => {\n const ref = useRef<HTMLDivElement>(null);\n\n usePreventScroll();\n\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n event.stopImmediatePropagation();\n const latest = [...document.querySelectorAll('[data-drawer]')].pop();\n if (event.key === 'Escape' && latest === ref.current) {\n close();\n }\n };\n\n const close = () => {\n onCancel?.();\n };\n\n document.body.classList.add('has-overlay');\n document.addEventListener('keydown', handleEscape);\n\n return () => {\n document.body.classList.remove('has-overlay');\n document.removeEventListener('keydown', handleEscape);\n };\n }, [onCancel, testId]);\n\n const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target === event.currentTarget) {\n onCancel && onCancel();\n }\n };\n\n return (\n <Portal>\n <LazyMotion strict features={loadFeatures}>\n <div\n className={cx(styles.drawer, styles[size], className)}\n data-drawer\n data-test-id={testId}\n ref={ref}\n >\n <m.div\n initial=\"hidden\"\n animate=\"visible\"\n variants={overlay}\n transition={{ duration: 0.15 }}\n role=\"presentation\"\n className={styles.overlay}\n onMouseDown={handleOverlayClick}\n >\n <FocusTrap autoFocus restoreFocus>\n <m.div\n initial=\"hidden\"\n animate=\"visible\"\n variants={slideRight}\n role=\"dialog\"\n aria-labelledby={DRAWER_LABELLED_BY}\n aria-modal\n className={styles.content}\n tabIndex={-1}\n >\n <IconButton\n aria-label=\"close\"\n icon={<Close size=\"medium\" />}\n className={styles.closeButton}\n onClick={onCancel}\n data-test-id=\"drawer-close-button\"\n />\n <Suspense fallback={<Progress />}>{children}</Suspense>\n </m.div>\n </FocusTrap>\n </m.div>\n </div>\n </LazyMotion>\n </Portal>\n );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = HTMLAttributes<HTMLDivElement> & {\n closeable?: boolean;\n titleID?: string;\n titleClassName?: string;\n onClose?(): void;\n 'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n className,\n children,\n titleID,\n titleClassName,\n 'data-test-id': testId = 'drawer-header',\n ...rest\n}: DrawerHeaderProps) => {\n return (\n <div data-test-id={testId} className={className} {...rest}>\n <h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n {children}\n </h2>\n </div>\n );\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["overlay","visible","opacity","transition","duration","hidden","slideRight","x","type","delay","bounce","loadFeatures","then","res","domAnimation","Drawer","className","children","onCancel","size","testId","ref","useRef","usePreventScroll","useEffect","handleEscape","event","stopImmediatePropagation","latest","document","querySelectorAll","pop","key","current","close","body","classList","add","addEventListener","remove","removeEventListener","handleOverlayClick","target","currentTarget","Portal","LazyMotion","cx","styles","drawer","_jsx","m","FocusTrap","_jsxs","DRAWER_LABELLED_BY","content","IconButton","Close","closeButton","Suspense","Progress","DrawerHeader","titleID","titleClassName","rest"],"mappings":"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"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@launchpad-ui/drawer",
|
3
|
-
"version": "0.1.
|
3
|
+
"version": "0.1.19",
|
4
4
|
"status": "alpha",
|
5
5
|
"publishConfig": {
|
6
6
|
"access": "public"
|
@@ -26,23 +26,23 @@
|
|
26
26
|
},
|
27
27
|
"source": "src/index.ts",
|
28
28
|
"dependencies": {
|
29
|
-
"@react-aria/overlays": "
|
30
|
-
"classix": "
|
31
|
-
"framer-motion": "
|
32
|
-
"@launchpad-ui/button": "~0.7.
|
33
|
-
"@launchpad-ui/focus-trap": "~0.1.
|
34
|
-
"@launchpad-ui/icons": "~0.6.
|
35
|
-
"@launchpad-ui/portal": "~0.1.
|
36
|
-
"@launchpad-ui/progress": "~0.5.
|
29
|
+
"@react-aria/overlays": "3.12.0",
|
30
|
+
"classix": "2.1.17",
|
31
|
+
"framer-motion": "7.6.1",
|
32
|
+
"@launchpad-ui/button": "~0.7.22",
|
33
|
+
"@launchpad-ui/focus-trap": "~0.1.4",
|
34
|
+
"@launchpad-ui/icons": "~0.6.14",
|
35
|
+
"@launchpad-ui/portal": "~0.1.2",
|
36
|
+
"@launchpad-ui/progress": "~0.5.15",
|
37
37
|
"@launchpad-ui/tokens": "~0.4.7"
|
38
38
|
},
|
39
39
|
"peerDependencies": {
|
40
|
-
"react": "
|
41
|
-
"react-dom": "
|
40
|
+
"react": "18.2.0",
|
41
|
+
"react-dom": "18.2.0"
|
42
42
|
},
|
43
43
|
"devDependencies": {
|
44
|
-
"react": "
|
45
|
-
"react-dom": "
|
44
|
+
"react": "18.2.0",
|
45
|
+
"react-dom": "18.2.0"
|
46
46
|
},
|
47
47
|
"scripts": {
|
48
48
|
"build": "vite build -c ../../vite.config.ts && tsc --project tsconfig.build.json",
|