@launchpad-ui/drawer 0.5.76 → 0.5.78

package/dist/index.es.js

@@ -55,10 +55,9 @@ const slideRight = {
 	}
 };
 const loadFeatures = () => import(
-	/* webpackChunkName: "lp-drawer-framer-features" */
-	/* webpackExports: "domAnimation" */
-	"framer-motion"
-).then((res) => res.domAnimation);
+/* webpackChunkName: "lp-drawer-framer-features" */
+/* webpackExports: "domAnimation" */
+"framer-motion").then((res) => res.domAnimation);
 /**
 * @deprecated use `Modal` from `@launchpad-ui/components` instead
 *

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","names":["overlay: Variants","slideRight: Variants","props: DrawerProps","event: KeyboardEvent","event: MouseEvent<HTMLDivElement>"],"sources":["../src/constants.ts","../src/styles/Drawer.module.css","../../tokens/dist/media-queries.css","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","@import '../../../tokens/dist/media-queries.css';\n\n:root,\n[data-theme='default'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(40 40 40 / 0.5);\n}\n\n[data-theme='dark'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(25 25 25 / 0.75);\n}\n\n.drawer {\n\t--page-gutter-width: 0.625rem;\n\n\tz-index: var(--lp-z-index-400);\n\tposition: fixed;\n\tinset: 0;\n\ttransform: translateZ(0);\n}\n\n@media (--tablet) {\n\t.drawer {\n\t\t--page-gutter-width: 2.5rem;\n\t}\n}\n\n:global(.has-overlay) {\n\toverflow: hidden;\n}\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground-color: var(--lp-component-drawer-color-bg-overlay);\n}\n\n.content {\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\toverflow: auto;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tbox-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);\n}\n\n@media (--tablet) {\n\t.small .content {\n\t\twidth: 28.125rem;\n\t}\n\n\t.medium .content {\n\t\twidth: 40.625rem;\n\t}\n\n\t.large .content {\n\t\twidth: 50rem;\n\t}\n\n\t.xLarge .content {\n\t\twidth: 75rem;\n\t}\n\n\t.full .content {\n\t\twidth: 100%;\n\t\tmax-width: unset;\n\t}\n}\n\n.content section {\n\tpadding: 2rem var(--page-gutter-width);\n}\n\n.content section + section {\n\tborder-top: 1px dotted var(--lp-color-gray-100);\n}\n\n.closeButton {\n\tposition: absolute;\n\tright: 0.625rem;\n\ttop: 0.625rem;\n}\n","@custom-media --mobile screen and (min-width: 0);\n@custom-media --tablet screen and (min-width: 46.25rem);\n@custom-media --desktop screen and (min-width: 62rem);\n@custom-media --wide screen and (min-width: 75rem);","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\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\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\t/* @ts-ignore framer */\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\t/* @ts-ignore framer */\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\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"],"mappings":";;;;;;;;;;;AAAA,MAAa,qBAAqB;;;;;;;;;;;;;;;;;;;;;AGiBlC,MAAMA,UAAoB;CACzB,SAAS;EAAE,SAAS;EAAG,YAAY,EAAE,UAAU,IAAM;CAAE;CACvD,QAAQ,EAAE,SAAS,EAAG;AACtB;AAED,MAAMC,aAAuB;CAC5B,QAAQ;EAAE,SAAS;EAAG,GAAG;CAAO;CAChC,SAAS;EACR,SAAS;EACT,GAAG;EACH,YAAY;GAAE,MAAM;GAAU,OAAO;GAAM,UAAU;GAAK,QAAQ;EAAG;CACrE;AACD;AAED,MAAM,eAAe,MACpB;;;CAGC;EACC,KAAK,CAAC,QAAQ,IAAI,aAAa;;;;;;AAiBlC,MAAM,SAAS,CAACC,0BACf,IAAC,QAAA,EAAA,0BACA,IAAC,iBAAA,EAAgB,GAAI,MAAA,EAAS,CAAA,EACtB;AAGV,MAAM,kBAAkB,CAAC,EACxB,WACA,UACA,UACA,OAAO,SACP,gBAAgB,SAAS,UACzB,OACA,aAAa,OACA,KAAK;CAClB,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,CAAC,eAAe,iBAAiB,GAAG,SAAS,MAAM;CACzD,MAAM,EAAE,kBAAkB,GAAG,eAAe,EAC3C,qBAAqB,CAAC,oBAAkB,iBAAiB,gBAAc,CACvE,EAAC;AAEF,mBAAkB;AAElB,WAAU,MAAM;EACf,MAAM,eAAe,CAACC,UAAyB;AAC9C,SAAM,0BAA0B;GAChC,MAAM,SAAS,CAAC,GAAG,SAAS,iBAAiB,gBAAgB,AAAC,EAAC,KAAK;AACpE,OAAI,MAAM,QAAQ,YAAY,WAAW,IAAI,WAAW,cACvD,QAAO;EAER;EAED,MAAM,4BAA4B,MAAM;AACvC,YAAS,KAAK,UAAU,IAAI,cAAc;AAC1C,YAAS,iBAAiB,WAAW,aAAa;EAClD;EAED,MAAM,+BAA+B,MAAM;AAC1C,YAAS,KAAK,UAAU,OAAO,cAAc;AAC7C,YAAS,oBAAoB,WAAW,aAAa;EACrD;EAED,MAAM,QAAQ,MAAM;AACnB,eAAY;EACZ;AAED,MAAI,cACH,4BAA2B;AAG5B,OAAK,cACJ,+BAA8B;AAG/B,SAAO,MAAM;AACZ,iCAA8B;EAC9B;CACD,GAAE,CAAC,UAAU,aAAc,EAAC;CAE7B,MAAM,qBAAqB,CAACC,UAAsC;AACjE,MAAI,MAAM,WAAW,MAAM,cAC1B,aAAY;CAEb;AAED,wBACC,IAAC,YAAA;EAAW,QAAA;EAAO,UAAU;4BAC5B,IAAC,OAAA;GACA,GAAI;GACJ,WAAW,GAAG,sBAAO,QAAQ,sBAAO,OAAO,UAAU;GACrD,eAAA;GACA,gBAAc;GACT;6BAEL,IAAC,EAAE,KAAA;IACF,SAAQ;IACR,SAAQ;IACR,UAAU;IACV,YAAY,EAAE,UAAU,IAAM;IAE9B,MAAK;IACL,WAAW,sBAAO;IAClB,aAAa;8BAEb,IAAC,WAAA;KAAU,WAAA;KAAU,cAAA;+BACpB,KAAC,EAAE,KAAA;MACF,SAAQ;MACR,SAAQ;MACR,UAAU;MAEV,MAAK;MACL,mBAAiB;MACjB,oBAAkB;MAClB,cAAA;MACA,WAAW,sBAAO;MAClB,UAAA;MACA,GAAK,QAAQ,EAAE,cAAc,MAAO,IAAG,CAAE;kBAEvC,8BACD,IAAC,YAAA;OACA,cAAW;OACX,sBAAM,IAAC,MAAA;QAAK,MAAK;QAAS,MAAK;SAAW;OAC1C,WAAW,sBAAO;OAClB,SAAS;OACT,gBAAa;QACZ,kBAEH,IAAC,UAAA;OAAS,0BAAU,IAAC,UAAA,CAAA,EAAW;OAAG;QAAoB;OAChD;MACG;KACL;IACH;GACM;AAEd;AC3JD,MAAM,eAAe,CAAC,EACrB,WACA,UACA,SACA,gBACA,gBAAgB,SAAS,gBACzB,GAAG,MACgB,KAAK;AACxB,wBACC,IAAC,OAAA;EAAI,gBAAc;EAAmB;EAAW,GAAI;4BACpD,IAAC,MAAA;GAAG,IAAI;GAAoB,WAAW;GACrC;IACG;GACA;AAEP"}
+{"version":3,"file":"index.es.js","names":["overlay: Variants","slideRight: Variants","props: DrawerProps","event: KeyboardEvent","event: MouseEvent<HTMLDivElement>"],"sources":["../src/constants.ts","../src/styles/Drawer.module.css","../../tokens/dist/media-queries.css","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","@import '../../../tokens/dist/media-queries.css';\n\n:root,\n[data-theme='default'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(40 40 40 / 0.5);\n}\n\n[data-theme='dark'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(25 25 25 / 0.75);\n}\n\n.drawer {\n\t--page-gutter-width: 0.625rem;\n\n\tz-index: var(--lp-z-index-400);\n\tposition: fixed;\n\tinset: 0;\n\ttransform: translateZ(0);\n}\n\n@media (--tablet) {\n\t.drawer {\n\t\t--page-gutter-width: 2.5rem;\n\t}\n}\n\n:global(.has-overlay) {\n\toverflow: hidden;\n}\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground-color: var(--lp-component-drawer-color-bg-overlay);\n}\n\n.content {\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\toverflow: auto;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tbox-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);\n}\n\n@media (--tablet) {\n\t.small .content {\n\t\twidth: 28.125rem;\n\t}\n\n\t.medium .content {\n\t\twidth: 40.625rem;\n\t}\n\n\t.large .content {\n\t\twidth: 50rem;\n\t}\n\n\t.xLarge .content {\n\t\twidth: 75rem;\n\t}\n\n\t.full .content {\n\t\twidth: 100%;\n\t\tmax-width: unset;\n\t}\n}\n\n.content section {\n\tpadding: 2rem var(--page-gutter-width);\n}\n\n.content section + section {\n\tborder-top: 1px dotted var(--lp-color-gray-100);\n}\n\n.closeButton {\n\tposition: absolute;\n\tright: 0.625rem;\n\ttop: 0.625rem;\n}\n","@custom-media --mobile screen and (min-width: 0);\n@custom-media --tablet screen and (min-width: 46.25rem);\n@custom-media --desktop screen and (min-width: 62rem);\n@custom-media --wide screen and (min-width: 75rem);","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\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\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\t/* @ts-ignore framer */\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\t/* @ts-ignore framer */\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\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"],"mappings":";;;;;;;;;;;AAAA,MAAa,qBAAqB;;;;;;;;;;;;;;;;;;;;;AGiBlC,MAAMA,UAAoB;CACzB,SAAS;EAAE,SAAS;EAAG,YAAY,EAAE,UAAU,IAAM;CAAE;CACvD,QAAQ,EAAE,SAAS,EAAG;AACtB;AAED,MAAMC,aAAuB;CAC5B,QAAQ;EAAE,SAAS;EAAG,GAAG;CAAO;CAChC,SAAS;EACR,SAAS;EACT,GAAG;EACH,YAAY;GAAE,MAAM;GAAU,OAAO;GAAM,UAAU;GAAK,QAAQ;EAAG;CACrE;AACD;AAED,MAAM,eAAe,MACpB;;;AAGC,iBACC,KAAK,CAAC,QAAQ,IAAI,aAAa;;;;;;AAiBlC,MAAM,SAAS,CAACC,0BACf,IAAC,QAAA,EAAA,0BACA,IAAC,iBAAA,EAAgB,GAAI,MAAA,EAAS,CAAA,EACtB;AAGV,MAAM,kBAAkB,CAAC,EACxB,WACA,UACA,UACA,OAAO,SACP,gBAAgB,SAAS,UACzB,OACA,aAAa,OACA,KAAK;CAClB,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,CAAC,eAAe,iBAAiB,GAAG,SAAS,MAAM;CACzD,MAAM,EAAE,kBAAkB,GAAG,eAAe,EAC3C,qBAAqB,CAAC,oBAAkB,iBAAiB,gBAAc,CACvE,EAAC;AAEF,mBAAkB;AAElB,WAAU,MAAM;EACf,MAAM,eAAe,CAACC,UAAyB;AAC9C,SAAM,0BAA0B;GAChC,MAAM,SAAS,CAAC,GAAG,SAAS,iBAAiB,gBAAgB,AAAC,EAAC,KAAK;AACpE,OAAI,MAAM,QAAQ,YAAY,WAAW,IAAI,WAAW,cACvD,QAAO;EAER;EAED,MAAM,4BAA4B,MAAM;AACvC,YAAS,KAAK,UAAU,IAAI,cAAc;AAC1C,YAAS,iBAAiB,WAAW,aAAa;EAClD;EAED,MAAM,+BAA+B,MAAM;AAC1C,YAAS,KAAK,UAAU,OAAO,cAAc;AAC7C,YAAS,oBAAoB,WAAW,aAAa;EACrD;EAED,MAAM,QAAQ,MAAM;AACnB,eAAY;EACZ;AAED,MAAI,cACH,4BAA2B;AAG5B,OAAK,cACJ,+BAA8B;AAG/B,SAAO,MAAM;AACZ,iCAA8B;EAC9B;CACD,GAAE,CAAC,UAAU,aAAc,EAAC;CAE7B,MAAM,qBAAqB,CAACC,UAAsC;AACjE,MAAI,MAAM,WAAW,MAAM,cAC1B,aAAY;CAEb;AAED,wBACC,IAAC,YAAA;EAAW,QAAA;EAAO,UAAU;4BAC5B,IAAC,OAAA;GACA,GAAI;GACJ,WAAW,GAAG,sBAAO,QAAQ,sBAAO,OAAO,UAAU;GACrD,eAAA;GACA,gBAAc;GACT;6BAEL,IAAC,EAAE,KAAA;IACF,SAAQ;IACR,SAAQ;IACR,UAAU;IACV,YAAY,EAAE,UAAU,IAAM;IAE9B,MAAK;IACL,WAAW,sBAAO;IAClB,aAAa;8BAEb,IAAC,WAAA;KAAU,WAAA;KAAU,cAAA;+BACpB,KAAC,EAAE,KAAA;MACF,SAAQ;MACR,SAAQ;MACR,UAAU;MAEV,MAAK;MACL,mBAAiB;MACjB,oBAAkB;MAClB,cAAA;MACA,WAAW,sBAAO;MAClB,UAAA;MACA,GAAK,QAAQ,EAAE,cAAc,MAAO,IAAG,CAAE;kBAEvC,8BACD,IAAC,YAAA;OACA,cAAW;OACX,sBAAM,IAAC,MAAA;QAAK,MAAK;QAAS,MAAK;SAAW;OAC1C,WAAW,sBAAO;OAClB,SAAS;OACT,gBAAa;QACZ,kBAEH,IAAC,UAAA;OAAS,0BAAU,IAAC,UAAA,CAAA,EAAW;OAAG;QAAoB;OAChD;MACG;KACL;IACH;GACM;AAEd;AC3JD,MAAM,eAAe,CAAC,EACrB,WACA,UACA,SACA,gBACA,gBAAgB,SAAS,gBACzB,GAAG,MACgB,KAAK;AACxB,wBACC,IAAC,OAAA;EAAI,gBAAc;EAAmB;EAAW,GAAI;4BACpD,IAAC,MAAA;GAAG,IAAI;GAAoB,WAAW;GACrC;IACG;GACA;AAEP"}

