@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/asyncSelect/hooks/useAsyncOptionHandlers.d.ts

@@ -1,34 +1,32 @@
 /**
  *  Created by Aneree on 15/01/21.
  */
-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;
+import { type UIEvent } from 'react';
+import type { SetStateFunc, LoadOptions, GroupedOptions, GroupConfig, CustomInputEvent } from '../types';
+import type { Value } from '../../baseui/select/types';
+export interface UseAsyncOptionHandlersArgs {
     isLoading: boolean;
     minimumInput: number;
     paginationBuffer?: number;
-    inputRef: MutableRefObject<HTMLInputElement | null>;
     setIsLoading: SetStateFunc<boolean>;
     setOptions: SetStateFunc<GroupedOptions>;
-    setAllOptionsMap: SetStateFunc<AllOptionsMap>;
     loadOptions: LoadOptions;
-    createOption: AsyncSelectProps['createOption'];
     groupConfig: GroupConfig;
     selectedOptions?: Value;
-    moveSelectedOptionsToTop: boolean;
-    sortedOptionsRef: MutableRefObject<GroupedOptions>;
+    moveSelectedOptionsToTop?: boolean;
+    refetchOnGroupConfigChange?: boolean;
 }
-declare const useAsyncOptionHandlers: ({ inputRef, valueKey, isLoading, setOptions, sortedOptionsRef, loadOptions, minimumInput, setIsLoading, paginationBuffer, setAllOptionsMap, createOption: propsCreateOption, groupConfig, selectedOptions, moveSelectedOptionsToTop, }: UseAsyncOptionHandlersArgs) => {
+export type ResultCountMap = Record<string, number | undefined>;
+declare const useAsyncOptionHandlers: ({ isLoading, setOptions, loadOptions, minimumInput, setIsLoading, paginationBuffer, groupConfig, selectedOptions, moveSelectedOptionsToTop, refetchOnGroupConfigChange, }: UseAsyncOptionHandlersArgs) => {
     onPaginate: (event: UIEvent<HTMLElement>, itemGroup?: string) => void;
-    onInputChange: () => void;
+    onInputChange: ({ value }: CustomInputEvent) => void;
     fetchOptions: (itemGroups: {
         group: string;
         pageNumber: number;
     }[]) => Promise<void>;
-    createOption: ((label: string) => Promise<Options>) | undefined;
-    resultCountMap: Record<string, number | undefined>;
+    resultCountMap: ResultCountMap;
+    resetAsyncSelectPagination: () => void;
+    setResultCountMap: import("react").Dispatch<import("react").SetStateAction<ResultCountMap>>;
+    isSearchPending: boolean;
 };
 export { useAsyncOptionHandlers };

package/asyncSelect/hooks/useAsyncOptionHandlers.js

@@ -6,6 +6,7 @@ var tslib_1 = require("tslib");
  *  Created by Aneree on 15/01/21.
  */
 var react_1 = require("react");
+var uniqueId_1 = tslib_1.__importDefault(require("lodash/uniqueId"));
 //components
 var select_1 = require("../../select");
 //hooks
@@ -13,33 +14,54 @@ var useLatest_1 = require("../../hooks/useLatest");
 var helpers_1 = require("../helpers");
 var constants_1 = require("../../select/constants");
 var useAsyncOptionHandlers = function (_a) {
-    var inputRef = _a.inputRef, valueKey = _a.valueKey, isLoading = _a.isLoading, setOptions = _a.setOptions, sortedOptionsRef = _a.sortedOptionsRef, 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 isLoading = _a.isLoading, setOptions = _a.setOptions, loadOptions = _a.loadOptions, minimumInput = _a.minimumInput, setIsLoading = _a.setIsLoading, paginationBuffer = _a.paginationBuffer, groupConfig = _a.groupConfig, selectedOptions = _a.selectedOptions, moveSelectedOptionsToTop = _a.moveSelectedOptionsToTop, refetchOnGroupConfigChange = _a.refetchOnGroupConfigChange;
     var pageRef = (0, react_1.useRef)({});
     var completeRef = (0, react_1.useRef)({});
     var isPaginatingRef = (0, react_1.useRef)({});
-    var _b = (0, tslib_1.__read)((0, react_1.useState)({}), 2), resultCountMap = _b[0], setResultCountMap = _b[1];
+    var _b = tslib_1.__read((0, react_1.useState)({}), 2), resultCountMap = _b[0], setResultCountMap = _b[1];
     var updateResultCount = (0, react_1.useCallback)(function (groupId, count) { return setResultCountMap(function (prev) {
         var _a;
-        return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, prev), (_a = {}, _a[groupId] = count, _a)));
+        return (tslib_1.__assign(tslib_1.__assign({}, prev), (_a = {}, _a[groupId] = count, _a)));
     }); }, []);
