@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/asyncSelect/hooks/useAsyncSelect.js

@@ -1,192 +1,17 @@
-import { __assign, __read, __rest, __spreadArray } from "tslib";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import _keyBy from 'lodash/keyBy';
-import _reduce from 'lodash/reduce';
-import _isObject from 'lodash/isObject';
-//hooks
-import { useLocale } from '../../locale';
-import { useLatest } from '../../hooks/useLatest';
-import useCombinedRefs from '../../hooks/useCombinedRef';
-import { useInputChangeHandler } from './useInputChangeHandler';
-import { useAsyncOptionHandlers } from './useAsyncOptionHandlers';
-import { useResolveSelectedOptions } from './useResolveSelectedOptions';
-//helpers
-import { getInputValue, getNoResultsMsg, initGroupOptions, mergeOptions } from '../helpers';
-import { normalizeOptions } from '../../baseui/select/utils';
-import { add$props } from '../../helpers';
-//utils
-import { mergeOverrides } from '../../overrides';
-import defaultProps from '../../select/default-props';
-import { LOADING_KEY } from '../../select/constants';
-var EMPTY_OBJ = {};
-export var useAsyncSelect = function (params) {
-    var loadOptions = params.loadOptions, searchingText = params.searchingText, paginationBuffer = params.paginationBuffer, debounceInterval = params.debounceInterval, resolveSelectedOptions = params.resolveSelectedOptions, _a = params.minimumInput, minimumInput = _a === void 0 ? 0 : _a, _b = params.loadOnMount, loadOnMount = _b === void 0 ? false : _b, _c = params.loadOnFocus, loadOnFocus = _c === void 0 ? false : _c, _d = params.initialOptions, initialOptions = _d === void 0 ? EMPTY_OBJ : _d, _e = params.listenAllInputChanges, listenAllInputChanges = _e === void 0 ? true : _e, groupConfig = params.groupConfig, resolveValuesOnUpdate = params.resolveValuesOnUpdate, hideUnresolvedValues = params.hideUnresolvedValues, _f = params.moveSelectedOptionsToTop, moveSelectedOptionsToTop = _f === void 0 ? false : _f, 
-    //selectProps
-    onInputChange = params.onInputChange, noResultsMsg = params.noResultsMsg, overrides = params.overrides, groupedValue = params.value, controlRef = params.controlRef, propsInputRef = params.inputRef, propsCreateOption = params.createOption, _g = params.valueKey, valueKey = _g === void 0 ? defaultProps.valueKey : _g, _h = params.labelKey, labelKey = _h === void 0 ? defaultProps.labelKey : _h, propsOnChange = params.onChange, onOpen = params.onOpen, filterOptions = params.filterOptions, restSelectProps = __rest(params, ["loadOptions", "searchingText", "paginationBuffer", "debounceInterval", "resolveSelectedOptions", "minimumInput", "loadOnMount", "loadOnFocus", "initialOptions", "listenAllInputChanges", "groupConfig", "resolveValuesOnUpdate", "hideUnresolvedValues", "moveSelectedOptionsToTop", "onInputChange", "noResultsMsg", "overrides", "value", "controlRef", "inputRef", "createOption", "valueKey", "labelKey", "onChange", "onOpen", "filterOptions"]);
-    var locale = useLocale();
-    var loadOnMountRef = useLatest(loadOnMount);
-    var _j = __read(useState(function () {
-        return mergeOptions(initialOptions, initGroupOptions(groupConfig));
-    }), 2), options = _j[0], setOptions = _j[1];
-    var sortedOptionsRef = useRef({});
-    var _k = __read(useState(function () {
-        return _keyBy(normalizeOptions(initialOptions), valueKey);
-    }), 2), allOptionsMap = _k[0], setAllOptionsMap = _k[1];
-    var _l = __read(useState(null), 2), inputElement = _l[0], setInputElement = _l[1];
-    var inputRef = useLatest(inputElement);
-    var combinedRef = useCombinedRefs(setInputElement, propsInputRef);
-    var rootRef = useRef(null);
-    var popoverRef = useRef(null);
-    var _m = useResolveSelectedOptions({
-        groupedValue: groupedValue,
-        valueKey: valueKey,
-        inputRef: inputRef,
-        allOptionsMap: allOptionsMap,
-        sortedOptionsRef: sortedOptionsRef,
-        setOptions: setOptions,
-        setAllOptionsMap: setAllOptionsMap,
-        resolveValuesOnUpdate: resolveValuesOnUpdate,
-        resolveSelectedOptions: resolveSelectedOptions,
-    }), unresolvedGroupedValueKeys = _m.unresolvedGroupedValueKeys, isResolvingValues = _m.isResolvingValues;
-    var _o = __read(useState(loadOnMount), 2), _isLoading = _o[0], setIsLoading = _o[1];
-    var isLoading = isResolvingValues || _isLoading;
-    var unresolvedValueKeysRef = useRef([]);
-    var selectedOptions = useMemo(function () {
-        if (!groupedValue) {
-            return undefined;
-        }
-        unresolvedValueKeysRef.current = [];
-        var groupedValueObject = _reduce(groupedValue, function (acc, values, groupId) {
-            acc[groupId] = (values || []).flatMap(function (valueObjOrId) {
-                var _a, _b;
-                var valueId = _isObject(valueObjOrId) ? valueObjOrId[valueKey] : valueObjOrId;
-                var isResolving = isResolvingValues && unresolvedGroupedValueKeys[groupId].includes(valueId);
-                var valueObject = _isObject(valueObjOrId)
-                    ? valueObjOrId
-                    : (_a = {},
-                        _a[valueKey] = valueId,
-                        _a[labelKey] = valueId,
-                        _a);
-                var isUnresolved = !allOptionsMap[valueId];
-                var resolvedObject = isUnresolved ? valueObject : __assign(__assign({}, valueObject), allOptionsMap[valueId]);
-                if (isResolving) {
-                    return [__assign(__assign({}, resolvedObject), (_b = {}, _b[LOADING_KEY] = true, _b))];
-                }
-                if (isUnresolved && hideUnresolvedValues) {
-                    unresolvedValueKeysRef.current.push({ id: valueId, groupId: groupId });
-                    return [];
-                }
-                return [resolvedObject];
-            });
-            return acc;
-        }, {});
-        return normalizeOptions(groupedValueObject);
-    }, 
-    // All options map needs to be present in the dependency list so that the values get recomputed when
-    // the resolved options have been fetched
-    [
-        groupedValue,
-        valueKey,
-        isResolvingValues,
-        unresolvedGroupedValueKeys,
-        labelKey,
-        allOptionsMap,
-        hideUnresolvedValues,
-    ]);
-    var _p = useAsyncOptionHandlers({
-        valueKey: valueKey,
-        isLoading: isLoading,
-        minimumInput: minimumInput,
-        paginationBuffer: paginationBuffer,
-        inputRef: inputRef,
-        setAllOptionsMap: setAllOptionsMap,
-        setIsLoading: setIsLoading,
-        sortedOptionsRef: sortedOptionsRef,
-        setOptions: setOptions,
+import { __assign, __rest } from "tslib";
+import { useMemo } from 'react';
+import { useAsyncSelectAdapter } from './useAsyncSelectAdapter';
+import { useBaseAsyncSelect } from './useBaseAsyncSelect';
+import { arrayToGroupedOptions } from '../helpers';
+import { UNGROUPED_ID } from '../../select';
+var UNGROUP_GROUP_CONFIG = [{ id: UNGROUPED_ID, label: 'Ungrouped' }];
+export var useAsyncSelect = function (_a) {
+    var loadOptions = _a.loadOptions, initialOptions = _a.initialOptions, resolveSelectedOptions = _a.resolveSelectedOptions, value = _a.value, _b = _a.hideSelectAll, hideSelectAll = _b === void 0 ? false : _b, restProps = __rest(_a, ["loadOptions", "initialOptions", "resolveSelectedOptions", "value", "hideSelectAll"]);
+    var _c = useAsyncSelectAdapter({
         loadOptions: loadOptions,
-        createOption: propsCreateOption,
-        groupConfig: groupConfig,
-        selectedOptions: selectedOptions,
-        moveSelectedOptionsToTop: moveSelectedOptionsToTop,
-    }), fetchOptions = _p.fetchOptions, onPaginate = _p.onPaginate, inputChangeHandlerToDebounce = _p.onInputChange, createOption = _p.createOption, resultCountMap = _p.resultCountMap;
-    var _onInputChange = useInputChangeHandler({
-        inputElement: inputElement,
-        listenAllInputChanges: listenAllInputChanges,
-        onInputChange: onInputChange,
-        inputChangeHandlerToDebounce: inputChangeHandlerToDebounce,
-        debounceInterval: debounceInterval,
-    });
-    /************************************************ HANDLING FOCUS ****************************************************/
-    var handleFocus = useCallback(function (event) {
-        var _a, _b;
-        /**
-         * https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget
-         * event.relatedTarget points to last focused element
-         */
-        var lastFocusedNode = event.relatedTarget;
-        if (loadOnFocus &&
-            !((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(lastFocusedNode)) &&
-            !((_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.contains(lastFocusedNode))) {
-            inputChangeHandlerToDebounce();
-        }
-    }, [loadOnFocus, inputChangeHandlerToDebounce]);
-    /******************************************* HANDLING FETCH ON MOUNT ************************************************/
-    useEffect(function () {
-        if (loadOnMountRef.current) {
-            fetchOptions(groupConfig.map(function (_a) {
-                var id = _a.id;
-                return ({ group: id, pageNumber: 0 });
-            }));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- only want to load the options on first mount
-    }, []);
-    /********************************************************************************************************************/
-    var inputText = getInputValue(inputRef), adaptedNoResultsMsg = getNoResultsMsg({
-        isLoading: isLoading,
-        noResultsMsg: noResultsMsg,
-        inputText: inputText,
-        minimumInput: minimumInput,
-        searchingText: searchingText !== null && searchingText !== void 0 ? searchingText : locale.asyncSelect.searchingText,
-        emptyInputMsg: locale.asyncSelect.emptyInputMsg,
-        searchable: restSelectProps.searchable,
-    });
-    var mergedOverrides = useMemo(function () {
-        return mergeOverrides(__assign({ Root: { props: { ref: rootRef, onFocus: handleFocus } }, Popover: { props: { overrides: { Inner: { props: { ref: popoverRef } } } } }, StatefulMenu: { props: { $onPaginate: onPaginate } }, NoResults: { props: add$props({ isLoading: isLoading, inputText: inputText, adaptedNoResultsMsg: adaptedNoResultsMsg }) } }, (params.type === 'overlay'
-            ? {
-                // In overlaySelect, overflow property is on OverlayContentContainer
-                OverlayContentContainer: { props: { onScroll: onPaginate } },
-                Menu: { props: { $onPaginate: onPaginate } },
-            }
-            : {
-                //Overriding DropdownContainer and not StatefulMenu so that async select remains functional even when
-                //user overrides StatefulMenu in favour of rendering virtualized menu
-                Menu: { props: { onScroll: onPaginate } },
-            })), overrides);
-    }, [handleFocus, onPaginate, isLoading, inputText, adaptedNoResultsMsg, params.type, overrides]);
-    var onChange = useCallback(function (onChangeParams) {
-        propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(__assign(__assign({}, onChangeParams), { valueKeys: __spreadArray(__spreadArray([], __read(unresolvedValueKeysRef.current.map(function (_a) {
-                var id = _a.id;
-                return id;
-            })), false), __read(onChangeParams.value.map(function (opt) { return opt[valueKey]; })), false), value: unresolvedValueKeysRef.current.length
-                ? __spreadArray(__spreadArray([], __read(unresolvedValueKeysRef.current.map(function (_a) {
-                    var _b;
-                    var id = _a.id, groupId = _a.groupId;
-                    return (_b = {},
-                        _b[valueKey] = id,
-                        _b[labelKey] = id,
-                        _b.__optgroup = groupId,
-                        _b);
-                })), false), __read(onChangeParams.value), false) : onChangeParams.value }));
-    }, [propsOnChange, valueKey, labelKey]);
-    return __assign(__assign({ children: undefined }, restSelectProps), { options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: combinedRef, overrides: mergedOverrides, noResultsMsg: adaptedNoResultsMsg, createOption: createOption, onInputChange: _onInputChange, valueKey: valueKey, labelKey: labelKey, type: restSelectProps.type, resultCountMap: resultCountMap, onChange: onChange, onOpen: useCallback(function () {
-            moveSelectedOptionsToTop &&
-                setOptions(mergeOptions((selectedOptions || []), sortedOptionsRef.current || []));
-            onOpen && onOpen();
-        }, [moveSelectedOptionsToTop, onOpen, selectedOptions]), filterOptions: useCallback(function () {
-            var param = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                param[_i] = arguments[_i];
-            }
-            return (filterOptions ? filterOptions.apply(void 0, __spreadArray([], __read(param), false)) : param[0]);
-        }, [filterOptions]) });
+        resolveSelectedOptions: resolveSelectedOptions,
+        value: value,
+    }), hasMore = _c.hasMore, adaptedLoadOptions = _c.adaptedLoadOptions, adaptedResolveSelectedOptions = _c.adaptedResolveSelectedOptions, adaptedValue = _c.adaptedValue;
+    var asyncSelectProps = useBaseAsyncSelect(__assign(__assign({}, restProps), { initialOptions: useMemo(function () { return arrayToGroupedOptions(initialOptions || []); }, [initialOptions]), loadOptions: adaptedLoadOptions, groupConfig: UNGROUP_GROUP_CONFIG, resolveSelectedOptions: resolveSelectedOptions ? adaptedResolveSelectedOptions : undefined, value: adaptedValue }));
+    return __assign(__assign({}, asyncSelectProps), { hideSelectAll: hideSelectAll || hasMore });
 };

package/esm/asyncSelect/hooks/useAsyncSelectAdapter.d.ts

@@ -0,0 +1,14 @@
+import { AsyncSelectProps, GroupedAsyncSelectProps } from '../types';
+type useAsyncSelectAdpaterProps = {
+    loadOptions: AsyncSelectProps['loadOptions'];
+    resolveSelectedOptions: AsyncSelectProps['resolveSelectedOptions'];
+    value: AsyncSelectProps['value'];
+};
+type useAsyncSelectAdpaterReturnType = {
+    hasMore: boolean;
+    adaptedLoadOptions: GroupedAsyncSelectProps['loadOptions'];
+    adaptedResolveSelectedOptions: Required<GroupedAsyncSelectProps>['resolveSelectedOptions'];
+    adaptedValue: GroupedAsyncSelectProps['value'];
+};
+export declare const useAsyncSelectAdapter: ({ loadOptions, resolveSelectedOptions, value, }: useAsyncSelectAdpaterProps) => useAsyncSelectAdpaterReturnType;
+export {};

package/esm/asyncSelect/hooks/useAsyncSelectAdapter.js

@@ -0,0 +1,54 @@
+import { __awaiter, __generator, __read } from "tslib";
+//lib
+import { useCallback, useState, useMemo } from 'react';
+//constants
+import { UNGROUPED_ID } from '../../select/constants';
+export var useAsyncSelectAdapter = function (_a) {
+    var loadOptions = _a.loadOptions, resolveSelectedOptions = _a.resolveSelectedOptions, value = _a.value;
+    var _b = __read(useState(true), 2), hasMore = _b[0], setHasMore = _b[1];
+    var adaptedLoadOptions = useCallback(function (input, groupFilters) { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, filter, _b, options, complete;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _a = __read(groupFilters, 1), filter = _a[0];
+                    if (!filter) {
+                        return [2 /*return*/, { groups: [] }];
+                    }
+                    return [4 /*yield*/, loadOptions(input, filter.pageNumber)];
+                case 1:
+                    _b = _c.sent(), options = _b.options, complete = _b.complete;
+                    setHasMore(!complete);
+                    return [2 /*return*/, {
+                            groups: [{ group: filter.group, options: options, complete: complete }],
+                        }];
+            }
+        });
+    }); }, [loadOptions]);
+    var adaptedResolveSelectedOptions = useCallback(function (groupVsUnresolvedValueKeys) { return __awaiter(void 0, void 0, void 0, function () {
+        var resolvedOptions;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!resolveSelectedOptions) {
+                        return [2 /*return*/, {}];
+                    }
+                    return [4 /*yield*/, resolveSelectedOptions(groupVsUnresolvedValueKeys[UNGROUPED_ID] || [])];
+                case 1:
+                    resolvedOptions = _b.sent();
+                    return [2 /*return*/, (_a = {}, _a[UNGROUPED_ID] = resolvedOptions, _a)];
+            }
+        });
+    }); }, [resolveSelectedOptions]);
+    var adaptedValue = useMemo(function () {
+        var _a;
+        return (value ? (_a = {}, _a[UNGROUPED_ID] = value, _a) : value);
+    }, [value]);
+    return {
+        hasMore: hasMore,
+        adaptedLoadOptions: adaptedLoadOptions,
+        adaptedResolveSelectedOptions: adaptedResolveSelectedOptions,
+        adaptedValue: adaptedValue,
+    };
+};

