xmlui 0.10.13 → 0.10.15

package/dist/scripts/src/components/List/doc-resources/list-component-data.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const data = [
+    {
+        id: 0,
+        name: "Apples",
+        quantity: 5,
+        unit: "pieces",
+        category: "fruits",
+        key: 5,
+    },
+    {
+        id: 1,
+        name: "Bananas",
+        quantity: 6,
+        unit: "pieces",
+        category: "fruits",
+        key: 4,
+    },
+    {
+        id: 2,
+        name: "Carrots",
+        quantity: 100,
+        unit: "grams",
+        category: "vegetables",
+        key: 3,
+    },
+    {
+        id: 3,
+        name: "Spinach",
+        quantity: 1,
+        unit: "bunch",
+        category: "vegetables",
+        key: 2,
+    },
+    {
+        id: 4,
+        name: "Milk",
+        quantity: 10,
+        unit: "liter",
+        category: "dairy",
+        key: 1,
+    },
+    {
+        id: 5,
+        name: "Cheese",
+        quantity: 200,
+        unit: "grams",
+        category: "dairy",
+        key: 0,
+    },
+];
+exports.default = data;

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

@@ -0,0 +1,188 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// --- Testing
+fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
+    (0, fixtures_1.test)("Markdown renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        yield initTestBed(`<Markdown />`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toBeAttached();
+    }));
+    (0, fixtures_1.test)("handles empty binding expression", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        yield initTestBed(`<Markdown><![CDATA[\@{}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText("");
+    }));
+    (0, fixtures_1.test)("does not detect escaped empty expression #1", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver, }) {
+        yield initTestBed(`<Markdown><![CDATA[\\@{}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText("@{}");
+    }));
+    (0, fixtures_1.test)("does not detect escaped empty expression #2", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver, }) {
+        yield initTestBed(`<Markdown><![CDATA[\@\\{}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText("@{}");
+    }));
+    (0, fixtures_1.test)("does not detect escaped expression #1", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        yield initTestBed(`<Markdown><![CDATA[\\@{1}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText("@{1}");
+    }));
+    (0, fixtures_1.test)("does not detect escaped expression #2", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        yield initTestBed(`<Markdown><![CDATA[\@\\{1}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText("@{1}");
+    }));
+    (0, fixtures_1.test)("handles only spaces binding expression", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        yield initTestBed(`<Markdown><![CDATA[\@{   }]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText("");
+    }));
+    (0, fixtures_1.test)("handles binding expression", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        yield initTestBed(`<Markdown><![CDATA[\@{1+1}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText("2");
+    }));
+    (0, fixtures_1.test)("handles objects in binding expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        const expected = "{ a : 1, b: 'c' }";
+        yield initTestBed(`<Markdown><![CDATA[\@{${expected}}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText(`{"a":1,"b":"c"}`);
+    }));
+    (0, fixtures_1.test)("handles arrays in binding expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        const expected = "[ 1, 2, 3 ]";
+        yield initTestBed(`<Markdown><![CDATA[\@{${expected}}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText(`[1,2,3]`);
+    }));
+    (0, fixtures_1.test)("handles functions in binding expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver, }) {
+        const SOURCE = "() => { const x = 1; console.log(x); return null; }";
+        const EXPECTED = "[xmlui function]";
+        yield initTestBed(`<Markdown><![CDATA[\@{${SOURCE}}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText(EXPECTED);
+    }));
+    (0, fixtures_1.test)("handles nested objects in binding expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver, }) {
+        const expected = "{ a : 1, b: { c: 1 } }";
+        yield initTestBed(`<Markdown><![CDATA[\@{${expected}}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText(`{"a":1,"b":{"c":1}}`);
+    }));
+    (0, fixtures_1.test)("handles functions nested in objects in binding expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver, }) {
+        const SOURCE = "{ a: () => { const x = 1; console.log(x); return null; } }";
+        const EXPECTED = '{"a":"[xmlui function]"}';
+        yield initTestBed(`<Markdown><![CDATA[\@{${SOURCE}}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText(EXPECTED);
+    }));
+    (0, fixtures_1.test)("handles arrays nested in objects in binding expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver, }) {
+        const expected = "{ a: [1, 2, 3] }";
+        yield initTestBed(`<Markdown><![CDATA[\@{${expected}}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText(`{"a":[1,2,3]}`);
+    }));
+    (0, fixtures_1.test)("handles arrays nested in functions in binding expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver, }) {
+        const SOURCE = "() => { return [1, 2, 3]; }";
+        const EXPECTED = "[xmlui function]";
+        yield initTestBed(`<Markdown><![CDATA[\@{${SOURCE}}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText(EXPECTED);
+    }));
+    (0, fixtures_1.test)("handles complex expressions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        const SOURCE = "Hello there @{ {a : () => {}, x: null, b: { c: 3, d: 'asdadsda', e: () => {return null;} } } } How are you @{true || undefined || []}";
+        const EXPECTED = 'Hello there {"a":"[xmlui function]","x":null,"b":{"c":3,"d":"asdadsda","e":"[xmlui function]"}} How are you true';
+        yield initTestBed(`<Markdown><![CDATA[${SOURCE}]]></Markdown>`);
+        yield (0, fixtures_1.expect)((yield createMarkdownDriver()).component).toHaveText(EXPECTED);
+    }));
+    const headingLevelsWithMarkdown = [
+        { level: "h1", md: "# Heading" },
+        { level: "h2", md: "## Heading" },
+        { level: "h3", md: "### Heading" },
+        { level: "h4", md: "#### Heading" },
+        { level: "h5", md: "##### Heading" },
+        { level: "h6", md: "###### Heading" },
+    ];
+    headingLevelsWithMarkdown.forEach(({ level, md }) => {
+        (0, fixtures_1.test)(`can render anchor link for '${level}'`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+            const SOURCE = md;
+            yield initTestBed(`<Markdown showHeadingAnchors="true"><![CDATA[${SOURCE}]]></Markdown>`);
+            const driver = yield createMarkdownDriver();
+            (0, fixtures_1.expect)(yield driver.hasHtmlElement("a")).toBe(true);
+        }));
+    });
+    (0, fixtures_1.test)("show implicit anchor links", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        const SOURCE = "## Heading";
+        yield initTestBed(`<Markdown showHeadingAnchors="true"><![CDATA[${SOURCE}]]></Markdown>`);
+        const driver = yield createMarkdownDriver();
+        (0, fixtures_1.expect)(yield driver.hasHtmlElement("a")).toBe(true);
+    }));
+    (0, fixtures_1.test)("show explicit anchor links", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        const SOURCE = "## Heading [#heading]";
+        yield initTestBed(`<Markdown showHeadingAnchors="true"><![CDATA[${SOURCE}]]></Markdown>`);
+        const driver = yield createMarkdownDriver();
+        (0, fixtures_1.expect)(yield driver.hasHtmlElement("a")).toBe(true);
+    }));
+    (0, fixtures_1.test)("don't render implicit anchor links", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        const SOURCE = "## Heading";
+        yield initTestBed(`<Markdown showHeadingAnchors="false"><![CDATA[${SOURCE}]]></Markdown>`);
+        const driver = yield createMarkdownDriver();
+        (0, fixtures_1.expect)(yield driver.hasHtmlElement("a")).toBe(false);
+    }));
+    (0, fixtures_1.test)("don't render explicit anchor links", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+        const SOURCE = "## Heading [#heading]";
+        yield initTestBed(`<Markdown showHeadingAnchors="false"><![CDATA[${SOURCE}]]></Markdown>`);
+        const driver = yield createMarkdownDriver();
+        (0, fixtures_1.expect)(yield driver.hasHtmlElement("a")).toBe(false);
+    }));
+});
+(0, fixtures_1.test)("only renders if children are strings", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+    yield initTestBed(`
+      <Markdown>
+        <Button label="Hey!" />
+      </Markdown>
+    `);
+    // Check if page is empty (no text)
+    const driver = yield createMarkdownDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveText("");
+}));
+(0, fixtures_1.test)("renders if children are provided through CDATA", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+    yield initTestBed(`
+    <Markdown>
+      <![CDATA[Hello World!]]>
+    </Markdown>
+  `);
+    // Check if page is empty (no text)
+    const driver = yield createMarkdownDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveText("Hello World!");
+}));
+(0, fixtures_1.test)("renders code block", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver }) {
+    const code = "```\n" + "I did not expect this\n" + "```";
+    yield initTestBed(`<Markdown><![CDATA[${code}]]></Markdown>`);
+    const driver = yield createMarkdownDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveText("I did not expect this");
+    (0, fixtures_1.expect)(yield driver.hasHtmlElement(["pre", "code"])).toBeTruthy();
+}));
+(0, fixtures_1.test)("4space/1 tab indent is not code block by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver, }) {
+    // Note the formatting here: the line breaks and indentations are intentional
+    const code = `
+    _I did not expect this_
+  `;
+    yield initTestBed(`<Markdown><![CDATA[${code}]]></Markdown>`);
+    const driver = yield createMarkdownDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveText("I did not expect this");
+    (0, fixtures_1.expect)(yield driver.hasHtmlElement("em")).toBeTruthy();
+}));
+(0, fixtures_1.test)("removeIndents=false: 4space/1 tab indent is accounted for", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver, }) {
+    // Note the formatting here: the lack of indentations is intentional
+    const code = `
+_I did not expect this_
+  `;
+    yield initTestBed(`<Markdown removeIndents="false"><![CDATA[${code}]]></Markdown>`);
+    const driver = yield createMarkdownDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveText("I did not expect this");
+    (0, fixtures_1.expect)(yield driver.hasHtmlElement("em")).toBeTruthy();
+}));
+(0, fixtures_1.test)("removeIndents=false: 4space/1 tab indent maps to a code block", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createMarkdownDriver, }) {
+    // Note the formatting here: the indentations are intentional
+    const code = `
+    _I did not expect this_
+  `;
+    yield initTestBed(`<Markdown removeIndents="false"><![CDATA[${code}]]></Markdown>`);
+    const driver = yield createMarkdownDriver();
+    yield (0, fixtures_1.expect)(driver.component).toHaveText("_I did not expect this_");
+    (0, fixtures_1.expect)(yield driver.hasHtmlElement(["pre", "code"])).toBeTruthy();
+}));

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

