infinity-ui-elements 1.8.11 → 1.8.13

package/dist/index.esm.js

@@ -3193,7 +3193,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, 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, onAddNew, containerClassName, ...textFieldProps }, ref) => {
     const [uncontrolledSearchValue, setUncontrolledSearchValue] = React.useState(defaultSearchValue);
     const [isOpen, setIsOpen] = React.useState(false);
     const [focusedIndex, setFocusedIndex] = React.useState(-1);
@@ -3260,16 +3260,21 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         }
         const addNewItem = {
             value: searchValue,
-            label: `+ Add ${searchValue}`,
+            label: `+ Add "${searchValue}"`,
             variant: "primary",
             onClick: () => {
-                const newItem = {
-                    value: searchValue,
-                    label: searchValue,
-                };
-                onItemSelect?.(newItem);
-                if (controlledSearchValue === undefined) {
-                    setUncontrolledSearchValue(searchValue);
+                if (onAddNew) {
+                    onAddNew(searchValue);
+                }
+                else {
+                    const newItem = {
+                        value: searchValue,
+                        label: searchValue,
+                    };
+                    onItemSelect?.(newItem);
+                    if (controlledSearchValue === undefined) {
+                        setUncontrolledSearchValue(searchValue);
+                    }
                 }
                 setIsOpen(false);
                 inputRef.current?.focus();
@@ -3281,6 +3286,7 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         searchValue,
         filteredItems,
         onItemSelect,
+        onAddNew,
         controlledSearchValue,
     ]);
     // Reset focused index when items change
@@ -3415,6 +3421,208 @@ 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", {
+    variants: {
+        size: {
+            small: "px-2 text-xs",
+            medium: "px-2 text-sm",
+            large: "px-3 text-base",
+        },
+        validationState: {
+            none: "",
+            positive: "",
+            negative: "",
+        },
+        isDisabled: {
+            true: "opacity-60 cursor-not-allowed",
+            false: "cursor-pointer hover:opacity-80",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isDisabled: false,
+    },
+});
+const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defaultTextValue, onTextChange, selectOptions = [], selectValue: controlledSelectValue, defaultSelectValue, onSelectChange, selectPlaceholder = "Select", selectTriggerClassName, selectMenuClassName, selectMenuWidth = "auto", selectSectionHeading, selectEmptyTitle = "No options available", selectEmptyDescription = "There are no options to select from.", selectEmptyIcon, label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", containerClassName, labelClassName, inputClassName, className, ...textFieldProps }, ref) => {
+    const [uncontrolledTextValue, setUncontrolledTextValue] = React.useState(defaultTextValue || "");
+    const [uncontrolledSelectValue, setUncontrolledSelectValue] = React.useState(defaultSelectValue);
+    const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+    const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
+    const selectRef = React.useRef(null);
+    const dropdownContainerRef = React.useRef(null);
+    const componentRef = React.useRef(null);
+    const textValue = controlledTextValue !== undefined
+        ? controlledTextValue
+        : uncontrolledTextValue;
+    const selectValue = controlledSelectValue !== undefined
+        ? controlledSelectValue
+        : uncontrolledSelectValue;
+    // Find the selected option
+    const selectedOption = selectOptions.find((opt) => opt.value === selectValue);
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText;
+    const currentValidationState = errorText
+        ? "negative"
+        : successText
+            ? "positive"
+            : validationState;
+    const handleTextChange = (e) => {
+        const newValue = e.target.value;
+        if (onTextChange) {
+            onTextChange(newValue);
+        }
+        else {
+            setUncontrolledTextValue(newValue);
+        }
+    };
+    const handleSelectOpenChange = (newOpen) => {
+        if (!isDisabled) {
+            setIsSelectOpen(newOpen);
+        }
+    };
+    const toggleSelectOpen = () => {
+        handleSelectOpenChange(!isSelectOpen);
+    };
+    const handleSelect = (option) => {
+        if (controlledSelectValue === undefined) {
+            setUncontrolledSelectValue(option.value);
+        }
+        onSelectChange?.(option.value, option);
+        setIsSelectOpen(false);
+    };
+    const updateDropdownPlacement = React.useCallback(() => {
+        if (typeof window === "undefined")
+            return;
+        const trigger = selectRef.current;
+        if (!trigger)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        const dropdownHeight = dropdownContainerRef.current
+            ? dropdownContainerRef.current.offsetHeight
+            : 0;
+        if (dropdownHeight === 0) {
+            setDropdownPlacement(spaceBelow >= spaceAbove ? "bottom" : "top");
+            return;
+        }
+        if (spaceBelow >= dropdownHeight || spaceBelow >= spaceAbove) {
+            setDropdownPlacement("bottom");
+        }
+        else {
+            setDropdownPlacement("top");
+        }
+    }, []);
+    const attachDropdownListeners = React.useCallback(() => {
+        if (!isSelectOpen)
+            return;
+        if (typeof window === "undefined")
+            return;
+        let rafId = requestAnimationFrame(updateDropdownPlacement);
+        const handleUpdate = () => updateDropdownPlacement();
+        window.addEventListener("resize", handleUpdate);
+        window.addEventListener("scroll", handleUpdate, true);
+        return () => {
+            cancelAnimationFrame(rafId);
+            window.removeEventListener("resize", handleUpdate);
+            window.removeEventListener("scroll", handleUpdate, true);
+        };
+    }, [isSelectOpen, updateDropdownPlacement]);
+    React.useEffect(() => {
+        const detach = attachDropdownListeners();
+        return () => {
+            detach?.();
+        };
+    }, [attachDropdownListeners]);
+    React.useEffect(() => {
+        if (isSelectOpen) {
+            updateDropdownPlacement();
+        }
+    }, [isSelectOpen, selectOptions.length, updateDropdownPlacement]);
+    // Close dropdown when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            if (selectRef.current &&
+                !selectRef.current.contains(target) &&
+                dropdownContainerRef.current &&
+                !dropdownContainerRef.current.contains(target)) {
+                handleSelectOpenChange(false);
+            }
+        };
+        if (isSelectOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [isSelectOpen]);
+    // Close on escape key
+    React.useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                handleSelectOpenChange(false);
+            }
+        };
+        if (isSelectOpen) {
+            document.addEventListener("keydown", handleEscape);
+            return () => {
+                document.removeEventListener("keydown", handleEscape);
+            };
+        }
+    }, [isSelectOpen]);
+    // Transform options to dropdown menu items
+    const menuItems = selectOptions.map((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 = selectMenuWidth === "full"
+        ? "100%"
+        : selectMenuWidth === "auto"
+            ? "auto"
+            : selectMenuWidth;
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+        },
+        medium: {
+            gap: "gap-2",
+        },
+        large: {
+            gap: "gap-3",
+        },
+    };
+    // Create the select suffix component
+    const selectSuffix = (jsxs("div", { className: "relative flex items-center h-full", children: [jsxs("div", { ref: selectRef, className: cn(selectTriggerVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                }), "border-l border-action-outline-neutral-faded pl-2 ml-2 h-full flex items-center", selectTriggerClassName), onClick: !isDisabled ? toggleSelectOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isSelectOpen, "aria-disabled": isDisabled, children: [jsx("span", { className: cn("text-left truncate max-w-[120px] whitespace-nowrap", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: selectedOption?.label || selectPlaceholder }), jsx(ChevronDown, { className: cn("shrink-0 transition-transform", size === "small"
+                            ? "w-3 h-3"
+                            : size === "medium"
+                                ? "w-3.5 h-3.5"
+                                : "w-4 h-4", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : currentValidationState === "positive"
+                                ? "text-feedback-ink-positive-intense"
+                                : currentValidationState === "negative"
+                                    ? "text-feedback-ink-negative-subtle"
+                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 right-0", dropdownPlacement === "bottom"
+                    ? "top-full mt-1"
+                    : "bottom-full mb-1"), children: jsx(DropdownMenu, { items: menuItems, sectionHeading: selectSectionHeading, isEmpty: selectOptions.length === 0, emptyTitle: selectEmptyTitle, emptyDescription: selectEmptyDescription, emptyIcon: selectEmptyIcon, disableFooter: true, onClose: () => handleSelectOpenChange(false), className: selectMenuClassName, width: widthStyle }) }))] }));
+    return (jsxs("div", { ref: componentRef, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: textFieldProps.infoHeading, infoDescription: textFieldProps.infoDescription, LinkComponent: textFieldProps.LinkComponent, linkText: textFieldProps.linkText, linkHref: textFieldProps.linkHref, onLinkClick: textFieldProps.onLinkClick, htmlFor: textFieldProps.id, className: "mb-2", labelClassName: labelClassName })), jsx(TextField, { ref: ref, value: textValue, onChange: handleTextChange, suffix: selectSuffix, size: size, validationState: currentValidationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, containerClassName: "gap-0", className: className, inputClassName: inputClassName, ...textFieldProps }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+});
+SelectTextField.displayName = "SelectTextField";
+
 const switchVariants = cva("relative inline-flex items-center shrink-0 cursor-pointer rounded-full transition-all duration-200", {
     variants: {
         size: {
@@ -4007,5 +4215,5 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextArea.displayName = "TextArea";
 
-export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
+export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, SelectTextField, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
 //# sourceMappingURL=index.esm.js.map