xmlui 0.10.24 → 0.10.26

package/dist/scripts/package.json

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

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

@@ -217,3 +217,103 @@ fixtures_1.test.describe("Event Handling", () => {
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(testData);
     }));
 });
+// =============================================================================
+// Drawer HANDLING TESTS
+// =============================================================================
+fixtures_1.test.describe("Drawer Handling", () => {
+    (0, fixtures_1.test)("Drawer displayed if NavPanel has no 'when'", (_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>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield (0, fixtures_1.expect)(hamburgerButton).toBeVisible();
+    }));
+    (0, fixtures_1.test)("Drawer displayed if NavPanel has when='true'", (_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 when="true">
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield (0, fixtures_1.expect)(hamburgerButton).toBeVisible();
+    }));
+    (0, fixtures_1.test)("Drawer displayed if NavPanel has when='{true}'", (_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 when="{true}">
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield (0, fixtures_1.expect)(hamburgerButton).toBeVisible();
+    }));
+    (0, fixtures_1.test)("Drawer not displayed if NavPanel has when='false'", (_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 when="false">
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield (0, fixtures_1.expect)(hamburgerButton).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("Drawer not displayed if NavPanel has when='{false}'", (_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 when="{false}">
+          <NavGroup label="Pages">
+            <NavLink label="Page 1" to="/page1"/>
+            <NavLink label="Page 2" to="/page2"/>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        // Open drawer by clicking hamburger button
+        const appHeader = page.getByTestId("appHeader");
+        const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
+        yield (0, fixtures_1.expect)(hamburgerButton).not.toBeVisible();
+    }));
+});

package/dist/scripts/src/components/App/AppNative.js

@@ -34,6 +34,7 @@ const AppLayoutContext_1 = require("./AppLayoutContext");
 const SearchContext_1 = require("./SearchContext");
 const LinkInfoContext_1 = require("./LinkInfoContext");
 const constants_1 = require("../../components-core/constants");
