infinity-ui-elements 1.9.27 → 1.13.0

package/dist/index.esm.js

@@ -3117,79 +3117,29 @@ 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", unstyled = false, constrainToViewport = true, }, ref) => {
-    const menuRef = React.useRef(null);
-    const [viewportConstraints, setViewportConstraints] = React.useState({ maxHeight: null, maxWidth: null });
-    const setRef = React.useCallback((el) => {
-        menuRef.current = el;
-        if (typeof ref === "function")
-            ref(el);
-        else if (ref)
-            ref.current = el;
-    }, [ref]);
-    React.useEffect(() => {
-        if (!constrainToViewport || !menuRef.current)
-            return;
-        const VIEWPORT_PADDING = 8;
-        const updateConstraints = () => {
-            const el = menuRef.current;
-            if (!el)
-                return;
-            const rect = el.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            const viewportWidth = window.innerWidth;
-            const spaceBelow = viewportHeight - rect.bottom - VIEWPORT_PADDING;
-            const spaceRight = viewportWidth - rect.left - VIEWPORT_PADDING;
-            setViewportConstraints({
-                maxHeight: Math.max(0, Math.floor(spaceBelow)),
-                maxWidth: rect.right > viewportWidth - VIEWPORT_PADDING
-                    ? Math.max(0, Math.floor(spaceRight))
-                    : null,
-            });
-        };
-        const runAfterPaint = () => {
-            requestAnimationFrame(() => {
-                requestAnimationFrame(updateConstraints);
-            });
-        };
-        runAfterPaint();
-        window.addEventListener("resize", runAfterPaint);
-        window.addEventListener("scroll", runAfterPaint, true);
-        return () => {
-            window.removeEventListener("resize", runAfterPaint);
-            window.removeEventListener("scroll", runAfterPaint, true);
-        };
-    }, [constrainToViewport]);
-    const parsedMaxHeight = parseInt(String(maxHeight), 10) || 400;
-    const effectiveMaxHeight = viewportConstraints.maxHeight !== null
-        ? `${Math.min(parsedMaxHeight, viewportConstraints.maxHeight)}px`
-        : maxHeight;
-    const effectiveMaxWidth = viewportConstraints.maxWidth !== null
-        ? `${viewportConstraints.maxWidth}px`
-        : undefined;
+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" }) }));
         }
         if (customContent) {
-            return (jsxs("div", { className: `py-3 px-3 overflow-y-auto ${customContentClassName}`, style: { maxHeight: effectiveMaxHeight, maxWidth: effectiveMaxWidth }, children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-body-small-medium text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { children: customContent })] }));
+            return (jsxs("div", { className: `py-3 px-3 overflow-y-auto ${customContentClassName}`, style: { maxHeight }, children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-body-small-medium text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { children: customContent })] }));
         }
         if (isEmpty || items.length === 0) {
             return (jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-6 text-center", children: [emptyIcon || (jsx(Search, { className: "w-12 h-12 text-surface-ink-neutral-muted mb-4" })), jsx(Text, { as: "h3", variant: "body", size: "small", weight: "semibold", className: "text-surface-ink-neutral-normal mb-2", children: emptyTitle }), jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", className: "text-surface-ink-neutral-muted mb-3", children: emptyDescription }), emptyLinkText && (jsx(Link, { type: "anchor", color: "primary", size: "small", onClick: onEmptyLinkClick, children: emptyLinkText }))] }));
         }
