infinity-ui-elements 1.8.44 → 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";
 
@@ -3803,6 +3891,8 @@ SearchableDropdown.displayName = "SearchableDropdown";
 const SidePanel = React.forwardRef(({ isOpen, onClose, title, titleIcon, description, footer, children, position = "right", width = "medium", showCloseButton = true, headerActions, closeOnOverlayClick = true, closeOnEscape = true, className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
     const panelRef = React.useRef(null);
     const contentRef = ref || panelRef;
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [shouldRender, setShouldRender] = React.useState(false);
     // Width configurations
     const widthConfig = {
         small: "w-80",
@@ -3810,15 +3900,33 @@ const SidePanel = React.forwardRef(({ isOpen, onClose, title, titleIcon, descrip
         large: "w-[32rem]",
         xlarge: "w-[40rem]",
     };
+    // Handle mounting and unmounting with animation
+    React.useEffect(() => {
+        if (isOpen) {
+            setShouldRender(true);
+            // Small delay to trigger animation
+            requestAnimationFrame(() => {
+                setIsVisible(true);
+            });
+        }
+        else {
+            setIsVisible(false);
+            // Wait for animation to complete before unmounting
+            const timer = setTimeout(() => {
+                setShouldRender(false);
+            }, 300); // Match animation duration
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen]);
     // Position-based classes
     const positionClasses = {
         left: {
             container: "justify-start",
-            panel: isOpen ? "animate-slide-in-left" : "animate-slide-out-left",
+            panel: isVisible ? "animate-slide-in-left" : "animate-slide-out-left",
         },
         right: {
             container: "justify-end",
-            panel: isOpen ? "animate-slide-in-right" : "animate-slide-out-right",
+            panel: isVisible ? "animate-slide-in-right" : "animate-slide-out-right",
         },
     };
     // Handle escape key
@@ -3851,14 +3959,14 @@ const SidePanel = React.forwardRef(({ isOpen, onClose, title, titleIcon, descrip
             onClose();
         }
     };
-    // Don't render if not open
-    if (!isOpen)
+    // Don't render if not open and animation is complete
+    if (!shouldRender)
         return null;
     const hasHeader = title || description;
     const widthClass = width in widthConfig
         ? widthConfig[width]
         : width;
-    return (jsxs("div", { className: cn("fixed inset-0 z-10000 flex items-stretch", 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", isOpen ? "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", "flex flex-col h-full max-w-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-10000 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 h-full overflow-hidden", 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";