@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/esm/asyncSelect/helpers.js

@@ -1,4 +1,6 @@
-import { __assign } from "tslib";
+import { __assign, __read, __spreadArray } from "tslib";
+import { normalizeOptions } from 'baseui/select/utils';
+import { UNGROUPED_ID } from '../select/constants';
 export var getNoResultsMsg = function (_a) {
     var isLoading = _a.isLoading, minimumInput = _a.minimumInput, inputText = _a.inputText, noResultsMsg = _a.noResultsMsg, searchingText = _a.searchingText, emptyInputMsg = _a.emptyInputMsg;
     if (isLoading) {
@@ -15,8 +17,34 @@ export var shouldPaginate = function (element, paginationBuffer) {
     return element.scrollHeight > element.clientHeight &&
         element.scrollTop >= element.scrollHeight - element.clientHeight - paginationBuffer;
 };
+export var getInputValue = function (inputRef) { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || ''; };
+export var arrayToGroupedOptions = function (options) {
+    if (!Array.isArray(options)) {
+        return options;
+    }
+    return options.reduce(function (acc, option) {
+        acc[option.__optgroup || UNGROUPED_ID] = acc[option.__optgroup || UNGROUPED_ID] || [];
+        acc[option.__optgroup || UNGROUPED_ID].push(option);
+        return acc;
+    }, {});
+};
+export var mergeOptions = function (a, b) {
+    var groupedA = arrayToGroupedOptions(a), groupedB = arrayToGroupedOptions(b);
+    var allKeys = Object.keys(__assign(__assign({}, groupedA), groupedB));
+    return allKeys.reduce(function (acc, key) {
+        acc[key] = __spreadArray(__spreadArray([], __read((groupedA[key] || [])), false), __read((groupedB[key] || [])), false);
+        return acc;
+    }, {});
+};
+export var initGroupOptions = function (groupConfig) {
+    return groupConfig.reduce(function (acc, _a) {
+        var id = _a.id;
+        acc[id] = [];
+        return acc;
+    }, {});
+};
 export var addOptionsInMap = function (optionsMap, options, valueKey) {
-    var newOptions = options.filter(function (option) { return !optionsMap[option[valueKey]]; });
+    var newOptions = normalizeOptions(options).filter(function (option) { return !optionsMap[option[valueKey]]; });
     //Not creating a new map (reference) if there are no new options to be added
     if (newOptions.length) {
         var newOptionsMap_1 = __assign({}, optionsMap);
@@ -28,4 +56,4 @@ export var addOptionsInMap = function (optionsMap, options, valueKey) {
     }
     return optionsMap;
 };
-export var getInputValue = function (inputRef) { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || ''; };
+export { normalizeOptions };

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

@@ -1,9 +1,10 @@
 /**
  *  Created by Aneree on 15/01/21.
  */
-import { MutableRefObject } from 'react';
-import { Option, Options } from '../../select';
-import { SetStateFunc, AllOptionsMap, AsyncSelectProps } from '../types';
+import { MutableRefObject, UIEvent } from 'react';
+import { Options } from '../../select';
+import { SetStateFunc, AllOptionsMap, AsyncSelectProps, LoadOptions, GroupedOptions, GroupConfig } from '../types';
+import { Value } from 'baseui/select/types';
 interface UseAsyncOptionHandlersArgs {
     valueKey: string;
     isLoading: boolean;
@@ -11,18 +12,22 @@ interface UseAsyncOptionHandlersArgs {
     paginationBuffer?: number;
     inputRef: MutableRefObject<HTMLInputElement | null>;
     setIsLoading: SetStateFunc<boolean>;
-    setOptions: SetStateFunc<Array<Option>>;
+    setOptions: SetStateFunc<GroupedOptions>;
     setAllOptionsMap: SetStateFunc<AllOptionsMap>;
-    loadOptions: (input: string, page: number) => Promise<{
-        options: Array<Option>;
-        complete: boolean;
-    }>;
+    loadOptions: LoadOptions;
     createOption: AsyncSelectProps['createOption'];
+    groupConfig: GroupConfig;
+    selectedOptions?: Value;
+    moveSelectedOptionsToTop: boolean;
 }
-declare const useAsyncOptionHandlers: ({ inputRef, valueKey, isLoading, setOptions, loadOptions, minimumInput, setIsLoading, paginationBuffer, setAllOptionsMap, createOption: propsCreateOption, }: UseAsyncOptionHandlersArgs) => {
-    onPaginate: (event: any) => void;
+declare const useAsyncOptionHandlers: ({ inputRef, valueKey, isLoading, setOptions, loadOptions, minimumInput, setIsLoading, paginationBuffer, setAllOptionsMap, createOption: propsCreateOption, groupConfig, selectedOptions, moveSelectedOptionsToTop, }: UseAsyncOptionHandlersArgs) => {
+    onPaginate: (event: UIEvent<HTMLElement>, itemGroup?: string) => void;
     onInputChange: () => void;
-    fetchOptions: (pageNumber: number) => Promise<void>;
+    fetchOptions: (itemGroups: {
+        group: string;
+        pageNumber: number;
+    }[]) => Promise<void>;
     createOption: ((label: string) => Promise<Options>) | undefined;
+    resultCountMap: Record<string, number | undefined>;
 };
 export { useAsyncOptionHandlers };

package/esm/asyncSelect/hooks/useAsyncOptionHandlers.js

@@ -1,23 +1,30 @@
-import { __awaiter, __generator, __read, __spreadArray } from "tslib";
+import { __assign, __awaiter, __generator, __read, __spreadArray } from "tslib";
 /**
  *  Created by Aneree on 15/01/21.
  */
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useState } from 'react';
 //hooks
 import { useLatest } from '../../hooks/useLatest';
-//helpers
-import { shouldPaginate, addOptionsInMap, getInputValue } from '../helpers';
+import { shouldPaginate, addOptionsInMap, getInputValue, initGroupOptions, arrayToGroupedOptions, } from '../helpers';
+import { UNGROUPED_ID } from '../../select/constants';
 var useAsyncOptionHandlers = function (_a) {
-    var inputRef = _a.inputRef, valueKey = _a.valueKey, isLoading = _a.isLoading, setOptions = _a.setOptions, loadOptions = _a.loadOptions, minimumInput = _a.minimumInput, setIsLoading = _a.setIsLoading, paginationBuffer = _a.paginationBuffer, setAllOptionsMap = _a.setAllOptionsMap, propsCreateOption = _a.createOption;
-    var pageRef = useRef(0);
-    var completeRef = useRef(false);
-    var isPaginatingRef = useRef(false);
+    var inputRef = _a.inputRef, valueKey = _a.valueKey, isLoading = _a.isLoading, setOptions = _a.setOptions, loadOptions = _a.loadOptions, minimumInput = _a.minimumInput, setIsLoading = _a.setIsLoading, paginationBuffer = _a.paginationBuffer, setAllOptionsMap = _a.setAllOptionsMap, propsCreateOption = _a.createOption, groupConfig = _a.groupConfig, selectedOptions = _a.selectedOptions, moveSelectedOptionsToTop = _a.moveSelectedOptionsToTop;
+    var pageRef = useRef({});
+    var completeRef = useRef({});
+    var isPaginatingRef = useRef({});
+    var _b = __read(useState({}), 2), resultCountMap = _b[0], setResultCountMap = _b[1];
+    var updateResultCount = useCallback(function (groupId, count) { return setResultCountMap(function (prev) {
+        var _a;
+        return (__assign(__assign({}, prev), (_a = {}, _a[groupId] = count, _a)));
+    }); }, []);
     var valueKeyRef = useLatest(valueKey);
     var loadOptionsRef = useLatest(loadOptions);
     var minimumInputRef = useLatest(minimumInput);
     var paginationBufferRef = useLatest(paginationBuffer);
-    var fetchOptions = useCallback(function (pageNumber) { return __awaiter(void 0, void 0, void 0, function () {
-        var timeoutId, _a, options_1, complete;
+    var selectedOptionsRef = useLatest(selectedOptions);
+    var fetchOptions = useCallback(function (itemGroups) { return __awaiter(void 0, void 0, void 0, function () {
+        var timeoutId, loadedOptions, groupedOptions_1, selectedOptionsByGroup_1;
+        var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -25,15 +32,39 @@ var useAsyncOptionHandlers = function (_a) {
                     _b.label = 1;
                 case 1:
                     _b.trys.push([1, , 3, 4]);
-                    return [4 /*yield*/, loadOptionsRef.current(getInputValue(inputRef), pageNumber)];
+                    return [4 /*yield*/, loadOptionsRef.current(getInputValue(inputRef), itemGroups)];
                 case 2:
-                    _a = _b.sent(), options_1 = _a.options, complete = _a.complete;
-                    setAllOptionsMap(function (prevOptions) { return addOptionsInMap(prevOptions, options_1, valueKeyRef.current); });
+                    loadedOptions = _b.sent();
+                    groupedOptions_1 = {};
+                    selectedOptionsByGroup_1 = arrayToGroupedOptions((_a = selectedOptionsRef.current) !== null && _a !== void 0 ? _a : []);
+                    loadedOptions.groups.forEach(function (_a) {
+                        var options = _a.options, complete = _a.complete, group = _a.group, count = _a.count;
+                        groupedOptions_1[group] = options;
+                        completeRef.current[group] = complete;
+                        updateResultCount(group, count);
+                    });
+                    setAllOptionsMap(function (prevOptions) { return addOptionsInMap(prevOptions, groupedOptions_1, valueKeyRef.current); });
                     //Merge options when it's not the first page
-                    setOptions(function (prevOptions) { return (pageNumber ? __spreadArray(__spreadArray([], __read(prevOptions), false), __read(options_1), false) : options_1); });
-                    completeRef.current = complete;
-                    pageRef.current = pageNumber;
-                    isPaginatingRef.current = false;
+                    setOptions(function (prevOptions) {
+                        var updatedOptions = __assign({}, prevOptions);
+                        itemGroups.forEach(function (_a) {
+                            var group = _a.group, pageNumber = _a.pageNumber;
+                            if (pageNumber) {
+                                updatedOptions[group] = __spreadArray(__spreadArray([], __read(prevOptions[group]), false), __read(groupedOptions_1[group]), false);
+                            }
+                            else {
+                                updatedOptions[group] =
+                                    moveSelectedOptionsToTop && selectedOptionsByGroup_1[group]
+                                        ? __spreadArray(__spreadArray([], __read(selectedOptionsByGroup_1[group]), false), __read(groupedOptions_1[group]), false) : groupedOptions_1[group];
+                            }
+                        });
+                        return updatedOptions;
+                    });
+                    itemGroups.forEach(function (_a) {
+                        var group = _a.group, pageNumber = _a.pageNumber;
+                        pageRef.current[group] = pageNumber;
+                        isPaginatingRef.current[group] = false;
+                    });
                     return [3 /*break*/, 4];
                 case 3:
                     clearTimeout(timeoutId);
@@ -42,34 +73,49 @@ var useAsyncOptionHandlers = function (_a) {
                 case 4: return [2 /*return*/];
             }
         });
-    }); }, []);
-    var onPaginate = useCallback(function (event) {
+    }); }, [
+        inputRef,
+        loadOptionsRef,
+        setAllOptionsMap,
+        setIsLoading,
+        setOptions,
+        updateResultCount,
+        valueKeyRef,
+        selectedOptionsRef,
+    ]);
+    var onPaginate = useCallback(function (event, itemGroup) {
+        var _a;
+        if (itemGroup === void 0) { itemGroup = UNGROUPED_ID; }
         if (!isLoading &&
-            !isPaginatingRef.current &&
-            !completeRef.current &&
+            !isPaginatingRef.current[itemGroup] &&
+            !completeRef.current[itemGroup] &&
             shouldPaginate(event.target, paginationBufferRef.current)) {
-            isPaginatingRef.current = true;
-            fetchOptions(pageRef.current + 1);
+            isPaginatingRef.current[itemGroup] = true;
+            fetchOptions([{ group: itemGroup, pageNumber: ((_a = pageRef.current[itemGroup]) !== null && _a !== void 0 ? _a : 0) + 1 }]);
         }
     }, [fetchOptions, isLoading]);
     var onInputChange = useCallback(function () {
         if (getInputValue(inputRef).length < minimumInputRef.current) {
             //reset state
             setIsLoading(false);
-            setOptions([]);
-            pageRef.current = 0;
-            completeRef.current = false;
+            setOptions(initGroupOptions(groupConfig));
+            pageRef.current = {};
+            completeRef.current = {};
+            setResultCountMap({});
             return;
         }
-        fetchOptions(0);
-    }, [fetchOptions]);
+        fetchOptions(groupConfig.map(function (_a) {
+            var id = _a.id;
+            return ({ group: id, pageNumber: 0 });
+        }));
+    }, [fetchOptions, groupConfig]);
     var createOption = useCallback(function (label) { return __awaiter(void 0, void 0, void 0, function () {
         var createdOptions, err_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     if (!propsCreateOption) {
-                        throw 'Spaceweb: [AsyncSelect] `createOption` is not defined';
+                        throw new Error('Spaceweb: [AsyncSelect] `createOption` is not defined');
                     }
                     _a.label = 1;
                 case 1:
@@ -94,6 +140,7 @@ var useAsyncOptionHandlers = function (_a) {
         onInputChange: onInputChange,
         fetchOptions: fetchOptions,
         createOption: propsCreateOption ? createOption : undefined,
+        resultCountMap: resultCountMap,
     };
 };
 export { useAsyncOptionHandlers };

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

@@ -0,0 +1,10 @@
+import { OnChangeParams, SelectProps } from '../../select';
+import { GroupedAsyncSelectProps, Id } from '../types';
+export declare type UseAsyncSelectParams = Omit<GroupedAsyncSelectProps, 'onChange'> & {
+    onChange?: (params: OnChangeParams & {
+        valueKeys: Id[];
+    }) => unknown;
+};
+export declare const useAsyncSelect: (params: UseAsyncSelectParams) => SelectProps & {
+    resultCountMap: Record<string, number | undefined>;
+};

package/esm/asyncSelect/hooks/useAsyncSelect.js

@@ -0,0 +1,178 @@
+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, 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"]);
+    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 _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 _m = __read(useState(null), 2), rootRef = _m[0], setRootRef = _m[1];
+    var _o = __read(useState(null), 2), popoverRef = _o[0], setPopoverRef = _o[1];
+    var _p = useResolveSelectedOptions({
+        groupedValue: groupedValue,
+        valueKey: valueKey,
+        inputRef: inputRef,
+        allOptionsMap: allOptionsMap,
+        setOptions: setOptions,
+        setAllOptionsMap: setAllOptionsMap,
+        resolveValuesOnUpdate: resolveValuesOnUpdate,
+        resolveSelectedOptions: resolveSelectedOptions,
+    }), unresolvedGroupedValueKeys = _p.unresolvedGroupedValueKeys, isResolvingValues = _p.isResolvingValues;
+    var _q = __read(useState(loadOnMount), 2), _isLoading = _q[0], setIsLoading = _q[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 _r = useAsyncOptionHandlers({
+        valueKey: valueKey,
+        isLoading: isLoading,
+        minimumInput: minimumInput,
+        paginationBuffer: paginationBuffer,
+        inputRef: inputRef,
+        setAllOptionsMap: setAllOptionsMap,
+        setIsLoading: setIsLoading,
+        setOptions: setOptions,
+        loadOptions: loadOptions,
+        createOption: propsCreateOption,
+        groupConfig: groupConfig,
+        selectedOptions: selectedOptions,
+        moveSelectedOptionsToTop: moveSelectedOptionsToTop,
+    }), fetchOptions = _r.fetchOptions, onPaginate = _r.onPaginate, inputChangeHandlerToDebounce = _r.onInputChange, createOption = _r.createOption, resultCountMap = _r.resultCountMap;
+    var _onInputChange = useInputChangeHandler({
+        inputElement: inputElement,
+        listenAllInputChanges: listenAllInputChanges,
+        onInputChange: onInputChange,
+        inputChangeHandlerToDebounce: inputChangeHandlerToDebounce,
+        debounceInterval: debounceInterval,
+    });
+    /************************************************ HANDLING FOCUS ****************************************************/
+    var handleFocus = useCallback(function (event) {
+        /**
+         * https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget
+         * event.relatedTarget points to last focused element
+         */
+        var lastFocusedNode = event.relatedTarget;
+        if (loadOnFocus && !(rootRef === null || rootRef === void 0 ? void 0 : rootRef.contains(lastFocusedNode)) && !(popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.contains(lastFocusedNode))) {
+            inputChangeHandlerToDebounce();
+        }
+    }, [loadOnFocus, inputChangeHandlerToDebounce, rootRef, popoverRef]);
+    /******************************************* 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,
+    });
+    var mergedOverrides = useMemo(function () {
+        return mergeOverrides(__assign({ Root: { props: { ref: setRootRef, onFocus: handleFocus } }, Popover: { props: { overrides: { Inner: { props: { ref: setPopoverRef } } } } }, 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: function () {
+            moveSelectedOptionsToTop && setOptions(function (prev) { return mergeOptions((selectedOptions || []), prev); });
+            restSelectProps.onOpen && restSelectProps.onOpen();
+        } });
+};

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

@@ -2,17 +2,20 @@
  *  Created by Aneree on 15/01/21.
  */
 import { MutableRefObject } from 'react';
-import { Option, Value } from '../../select';
-import { SetStateFunc, AllOptionsMap } from '../types';
+import { Option } from '../../select';
+import { AllOptionsMap, GroupedOptions, GroupedValue, Id, SetStateFunc } from '../types';
 interface UseResolveSelectedOptionsArgs {
-    value?: Value;
+    groupedValue?: GroupedValue;
     valueKey: string;
     allOptionsMap: AllOptionsMap;
-    resolveSelectedOptions?: (unresolvedValueKeys: Array<string | number>) => Promise<Array<Option>>;
+    resolveValuesOnUpdate?: boolean;
+    resolveSelectedOptions?: (groupVsUnresolvedValueKeys: Record<string, Array<Id>>) => Promise<Record<string, Array<Option>>>;
     inputRef: MutableRefObject<HTMLInputElement | null>;
-    setIsLoading: SetStateFunc<boolean>;
-    setOptions: SetStateFunc<Array<Option>>;
+    setOptions: SetStateFunc<GroupedOptions>;
     setAllOptionsMap: SetStateFunc<AllOptionsMap>;
 }
-declare const useResolveSelectedOptions: ({ value, valueKey, allOptionsMap, resolveSelectedOptions, inputRef, setIsLoading, setOptions, setAllOptionsMap, }: UseResolveSelectedOptionsArgs) => void;
+declare const useResolveSelectedOptions: ({ groupedValue, valueKey, allOptionsMap, resolveValuesOnUpdate, resolveSelectedOptions, inputRef, setOptions, setAllOptionsMap, }: UseResolveSelectedOptionsArgs) => {
+    isResolvingValues: boolean;
+    unresolvedGroupedValueKeys: Record<string, Id[]>;
+};
 export { useResolveSelectedOptions };

package/esm/asyncSelect/hooks/useResolveSelectedOptions.js

@@ -1,61 +1,73 @@
-import { __awaiter, __generator, __read, __spreadArray } from "tslib";
+import { __awaiter, __generator, __read } from "tslib";
 /**
  *  Created by Aneree on 15/01/21.
  */
-import { useRef, useCallback, useEffect } from 'react';
-import _uniqBy from 'lodash/uniqBy';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import _forEach from 'lodash/forEach';
+import _isEmpty from 'lodash/isEmpty';
+import _isObject from 'lodash/isObject';
 //hooks
-import { useLatest } from '../../hooks/useLatest';
+import { useFirstMountState } from '../../hooks/useFirstMountState';
 //helpers
-import { addOptionsInMap, getInputValue } from '../helpers';
+import { addOptionsInMap, getInputValue, mergeOptions } from '../helpers';
 var useResolveSelectedOptions = function (_a) {
-    var value = _a.value, valueKey = _a.valueKey, allOptionsMap = _a.allOptionsMap, resolveSelectedOptions = _a.resolveSelectedOptions, inputRef = _a.inputRef, setIsLoading = _a.setIsLoading, setOptions = _a.setOptions, setAllOptionsMap = _a.setAllOptionsMap;
-    var valueRef = useLatest(value);
-    var valueKeyRef = useLatest(valueKey);
-    var resolveSelectedOptionsRef = useLatest(resolveSelectedOptions);
-    var allOptionsMapRef = useRef(allOptionsMap);
-    var fetchUnresolvedValueKeys = useCallback(function (unresolvedValueKeys) { return __awaiter(void 0, void 0, void 0, function () {
-        var options_1, e_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setIsLoading(true);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, resolveSelectedOptionsRef.current(unresolvedValueKeys)];
-                case 2:
-                    options_1 = _a.sent();
-                    setAllOptionsMap(function (prevOptions) { return addOptionsInMap(prevOptions, options_1, valueKeyRef.current); });
-                    //Inject the resolved selected options into the options state
-                    // 1. Only if currently shown options are not filtered i.e. user input text is empty (All options need to be shown)
-                    if (!getInputValue(inputRef)) {
-                        setOptions(function (prevOptions) {
-                            // 2. Only if they are not already present in the state
-                            var combinedOptions = __spreadArray(__spreadArray([], __read(prevOptions), false), __read(options_1), false), uniqueOptions = _uniqBy(combinedOptions, valueKeyRef.current);
-                            return prevOptions.length === uniqueOptions.length ? prevOptions : uniqueOptions;
-                        });
-                    }
-                    setIsLoading(false);
-                    return [3 /*break*/, 4];
-                case 3:
-                    e_1 = _a.sent();
-                    setIsLoading(false);
-                    throw e_1;
-                case 4: return [2 /*return*/];
-            }
+    var groupedValue = _a.groupedValue, valueKey = _a.valueKey, allOptionsMap = _a.allOptionsMap, resolveValuesOnUpdate = _a.resolveValuesOnUpdate, resolveSelectedOptions = _a.resolveSelectedOptions, inputRef = _a.inputRef, setOptions = _a.setOptions, setAllOptionsMap = _a.setAllOptionsMap;
+    var isFirstMount = useFirstMountState();
+    var unresolvedValuesResults = useRef({
+        unresolvedGroupedValueKeys: {},
+        hasUnresolvedValues: false,
+    });
+    useMemo(function () {
+        var shouldCalculateUnresolvedValues = (resolveValuesOnUpdate || isFirstMount) && resolveSelectedOptions && !_isEmpty(groupedValue);
+        if (!shouldCalculateUnresolvedValues) {
+            return;
+        }
+        var unresolvedGroupedValueKeys = {}, hasUnresolvedValues = false;
+        _forEach(groupedValue, function (values, groupId) {
+            unresolvedGroupedValueKeys[groupId] = (values !== null && values !== void 0 ? values : [])
+                .map(function (valueObjOrId) { return (_isObject(valueObjOrId) ? valueObjOrId[valueKey] : valueObjOrId); })
+                .filter(function (valueId) { return !allOptionsMap[valueId]; });
+            hasUnresolvedValues = hasUnresolvedValues || unresolvedGroupedValueKeys[groupId].length > 0;
         });
-    }); }, []);
+        unresolvedValuesResults.current = { unresolvedGroupedValueKeys: unresolvedGroupedValueKeys, hasUnresolvedValues: hasUnresolvedValues };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- calculate this on mount or when value changes
+    }, [groupedValue]);
+    var _b = unresolvedValuesResults.current, hasUnresolvedValues = _b.hasUnresolvedValues, unresolvedGroupedValueKeys = _b.unresolvedGroupedValueKeys;
+    var _c = __read(useState(hasUnresolvedValues), 2), isResolvingValues = _c[0], setIsResolving = _c[1];
     useEffect(function () {
-        var _a, _b;
-        //Check on mount if there are any unresolved values
-        if (((_a = valueRef.current) === null || _a === void 0 ? void 0 : _a.length) && resolveSelectedOptionsRef.current) {
-            var _valueKey_1 = valueKeyRef.current;
-            var unresolvedValueKeys = (_b = valueRef.current) === null || _b === void 0 ? void 0 : _b.filter(function (valueOption) { return !allOptionsMapRef.current[valueOption[_valueKey_1]]; }).map(function (valueOption) { return valueOption[_valueKey_1]; });
-            if (unresolvedValueKeys.length) {
-                fetchUnresolvedValueKeys(unresolvedValueKeys);
-            }
+        if (!hasUnresolvedValues || !resolveSelectedOptions) {
+            setIsResolving(false);
+            return;
         }
-    }, []);
+        var fetchUnresolvedValueKeys = function (_unresolvedGroupedValueKeys) { return __awaiter(void 0, void 0, void 0, function () {
+            var options_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setIsResolving(true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, , 3, 4]);
+                        return [4 /*yield*/, resolveSelectedOptions(_unresolvedGroupedValueKeys)];
+                    case 2:
+                        options_1 = _a.sent();
+                        setAllOptionsMap(function (prevOptions) { return addOptionsInMap(prevOptions, options_1, valueKey); });
+                        //Inject the resolved selected options into the options state
+                        // 1. Only if currently shown options are not filtered i.e. user input text is empty (All options need to be shown)
+                        if (!getInputValue(inputRef)) {
+                            setOptions(function (prevOptions) { return mergeOptions(prevOptions, options_1); });
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setIsResolving(false);
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchUnresolvedValueKeys(unresolvedGroupedValueKeys);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- this effect should run only when unresolvedValues is changed
+    }, [unresolvedGroupedValueKeys]);
+    return { isResolvingValues: isResolvingValues, unresolvedGroupedValueKeys: unresolvedGroupedValueKeys };
 };
 export { useResolveSelectedOptions };

package/esm/asyncSelect/index.d.ts

@@ -1,3 +1,6 @@
-export type { Value, Option, AsyncSelectProps } from './types';
+export type { Value, AsyncSelectValue, GroupedValue, Option, GroupedOptions, AsyncSelectProps, GroupedAsyncSelectProps, } from './types';
 export * from './locale';
 export * from './asyncSelect';
+export { GroupedAsyncSelect } from './groupedAsyncSelect';
+export { arrayToGroupedOptions, normalizeOptions } from './helpers';
+export { STATE_CHANGE_TYPE } from '../select';

package/esm/asyncSelect/index.js

@@ -1,2 +1,5 @@
 export * from './locale';
 export * from './asyncSelect';
+export { GroupedAsyncSelect } from './groupedAsyncSelect';
+export { arrayToGroupedOptions, normalizeOptions } from './helpers';
+export { STATE_CHANGE_TYPE } from '../select';