@evolve.ui/core-components 1.0.0

package/Modal-C6gatdtT.mjs

@@ -0,0 +1,301 @@
+import { l as useWindowIsMobile } from "./windowSizeProvider-sYwAqaOy.mjs";
+import { usePrevious } from "./hooks/usePrevious.mjs";
+import { a as ModalContent, c as BackButton, i as ModalHeader, n as ModalSubTitle, o as ModalActions, s as CloseButton, t as ModalTitle } from "./components-BPFB_cmZ.mjs";
+import { ModalContext } from "./modal/context.mjs";
+import { useCloseModal } from "./modal/useCloseModal.mjs";
+import { t as effectEventListener } from "./effectEventListener-WApakaup.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAtom, useAtomValue } from "jotai";
+import { createPortal } from "react-dom";
+import { atomWithReset } from "jotai/utils";
+//#region src/Modal/components/Backdrop/Backdrop.tsx
+const Backdrop = ({ children, closeModalOnBackdropClick, show }) => {
+	const closeModal = useCloseModal("backdrop");
+	const { modalAnimationAtom } = useContext(ModalContext);
+	const backdropRef = useRef(null);
+	const [modalAnimation, setModalAnimation] = useAtom(modalAnimationAtom);
+	useEffect(() => {
+		if (show && modalAnimation === "") setModalAnimation("opening");
+	}, [
+		modalAnimation,
+		setModalAnimation,
+		show
+	]);
+	useEffect(() => {
+		if (!closeModalOnBackdropClick) return;
+		return effectEventListener(window, "mousedown", (event) => {
+			if (event.target === backdropRef.current) closeModal();
+		});
+	}, [closeModal, closeModalOnBackdropClick]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("hui-modal-backdrop opacity-0", { "fixed bottom-0 left-0 right-0 top-0 z-[1001] flex items-center justify-center bg-background-overlay": show }, "transition-opacity duration-200 ease-in", { "opacity-100": modalAnimation === "opening" }, { "opacity-0": modalAnimation === "closing" }),
+		ref: backdropRef,
+		children
+	});
+};
+//#endregion
+//#region src/Modal/components/PreventModalScroll/PreventModalScroll.tsx
+let openLockCount = 0;
+let previousBodyStyles = null;
+let savedScrollPosition = 0;
+let iosTouchCleanup;
+/**
+* Prevents scrolling of the page while the modal is open.
+* Uses a unified approach with additional touch event handling for iOS Safari.
+*
+* Can be disabled with `preventScrollWhileOpen={false}` on the `Modal`.
+*/
+const PreventModalScroll = () => {
+	useEffect(() => {
+		const body = document.body;
+		if (openLockCount === 0) {
+			const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+			savedScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+			previousBodyStyles = {
+				overflow: body.style.overflow,
+				paddingRight: body.style.paddingRight,
+				position: body.style.position,
+				top: body.style.top,
+				width: body.style.width
+			};
+			const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+			if (scrollBarWidth > 0) body.style.paddingRight = `${scrollBarWidth}px`;
+			body.style.overflow = "hidden";
+			body.style.position = "fixed";
+			body.style.top = `-${savedScrollPosition}px`;
+			body.style.width = "100%";
+			if (isIOS) {
+				const preventDefault = (e) => {
+					const target = e.target;
+					if (!(target.closest("[data-testid=\"modal-content\"]") || target.closest(".hui-modal-container"))) e.preventDefault();
+				};
+				document.addEventListener("touchstart", preventDefault, { passive: false });
+				document.addEventListener("touchmove", preventDefault, { passive: false });
+				iosTouchCleanup = () => {
+					document.removeEventListener("touchstart", preventDefault);
+					document.removeEventListener("touchmove", preventDefault);
+				};
+			}
+		}
+		openLockCount += 1;
+		return () => {
+			openLockCount -= 1;
+			if (openLockCount === 0) {
+				iosTouchCleanup?.();
+				iosTouchCleanup = void 0;
+				body.style.overflow = previousBodyStyles?.overflow ?? "";
+				body.style.position = previousBodyStyles?.position ?? "";
+				body.style.top = previousBodyStyles?.top ?? "";
+				body.style.width = previousBodyStyles?.width ?? "";
+				body.style.paddingRight = previousBodyStyles?.paddingRight ?? "";
+				previousBodyStyles = null;
+				window.scrollTo(0, savedScrollPosition);
+			}
+		};
+	}, []);
+	return null;
+};
+//#endregion
+//#region src/Modal/ComposableModal.tsx
+/**
+* The actual modal logic. This is the "composable" version of the modal.
+*/
+const ComposableModal = ({ children, className, closeModalOnBackdropClick = true, "data-testid": dataTestId, handleClose: handleCloseProp, hasContentPager = false, hasProgressSteps = false, mobileFullScreen = false, onModalCloseAnimationEnd, position = "center", preventScrollWhileOpen = true, show: showProp }) => {
+	const [modalTarget, setModalTarget] = useState(null);
+	const [show, setShow] = useState(showProp);
+	const isMobile = useWindowIsMobile();
+	const modalAtoms = useMemo(() => ({
+		closeModalOnBackdropClickAtom: atomWithReset(true),
+		isMobileKeyboardOpen: atomWithReset(false),
+		modalAnimationAtom: atomWithReset(""),
+		modalFullScreenAtom: atomWithReset(mobileFullScreen),
+		modalHasFooterAtom: atomWithReset(false),
+		modalHasProgressStepsAtom: atomWithReset(hasProgressSteps),
+		modalRefAtom: atomWithReset({ current: null }),
+		scrollTopAtom: atomWithReset(0),
+		showBottomScrollHintAtom: atomWithReset(false),
+		showTopScrollHintAtom: atomWithReset(false)
+	}), [hasProgressSteps, mobileFullScreen]);
+	const modalAnimation = useAtomValue(modalAtoms.modalAnimationAtom);
+	const [isMobileKeyboardOpen, setIsMobileKeyboardOpen] = useAtom(modalAtoms.isMobileKeyboardOpen);
+	const handleClose = useCallback((handleCloseData) => {
+		setShow(false);
+		handleCloseProp(handleCloseData);
+	}, [handleCloseProp]);
+	useEffect(() => {
+		const target = document.querySelector(".hui-modal-target");
+		if (!target) throw new Error("Modal target not found, add one in the DOM tree.");
+		setModalTarget(target);
+	}, []);
+	const ref = useRef(null);
+	const [viewportHeight, setViewportHeight] = useState({
+		current: 0,
+		initial: 0
+	});
+	const updateViewport = useCallback(() => {
+		if (typeof window === "undefined" || typeof window.visualViewport === "undefined") return;
+		const currentViewportHeight = window.visualViewport?.height ?? 0;
+		if (viewportHeight.initial === 0) setViewportHeight({
+			current: currentViewportHeight,
+			initial: window.visualViewport?.height ?? 0
+		});
+		else {
+			const isLessThanInitial = Boolean(currentViewportHeight < viewportHeight.initial);
+			setIsMobileKeyboardOpen(isLessThanInitial);
+			setViewportHeight((prev) => ({
+				current: currentViewportHeight,
+				initial: prev.initial
+			}));
+		}
+	}, [setIsMobileKeyboardOpen, viewportHeight.initial]);
+	useEffect(() => {
+		if (typeof window !== "undefined" && typeof window.visualViewport !== "undefined" && isMobile) {
+			updateViewport();
+			window.visualViewport?.addEventListener("resize", updateViewport);
+			return () => window.visualViewport?.removeEventListener("resize", updateViewport);
+		}
+	}, [isMobile, updateViewport]);
+	if (!modalTarget || !show) return /* @__PURE__ */ jsx(ModalContext.Provider, {
+		value: {
+			handleClose,
+			onModalCloseAnimationEnd,
+			...modalAtoms
+		},
+		children: /* @__PURE__ */ jsx(HandleShowProp, {
+			setShow,
+			show,
+			showProp
+		})
+	});
+	const modal = createPortal(/* @__PURE__ */ jsx(Backdrop, {
+		closeModalOnBackdropClick,
+		show,
+		children: /* @__PURE__ */ jsxs("dialog", {
+			"aria-label": "Modal",
+			className: cn("hui-modal-container group relative flex", "max-h-[calc(100vh-64px)] w-[588px] flex-col overflow-hidden rounded-md border-none bg-background-primary p-0", "xsMax:w-[375px]", "mobileSmall:!w-full", { "absolute top-lg": position === "top" }, "transition-opacity duration-100 ease-in", {
+				"animate-fadeIn": modalAnimation === "opening" && hasContentPager,
+				"animate-fadeInScaled": modalAnimation === "opening" && !hasContentPager
+			}, { "animate-fadeOut": modalAnimation === "closing" }, { "group/fullscreen mobile:top-0 mobile:flex mobile:h-full mobile:max-h-full mobile:w-screen mobile:min-w-[100vw] mobile:rounded-none": mobileFullScreen }, className),
+			"data-hui-id": "Modal",
+			"data-testid": dataTestId,
+			onAnimationEnd: () => {
+				if (modalAnimation === "closing") onModalCloseAnimationEnd?.();
+			},
+			open: show,
+			ref,
+			children: [
+				preventScrollWhileOpen && /* @__PURE__ */ jsx(PreventModalScroll, {}),
+				children,
+				/* @__PURE__ */ jsx("div", {
+					className: cn("relative", {
+						"mobile:group-only/fullscreen:has-[#modal-footer.flex]:min-h-[74px] smMin:has-[#modal-footer.flex]:min-h-[148px]": hasContentPager,
+						"mobile:group-only/fullscreen:hidden": isMobileKeyboardOpen && hasContentPager
+					}),
+					id: "modal-actions-portal"
+				})
+			]
+		})
+	}), modalTarget);
+	return /* @__PURE__ */ jsxs(ModalContext.Provider, {
+		value: {
+			handleClose,
+			onModalCloseAnimationEnd,
+			...modalAtoms
+		},
+		children: [/* @__PURE__ */ jsx(HandleShowProp, {
+			setShow,
+			show,
+			showProp
+		}), modal]
+	});
+};
+const HandleShowProp = ({ setShow, show, showProp }) => {
+	const previousShowProp = usePrevious(showProp);
+	const closeModal = useCloseModal("setShow set to false");
+	useEffect(() => {
+		if (previousShowProp === void 0) return;
+		if (!(showProp !== previousShowProp)) return;
+		if (!(show !== showProp)) return;
+		if (showProp) setShow(true);
+		else closeModal();
+	}, [
+		show,
+		previousShowProp,
+		showProp,
+		closeModal,
+		setShow
+	]);
+	return null;
+};
+//#endregion
+//#region src/Modal/Modal.tsx
+/**
+* Primary component for creating modals.
+* When rendered, it automatically opens the modal and backdrop.
+*
+* These preprovided components give you the styles of the modal.
+*
+* By default, you get a particular preset of the `Modal` component that is used for simple modals.
+* It has (optionally) a title, subtitle, body, and actions.
+*
+* If you need to get a little bit more custom, be sure to read the docs and add `type="composable"` to the this component.
+*
+* Generally, the structure for a modal is:
+* ```tsx
+* <Modal>
+*     <ModalHeader>
+*         <BackButton />
+*         <CloseButton />
+*         <ModalTitle>Modal Title</ModalTitle>
+*     </ModalHeader>
+*     <ModalContent>
+*         <ModalSubTitle>Modal Subtitle</ModalSubTitle>
+*         Content, whatever the main body of the modal is.
+*     </ModalContent>
+*     <ModalActions>Actions (usually buttons) go here</ModalActions>
+* </Modal>
+* ```
+*/
+const Modal = ({ className, closeModalOnBackdropClick, "data-testid": dataTestId, handleClose, hasContentPager, hasProgressSteps, mobileFullScreen, onModalCloseAnimationEnd, position, preventScrollWhileOpen, show, ...rest }) => {
+	if (rest.type === "composable") return /* @__PURE__ */ jsx(ComposableModal, {
+		className,
+		closeModalOnBackdropClick,
+		"data-testid": dataTestId,
+		handleClose,
+		hasContentPager,
+		hasProgressSteps,
+		mobileFullScreen,
+		onModalCloseAnimationEnd,
+		position,
+		preventScrollWhileOpen,
+		show,
+		children: rest.children
+	});
+	const { actions, body, hideClose, onBackClicked, subtitle, title } = rest;
+	return /* @__PURE__ */ jsxs(ComposableModal, {
+		className,
+		closeModalOnBackdropClick,
+		"data-testid": dataTestId,
+		handleClose,
+		hasContentPager,
+		hasProgressSteps,
+		mobileFullScreen,
+		onModalCloseAnimationEnd,
+		position,
+		preventScrollWhileOpen,
+		show,
+		children: [
+			onBackClicked && /* @__PURE__ */ jsx(BackButton, { onClick: onBackClicked }),
+			!hideClose && /* @__PURE__ */ jsx(CloseButton, {}),
+			Boolean(title) && /* @__PURE__ */ jsx(ModalHeader, { children: /* @__PURE__ */ jsx(ModalTitle, { children: title }) }),
+			/* @__PURE__ */ jsxs(ModalContent, { children: [Boolean(subtitle) && /* @__PURE__ */ jsx(ModalSubTitle, { children: subtitle }), Boolean(body) && body] }),
+			Boolean(actions) && /* @__PURE__ */ jsx(ModalActions, { children: actions })
+		]
+	});
+};
+//#endregion
+export { Modal as t };
+
+//# sourceMappingURL=Modal-C6gatdtT.mjs.map

