@povio/ui 2.3.0 → 2.3.2-rc.1

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -2,6 +2,7 @@ import { UIConfig } from "../../../config/uiConfig.context.js";
 import { BottomSheetHeader } from "./BottomSheetHeader.js";
 import { useStateAndRef } from "../../../hooks/useStateAndRef.js";
 import { DomUtils } from "../../../utils/dom.utils.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -26,6 +27,7 @@ var staticTransition = {
 		1
 	]
 };
+var KEYBOARD_INSET_THRESHOLD = 48;
 var 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;
@@ -48,6 +50,27 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 	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;
+		}
+		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 = () => {
@@ -77,6 +100,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 		isOpen: true,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
 		className: clsx("fixed top-0 left-0 z-10 w-screen h-dvh", containerClassName),
+		style: { "--bottom-sheet-keyboard-inset": `${keyboardInset}px` },
 		onOpenChange,
 		isDismissable,
 		ref: overlayRef,
@@ -104,13 +128,14 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 			onAnimationComplete: (data) => {
 				onStateChange?.(data.y === 0 ? "opened" : "closed");
 			},
-			onAnimationStart: (data) => {
-				onStateChange?.(data.y === 0 ? "opening" : "closing");
+			onAnimationStart: (data_0) => {
+				onStateChange?.(data_0.y === 0 ? "opening" : "closing");
 			},
 			transition: staticTransition,
 			style: {
 				y,
-				minHeight: "100%"
+				height: "calc(100dvh - var(--bottom-sheet-keyboard-inset, 0px))",
+				minHeight: "calc(100dvh - var(--bottom-sheet-keyboard-inset, 0px))"
 			},
 			drag: "y",
 			dragListener: false,
@@ -188,7 +213,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[100dvh] left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
+						className: clsx("pointer-events-auto absolute z-50 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
 					})
 				] })
@@ -196,36 +221,108 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 		})]
 	}) });
 };
