xmlui 0.10.19 → 0.10.21

package/dist/scripts/src/components/Select/SelectNative.js

@@ -1,37 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -47,16 +14,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboboxOption = exports.Select = exports.defaultProps = void 0;
+exports.Select = exports.defaultProps = void 0;
 const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = __importStar(require("react"));
+const react_2 = require("react");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const react_select_1 = require("@radix-ui/react-select");
 const react_popover_1 = require("@radix-ui/react-popover");
-const cmdk_1 = require("cmdk");
 const classnames_1 = __importDefault(require("classnames"));
 const react_focus_scope_1 = require("@radix-ui/react-focus-scope");
+const SelectOption_1 = require("./SelectOption");
 const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
 const constants_1 = require("../../components-core/constants");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
@@ -67,6 +33,8 @@ const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvid
 const OptionContext_1 = require("./OptionContext");
 const HiddenOption_1 = require("./HiddenOption");
 const FormContext_1 = require("../Form/FormContext");
+const SimpleSelect_1 = require("./SimpleSelect");
+const MultiSelectOption_1 = require("./MultiSelectOption");
 exports.defaultProps = {
     enabled: true,
     placeholder: "",
@@ -80,40 +48,39 @@ exports.defaultProps = {
     validationStatus: "none",
     labelBreak: false,
 };
-const SimpleSelect = (0, react_2.forwardRef)(function SimpleSelect(props, forwardedRef) {
-    const { root } = (0, ThemeContext_1.useTheme)();
-    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, value, height, style, placeholder, id, triggerRef, onFocus, width, children, readOnly, emptyListNode, className } = props, rest = __rest(props, ["enabled", "onBlur", "autoFocus", "onValueChange", "validationStatus", "value", "height", "style", "placeholder", "id", "triggerRef", "onFocus", "width", "children", "readOnly", "emptyListNode", "className"]);
-    const { options } = (0, SelectContext_1.useSelect)();
-    const composedRef = react_2.forwardRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
-    // Convert value to string for Radix UI compatibility
-    const stringValue = (0, react_2.useMemo)(() => {
-        return value != undefined ? String(value) : undefined;
-    }, [value]);
-    // Handle value changes with proper type conversion
-    const handleValueChange = (0, react_2.useCallback)((val) => {
-        if (readOnly)
-            return;
-        onValueChange(val);
-    }, [onValueChange, readOnly]);
-    const optionsArray = (0, react_2.useMemo)(() => Array.from(options), [options]);
-    const selectedOption = (0, react_2.useMemo)(() => {
-        return optionsArray.find((option) => String(option.value) === String(value));
-    }, [optionsArray, value]);
-    return ((0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: handleValueChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, Object.assign({}, rest, { id: id, ref: composedRef, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(className, Select_module_scss_1.default.selectTrigger, {
-                    [Select_module_scss_1.default.error]: validationStatus === "error",
-                    [Select_module_scss_1.default.warning]: validationStatus === "warning",
-                    [Select_module_scss_1.default.valid]: validationStatus === "valid",
-                }), onClick: (event) => {
-                    // Prevent event propagation to parent elements (e.g., DropdownMenu)
-                    // This ensures that clicking the Select trigger doesn't close the containing DropdownMenu
+// Common trigger value display component
+const SelectTriggerValue = ({ value, placeholder, readOnly, multiSelect, options, valueRenderer, toggleOption, }) => {
+    if (multiSelect) {
+        if (Array.isArray(value) && value.length > 0) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
+                        var _a;
+                        return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === `${v}`), () => {
+                            toggleOption(v);
+                        })) : ((0, jsx_runtime_1.jsxs)("span", { className: Select_module_scss_1.default.badge, children: [(_a = Array.from(options).find((o) => o.value === `${v}`)) === null || _a === void 0 ? void 0 : _a.label, (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
+                                        event.stopPropagation();
+                                        toggleOption(v);
+                                    } })] }, v));
+                    }) }) }));
+        }
+        return ((0, jsx_runtime_1.jsx)("span", { placeholder: placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }));
+    }
+    // Single select
+    if (value !== undefined && value !== null && value !== "") {
+        const selectedOption = Array.from(options).find((o) => o.value === value);
+        return (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label });
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: readOnly ? "" : placeholder || "" }));
+};
+const SelectTriggerActions = ({ value, multiSelect, enabled, readOnly, clearValue, showChevron = true, }) => {
+    const hasValue = multiSelect
+        ? Array.isArray(value) && value.length > 0
+        : value !== undefined && value !== null && value !== "";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [hasValue && enabled && !readOnly && ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.action, onClick: (event) => {
                     event.stopPropagation();
-                }, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Select_module_scss_1.default.selectValue, {
-                            [Select_module_scss_1.default.selectValue]: value !== undefined,
-                            [Select_module_scss_1.default.placeholder]: value === undefined,
-                        }), children: selectedOption ? selectedOption.label : readOnly ? "" : placeholder }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { maxHeight: height, minWidth: width }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsxs)(react_select_1.SelectViewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: [children, optionsArray.length === 0 && emptyListNode] }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
-});
+                    clearValue();
+                }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), showChevron && ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.action, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) }))] }));
+};
 exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