-        return (jsxs("div", { className: `py-3 px-3 overflow-y-auto`, style: { maxHeight: effectiveMaxHeight, maxWidth: effectiveMaxWidth }, children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "flex flex-col gap-1", children: items.map((item, index) => (jsx(ListItem, { title: item.label, description: item.description, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, showChevron: showChevron, isDisabled: item.isDisabled, isSelected: index === focusedIndex, variant: item.variant, onClick: () => {
+        return (jsxs("div", { className: `py-3 px-3 overflow-y-auto`, style: { maxHeight }, children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "flex flex-col gap-1", children: items.map((item, index) => (jsx(ListItem, { title: item.label, description: item.description, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, showChevron: showChevron, isDisabled: item.isDisabled, isSelected: index === focusedIndex, variant: item.variant, onClick: () => {
                             item.onClick?.();
                             onClose?.();
                         }, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.value))) })] }));
     };
     const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
     const footerVisible = showFooter ?? !disableFooter;
-    return (jsxs("div", { ref: setRef, className: cn(!unstyled && "bg-white rounded-large overflow-hidden", unstyled && "w-full", widthClass, className), style: {
+    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 } : {}),
-            ...(effectiveMaxWidth ? { maxWidth: effectiveMaxWidth } : {}),
         }, 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"
                             : "items-center flex-row"), children: [onSecondaryClick && (jsx(Button, { variant: "secondary", color: "primary", size: "medium", isFullWidth: true, onClick: onSecondaryClick, children: secondaryButtonText })), onPrimaryClick && (jsx(Button, { variant: "primary", color: "primary", size: "medium", isFullWidth: true, onClick: onPrimaryClick, children: primaryButtonText }))] })] }))] }));
@@ -3213,14 +3163,12 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
     const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
     const dropdownRef = React.useRef(null);
     const menuRef = React.useRef(null);
-    const VIEWPORT_PADDING = 8;
-    const MENU_MAX_HEIGHT = 400;
     const [menuPosition, setMenuPosition] = React.useState({
         top: "100%",
         bottom: "auto",
         left: "0",
         right: "auto",
-        maxHeight: `${MENU_MAX_HEIGHT}px`,
+        maxHeight: "400px",
     });
     // Detect if we're on mobile (< 768px)
     const [isMobile, setIsMobile] = React.useState(false);
@@ -3279,56 +3227,68 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
         const calculatePosition = () => {
             const triggerRect = dropdownRef.current.getBoundingClientRect();
             const menuElement = menuRef.current;
-            const currentContainerRect = dropdownRef.current.getBoundingClientRect();
+            // Get menu dimensions (use a temporary measurement if needed)
             const menuRect = menuElement.getBoundingClientRect();
-            const menuHeight = menuRect.height || MENU_MAX_HEIGHT;
-            const menuWidth = menuRect.width || 320; // fallback for initial render (w-80 = 320px)
+            const menuHeight = menuRect.height || 400; // fallback to max-height
+            const menuWidth = menuRect.width;
             const viewportHeight = window.innerHeight;
             const viewportWidth = window.innerWidth;
-            const spaceBelow = viewportHeight - triggerRect.bottom - VIEWPORT_PADDING;
-            const spaceAbove = triggerRect.top - VIEWPORT_PADDING;
+            const spaceBelow = viewportHeight - triggerRect.bottom;
+            const spaceAbove = triggerRect.top;
+            const spaceRight = viewportWidth - triggerRect.left;
+            const spaceLeft = triggerRect.right;
             const position = {
-                maxHeight: `${MENU_MAX_HEIGHT}px`,
+                top: "auto",
+                bottom: "auto",
+                left: "auto",
+                right: "auto",
+                maxHeight: "400px",
             };
-            // Vertical positioning: prefer below, flip above if not enough space
+            // Vertical positioning
             if (spaceBelow >= menuHeight || spaceBelow >= spaceAbove) {
+                // Position below trigger
                 position.top = "100%";
                 position.bottom = "auto";
-                position.maxHeight = `${Math.min(MENU_MAX_HEIGHT, Math.max(0, spaceBelow))}px`;
+                position.maxHeight = `${Math.min(400, spaceBelow - 16)}px`;
             }
             else {
+                // Position above trigger
                 position.top = "auto";
                 position.bottom = "100%";
-                position.maxHeight = `${Math.min(MENU_MAX_HEIGHT, Math.max(0, spaceAbove))}px`;
+                position.maxHeight = `${Math.min(400, spaceAbove - 16)}px`;
+            }
+            // Horizontal positioning
+            if (spaceRight >= menuWidth) {
+                // Align to left edge of trigger
+                position.left = "0";
+                position.right = "auto";
+            }
+            else if (spaceLeft >= menuWidth) {
+                // Align to right edge of trigger
+                position.left = "auto";
+                position.right = "0";
+            }
+            else {
+                // Not enough space on either side, try to center or align based on available space
+                if (triggerRect.left + menuWidth > viewportWidth) {
+                    position.left = "auto";
+                    position.right = "0";
+                }
+                else {
+                    position.left = "0";
+                    position.right = "auto";
+                }
             }
-            // Horizontal: clamp menu left so it stays within viewport
-            const minMenuLeft = VIEWPORT_PADDING;
-            const maxMenuLeft = viewportWidth - menuWidth - VIEWPORT_PADDING;
-            const desiredMenuLeft = Math.max(minMenuLeft, Math.min(maxMenuLeft, triggerRect.left));
-            position.left = `${desiredMenuLeft - currentContainerRect.left}px`;
-            position.right = "auto";
             setMenuPosition(position);
         };
