infinity-ui-elements 1.8.2 → 1.8.4

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { PulseLoader, ClipLoader } from 'react-spinners';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { ExternalLink, Loader2, Search, X, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ExternalLink, Loader2, Search, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { flexRender } from '@tanstack/react-table';
 
@@ -1868,10 +1868,10 @@ const DropdownMenu = React.forwardRef(({ items = [], customContent, sectionHeadi
         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.title, description: item.description, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, showChevron: showChevron, isDisabled: item.isDisabled, isSelected: index === focusedIndex, onClick: () => {
+        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: () => {
                             item.onClick?.();
                             onClose?.();
-                        }, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.id))) })] }));
+                        }, 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;
@@ -2213,7 +2213,7 @@ const Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, c
     };
     // Handle escape key
     React.useEffect(() => {
-        if (!isOpen || !closeOnEscape)
+        if (!isOpen || !closeOnEscape || !onClose)
             return;
         const handleEscape = (e) => {
             if (e.key === "Escape") {
@@ -2237,7 +2237,7 @@ const Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, c
     }, [isOpen]);
     // Handle overlay click
     const handleOverlayClick = (e) => {
-        if (closeOnOverlayClick && e.target === e.currentTarget) {
+        if (closeOnOverlayClick && e.target === e.currentTarget && onClose) {
             onClose();
         }
     };
@@ -2245,7 +2245,7 @@ const Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, c
     if (!isOpen)
         return null;
     const hasHeader = title || description;
-    return (jsxs("div", { className: cn("fixed inset-0 z-50 flex items-center justify-center p-4", 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", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative w-full bg-white rounded-large shadow-xl transition-all", "flex flex-col max-h-[90vh]", sizeConfig[size], contentClassName), children: [hasHeader && (jsxs("div", { className: cn("flex items-start justify-between gap-4 px-6 pt-6", !description && "pb-4", description && "pb-2", headerClassName), children: [jsxs("div", { className: "flex-1", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && (jsx("button", { type: "button", onClick: onClose, className: cn("shrink-0 rounded-medium p-1.5 transition-colors", "text-surface-ink-neutral-muted hover:text-surface-ink-neutral-default", "hover:bg-surface-fill-neutral-faded focus:outline-none focus:ring-2", "focus:ring-action-outline-primary-default focus:ring-offset-2"), "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] })), !hasHeader && showCloseButton && (jsx("div", { className: "absolute top-4 right-4 z-10", children: jsx("button", { type: "button", onClick: onClose, className: cn("shrink-0 rounded-medium p-1.5 transition-colors", "text-surface-ink-neutral-muted hover:text-surface-ink-neutral-default", "hover:bg-surface-fill-neutral-faded focus:outline-none focus:ring-2", "focus:ring-action-outline-primary-default focus:ring-offset-2"), "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }) })), jsx("div", { className: cn("flex-1 overflow-y-auto px-6", hasHeader ? "py-4" : "pt-6 pb-4", !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col", 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-50 flex items-center justify-center p-4", 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", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative w-full bg-white rounded-large shadow-xl transition-all", "flex flex-col max-h-[90vh]", sizeConfig[size], contentClassName), children: [hasHeader && (jsxs("div", { className: cn("flex items-start justify-between gap-4 px-6 pt-6", !description && "pb-4", description && "pb-2", headerClassName), children: [jsxs("div", { className: "flex-1", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close modal", className: "shrink-0" }))] })), !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 modal" }) })), jsx("div", { className: cn("flex-1 overflow-y-auto px-6", hasHeader ? "py-4" : "pt-6 pb-4", !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col", 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 })] }))] })] }));
 });
 Modal.displayName = "Modal";
 
@@ -2885,10 +2885,10 @@ TextField.displayName = "TextField";
 
 const defaultFilter = (item, query) => {
     const searchQuery = query.toLowerCase();
-    return (item.title.toLowerCase().includes(searchQuery) ||
+    return (item.label.toLowerCase().includes(searchQuery) ||
         (item.description?.toLowerCase().includes(searchQuery) ?? false));
 };
-const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHeading, isLoading = 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, dropdownWidth = "full", showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onSearchChange, onItemSelect, filterFunction = defaultFilter, searchValue: controlledSearchValue, defaultSearchValue = "", dropdownClassName, minSearchLength = 0, showOnFocus = true, containerClassName, ...textFieldProps }, ref) => {
+const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHeading, isLoading = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText, secondaryButtonText, onPrimaryClick, onSecondaryClick, dropdownWidth = "full", showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onSearchChange, onItemSelect, filterFunction = defaultFilter, searchValue: controlledSearchValue, defaultSearchValue = "", dropdownClassName, minSearchLength = 0, showOnFocus = true, showAddNew = false, containerClassName, ...textFieldProps }, ref) => {
     const [uncontrolledSearchValue, setUncontrolledSearchValue] = React.useState(defaultSearchValue);
     const [isOpen, setIsOpen] = React.useState(false);
     const [focusedIndex, setFocusedIndex] = React.useState(-1);
@@ -2937,7 +2937,7 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
     const handleItemSelect = (item) => {
         onItemSelect?.(item);
         if (controlledSearchValue === undefined) {
-            setUncontrolledSearchValue(item.title);
+            setUncontrolledSearchValue(item.label);
         }
         setIsOpen(false);
         inputRef.current?.focus();
@@ -2948,6 +2948,40 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
             return items;
         return items.filter((item) => filterFunction(item, searchValue));
     }, [items, searchValue, filterFunction]);
+    // Add "Add New" option if showAddNew is true and no items match
+    const itemsWithAddNew = React.useMemo(() => {
+        if (!showAddNew || !searchValue || filteredItems.length > 0) {
+            return filteredItems;
+        }
+        const addNewItem = {
+            value: searchValue,
+            label: `+ Add ${searchValue}`,
+            variant: "primary",
+            onClick: () => {
+                const newItem = {
+                    value: searchValue,
+                    label: searchValue,
+                };
+                onItemSelect?.(newItem);
+                if (controlledSearchValue === undefined) {
+                    setUncontrolledSearchValue(searchValue);
+                }
+                setIsOpen(false);
+                inputRef.current?.focus();
+            },
+        };
+        return [addNewItem];
+    }, [
+        showAddNew,
+        searchValue,
+        filteredItems,
+        onItemSelect,
+        controlledSearchValue,
+    ]);
+    // Reset focused index when items change
+    React.useEffect(() => {
+        setFocusedIndex(-1);
+    }, [itemsWithAddNew.length]);
     // Close dropdown when clicking outside
     React.useEffect(() => {
         const handleClickOutside = (event) => {
@@ -2977,7 +3011,7 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         switch (e.key) {
             case "ArrowDown":
                 e.preventDefault();
-                setFocusedIndex((prev) => prev < filteredItems.length - 1 ? prev + 1 : prev);
+                setFocusedIndex((prev) => prev < itemsWithAddNew.length - 1 ? prev + 1 : prev);
                 break;
             case "ArrowUp":
                 e.preventDefault();
@@ -2985,8 +3019,8 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
                 break;
             case "Enter":
                 e.preventDefault();
-                if (focusedIndex >= 0 && filteredItems[focusedIndex]) {
-                    handleItemSelect(filteredItems[focusedIndex]);
+                if (focusedIndex >= 0 && itemsWithAddNew[focusedIndex]) {
+                    handleItemSelect(itemsWithAddNew[focusedIndex]);
                 }
                 break;
             case "Escape":
@@ -2997,9 +3031,10 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         }
     };
     // Update items with onClick handlers that call handleItemSelect
-    const itemsWithHandlers = filteredItems.map((item) => ({
+    // Only add onClick if it doesn't already exist (for Add New items)
+    const itemsWithHandlers = itemsWithAddNew.map((item) => ({
         ...item,
-        onClick: () => handleItemSelect(item),
+        onClick: item.onClick || (() => handleItemSelect(item)),
     }));
     const showDropdown = isOpen && searchValue.length >= minSearchLength;
     const dropdownMenu = showDropdown && (jsx("div", { ref: menuRef, style: {
@@ -3008,7 +3043,9 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
             left: `${position.left}px`,
             width: dropdownWidth === "full" ? `${position.width}px` : "auto",
             zIndex: 9999,
-        }, children: jsx(DropdownMenu, { items: itemsWithHandlers, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: filteredItems.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: dropdownWidth === "full" ? "full" : "auto" }) }));
+        }, children: 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: dropdownWidth === "full" ? "full" : "auto" }) }));
     return (jsxs(Fragment, { children: [jsx("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps }) }), typeof document !== "undefined" &&
                 dropdownMenu &&
                 createPortal(dropdownMenu, document.body)] }));