+const extractParam_1 = require("../../components-core/utils/extractParam");
 exports.defaultProps = {
     scrollWholePage: true,
     noScrollbarGutters: false,
@@ -50,9 +51,19 @@ function App(_a) {
     const mounted = (0, react_1.useRef)(false);
     const layoutWithDefaultValue = layout || getThemeVar("layout-App") || "condensed-sticky";
     const safeLayout = layoutWithDefaultValue === null || layoutWithDefaultValue === void 0 ? void 0 : layoutWithDefaultValue.trim().replace(/[\u2013\u2014\u2011]/g, "-"); //It replaces all – (–) and — (—) and non-breaking hyphen '‑' symbols with simple dashes (-).
-    const { setLoggedInUser, mediaSize, forceRefreshAnchorScroll, appGlobals } = (0, AppContext_1.useAppContext)();
+    const appContext = (0, AppContext_1.useAppContext)();
+    const { setLoggedInUser, mediaSize, forceRefreshAnchorScroll, appGlobals } = appContext;
     const hasRegisteredHeader = header !== undefined;
-    const hasRegisteredNavPanel = navPanelDef !== undefined;
+    // --- Check if NavPanel's "when" condition allows it to be rendered
+    // --- This ensures the drawer and hamburger menu are hidden when NavPanel.when evaluates to false
+    const navPanelShouldRender = (0, react_1.useMemo)(() => {
+        if (!navPanelDef)
+            return false;
+        // Use shouldKeep to evaluate the NavPanel's when condition
+        // Pass empty state {} and appContext since we're evaluating at the App level
+        return (0, extractParam_1.shouldKeep)(navPanelDef.when, {}, appContext);
+    }, [navPanelDef, appContext]);
+    const hasRegisteredNavPanel = navPanelDef !== undefined && navPanelShouldRender;
     (0, react_1.useEffect)(() => {
         setLoggedInUser(loggedInUser);
     }, [loggedInUser, setLoggedInUser]);

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

@@ -34,11 +34,6 @@ exports.AppHeaderMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "boolean",
             defaultValue: AppHeaderNative_1.defaultProps.showLogo,
         },
-        showNavPanelIf: {
-            description: "Determines if the navigation panel should be displayed",
-            valueType: "boolean",
-            defaultValue: AppHeaderNative_1.defaultProps.showNavPanelIf,
-        },
     },
     themeVars: (0, themeVars_1.parseScssVar)(AppHeader_module_scss_1.default.themeVars),
     themeVarDescriptions: {
@@ -53,7 +48,7 @@ exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)(CO
     // --- Convert the plain (text) logo template into component definition
     const logoTemplate = node.props.logoTemplate || ((_a = node.slots) === null || _a === void 0 ? void 0 : _a.logoSlot);
     const titleTemplate = node.props.titleTemplate || ((_b = node.slots) === null || _b === void 0 ? void 0 : _b.titleSlot);
-    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo), showNavPanelIf: extractValue.asOptionalBoolean(node.props.showNavPanelIf, AppHeaderNative_1.defaultProps.showNavPanelIf), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
+    return ((0, jsx_runtime_1.jsx)(AppHeaderNative_1.AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), title: extractValue(node.props.title), showLogo: extractValue.asOptionalBoolean(node.props.showLogo), titleContent: titleTemplate && ((0, jsx_runtime_1.jsx)(SlotItem_1.SlotItem, { node: titleTemplate, renderChild: renderChild, slotProps: { title: extractValue(node.props.title) } })), logoContent: renderChild(logoTemplate, {
             type: "Stack",
             orientation: "horizontal",
         }), className: (0, classnames_1.default)(layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, className), renderChild: renderChild, children: renderChild(node.children, {

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

@@ -30,9 +30,9 @@ 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,
 };
 function useLogoUrl() {
     const { logo, logoLight, logoDark } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
@@ -46,27 +46,27 @@ function useLogoUrl() {
     return toneLogoUrl || baseLogoUrl;
 }
 const AppHeader = (_a) => {
-    var { children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo = exports.defaultProps.showLogo, showNavPanelIf = exports.defaultProps.showNavPanelIf, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot } = _a, rest = __rest(_a, ["children", "profileMenu", "style", "logoContent", "className", "canRestrictContentWidth", "navPanelVisible", "toggleDrawer", "showLogo", "showNavPanelIf", "hasRegisteredNavPanel", "title", "titleContent", "registerSubNavPanelSlot"]);
+    var { children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo = exports.defaultProps.showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot } = _a, rest = __rest(_a, ["children", "profileMenu", "style", "logoContent", "className", "canRestrictContentWidth", "navPanelVisible", "toggleDrawer", "showLogo", "hasRegisteredNavPanel", "title", "titleContent", "registerSubNavPanelSlot"]);
     const { mediaSize } = (0, AppContext_1.useAppContext)();
     const logoUrl = useLogoUrl();
     const subNavPanelSlot = (0, react_1.useRef)(null);
-    const effectiveNavPanelVisible = navPanelVisible && showNavPanelIf;
+    const effectiveNavPanelVisible = navPanelVisible;
     const safeLogoTitle = mediaSize.sizeIndex < 2 ? null : !titleContent && title ? ((0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { paddingLeft: 0 }, children: title })) : (titleContent);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerSubNavPanelSlot === null || registerSubNavPanelSlot === void 0 ? void 0 : registerSubNavPanelSlot(subNavPanelSlot.current);
     }, []);
     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 && ((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;
-function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, className, title, titleContent, showLogo = true, showNavPanelIf = exports.defaultProps.showNavPanelIf, renderChild, }) {
+function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, className, title, titleContent, showLogo = true, renderChild, }) {
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const { navPanelVisible, toggleDrawer, layout, hasRegisteredNavPanel, navPanelDef, logoContentDef, registerSubNavPanelSlot, } = appLayoutContext || {};
     // console.log("APP LAYOUT CONTEXT", appLayoutContext);
     const displayLogo = layout !== "vertical" && layout !== "vertical-sticky" && showLogo;
     const canRestrictContentWidth = layout !== "vertical-full-header";
-    const effectiveNavPanelVisible = navPanelVisible && showNavPanelIf;
-    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: effectiveNavPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, showNavPanelIf: showNavPanelIf, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && effectiveNavPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
+    const effectiveNavPanelVisible = navPanelVisible;
+    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: effectiveNavPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && effectiveNavPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
 }

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/Heading/Heading.js

