xmlui 0.10.14 → 0.10.15

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.14",
+    "version": "0.10.15",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -34,7 +34,7 @@
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-alert-dialog": "^1.1.2",
         "@radix-ui/react-dialog": "1.0.5",
-        "@radix-ui/react-dropdown-menu": "2.0.6",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
         "@radix-ui/react-focus-scope": "1.0.4",
         "@radix-ui/react-hover-card": "1.0.7",
         "@radix-ui/react-popover": "^1.1.2",
@@ -131,7 +131,6 @@
         "@types/react-datepicker": "4.19.5",
         "@types/react-dom": "18.2.8",
         "@types/react-measure": "^2.0.8",
-        "@types/react-pdf": "5.7.2",
         "@types/react-window": "1.8.8",
         "@types/yargs": "17.0.31",
         "@typescript-eslint/eslint-plugin": "8.15.0",

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

@@ -12,6 +12,10 @@ exports.AppStateMd = (0, metadata_helpers_1.createMetadata)({
         "across your entire application. Unlike component variables that are scoped " +
         "locally, AppState allows any component to access and update shared state " +
         "without prop drilling.",
+    events: {
+        didUpdate: (0, metadata_helpers_1.d)("This event is fired when the AppState value is updated. The event provides " +
+            "the new state value as its parameter."),
+    },
     props: {
         bucket: {
             description: `This property is the identifier of the bucket to which the \`${COMP}\` instance is bound. ` +
@@ -36,9 +40,35 @@ exports.AppStateMd = (0, metadata_helpers_1.createMetadata)({
                 newState: "An object that specifies the new state value.",
             },
         },
+        appendToList: {
+            signature: "appendToList(key: string, id: any)",
+            description: "This method appends an item to an array in the application state object bound to the" +
+                " `AppState` instance.",
+            parameters: {
+                key: "The key of the array in the state object.",
+                id: "The item to append to the array.",
+            },
+        },
+        removeFromList: {
+            signature: "removeFromList(key: string, id: any)",
+            description: "This method removes an item from an array in the application state object bound to the" +
+                " `AppState` instance.",
+            parameters: {
+                key: "The key of the array in the state object.",
+                id: "The item to remove from the array.",
+            },
+        },
+        listIncludes: {
+            signature: "listIncludes(key: string, id: any)",
+            description: "This method checks if an array in the application state object contains a specific item.",
+            parameters: {
+                key: "The key of the array in the state object.",
+                id: "The item to check for in the array.",
+            },
+        },
     },
     nonVisual: true,
 });
-exports.appStateComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppStateMd, ({ node, extractValue, updateState, registerComponentApi }) => {
-    return ((0, jsx_runtime_1.jsx)(AppStateNative_1.AppState, { bucket: extractValue(node.props.bucket), initialValue: extractValue(node.props.initialValue), updateState: updateState, registerComponentApi: registerComponentApi }));
+exports.appStateComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppStateMd, ({ node, extractValue, updateState, registerComponentApi, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(AppStateNative_1.AppState, { bucket: extractValue(node.props.bucket), initialValue: extractValue(node.props.initialValue), updateState: updateState, registerComponentApi: registerComponentApi, onDidUpdate: lookupEventHandler("didUpdate") }));
 });

package/dist/scripts/src/components/AppState/AppStateNative.js

@@ -7,7 +7,7 @@ const AppStateContext_1 = require("../../components/App/AppStateContext");
 exports.defaultProps = {
     bucket: "default",
 };
-function AppState({ bucket = exports.defaultProps.bucket, updateState, initialValue, registerComponentApi, }) {
+function AppState({ bucket = exports.defaultProps.bucket, updateState, initialValue, registerComponentApi, onDidUpdate, }) {
     const registerAppState = (0, AppStateContext_1.useAppStateContextPart)((value) => value.registerAppState);
     const update = (0, AppStateContext_1.useAppStateContextPart)((value) => value.update);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
@@ -18,11 +18,35 @@ function AppState({ bucket = exports.defaultProps.bucket, updateState, initialVa
     const value = (0, AppStateContext_1.useAppStateContextPart)((value) => value.appState[bucket]);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         updateState({ value });
-    }, [updateState, value]);
+        // Fire the didUpdate event when value changes
+        if (onDidUpdate) {
+            onDidUpdate({ bucket, value, previousValue: undefined }); // Note: previousValue tracking could be added if needed
+        }
+    }, [updateState, value, onDidUpdate, bucket]);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerComponentApi({
             update: (patch) => update(bucket, patch),
+            appendToList: (key, id) => {
+                const currentState = value || {};
+                const currentArray = currentState[key] || [];
+                // Only add if the id doesn't already exist in the array
+                if (!currentArray.includes(id)) {
+                    const newArray = [...currentArray, id];
+                    update(bucket, { [key]: newArray });
+                }
+            },
+            removeFromList: (key, id) => {
+                const currentState = value || {};
+                const currentArray = currentState[key] || [];
+                const newArray = currentArray.filter((item) => item !== id);
+                update(bucket, { [key]: newArray });
+            },
+            listIncludes: (key, id) => {
+                const currentState = value || {};
+                const currentArray = currentState[key] || [];
+                return currentArray.includes(id);
+            },
         });
-    }, [bucket, registerComponentApi, update]);
+    }, [bucket, registerComponentApi, update, value]);
     return null;
 }

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

