@launchpad-ui/drawer 0.5.6 → 0.5.8

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 +85 -52
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +85 -52
  4. package/dist/index.js.map +1 -1
  5. package/package.json +5 -5
package/dist/index.es.js CHANGED
@@ -32,15 +32,30 @@ const styles = {
32
32
  closeButton
33
33
  };
34
34
  const overlay = {
35
- visible: { opacity: 1, transition: { duration: 0.15 } },
36
- hidden: { opacity: 0 }
35
+ visible: {
36
+ opacity: 1,
37
+ transition: {
38
+ duration: 0.15
39
+ }
40
+ },
41
+ hidden: {
42
+ opacity: 0
43
+ }
37
44
  };
38
45
  const slideRight = {
39
- hidden: { opacity: 0, x: "25%" },
46
+ hidden: {
47
+ opacity: 0,
48
+ x: "25%"
49
+ },
40
50
  visible: {
41
51
  opacity: 1,
42
52
  x: "0%",
43
- transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
53
+ transition: {
54
+ type: "spring",
55
+ delay: 0.15,
56
+ duration: 0.2,
57
+ bounce: 0
58
+ }
44
59
  }
45
60
  };
46
61
  const loadFeatures = () => import(
@@ -48,7 +63,11 @@ const loadFeatures = () => import(
48
63
  /* webpackExports: "domAnimation" */
49
64
  "framer-motion"
50
65
  ).then((res) => res.domAnimation);
51
- const Drawer = (props) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DrawerContainer, { ...props }) });
66
+ const Drawer = (props) => /* @__PURE__ */ jsx(Portal, {
67
+ children: /* @__PURE__ */ jsx(DrawerContainer, {
68
+ ...props
69
+ })
70
+ });
52
71
  const DrawerContainer = ({
53
72
  className,
54
73
  children,
@@ -60,7 +79,9 @@ const DrawerContainer = ({
60
79
  }) => {
61
80
  const ref = useRef(null);
62
81
  const [isFocusWithin, setIsFocusWithin] = useState(false);
63
- const { focusWithinProps } = useFocusWithin({
82
+ const {
83
+ focusWithinProps
84
+ } = useFocusWithin({
64
85
  onFocusWithinChange: (isFocusWithin2) => setIsFocusWithin(isFocusWithin2)
65
86
  });
66
87
  usePreventScroll();
@@ -98,56 +119,59 @@ const DrawerContainer = ({
98
119
  onCancel && onCancel();
99
120
  }
100
121
  };
101
- return /* @__PURE__ */ jsx(LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsx(
102
- "div",
103
- {
122
+ return /* @__PURE__ */ jsx(LazyMotion, {
123
+ strict: true,
124
+ features: loadFeatures,
125
+ children: /* @__PURE__ */ jsx("div", {
104
126
  ...focusWithinProps,
105
127
  className: cx(styles.drawer, styles[size], className),
106
128
  "data-drawer": true,
107
129
  "data-test-id": testId,
108
130
  ref,
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
- ) });
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
+ });
151
175
  };
152
176
  const DrawerHeader = ({
153
177
  className,
@@ -157,7 +181,16 @@ const DrawerHeader = ({
157
181
  "data-test-id": testId = "drawer-header",
158
182
  ...rest
159
183
  }) => {
160
- return /* @__PURE__ */ jsx("div", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
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
+ });
161
194
  };
162
195
  export {
163
196
  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":["isFocusWithin"],"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":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -56,15 +56,30 @@ const styles = {
56
56
  closeButton
57
57
  };
58
58
  const overlay = {
59
- visible: { opacity: 1, transition: { duration: 0.15 } },
60
- hidden: { opacity: 0 }
59
+ visible: {
60
+ opacity: 1,
61
+ transition: {
62
+ duration: 0.15
63
+ }
64
+ },
65
+ hidden: {
66
+ opacity: 0
67
+ }
61
68
  };
62
69
  const slideRight = {
63
- hidden: { opacity: 0, x: "25%" },
70
+ hidden: {
71
+ opacity: 0,
72
+ x: "25%"
73
+ },
64
74
  visible: {
65
75
  opacity: 1,
66
76
  x: "0%",
67
- transition: { type: "spring", delay: 0.15, duration: 0.2, bounce: 0 }
77
+ transition: {
78
+ type: "spring",
79
+ delay: 0.15,
80
+ duration: 0.2,
81
+ bounce: 0
82
+ }
68
83
  }
69
84
  };
70
85
  const loadFeatures = () => import(
@@ -72,7 +87,11 @@ const loadFeatures = () => import(
72
87
  /* webpackExports: "domAnimation" */
73
88
  "framer-motion"
74
89
  ).then((res) => res.domAnimation);
75
- const Drawer = (props) => /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContainer, { ...props }) });
90
+ const Drawer = (props) => /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, {
91
+ children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContainer, {
92
+ ...props
93
+ })
94
+ });
76
95
  const DrawerContainer = ({
77
96
  className,
78
97
  children,
@@ -84,7 +103,9 @@ const DrawerContainer = ({
84
103
  }) => {
85
104
  const ref = react.useRef(null);
86
105
  const [isFocusWithin, setIsFocusWithin] = react.useState(false);
87
- const { focusWithinProps } = interactions.useFocusWithin({
106
+ const {
107
+ focusWithinProps
108
+ } = interactions.useFocusWithin({
88
109
  onFocusWithinChange: (isFocusWithin2) => setIsFocusWithin(isFocusWithin2)
89
110
  });
90
111
  overlays.usePreventScroll();
@@ -122,56 +143,59 @@ const DrawerContainer = ({
122
143
  onCancel && onCancel();
123
144
  }
124
145
  };
125
- return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsxRuntime.jsx(
126
- "div",
127
- {
146
+ return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, {
147
+ strict: true,
148
+ features: loadFeatures,
149
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", {
128
150
  ...focusWithinProps,
129
151
  className: classix.cx(styles.drawer, styles[size], className),
130
152
  "data-drawer": true,
131
153
  "data-test-id": testId,
132
154
  ref,
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
- ) });
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
+ });
175
199
  };
176
200
  const DrawerHeader = ({
177
201
  className,
@@ -181,7 +205,16 @@ const DrawerHeader = ({
181
205
  "data-test-id": testId = "drawer-header",
182
206
  ...rest
183
207
  }) => {
184
- return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": testId, className, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { id: DRAWER_LABELLED_BY, className: titleClassName, children }) });
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
+ });
185
218
  };
186
219
  exports.Drawer = Drawer;
187
220
  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","isFocusWithin","usePreventScroll","useEffect","LazyMotion","cx","m","FocusTrap","jsxs","IconButton","Icon","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 { 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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/drawer",
3
- "version": "0.5.6",
3
+ "version": "0.5.8",
4
4
  "status": "alpha",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -30,12 +30,12 @@
30
30
  "@react-aria/overlays": "3.19.0",
31
31
  "classix": "2.1.17",
32
32
  "framer-motion": "10.16.1",
33
- "@launchpad-ui/button": "~0.11.5",
33
+ "@launchpad-ui/button": "~0.11.7",
34
34
  "@launchpad-ui/focus-trap": "~0.1.14",
35
- "@launchpad-ui/icons": "~0.14.5",
35
+ "@launchpad-ui/icons": "~0.14.7",
36
36
  "@launchpad-ui/portal": "~0.1.4",
37
- "@launchpad-ui/progress": "~0.5.34",
38
- "@launchpad-ui/tokens": "~0.9.0"
37
+ "@launchpad-ui/progress": "~0.5.36",
38
+ "@launchpad-ui/tokens": "~0.9.2"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "react": "18.2.0",