-    var valueKeyRef = (0, useLatest_1.useLatest)(valueKey);
+    var inputValueRef = (0, react_1.useRef)('');
+    /** Empty-menu only; not merged into `isLoading` (spinner/pagination). */
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), isSearchPending = _c[0], setIsSearchPending = _c[1];
     var loadOptionsRef = (0, useLatest_1.useLatest)(loadOptions);
     var minimumInputRef = (0, useLatest_1.useLatest)(minimumInput);
     var paginationBufferRef = (0, useLatest_1.useLatest)(paginationBuffer);
     var selectedOptionsRef = (0, useLatest_1.useLatest)(selectedOptions);
-    var fetchOptions = (0, react_1.useCallback)(function (itemGroups) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
-        var timeoutId, loadedOptions, groupedOptions_1, selectedOptionsByGroup_1;
+    var groupConfigIdRef = (0, react_1.useRef)('');
+    var resetAsyncSelectState = (0, react_1.useCallback)(function () {
+        var emptyOptions = (0, helpers_1.initGroupOptions)(groupConfig);
+        setOptions(emptyOptions);
+        pageRef.current = {};
+        isPaginatingRef.current = {};
+        completeRef.current = {};
+        setResultCountMap({});
+    }, [groupConfig, setOptions]);
+    var fetchOptions = (0, react_1.useCallback)(function (itemGroups) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var isPageZeroFetch, fetchInput, timeoutId, currentGroupConfigId, loadedOptions, groupedOptions_1, selectedOptionsByGroup_1;
         var _a;
-        return (0, tslib_1.__generator)(this, function (_b) {
+        return tslib_1.__generator(this, function (_b) {
             switch (_b.label) {
                 case 0:
+                    isPageZeroFetch = itemGroups.some(function (_a) {
+                        var pageNumber = _a.pageNumber;
+                        return pageNumber === 0;
+                    });
+                    fetchInput = inputValueRef.current;
                     timeoutId = setTimeout(function () { return setIsLoading(true); }, 500);
+                    currentGroupConfigId = groupConfigIdRef.current;
                     _b.label = 1;
                 case 1:
                     _b.trys.push([1, , 3, 4]);
-                    return [4 /*yield*/, loadOptionsRef.current((0, helpers_1.getInputValue)(inputRef), itemGroups)];
+                    return [4 /*yield*/, loadOptionsRef.current(inputValueRef.current, itemGroups)];
                 case 2:
                     loadedOptions = _b.sent();
+                    // do not set state if groupConfig changes while we are fetching data of previous groupConfig
+                    if (currentGroupConfigId !== groupConfigIdRef.current) {
+                        return [2 /*return*/];
+                    }
                     groupedOptions_1 = {};
                     selectedOptionsByGroup_1 = (0, helpers_1.arrayToGroupedOptions)((_a = selectedOptionsRef.current) !== null && _a !== void 0 ? _a : []);
                     loadedOptions.groups.forEach(function (_a) {
@@ -48,21 +70,18 @@ var useAsyncOptionHandlers = function (_a) {
                         completeRef.current[group] = complete;
                         updateResultCount(group, count);
                     });
-                    setAllOptionsMap(function (prevOptions) { return (0, helpers_1.addOptionsInMap)(prevOptions, groupedOptions_1, valueKeyRef.current); });
                     //Merge options when it's not the first page
                     setOptions(function (prevOptions) {
-                        var updatedOptions = (0, tslib_1.__assign)({}, prevOptions);
+                        var updatedOptions = tslib_1.__assign({}, prevOptions);
                         itemGroups.forEach(function (_a) {
                             var group = _a.group, pageNumber = _a.pageNumber;
                             if (pageNumber) {
-                                updatedOptions[group] = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(prevOptions[group]), false), (0, tslib_1.__read)(groupedOptions_1[group]), false);
-                                sortedOptionsRef.current[group] = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sortedOptionsRef.current[group]), false), (0, tslib_1.__read)(groupedOptions_1[group]), false);
+                                updatedOptions[group] = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(prevOptions[group]), false), tslib_1.__read(groupedOptions_1[group]), false);
                             }
                             else {
                                 updatedOptions[group] =
                                     moveSelectedOptionsToTop && selectedOptionsByGroup_1[group]
-                                        ? (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(selectedOptionsByGroup_1[group].filter(function (selectedOption) { return !selectedOption[select_1.LOADING_KEY]; })), false), (0, tslib_1.__read)(groupedOptions_1[group]), false) : groupedOptions_1[group];
-                                sortedOptionsRef.current[group] = groupedOptions_1[group];
+                                        ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(selectedOptionsByGroup_1[group].filter(function (selectedOption) { return !selectedOption[select_1.LOADING_KEY]; })), false), tslib_1.__read(groupedOptions_1[group]), false) : groupedOptions_1[group];
                             }
                         });
                         return updatedOptions;
