infinity-ui-elements 1.14.3 → 1.14.5

package/dist/index.js

@@ -1566,32 +1566,55 @@ const BottomSheet = React__namespace.forwardRef(({ isOpen, onClose, title, descr
             document.body.style.right = "0";
             document.body.style.width = "100%";
         }
+        // Track touch position for scroll boundary detection
+        let lastTouchY = 0;
+        const handleTouchStartForScroll = (e) => {
+            lastTouchY = e.touches[0].clientY;
+        };
         // Prevent touchmove on overlay to stop iOS rubber-banding
+        // But always allow scrolling inside body content
         const preventTouchMove = (e) => {
             const target = e.target;
-            // Allow scrolling inside the body content
+            const currentTouchY = e.touches[0].clientY;
+            const touchDelta = currentTouchY - lastTouchY;
+            lastTouchY = currentTouchY;
+            // Always 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) {
+                const canScroll = scrollHeight > clientHeight;
+                // If content is scrollable, allow normal scrolling
+                if (canScroll) {
+                    const isAtTop = scrollTop <= 0;
+                    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+                    const isScrollingDown = touchDelta > 0; // finger moving down = scrolling up
+                    const isScrollingUp = touchDelta < 0; // finger moving up = scrolling down
+                    // Only prevent at boundaries when trying to scroll beyond
+                    if ((isAtTop && isScrollingDown) || (isAtBottom && isScrollingUp)) {
+                        // At boundary, prevent overscroll but allow swipe-to-close from drag handle
+                        if (isDraggingFromHandle.current) {
+                            return; // Allow swipe gesture
+                        }
                         e.preventDefault();
                     }
+                    // Otherwise, allow normal scrolling
+                    return;
                 }
+                // Content not scrollable, allow touch events to pass through
+                return;
+            }
+            // Also allow scrolling in sticky content area
+            if (target.closest('[data-sticky-content]')) {
                 return;
             }
-            // Prevent scroll on overlay and other areas
+            // Prevent scroll on overlay and other areas (to prevent background scroll)
             e.preventDefault();
         };
+        document.addEventListener("touchstart", handleTouchStartForScroll, { passive: true });
         document.addEventListener("touchmove", preventTouchMove, { passive: false });
         return () => {
+            document.removeEventListener("touchstart", handleTouchStartForScroll);
             document.removeEventListener("touchmove", preventTouchMove);
             // Restore original styles
             if (originalBodyStyles.current) {
@@ -1608,11 +1631,24 @@ const BottomSheet = React__namespace.forwardRef(({ isOpen, onClose, title, descr
             }
         };
     }, [isOpen]);
-    // Reset closing state when opening
+    // Reset closing state and scroll position when opening
     React__namespace.useEffect(() => {
         if (isOpen) {
             setIsClosing(false);
             setKeyboardHeight(0);
+            // Reset scroll to top when opening - use multiple timeouts for iOS reliability
+            const resetScroll = () => {
+                if (bodyRef.current) {
+                    bodyRef.current.scrollTop = 0;
+                }
+            };
+            // Immediate reset
+            resetScroll();
+            // After animation starts
+            requestAnimationFrame(resetScroll);
+            // After animation completes
+            const timer = setTimeout(resetScroll, 350);
+            return () => clearTimeout(timer);
         }
     }, [isOpen]);
     // Scroll focused input into view when keyboard opens
@@ -1650,16 +1686,25 @@ const BottomSheet = React__namespace.forwardRef(({ isOpen, onClose, title, descr
         return () => document.removeEventListener("focusin", handleFocusIn);
     }, [isOpen, scrollToFocusedInput, adjustForKeyboard, viewportHeight, keyboardHeight]);
     // Reset scroll to top when content changes (for filtered results)
+    // This ensures empty states and filtered results are always visible
     React__namespace.useEffect(() => {
         if (!isOpen || !bodyRef.current)
             return;
         // Use requestAnimationFrame to ensure DOM has updated
         requestAnimationFrame(() => {
             if (bodyRef.current) {
+                // Always scroll to top to show content (including empty states)
                 bodyRef.current.scrollTop = 0;
+                // If keyboard is open, ensure content is in visible area
+                if (keyboardHeight > 0) {
+                    // Force a re-render of the scroll position
+                    bodyRef.current.style.scrollBehavior = 'auto';
+                    bodyRef.current.scrollTop = 0;
+                    bodyRef.current.style.scrollBehavior = '';
+                }
             }
         });
-    }, [children, isOpen]);
+    }, [children, isOpen, keyboardHeight]);
     // Handle close with animation
     const handleClose = React__namespace.useCallback(() => {
         if (!onClose)
@@ -1758,21 +1803,28 @@ const BottomSheet = React__namespace.forwardRef(({ isOpen, onClose, title, descr
         return null;
     const hasHeader = title || description;
     // Calculate dynamic max height based on keyboard
+    // When keyboard is open, limit height to fit in visible viewport above keyboard
     const dynamicMaxHeight = keyboardHeight > 0
-        ? `calc(${viewportHeight}px - ${safeAreaBottom}px - 20px)`
+        ? `${Math.min(viewportHeight - 20, viewportHeight * 0.9)}px`
         : maxHeight;
-    return (jsxRuntime.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
+    return (jsxRuntime.jsxs("div", { className: cn("fixed z-9999 flex items-end justify-center", 
+        // Always position at bottom, container height adjusts for keyboard
+        className), style: {
+            // Position container to fill visible viewport (above keyboard)
+            top: 0,
+            left: 0,
+            right: 0,
+            // Use visual viewport height when keyboard is open to stay above keyboard
             height: keyboardHeight > 0 ? `${viewportHeight}px` : "100%",
+            // On iOS, also set bottom to ensure proper positioning
+            ...(keyboardHeight === 0 && { bottom: 0 }),
         }, role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsxRuntime.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" }), jsxRuntime.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: {
+                // Always position at bottom of container
+                "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" && (jsxRuntime.jsx("div", { ref: dragHandleRef, className: "flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing touch-none", children: jsxRuntime.jsx("div", { className: "w-10 h-1 bg-neutral-300 rounded-full" }) })), hasHeader && (jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsxRuntime.jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsxRuntime.jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsxRuntime.jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsxRuntime.jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsxRuntime.jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet" }) })), stickyContent && (jsxRuntime.jsx("div", { className: cn("shrink-0", variant === "default" && "px-6 pb-4", variant === "default" && !hasHeader && !showDragHandle && "pt-4", variant === "default" && !hasHeader && showDragHandle && "pt-2", stickyContentClassName), children: stickyContent })), jsxRuntime.jsx("div", { ref: bodyRef, className: cn("flex-1 overflow-y-auto overscroll-contain", 
+                }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [showDragHandle && variant === "default" && (jsxRuntime.jsx("div", { ref: dragHandleRef, className: "flex justify-center pt-3 pb-2 cursor-grab active:cursor-grabbing touch-none", children: jsxRuntime.jsx("div", { className: "w-10 h-1 bg-neutral-300 rounded-full" }) })), hasHeader && (jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [title && (jsxRuntime.jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsxRuntime.jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsxRuntime.jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsxRuntime.jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsxRuntime.jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet" }) })), stickyContent && (jsxRuntime.jsx("div", { className: cn("shrink-0", variant === "default" && "px-6 pb-4", variant === "default" && !hasHeader && !showDragHandle && "pt-4", variant === "default" && !hasHeader && showDragHandle && "pt-2", stickyContentClassName), children: stickyContent })), jsxRuntime.jsx("div", { ref: bodyRef, className: cn("flex-1 min-h-0 overflow-y-auto overscroll-contain", 
                         // Smooth scrolling and momentum scroll for iOS
                         "-webkit-overflow-scrolling-touch", variant === "default" && "px-6", variant === "default" && hasHeader && !stickyContent && "py-4", variant === "default" && hasHeader && stickyContent && "pb-4", variant === "default" && !hasHeader && !showDragHandle && !stickyContent && "pt-6 pb-4", variant === "default" && !hasHeader && showDragHandle && !stickyContent && "pt-2 pb-4", variant === "default" && stickyContent && "pt-0 pb-4", variant === "default" && !footer && "pb-6", bodyClassName), children: children }), footer && (jsxRuntime.jsxs("div", { className: "flex flex-col shrink-0", style: {
                             // Add safe area padding to footer
@@ -4885,11 +4937,14 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
     });
     const showDropdown = isOpen && searchValue.length >= minSearchLength;
     // Render dropdown menu content
-    const renderDropdownContent = () => (jsxRuntime.jsx(DropdownMenu, { items: itemsWithHandlers, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: itemsWithAddNew.length === 0 && !showAddNew, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: (primaryButtonText || secondaryButtonText) && !disableFooter
+    const renderDropdownContent = () => (jsxRuntime.jsx(DropdownMenu, { items: itemsWithHandlers, sectionHeading: isMobile ? undefined : sectionHeading, isLoading: isLoading, isEmpty: itemsWithAddNew.length === 0 && !showAddNew, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: (primaryButtonText || secondaryButtonText) && !disableFooter
             ? true
-            : false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: isMobile ? "full" : (dropdownWidth === "full" ? "full" : "auto"), maxHeight: `${position.maxHeight}px`, unstyled: isMobile }));
+            : false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: isMobile ? "full" : (dropdownWidth === "full" ? "full" : "auto"), 
+        // On mobile, let BottomSheet body handle scrolling; on desktop use calculated maxHeight
+        maxHeight: isMobile ? "none" : `${position.maxHeight}px`, unstyled: isMobile }));
     // Search field component for mobile BottomSheet
-    const mobileSearchField = (jsxRuntime.jsx(TextField, { value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, containerClassName: "mb-0", placeholder: textFieldProps.placeholder || "Search...", autoFocus: true, ...textFieldProps }));
+    // Note: No autoFocus - keyboard only appears when user taps the field
+    const mobileSearchField = (jsxRuntime.jsx(TextField, { value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, containerClassName: "mb-0", placeholder: textFieldProps.placeholder || "Search...", ...textFieldProps }));
     // Mobile: BottomSheet, Desktop: Regular Dropdown
     const dropdownMenu = showDropdown && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, adjustForKeyboard: true, scrollToFocusedInput: true, maxHeight: "85vh", stickyContent: mobileSearchField, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: menuRef, style: {
             position: "fixed",