-        // Run after layout so menu dimensions are correct (double rAF for paint)
-        let cancelled = false;
-        const scheduleUpdate = () => {
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    if (!cancelled &&
-                        dropdownRef.current &&
-                        menuRef.current) {
-                        calculatePosition();
-                    }
-                });
-            });
-        };
-        scheduleUpdate();
-        const handleResize = () => scheduleUpdate();
-        const handleScroll = () => scheduleUpdate();
+        // Calculate position after menu is rendered
+        calculatePosition();
+        // Recalculate on window resize or scroll
+        const handleResize = () => calculatePosition();
+        const handleScroll = () => calculatePosition();
         window.addEventListener("resize", handleResize);
         window.addEventListener("scroll", handleScroll, true);
         return () => {
-            cancelled = true;
             window.removeEventListener("resize", handleResize);
             window.removeEventListener("scroll", handleScroll, true);
         };
@@ -3353,6 +3313,188 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
 });
 Dropdown.displayName = "Dropdown";
 
+const fileInputVariants = cva("relative flex items-center gap-3 border rounded-large transition-all font-functional font-size-100 leading-100", {
+    variants: {
+        size: {
+            small: "h-[28px] px-3 text-xs gap-2",
+            medium: "h-[36px] px-4 text-sm gap-2",
+            large: "h-[44px] px-5 text-base gap-3",
+        },
+        validationState: {
+            none: `
+        border-action-outline-neutral-faded 
+        focus-within:border-action-outline-primary-default 
+        focus-within:bg-white!
+        focus-within:ring-2 
+        ring-surface-outline-primary-muted`,
+            positive: `
+          border-action-outline-positive-default 
+          focus-within:border-action-outline-positive-hover
+          focus-within:ring-2
+          ring-action-outline-positive-faded-hover`,
+            negative: `border-action-outline-negative-default 
+          focus-within:border-action-outline-negative-hover
+          focus-within:ring-2 
+          ring-action-outline-negative-faded-hover`,
+        },
+        isDisabled: {
+            true: `
+        border
+        border-action-outline-neutral-disabled
+        hover:border-action-outline-neutral-disabled
+        bg-surface-fill-neutral-intense 
+        hover:bg-surface-fill-neutral-intense 
+        cursor-not-allowed`,
+            false: "",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isDisabled: false,
+    },
+});
+const formatFileSize$1 = (bytes) => {
+    if (bytes === 0)
+        return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+};
+const FileInput = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, accept, multiple = false, maxSize, value, onChange, containerClassName, labelClassName, inputClassName, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, buttonText = "Choose File", placeholderText = "No file chosen", showClearButton = true, onClear, className, ...props }, ref) => {
+    const fileInputRef = React.useRef(null);
+    const [selectedFiles, setSelectedFiles] = React.useState([]);
+    const [error, setError] = React.useState(null);
+    // Initialize from value prop
+    React.useEffect(() => {
+        if (value) {
+            const filesArray = Array.isArray(value) ? value : [value];
+            setSelectedFiles(filesArray);
+        }
+        else {
+            setSelectedFiles([]);
+        }
+    }, [value]);
+    const processFiles = (files) => {
+        const fileArray = Array.from(files);
+        const validFiles = [];
+        let currentError = null;
+        fileArray.forEach((file) => {
+            // Check file size
+            if (maxSize && file.size > maxSize) {
+                currentError = `File "${file.name}" exceeds maximum size of ${formatFileSize$1(maxSize)}`;
+                setError(currentError);
+                return;
+            }
+            // Check if file type is accepted
+            if (accept) {
+                const acceptedTypes = accept.split(",").map((type) => type.trim());
+                const isAccepted = acceptedTypes.some((type) => {
+                    if (type.startsWith(".")) {
+                        return file.name.toLowerCase().endsWith(type.toLowerCase());
+                    }
+                    if (type.includes("/*")) {
+                        const baseType = type.split("/")[0];
+                        return file.type.startsWith(baseType + "/");
+                    }
+                    return file.type === type;
+                });
+                if (!isAccepted) {
+                    currentError = `File type "${file.type}" is not accepted`;
+                    setError(currentError);
+                    return;
+                }
+            }
+            validFiles.push(file);
+        });
+        if (currentError) {
+            setError(currentError);
+        }
+        else {
+            setError(null);
+        }
+        return validFiles;
+    };
+    const handleFileInputChange = (e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            const validFiles = processFiles(e.target.files);
+            if (validFiles.length > 0) {
+                const newFiles = multiple
+                    ? [...selectedFiles, ...validFiles]
+                    : validFiles;
+                setSelectedFiles(newFiles);
+                if (onChange) {
+                    onChange(multiple ? newFiles : newFiles[0] || null);
+                }
+            }
+            // Reset input value to allow selecting the same file again
+            e.target.value = "";
+        }
+    };
+    const handleButtonClick = () => {
+        if (!isDisabled && fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+    const handleClear = () => {
+        if (isDisabled)
+            return;
+        setSelectedFiles([]);
+        setError(null);
+        // Clear the file input
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+        if (onClear) {
+            onClear();
+        }
+        if (onChange) {
+            onChange(null);
+        }
+    };
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText || error;
+    const currentValidationState = errorText
+        ? "negative"
+        : successText
+            ? "positive"
+            : validationState;
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+            buttonSize: "xsmall",
+        },
+        medium: {
+            gap: "gap-2",
+            buttonSize: "small",
+        },
+        large: {
+            gap: "gap-3",
+            buttonSize: "small",
+        },
+    };
+    const config = sizeConfig[size];
+    const getDisplayText = () => {
+        if (selectedFiles.length === 0) {
+            return placeholderText;
+        }
+        if (selectedFiles.length === 1) {
+            return selectedFiles[0].name;
+        }
+        return `${selectedFiles.length} file(s) selected`;
+    };
+    const hasFiles = selectedFiles.length > 0;
+    return (jsxs("div", { ref: ref, className: cn("w-full flex flex-col", config.gap, containerClassName), ...props, children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { className: cn(fileInputVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                }), className), children: [jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: multiple, disabled: isDisabled, onChange: handleFileInputChange, className: "hidden", "aria-label": label || "File upload" }), jsx(Link, { type: "action", color: "primary", size: config.buttonSize, onClick: handleButtonClick, isDisabled: isDisabled, className: "shrink-0", children: buttonText }), jsx("div", { className: "flex-1 min-w-0", children: jsx(Text, { variant: "body", size: "small", color: isDisabled ? "disabled" : "muted", className: "truncate", title: getDisplayText(), children: getDisplayText() }) }), showClearButton && hasFiles && !isDisabled && (jsx(IconButton, { icon: "close", size: "xsmall", onClick: handleClear, "aria-label": "Clear selected files", className: "shrink-0" }))] }), jsx(FormFooter, { helperText: displayHelperText || undefined, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+});
+FileInput.displayName = "FileInput";
+
 const Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, children, variant = "default", size = "medium", showCloseButton = true, closeOnOverlayClick = true, closeOnEscape = true, className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
     const modalRef = React.useRef(null);
     const contentRef = ref || modalRef;
