xmlui 0.10.24 → 0.10.25

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.24",
+    "version": "0.10.25",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/AppHeader/AppHeaderNative.js

@@ -30,6 +30,7 @@ const AppLayoutContext_1 = require("../../components/App/AppLayoutContext");
 const ButtonNative_1 = require("../../components/Button/ButtonNative");
 const NavLinkNative_1 = require("../../components/NavLink/NavLinkNative");
 const hooks_1 = require("../../components-core/utils/hooks");
+const PART_HAMBURGER = "hamburger";
 exports.defaultProps = {
     showLogo: true,
     showNavPanelIf: true,
@@ -57,7 +58,7 @@ const AppHeader = (_a) => {
     }, []);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, role: "banner", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
                 [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
-            }), children: [hasRegisteredNavPanel && showNavPanelIf && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", className: AppHeader_module_scss_1.default.drawerToggle, style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !effectiveNavPanelVisible) &&
+            }), children: [hasRegisteredNavPanel && showNavPanelIf && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-part-id": PART_HAMBURGER, onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", className: AppHeader_module_scss_1.default.drawerToggle, style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !effectiveNavPanelVisible) &&
                         (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, className: AppHeader_module_scss_1.default.logoLink, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { ref: subNavPanelSlot, className: AppHeader_module_scss_1.default.subNavPanelSlot }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) })));
 };
 exports.AppHeader = AppHeader;

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

@@ -115,10 +115,10 @@ const fixtures_1 = require("../../testing/fixtures");
     // First option should be selected
     yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected values: 1");
     // Click another option
-    yield driver.click();
     yield driver.selectLabel("Diana Prince");
     // Both options should be selected
     yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected values: 1,3");
+    yield driver.click();
     // Both selected options should be visible as badges
     yield (0, fixtures_1.expect)(page.getByText("Bruce Wayne")).toBeVisible();
     yield (0, fixtures_1.expect)(page.getByText("Diana Prince")).toBeVisible();

package/dist/scripts/src/components/AutoComplete/AutoCompleteNative.js