-    var _b;
     var { 
     // Basic props
     id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder = exports.defaultProps.placeholder, autoFocus = exports.defaultProps.autoFocus, readOnly = false, required = exports.defaultProps.required, 
@@ -136,6 +103,26 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const [options, setOptions] = (0, react_2.useState)(new Set());
     const isInForm = (0, FormContext_1.useIsInsideForm)();
+    const [searchTerm, setSearchTerm] = (0, react_2.useState)("");
+    const [selectedIndex, setSelectedIndex] = (0, react_2.useState)(-1);
+    // Filter options based on search term
+    const filteredOptions = (0, react_2.useMemo)(() => {
+        if (!searchTerm || searchTerm.trim() === "") {
+            return Array.from(options);
+        }
+        const searchLower = searchTerm.toLowerCase();
+        return Array.from(options).filter((option) => {
+            const extendedValue = option.value + " " + option.label + " " + (option.keywords || []).join(" ");
+            return extendedValue.toLowerCase().includes(searchLower);
+        });
+    }, [options, searchTerm]);
+    // Reset selected index when options change or dropdown closes
+    (0, react_2.useEffect)(() => {
+        if (!open) {
+            setSelectedIndex(-1);
+            setSearchTerm("");
+        }
+    }, [open]);
     // Set initial state based on the initialValue prop
     (0, react_2.useEffect)(() => {
         if (initialValue !== undefined) {
@@ -179,6 +166,80 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         updateState({ value: newValue });
         onDidChange(newValue);
     }, [multiSelect, updateState, onDidChange]);
+    // Helper functions to find next/previous enabled option
+    const findNextEnabledIndex = (0, react_2.useCallback)((currentIndex) => {
+        for (let i = currentIndex + 1; i < filteredOptions.length; i++) {
+            const item = filteredOptions[i];
+            if (item.enabled !== false) {
+                return i;
+            }
+        }
+        // Wrap around to beginning
+        for (let i = 0; i <= currentIndex; i++) {
+            const item = filteredOptions[i];
+            if (item.enabled !== false) {
+                return i;
+            }
+        }
+        return -1;
+    }, [filteredOptions]);
+    const findPreviousEnabledIndex = (0, react_2.useCallback)((currentIndex) => {
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            const item = filteredOptions[i];
+            if (item.enabled !== false) {
+                return i;
+            }
+        }
+        // Wrap around to end
+        for (let i = filteredOptions.length - 1; i >= currentIndex; i--) {
+            const item = filteredOptions[i];
+            if (item.enabled !== false) {
+                return i;
+            }
+        }
+        return -1;
+    }, [filteredOptions]);
+    // Keyboard navigation
+    const handleKeyDown = (0, react_2.useCallback)((event) => {
+        if (!open)
+            return;
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                setSelectedIndex((prev) => {
+                    const nextIndex = findNextEnabledIndex(prev);
+                    return nextIndex !== -1 ? nextIndex : prev;
+                });
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                setSelectedIndex((prev) => {
+                    const prevIndex = findPreviousEnabledIndex(prev);
+                    return prevIndex !== -1 ? prevIndex : prev;
+                });
+                break;
+            case "Enter":
+                event.preventDefault();
+                if (selectedIndex >= 0 && selectedIndex < filteredOptions.length) {
+                    const selectedItem = filteredOptions[selectedIndex];
+                    if (selectedItem.enabled !== false) {
+                        toggleOption(selectedItem.value);
+                    }
+                }
+                break;
+            case "Escape":
+                event.preventDefault();
+                setOpen(false);
+                break;
+        }
+    }, [
+        open,
+        selectedIndex,
+        filteredOptions,
+        toggleOption,
+        findNextEnabledIndex,
+        findPreviousEnabledIndex,
+    ]);
     // Register component API for external interactions
     const focus = (0, react_2.useCallback)(() => {
         referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
@@ -223,10 +284,11 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         value,
         onChange: toggleOption,
         setOpen,
+        setSelectedIndex,
         options,
         optionRenderer,
-    }), [multiSelect, toggleOption, value, options]);
-    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, Object.assign({}, rest, { ref: (0, react_compose_refs_1.composeRefs)(setReferenceElement, forwardedRef), id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: (event) => {
+    }), [multiSelect, toggleOption, value, options, optionRenderer]);
+    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, Object.assign({}, rest, { ref: (0, react_compose_refs_1.composeRefs)(setReferenceElement, forwardedRef), id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: (event) => {
                                     // Prevent event propagation to parent elements (e.g., DropdownMenu)
                                     // This ensures that clicking the Select trigger doesn't close the containing DropdownMenu
                                     event.stopPropagation();
@@ -234,75 +296,5 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
                                 }, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
                                     [Select_module_scss_1.default.disabled]: !enabled,
                                     [Select_module_scss_1.default.multi]: multiSelect,
-                                }, className), autoFocus: autoFocus, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
-                                                    var _a;
-                                                    return valueRenderer ? (valueRenderer(Array.from(options).find((o) => o.value === `${v}`), () => {
-                                                        toggleOption(v);
-                                                    })) : ((0, jsx_runtime_1.jsxs)("span", { className: Select_module_scss_1.default.badge, children: [(_a = Array.from(options).find((o) => o.value === `${v}`)) === null || _a === void 0 ? void 0 : _a.label, (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
-                                                                    event.stopPropagation();
-                                                                    toggleOption(v);
-                                                                } })] }, v));
-                                                }) }) })) : ((0, jsx_runtime_1.jsx)("span", { placeholder: placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_b = Array.from(options).find((o) => o.value === value)) === null || _b === void 0 ? void 0 : _b.label })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        clearValue();
-                                                    } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }) })), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { minWidth: width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (_, search, keywords) => {
-                                                const lowSearch = search.toLowerCase();
-                                                for (const kw of keywords) {
-                                                    if (kw.toLowerCase().includes(lowSearch))
-                                                        return 1;
-                                                }
-                                                return 0;
-                                            }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
-                                                // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                                                (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] }), children] })) : ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectOption, children: (0, react_1.createElement)(SimpleSelect, Object.assign({}, rest, { readOnly: !!readOnly, ref: forwardedRef, key: isInForm ? (value ? `status-${value}` : "status-initial") : undefined, value: value, onValueChange: toggleOption, id: id, style: style, className: className, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, width: width, emptyListNode: emptyListNode }), children) })) }) }));
-});
-exports.ComboboxOption = (0, react_2.forwardRef)(function Combobox(option, forwardedRef) {
-    const id = (0, react_2.useId)();
-    const { label, value, enabled = true, keywords, readOnly, children } = option;
-    const { value: selectedValue, onChange, multiSelect, setOpen, optionRenderer } = (0, SelectContext_1.useSelect)();
-    const selected = (0, react_2.useMemo)(() => {
-        return Array.isArray(selectedValue) && multiSelect
-            ? selectedValue.map((v) => String(v)).includes(value)
-            : String(selectedValue) === String(value);
-    }, [selectedValue, value, multiSelect]);
-    return ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: value, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
-            if (readOnly) {
-                setOpen(false);
-                return;
-            }
-            onChange(value);
-        }, onClick: (event) => {
-            event.stopPropagation();
-        }, "data-state": selected ? "checked" : undefined, keywords: [...keywords, label], children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children || label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
-});
-const SelectOption = react_2.default.forwardRef((option, ref) => {
-    var _a;
-    const visibleContentRef = (0, react_2.useRef)(null);
-    const { value, label, enabled = true, children, className } = option;
-    const { value: selectedValue, optionRenderer } = (0, SelectContext_1.useSelect)();
-    const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
-    const opt = (0, react_2.useMemo)(() => {
-        var _a, _b, _c, _d;
-        return Object.assign(Object.assign({}, option), { label: (_b = label !== null && label !== void 0 ? label : (_a = visibleContentRef.current) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : "", keywords: [(_d = label !== null && label !== void 0 ? label : (_c = visibleContentRef.current) === null || _c === void 0 ? void 0 : _c.textContent) !== null && _d !== void 0 ? _d : ""] });
-    }, [option, label, visibleContentRef.current]);
-    (0, react_2.useEffect)(() => {
-        onOptionAdd(opt);
-        return () => onOptionRemove(opt);
-    }, [opt, onOptionAdd, onOptionRemove]);
-    return ((0, jsx_runtime_1.jsxs)(react_select_1.Item, { ref: ref, className: (0, classnames_1.default)(Select_module_scss_1.default.selectItem, className), value: value, textValue: label || ((_a = visibleContentRef.current) === null || _a === void 0 ? void 0 : _a.textContent), disabled: !enabled, onClick: (event) => {
-            event.stopPropagation();
-        }, onMouseEnter: (event) => {
-            // Ensure hover state is applied even in DropdownMenu context
-            const target = event.currentTarget;
-            target.setAttribute("data-highlighted", "");
-        }, onMouseLeave: (event) => {
-            // Remove hover state when mouse leaves
-            const target = event.currentTarget;
-            target.removeAttribute("data-highlighted");
-        }, "data-state": selectedValue === value && "checked", children: [(0, jsx_runtime_1.jsx)("span", { style: { display: "none" }, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemText, { children: label }) }), children ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, ref: visibleContentRef, children: children }), selectedValue === value && ((0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }))] })) : optionRenderer ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, ref: visibleContentRef, children: optionRenderer({
-                    label,
-                    value,
-                    enabled,
-                }, selectedValue, false) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectItemContent, ref: visibleContentRef, children: label }), selectedValue === value && ((0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }))] }))] }));
+                                }, className), autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)(SelectTriggerValue, { value: value, placeholder: placeholder, readOnly: readOnly, multiSelect: multiSelect, options: options, valueRenderer: valueRenderer, toggleOption: toggleOption }), (0, jsx_runtime_1.jsx)(SelectTriggerActions, { value: value, multiSelect: multiSelect, enabled: enabled, readOnly: readOnly, clearValue: clearValue })] })), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { minWidth: width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.command, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)("input", { role: "combobox", className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), autoFocus: true })] })) : ((0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)("div", { role: "listbox", className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), filteredOptions.map(({ value, label, enabled, keywords }, index) => ((0, jsx_runtime_1.jsx)(MultiSelectOption_1.MultiSelectOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords, isHighlighted: selectedIndex === index, itemIndex: index }, value))), !inProgress && filteredOptions.length === 0 && ((0, jsx_runtime_1.jsx)("div", { children: emptyListNode }))] })] }) }) }) }))] }), children] })) : ((0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectOption_1.SelectOption, children: (0, react_1.createElement)(SimpleSelect_1.SimpleSelect, Object.assign({}, rest, { readOnly: !!readOnly, ref: forwardedRef, key: isInForm ? (value ? `status-${value}` : "status-initial") : undefined, value: value, onValueChange: toggleOption, id: id, style: style, className: className, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, width: width, emptyListNode: emptyListNode }), children) })) }) }));
 });
