@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.
Files changed (5) hide show
  1. package/dist/index.es.js +39 -65
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +62 -86
  4. package/dist/index.js.map +1 -1
  5. 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
- opacity: 1,
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
- 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, {
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
- autoFocus: true,
118
- restoreFocus: true,
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: [/* @__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
- });
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":["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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"}
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
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
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
- opacity: 1,
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 = () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespace(require(
65
+ const loadFeatures = () => import(
66
+ /* webpackChunkName: "lp-drawer-framer-features" */
67
+ /* webpackExports: "domAnimation" */
81
68
  "framer-motion"
82
- ))).then((res) => res.domAnimation);
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
- 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, {
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
- autoFocus: true,
136
- restoreFocus: true,
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: [/* @__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
- });
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":["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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"}
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;ACgBlC,MAAM,UAAoB;AAAA,EACxB,SAAS,EAAE,SAAS,GAAG,YAAY,EAAE,UAAU,OAAO;AAAA,EACtD,QAAQ,EAAE,SAAS,EAAE;AACvB;AAEA,MAAM,aAAuB;AAAA,EAC3B,QAAQ,EAAE,SAAS,GAAG,GAAG,MAAM;AAAA,EAC/B,SAAS;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,IACH,YAAY,EAAE,MAAM,UAAU,OAAO,MAAM,UAAU,KAAK,QAAQ,EAAE;AAAA,EACtE;AACF;AAEA,MAAM,eAAe,MACnB;AAAA;AAAA;AAAA,EAGE;AAAA,EACA,KAAK,CAAC,QAAQ,IAAI,YAAY;AAUlC,MAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,gBAAgB,SAAS;AAC3B,MAAmB;AACX,QAAA,MAAMA,aAAuB,IAAI;AAEtBC,WAAAA;AAEjBC,QAAAA,UAAU,MAAM;AACR,UAAA,eAAe,CAAC,UAAyB;AAC7C,YAAM,yBAAyB;AACzB,YAAA,SAAS,CAAC,GAAG,SAAS,iBAAiB,eAAe,CAAC,EAAE;AAC/D,UAAI,MAAM,QAAQ,YAAY,WAAW,IAAI,SAAS;AAC9C;MACR;AAAA,IAAA;AAGF,UAAM,QAAQ,MAAM;AACP;AAAA,IAAA;AAGJ,aAAA,KAAK,UAAU,IAAI,aAAa;AAChC,aAAA,iBAAiB,WAAW,YAAY;AAEjD,WAAO,MAAM;AACF,eAAA,KAAK,UAAU,OAAO,aAAa;AACnC,eAAA,oBAAoB,WAAW,YAAY;AAAA,IAAA;AAAA,EACtD,GACC,CAAC,UAAU,MAAM,CAAC;AAEf,QAAA,qBAAqB,CAAC,UAAsC;AAC5D,QAAA,MAAM,WAAW,MAAM,eAAe;AACxC,kBAAY,SAAS;AAAA,IACvB;AAAA,EAAA;AAGF,wCACGC,OAAAA,QACC,EAAA,UAAAC,2BAAAA,IAACC,aAAAA,cAAW,QAAM,MAAC,UAAU,cAC3B,UAAAD,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE,QAAG,GAAA,OAAO,QAAQ,OAAO,OAAO,SAAS;AAAA,MACpD,eAAW;AAAA,MACX,gBAAc;AAAA,MACd;AAAA,MAEA,UAAAF,2BAAA;AAAA,QAACG,aAAAA,EAAE;AAAA,QAAF;AAAA,UACC,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,UAAU;AAAA,UACV,YAAY,EAAE,UAAU,KAAK;AAAA,UAC7B,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAClB,aAAa;AAAA,UAEb,UAACH,2BAAAA,IAAAI,UAAAA,WAAA,EAAU,WAAS,MAAC,cAAY,MAC/B,UAAAC,2BAAA;AAAA,YAACF,aAAAA,EAAE;AAAA,YAAF;AAAA,cACC,SAAQ;AAAA,cACR,SAAQ;AAAA,cACR,UAAU;AAAA,cACV,MAAK;AAAA,cACL,mBAAiB;AAAA,cACjB,cAAU;AAAA,cACV,WAAW,OAAO;AAAA,cAClB,UAAU;AAAA,cAEV,UAAA;AAAA,gBAAAH,2BAAA;AAAA,kBAACM,OAAA;AAAA,kBAAA;AAAA,oBACC,cAAW;AAAA,oBACX,MAAMN,2BAAAA,IAACO,MAAAA,OAAM,EAAA,MAAK,SAAS,CAAA;AAAA,oBAC3B,WAAW,OAAO;AAAA,oBAClB,SAAS;AAAA,oBACT,gBAAa;AAAA,kBAAA;AAAA,gBACf;AAAA,+CACCC,MAAAA,UAAS,EAAA,UAAWR,2BAAAA,IAAAS,SAAAA,UAAA,CAAS,CAAA,GAAK,UAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,GAEhD;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;ACpHA,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB,SAAS;AAAA,KACtB;AACL,MAAyB;AACvB,SACGT,2BAAAA,IAAA,OAAA,EAAI,gBAAc,QAAQ,WAAuB,GAAG,MACnD,UAACA,2BAAA,IAAA,MAAA,EAAG,IAAI,oBAAoB,WAAW,gBACpC,UACH,EACF,CAAA;AAEJ;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/drawer",
3
- "version": "0.1.16",
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.19",
33
- "@launchpad-ui/focus-trap": "~0.1.2",
34
- "@launchpad-ui/icons": "~0.6.11",
35
- "@launchpad-ui/portal": "~0.1.0",
36
- "@launchpad-ui/progress": "~0.5.12",
37
- "@launchpad-ui/tokens": "~0.4.5"
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",