xmlui 0.11.3 → 0.11.6

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

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultProps = void 0;
-exports.AppState = AppState;
-const hooks_1 = require("../../components-core/utils/hooks");
-const AppStateContext_1 = require("../../components/App/AppStateContext");
-exports.defaultProps = {
-    bucket: "default",
-};
-function AppState({ bucket = exports.defaultProps.bucket, updateState, initialValue, registerComponentApi, onDidUpdate, }) {
-    const update = (0, AppStateContext_1.useAppStateContextPart)((value) => value.update);
-    const value = (0, AppStateContext_1.useAppStateContextPart)((value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.appState) === null || _a === void 0 ? void 0 : _a[bucket]; });
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        if (initialValue !== undefined) {
-            update(bucket, initialValue);
-        }
-    }, [bucket, initialValue]);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        updateState({ value });
-        // Fire the didUpdate event when value changes
-        if (onDidUpdate) {
-            onDidUpdate({ bucket, value, previousValue: undefined }); // Note: previousValue tracking could be added if needed
-        }
-    }, [updateState, value, onDidUpdate, bucket]);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        registerComponentApi({
-            update: (patch) => update(bucket, patch),
-            appendToList: (key, id) => {
-                const currentState = value || {};
-                const currentArray = currentState[key] || [];
-                // Only add if the id doesn't already exist in the array
-                if (!currentArray.includes(id)) {
-                    const newArray = [...currentArray, id];
-                    update(bucket, { [key]: newArray });
-                }
-            },
-            removeFromList: (key, id) => {
-                const currentState = value || {};
-                const currentArray = currentState[key] || [];
-                const newArray = currentArray.filter((item) => item !== id);
-                update(bucket, { [key]: newArray });
-            },
-            listIncludes: (key, id) => {
-                const currentState = value || {};
-                const currentArray = currentState[key] || [];
-                return currentArray.includes(id);
-            },
-        });
-    }, [bucket, registerComponentApi, update, value]);
-    return null;
-}

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

@@ -1,109 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.autoCompleteComponentRenderer = exports.AutoCompleteMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const AutoComplete_module_scss_1 = __importDefault(require("./AutoComplete.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const container_helpers_1 = require("../container-helpers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const AutoCompleteNative_1 = require("./AutoCompleteNative");
-const COMP = "AutoComplete";
-exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "`AutoComplete` is a searchable dropdown input that allows users to type and " +
-        "filter through options, with support for single or multiple selections. Unlike " +
-        "a basic [`Select`](/components/Select), it provides type-ahead functionality " +
-        "and can allow users to create new options.",
-    props: {
-        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        maxLength: (0, metadata_helpers_1.dMaxLength)(),
-        autoFocus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dAutoFocus)()), { defaultValue: AutoCompleteNative_1.defaultProps.autoFocus }),
-        required: Object.assign(Object.assign({}, (0, metadata_helpers_1.dRequired)()), { defaultValue: AutoCompleteNative_1.defaultProps.required }),
-        readOnly: Object.assign(Object.assign({}, (0, metadata_helpers_1.dReadonly)()), { defaultValue: AutoCompleteNative_1.defaultProps.readOnly }),
-        enabled: Object.assign(Object.assign({}, (0, metadata_helpers_1.dEnabled)()), { defaultValue: AutoCompleteNative_1.defaultProps.enabled }),
-        initiallyOpen: (0, metadata_helpers_1.d)(`This property determines whether the dropdown list is open when the component is first rendered.`, null, "boolean", AutoCompleteNative_1.defaultProps.initiallyOpen),
-        creatable: (0, metadata_helpers_1.d)(`This property allows the user to create new items that are not present in the list of options.`, null, "boolean", AutoCompleteNative_1.defaultProps.creatable),
-        validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: AutoCompleteNative_1.defaultProps.validationStatus }),
-        dropdownHeight: (0, metadata_helpers_1.d)("This property sets the height of the dropdown list."),
-        multi: Object.assign(Object.assign({}, (0, metadata_helpers_1.dMulti)()), { defaultValue: AutoCompleteNative_1.defaultProps.multi }),
-        optionTemplate: (0, metadata_helpers_1.dComponent)(`This property enables the customization of list items. To access the attributes of ` +
-            `a list item use the \`$item\` context variable.`),
-        emptyListTemplate: (0, metadata_helpers_1.dComponent)("This property defines the template to display when the list of options is empty."),
-    },
-    events: {
-        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
-        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
-        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
-        itemCreated: {
-            description: "This event is triggered when a new item is created by the user " +
-                "(if `creatable` is enabled).",
-        },
-    },
-    apis: {
-        focus: {
-            description: `This method focuses the ${COMP} component.`,
-            signature: "focus()",
-        },
-        value: {
-            description: "This API allows you to get or set the value of the component. If no value is set, " +
-                "it will retrieve `undefined`.",
-            signature: "get value(): any",
-        },
-        setValue: {
-            description: "This API allows you to set the value of the component. If the value is not valid, " +
-                "the component will not update its internal state.",
-            signature: "setValue(value: any)",
-            parameters: {
-                value: "The value to set.",
-            },
-        },
-    },
-    contextVars: {
-        $item: (0, metadata_helpers_1.d)("This context value represents an item when you define an option item template. " +
-            "Use `$item.value` and `$item.label` to refer to the value and label of the " +
-            "particular option."),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(AutoComplete_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`backgroundColor-menu-${COMP}`]: "$color-surface-raised",
-        [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
-        [`borderRadius-menu-${COMP}`]: "$borderRadius",
-        [`borderWidth-menu-${COMP}`]: "1px",
-        [`borderColor-menu-${COMP}`]: "$borderColor",
-        [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
-        [`fontSize-${COMP}-badge`]: "$fontSize-sm",
-        [`paddingHorizontal-${COMP}-badge`]: "$space-2_5",
-        [`paddingVertical-${COMP}-badge`]: "$space-0_5",
-        [`borderRadius-${COMP}-badge`]: "$borderRadius",
-        [`paddingHorizontal-item-${COMP}`]: "$space-2",
-        [`paddingVertical-item-${COMP}`]: "$space-2",
-        [`paddingHorizontal-${COMP}`]: "$space-2",
-        [`paddingVertical-${COMP}`]: "$space-2",
-        [`opacity-text-item-${COMP}--disabled`]: "0.5",
-        [`opacity-${COMP}--disabled`]: "0.5",
-        [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
-        [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
-        [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
-        [`textColor-${COMP}-badge`]: "$const-color-surface-50",
-        [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
-        [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--hover",
-        [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
-        // Default borderColor-Input--disabled is too light so the disabled component is barely visible
-        [`borderColor-${COMP}--disabled`]: "initial",
-    },
-});
-exports.autoCompleteComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AutoCompleteMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, registerComponentApi, className, }) => {
-    return ((0, jsx_runtime_1.jsx)(AutoCompleteNative_1.AutoComplete, { multi: extractValue.asOptionalBoolean(node.props.multi), className: className, updateState: updateState, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, creatable: extractValue.asOptionalBoolean(node.props.creatable), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), onItemCreated: lookupEventHandler("itemCreated"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), initiallyOpen: extractValue.asOptionalBoolean(node.props.initiallyOpen), optionRenderer: node.props.optionTemplate
-            ? (item, val, inTrigger) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, context: {
-                        $selectedValue: val,
-                        $inTrigger: inTrigger,
-                    }, renderChild: renderChild }));
-            }
-            : undefined, children: renderChild(node.children) }));
-});

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

@@ -1,433 +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 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);
-}));

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);
-}