-var BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest }) => {
+var 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;
-	useEffect(() => {
-		if (hasTrigger) setIsSheetOpen(!!isOpen);
-	}, [isOpen, hasTrigger]);
-	if (trigger) {
-		const handleOpenChange = (open) => {
-			setIsSheetOpen(open);
-			onOpenChange?.(open);
+	let t1;
+	let t2;
+	if ($[7] !== hasTrigger || $[8] !== isOpen) {
+		t1 = () => {
+			if (hasTrigger) setIsSheetOpen(!!isOpen);
 		};
-		return /* @__PURE__ */ jsxs(DialogTrigger, {
-			isOpen: isSheetOpen,
-			onOpenChange: handleOpenChange,
-			children: [trigger, /* @__PURE__ */ jsx(BottomSheetBase, {
+		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(DialogTrigger, {
+				isOpen: isSheetOpen,
+				onOpenChange: handleOpenChange,
+				children: [trigger, t4]
+			});
+			$[19] = handleOpenChange;
+			$[20] = isSheetOpen;
+			$[21] = t4;
+			$[22] = trigger;
+			$[23] = t5;
+		} else t5 = $[23];
+		return t5;
 	}
-	return /* @__PURE__ */ jsx(BottomSheetBase, {
-		isOpen,
-		onOpenChange,
-		portalContainerRef,
-		...rest,
-		children
-	});
+	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 { BottomSheet };

package/dist/components/overlays/BottomSheet/BottomSheetHeader.js

@@ -1,16 +1,26 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import "../../../config/i18n.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/overlays/BottomSheet/BottomSheetHeader.tsx
-var BottomSheetHeader = ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose }) => {
+var BottomSheetHeader = (t0) => {
+	const $ = c(17);
+	const { label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose } = t0;
 	const { t } = useTranslation("ui");
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("pb-list-height-title-bottom", !isDismissable && "pt-list-height-title-top"),
-		children: [isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
+	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();
@@ -18,7 +28,15 @@ var BottomSheetHeader = ({ label, dragControls, isDismissable, hideThumb, hideHe
 			},
 			"aria-hidden": true,
 			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-elevation-fill-default-3" })
-		}), !hideHeader && /* @__PURE__ */ jsxs("div", {
+		});
+		$[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",
@@ -27,12 +45,34 @@ var BottomSheetHeader = ({ label, dragControls, isDismissable, hideThumb, hideHe
 				children: label
 			}), onClose && isDismissable && /* @__PURE__ */ jsx(Button, {
 				onPress: onClose,
-				"aria-label": t(($) => $.ui.closeAlt),
+				"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(CloseIcon, { 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
 export { BottomSheetHeader };

package/dist/components/overlays/Drawer/Drawer.js

@@ -1,35 +1,77 @@
 import { modalOverlay } from "../Modal/modal.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 //#region src/components/overlays/Drawer/Drawer.tsx
-var Drawer = ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
-	if (trigger) return /* @__PURE__ */ jsxs(DialogTrigger, {
-		isOpen,
-		onOpenChange,
-		children: [trigger, /* @__PURE__ */ jsx(DrawerOverlay, {
-			label,
+var Drawer = (t0) => {
+	const $ = c(25);
+	const { label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside } = t0;
+	if (trigger) {
+		let t1;
+		if ($[0] !== children || $[1] !== className || $[2] !== dialogClassName || $[3] !== isDismissable || $[4] !== label || $[5] !== overlayClassName || $[6] !== portalContainerRef || $[7] !== shouldCloseOnInteractOutside) {
+			t1 = /* @__PURE__ */ jsx(DrawerOverlay, {
+				label,
+				portalContainerRef,
+				isDismissable,
+				overlayClassName,
+				dialogClassName,
+				className,
+				shouldCloseOnInteractOutside,
+				children
+			});
+			$[0] = children;
+			$[1] = className;
+			$[2] = dialogClassName;
+			$[3] = isDismissable;
+			$[4] = label;
+			$[5] = overlayClassName;
+			$[6] = portalContainerRef;
+			$[7] = shouldCloseOnInteractOutside;
+			$[8] = t1;
+		} else t1 = $[8];
+		let t2;
+		if ($[9] !== isOpen || $[10] !== onOpenChange || $[11] !== t1 || $[12] !== trigger) {
+			t2 = /* @__PURE__ */ jsxs(DialogTrigger, {
+				isOpen,
+				onOpenChange,
+				children: [trigger, t1]
+			});
+			$[9] = isOpen;
+			$[10] = onOpenChange;
+			$[11] = t1;
+			$[12] = trigger;
+			$[13] = t2;
+		} else t2 = $[13];
+		return t2;
+	}
+	let t1;
+	if ($[14] !== children || $[15] !== className || $[16] !== dialogClassName || $[17] !== isDismissable || $[18] !== isOpen || $[19] !== label || $[20] !== onOpenChange || $[21] !== overlayClassName || $[22] !== portalContainerRef || $[23] !== shouldCloseOnInteractOutside) {
+		t1 = /* @__PURE__ */ jsx(DrawerOverlay, {
+			isOpen,
+			onOpenChange,
 			portalContainerRef,
 			isDismissable,
 			overlayClassName,
 			dialogClassName,
 			className,
+			label,
 			shouldCloseOnInteractOutside,
 			children
-		})]
-	});
-	return /* @__PURE__ */ jsx(DrawerOverlay, {
-		isOpen,
-		onOpenChange,
-		portalContainerRef,
-		isDismissable,
-		overlayClassName,
-		dialogClassName,
-		className,
-		label,
-		shouldCloseOnInteractOutside,
-		children
-	});
+		});
+		$[14] = children;
+		$[15] = className;
+		$[16] = dialogClassName;
+		$[17] = isDismissable;
+		$[18] = isOpen;
+		$[19] = label;
+		$[20] = onOpenChange;
+		$[21] = overlayClassName;
+		$[22] = portalContainerRef;
+		$[23] = shouldCloseOnInteractOutside;
+		$[24] = t1;
+	} else t1 = $[24];
+	return t1;
 };
 var DrawerOverlay = ({ label, isOpen, onOpenChange, portalContainerRef, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
 	return /* @__PURE__ */ jsx(ModalOverlay, {

package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js

@@ -2,40 +2,96 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { BottomSheet } from "../BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { popover } from "../../shared/popover.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Popover } from "react-aria-components";
 //#region src/components/overlays/ResponsivePopover/ResponsivePopover.tsx
-var ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel }) => {
+var ResponsivePopover = (t0) => {
+	const $ = c(23);
+	const { trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel } = t0;
 	const popoverCva = UIStyle.useCva("popover.cva", popover);
-	if (!useBreakpoint("md")) return /* @__PURE__ */ jsx(BottomSheet, {
-		isOpen,
-		onOpenChange,
-		trigger,
-		height: "auto",
-		isDismissable: true,
-		label: sheetLabel,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "p-4",
-			children
-		})
-	});
-	return /* @__PURE__ */ jsxs(DialogTrigger, {
-		isOpen,
-		onOpenChange,
-		children: [trigger, /* @__PURE__ */ jsx(Popover, {
-			className: clsx("my-4 outline-none", popoverClassName),
+	if (!useBreakpoint("md")) {
+		let t1;
+		if ($[0] !== children) {
+			t1 = /* @__PURE__ */ jsx("div", {
+				className: "p-4",
+				children
+			});
+			$[0] = children;
+			$[1] = t1;
+		} else t1 = $[1];
+		let t2;
+		if ($[2] !== isOpen || $[3] !== onOpenChange || $[4] !== sheetLabel || $[5] !== t1 || $[6] !== trigger) {
+			t2 = /* @__PURE__ */ jsx(BottomSheet, {
+				isOpen,
+				onOpenChange,
+				trigger,
+				height: "auto",
+				isDismissable: true,
+				label: sheetLabel,
+				children: t1
+			});
+			$[2] = isOpen;
+			$[3] = onOpenChange;
+			$[4] = sheetLabel;
+			$[5] = t1;
+			$[6] = trigger;
+			$[7] = t2;
+		} else t2 = $[7];
+		return t2;
+	}
+	let t1;
+	if ($[8] !== popoverClassName) {
+		t1 = clsx("my-4 outline-none", popoverClassName);
+		$[8] = popoverClassName;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== popoverCva) {
+		t2 = clsx(popoverCva({}), "overflow-hidden p-2");
+		$[10] = popoverCva;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== children || $[13] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Dialog, {
+			className: "outline-none",
+			children: /* @__PURE__ */ jsx("div", {
+				className: t2,
+				children
+			})
+		});
+		$[12] = children;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== t1 || $[16] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Popover, {
+			className: t1,
 			offset: 0,
 			placement: "bottom start",
-			children: /* @__PURE__ */ jsx(Dialog, {
-				className: "outline-none",
-				children: /* @__PURE__ */ jsx("div", {
-					className: clsx(popoverCva({}), "overflow-hidden p-2"),
-					children
-				})
-			})
-		})]
-	});
+			children: t3
+		});
+		$[15] = t1;
+		$[16] = t3;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== isOpen || $[19] !== onOpenChange || $[20] !== t4 || $[21] !== trigger) {
+		t5 = /* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen,
+			onOpenChange,
+			children: [trigger, t4]
+		});
+		$[18] = isOpen;
+		$[19] = onOpenChange;
+		$[20] = t4;
+		$[21] = trigger;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
 };
 //#endregion
 export { ResponsivePopover };