infinity-ui-elements 1.8.15 → 1.8.17

package/dist/index.esm.js

@@ -2019,7 +2019,7 @@ const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = fals
 });
 FormHeader.displayName = "FormHeader";
 
-const datePickerVariants = cva("relative flex items-center gap-2 border rounded-large transition-all font-display font-size-100 leading-100", {
+const datePickerVariants = 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",
@@ -2558,7 +2558,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-large transition-all font-display font-size-100 leading-100", {
+const selectVariants = 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",
@@ -3201,7 +3201,7 @@ const defaultFilter = (item, query) => {
     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, 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.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.useState(defaultSearchValue);
     const [isOpen, setIsOpen] = React.useState(false);
     const [focusedIndex, setFocusedIndex] = React.useState(-1);
@@ -3261,9 +3261,9 @@ 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
+    // Add "Add New" option based on showAddNew and showAddNewIfDoesNotMatch props
     const itemsWithAddNew = React.useMemo(() => {
-        if (!showAddNew || !searchValue || filteredItems.length > 0) {
+        if (!showAddNew || !searchValue) {
             return filteredItems;
         }
         const addNewItem = {
@@ -3288,9 +3288,21 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
                 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,
@@ -3429,7 +3441,7 @@ const Skeleton = React.forwardRef(({ className, containerClassName, containerSty
 });
 Skeleton.displayName = "Skeleton";
 
-const selectTriggerVariants = cva("flex items-center gap-1 transition-all font-display font-size-100 leading-100", {
+const selectTriggerVariants = cva("flex items-center gap-1 transition-all font-functional font-size-100 leading-100", {
     variants: {
         size: {
             small: "px-2 text-xs",
@@ -3782,6 +3794,7 @@ const tableVariants = cva("w-full border-collapse", {
             small: "text-body-small-medium",
             medium: "text-body-medium-medium",
             large: "text-body-large-medium",
+            auto: "text-body-medium-medium",
         },
     },
     defaultVariants: {
@@ -3795,6 +3808,7 @@ const tableHeaderVariants = cva("text-body-medium-regular text-left text-surface
             small: "px-3 py-2 h-[32px]",
             medium: "px-4 py-3 h-[40px]",
             large: "px-6 py-4 h-[48px]",
+            auto: "px-4 py-3 h-[56px]",
         },
     },
     defaultVariants: {
@@ -3807,6 +3821,7 @@ const tableCellVariants = cva("text-body-medium-regular border-b border-surface-
             small: "px-3 py-2 h-[40px]",
             medium: "px-4 py-3 h-[72px]",
             large: "px-6 py-4 h-[56px]",
+            auto: "px-4 py-3",
         },
         state: {
             default: "",
@@ -3826,6 +3841,7 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
         small: 32,
         medium: 40,
         large: 48,
+        auto: 56,
     }[size] ?? 40;
     return (jsx("thead", { className: cn(showHeaderBackground ? "bg-surface-fill-neutral-moderate" : "bg-white", stickyHeader && "sticky top-0 z-10"), children: headerGroups.map((headerGroup, groupIndex) => {
             const stickyTop = stickyHeader ? groupIndex * headerHeight : undefined;
@@ -3927,6 +3943,7 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
         small: 16,
         medium: 20,
         large: 24,
+        auto: "auto",
     };
     const skeletonCellHeight = normalizeSizeValue(loadingSkeletonHeight ?? skeletonHeightMap[sizeKey]);
     const selectionSkeletonSize = sizeKey === "small" ? 14 : sizeKey === "large" ? 20 : 16;
@@ -3975,7 +3992,7 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
         return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
     };
     // ==================== Render ====================
-    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsx("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }) }) }));
+    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsx("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size, headerClassName: headerClassName, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }) }) }));
 }
 // ==================== Export ====================
 const Table = React.forwardRef(TableComponent);
@@ -4132,7 +4149,7 @@ const Tabs = React.forwardRef(({ tabs, selectedTabId, defaultSelectedTabId, onTa
 });
 Tabs.displayName = "Tabs";
 
-const textAreaVariants = cva("relative flex flex-col border rounded-large transition-all font-display font-size-100 leading-100", {
+const textAreaVariants = 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",
@@ -4213,7 +4230,7 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
                     size,
                     validationState: currentValidationState,
                     isDisabled,
-                }), className), children: 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 }) }), jsx(FormFooter, { helperText: displayHelperText, trailingText: maxChar && showCharCount ? `${currentLength}/${maxChar}` : undefined, validationState: currentValidationState === "none"
+                }), className), children: 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 }) }), 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"