@@ -12,6 +12,7 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../../components/metadata-helpers");
 const IconNative_1 = require("../Icon/IconNative");
 const ButtonNative_1 = require("./ButtonNative");
+const nodeUtils_1 = require("../../components-core/rendering/nodeUtils");
 const COMP = "Button";
 exports.ButtonMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
@@ -156,5 +157,8 @@ exports.ButtonMd = (0, metadata_helpers_1.createMetadata)({
 exports.buttonComponentRenderer = (0, renderers_1.createComponentRenderer)("Button", exports.ButtonMd, ({ node, extractValue, renderChild, lookupEventHandler, className }) => {
     const iconName = extractValue.asString(node.props.icon);
     const label = extractValue.asDisplayText(node.props.label);
-    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: extractValue.asOptionalString(node.props.type), variant: extractValue.asOptionalString(node.props.variant), themeColor: extractValue.asOptionalString(node.props.themeColor), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), size: extractValue.asOptionalString(node.props.size), icon: iconName && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, "aria-hidden": true }), iconPosition: extractValue.asOptionalString(node.props.iconPosition), orientation: extractValue.asOptionalString(node.props.orientation), contentPosition: extractValue.asOptionalString(node.props.contentPosition), disabled: !extractValue.asOptionalBoolean(node.props.enabled, true), onClick: lookupEventHandler("click"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), className: className, contextualLabel: extractValue.asOptionalString(node.props.contextualLabel), children: renderChild(node.children, { type: "Stack", orientation: "horizontal" }) || label }));
+    const renderedChildren = (0, nodeUtils_1.hasRenderableChildren)(node.children)
+        ? renderChild(node.children, { type: "Stack", orientation: "horizontal" })
+        : label;
+    return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { type: extractValue.asOptionalString(node.props.type), variant: extractValue.asOptionalString(node.props.variant), themeColor: extractValue.asOptionalString(node.props.themeColor), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), size: extractValue.asOptionalString(node.props.size), icon: iconName && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, "aria-hidden": true }), iconPosition: extractValue.asOptionalString(node.props.iconPosition), orientation: extractValue.asOptionalString(node.props.orientation), contentPosition: extractValue.asOptionalString(node.props.contentPosition), disabled: !extractValue.asOptionalBoolean(node.props.enabled, true), onClick: lookupEventHandler("click"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), className: className, contextualLabel: extractValue.asOptionalString(node.props.contextualLabel), children: renderedChildren }));
 });

package/dist/scripts/src/components/Charts/PieChart/PieChartNative.js

@@ -74,7 +74,8 @@ const renderActiveShape = (props) => {
     const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
     return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(recharts_1.Sector, { cx: cx, cy: cy, innerRadius: innerRadius, outerRadius: outerRadius + 10, startAngle: startAngle, endAngle: endAngle, fill: fill }), (0, jsx_runtime_1.jsx)(recharts_1.Sector, { cx: cx, cy: cy, startAngle: startAngle, endAngle: endAngle, innerRadius: outerRadius + 6, outerRadius: outerRadius + 10, fill: fill })] }));
 };
