xmlui 0.11.4 → 0.11.7

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

@@ -1,546 +0,0 @@
-"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");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createAutoCompleteDriver }) {
-    yield initTestBed(`
-    <AutoComplete />
-  `);
-    const driver = yield createAutoCompleteDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-(0, fixtures_1.test)("displays placeholder text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    const placeholder = "Search for an option";
-    yield initTestBed(`<AutoComplete placeholder="${placeholder}" />`);
-    yield (0, fixtures_1.expect)(page.getByPlaceholder(placeholder)).toBeVisible();
-}));
-(0, fixtures_1.test)("initialValue sets the selected option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <Fragment>
-      <AutoComplete id="autoComplete" initialValue="1" label="Select a superhero">
-        <Option value="1" label="Bruce Wayne" />
-        <Option value="2" label="Clark Kent" />
-        <Option value="3" label="Diana Prince" />
-      </AutoComplete>
-      <Text testId="text">Selected value: {autoComplete.value}</Text>
-    </Fragment>
-  `);
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 1");
-    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Bruce Wayne");
-}));
-(0, fixtures_1.test)("opens dropdown when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver }) {
-    yield initTestBed(`
-    <AutoComplete>
-      <Option value="1" label="Bruce Wayne" />
-      <Option value="2" label="Clark Kent" />
-      <Option value="3" label="Diana Prince" />
-    </AutoComplete>
-  `);
-    const driver = yield createAutoCompleteDriver();
-    yield driver.click();
-    yield (0, fixtures_1.expect)(page.getByRole("listbox")).toBeVisible();
-}));
-(0, fixtures_1.test)("selects an option when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver }) {
-    yield initTestBed(`
-    <Fragment>
-      <AutoComplete id="autoComplete">
-        <Option value="1" label="Bruce Wayne" />
-        <Option value="2" label="Clark Kent" />
-        <Option value="3" label="Diana Prince" />
-      </AutoComplete>
-      <Text testId="text">Selected value: {autoComplete.value}</Text>
-    </Fragment>
-  `);
-    const driver = yield createAutoCompleteDriver("autoComplete");
-    // Open the dropdown
-    yield driver.click();
-    // Wait for options to be visible before selecting
-    yield page.getByRole("option", { name: "Diana Prince" }).waitFor({ state: "visible" });
-    // Select the option
-    yield driver.selectLabel("Diana Prince");
-    // Verify the results
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 3");
-    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Diana Prince");
-}));
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-(0, fixtures_1.test)("disabled option cannot be selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
-    yield initTestBed(`
-    <Fragment>
-      <AutoComplete id="autoComplete">
-        <Option value="1" label="Bruce Wayne" />
-        <Option value="2" label="Clark Kent" enabled="false" />
-        <Option value="3" label="Diana Prince" />
-      </AutoComplete>
-      <Text testId="text">Selected value: {autoComplete.value}</Text>
-    </Fragment>
-  `);
-    const driver = yield createAutoCompleteDriver("autoComplete");
-    yield driver.click();
-    yield driver.selectLabel("Clark Kent");
-    // Value should not change to the disabled option
-    yield (0, fixtures_1.expect)(page.getByRole("combobox")).not.toHaveValue("Bruce Wayne");
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).not.toHaveText("Selected value: 2");
-}));
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-(0, fixtures_1.test)("multi mode allows selecting multiple options", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
-    yield initTestBed(`
-    <Fragment>
-      <AutoComplete id="autoComplete" multi="true">
-        <Option value="1" label="Bruce Wayne" />
-        <Option value="2" label="Clark Kent" />
-        <Option value="3" label="Diana Prince" />
-      </AutoComplete>
-      <Text testId="text">Selected values: {autoComplete.value}</Text>
-    </Fragment>
-  `);
-    const driver = yield createAutoCompleteDriver("autoComplete");
-    yield driver.click();
-    // Click the first option
-    yield driver.selectLabel("Bruce Wayne");
-    // First option should be selected
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected values: 1");
-    // Click another option
-    yield driver.selectLabel("Diana Prince");
-    // Both options should be selected
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected values: 1,3");
-    yield driver.click();
-    // Both selected options should be visible as badges
-    yield (0, fixtures_1.expect)(page.getByText("Bruce Wayne")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Diana Prince")).toBeVisible();
-}));
-(0, fixtures_1.test)("searching filters options", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver }) {
-    yield initTestBed(`
-    <AutoComplete>
-      <Option value="1" label="Bruce Wayne" />
-      <Option value="2" label="Clark Kent" />
-      <Option value="3" label="Diana Prince" />
-      <Option value="4" label="Barry Allen" />
-      <Option value="5" label="Hal Jordan" />
-    </AutoComplete>
-  `);
-    const driver = yield createAutoCompleteDriver();
-    yield driver.click();
-    // Type in the search field
-    yield page.keyboard.type("Bruce");
-    // Only Bruce Wayne should be visible
-    yield (0, fixtures_1.expect)(page.getByText("Bruce Wayne")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Clark Kent")).not.toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Diana Prince")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("emptyListTemplate is shown when no options match", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
-    yield initTestBed(`
-    <AutoComplete>
-      <property name="emptyListTemplate">
-        <Text>No options found</Text>
-      </property>
-      <Option value="1" label="Bruce Wayne" />
-      <Option value="2" label="Clark Kent" />
-      <Option value="3" label="Diana Prince" />
-    </AutoComplete>
-  `);
-    const driver = yield createAutoCompleteDriver();
-    yield driver.click();
-    // Type something that doesn't match any option
-    yield page.keyboard.type("Joker");
-    // Empty list template should be shown
-    yield (0, fixtures_1.expect)(page.getByText("No options found")).toBeVisible();
-}));
-(0, fixtures_1.test)("optionTemplate customizes option appearance", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
-    yield initTestBed(`
-    <AutoComplete>
-      <property name="optionTemplate">
-        <Text textAlign="center" color="purple">{$item.label}</Text>
-      </property>
-      <Option value="1" label="Bruce Wayne" />
-      <Option value="2" label="Clark Kent" />
-      <Option value="3" label="Diana Prince" />
-    </AutoComplete>
-  `);
-    const driver = yield createAutoCompleteDriver();
-    yield driver.click();
-    // Options should be visible with custom styling
-    yield (0, fixtures_1.expect)(page.getByText("Bruce Wayne")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Clark Kent")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText("Diana Prince")).toBeVisible();
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("readOnly prevents changing selection", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
-    yield initTestBed(`
-    <AutoComplete readOnly="true" initialValue="1">
-      <Option value="1" label="Bruce Wayne" />
-      <Option value="2" label="Clark Kent" />
-      <Option value="3" label="Diana Prince" />
-    </AutoComplete>
-  `);
-    // Initial value should be displayed
-    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Bruce Wayne");
-    // Try to click to open dropdown
-    const driver = yield createAutoCompleteDriver();
-    yield driver.click();
-    // Selection should not change
-    yield (0, fixtures_1.expect)(page.getByRole("listbox")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("disabled state prevents interaction", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
-    yield initTestBed(`
-    <AutoComplete enabled="false">
-      <Option value="1" label="Bruce Wayne" />
-      <Option value="2" label="Clark Kent" />
-      <Option value="3" label="Diana Prince" />
-    </AutoComplete>
-  `);
-    const driver = yield createAutoCompleteDriver();
-    // Try to click to open dropdown
-    yield driver.click({ force: true });
-    // Try to type in the input
-    yield page.keyboard.type("Joker");
-    // Dropdown should not open
-    yield (0, fixtures_1.expect)(page.getByRole("listbox")).not.toBeVisible();
-    // Input should not change
-    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("");
-}));
-// =============================================================================
-// API AND EVENT TESTS
-// =============================================================================
-(0, fixtures_1.test)("didChange event fires when option is selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
-    yield initTestBed(`
-    <App var.selectedValue="">
-      <AutoComplete id="autoComplete" onDidChange="(val) => selectedValue = val">
-        <Option value="1" label="Bruce Wayne" />
-        <Option value="2" label="Clark Kent" />
-        <Option value="3" label="Diana Prince" />
-      </AutoComplete>
-      <Text testId="text">{selectedValue}</Text>
-    </App>
-  `);
-    const driver = yield createAutoCompleteDriver("autoComplete");
-    yield driver.click();
-    yield driver.selectLabel("Diana Prince");
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("3");
-}));
-(0, fixtures_1.test)("gotFocus and lostFocus events work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
-    yield initTestBed(`
-    <App var.isFocused="false">
-      <Text testId="focusText">{isFocused === true ? 'AutoComplete focused' : 'AutoComplete lost focus'}</Text>
-      <AutoComplete
-        id="autoComplete"
-        onGotFocus="isFocused = true"
-        onLostFocus="isFocused = false"
-      >
-        <Option value="1" label="Bruce Wayne" />
-      </AutoComplete>
-    </App>
-  `);
-    // Initial state
-    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
-    // Focus the autocomplete
-    const driver = yield createAutoCompleteDriver("autoComplete");
-    yield driver.click();
-    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete focused");
-    // Blur the autocomplete
-    yield page.keyboard.press("Tab");
-    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
-}));
-(0, fixtures_1.test)("gotFocus and lostFocus events by clicking on label work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-    yield initTestBed(`
-    <App var.isFocused="false">
-      <Text testId="focusText">{isFocused === true ? 'AutoComplete focused' : 'AutoComplete lost focus'}</Text>
-      <AutoComplete
-        id="autoComplete"
-        label="Select a hero"
-        onGotFocus="isFocused = true"
-        onLostFocus="isFocused = false"
-      >
-        <Option value="1" label="Bruce Wayne" />
-      </AutoComplete>
-    </App>
-  `);
-    // Initial state
-    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
-    // Focus the autocomplete
-    yield page.getByText("Select a hero").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete focused");
-    // Blur the autocomplete
-    yield page.keyboard.press("Tab");
-    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
-}));
-(0, fixtures_1.test)("setValue API works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <App>
-      <AutoComplete id="autoComplete">
-        <Option value="1" label="Bruce Wayne" />
-        <Option value="2" label="Clark Kent" />
-        <Option value="3" label="Diana Prince" />
-      </AutoComplete>
-      <Button
-        testId="setButton"
-        label="Set Value"
-        onClick="autoComplete.setValue('2')" />
-      <Text testId="text">Selected value: {autoComplete.value}</Text>
-    </App>
-  `);
-    // Initially no selection
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: ");
-    // Set the value using the API
-    yield page.getByTestId("setButton").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("Selected value: 2");
-    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Clark Kent");
-}));
-(0, fixtures_1.test)("focus API brings focus to the component", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <App var.isFocused="false">
-      <Text testId="focusText">{isFocused === true ? 'AutoComplete focused' : 'AutoComplete lost focus'}</Text>
- 
-      <AutoComplete id="autoComplete">
-        <Option value="1" label="Bruce Wayne" />
-      </AutoComplete>
-      <Button
-        testId="focusButton"
-        label="Focus AutoComplete"
-        onClick="autoComplete.focus()" />
-    </App>
-  `);
-    // Initial state
-    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
-    // Focus the autocomplete using the API
-    yield page.getByTestId("focusButton").click();
-    // Check if the autocomplete is focused
-    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete lost focus");
-    const isFocused = yield page
-        .getByRole("combobox")
-        .evaluate((el) => document.activeElement === el);
-    (0, fixtures_1.expect)(isFocused).toBeTruthy();
-}));
-(0, fixtures_1.test)("autoFocus brings focus to the component on load", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <App var.isFocused="false">
-      <Text testId="focusText">{isFocused === true ? 'AutoComplete focused' : 'AutoComplete lost focus'}</Text>
-      <AutoComplete autoFocus="true" onGotFocus="isFocused = true">
-        <Option value="1" label="Bruce Wayne" />
-      </AutoComplete>
-    </App>
-  `);
-    yield (0, fixtures_1.expect)(page.getByTestId("focusText")).toHaveText("AutoComplete focused");
-}));
-(0, fixtures_1.test)("creates new option when typing non-existing value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createAutoCompleteDriver, }) {
-    const { testStateDriver } = yield initTestBed(`
-    <Fragment>
-      <AutoComplete id="autoComplete" creatable="true" onItemCreated="item => testState = item">
-        <Option value="1" label="Bruce Wayne" />
-        <Option value="2" label="Clark Kent" />
-      </AutoComplete>
-    </Fragment>
-  `);
-    const driver = yield createAutoCompleteDriver("autoComplete");
-    yield driver.click();
-    // Type a new option
-    yield page.keyboard.type("Peter Parker");
-    yield page.keyboard.press("Enter");
-    (0, fixtures_1.expect)(yield testStateDriver.testState()).toBe("Peter Parker");
-}));
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("has appropriate ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    // ), //   "There's a weird issue where the aria-expanded attribute is not set correctly on the input but it is on the wrapping div.", // SKIP_REASON.XMLUI_BUG(
-    // TODO: review these Copilot-created tests
-    yield initTestBed(`
-    <AutoComplete label="Select a hero" placeholder="Search heroes">
-      <Option value="1" label="Bruce Wayne" />
-      <Option value="2" label="Clark Kent" />
-      <Option value="3" label="Diana Prince" />
-    </AutoComplete>
-  `);
-    // Get the combobox element
-    const listWrapper = page.locator('[data-part-id="listWrapper"]').first();
-    const combobox = page.getByRole("combobox");
-    // Check initial ARIA attributes
-    yield (0, fixtures_1.expect)(combobox).toHaveAttribute("aria-autocomplete", "list");
-    yield (0, fixtures_1.expect)(listWrapper).toHaveAttribute("aria-expanded", "false");
-    // Open the dropdown
-    yield combobox.focus();
-    yield page.keyboard.press("Enter");
-    // Check expanded state
-    yield (0, fixtures_1.expect)(listWrapper).toHaveAttribute("aria-expanded", "true");
-}));
-(0, fixtures_1.test)("supports keyboard navigation with arrow keys", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-    yield initTestBed(`
-    <AutoComplete id="autoComplete">
-      <Option value="1" label="Bruce Wayne" />
-      <Option value="2" label="Clark Kent" />
-      <Option value="3" label="Diana Prince" />
-    </AutoComplete>
-  `);
-    // Focus the autocomplete
-    yield page.getByRole("combobox").focus();
-    // Open dropdown with arrow down
-    yield page.keyboard.press("ArrowDown", { delay: 100 });
-    yield (0, fixtures_1.expect)(page.getByRole("listbox")).toBeVisible();
-    // Navigate through options
-    yield page.keyboard.press("ArrowDown", { delay: 100 }); // First option
-    yield page.keyboard.press("ArrowDown", { delay: 100 }); // Second option
-    yield page.keyboard.press("ArrowDown", { delay: 100 }); // Third option
-    yield page.keyboard.press("ArrowUp", { delay: 100 }); // Back to second option
-    // Select with Enter
-    yield page.keyboard.press("Enter", { delay: 100 });
-    // Verify selection
-    yield (0, fixtures_1.expect)(page.getByRole("combobox")).toHaveValue("Clark Kent");
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<AutoComplete width="200px" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<AutoComplete width="200px" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<AutoComplete width="50%" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<AutoComplete width="50%" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    [
-        { value: "--default", prop: "" },
-        { value: "--warning", prop: 'validationStatus="warning"' },
-        { value: "--error", prop: 'validationStatus="error"' },
-        { value: "--success", prop: 'validationStatus="valid"' },
-    ].forEach((variant) => {
-        (0, fixtures_1.test)(`applies correct borderRadius ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderRadius-AutoComplete${variant.value}`]: "12px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-radius", "12px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-AutoComplete${variant.value}`]: "rgb(255, 0, 0)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(255, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct borderWidth ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderWidth-AutoComplete${variant.value}`]: "1px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-width", "1px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderStyle ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderStyle-AutoComplete${variant.value}`]: "dashed" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-style", "dashed");
-        }));
-        (0, fixtures_1.test)(`applies correct fontSize ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`fontSize-AutoComplete${variant.value}`]: "14px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("font-size", "14px");
-        }));
-        (0, fixtures_1.test)(`applies correct backgroundColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`backgroundColor-AutoComplete${variant.value}`]: "rgb(240, 240, 240)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(240, 240, 240)");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-AutoComplete${variant.value}`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-        (0, fixtures_1.test)(`applies correct textColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`textColor-AutoComplete${variant.value}`]: "rgb(0, 0, 0)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-AutoComplete${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct backgroundColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`backgroundColor-AutoComplete${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("background-color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-AutoComplete${variant.value}--hover`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-        (0, fixtures_1.test)(`applies correct textColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<AutoComplete testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`textColor-AutoComplete${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("color", "rgb(0, 0, 0)");
-        }));
-    });
-    (0, fixtures_1.test)("applies correct textColor to placeholder", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<AutoComplete testId="test" placeholder="Search..." />`, {
-            testThemeVars: { "textColor-placeholder-AutoComplete": "rgb(0, 0, 0)" },
-        });
-        const placeholderColor = yield page.evaluate(() => {
-            const input = document.querySelector("input");
-            return window.getComputedStyle(input, "::placeholder").color;
-        });
-        (0, fixtures_1.expect)(placeholderColor).toBe("rgb(0, 0, 0)");
-    }));
-    fixtures_1.test.fixme("applies correct fontSize to placeholder", component_test_helpers_1.SKIP_REASON.UNSURE("Does AutoComplete applies the correct css for the placeholder?"), (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<AutoComplete testId="test" placeholder="Search..." />`, {
-            testThemeVars: { "fontSize-placeholder-AutoComplete--default": "20px" },
-        });
-        const placeholderFontSize = yield page.evaluate(() => {
-            const input = document.querySelector("input");
-            return window.getComputedStyle(input, "::placeholder").fontSize;
-        });
-        (0, fixtures_1.expect)(placeholderFontSize).toBe("20px");
-    }));
-});

package/dist/scripts/src/components/AutoComplete/AutoCompleteContext.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutoCompleteContext = void 0;
-exports.useAutoComplete = useAutoComplete;
-const react_1 = require("react");
-exports.AutoCompleteContext = (0, react_1.createContext)({
-    value: null,
-    onChange: (selectedValue) => { },
-    inputValue: "",
-    searchTerm: "",
-    options: new Set(),
-    open: false,
-    setOpen: (open) => { },
-    setSelectedIndex: (index) => { },
-    optionRenderer: (option, selectedValue, inTrigger) => null,
-});
-function useAutoComplete() {
-    return (0, react_1.useContext)(exports.AutoCompleteContext);
-}