@povio/ui 3.4.0-rc.2 → 3.4.0-rc.22

package/dist/BottomSheet-Cwci3M8j.js

@@ -0,0 +1,448 @@
+import { o as ObjectUtils, t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as X } from "./x-BYOEO0gW.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { n as $de32f1b87079253c$export$3ddf2d174ce01153, t as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "./Dialog-BQN4Z3bO.js";
+import { f as $9daab02d461809db$export$683480f191c0e3ea } from "./OverlayArrow-BrSp26z2.js";
+import { n as $f3f84453ead64de5$export$8948f78d83984c69, r as $5df64b3807dc15ee$export$d699905dd57c73ca, t as $f3f84453ead64de5$export$2b77a92f1a5ad772 } from "./Modal-CYvIKx5Z.js";
+import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-Cq7t4Xxl.js";
+import { t as Typography } from "./Typography-AcUd9df8.js";
+import "./i18n-C2TBJvnh.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, animate, motion, useDragControls, useMotionValue } from "motion/react";
+import { useTranslation } from "react-i18next";
+//#region src/components/overlays/BottomSheet/BottomSheetHeader.tsx
+const BottomSheetHeader = (t0) => {
+	const $ = c(17);
+	const { label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose } = t0;
+	const { t } = useTranslation("ui");
+	const t1 = !isDismissable && "pt-list-height-title-top";
+	let t2;
+	if ($[0] !== t1) {
+		t2 = clsx("pb-list-height-title-bottom", t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== dragControls || $[3] !== hideThumb || $[4] !== isDismissable) {
+		t3 = isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2-5",
+			onPointerDown: (e) => {
+				e.preventDefault();
+				dragControls?.start(e);
+			},
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-elevation-fill-default-3" })
+		});
+		$[2] = dragControls;
+		$[3] = hideThumb;
+		$[4] = isDismissable;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== headerTypography || $[7] !== hideHeader || $[8] !== isDismissable || $[9] !== label || $[10] !== onClose || $[11] !== t) {
+		t4 = !hideHeader && /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-between px-list-side-title",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				size: "label-2",
+				variant: "prominent-1",
+				...headerTypography,
+				children: label
+			}), onClose && isDismissable && /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+				onPress: onClose,
+				"aria-label": t(_temp),
+				className: "-m-2 shrink-0 p-2 text-interactive-text-secondary-idle focus-visible:outline-interactive-text-secondary-focus",
+				children: /* @__PURE__ */ jsx(X, { className: "size-6" })
+			})]
+		});
+		$[6] = headerTypography;
+		$[7] = hideHeader;
+		$[8] = isDismissable;
+		$[9] = label;
+		$[10] = onClose;
+		$[11] = t;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: t2,
+			children: [t3, t4]
+		});
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+};
+function _temp($) {
+	return $.ui.closeAlt;
+}
+//#endregion
+//#region src/hooks/useStateAndRef.ts
+const useStateAndRef = (initialState) => {
+	const $ = c(3);
+	const [state, setState] = useState(initialState);
+	const ref = useRef(state);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = (value) => {
+			ref.current = ObjectUtils.isFunction(value) ? value(ref.current) : value;
+			setState(ref.current);
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const updateValue = t0;
+	let t1;
+	if ($[1] !== state) {
+		t1 = [
+			state,
+			ref,
+			updateValue
+		];
+		$[1] = state;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+//#endregion
+//#region src/utils/dom.utils.ts
+let DomUtils;
+(function(_DomUtils) {
+	const KEYBOARD_INPUTS = /* @__PURE__ */ new Set([
+		"button",
+		"submit",
+		"checkbox",
+		"file",
+		"image"
+	]);
+	_DomUtils.isKeyboardInput = (elem) => {
+		return elem.tagName === "INPUT" && !KEYBOARD_INPUTS.has(elem.type) || elem.tagName === "TEXTAREA" || elem.hasAttribute("contenteditable");
+	};
+	_DomUtils.isKeyboardEvent = (event) => {
+		return event.nativeEvent instanceof KeyboardEvent;
+	};
+})(DomUtils || (DomUtils = {}));
+//#endregion
+//#region src/components/overlays/BottomSheet/BottomSheet.tsx
+const MotionModal = motion.create($f3f84453ead64de5$export$2b77a92f1a5ad772);
+const MotionModalOverlay = motion.create($f3f84453ead64de5$export$8948f78d83984c69);
+const inertiaTransition = {
+	type: "inertia",
+	bounceStiffness: 300,
+	bounceDamping: 40,
+	timeConstant: 300
+};
+const staticTransition = {
+	duration: .5,
+	ease: [
+		.32,
+		.72,
+		0,
+		1
+	]
+};
+const KEYBOARD_INSET_THRESHOLD = 48;
+const BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = true, isScrollable = true, height = "full", label, portalContainerRef, children, footer, hideHeader, hideThumb: hideThumbProp, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName, overlayClassName, headerTypography: headerTypographyProp }) => {
+	const uiConfig = UIConfig.useConfig();
+	const closeDragThreshold = closeDragThresholdProp ?? uiConfig.bottomSheet.closeDragThreshold;
+	const closeVelocityThreshold = closeVelocityThresholdProp ?? uiConfig.bottomSheet.closeVelocityThreshold;
+	const hideThumb = hideThumbProp ?? uiConfig.bottomSheet.hideThumb;
+	const headerTypography = headerTypographyProp ?? uiConfig.bottomSheet.headerTypography;
+	const viewport = $5df64b3807dc15ee$export$d699905dd57c73ca();
+	const { sheetHeight, windowHeight } = useMemo(() => {
+		const sh = viewport.height - sheetMarginTop;
+		const browserHeight = typeof window === "undefined" ? viewport.height : window.innerHeight;
+		return {
+			sheetHeight: sh,
+			windowHeight: Math.max(browserHeight, viewport.height) - sheetMarginTop
+		};
+	}, [viewport.height, sheetMarginTop]);
+	const y = useMotionValue(sheetHeight);
+	const dragControls = useDragControls();
+	const closeVelocityRef = useRef(true);
+	const overlayRef = useRef(null);
+	const containerRef = useRef(null);
+	const dialogRef = useRef(null);
+	const focusTrapRef = useRef(null);
+	const [footerElement, footerRef, setFooterElement] = useStateAndRef(null);
+	const [footerHeight, setFooterHeight] = useState(0);
+	const [keyboardInset, setKeyboardInset] = useState(0);
+	useEffect(() => {
+		if (!isOpen) {
+			setKeyboardInset(0);
+			return;
+		}
+		if (typeof window === "undefined") return;
+		const vv = window.visualViewport;
+		if (!vv) return;
+		const update = () => {
+			const naturalHeight = vv.height * Math.max(vv.scale, 1);
+			const next = Math.max(0, window.innerHeight - naturalHeight);
+			setKeyboardInset(next > KEYBOARD_INSET_THRESHOLD ? Math.round(next) : 0);
+		};
+		update();
+		vv.addEventListener("resize", update);
+		vv.addEventListener("scroll", update);
+		return () => {
+			vv.removeEventListener("resize", update);
+			vv.removeEventListener("scroll", update);
+		};
+	}, [isOpen]);
+	useEffect(() => {
+		if (!footerElement) return;
+		const onResize = () => {
+			setFooterHeight(footerElement.offsetHeight || 0);
+		};
+		onResize();
+		const observer = new ResizeObserver(onResize);
+		observer.observe(footerElement);
+		return () => {
+			observer.disconnect();
+		};
+	}, [footerElement]);
+	const oldHeightRef = useRef(0);
+	$9daab02d461809db$export$683480f191c0e3ea({
+		ref: dialogRef,
+		onResize: () => {
+			const rect = dialogRef.current?.getBoundingClientRect();
+			if (!rect || oldHeightRef.current === rect.height) return;
+			oldHeightRef.current = rect.height;
+			if (y.get() < 0) {
+				y.stop();
+				animate(y, 0);
+			}
+		}
+	});
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(MotionModalOverlay, {
+		isOpen: true,
+		UNSTABLE_portalContainer: portalContainerRef?.current,
+		className: clsx("fixed top-0 left-0 z-bottom-sheet w-screen h-dvh", containerClassName),
+		style: { "--bottom-sheet-keyboard-inset": `${keyboardInset}px` },
+		onOpenChange,
+		isDismissable,
+		ref: overlayRef,
+		shouldCloseOnInteractOutside,
+		children: [/* @__PURE__ */ jsx(motion.div, {
+			className: clsx("pointer-events-none absolute inset-0 bg-support-overlay", overlayClassName),
+			animate: { opacity: 1 },
+			initial: { opacity: 0 },
+			exit: { opacity: 0 }
+		}), /* @__PURE__ */ jsx(MotionModal, {
+			isDismissable,
+			className: clsx("pointer-events-none flex h-full w-full flex-col items-stretch justify-end outline-none will-change-transform"),
+			animate: {
+				y: 0,
+				opacity: 1
+			},
+			initial: {
+				y: windowHeight,
+				opacity: 1
+			},
+			exit: {
+				y: windowHeight,
+				opacity: 1
+			},
+			onAnimationComplete: (data) => {
+				onStateChange?.(data.y === 0 ? "opened" : "closed");
+			},
+			onAnimationStart: (data_0) => {
+				onStateChange?.(data_0.y === 0 ? "opening" : "closing");
+			},
+			transition: staticTransition,
+			style: {
+				y,
+				height: "calc(100dvh - var(--bottom-sheet-keyboard-inset, 0px))",
+				minHeight: "calc(100dvh - var(--bottom-sheet-keyboard-inset, 0px))"
+			},
+			drag: "y",
+			dragListener: false,
+			dragControls,
+			dragElastic: {
+				top: 0,
+				bottom: .5
+			},
+			dragConstraints: {
+				top: 0,
+				bottom: 0
+			},
+			onUpdate: (latest) => {
+				if (!latest || !footerRef.current) return;
+				footerRef.current?.style.setProperty("--scroll-position", `${(latest.y || 0).toFixed(0)}px`);
+			},
+			onDragStart: () => {
+				if (document.activeElement && DomUtils.isKeyboardInput(document.activeElement)) focusTrapRef.current?.focus();
+				y.animation?.stop();
+				closeVelocityRef.current = true;
+				containerRef.current?.style.setProperty("pointer-events", "none");
+			},
+			onDragEnd: (e, { velocity }) => {
+				containerRef.current?.style.removeProperty("pointer-events");
+				const yValue = y.get();
+				if (yValue > 0) {
+					const dragPastThreshold = yValue > closeDragThreshold;
+					if (closeVelocityRef.current && velocity.y > closeVelocityThreshold || dragPastThreshold) onOpenChange?.(false);
+					else animate(y, 0, {
+						...inertiaTransition,
+						min: 0,
+						max: 0
+					});
+				}
+			},
+			children: /* @__PURE__ */ jsx($de32f1b87079253c$export$3ddf2d174ce01153, {
+				className: "relative flex min-h-0 flex-1 flex-col items-stretch outline-none",
+				ref: dialogRef,
+				"aria-label": label,
+				children: ({ close }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("div", {
+						style: { minHeight: `${sheetMarginTop}px` },
+						className: clsx("shrink-0", height === "auto" && "grow")
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: clsx("pointer-events-auto relative flex min-h-0 flex-col items-stretch rounded-t-xl bg-elevation-fill-default-1", height === "full" && "flex-1"),
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: clsx("absolute bottom-full left-0 w-full outline-none", isDismissable ? "h-0" : "h-screen"),
+								ref: focusTrapRef,
+								tabIndex: -1
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex max-h-full min-h-0 flex-col items-stretch",
+								ref: containerRef,
+								children: [/* @__PURE__ */ jsx(BottomSheetHeader, {
+									label,
+									dragControls,
+									onClose: close,
+									isDismissable,
+									hideHeader,
+									hideThumb,
+									headerTypography
+								}), typeof children === "function" ? children(close) : children]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "shrink-0",
+								style: { height: `${footerHeight + (isScrollable ? 0 : sheetMarginBottom)}px` }
+							}),
+							/* @__PURE__ */ jsx("div", { className: "absolute top-full h-screen w-full bg-elevation-fill-default-1" })
+						]
+					}),
+					footer && /* @__PURE__ */ jsx(motion.div, {
+						animate: { opacity: 1 },
+						initial: { opacity: 0 },
+						exit: { opacity: 0 },
+						ref: setFooterElement,
+						className: clsx("pointer-events-auto absolute z-overlay-above w-full bg-elevation-fill-default-2", "top-[calc(100dvh-var(--bottom-sheet-keyboard-inset,0))] left-0 translate-y-[calc(-100%-var(--scroll-position,0))]"),
+						children: footer
+					})
+				] })
+			})
+		})]
+	}) });
+};
+const BottomSheet = (t0) => {
+	const $ = c(30);
+	let children;
+	let isOpen;
+	let onOpenChange;
+	let portalContainerRef;
+	let rest;
+	let trigger;
+	if ($[0] !== t0) {
+		({isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = isOpen;
+		$[3] = onOpenChange;
+		$[4] = portalContainerRef;
+		$[5] = rest;
+		$[6] = trigger;
+	} else {
+		children = $[1];
+		isOpen = $[2];
+		onOpenChange = $[3];
+		portalContainerRef = $[4];
+		rest = $[5];
+		trigger = $[6];
+	}
+	const [isSheetOpen, setIsSheetOpen] = useState(!!isOpen);
+	const hasTrigger = !!trigger;
+	let t1;
+	let t2;
+	if ($[7] !== hasTrigger || $[8] !== isOpen) {
+		t1 = () => {
+			if (hasTrigger) setIsSheetOpen(!!isOpen);
+		};
+		t2 = [isOpen, hasTrigger];
+		$[7] = hasTrigger;
+		$[8] = isOpen;
+		$[9] = t1;
+		$[10] = t2;
+	} else {
+		t1 = $[9];
+		t2 = $[10];
+	}
+	useEffect(t1, t2);
+	if (trigger) {
+		let t3;
+		if ($[11] !== onOpenChange) {
+			t3 = (open) => {
+				setIsSheetOpen(open);
+				onOpenChange?.(open);
+			};
+			$[11] = onOpenChange;
+			$[12] = t3;
+		} else t3 = $[12];
+		const handleOpenChange = t3;
+		let t4;
+		if ($[13] !== children || $[14] !== handleOpenChange || $[15] !== isSheetOpen || $[16] !== portalContainerRef || $[17] !== rest) {
+			t4 = /* @__PURE__ */ jsx(BottomSheetBase, {
+				isOpen: isSheetOpen,
+				onOpenChange: handleOpenChange,
+				portalContainerRef,
+				...rest,
+				children
+			});
+			$[13] = children;
+			$[14] = handleOpenChange;
+			$[15] = isSheetOpen;
+			$[16] = portalContainerRef;
+			$[17] = rest;
+			$[18] = t4;
+		} else t4 = $[18];
+		let t5;
+		if ($[19] !== handleOpenChange || $[20] !== isSheetOpen || $[21] !== t4 || $[22] !== trigger) {
+			t5 = /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, {
+				isOpen: isSheetOpen,
+				onOpenChange: handleOpenChange,
+				children: [trigger, t4]
+			});
+			$[19] = handleOpenChange;
+			$[20] = isSheetOpen;
+			$[21] = t4;
+			$[22] = trigger;
+			$[23] = t5;
+		} else t5 = $[23];
+		return t5;
+	}
+	let t3;
+	if ($[24] !== children || $[25] !== isOpen || $[26] !== onOpenChange || $[27] !== portalContainerRef || $[28] !== rest) {
+		t3 = /* @__PURE__ */ jsx(BottomSheetBase, {
+			isOpen,
+			onOpenChange,
+			portalContainerRef,
+			...rest,
+			children
+		});
+		$[24] = children;
+		$[25] = isOpen;
+		$[26] = onOpenChange;
+		$[27] = portalContainerRef;
+		$[28] = rest;
+		$[29] = t3;
+	} else t3 = $[29];
+	return t3;
+};
+//#endregion
+export { DomUtils as n, useStateAndRef as r, BottomSheet as t };