package/esm/asyncSelect/hooks/useBaseAsyncSelect.d.ts

@@ -0,0 +1,17 @@
+import type { OnChangeParams, SelectProps } from '../../select';
+import type { GroupConfigWithCount, GroupedAsyncSelectProps, GroupedOptions, Id } from '../types';
+import type { ResultCountMap } from './useAsyncOptionHandlers';
+import type { Merge } from '../../type-utils';
+export type UseAsyncSelectParams = Merge<GroupedAsyncSelectProps, {
+    onChange?: (params: OnChangeParams & {
+        valueKeys: Id[];
+    }) => unknown;
+}>;
+export type OptionsUpdater = (getUpdatedOptions: (currentOptions: GroupedOptions) => GroupedOptions) => void;
+export type OptionsCountMapUpdater = (getUpdatedResultCountMap: (currentResultCountMap: ResultCountMap) => ResultCountMap) => void;
+export declare const useBaseAsyncSelect: (params: UseAsyncSelectParams) => SelectProps & {
+    groupConfigWithCount: GroupConfigWithCount;
+    updateOptions: OptionsUpdater;
+    updateResultCountMap: OptionsCountMapUpdater;
+    resetAsyncSelectPagination: () => void;
+};

package/esm/asyncSelect/hooks/useBaseAsyncSelect.js

