xmlui 0.10.24 → 0.10.26

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

@@ -9,7 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const component_test_helpers_1 = require("../../testing/component-test-helpers");
 const fixtures_1 = require("../../testing/fixtures");
 fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
     (0, fixtures_1.test)("displays menuitems after click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
@@ -103,19 +102,26 @@ fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
     yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
     yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
 }));
-fixtures_1.test.fixme("nested initiallyExpanded works", component_test_helpers_1.SKIP_REASON.XMLUI_BUG("see https://github.com/radix-ui/primitives/issues/2551#issuecomment-2457236467 . The suggested workaround does not work for us, if you were to do it, you would see the hover effect not working for the inner most menu items."), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+(0, fixtures_1.test)("nested initiallyExpanded works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
-    <NavGroup label="Pages" initiallyExpanded="true">
-      <NavLink label="Page 1" />
-      <NavGroup label="subpages" initiallyExpanded="true">
-        <NavLink label="inner page 2" />
-        <NavLink label="inner page 3" />
+    <Stack testId="stack">
+      <NavGroup label="Pages" initiallyExpanded="true">
+        <NavLink label="Page 1" />
+        <NavGroup label="subpages" initiallyExpanded="true">
+          <NavLink label="inner page 2" />
+          <NavLink label="inner page 3" />
+        </NavGroup>
+        <NavLink label="Page 4" />
       </NavGroup>
-      <NavLink label="Page 4" />
-    </NavGroup>
+    </Stack>
   `);
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 2" })).toBeVisible();
+    const stack = page.getByTestId("stack");
+    yield (0, fixtures_1.expect)(stack).toBeVisible();
+    const items = page.getByRole("menuitem");
+    yield (0, fixtures_1.expect)(items).toHaveCount(3);
+    (0, fixtures_1.expect)(items.nth(0)).toHaveText("Page 1");
+    (0, fixtures_1.expect)(items.nth(1)).toHaveText("subpages");
+    (0, fixtures_1.expect)(items.nth(2)).toHaveText("Page 4");
 }));
 (0, fixtures_1.test)("expands even without label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
@@ -210,3 +216,89 @@ fixtures_1.test.describe("icon props", () => {
         yield (0, fixtures_1.expect)(eye).not.toBeVisible();
     }));
 });
+// =============================================================================
+// DRAWER INTERACTION TESTS
+// =============================================================================
+fixtures_1.test.describe("Drawer Interaction", () => {
+    (0, fixtures_1.test)("clicking NavGroup toggle in drawer does not close drawer", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        // Set small viewport to trigger drawer mode
+        yield page.setViewportSize({ width: 400, height: 600 });
+        yield initTestBed(`
+      <App layout="condensed">
+        <AppHeader testId="appHeader"/>
+        <NavPanel>
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+        <Pages fallbackPath="/">
+          <Page url="/">
+            <Text value="Home" />
+          </Page>
+          <Page url="/page1">
+            <Text value="Page 1" />
+          </Page>
+          <Page url="/page2">
+            <Text value="Page 2" />
+          </Page>
+        </Pages>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield hamburgerButton.click();
+        const dialog = page.getByRole("dialog");
+        yield (0, fixtures_1.expect)(dialog).toBeVisible();
+        // finst the first element in the dialog with a text of "Pages"
+        const navGroupToggle = dialog.getByRole("button", { name: "Pages" });
+        yield navGroupToggle.click();
+        yield page.waitForTimeout(200);
+        yield (0, fixtures_1.expect)(dialog).toBeVisible();
+        // There must be a text "Page1"
+        yield (0, fixtures_1.expect)(dialog).toContainText("Page 1");
+        yield (0, fixtures_1.expect)(dialog).toContainText("Page 2");
+    }));
+    (0, fixtures_1.test)("clicking NavLink in drawer closes drawer", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        // Set small viewport to trigger drawer mode
+        yield page.setViewportSize({ width: 400, height: 600 });
+        yield initTestBed(`
+      <App layout="condensed">
+        <AppHeader />
+        <NavPanel>
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+        <Pages fallbackPath="/">
+          <Page url="/">
+            <Text value="Home" />
+          </Page>
+          <Page url="/page1">
+            <Text value="Page 1 Content" />
+          </Page>
+          <Page url="/page2">
+            <Text value="Page 2" />
+          </Page>
+        </Pages>
+      </App>
+    `);
+        // Open drawer
+        const hamburgerButton = page.locator('[data-part-id="hamburger"]');
+        yield hamburgerButton.click();
+        const dialog = page.getByRole("dialog");
+        yield (0, fixtures_1.expect)(dialog).toBeVisible();
+        // Expand NavGroup
+        const navGroupToggle = dialog.getByRole("button", { name: "Pages" });
+        yield navGroupToggle.click();
+        yield page.waitForTimeout(200);
+        // Click a NavLink to navigate
+        yield dialog.getByRole("link", { name: "Page 1" }).click();
+        // Verify navigation occurred
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 Content")).toBeVisible();
+        // Verify drawer is closed
+        yield (0, fixtures_1.expect)(dialog).not.toBeVisible();
+    }));
+});

