@evolve.ui/core-components 1.0.0

package/Drawer-9HFG45OA.cjs

@@ -0,0 +1,259 @@
+const require_nodeEnv = require("./nodeEnv-BdQ-HyQz.cjs");
+const require_Icons = require("./Icons.cjs");
+const require_Typography_Text = require("./Typography/Text.cjs");
+const require_IconButton = require("./IconButton.cjs");
+const require_modal_context = require("./modal/context.cjs");
+const require_effectEventListener = require("./effectEventListener-DmVY5Sgy.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let jotai = require("jotai");
+//#region src/utils/keepTransition.ts
+/**
+* Test-only escape hatch, read at call time: Drawer specs set
+* `process.env.KEEP_TRANSITION = 'true'` at runtime to opt back into CSS
+* transitions. Unlike `nodeEnv` (a module-load-time read), a call-time read
+* sees that mutation.
+*/
+const keepTransition = () => typeof process === "undefined" ? void 0 : process.env?.KEEP_TRANSITION;
+//#endregion
+//#region src/Drawer/components/DialogActions/DialogActions.tsx
+const DialogActions = ({ children, className, density, useCustomButtonContainer }) => {
+	const { showBottomScrollHintAtom } = (0, react.useContext)(require_modal_context.ModalContext);
+	const showBottomScrollHint = (0, jotai.useAtomValue)(showBottomScrollHintAtom);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _evolve_ui_theme_system.cn)("flex grow-0 gap-sm p-sm", {
+			"[&_button]:grow-[1]": !useCustomButtonContainer,
+			"p-xs": density === "compact",
+			"shadow-05": showBottomScrollHint
+		}, className),
+		children
+	});
+};
+//#endregion
+//#region src/Drawer/components/DialogContent/DialogContent.tsx
+const DialogContent = ({ children, density, disableScroll = false, renderWhenClosed }) => {
+	const { showBottomScrollHintAtom, showTopScrollHintAtom } = (0, react.useContext)(require_modal_context.ModalContext);
+	const setShowBottomScrollHint = (0, jotai.useSetAtom)(showBottomScrollHintAtom);
+	const setShowTopScrollHint = (0, jotai.useSetAtom)(showTopScrollHintAtom);
+	const handleScroll = (0, react.useCallback)((contentRef) => () => {
+		if (contentRef.scrollHeight > contentRef.clientHeight + 32) {
+			const atTheBottom = Math.round(contentRef.scrollHeight - contentRef.scrollTop) - 5 < contentRef.clientHeight;
+			const atTheTop = contentRef.scrollTop < 25;
+			setShowBottomScrollHint(!atTheBottom);
+			setShowTopScrollHint(!atTheTop);
+		} else if (contentRef.scrollTop === 0) {
+			setShowBottomScrollHint(false);
+			setShowTopScrollHint(false);
+		}
+	}, [setShowBottomScrollHint, setShowTopScrollHint]);
+	const onScrollRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		return require_effectEventListener.effectEventListener(window, "resize", () => onScrollRef.current?.());
+	}, [handleScroll]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _evolve_ui_theme_system.cn)("grow-[1] border-y border-solid border-border-secondary", {
+			"flex flex-col overflow-hidden": disableScroll,
+			"h-[100vh] overflow-y-auto": !disableScroll,
+			"p-sm": !disableScroll && density !== "compact",
+			"p-xs": !disableScroll && density === "compact"
+		}),
+		"data-testid": "dialog-content",
+		ref: (ref) => {
+			if (!ref) return;
+			const onScroll = handleScroll(ref);
+			onScrollRef.current = onScroll;
+			new ResizeObserver(() => {
+				if (ref.scrollHeight === ref.clientHeight + 32) {
+					setShowBottomScrollHint(false);
+					setShowTopScrollHint(false);
+				} else onScroll();
+			}).observe(ref);
+			ref.addEventListener("scroll", onScroll);
+		},
+		children: renderWhenClosed ? children : null
+	});
+};
+//#endregion
+//#region src/Drawer/components/DialogHeader/DialogHeader.tsx
+const DialogHeader = ({ children, density = "comfortable", onBackButtonClick, onCloseButtonClick, textAlign = "center" }) => {
+	const { showTopScrollHintAtom } = (0, react.useContext)(require_modal_context.ModalContext);
+	const showTopScrollHint = (0, jotai.useAtomValue)(showTopScrollHintAtom);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _evolve_ui_theme_system.cn)("relative grid grid-cols-[42px_1fr_42px] gap-[4px] p-sm", {
+			"p-xs": density === "compact",
+			"shadow-01": showTopScrollHint
+		}),
+		children: [
+			onBackButtonClick !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				"aria-label": "Go Back",
+				className: (0, _evolve_ui_theme_system.cn)("col-start-1 col-end-2"),
+				"data-testid": "back-button",
+				hideTooltip: true,
+				icon: require_Icons.ArrowLeft,
+				onClick: onBackButtonClick,
+				size: "md",
+				type: "button"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, _evolve_ui_theme_system.cn)("col-start-2 col-end-3 flex", {
+					"justify-center text-center": textAlign === "center",
+					"justify-end text-right": textAlign === "right",
+					"justify-start text-left": textAlign === "left"
+				}),
+				"data-testid": "dialog-header-text-container",
+				children: typeof children === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.H2, {
+					className: "pt-[6px]",
+					children
+				}) : children
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+				className: (0, _evolve_ui_theme_system.cn)("col-start-3 col-end-4"),
+				"data-testid": "close-button",
+				hideTooltip: true,
+				icon: require_Icons.Close,
+				onClick: onCloseButtonClick,
+				size: "md",
+				type: "button"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/Drawer/Drawer.tsx
+let openDrawerCount = 0;
+let previousBodyOverflow = "";
+let previousBodyPaddingRight = "";
+const openDrawerStack = [];
+/**
+* A drawer component using the `dialog` element
+* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+*/
+const Drawer = ({ actions, anchor = "right", children, className, closeOnEscape = true, closeOnOutsideClick = true, customHeader, density = "comfortable", disableScroll = false, handleClose, hasShadow = false, headerText, headerTextAlign = "center", keepInDOMWhileClosed = true, onBackButtonClick, show, size = "narrow", useCustomButtonContainer = false }) => {
+	const reasonForClose = (0, react.useRef)("external");
+	const backdropRef = (0, react.useRef)(null);
+	const drawerIdRef = (0, react.useRef)({});
+	const [renderDrawer, setRenderDrawer] = (0, react.useState)(show);
+	const removeTransitionForTest = Boolean(require_nodeEnv.nodeEnv === "test") && Boolean(keepTransition() !== "true");
+	const startCloseTransition = (0, react.useCallback)((reason) => {
+		setRenderDrawer(false);
+		reasonForClose.current = reason;
+		if (removeTransitionForTest) handleClose(reason);
+	}, [handleClose, removeTransitionForTest]);
+	(0, react.useEffect)(() => {
+		if (renderDrawer && !show) startCloseTransition("external");
+	}, [
+		renderDrawer,
+		show,
+		startCloseTransition
+	]);
+	(0, react.useEffect)(() => {
+		if (show) setRenderDrawer(true);
+	}, [show]);
+	(0, react.useEffect)(() => {
+		if (!renderDrawer || !closeOnEscape) return;
+		const drawerIdentity = drawerIdRef.current;
+		openDrawerStack.push(drawerIdentity);
+		const removeListener = require_effectEventListener.effectEventListener(window, "keydown", (event) => {
+			if (!(event instanceof KeyboardEvent) || event.key !== "Escape") return;
+			if (openDrawerStack[openDrawerStack.length - 1] !== drawerIdentity) return;
+			event.preventDefault();
+			startCloseTransition("escape");
+		});
+		return () => {
+			const index = openDrawerStack.lastIndexOf(drawerIdentity);
+			if (index !== -1) openDrawerStack.splice(index, 1);
+			removeListener();
+		};
+	}, [
+		renderDrawer,
+		closeOnEscape,
+		startCloseTransition
+	]);
+	(0, react.useEffect)(() => {
+		const handleBackdropClick = (event) => {
+			if (event.target === backdropRef.current && closeOnOutsideClick) startCloseTransition("backdrop");
+		};
+		window.addEventListener("click", handleBackdropClick);
+		return () => {
+			window.removeEventListener("click", handleBackdropClick);
+		};
+	}, [closeOnOutsideClick, startCloseTransition]);
+	(0, react.useEffect)(() => {
+		if (!show) return;
+		if (openDrawerCount === 0) {
+			previousBodyOverflow = document.body.style.overflow;
+			previousBodyPaddingRight = document.body.style.paddingRight;
+			const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+			if (scrollbarWidth > 0) document.body.style.paddingRight = `${scrollbarWidth}px`;
+		}
+		openDrawerCount += 1;
+		document.body.style.overflow = "hidden";
+		return () => {
+			openDrawerCount -= 1;
+			if (openDrawerCount === 0) {
+				document.body.style.overflow = previousBodyOverflow;
+				document.body.style.paddingRight = previousBodyPaddingRight;
+			}
+		};
+	}, [show]);
+	const renderWhenClosed = keepInDOMWhileClosed || renderDrawer;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _evolve_ui_theme_system.cn)("hui-focus-visible-outline invisible fixed inset-0 z-30 bg-background-overlay opacity-0 duration-500 focus:m-2xs focus:transition-none", {
+			"opacity-1 visible": renderDrawer,
+			"pointer-events-none invisible opacity-0": !renderDrawer,
+			"transition-none": removeTransitionForTest
+		}),
+		"data-testid": "drawer-backdrop",
+		ref: backdropRef
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
+		"aria-label": "Drawer Menu",
+		className: (0, _evolve_ui_theme_system.cn)("m-w-[320px] fixed top-0 z-40 flex h-full max-h-full w-full flex-col p-0", {
+			"h-[100vh] w-[100vw]": size === "full",
+			"max-w-[320px]": size === "narrow",
+			"max-w-[480px]": size === "wide",
+			"max-w-[720px]": size === "extended"
+		}, { "shadow-04": hasShadow }, {
+			"left-0 ml-0": anchor === "left",
+			"right-0 mr-0": anchor === "right"
+		}, {
+			"invisible -translate-x-full opacity-0 transition-all": !renderDrawer && anchor === "left",
+			"invisible translate-x-full opacity-0 transition-all": !renderDrawer && anchor === "right",
+			"opacity-1 -translate-x-0 transition-all": renderDrawer && anchor === "left",
+			"opacity-1 translate-x-0 transition-all": renderDrawer && anchor === "right",
+			"transition-none": removeTransitionForTest
+		}, className),
+		"data-hui-id": "Drawer",
+		onTransitionEnd: () => !renderDrawer && handleClose(reasonForClose.current),
+		open: renderDrawer,
+		children: [
+			customHeader !== void 0 ? customHeader : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogHeader, {
+				density,
+				onBackButtonClick,
+				onCloseButtonClick: () => startCloseTransition("closeButton"),
+				textAlign: headerTextAlign,
+				children: headerText
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogContent, {
+				density,
+				disableScroll,
+				renderWhenClosed,
+				children
+			}),
+			actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogActions, {
+				density,
+				useCustomButtonContainer,
+				children: actions
+			})
+		]
+	})] });
+};
+//#endregion
+Object.defineProperty(exports, "Drawer", {
+	enumerable: true,
+	get: function() {
+		return Drawer;
+	}
+});
+
+//# sourceMappingURL=Drawer-9HFG45OA.cjs.map