@@ -0,0 +1,266 @@
+import { __assign, __awaiter, __generator, __read, __rest, __spreadArray } from "tslib";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import _keyBy from 'lodash/keyBy';
+import _reduce from 'lodash/reduce';
+import _isObject from 'lodash/isObject';
+//hooks
+import { useLocale } from '../../locale';
+import { useLatest } from '../../hooks/useLatest';
+import useCombinedRefs from '../../hooks/useCombinedRef';
+import { useInputChangeHandler } from './useInputChangeHandler';
+import { useResolveSelectedOptions } from './useResolveSelectedOptions';
+//helpers
+import { addOptionsInMap, getInputValue, getNoResultsMsg, initGroupOptions, mergeOptions } from '../helpers';
+import { normalizeOptions } from '../../baseui/select/utils';
+import { add$props } from '../../helpers';
+//utils
+import { mergeOverrides } from '../../overrides';
+import { defaultAsyncSelectFilterOptions } from '../utils/defaultAsyncSelectFilterOptions';
+import defaultProps from '../../select/default-props';
+import { LOADING_KEY } from '../../select/constants';
+import { useAsyncOptions } from './useAsyncOptions';
+import { useCreateOption } from './useCreateOption';
+var EMPTY_OBJ = {};
+// eslint-disable-next-line max-statements -- AsyncSelect is... big
+export var useBaseAsyncSelect = function (params) {
+    var propsLoadOptions = params.loadOptions, searchingText = params.searchingText, paginationBuffer = params.paginationBuffer, debounceInterval = params.debounceInterval, resolveSelectedOptions = params.resolveSelectedOptions, _a = params.minimumInput, minimumInput = _a === void 0 ? 0 : _a, _b = params.loadOnMount, loadOnMount = _b === void 0 ? false : _b, _c = params.refetchOnGroupConfigChange, refetchOnGroupConfigChange = _c === void 0 ? false : _c, _d = params.loadOnFocus, loadOnFocus = _d === void 0 ? false : _d, _e = params.initialOptions, initialOptions = _e === void 0 ? EMPTY_OBJ : _e, _f = params.listenAllInputChanges, listenAllInputChanges = _f === void 0 ? true : _f, groupConfig = params.groupConfig, resolveValuesOnUpdate = params.resolveValuesOnUpdate, hideUnresolvedValues = params.hideUnresolvedValues, _g = params.moveSelectedOptionsToTop, moveSelectedOptionsToTop = _g === void 0 ? false : _g, 
+    //selectProps
+    onInputChange = params.onInputChange, noResultsMsg = params.noResultsMsg, overrides = params.overrides, groupedValue = params.value, controlRef = params.controlRef, propsInputRef = params.inputRef, propsCreateOption = params.createOption, _h = params.valueKey, valueKey = _h === void 0 ? defaultProps.valueKey : _h, _j = params.labelKey, labelKey = _j === void 0 ? defaultProps.labelKey : _j, propsOnChange = params.onChange, onOpen = params.onOpen, filterOptions = params.filterOptions, restSelectProps = __rest(params, ["loadOptions", "searchingText", "paginationBuffer", "debounceInterval", "resolveSelectedOptions", "minimumInput", "loadOnMount", "refetchOnGroupConfigChange", "loadOnFocus", "initialOptions", "listenAllInputChanges", "groupConfig", "resolveValuesOnUpdate", "hideUnresolvedValues", "moveSelectedOptionsToTop", "onInputChange", "noResultsMsg", "overrides", "value", "controlRef", "inputRef", "createOption", "valueKey", "labelKey", "onChange", "onOpen", "filterOptions"]);
+    var locale = useLocale();
+    var _k = __read(useState(function () {
+        return mergeOptions(initialOptions, initGroupOptions(groupConfig));
+    }), 2), options = _k[0], setOptions = _k[1];
+    var sortedOptionsRef = useRef({});
+    var _l = __read(useState(function () {
+        return _keyBy(normalizeOptions(initialOptions), valueKey);
+    }), 2), allOptionsMap = _l[0], setAllOptionsMap = _l[1];
+    var _m = __read(useState(null), 2), inputElement = _m[0], setInputElement = _m[1];
+    var inputRef = useLatest(inputElement);
+    var combinedRef = useCombinedRefs(setInputElement, propsInputRef);
+    var rootRef = useRef(null);
+    var popoverRef = useRef(null);
+    /** Same node that receives onPaginate (Menu or OverlayContentContainer); avoids querying the popover DOM. */
+    var paginationScrollContainerRef = useRef(null);
+    var loadOptionsRef = useLatest(propsLoadOptions);
+    var valueKeyRef = useLatest(valueKey);
+    var loadOptions = useCallback(function (inputValue, itemGroups) { return __awaiter(void 0, void 0, void 0, function () {
+        var loadedOptions, groupedOptions;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, loadOptionsRef.current(inputValue, itemGroups)];
+                case 1:
+                    loadedOptions = _a.sent();
+                    groupedOptions = {};
+                    loadedOptions.groups.forEach(function (_a) {
+                        var _options = _a.options, complete = _a.complete, group = _a.group, count = _a.count;
+                        groupedOptions[group] = _options;
+                    });
+                    setAllOptionsMap &&
+                        setAllOptionsMap(function (prevOptions) { return addOptionsInMap(prevOptions, groupedOptions, valueKeyRef.current); });
+                    itemGroups.forEach(function (_a) {
+                        var group = _a.group, pageNumber = _a.pageNumber;
+                        if (sortedOptionsRef === null || sortedOptionsRef === void 0 ? void 0 : sortedOptionsRef.current) {
+                            if (pageNumber) {
+                                sortedOptionsRef.current[group] = __spreadArray(__spreadArray([], __read(sortedOptionsRef.current[group]), false), __read(groupedOptions[group]), false);
+                            }
+                            else {
+                                sortedOptionsRef.current[group] = groupedOptions[group];
+                            }
+                        }
+                    });
+                    return [2 /*return*/, loadedOptions];
+            }
+        });
+    }); }, [loadOptionsRef, valueKeyRef]);
+    var _o = useResolveSelectedOptions({
+        groupedValue: groupedValue,
+        valueKey: valueKey,
+        inputRef: inputRef,
+        allOptionsMap: allOptionsMap,
+        sortedOptionsRef: sortedOptionsRef,
+        setOptions: setOptions,
+        setAllOptionsMap: setAllOptionsMap,
+        resolveValuesOnUpdate: resolveValuesOnUpdate,
+        resolveSelectedOptions: resolveSelectedOptions,
+    }), unresolvedGroupedValueKeys = _o.unresolvedGroupedValueKeys, isResolvingValues = _o.isResolvingValues;
+    var unresolvedValueKeysRef = useRef([]);
+    var selectedOptions = useMemo(function () {
+        if (!groupedValue) {
+            return undefined;
+        }
+        unresolvedValueKeysRef.current = [];
+        var groupedValueObject = _reduce(groupedValue, function (acc, values, groupId) {
+            acc[groupId] = (values || []).flatMap(function (valueObjOrId) {
+                var _a, _b;
+                var valueId = _isObject(valueObjOrId) ? valueObjOrId[valueKey] : valueObjOrId;
+                var isResolving = isResolvingValues && unresolvedGroupedValueKeys[groupId].includes(valueId);
+                var valueObject = _isObject(valueObjOrId)
+                    ? valueObjOrId
+                    : (_a = {},
+                        _a[valueKey] = valueId,
+                        _a[labelKey] = valueId,
+                        _a);
+                var isUnresolved = !allOptionsMap[valueId];
+                var resolvedObject = isUnresolved ? valueObject : __assign(__assign({}, valueObject), allOptionsMap[valueId]);
+                if (isResolving) {
+                    return [__assign(__assign({}, resolvedObject), (_b = {}, _b[LOADING_KEY] = true, _b))];
+                }
+                if (isUnresolved && hideUnresolvedValues) {
+                    unresolvedValueKeysRef.current.push({ id: valueId, groupId: groupId });
+                    return [];
+                }
+                return [resolvedObject];
+            });
+            return acc;
+        }, {});
+        return normalizeOptions(groupedValueObject);
+    }, 
+    // All options map needs to be present in the dependency list so that the values get recomputed when
+    // the resolved options have been fetched
+    [
+        groupedValue,
+        valueKey,
+        isResolvingValues,
+        unresolvedGroupedValueKeys,
+        labelKey,
+        allOptionsMap,
+        hideUnresolvedValues,
+    ]);
+    var _p = useAsyncOptions({
+        labelKey: labelKey,
+        valueKey: valueKey,
+        minimumInput: minimumInput,
+        paginationBuffer: paginationBuffer,
+        loadOptions: loadOptions,
+        groupConfig: groupConfig,
+        selectedOptions: selectedOptions,
+        moveSelectedOptionsToTop: moveSelectedOptionsToTop,
+        loadOnMount: loadOnMount,
+        refetchOnGroupConfigChange: refetchOnGroupConfigChange,
+        setOptions: setOptions,
+    }), onPaginate = _p.onPaginate, _inputChangeHandlerToDebounce = _p.onInputChange, groupConfigWithCount = _p.groupConfigWithCount, _isLoading = _p.isLoading, setIsLoading = _p.setIsLoading, resetAsyncSelectPagination = _p.resetAsyncSelectPagination, resultCountMap = _p.resultCountMap, setResultCountMap = _p.setResultCountMap, isSearchPending = _p.isSearchPending;
+    /** Fetch or value resolution in flight; drives spinner and pagination. */
+    var isLoading = isResolvingValues || _isLoading;
+    var isFlatAsyncSelect = restSelectProps.multi && groupConfig.length === 1;
+    useLayoutEffect(function () {
+        // Only flat AsyncSelect (single group). GroupedAsyncSelect paginates per collapsible group via $onPaginate(groupId)
+        if (!isFlatAsyncSelect || isLoading)
+            return undefined;
+        var scrollEl = paginationScrollContainerRef.current;
+        if (!scrollEl)
+            return undefined;
+        var frameId = requestAnimationFrame(function () {
+            if (!scrollEl.isConnected)
+                return;
+            onPaginate({ target: scrollEl });
+        });
+        return function () { return cancelAnimationFrame(frameId); };
+        // selectedOptions/options are needed to trigger a re-render when the options change
+    }, [selectedOptions, options, onPaginate, isFlatAsyncSelect, isLoading]);
+    var inputChangeHandlerToDebounce = useCallback(function (e) {
+        var _a;
+        if (((_a = inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) !== null && _a !== void 0 ? _a : '').length < minimumInput && (sortedOptionsRef === null || sortedOptionsRef === void 0 ? void 0 : sortedOptionsRef.current)) {
+            sortedOptionsRef.current = initGroupOptions(groupConfig);
+        }
+        _inputChangeHandlerToDebounce(e);
+    }, [_inputChangeHandlerToDebounce, groupConfig, inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, minimumInput]);
+    var createOption = useCreateOption({
+        createOption: propsCreateOption,
+        labelKey: labelKey,
+        valueKey: valueKey,
+        setIsLoading: setIsLoading,
+    }).createOption;
+    var _onInputChange = useInputChangeHandler({
+        inputElement: inputElement,
+        listenAllInputChanges: listenAllInputChanges,
+        onInputChange: onInputChange,
+        inputChangeHandlerToDebounce: inputChangeHandlerToDebounce,
+        debounceInterval: debounceInterval,
+    });
+    /************************************************ HANDLING FOCUS ****************************************************/
+    var handleFocus = useCallback(function (event) {
+        var _a, _b, _c;
+        /**
+         * https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget
+         * event.relatedTarget points to last focused element
+         */
+        var lastFocusedNode = event.relatedTarget;
+        if (loadOnFocus &&
+            !((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(lastFocusedNode)) &&
+            !((_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.contains(lastFocusedNode))) {
+            inputChangeHandlerToDebounce({ value: (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value });
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only keeping required dependencies
+    [loadOnFocus, inputChangeHandlerToDebounce]);
+    /********************************************************************************************************************/
+    var inputText = getInputValue(inputRef), adaptedNoResultsMsg = getNoResultsMsg({
+        isLoading: isLoading,
+        isSearchPending: isSearchPending,
+        loadOnMount: loadOnMount,
+        loadOnFocus: loadOnFocus,
+        noResultsMsg: noResultsMsg,
+        inputText: inputText,
+        minimumInput: minimumInput,
+        searchingText: searchingText !== null && searchingText !== void 0 ? searchingText : locale.asyncSelect.searchingText,
+        emptyInputMsg: locale.asyncSelect.emptyInputMsg,
+        searchable: restSelectProps.searchable,
+        notSufficientCharacterMsg: locale.asyncSelect.notSufficientCharacterMsg,
+    });
+    var hasDropdownFooter = !!params.dropdownFooter;
+    var mergedOverrides = useMemo(function () {
+        return mergeOverrides(__assign({ Root: { props: { ref: rootRef, onFocus: handleFocus } }, Popover: { props: { overrides: { Inner: { props: { ref: popoverRef } } } } }, StatefulMenu: { props: { $onPaginate: onPaginate } }, NoResults: { props: add$props({ isLoading: isLoading, inputText: inputText, adaptedNoResultsMsg: adaptedNoResultsMsg }) } }, (params.type === 'overlay'
+            ? {
+                // In overlaySelect, overflow property is on OverlayContentContainer or either Menu at a time
+                // depending on Menu scrollContainer or dropdownFooter is present
+                OverlayContentContainer: {
+                    props: hasDropdownFooter
+                        ? {}
+                        : {
+                            onScroll: onPaginate,
+                            ref: paginationScrollContainerRef,
+                        },
+                },
+                Menu: {
+                    props: __assign({ $onPaginate: onPaginate }, (hasDropdownFooter ? { onScroll: onPaginate, ref: paginationScrollContainerRef } : {})),
+                },
+            }
+            : {
+                //Overriding DropdownContainer and not StatefulMenu so that async select remains functional even when
+                //user overrides StatefulMenu in favour of rendering virtualized menu
+                Menu: { props: { onScroll: onPaginate, ref: paginationScrollContainerRef } },
+            })), overrides);
+    }, [handleFocus, onPaginate, isLoading, inputText, adaptedNoResultsMsg, params.type, overrides, hasDropdownFooter]);
+    var onChange = useCallback(function (onChangeParams) {
+        propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(__assign(__assign({}, onChangeParams), { valueKeys: __spreadArray(__spreadArray([], __read(unresolvedValueKeysRef.current.map(function (_a) {
+                var id = _a.id;
+                return id;
+            })), false), __read(onChangeParams.value.map(function (opt) { return opt[valueKey]; })), false), value: unresolvedValueKeysRef.current.length
+                ? __spreadArray(__spreadArray([], __read(unresolvedValueKeysRef.current.map(function (_a) {
+                    var _b;
+                    var id = _a.id, groupId = _a.groupId;
+                    return (_b = {},
+                        _b[valueKey] = id,
+                        _b[labelKey] = id,
+                        _b.__optgroup = groupId,
+                        _b);
+                })), false), __read(onChangeParams.value), false) : onChangeParams.value }));
+    }, [propsOnChange, valueKey, labelKey]);
+    var asyncFilterOptions = useCallback(function (asyncOptions, asyncFilterValue, asyncExcludeOptions, asyncFilterProps) {
+        return filterOptions
+            ? filterOptions(asyncOptions, asyncFilterValue, asyncExcludeOptions, asyncFilterProps)
+            : defaultAsyncSelectFilterOptions(asyncOptions, asyncFilterValue, asyncExcludeOptions, __assign(__assign({}, asyncFilterProps), { filterOnlyCreated: true }));
+    }, [filterOptions]);
+    var updateOptions = useCallback(function (getUpdatedOptions) {
+        var updatedOptions = getUpdatedOptions(options);
+        setOptions(updatedOptions);
+        setAllOptionsMap(_keyBy(normalizeOptions(updatedOptions)));
+        sortedOptionsRef.current = updatedOptions;
+    }, [options]);
+    var updateResultCountMap = useCallback(function (getUpdatedResultCountMap) { return setResultCountMap(getUpdatedResultCountMap(resultCountMap)); }, [resultCountMap, setResultCountMap]);
+    return __assign(__assign({}, restSelectProps), { options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: combinedRef, overrides: mergedOverrides, noResultsMsg: adaptedNoResultsMsg, createOption: createOption, onInputChange: _onInputChange, valueKey: valueKey, labelKey: labelKey, type: restSelectProps.type, groupConfigWithCount: groupConfigWithCount, onChange: onChange, onOpen: useCallback(function () {
+            moveSelectedOptionsToTop &&
+                setOptions(mergeOptions((selectedOptions || []), sortedOptionsRef.current || []));
+            onOpen && onOpen();
+        }, [moveSelectedOptionsToTop, onOpen, selectedOptions]), filterOptions: asyncFilterOptions, resetAsyncSelectPagination: resetAsyncSelectPagination, updateOptions: updateOptions, updateResultCountMap: updateResultCountMap });
+};

package/esm/asyncSelect/hooks/useCreateOption.d.ts

@@ -0,0 +1,10 @@
+import { Options } from '../../baseui/select';
+import { AsyncSelectProps, SetStateFunc } from '../types';
+export declare const useCreateOption: ({ createOption: propsCreateOption, labelKey, valueKey, setIsLoading, }: {
+    createOption?: AsyncSelectProps['createOption'];
+    labelKey: string;
+    valueKey: string;
+    setIsLoading: SetStateFunc<boolean>;
+}) => {
+    createOption: (label: string) => Promise<Options>;
+};

package/esm/asyncSelect/hooks/useCreateOption.js

@@ -0,0 +1,40 @@
+import { __assign, __awaiter, __generator } from "tslib";
+import { useCallback } from 'react';
+import { CREATED_KEY } from '../../baseui/select';
+import { defaultCreateOption } from '../utils/defaultCreateOption';
+import { arrayToGroupedOptions, normalizeOptions } from '../helpers';
+export var useCreateOption = function (_a) {
+    var propsCreateOption = _a.createOption, labelKey = _a.labelKey, valueKey = _a.valueKey, setIsLoading = _a.setIsLoading;
+    var createOption = useCallback(function (label) { return __awaiter(void 0, void 0, void 0, function () {
+        var createdOptions, err_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!propsCreateOption) {
+                        return [2 /*return*/, defaultCreateOption(label, { labelKey: labelKey, valueKey: valueKey })];
+                    }
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, 4, 5]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, propsCreateOption(label)];
+                case 2:
+                    createdOptions = _b.sent();
+                    createdOptions = arrayToGroupedOptions((_a = normalizeOptions(createdOptions)) === null || _a === void 0 ? void 0 : _a.map(function (opt) {
+                        var _a;
+                        return (__assign(__assign({}, opt), (_a = {}, _a[CREATED_KEY] = true, _a)));
+                    }));
+                    return [2 /*return*/, createdOptions];
+                case 3:
+                    err_1 = _b.sent();
+                    throw err_1;
+                case 4:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [labelKey, propsCreateOption, setIsLoading, valueKey]);
+    return { createOption: createOption };
+};

package/esm/asyncSelect/hooks/useGroupAsyncSelectAdapter.d.ts

@@ -0,0 +1,13 @@
+import { Locale } from '../../locale';
+import { GroupedAsyncSelectProps } from '../types';
+import { UseAsyncSelectParams } from './useBaseAsyncSelect';
+type useGroupAsyncSelectAdapterProps = {
+    onChange: GroupedAsyncSelectProps['onChange'];
+    valueKey: GroupedAsyncSelectProps['valueKey'];
+};
+type useGroupAsyncSelectAdapterReturnType = {
+    locale: Locale;
+    adaptedOnChange: Required<UseAsyncSelectParams>['onChange'];
+};
+export declare const useGroupAsyncSelectAdapter: ({ onChange, valueKey, }: useGroupAsyncSelectAdapterProps) => useGroupAsyncSelectAdapterReturnType;
+export {};