-SelectOption.displayName = "SelectOption";

package/dist/scripts/src/components/Select/SelectOption.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectOption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_select_1 = require("@radix-ui/react-select");
+const SelectContext_1 = require("./SelectContext");
+const OptionContext_1 = require("./OptionContext");
+const classnames_1 = __importDefault(require("classnames"));
+const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
+const IconNative_1 = __importDefault(require("../Icon/IconNative"));
+exports.SelectOption = (0, react_1.forwardRef)(function SelectOption(option, ref) {
+    const visibleContentRef = (0, react_1.useRef)(null);
+    const { value, label, enabled = true, children, className } = option;
+    const { value: selectedValue, optionRenderer } = (0, SelectContext_1.useSelect)();
+    const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
+    const opt = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, option), { label: label !== null && label !== void 0 ? label : "", keywords: [label !== null && label !== void 0 ? label : ""] });
+    }, [option, label]);
+    (0, react_1.useEffect)(() => {
+        onOptionAdd(opt);
+        return () => onOptionRemove(opt);
+    }, [opt, onOptionAdd, onOptionRemove]);
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.Item, { ref: ref, className: (0, classnames_1.default)(className, Select_module_scss_1.default.selectOption), value: value, textValue: label, disabled: !enabled, onClick: (event) => {
+            event.stopPropagation();
+        }, "data-state": selectedValue === value && "checked", children: [(0, jsx_runtime_1.jsx)("span", { style: { display: "none" }, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemText, { children: label }) }), children ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectOptionContent, ref: visibleContentRef, children: children }), selectedValue === value && ((0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { className: Select_module_scss_1.default.selectOptionIndicator, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }))] })) : optionRenderer ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectOptionContent, ref: visibleContentRef, children: optionRenderer({
+                    label,
+                    value,
+                    enabled,
+                }, selectedValue, false) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectOptionContent, ref: visibleContentRef, children: label }), selectedValue === value && ((0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }))] }))] }));
+});

