infinity-ui-elements 1.14.0 → 1.14.2

package/dist/index.esm.js

@@ -1410,12 +1410,102 @@ const Divider = React.forwardRef(({ className, orientation = "horizontal", thick
 });
 Divider.displayName = "Divider";
 
-const BottomSheet = React.forwardRef(({ isOpen, onClose, title, description, footer, children, variant = "default", showCloseButton = true, showDragHandle = true, closeOnOverlayClick = true, closeOnEscape = true, closeOnSwipeDown = true, maxHeight = "90vh", className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
+// Detect iOS
+const isIOS = () => {
+    if (typeof window === "undefined" || typeof navigator === "undefined")
+        return false;
+    return /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+};
+// Detect Android
+const isAndroid = () => {
+    if (typeof navigator === "undefined")
+        return false;
+    return /Android/.test(navigator.userAgent);
+};
+// Get visual viewport height (accounts for keyboard)
+const getVisualViewportHeight = () => {
+    if (typeof window === "undefined")
+        return 0;
+    // Use visualViewport API if available (better keyboard detection)
+    if (window.visualViewport) {
+        return window.visualViewport.height;
+    }
+    return window.innerHeight;
+};
+// Get safe area inset bottom (for devices with home indicator)
+const getSafeAreaInsetBottom = () => {
+    if (typeof window === "undefined" || typeof document === "undefined")
+        return 0;
+    const root = document.documentElement;
+    const safeAreaInset = getComputedStyle(root).getPropertyValue("--safe-area-inset-bottom");
+    if (safeAreaInset) {
+        return parseInt(safeAreaInset, 10) || 0;
+    }
+    // Fallback: try to read env() value
+    const testDiv = document.createElement("div");
+    testDiv.style.paddingBottom = "env(safe-area-inset-bottom, 0px)";
+    document.body.appendChild(testDiv);
+    const paddingBottom = parseInt(getComputedStyle(testDiv).paddingBottom, 10) || 0;
+    document.body.removeChild(testDiv);
+    return paddingBottom;
+};
+const BottomSheet = React.forwardRef(({ isOpen, onClose, title, description, footer, children, variant = "default", showCloseButton = true, showDragHandle = true, closeOnOverlayClick = true, closeOnEscape = true, closeOnSwipeDown = true, maxHeight = "90vh", className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, adjustForKeyboard = true, scrollToFocusedInput = true, }, ref) => {
     const sheetRef = React.useRef(null);
     const contentRef = ref || sheetRef;
+    const bodyRef = React.useRef(null);
+    const dragHandleRef = React.useRef(null);
+    const overlayRef = React.useRef(null);
     const [isClosing, setIsClosing] = React.useState(false);
     const [touchStart, setTouchStart] = React.useState(null);
     const [touchEnd, setTouchEnd] = React.useState(null);
+    const [touchStartX, setTouchStartX] = React.useState(null);
+    const [isSwipeGesture, setIsSwipeGesture] = React.useState(false);
+    const [keyboardHeight, setKeyboardHeight] = React.useState(0);
+    const [viewportHeight, setViewportHeight] = React.useState(typeof window !== "undefined" ? window.innerHeight : 0);
+    const [safeAreaBottom, setSafeAreaBottom] = React.useState(0);
+    // Track if user started dragging from the drag handle
+    const isDraggingFromHandle = React.useRef(false);
+    // Store original body styles for restoration
+    const originalBodyStyles = React.useRef(null);
+    // Track scroll position before locking
+    const scrollPosition = React.useRef(0);
+    // Initialize safe area inset
+    React.useEffect(() => {
+        setSafeAreaBottom(getSafeAreaInsetBottom());
+    }, []);
+    // Handle Visual Viewport API for keyboard detection
+    React.useEffect(() => {
+        if (!isOpen || !adjustForKeyboard)
+            return;
+        if (typeof window === "undefined")
+            return;
+        const updateViewport = () => {
+            const newHeight = getVisualViewportHeight();
+            const fullHeight = window.innerHeight;
+            const newKeyboardHeight = Math.max(0, fullHeight - newHeight);
+            setViewportHeight(newHeight);
+            setKeyboardHeight(newKeyboardHeight);
+        };
+        // Use visualViewport API if available
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener("resize", updateViewport);
+            window.visualViewport.addEventListener("scroll", updateViewport);
+            updateViewport();
+            return () => {
+                window.visualViewport?.removeEventListener("resize", updateViewport);
+                window.visualViewport?.removeEventListener("scroll", updateViewport);
+            };
+        }
+        else {
+            // Fallback for browsers without visualViewport API
+            window.addEventListener("resize", updateViewport);
+            updateViewport();
+            return () => {
+                window.removeEventListener("resize", updateViewport);
+            };
+        }
+    }, [isOpen, adjustForKeyboard]);
     // Handle escape key
     React.useEffect(() => {
         if (!isOpen || !closeOnEscape || !onClose)
@@ -1428,69 +1518,245 @@ const BottomSheet = React.forwardRef(({ isOpen, onClose, title, description, foo
         document.addEventListener("keydown", handleEscape);
         return () => document.removeEventListener("keydown", handleEscape);
     }, [isOpen, closeOnEscape, onClose]);
-    // Prevent body scroll when bottom sheet is open
+    // Robust body scroll lock for iOS and Android
     React.useEffect(() => {
-        if (isOpen) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = "";
-        }
+        if (!isOpen)
+            return;
+        const iOS = isIOS();
+        // Store current scroll position
+        scrollPosition.current = window.pageYOffset || document.documentElement.scrollTop;
+        // Store original styles
+        originalBodyStyles.current = {
+            overflow: document.body.style.overflow,
+            position: document.body.style.position,
+            top: document.body.style.top,
+            left: document.body.style.left,
+            right: document.body.style.right,
+            width: document.body.style.width,
+            height: document.body.style.height,
+        };
+        // Apply scroll lock
+        document.body.style.overflow = "hidden";
+        // iOS requires position fixed to prevent background scroll
+        if (iOS) {
+            document.body.style.position = "fixed";
+            document.body.style.top = `-${scrollPosition.current}px`;
+            document.body.style.left = "0";
+            document.body.style.right = "0";
+            document.body.style.width = "100%";
+        }
+        // Prevent touchmove on overlay to stop iOS rubber-banding
+        const preventTouchMove = (e) => {
+            const target = e.target;
+            // Allow scrolling inside the body content
+            if (bodyRef.current?.contains(target)) {
+                const scrollTop = bodyRef.current.scrollTop;
+                const scrollHeight = bodyRef.current.scrollHeight;
+                const clientHeight = bodyRef.current.clientHeight;
+                // Check if at scroll boundaries
+                const isAtTop = scrollTop <= 0;
+                const isAtBottom = scrollTop + clientHeight >= scrollHeight;
+                // Only prevent default if at boundaries and trying to scroll further
+                if ((isAtTop && e.touches[0].clientY > (touchStart || 0)) ||
+                    (isAtBottom && e.touches[0].clientY < (touchStart || 0))) {
+                    // Allow the swipe-to-close gesture
+                    if (!isDraggingFromHandle.current) {
+                        e.preventDefault();
+                    }
+                }
+                return;
+            }
+            // Prevent scroll on overlay and other areas
+            e.preventDefault();
+        };
+        document.addEventListener("touchmove", preventTouchMove, { passive: false });
         return () => {
-            document.body.style.overflow = "";
+            document.removeEventListener("touchmove", preventTouchMove);
+            // Restore original styles
+            if (originalBodyStyles.current) {
+                document.body.style.overflow = originalBodyStyles.current.overflow;
+                document.body.style.position = originalBodyStyles.current.position;
+                document.body.style.top = originalBodyStyles.current.top;
+                document.body.style.left = originalBodyStyles.current.left;
+                document.body.style.right = originalBodyStyles.current.right;
+                document.body.style.width = originalBodyStyles.current.width;
+            }
+            // Restore scroll position for iOS
+            if (iOS) {
+                window.scrollTo(0, scrollPosition.current);
+            }
         };
     }, [isOpen]);
     // Reset closing state when opening
     React.useEffect(() => {
         if (isOpen) {
             setIsClosing(false);
+            setKeyboardHeight(0);
         }
     }, [isOpen]);
+    // Scroll focused input into view when keyboard opens
+    React.useEffect(() => {
+        if (!isOpen || !scrollToFocusedInput || !adjustForKeyboard)
+            return;
+        const handleFocusIn = (e) => {
+            const target = e.target;
+            if (!target || !bodyRef.current)
+                return;
+            // Check if target is an input/textarea inside the body
+            if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") &&
+                bodyRef.current.contains(target)) {
+                // Wait for keyboard to open
+                setTimeout(() => {
+                    // Scroll the input into view within the body container
+                    const targetRect = target.getBoundingClientRect();
+                    const bodyRect = bodyRef.current?.getBoundingClientRect();
+                    if (!bodyRect)
+                        return;
+                    // Calculate if input is below visible area (considering keyboard)
+                    const visibleBottom = viewportHeight - keyboardHeight - 20; // 20px buffer
+                    if (targetRect.bottom > visibleBottom) {
+                        // Scroll to bring input into view
+                        const scrollAmount = targetRect.bottom - visibleBottom + 40;
+                        bodyRef.current?.scrollBy({
+                            top: scrollAmount,
+                            behavior: "smooth",
+                        });
+                    }
+                }, 100);
+            }
+        };
+        document.addEventListener("focusin", handleFocusIn);
+        return () => document.removeEventListener("focusin", handleFocusIn);
+    }, [isOpen, scrollToFocusedInput, adjustForKeyboard, viewportHeight, keyboardHeight]);
+    // Reset scroll to top when content changes (for filtered results)
+    React.useEffect(() => {
+        if (!isOpen || !bodyRef.current)
+            return;
+        // Use requestAnimationFrame to ensure DOM has updated
+        requestAnimationFrame(() => {
+            if (bodyRef.current) {
+                bodyRef.current.scrollTop = 0;
+            }
+        });
+    }, [children, isOpen]);
     // Handle close with animation
-    const handleClose = () => {
+    const handleClose = React.useCallback(() => {
         if (!onClose)
             return;
+        // Blur any focused input to dismiss keyboard
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
         setIsClosing(true);
         // Wait for animation to complete before calling onClose
         setTimeout(() => {
             onClose();
             setIsClosing(false);
         }, 300); // Match animation duration
-    };
+    }, [onClose]);
     // Handle overlay click
     const handleOverlayClick = (e) => {
         if (closeOnOverlayClick && e.target === e.currentTarget) {
             handleClose();
         }
     };
-    // Handle touch events for swipe down
+    // Touch handling for swipe-to-close (only from drag handle or when scrolled to top)
     const handleTouchStart = (e) => {
         if (!closeOnSwipeDown)
             return;
+        const touch = e.targetTouches[0];
         setTouchEnd(null);
-        setTouchStart(e.targetTouches[0].clientY);
+        setTouchStart(touch.clientY);
+        setTouchStartX(touch.clientX);
+        setIsSwipeGesture(false);
+        // Check if drag started from the drag handle
+        isDraggingFromHandle.current = dragHandleRef.current?.contains(e.target) || false;
     };
     const handleTouchMove = (e) => {
-        if (!closeOnSwipeDown)
+        if (!closeOnSwipeDown || touchStart === null)
             return;
-        setTouchEnd(e.targetTouches[0].clientY);
+        const touch = e.targetTouches[0];
+        const currentY = touch.clientY;
+        const currentX = touch.clientX;
+        setTouchEnd(currentY);
+        // Determine if this is a vertical swipe gesture (vs horizontal scroll)
+        if (!isSwipeGesture && touchStartX !== null) {
+            const deltaY = Math.abs(currentY - touchStart);
+            const deltaX = Math.abs(currentX - touchStartX);
+            // If vertical movement is greater, it's a swipe gesture
+            if (deltaY > 10 || deltaX > 10) {
+                setIsSwipeGesture(deltaY > deltaX);
+            }
+        }
     };
     const handleTouchEnd = () => {
-        if (!closeOnSwipeDown || !touchStart || !touchEnd)
+        if (!closeOnSwipeDown || touchStart === null || touchEnd === null) {
+            resetTouchState();
             return;
+        }
         const distance = touchEnd - touchStart;
-        const isSwipeDown = distance > 100; // Minimum swipe distance
-        if (isSwipeDown) {
+        const isSwipeDown = distance > 80; // Minimum swipe distance
+        // Only close if:
+        // 1. Swiped from drag handle, OR
+        // 2. Body is scrolled to top and user swiped down
+        const bodyScrolledToTop = (bodyRef.current?.scrollTop || 0) <= 0;
+        const shouldClose = isSwipeDown && isSwipeGesture && (isDraggingFromHandle.current || bodyScrolledToTop);
+        if (shouldClose) {
             handleClose();
         }
+        resetTouchState();
+    };
+    const resetTouchState = () => {
         setTouchStart(null);
         setTouchEnd(null);
+        setTouchStartX(null);
+        setIsSwipeGesture(false);
+        isDraggingFromHandle.current = false;
     };
+    // Handle Android back button
+    React.useEffect(() => {
+        if (!isOpen || !isAndroid())
+            return;
+        const handlePopState = (e) => {
+            e.preventDefault();
+            handleClose();
+        };
+        // Push a dummy state so back button can be caught
+        window.history.pushState({ bottomSheet: true }, "");
+        window.addEventListener("popstate", handlePopState);
+        return () => {
+            window.removeEventListener("popstate", handlePopState);
+            // Clean up the dummy state if still present
+            if (window.history.state?.bottomSheet) {
+                window.history.back();
+            }
+        };
+    }, [isOpen, handleClose]);
     // Don't render if not open and not closing
     if (!isOpen && !isClosing)
         return null;
     const hasHeader = title || description;
-    return (jsxs("div", { className: cn("fixed inset-0 z-9999 flex items-end justify-center", className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsx("div", { className: cn("absolute inset-0 z-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isClosing ? "opacity-0" : "opacity-100", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative z-10 w-full transition-transform duration-300", "flex flex-col overflow-hidden", variant === "default" && "bg-white rounded-t-2xl shadow-xl", isClosing ? "animate-slide-out-bottom" : "animate-slide-in-bottom", contentClassName), style: { maxHeight }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [showDragHandle && variant === "default" && (jsx("div", { className: "flex justify-center pt-3 pb-2", children: jsx("div", { className: "w-10 h-1 bg-neutral-300 rounded-full" }) })), hasHeader && (jsxs("div", { className: cn("flex items-start justify-between gap-4", variant === "default" && "px-6", variant === "default" && !showDragHandle && "pt-6", variant === "default" && showDragHandle && "pt-2", variant === "default" && !description && "pb-4", variant === "default" && description && "pb-2", headerClassName), children: [jsxs("div", { className: "flex-1", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet" }) })), jsx("div", { className: cn("flex-1 overflow-y-auto", variant === "default" && "px-6", variant === "default" && hasHeader && "py-4", variant === "default" && !hasHeader && !showDragHandle && "pt-6 pb-4", variant === "default" && !hasHeader && showDragHandle && "pt-2 pb-4", variant === "default" && !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col", children: [variant === "default" && (jsx(Divider, { thickness: "thin", variant: "muted" })), jsx("div", { className: cn("flex items-center justify-end gap-3", variant === "default" && "px-6 py-4", footerClassName), children: footer })] }))] })] }));
+    // Calculate dynamic max height based on keyboard
+    const dynamicMaxHeight = keyboardHeight > 0
+        ? `calc(${viewportHeight}px - ${safeAreaBottom}px - 20px)`
+        : maxHeight;
+    return (jsxs("div", { className: cn("fixed inset-0 z-9999 flex items-end justify-center", 
+        // Use visual viewport height on mobile when keyboard is open
+        keyboardHeight > 0 && "items-start pt-[env(safe-area-inset-top)]", className), style: {
+            // Use visual viewport height when keyboard is open
+            height: keyboardHeight > 0 ? `${viewportHeight}px` : "100%",
+        }, role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsx("div", { ref: overlayRef, className: cn("absolute inset-0 z-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isClosing ? "opacity-0" : "opacity-100", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative z-10 w-full transition-transform duration-300", "flex flex-col overflow-hidden", variant === "default" && "bg-white rounded-t-2xl shadow-xl", isClosing ? "animate-slide-out-bottom" : "animate-slide-in-bottom", 
+                // Ensure bottom sheet is at the bottom when keyboard is open
+                keyboardHeight > 0 && "mt-auto", contentClassName), style: {
+                    maxHeight: dynamicMaxHeight,
+                    // Add safe area padding at the bottom for devices with home indicator
+                    paddingBottom: footer ? 0 : `max(env(safe-area-inset-bottom, 0px), ${safeAreaBottom}px)`,
+                }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [showDragHandle && variant === "default" && (jsx("div", { ref: dragHandleRef, className: "flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing touch-none", children: jsx("div", { className: "w-10 h-1 bg-neutral-300 rounded-full" }) })), hasHeader && (jsxs("div", { className: cn("flex items-start justify-between gap-4 shrink-0", variant === "default" && "px-6", variant === "default" && !showDragHandle && "pt-6", variant === "default" && showDragHandle && "pt-2", variant === "default" && !description && "pb-4", variant === "default" && description && "pb-2", headerClassName), children: [jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet" }) })), jsx("div", { ref: bodyRef, className: cn("flex-1 overflow-y-auto overscroll-contain", 
+                        // Smooth scrolling and momentum scroll for iOS
+                        "-webkit-overflow-scrolling-touch", variant === "default" && "px-6", variant === "default" && hasHeader && "py-4", variant === "default" && !hasHeader && !showDragHandle && "pt-6 pb-4", variant === "default" && !hasHeader && showDragHandle && "pt-2 pb-4", variant === "default" && !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col shrink-0", style: {
+                            // Add safe area padding to footer
+                            paddingBottom: `max(env(safe-area-inset-bottom, 0px), ${safeAreaBottom}px)`,
+                        }, children: [variant === "default" && (jsx(Divider, { thickness: "thin", variant: "muted" })), jsx("div", { className: cn("flex items-center justify-end gap-3", variant === "default" && "px-6 py-4", footerClassName), children: footer })] }))] })] }));
 });
 BottomSheet.displayName = "BottomSheet";
 
@@ -4602,7 +4868,7 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
             ? true
             : false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: isMobile ? "full" : (dropdownWidth === "full" ? "full" : "auto"), maxHeight: `${position.maxHeight}px`, unstyled: isMobile }));
     // Mobile: BottomSheet, Desktop: Regular Dropdown
-    const dropdownMenu = showDropdown && (isMobile ? (jsxs(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: [jsx("div", { className: "mb-4", children: jsx(TextField, { value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, containerClassName: "mb-0", placeholder: textFieldProps.placeholder || "Search...", autoFocus: true, ...textFieldProps }) }), renderDropdownContent()] })) : (jsx("div", { ref: menuRef, style: {
+    const dropdownMenu = showDropdown && (isMobile ? (jsxs(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, adjustForKeyboard: true, scrollToFocusedInput: true, maxHeight: "85vh", children: [jsx("div", { className: "mb-4 sticky top-0 bg-white z-10 -mx-6 px-6 pt-2 pb-4 -mt-4", children: jsx(TextField, { value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, containerClassName: "mb-0", placeholder: textFieldProps.placeholder || "Search...", autoFocus: true, ...textFieldProps }) }), renderDropdownContent()] })) : (jsx("div", { ref: menuRef, style: {
             position: "fixed",
             ...(position.top !== undefined && { top: `${position.top}px` }),
             ...(position.bottom !== undefined && {