@@ -73,87 +92,77 @@ var useAsyncOptionHandlers = function (_a) {
                     });
                     return [3 /*break*/, 4];
                 case 3:
-                    itemGroups.forEach(function (_a) {
-                        var group = _a.group;
-                        isPaginatingRef.current[group] = false;
-                    });
+                    if (currentGroupConfigId === groupConfigIdRef.current) {
+                        itemGroups.forEach(function (_a) {
+                            var group = _a.group;
+                            isPaginatingRef.current[group] = false;
+                        });
+                        if (isPageZeroFetch && inputValueRef.current === fetchInput) {
+                            setIsSearchPending(false);
+                        }
+                        setIsLoading(false);
+                    }
                     clearTimeout(timeoutId);
-                    setIsLoading(false);
                     return [7 /*endfinally*/];
                 case 4: return [2 /*return*/];
             }
         });
-    }); }, [
-        setIsLoading,
-        loadOptionsRef,
-        inputRef,
-        selectedOptionsRef,
-        setAllOptionsMap,
-        sortedOptionsRef,
-        updateResultCount,
-        valueKeyRef,
-        moveSelectedOptionsToTop,
-    ]);
+    }); }, [setIsLoading, loadOptionsRef, selectedOptionsRef, setOptions, updateResultCount, moveSelectedOptionsToTop]);
     var onPaginate = (0, react_1.useCallback)(function (event, itemGroup) {
         var _a;
         if (itemGroup === void 0) { itemGroup = constants_1.UNGROUPED_ID; }
         if (!isLoading &&
             !isPaginatingRef.current[itemGroup] &&
             !completeRef.current[itemGroup] &&
-            (0, helpers_1.shouldPaginate)(event.target, paginationBufferRef.current)) {
+            (0, helpers_1.shouldPaginate)(event.target, paginationBufferRef.current, pageRef.current[itemGroup] !== undefined)) {
             isPaginatingRef.current[itemGroup] = true;
-            fetchOptions([{ group: itemGroup, pageNumber: ((_a = pageRef.current[itemGroup]) !== null && _a !== void 0 ? _a : 0) + 1 }]);
+            fetchOptions([{ group: itemGroup, pageNumber: ((_a = pageRef.current[itemGroup]) !== null && _a !== void 0 ? _a : -1) + 1 }]);
         }
-    }, [fetchOptions, isLoading]);
-    var onInputChange = (0, react_1.useCallback)(function () {
-        if ((0, helpers_1.getInputValue)(inputRef).length < minimumInputRef.current) {
+    }, [fetchOptions, isLoading, paginationBufferRef]);
+    var onInputChange = (0, react_1.useCallback)(function (_a) {
+        var _b = _a.value, value = _b === void 0 ? '' : _b;
+        if (value.length < minimumInputRef.current) {
             //reset state
             setIsLoading(false);
-            var emptyOptions = (0, helpers_1.initGroupOptions)(groupConfig);
-            sortedOptionsRef.current = emptyOptions;
-            setOptions(emptyOptions);
-            pageRef.current = {};
-            completeRef.current = {};
-            setResultCountMap({});
+            setIsSearchPending(false);
+            resetAsyncSelectState();
             return;
         }
+        inputValueRef.current = value;
+        setIsSearchPending(true);
         fetchOptions(groupConfig.map(function (_a) {
             var id = _a.id;
             return ({ group: id, pageNumber: 0 });
         }));
-    }, [fetchOptions, groupConfig]);
-    var createOption = (0, react_1.useCallback)(function (label) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
-        var createdOptions, err_1;
-        return (0, tslib_1.__generator)(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!propsCreateOption) {
-                        throw new Error('Spaceweb: [AsyncSelect] `createOption` is not defined');
-                    }
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, 4, 5]);
-                    setIsLoading(true);
-                    return [4 /*yield*/, propsCreateOption(label)];
-                case 2:
-                    createdOptions = _a.sent();
-                    return [2 /*return*/, createdOptions];
-                case 3:
-                    err_1 = _a.sent();
-                    throw err_1;
-                case 4:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); }, [propsCreateOption, setIsLoading]);
+    }, [fetchOptions, groupConfig, minimumInputRef, resetAsyncSelectState, setIsLoading]);
+    (0, react_1.useEffect)(function () {
+        if (!refetchOnGroupConfigChange) {
+            return;
+        }
+        groupConfigIdRef.current = (0, uniqueId_1.default)();
+        if (inputValueRef.current && inputValueRef.current.length >= minimumInputRef.current) {
+            setIsLoading(true);
+            resetAsyncSelectState();
+            fetchOptions(groupConfig.map(function (_a) {
+                var id = _a.id;
+                return ({ group: id, pageNumber: 0 });
+            }));
+        }
+        else {
+            setIsLoading(false);
+            setIsSearchPending(false);
+            resetAsyncSelectState();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- only keeping required dependencies
+    }, [groupConfig, fetchOptions]);
     return {
         onPaginate: onPaginate,
         onInputChange: onInputChange,
         fetchOptions: fetchOptions,
-        createOption: propsCreateOption ? createOption : undefined,
         resultCountMap: resultCountMap,
+        resetAsyncSelectPagination: resetAsyncSelectState,
+        setResultCountMap: setResultCountMap,
+        isSearchPending: isSearchPending,
     };
 };
 exports.useAsyncOptionHandlers = useAsyncOptionHandlers;

