@mezzanine-ui/react 1.0.0-beta.1 → 1.0.0-beta.3

package/AutoComplete/AutoComplete.js

@@ -0,0 +1,419 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useCallback, useImperativeHandle, useEffect, useId, useMemo, useRef } from 'react';
+import { autocompleteClasses } from '@mezzanine-ui/core/autocomplete';
+import { useAutoCompleteValueControl } from '../Form/useAutoCompleteValueControl.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { SelectControlContext } from '../Select/SelectControlContext.js';
+import SelectTrigger from '../Select/SelectTrigger.js';
+import { useAutoCompleteCreation } from './useAutoCompleteCreation.js';
+import { useAutoCompleteKeyboard } from './useAutoCompleteKeyboard.js';
+import { useAutoCompleteSearch } from './useAutoCompleteSearch.js';
+import { useCreationTracker } from './useCreationTracker.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+import cx from 'clsx';
+
+const MENU_ID_PREFIX = 'mzn-select-autocomplete-menu-id';
+/**
+ * Type guard to check if value is array (multiple mode)
+ */
+function isMultipleValue(value) {
+    return Array.isArray(value);
+}
+/**
+ * Type guard to check if value is single (single mode)
+ */
+function isSingleValue(value) {
+    return value !== null && value !== undefined && !Array.isArray(value);
+}
+/**
+ * Check if an option is already selected
+ */
+function isOptionSelected(option, value, isMultiple) {
+    if (isMultiple && isMultipleValue(value)) {
+        return value.some((v) => v.id === option.id);
+    }
+    if (!isMultiple && isSingleValue(value)) {
+        return value.id === option.id;
+    }
+    return false;
+}
+/**
+ * The AutoComplete component for react. <br />
+ * Note that if you need search for ONLY given options, not included your typings,
+ * should considering using the `Select` component with `onSearch` prop.
+ */
+const AutoComplete = forwardRef(function AutoComplete(props, ref) {
+    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const { addable = false, asyncData = false, className, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText, menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onVisibilityChange, open: openProp, options: optionsProp, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', } = props;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+    const isMultiple = mode === 'multiple';
+    const isSingle = !isMultiple;
+    const isOpenControlled = openProp !== undefined;
+    const open = isOpenControlled ? openProp : uncontrolledOpen;
+    const toggleOpen = useCallback((newOpen) => {
+        const nextValue = typeof newOpen === 'function' ? newOpen(open) : newOpen;
+        if (!isOpenControlled) {
+            setUncontrolledOpen(nextValue);
+        }
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(nextValue);
+    }, [isOpenControlled, open, onVisibilityChange]);
+    const { focused, onFocus, onChange, onClear, options, searchText, setSearchText, value, } = useAutoCompleteValueControl(isMultiple
+        ? {
+            defaultValue: isMultipleValue(defaultValue) ? defaultValue : undefined,
+            disabledOptionsFilter,
+            mode: 'multiple',
+            onChange: onChangeProp,
+            onClear: onClearProp,
+            onClose: () => toggleOpen(false),
+            onSearch,
+            options: optionsProp,
+            value: isMultipleValue(valueProp) ? valueProp : undefined,
+        }
+        : {
+            defaultValue: isSingleValue(defaultValue) ? defaultValue : undefined,
+            disabledOptionsFilter,
+            mode: 'single',
+            onChange: onChangeProp,
+            onClear: onClearProp,
+            onClose: () => toggleOpen(false),
+            onSearch,
+            options: optionsProp,
+            value: isSingleValue(valueProp) || valueProp === null ? valueProp : undefined,
+        });
+    /** export set search text action to props (allow user to customize search text) */
+    useImperativeHandle(searchTextControlRef, () => ({ setSearchText }));
+    /** Track created items (new, unselected, all) */
+    const { clearUnselected, filterUnselected, isCreated, markCreated, clearNewlyCreated, markUnselected, } = useCreationTracker();
+    const creationEnabled = addable && typeof onInsert === 'function';
+    useEffect(() => {
+        if (addable && !onInsert) {
+            console.warn('[AutoComplete] `addable` 已開啟但未提供 `onInsert`，已停用建立功能。');
+        }
+    }, [addable, onInsert]);
+    const idSeed = useId();
+    const menuId = useMemo(() => `${MENU_ID_PREFIX}-${idSeed}`, [idSeed]);
+    const { handleActionCustom, handleBulkCreate, handlePaste, insertText, processBulkCreate, resetCreationInputs, setInsertText, } = useAutoCompleteCreation({
+        addable: creationEnabled,
+        clearUnselected,
+        createSeparators,
+        filterUnselected,
+        isMultiple,
+        isSingle,
+        markCreated,
+        clearNewlyCreated,
+        markUnselected,
+        onChangeMultiple: isMultiple
+            ? onChangeProp
+            : undefined,
+        onFocus,
+        onInsert,
+        options,
+        setSearchText,
+        toggleOpen,
+        trimOnCreate,
+        value,
+        wrappedOnChange: (chooseOption) => wrappedOnChange(chooseOption),
+    });
+    const { cancelSearch, isLoading, runSearch, } = useAutoCompleteSearch({
+        asyncData,
+        loading,
+        onSearch,
+        searchDebounceTime,
+    });
+    // Wrap onChange to track unselected created items
+    const wrappedOnChange = useCallback((chooseOption) => {
+        const result = onChange(chooseOption);
+        if (chooseOption) {
+            clearNewlyCreated([chooseOption.id]);
+        }
+        // In multiple mode, check if any created items were unselected
+        if (isMultiple && isMultipleValue(value) && isMultipleValue(result)) {
+            // Find items that were in value but not in result (unselected)
+            const unselectedItems = value.filter((v) => !result.some((r) => r.id === v.id));
+            // If any unselected item was created via onInsert, track it
+            markUnselected(unselectedItems.map((item) => item.id));
+        }
+        else if (isSingle && isSingleValue(value) && !result) {
+            // In single mode, if value was cleared and it was a created item, track it
+            markUnselected([value.id]);
+        }
+        return result;
+    }, [clearNewlyCreated, isMultiple, isSingle, markUnselected, onChange, value]);
+    const nodeRef = useRef(null);
+    const controlRef = useRef(null);
+    const composedRef = useComposeRefs([ref, controlRef]);
+    // In single mode, show searchText when focused, otherwise show selected value
+    // In multiple mode, always return empty string to avoid displaying "0"
+    const renderValue = useMemo(() => {
+        if (isSingle && focused) {
+            return () => searchText;
+        }
+        if (isMultiple) {
+            return () => '';
+        }
+        return undefined;
+    }, [focused, isMultiple, isSingle, searchText]);
+    function getPlaceholder() {
+        if (isSingle && focused && isSingleValue(value)) {
+            return value.name;
+        }
+        return placeholder;
+    }
+    /** Trigger input props */
+    const onSearchInputChange = (e) => {
+        const nextSearch = e.target.value;
+        /** should sync both search input and value */
+        setSearchText(nextSearch);
+        setInsertText(nextSearch);
+        if (autoSelectMatchingOption(nextSearch))
+            return;
+        if (!nextSearch) {
+            cancelSearch();
+            runSearch(nextSearch, { immediate: true });
+            return;
+        }
+        runSearch(nextSearch);
+    };
+    const onSearchInputFocus = (e) => {
+        var _a;
+        // When inputPosition is inside, let Dropdown handle the focus event
+        // Otherwise, stop propagation to prevent conflicts
+        if (inputPosition !== 'inside') {
+            e.stopPropagation();
+        }
+        // Only open if not already open to avoid flickering
+        // When inputPosition is inside, Dropdown will handle opening via inlineTriggerElement
+        if (inputPosition !== 'inside' && !open) {
+            toggleOpen(true);
+        }
+        onFocus(true);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    const onSearchInputBlur = (e) => {
+        var _a, _b, _c;
+        // When inputPosition is inside, we need special handling
+        if (inputPosition === 'inside') {
+            // When open is controlled, prevent default blur behavior to avoid conflicts
+            // The controlled open state should be the source of truth
+            if (isOpenControlled) {
+                // Don't let Dropdown's onBlur close the dropdown when controlled
+                // Only call onFocus(false) to update internal state
+                onFocus(false);
+                (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                return;
+            }
+            // For uncontrolled mode, let Dropdown handle it normally
+            // Dropdown's inlineTriggerElement will handle the blur and close logic
+            (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(inputProps, e);
+            return;
+        }
+        onFocus(false);
+        (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _c === void 0 ? void 0 : _c.call(inputProps, e);
+    };
+    const onClickSuffixActionIcon = () => {
+        toggleOpen((prev) => !prev);
+    };
+    const searchTextExistWithoutOption = !!searchText &&
+        options.find((option) => option.name === searchText) === undefined;
+    const shouldShowCreateAction = !!(searchTextExistWithoutOption && creationEnabled && insertText);
+    const context = useMemo(() => ({ onChange: wrappedOnChange, value }), [wrappedOnChange, value]);
+    // Convert SelectValue[] to DropdownOption[]
+    const dropdownOptions = useMemo(() => {
+        return options.map((option) => {
+            const created = isCreated(option.id);
+            const result = {
+                id: option.id,
+                name: option.name,
+            };
+            // Set checkSite based on mode
+            // Multiple mode: show checkbox at prepend
+            // Single mode: show checked icon at append when selected
+            if (mode === 'multiple') {
+                result.checkSite = 'prepend';
+            }
+            else {
+                result.checkSite = 'append';
+            }
+            // Set shortcutText to "New" for created items (persists even after selection)
+            if (created) {
+                result.shortcutText = 'New';
+            }
+            return result;
+        });
+    }, [isCreated, mode, options]);
+    // Get selected value for dropdown
+    const dropdownValue = useMemo(() => {
+        if (mode === 'multiple') {
+            return isMultipleValue(value) ? value.map((v) => v.id) : [];
+        }
+        return isSingleValue(value) ? value.id : undefined;
+    }, [mode, value]);
+    // Disable input when loading
+    const isInputDisabled = disabled || isLoading;
+    // For rendering: when loading, force options to empty to show loading status in Dropdown
+    const dropdownOptionsForRender = useMemo(() => {
+        if (isLoading)
+            return [];
+        return dropdownOptions;
+    }, [isLoading, dropdownOptions]);
+    const dropdownStatus = isLoading
+        ? 'loading'
+        : dropdownOptionsForRender.length === 0
+            ? 'empty'
+            : undefined;
+    // Handle dropdown option selection
+    const handleDropdownSelect = useCallback((option) => {
+        const selectedValue = options.find((opt) => opt.id === option.id);
+        if (selectedValue) {
+            wrappedOnChange(selectedValue);
+            // Close dropdown after selection in single mode
+            if (mode === 'single') {
+                toggleOpen(false);
+                onFocus(false);
+            }
+        }
+    }, [mode, onFocus, options, toggleOpen, wrappedOnChange]);
+    // Active index for dropdown keyboard navigation
+    const [activeIndex, setActiveIndex] = useState(null);
+    const setListboxHasVisualFocus = useCallback(() => { }, []);
+    // Reset activeIndex when options change
+    useEffect(() => {
+        if (!dropdownOptions.length) {
+            setActiveIndex(null);
+            return;
+        }
+        setActiveIndex((prev) => {
+            if (prev === null)
+                return null;
+            return Math.min(prev, dropdownOptions.length - 1);
+        });
+    }, [dropdownOptions.length]);
+    // Scroll to active option when activeIndex changes
+    useEffect(() => {
+        if (!open || activeIndex === null)
+            return;
+        requestAnimationFrame(() => {
+            const activeOption = document.getElementById(`${menuId}-option-${activeIndex}`);
+            activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
+        });
+    }, [activeIndex, menuId, open]);
+    // Compute aria-activedescendant
+    const ariaActivedescendant = useMemo(() => {
+        if (activeIndex !== null && dropdownOptions[activeIndex]) {
+            return `${menuId}-option-${activeIndex}`;
+        }
+        return undefined;
+    }, [activeIndex, dropdownOptions, menuId]);
+    const { handleInputKeyDown } = useAutoCompleteKeyboard({
+        activeIndex,
+        addable: creationEnabled,
+        createSeparators,
+        dropdownOptions,
+        handleBulkCreate,
+        handleDropdownSelect,
+        inputPropsOnKeyDown: inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown,
+        inputRef,
+        mode,
+        onFocus,
+        open,
+        processBulkCreate,
+        searchText,
+        searchTextExistWithoutOption,
+        setActiveIndex,
+        setInsertText,
+        setListboxHasVisualFocus,
+        setSearchText,
+        toggleOpen,
+        value,
+        wrappedOnChange,
+    });
+    // Handle visibility change from Dropdown to prevent flickering
+    const handleVisibilityChange = useCallback((newOpen) => {
+        // Only update if state actually changed to prevent flickering
+        if (newOpen !== open) {
+            toggleOpen(newOpen);
+        }
+    }, [open, toggleOpen]);
+    const handlePasteWithFallback = useCallback((e) => {
+        var _a;
+        handlePaste(e);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onPaste) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    }, [handlePaste, inputProps]);
+    const autoSelectMatchingOption = useCallback((keyword) => {
+        if (!creationEnabled || !keyword.length)
+            return false;
+        const matchingOption = options.find((option) => option.name === keyword);
+        if (!matchingOption)
+            return false;
+        if (isSingle) {
+            if (!value) {
+                wrappedOnChange(matchingOption);
+                toggleOpen(false);
+                onFocus(false);
+                resetCreationInputs();
+                return true;
+            }
+            return false;
+        }
+        const alreadySelected = isOptionSelected(matchingOption, value, isMultiple);
+        if (!alreadySelected) {
+            wrappedOnChange(matchingOption);
+            resetCreationInputs();
+            return true;
+        }
+        return false;
+    }, [
+        creationEnabled,
+        isMultiple,
+        isSingle,
+        onFocus,
+        options,
+        resetCreationInputs,
+        toggleOpen,
+        value,
+        wrappedOnChange,
+    ]);
+    const resolvedInputProps = {
+        ...inputProps,
+        'aria-activedescendant': ariaActivedescendant,
+        'aria-controls': menuId,
+        'aria-expanded': open,
+        'aria-owns': menuId,
+        id: id !== null && id !== void 0 ? id : inputProps === null || inputProps === void 0 ? void 0 : inputProps.id,
+        name: name !== null && name !== void 0 ? name : inputProps === null || inputProps === void 0 ? void 0 : inputProps.name,
+        onBlur: onSearchInputBlur,
+        onChange: onSearchInputChange,
+        onFocus: onSearchInputFocus,
+        onKeyDown: handleInputKeyDown,
+        onPaste: handlePasteWithFallback,
+        readOnly: false,
+        role: 'combobox',
+    };
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsx("div", { ref: nodeRef, className: cx(autocompleteClasses.host, {
+                [autocompleteClasses.hostFullWidth]: fullWidth,
+                [autocompleteClasses.hostInsideClosed]: inputPosition === 'inside' && !open,
+            }), children: jsx(Dropdown, { actionText: shouldShowCreateAction
+                    ? (createActionText
+                        ? createActionText(insertText)
+                        : createActionTextTemplate.replace('{text}', insertText))
+                    : undefined, activeIndex: activeIndex, disabled: isInputDisabled, emptyText: emptyText, followText: searchText, inputPosition: inputPosition, isMatchInputValue: true, listboxId: menuId, loadingText: loadingText, maxHeight: menuMaxHeight, mode: mode, onActionCustom: shouldShowCreateAction
+                    ? handleActionCustom
+                    : undefined, onItemHover: setActiveIndex, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: open, options: dropdownOptionsForRender, placement: "bottom", sameWidth: true, showDropdownActions: shouldShowCreateAction, showActionShowTopBar: shouldShowCreateAction, status: dropdownStatus, type: "default", value: dropdownValue, children: jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: isInputDisabled, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: wrappedOnChange, onClear: onClear, placeholder: getPlaceholder(), prefix: prefix, readOnly: false, required: required, type: error ? 'error' : 'default', inputProps: {
+                        ...resolvedInputProps,
+                        onClick: (e) => {
+                            var _a;
+                            // When inputPosition is inside, let Dropdown handle the click event
+                            // Otherwise, stop propagation to prevent conflicts
+                            if (inputPosition !== 'inside') {
+                                e.stopPropagation();
+                            }
+                            (_a = resolvedInputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(resolvedInputProps, e);
+                        },
+                    }, searchText: searchText, size: size, showTextInputAfterTags: true, suffixAction: onClickSuffixActionIcon, value: mode === 'multiple' && isMultipleValue(value) && value.length === 0
+                        ? undefined
+                        : value !== null && value !== void 0 ? value : undefined, ...(mode === 'single' && renderValue ? { renderValue } : {}) }) }) }) }));
+});
+
+export { AutoComplete as default };