package/dist/scripts/src/components/Select/SimpleSelect.js

@@ -0,0 +1,57 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
+const SelectContext_1 = require("./SelectContext");
+const IconNative_1 = __importDefault(require("../Icon/IconNative"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const react_select_1 = require("@radix-ui/react-select");
+exports.SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwardedRef) {
+    const { root } = (0, ThemeContext_1.useTheme)();
+    const { enabled, onBlur, autoFocus, onValueChange, validationStatus, value, height, style, placeholder, id, triggerRef, onFocus, width, children, readOnly, emptyListNode, className } = props, rest = __rest(props, ["enabled", "onBlur", "autoFocus", "onValueChange", "validationStatus", "value", "height", "style", "placeholder", "id", "triggerRef", "onFocus", "width", "children", "readOnly", "emptyListNode", "className"]);
+    const { options } = (0, SelectContext_1.useSelect)();
+    const composedRef = react_1.forwardRef ? (0, react_compose_refs_1.composeRefs)(triggerRef, forwardedRef) : triggerRef;
+    // Convert value to string for Radix UI compatibility
+    const stringValue = (0, react_1.useMemo)(() => {
+        return value != undefined ? String(value) : undefined;
+    }, [value]);
+    // Handle value changes with proper type conversion
+    const handleValueChange = (0, react_1.useCallback)((val) => {
+        if (readOnly)
+            return;
+        onValueChange(val);
+    }, [onValueChange, readOnly]);
+    const optionsArray = (0, react_1.useMemo)(() => Array.from(options), [options]);
+    const selectedOption = (0, react_1.useMemo)(() => {
+        return optionsArray.find((option) => String(option.value) === String(value));
+    }, [optionsArray, value]);
+    return ((0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: handleValueChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, Object.assign({}, rest, { id: id, ref: composedRef, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(className, Select_module_scss_1.default.selectTrigger, {
+                    [Select_module_scss_1.default.error]: validationStatus === "error",
+                    [Select_module_scss_1.default.warning]: validationStatus === "warning",
+                    [Select_module_scss_1.default.valid]: validationStatus === "valid",
+                }), onClick: (event) => {
+                    // Prevent event propagation to parent elements (e.g., DropdownMenu)
+                    // This ensures that clicking the Select trigger doesn't close the containing DropdownMenu
+                    event.stopPropagation();
+                }, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Select_module_scss_1.default.selectValue, {
+                            [Select_module_scss_1.default.placeholder]: value === undefined,
+                        }), children: selectedOption ? selectedOption.label : readOnly ? "" : placeholder }), (0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.action, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectDropdownContent, position: "popper", style: { maxHeight: height, minWidth: width }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsxs)(react_select_1.Viewport, { className: Select_module_scss_1.default.selectViewport, role: "listbox", children: [children, optionsArray.length === 0 && emptyListNode] }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }));
+});

