infinity-ui-elements 1.14.2 → 1.14.4

package/dist/index.esm.js

@@ -1450,7 +1450,7 @@ const getSafeAreaInsetBottom = () => {
     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 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, stickyContent, stickyContentClassName, }, ref) => {
     const sheetRef = React.useRef(null);
     const contentRef = ref || sheetRef;
     const bodyRef = React.useRef(null);
@@ -1587,11 +1587,24 @@ const BottomSheet = React.forwardRef(({ isOpen, onClose, title, description, foo
             }
         };
     }, [isOpen]);
-    // Reset closing state when opening
+    // Reset closing state and scroll position when opening
     React.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
@@ -1629,16 +1642,25 @@ const BottomSheet = React.forwardRef(({ isOpen, onClose, title, description, foo
         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.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.useCallback(() => {
         if (!onClose)
@@ -1737,23 +1759,30 @@ const BottomSheet = React.forwardRef(({ isOpen, onClose, title, description, foo
         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 (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 (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: [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: {
+                // 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" && (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", 
+                }, 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" }) })), stickyContent && (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 })), 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 && "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: {
+                        "-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 && (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 })] }))] })] }));
@@ -4864,11 +4893,16 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
     });
     const showDropdown = isOpen && searchValue.length >= minSearchLength;
     // Render dropdown menu content
-    const renderDropdownContent = () => (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 = () => (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
+    // Note: No autoFocus - keyboard only appears when user taps the field
+    const mobileSearchField = (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 ? (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: {
+    const dropdownMenu = showDropdown && (isMobile ? (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() })) : (jsx("div", { ref: menuRef, style: {
             position: "fixed",
             ...(position.top !== undefined && { top: `${position.top}px` }),
             ...(position.bottom !== undefined && {