infinity-ui-elements 1.8.45 → 1.8.46

package/dist/index.esm.js

@@ -2604,18 +2604,18 @@ const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, ti
 });
 ListItem.displayName = "ListItem";
 
-const DropdownMenu = React.forwardRef(({ items = [], customContent, 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", }, ref) => {
+const DropdownMenu = React.forwardRef(({ items = [], customContent, 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 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 max-h-[400px] overflow-y-auto", 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", { className: "px-1", children: customContent })] }));
+            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-body-small-medium text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "px-1", 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 max-h-[400px] overflow-y-auto", 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))) })] }));
@@ -2647,6 +2647,14 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
     const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
     const dropdownRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const [menuPosition, setMenuPosition] = React.useState({
+        top: "100%",
+        bottom: "auto",
+        left: "0",
+        right: "auto",
+        maxHeight: "400px",
+    });
     const handleOpenChange = (newOpen) => {
         if (controlledOpen === undefined) {
             setUncontrolledOpen(newOpen);
@@ -2685,12 +2693,92 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
             };
         }
     }, [isOpen]);
+    // Calculate and adjust dropdown position to keep it within viewport
+    React.useEffect(() => {
+        if (!isOpen || !dropdownRef.current || !menuRef.current)
+            return;
+        const calculatePosition = () => {
+            const triggerRect = dropdownRef.current.getBoundingClientRect();
+            const menuElement = menuRef.current;
+            // Get menu dimensions (use a temporary measurement if needed)
+            const menuRect = menuElement.getBoundingClientRect();
+            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;
+            const spaceAbove = triggerRect.top;
+            const spaceRight = viewportWidth - triggerRect.left;
+            const spaceLeft = triggerRect.right;
+            const position = {
+                top: "auto",
+                bottom: "auto",
+                left: "auto",
+                right: "auto",
+                maxHeight: "400px",
+            };
+            // Vertical positioning
+            if (spaceBelow >= menuHeight || spaceBelow >= spaceAbove) {
+                // Position below trigger
+                position.top = "100%";
+                position.bottom = "auto";
+                position.maxHeight = `${Math.min(400, spaceBelow - 16)}px`;
+            }
+            else {
+                // Position above trigger
+                position.top = "auto";
+                position.bottom = "100%";
+                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";
+                }
+            }
+            setMenuPosition(position);
+        };
+        // 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 () => {
+            window.removeEventListener("resize", handleResize);
+            window.removeEventListener("scroll", handleScroll, true);
+        };
+    }, [isOpen]);
     const sizeMap = {
         small: "w-64",
         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(DropdownMenu, { ref: ref, items: items, customContent: customContent, 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: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
+    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: {
+                    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, 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 }) }))] }));
 });
 Dropdown.displayName = "Dropdown";