@launchpad-ui/drawer 0.5.9 → 0.5.11

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 +52 -85
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +52 -85
  4. package/dist/index.js.map +1 -1
  5. package/package.json +8 -8
package/dist/index.es.js CHANGED
@@ -32,30 +32,15 @@ const styles = {
32
32
  closeButton
33
33
  };
34
34
  const overlay = {
35
- visible: {
36
- opacity: 1,
37
- transition: {
38
- duration: 0.15
39
- }
40
- },
41
- hidden: {
42
- opacity: 0
43
- }
35
+ visible: { opacity: 1, transition: { duration: 0.15 } },
36
+ hidden: { opacity: 0 }
44
37
  };
45
38
  const slideRight = {
46
- hidden: {
47
- opacity: 0,
48
- x: "25%"
49
- },
39
+ hidden: { opacity: 0, x: "25%" },
50
40
  visible: {
51
41
  opacity: 1,
52
42
  x: "0%",
53
- transition: {
54
- type: "spring",
55
- delay: 0.15,
56
- duration: 0.2,
57
- bounce: 0
58
- }
43
+ transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
59
44
  }
60
45
  };
61
46
  const loadFeatures = () => import(
@@ -63,11 +48,7 @@ const loadFeatures = () => import(
63
48
  /* webpackExports: "domAnimation" */
64
49
  "framer-motion"
65
50
  ).then((res) => res.domAnimation);
66
- const Drawer = (props) => /* @__PURE__ */ jsx(Portal, {
67
- children: /* @__PURE__ */ jsx(DrawerContainer, {
68
- ...props
69
- })
70
- });
51
+ const Drawer = (props) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DrawerContainer, { ...props }) });
71
52
  const DrawerContainer = ({
72
53
  className,
73
54
  children,
@@ -79,9 +60,7 @@ const DrawerContainer = ({
79
60
  }) => {
80
61
  const ref = useRef(null);
81
62
  const [isFocusWithin, setIsFocusWithin] = useState(false);
82
- const {
83
- focusWithinProps
84
- } = useFocusWithin({
63
+ const { focusWithinProps } = useFocusWithin({
85
64
  onFocusWithinChange: (isFocusWithin2) => setIsFocusWithin(isFocusWithin2)
86
65
  });
87
66
  usePreventScroll();
@@ -119,59 +98,56 @@ const DrawerContainer = ({
119
98
  onCancel && onCancel();
120
99
  }
121
100
  };
122
- return /* @__PURE__ */ jsx(LazyMotion, {
123
- strict: true,
124
- features: loadFeatures,
125
- children: /* @__PURE__ */ jsx("div", {
101
+ return /* @__PURE__ */ jsx(LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsx(
102
+ "div",
103
+ {
126
104
  ...focusWithinProps,
127
105
  className: cx(styles.drawer, styles[size], className),
128
106
  "data-drawer": true,
129
107
  "data-test-id": testId,
130
108
  ref,
131
- children: /* @__PURE__ */ jsx(m.div, {
132
- initial: "hidden",
133
- animate: "visible",
134
- variants: overlay,
135
- transition: {
136
- duration: 0.15
137
- },
138
- role: "presentation",
139
- className: styles.overlay,
140
- onMouseDown: handleOverlayClick,
141
- children: /* @__PURE__ */ jsx(FocusTrap, {
142
- autoFocus: true,
143
- restoreFocus: true,
144
- children: /* @__PURE__ */ jsxs(m.div, {
145
- initial: "hidden",
146
- animate: "visible",
147
- variants: slideRight,
148
- role: "dialog",
149
- "aria-labelledby": DRAWER_LABELLED_BY,
150
- "aria-describedby": DRAWER_LABELLED_BY,
151
- "aria-modal": true,
152
- className: styles.content,
153
- tabIndex: -1,
154
- ...theme ? {
155
- "data-theme": theme
156
- } : {},
157
- children: [!hideCancel && /* @__PURE__ */ jsx(IconButton, {
158
- "aria-label": "close",
159
- icon: /* @__PURE__ */ jsx(Icon, {
160
- name: "cancel",
161
- size: "medium"
162
- }),
163
- className: styles.closeButton,
164
- onClick: onCancel,
165
- "data-test-id": "drawer-close-button"
166
- }), /* @__PURE__ */ jsx(Suspense, {
167
- fallback: /* @__PURE__ */ jsx(Progress, {}),
168
- children
169
- })]
170
- })
171
- })
172
- })
173
- })
174
- });
109
+ children: /* @__PURE__ */ jsx(
110
+ m.div,
111
+ {
112
+ initial: "hidden",
113
+ animate: "visible",
114
+ variants: overlay,
115
+ transition: { duration: 0.15 },
116
+ role: "presentation",
117
+ className: styles.overlay,
118
+ onMouseDown: handleOverlayClick,
119
+ children: /* @__PURE__ */ jsx(FocusTrap, { autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxs(
120
+ m.div,
121
+ {
122
+ initial: "hidden",
123
+ animate: "visible",
124
+ variants: slideRight,
125
+ role: "dialog",
126
+ "aria-labelledby": DRAWER_LABELLED_BY,
127
+ "aria-describedby": DRAWER_LABELLED_BY,
128
+ "aria-modal": true,
129
+ className: styles.content,
130
+ tabIndex: -1,
131
+ ...theme ? { "data-theme": theme } : {},
132
+ children: [
133
+ !hideCancel && /* @__PURE__ */ jsx(
134
+ IconButton,
135
+ {
136
+ "aria-label": "close",
137
+ icon: /* @__PURE__ */ jsx(Icon, { name: "cancel", size: "medium" }),
138
+ className: styles.closeButton,
139
+ onClick: onCancel,
140
+ "data-test-id": "drawer-close-button"
141
+ }
142
+ ),
143
+ /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Progress, {}), children })
144
+ ]
145
+ }
146
+ ) })
147
+ }
148
+ )
149
+ }
150
+ ) });
175
151
  };