package/dist/scripts/src/components/Spinner/Spinner.spec.js

@@ -156,6 +156,6 @@ fixtures_1.test.describe("Edge Cases", { tag: "@smoke" }, () => {
         const spinner = page.getByRole("status");
         yield (0, fixtures_1.expect)(spinner).toBeVisible();
         yield page.getByRole("button").click({ force: true });
-        fixtures_1.expect.poll(testStateDriver.testState).not.toEqual("clicked");
+        yield fixtures_1.expect.poll(testStateDriver.testState).not.toEqual("clicked");
     }));
 });

package/dist/scripts/src/components/Table/useRowSelection.js

@@ -100,7 +100,7 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
     const appStateSelection = (_a = syncWithAppState === null || syncWithAppState === void 0 ? void 0 : syncWithAppState.value) === null || _a === void 0 ? void 0 : _a.selectedIds;
     const prevAppStateSelection = (0, hooks_1.usePrevious)(appStateSelection);
     // --- State machine for sync direction control
-    const [syncState, setSyncState] = (0, react_1.useState)('idle');
+    const [syncState, setSyncState] = (0, react_1.useState)("idle");
     // --- Use refs to track the last known selections to prevent update loops
     const lastAppStateSelectionRef = (0, react_1.useRef)();
     const lastTableSelectionRef = (0, react_1.useRef)();
