infinity-ui-elements 1.9.17 → 1.9.19

package/dist/index.esm.js

@@ -3117,7 +3117,7 @@ const DateRangePicker = React.forwardRef(({ className, value: controlledValue, d
 });
 DateRangePicker.displayName = "DateRangePicker";
 
-const DropdownMenu = React.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.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 (jsx("div", { className: "flex flex-col items-center justify-center py-12 px-6", children: jsx(Loader2, { className: "w-12 h-12 text-action-ink-primary-normal mb-4 animate-spin" }) }));
@@ -3135,8 +3135,10 @@ const DropdownMenu = React.forwardRef(({ items = [], customContent, customConten
     };
     const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
     const footerVisible = showFooter ?? !disableFooter;
-    return (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 (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 && (jsxs("div", { className: "flex flex-col", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsxs("div", { className: cn("flex gap-3 p-4", footerLayout === "vertical"
                             ? "flex-col"
@@ -3168,6 +3170,18 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
         right: "auto",
         maxHeight: "400px",
     });
+    // Detect if we're on mobile (< 768px)
+    const [isMobile, setIsMobile] = React.useState(false);
+    React.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);
@@ -3284,14 +3298,18 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
         medium: "w-80",
         large: "w-96",
     };
-    return (jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsx("div", { ref: menuRef, className: cn("absolute z-50", menuClassName), style: {
+    // Render dropdown menu content wrapped in BottomSheet for mobile
+    const renderDropdownContent = () => (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 (jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isMobile ? (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 && (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: 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";
 
@@ -4075,6 +4093,7 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
     const [isOpen, setIsOpen] = React.useState(false);
     const [focusedIndex, setFocusedIndex] = React.useState(-1);
     const [isInsideModal, setIsInsideModal] = React.useState(false);
+    const [isMobile, setIsMobile] = React.useState(false);
     const dropdownRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const menuRef = React.useRef(null);
@@ -4083,6 +4102,17 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         left: 0,
         width: 0,
     });
+    // Detect if we're on mobile (< 768px)
+    React.useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+        // Check on mount
+        checkMobile();
+        // Add resize listener
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
     React.useImperativeHandle(ref, () => inputRef.current);
     // Determine current value (controlled or uncontrolled)
     const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
@@ -4317,15 +4347,18 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         };
     });
     const showDropdown = isOpen && searchValue.length >= minSearchLength;
-    const dropdownMenu = showDropdown && (jsx("div", { ref: menuRef, style: {
+    // 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
+            ? 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 ? (jsx(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (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: 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 (jsxs(Fragment, { children: [jsx("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps }) }), typeof document !== "undefined" &&
                 dropdownMenu &&
                 createPortal(dropdownMenu, document.body)] }));
@@ -4337,12 +4370,12 @@ const SidePanel = React.forwardRef(({ isOpen, onClose, title, titleIcon, descrip
     const contentRef = ref || panelRef;
     const [isVisible, setIsVisible] = React.useState(false);
     const [shouldRender, setShouldRender] = React.useState(false);
-    // Width configurations
+    // Width configurations - full width on mobile, specified width on tablet/desktop
     const widthConfig = {
-        small: "w-80",
-        medium: "w-96",
-        large: "w-[32rem]",
-        xlarge: "w-[40rem]",
+        small: "w-full md:w-80",
+        medium: "w-full md:w-96",
+        large: "w-full md:w-[32rem]",
+        xlarge: "w-full md:w-[40rem]",
     };
     // Handle mounting and unmounting with animation
     React.useEffect(() => {
@@ -4414,7 +4447,7 @@ const SidePanel = React.forwardRef(({ isOpen, onClose, title, titleIcon, descrip
     const widthClass = width in widthConfig
         ? widthConfig[width]
         : width;
-    return (jsxs("div", { className: cn("fixed inset-0 z-9999 flex p-4", positionClasses[position].container, className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsx("div", { className: cn("absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isVisible ? "opacity-100" : "opacity-0", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative bg-white shadow-2xl transition-transform duration-300 ease-out rounded-large", "flex flex-col max-w-full overflow-hidden", position === "center" ? "max-h-[90vh]" : "h-full", widthClass, positionClasses[position].panel, contentClassName), children: [hasHeader && (jsxs("div", { className: cn("flex items-center justify-between gap-4 px-7 py-5 shrink-0 border-b border-surface-outline-neutral-subtle", headerClassName), children: [jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [titleIcon && (jsx("div", { className: "flex items-center justify-center shrink-0", children: typeof titleIcon === "string" ? (jsx(Icon, { name: titleIcon, size: 20 })) : (titleIcon) })), jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", className: "truncate", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-0.5", children: description }))] })] }), jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [headerActions, showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close side panel" }))] })] })), !hasHeader && showCloseButton && onClose && (jsx("div", { className: "absolute top-4 right-4 z-10", children: jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close side panel" }) })), jsx("div", { className: cn("flex-1 overflow-y-auto px-6", hasHeader ? "py-6" : "pt-6 pb-4", !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col shrink-0", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsx("div", { className: cn("flex items-center justify-end gap-3 px-6 py-4", footerClassName), children: footer })] }))] })] }));
+    return (jsxs("div", { className: cn("fixed inset-0 z-9999 flex p-0 md:p-4", positionClasses[position].container, className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsx("div", { className: cn("absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isVisible ? "opacity-100" : "opacity-0", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative bg-white shadow-2xl transition-transform duration-300 ease-out rounded-none md:rounded-large", "flex flex-col max-w-full overflow-hidden", position === "center" ? "max-h-[90vh]" : "h-full", widthClass, positionClasses[position].panel, contentClassName), children: [hasHeader && (jsxs("div", { className: cn("flex items-center justify-between gap-4 px-7 py-5 shrink-0 border-b border-surface-outline-neutral-subtle", headerClassName), children: [jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [titleIcon && (jsx("div", { className: "flex items-center justify-center shrink-0", children: typeof titleIcon === "string" ? (jsx(Icon, { name: titleIcon, size: 20 })) : (titleIcon) })), jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", className: "truncate", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-0.5", children: description }))] })] }), jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [headerActions, showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close side panel" }))] })] })), !hasHeader && showCloseButton && onClose && (jsx("div", { className: "absolute top-4 right-4 z-10", children: jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close side panel" }) })), jsx("div", { className: cn("flex-1 overflow-y-auto px-6", hasHeader ? "py-6" : "pt-6 pb-4", !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col shrink-0", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsx("div", { className: cn("flex items-center justify-end gap-3 px-6 py-4", footerClassName), children: footer })] }))] })] }));
 });
 SidePanel.displayName = "SidePanel";