-function PieChart({ data, dataKey, nameKey, style, className, showLabel = exports.defaultProps.showLabel, showLabelList = exports.defaultProps.showLabelList, labelListPosition = exports.defaultProps.labelListPosition, innerRadius = exports.defaultProps.innerRadius, children, outerRadius = "60%", showLegend = exports.defaultProps.showLegend, }) {
+function PieChart({ data, dataKey, nameKey, style, className, showLabel = exports.defaultProps.showLabel, showLabelList = exports.defaultProps.showLabelList, labelListPosition = exports.defaultProps.labelListPosition, innerRadius = exports.defaultProps.innerRadius, children, outerRadius, // no default; we'll compute when undefined or "auto"
+showLegend = exports.defaultProps.showLegend, }) {
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const colorValues = (0, react_1.useMemo)(() => {
         return [
@@ -122,7 +123,45 @@ function PieChart({ data, dataKey, nameKey, style, className, showLabel = export
         return data.map((item, index) => (Object.assign(Object.assign({}, item), { fill: item.fill || colorValues[index % colorValues.length] })));
     }, [colorValues, data]);
     const chartContextValue = (0, ChartProvider_1.useChartContextValue)({ dataKey, nameKey });
-    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(PieChartNative_module_scss_1.default.wrapper, className), style: style, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { children: [(0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), (0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: chartData, dataKey: dataKey, nameKey: nameKey, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: 1, activeShape: renderActiveShape, label: showLabel ? renderCustomizedLabel : false, labelLine: showLabel, children: chartContextValue.labelList
+    // --- measurement for auto radius ---
+    const wrapperRef = (0, react_1.useRef)(null);
+    const [box, setBox] = (0, react_1.useState)({ width: 0, height: 0 });
+    (0, react_1.useEffect)(() => {
+        if (!wrapperRef.current || typeof window === "undefined" || !window.ResizeObserver)
+            return;
+        const ro = new window.ResizeObserver((entries) => {
+            var _a;
+            const cr = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect;
+            if (cr)
+                setBox({ width: cr.width, height: cr.height });
+        });
+        ro.observe(wrapperRef.current);
+        return () => ro.disconnect();
+    }, []);
+    // Sizing heuristics
+    const RING_PADDING = 8; // keep ring off the SVG edge
+    const LABEL_GUTTER_OUTSIDE = 16; // space for connectors/labels
+    const LABEL_GUTTER_INSIDE = 6; // small breathing room if labels inside/off
+    const MIN_RING_THICKNESS = 12; // maintain legibility on small canvases
+    // Are labels drawn outside the ring?
+    const labelsOutside = !!showLabel || (showLabelList && labelListPosition === "outside");
+    // Resolve outerRadius: explicit value wins; otherwise compute from measured box
+    const resolvedOuterRadius = (0, react_1.useMemo)(() => {
+        const wantsAuto = outerRadius === undefined ||
+            (typeof outerRadius === "string" && outerRadius.toLowerCase() === "auto");
+        if (!wantsAuto)
+            return outerRadius;
+        const base = Math.min(box.width, box.height) / 2;
+        const gutter = labelsOutside ? LABEL_GUTTER_OUTSIDE : LABEL_GUTTER_INSIDE;
+        const inner = Number(innerRadius) || 0;
+        const derived = Math.max(inner + MIN_RING_THICKNESS, base - gutter - RING_PADDING);
+        // Fallback before first measurement
+        if (!Number.isFinite(derived) || derived <= 0) {
+            return labelsOutside ? "72%" : "88%";
+        }
+        return derived;
+    }, [outerRadius, box.width, box.height, labelsOutside, innerRadius]);
+    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { ref: wrapperRef, className: (0, classnames_1.default)(PieChartNative_module_scss_1.default.wrapper, className), style: style, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { margin: { top: 8, right: 8, bottom: labelsOutside ? 16 : 8, left: 8 }, children: [(0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), (0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: chartData, dataKey: dataKey, nameKey: nameKey, innerRadius: innerRadius, outerRadius: resolvedOuterRadius, paddingAngle: 1, activeShape: renderActiveShape, label: showLabel ? renderCustomizedLabel : false, labelLine: showLabel, children: chartContextValue.labelList
                                     ? chartContextValue.labelList
                                     : showLabelList && ((0, jsx_runtime_1.jsx)(recharts_1.LabelList, { position: labelListPosition, dataKey: nameKey, className: PieChartNative_module_scss_1.default.labelList, stroke: "none", fill: "currentColor", fontSize: 12 })) }), chartContextValue.legend ? chartContextValue.legend : showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {})] }) }) })] }));
 }