@@ -162,7 +162,16 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
         onDidChange(newValue);
     }, [multi, updateState, onDidChange]);
     const onOptionAdd = (0, react_1.useCallback)((option) => {
-        setOptions((prev) => new Set(prev).add(option));
+        setOptions((prev) => {
+            const newSet = new Set(prev);
+            // Remove old version if exists, then add the new one to ensure updates
+            const existing = Array.from(prev).find((opt) => opt.value === option.value);
+            if (existing) {
+                newSet.delete(existing);
+            }
+            newSet.add(option);
+            return newSet;
+        });
     }, []);
     const onOptionRemove = (0, react_1.useCallback)((option) => {
         setOptions((prev) => {
@@ -363,7 +372,17 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                         }, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, ref: setReferenceElement, children: (0, jsx_runtime_1.jsxs)("div", { ref: forwardedRef, style: style, "data-part-id": PART_LIST_WRAPPER, className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
                                         [AutoComplete_module_scss_1.default.disabled]: !enabled,
                                         [AutoComplete_module_scss_1.default.focused]: isFocused,
-                                    }), "aria-expanded": open, children: [Array.isArray(selectedValue) && selectedValue.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: selectedValue.map((v, index) => ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [v === null || v === void 0 ? void 0 : v.label, !readOnly && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
+                                    }), "aria-expanded": open, onClick: (event) => {
+                                        if (readOnly)
+                                            return;
+                                        // In multi mode, only open the dropdown, don't toggle
+                                        // In single mode, toggle as usual
+                                        if (multi && open) {
+                                            return; // Already open, don't close
+                                        }
+                                        event.stopPropagation();
+                                        setOpen((prev) => !prev);
+                                    }, children: [Array.isArray(selectedValue) && selectedValue.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: selectedValue.map((v, index) => ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [v === null || v === void 0 ? void 0 : v.label, !readOnly && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
                                                             event.stopPropagation();
                                                             toggleOption(v.value);
                                                         } }))] }, index))) })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.inputWrapper, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, rest, { role: "combobox", id: id, ref: inputRef, onFocus: (ev) => {
@@ -418,7 +437,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                                                 }) })] }) }) }))] }), children] }) }) }));
 });
 function CreatableItem({ onNewItem, isHighlighted = false }) {
-    const { value, options, searchTerm, onChange, setOpen, setSelectedIndex } = (0, AutoCompleteContext_1.useAutoComplete)();
+    const { value, options, searchTerm, onChange, setOpen, setSelectedIndex, multi } = (0, AutoCompleteContext_1.useAutoComplete)();
     const { onOptionAdd } = (0, OptionContext_1.useOption)();
     if (isOptionsExist(options, [{ value: searchTerm, label: searchTerm }]) ||
         (Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.find((s) => s === searchTerm))) ||
@@ -430,7 +449,10 @@ function CreatableItem({ onNewItem, isHighlighted = false }) {
         onOptionAdd(newOption);
         onNewItem === null || onNewItem === void 0 ? void 0 : onNewItem(searchTerm);
         onChange(searchTerm);
-        setOpen(false);
+        // Only close dropdown for single select mode
+        if (!multi) {
+            setOpen(false);
+        }
     };
     const Item = ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {
             [AutoComplete_module_scss_1.default.highlighted]: isHighlighted,
@@ -456,7 +478,10 @@ function AutoCompleteOption(option) {
     const handleClick = () => {
         if (!readOnly && enabled) {
             onChange(value);
-            setOpen(false);
+            // Only close dropdown for single select mode
+            if (!multi) {
+                setOpen(false);
+            }
         }
     };
     return ((0, jsx_runtime_1.jsx)("div", { id: id, role: "option", "aria-disabled": !enabled, "aria-selected": selected, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {

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

@@ -674,7 +674,7 @@ fixtures_1.test.describe("Edge Cases", () => {
         const textfieldElement = (yield createFormItemDriver("name2")).input;
         const textfieldDriver = yield createTextBoxDriver(textfieldElement);
         yield selectDriver.component.click();
-        yield page.getByLabel("Public Key").click();
+        yield page.getByText("Public Key").click();
         yield textfieldDriver.field.fill("John");
         yield formDriver.submitForm();
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);
@@ -1242,7 +1242,7 @@ const smartCrudInterceptor = {
     const textfieldElement = (yield createFormItemDriver("name2")).input;
     const textfieldDriver = yield createTextBoxDriver(textfieldElement);
     yield selectDriver.component.click();
-    yield page.getByLabel("Public Key").click();
+    yield page.getByText("Public Key").click();
     yield textfieldDriver.field.fill("John");
     yield formDriver.submitForm();
     yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(true);

package/dist/scripts/src/components/FormItem/FormItemNative.js

@@ -10,6 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormItem = exports.defaultProps = void 0;
 exports.CustomFormItem = CustomFormItem;
@@ -38,6 +41,7 @@ const HelperText_1 = require("./HelperText");
 const ItemsNative_1 = require("../Items/ItemsNative");
 const constants_1 = require("../../components-core/constants");
 const hooks_1 = require("../../components-core/utils/hooks");
+const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
 const DEFAULT_LABEL_POSITIONS = {
     checkbox: "end",
 };
@@ -221,7 +225,7 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
     if (!isInsideForm) {
         throw new Error("FormItem must be used inside a Form");
     }
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPositionValue, label: label, labelWidth: labelWidthValue, labelBreak: labelBreakValue, enabled: isEnabled, required: validations.required, validationInProgress: validationResult === null || validationResult === void 0 ? void 0 : validationResult.partial, onFocus: onFocus, onBlur: onBlur, style: style, className: className, validationResult: (0, jsx_runtime_1.jsx)("div", { ref: animateContainerRef, children: isHelperTextShown &&
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPositionValue, label: label, labelWidth: labelWidthValue, labelBreak: labelBreakValue, enabled: isEnabled, required: validations.required, validationInProgress: validationResult === null || validationResult === void 0 ? void 0 : validationResult.partial, onFocus: onFocus, onBlur: onBlur, style: style, className: className, validationResult: (0, jsx_runtime_1.jsx)("div", { ref: animateContainerRef, className: FormItem_module_scss_1.default.helperTextContainer, children: isHelperTextShown &&
                 (validationResult === null || validationResult === void 0 ? void 0 : validationResult.validations.map((singleValidation, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [singleValidation.isValid && !!singleValidation.validMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.validMessage, status: "valid", style: { opacity: singleValidation.stale ? 0.5 : undefined } })), !singleValidation.isValid && !!singleValidation.invalidMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.invalidMessage, status: singleValidation.severity, style: { opacity: singleValidation.stale ? 0.5 : undefined } }))] }, i)))) }), children: formControl }));
 });
 function CustomFormItem({ renderChild, node, bindTo, }) {

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

@@ -70,15 +70,13 @@ exports.ModalDialogMd = (0, metadata_helpers_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(ModalDialog_module_scss_1.default.themeVars),
     defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`backgroundColor-${COMP}`]: "$backgroundColor-primary", [`backgroundColor-overlay-${COMP}`]: "$backgroundColor-overlay", [`textColor-${COMP}`]: "$textColor-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0" }),
 });
-exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ModalDialogMd, ({ node, extractValue, className, renderChild, lookupEventHandler, registerComponentApi, layoutContext, }) => {
+exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ModalDialogMd, ({ node, contextVars, extractValue, className, renderChild, lookupEventHandler, registerComponentApi, layoutContext, }) => {
     var _a, _b;
-    // gigantic hack: If the ModalDialog is not inside a ModalDialogFrame, wrap it in one
-    //   we do this through the layout context, render it through another render loop with the extra $param context var
-    //   (note the layoutContext and node on the MemoizedItem)
-    // one solution would be to have a renderChild that can take a contextVars argument
+    // --- If the ModalDialog is not inside a ModalDialogFrame, wrap it in one.
     if (!(layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext._insideModalFrame)) {
+        // --- Context variables are now directly available via contextVars parameter
         return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialogFrame, { isInitiallyOpen: extractValue(node.when) !== undefined, registerComponentApi: registerComponentApi, onClose: lookupEventHandler("close"), onOpen: lookupEventHandler("open"), renderDialog: ({ openParams, ref }) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node, renderChild: renderChild, layoutContext: { _insideModalFrame: true }, contextVars: { $param: openParams === null || openParams === void 0 ? void 0 : openParams[0], $params: openParams } }));
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node, renderChild: renderChild, layoutContext: { _insideModalFrame: true }, contextVars: Object.assign(Object.assign({}, contextVars), { $param: openParams === null || openParams === void 0 ? void 0 : openParams[0], $params: openParams }) }));
             } }));
     }
     return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { className: className, fullScreen: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.fullScreen), title: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.title), closeButtonVisible: extractValue.asOptionalBoolean(node.props.closeButtonVisible), externalAnimation: extractValue.asOptionalBoolean(node.props.externalAnimation), children: renderChild(node.children, { type: "Stack" }) }));

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

@@ -63,6 +63,25 @@ fixtures_1.test.describe("Open/Close", () => {
         yield page.getByTestId("button").click();
         yield (0, fixtures_1.expect)(page.getByTestId("modal").getByRole("heading")).toHaveText("PARAM_VALUE");
     }));
+    (0, fixtures_1.test)("Preserves $item context variable from Table Column", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Table data='{[
+        {id: 1, company: "Acme Corp", order: 1},
+      ]}'>
+        <Column>
+          <ModalDialog id="dialog" testId="dialog" title="{$item.company}">
+            <Text testId="modal-text">{JSON.stringify($item)}</Text>
+          </ModalDialog>
+          <Button testId="btn-{$itemIndex}" onClick="dialog.open()">{$item.company}</Button>
+        </Column>
+      </Table>
+    `);
+        // Test first row
+        yield page.getByTestId("btn-0").click();
+        const modal = page.getByTestId("dialog");
+        yield (0, fixtures_1.expect)(modal).toBeVisible();
+        yield (0, fixtures_1.expect)(modal).toContainText("Acme Corp");
+    }));
     (0, fixtures_1.test)("Declarative open/close", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
         yield initTestBed(`
     <Fragment var.isOpen="{false}">

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, }) {