@launchpad-ui/drawer 0.1.24 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Drawer.d.ts +2 -1
- package/dist/Drawer.d.ts.map +1 -1
- package/dist/index.es.js +3 -2
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/Drawer.d.ts
CHANGED
|
@@ -5,8 +5,9 @@ type DrawerProps = {
|
|
|
5
5
|
onCancel?(): void;
|
|
6
6
|
'data-test-id'?: string;
|
|
7
7
|
size?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';
|
|
8
|
+
hideCancel?: boolean;
|
|
8
9
|
};
|
|
9
|
-
declare const Drawer: ({ className, children, onCancel, size, "data-test-id": testId, }: DrawerProps) => JSX.Element;
|
|
10
|
+
declare const Drawer: ({ className, children, onCancel, size, "data-test-id": testId, hideCancel, }: DrawerProps) => JSX.Element;
|
|
10
11
|
export { Drawer };
|
|
11
12
|
export type { DrawerProps };
|
|
12
13
|
//# sourceMappingURL=Drawer.d.ts.map
|
package/dist/Drawer.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAoCnD,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAoCnD,KAAK,WAAW,GAAG;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,MAAM,iFAOT,WAAW,gBA+Eb,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}
|
package/dist/index.es.js
CHANGED
|
@@ -67,7 +67,8 @@ const Drawer = ({
|
|
|
67
67
|
children,
|
|
68
68
|
onCancel,
|
|
69
69
|
size = "small",
|
|
70
|
-
"data-test-id": testId = "drawer"
|
|
70
|
+
"data-test-id": testId = "drawer",
|
|
71
|
+
hideCancel = false
|
|
71
72
|
}) => {
|
|
72
73
|
const ref = useRef(null);
|
|
73
74
|
usePreventScroll();
|
|
@@ -125,7 +126,7 @@ const Drawer = ({
|
|
|
125
126
|
"aria-modal": true,
|
|
126
127
|
className: styles.content,
|
|
127
128
|
tabIndex: -1,
|
|
128
|
-
children: [/* @__PURE__ */ jsx(IconButton, {
|
|
129
|
+
children: [!hideCancel && /* @__PURE__ */ jsx(IconButton, {
|
|
129
130
|
"aria-label": "close",
|
|
130
131
|
icon: /* @__PURE__ */ jsx(Close, {
|
|
131
132
|
size: "medium"
|
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
|
|
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 hideCancel?: boolean;\n};\n\nconst Drawer = ({\n className,\n children,\n onCancel,\n size = 'small',\n 'data-test-id': testId = 'drawer',\n hideCancel = false,\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 {!hideCancel && (\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 )}\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","hideCancel","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
|
@@ -85,7 +85,8 @@ const Drawer = ({
|
|
|
85
85
|
children,
|
|
86
86
|
onCancel,
|
|
87
87
|
size = "small",
|
|
88
|
-
"data-test-id": testId = "drawer"
|
|
88
|
+
"data-test-id": testId = "drawer",
|
|
89
|
+
hideCancel = false
|
|
89
90
|
}) => {
|
|
90
91
|
const ref = react.useRef(null);
|
|
91
92
|
overlays.usePreventScroll();
|
|
@@ -143,7 +144,7 @@ const Drawer = ({
|
|
|
143
144
|
"aria-modal": true,
|
|
144
145
|
className: styles.content,
|
|
145
146
|
tabIndex: -1,
|
|
146
|
-
children: [/* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
|
|
147
|
+
children: [!hideCancel && /* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
|
|
147
148
|
"aria-label": "close",
|
|
148
149
|
icon: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, {
|
|
149
150
|
size: "medium"
|
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
|
|
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 hideCancel?: boolean;\n};\n\nconst Drawer = ({\n className,\n children,\n onCancel,\n size = 'small',\n 'data-test-id': testId = 'drawer',\n hideCancel = false,\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 {!hideCancel && (\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 )}\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","hideCancel","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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"}
|