package/asyncSelect/hooks/useAsyncOptions.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { GroupConfig, GroupedOptions, LoadOptions, SetStateFunc, Value } from '../types';
+type UseAsyncOptionsArgs = {
+    labelKey?: string;
+    valueKey?: string;
+    minimumInput?: number;
+    paginationBuffer?: number;
+    setOptions: SetStateFunc<GroupedOptions>;
+    loadOptions: LoadOptions;
+    groupConfig: GroupConfig;
+    selectedOptions?: Value;
+    moveSelectedOptionsToTop?: boolean;
+    loadOnMount?: boolean;
+    refetchOnGroupConfigChange?: boolean;
+};
+export declare const useAsyncOptions: ({ loadOptions, loadOnMount, refetchOnGroupConfigChange, groupConfig, minimumInput, labelKey, valueKey, paginationBuffer, setOptions, selectedOptions, moveSelectedOptionsToTop, }: UseAsyncOptionsArgs) => {
+    onPaginate: (event: import("react").UIEvent<HTMLElement, UIEvent>, itemGroup?: string) => void;
+    onInputChange: ({ value }: import("../types").CustomInputEvent) => void;
+    groupConfigWithCount: {
+        count: number | undefined;
+        id: string;
+        label: string;
+    }[];
+    isLoading: boolean;
+    setIsLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    resetAsyncSelectPagination: () => void;
+    resultCountMap: import("./useAsyncOptionHandlers").ResultCountMap;
+    setResultCountMap: import("react").Dispatch<import("react").SetStateAction<import("./useAsyncOptionHandlers").ResultCountMap>>;
+    isSearchPending: boolean;
+};
+export {};