package/dist/scripts/src/components/NavGroup/NavGroupNative.js

@@ -83,7 +83,12 @@ const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup(_
         }
     }, [pathname]);
     const toggleStyle = Object.assign(Object.assign({}, style), { "--nav-link-level": layoutIsVertical ? level : 0 });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, Object.assign({}, rest, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, "aria-expanded": expanded, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] })), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": !expanded, className: (0, classnames_1.default)(NavGroup_module_scss_1.default.groupContent, {
+    const handleClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setExpanded((prev) => !prev);
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, Object.assign({}, rest, { style: toggleStyle, onClick: handleClick, icon: icon, to: to, disabled: disabled, "aria-expanded": expanded, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] })), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": !expanded, className: (0, classnames_1.default)(NavGroup_module_scss_1.default.groupContent, {
                     [NavGroup_module_scss_1.default.expanded]: expanded,
                 }), children: (0, jsx_runtime_1.jsx)("div", { className: NavGroup_module_scss_1.default.groupContentInner, ref: groupContentInnerRef, children: renderChild(node.children) }) })] }));
 });

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

@@ -340,6 +340,8 @@ fixtures_1.test.describe("Accessibility", () => {
         yield page.waitForTimeout(200);
         yield page.keyboard.press("ArrowDown");
         yield page.waitForTimeout(200);
+        yield page.keyboard.press("ArrowDown");
+        yield page.waitForTimeout(200);
         // Select with Enter
         yield page.keyboard.press("Enter");
         yield page.waitForTimeout(200);
@@ -445,7 +447,7 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         // The object label should be visible with some string representation
         yield (0, fixtures_1.expect)(page.getByRole("option")).toHaveCount(2);
     }));