@@ -112,23 +112,23 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
         if (!rowsSelectable ||
             !syncWithAppState ||
             !appStateSelection ||
-            syncState === 'updating_to_appstate') {
+            syncState === "updating_to_appstate") {
             return;
         }
         // Only update if AppState selection actually changed and this wasn't caused by our own table update
         const appStateChanged = appStateSelection !== prevAppStateSelection;
         const isDifferentFromLastKnown = JSON.stringify([...(appStateSelection || [])].sort()) !==
             JSON.stringify([...(lastAppStateSelectionRef.current || [])].sort());
-        const wasNotOurUpdate = lastUpdateSourceRef.current !== 'table';
+        const wasNotOurUpdate = lastUpdateSourceRef.current !== "table";
         if (appStateChanged && isDifferentFromLastKnown && wasNotOurUpdate && items.length > 0) {
             // Set state machine to indicate we're updating from AppState
-            setSyncState('updating_from_appstate');
+            setSyncState("updating_from_appstate");
             const validIds = appStateSelection.filter((id) => items.some((item) => item[idKey] === id));
             const idsToSelect = enableMultiRowSelection ? validIds : validIds.slice(0, 1);
             // Track what we're setting to prevent loop
             lastAppStateSelectionRef.current = [...appStateSelection];
             lastTableSelectionRef.current = [...idsToSelect];
-            lastUpdateSourceRef.current = 'appstate';
+            lastUpdateSourceRef.current = "appstate";
             setSelectedRowIds(idsToSelect);
             setInitialSelectionApplied(true);
         }