package/asyncSelect/hooks/useAsyncOptions.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsyncOptions = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+//hooks
+var useLatest_1 = require("../../hooks/useLatest");
+var useAsyncOptionHandlers_1 = require("./useAsyncOptionHandlers");
+var default_props_1 = tslib_1.__importDefault(require("../../select/default-props"));
+var useAsyncOptions = function (_a) {
+    var loadOptions = _a.loadOptions, _b = _a.loadOnMount, loadOnMount = _b === void 0 ? true : _b, _c = _a.refetchOnGroupConfigChange, refetchOnGroupConfigChange = _c === void 0 ? false : _c, groupConfig = _a.groupConfig, _d = _a.minimumInput, minimumInput = _d === void 0 ? 0 : _d, _e = _a.labelKey, labelKey = _e === void 0 ? default_props_1.default.labelKey : _e, _f = _a.valueKey, valueKey = _f === void 0 ? default_props_1.default.valueKey : _f, paginationBuffer = _a.paginationBuffer, setOptions = _a.setOptions, selectedOptions = _a.selectedOptions, moveSelectedOptionsToTop = _a.moveSelectedOptionsToTop;
+    var loadOnMountRef = (0, useLatest_1.useLatest)(loadOnMount);
+    var _g = tslib_1.__read((0, react_1.useState)(loadOnMount), 2), isLoading = _g[0], setIsLoading = _g[1];
+    var _h = (0, useAsyncOptionHandlers_1.useAsyncOptionHandlers)({
+        isLoading: isLoading,
+        setOptions: setOptions,
+        loadOptions: loadOptions,
+        minimumInput: minimumInput,
+        setIsLoading: setIsLoading,
+        paginationBuffer: paginationBuffer,
+        groupConfig: groupConfig,
+        selectedOptions: selectedOptions,
+        moveSelectedOptionsToTop: moveSelectedOptionsToTop,
+        refetchOnGroupConfigChange: refetchOnGroupConfigChange,
+    }), fetchOptions = _h.fetchOptions, onPaginate = _h.onPaginate, onInputChange = _h.onInputChange, resultCountMap = _h.resultCountMap, setResultCountMap = _h.setResultCountMap, resetAsyncSelectPagination = _h.resetAsyncSelectPagination, isSearchPending = _h.isSearchPending;
+    /******************************************* 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 groupConfigWithCount = (0, react_1.useMemo)(function () { return groupConfig.map(function (group) { return (tslib_1.__assign(tslib_1.__assign({}, group), { count: resultCountMap[group.id] })); }); }, [groupConfig, resultCountMap]);
+    return {
+        onPaginate: onPaginate,
+        onInputChange: onInputChange,
+        groupConfigWithCount: groupConfigWithCount,
+        isLoading: isLoading,
+        setIsLoading: setIsLoading,
+        resetAsyncSelectPagination: resetAsyncSelectPagination,
+        resultCountMap: resultCountMap,
+        setResultCountMap: setResultCountMap,
+        isSearchPending: isSearchPending,
+    };
+};
+exports.useAsyncOptions = useAsyncOptions;