package/AutoComplete/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AutoComplete, default } from './AutoComplete';
+export type { AutoCompleteBaseProps, AutoCompleteMultipleProps, AutoCompleteProps, AutoCompleteSingleProps, } from './AutoComplete';

package/AutoComplete/index.js

@@ -0,0 +1 @@
+export { default as AutoComplete, default } from './AutoComplete.js';

package/AutoComplete/useAutoCompleteCreation.d.ts

@@ -0,0 +1,33 @@
+import { ClipboardEvent } from 'react';
+import { SelectValue } from '../Select/typings';
+type UseAutoCompleteCreationParams = {
+    addable: boolean;
+    createSeparators: string[];
+    filterUnselected: (options: SelectValue[]) => SelectValue[];
+    clearUnselected: () => void;
+    isMultiple: boolean;
+    isSingle: boolean;
+    markCreated: (id: string) => void;
+    clearNewlyCreated: (ids?: string[]) => void;
+    markUnselected: (ids: string[]) => void;
+    onChangeMultiple?: (newOptions: SelectValue[]) => void;
+    onFocus: (focus: boolean) => void;
+    onInsert?: (text: string, currentOptions: SelectValue[]) => SelectValue[];
+    options: SelectValue[];
+    toggleOpen: (newOpen: boolean | ((prev: boolean) => boolean)) => void;
+    trimOnCreate: boolean;
+    value: SelectValue[] | SelectValue | null | undefined;
+    wrappedOnChange: (chooseOption: SelectValue | null) => SelectValue[] | SelectValue | null;
+    setSearchText: (value: string) => void;
+};
+type ProcessBulkCreate = (text: string) => string[];
+export declare function useAutoCompleteCreation({ addable, createSeparators, filterUnselected, clearUnselected, isMultiple, isSingle, markCreated, markUnselected, onChangeMultiple, onFocus, onInsert, options, toggleOpen, trimOnCreate, value, wrappedOnChange, setSearchText, clearNewlyCreated, }: UseAutoCompleteCreationParams): {
+    handleActionCustom: () => void;
+    handleBulkCreate: (texts: string[]) => void;
+    handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+    insertText: string;
+    processBulkCreate: ProcessBulkCreate;
+    resetCreationInputs: () => void;
+    setInsertText: import("react").Dispatch<import("react").SetStateAction<string>>;
+};
+export {};

