infinity-ui-elements 1.8.15 → 1.8.16

package/dist/index.js

@@ -2040,7 +2040,7 @@ const FormHeader = React__namespace.forwardRef(({ label, size = "medium", isOpti
 });
 FormHeader.displayName = "FormHeader";
 
-const datePickerVariants = classVarianceAuthority.cva("relative flex items-center gap-2 border rounded-large transition-all font-display font-size-100 leading-100", {
+const datePickerVariants = classVarianceAuthority.cva("relative flex items-center gap-2 border rounded-large transition-all font-functional font-size-100 leading-100", {
     variants: {
         size: {
             small: "h-[28px] px-3 text-xs gap-2",
@@ -2579,7 +2579,7 @@ const Modal = React__namespace.forwardRef(({ isOpen, onClose, title, description
 });
 Modal.displayName = "Modal";
 
-const selectVariants = classVarianceAuthority.cva("relative flex items-center gap-2 border rounded-large transition-all font-display font-size-100 leading-100", {
+const selectVariants = classVarianceAuthority.cva("relative flex items-center gap-2 border rounded-large transition-all font-functional font-size-100 leading-100", {
     variants: {
         size: {
             small: "h-[28px] px-3 text-xs gap-2",
@@ -3222,7 +3222,7 @@ const defaultFilter = (item, query) => {
     return (item.label.toLowerCase().includes(searchQuery) ||
         (item.description?.toLowerCase().includes(searchQuery) ?? false));
 };
-const SearchableDropdown = React__namespace.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, onAddNew, containerClassName, ...textFieldProps }, ref) => {
+const SearchableDropdown = React__namespace.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, showAddNewIfDoesNotMatch = true, onAddNew, containerClassName, ...textFieldProps }, ref) => {
     const [uncontrolledSearchValue, setUncontrolledSearchValue] = React__namespace.useState(defaultSearchValue);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const [focusedIndex, setFocusedIndex] = React__namespace.useState(-1);
@@ -3282,9 +3282,9 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
             return items;
         return items.filter((item) => filterFunction(item, searchValue));
     }, [items, searchValue, filterFunction]);
-    // Add "Add New" option if showAddNew is true and no items match
+    // Add "Add New" option based on showAddNew and showAddNewIfDoesNotMatch props
     const itemsWithAddNew = React__namespace.useMemo(() => {
-        if (!showAddNew || !searchValue || filteredItems.length > 0) {
+        if (!showAddNew || !searchValue) {
             return filteredItems;
         }
         const addNewItem = {
@@ -3309,9 +3309,21 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
                 inputRef.current?.focus();
             },
         };
-        return [addNewItem];
+        // If showAddNewIfDoesNotMatch is true, only show "Add New" when no items match
+        // If false, always show "Add New" at the top
+        if (showAddNewIfDoesNotMatch) {
+            if (filteredItems.length > 0) {
+                return filteredItems;
+            }
+            return [addNewItem];
+        }
+        else {
+            // Always show "Add New" at the top
+            return [addNewItem, ...filteredItems];
+        }
     }, [
         showAddNew,
+        showAddNewIfDoesNotMatch,
         searchValue,
         filteredItems,
         onItemSelect,
@@ -3450,7 +3462,7 @@ const Skeleton = React__namespace.forwardRef(({ className, containerClassName, c
 });
 Skeleton.displayName = "Skeleton";
 
-const selectTriggerVariants = classVarianceAuthority.cva("flex items-center gap-1 transition-all font-display font-size-100 leading-100", {
+const selectTriggerVariants = classVarianceAuthority.cva("flex items-center gap-1 transition-all font-functional font-size-100 leading-100", {
     variants: {
         size: {
             small: "px-2 text-xs",
@@ -4153,7 +4165,7 @@ const Tabs = React__namespace.forwardRef(({ tabs, selectedTabId, defaultSelected
 });
 Tabs.displayName = "Tabs";
 
-const textAreaVariants = classVarianceAuthority.cva("relative flex flex-col border rounded-large transition-all font-display font-size-100 leading-100", {
+const textAreaVariants = classVarianceAuthority.cva("relative flex flex-col border rounded-large transition-all font-functional font-size-100 leading-100", {
     variants: {
         size: {
             small: "p-3 min-h-[56px] text-xs gap-2",
@@ -4234,7 +4246,7 @@ const TextArea = React__namespace.forwardRef(({ label, helperText, errorText, su
                     size,
                     validationState: currentValidationState,
                     isDisabled,
-                }), className), children: jsxRuntime.jsx("textarea", { ref: ref, value: textAreaValue, onChange: handleChange, disabled: isDisabled, required: isRequired, rows: rows, className: cn("flex-1 bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled font-display resize-none", size === "small" && "text-xs", size === "medium" && "text-sm", size === "large" && "text-base", textAreaClassName), ...props }) }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, trailingText: maxChar && showCharCount ? `${currentLength}/${maxChar}` : undefined, validationState: currentValidationState === "none"
+                }), className), children: jsxRuntime.jsx("textarea", { ref: ref, value: textAreaValue, onChange: handleChange, disabled: isDisabled, required: isRequired, rows: rows, className: cn("flex-1 bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled resize-none", size === "small" && "text-xs", size === "medium" && "text-sm", size === "large" && "text-base", textAreaClassName), ...props }) }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, trailingText: maxChar && showCharCount ? `${currentLength}/${maxChar}` : undefined, validationState: currentValidationState === "none"
                     ? "default"
                     : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1", trailingTextClassName: cn("transition-colors", isAtLimit
                     ? "text-feedback-ink-negative-subtle"