package/dist/scripts/src/components/DropdownMenu/DropdownMenuNative.js

@@ -56,9 +56,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = exports.defaultMenuItemProps = exports.DropdownMenu = exports.defaultDropdownMenuProps = void 0;
-exports.SubMenuItem = SubMenuItem;
-exports.MenuSeparator = MenuSeparator;
+exports.MenuSeparator = exports.SubMenuItem = exports.MenuItem = exports.defaultMenuItemProps = exports.DropdownMenu = exports.defaultDropdownMenuProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("react");
@@ -139,10 +137,10 @@ exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ children, onClick
             }
         }, ref: ref, children: [iconToStart && icon, (0, jsx_runtime_1.jsx)("div", { className: DropdownMenu_module_scss_1.default.wrapper, children: label !== null && label !== void 0 ? label : children }), !iconToStart && icon] }));
 });
-function SubMenuItem({ children, label, triggerTemplate }) {
+exports.SubMenuItem = (0, react_1.forwardRef)(function SubMenuItem({ children, label, triggerTemplate }, ref) {
     const { root } = (0, ThemeContext_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Sub, { children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubTrigger, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubTrigger, asChild: true, children: triggerTemplate ? triggerTemplate : (0, jsx_runtime_1.jsx)("div", { children: label }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubContent, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubContent, children: children }) })] }));
-}
-function MenuSeparator() {
-    return (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Separator, { className: DropdownMenu_module_scss_1.default.DropdownMenuSeparator });
-}
+    return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Sub, { children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubTrigger, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubTrigger, asChild: true, ref: ref, children: triggerTemplate ? triggerTemplate : (0, jsx_runtime_1.jsx)("div", { children: label }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubContent, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubContent, children: children }) })] }));
+});
+exports.MenuSeparator = (0, react_1.forwardRef)(function MenuSeparator(props, ref) {
+    return (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Separator, Object.assign({ ref: ref, className: DropdownMenu_module_scss_1.default.DropdownMenuSeparator }, props));
+});

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

@@ -27,7 +27,7 @@ exports.defaultProps = {
 };
 const numberRegex = /^[0-9]+$/;
 exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref) {
-    var { id, labelPosition = "top", style = {}, className, label, labelBreak = exports.defaultProps.labelBreak, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, isInputTemplateUsed = false, onLabelClick } = _a, rest = __rest(_a, ["id", "labelPosition", "style", "className", "label", "labelBreak", "labelWidth", "enabled", "required", "children", "validationInProgress", "shrinkToLabel", "onFocus", "onBlur", "labelStyle", "validationResult", "isInputTemplateUsed", "onLabelClick"]);
+    var { id, testId, labelPosition = "top", style = {}, className, label, labelBreak = exports.defaultProps.labelBreak, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, isInputTemplateUsed = false, onLabelClick } = _a, rest = __rest(_a, ["id", "testId", "labelPosition", "style", "className", "label", "labelBreak", "labelWidth", "enabled", "required", "children", "validationInProgress", "shrinkToLabel", "onFocus", "onBlur", "labelStyle", "validationResult", "isInputTemplateUsed", "onLabelClick"]);
     // --- HACK: the "rest" may contain a "layoutContext" property that React doesn't recognize
     // --- as a valid DOM attribute, which would issue a warning in React.
     if (rest.layoutContext !== undefined) {
@@ -47,7 +47,7 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref)
         //   }),
         // });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: ref, style: style, className: (0, classnames_1.default)(className, FormItem_module_scss_1.default.itemWithLabel), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(FormItem_module_scss_1.default.container, {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { "data-testid": testId, ref: ref, style: style, className: (0, classnames_1.default)(className, FormItem_module_scss_1.default.itemWithLabel), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(FormItem_module_scss_1.default.container, {
                     [FormItem_module_scss_1.default.top]: labelPosition === "top",
                     [FormItem_module_scss_1.default.bottom]: labelPosition === "bottom",
                     [FormItem_module_scss_1.default.start]: labelPosition === "start",
@@ -57,5 +57,5 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref)
                             [FormItem_module_scss_1.default.required]: required,
                             [FormItem_module_scss_1.default.disabled]: !enabled,
                             [FormItem_module_scss_1.default.labelBreak]: labelBreak,