package/dist/index.js

@@ -1,5 +1,4 @@
 require('./style.css');
-"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -76,10 +75,9 @@ const slideRight = {
 	}
 };
 const loadFeatures = () => import(
-	/* webpackChunkName: "lp-drawer-framer-features" */
-	/* webpackExports: "domAnimation" */
-	"framer-motion"
-).then((res) => res.domAnimation);
+/* webpackChunkName: "lp-drawer-framer-features" */
+/* webpackExports: "domAnimation" */
+"framer-motion").then((res) => res.domAnimation);
 /**
 * @deprecated use `Modal` from `@launchpad-ui/components` instead
 *

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["overlay: Variants","slideRight: Variants","props: DrawerProps","event: KeyboardEvent","event: MouseEvent<HTMLDivElement>"],"sources":["../src/constants.ts","../src/styles/Drawer.module.css","../../tokens/dist/media-queries.css","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","@import '../../../tokens/dist/media-queries.css';\n\n:root,\n[data-theme='default'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(40 40 40 / 0.5);\n}\n\n[data-theme='dark'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(25 25 25 / 0.75);\n}\n\n.drawer {\n\t--page-gutter-width: 0.625rem;\n\n\tz-index: var(--lp-z-index-400);\n\tposition: fixed;\n\tinset: 0;\n\ttransform: translateZ(0);\n}\n\n@media (--tablet) {\n\t.drawer {\n\t\t--page-gutter-width: 2.5rem;\n\t}\n}\n\n:global(.has-overlay) {\n\toverflow: hidden;\n}\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground-color: var(--lp-component-drawer-color-bg-overlay);\n}\n\n.content {\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\toverflow: auto;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tbox-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);\n}\n\n@media (--tablet) {\n\t.small .content {\n\t\twidth: 28.125rem;\n\t}\n\n\t.medium .content {\n\t\twidth: 40.625rem;\n\t}\n\n\t.large .content {\n\t\twidth: 50rem;\n\t}\n\n\t.xLarge .content {\n\t\twidth: 75rem;\n\t}\n\n\t.full .content {\n\t\twidth: 100%;\n\t\tmax-width: unset;\n\t}\n}\n\n.content section {\n\tpadding: 2rem var(--page-gutter-width);\n}\n\n.content section + section {\n\tborder-top: 1px dotted var(--lp-color-gray-100);\n}\n\n.closeButton {\n\tposition: absolute;\n\tright: 0.625rem;\n\ttop: 0.625rem;\n}\n","@custom-media --mobile screen and (min-width: 0);\n@custom-media --tablet screen and (min-width: 46.25rem);\n@custom-media --desktop screen and (min-width: 62rem);\n@custom-media --wide screen and (min-width: 75rem);","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\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\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\t/* @ts-ignore framer */\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\t/* @ts-ignore framer */\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\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAa,qBAAqB;;;;;;;;;;;;;;;;;;;;;AGiBlC,MAAMA,UAAoB;CACzB,SAAS;EAAE,SAAS;EAAG,YAAY,EAAE,UAAU,IAAM;CAAE;CACvD,QAAQ,EAAE,SAAS,EAAG;AACtB;AAED,MAAMC,aAAuB;CAC5B,QAAQ;EAAE,SAAS;EAAG,GAAG;CAAO;CAChC,SAAS;EACR,SAAS;EACT,GAAG;EACH,YAAY;GAAE,MAAM;GAAU,OAAO;GAAM,UAAU;GAAK,QAAQ;EAAG;CACrE;AACD;AAED,MAAM,eAAe,MACpB;;;CAGC;EACC,KAAK,CAAC,QAAQ,IAAI,aAAa;;;;;;AAiBlC,MAAM,SAAS,CAACC,0BACf,CAAA,GAAA,kBAAA,KAAC,sBAAA,QAAA,EAAA,0BACA,CAAA,GAAA,kBAAA,KAAC,iBAAA,EAAgB,GAAI,MAAA,EAAS,CAAA,EACtB;AAGV,MAAM,kBAAkB,CAAC,EACxB,WACA,UACA,UACA,OAAO,SACP,gBAAgB,SAAS,UACzB,OACA,aAAa,OACA,KAAK;CAClB,MAAM,MAAM,CAAA,GAAA,MAAA,QAAuB,KAAK;CACxC,MAAM,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,MAAA,UAAS,MAAM;CACzD,MAAM,EAAE,kBAAkB,GAAG,CAAA,GAAA,0BAAA,gBAAe,EAC3C,qBAAqB,CAAC,oBAAkB,iBAAiB,gBAAc,CACvE,EAAC;AAEF,EAAA,GAAA,sBAAA,mBAAkB;AAElB,EAAA,GAAA,MAAA,WAAU,MAAM;EACf,MAAM,eAAe,CAACC,UAAyB;AAC9C,SAAM,0BAA0B;GAChC,MAAM,SAAS,CAAC,GAAG,SAAS,iBAAiB,gBAAgB,AAAC,EAAC,KAAK;AACpE,OAAI,MAAM,QAAQ,YAAY,WAAW,IAAI,WAAW,cACvD,QAAO;EAER;EAED,MAAM,4BAA4B,MAAM;AACvC,YAAS,KAAK,UAAU,IAAI,cAAc;AAC1C,YAAS,iBAAiB,WAAW,aAAa;EAClD;EAED,MAAM,+BAA+B,MAAM;AAC1C,YAAS,KAAK,UAAU,OAAO,cAAc;AAC7C,YAAS,oBAAoB,WAAW,aAAa;EACrD;EAED,MAAM,QAAQ,MAAM;AACnB,eAAY;EACZ;AAED,MAAI,cACH,4BAA2B;AAG5B,OAAK,cACJ,+BAA8B;AAG/B,SAAO,MAAM;AACZ,iCAA8B;EAC9B;CACD,GAAE,CAAC,UAAU,aAAc,EAAC;CAE7B,MAAM,qBAAqB,CAACC,UAAsC;AACjE,MAAI,MAAM,WAAW,MAAM,cAC1B,aAAY;CAEb;AAED,wBACC,CAAA,GAAA,kBAAA,KAAC,cAAA,YAAA;EAAW,QAAA;EAAO,UAAU;4BAC5B,CAAA,GAAA,kBAAA,KAAC,OAAA;GACA,GAAI;GACJ,WAAW,CAAA,GAAA,QAAA,IAAG,sBAAO,QAAQ,sBAAO,OAAO,UAAU;GACrD,eAAA;GACA,gBAAc;GACT;6BAEL,CAAA,GAAA,kBAAA,KAAC,cAAA,EAAE,KAAA;IACF,SAAQ;IACR,SAAQ;IACR,UAAU;IACV,YAAY,EAAE,UAAU,IAAM;IAE9B,MAAK;IACL,WAAW,sBAAO;IAClB,aAAa;8BAEb,CAAA,GAAA,kBAAA,KAAC,0BAAA,WAAA;KAAU,WAAA;KAAU,cAAA;+BACpB,CAAA,GAAA,kBAAA,MAAC,cAAA,EAAE,KAAA;MACF,SAAQ;MACR,SAAQ;MACR,UAAU;MAEV,MAAK;MACL,mBAAiB;MACjB,oBAAkB;MAClB,cAAA;MACA,WAAW,sBAAO;MAClB,UAAA;MACA,GAAK,QAAQ,EAAE,cAAc,MAAO,IAAG,CAAE;kBAEvC,8BACD,CAAA,GAAA,kBAAA,KAAC,sBAAA,YAAA;OACA,cAAW;OACX,sBAAM,CAAA,GAAA,kBAAA,KAAC,qBAAA,MAAA;QAAK,MAAK;QAAS,MAAK;SAAW;OAC1C,WAAW,sBAAO;OAClB,SAAS;OACT,gBAAa;QACZ,kBAEH,CAAA,GAAA,kBAAA,KAAC,MAAA,UAAA;OAAS,0BAAU,CAAA,GAAA,kBAAA,KAAC,wBAAA,UAAA,CAAA,EAAW;OAAG;QAAoB;OAChD;MACG;KACL;IACH;GACM;AAEd;AC3JD,MAAM,eAAe,CAAC,EACrB,WACA,UACA,SACA,gBACA,gBAAgB,SAAS,gBACzB,GAAG,MACgB,KAAK;AACxB,wBACC,CAAA,GAAA,kBAAA,KAAC,OAAA;EAAI,gBAAc;EAAmB;EAAW,GAAI;4BACpD,CAAA,GAAA,kBAAA,KAAC,MAAA;GAAG,IAAI;GAAoB,WAAW;GACrC;IACG;GACA;AAEP"}
+{"version":3,"file":"index.js","names":["overlay: Variants","slideRight: Variants","props: DrawerProps","event: KeyboardEvent","event: MouseEvent<HTMLDivElement>"],"sources":["../src/constants.ts","../src/styles/Drawer.module.css","../../tokens/dist/media-queries.css","../src/Drawer.tsx","../src/DrawerHeader.tsx"],"sourcesContent":["export const DRAWER_LABELLED_BY = 'drawer-title';\n","@import '../../../tokens/dist/media-queries.css';\n\n:root,\n[data-theme='default'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(40 40 40 / 0.5);\n}\n\n[data-theme='dark'] {\n\t--lp-component-drawer-color-bg-overlay: rgb(25 25 25 / 0.75);\n}\n\n.drawer {\n\t--page-gutter-width: 0.625rem;\n\n\tz-index: var(--lp-z-index-400);\n\tposition: fixed;\n\tinset: 0;\n\ttransform: translateZ(0);\n}\n\n@media (--tablet) {\n\t.drawer {\n\t\t--page-gutter-width: 2.5rem;\n\t}\n}\n\n:global(.has-overlay) {\n\toverflow: hidden;\n}\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground-color: var(--lp-component-drawer-color-bg-overlay);\n}\n\n.content {\n\tbackground-color: var(--lp-color-bg-ui-primary);\n\tposition: absolute;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n\toverflow: auto;\n\twidth: 100vw;\n\tmax-width: 100vw;\n\tcolor: var(--lp-color-text-ui-secondary);\n\tbox-shadow: -1px 0 4px var(--lp-color-shadow-ui-primary);\n}\n\n@media (--tablet) {\n\t.small .content {\n\t\twidth: 28.125rem;\n\t}\n\n\t.medium .content {\n\t\twidth: 40.625rem;\n\t}\n\n\t.large .content {\n\t\twidth: 50rem;\n\t}\n\n\t.xLarge .content {\n\t\twidth: 75rem;\n\t}\n\n\t.full .content {\n\t\twidth: 100%;\n\t\tmax-width: unset;\n\t}\n}\n\n.content section {\n\tpadding: 2rem var(--page-gutter-width);\n}\n\n.content section + section {\n\tborder-top: 1px dotted var(--lp-color-gray-100);\n}\n\n.closeButton {\n\tposition: absolute;\n\tright: 0.625rem;\n\ttop: 0.625rem;\n}\n","@custom-media --mobile screen and (min-width: 0);\n@custom-media --tablet screen and (min-width: 46.25rem);\n@custom-media --desktop screen and (min-width: 62rem);\n@custom-media --wide screen and (min-width: 75rem);","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\n/**\n * @deprecated use `Modal` from `@launchpad-ui/components` instead\n *\n * https://launchpad.launchdarkly.com/?path=/docs/components-overlays-modal--docs#drawer\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\t/* @ts-ignore framer */\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\t/* @ts-ignore framer */\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\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAa,qBAAqB;;;;;;;;;;;;;;;;;;;;;AGiBlC,MAAMA,UAAoB;CACzB,SAAS;EAAE,SAAS;EAAG,YAAY,EAAE,UAAU,IAAM;CAAE;CACvD,QAAQ,EAAE,SAAS,EAAG;AACtB;AAED,MAAMC,aAAuB;CAC5B,QAAQ;EAAE,SAAS;EAAG,GAAG;CAAO;CAChC,SAAS;EACR,SAAS;EACT,GAAG;EACH,YAAY;GAAE,MAAM;GAAU,OAAO;GAAM,UAAU;GAAK,QAAQ;EAAG;CACrE;AACD;AAED,MAAM,eAAe,MACpB;;;AAGC,iBACC,KAAK,CAAC,QAAQ,IAAI,aAAa;;;;;;AAiBlC,MAAM,SAAS,CAACC,0BACf,CAAA,GAAA,kBAAA,KAAC,sBAAA,QAAA,EAAA,0BACA,CAAA,GAAA,kBAAA,KAAC,iBAAA,EAAgB,GAAI,MAAA,EAAS,CAAA,EACtB;AAGV,MAAM,kBAAkB,CAAC,EACxB,WACA,UACA,UACA,OAAO,SACP,gBAAgB,SAAS,UACzB,OACA,aAAa,OACA,KAAK;CAClB,MAAM,MAAM,CAAA,GAAA,MAAA,QAAuB,KAAK;CACxC,MAAM,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,MAAA,UAAS,MAAM;CACzD,MAAM,EAAE,kBAAkB,GAAG,CAAA,GAAA,0BAAA,gBAAe,EAC3C,qBAAqB,CAAC,oBAAkB,iBAAiB,gBAAc,CACvE,EAAC;AAEF,EAAA,GAAA,sBAAA,mBAAkB;AAElB,EAAA,GAAA,MAAA,WAAU,MAAM;EACf,MAAM,eAAe,CAACC,UAAyB;AAC9C,SAAM,0BAA0B;GAChC,MAAM,SAAS,CAAC,GAAG,SAAS,iBAAiB,gBAAgB,AAAC,EAAC,KAAK;AACpE,OAAI,MAAM,QAAQ,YAAY,WAAW,IAAI,WAAW,cACvD,QAAO;EAER;EAED,MAAM,4BAA4B,MAAM;AACvC,YAAS,KAAK,UAAU,IAAI,cAAc;AAC1C,YAAS,iBAAiB,WAAW,aAAa;EAClD;EAED,MAAM,+BAA+B,MAAM;AAC1C,YAAS,KAAK,UAAU,OAAO,cAAc;AAC7C,YAAS,oBAAoB,WAAW,aAAa;EACrD;EAED,MAAM,QAAQ,MAAM;AACnB,eAAY;EACZ;AAED,MAAI,cACH,4BAA2B;AAG5B,OAAK,cACJ,+BAA8B;AAG/B,SAAO,MAAM;AACZ,iCAA8B;EAC9B;CACD,GAAE,CAAC,UAAU,aAAc,EAAC;CAE7B,MAAM,qBAAqB,CAACC,UAAsC;AACjE,MAAI,MAAM,WAAW,MAAM,cAC1B,aAAY;CAEb;AAED,wBACC,CAAA,GAAA,kBAAA,KAAC,cAAA,YAAA;EAAW,QAAA;EAAO,UAAU;4BAC5B,CAAA,GAAA,kBAAA,KAAC,OAAA;GACA,GAAI;GACJ,WAAW,CAAA,GAAA,QAAA,IAAG,sBAAO,QAAQ,sBAAO,OAAO,UAAU;GACrD,eAAA;GACA,gBAAc;GACT;6BAEL,CAAA,GAAA,kBAAA,KAAC,cAAA,EAAE,KAAA;IACF,SAAQ;IACR,SAAQ;IACR,UAAU;IACV,YAAY,EAAE,UAAU,IAAM;IAE9B,MAAK;IACL,WAAW,sBAAO;IAClB,aAAa;8BAEb,CAAA,GAAA,kBAAA,KAAC,0BAAA,WAAA;KAAU,WAAA;KAAU,cAAA;+BACpB,CAAA,GAAA,kBAAA,MAAC,cAAA,EAAE,KAAA;MACF,SAAQ;MACR,SAAQ;MACR,UAAU;MAEV,MAAK;MACL,mBAAiB;MACjB,oBAAkB;MAClB,cAAA;MACA,WAAW,sBAAO;MAClB,UAAA;MACA,GAAK,QAAQ,EAAE,cAAc,MAAO,IAAG,CAAE;kBAEvC,8BACD,CAAA,GAAA,kBAAA,KAAC,sBAAA,YAAA;OACA,cAAW;OACX,sBAAM,CAAA,GAAA,kBAAA,KAAC,qBAAA,MAAA;QAAK,MAAK;QAAS,MAAK;SAAW;OAC1C,WAAW,sBAAO;OAClB,SAAS;OACT,gBAAa;QACZ,kBAEH,CAAA,GAAA,kBAAA,KAAC,MAAA,UAAA;OAAS,0BAAU,CAAA,GAAA,kBAAA,KAAC,wBAAA,UAAA,CAAA,EAAW;OAAG;QAAoB;OAChD;MACG;KACL;IACH;GACM;AAEd;AC3JD,MAAM,eAAe,CAAC,EACrB,WACA,UACA,SACA,gBACA,gBAAgB,SAAS,gBACzB,GAAG,MACgB,KAAK;AACxB,wBACC,CAAA,GAAA,kBAAA,KAAC,OAAA;EAAI,gBAAc;EAAmB;EAAW,GAAI;4BACpD,CAAA,GAAA,kBAAA,KAAC,MAAA;GAAG,IAAI;GAAoB,WAAW;GACrC;IACG;GACA;AAEP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpad-ui/drawer",
-  "version": "0.5.76",
+  "version": "0.5.78",
   "status": "alpha",
   "publishConfig": {
     "access": "public"
@@ -32,15 +32,15 @@
   "source": "src/index.ts",
   "dependencies": {
     "@launchpad-ui/progress": "0.5.57",
-    "@react-aria/interactions": "3.25.0",
-    "@react-aria/overlays": "3.27.0",
+    "@react-aria/interactions": "3.25.1",
+    "@react-aria/overlays": "3.27.1",
     "classix": "2.2.0",
-    "framer-motion": "12.9.4",
-    "@launchpad-ui/button": "~0.12.54",
-    "@launchpad-ui/focus-trap": "~0.1.29",
-    "@launchpad-ui/icons": "~0.21.13",
+    "framer-motion": "12.15.0",
+    "@launchpad-ui/button": "~0.12.55",
+    "@launchpad-ui/focus-trap": "~0.1.30",
+    "@launchpad-ui/icons": "~0.21.14",
     "@launchpad-ui/portal": "~0.1.5",
-    "@launchpad-ui/tokens": "~0.12.5"
+    "@launchpad-ui/tokens": "~0.12.6"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",