@mezzanine-ui/react 1.0.0-rc.4 → 1.0.0-rc.5

package/AutoComplete/AutoComplete.d.ts

@@ -139,6 +139,13 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * @default true
      */
     trimOnCreate?: boolean;
+    /**
+     * When true, pasted bulk text is kept in the input and user creates one item at a time
+     * (create button shows only the first pending item; after create, input updates to remaining).
+     * When false, pasted bulk text creates all items at once (default).
+     * @default false
+     */
+    stepByStepBulkCreate?: boolean;
     /**
      * Custom text for the create action button.
      * @default '建立 "{text}"'
@@ -170,6 +177,13 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * Only fires when `menuMaxHeight` is set and the list is scrollable.
      */
     onLeaveBottom?: () => void;
+    /**
+     * Called on blur when addable mode has unselected created items.
+     * Receives the cleaned options (unselected created items already removed).
+     * Use this to update your options state.
+     * Only called when `addable` is true and there are unselected created items.
+     */
+    onRemoveCreated?(cleanedOptions: SelectValue[]): void;
 }
 export type AutoCompleteMultipleProps = AutoCompleteBaseProps & {
     /**

package/AutoComplete/AutoComplete.js

@@ -7,7 +7,7 @@ import { useAutoCompleteValueControl } from '../Form/useAutoCompleteValueControl
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { SelectControlContext } from '../Select/SelectControlContext.js';
 import SelectTrigger from '../Select/SelectTrigger.js';
-import { useAutoCompleteCreation } from './useAutoCompleteCreation.js';
+import { useAutoCompleteCreation, getFullParsedList } from './useAutoCompleteCreation.js';
 import { useAutoCompleteKeyboard } from './useAutoCompleteKeyboard.js';
 import { useAutoCompleteSearch } from './useAutoCompleteSearch.js';
 import { useCreationTracker } from './useCreationTracker.js';
@@ -29,18 +29,6 @@ function isMultipleValue(value) {
 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,
@@ -48,7 +36,7 @@ function isOptionSelected(option, value, isMultiple) {
  */
 const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { addable = false, asyncData = false, className, clearSearchText = true, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText = '沒有符合的項目', error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText = '載入中...', loadingPosition = 'bottom', menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onSearchTextChange, onVisibilityChange, open: openProp, options: optionsProp, overflowStrategy, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', dropdownZIndex, globalPortal = true, onReachBottom, onLeaveBottom, } = props;
+    const { addable = false, asyncData = false, className, clearSearchText = true, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText = '沒有符合的項目', error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText = '載入中...', loadingPosition = 'bottom', menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onSearchTextChange, onVisibilityChange, open: openProp, options: optionsProp, overflowStrategy, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, stepByStepBulkCreate = false, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', dropdownZIndex, globalPortal = true, onReachBottom, onLeaveBottom, onRemoveCreated, } = props;
     const shouldClearSearchTextOnBlur = clearSearchText;
     const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
     const isMultiple = mode === 'multiple';
@@ -68,6 +56,13 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
                 ? defaultValue
                 : undefined,
             disabledOptionsFilter,
+            getOptionsFilterQuery: stepByStepBulkCreate && addable && onInsert
+                ? (st) => {
+                    var _a;
+                    const full = getFullParsedList(st, createSeparators, trimOnCreate);
+                    return full.length > 1 ? (_a = full[0]) !== null && _a !== void 0 ? _a : undefined : undefined;
+                }
+                : undefined,
             mode: 'multiple',
             onChange: onChangeProp,
             onClear: onClearProp,
@@ -106,7 +101,13 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     }, [addable, onInsert]);
     const idSeed = useId();
     const menuId = useMemo(() => `${MENU_ID_PREFIX}-${idSeed}`, [idSeed]);
-    const { handleActionCustom, handleBulkCreate, handlePaste, insertText, processBulkCreate, resetCreationInputs, setInsertText, } = useAutoCompleteCreation({
+    const inputElementRef = useRef(null);
+    const onSetInputDisplay = useCallback((text) => {
+        if (inputElementRef.current) {
+            inputElementRef.current.value = text;
+        }
+    }, []);
+    const { getPendingCreateList, handleActionCustom: handleActionCustomBase, handleBulkCreate, handlePaste, insertText, processBulkCreate, resetCreationInputs, setInsertText, } = useAutoCompleteCreation({
         addable: creationEnabled,
         clearUnselected,
         createSeparators,
@@ -119,15 +120,23 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         onChangeMultiple: isMultiple
             ? onChangeProp
             : undefined,
-        onFocus,
         onInsert,
-        options,
+        onSetInputDisplay,
+        options: optionsProp,
         setSearchText,
+        stepByStepBulkCreate,
         toggleOpen,
         trimOnCreate,
         value,
         wrappedOnChange: (chooseOption) => wrappedOnChange(chooseOption),
     });
+    const handleActionCustom = useCallback(() => {
+        suppressNextCloseRef.current = true;
+        handleActionCustomBase();
+        window.setTimeout(() => {
+            suppressNextCloseRef.current = false;
+        }, 0);
+    }, [handleActionCustomBase]);
     const { cancelSearch, isLoading, runSearch } = useAutoCompleteSearch({
         asyncData,
         loading,
@@ -161,10 +170,10 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         value,
     ]);
     const nodeRef = useRef(null);
-    const inputElementRef = useRef(null);
     const controlRef = useRef(null);
     const resetOptionsTimeoutRef = useRef(null);
     const skipNextMultipleCloseResetRef = useRef(false);
+    const suppressNextCloseRef = useRef(false);
     const composedRef = useComposeRefs([ref, controlRef]);
     const composedInputRef = useComposeRefs([inputRef, inputElementRef]);
     const clearPendingOptionsReset = useCallback(() => {
@@ -191,6 +200,15 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
             resetOptionsTimeoutRef.current = null;
         }, BLUR_RESET_OPTIONS_DELAY);
     }, [cancelSearch, clearPendingOptionsReset, resetSearchInputs, runSearch]);
+    const cleanupUnselectedCreated = useCallback(() => {
+        if (!creationEnabled || typeof onRemoveCreated !== 'function')
+            return;
+        const cleanedOptions = filterUnselected(optionsProp);
+        if (cleanedOptions.length === optionsProp.length)
+            return;
+        clearUnselected();
+        onRemoveCreated(cleanedOptions);
+    }, [clearUnselected, creationEnabled, filterUnselected, onRemoveCreated, optionsProp]);
     useEffect(() => () => {
         clearPendingOptionsReset();
     }, [clearPendingOptionsReset]);
@@ -241,8 +259,6 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         setSearchText(nextSearch);
         setInsertText(nextSearch);
         onSearchTextChange === null || onSearchTextChange === void 0 ? void 0 : onSearchTextChange(nextSearch);
-        if (autoSelectMatchingOption(nextSearch))
-            return;
         if (!nextSearch) {
             cancelSearch();
             runSearch(nextSearch, { immediate: true });
@@ -283,6 +299,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
                 // Clear search text and insert text when blur clear behavior is enabled
                 if (shouldClearSearchTextOnBlur && !shouldDeferMultipleBlurReset) {
                     resetSearchInputsAndOptions();
+                    cleanupUnselectedCreated();
                 }
                 (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
                 return;
@@ -292,6 +309,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
             // Clear search text and insert text when blur clear behavior is enabled
             if (shouldClearSearchTextOnBlur && !shouldDeferMultipleBlurReset) {
                 resetSearchInputsAndOptions();
+                cleanupUnselectedCreated();
             }
             (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(inputProps, e);
             return;
@@ -300,25 +318,42 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         // Clear search text and insert text when blur clear behavior is enabled
         if (shouldClearSearchTextOnBlur && !shouldDeferMultipleBlurReset) {
             resetSearchInputsAndOptions();
+            cleanupUnselectedCreated();
         }
         (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _c === void 0 ? void 0 : _c.call(inputProps, e);
     };
     const handleClear = useCallback((e) => {
+        if (isSingle && isSingleValue(value)) {
+            markUnselected([value.id]);
+        }
         onClear(e);
         resetSearchInputs();
-    }, [onClear, resetSearchInputs]);
+    }, [isSingle, markUnselected, onClear, resetSearchInputs, value]);
     const onClickSuffixActionIcon = () => {
         toggleOpen((prev) => !prev);
     };
-    const searchTextExistWithoutOption = !!searchText &&
-        options.find((option) => option.name === searchText) === undefined;
+    const hasStepByStepBulkSeparator = stepByStepBulkCreate &&
+        createSeparators.some((sep) => insertText.includes(sep));
+    const firstPendingText = hasStepByStepBulkSeparator
+        ? getPendingCreateList(insertText)[0]
+        : undefined;
+    const searchTextExistWithoutOption = !!((firstPendingText
+        ? firstPendingText &&
+            options.find((option) => option.name === firstPendingText) ===
+                undefined
+        : searchText &&
+            options.find((option) => option.name === searchText) === undefined));
     const shouldShowCreateAction = !!(searchTextExistWithoutOption &&
         creationEnabled &&
-        insertText);
+        (firstPendingText !== null && firstPendingText !== void 0 ? firstPendingText : insertText));
+    const createActionDisplayText = firstPendingText !== undefined && firstPendingText !== ''
+        ? firstPendingText
+        : insertText;
     const context = useMemo(() => ({ onChange: wrappedOnChange, value }), [wrappedOnChange, value]);
-    // Convert SelectValue[] to DropdownOption[]
+    // Convert SelectValue[] to DropdownOption[] (created options first)
     const dropdownOptions = useMemo(() => {
-        return options.map((option) => {
+        const sortedOptions = [...options].sort((a, b) => (isCreated(b.id) ? 1 : 0) - (isCreated(a.id) ? 1 : 0));
+        return sortedOptions.map((option) => {
             const created = isCreated(option.id);
             const result = {
                 id: option.id,
@@ -348,7 +383,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         return isSingleValue(value) ? value.id : undefined;
     }, [mode, value]);
     // Disable input when loading
-    const isInputDisabled = disabled || isLoading;
+    const isInputDisabled = disabled || (!asyncData && isLoading);
     const dropdownStatus = isLoading
         ? 'loading'
         : dropdownOptions.length === 0
@@ -424,6 +459,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         addable: creationEnabled,
         createSeparators,
         dropdownOptions,
+        handleActionCustom,
         handleBulkCreate,
         handleDropdownSelect,
         inputPropsOnKeyDown: inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown,
@@ -438,6 +474,7 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         setInsertText,
         setListboxHasVisualFocus,
         setSearchText,
+        stepByStepBulkCreate,
         toggleOpen,
         value,
         wrappedOnChange,
@@ -467,6 +504,11 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     // Handle visibility change from Dropdown to prevent flickering
     const handleVisibilityChange = useCallback((newOpen) => {
         var _a;
+        // Suppress spurious closes triggered immediately after create action
+        if (!newOpen && suppressNextCloseRef.current) {
+            suppressNextCloseRef.current = false;
+            return;
+        }
         // Only update if state actually changed to prevent flickering
         if (newOpen !== open) {
             toggleOpen(newOpen);
@@ -486,8 +528,10 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
                 }
             }
             resetSearchInputsAndOptions();
+            cleanupUnselectedCreated();
         }
     }, [
+        cleanupUnselectedCreated,
         isMultiple,
         menuId,
         open,
@@ -500,43 +544,6 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
         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) {
-                // Update searchText first to prevent showing old value
-                setSearchText(matchingOption.name);
-                setInsertText(matchingOption.name);
-                // Then update value and focus state
-                wrappedOnChange(matchingOption);
-                toggleOpen(false);
-                onFocus(false);
-                return true;
-            }
-            return false;
-        }
-        const alreadySelected = isOptionSelected(matchingOption, value, isMultiple);
-        if (!alreadySelected) {
-            wrappedOnChange(matchingOption);
-            return true;
-        }
-        return false;
-    }, [
-        creationEnabled,
-        isMultiple,
-        isSingle,
-        onFocus,
-        options,
-        setSearchText,
-        setInsertText,
-        toggleOpen,
-        value,
-        wrappedOnChange,
-    ]);
     const resolvedInputProps = {
         ...inputProps,
         'aria-activedescendant': ariaActivedescendant,
@@ -559,9 +566,9 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
                 [autocompleteClasses.hostMode(mode)]: mode,
             }), 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, loadingPosition: loadingPosition, maxHeight: menuMaxHeight, mode: mode, onActionCustom: shouldShowCreateAction ? handleActionCustom : undefined, onItemHover: setActiveIndex, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: open, options: dropdownOptions, placement: "bottom", sameWidth: true, showDropdownActions: shouldShowCreateAction, showActionShowTopBar: shouldShowCreateAction, status: dropdownStatus, type: "default", value: dropdownValue, zIndex: dropdownZIndex, globalPortal: globalPortal, onReachBottom: onReachBottom, onLeaveBottom: onLeaveBottom, children: jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: isInputDisabled, fullWidth: fullWidth, isForceClearable: shouldForceClearable, inputRef: composedInputRef, mode: mode, onTagClose: wrappedOnChange, onClear: handleClear, overflowStrategy: overflowStrategy, placeholder: getPlaceholder(), prefix: prefix, readOnly: false, required: required, type: error ? 'error' : 'default', inputProps: {
+                        ? createActionText(createActionDisplayText)
+                        : createActionTextTemplate.replace('{text}', createActionDisplayText)
+                    : undefined, activeIndex: activeIndex, disabled: isInputDisabled, emptyText: emptyText, followText: searchText, inputPosition: inputPosition, isMatchInputValue: true, listboxId: menuId, loadingText: loadingText, loadingPosition: loadingPosition, maxHeight: menuMaxHeight, mode: mode, onActionCustom: shouldShowCreateAction ? handleActionCustom : undefined, onItemHover: setActiveIndex, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: open, options: asyncData && isLoading ? [] : dropdownOptions, placement: "bottom", sameWidth: true, showDropdownActions: shouldShowCreateAction, showActionShowTopBar: shouldShowCreateAction, status: dropdownStatus, type: "default", value: dropdownValue, zIndex: dropdownZIndex, globalPortal: globalPortal, onReachBottom: onReachBottom, onLeaveBottom: onLeaveBottom, children: jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: isInputDisabled, fullWidth: fullWidth, isForceClearable: shouldForceClearable, inputRef: composedInputRef, mode: mode, onTagClose: wrappedOnChange, onClear: handleClear, overflowStrategy: isMultiple ? (overflowStrategy !== null && overflowStrategy !== void 0 ? overflowStrategy : 'wrap') : overflowStrategy, placeholder: getPlaceholder(), prefix: prefix, readOnly: false, required: required, type: error ? 'error' : 'default', inputProps: {
                         ...resolvedInputProps,
                         onClick: (e) => {
                             var _a;

package/AutoComplete/useAutoCompleteCreation.d.ts

@@ -11,9 +11,10 @@ type UseAutoCompleteCreationParams = {
     clearNewlyCreated: (ids?: string[]) => void;
     markUnselected: (ids: string[]) => void;
     onChangeMultiple?: (newOptions: SelectValue[]) => void;
-    onFocus: (focus: boolean) => void;
     onInsert?: (text: string, currentOptions: SelectValue[]) => SelectValue[];
+    onSetInputDisplay?: (text: string) => void;
     options: SelectValue[];
+    stepByStepBulkCreate?: boolean;
     toggleOpen: (newOpen: boolean | ((prev: boolean) => boolean)) => void;
     trimOnCreate: boolean;
     value: SelectValue[] | SelectValue | null | undefined;
@@ -21,7 +22,9 @@ type UseAutoCompleteCreationParams = {
     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): {
+export declare function getFullParsedList(text: string, createSeparators: string[], trimOnCreate: boolean): string[];
+export declare function useAutoCompleteCreation({ addable, createSeparators, filterUnselected, clearUnselected, isMultiple, isSingle, markCreated, markUnselected, onChangeMultiple, onInsert, onSetInputDisplay, options, stepByStepBulkCreate, toggleOpen, trimOnCreate, value, wrappedOnChange, setSearchText, clearNewlyCreated, }: UseAutoCompleteCreationParams): {
+    getPendingCreateList: (text: string) => string[];
     handleActionCustom: () => void;
     handleBulkCreate: (texts: string[]) => void;
     handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;

package/AutoComplete/useAutoCompleteCreation.js

@@ -1,5 +1,20 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 
+function getFullParsedList(text, createSeparators, trimOnCreate) {
+    if (!text)
+        return [];
+    let parts = [text];
+    createSeparators.forEach((separator) => {
+        const newParts = [];
+        parts.forEach((part) => {
+            newParts.push(...part.split(separator));
+        });
+        parts = newParts;
+    });
+    return parts
+        .map((part) => (trimOnCreate ? part.trim() : part))
+        .filter((part) => part.length > 0);
+}
 function isMultipleValue(value) {
     return Array.isArray(value);
 }
@@ -15,7 +30,7 @@ function isOptionSelected(option, value, isMultiple) {
     }
     return false;
 }
-function useAutoCompleteCreation({ addable, createSeparators, filterUnselected, clearUnselected, isMultiple, isSingle, markCreated, markUnselected, onChangeMultiple, onFocus, onInsert, options, toggleOpen, trimOnCreate, value, wrappedOnChange, setSearchText, clearNewlyCreated, }) {
+function useAutoCompleteCreation({ addable, createSeparators, filterUnselected, clearUnselected, isMultiple, isSingle, markCreated, markUnselected, onChangeMultiple, onInsert, onSetInputDisplay, options, stepByStepBulkCreate = false, toggleOpen, trimOnCreate, value, wrappedOnChange, setSearchText, clearNewlyCreated, }) {
     const [insertText, setInsertText] = useState('');
     const valueRef = useRef(value);
     useEffect(() => {
@@ -48,6 +63,11 @@ function useAutoCompleteCreation({ addable, createSeparators, filterUnselected,
         }
         return processed.filter((part) => !selectedNames.has(part.toLowerCase()));
     }, [addable, createSeparators, isMultiple, isSingle, onInsert, trimOnCreate]);
+    const getPendingCreateList = useCallback((text) => {
+        const processed = processBulkCreate(text);
+        const optionNames = new Set(options.map((o) => o.name.toLowerCase()));
+        return processed.filter((part) => !optionNames.has(part.toLowerCase()));
+    }, [options, processBulkCreate]);
     const handleBulkCreate = useCallback((texts) => {
         if (!addable || texts.length === 0 || !onInsert)
             return;
@@ -87,8 +107,6 @@ function useAutoCompleteCreation({ addable, createSeparators, filterUnselected,
         if (itemsToAdd.length > 0) {
             if (isSingle && itemsToAdd[0]) {
                 wrappedOnChange(itemsToAdd[0]);
-                toggleOpen(false);
-                onFocus(false);
                 newlySelectedIds.add(itemsToAdd[0].id);
             }
             else if (isMultiple) {
@@ -126,16 +144,36 @@ function useAutoCompleteCreation({ addable, createSeparators, filterUnselected,
         markCreated,
         markUnselected,
         onChangeMultiple,
-        onFocus,
         onInsert,
         options,
-        toggleOpen,
         wrappedOnChange,
     ]);
     const handleActionCustom = useCallback(() => {
         if (!addable || !insertText)
             return;
         const hasSeparator = createSeparators.some((sep) => insertText.includes(sep));
+        if (stepByStepBulkCreate && hasSeparator && isMultiple) {
+            const pending = getPendingCreateList(insertText);
+            const firstPending = pending[0];
+            if (!firstPending) {
+                resetCreationInputs();
+                onSetInputDisplay === null || onSetInputDisplay === void 0 ? void 0 : onSetInputDisplay('');
+                return;
+            }
+            handleBulkCreate([firstPending]);
+            toggleOpen(true);
+            const remaining = pending.slice(1).join(', ');
+            if (remaining) {
+                setSearchText(remaining);
+                setInsertText(remaining);
+                onSetInputDisplay === null || onSetInputDisplay === void 0 ? void 0 : onSetInputDisplay(remaining);
+            }
+            else {
+                resetCreationInputs();
+                onSetInputDisplay === null || onSetInputDisplay === void 0 ? void 0 : onSetInputDisplay('');
+            }
+            return;
+        }
         if (hasSeparator && isMultiple) {
             const textsToCreate = processBulkCreate(insertText);
             if (textsToCreate.length > 0) {
@@ -152,11 +190,16 @@ function useAutoCompleteCreation({ addable, createSeparators, filterUnselected,
     }, [
         addable,
         createSeparators,
+        getPendingCreateList,
         handleBulkCreate,
         insertText,
         isMultiple,
+        onSetInputDisplay,
         processBulkCreate,
         resetCreationInputs,
+        stepByStepBulkCreate,
+        setSearchText,
+        toggleOpen,
     ]);
     const handlePaste = useCallback((e) => {
         if (!addable || !onInsert) {
@@ -169,6 +212,15 @@ function useAutoCompleteCreation({ addable, createSeparators, filterUnselected,
         if (isMultiple) {
             const hasSeparator = createSeparators.some((sep) => pastedText.includes(sep));
             if (hasSeparator) {
+                if (stepByStepBulkCreate) {
+                    e.preventDefault();
+                    const pending = getPendingCreateList(pastedText);
+                    const pendingJoin = pending.join(', ');
+                    setSearchText(pendingJoin);
+                    setInsertText(pendingJoin);
+                    onSetInputDisplay === null || onSetInputDisplay === void 0 ? void 0 : onSetInputDisplay(pendingJoin);
+                    return;
+                }
                 e.preventDefault();
                 const textsToCreate = processBulkCreate(pastedText);
                 if (textsToCreate.length > 0) {
@@ -181,13 +233,19 @@ function useAutoCompleteCreation({ addable, createSeparators, filterUnselected,
     }, [
         addable,
         createSeparators,
+        getPendingCreateList,
         handleBulkCreate,
         isMultiple,
         onInsert,
+        onSetInputDisplay,
         processBulkCreate,
         resetCreationInputs,
+        setInsertText,
+        setSearchText,
+        stepByStepBulkCreate,
     ]);
     return {
+        getPendingCreateList,
         handleActionCustom,
         handleBulkCreate,
         handlePaste,
@@ -198,4 +256,4 @@ function useAutoCompleteCreation({ addable, createSeparators, filterUnselected,
     };
 }
 
-export { useAutoCompleteCreation };
+export { getFullParsedList, useAutoCompleteCreation };

package/AutoComplete/useAutoCompleteKeyboard.d.ts

@@ -6,6 +6,7 @@ type UseAutoCompleteKeyboardParams = {
     addable: boolean;
     createSeparators: string[];
     dropdownOptions: DropdownOption[];
+    handleActionCustom: () => void;
     handleBulkCreate: (texts: string[]) => void;
     handleDropdownSelect: (option: DropdownOption) => void;
     inputRef?: Ref<HTMLInputElement>;
@@ -21,11 +22,12 @@ type UseAutoCompleteKeyboardParams = {
     setListboxHasVisualFocus: (focus: boolean) => void;
     setInsertText: (value: string) => void;
     setSearchText: (value: string) => void;
+    stepByStepBulkCreate?: boolean;
     toggleOpen: (newOpen: boolean | ((prev: boolean) => boolean)) => void;
     value: SelectValue[] | SelectValue | null | undefined;
     wrappedOnChange: (chooseOption: SelectValue | null) => SelectValue[] | SelectValue | null;
 };
-export declare function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropdownOptions, handleBulkCreate, handleDropdownSelect, inputPropsOnKeyDown, inputRef, mode, onFocus, open, processBulkCreate, searchText, searchTextExistWithoutOption, setActiveIndex, setInsertText, setListboxHasVisualFocus, setSearchText, toggleOpen, value, wrappedOnChange, }: UseAutoCompleteKeyboardParams): {
+export declare function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropdownOptions, handleActionCustom, handleBulkCreate, handleDropdownSelect, inputPropsOnKeyDown, inputRef, mode, onFocus, open, processBulkCreate, searchText, searchTextExistWithoutOption, setActiveIndex, setInsertText, setListboxHasVisualFocus, setSearchText, stepByStepBulkCreate, toggleOpen, value, wrappedOnChange, }: UseAutoCompleteKeyboardParams): {
     handleInputKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
 };
 export {};

package/AutoComplete/useAutoCompleteKeyboard.js

@@ -4,7 +4,7 @@ import { createDropdownKeydownHandler } from '../Dropdown/dropdownKeydownHandler
 function isMultipleValue(value) {
     return Array.isArray(value);
 }
-function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropdownOptions, handleBulkCreate, handleDropdownSelect, inputPropsOnKeyDown, inputRef, mode, onFocus, open, processBulkCreate, searchText, searchTextExistWithoutOption, setActiveIndex, setInsertText, setListboxHasVisualFocus, setSearchText, toggleOpen, value, wrappedOnChange, }) {
+function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropdownOptions, handleActionCustom, handleBulkCreate, handleDropdownSelect, inputPropsOnKeyDown, inputRef, mode, onFocus, open, processBulkCreate, searchText, searchTextExistWithoutOption, setActiveIndex, setInsertText, setListboxHasVisualFocus, setSearchText, stepByStepBulkCreate = false, toggleOpen, value, wrappedOnChange, }) {
     const handleKeyDown = useCallback((e) => createDropdownKeydownHandler({
         activeIndex,
         onEnterSelect: (option) => {
@@ -52,6 +52,12 @@ function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropd
             if (addable && searchText) {
                 const hasSeparator = createSeparators.some((sep) => searchText.includes(sep));
                 if (hasSeparator && mode === 'multiple') {
+                    if (stepByStepBulkCreate) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleActionCustom();
+                        return true;
+                    }
                     e.preventDefault();
                     e.stopPropagation();
                     const textsToCreate = processBulkCreate(searchText);
@@ -94,6 +100,7 @@ function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropd
         addable,
         createSeparators,
         dropdownOptions,
+        handleActionCustom,
         handleBulkCreate,
         handleDropdownSelect,
         mode,
@@ -104,6 +111,7 @@ function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropd
         searchTextExistWithoutOption,
         setInsertText,
         setSearchText,
+        stepByStepBulkCreate,
         toggleOpen,
     ]);
     const handleInputKeyDown = useCallback((e) => {

package/Calendar/CalendarDays.js

@@ -34,8 +34,10 @@ function CalendarDays(props) {
                             false;
                         const inactive = !disabled && (isPrevMonth || isNextMonth);
                         const inRange = !inactive && isDateInRange && isDateInRange(date);
-                        const inRangeStart = inRange && value ? isSameDate(date, value[0]) : false;
-                        const inRangeEnd = inRange && value
+                        const inRangeStart = !inactive && value && value.length > 0
+                            ? isSameDate(date, value[0])
+                            : false;
+                        const inRangeEnd = !inactive && value && value.length > 0
                             ? isSameDate(date, value[value.length - 1])
                             : false;
                         const active = !disabled && !inactive && value && isDateIncluded(date, value);
@@ -75,7 +77,9 @@ function CalendarDays(props) {
                                         ? (() => {
                                             var _a, _b;
                                             const annotation = renderAnnotations(date);
-                                            return (jsx(Typography, { variant: "annotation", color: (_a = annotation === null || annotation === void 0 ? void 0 : annotation.color) !== null && _a !== void 0 ? _a : 'text-neutral', children: (_b = annotation === null || annotation === void 0 ? void 0 : annotation.value) !== null && _b !== void 0 ? _b : '--' }));
+                                            return (jsx(Typography, { variant: "annotation", color: active
+                                                    ? 'text-fixed-light'
+                                                    : ((_a = annotation === null || annotation === void 0 ? void 0 : annotation.color) !== null && _a !== void 0 ? _a : 'text-neutral'), children: (_b = annotation === null || annotation === void 0 ? void 0 : annotation.value) !== null && _b !== void 0 ? _b : '--' }));
                                         })()
                                         : null] }) }, `${getMonth(date)}/${getDate(date)}`));
                     }) }, `CALENDAR_DAYS/WEEK_OF/${index}`)))] }) }));

package/Calendar/RangeCalendar.js

@@ -215,7 +215,7 @@ const RangeCalendar = forwardRef(function RangeCalendar(props, ref) {
         getTargetValue,
         handleRangeSelection,
     ]);
-    return (jsxs("div", { ...restProps, ref: ref, role: "application", "aria-label": `Range calendar, ${mode} view`, className: cx(calendarClasses.host, className), children: [quickSelect && (jsx(CalendarQuickSelect, { activeId: quickSelect.activeId, options: quickSelect.options })), jsxs("div", { className: calendarClasses.mainWithFooter, children: [jsxs("div", { style: { display: 'inline-flex', flexFlow: 'row' }, children: [jsx(Calendar, { ...calendarProps, renderAnnotations: renderAnnotations, className: cx(calendarClasses.noShadowHost, calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.className), ref: firstCalendarRef, mode: currentMode, value: value, onChange: onChangeFactory(0), referenceDate: referenceDates[0], onPrev: onFirstPrev, onDoublePrev: onFirstDoublePrev, onMonthControlClick: onMonthControlClick, onYearControlClick: onYearControlClick, disabledFooterControl: true, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnPrev: disableOnPrev, disableOnDoublePrev: disableOnDoublePrev, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onDateHover: onDateHover, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, onMonthHover: onMonthHover, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, onWeekHover: onWeekHover, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, onYearHover: onYearHover, isQuarterDisabled: isQuarterDisabled, isQuarterInRange: isQuarterInRange, onQuarterHover: onQuarterHover, isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: isHalfYearInRange, onHalfYearHover: onHalfYearHover }), jsx(Calendar, { ...calendarProps, renderAnnotations: renderAnnotations, className: cx(calendarClasses.noShadowHost, calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.className), ref: secondCalendarRef, mode: currentMode, value: value, onChange: onChangeFactory(1), referenceDate: referenceDates[1], onNext: onSecondNext, onDoubleNext: onSecondDoubleNext, onMonthControlClick: onMonthControlClick, onYearControlClick: onYearControlClick, disabledFooterControl: true, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnNext: disableOnNext, disableOnDoubleNext: disableOnDoubleNext, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onDateHover: onDateHover, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, onMonthHover: onMonthHover, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, onWeekHover: onWeekHover, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, onYearHover: onYearHover, isQuarterDisabled: isQuarterDisabled, isQuarterInRange: isQuarterInRange, onQuarterHover: onQuarterHover, isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: isHalfYearInRange, onHalfYearHover: onHalfYearHover })] }), actions && (jsx(CalendarFooterActions, { actions: {
+    return (jsxs("div", { ...restProps, ref: ref, role: "application", "aria-label": `Range calendar, ${mode} view`, className: cx(calendarClasses.host, className), children: [quickSelect && (jsx(CalendarQuickSelect, { activeId: quickSelect.activeId, options: quickSelect.options })), jsxs("div", { className: calendarClasses.mainWithFooter, children: [jsxs("div", { className: calendarClasses.mainRangeCalendarWrapper, children: [jsx(Calendar, { ...calendarProps, renderAnnotations: renderAnnotations, className: cx(calendarClasses.noShadowHost, calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.className), ref: firstCalendarRef, mode: currentMode, value: value, onChange: onChangeFactory(0), referenceDate: referenceDates[0], onPrev: onFirstPrev, onDoublePrev: onFirstDoublePrev, onMonthControlClick: onMonthControlClick, onYearControlClick: onYearControlClick, disabledFooterControl: true, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnPrev: disableOnPrev, disableOnDoublePrev: disableOnDoublePrev, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onDateHover: onDateHover, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, onMonthHover: onMonthHover, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, onWeekHover: onWeekHover, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, onYearHover: onYearHover, isQuarterDisabled: isQuarterDisabled, isQuarterInRange: isQuarterInRange, onQuarterHover: onQuarterHover, isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: isHalfYearInRange, onHalfYearHover: onHalfYearHover }), jsx(Calendar, { ...calendarProps, renderAnnotations: renderAnnotations, className: cx(calendarClasses.noShadowHost, calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.className), ref: secondCalendarRef, mode: currentMode, value: value, onChange: onChangeFactory(1), referenceDate: referenceDates[1], onNext: onSecondNext, onDoubleNext: onSecondDoubleNext, onMonthControlClick: onMonthControlClick, onYearControlClick: onYearControlClick, disabledFooterControl: true, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnNext: disableOnNext, disableOnDoubleNext: disableOnDoubleNext, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onDateHover: onDateHover, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, onMonthHover: onMonthHover, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, onWeekHover: onWeekHover, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, onYearHover: onYearHover, isQuarterDisabled: isQuarterDisabled, isQuarterInRange: isQuarterInRange, onQuarterHover: onQuarterHover, isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: isHalfYearInRange, onHalfYearHover: onHalfYearHover })] }), actions && (jsx(CalendarFooterActions, { actions: {
                             secondaryButtonProps: {
                                 children: 'Cancel',
                                 disabled: false,