package/Drawer-9HFG45OA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer-9HFG45OA.cjs","names":["ModalContext","ModalContext","effectEventListener","ModalContext","IconButton","ArrowLeft","H2","Close","nodeEnv","effectEventListener"],"sources":["../src/utils/keepTransition.ts","../src/Drawer/components/DialogActions/DialogActions.tsx","../src/Drawer/components/DialogContent/DialogContent.tsx","../src/Drawer/components/DialogHeader/DialogHeader.tsx","../src/Drawer/Drawer.tsx"],"sourcesContent":["declare const process:\n    | {\n          env?: {\n              KEEP_TRANSITION?: string;\n          };\n      }\n    | undefined;\n\n/**\n * Test-only escape hatch, read at call time: Drawer specs set\n * `process.env.KEEP_TRANSITION = 'true'` at runtime to opt back into CSS\n * transitions. Unlike `nodeEnv` (a module-load-time read), a call-time read\n * sees that mutation.\n */\nexport const keepTransition = () => (typeof process === 'undefined' ? undefined : process.env?.KEEP_TRANSITION);\n","import { cn } from '@evolve.ui/theme-system';\nimport { useAtomValue } from 'jotai';\nimport { ReactNode, useContext } from 'react';\n\nimport { ModalContext } from '../../../Modal/context';\n\ntype Props = {\n    children: ReactNode;\n    className?: string;\n    density?: 'compact' | 'comfortable';\n    useCustomButtonContainer?: boolean;\n};\n\nexport const DialogActions = ({ children, className, density, useCustomButtonContainer }: Props) => {\n    const { showBottomScrollHintAtom } = useContext(ModalContext);\n    const showBottomScrollHint = useAtomValue(showBottomScrollHintAtom);\n\n    return (\n        <div\n            className={cn(\n                'flex grow-0 gap-sm p-sm',\n                {\n                    '[&_button]:grow-[1]': !useCustomButtonContainer,\n                    'p-xs': density === 'compact',\n                    'shadow-05': showBottomScrollHint,\n                },\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useSetAtom } from 'jotai';\nimport { ReactNode, useCallback, useContext, useEffect, useRef } from 'react';\n\nimport { ModalContext } from '../../../Modal/context';\nimport { effectEventListener } from '../../../utils/effectEventListener';\n\ntype Props = {\n    children: ReactNode;\n    density?: 'compact' | 'comfortable';\n    disableScroll?: boolean;\n    renderWhenClosed: boolean;\n};\n\nexport const DialogContent = ({ children, density, disableScroll = false, renderWhenClosed }: Props) => {\n    const { showBottomScrollHintAtom, showTopScrollHintAtom } = useContext(ModalContext);\n    const setShowBottomScrollHint = useSetAtom(showBottomScrollHintAtom);\n    const setShowTopScrollHint = useSetAtom(showTopScrollHintAtom);\n\n    const handleScroll = useCallback(\n        (contentRef: HTMLDivElement) => () => {\n            if (contentRef.scrollHeight > contentRef.clientHeight + 32) {\n                const atTheBottom =\n                    Math.round(contentRef.scrollHeight - contentRef.scrollTop) - 5 < contentRef.clientHeight;\n                const atTheTop = contentRef.scrollTop < 25;\n\n                setShowBottomScrollHint(!atTheBottom);\n                setShowTopScrollHint(!atTheTop);\n            } else if (contentRef.scrollTop === 0) {\n                setShowBottomScrollHint(false);\n                setShowTopScrollHint(false);\n            }\n        },\n        [setShowBottomScrollHint, setShowTopScrollHint]\n    );\n\n    const onScrollRef = useRef<ReturnType<typeof handleScroll>>(null);\n\n    // Trigger handleScroll on window resize\n    useEffect(() => {\n        return effectEventListener(window, 'resize', () => onScrollRef.current?.());\n    }, [handleScroll]);\n\n    return (\n        <div\n            className={cn('grow-[1] border-y border-solid border-border-secondary', {\n                'flex flex-col overflow-hidden': disableScroll,\n                'h-[100vh] overflow-y-auto': !disableScroll,\n                'p-sm': !disableScroll && density !== 'compact',\n                'p-xs': !disableScroll && density === 'compact',\n            })}\n            data-testid=\"dialog-content\"\n            ref={(ref) => {\n                if (!ref) {\n                    return;\n                }\n\n                const onScroll = handleScroll(ref);\n                onScrollRef.current = onScroll;\n\n                const resizeObserver = new ResizeObserver(() => {\n                    const scrollHeight = ref.scrollHeight;\n                    const clientHeight = ref.clientHeight;\n\n                    if (scrollHeight === clientHeight + 32) {\n                        setShowBottomScrollHint(false);\n                        setShowTopScrollHint(false);\n                    } else {\n                        onScroll();\n                    }\n                });\n\n                resizeObserver.observe(ref);\n                ref.addEventListener('scroll', onScroll);\n            }}\n        >\n            {renderWhenClosed ? children : null}\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useAtomValue } from 'jotai';\nimport { ReactNode, useContext } from 'react';\n\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { ArrowLeft, Close } from '../../../Icons';\nimport { ModalContext } from '../../../Modal/context';\nimport { H2 } from '../../../Typography/Text/Text';\n\ntype Props = {\n    children?: ReactNode;\n    density: 'compact' | 'comfortable';\n    onBackButtonClick?: () => void;\n    onCloseButtonClick: () => void;\n    textAlign?: 'center' | 'left' | 'right';\n};\n\nexport const DialogHeader = ({\n    children,\n    density = 'comfortable',\n    onBackButtonClick,\n    onCloseButtonClick,\n    textAlign = 'center',\n}: Props) => {\n    const { showTopScrollHintAtom } = useContext(ModalContext);\n    const showTopScrollHint = useAtomValue(showTopScrollHintAtom);\n\n    return (\n        <div\n            className={cn('relative grid grid-cols-[42px_1fr_42px] gap-[4px] p-sm', {\n                'p-xs': density === 'compact',\n                'shadow-01': showTopScrollHint,\n            })}\n        >\n            {onBackButtonClick !== undefined && (\n                <IconButton\n                    aria-label=\"Go Back\"\n                    className={cn('col-start-1 col-end-2')}\n                    data-testid=\"back-button\"\n                    hideTooltip\n                    icon={ArrowLeft}\n                    onClick={onBackButtonClick}\n                    size=\"md\"\n                    type=\"button\"\n                />\n            )}\n            <div\n                className={cn('col-start-2 col-end-3 flex', {\n                    'justify-center text-center': textAlign === 'center',\n                    'justify-end text-right': textAlign === 'right',\n                    'justify-start text-left': textAlign === 'left',\n                })}\n                data-testid=\"dialog-header-text-container\"\n            >\n                {typeof children === 'string' ? <H2 className=\"pt-[6px]\">{children}</H2> : children}\n            </div>\n            <IconButton\n                className={cn('col-start-3 col-end-4')}\n                data-testid=\"close-button\"\n                hideTooltip\n                icon={Close}\n                onClick={onCloseButtonClick}\n                size=\"md\"\n                type=\"button\"\n            />\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { effectEventListener } from '../utils/effectEventListener';\nimport { keepTransition } from '../utils/keepTransition';\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { DialogActions } from './components/DialogActions/DialogActions';\nimport { DialogContent } from './components/DialogContent/DialogContent';\nimport { DialogHeader } from './components/DialogHeader/DialogHeader';\n\ntype ReasonForClose = 'backdrop' | 'closeButton' | 'escape' | 'external';\n\ntype Props = {\n    /**\n     * Optional actions to display at the bottom of the drawer\n     * Actions container has these styles:\n     * ```css\n     * display: flex;\n     * gap: 16px;\n     * > button {\n     *      flex-grow: 1;\n     * }\n     * ```\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer actions={<Button>Save</Button>} />\n     * ```\n     *\n     */\n    actions?: ReactNode;\n    /**\n     * Optional anchor for the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer anchor=\"left\" />\n     * ```\n     *\n     * @default 'right'\n     */\n    anchor?: 'left' | 'right';\n    /**\n     * Children of the drawer are the content of the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer><div>Hello World</div></Drawer>\n     * ```\n     *\n     */\n    children?: ReactNode;\n    /**\n     * Optional class name for the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer className=\"bg-red-500\" />\n     * ```\n     *\n     */\n    className?: string;\n    /**\n     * Optional flag to close the drawer when the user clicks outside\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer closeOnOutsideClick={false} />\n     * ```\n     *\n     * @default true\n     */\n    closeOnOutsideClick?: boolean;\n    /**\n     * Optional flag to close the drawer when the user presses the Escape key\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer closeOnEscape={false} />\n     * ```\n     *\n     * @default true\n     */\n    closeOnEscape?: boolean;\n    /**\n     * Optional custom header to replace the default DialogHeader\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer customHeader={<div>Custom Header</div>} />\n     * ```\n     *\n     */\n    customHeader?: ReactNode;\n    /**\n     * Optional density for the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer density=\"compact\" />\n     * ```\n     *\n     * @default 'comfortable'\n     */\n    density?: 'compact' | 'comfortable';\n    /**\n     * Optional flag to disable scrolling in the drawer content area\n     * Useful when the content has its own scrollable areas (e.g., tabs)\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer disableScroll />\n     * ```\n     *\n     * @default false\n     */\n    disableScroll?: boolean;\n    /**\n     * Required function call when drawer closes, this will almost always be a call to `setShowState(false)`\n     *\n     * Usage:\n     * ```tsx\n     * const [show, setShow] = useState(false);\n     * ...\n     * <Drawer handleClose={() => setShow(false)} />\n     * ```\n     *\n     */\n    handleClose: (reason?: ReasonForClose) => void;\n    /**\n     * Optional flag that controls whether the drawer has a drop shadow\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer hasShadow />\n     * ```\n     *\n     */\n    hasShadow?: boolean;\n    /**\n     * Optional header text for the drawer, appears at the top of the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer headerText=\"Hello World\" />\n     * ```\n     *\n     */\n    headerText?: string | ReactNode;\n    /**\n     * Optional alignment for the header text\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer headerTextAlign=\"left\" />\n     * ```\n     *\n     * @default 'center'\n     */\n    headerTextAlign?: 'center' | 'left' | 'right';\n    /**\n     * Optional flag to keep the drawer in the DOM while closed\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer keepInDOMWhileClosed={false} />\n     * ```\n     * @default true\n     */\n    keepInDOMWhileClosed?: boolean;\n\n    /**\n     * Optional function call when the back button is clicked\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer onBackButtonClick={() => console.log('Back button clicked')} />\n     * ```\n     *\n     */\n    onBackButtonClick?: () => void;\n    /**\n     * Required flag to show the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer show />\n     * ```\n     *\n     */\n    show: boolean;\n    /**\n     * Optional size for the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer size=\"wide\" />\n     * ```\n     *\n     * @default 'narrow'\n     */\n    size?: 'narrow' | 'wide' | 'extended' | 'full';\n    /**\n     * Optional flag to control the action container\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer useCustomButtonContainer />\n     * ```\n     *\n     */\n    useCustomButtonContainer?: boolean;\n};\n\n// Open drawers share a single body scroll-lock. Module-scoped so the lock is\n// released only when the last open drawer closes, and so the body's original\n// overflow / padding are captured once (when the first drawer opens) and\n// restored at the end rather than hardcoding values.\nlet openDrawerCount = 0;\nlet previousBodyOverflow = '';\nlet previousBodyPaddingRight = '';\n\n// Identities of currently-open drawers, in open order. Escape only closes the\n// last one pushed (the top-most), so stacked drawers close one at a time\n// instead of all collapsing on a single keypress. Per-instance ref objects are\n// used as identities rather than useId so this doesn't consume React's id\n// sequence and shift autogenerated ids in consumer snapshots.\nconst openDrawerStack: object[] = [];\n\n/**\n * A drawer component using the `dialog` element\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog\n */\nexport const Drawer = ({\n    actions,\n    anchor = 'right',\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsideClick = true,\n    customHeader,\n    density = 'comfortable',\n    disableScroll = false,\n    handleClose,\n    hasShadow = false,\n    headerText,\n    headerTextAlign = 'center',\n    keepInDOMWhileClosed = true,\n    onBackButtonClick,\n    show,\n    size = 'narrow',\n    useCustomButtonContainer = false,\n}: Props) => {\n    const reasonForClose = useRef<ReasonForClose>('external');\n    // Per-instance ref instead of a shared id: several Drawers can be mounted at\n    // once, and a duplicate id would make a lookup match the wrong backdrop.\n    const backdropRef = useRef<HTMLDivElement>(null);\n    const drawerIdRef = useRef<object>({});\n    const [renderDrawer, setRenderDrawer] = useState(show);\n\n    const removeTransitionForTest = Boolean(nodeEnv === 'test') && Boolean(keepTransition() !== 'true');\n\n    const startCloseTransition = useCallback(\n        (reason: ReasonForClose) => {\n            setRenderDrawer(false);\n            reasonForClose.current = reason;\n\n            // Close the drawer immediately in test environment\n            if (removeTransitionForTest) {\n                handleClose(reason);\n            }\n        },\n        [handleClose, removeTransitionForTest]\n    );\n\n    // Close the drawer when the show prop changes to false\n    useEffect(() => {\n        if (renderDrawer && !show) {\n            startCloseTransition('external');\n        }\n    }, [renderDrawer, show, startCloseTransition]);\n\n    //  Show the drawer when the show prop changes to true\n    useEffect(() => {\n        if (show) {\n            setRenderDrawer(true);\n        }\n    }, [show]);\n\n    // Close the drawer when the escape key is pressed. Only listen while this\n    // drawer is open so a closed instance never preventDefaults Escape for\n    // other components, and only the top-most open drawer reacts so stacked\n    // drawers close one at a time rather than all at once.\n    useEffect(() => {\n        if (!renderDrawer || !closeOnEscape) {\n            return;\n        }\n\n        const drawerIdentity = drawerIdRef.current;\n        openDrawerStack.push(drawerIdentity);\n\n        const removeListener = effectEventListener(window, 'keydown', (event) => {\n            if (!(event instanceof KeyboardEvent) || event.key !== 'Escape') {\n                return;\n            }\n            if (openDrawerStack[openDrawerStack.length - 1] !== drawerIdentity) {\n                return;\n            }\n            event.preventDefault();\n            startCloseTransition('escape');\n        });\n\n        return () => {\n            const index = openDrawerStack.lastIndexOf(drawerIdentity);\n            if (index !== -1) {\n                openDrawerStack.splice(index, 1);\n            }\n            removeListener();\n        };\n    }, [renderDrawer, closeOnEscape, startCloseTransition]);\n\n    // Close the drawer when the backdrop is clicked\n    useEffect(() => {\n        const handleBackdropClick = (event: MouseEvent) => {\n            if (event.target === backdropRef.current && closeOnOutsideClick) {\n                startCloseTransition('backdrop');\n            }\n        };\n\n        window.addEventListener('click', handleBackdropClick);\n\n        return () => {\n            window.removeEventListener('click', handleBackdropClick);\n        };\n    }, [closeOnOutsideClick, startCloseTransition]);\n\n    // Prevent body scrolling while any drawer is open. Ref-counted across\n    // instances so closing one drawer does not unlock scroll while another is\n    // still open; the first drawer to open captures the body's prior overflow\n    // and padding and the last to close restores them. The scrollbar's width is\n    // added as padding-right while locked so hiding the scrollbar doesn't shift\n    // the page (mirrors modal/PreventModalScroll).\n    useEffect(() => {\n        if (!show) {\n            return;\n        }\n\n        if (openDrawerCount === 0) {\n            previousBodyOverflow = document.body.style.overflow;\n            previousBodyPaddingRight = document.body.style.paddingRight;\n\n            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n            if (scrollbarWidth > 0) {\n                document.body.style.paddingRight = `${scrollbarWidth}px`;\n            }\n        }\n        openDrawerCount += 1;\n        document.body.style.overflow = 'hidden';\n\n        return () => {\n            openDrawerCount -= 1;\n            if (openDrawerCount === 0) {\n                document.body.style.overflow = previousBodyOverflow;\n                document.body.style.paddingRight = previousBodyPaddingRight;\n            }\n        };\n    }, [show]);\n\n    // Render children when the drawer is closed and keepInDOMWhileClosed is true\n    const renderWhenClosed = keepInDOMWhileClosed || renderDrawer;\n\n    return (\n        <>\n            <div\n                className={cn(\n                    'hui-focus-visible-outline invisible fixed inset-0 z-30 bg-background-overlay opacity-0 duration-500 focus:m-2xs focus:transition-none',\n                    {\n                        'opacity-1 visible': renderDrawer,\n                        'pointer-events-none invisible opacity-0': !renderDrawer,\n                        'transition-none': removeTransitionForTest,\n                    }\n                )}\n                data-testid=\"drawer-backdrop\"\n                ref={backdropRef}\n            />\n            <dialog\n                aria-label=\"Drawer Menu\"\n                className={cn(\n                    // GENERAL\n                    'm-w-[320px] fixed top-0 z-40 flex h-full max-h-full w-full flex-col p-0',\n                    // SIZE\n                    {\n                        'h-[100vh] w-[100vw]': size === 'full',\n                        'max-w-[320px]': size === 'narrow',\n                        'max-w-[480px]': size === 'wide',\n                        'max-w-[720px]': size === 'extended',\n                    },\n                    // SHADOW\n                    { 'shadow-04': hasShadow },\n                    // ANCHOR\n                    { 'left-0 ml-0': anchor === 'left', 'right-0 mr-0': anchor === 'right' },\n                    // ANIMATION\n                    {\n                        'invisible -translate-x-full opacity-0 transition-all': !renderDrawer && anchor === 'left',\n                        'invisible translate-x-full opacity-0 transition-all': !renderDrawer && anchor === 'right',\n                        'opacity-1 -translate-x-0 transition-all': renderDrawer && anchor === 'left',\n                        'opacity-1 translate-x-0 transition-all': renderDrawer && anchor === 'right',\n                        'transition-none': removeTransitionForTest,\n                    },\n                    className\n                )}\n                data-hui-id=\"Drawer\"\n                onTransitionEnd={() => !renderDrawer && handleClose(reasonForClose.current)}\n                open={renderDrawer}\n            >\n                {customHeader !== undefined ? (\n                    customHeader\n                ) : (\n                    <DialogHeader\n                        density={density}\n                        onBackButtonClick={onBackButtonClick}\n                        onCloseButtonClick={() => startCloseTransition('closeButton')}\n                        textAlign={headerTextAlign}\n                    >\n                        {headerText}\n                    </DialogHeader>\n                )}\n                <DialogContent\n                    density={density}\n                    disableScroll={disableScroll}\n                    renderWhenClosed={renderWhenClosed}\n                >\n                    {children}\n                </DialogContent>\n                {actions && (\n                    <DialogActions\n                        density={density}\n                        useCustomButtonContainer={useCustomButtonContainer}\n                    >\n                        {actions}\n                    </DialogActions>\n                )}\n            </dialog>\n        </>\n    );\n};\n"],"mappings":"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"}

package/Drawer-BkCPfK6P.mjs

@@ -0,0 +1,254 @@
+import { t as nodeEnv } from "./nodeEnv-B4v61vkJ.mjs";
+import { ArrowLeft, Close } from "./Icons.mjs";
+import { H2 } from "./Typography/Text.mjs";
+import { IconButton } from "./IconButton.mjs";
+import { ModalContext } from "./modal/context.mjs";
+import { t as effectEventListener } from "./effectEventListener-WApakaup.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAtomValue, useSetAtom } from "jotai";
+//#region src/utils/keepTransition.ts
+/**
+* Test-only escape hatch, read at call time: Drawer specs set
+* `process.env.KEEP_TRANSITION = 'true'` at runtime to opt back into CSS
+* transitions. Unlike `nodeEnv` (a module-load-time read), a call-time read
+* sees that mutation.
+*/
+const keepTransition = () => typeof process === "undefined" ? void 0 : process.env?.KEEP_TRANSITION;
+//#endregion
+//#region src/Drawer/components/DialogActions/DialogActions.tsx
+const DialogActions = ({ children, className, density, useCustomButtonContainer }) => {
+	const { showBottomScrollHintAtom } = useContext(ModalContext);
+	const showBottomScrollHint = useAtomValue(showBottomScrollHintAtom);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex grow-0 gap-sm p-sm", {
+			"[&_button]:grow-[1]": !useCustomButtonContainer,
+			"p-xs": density === "compact",
+			"shadow-05": showBottomScrollHint
+		}, className),
+		children
+	});
+};
+//#endregion
+//#region src/Drawer/components/DialogContent/DialogContent.tsx
+const DialogContent = ({ children, density, disableScroll = false, renderWhenClosed }) => {
+	const { showBottomScrollHintAtom, showTopScrollHintAtom } = useContext(ModalContext);
+	const setShowBottomScrollHint = useSetAtom(showBottomScrollHintAtom);
+	const setShowTopScrollHint = useSetAtom(showTopScrollHintAtom);
+	const handleScroll = useCallback((contentRef) => () => {
+		if (contentRef.scrollHeight > contentRef.clientHeight + 32) {
+			const atTheBottom = Math.round(contentRef.scrollHeight - contentRef.scrollTop) - 5 < contentRef.clientHeight;
+			const atTheTop = contentRef.scrollTop < 25;
+			setShowBottomScrollHint(!atTheBottom);
+			setShowTopScrollHint(!atTheTop);
+		} else if (contentRef.scrollTop === 0) {
+			setShowBottomScrollHint(false);
+			setShowTopScrollHint(false);
+		}
+	}, [setShowBottomScrollHint, setShowTopScrollHint]);
+	const onScrollRef = useRef(null);
+	useEffect(() => {
+		return effectEventListener(window, "resize", () => onScrollRef.current?.());
+	}, [handleScroll]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grow-[1] border-y border-solid border-border-secondary", {
+			"flex flex-col overflow-hidden": disableScroll,
+			"h-[100vh] overflow-y-auto": !disableScroll,
+			"p-sm": !disableScroll && density !== "compact",
+			"p-xs": !disableScroll && density === "compact"
+		}),
+		"data-testid": "dialog-content",
+		ref: (ref) => {
+			if (!ref) return;
+			const onScroll = handleScroll(ref);
+			onScrollRef.current = onScroll;
+			new ResizeObserver(() => {
+				if (ref.scrollHeight === ref.clientHeight + 32) {
+					setShowBottomScrollHint(false);
+					setShowTopScrollHint(false);
+				} else onScroll();
+			}).observe(ref);
+			ref.addEventListener("scroll", onScroll);
+		},
+		children: renderWhenClosed ? children : null
+	});
+};
+//#endregion
+//#region src/Drawer/components/DialogHeader/DialogHeader.tsx
+const DialogHeader = ({ children, density = "comfortable", onBackButtonClick, onCloseButtonClick, textAlign = "center" }) => {
+	const { showTopScrollHintAtom } = useContext(ModalContext);
+	const showTopScrollHint = useAtomValue(showTopScrollHintAtom);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative grid grid-cols-[42px_1fr_42px] gap-[4px] p-sm", {
+			"p-xs": density === "compact",
+			"shadow-01": showTopScrollHint
+		}),
+		children: [
+			onBackButtonClick !== void 0 && /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Go Back",
+				className: cn("col-start-1 col-end-2"),
+				"data-testid": "back-button",
+				hideTooltip: true,
+				icon: ArrowLeft,
+				onClick: onBackButtonClick,
+				size: "md",
+				type: "button"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("col-start-2 col-end-3 flex", {
+					"justify-center text-center": textAlign === "center",
+					"justify-end text-right": textAlign === "right",
+					"justify-start text-left": textAlign === "left"
+				}),
+				"data-testid": "dialog-header-text-container",
+				children: typeof children === "string" ? /* @__PURE__ */ jsx(H2, {
+					className: "pt-[6px]",
+					children
+				}) : children
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				className: cn("col-start-3 col-end-4"),
+				"data-testid": "close-button",
+				hideTooltip: true,
+				icon: Close,
+				onClick: onCloseButtonClick,
+				size: "md",
+				type: "button"
+			})
+		]
+	});
+};
+//#endregion
+//#region src/Drawer/Drawer.tsx
+let openDrawerCount = 0;
+let previousBodyOverflow = "";
+let previousBodyPaddingRight = "";
+const openDrawerStack = [];
+/**
+* A drawer component using the `dialog` element
+* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+*/
+const Drawer = ({ actions, anchor = "right", children, className, closeOnEscape = true, closeOnOutsideClick = true, customHeader, density = "comfortable", disableScroll = false, handleClose, hasShadow = false, headerText, headerTextAlign = "center", keepInDOMWhileClosed = true, onBackButtonClick, show, size = "narrow", useCustomButtonContainer = false }) => {
+	const reasonForClose = useRef("external");
+	const backdropRef = useRef(null);
+	const drawerIdRef = useRef({});
+	const [renderDrawer, setRenderDrawer] = useState(show);
+	const removeTransitionForTest = Boolean(nodeEnv === "test") && Boolean(keepTransition() !== "true");
+	const startCloseTransition = useCallback((reason) => {
+		setRenderDrawer(false);
+		reasonForClose.current = reason;
+		if (removeTransitionForTest) handleClose(reason);
+	}, [handleClose, removeTransitionForTest]);
+	useEffect(() => {
+		if (renderDrawer && !show) startCloseTransition("external");
+	}, [
+		renderDrawer,
+		show,
+		startCloseTransition
+	]);
+	useEffect(() => {
+		if (show) setRenderDrawer(true);
+	}, [show]);
+	useEffect(() => {
+		if (!renderDrawer || !closeOnEscape) return;
+		const drawerIdentity = drawerIdRef.current;
+		openDrawerStack.push(drawerIdentity);
+		const removeListener = effectEventListener(window, "keydown", (event) => {
+			if (!(event instanceof KeyboardEvent) || event.key !== "Escape") return;
+			if (openDrawerStack[openDrawerStack.length - 1] !== drawerIdentity) return;
+			event.preventDefault();
+			startCloseTransition("escape");
+		});
+		return () => {
+			const index = openDrawerStack.lastIndexOf(drawerIdentity);
+			if (index !== -1) openDrawerStack.splice(index, 1);
+			removeListener();
+		};
+	}, [
+		renderDrawer,
+		closeOnEscape,
+		startCloseTransition
+	]);
+	useEffect(() => {
+		const handleBackdropClick = (event) => {
+			if (event.target === backdropRef.current && closeOnOutsideClick) startCloseTransition("backdrop");
+		};
+		window.addEventListener("click", handleBackdropClick);
+		return () => {
+			window.removeEventListener("click", handleBackdropClick);
+		};
+	}, [closeOnOutsideClick, startCloseTransition]);
+	useEffect(() => {
+		if (!show) return;
+		if (openDrawerCount === 0) {
+			previousBodyOverflow = document.body.style.overflow;
+			previousBodyPaddingRight = document.body.style.paddingRight;
+			const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+			if (scrollbarWidth > 0) document.body.style.paddingRight = `${scrollbarWidth}px`;
+		}
+		openDrawerCount += 1;
+		document.body.style.overflow = "hidden";
+		return () => {
+			openDrawerCount -= 1;
+			if (openDrawerCount === 0) {
+				document.body.style.overflow = previousBodyOverflow;
+				document.body.style.paddingRight = previousBodyPaddingRight;
+			}
+		};
+	}, [show]);
+	const renderWhenClosed = keepInDOMWhileClosed || renderDrawer;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: cn("hui-focus-visible-outline invisible fixed inset-0 z-30 bg-background-overlay opacity-0 duration-500 focus:m-2xs focus:transition-none", {
+			"opacity-1 visible": renderDrawer,
+			"pointer-events-none invisible opacity-0": !renderDrawer,
+			"transition-none": removeTransitionForTest
+		}),
+		"data-testid": "drawer-backdrop",
+		ref: backdropRef
+	}), /* @__PURE__ */ jsxs("dialog", {
+		"aria-label": "Drawer Menu",
+		className: cn("m-w-[320px] fixed top-0 z-40 flex h-full max-h-full w-full flex-col p-0", {
+			"h-[100vh] w-[100vw]": size === "full",
+			"max-w-[320px]": size === "narrow",
+			"max-w-[480px]": size === "wide",
+			"max-w-[720px]": size === "extended"
+		}, { "shadow-04": hasShadow }, {
+			"left-0 ml-0": anchor === "left",
+			"right-0 mr-0": anchor === "right"
+		}, {
+			"invisible -translate-x-full opacity-0 transition-all": !renderDrawer && anchor === "left",
+			"invisible translate-x-full opacity-0 transition-all": !renderDrawer && anchor === "right",
+			"opacity-1 -translate-x-0 transition-all": renderDrawer && anchor === "left",
+			"opacity-1 translate-x-0 transition-all": renderDrawer && anchor === "right",
+			"transition-none": removeTransitionForTest
+		}, className),
+		"data-hui-id": "Drawer",
+		onTransitionEnd: () => !renderDrawer && handleClose(reasonForClose.current),
+		open: renderDrawer,
+		children: [
+			customHeader !== void 0 ? customHeader : /* @__PURE__ */ jsx(DialogHeader, {
+				density,
+				onBackButtonClick,
+				onCloseButtonClick: () => startCloseTransition("closeButton"),
+				textAlign: headerTextAlign,
+				children: headerText
+			}),
+			/* @__PURE__ */ jsx(DialogContent, {
+				density,
+				disableScroll,
+				renderWhenClosed,
+				children
+			}),
+			actions && /* @__PURE__ */ jsx(DialogActions, {
+				density,
+				useCustomButtonContainer,
+				children: actions
+			})
+		]
+	})] });
+};
+//#endregion
+export { Drawer as t };
+
+//# sourceMappingURL=Drawer-BkCPfK6P.mjs.map

