infinity-ui-elements 1.7.3 → 1.7.4

package/dist/index.js

@@ -1884,7 +1884,9 @@ const selectVariants = classVarianceAuthority.cva("relative flex items-center ga
 const Select = React__namespace.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, linkText, linkHref, onLinkClick, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
+    const [dropdownPlacement, setDropdownPlacement] = React__namespace.useState("bottom");
     const selectRef = React__namespace.useRef(null);
+    const dropdownContainerRef = React__namespace.useRef(null);
     const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
     // Find the selected option
     const selectedOption = options.find((opt) => opt.value === value);
@@ -1923,6 +1925,55 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
             onChange?.("", {});
         }
     };
+    const updateDropdownPlacement = React__namespace.useCallback(() => {
+        if (typeof window === "undefined")
+            return;
+        const trigger = selectRef.current;
+        if (!trigger)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        const dropdownHeight = dropdownContainerRef.current
+            ? dropdownContainerRef.current.offsetHeight
+            : 0;
+        if (dropdownHeight === 0) {
+            setDropdownPlacement(spaceBelow >= spaceAbove ? "bottom" : "top");
+            return;
+        }
+        if (spaceBelow >= dropdownHeight || spaceBelow >= spaceAbove) {
+            setDropdownPlacement("bottom");
+        }
+        else {
+            setDropdownPlacement("top");
+        }
+    }, []);
+    const attachDropdownListeners = React__namespace.useCallback(() => {
+        if (!isOpen)
+            return;
+        if (typeof window === "undefined")
+            return;
+        let rafId = requestAnimationFrame(updateDropdownPlacement);
+        const handleUpdate = () => updateDropdownPlacement();
+        window.addEventListener("resize", handleUpdate);
+        window.addEventListener("scroll", handleUpdate, true);
+        return () => {
+            cancelAnimationFrame(rafId);
+            window.removeEventListener("resize", handleUpdate);
+            window.removeEventListener("scroll", handleUpdate, true);
+        };
+    }, [isOpen, updateDropdownPlacement]);
+    React__namespace.useEffect(() => {
+        const detach = attachDropdownListeners();
+        return () => {
+            detach?.();
+        };
+    }, [attachDropdownListeners]);
+    React__namespace.useEffect(() => {
+        if (isOpen) {
+            updateDropdownPlacement();
+        }
+    }, [isOpen, options.length, updateDropdownPlacement]);
     // Close dropdown when clicking outside
     React__namespace.useEffect(() => {
         const handleClickOutside = (event) => {
@@ -2023,7 +2074,9 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted", isOpen && "transform rotate-180") }), isOpen && !isDisabled && !isLoading && (jsxRuntime.jsx("div", { className: "absolute z-50 left-0 right-0 top-full mt-1", children: jsxRuntime.jsx(DropdownMenu, { ref: ref, items: menuItems, sectionHeading: sectionHeading, isEmpty: options.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyIcon: emptyIcon, disableFooter: true, onClose: () => handleOpenChange(false), className: menuClassName, width: widthStyle }) }))] }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                                    : "text-surface-ink-neutral-muted", isOpen && "transform rotate-180") }), isOpen && !isDisabled && !isLoading && (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
+                            ? "top-full mt-1"
+                            : "bottom-full mb-1"), children: jsxRuntime.jsx(DropdownMenu, { ref: ref, items: menuItems, sectionHeading: sectionHeading, isEmpty: options.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyIcon: emptyIcon, disableFooter: true, onClose: () => handleOpenChange(false), className: menuClassName, width: widthStyle }) }))] }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
                     ? "default"
                     : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
 });