xmlui 0.10.13 → 0.10.14

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

@@ -0,0 +1,418 @@
+"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");
+// Use low delay duration for faster tests as suggested
+const LOW_DELAY = 10;
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip delayDuration="${LOW_DELAY}" text="I'm a tooltip!">
+        <Button label="Hover me!" testId="tooltip-button" />
+      </Tooltip>
+    `);
+        const button = page.getByTestId("tooltip-button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+        // Hover over the button to trigger tooltip
+        yield button.hover();
+        // Wait for tooltip to appear with low delay
+        yield (0, fixtures_1.expect)(page.locator("[data-tooltip-container]")).toBeVisible();
+    }));
+    // Note: This test is mainly to verify that the tooltip has the correct role for accessibility but
+    // is placed here since we use getByRole for the content.
+    // Fetching by data attribute is for the dimension tests below.
+    (0, fixtures_1.test)("has correct 'role' attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="Tooltip" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `);
+        const tooltip = page.getByRole("tooltip");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        yield (0, fixtures_1.expect)(tooltip).toContainText("Tooltip");
+    }));
+    (0, fixtures_1.test)("renders with tooltip property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip delayDuration="${LOW_DELAY}" text="I'm a tooltip!">
+        <Button label="Hover me!" testId="tooltip-button" />
+      </Tooltip>
+    `);
+        const button = page.getByTestId("tooltip-button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+        // Hover over the button to trigger tooltip
+        yield button.hover();
+        // Wait for tooltip to appear with low delay
+        yield (0, fixtures_1.expect)(page.getByRole("tooltip")).toHaveText("I'm a tooltip!");
+        // Note: We skip testing tooltip hiding as it's dependent on implementation details
+        // and the main functionality test is that it appears correctly on hover
+    }));
+    (0, fixtures_1.test)("renders with markdown content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip delayDuration="${LOW_DELAY}" markdown="This *example* uses \`tooltipMarkdown\`">
+        <Card title="Tooltip with markdown" testId="markdown-card" />
+      </Tooltip>
+    `);
+        const card = page.getByTestId("markdown-card");
+        yield (0, fixtures_1.expect)(card).toBeVisible();
+        // Hover to show tooltip
+        yield card.hover();
+        // Check that markdown is rendered (looking for emphasis and code elements)
+        const tooltip = page.getByRole("tooltip");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        yield (0, fixtures_1.expect)(tooltip.locator("em")).toContainText("example");
+        yield (0, fixtures_1.expect)(tooltip.locator("code")).toContainText("tooltipMarkdown");
+    }));
+    (0, fixtures_1.test)("renders with 'side' property set to right", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned right" side="right">
+          <Button label="Hover me!" testId="right-tooltip-button" />
+        </Tooltip>
+      </CVStack>
+    `);
+        const button = page.getByTestId("right-tooltip-button");
+        yield button.hover();
+        const tooltip = page.getByText("I'm positioned right");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Verify tooltip is positioned to the right of the button
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.left).toBeGreaterThan(buttonBox.right);
+    }));
+    (0, fixtures_1.test)("renders with 'side' property set to left", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned left" side="left">
+          <Button label="Hover me!" testId="left-tooltip-button" />
+        </Tooltip>
+      </CVStack>
+    `);
+        const button = page.getByTestId("left-tooltip-button");
+        yield button.hover();
+        const tooltip = page.getByText("I'm positioned left");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Verify tooltip is positioned to the right of the button
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.right).toBeLessThan(buttonBox.left);
+    }));
+    (0, fixtures_1.test)("renders with 'side' property set to top", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned top" side="top">
+          <Button label="Hover me!" testId="top-tooltip-button" />
+        </Tooltip>
+      </CVStack>
+    `);
+        const button = page.getByTestId("top-tooltip-button");
+        yield button.hover();
+        const tooltip = page.getByText("I'm positioned top");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Verify tooltip is positioned above the button
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.bottom).toBeLessThan(buttonBox.top);
+    }));
+    (0, fixtures_1.test)("renders with 'side' property set to bottom", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="I'm positioned bottom" side="bottom">
+          <Button label="Hover me!" testId="bottom-tooltip-button" />
+        </Tooltip>
+      </CVStack>
+    `);
+        const button = page.getByTestId("bottom-tooltip-button");
+        yield button.hover();
+        const tooltip = page.getByText("I'm positioned bottom");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Verify tooltip is positioned below the button
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(button);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.top).toBeGreaterThan(buttonBox.bottom);
+    }));
+    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is top`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <CVStack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip side="top" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
+          <Icon name="email" testId="tooltip-icon" />
+        </Tooltip>
+      </CVStack>
+    `);
+        const icon = page.getByTestId("tooltip-icon");
+        yield icon.hover();
+        const tooltip = page.locator("[data-tooltip-container]");
+        // Verify tooltip is positioned above the icon with the correct offset
+        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(iconBox.top - tooltipBox.bottom).toEqualWithTolerance(28, 4);
+    }));
+    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is bottom`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip side="bottom" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
+          <Icon name="email" testId="tooltip-icon" />
+        </Tooltip>
+      </Stack>
+    `);
+        const icon = page.getByTestId("tooltip-icon");
+        yield icon.hover();
+        const tooltip = page.locator("[data-tooltip-container]");
+        // Verify tooltip is positioned below the icon with the correct offset
+        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.top - iconBox.bottom).toBeGreaterThanOrEqual(28);
+    }));
+    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is left`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip side="left" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
+          <Icon name="email" testId="tooltip-icon-left" />
+        </Tooltip>
+      </Stack>
+    `);
+        const icon = page.getByTestId("tooltip-icon-left");
+        yield icon.hover();
+        const tooltip = page.getByRole("tooltip");
+        // Verify tooltip is positioned to the left of the icon with the correct offset
+        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(iconBox.left - tooltipBox.right).toBeGreaterThanOrEqual(28);
+    }));
+    (0, fixtures_1.test)(`renders with 'sideOffset' property when side is right`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Stack height="200px" horizontalAlignment="center" verticalAlignment="center">
+        <Tooltip side="right" text="Tooltip" sideOffset="28" delayDuration="${LOW_DELAY}">
+          <Icon name="email" testId="tooltip-icon-right" />
+        </Tooltip>
+      </Stack>
+    `);
+        const icon = page.getByTestId("tooltip-icon-right");
+        yield icon.hover();
+        const tooltip = page.getByRole("tooltip");
+        // Verify tooltip is positioned to the right of the icon with the correct offset
+        const iconBox = yield (0, component_test_helpers_1.getBounds)(icon);
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(tooltip);
+        (0, fixtures_1.expect)(tooltipBox.left - iconBox.right).toBeGreaterThanOrEqual(28);
+    }));
+    (0, fixtures_1.test)("Tooltip is shown for all wrapped children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip side="bottom" markdown="This *example* uses a \`Tooltip\` component" delayDuration="${LOW_DELAY}">
+        <VStack horizontalAlignment="center">
+          <Card title="Card 1: within a Tooltip" testId="tooltip-card-1" />
+          <Card title="Card 2: within the same Tooltip" testId="tooltip-card-2" />
+        </VStack>
+      </Tooltip>
+    `);
+        const card1 = page.getByTestId("tooltip-card-1");
+        const card2 = page.getByTestId("tooltip-card-2");
+        yield (0, fixtures_1.expect)(card1).toBeVisible();
+        yield (0, fixtures_1.expect)(card2).toBeVisible();
+        // Hover over first card
+        yield card1.hover();
+        const tooltip = page.getByRole("tooltip");
+        yield (0, fixtures_1.expect)(tooltip.locator("em")).toContainText("example");
+        yield (0, fixtures_1.expect)(tooltip.locator("code")).toContainText("Tooltip");
+        // Move to second card - tooltip should still be visible
+        yield card2.hover();
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with 'tooltipTemplate' property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <VStack height="100px" horizontalAlignment="center">
+        <Tooltip side="bottom" delayDuration="${LOW_DELAY}">
+          <property name="tooltipTemplate">
+            <HStack>
+              <Stack width="24px" height="24px" backgroundColor="purple" testId="purple-square" />
+              <H2>This is a tooltip</H2>
+            </HStack>
+          </property>
+          <Card title="I have a templated Tooltip!" testId="template-card" />
+        </Tooltip>
+      </VStack>
+    `);
+        const card = page.getByTestId("template-card");
+        yield card.hover();
+        // Check that custom template elements are present
+        const tooltip = page.locator('[role="tooltip"]');
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        yield (0, fixtures_1.expect)(tooltip.getByTestId("purple-square")).toBeVisible();
+        yield (0, fixtures_1.expect)(tooltip.getByRole("heading", { level: 2 })).toContainText("This is a tooltip");
+    }));
+    (0, fixtures_1.test)("renders with start 'align' property value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <HStack horizontalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="Start aligned" side="bottom" align="start">
+          <Button label="Start aligned Start aligned" testId="start-button" />
+        </Tooltip>
+      </HStack>
+    `);
+        const startButton = page.getByTestId("start-button");
+        yield startButton.hover();
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(page.locator("div[data-tooltip-container]"));
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(startButton);
+        (0, fixtures_1.expect)(tooltipBox.left + tooltipBox.width / 2).toBeLessThan(buttonBox.left + buttonBox.width / 2);
+    }));
+    (0, fixtures_1.test)("renders with center 'align' property value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <HStack horizontalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="Center aligned" side="bottom" align="center">
+          <Button label="Center aligned Center aligned" testId="center-button" />
+        </Tooltip>
+      </HStack>
+    `);
+        const centerButton = page.getByTestId("center-button");
+        yield centerButton.hover();
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(page.locator("div[data-tooltip-container]"));
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(centerButton);
+        (0, fixtures_1.expect)(tooltipBox.left + tooltipBox.width / 2).toEqualWithTolerance(buttonBox.left + buttonBox.width / 2, 10);
+    }));
+    (0, fixtures_1.test)("renders with end 'align' property value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <HStack horizontalAlignment="center">
+        <Tooltip delayDuration="${LOW_DELAY}" text="End aligned" side="bottom" align="end">
+          <Button label="End aligned End aligned" testId="end-button" />
+        </Tooltip>
+      </HStack>
+    `);
+        const endButton = page.getByTestId("end-button");
+        yield endButton.hover();
+        const tooltipBox = yield (0, component_test_helpers_1.getBounds)(page.locator("div[data-tooltip-container]"));
+        const buttonBox = yield (0, component_test_helpers_1.getBounds)(endButton);
+        (0, fixtures_1.expect)(tooltipBox.left + tooltipBox.width / 2).toBeGreaterThan(buttonBox.left + buttonBox.width / 2);
+    }));
+    (0, fixtures_1.test)("renders with 'defaultOpen' property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="Always visible tooltip" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" testId="default-open-button" />
+      </Tooltip>
+    `);
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByTestId("default-open-button")).toBeVisible();
+    }));
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("tooltip content is accessible via screen reader", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `);
+        // Check that tooltip has proper accessibility attributes
+        const tooltip = page.getByRole("tooltip");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        // Verify tooltip content is properly exposed
+        yield (0, fixtures_1.expect)(tooltip).toHaveText("This tooltip is accessible");
+    }));
+});
+// =============================================================================
+// THEME VARIABLE TESTS
+// =============================================================================
+fixtures_1.test.describe("Theme Variables", () => {
+    (0, fixtures_1.test)("applies 'backgroundColor-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `, {
+            testThemeVars: { "backgroundColor-Tooltip": "rgb(255, 0, 0)" },
+        });
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("background-color", "rgb(255, 0, 0)");
+    }));
+    (0, fixtures_1.test)("applies 'textColor-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `, {
+            testThemeVars: { "textColor-Tooltip": "rgb(0, 255, 0)" },
+        });
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("color", "rgb(0, 255, 0)");
+    }));
+    (0, fixtures_1.test)("applies 'borderRadius-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `, {
+            testThemeVars: { "borderRadius-Tooltip": "12px" },
+        });
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("border-radius", "12px");
+    }));
+    (0, fixtures_1.test)("applies 'fontSize-Tooltip' theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `, {
+            testThemeVars: { "fontSize-Tooltip": "20px" },
+        });
+        const tooltip = page.getByRole("tooltip");
+        yield (0, fixtures_1.expect)(tooltip).toBeVisible();
+        yield (0, fixtures_1.expect)(tooltip).toHaveCSS("font-size", "20px");
+    }));
+    (0, fixtures_1.test)("applies 'paddingLeft-Tooltip' and 'paddingRight-Tooltip' theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
+        yield initTestBed(`
+      <Tooltip text="This tooltip is accessible" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with default open tooltip" />
+      </Tooltip>
+    `, {
+            testThemeVars: {
+                "paddingLeft-Tooltip": "20px",
+                "paddingRight-Tooltip": "25px",
+            },
+        });
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("padding-left", "20px");
+        yield (0, fixtures_1.expect)(page.locator("div[data-tooltip-container]")).toHaveCSS("padding-right", "25px");
+    }));
+});
+// =============================================================================
+// OTHER EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Other Edge Cases", () => {
+    (0, fixtures_1.test)("handles empty tooltip text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip text="" defaultOpen="true" delayDuration="${LOW_DELAY}">
+        <Button label="Button with empty tooltip" />
+      </Tooltip>
+    `);
+        // There should be no visible tooltip with meaningful content
+        const tooltips = page.getByRole("tooltip");
+        const count = yield tooltips.count();
+        if (count > 0) {
+            // If tooltip exists, it should be empty or not visible
+            const tooltip = tooltips.first();
+            const text = yield tooltip.textContent();
+            (0, fixtures_1.expect)(text === null || text === void 0 ? void 0 : text.trim()).toBe("");
+        }
+    }));
+    (0, fixtures_1.test)("handles tooltip without any content properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Tooltip>
+        <Button label="Button in tooltip without content" testId="no-content-button" />
+      </Tooltip>
+    `);
+        const button = page.getByTestId("no-content-button");
+        yield (0, fixtures_1.expect)(button).toBeVisible();
+        // Hover should not show tooltip since there's no content
+        yield button.hover();
+        // Should not find any tooltip with content
+        const tooltips = page.getByRole("tooltip");
+        const count = yield tooltips.count();
+        (0, fixtures_1.expect)(count).toBe(0);
+    }));
+});

