infinity-ui-elements 1.9.18 → 1.9.19

package/dist/index.js

@@ -3138,7 +3138,7 @@ const DateRangePicker = React__namespace.forwardRef(({ className, value: control
 });
 DateRangePicker.displayName = "DateRangePicker";
 
-const DropdownMenu = React__namespace.forwardRef(({ items = [], customContent, customContentClassName, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", maxHeight = "400px", }, ref) => {
+const DropdownMenu = React__namespace.forwardRef(({ items = [], customContent, customContentClassName, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", maxHeight = "400px", unstyled = false, }, ref) => {
     const renderContent = () => {
         if (isLoading) {
             return (jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center py-12 px-6", children: jsxRuntime.jsx(lucideReact.Loader2, { className: "w-12 h-12 text-action-ink-primary-normal mb-4 animate-spin" }) }));
@@ -3156,8 +3156,10 @@ const DropdownMenu = React__namespace.forwardRef(({ items = [], customContent, c
     };
     const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
     const footerVisible = showFooter ?? !disableFooter;
-    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("bg-white  rounded-large overflow-hidden", widthClass, className), style: {
-            boxShadow: "0 1px 2px rgba(25, 25, 30, 0.1), 0 2px 6px rgba(25, 25, 30, 0.06)",
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn(!unstyled && "bg-white rounded-large overflow-hidden", unstyled && "w-full", widthClass, className), style: {
+            ...(!unstyled && {
+                boxShadow: "0 1px 2px rgba(25, 25, 30, 0.1), 0 2px 6px rgba(25, 25, 30, 0.06)",
+            }),
             ...(width !== "full" && width !== "auto" ? { width } : {}),
         }, children: [renderContent(), footerVisible && (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx(Divider, { thickness: "thin", variant: "muted" }), jsxRuntime.jsxs("div", { className: cn("flex gap-3 p-4", footerLayout === "vertical"
                             ? "flex-col"
@@ -3189,6 +3191,18 @@ const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [],
         right: "auto",
         maxHeight: "400px",
     });
+    // Detect if we're on mobile (< 768px)
+    const [isMobile, setIsMobile] = React__namespace.useState(false);
+    React__namespace.useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+        // Check on mount
+        checkMobile();
+        // Add resize listener
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
     const handleOpenChange = (newOpen) => {
         if (controlledOpen === undefined) {
             setUncontrolledOpen(newOpen);
@@ -3305,14 +3319,18 @@ const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [],
         medium: "w-80",
         large: "w-96",
     };
-    return (jsxRuntime.jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsxRuntime.jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: cn("absolute z-50", menuClassName), style: {
+    // Render dropdown menu content wrapped in BottomSheet for mobile
+    const renderDropdownContent = () => (jsxRuntime.jsx(DropdownMenu, { ref: ref, items: items, customContent: customContent, customContentClassName: customContentClassName, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: showFooter, onClose: () => handleOpenChange(false), className: className, width: isMobile ? "full" : sizeMap[size], maxHeight: menuPosition.maxHeight, unstyled: isMobile }));
+    return (jsxRuntime.jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsxRuntime.jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: () => handleOpenChange(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (
+            /* Desktop: Regular Dropdown Menu */
+            isOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: cn("absolute z-50", menuClassName), style: {
                     top: menuPosition.top,
                     bottom: menuPosition.bottom,
                     left: menuPosition.left,
                     right: menuPosition.right,
                     marginTop: menuPosition.top === "100%" ? "0.5rem" : "0",
                     marginBottom: menuPosition.bottom === "100%" ? "0.5rem" : "0",
-                }, children: jsxRuntime.jsx(DropdownMenu, { ref: ref, items: items, customContent: customContent, customContentClassName: customContentClassName, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: showFooter, onClose: () => handleOpenChange(false), className: className, width: sizeMap[size], maxHeight: menuPosition.maxHeight }) }))] }));
+                }, children: renderDropdownContent() })))] }));
 });
 Dropdown.displayName = "Dropdown";
 
@@ -4096,6 +4114,7 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const [focusedIndex, setFocusedIndex] = React__namespace.useState(-1);
     const [isInsideModal, setIsInsideModal] = React__namespace.useState(false);
+    const [isMobile, setIsMobile] = React__namespace.useState(false);
     const dropdownRef = React__namespace.useRef(null);
     const inputRef = React__namespace.useRef(null);
     const menuRef = React__namespace.useRef(null);
@@ -4104,6 +4123,17 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
         left: 0,
         width: 0,
     });
+    // Detect if we're on mobile (< 768px)
+    React__namespace.useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+        // Check on mount
+        checkMobile();
+        // Add resize listener
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
     React__namespace.useImperativeHandle(ref, () => inputRef.current);
     // Determine current value (controlled or uncontrolled)
     const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
@@ -4338,15 +4368,18 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
         };
     });
     const showDropdown = isOpen && searchValue.length >= minSearchLength;
-    const dropdownMenu = showDropdown && (jsxRuntime.jsx("div", { ref: menuRef, style: {
+    // 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
+            ? true
+            : false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: isMobile ? "full" : (dropdownWidth === "full" ? "full" : "auto"), unstyled: isMobile }));
+    // 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, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: menuRef, style: {
             position: "absolute",
             top: `${position.top + 8}px`,
             left: `${position.left}px`,
             width: dropdownWidth === "full" ? `${position.width}px` : "auto",
             zIndex: isInsideModal ? 10001 : 9999,
-        }, children: 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
-                ? true
-                : false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: dropdownWidth === "full" ? "full" : "auto" }) }));
+        }, children: renderDropdownContent() })));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: jsxRuntime.jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps }) }), typeof document !== "undefined" &&
                 dropdownMenu &&
                 reactDom.createPortal(dropdownMenu, document.body)] }));