@launchpad-ui/drawer 0.5.18 → 0.5.20
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.map +1 -1
- package/dist/DrawerHeader.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 +9 -9
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;AAqCnD,KAAK,WAAW,GAAG;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../src/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCnD,KAAK,WAAW,GAAG;IAClB,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,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,4CAIjC,CAAC;AA8GF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../src/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;
|
|
1
|
+
{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../src/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,KAAK,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,YAAY,sFAQf,iBAAiB,4CAQnB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
|
package/dist/index.es.js
CHANGED
|
@@ -92,10 +92,10 @@ const DrawerContainer = ({
|
|
|
92
92
|
return () => {
|
|
93
93
|
removeOverlayAndEventHandler();
|
|
94
94
|
};
|
|
95
|
-
}, [onCancel,
|
|
95
|
+
}, [onCancel, isFocusWithin]);
|
|
96
96
|
const handleOverlayClick = (event) => {
|
|
97
97
|
if (event.target === event.currentTarget) {
|
|
98
|
-
onCancel
|
|
98
|
+
onCancel == null ? void 0 : onCancel();
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
101
|
return /* @__PURE__ */ jsx(LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsx(
|
|
@@ -152,6 +152,7 @@ const DrawerContainer = ({
|
|
|
152
152
|
const DrawerHeader = ({
|
|
153
153
|
className,
|
|
154
154
|
children,
|
|
155
|
+
// biome-ignore lint/correctness/noUnusedVariables: <explanation>
|
|
155
156
|
titleID,
|
|
156
157
|
titleClassName,
|
|
157
158
|
"data-test-id": testId = "drawer-header",
|
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 {
|
|
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 { Suspense, useEffect, useRef, useState } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\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\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\t// biome-ignore lint/correctness/noUnusedVariables: <explanation>\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\n};\n\nexport { DrawerHeader };\nexport type { DrawerHeaderProps };\n"],"names":["isFocusWithin"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -116,10 +116,10 @@ const DrawerContainer = ({
|
|
|
116
116
|
return () => {
|
|
117
117
|
removeOverlayAndEventHandler();
|
|
118
118
|
};
|
|
119
|
-
}, [onCancel,
|
|
119
|
+
}, [onCancel, isFocusWithin]);
|
|
120
120
|
const handleOverlayClick = (event) => {
|
|
121
121
|
if (event.target === event.currentTarget) {
|
|
122
|
-
onCancel
|
|
122
|
+
onCancel == null ? void 0 : onCancel();
|
|
123
123
|
}
|
|
124
124
|
};
|
|
125
125
|
return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LazyMotion, { strict: true, features: loadFeatures, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -176,6 +176,7 @@ const DrawerContainer = ({
|
|
|
176
176
|
const DrawerHeader = ({
|
|
177
177
|
className,
|
|
178
178
|
children,
|
|
179
|
+
// biome-ignore lint/correctness/noUnusedVariables: <explanation>
|
|
179
180
|
titleID,
|
|
180
181
|
titleClassName,
|
|
181
182
|
"data-test-id": testId = "drawer-header",
|
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 {
|
|
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 { Suspense, useEffect, useRef, useState } from 'react';\n\nimport { DRAWER_LABELLED_BY } from './constants';\nimport styles from './styles/Drawer.module.css';\n\nconst overlay: Variants = {\n\tvisible: { opacity: 1, transition: { duration: 0.15 } },\n\thidden: { opacity: 0 },\n};\n\nconst slideRight: Variants = {\n\thidden: { opacity: 0, x: '25%' },\n\tvisible: {\n\t\topacity: 1,\n\t\tx: '0%',\n\t\ttransition: { type: 'spring', delay: 0.15, duration: 0.2, bounce: 0 },\n\t},\n};\n\nconst loadFeatures = () =>\n\timport(\n\t\t/* webpackChunkName: \"lp-drawer-framer-features\" */\n\t\t/* webpackExports: \"domAnimation\" */\n\t\t'framer-motion'\n\t).then((res) => res.domAnimation);\n\ntype DrawerProps = {\n\tchildren?: ReactNode;\n\tclassName?: string;\n\tonCancel?(): void;\n\t'data-test-id'?: string;\n\tsize?: 'small' | 'medium' | 'large' | 'xLarge' | 'full';\n\ttheme?: 'dark' | 'default';\n\thideCancel?: boolean;\n};\n\nconst Drawer = (props: DrawerProps) => (\n\t<Portal>\n\t\t<DrawerContainer {...props} />\n\t</Portal>\n);\n\nconst DrawerContainer = ({\n\tclassName,\n\tchildren,\n\tonCancel,\n\tsize = 'small',\n\t'data-test-id': testId = 'drawer',\n\ttheme,\n\thideCancel = false,\n}: DrawerProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst [isFocusWithin, setIsFocusWithin] = useState(false);\n\tconst { focusWithinProps } = useFocusWithin({\n\t\tonFocusWithinChange: (isFocusWithin) => setIsFocusWithin(isFocusWithin),\n\t});\n\n\tusePreventScroll();\n\n\tuseEffect(() => {\n\t\tconst handleEscape = (event: KeyboardEvent) => {\n\t\t\tevent.stopImmediatePropagation();\n\t\t\tconst latest = [...document.querySelectorAll('[data-drawer]')].pop();\n\t\t\tif (event.key === 'Escape' && latest === ref.current && isFocusWithin) {\n\t\t\t\tclose();\n\t\t\t}\n\t\t};\n\n\t\tconst addOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.add('has-overlay');\n\t\t\tdocument.addEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst removeOverlayAndEventHandler = () => {\n\t\t\tdocument.body.classList.remove('has-overlay');\n\t\t\tdocument.removeEventListener('keydown', handleEscape);\n\t\t};\n\n\t\tconst close = () => {\n\t\t\tonCancel?.();\n\t\t};\n\n\t\tif (isFocusWithin) {\n\t\t\taddOverlayAndEventHandler();\n\t\t}\n\n\t\tif (!isFocusWithin) {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t}\n\n\t\treturn () => {\n\t\t\tremoveOverlayAndEventHandler();\n\t\t};\n\t}, [onCancel, isFocusWithin]);\n\n\tconst handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonCancel?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t<LazyMotion strict features={loadFeatures}>\n\t\t\t<div\n\t\t\t\t{...focusWithinProps}\n\t\t\t\tclassName={cx(styles.drawer, styles[size], className)}\n\t\t\t\tdata-drawer\n\t\t\t\tdata-test-id={testId}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<m.div\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tvariants={overlay}\n\t\t\t\t\ttransition={{ duration: 0.15 }}\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tclassName={styles.overlay}\n\t\t\t\t\tonMouseDown={handleOverlayClick}\n\t\t\t\t>\n\t\t\t\t\t<FocusTrap autoFocus restoreFocus>\n\t\t\t\t\t\t<m.div\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tvariants={slideRight}\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\taria-labelledby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-describedby={DRAWER_LABELLED_BY}\n\t\t\t\t\t\t\taria-modal\n\t\t\t\t\t\t\tclassName={styles.content}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t{...(theme ? { 'data-theme': theme } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!hideCancel && (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\t\t\t\ticon={<Icon name=\"cancel\" size=\"medium\" />}\n\t\t\t\t\t\t\t\t\tclassName={styles.closeButton}\n\t\t\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\t\t\tdata-test-id=\"drawer-close-button\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<Suspense fallback={<Progress />}>{children}</Suspense>\n\t\t\t\t\t\t</m.div>\n\t\t\t\t\t</FocusTrap>\n\t\t\t\t</m.div>\n\t\t\t</div>\n\t\t</LazyMotion>\n\t);\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\tcloseable?: boolean;\n\ttitleID?: string;\n\ttitleClassName?: string;\n\tonClose?(): void;\n\t'data-test-id'?: string;\n};\n\nconst DrawerHeader = ({\n\tclassName,\n\tchildren,\n\t// biome-ignore lint/correctness/noUnusedVariables: <explanation>\n\ttitleID,\n\ttitleClassName,\n\t'data-test-id': testId = 'drawer-header',\n\t...rest\n}: DrawerHeaderProps) => {\n\treturn (\n\t\t<div data-test-id={testId} className={className} {...rest}>\n\t\t\t<h2 id={DRAWER_LABELLED_BY} className={titleClassName}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t</div>\n\t);\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.
|
|
3
|
+
"version": "0.5.20",
|
|
4
4
|
"status": "alpha",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
},
|
|
27
27
|
"source": "src/index.ts",
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@react-aria/interactions": "3.21.
|
|
30
|
-
"@react-aria/overlays": "3.21.
|
|
29
|
+
"@react-aria/interactions": "3.21.1",
|
|
30
|
+
"@react-aria/overlays": "3.21.1",
|
|
31
31
|
"classix": "2.1.17",
|
|
32
32
|
"framer-motion": "11.0.3",
|
|
33
|
-
"@launchpad-ui/button": "~0.12.
|
|
34
|
-
"@launchpad-ui/focus-trap": "~0.1.
|
|
35
|
-
"@launchpad-ui/icons": "~0.16.
|
|
33
|
+
"@launchpad-ui/button": "~0.12.4",
|
|
34
|
+
"@launchpad-ui/focus-trap": "~0.1.17",
|
|
35
|
+
"@launchpad-ui/icons": "~0.16.4",
|
|
36
36
|
"@launchpad-ui/portal": "~0.1.4",
|
|
37
|
-
"@launchpad-ui/progress": "~0.5.
|
|
38
|
-
"@launchpad-ui/tokens": "~0.9.
|
|
37
|
+
"@launchpad-ui/progress": "~0.5.42",
|
|
38
|
+
"@launchpad-ui/tokens": "~0.9.7"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "18.2.0",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"scripts": {
|
|
49
49
|
"build": "vite build -c ../../vite.config.mts && tsc --project tsconfig.build.json",
|
|
50
50
|
"clean": "rm -rf dist",
|
|
51
|
-
"lint": "
|
|
51
|
+
"lint": "stylelint '**/*.css' --ignore-path ../../.stylelintignore",
|
|
52
52
|
"test": "vitest run --coverage"
|
|
53
53
|
}
|
|
54
54
|
}
|