package/Drawer-BkCPfK6P.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer-BkCPfK6P.mjs","names":[],"sources":["../src/utils/keepTransition.ts","../src/Drawer/components/DialogActions/DialogActions.tsx","../src/Drawer/components/DialogContent/DialogContent.tsx","../src/Drawer/components/DialogHeader/DialogHeader.tsx","../src/Drawer/Drawer.tsx"],"sourcesContent":["declare const process:\n    | {\n          env?: {\n              KEEP_TRANSITION?: string;\n          };\n      }\n    | undefined;\n\n/**\n * Test-only escape hatch, read at call time: Drawer specs set\n * `process.env.KEEP_TRANSITION = 'true'` at runtime to opt back into CSS\n * transitions. Unlike `nodeEnv` (a module-load-time read), a call-time read\n * sees that mutation.\n */\nexport const keepTransition = () => (typeof process === 'undefined' ? undefined : process.env?.KEEP_TRANSITION);\n","import { cn } from '@evolve.ui/theme-system';\nimport { useAtomValue } from 'jotai';\nimport { ReactNode, useContext } from 'react';\n\nimport { ModalContext } from '../../../Modal/context';\n\ntype Props = {\n    children: ReactNode;\n    className?: string;\n    density?: 'compact' | 'comfortable';\n    useCustomButtonContainer?: boolean;\n};\n\nexport const DialogActions = ({ children, className, density, useCustomButtonContainer }: Props) => {\n    const { showBottomScrollHintAtom } = useContext(ModalContext);\n    const showBottomScrollHint = useAtomValue(showBottomScrollHintAtom);\n\n    return (\n        <div\n            className={cn(\n                'flex grow-0 gap-sm p-sm',\n                {\n                    '[&_button]:grow-[1]': !useCustomButtonContainer,\n                    'p-xs': density === 'compact',\n                    'shadow-05': showBottomScrollHint,\n                },\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useSetAtom } from 'jotai';\nimport { ReactNode, useCallback, useContext, useEffect, useRef } from 'react';\n\nimport { ModalContext } from '../../../Modal/context';\nimport { effectEventListener } from '../../../utils/effectEventListener';\n\ntype Props = {\n    children: ReactNode;\n    density?: 'compact' | 'comfortable';\n    disableScroll?: boolean;\n    renderWhenClosed: boolean;\n};\n\nexport const DialogContent = ({ children, density, disableScroll = false, renderWhenClosed }: Props) => {\n    const { showBottomScrollHintAtom, showTopScrollHintAtom } = useContext(ModalContext);\n    const setShowBottomScrollHint = useSetAtom(showBottomScrollHintAtom);\n    const setShowTopScrollHint = useSetAtom(showTopScrollHintAtom);\n\n    const handleScroll = useCallback(\n        (contentRef: HTMLDivElement) => () => {\n            if (contentRef.scrollHeight > contentRef.clientHeight + 32) {\n                const atTheBottom =\n                    Math.round(contentRef.scrollHeight - contentRef.scrollTop) - 5 < contentRef.clientHeight;\n                const atTheTop = contentRef.scrollTop < 25;\n\n                setShowBottomScrollHint(!atTheBottom);\n                setShowTopScrollHint(!atTheTop);\n            } else if (contentRef.scrollTop === 0) {\n                setShowBottomScrollHint(false);\n                setShowTopScrollHint(false);\n            }\n        },\n        [setShowBottomScrollHint, setShowTopScrollHint]\n    );\n\n    const onScrollRef = useRef<ReturnType<typeof handleScroll>>(null);\n\n    // Trigger handleScroll on window resize\n    useEffect(() => {\n        return effectEventListener(window, 'resize', () => onScrollRef.current?.());\n    }, [handleScroll]);\n\n    return (\n        <div\n            className={cn('grow-[1] border-y border-solid border-border-secondary', {\n                'flex flex-col overflow-hidden': disableScroll,\n                'h-[100vh] overflow-y-auto': !disableScroll,\n                'p-sm': !disableScroll && density !== 'compact',\n                'p-xs': !disableScroll && density === 'compact',\n            })}\n            data-testid=\"dialog-content\"\n            ref={(ref) => {\n                if (!ref) {\n                    return;\n                }\n\n                const onScroll = handleScroll(ref);\n                onScrollRef.current = onScroll;\n\n                const resizeObserver = new ResizeObserver(() => {\n                    const scrollHeight = ref.scrollHeight;\n                    const clientHeight = ref.clientHeight;\n\n                    if (scrollHeight === clientHeight + 32) {\n                        setShowBottomScrollHint(false);\n                        setShowTopScrollHint(false);\n                    } else {\n                        onScroll();\n                    }\n                });\n\n                resizeObserver.observe(ref);\n                ref.addEventListener('scroll', onScroll);\n            }}\n        >\n            {renderWhenClosed ? children : null}\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useAtomValue } from 'jotai';\nimport { ReactNode, useContext } from 'react';\n\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { ArrowLeft, Close } from '../../../Icons';\nimport { ModalContext } from '../../../Modal/context';\nimport { H2 } from '../../../Typography/Text/Text';\n\ntype Props = {\n    children?: ReactNode;\n    density: 'compact' | 'comfortable';\n    onBackButtonClick?: () => void;\n    onCloseButtonClick: () => void;\n    textAlign?: 'center' | 'left' | 'right';\n};\n\nexport const DialogHeader = ({\n    children,\n    density = 'comfortable',\n    onBackButtonClick,\n    onCloseButtonClick,\n    textAlign = 'center',\n}: Props) => {\n    const { showTopScrollHintAtom } = useContext(ModalContext);\n    const showTopScrollHint = useAtomValue(showTopScrollHintAtom);\n\n    return (\n        <div\n            className={cn('relative grid grid-cols-[42px_1fr_42px] gap-[4px] p-sm', {\n                'p-xs': density === 'compact',\n                'shadow-01': showTopScrollHint,\n            })}\n        >\n            {onBackButtonClick !== undefined && (\n                <IconButton\n                    aria-label=\"Go Back\"\n                    className={cn('col-start-1 col-end-2')}\n                    data-testid=\"back-button\"\n                    hideTooltip\n                    icon={ArrowLeft}\n                    onClick={onBackButtonClick}\n                    size=\"md\"\n                    type=\"button\"\n                />\n            )}\n            <div\n                className={cn('col-start-2 col-end-3 flex', {\n                    'justify-center text-center': textAlign === 'center',\n                    'justify-end text-right': textAlign === 'right',\n                    'justify-start text-left': textAlign === 'left',\n                })}\n                data-testid=\"dialog-header-text-container\"\n            >\n                {typeof children === 'string' ? <H2 className=\"pt-[6px]\">{children}</H2> : children}\n            </div>\n            <IconButton\n                className={cn('col-start-3 col-end-4')}\n                data-testid=\"close-button\"\n                hideTooltip\n                icon={Close}\n                onClick={onCloseButtonClick}\n                size=\"md\"\n                type=\"button\"\n            />\n        </div>\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { effectEventListener } from '../utils/effectEventListener';\nimport { keepTransition } from '../utils/keepTransition';\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { DialogActions } from './components/DialogActions/DialogActions';\nimport { DialogContent } from './components/DialogContent/DialogContent';\nimport { DialogHeader } from './components/DialogHeader/DialogHeader';\n\ntype ReasonForClose = 'backdrop' | 'closeButton' | 'escape' | 'external';\n\ntype Props = {\n    /**\n     * Optional actions to display at the bottom of the drawer\n     * Actions container has these styles:\n     * ```css\n     * display: flex;\n     * gap: 16px;\n     * > button {\n     *      flex-grow: 1;\n     * }\n     * ```\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer actions={<Button>Save</Button>} />\n     * ```\n     *\n     */\n    actions?: ReactNode;\n    /**\n     * Optional anchor for the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer anchor=\"left\" />\n     * ```\n     *\n     * @default 'right'\n     */\n    anchor?: 'left' | 'right';\n    /**\n     * Children of the drawer are the content of the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer><div>Hello World</div></Drawer>\n     * ```\n     *\n     */\n    children?: ReactNode;\n    /**\n     * Optional class name for the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer className=\"bg-red-500\" />\n     * ```\n     *\n     */\n    className?: string;\n    /**\n     * Optional flag to close the drawer when the user clicks outside\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer closeOnOutsideClick={false} />\n     * ```\n     *\n     * @default true\n     */\n    closeOnOutsideClick?: boolean;\n    /**\n     * Optional flag to close the drawer when the user presses the Escape key\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer closeOnEscape={false} />\n     * ```\n     *\n     * @default true\n     */\n    closeOnEscape?: boolean;\n    /**\n     * Optional custom header to replace the default DialogHeader\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer customHeader={<div>Custom Header</div>} />\n     * ```\n     *\n     */\n    customHeader?: ReactNode;\n    /**\n     * Optional density for the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer density=\"compact\" />\n     * ```\n     *\n     * @default 'comfortable'\n     */\n    density?: 'compact' | 'comfortable';\n    /**\n     * Optional flag to disable scrolling in the drawer content area\n     * Useful when the content has its own scrollable areas (e.g., tabs)\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer disableScroll />\n     * ```\n     *\n     * @default false\n     */\n    disableScroll?: boolean;\n    /**\n     * Required function call when drawer closes, this will almost always be a call to `setShowState(false)`\n     *\n     * Usage:\n     * ```tsx\n     * const [show, setShow] = useState(false);\n     * ...\n     * <Drawer handleClose={() => setShow(false)} />\n     * ```\n     *\n     */\n    handleClose: (reason?: ReasonForClose) => void;\n    /**\n     * Optional flag that controls whether the drawer has a drop shadow\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer hasShadow />\n     * ```\n     *\n     */\n    hasShadow?: boolean;\n    /**\n     * Optional header text for the drawer, appears at the top of the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer headerText=\"Hello World\" />\n     * ```\n     *\n     */\n    headerText?: string | ReactNode;\n    /**\n     * Optional alignment for the header text\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer headerTextAlign=\"left\" />\n     * ```\n     *\n     * @default 'center'\n     */\n    headerTextAlign?: 'center' | 'left' | 'right';\n    /**\n     * Optional flag to keep the drawer in the DOM while closed\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer keepInDOMWhileClosed={false} />\n     * ```\n     * @default true\n     */\n    keepInDOMWhileClosed?: boolean;\n\n    /**\n     * Optional function call when the back button is clicked\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer onBackButtonClick={() => console.log('Back button clicked')} />\n     * ```\n     *\n     */\n    onBackButtonClick?: () => void;\n    /**\n     * Required flag to show the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer show />\n     * ```\n     *\n     */\n    show: boolean;\n    /**\n     * Optional size for the drawer\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer size=\"wide\" />\n     * ```\n     *\n     * @default 'narrow'\n     */\n    size?: 'narrow' | 'wide' | 'extended' | 'full';\n    /**\n     * Optional flag to control the action container\n     *\n     * Usage:\n     * ```tsx\n     * <Drawer useCustomButtonContainer />\n     * ```\n     *\n     */\n    useCustomButtonContainer?: boolean;\n};\n\n// Open drawers share a single body scroll-lock. Module-scoped so the lock is\n// released only when the last open drawer closes, and so the body's original\n// overflow / padding are captured once (when the first drawer opens) and\n// restored at the end rather than hardcoding values.\nlet openDrawerCount = 0;\nlet previousBodyOverflow = '';\nlet previousBodyPaddingRight = '';\n\n// Identities of currently-open drawers, in open order. Escape only closes the\n// last one pushed (the top-most), so stacked drawers close one at a time\n// instead of all collapsing on a single keypress. Per-instance ref objects are\n// used as identities rather than useId so this doesn't consume React's id\n// sequence and shift autogenerated ids in consumer snapshots.\nconst openDrawerStack: object[] = [];\n\n/**\n * A drawer component using the `dialog` element\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog\n */\nexport const Drawer = ({\n    actions,\n    anchor = 'right',\n    children,\n    className,\n    closeOnEscape = true,\n    closeOnOutsideClick = true,\n    customHeader,\n    density = 'comfortable',\n    disableScroll = false,\n    handleClose,\n    hasShadow = false,\n    headerText,\n    headerTextAlign = 'center',\n    keepInDOMWhileClosed = true,\n    onBackButtonClick,\n    show,\n    size = 'narrow',\n    useCustomButtonContainer = false,\n}: Props) => {\n    const reasonForClose = useRef<ReasonForClose>('external');\n    // Per-instance ref instead of a shared id: several Drawers can be mounted at\n    // once, and a duplicate id would make a lookup match the wrong backdrop.\n    const backdropRef = useRef<HTMLDivElement>(null);\n    const drawerIdRef = useRef<object>({});\n    const [renderDrawer, setRenderDrawer] = useState(show);\n\n    const removeTransitionForTest = Boolean(nodeEnv === 'test') && Boolean(keepTransition() !== 'true');\n\n    const startCloseTransition = useCallback(\n        (reason: ReasonForClose) => {\n            setRenderDrawer(false);\n            reasonForClose.current = reason;\n\n            // Close the drawer immediately in test environment\n            if (removeTransitionForTest) {\n                handleClose(reason);\n            }\n        },\n        [handleClose, removeTransitionForTest]\n    );\n\n    // Close the drawer when the show prop changes to false\n    useEffect(() => {\n        if (renderDrawer && !show) {\n            startCloseTransition('external');\n        }\n    }, [renderDrawer, show, startCloseTransition]);\n\n    //  Show the drawer when the show prop changes to true\n    useEffect(() => {\n        if (show) {\n            setRenderDrawer(true);\n        }\n    }, [show]);\n\n    // Close the drawer when the escape key is pressed. Only listen while this\n    // drawer is open so a closed instance never preventDefaults Escape for\n    // other components, and only the top-most open drawer reacts so stacked\n    // drawers close one at a time rather than all at once.\n    useEffect(() => {\n        if (!renderDrawer || !closeOnEscape) {\n            return;\n        }\n\n        const drawerIdentity = drawerIdRef.current;\n        openDrawerStack.push(drawerIdentity);\n\n        const removeListener = effectEventListener(window, 'keydown', (event) => {\n            if (!(event instanceof KeyboardEvent) || event.key !== 'Escape') {\n                return;\n            }\n            if (openDrawerStack[openDrawerStack.length - 1] !== drawerIdentity) {\n                return;\n            }\n            event.preventDefault();\n            startCloseTransition('escape');\n        });\n\n        return () => {\n            const index = openDrawerStack.lastIndexOf(drawerIdentity);\n            if (index !== -1) {\n                openDrawerStack.splice(index, 1);\n            }\n            removeListener();\n        };\n    }, [renderDrawer, closeOnEscape, startCloseTransition]);\n\n    // Close the drawer when the backdrop is clicked\n    useEffect(() => {\n        const handleBackdropClick = (event: MouseEvent) => {\n            if (event.target === backdropRef.current && closeOnOutsideClick) {\n                startCloseTransition('backdrop');\n            }\n        };\n\n        window.addEventListener('click', handleBackdropClick);\n\n        return () => {\n            window.removeEventListener('click', handleBackdropClick);\n        };\n    }, [closeOnOutsideClick, startCloseTransition]);\n\n    // Prevent body scrolling while any drawer is open. Ref-counted across\n    // instances so closing one drawer does not unlock scroll while another is\n    // still open; the first drawer to open captures the body's prior overflow\n    // and padding and the last to close restores them. The scrollbar's width is\n    // added as padding-right while locked so hiding the scrollbar doesn't shift\n    // the page (mirrors modal/PreventModalScroll).\n    useEffect(() => {\n        if (!show) {\n            return;\n        }\n\n        if (openDrawerCount === 0) {\n            previousBodyOverflow = document.body.style.overflow;\n            previousBodyPaddingRight = document.body.style.paddingRight;\n\n            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n            if (scrollbarWidth > 0) {\n                document.body.style.paddingRight = `${scrollbarWidth}px`;\n            }\n        }\n        openDrawerCount += 1;\n        document.body.style.overflow = 'hidden';\n\n        return () => {\n            openDrawerCount -= 1;\n            if (openDrawerCount === 0) {\n                document.body.style.overflow = previousBodyOverflow;\n                document.body.style.paddingRight = previousBodyPaddingRight;\n            }\n        };\n    }, [show]);\n\n    // Render children when the drawer is closed and keepInDOMWhileClosed is true\n    const renderWhenClosed = keepInDOMWhileClosed || renderDrawer;\n\n    return (\n        <>\n            <div\n                className={cn(\n                    'hui-focus-visible-outline invisible fixed inset-0 z-30 bg-background-overlay opacity-0 duration-500 focus:m-2xs focus:transition-none',\n                    {\n                        'opacity-1 visible': renderDrawer,\n                        'pointer-events-none invisible opacity-0': !renderDrawer,\n                        'transition-none': removeTransitionForTest,\n                    }\n                )}\n                data-testid=\"drawer-backdrop\"\n                ref={backdropRef}\n            />\n            <dialog\n                aria-label=\"Drawer Menu\"\n                className={cn(\n                    // GENERAL\n                    'm-w-[320px] fixed top-0 z-40 flex h-full max-h-full w-full flex-col p-0',\n                    // SIZE\n                    {\n                        'h-[100vh] w-[100vw]': size === 'full',\n                        'max-w-[320px]': size === 'narrow',\n                        'max-w-[480px]': size === 'wide',\n                        'max-w-[720px]': size === 'extended',\n                    },\n                    // SHADOW\n                    { 'shadow-04': hasShadow },\n                    // ANCHOR\n                    { 'left-0 ml-0': anchor === 'left', 'right-0 mr-0': anchor === 'right' },\n                    // ANIMATION\n                    {\n                        'invisible -translate-x-full opacity-0 transition-all': !renderDrawer && anchor === 'left',\n                        'invisible translate-x-full opacity-0 transition-all': !renderDrawer && anchor === 'right',\n                        'opacity-1 -translate-x-0 transition-all': renderDrawer && anchor === 'left',\n                        'opacity-1 translate-x-0 transition-all': renderDrawer && anchor === 'right',\n                        'transition-none': removeTransitionForTest,\n                    },\n                    className\n                )}\n                data-hui-id=\"Drawer\"\n                onTransitionEnd={() => !renderDrawer && handleClose(reasonForClose.current)}\n                open={renderDrawer}\n            >\n                {customHeader !== undefined ? (\n                    customHeader\n                ) : (\n                    <DialogHeader\n                        density={density}\n                        onBackButtonClick={onBackButtonClick}\n                        onCloseButtonClick={() => startCloseTransition('closeButton')}\n                        textAlign={headerTextAlign}\n                    >\n                        {headerText}\n                    </DialogHeader>\n                )}\n                <DialogContent\n                    density={density}\n                    disableScroll={disableScroll}\n                    renderWhenClosed={renderWhenClosed}\n                >\n                    {children}\n                </DialogContent>\n                {actions && (\n                    <DialogActions\n                        density={density}\n                        useCustomButtonContainer={useCustomButtonContainer}\n                    >\n                        {actions}\n                    </DialogActions>\n                )}\n            </dialog>\n        </>\n    );\n};\n"],"mappings":"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"}