176
152
  const DrawerHeader = ({
177
153
  className,
@@ -181,16 +157,7 @@ const DrawerHeader = ({
181
157
  "data-test-id": testId = "drawer-header",
182
158
  ...rest
183
159
  }) => {
184
- return /* @__PURE__ */ jsx("div", {
185
- "data-test-id": testId,
186
- className,
187
- ...rest,
188
- children: /* @__PURE__ */ jsx("h2", {
189
- id: DRAWER_LABELLED_BY,
190
- className: titleClassName,
191
- children
192
- })
193
- });
160
+ return /* @__PURE__ */ jsx("div", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
194
161
  };
195
162
  export {
196
163
  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 { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { useState, 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 theme?: 'dark' | 'default';\n hideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n <Portal>\n <DrawerContainer {...props} />\n </Portal>\n);\n\nconst DrawerContainer = ({\n className,\n children,\n onCancel,\n size = 'small',\n 'data-test-id': testId = 'drawer',\n theme,\n hideCancel = false,\n}: DrawerProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const [isFocusWithin, setIsFocusWithin] = useState(false);\n const { focusWithinProps } = useFocusWithin({\n onFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n });\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 && isFocusWithin) {\n close();\n }\n };\n\n const addOverlayAndEventHandler = () => {\n document.body.classList.add('has-overlay');\n document.addEventListener('keydown', handleEscape);\n };\n\n const removeOverlayAndEventHandler = () => {\n document.body.classList.remove('has-overlay');\n document.removeEventListener('keydown', handleEscape);\n };\n\n const close = () => {\n onCancel?.();\n };\n\n if (isFocusWithin) {\n addOverlayAndEventHandler();\n }\n\n if (!isFocusWithin) {\n removeOverlayAndEventHandler();\n }\n\n return () => {\n removeOverlayAndEventHandler();\n };\n }, [onCancel, testId, isFocusWithin]);\n\n const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target === event.currentTarget) {\n onCancel && onCancel();\n }\n };\n\n return (\n <LazyMotion strict features={loadFeatures}>\n <div\n {...focusWithinProps}\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-describedby={DRAWER_LABELLED_BY}\n aria-modal\n className={styles.content}\n tabIndex={-1}\n {...(theme ? { 'data-theme': theme } : {})}\n >\n {!hideCancel && (\n <IconButton\n aria-label=\"close\"\n icon={<Icon name=\"cancel\" size=\"medium\" />}\n className={styles.closeButton}\n onClick={onCancel}\n data-test-id=\"drawer-close-button\"\n />\n )}\n <Suspense fallback={<Progress />}>{children}</Suspense>\n </m.div>\n </FocusTrap>\n </m.div>\n </div>\n </LazyMotion>\n );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { ComponentProps } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = ComponentProps<'div'> & {\n 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 { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { useState, 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 theme?: 'dark' | 'default';\n hideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n <Portal>\n <DrawerContainer {...props} />\n </Portal>\n);\n\nconst DrawerContainer = ({\n className,\n children,\n onCancel,\n size = 'small',\n 'data-test-id': testId = 'drawer',\n theme,\n hideCancel = false,\n}: DrawerProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const [isFocusWithin, setIsFocusWithin] = useState(false);\n const { focusWithinProps } = useFocusWithin({\n onFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n });\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 && isFocusWithin) {\n close();\n }\n };\n\n const addOverlayAndEventHandler = () => {\n document.body.classList.add('has-overlay');\n document.addEventListener('keydown', handleEscape);\n };\n\n const removeOverlayAndEventHandler = () => {\n document.body.classList.remove('has-overlay');\n document.removeEventListener('keydown', handleEscape);\n };\n\n const close = () => {\n onCancel?.();\n };\n\n if (isFocusWithin) {\n addOverlayAndEventHandler();\n }\n\n if (!isFocusWithin) {\n removeOverlayAndEventHandler();\n }\n\n return () => {\n removeOverlayAndEventHandler();\n };\n }, [onCancel, testId, isFocusWithin]);\n\n const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target === event.currentTarget) {\n onCancel && onCancel();\n }\n };\n\n return (\n <LazyMotion strict features={loadFeatures}>\n <div\n {...focusWithinProps}\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-describedby={DRAWER_LABELLED_BY}\n aria-modal\n className={styles.content}\n tabIndex={-1}\n {...(theme ? { 'data-theme': theme } : {})}\n >\n {!hideCancel && (\n <IconButton\n aria-label=\"close\"\n icon={<Icon name=\"cancel\" size=\"medium\" />}\n className={styles.closeButton}\n onClick={onCancel}\n data-test-id=\"drawer-close-button\"\n />\n )}\n <Suspense fallback={<Progress />}>{children}</Suspense>\n </m.div>\n </FocusTrap>\n </m.div>\n </div>\n </LazyMotion>\n );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { ComponentProps } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = ComponentProps<'div'> & {\n 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":["isFocusWithin"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -56,30 +56,15 @@ const styles = {
56
56
  closeButton
57
57
  };
58
58
  const overlay = {
59
- visible: {
60
- opacity: 1,
61
- transition: {
62
- duration: 0.15
63
- }
64
- },
65
- hidden: {
66
- opacity: 0
67
- }
59
+ visible: { opacity: 1, transition: { duration: 0.15 } },
60
+ hidden: { opacity: 0 }
68
61
  };
69
62
  const slideRight = {
70
- hidden: {
71
- opacity: 0,
72
- x: "25%"
73
- },
63
+ hidden: { opacity: 0, x: "25%" },
74
64
  visible: {
75
65
  opacity: 1,
76
66
  x: "0%",
77
- transition: {
78
- type: "spring",
79
- delay: 0.15,
80
- duration: 0.2,
81
- bounce: 0
82
- }
67
+ transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
83
68
  }
84
69
  };
85
70
  const loadFeatures = () => import(
@@ -87,11 +72,7 @@ const loadFeatures = () => import(
87
72
  /* webpackExports: "domAnimation" */
88
73
  "framer-motion"
89
74
  ).then((res) => res.domAnimation);
90
- const Drawer = (props) => /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, {
91
- children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContainer, {
92
- ...props
93
- })
94
- });
75
+ const Drawer = (props) => /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContainer, { ...props }) });
95
76
  const DrawerContainer = ({
96
77
  className,
97
78
  children,
@@ -103,9 +84,7 @@ const DrawerContainer = ({
103
84
  }) => {
104
85
  const ref = react.useRef(null);
105
86
  const [isFocusWithin, setIsFocusWithin] = react.useState(false);
106
- const {
107
- focusWithinProps
108
- } = interactions.useFocusWithin({
87
+ const { focusWithinProps } = interactions.useFocusWithin({
109
88
  onFocusWithinChange: (isFocusWithin2) => setIsFocusWithin(isFocusWithin2)
110
89
  });
111
90
  overlays.usePreventScroll();
@@ -143,59 +122,56 @@ const DrawerContainer = ({
143
122
  onCancel && onCancel();
144
123
  }
145
124
  };
146
- return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, {
147
- strict: true,
148
- features: loadFeatures,
149
- children: /* @__PURE__ */ jsxRuntime.jsx("div", {
125
+ return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsxRuntime.jsx(
126
+ "div",
127
+ {
150
128
  ...focusWithinProps,
151
129
  className: classix.cx(styles.drawer, styles[size], className),
152
130
  "data-drawer": true,
153
131
  "data-test-id": testId,
154
132
  ref,
155
- children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.m.div, {
156
- initial: "hidden",
157
- animate: "visible",
158
- variants: overlay,
159
- transition: {
160
- duration: 0.15
161
- },
162
- role: "presentation",
163
- className: styles.overlay,
164
- onMouseDown: handleOverlayClick,
165
- children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, {
166
- autoFocus: true,
167
- restoreFocus: true,
168
- children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.m.div, {
169
- initial: "hidden",
170
- animate: "visible",
171
- variants: slideRight,
172
- role: "dialog",
173
- "aria-labelledby": DRAWER_LABELLED_BY,
174
- "aria-describedby": DRAWER_LABELLED_BY,
175
- "aria-modal": true,
176
- className: styles.content,
177
- tabIndex: -1,
178
- ...theme ? {
179
- "data-theme": theme
180
- } : {},
181
- children: [!hideCancel && /* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
182
- "aria-label": "close",
183
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, {
184
- name: "cancel",
185
- size: "medium"
186
- }),
187
- className: styles.closeButton,
188
- onClick: onCancel,
189
- "data-test-id": "drawer-close-button"
190
- }), /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, {
191
- fallback: /* @__PURE__ */ jsxRuntime.jsx(progress.Progress, {}),
192
- children
193
- })]
194
- })
195
- })
196
- })
197
- })
198
- });
133
+ children: /* @__PURE__ */ jsxRuntime.jsx(
134
+ framerMotion.m.div,
135
+ {
136
+ initial: "hidden",
137
+ animate: "visible",
138
+ variants: overlay,
139
+ transition: { duration: 0.15 },
140
+ role: "presentation",
141
+ className: styles.overlay,
142
+ onMouseDown: handleOverlayClick,
143
+ children: /* @__PURE__ */ jsxRuntime.jsx(focusTrap.FocusTrap, { autoFocus: true, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
144
+ framerMotion.m.div,
145
+ {
146
+ initial: "hidden",
147
+ animate: "visible",
148
+ variants: slideRight,
149
+ role: "dialog",
150
+ "aria-labelledby": DRAWER_LABELLED_BY,
151
+ "aria-describedby": DRAWER_LABELLED_BY,
152
+ "aria-modal": true,
153
+ className: styles.content,
154
+ tabIndex: -1,
155
+ ...theme ? { "data-theme": theme } : {},
156
+ children: [
157
+ !hideCancel && /* @__PURE__ */ jsxRuntime.jsx(
158
+ button.IconButton,
159
+ {
160
+ "aria-label": "close",
161
+ icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "cancel", size: "medium" }),
162
+ className: styles.closeButton,
163
+ onClick: onCancel,
164
+ "data-test-id": "drawer-close-button"
165
+ }
166
+ ),
167
+ /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(progress.Progress, {}), children })
168
+ ]
169
+ }
170
+ ) })
171
+ }
172
+ )
173
+ }
174
+ ) });
199
175
  };