@@ -23,6 +23,37 @@ const HeadingNative_1 = require("./HeadingNative");
 const extractParam_1 = require("../../components-core/utils/extractParam");
 const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Heading";
+/**
+ * Normalizes the level value to a valid HeadingLevel (h1-h6).
+ * Accepts: 1-6, "1"-"6", "h1"-"h6", "H1"-"H6"
+ * Returns "h1" for any invalid value.
+ */
+function normalizeHeadingLevel(value) {
+    if (value === null || value === undefined) {
+        return "h1";
+    }
+    // Handle numeric values (1-6)
+    if (typeof value === "number") {
+        if (value >= 1 && value <= 6) {
+            return `h${value}`;
+        }
+        return "h1";
+    }
+    // Handle string values
+    if (typeof value === "string") {
+        const trimmed = value.trim().toLowerCase();
+        // Handle "h1"-"h6" (case insensitive)
+        if (/^h[1-6]$/.test(trimmed)) {
+            return trimmed;
+        }
+        // Handle "1"-"6"
+        if (/^[1-6]$/.test(trimmed)) {
+            return `h${trimmed}`;
+        }
+    }
+    // Default fallback
+    return "h1";
+}
 const VALUE_DESC = (0, metadata_helpers_1.d)(`This property determines the text displayed in the heading. \`${COMP}\` also accepts nested ` +
     `text instead of specifying the \`value\`. If both \`value\` and a nested text are used, ` +
     `the \`value\` will be displayed.`);
