infinity-ui-elements 1.8.3 → 1.8.5

package/dist/index.esm.js

@@ -1372,17 +1372,17 @@ const FormFooter = React.forwardRef(({ helperText, trailingText, validationState
     // Size-based configurations
     const sizeConfig = {
         small: {
-            textSize: "xsmall",
+            textClassName: "text-caption-small-regular",
             iconSize: 12,
             gap: "gap-1",
         },
         medium: {
-            textSize: "small",
+            textClassName: "text-caption-medium-regular",
             iconSize: 14,
             gap: "gap-1",
         },
         large: {
-            textSize: "medium",
+            textClassName: "text-caption-large-regular",
             iconSize: 16,
             gap: "gap-1.5",
         },
@@ -1391,20 +1391,22 @@ const FormFooter = React.forwardRef(({ helperText, trailingText, validationState
     // Determine text color based on validation state and disabled state
     const getTextColor = () => {
         if (isDisabled)
-            return "disabled";
+            return "text-surface-ink-neutral-disabled";
         if (validationState === "positive")
-            return "positive";
+            return "text-feedback-ink-positive-intense";
         if (validationState === "negative")
-            return "negative";
+            return "text-feedback-ink-negative-subtle";
         if (validationState === "default")
-            return "default";
-        return "default";
+            return "text-surface-ink-neutral-subtle";
+        return "text-surface-ink-neutral-subtle";
     };
+    const helperTextColorClass = getTextColor();
+    const trailingTextColorClass = getTextColor();
     // Don't render anything if there's no content
     if (!helperText && !trailingText) {
         return null;
     }
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [helperText && (jsxs("div", { className: cn("flex items-center", config.gap), children: [validationState === "positive" && (jsx("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-positive-intense shrink-0", children: jsx("path", { d: "M3 7L6 10L11 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })), validationState === "negative" && (jsxs("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-negative-subtle shrink-0", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 4V7.5M7 10V9.5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] })), jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", color: getTextColor(), className: cn("italic font-size-100 leading-100", helperTextClassName), children: helperText })] })), trailingText && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", color: isDisabled ? "disabled" : "muted", className: cn("font-size-100 leading-100 shrink-0", trailingTextClassName), children: trailingText }))] }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [helperText && (jsxs("div", { className: cn("flex items-center", config.gap), children: [validationState === "positive" && (jsx("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-positive-intense shrink-0", children: jsx("path", { d: "M3 7L6 10L11 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })), validationState === "negative" && (jsxs("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-negative-subtle shrink-0", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 4V7.5M7 10V9.5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] })), jsx("span", { className: cn(config.textClassName, helperTextColorClass, "italic font-size-100 leading-100", helperTextClassName), children: helperText })] })), trailingText && (jsx("span", { className: cn(config.textClassName, trailingTextColorClass, "font-size-100 leading-100 shrink-0", trailingTextClassName), children: trailingText }))] }));
 });
 FormFooter.displayName = "FormFooter";
 
@@ -1542,7 +1544,7 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
         },
         medium: {
             gap: "gap-2.5",
-            labelSize: "text-body-medium-regular",
+            labelSize: "text-body-small-regular",
             iconSize: 12,
         },
         large: {
@@ -1868,10 +1870,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;
@@ -2181,23 +2183,26 @@ const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = fals
     // Size-based configurations
     const sizeConfig = {
         small: {
-            textSize: "xsmall",
+            textClassName: "text-body-xsmall-semibold",
+            textClassNameRegular: "text-caption-small-regular",
             iconSize: 12,
             gap: "gap-1.5",
         },
         medium: {
-            textSize: "small",
+            textClassName: "text-body-small-semibold",
+            textClassNameRegular: "text-caption-medium-regular",
             iconSize: 14,
             gap: "gap-2",
         },
         large: {
-            textSize: "medium",
+            textClassName: "text-body-medium-semibold",
+            textClassNameRegular: "text-caption-large-regular",
             iconSize: 16,
             gap: "gap-2.5",
         },
     };
     const config = sizeConfig[size];
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [jsxs("div", { className: cn("flex items-center", config.gap), children: [jsxs("label", { htmlFor: htmlFor, className: cn("flex items-center", labelClassName), children: [jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "semibold", color: "subtle", children: label }), isRequired && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "semibold", color: "negative", className: "ml-0.5", children: "*" })), isOptional && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", className: "text-surface-ink-neutral-muted italic ml-1", children: "(optional)" }))] }), infoDescription && (jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsxs("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-surface-ink-neutral-muted", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 6V10M7 4.5V4", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }) }))] }), linkText && (jsx("a", { href: linkHref, onClick: onLinkClick, className: cn("text-surface-ink-primary-normal hover:text-surface-ink-primary-hover transition-colors cursor-pointer font-display font-semibold leading-tight shrink-0", size === "small" && "text-xs", size === "medium" && "text-xs", size === "large" && "text-sm", linkClassName), children: linkText }))] }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [jsxs("div", { className: cn("flex items-center", config.gap), children: [jsxs("label", { htmlFor: htmlFor, className: cn("flex items-center", labelClassName), children: [jsx("span", { className: cn(config.textClassName, "text-surface-neutral-subtle"), children: label }), isRequired && (jsx("span", { className: cn(config.textClassName, "text-color-negative ml-0.5"), children: "*" })), isOptional && (jsx("span", { className: cn(config.textClassNameRegular, "text-surface-neutral-muted italic ml-1"), children: "(optional)" }))] }), infoDescription && (jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsx(Icon, { name: "info", size: config.iconSize }) }))] }), linkText && (jsx(Link, { href: linkHref, onClick: onLinkClick, type: "action", color: "primary", size: size === "large" ? "small" : "xsmall", children: linkText }))] }));
 });
 FormHeader.displayName = "FormHeader";
 
@@ -2249,7 +2254,7 @@ const Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, c
 });
 Modal.displayName = "Modal";
 
-const selectVariants = cva("relative flex items-center gap-2 border rounded-medium transition-all font-display font-size-100 leading-100", {
+const selectVariants = cva("relative flex items-center gap-2 border rounded-large transition-all font-display font-size-100 leading-100", {
     variants: {
         size: {
             small: "h-[28px] px-3 text-xs gap-2",
@@ -2442,7 +2447,13 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
     }, [isOpen, value, options, isDisabled, isLoading]);
     // Transform options to dropdown menu items
     const menuItems = options.map((option) => ({
-        ...option,
+        value: option.value,
+        label: option.label ?? String(option.value),
+        description: option.description,
+        leadingIcon: option.leadingIcon,
+        trailingIcon: option.trailingIcon,
+        isDisabled: option.isDisabled,
+        variant: option.variant,
         onClick: () => handleSelect(option),
     }));
     const widthStyle = menuWidth === "full" ? "100%" : menuWidth === "auto" ? "auto" : menuWidth;
@@ -2467,9 +2478,7 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsx("span", { className: cn("flex-1 text-left truncate", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: isLoading
-                            ? "Loading..."
-                            : selectedOption?.label || selectedOption?.title || placeholder }), showClearButton && hasValue && !isDisabled && !isLoading && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && !showClearButton && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsx("span", { className: cn("flex-1 text-left truncate", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: isLoading ? "Loading..." : selectedOption?.label || placeholder }), showClearButton && hasValue && !isDisabled && !isLoading && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && !showClearButton && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
@@ -2885,10 +2894,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 +2946,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 +2957,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 +3020,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 +3028,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 +3040,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 +3052,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)] }));