package/dist/scripts/src/components/chart-color-schemes.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const colorSchemes = {
+    "set3": "set3",
+    "tableau10": "tableau10",
+    "brown_blueGreen": "brown_blueGreen",
+    "purpleRed_green": "purpleRed_green",
+    "pink_yellowGreen": "pink_yellowGreen",
+    "purple_orange": "purple_orange",
+    "red_blue": "red_blue",
+    "red_grey": "red_grey",
+    "red_yellow_blue": "red_yellow_blue",
+    "red_yellow_green": "red_yellow_green",
+    "spectral": "spectral",
+    "blues": "blues",
+    "greens": "greens",
+    "greys": "greys",
+    "oranges": "oranges",
+    "purples": "purples",
+    "reds": "reds",
+    "blue_green": "blue_green",
+    "blue_purple": "blue_purple",
+    "green_blue": "green_blue",
+    "orange_red": "orange_red",
+    "purple_blue_green": "purple_blue_green",
+    "purple_blue": "purple_blue",
+    "purple_red": "purple_red",
+    "red_purple": "red_purple",
+    "yellow_green_blue": "yellow_green_blue",
+    "yellow_green": "yellow_green",
+    "yellow_orange_brown": "yellow_orange_brown",
+    "yellow_orange_red": "yellow_orange_red",
+    "nivo": "nivo",
+    "category10": "category10",
+    "accent": "accent",
+    "dark2": "dark2",
+    "paired": "paired",
+    "pastel1": "pastel1",
+    "pastel2": "pastel2",
+    "set1": "set1",
+    "set2": "set2"
+};
+exports.default = colorSchemes;

