xmlui 0.10.12 → 0.10.14

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

@@ -77,7 +77,7 @@ exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(CO
     //   (note the layoutContext and node on the MemoizedItem)
     // one solution would be to have a renderChild that can take a contextVars argument
     if (!(layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext._insideModalFrame)) {
-        return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialogFrame, { isInitiallyOpen: node.when !== undefined, registerComponentApi: registerComponentApi, onClose: lookupEventHandler("close"), onOpen: lookupEventHandler("open"), renderDialog: ({ openParams, ref }) => {
+        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 } }));
             } }));
     }

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/ModalDialog/ModalDialogNative.js

@@ -182,7 +182,7 @@ exports.ModalDialog = react_1.default.forwardRef((_a, ref) => {
     }
     const Content = ((0, jsx_runtime_1.jsxs)(Dialog.Content, Object.assign({}, rest, { "data-part-id": PART_CONTENT, className: (0, classnames_1.default)(ModalDialog_module_scss_1.default.content, className), onPointerDownOutside: (event) => {
             if (event.target instanceof Element &&
-                event.target.closest("._debug-inspect-button") !== null) {
+                (event.target.closest("._debug-inspect-button") !== null || event.target.localName === "com-1password-button")) {
                 //we prevent the auto modal close on clicking the inspect button
                 event.preventDefault();
             }

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

@@ -0,0 +1,153 @@
+"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");
+fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
+    (0, fixtures_1.test)("component renders", (_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();
+    }));
+    (0, fixtures_1.test)("component renders with children", (_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();
+    }));
+});
+(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, }) {
+    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 + 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="/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>
+    </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 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="/" />
+      </NavGroup>
+    </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 horizontal app layout", (_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>
+    </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();
+}));

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

@@ -37,7 +37,7 @@ exports.defaultProps = {
     iconVerticalCollapsed: "chevronright",
 };
 exports.NavGroup = (0, react_1.forwardRef)(function NavGroup(_a, ref) {
-    var { node, style, label, icon, renderChild, to, disabled = false, initiallyExpanded, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded } = _a, rest = __rest(_a, ["node", "style", "label", "icon", "renderChild", "to", "disabled", "initiallyExpanded", "iconHorizontalCollapsed", "iconHorizontalExpanded", "iconVerticalCollapsed", "iconVerticalExpanded"]);
+    var { node, style, label, icon, renderChild, to, disabled = false, initiallyExpanded = false, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded } = _a, rest = __rest(_a, ["node", "style", "label", "icon", "renderChild", "to", "disabled", "initiallyExpanded", "iconHorizontalCollapsed", "iconHorizontalExpanded", "iconVerticalCollapsed", "iconVerticalExpanded"]);
     const { level } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
@@ -80,7 +80,7 @@ const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup(_
         }
     }, [pathname]);
     const toggleStyle = Object.assign(Object.assign({}, style), { "--nav-link-level": layoutIsVertical ? level : 0 });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, Object.assign({}, rest, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavGroup_module_scss_1.default.groupContent, {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, Object.assign({}, rest, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, "aria-expanded": expanded, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] })), (0, jsx_runtime_1.jsx)("div", { "data-testid": "nav-group-content", "aria-hidden": !expanded, className: (0, classnames_1.default)(NavGroup_module_scss_1.default.groupContent, {
                     [NavGroup_module_scss_1.default.expanded]: expanded,
                 }), children: (0, jsx_runtime_1.jsx)("div", { className: NavGroup_module_scss_1.default.groupContentInner, ref: groupContentInnerRef, children: renderChild(node.children) }) })] }));
 });