@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.
Files changed (5) hide show
  1. package/dist/index.es.js +65 -39
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +86 -62
  4. package/dist/index.js.map +1 -1
  5. 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: { opacity: 1, transition: { duration: 0.15 } },
35
- hidden: { opacity: 0 }
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: { opacity: 0, x: "25%" },
45
+ hidden: {
46
+ opacity: 0,
47
+ x: "25%"
48
+ },
39
49
  visible: {
40
50
  opacity: 1,
41
51
  x: "0%",
42
- transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
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, { 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
- {
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: { duration: 0.15 },
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, { autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxs(
100
- m.div,
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
- /* @__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
- ) }) });
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", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
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":"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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":["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
- 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");
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: { opacity: 1, transition: { duration: 0.15 } },
55
- hidden: { opacity: 0 }
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: { opacity: 0, x: "25%" },
65
+ hidden: {
66
+ opacity: 0,
67
+ x: "25%"
68
+ },
59
69
  visible: {
60
70
  opacity: 1,
61
71
  x: "0%",
62
- transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
72
+ transition: {
73
+ type: "spring",
74
+ delay: 0.15,
75
+ duration: 0.2,
76
+ bounce: 0
77
+ }
63
78
  }
64
79
  };
65
- const loadFeatures = () => import(
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, { 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
- {
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: { duration: 0.15 },
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, { autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
120
- framerMotion.m.div,
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
- /* @__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
- ) }) });
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", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
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","Portal","jsx","LazyMotion","cx","m","FocusTrap","jsxs","IconButton","Close","Suspense","Progress"],"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":["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.18",
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": "^3.12.0",
30
- "classix": "^2.1.13",
31
- "framer-motion": "^7.6.1",
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",
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": "^18.0.0",
41
- "react-dom": "^18.0.0"
40
+ "react": "18.2.0",
41
+ "react-dom": "18.2.0"
42
42
  },
43
43
  "devDependencies": {
44
- "react": "^18.2.0",
45
- "react-dom": "^18.2.0"
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",