-    (0, fixtures_1.test)("null values are handled gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver, }) {
+    (0, fixtures_1.test)("null values are handled gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createSelectDriver }) {
         yield initTestBed(`
       <Select>
         <Option label="{null}" value="null_label" />

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

@@ -6,7 +6,7 @@ const OptionContext_1 = require("./OptionContext");
 const react_1 = require("react");
 function HiddenOption(option) {
     const { label } = option;
-    const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
+    const { onOptionAdd } = (0, OptionContext_1.useOption)();
     const [node, setNode] = (0, react_1.useState)(null);
     const opt = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -14,7 +14,7 @@ function HiddenOption(option) {
     }, [option, node, label]);
     (0, react_1.useEffect)(() => {
         onOptionAdd(opt);
-        return () => onOptionRemove(opt);
-    }, [opt, onOptionAdd, onOptionRemove]);
+        // Don't remove options when component unmounts - they should persist
+    }, [opt, onOptionAdd]);
     return ((0, jsx_runtime_1.jsx)("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.children }));
 }

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

@@ -11,7 +11,6 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const container_helpers_1 = require("../container-helpers");
 const SelectNative_1 = require("./SelectNative");
-const react_select_1 = require("@radix-ui/react-select");
 const COMP = "Select";
 exports.SelectMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
@@ -115,7 +114,7 @@ exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
     const multiSelect = extractValue.asOptionalBoolean(node.props.multiSelect);
     const searchable = extractValue.asOptionalBoolean(node.props.searchable);
     const isControlled = node.props.value !== undefined;
-    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, className: className, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: isControlled ? undefined : updateState, searchable: searchable, initialValue: extractValue(node.props.initialValue), value: isControlled ? extractValue(node.props.value) : state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), required: extractValue.asOptionalBoolean(node.props.required), valueRenderer: node.props.valueTemplate
+    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: multiSelect, className: className, inProgress: extractValue.asOptionalBoolean(node.props.inProgress), inProgressNotificationMessage: extractValue.asOptionalString(node.props.inProgressNotificationMessage), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), updateState: isControlled ? undefined : updateState, searchable: searchable, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), required: extractValue.asOptionalBoolean(node.props.required), valueRenderer: node.props.valueTemplate
             ? (item, removeItem) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: {
                         $itemContext: { removeItem },
@@ -126,7 +125,7 @@ exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP,
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, contextVars: {
                         $selectedValue: val,
                         $inTrigger: inTrigger,
-                    }, renderChild: (...args) => multiSelect || searchable ? (renderChild(...args)) : ((0, jsx_runtime_1.jsx)(react_select_1.SelectItemText, { children: renderChild(...args) })) }));
+                    }, renderChild: renderChild }));
             }
             : undefined, children: renderChild(node.children) }));
 });

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

@@ -38,10 +38,10 @@ fixtures_1.test.describe("Basic Functionality", () => {
       </FormItem>
     </Form>`);
         const driver = yield createSelectDriver("mySelect");
-        yield (0, fixtures_1.expect)(driver.component.locator("select")).toHaveValue("opt1");
+        yield (0, fixtures_1.expect)(driver.component).toHaveText("first");
         yield driver.toggleOptionsVisibility();
         yield driver.selectLabel("second");
-        yield (0, fixtures_1.expect)(driver.component.locator("select")).toHaveValue("opt2");
+        yield (0, fixtures_1.expect)(driver.component).toHaveText("second");
     }));
     // --- initialValue prop
     (0, fixtures_1.test)("initialValue set to first valid value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
@@ -133,12 +133,10 @@ fixtures_1.test.describe("Basic Functionality", () => {
     </Select>
     `);
         const driver = yield createSelectDriver();
-        yield (0, fixtures_1.expect)(page.getByText("Two")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toHaveText("One");
         yield driver.toggleOptionsVisibility();
         yield driver.selectLabel("Two");
-        yield (0, fixtures_1.expect)(page.getByText("Two")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("One")).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component).toHaveText("One");
         // verify dropdown is not visible but value is shown
     }));
     (0, fixtures_1.test)("readOnly multi-Select shows options, but value cannot be changed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createSelectDriver, }) {

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

@@ -15,15 +15,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = exports.defaultProps = void 0;
-const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_2 = require("react");
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const react_1 = require("react");
 const react_popover_1 = require("@radix-ui/react-popover");
 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 react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const constants_1 = require("../../components-core/constants");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const misc_1 = require("../../components-core/utils/misc");
@@ -32,9 +29,7 @@ const SelectContext_1 = require("./SelectContext");
 const OptionTypeProvider_1 = __importDefault(require("../Option/OptionTypeProvider"));
 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");
+const PART_LIST_WRAPPER = "listWrapper";
 exports.defaultProps = {
     enabled: true,
     placeholder: "",
@@ -80,7 +75,7 @@ const SelectTriggerActions = ({ value, multiSelect, enabled, readOnly, clearValu
                     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) {
+exports.Select = (0, react_1.forwardRef)(function Select(_a, forwardedRef) {
     var { 
     // Basic props
     id, initialValue, value, enabled = exports.defaultProps.enabled, placeholder = exports.defaultProps.placeholder, autoFocus = exports.defaultProps.autoFocus, readOnly = false, required = exports.defaultProps.required, 
@@ -96,17 +91,16 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
     inProgress = exports.defaultProps.inProgress, inProgressNotificationMessage = exports.defaultProps.inProgressNotificationMessage, 
     // Internal
     updateState = constants_1.noop, registerComponentApi, children } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "placeholder", "autoFocus", "readOnly", "required", "style", "className", "dropdownHeight", "validationStatus", "onDidChange", "onFocus", "onBlur", "searchable", "multiSelect", "emptyListTemplate", "valueRenderer", "optionRenderer", "inProgress", "inProgressNotificationMessage", "updateState", "registerComponentApi", "children"]);
-    const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
-    const [open, setOpen] = (0, react_2.useState)(false);
-    const [width, setWidth] = (0, react_2.useState)(0);
-    const observer = (0, react_2.useRef)();
+    const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [width, setWidth] = (0, react_1.useState)(0);
+    const observer = (0, react_1.useRef)();
     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);
+    const [options, setOptions] = (0, react_1.useState)(new Set());
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(-1);
     // Filter options based on search term
-    const filteredOptions = (0, react_2.useMemo)(() => {
+    const filteredOptions = (0, react_1.useMemo)(() => {
         if (!searchTerm || searchTerm.trim() === "") {
             return Array.from(options);
         }
@@ -117,20 +111,20 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         });
     }, [options, searchTerm]);
     // Reset selected index when options change or dropdown closes
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (!open) {
             setSelectedIndex(-1);
             setSearchTerm("");
         }
     }, [open]);
     // Set initial state based on the initialValue prop
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
             updateState({ value: initialValue }, { initial: true });
         }
     }, [initialValue, updateState]);
     // Observe the size of the reference element
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         var _a;
         const current = referenceElement;
         (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -144,7 +138,7 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         };
     }, [referenceElement]);
     // Handle option selection
-    const toggleOption = (0, react_2.useCallback)((selectedValue) => {
+    const toggleOption = (0, react_1.useCallback)((selectedValue) => {
         const newSelectedValue = multiSelect
             ? Array.isArray(value)
                 ? value.map((v) => String(v)).includes(String(selectedValue))
@@ -161,46 +155,50 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         }
     }, [multiSelect, value, updateState, onDidChange]);
     // Clear selected value
-    const clearValue = (0, react_2.useCallback)(() => {
+    const clearValue = (0, react_1.useCallback)(() => {
         const newValue = multiSelect ? [] : "";
         updateState({ value: newValue });
         onDidChange(newValue);
     }, [multiSelect, updateState, onDidChange]);
     // Helper functions to find next/previous enabled option
-    const findNextEnabledIndex = (0, react_2.useCallback)((currentIndex) => {
+    const findNextEnabledIndex = (0, react_1.useCallback)((currentIndex) => {
+        if (filteredOptions.length === 0)
+            return -1;
         for (let i = currentIndex + 1; i < filteredOptions.length; i++) {
             const item = filteredOptions[i];
-            if (item.enabled !== false) {
+            if (item && item.enabled !== false) {
                 return i;
             }
         }
         // Wrap around to beginning
         for (let i = 0; i <= currentIndex; i++) {
             const item = filteredOptions[i];
-            if (item.enabled !== false) {
+            if (item && item.enabled !== false) {
                 return i;
             }
         }
         return -1;
     }, [filteredOptions]);
-    const findPreviousEnabledIndex = (0, react_2.useCallback)((currentIndex) => {
+    const findPreviousEnabledIndex = (0, react_1.useCallback)((currentIndex) => {
+        if (filteredOptions.length === 0)
+            return -1;
         for (let i = currentIndex - 1; i >= 0; i--) {
             const item = filteredOptions[i];
-            if (item.enabled !== false) {
+            if (item && 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) {
+            if (item && item.enabled !== false) {
                 return i;
             }
         }
         return -1;
     }, [filteredOptions]);
     // Keyboard navigation
-    const handleKeyDown = (0, react_2.useCallback)((event) => {
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
         if (!open)
             return;
         switch (event.key) {
@@ -222,8 +220,12 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
                 event.preventDefault();
                 if (selectedIndex >= 0 && selectedIndex < filteredOptions.length) {
                     const selectedItem = filteredOptions[selectedIndex];
-                    if (selectedItem.enabled !== false) {
+                    if (selectedItem && selectedItem.enabled !== false) {
                         toggleOption(selectedItem.value);
+                        // Close dropdown after selecting in single-select mode
+                        if (!multiSelect) {
+                            setOpen(false);
+                        }
                     }
                 }
                 break;
@@ -237,11 +239,12 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         selectedIndex,
         filteredOptions,
         toggleOption,
+        multiSelect,
         findNextEnabledIndex,
         findPreviousEnabledIndex,
     ]);
     // Register component API for external interactions
-    const focus = (0, react_2.useCallback)(() => {
+    const focus = (0, react_1.useCallback)(() => {
         referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.focus();
     }, [referenceElement]);
     const setValue = (0, misc_1.useEvent)((newValue) => {
@@ -256,7 +259,7 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
             clearValue();
         }
     });
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
             setValue,
@@ -264,37 +267,174 @@ exports.Select = (0, react_2.forwardRef)(function Select(_a, forwardedRef) {
         });
     }, [focus, registerComponentApi, setValue, reset]);
     // Render the "empty list" message
-    const emptyListNode = (0, react_2.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.selectEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
-    const onOptionAdd = (0, react_2.useCallback)((option) => {
-        setOptions((prev) => new Set(prev).add(option));
+    const emptyListNode = (0, react_1.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.selectEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
+    const onOptionAdd = (0, react_1.useCallback)((option) => {
+        setOptions((prev) => {
+            // Check if option with same value already exists
+            const exists = Array.from(prev).some((opt) => opt.value === option.value);
+            if (exists) {
+                return prev;
+            }
+            const newSet = new Set(prev);
+            newSet.add(option);
+            return newSet;
+        });
     }, []);
-    const onOptionRemove = (0, react_2.useCallback)((option) => {
+    const onOptionRemove = (0, react_1.useCallback)((option) => {
         setOptions((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
             return optionsSet;
         });
     }, []);
-    const optionContextValue = (0, react_2.useMemo)(() => ({
+    const optionContextValue = (0, react_1.useMemo)(() => ({
         onOptionAdd,
         onOptionRemove,
     }), [onOptionAdd, onOptionRemove]);
-    const selectContextValue = (0, react_2.useMemo)(() => ({
+    const selectContextValue = (0, react_1.useMemo)(() => ({
         multiSelect,
+        readOnly,
         value,
         onChange: toggleOption,
         setOpen,
         setSelectedIndex,
         options,
+        highlightedValue: selectedIndex >= 0 &&
+            selectedIndex < filteredOptions.length &&
+            filteredOptions[selectedIndex]
+            ? filteredOptions[selectedIndex].value
+            : undefined,
         optionRenderer,
-    }), [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();
-                                    setOpen((prev) => !prev);
-                                }, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
+    }), [
+        multiSelect,
+        readOnly,
+        value,
+        toggleOption,
+        options,
+        selectedIndex,
+        filteredOptions,
+        optionRenderer,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsxs)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: [(0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: VisibleSelectOption, children: (0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: (isOpen) => {
+                            if (!enabled)
+                                return;
+                            setOpen(isOpen);
+                            // Reset highlighted option when dropdown closes
+                            setSelectedIndex(-1);
+                        }, 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, "data-part-id": PART_LIST_WRAPPER, className: (0, classnames_1.default)(className, 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.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) })) }) }));
+                                }), role: "combobox", onClick: (event) => {
+                                    if (!enabled)
+                                        return;
+                                    event.stopPropagation();
+                                    setOpen((prev) => !prev);
+                                }, onKeyDown: (event) => {
+                                    if (!enabled || readOnly)
+                                        return;
+                                    // Handle opening dropdown with keyboard
+                                    if (!open &&
+                                        (event.key === "ArrowDown" ||
+                                            event.key === "ArrowUp" ||
+                                            event.key === " " ||
+                                            event.key === "Enter")) {
+                                        event.preventDefault();
+                                        setOpen(true);
+                                        // Set initial selectedIndex to first enabled option if options exist
+                                        if (filteredOptions.length > 0) {
+                                            const firstEnabledIndex = findNextEnabledIndex(-1);
+                                            setSelectedIndex(firstEnabledIndex !== -1 ? firstEnabledIndex : 0);
+                                        }
+                                        return;
+                                    }
+                                    // Handle keyboard navigation when dropdown is open
+                                    if (open) {
+                                        handleKeyDown(event);
+                                    }
+                                }, 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_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: "searchbox", className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) })] })) : ((0, jsx_runtime_1.jsx)("button", { "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsx)("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 })) : searchable && searchTerm ? (
+                                                // When searching, show only filtered options
+                                                filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { children: emptyListNode })) : (filteredOptions.map(({ value, label, enabled, keywords }, index) => ((0, jsx_runtime_1.jsx)(SelectOptionItem, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords, isHighlighted: selectedIndex === index, itemIndex: index }, value))))) : (
+                                                // When not searching, show all children (includes Options and other components like Button)
+                                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, options.size === 0 && (0, jsx_runtime_1.jsx)("div", { children: emptyListNode })] })) })] }) }) }))] }) }), !open && ((0, jsx_runtime_1.jsx)("div", { style: { display: "none" }, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: children }) }))] }) }));
 });
+// Visible option component for rendering items in the dropdown (used by OptionTypeProvider)
+function VisibleSelectOption(option) {
+    const { value, label, enabled = true, children } = option;
+    const { onOptionAdd } = (0, OptionContext_1.useOption)();
+    const { value: selectedValue, onChange, multiSelect, readOnly, setOpen, highlightedValue, optionRenderer, } = (0, SelectContext_1.useSelect)();
+    const optionRef = (0, react_1.useRef)(null);
+    const opt = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, option), { label: label !== null && label !== void 0 ? label : "", keywords: option.keywords || [label !== null && label !== void 0 ? label : ""] });
+    }, [option, label]);
+    (0, react_1.useEffect)(() => {
+        onOptionAdd(opt);
+        // Don't remove options when component unmounts - they should persist
+    }, [opt, onOptionAdd]);
+    const selected = (0, react_1.useMemo)(() => {
+        return Array.isArray(selectedValue) && multiSelect
+            ? selectedValue.map((v) => String(v)).includes(value)
+            : String(selectedValue) === String(value);
+    }, [selectedValue, value, multiSelect]);
+    const isHighlighted = (0, react_1.useMemo)(() => {
+        return highlightedValue !== undefined && String(highlightedValue) === String(value);
+    }, [highlightedValue, value]);
+    // Scroll into view when highlighted
+    (0, react_1.useEffect)(() => {
+        if (isHighlighted && optionRef.current) {
+            optionRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
+    }, [isHighlighted]);
+    const handleClick = () => {
+        if (readOnly) {
+            setOpen(false);
+            return;
+        }
+        if (enabled) {
+            onChange(value);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ref: optionRef, role: "option", "aria-disabled": !enabled, "aria-selected": selected, className: (0, classnames_1.default)(Select_module_scss_1.default.multiSelectOption, {
+            [Select_module_scss_1.default.disabledOption]: !enabled,
+            [Select_module_scss_1.default.highlighted]: isHighlighted,
+        }), onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, onClick: handleClick, "data-state": selected ? "checked" : undefined, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiSelectOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled }, 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" })] })) }) }));
+}
+// Internal option component for rendering items in the dropdown
+function SelectOptionItem(option) {
+    const { value, label, enabled = true, readOnly, children, isHighlighted = false, itemIndex, } = option;
+    const { value: selectedValue, onChange, multiSelect, setOpen, setSelectedIndex, optionRenderer, } = (0, SelectContext_1.useSelect)();
+    const optionRef = (0, react_1.useRef)(null);
+    const selected = (0, react_1.useMemo)(() => {
+        return Array.isArray(selectedValue) && multiSelect
+            ? selectedValue.map((v) => String(v)).includes(value)
+            : String(selectedValue) === String(value);
+    }, [selectedValue, value, multiSelect]);
+    // Scroll into view when highlighted
+    (0, react_1.useEffect)(() => {
+        if (isHighlighted && optionRef.current) {
+            optionRef.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        }
+    }, [isHighlighted]);
+    const handleClick = () => {
+        if (readOnly) {
+            setOpen(false);
+            return;
+        }
+        if (enabled) {
+            onChange(value);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ref: optionRef, role: "option", "aria-disabled": !enabled, "aria-selected": selected, className: (0, classnames_1.default)(Select_module_scss_1.default.multiSelectOption, {
+            [Select_module_scss_1.default.disabledOption]: !enabled,
+            [Select_module_scss_1.default.highlighted]: isHighlighted,
+        }), onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, onMouseEnter: () => {
+            if (itemIndex !== undefined && setSelectedIndex && enabled) {
+                setSelectedIndex(itemIndex);
+            }
+        }, onClick: handleClick, "data-state": selected ? "checked" : undefined, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiSelectOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled }, 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" })] })) }) }));
+}