200
176
  const DrawerHeader = ({
201
177
  className,
@@ -205,16 +181,7 @@ const DrawerHeader = ({
205
181
  "data-test-id": testId = "drawer-header",
206
182
  ...rest
207
183
  }) => {
208
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
209
- "data-test-id": testId,
210
- className,
211
- ...rest,
212
- children: /* @__PURE__ */ jsxRuntime.jsx("h2", {
213
- id: DRAWER_LABELLED_BY,
214
- className: titleClassName,
215
- children
216
- })
217
- });
184
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
218
185
  };
219
186
  exports.Drawer = Drawer;
220
187
  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 { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { useState, 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 theme?: 'dark' | 'default';\n hideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n <Portal>\n <DrawerContainer {...props} />\n </Portal>\n);\n\nconst DrawerContainer = ({\n className,\n children,\n onCancel,\n size = 'small',\n 'data-test-id': testId = 'drawer',\n theme,\n hideCancel = false,\n}: DrawerProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const [isFocusWithin, setIsFocusWithin] = useState(false);\n const { focusWithinProps } = useFocusWithin({\n onFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n });\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 && isFocusWithin) {\n close();\n }\n };\n\n const addOverlayAndEventHandler = () => {\n document.body.classList.add('has-overlay');\n document.addEventListener('keydown', handleEscape);\n };\n\n const removeOverlayAndEventHandler = () => {\n document.body.classList.remove('has-overlay');\n document.removeEventListener('keydown', handleEscape);\n };\n\n const close = () => {\n onCancel?.();\n };\n\n if (isFocusWithin) {\n addOverlayAndEventHandler();\n }\n\n if (!isFocusWithin) {\n removeOverlayAndEventHandler();\n }\n\n return () => {\n removeOverlayAndEventHandler();\n };\n }, [onCancel, testId, isFocusWithin]);\n\n const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target === event.currentTarget) {\n onCancel && onCancel();\n }\n };\n\n return (\n <LazyMotion strict features={loadFeatures}>\n <div\n {...focusWithinProps}\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-describedby={DRAWER_LABELLED_BY}\n aria-modal\n className={styles.content}\n tabIndex={-1}\n {...(theme ? { 'data-theme': theme } : {})}\n >\n {!hideCancel && (\n <IconButton\n aria-label=\"close\"\n icon={<Icon name=\"cancel\" size=\"medium\" />}\n className={styles.closeButton}\n onClick={onCancel}\n data-test-id=\"drawer-close-button\"\n />\n )}\n <Suspense fallback={<Progress />}>{children}</Suspense>\n </m.div>\n </FocusTrap>\n </m.div>\n </div>\n </LazyMotion>\n );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { ComponentProps } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = ComponentProps<'div'> & {\n 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":["jsx","Portal","useRef","useState","useFocusWithin","usePreventScroll","useEffect","LazyMotion","cx","m","FocusTrap","jsxs"],"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 { Icon } from '@launchpad-ui/icons';\nimport { Portal } from '@launchpad-ui/portal';\nimport { Progress } from '@launchpad-ui/progress';\nimport { useFocusWithin } from '@react-aria/interactions';\nimport { usePreventScroll } from '@react-aria/overlays';\nimport { cx } from 'classix';\nimport { LazyMotion, m } from 'framer-motion';\nimport { useState, 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 theme?: 'dark' | 'default';\n hideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n <Portal>\n <DrawerContainer {...props} />\n </Portal>\n);\n\nconst DrawerContainer = ({\n className,\n children,\n onCancel,\n size = 'small',\n 'data-test-id': testId = 'drawer',\n theme,\n hideCancel = false,\n}: DrawerProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const [isFocusWithin, setIsFocusWithin] = useState(false);\n const { focusWithinProps } = useFocusWithin({\n onFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n });\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 && isFocusWithin) {\n close();\n }\n };\n\n const addOverlayAndEventHandler = () => {\n document.body.classList.add('has-overlay');\n document.addEventListener('keydown', handleEscape);\n };\n\n const removeOverlayAndEventHandler = () => {\n document.body.classList.remove('has-overlay');\n document.removeEventListener('keydown', handleEscape);\n };\n\n const close = () => {\n onCancel?.();\n };\n\n if (isFocusWithin) {\n addOverlayAndEventHandler();\n }\n\n if (!isFocusWithin) {\n removeOverlayAndEventHandler();\n }\n\n return () => {\n removeOverlayAndEventHandler();\n };\n }, [onCancel, testId, isFocusWithin]);\n\n const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n if (event.target === event.currentTarget) {\n onCancel && onCancel();\n }\n };\n\n return (\n <LazyMotion strict features={loadFeatures}>\n <div\n {...focusWithinProps}\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-describedby={DRAWER_LABELLED_BY}\n aria-modal\n className={styles.content}\n tabIndex={-1}\n {...(theme ? { 'data-theme': theme } : {})}\n >\n {!hideCancel && (\n <IconButton\n aria-label=\"close\"\n icon={<Icon name=\"cancel\" size=\"medium\" />}\n className={styles.closeButton}\n onClick={onCancel}\n data-test-id=\"drawer-close-button\"\n />\n )}\n <Suspense fallback={<Progress />}>{children}</Suspense>\n </m.div>\n </FocusTrap>\n </m.div>\n </div>\n </LazyMotion>\n );\n};\n\nexport { Drawer };\nexport type { DrawerProps };\n","import type { ComponentProps } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\n\ntype DrawerHeaderProps = ComponentProps<'div'> & {\n 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":["jsx","Portal","useRef","useState","useFocusWithin","isFocusWithin","usePreventScroll","useEffect","LazyMotion","cx","m","FocusTrap","jsxs","IconButton","Icon","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.5.9",
3
+ "version": "0.5.11",
4
4
  "status": "alpha",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -26,13 +26,13 @@
26
26
  },
27
27
  "source": "src/index.ts",
28
28
  "dependencies": {
29
- "@react-aria/interactions": "3.20.0",
30
- "@react-aria/overlays": "3.19.0",
29
+ "@react-aria/interactions": "3.20.1",
30
+ "@react-aria/overlays": "3.20.0",
31
31
  "classix": "2.1.17",
32
- "framer-motion": "10.16.1",
33
- "@launchpad-ui/button": "~0.11.8",
34
- "@launchpad-ui/focus-trap": "~0.1.14",
35
- "@launchpad-ui/icons": "~0.14.8",
32
+ "framer-motion": "10.17.0",
33
+ "@launchpad-ui/button": "~0.11.9",
34
+ "@launchpad-ui/focus-trap": "~0.1.15",
35
+ "@launchpad-ui/icons": "~0.14.9",
36
36
  "@launchpad-ui/portal": "~0.1.4",
37
37
  "@launchpad-ui/progress": "~0.5.36",
38
38
  "@launchpad-ui/tokens": "~0.9.2"
@@ -46,7 +46,7 @@
46
46
  "react-dom": "18.2.0"
47
47
  },
48
48
  "scripts": {
49
- "build": "vite build -c ../../vite.config.ts && tsc --project tsconfig.build.json",
49
+ "build": "vite build -c ../../vite.config.mts && tsc --project tsconfig.build.json",
50
50
  "clean": "rm -rf dist",
51
51
  "lint": "eslint '**/*.{ts,tsx,js}' && stylelint '**/*.css' --ignore-path ../../.stylelintignore",
52
52
  "test": "vitest run --coverage"