@@ -68,8 +99,14 @@ exports.HeadingMd = (0, metadata_helpers_1.createMetadata)({
     props: {
         value: VALUE_DESC,
         level: {
-            description: "This property sets the visual significance (level) of the heading.",
-            availableValues: ["h1", "h2", "h3", "h4", "h5", "h6"],
+            description: "This property sets the visual significance (level) of the heading. " +
+                "Accepts multiple formats: `h1`-`h6`, `H1`-`H6`, or `1`-`6`." +
+                "Invalid values default to `h1`.",
+            availableValues: [
+                "h1", "h2", "h3", "h4", "h5", "h6",
+                "H1", "H2", "H3", "H4", "H5", "H6",
+                "1", "2", "3", "4", "5", "6",
+            ],
             defaultValue: HeadingNative_1.defaultProps.level,
         },
         maxLines: MAX_LINES_DESC,
@@ -278,11 +315,14 @@ exports.H6Md = (0, metadata_helpers_1.createMetadata)({
     },
 });
 function renderHeading({ node, extractValue, className, level, renderChild, registerComponentApi, }) {
-    var _a, _b, _c;
-    const _d = node.props, { maxLines, preserveLinebreaks, ellipses, showAnchor } = _d, restProps = __rest(_d, ["maxLines", "preserveLinebreaks", "ellipses", "showAnchor"]);
+    var _a, _b;
+    const _c = node.props, { maxLines, preserveLinebreaks, ellipses, showAnchor } = _c, restProps = __rest(_c, ["maxLines", "preserveLinebreaks", "ellipses", "showAnchor"]);
     delete restProps.level; // Remove level from restProps as it is handled separately
     const showAnchorValue = extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.showAnchor);
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: ((_b = extractValue.asOptionalString(level)) !== null && _b !== void 0 ? _b : "h1"), maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), showAnchor: showAnchorValue, className: className, omitFromToc: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.omitFromToc), registerComponentApi: registerComponentApi }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
+    // Extract and normalize the level value
+    const extractedLevel = extractValue(level);
+    const normalizedLevel = normalizeHeadingLevel(extractedLevel);
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ uid: node.uid, level: normalizedLevel, maxLines: extractValue.asOptionalNumber(maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true), showAnchor: showAnchorValue, className: className, omitFromToc: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.omitFromToc), registerComponentApi: registerComponentApi }, (0, extractParam_1.resolveAndCleanProps)(restProps, extractValue), { children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) })));
 }
 exports.headingComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.HeadingMd, ({ node, extractValue, className, renderChild, registerComponentApi }) => {
     return renderHeading({

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

@@ -336,6 +336,88 @@ fixtures_1.test.describe("Basic Functionality", () => {
         const driver = yield createHeadingDriver();
         yield (0, fixtures_1.expect)(driver.component).toHaveText("Child content text");
     }));
+    fixtures_1.test.describe("level property accepts numeric values", () => {
+        [1, 2, 3, 4, 5, 6].forEach((level) => {
+            (0, fixtures_1.test)(`level="{${level}}" renders as h${level}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level="{${level}}">Numeric Level ${level}</Heading>`);
+                const driver = yield createHeadingDriver();
+                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+                const tagName = yield driver.getComponentTagName();
+                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(`h${level}`);
+                yield (0, fixtures_1.expect)(driver.component).toHaveText(`Numeric Level ${level}`);
+            }));
+        });
+    });
+    fixtures_1.test.describe("level property accepts string numeric values", () => {
+        ["1", "2", "3", "4", "5", "6"].forEach((level) => {
+            (0, fixtures_1.test)(`level="${level}" renders as h${level}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level="${level}">String Level ${level}</Heading>`);
+                const driver = yield createHeadingDriver();
+                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+                const tagName = yield driver.getComponentTagName();
+                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(`h${level}`);
+                yield (0, fixtures_1.expect)(driver.component).toHaveText(`String Level ${level}`);
+            }));
+        });
+    });
+    fixtures_1.test.describe("level property accepts uppercase H format", () => {
+        ["H1", "H2", "H3", "H4", "H5", "H6"].forEach((level) => {
+            (0, fixtures_1.test)(`level="${level}" renders as ${level.toLowerCase()}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level="${level}">Uppercase Level ${level}</Heading>`);
+                const driver = yield createHeadingDriver();
+                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+                const tagName = yield driver.getComponentTagName();
+                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(level.toLowerCase());
+                yield (0, fixtures_1.expect)(driver.component).toHaveText(`Uppercase Level ${level}`);
+            }));
+        });
+    });
+    fixtures_1.test.describe("level property handles invalid values", () => {
+        [
+            { value: '"invalid"', label: "invalid string" },
+            { value: '"{0}"', label: "zero" },
+            { value: '"{7}"', label: "out of range number (7)" },
+            { value: '"{-1}"', label: "negative number" },
+            { value: '"{999}"', label: "large number" },
+            { value: '"h7"', label: "invalid h-format (h7)" },
+            { value: '"h0"', label: "invalid h-format (h0)" },
+            { value: '"7"', label: "out of range string (7)" },
+            { value: '"{null}"', label: "null" },
+            { value: '"{undefined}"', label: "undefined" },
+            { value: '"{{}}"', label: "empty object" },
+            { value: '"{[]}"', label: "empty array" },
+        ].forEach(({ value, label }) => {
+            (0, fixtures_1.test)(`level=${value} (${label}) defaults to h1`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level=${value}>Invalid Level Fallback</Heading>`);
+                const driver = yield createHeadingDriver();
+                yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+                const tagName = yield driver.getComponentTagName();
+                (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h1");
+                yield (0, fixtures_1.expect)(driver.component).toHaveText("Invalid Level Fallback");
+            }));
+        });
+    });
+    (0, fixtures_1.test)("level property with mixed case string formats", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        const testCases = [
+            { input: "H3", expected: "h3" },
+            { input: "h3", expected: "h3" },
+            { input: "h3", expected: "h3" },
+        ];
+        for (const { input, expected } of testCases) {
+            yield initTestBed(`<Heading level="${input}">Mixed Case ${input}</Heading>`);
+            const driver = yield createHeadingDriver();
+            yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+            const tagName = yield driver.getComponentTagName();
+            (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(expected);
+        }
+    }));
+    (0, fixtures_1.test)("level property handles whitespace in string values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<Heading level=" h2 ">Whitespace Level</Heading>`);
+        const driver = yield createHeadingDriver();
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        const tagName = yield driver.getComponentTagName();
+        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
+    }));
 });
 // =============================================================================
 // ACCESSIBILITY TESTS (REQUIRED)

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}">