infinity-ui-elements 1.7.2 → 1.7.4

package/dist/index.js

@@ -115,6 +115,7 @@ const avatarVariants = classVarianceAuthority.cva("inline-flex items-center just
         size: {
             small: "h-[24px] w-[24px] text-body-medium-regular rounded-large",
             medium: "h-[32px] w-[32px] text-body-medium-regular rounded-xlarge",
+            xlarge: "h-[36px] w-[36px] text-body-medium-regular rounded-xlarge",
         },
     },
     defaultVariants: {
@@ -127,6 +128,7 @@ const statusVariants = classVarianceAuthority.cva("absolute flex items-center ju
         size: {
             small: "h-5 w-5 -bottom-0.5 -right-0.5",
             medium: "h-6 w-6 -bottom-1 -right-1",
+            xlarge: "h-6 w-6 -bottom-1 -right-1",
         },
         statusColor: {
             positive: "bg-action-fill-positive-default",
@@ -309,7 +311,7 @@ const buttonVariants = classVarianceAuthority.cva("items-center gap-3 justify-ce
     variants: {
         variant: {
             primary: "bg-action-fill-primary-default text-action-ink-on-primary-normal hover:bg-action-fill-primary-hover",
-            secondary: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            secondary: "border",
             tertiary: "hover:bg-accent hover:text-accent-foreground",
         },
         color: {
@@ -323,8 +325,8 @@ const buttonVariants = classVarianceAuthority.cva("items-center gap-3 justify-ce
         size: {
             xsmall: "md:h-[28px] px-3 rounded-medium text-body-small-medium",
             small: "md:h-[32px] px-4 rounded-medium text-body-small-medium",
-            medium: "md:h-[36px] px-6 py-2 rounded-medium text-body-medium-medium",
-            large: "md:h-[44px] px-6 rounded-xlarge text-body-large-medium",
+            medium: "md:h-[36px] px-5 py-2 rounded-large text-body-medium-medium",
+            large: "md:h-[44px] px-6 rounded-large text-body-large-medium",
         },
         isIconOnly: {
             true: "aspect-square p-0",
@@ -410,7 +412,7 @@ const buttonVariants = classVarianceAuthority.cva("items-center gap-3 justify-ce
             variant: "secondary",
             color: "primary",
             class: `
-          border-action-outline-info-faded 
+          border-action-outline-primary-faded 
           text-action-ink-primary-normal 
           hover:border-action-outline-primary-faded-hover 
           hover:bg-action-fill-primary-faded-hover
@@ -1882,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);
@@ -1921,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) => {
@@ -2021,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" })] }));
 });