package/AutoComplete/useAutoCompleteCreation.js

@@ -0,0 +1,201 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+function isMultipleValue(value) {
+    return Array.isArray(value);
+}
+function isSingleValue(value) {
+    return value !== null && value !== undefined && !Array.isArray(value);
+}
+function isOptionSelected(option, value, isMultiple) {
+    if (isMultiple && isMultipleValue(value)) {
+        return value.some((v) => v.id === option.id);
+    }
+    if (!isMultiple && isSingleValue(value)) {
+        return value.id === option.id;
+    }
+    return false;
+}
+function useAutoCompleteCreation({ addable, createSeparators, filterUnselected, clearUnselected, isMultiple, isSingle, markCreated, markUnselected, onChangeMultiple, onFocus, onInsert, options, toggleOpen, trimOnCreate, value, wrappedOnChange, setSearchText, clearNewlyCreated, }) {
+    const [insertText, setInsertText] = useState('');
+    const valueRef = useRef(value);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    const resetCreationInputs = useCallback(() => {
+        setSearchText('');
+        setInsertText('');
+    }, [setSearchText]);
+    const processBulkCreate = useCallback((text) => {
+        if (!text || !addable || !onInsert)
+            return [];
+        let parts = [text];
+        createSeparators.forEach((separator) => {
+            const newParts = [];
+            parts.forEach((part) => {
+                newParts.push(...part.split(separator));
+            });
+            parts = newParts;
+        });
+        const processed = parts
+            .map((part) => (trimOnCreate ? part.trim() : part))
+            .filter((part) => part.length > 0);
+        const selectedNames = new Set();
+        if (isMultiple && isMultipleValue(valueRef.current)) {
+            valueRef.current.forEach((v) => selectedNames.add(v.name.toLowerCase()));
+        }
+        else if (isSingle && isSingleValue(valueRef.current)) {
+            selectedNames.add(valueRef.current.name.toLowerCase());
+        }
+        return processed.filter((part) => !selectedNames.has(part.toLowerCase()));
+    }, [addable, createSeparators, isMultiple, isSingle, onInsert, trimOnCreate]);
+    const handleBulkCreate = useCallback((texts) => {
+        if (!addable || texts.length === 0 || !onInsert)
+            return;
+        let currentOptions = filterUnselected(options);
+        clearUnselected();
+        const itemsToAdd = [];
+        const newlyCreatedIds = new Set();
+        const newlySelectedIds = new Set();
+        texts.forEach((text) => {
+            const existingOption = currentOptions.find((option) => option.name === text);
+            if (existingOption) {
+                const alreadySelected = isOptionSelected(existingOption, valueRef.current, isMultiple);
+                if (!alreadySelected) {
+                    itemsToAdd.push(existingOption);
+                }
+            }
+            else {
+                try {
+                    const updatedOptions = onInsert(text, currentOptions);
+                    if (!Array.isArray(updatedOptions)) {
+                        return;
+                    }
+                    const newOption = updatedOptions.find((opt) => !currentOptions.some((existing) => existing.id === opt.id));
+                    if (newOption) {
+                        itemsToAdd.push(newOption);
+                        newlyCreatedIds.add(newOption.id);
+                        markCreated(newOption.id);
+                        currentOptions = updatedOptions;
+                    }
+                }
+                catch (_a) {
+                    console.warn('Invalid insert result');
+                    // Ignore invalid insert result; do not mutate currentOptions
+                }
+            }
+        });
+        if (itemsToAdd.length > 0) {
+            if (isSingle && itemsToAdd[0]) {
+                wrappedOnChange(itemsToAdd[0]);
+                toggleOpen(false);
+                onFocus(false);
+                newlySelectedIds.add(itemsToAdd[0].id);
+            }
+            else if (isMultiple) {
+                const currentValues = isMultipleValue(valueRef.current)
+                    ? valueRef.current
+                    : [];
+                const newItemsToAdd = itemsToAdd.filter((item) => !currentValues.some((existing) => existing.id === item.id));
+                const mergedValues = [...currentValues, ...newItemsToAdd];
+                if (onChangeMultiple) {
+                    onChangeMultiple(mergedValues);
+                    mergedValues.forEach((v) => newlySelectedIds.add(v.id));
+                }
+                else {
+                    newItemsToAdd.forEach((item) => {
+                        wrappedOnChange(item);
+                        newlySelectedIds.add(item.id);
+                    });
+                }
+            }
+            if (newlySelectedIds.size) {
+                clearNewlyCreated(Array.from(newlySelectedIds));
+                newlySelectedIds.forEach((id) => newlyCreatedIds.delete(id));
+            }
+            if (newlyCreatedIds.size) {
+                markUnselected(Array.from(newlyCreatedIds));
+            }
+        }
+    }, [
+        addable,
+        clearNewlyCreated,
+        clearUnselected,
+        filterUnselected,
+        isMultiple,
+        isSingle,
+        markCreated,
+        markUnselected,
+        onChangeMultiple,
+        onFocus,
+        onInsert,
+        options,
+        toggleOpen,
+        wrappedOnChange,
+    ]);
+    const handleActionCustom = useCallback(() => {
+        if (!addable || !insertText)
+            return;
+        const hasSeparator = createSeparators.some((sep) => insertText.includes(sep));
+        if (hasSeparator && isMultiple) {
+            const textsToCreate = processBulkCreate(insertText);
+            if (textsToCreate.length > 0) {
+                handleBulkCreate(textsToCreate);
+                resetCreationInputs();
+                return;
+            }
+        }
+        const textsToCreate = processBulkCreate(insertText);
+        if (textsToCreate.length > 0) {
+            handleBulkCreate(textsToCreate);
+            resetCreationInputs();
+        }
+    }, [
+        addable,
+        createSeparators,
+        handleBulkCreate,
+        insertText,
+        isMultiple,
+        processBulkCreate,
+        resetCreationInputs,
+    ]);
+    const handlePaste = useCallback((e) => {
+        if (!addable || !onInsert) {
+            return;
+        }
+        const pastedText = e.clipboardData.getData('text');
+        if (!pastedText) {
+            return;
+        }
+        if (isMultiple) {
+            const hasSeparator = createSeparators.some((sep) => pastedText.includes(sep));
+            if (hasSeparator) {
+                e.preventDefault();
+                const textsToCreate = processBulkCreate(pastedText);
+                if (textsToCreate.length > 0) {
+                    handleBulkCreate(textsToCreate);
+                    resetCreationInputs();
+                    return;
+                }
+            }
+        }
+    }, [
+        addable,
+        createSeparators,
+        handleBulkCreate,
+        isMultiple,
+        onInsert,
+        processBulkCreate,
+        resetCreationInputs,
+    ]);
+    return {
+        handleActionCustom,
+        handleBulkCreate,
+        handlePaste,
+        insertText,
+        processBulkCreate,
+        resetCreationInputs,
+        setInsertText,
+    };
+}
+
+export { useAutoCompleteCreation };