-                        }), children: [label, " ", required && (0, jsx_runtime_1.jsx)("span", { className: FormItem_module_scss_1.default.requiredMark, children: "*" }), validationInProgress && ((0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, { style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" } }))] })), (0, jsx_runtime_1.jsx)(react_slot_1.Slot, { "data-part-id": parts_1.PART_LABELED_ITEM, id: !isInputTemplateUsed ? inputId : undefined, children: children })] }), validationResult] })));
+                        }), children: [label, " ", required && (0, jsx_runtime_1.jsx)("span", { className: FormItem_module_scss_1.default.requiredMark, children: "*" }), validationInProgress && ((0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, { style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" } }))] })), (0, jsx_runtime_1.jsx)(react_slot_1.Slot, { "data-part-id": parts_1.PART_LABELED_ITEM, id: !isInputTemplateUsed ? inputId : undefined, "data-testid": undefined, children: children })] }), validationResult] })));
 });

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

@@ -9,145 +9,204 @@ 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)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("displays menuitems after click", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`
-      <NavGroup testId="navGroup" label="NavGroup">
-      </NavGroup>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
+        <NavGroup label="Pages">
+          <NavLink label="Page 1" />
+          <NavGroup label="subpages">
+            <NavLink label="inner page 2" />
+            <NavLink label="inner page 3" />
+          </NavGroup>
+          <NavLink label="Page 4" />
+        </NavGroup>
+      `);
+        yield page.getByRole("button", { name: "Pages", exact: true }).click();
+        yield (0, fixtures_1.expect)(page.getByRole("menuitem")).toHaveCount(3);
+        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "subpages" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 4" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 3" })).not.toBeVisible();
     }));
-    (0, fixtures_1.test)("component renders with children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("disabled navgroup can't open", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         yield initTestBed(`
-      <NavGroup label="NavGroup" testId="navGroup">
-        <NavLink label="link" to="/" />
-      </NavGroup>`);
-        yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
+        <NavGroup label="Pages" enabled="false">
+          <NavLink label="Page 1" />
+          <NavGroup label="subpages">
+            <NavLink label="inner page 2" />
+            <NavLink label="inner page 3" />
+          </NavGroup>
+          <NavLink label="Page 4" />
+        </NavGroup>
+      `);
+        const pagesBtn = page.getByRole("button", { name: "Pages", exact: true });
+        yield (0, fixtures_1.expect)(pagesBtn).toBeDisabled();
+        yield pagesBtn.click({ force: true });
+        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("component trigger has correct aria labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<NavGroup testId="navGroup" label="NavGroup"/>`);
+        const button = page.getByTestId("navGroup");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+        yield (0, fixtures_1.expect)(button).toHaveAttribute("aria-expanded", "false");
+        yield button.click();
+        yield (0, fixtures_1.expect)(button).toHaveAttribute("aria-expanded", "true");
+    }));
+    (0, fixtures_1.test)("expanded in vertical layout to show link of current page", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <App layout="vertical">
+        <NavPanel>
+          <NavGroup label="Current-upper">
+            <NavGroup label="Current">
+              <NavLink label="link-to-current-page" to="/" />
+            </NavGroup>
+          </NavGroup>
+        </NavPanel>
+      </App>`);
+        yield (0, fixtures_1.expect)(page.getByText("link-to-current-page")).toBeVisible();
     }));
 });
-(0, fixtures_1.test)("component trigger has correct aria labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-      <NavGroup testId="navGroup" label="NavGroup">
-      </NavGroup>`);
-    const button = page.getByTestId("navGroup");
-    yield (0, fixtures_1.expect)(button).toBeVisible();
-    yield (0, fixtures_1.expect)(button).toHaveAttribute("aria-expanded", "false");
-    yield button.click();
-    yield (0, fixtures_1.expect)(button).toHaveAttribute("aria-expanded", "true");
-}));
-// TODO: depending on layout, different component lists are rendered - need to test for all of them
-/* test("component list content has correct aria labels", async ({ initTestBed, page }) => {
-  await initTestBed(`
-    <NavGroup testId="navGroup" label="NavGroup">
-      <NavLink label="link" to="/asd" />
-    </NavGroup>`);
-  const button = page.getByTestId("navGroup");
-  const content = page.getByRole('menuitem', { name: 'link' });
-
-  await button.click();
-
-  await expect(content).toBeVisible();
-  await expect(content).toHaveAttribute("aria-hidden", "false");
-}); */
-(0, fixtures_1.test)("expanded in NavPanel + vertical app layout if current page is same as link in group", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+(0, fixtures_1.test)("nested disabled navgroup can't open", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
-    <App layout="vertical">
-      <NavPanel>
-        <NavGroup testId="navGroup" label="NavGroup">
-          <NavLink label="link" to="/" />
+        <NavGroup label="Pages" >
+          <NavLink label="Page 1" />
+          <NavGroup label="subpages" enabled="false">
+            <NavLink label="inner page 2" />
+            <NavLink label="inner page 3" />
+          </NavGroup>
+          <NavLink label="Page 4" />
         </NavGroup>
-      </NavPanel>
-    </App>`);
-    yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.locator("[data-testid='nav-group-content']")).toBeVisible();
+      `);
+    const pagesBtn = page.getByRole("button", { name: "Pages", exact: true });
+    yield pagesBtn.click();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
+    const subpagesBtn = page.getByRole("menuitem", { name: "subpages" });
+    yield (0, fixtures_1.expect)(subpagesBtn).toBeDisabled();
+    yield subpagesBtn.click({ force: true });
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
 }));
