@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/asyncSelect/hooks/useAsyncSelect.js

@@ -3,194 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAsyncSelect = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-var keyBy_1 = (0, tslib_1.__importDefault)(require("lodash/keyBy"));
-var reduce_1 = (0, tslib_1.__importDefault)(require("lodash/reduce"));
-var isObject_1 = (0, tslib_1.__importDefault)(require("lodash/isObject"));
-//hooks
-var locale_1 = require("../../locale");
-var useLatest_1 = require("../../hooks/useLatest");
-var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedRef"));
-var useInputChangeHandler_1 = require("./useInputChangeHandler");
-var useAsyncOptionHandlers_1 = require("./useAsyncOptionHandlers");
-var useResolveSelectedOptions_1 = require("./useResolveSelectedOptions");
-//helpers
+var useAsyncSelectAdapter_1 = require("./useAsyncSelectAdapter");
+var useBaseAsyncSelect_1 = require("./useBaseAsyncSelect");
 var helpers_1 = require("../helpers");
-var utils_1 = require("../../baseui/select/utils");
-var helpers_2 = require("../../helpers");
-//utils
-var overrides_1 = require("../../overrides");
-var default_props_1 = (0, tslib_1.__importDefault)(require("../../select/default-props"));
-var constants_1 = require("../../select/constants");
-var EMPTY_OBJ = {};
-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 ? default_props_1.default.valueKey : _g, _h = params.labelKey, labelKey = _h === void 0 ? default_props_1.default.labelKey : _h, propsOnChange = params.onChange, onOpen = params.onOpen, filterOptions = params.filterOptions, restSelectProps = (0, tslib_1.__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 = (0, locale_1.useLocale)();
-    var loadOnMountRef = (0, useLatest_1.useLatest)(loadOnMount);
-    var _j = (0, tslib_1.__read)((0, react_1.useState)(function () {
-        return (0, helpers_1.mergeOptions)(initialOptions, (0, helpers_1.initGroupOptions)(groupConfig));
-    }), 2), options = _j[0], setOptions = _j[1];
-    var sortedOptionsRef = (0, react_1.useRef)({});
-    var _k = (0, tslib_1.__read)((0, react_1.useState)(function () {
-        return (0, keyBy_1.default)((0, utils_1.normalizeOptions)(initialOptions), valueKey);
-    }), 2), allOptionsMap = _k[0], setAllOptionsMap = _k[1];
-    var _l = (0, tslib_1.__read)((0, react_1.useState)(null), 2), inputElement = _l[0], setInputElement = _l[1];
-    var inputRef = (0, useLatest_1.useLatest)(inputElement);
-    var combinedRef = (0, useCombinedRef_1.default)(setInputElement, propsInputRef);
-    var rootRef = (0, react_1.useRef)(null);
-    var popoverRef = (0, react_1.useRef)(null);
-    var _m = (0, useResolveSelectedOptions_1.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 = (0, tslib_1.__read)((0, react_1.useState)(loadOnMount), 2), _isLoading = _o[0], setIsLoading = _o[1];
-    var isLoading = isResolvingValues || _isLoading;
-    var unresolvedValueKeysRef = (0, react_1.useRef)([]);
-    var selectedOptions = (0, react_1.useMemo)(function () {
-        if (!groupedValue) {
-            return undefined;
-        }
-        unresolvedValueKeysRef.current = [];
-        var groupedValueObject = (0, reduce_1.default)(groupedValue, function (acc, values, groupId) {
-            acc[groupId] = (values || []).flatMap(function (valueObjOrId) {
-                var _a, _b;
-                var valueId = (0, isObject_1.default)(valueObjOrId) ? valueObjOrId[valueKey] : valueObjOrId;
-                var isResolving = isResolvingValues && unresolvedGroupedValueKeys[groupId].includes(valueId);
-                var valueObject = (0, isObject_1.default)(valueObjOrId)
-                    ? valueObjOrId
-                    : (_a = {},
-                        _a[valueKey] = valueId,
-                        _a[labelKey] = valueId,
-                        _a);
-                var isUnresolved = !allOptionsMap[valueId];
-                var resolvedObject = isUnresolved ? valueObject : (0, tslib_1.__assign)((0, tslib_1.__assign)({}, valueObject), allOptionsMap[valueId]);
-                if (isResolving) {
-                    return [(0, tslib_1.__assign)((0, tslib_1.__assign)({}, resolvedObject), (_b = {}, _b[constants_1.LOADING_KEY] = true, _b))];
-                }
-                if (isUnresolved && hideUnresolvedValues) {
-                    unresolvedValueKeysRef.current.push({ id: valueId, groupId: groupId });
-                    return [];
-                }
-                return [resolvedObject];
-            });
-            return acc;
-        }, {});
-        return (0, utils_1.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 = (0, useAsyncOptionHandlers_1.useAsyncOptionHandlers)({
-        valueKey: valueKey,
-        isLoading: isLoading,
-        minimumInput: minimumInput,
-        paginationBuffer: paginationBuffer,
-        inputRef: inputRef,
-        setAllOptionsMap: setAllOptionsMap,
-        setIsLoading: setIsLoading,
-        sortedOptionsRef: sortedOptionsRef,
-        setOptions: setOptions,
+var select_1 = require("../../select");
+var UNGROUP_GROUP_CONFIG = [{ id: select_1.UNGROUPED_ID, label: 'Ungrouped' }];
+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 = tslib_1.__rest(_a, ["loadOptions", "initialOptions", "resolveSelectedOptions", "value", "hideSelectAll"]);
+    var _c = (0, useAsyncSelectAdapter_1.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 = (0, useInputChangeHandler_1.useInputChangeHandler)({
-        inputElement: inputElement,
-        listenAllInputChanges: listenAllInputChanges,
-        onInputChange: onInputChange,
-        inputChangeHandlerToDebounce: inputChangeHandlerToDebounce,
-        debounceInterval: debounceInterval,
-    });
-    /************************************************ HANDLING FOCUS ****************************************************/
-    var handleFocus = (0, react_1.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 ************************************************/
-    (0, react_1.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 = (0, helpers_1.getInputValue)(inputRef), adaptedNoResultsMsg = (0, helpers_1.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 = (0, react_1.useMemo)(function () {
-        return (0, overrides_1.mergeOverrides)((0, tslib_1.__assign)({ Root: { props: { ref: rootRef, onFocus: handleFocus } }, Popover: { props: { overrides: { Inner: { props: { ref: popoverRef } } } } }, StatefulMenu: { props: { $onPaginate: onPaginate } }, NoResults: { props: (0, helpers_2.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 = (0, react_1.useCallback)(function (onChangeParams) {
-        propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange((0, tslib_1.__assign)((0, tslib_1.__assign)({}, onChangeParams), { valueKeys: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(unresolvedValueKeysRef.current.map(function (_a) {
-                var id = _a.id;
-                return id;
-            })), false), (0, tslib_1.__read)(onChangeParams.value.map(function (opt) { return opt[valueKey]; })), false), value: unresolvedValueKeysRef.current.length
-                ? (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__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), (0, tslib_1.__read)(onChangeParams.value), false) : onChangeParams.value }));
-    }, [propsOnChange, valueKey, labelKey]);
-    return (0, tslib_1.__assign)((0, tslib_1.__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: (0, react_1.useCallback)(function () {
-            moveSelectedOptionsToTop &&
-                setOptions((0, helpers_1.mergeOptions)((selectedOptions || []), sortedOptionsRef.current || []));
-            onOpen && onOpen();
-        }, [moveSelectedOptionsToTop, onOpen, selectedOptions]), filterOptions: (0, react_1.useCallback)(function () {
-            var param = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                param[_i] = arguments[_i];
-            }
-            return (filterOptions ? filterOptions.apply(void 0, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(param), false)) : param[0]);
-        }, [filterOptions]) });
+        resolveSelectedOptions: resolveSelectedOptions,
+        value: value,
+    }), hasMore = _c.hasMore, adaptedLoadOptions = _c.adaptedLoadOptions, adaptedResolveSelectedOptions = _c.adaptedResolveSelectedOptions, adaptedValue = _c.adaptedValue;
+    var asyncSelectProps = (0, useBaseAsyncSelect_1.useBaseAsyncSelect)(tslib_1.__assign(tslib_1.__assign({}, restProps), { initialOptions: (0, react_1.useMemo)(function () { return (0, helpers_1.arrayToGroupedOptions)(initialOptions || []); }, [initialOptions]), loadOptions: adaptedLoadOptions, groupConfig: UNGROUP_GROUP_CONFIG, resolveSelectedOptions: resolveSelectedOptions ? adaptedResolveSelectedOptions : undefined, value: adaptedValue }));
+    return tslib_1.__assign(tslib_1.__assign({}, asyncSelectProps), { hideSelectAll: hideSelectAll || hasMore });
 };
 exports.useAsyncSelect = useAsyncSelect;

package/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/asyncSelect/hooks/useAsyncSelectAdapter.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsyncSelectAdapter = void 0;
+var tslib_1 = require("tslib");
+//lib
+var react_1 = require("react");
+//constants
+var constants_1 = require("../../select/constants");
+var useAsyncSelectAdapter = function (_a) {
+    var loadOptions = _a.loadOptions, resolveSelectedOptions = _a.resolveSelectedOptions, value = _a.value;
+    var _b = tslib_1.__read((0, react_1.useState)(true), 2), hasMore = _b[0], setHasMore = _b[1];
+    var adaptedLoadOptions = (0, react_1.useCallback)(function (input, groupFilters) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var _a, filter, _b, options, complete;
+        return tslib_1.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _a = tslib_1.__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 = (0, react_1.useCallback)(function (groupVsUnresolvedValueKeys) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var resolvedOptions;
+        var _a;
+        return tslib_1.__generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!resolveSelectedOptions) {
+                        return [2 /*return*/, {}];
+                    }
+                    return [4 /*yield*/, resolveSelectedOptions(groupVsUnresolvedValueKeys[constants_1.UNGROUPED_ID] || [])];
+                case 1:
+                    resolvedOptions = _b.sent();
+                    return [2 /*return*/, (_a = {}, _a[constants_1.UNGROUPED_ID] = resolvedOptions, _a)];
+            }
+        });
+    }); }, [resolveSelectedOptions]);
+    var adaptedValue = (0, react_1.useMemo)(function () {
+        var _a;
+        return (value ? (_a = {}, _a[constants_1.UNGROUPED_ID] = value, _a) : value);
+    }, [value]);
+    return {
+        hasMore: hasMore,
+        adaptedLoadOptions: adaptedLoadOptions,
+        adaptedResolveSelectedOptions: adaptedResolveSelectedOptions,
+        adaptedValue: adaptedValue,
+    };
+};
+exports.useAsyncSelectAdapter = useAsyncSelectAdapter;

package/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/asyncSelect/hooks/useBaseAsyncSelect.js

@@ -0,0 +1,270 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBaseAsyncSelect = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var keyBy_1 = tslib_1.__importDefault(require("lodash/keyBy"));
+var reduce_1 = tslib_1.__importDefault(require("lodash/reduce"));
+var isObject_1 = tslib_1.__importDefault(require("lodash/isObject"));
+//hooks
+var locale_1 = require("../../locale");
+var useLatest_1 = require("../../hooks/useLatest");
+var useCombinedRef_1 = tslib_1.__importDefault(require("../../hooks/useCombinedRef"));
+var useInputChangeHandler_1 = require("./useInputChangeHandler");
+var useResolveSelectedOptions_1 = require("./useResolveSelectedOptions");
+//helpers
+var helpers_1 = require("../helpers");
+var utils_1 = require("../../baseui/select/utils");
+var helpers_2 = require("../../helpers");
+//utils
+var overrides_1 = require("../../overrides");
+var defaultAsyncSelectFilterOptions_1 = require("../utils/defaultAsyncSelectFilterOptions");
+var default_props_1 = tslib_1.__importDefault(require("../../select/default-props"));
+var constants_1 = require("../../select/constants");
+var useAsyncOptions_1 = require("./useAsyncOptions");
+var useCreateOption_1 = require("./useCreateOption");
+var EMPTY_OBJ = {};
+// eslint-disable-next-line max-statements -- AsyncSelect is... big
+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 ? default_props_1.default.valueKey : _h, _j = params.labelKey, labelKey = _j === void 0 ? default_props_1.default.labelKey : _j, propsOnChange = params.onChange, onOpen = params.onOpen, filterOptions = params.filterOptions, restSelectProps = tslib_1.__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 = (0, locale_1.useLocale)();
+    var _k = tslib_1.__read((0, react_1.useState)(function () {
+        return (0, helpers_1.mergeOptions)(initialOptions, (0, helpers_1.initGroupOptions)(groupConfig));
+    }), 2), options = _k[0], setOptions = _k[1];
+    var sortedOptionsRef = (0, react_1.useRef)({});
+    var _l = tslib_1.__read((0, react_1.useState)(function () {
+        return (0, keyBy_1.default)((0, utils_1.normalizeOptions)(initialOptions), valueKey);
+    }), 2), allOptionsMap = _l[0], setAllOptionsMap = _l[1];
+    var _m = tslib_1.__read((0, react_1.useState)(null), 2), inputElement = _m[0], setInputElement = _m[1];
+    var inputRef = (0, useLatest_1.useLatest)(inputElement);
+    var combinedRef = (0, useCombinedRef_1.default)(setInputElement, propsInputRef);
+    var rootRef = (0, react_1.useRef)(null);
+    var popoverRef = (0, react_1.useRef)(null);
+    /** Same node that receives onPaginate (Menu or OverlayContentContainer); avoids querying the popover DOM. */
+    var paginationScrollContainerRef = (0, react_1.useRef)(null);
+    var loadOptionsRef = (0, useLatest_1.useLatest)(propsLoadOptions);
+    var valueKeyRef = (0, useLatest_1.useLatest)(valueKey);
+    var loadOptions = (0, react_1.useCallback)(function (inputValue, itemGroups) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var loadedOptions, groupedOptions;
+        return tslib_1.__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 (0, helpers_1.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] = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(sortedOptionsRef.current[group]), false), tslib_1.__read(groupedOptions[group]), false);
+                            }
+                            else {
+                                sortedOptionsRef.current[group] = groupedOptions[group];
+                            }
+                        }
+                    });
+                    return [2 /*return*/, loadedOptions];
+            }
+        });
+    }); }, [loadOptionsRef, valueKeyRef]);
+    var _o = (0, useResolveSelectedOptions_1.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 = (0, react_1.useRef)([]);
+    var selectedOptions = (0, react_1.useMemo)(function () {
+        if (!groupedValue) {
+            return undefined;
+        }
+        unresolvedValueKeysRef.current = [];
+        var groupedValueObject = (0, reduce_1.default)(groupedValue, function (acc, values, groupId) {
+            acc[groupId] = (values || []).flatMap(function (valueObjOrId) {
+                var _a, _b;
+                var valueId = (0, isObject_1.default)(valueObjOrId) ? valueObjOrId[valueKey] : valueObjOrId;
+                var isResolving = isResolvingValues && unresolvedGroupedValueKeys[groupId].includes(valueId);
+                var valueObject = (0, isObject_1.default)(valueObjOrId)
+                    ? valueObjOrId
+                    : (_a = {},
+                        _a[valueKey] = valueId,
+                        _a[labelKey] = valueId,
+                        _a);
+                var isUnresolved = !allOptionsMap[valueId];
+                var resolvedObject = isUnresolved ? valueObject : tslib_1.__assign(tslib_1.__assign({}, valueObject), allOptionsMap[valueId]);
+                if (isResolving) {
+                    return [tslib_1.__assign(tslib_1.__assign({}, resolvedObject), (_b = {}, _b[constants_1.LOADING_KEY] = true, _b))];
+                }
+                if (isUnresolved && hideUnresolvedValues) {
+                    unresolvedValueKeysRef.current.push({ id: valueId, groupId: groupId });
+                    return [];
+                }
+                return [resolvedObject];
+            });
+            return acc;
+        }, {});
+        return (0, utils_1.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 = (0, useAsyncOptions_1.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;
+    (0, react_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 = (0, react_1.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 = (0, helpers_1.initGroupOptions)(groupConfig);
+        }
+        _inputChangeHandlerToDebounce(e);
+    }, [_inputChangeHandlerToDebounce, groupConfig, inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, minimumInput]);
+    var createOption = (0, useCreateOption_1.useCreateOption)({
+        createOption: propsCreateOption,
+        labelKey: labelKey,
+        valueKey: valueKey,
+        setIsLoading: setIsLoading,
+    }).createOption;
+    var _onInputChange = (0, useInputChangeHandler_1.useInputChangeHandler)({
+        inputElement: inputElement,
+        listenAllInputChanges: listenAllInputChanges,
+        onInputChange: onInputChange,
+        inputChangeHandlerToDebounce: inputChangeHandlerToDebounce,
+        debounceInterval: debounceInterval,
+    });
+    /************************************************ HANDLING FOCUS ****************************************************/
+    var handleFocus = (0, react_1.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 = (0, helpers_1.getInputValue)(inputRef), adaptedNoResultsMsg = (0, helpers_1.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 = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)(tslib_1.__assign({ Root: { props: { ref: rootRef, onFocus: handleFocus } }, Popover: { props: { overrides: { Inner: { props: { ref: popoverRef } } } } }, StatefulMenu: { props: { $onPaginate: onPaginate } }, NoResults: { props: (0, helpers_2.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: tslib_1.__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 = (0, react_1.useCallback)(function (onChangeParams) {
+        propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange(tslib_1.__assign(tslib_1.__assign({}, onChangeParams), { valueKeys: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(unresolvedValueKeysRef.current.map(function (_a) {
+                var id = _a.id;
+                return id;
+            })), false), tslib_1.__read(onChangeParams.value.map(function (opt) { return opt[valueKey]; })), false), value: unresolvedValueKeysRef.current.length
+                ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__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), tslib_1.__read(onChangeParams.value), false) : onChangeParams.value }));
+    }, [propsOnChange, valueKey, labelKey]);
+    var asyncFilterOptions = (0, react_1.useCallback)(function (asyncOptions, asyncFilterValue, asyncExcludeOptions, asyncFilterProps) {
+        return filterOptions
+            ? filterOptions(asyncOptions, asyncFilterValue, asyncExcludeOptions, asyncFilterProps)
+            : (0, defaultAsyncSelectFilterOptions_1.defaultAsyncSelectFilterOptions)(asyncOptions, asyncFilterValue, asyncExcludeOptions, tslib_1.__assign(tslib_1.__assign({}, asyncFilterProps), { filterOnlyCreated: true }));
+    }, [filterOptions]);
+    var updateOptions = (0, react_1.useCallback)(function (getUpdatedOptions) {
+        var updatedOptions = getUpdatedOptions(options);
+        setOptions(updatedOptions);
+        setAllOptionsMap((0, keyBy_1.default)((0, utils_1.normalizeOptions)(updatedOptions)));
+        sortedOptionsRef.current = updatedOptions;
+    }, [options]);
+    var updateResultCountMap = (0, react_1.useCallback)(function (getUpdatedResultCountMap) { return setResultCountMap(getUpdatedResultCountMap(resultCountMap)); }, [resultCountMap, setResultCountMap]);
+    return tslib_1.__assign(tslib_1.__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: (0, react_1.useCallback)(function () {
+            moveSelectedOptionsToTop &&
+                setOptions((0, helpers_1.mergeOptions)((selectedOptions || []), sortedOptionsRef.current || []));
+            onOpen && onOpen();
+        }, [moveSelectedOptionsToTop, onOpen, selectedOptions]), filterOptions: asyncFilterOptions, resetAsyncSelectPagination: resetAsyncSelectPagination, updateOptions: updateOptions, updateResultCountMap: updateResultCountMap });
+};
+exports.useBaseAsyncSelect = useBaseAsyncSelect;

package/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/asyncSelect/hooks/useCreateOption.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateOption = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var select_1 = require("../../baseui/select");
+var defaultCreateOption_1 = require("../utils/defaultCreateOption");
+var helpers_1 = require("../helpers");
+var useCreateOption = function (_a) {
+    var propsCreateOption = _a.createOption, labelKey = _a.labelKey, valueKey = _a.valueKey, setIsLoading = _a.setIsLoading;
+    var createOption = (0, react_1.useCallback)(function (label) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var createdOptions, err_1;
+        var _a;
+        return tslib_1.__generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!propsCreateOption) {
+                        return [2 /*return*/, (0, defaultCreateOption_1.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 = (0, helpers_1.arrayToGroupedOptions)((_a = (0, helpers_1.normalizeOptions)(createdOptions)) === null || _a === void 0 ? void 0 : _a.map(function (opt) {
+                        var _a;
+                        return (tslib_1.__assign(tslib_1.__assign({}, opt), (_a = {}, _a[select_1.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 };
+};
+exports.useCreateOption = useCreateOption;

package/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 {};