package/dist/scripts/src/components-core/CompoundComponent.js

@@ -84,7 +84,7 @@ exports.CompoundComponent = (0, react_1.forwardRef)((_a, forwardedRef) => {
             api,
             scriptCollected,
             loaders: loaders,
-            vars: vars,
+            vars,
             functions: functions,
             scriptError: scriptError,
             containerUid: uid,

package/dist/scripts/src/components-core/RestApiProxy.js

@@ -52,23 +52,100 @@ const process_statement_sync_1 = require("./script-runner/process-statement-sync
 function isAxiosResponse(response) {
     return "data" in response;
 }
-function parseResponseJson(response_1) {
+function getContentType(response) {
+    if (isAxiosResponse(response)) {
+        return response.headers['content-type'] || response.headers['Content-Type'] || '';
+    }
+    else {
+        return response.headers.get('content-type') || '';
+    }
+}
+// --- Tests for the most common binary types
+function isBinaryContentType(contentType) {
+    const binaryTypes = [
+        // Images
+        'image/',
+        // Audio
+        'audio/',
+        // Video
+        'video/',
+        // Documents
+        'application/pdf',
+        'application/msword',
+        'application/vnd.openxmlformats-officedocument.',
+        'application/vnd.ms-excel',
+        'application/vnd.ms-powerpoint',
+        // Archives
+        'application/zip',
+        'application/x-rar-compressed',
+        'application/x-tar',
+        'application/gzip',
+        'application/x-7z-compressed',
+        // Other binary
+        'application/octet-stream',
+        'application/x-binary',
+    ];
+    return binaryTypes.some(type => contentType.toLowerCase().includes(type.toLowerCase()));
+}
+// --- Tests if a particular content type returns an ArrayBuffer
+function shouldReturnAsArrayBuffer(contentType) {
+    const arrayBufferTypes = [
+        'application/zip',
+        'application/x-rar-compressed',
+        'application/x-tar',
+        'application/gzip',
+        'application/x-7z-compressed',
+        'application/octet-stream',
+        'application/x-binary',
+    ];
+    return arrayBufferTypes.some(type => contentType.toLowerCase().includes(type.toLowerCase()));
+}
+function parseResponseBody(response_1) {
     return __awaiter(this, arguments, void 0, function* (response, logError = false) {
         let resp;
         if (isAxiosResponse(response)) {
             resp = response.data;
         }
         else {
-            try {
-                resp = yield response.clone().json();
-            }
-            catch (e) {
+            const contentType = getContentType(response);
+            // Handle binary content types
+            if (isBinaryContentType(contentType)) {
                 try {
-                    resp = yield response.clone().text();
+                    if (shouldReturnAsArrayBuffer(contentType)) {
+                        resp = yield response.clone().arrayBuffer();
+                    }
+                    else {
+                        resp = yield response.clone().blob();
+                    }
                 }
                 catch (e) {
                     if (logError) {
-                        console.error("Failed to parse response as text or JSON", response.body);
+                        console.error("Failed to parse binary response", e, contentType);
+                    }
+                    // Fallback to text if binary parsing fails
+                    try {
+                        resp = yield response.clone().text();
+                    }
+                    catch (textError) {
+                        if (logError) {
+                            console.error("Failed to parse response as text after binary parsing failed", textError);
+                        }
+                    }
+                }
+            }
+            else {
+                // Handle text-based content types (JSON, text, etc.)
+                try {
+                    resp = yield response.clone().json();
+                }
+                catch (e) {
+                    try {
+                        resp = yield response.clone().text();
+                    }
+                    catch (e) {
+                        if (logError) {
+                            console.error("Failed to parse response as text or JSON", response.body);
+                        }
                     }
                 }
             }
@@ -325,7 +402,7 @@ class RestApiProxy {
             }
         });
         this.tryParseResponse = (response_1, ...args_1) => __awaiter(this, [response_1, ...args_1], void 0, function* (response, logError = false) {
-            return yield parseResponseJson(response, logError);
+            return yield parseResponseBody(response, logError);
         });
         this.raiseError = (response) => __awaiter(this, void 0, void 0, function* () {
             if ("config" in response) {

package/dist/scripts/src/components-core/devtools/InspectorDialogVisibilityContext.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorDialogVisibilityContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.InspectorDialogVisibilityContext = react_1.default.createContext(null);

package/dist/scripts/src/components-core/renderers.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createComponentRenderer = createComponentRenderer;
 exports.createPropHolderComponent = createPropHolderComponent;
 exports.createLoaderRenderer = createLoaderRenderer;
+exports.createUserDefinedComponentRenderer = createUserDefinedComponentRenderer;
 /**
  * This helper function creates a component renderer definition from its arguments.
  * @param type The unique identifier of the component definition
@@ -43,3 +44,33 @@ function createLoaderRenderer(type, renderer, hints) {
         hints,
     };
 }
+/**
+ * This helper function creates a user defined component renderer definition from its arguments.
+ * @param metadata The metadata of the user-defined component
+ * @param componentMarkup The XMLUI markup that defines the user-defined component
+ * @param codeBehind Optional code-behind script that contains variable and function definitions
+ * used by the component
+ * @returns The view renderer definition composed of the arguments
+ */
+function createUserDefinedComponentRenderer(metadata, def, codeBehind) {
+    var _a, _b;
+    // --- Parse the component definition from the markup
+    // --- Parse the optional code-behind script
+    const component = def.component.component;
+    ;
+    if (codeBehind) {
+        if (codeBehind.vars) {
+            (_a = component.vars) !== null && _a !== void 0 ? _a : (component.vars = {});
+            component.vars = Object.assign(Object.assign({}, component.vars), codeBehind.vars);
+        }
+        if (codeBehind.functions) {
+            (_b = component.functions) !== null && _b !== void 0 ? _b : (component.functions = {});
+            component.functions = Object.assign(Object.assign({}, component.functions), codeBehind.functions);
+        }
+    }
+    // --- Done.
+    return {
+        compoundComponentDef: def.component,
+        metadata,
+    };
+}