@@ -147,9 +147,7 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
     (0, react_1.useEffect)(() => {
         var _a;
         // Skip if not selectable, no sync, or currently updating from AppState
-        if (!rowsSelectable ||
-            !syncWithAppState ||
-            syncState === 'updating_from_appstate') {
+        if (!rowsSelectable || !syncWithAppState || syncState === "updating_from_appstate") {
             return;
         }
         const currentSelectionIds = selectedItems.map((item) => item[idKey]);
@@ -159,37 +157,30 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
             JSON.stringify([...(lastTableSelectionRef.current || [])].sort());
         const isDifferentFromAppState = JSON.stringify([...currentSelectionIds].sort()) !==
             JSON.stringify([...appStateSelectionIds].sort());
-        const wasNotAppStateUpdate = lastUpdateSourceRef.current !== 'appstate';
+        const wasNotAppStateUpdate = lastUpdateSourceRef.current !== "appstate";
         if (tableChanged && isDifferentFromAppState && wasNotAppStateUpdate) {
             // Set state machine to indicate we're updating to AppState
-            setSyncState('updating_to_appstate');
+            setSyncState("updating_to_appstate");
             // Track what we're updating to prevent loop
             lastTableSelectionRef.current = [...currentSelectionIds];
             lastAppStateSelectionRef.current = [...currentSelectionIds];
-            lastUpdateSourceRef.current = 'table';
+            lastUpdateSourceRef.current = "table";
             (_a = syncWithAppState.update) === null || _a === void 0 ? void 0 : _a.call(syncWithAppState, { selectedIds: currentSelectionIds });
         }
-    }, [
-        selectedItems,
-        syncWithAppState,
-        appStateSelection,
-        idKey,
-        rowsSelectable,
-        syncState,
-    ]);
+    }, [selectedItems, syncWithAppState, appStateSelection, idKey, rowsSelectable, syncState]);
     // --- Reset sync state machine to idle when updates are complete
     (0, react_1.useEffect)(() => {
-        if (syncState !== 'idle') {
+        if (syncState !== "idle") {
             // Reset to idle state in the next tick to allow the current update to complete
             const resetTimer = requestAnimationFrame(() => {
-                setSyncState('idle');
+                setSyncState("idle");
             });
             return () => cancelAnimationFrame(resetTimer);
         }
     }, [syncState, appStateSelection, selectedItems]);
     // --- Clear update source when sync state becomes idle
     (0, react_1.useEffect)(() => {
-        if (syncState === 'idle') {
+        if (syncState === "idle") {
             // Use a separate frame to clear the source after the sync state is reset
             const clearTimer = requestAnimationFrame(() => {
                 lastUpdateSourceRef.current = null;
@@ -389,7 +380,7 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
     });
     (0, react_1.useEffect)(() => {
         // console.log("selection DID CHANGE?");
-        onSelectionDidChange === null || onSelectionDidChange === void 0 ? void 0 : onSelectionDidChange(selectedItems);
+        void (onSelectionDidChange === null || onSelectionDidChange === void 0 ? void 0 : onSelectionDidChange(selectedItems));
     }, [selectedItems, onSelectionDidChange]);
     /**
      * This operation checks or clears all rows

package/dist/scripts/src/components/Text/Text.js

@@ -33,7 +33,11 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         variant: {
             description: "An optional string value that provides named presets for text variants with a " +
                 "unique combination of font style, weight, size, color, and other parameters. " +
-                "If not defined, the text uses the current style of its context.",
+                "If not defined, the text uses the current style of its context. " +
+                "In addition to predefined variants, you can specify custom variant names and style them " +
+                "using theme variables with the pattern `{cssProperty}-Text-{variantName}` " +
+                "(e.g., `textColor-Text-brandTitle`, `fontSize-Text-highlight`). " +
+                "See the documentation for a complete list of supported CSS properties.",
             availableValues: abstractions_1.variantOptionsMd,
         },
         maxLines: (0, metadata_helpers_1.d)("This property determines the maximum number of lines the component can wrap to. " +