@launchpad-ui/drawer 0.1.16 → 0.1.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/index.es.js +39 -65
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +62 -86
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
package/dist/index.es.js
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import './style.css';
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
2
3
|
import { IconButton } from "@launchpad-ui/button";
|
3
4
|
import { FocusTrap } from "@launchpad-ui/focus-trap";
|
4
5
|
import { Close } from "@launchpad-ui/icons";
|
@@ -8,7 +9,6 @@ import { usePreventScroll } from "@react-aria/overlays";
|
|
8
9
|
import { cx } from "classix";
|
9
10
|
import { LazyMotion, m } from "framer-motion";
|
10
11
|
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,30 +31,15 @@ const styles = {
|
|
31
31
|
closeButton
|
32
32
|
};
|
33
33
|
const overlay = {
|
34
|
-
visible: {
|
35
|
-
|
36
|
-
transition: {
|
37
|
-
duration: 0.15
|
38
|
-
}
|
39
|
-
},
|
40
|
-
hidden: {
|
41
|
-
opacity: 0
|
42
|
-
}
|
34
|
+
visible: { opacity: 1, transition: { duration: 0.15 } },
|
35
|
+
hidden: { opacity: 0 }
|
43
36
|
};
|
44
37
|
const slideRight = {
|
45
|
-
hidden: {
|
46
|
-
opacity: 0,
|
47
|
-
x: "25%"
|
48
|
-
},
|
38
|
+
hidden: { opacity: 0, x: "25%" },
|
49
39
|
visible: {
|
50
40
|
opacity: 1,
|
51
41
|
x: "0%",
|
52
|
-
transition: {
|
53
|
-
type: "spring",
|
54
|
-
delay: 0.15,
|
55
|
-
duration: 0.2,
|
56
|
-
bounce: 0
|
57
|
-
}
|
42
|
+
transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
|
58
43
|
}
|
59
44
|
};
|
60
45
|
const loadFeatures = () => import(
|
@@ -94,29 +79,26 @@ const Drawer = ({
|
|
94
79
|
onCancel && onCancel();
|
95
80
|
}
|
96
81
|
};
|
97
|
-
return /* @__PURE__ */ jsx(Portal, {
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
82
|
+
return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsx(
|
83
|
+
"div",
|
84
|
+
{
|
85
|
+
className: cx(styles.drawer, styles[size], className),
|
86
|
+
"data-drawer": true,
|
87
|
+
"data-test-id": testId,
|
88
|
+
ref,
|
89
|
+
children: /* @__PURE__ */ jsx(
|
90
|
+
m.div,
|
91
|
+
{
|
107
92
|
initial: "hidden",
|
108
93
|
animate: "visible",
|
109
94
|
variants: overlay,
|
110
|
-
transition: {
|
111
|
-
duration: 0.15
|
112
|
-
},
|
95
|
+
transition: { duration: 0.15 },
|
113
96
|
role: "presentation",
|
114
97
|
className: styles.overlay,
|
115
98
|
onMouseDown: handleOverlayClick,
|
116
|
-
children: /* @__PURE__ */ jsx(FocusTrap, {
|
117
|
-
|
118
|
-
|
119
|
-
children: /* @__PURE__ */ jsxs(m.div, {
|
99
|
+
children: /* @__PURE__ */ jsx(FocusTrap, { autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxs(
|
100
|
+
m.div,
|
101
|
+
{
|
120
102
|
initial: "hidden",
|
121
103
|
animate: "visible",
|
122
104
|
variants: slideRight,
|
@@ -125,24 +107,25 @@ const Drawer = ({
|
|
125
107
|
"aria-modal": true,
|
126
108
|
className: styles.content,
|
127
109
|
tabIndex: -1,
|
128
|
-
children: [
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
110
|
+
children: [
|
111
|
+
/* @__PURE__ */ jsx(
|
112
|
+
IconButton,
|
113
|
+
{
|
114
|
+
"aria-label": "close",
|
115
|
+
icon: /* @__PURE__ */ jsx(Close, { size: "medium" }),
|
116
|
+
className: styles.closeButton,
|
117
|
+
onClick: onCancel,
|
118
|
+
"data-test-id": "drawer-close-button"
|
119
|
+
}
|
120
|
+
),
|
121
|
+
/* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Progress, {}), children })
|
122
|
+
]
|
123
|
+
}
|
124
|
+
) })
|
125
|
+
}
|
126
|
+
)
|
127
|
+
}
|
128
|
+
) }) });
|
146
129
|
};
|
147
130
|
const DrawerHeader = ({
|
148
131
|
className,
|
@@ -152,16 +135,7 @@ const DrawerHeader = ({
|
|
152
135
|
"data-test-id": testId = "drawer-header",
|
153
136
|
...rest
|
154
137
|
}) => {
|
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
|
-
});
|
138
|
+
return /* @__PURE__ */ jsx("div", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
|
165
139
|
};
|
166
140
|
export {
|
167
141
|
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":[
|
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":"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"}
|
package/dist/index.js
CHANGED
@@ -1,6 +1,25 @@
|
|
1
1
|
require('./style.css');
|
2
2
|
"use strict";
|
3
|
-
|
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
|
+
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");
|
4
23
|
const button = require("@launchpad-ui/button");
|
5
24
|
const focusTrap = require("@launchpad-ui/focus-trap");
|
6
25
|
const icons = require("@launchpad-ui/icons");
|
@@ -10,25 +29,6 @@ const overlays = require("@react-aria/overlays");
|
|
10
29
|
const classix = require("classix");
|
11
30
|
const framerMotion = require("framer-motion");
|
12
31
|
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,35 +51,22 @@ const styles = {
|
|
51
51
|
closeButton
|
52
52
|
};
|
53
53
|
const overlay = {
|
54
|
-
visible: {
|
55
|
-
|
56
|
-
transition: {
|
57
|
-
duration: 0.15
|
58
|
-
}
|
59
|
-
},
|
60
|
-
hidden: {
|
61
|
-
opacity: 0
|
62
|
-
}
|
54
|
+
visible: { opacity: 1, transition: { duration: 0.15 } },
|
55
|
+
hidden: { opacity: 0 }
|
63
56
|
};
|
64
57
|
const slideRight = {
|
65
|
-
hidden: {
|
66
|
-
opacity: 0,
|
67
|
-
x: "25%"
|
68
|
-
},
|
58
|
+
hidden: { opacity: 0, x: "25%" },
|
69
59
|
visible: {
|
70
60
|
opacity: 1,
|
71
61
|
x: "0%",
|
72
|
-
transition: {
|
73
|
-
type: "spring",
|
74
|
-
delay: 0.15,
|
75
|
-
duration: 0.2,
|
76
|
-
bounce: 0
|
77
|
-
}
|
62
|
+
transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
|
78
63
|
}
|
79
64
|
};
|
80
|
-
const loadFeatures = () =>
|
65
|
+
const loadFeatures = () => import(
|
66
|
+
/* webpackChunkName: "lp-drawer-framer-features" */
|
67
|
+
/* webpackExports: "domAnimation" */
|
81
68
|
"framer-motion"
|
82
|
-
)
|
69
|
+
).then((res) => res.domAnimation);
|
83
70
|
const Drawer = ({
|
84
71
|
className,
|
85
72
|
children,
|
@@ -112,29 +99,26 @@ const Drawer = ({
|
|
112
99
|
onCancel && onCancel();
|
113
100
|
}
|
114
101
|
};
|
115
|
-
return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, {
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
102
|
+
return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsxRuntime.jsx(
|
103
|
+
"div",
|
104
|
+
{
|
105
|
+
className: classix.cx(styles.drawer, styles[size], className),
|
106
|
+
"data-drawer": true,
|
107
|
+
"data-test-id": testId,
|
108
|
+
ref,
|
109
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
110
|
+
framerMotion.m.div,
|
111
|
+
{
|
125
112
|
initial: "hidden",
|
126
113
|
animate: "visible",
|
127
114
|
variants: overlay,
|
128
|
-
transition: {
|
129
|
-
duration: 0.15
|
130
|
-
},
|
115
|
+
transition: { duration: 0.15 },
|
131
116
|
role: "presentation",
|
132
117
|
className: styles.overlay,
|
133
118
|
onMouseDown: handleOverlayClick,
|
134
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, {
|
135
|
-
|
136
|
-
|
137
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.m.div, {
|
119
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, { autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
120
|
+
framerMotion.m.div,
|
121
|
+
{
|
138
122
|
initial: "hidden",
|
139
123
|
animate: "visible",
|
140
124
|
variants: slideRight,
|
@@ -143,24 +127,25 @@ const Drawer = ({
|
|
143
127
|
"aria-modal": true,
|
144
128
|
className: styles.content,
|
145
129
|
tabIndex: -1,
|
146
|
-
children: [
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
130
|
+
children: [
|
131
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
132
|
+
button.IconButton,
|
133
|
+
{
|
134
|
+
"aria-label": "close",
|
135
|
+
icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, { size: "medium" }),
|
136
|
+
className: styles.closeButton,
|
137
|
+
onClick: onCancel,
|
138
|
+
"data-test-id": "drawer-close-button"
|
139
|
+
}
|
140
|
+
),
|
141
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(progress.Progress, {}), children })
|
142
|
+
]
|
143
|
+
}
|
144
|
+
) })
|
145
|
+
}
|
146
|
+
)
|
147
|
+
}
|
148
|
+
) }) });
|
164
149
|
};
|
165
150
|
const DrawerHeader = ({
|
166
151
|
className,
|
@@ -170,16 +155,7 @@ const DrawerHeader = ({
|
|
170
155
|
"data-test-id": testId = "drawer-header",
|
171
156
|
...rest
|
172
157
|
}) => {
|
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
|
-
});
|
158
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
|
183
159
|
};
|
184
160
|
exports.Drawer = Drawer;
|
185
161
|
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":["
|
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","Portal","jsx","LazyMotion","cx","m","FocusTrap","jsxs","IconButton","Close","Suspense","Progress"],"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.18",
|
4
4
|
"status": "alpha",
|
5
5
|
"publishConfig": {
|
6
6
|
"access": "public"
|
@@ -29,12 +29,12 @@
|
|
29
29
|
"@react-aria/overlays": "^3.12.0",
|
30
30
|
"classix": "^2.1.13",
|
31
31
|
"framer-motion": "^7.6.1",
|
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.
|
37
|
-
"@launchpad-ui/tokens": "~0.4.
|
32
|
+
"@launchpad-ui/button": "~0.7.21",
|
33
|
+
"@launchpad-ui/focus-trap": "~0.1.3",
|
34
|
+
"@launchpad-ui/icons": "~0.6.13",
|
35
|
+
"@launchpad-ui/portal": "~0.1.1",
|
36
|
+
"@launchpad-ui/progress": "~0.5.14",
|
37
|
+
"@launchpad-ui/tokens": "~0.4.7"
|
38
38
|
},
|
39
39
|
"peerDependencies": {
|
40
40
|
"react": "^18.0.0",
|