-(0, fixtures_1.test)("collapsed in NavPanel + vertical app layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+(0, fixtures_1.test)("initiallyExpanded works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
-    <App layout="vertical">
-      <NavPanel>
-        <NavGroup testId="navGroup" label="NavGroup">
-          <NavLink label="link" to="/asd" />
-        </NavGroup>
-      </NavPanel>
-    </App>`);
-    yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.locator("[data-testid='nav-group-content']")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("expanded in NavPanel + vertical app layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <App layout="vertical">
-      <NavPanel>
-        <NavGroup testId="navGroup" label="NavGroup">
-          <NavLink label="link" to="/" />
-        </NavGroup>
-      </NavPanel>
-    </App>`);
-    yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.locator("[data-testid='nav-group-content']")).toBeVisible();
-}));
-(0, fixtures_1.test)("collapsed in NavPanel + horizontal app layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <App layout="horizontal">
-      <NavPanel>
-        <NavGroup testId="navGroup" label="NavGroup">
-          <NavLink label="link" to="/" />
-        </NavGroup>
-      </NavPanel>
-    </App>`);
-    yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.locator("[data-testid='nav-group-content']")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("click expands group in NavPanel + horizontal app layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <App layout="horizontal">
-      <NavPanel>
-        <NavGroup testId="navGroup" label="NavGroup">
-          <NavLink label="link" to="/" />
-        </NavGroup>
-      </NavPanel>
-    </App>`);
-    yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "link" })).not.toBeVisible();
-    yield page.getByTestId("navGroup").click();
-    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "link" })).toBeVisible();
-}));
-(0, fixtures_1.test)("collapsed in vertical app layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <App layout="vertical">
-      <NavGroup testId="navGroup" label="NavGroup">
-        <NavLink label="link" to="/asd" />
+    <NavGroup label="Pages" initiallyExpanded="true">
+      <NavLink label="Page 1" />
+      <NavGroup label="subpages">
+        <NavLink label="inner page 2" />
+        <NavLink label="inner page 3" />
       </NavGroup>
-    </App>`);
-    yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.locator("[data-testid='nav-group-content']")).not.toBeVisible();
+      <NavLink label="Page 4" />
+    </NavGroup>
+  `);
+    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();
 }));
-(0, fixtures_1.test)("expanded in vertical app layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+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 }) {
     yield initTestBed(`
-    <App layout="vertical">
-      <NavGroup testId="navGroup" label="NavGroup">
-        <NavLink label="link" to="/" />
+    <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>
-    </App>`);
-    yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.locator("[data-testid='nav-group-content']")).toBeVisible();
+      <NavLink label="Page 4" />
+    </NavGroup>
+  `);
+    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();
 }));
-(0, fixtures_1.test)("collapsed in horizontal app layout", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+(0, fixtures_1.test)("expands even without label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
     yield initTestBed(`