@@ -4170,11 +4312,12 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
     const inputRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const VIEWPORT_PADDING = 8;
+    const MENU_MAX_HEIGHT = 400;
+    const MIN_SPACE_TO_OPEN_BELOW = 200;
     const [position, setPosition] = React.useState({
-        top: 0,
         left: 0,
-        width: 0,
-        maxHeight: 400,
+        width: 200,
+        maxHeight: MENU_MAX_HEIGHT,
     });
     // Detect if we're on mobile (< 768px)
     React.useEffect(() => {
@@ -4236,7 +4379,7 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
             }
         }
     }, [isOpen]);
-    // Update position when dropdown opens or window resizes - use viewport coords for portal
+    // Update position when dropdown opens or window resizes - viewport coords, open above if not enough space below
     const updateMenuPosition = React.useCallback(() => {
         if (!dropdownRef.current)
             return;
@@ -4244,14 +4387,26 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         const viewportHeight = window.innerHeight;
         const viewportWidth = window.innerWidth;
         const spaceBelow = viewportHeight - rect.bottom - VIEWPORT_PADDING;
-        const menuTop = rect.bottom + VIEWPORT_PADDING;
-        const menuLeft = Math.max(VIEWPORT_PADDING, Math.min(rect.left, viewportWidth - rect.width - VIEWPORT_PADDING));
-        setPosition({
-            top: menuTop,
-            left: menuLeft,
-            width: rect.width,
-            maxHeight: Math.max(0, Math.min(400, spaceBelow)),
-        });
+        const spaceAbove = rect.top - VIEWPORT_PADDING;
+        const openAbove = spaceBelow < MIN_SPACE_TO_OPEN_BELOW || spaceBelow < spaceAbove;
+        const menuLeft = Math.max(VIEWPORT_PADDING, Math.min(rect.left, viewportWidth - Math.max(rect.width, 200) - VIEWPORT_PADDING));
+        const menuWidth = Math.max(rect.width, 200);
+        if (openAbove) {
+            setPosition({
+                bottom: viewportHeight - rect.top + VIEWPORT_PADDING,
+                left: menuLeft,
+                width: menuWidth,
+                maxHeight: Math.max(120, Math.min(MENU_MAX_HEIGHT, spaceAbove)),
+            });
+        }
+        else {
+            setPosition({
+                top: rect.bottom + VIEWPORT_PADDING,
+                left: menuLeft,
+                width: menuWidth,
+                maxHeight: Math.max(120, Math.min(MENU_MAX_HEIGHT, spaceBelow)),
+            });
+        }
     }, []);
     React.useLayoutEffect(() => {
         if (isOpen) {
@@ -4445,11 +4600,14 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
     // 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"), maxHeight: `${position.maxHeight}px`, unstyled: isMobile, constrainToViewport: 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: {
             position: "fixed",
-            top: `${position.top}px`,
+            ...(position.top !== undefined && { top: `${position.top}px` }),
+            ...(position.bottom !== undefined && {
+                bottom: `${position.bottom}px`,
+            }),
             left: `${position.left}px`,
             width: dropdownWidth === "full" ? `${position.width}px` : "auto",
             zIndex: isInsideModal ? 10001 : 9999,
@@ -6178,5 +6336,5 @@ const UploadBox = React.forwardRef(({ label, helperText, errorText, successText,
 });
 UploadBox.displayName = "UploadBox";
 
-export { Alert, Amount, Avatar, AvatarCell, Badge, BottomSheet, Button, ButtonGroup, Checkbox, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
+export { Alert, Amount, Avatar, AvatarCell, Badge, BottomSheet, Button, ButtonGroup, Checkbox, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FileInput, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, fileInputVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
 //# sourceMappingURL=index.esm.js.map