xmlui 0.10.14 → 0.10.16

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.14",
+    "version": "0.10.16",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -34,7 +34,7 @@
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-alert-dialog": "^1.1.2",
         "@radix-ui/react-dialog": "1.0.5",
-        "@radix-ui/react-dropdown-menu": "2.0.6",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
         "@radix-ui/react-focus-scope": "1.0.4",
         "@radix-ui/react-hover-card": "1.0.7",
         "@radix-ui/react-popover": "^1.1.2",
@@ -131,7 +131,6 @@
         "@types/react-datepicker": "4.19.5",
         "@types/react-dom": "18.2.8",
         "@types/react-measure": "^2.0.8",
-        "@types/react-pdf": "5.7.2",
         "@types/react-window": "1.8.8",
         "@types/yargs": "17.0.31",
         "@typescript-eslint/eslint-plugin": "8.15.0",

package/dist/scripts/src/components/Animation/AnimationNative.js

@@ -193,6 +193,7 @@ exports.Animation = (0, react_1.forwardRef)(function Animation(_a, forwardedRef)
     const [reset, setReset] = (0, react_1.useState)(false);
     const [count, setCount] = (0, react_1.useState)(0);
     const times = 1;
+    const animationId = (0, react_1.useId)();
     const animationSettings = (0, react_1.useMemo)(() => ({
         from: _animation.from,
         to: _animation.to,
@@ -217,7 +218,9 @@ exports.Animation = (0, react_1.forwardRef)(function Animation(_a, forwardedRef)
                 }
             }
         },
-        onStart: () => onStart === null || onStart === void 0 ? void 0 : onStart(),
+        onStart: () => {
+            onStart === null || onStart === void 0 ? void 0 : onStart();
+        },
     }), [
         _animation.config,
         _animation.from,
@@ -231,6 +234,7 @@ exports.Animation = (0, react_1.forwardRef)(function Animation(_a, forwardedRef)
         reset,
         reverse,
         toggle,
+        animationId,
     ]);
     const [springs, api] = (0, web_1.useSpring)(() => (Object.assign({}, animationSettings)), [animationSettings]);
     const [ref, animationStyles] = (0, web_1.useInView)(() => animationSettings, {

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

@@ -12,6 +12,10 @@ exports.AppStateMd = (0, metadata_helpers_1.createMetadata)({
         "across your entire application. Unlike component variables that are scoped " +
         "locally, AppState allows any component to access and update shared state " +
         "without prop drilling.",
+    events: {
+        didUpdate: (0, metadata_helpers_1.d)("This event is fired when the AppState value is updated. The event provides " +
+            "the new state value as its parameter."),
+    },
     props: {
         bucket: {
             description: `This property is the identifier of the bucket to which the \`${COMP}\` instance is bound. ` +
@@ -36,9 +40,35 @@ exports.AppStateMd = (0, metadata_helpers_1.createMetadata)({
                 newState: "An object that specifies the new state value.",
             },
         },
+        appendToList: {
+            signature: "appendToList(key: string, id: any)",
+            description: "This method appends an item to an array in the application state object bound to the" +
+                " `AppState` instance.",
+            parameters: {
+                key: "The key of the array in the state object.",
+                id: "The item to append to the array.",
+            },
+        },
+        removeFromList: {
+            signature: "removeFromList(key: string, id: any)",
+            description: "This method removes an item from an array in the application state object bound to the" +
+                " `AppState` instance.",
+            parameters: {
+                key: "The key of the array in the state object.",
+                id: "The item to remove from the array.",
+            },
+        },
+        listIncludes: {
+            signature: "listIncludes(key: string, id: any)",
+            description: "This method checks if an array in the application state object contains a specific item.",
+            parameters: {
+                key: "The key of the array in the state object.",
+                id: "The item to check for in the array.",
+            },
+        },
     },
     nonVisual: true,
 });
-exports.appStateComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppStateMd, ({ node, extractValue, updateState, registerComponentApi }) => {
-    return ((0, jsx_runtime_1.jsx)(AppStateNative_1.AppState, { bucket: extractValue(node.props.bucket), initialValue: extractValue(node.props.initialValue), updateState: updateState, registerComponentApi: registerComponentApi }));
+exports.appStateComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppStateMd, ({ node, extractValue, updateState, registerComponentApi, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(AppStateNative_1.AppState, { bucket: extractValue(node.props.bucket), initialValue: extractValue(node.props.initialValue), updateState: updateState, registerComponentApi: registerComponentApi, onDidUpdate: lookupEventHandler("didUpdate") }));
 });

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

@@ -7,7 +7,7 @@ const AppStateContext_1 = require("../../components/App/AppStateContext");
 exports.defaultProps = {
     bucket: "default",
 };
-function AppState({ bucket = exports.defaultProps.bucket, updateState, initialValue, registerComponentApi, }) {
+function AppState({ bucket = exports.defaultProps.bucket, updateState, initialValue, registerComponentApi, onDidUpdate, }) {
     const registerAppState = (0, AppStateContext_1.useAppStateContextPart)((value) => value.registerAppState);
     const update = (0, AppStateContext_1.useAppStateContextPart)((value) => value.update);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
@@ -18,11 +18,35 @@ function AppState({ bucket = exports.defaultProps.bucket, updateState, initialVa
     const value = (0, AppStateContext_1.useAppStateContextPart)((value) => value.appState[bucket]);
     (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         updateState({ value });
-    }, [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]);
+    }, [bucket, registerComponentApi, update, value]);
     return null;
 }

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

@@ -29,10 +29,6 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
         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 }),
-        label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: Object.assign(Object.assign({}, (0, metadata_helpers_1.dLabelPosition)()), { defaultValue: AutoCompleteNative_1.defaultProps.labelPosition }),
-        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
-        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         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 ` +
@@ -97,7 +93,7 @@ exports.AutoCompleteMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 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), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), 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
+    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,

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

@@ -7,9 +7,11 @@ 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() {

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

@@ -18,7 +18,6 @@ exports.AutoComplete = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
-const cmdk_1 = require("cmdk");
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const AutoComplete_module_scss_1 = __importDefault(require("../../components/AutoComplete/AutoComplete.module.scss"));
@@ -28,7 +27,6 @@ const AutoCompleteContext_1 = require("./AutoCompleteContext");
 const OptionContext_1 = require("../Select/OptionContext");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const react_popover_1 = require("@radix-ui/react-popover");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const HiddenOption_1 = require("../Select/HiddenOption");
 const parts_1 = require("../../components-core/parts");
 const PART_LIST_WRAPPER = "listWrapper";
@@ -65,6 +63,34 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
     const inputId = id || generatedId;
     const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(-1);
+    // Filter options based on search term
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        if (!searchTerm || searchTerm.trim() === "") {
+            return Array.from(options);
+        }
+        const searchLower = searchTerm.toLowerCase();
+        return Array.from(options).filter((option) => {
+            const extendedValue = option.value + " " + option.label + " " + (option.keywords || []).join(" ");
+            return extendedValue.toLowerCase().includes(searchLower);
+        });
+    }, [options, searchTerm]);
+    // Check if we should show creatable item
+    const shouldShowCreatable = (0, react_1.useMemo)(() => {
+        if (!creatable || !searchTerm || searchTerm.trim() === "")
+            return false;
+        // Check if the search term already exists as an option
+        const searchTermExists = Array.from(options).some((option) => option.value === searchTerm || option.label === searchTerm);
+        if (searchTermExists)
+            return false;
+        // Check if it's already selected
+        if (Array.isArray(value) && value.includes(searchTerm))
+            return false;
+        if (value === searchTerm)
+            return false;
+        // Only show creatable if there are no matching filtered options
+        return filteredOptions.length === 0;
+    }, [creatable, searchTerm, options, value, filteredOptions]);
     // Set initial state based on the initialValue prop
     (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
@@ -96,15 +122,12 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
     }, [value, options]);
     const toggleOption = (0, react_1.useCallback)((selectedItem) => {
         var _a;
-        if (multi) {
-            setInputValue("");
-            setSearchTerm("");
-        }
-        else {
-            setOpen(true);
-        }
         if (selectedItem === "")
             return;
+        // Check if the option is enabled
+        const option = Array.from(options).find((opt) => opt.value === selectedItem);
+        if (option && option.enabled === false)
+            return;
         const newSelectedValue = multi
             ? Array.isArray(value)
                 ? value.includes(selectedItem)
@@ -116,8 +139,18 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
                 : selectedItem;
         updateState({ value: newSelectedValue });
         onDidChange(newSelectedValue);
+        if (multi) {
+            setInputValue("");
+            setSearchTerm("");
+            // Keep dropdown open for multi-select
+        }
+        else {
+            // Close dropdown for single select
+            setOpen(false);
+            setSearchTerm("");
+        }
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [multi, value, updateState, onDidChange]);
+    }, [multi, value, updateState, onDidChange, options]);
     (0, react_1.useEffect)(() => {
         if (!Array.isArray(selectedValue)) {
             setInputValue((selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label) || "");
@@ -141,6 +174,131 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
             return optionsSet;
         });
     }, []);
+    // Combined list of all items (creatable + filtered options)
+    const allItems = (0, react_1.useMemo)(() => {
+        const items = [];
+        if (shouldShowCreatable) {
+            items.push({ type: "creatable", value: searchTerm, label: `Create "${searchTerm}"` });
+        }
+        filteredOptions.forEach((option) => {
+            items.push(Object.assign({ type: "option" }, option));
+        });
+        return items;
+    }, [shouldShowCreatable, searchTerm, filteredOptions]);
+    // Helper functions to find next/previous enabled option
+    const findNextEnabledIndex = (0, react_1.useCallback)((currentIndex) => {
+        for (let i = currentIndex + 1; i < allItems.length; i++) {
+            const item = allItems[i];
+            if (item.type === "creatable" || item.enabled !== false) {
+                return i;
+            }
+        }
+        // Wrap around to beginning
+        for (let i = 0; i <= currentIndex; i++) {
+            const item = allItems[i];
+            if (item.type === "creatable" || item.enabled !== false) {
+                return i;
+            }
+        }
+        return -1;
+    }, [allItems]);
+    const findPreviousEnabledIndex = (0, react_1.useCallback)((currentIndex) => {
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            const item = allItems[i];
+            if (item.type === "creatable" || item.enabled !== false) {
+                return i;
+            }
+        }
+        // Wrap around to end
+        for (let i = allItems.length - 1; i >= currentIndex; i--) {
+            const item = allItems[i];
+            if (item.type === "creatable" || item.enabled !== false) {
+                return i;
+            }
+        }
+        return -1;
+    }, [allItems]);
+    // Reset selected index when options change, but select matching option when dropdown opens
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            setSelectedIndex(-1);
+        }
+        else if (!multi && open && inputValue) {
+            // For single-select, when dropdown opens and there's an input value, try to find and select the matching option
+            const matchingIndex = allItems.findIndex((item) => {
+                var _a, _b;
+                if (item.type === "creatable")
+                    return false;
+                return ((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === inputValue.toLowerCase() ||
+                    ((_b = item.value) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === inputValue.toLowerCase();
+            });
+            if (matchingIndex !== -1) {
+                setSelectedIndex(matchingIndex);
+            }
+            else {
+                setSelectedIndex(-1);
+            }
+        }
+        else if (!multi && open && !inputValue) {
+            setSelectedIndex(-1);
+        }
+        // For multi-select, don't reset selectedIndex when dropdown is open - preserve keyboard navigation
+    }, [allItems, multi, open, inputValue]);
+    // Keyboard navigation
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (!open)
+            return;
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                setSelectedIndex((prev) => {
+                    const nextIndex = findNextEnabledIndex(prev);
+                    return nextIndex !== -1 ? nextIndex : prev;
+                });
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                setSelectedIndex((prev) => {
+                    const prevIndex = findPreviousEnabledIndex(prev);
+                    return prevIndex !== -1 ? prevIndex : prev;
+                });
+                break;
+            case "Enter":
+                event.preventDefault();
+                if (selectedIndex >= 0 && selectedIndex < allItems.length) {
+                    const selectedItem = allItems[selectedIndex];
+                    if (selectedItem.type === "creatable") {
+                        const newOption = { value: searchTerm, label: searchTerm, enabled: true };
+                        onOptionAdd(newOption);
+                        onItemCreated(searchTerm);
+                        toggleOption(searchTerm);
+                    }
+                    else if (selectedItem.enabled !== false) {
+                        // Only toggle if the option is enabled
+                        toggleOption(selectedItem.value);
+                    }
+                }
+                else if (allItems.length === 1) {
+                    // If there's only one item (creatable or regular) and no selection, select it
+                    const singleItem = allItems[0];
+                    if (singleItem.type === "creatable") {
+                        const newOption = { value: searchTerm, label: searchTerm, enabled: true };
+                        onOptionAdd(newOption);
+                        onItemCreated(searchTerm);
+                        toggleOption(searchTerm);
+                    }
+                    else if (singleItem.enabled !== false) {
+                        // Only toggle if the option is enabled
+                        toggleOption(singleItem.value);
+                    }
+                }
+                break;
+            case "Escape":
+                event.preventDefault();
+                setOpen(false);
+                break;
+        }
+    }, [open, selectedIndex, allItems, searchTerm, onOptionAdd, onItemCreated, toggleOption, setOpen, findNextEnabledIndex, findPreviousEnabledIndex]);
     // Render the "empty list" message
     const emptyListNode = (0, react_1.useMemo)(() => emptyListTemplate !== null && emptyListTemplate !== void 0 ? emptyListTemplate : ((0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.autoCompleteEmpty, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "noresult" }), (0, jsx_runtime_1.jsx)("span", { children: "List is empty" })] })), [emptyListTemplate]);
     // Register component API for external interactions
@@ -168,106 +326,129 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete(_a, forward
             onChange: toggleOption,
             options,
             inputValue,
+            searchTerm,
             open,
             setOpen,
+            setSelectedIndex,
             optionRenderer,
         };
-    }, [inputValue, multi, options, toggleOption, value, open, setOpen, optionRenderer]);
+    }, [inputValue, searchTerm, multi, options, toggleOption, value, open, setOpen, setSelectedIndex, optionRenderer]);
     return ((0, jsx_runtime_1.jsx)(AutoCompleteContext_1.AutoCompleteContext.Provider, { value: autoCompleteContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: (0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption_1.HiddenOption, children: [(0, jsx_runtime_1.jsx)(react_popover_1.Popover, { open: open, onOpenChange: (isOpen) => {
                             if (readOnly)
                                 return;
                             setOpen(isOpen);
-                        }, modal: false, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { ref: dropdownRef, className: AutoComplete_module_scss_1.default.command, filter: (value, search, keywords) => {
-                                if (readOnly)
-                                    return 1;
-                                if (!searchTerm || searchTerm.trim() === "")
-                                    return 1;
-                                const extendedValue = value + " " + keywords.join(" ");
-                                if (extendedValue.toLowerCase().includes(search.toLowerCase()))
-                                    return 1;
-                                return 0;
-                            }, children: [(0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, Object.assign({}, rest, { id: inputId, ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, className: className, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("div", { "data-part-id": PART_LIST_WRAPPER, ref: setReferenceElement, style: Object.assign({ width: "100%" }, style), className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
-                                                [AutoComplete_module_scss_1.default.disabled]: !enabled,
-                                                [AutoComplete_module_scss_1.default.focused]: isFocused,
-                                            }), children: [Array.isArray(selectedValue) && ((0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: selectedValue.map((v, index) => ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [v === null || v === void 0 ? void 0 : v.label, !readOnly && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
-                                                                    event.stopPropagation();
-                                                                    toggleOption(v.value);
-                                                                } }))] }, index))) })), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { onFocus: (ev) => {
-                                                        setIsFocused(true);
-                                                        onFocus(ev);
-                                                    }, onBlur: (ev) => {
-                                                        if (inputValue === "" && !multi) {
-                                                            clearValue();
-                                                        }
-                                                        else {
-                                                            if (!Array.isArray(selectedValue) && selectedValue) {
-                                                                setInputValue(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label);
+                            if (!isOpen) {
+                                // Reset highlighted option when dropdown closes
+                                setSelectedIndex(-1);
+                            }
+                        }, modal: false, children: (0, jsx_runtime_1.jsxs)("div", { ref: dropdownRef, className: AutoComplete_module_scss_1.default.command, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, ref: setReferenceElement, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: forwardedRef, "data-part-id": PART_LIST_WRAPPER, style: Object.assign({ width: "100%" }, style), className: (0, classnames_1.default)(className, AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
+                                            [AutoComplete_module_scss_1.default.disabled]: !enabled,
+                                            [AutoComplete_module_scss_1.default.focused]: isFocused,
+                                        }), "aria-expanded": open, children: [Array.isArray(selectedValue) && selectedValue.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: selectedValue.map((v, index) => ((0, jsx_runtime_1.jsxs)("span", { className: AutoComplete_module_scss_1.default.badge, children: [v === null || v === void 0 ? void 0 : v.label, !readOnly && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", size: "sm", onClick: (event) => {
+                                                                event.stopPropagation();
+                                                                toggleOption(v.value);
+                                                            } }))] }, index))) })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.inputWrapper, children: [(0, jsx_runtime_1.jsx)("input", { role: "combobox", id: inputId, onFocus: (ev) => {
+                                                            setIsFocused(true);
+                                                            onFocus(ev);
+                                                        }, onBlur: (ev) => {
+                                                            if (inputValue === "" && !multi) {
+                                                                clearValue();
                                                             }
                                                             else {
-                                                                setInputValue("");
+                                                                if (!Array.isArray(selectedValue) && selectedValue) {
+                                                                    setInputValue(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label);
+                                                                }
+                                                                else {
+                                                                    setInputValue("");
+                                                                }
+                                                            }
+                                                            onBlur(ev);
+                                                            setIsFocused(false);
+                                                        }, onKeyDown: (event) => {
+                                                            if (readOnly)
+                                                                return;
+                                                            // Handle opening dropdown
+                                                            if (event.key === "ArrowDown" && !open) {
+                                                                setOpen(true);
+                                                                return;
+                                                            }
+                                                            // Handle keyboard navigation when dropdown is open
+                                                            if (open) {
+                                                                handleKeyDown(event);
                                                             }
-                                                        }
-                                                        onBlur(ev);
-                                                        setIsFocused(false);
-                                                    }, onKeyDown: (event) => {
-                                                        if (readOnly)
-                                                            return;
-                                                        if (event.key === "ArrowDown") {
+                                                            else if (event.key === "Enter") {
+                                                                setOpen(true);
+                                                            }
+                                                        }, "data-part-id": parts_1.PART_INPUT, readOnly: readOnly, autoFocus: autoFocus, "aria-autocomplete": "list", ref: inputRef, value: inputValue, disabled: !enabled, onChange: (event) => {
                                                             setOpen(true);
-                                                        }
-                                                        if (event.key === "Enter") {
-                                                            setOpen((prev) => !prev);
-                                                        }
-                                                    }, id: inputId, "data-part-id": parts_1.PART_INPUT, readOnly: readOnly, autoFocus: autoFocus, "aria-expanded": open, ref: inputRef, value: inputValue, disabled: !enabled, onValueChange: (value) => {
-                                                        setOpen(true);
-                                                        setInputValue(value);
-                                                        setSearchTerm(value);
-                                                    }, placeholder: !readOnly ? placeholder : "", className: AutoComplete_module_scss_1.default.commandInput }), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.actions, children: [(value === null || value === void 0 ? void 0 : value.length) > 0 && enabled && !readOnly && ((0, jsx_runtime_1.jsx)("span", { className: AutoComplete_module_scss_1.default.action, onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                clearValue();
-                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), (0, jsx_runtime_1.jsx)("span", { className: AutoComplete_module_scss_1.default.action, onClick: () => {
-                                                                if (readOnly)
-                                                                    return;
-                                                                setOpen(!open);
-                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] }) }) })), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { asChild: true, style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { role: "listbox", className: AutoComplete_module_scss_1.default.commandList, style: { height: dropdownHeight }, children: [(0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode }), creatable && (0, jsx_runtime_1.jsx)(CreatableItem, { onNewItem: onItemCreated }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandGroup, { children: Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, readOnly: readOnly }, value))) })] }) }) }))] }) }), children] }) }) }));
+                                                            setInputValue(event.target.value);
+                                                            setSearchTerm(event.target.value);
+                                                        }, placeholder: !readOnly ? placeholder : "", className: AutoComplete_module_scss_1.default.commandInput }), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.actions, children: [(value === null || value === void 0 ? void 0 : value.length) > 0 && enabled && !readOnly && ((0, jsx_runtime_1.jsx)("span", { className: AutoComplete_module_scss_1.default.action, onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    clearValue();
+                                                                }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), (0, jsx_runtime_1.jsx)("span", { className: AutoComplete_module_scss_1.default.action, onClick: () => {
+                                                                    var _a;
+                                                                    if (readOnly)
+                                                                        return;
+                                                                    setOpen(!open);
+                                                                    // Focus the input after opening dropdown
+                                                                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                                                }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] })] })) }), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)("div", { role: "listbox", className: AutoComplete_module_scss_1.default.commandList, style: { height: dropdownHeight }, children: [filteredOptions.length === 0 && !shouldShowCreatable && ((0, jsx_runtime_1.jsx)("div", { children: emptyListNode })), shouldShowCreatable && ((0, jsx_runtime_1.jsx)(CreatableItem, { onNewItem: onItemCreated, isHighlighted: selectedIndex === 0 })), (0, jsx_runtime_1.jsx)("div", { children: filteredOptions.map(({ value, label, enabled, keywords }, index) => {
+                                                        const itemIndex = shouldShowCreatable ? index + 1 : index;
+                                                        return ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, readOnly: readOnly, isHighlighted: selectedIndex === itemIndex, itemIndex: itemIndex }, value));
+                                                    }) })] }) }) }))] }) }), children] }) }) }));
 });
-function CreatableItem({ onNewItem }) {
-    const { value, options, inputValue, onChange, setOpen } = (0, AutoCompleteContext_1.useAutoComplete)();
+function CreatableItem({ onNewItem, isHighlighted = false }) {
+    const { value, options, searchTerm, onChange, setOpen, setSelectedIndex } = (0, AutoCompleteContext_1.useAutoComplete)();
     const { onOptionAdd } = (0, OptionContext_1.useOption)();
-    if (isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||
-        (Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.find((s) => s === inputValue))) ||
-        inputValue === value) {
+    if (isOptionsExist(options, [{ value: searchTerm, label: searchTerm }]) ||
+        (Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.find((s) => s === searchTerm))) ||
+        searchTerm === value) {
         return (0, jsx_runtime_1.jsx)("span", { style: { display: "none" } });
     }
-    const Item = ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { value: inputValue, className: AutoComplete_module_scss_1.default.autoCompleteOption, onMouseDown: (e) => {
+    const handleClick = () => {
+        const newOption = { value: searchTerm, label: searchTerm, enabled: true };
+        onOptionAdd(newOption);
+        onNewItem === null || onNewItem === void 0 ? void 0 : onNewItem(searchTerm);
+        onChange(searchTerm);
+        setOpen(false);
+    };
+    const Item = ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {
+            [AutoComplete_module_scss_1.default.highlighted]: isHighlighted,
+        }), onMouseDown: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, onSelect: (value) => {
-            const newOption = { value, label: value, enabled: true };
-            onOptionAdd(newOption);
-            onNewItem === null || onNewItem === void 0 ? void 0 : onNewItem(value);
-            onChange(value);
-            setOpen(false);
-        }, children: `Create "${inputValue}"` }));
+        }, onMouseEnter: () => {
+            if (setSelectedIndex) {
+                setSelectedIndex(0); // CreatableItem is always at index 0
+            }
+        }, onClick: handleClick, role: "option", "aria-selected": isHighlighted, children: `Create "${searchTerm}"` }));
     // For normal creatable
-    if (inputValue.length > 0) {
+    if (searchTerm.length > 0) {
         return Item;
     }
     return (0, jsx_runtime_1.jsx)("span", { style: { display: "none" } });
 }
 function AutoCompleteOption(option) {
-    const { value, label, enabled = true, keywords, readOnly, children } = option;
+    const { value, label, enabled = true, keywords, readOnly, children, isHighlighted = false, itemIndex, } = option;
     const id = (0, react_1.useId)();
-    const { value: selectedValue, onChange, multi, setOpen, optionRenderer } = (0, AutoCompleteContext_1.useAutoComplete)();
+    const { value: selectedValue, onChange, multi, setOpen, setSelectedIndex, optionRenderer } = (0, AutoCompleteContext_1.useAutoComplete)();
     const selected = multi ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : selectedValue === value;
-    return ((0, jsx_runtime_1.jsx)(cmdk_1.CommandItem, { id: id, disabled: !enabled, value: `${value}`, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {
+    const handleClick = () => {
+        if (!readOnly && enabled) {
+            onChange(value);
+            setOpen(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { id: id, role: "option", "aria-disabled": !enabled, "aria-selected": isHighlighted, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.autoCompleteOption, {
             [AutoComplete_module_scss_1.default.disabledOption]: !enabled,
+            [AutoComplete_module_scss_1.default.highlighted]: isHighlighted,
         }), onMouseDown: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, onSelect: () => {
-            if (!readOnly && enabled)
-                onChange(value);
-            setOpen(false);
-        }, "data-state": enabled ? (selected ? "checked" : undefined) : "disabled", keywords: keywords, children: children ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.autoCompleteOptionContent, children: children }), selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) : optionRenderer ? (optionRenderer({ label, value, enabled }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.autoCompleteOptionContent, children: label }), selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }, id));
+        }, onMouseEnter: () => {
+            if (itemIndex !== undefined && setSelectedIndex && enabled) {
+                setSelectedIndex(itemIndex);
+            }
+        }, onClick: handleClick, children: children ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.autoCompleteOptionContent, children: children }), selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) : optionRenderer ? (optionRenderer({ label, value, enabled }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AutoComplete_module_scss_1.default.autoCompleteOptionContent, children: label }), selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }));
 }