-    <App layout="horizontal">
-      <NavGroup testId="navGroup" label="NavGroup">
-        <NavLink label="link" to="/asd" />
+    <NavGroup >
+      <NavLink label="Page 1" />
+      <NavGroup label="subpages">
+        <NavLink label="inner page 2" />
+        <NavLink label="inner page 3" />
       </NavGroup>
-    </App>`);
-    yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.locator("[data-testid='nav-group-content']")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("collapsed in horizontal app layout if current page is same as link in group", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-    yield initTestBed(`
-    <App layout="horizontal">
-      <NavGroup testId="navGroup" label="NavGroup">
-        <NavLink label="link" to="/" />
-      </NavGroup>
-    </App>`);
-    yield (0, fixtures_1.expect)(page.getByTestId("navGroup")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.locator("[data-testid='nav-group-content']")).not.toBeVisible();
+      <NavLink label="Page 4" />
+    </NavGroup>
+  `);
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).not.toBeVisible();
+    yield page.getByRole("button").click();
+    yield (0, fixtures_1.expect)(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
 }));
+fixtures_1.test.describe("icon props", () => {
+    (0, fixtures_1.test)("icon appears", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testIcons } = yield initTestBed(`<App layout="vertical">
+        <NavPanel>
+          <NavGroup icon="bell" label="NavGroup">
+            <NavLink label="link" to="/" />
+          </NavGroup>
+        </NavPanel>
+      </App>`);
+        yield (0, fixtures_1.expect)(testIcons.bellIcon).toBeVisible();
+    }));
+    (0, fixtures_1.test)("iconHorizontal shows in horizontal layout submenu", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testIcons } = yield initTestBed(`
+      <App layout="horizontal">
+        <NavPanel>
+          <NavGroup label="Send To">
+            <NavGroup icon="users" label="Team"
+              iconHorizontalExpanded="bell" iconHorizontalCollapsed="eye">
+              <NavLink label="Jane" />
+            </NavGroup>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        const bell = testIcons.bellIcon;
+        const eye = testIcons.eyeIcon;
+        yield (0, fixtures_1.expect)(bell).not.toBeVisible();
+        yield (0, fixtures_1.expect)(eye).not.toBeVisible();
+        yield page.getByRole("button", { name: "Send to" }).click();
+        yield (0, fixtures_1.expect)(bell).not.toBeVisible();
+        yield (0, fixtures_1.expect)(eye).toBeVisible();
+        yield page.getByRole("menuitem", { name: "Team" }).hover();
+        yield (0, fixtures_1.expect)(bell).toBeVisible();
+        yield (0, fixtures_1.expect)(eye).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("iconVertical shows in horizontal layout top lvl navgroup", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        const { testIcons } = yield initTestBed(`
+      <App layout="horizontal">
+        <NavPanel>
+          <NavGroup icon="users" label="Team"
+            iconVerticalExpanded="bell" iconVerticalCollapsed="eye">
+            <NavLink label="Jane" />
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        const bell = testIcons.bellIcon;
+        const eye = testIcons.eyeIcon;
+        yield (0, fixtures_1.expect)(bell).not.toBeVisible();
+        yield (0, fixtures_1.expect)(eye).toBeVisible();
+        yield page.getByText("Team").click();
+        yield (0, fixtures_1.expect)(bell).toBeVisible();
+        yield (0, fixtures_1.expect)(eye).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("iconVertical shows in vertical layout submenu", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testIcons } = yield initTestBed(`
+      <App layout="vertical">
+        <NavPanel>
+          <NavGroup label="Send To">
+            <NavGroup icon="users" label="Team"
+              iconVerticalExpanded="bell" iconVerticalCollapsed="eye">
+              <NavLink label="Jane" />
+            </NavGroup>
+          </NavGroup>
+        </NavPanel>
+      </App>
+    `);
+        const bell = testIcons.bellIcon;
+        const eye = testIcons.eyeIcon;
+        yield (0, fixtures_1.expect)(bell).not.toBeVisible();
+        yield page.getByText("Send to").click();
+        yield (0, fixtures_1.expect)(bell).not.toBeVisible();
+        yield (0, fixtures_1.expect)(eye).toBeVisible();
+        yield page.getByText("Team").click();
+        yield (0, fixtures_1.expect)(bell).toBeVisible();
+        yield (0, fixtures_1.expect)(eye).not.toBeVisible();
+    }));
+});