package/Modal-C6gatdtT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-C6gatdtT.mjs","names":[],"sources":["../src/Modal/components/Backdrop/Backdrop.tsx","../src/Modal/components/PreventModalScroll/PreventModalScroll.tsx","../src/Modal/ComposableModal.tsx","../src/Modal/Modal.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { useAtom } from 'jotai';\nimport { ReactNode, useContext, useEffect, useRef } from 'react';\n\nimport { effectEventListener } from '../../../utils/effectEventListener';\nimport { ModalContext } from '../../context';\nimport { useCloseModal } from '../../hooks/useCloseModal';\n\ntype Props = {\n    children?: ReactNode;\n    closeModalOnBackdropClick?: boolean;\n    show: boolean;\n};\n\nexport const Backdrop = ({ children, closeModalOnBackdropClick, show }: Props) => {\n    const closeModal = useCloseModal('backdrop');\n    const { modalAnimationAtom } = useContext(ModalContext);\n    const backdropRef = useRef<HTMLDivElement>(null);\n    const [modalAnimation, setModalAnimation] = useAtom(modalAnimationAtom);\n\n    // NEEDS A DELAY TO ALLOW THE MODAL TO ANIMATE IN\n    useEffect(() => {\n        if (show && modalAnimation === '') {\n            setModalAnimation('opening');\n        }\n    }, [modalAnimation, setModalAnimation, show]);\n\n    useEffect(() => {\n        if (!closeModalOnBackdropClick) {\n            return;\n        }\n\n        return effectEventListener(window, 'mousedown', (event: Event) => {\n            if (event.target === backdropRef.current) {\n                closeModal();\n            }\n        });\n    }, [closeModal, closeModalOnBackdropClick]);\n\n    return (\n        <div\n            className={cn(\n                // GENERAL CLOSED\n                'hui-modal-backdrop opacity-0',\n                // OPEN\n                {\n                    'fixed bottom-0 left-0 right-0 top-0 z-[1001] flex items-center justify-center bg-background-overlay':\n                        show,\n                },\n                // GENERAL ANIMATION\n                'transition-opacity duration-200 ease-in',\n                // OPEN ANIMATION\n                { 'opacity-100': modalAnimation === 'opening' },\n                // CLOSE ANIMATION\n                { 'opacity-0': modalAnimation === 'closing' }\n            )}\n            ref={backdropRef}\n        >\n            {children}\n        </div>\n    );\n};\n","import { useEffect } from 'react';\n\n// Open modals share a single body scroll-lock. Module-scoped and ref-counted\n// (local deviation from hammer — mirrors Drawer's lock): hammer's per-instance\n// save/restore leaves the body locked forever when two instances overlap\n// (docs pages embedding multiple open modals, auto-reopening stories), because\n// the later instance saves the earlier one's `overflow: hidden` as \"original\".\n// The first instance to mount captures the body's real styles + scroll\n// position; the last to unmount restores them.\nlet openLockCount = 0;\nlet previousBodyStyles: {\n    overflow: string;\n    paddingRight: string;\n    position: string;\n    top: string;\n    width: string;\n} | null = null;\nlet savedScrollPosition = 0;\nlet iosTouchCleanup: (() => void) | undefined;\n\n/**\n * Prevents scrolling of the page while the modal is open.\n * Uses a unified approach with additional touch event handling for iOS Safari.\n *\n * Can be disabled with `preventScrollWhileOpen={false}` on the `Modal`.\n */\nexport const PreventModalScroll = () => {\n    useEffect(() => {\n        const body = document.body;\n\n        if (openLockCount === 0) {\n            const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);\n\n            // Store current scroll position and original styles\n            savedScrollPosition = window.pageYOffset || document.documentElement.scrollTop;\n            previousBodyStyles = {\n                overflow: body.style.overflow,\n                paddingRight: body.style.paddingRight,\n                position: body.style.position,\n                top: body.style.top,\n                width: body.style.width,\n            };\n\n            // Calculate scrollbar width and add padding to prevent content shift\n            const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;\n            if (scrollBarWidth > 0) {\n                body.style.paddingRight = `${scrollBarWidth}px`;\n            }\n\n            // Apply scroll prevention\n            body.style.overflow = 'hidden';\n            body.style.position = 'fixed';\n            body.style.top = `-${savedScrollPosition}px`;\n            body.style.width = '100%';\n\n            // iOS-specific touch event handling\n            if (isIOS) {\n                const preventDefault = (e: TouchEvent) => {\n                    // Allow touch events on modal content but prevent on backdrop\n                    const target = e.target as Element;\n                    const isModalContent =\n                        target.closest('[data-testid=\"modal-content\"]') || target.closest('.hui-modal-container');\n\n                    if (!isModalContent) {\n                        e.preventDefault();\n                    }\n                };\n\n                // Add touch event listeners for iOS\n                document.addEventListener('touchstart', preventDefault, { passive: false });\n                document.addEventListener('touchmove', preventDefault, { passive: false });\n\n                iosTouchCleanup = () => {\n                    document.removeEventListener('touchstart', preventDefault);\n                    document.removeEventListener('touchmove', preventDefault);\n                };\n            }\n        }\n\n        openLockCount += 1;\n\n        // Cleanup function\n        return () => {\n            openLockCount -= 1;\n\n            if (openLockCount === 0) {\n                // Remove iOS touch event listeners if they exist\n                iosTouchCleanup?.();\n                iosTouchCleanup = undefined;\n\n                // Restore original styles\n                body.style.overflow = previousBodyStyles?.overflow ?? '';\n                body.style.position = previousBodyStyles?.position ?? '';\n                body.style.top = previousBodyStyles?.top ?? '';\n                body.style.width = previousBodyStyles?.width ?? '';\n                body.style.paddingRight = previousBodyStyles?.paddingRight ?? '';\n                previousBodyStyles = null;\n\n                // Restore scroll position\n                window.scrollTo(0, savedScrollPosition);\n            }\n        };\n    }, []);\n\n    return null;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useAtom, useAtomValue } from 'jotai';\nimport { atomWithReset } from 'jotai/utils';\nimport { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePrevious } from '../hooks/usePrevious';\nimport { useWindowIsMobile } from '../providers';\nimport { Backdrop } from './components/Backdrop/Backdrop';\nimport { PreventModalScroll } from './components/PreventModalScroll/PreventModalScroll';\nimport { ModalContext } from './context';\nimport { useCloseModal } from './hooks/useCloseModal';\n\ntype Props = {\n    /**\n     * Content of the modal.\n     *\n     * Generally, the structure for a modal is:\n     * ```tsx\n     * <Modal>\n     *     <ModalHeader>\n     *         <BackButton />\n     *         <CloseButton />\n     *         <ModalTitle>Modal Title</ModalTitle>\n     *     </ModalHeader>\n     *     <ModalContent>\n     *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>\n     *         Content, whatever the main body of the modal is.\n     *     </ModalContent>\n     *     <ModalActions>Actions (usually buttons) go here</ModalActions>\n     * </Modal>\n     * ```\n     */\n    children: ReactNode;\n    className?: string;\n    /**\n     * If true, the modal will close when the backdrop is clicked.\n     */\n    closeModalOnBackdropClick?: boolean;\n    /**\n     * Optional data-testid for the dialog element\n     */\n    'data-testid'?: string;\n    /**\n     * This is a callback that is called when the modal is trying to close itself.\n     *\n     * It should look something like\n     * ```tsx\n     * handleClose={() => setShow(false)}\n     * ```\n     *\n     * It optionally recieves a data object that is passed to the `useCloseModal` function.\n     * For the close button, this is by default `\"closed\"`.\n     * For the backdrop, this is by default `\"backdrop\"`\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim\n    handleClose: (handleCloseData?: any) => void;\n    /**\n     * If true, the modal will have a content pager.\n     * This is needed to prevent the modal from scaling upon opening.\n     */\n    hasContentPager?: boolean;\n    /**\n     * Needed for the progress steps to be shown with the correct animation.\n     */\n    hasProgressSteps?: boolean;\n    /**\n     * If true, the modal will be full screen on mobile.\n     */\n    mobileFullScreen?: boolean;\n    /**\n     * This is a callback that is called when the modal close animation ends.\n     */\n    onModalCloseAnimationEnd?: () => void;\n    /**\n     * This is the position of the modal.\n     * It can be either `'center'` or `'top'`.\n     */\n    position?: 'center' | 'top';\n    /**\n     * Prevents scrolling of the page while the modal is open.\n     *\n     * @default true\n     */\n    preventScrollWhileOpen?: boolean;\n    /**\n     * The `show` prop is used to control the visibility of the modal. Should be set to false by `handleClose`.\n     */\n    show: boolean;\n};\n\n/**\n * The actual modal logic. This is the \"composable\" version of the modal.\n */\nexport const ComposableModal = ({\n    children,\n    className,\n    closeModalOnBackdropClick = true,\n    'data-testid': dataTestId,\n    handleClose: handleCloseProp,\n    hasContentPager = false,\n    hasProgressSteps = false,\n    mobileFullScreen = false,\n    onModalCloseAnimationEnd,\n    position = 'center',\n    preventScrollWhileOpen = true,\n    show: showProp,\n}: Props) => {\n    const [modalTarget, setModalTarget] = useState<HTMLElement | null>(null);\n    const [show, setShow] = useState(showProp);\n    const isMobile = useWindowIsMobile();\n\n    const modalAtoms = useMemo(\n        () => ({\n            closeModalOnBackdropClickAtom: atomWithReset(true),\n            isMobileKeyboardOpen: atomWithReset<boolean>(false),\n            modalAnimationAtom: atomWithReset<'opening' | 'closing' | ''>(''),\n            modalFullScreenAtom: atomWithReset<boolean>(mobileFullScreen),\n            modalHasFooterAtom: atomWithReset<boolean>(false),\n            modalHasProgressStepsAtom: atomWithReset<boolean>(hasProgressSteps),\n            modalRefAtom: atomWithReset<{ current: HTMLDialogElement | null }>({ current: null }),\n            scrollTopAtom: atomWithReset(0),\n            showBottomScrollHintAtom: atomWithReset<boolean>(false),\n            showTopScrollHintAtom: atomWithReset<boolean>(false),\n        }),\n        [hasProgressSteps, mobileFullScreen]\n    );\n\n    const modalAnimation = useAtomValue(modalAtoms.modalAnimationAtom);\n    const [isMobileKeyboardOpen, setIsMobileKeyboardOpen] = useAtom(modalAtoms.isMobileKeyboardOpen);\n\n    const handleClose = useCallback(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim\n        (handleCloseData?: any) => {\n            setShow(false); // Must be triggered before the handleCloseProp\n\n            handleCloseProp(handleCloseData);\n        },\n        [handleCloseProp]\n    );\n\n    useEffect(() => {\n        const target = document.querySelector('.hui-modal-target');\n\n        if (!target) {\n            throw new Error('Modal target not found, add one in the DOM tree.');\n        }\n\n        setModalTarget(target as HTMLElement);\n    }, []);\n\n    const ref = useRef<HTMLDialogElement | null>(null);\n\n    const [viewportHeight, setViewportHeight] = useState({ current: 0, initial: 0 });\n\n    const updateViewport = useCallback(() => {\n        if (typeof window === 'undefined' || typeof window.visualViewport === 'undefined') {\n            return;\n        }\n\n        const currentViewportHeight = window.visualViewport?.height ?? 0;\n\n        // Get initial viewport height\n        if (viewportHeight.initial === 0) {\n            setViewportHeight({\n                current: currentViewportHeight,\n                initial: window.visualViewport?.height ?? 0,\n            });\n        } else {\n            // Get the difference between the current viewport height and the initial viewport height\n            // This is to check if mobile keyboard is open\n            const isLessThanInitial = Boolean(currentViewportHeight < viewportHeight.initial);\n            setIsMobileKeyboardOpen(isLessThanInitial);\n            setViewportHeight((prev) => ({\n                current: currentViewportHeight,\n                initial: prev.initial,\n            }));\n        }\n    }, [setIsMobileKeyboardOpen, viewportHeight.initial]);\n\n    useEffect(() => {\n        if (typeof window !== 'undefined' && typeof window.visualViewport !== 'undefined' && isMobile) {\n            updateViewport();\n\n            window.visualViewport?.addEventListener('resize', updateViewport);\n\n            return () => window.visualViewport?.removeEventListener('resize', updateViewport);\n        }\n\n        return undefined;\n    }, [isMobile, updateViewport]);\n\n    if (!modalTarget || !show) {\n        return (\n            <ModalContext.Provider value={{ handleClose, onModalCloseAnimationEnd, ...modalAtoms }}>\n                <HandleShowProp\n                    setShow={setShow}\n                    show={show}\n                    showProp={showProp}\n                />\n            </ModalContext.Provider>\n        );\n    }\n\n    const modal = createPortal(\n        <Backdrop\n            closeModalOnBackdropClick={closeModalOnBackdropClick}\n            show={show}\n        >\n            <dialog\n                aria-label=\"Modal\"\n                className={cn(\n                    // GENERAL CLOSED\n                    'hui-modal-container group relative flex',\n                    // OPEN\n                    'max-h-[calc(100vh-64px)] w-[588px] flex-col overflow-hidden rounded-md border-none bg-background-primary p-0',\n                    // MOBILE\n                    'xsMax:w-[375px]',\n                    // SMALL MOBILE\n                    'mobileSmall:!w-full',\n                    // POSITION\n                    { 'absolute top-lg': position === 'top' },\n                    // GENERAL ANIMATION\n                    'transition-opacity duration-100 ease-in',\n                    // OPEN ANIMATION\n                    {\n                        'animate-fadeIn': modalAnimation === 'opening' && hasContentPager,\n                        'animate-fadeInScaled': modalAnimation === 'opening' && !hasContentPager,\n                    },\n                    // CLOSE ANIMATION\n                    { 'animate-fadeOut': modalAnimation === 'closing' },\n                    // FULL SCREEN\n                    {\n                        'group/fullscreen mobile:top-0 mobile:flex mobile:h-full mobile:max-h-full mobile:w-screen mobile:min-w-[100vw] mobile:rounded-none':\n                            mobileFullScreen,\n                    },\n                    className\n                )}\n                data-hui-id=\"Modal\"\n                data-testid={dataTestId}\n                onAnimationEnd={() => {\n                    if (modalAnimation === 'closing') {\n                        onModalCloseAnimationEnd?.();\n                    }\n                }}\n                open={show}\n                ref={ref}\n            >\n                {preventScrollWhileOpen && <PreventModalScroll />}\n                {children}\n                <div\n                    className={cn('relative', {\n                        // Use CSS :has() selector to immediately apply min-height when footer exists\n                        // Apply 148px on desktop, 74px on mobile fullscreen\n                        'mobile:group-only/fullscreen:has-[#modal-footer.flex]:min-h-[74px] smMin:has-[#modal-footer.flex]:min-h-[148px]':\n                            hasContentPager,\n                        // Hide the actions portal when the mobile keyboard is open\n                        'mobile:group-only/fullscreen:hidden': isMobileKeyboardOpen && hasContentPager,\n                    })}\n                    id=\"modal-actions-portal\"\n                />\n            </dialog>\n        </Backdrop>,\n        modalTarget\n    );\n\n    return (\n        <ModalContext.Provider value={{ handleClose, onModalCloseAnimationEnd, ...modalAtoms }}>\n            <HandleShowProp\n                setShow={setShow}\n                show={show}\n                showProp={showProp}\n            />\n            {modal}\n        </ModalContext.Provider>\n    );\n};\n\nconst HandleShowProp = ({\n    setShow,\n    show,\n    showProp,\n}: {\n    setShow: (value: boolean) => void;\n    show: boolean;\n    showProp: boolean;\n}) => {\n    const previousShowProp = usePrevious(showProp);\n    const closeModal = useCloseModal('setShow set to false');\n\n    useEffect(() => {\n        if (previousShowProp === undefined) {\n            return;\n        }\n\n        const propChanged = showProp !== previousShowProp;\n        if (!propChanged) {\n            return;\n        }\n\n        const showMustChange = show !== showProp;\n        if (!showMustChange) {\n            return;\n        }\n        if (showProp) {\n            setShow(true);\n        } else {\n            closeModal();\n        }\n    }, [show, previousShowProp, showProp, closeModal, setShow]);\n\n    return null;\n};\n","import { ComponentProps, ReactNode } from 'react';\n\nimport {\n    BackButton,\n    CloseButton,\n    ModalActions,\n    ModalContent,\n    ModalHeader,\n    ModalSubTitle,\n    ModalTitle,\n} from './components';\nimport { ComposableModal } from './ComposableModal';\n\ntype TemplatedModalProps = {\n    /**\n     * This is the actions of the modal. Usually buttons.\n     * It is rendered at the bottom of the modal.\n     *\n     * `ModalActions` is not rendered if this is not passed.\n     */\n    actions?: ReactNode;\n    /**\n     *  This is the main content of the modal.\n     */\n    body?: ReactNode;\n    /**\n     * If you want to pass children, set `type=\"composable\"`.\n     */\n    children?: never;\n    /**\n     * If true, the close button will not be shown.\n     */\n    hideClose?: boolean;\n    /**\n     * This is a callback that is called when the back button is clicked.\n     *\n     * When passed, the back button will be shown.\n     */\n    onBackClicked?: () => void;\n    /**\n     * If passed, this will be shown as a subtitle in the modal.\n     */\n    subtitle?: ReactNode;\n    /**\n     * If passed, this will be shown as a title in the modal.\n     *\n     * `ModalHeader` is not rendered if this is not passed.\n     */\n    title?: ReactNode;\n    /**\n     * Marks the type of modal as templated / simple.\n     */\n    type?: 'templated';\n};\n\ntype ComposableModalProps = {\n    /**\n     * Content of the modal.\n     *\n     * Generally, the structure for a modal is:\n     * ```tsx\n     * <Modal>\n     *     <ModalHeader>\n     *         <BackButton />\n     *         <CloseButton />\n     *         <ModalTitle>Modal Title</ModalTitle>\n     *     </ModalHeader>\n     *     <ModalContent>\n     *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>\n     *         Content, whatever the main body of the modal is.\n     *     </ModalContent>\n     *     <ModalActions>Actions (usually buttons) go here</ModalActions>\n     * </Modal>\n     * ```\n     */\n    children: ReactNode;\n    /**\n     * Marks the type of modal as composable.\n     */\n    type: 'composable';\n};\n\ntype Props = {\n    className?: string;\n    /**\n     * If true, the modal will close when the backdrop is clicked.\n     */\n    closeModalOnBackdropClick?: ComponentProps<typeof ComposableModal>['closeModalOnBackdropClick'];\n    /**\n     * Optional data-testid for the dialog element\n     */\n    'data-testid'?: string;\n    /**\n     * This is a callback that is called when the modal is trying to close itself.\n     *\n     * It should look something like\n     * ```tsx\n     * handleClose={() => setShow(false)}\n     * ```\n     *\n     * It optionally recieves a data object that is passed to the `useCloseModal` function.\n     * For the close button, this is by default `\"closed\"`.\n     * For the backdrop, this is by default `\"backdrop\"`\n     */\n    handleClose: ComponentProps<typeof ComposableModal>['handleClose'];\n    /**\n     * If true, the modal will have a content pager.\n     * This is needed to prevent the modal from scaling upon opening.\n     */\n    hasContentPager?: boolean;\n    /**\n     * Needed for the progress steps to be shown with the correct animation.\n     */\n    hasProgressSteps?: boolean;\n    /**\n     * If true, the modal will be full screen on mobile.\n     */\n    mobileFullScreen?: boolean;\n    /**\n     * This is a callback that is called when the modal close animation ends.\n     */\n    onModalCloseAnimationEnd?: ComponentProps<typeof ComposableModal>['onModalCloseAnimationEnd'];\n    /**\n     * This is the position of the modal.\n     * It can be either `'center'` or `'top'`.\n     */\n    position?: ComponentProps<typeof ComposableModal>['position'];\n    /**\n     * Prevents scrolling of the page while the modal is open.\n     *\n     * @default true\n     */\n    preventScrollWhileOpen?: ComponentProps<typeof ComposableModal>['preventScrollWhileOpen'];\n    /**\n     * The `show` prop is used to control the visibility of the modal. Should be set to false by `handleClose`.\n     */\n    show: ComponentProps<typeof ComposableModal>['show'];\n} & (TemplatedModalProps | ComposableModalProps);\n\n/**\n * Primary component for creating modals.\n * When rendered, it automatically opens the modal and backdrop.\n *\n * These preprovided components give you the styles of the modal.\n *\n * By default, you get a particular preset of the `Modal` component that is used for simple modals.\n * It has (optionally) a title, subtitle, body, and actions.\n *\n * If you need to get a little bit more custom, be sure to read the docs and add `type=\"composable\"` to the this component.\n *\n * Generally, the structure for a modal is:\n * ```tsx\n * <Modal>\n *     <ModalHeader>\n *         <BackButton />\n *         <CloseButton />\n *         <ModalTitle>Modal Title</ModalTitle>\n *     </ModalHeader>\n *     <ModalContent>\n *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>\n *         Content, whatever the main body of the modal is.\n *     </ModalContent>\n *     <ModalActions>Actions (usually buttons) go here</ModalActions>\n * </Modal>\n * ```\n */\nexport const Modal = ({\n    className,\n    closeModalOnBackdropClick,\n    'data-testid': dataTestId,\n    handleClose,\n    hasContentPager,\n    hasProgressSteps,\n    mobileFullScreen,\n    onModalCloseAnimationEnd,\n    position,\n    preventScrollWhileOpen,\n    show,\n    ...rest\n}: Props) => {\n    if (rest.type === 'composable') {\n        return (\n            <ComposableModal\n                className={className}\n                closeModalOnBackdropClick={closeModalOnBackdropClick}\n                data-testid={dataTestId}\n                handleClose={handleClose}\n                hasContentPager={hasContentPager}\n                hasProgressSteps={hasProgressSteps}\n                mobileFullScreen={mobileFullScreen}\n                onModalCloseAnimationEnd={onModalCloseAnimationEnd}\n                position={position}\n                preventScrollWhileOpen={preventScrollWhileOpen}\n                show={show}\n            >\n                {rest.children}\n            </ComposableModal>\n        );\n    }\n\n    const { actions, body, hideClose, onBackClicked, subtitle, title } = rest;\n\n    return (\n        <ComposableModal\n            className={className}\n            closeModalOnBackdropClick={closeModalOnBackdropClick}\n            data-testid={dataTestId}\n            handleClose={handleClose}\n            hasContentPager={hasContentPager}\n            hasProgressSteps={hasProgressSteps}\n            mobileFullScreen={mobileFullScreen}\n            onModalCloseAnimationEnd={onModalCloseAnimationEnd}\n            position={position}\n            preventScrollWhileOpen={preventScrollWhileOpen}\n            show={show}\n        >\n            {onBackClicked && <BackButton onClick={onBackClicked} />}\n            {!hideClose && <CloseButton />}\n            {Boolean(title) && (\n                <ModalHeader>\n                    <ModalTitle>{title}</ModalTitle>\n                </ModalHeader>\n            )}\n            <ModalContent>\n                {Boolean(subtitle) && <ModalSubTitle>{subtitle}</ModalSubTitle>}\n                {Boolean(body) && body}\n            </ModalContent>\n            {Boolean(actions) && <ModalActions>{actions}</ModalActions>}\n        </ComposableModal>\n    );\n};\n"],"mappings":"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"}