@@ -0,0 +1,162 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// OPEN/CLOSE TESTS
+// =============================================================================
+fixtures_1.test.describe("Open/Close", () => {
+    (0, fixtures_1.test)("Imperative open - without params", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment>
+        <Button testId="button" onClick="modal.open()">open modal (imperative)</Button>
+        <ModalDialog id="modal">
+          <Text testId="textInModal">Hello</Text>
+        </ModalDialog>
+      </Fragment>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal")).not.toBeVisible();
+        yield page.getByTestId("button").click();
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("Imperative open - with param inside", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment>
+        <Button testId="button" onClick="modal.open('PARAM_VALUE')">open modal (imperative)</Button>
+        <ModalDialog id="modal">
+          <Text testId="textInModal">{$param}</Text>
+        </ModalDialog>
+      </Fragment>
+    `);
+        yield page.getByTestId("button").click();
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal")).toHaveText("PARAM_VALUE");
+    }));
+    (0, fixtures_1.test)("Imperative open - with multiple param inside", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment>
+        <Button testId="button" onClick="modal.open('PARAM_VALUE1', 'PARAM_VALUE2')">open modal (imperative)</Button>
+        <ModalDialog id="modal">
+          <Text testId="textInModal1">{$params[0]}</Text>
+          <Text testId="textInModal2">{$params[1]}</Text>
+        </ModalDialog>
+      </Fragment>
+    `);
+        yield page.getByTestId("button").click();
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal1")).toHaveText("PARAM_VALUE1");
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal2")).toHaveText("PARAM_VALUE2");
+    }));
+    (0, fixtures_1.test)("Imperative open - with param in title", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment>
+        <Button testId="button" onClick="modal.open('PARAM_VALUE')">open modal (imperative)</Button>
+        <ModalDialog id="modal" title="{$param}"/>
+      </Fragment>
+    `);
+        yield page.getByTestId("button").click();
+        yield (0, fixtures_1.expect)(page.getByTestId("modal").getByRole("heading")).toHaveText("PARAM_VALUE");
+    }));
+    (0, fixtures_1.test)("Declarative open/close", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+    <Fragment var.isOpen="{false}">
+      <Button testId="button" onClick="isOpen = true">open modal</Button>
+      <ModalDialog when="{isOpen}" onClose="isOpen = false" testId="modal">
+        <Text testId="textInModal">Hello</Text>
+      </ModalDialog>
+      <Text testId="isOpen">{isOpen + ''}</Text>
+    </Fragment>
+  `);
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("isOpen")).toHaveText("false");
+        yield page.getByTestId("button").click();
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("isOpen")).toHaveText("true");
+        //click modal close button
+        yield page.getByTestId("modal").getByRole("button").click();
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("isOpen")).toHaveText("false");
+    }));
+    (0, fixtures_1.test)("maxWidth works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createModalDialogDriver }) {
+        yield initTestBed(`
+      <Fragment>
+        <Button testId="button" onClick="modal.open()">open modal (imperative)</Button>
+        <ModalDialog id="modal" maxWidth="250px">
+          <Text testId="textInModal">Hello</Text>
+        </ModalDialog>
+      </Fragment>
+    `);
+        const modal = yield createModalDialogDriver("modal");
+        yield (0, fixtures_1.expect)(modal.component).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal")).not.toBeVisible();
+        yield page.getByTestId("button").click();
+        yield (0, fixtures_1.expect)(modal.component).toBeVisible();
+        yield (0, fixtures_1.expect)(modal.component).toHaveCSS("max-width", "250px");
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("backgroundColor works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createModalDialogDriver }) {
+        yield initTestBed(`
+      <Fragment>
+        <Button testId="button" onClick="modal.open()">open modal (imperative)</Button>
+        <ModalDialog id="modal" backgroundColor="rgb(255, 255, 0)">
+          <Text testId="textInModal">Hello</Text>
+        </ModalDialog>
+      </Fragment>
+    `);
+        const modal = yield createModalDialogDriver("modal");
+        yield page.getByTestId("button").click();
+        yield (0, fixtures_1.expect)(modal.component).toBeVisible();
+        yield (0, fixtures_1.expect)(modal.component).toHaveCSS("background-color", "rgb(255, 255, 0)");
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("modal is scrollable in fullScreen mode and hides background content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createModalDialogDriver }) {
+        yield initTestBed(`
+      <Fragment>
+        <!-- Background page content that should be completely hidden by the modal -->
+        <VStack testId="pageContent" height="300vh" backgroundColor="lightblue">
+          <Button testId="button" onClick="modal.open()">
+            open modal
+          </Button>
+          <Stack height="*" verticalAlignment="end">
+              <Text testId="pageBottomText">
+                  Should be hidden
+              </Text>
+          </Stack>
+        </VStack>
+        <ModalDialog id="modal" fullScreen="{true}">
+          <VStack>
+            <Text testId="textInModal">
+              Content that should be scrollable
+            </Text>
+            <Stack
+              testId="longContent"
+              height="300vh"
+              verticalAlignment="end">
+              <Text testId="bottomText">
+                Long content
+              </Text>
+            </Stack>
+          </VStack>
+        </ModalDialog>
+      </Fragment>
+    `);
+        const modal = yield createModalDialogDriver("modal");
+        // Verify page content is initially visible before opening modal
+        yield (0, fixtures_1.expect)(page.getByTestId("pageContent")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("pageEndText")).not.toBeInViewport();
+        // Open the modal
+        yield page.getByTestId("button").click();
+        yield (0, fixtures_1.expect)(modal.component).toBeVisible();
+        // Verify modal completely covers page content - all page content should be hidden
+        yield (0, fixtures_1.expect)(page.getByTestId("textInModal")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("bottomText")).not.toBeInViewport();
+        yield page.getByTestId("bottomText").scrollIntoViewIfNeeded();
+        yield (0, fixtures_1.expect)(page.getByTestId("pageBottomText")).not.toBeInViewport();
+    }));
+});

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

@@ -0,0 +1,212 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 }) {
+        yield initTestBed(`
+        <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)("disabled navgroup can't open", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+        <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)("nested disabled navgroup can't open", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+        <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>
+      `);
+    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)("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">
+        <NavLink label="inner page 2" />
+        <NavLink label="inner page 3" />
+      </NavGroup>
+      <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();
+}));
+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(`
+    <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>
+  `);
+    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)("expands even without label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    yield initTestBed(`
+    <NavGroup >
+      <NavLink label="Page 1" />
+      <NavGroup label="subpages">
+        <NavLink label="inner page 2" />
+        <NavLink label="inner page 3" />
+      </NavGroup>
+      <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();
+    }));
+});