@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/ClientOnly.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare type ClientOnlyProps = {
+    children: ReactNode;
+};
+export declare const ClientOnly: ({ children }: ClientOnlyProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/ClientOnly.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientOnly = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var useTransitionState_1 = require("./hooks/useTransitionState");
+var ClientOnly = function (_a) {
+    var children = _a.children;
+    var _b = (0, tslib_1.__read)((0, useTransitionState_1.useTransitionState)(false), 2), hasMounted = _b[0], setHasMounted = _b[1];
+    (0, react_1.useEffect)(function () {
+        setHasMounted(true);
+    }, [setHasMounted]);
+    if (!hasMounted) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
+};
+exports.ClientOnly = ClientOnly;

package/allComponentsAndUtilities.d.ts

@@ -43,7 +43,6 @@ export * as Switch from './switch';
 export * as Tabs from './tabs';
 export * as Tag from './tag';
 export * as TextArea from './textarea';
-export * as Themes from './themes';
 export * as TimePicker from './time-picker';
 export * as TimeRangePicker from './time-range-picker';
 export * as TimeZonePicker from './time-zone-picker';
@@ -53,3 +52,8 @@ export * as Video from './video';
 export * as PaymentCard from './payment-card';
 export * as PhoneInput from './phone-input';
 export * as DateInput from './date-input';
+export * as Breadcrumb from './breadcrumb';
+export * as Transition from './transitions/transition';
+export * as Collapse from './transitions/collapse';
+export * as Grow from './transitions/grow';
+export * as Fade from './transitions/fade';

package/allComponentsAndUtilities.js

@@ -4,7 +4,8 @@ NOTE: This file is only for size tooling.
 Do not import anything from this module!
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateInput = exports.PhoneInput = exports.PaymentCard = exports.Video = exports.Typography = exports.Tooltip = exports.TimeZonePicker = exports.TimeRangePicker = exports.TimePicker = exports.Themes = exports.TextArea = exports.Tag = exports.Tabs = exports.Switch = exports.StyleEngine = exports.Style = exports.Stack = exports.SpacewebProvider = exports.SpaceConsumer = exports.Snackbar = exports.Slider = exports.Select = exports.Search = exports.Radio = exports.Popover = exports.Overrides = exports.Modal = exports.Menu = exports.Loader = exports.List = exports.Link = exports.Input = exports.Image = exports.Icons = exports.useCombinedRef = exports.useCombinedHandler = exports.Helpers = exports.Grid = exports.FormControl = exports.DatePicker = exports.Col = exports.ClassNames = exports.Checkbox = exports.ButtonGroup = exports.Button = exports.Box = exports.BaseButton = exports.Badge = exports.Avatar = void 0;
+exports.Transition = exports.Breadcrumb = exports.DateInput = exports.PhoneInput = exports.PaymentCard = exports.Video = exports.Typography = exports.Tooltip = exports.TimeZonePicker = exports.TimeRangePicker = exports.TimePicker = exports.TextArea = exports.Tag = exports.Tabs = exports.Switch = exports.StyleEngine = exports.Style = exports.Stack = exports.SpacewebProvider = exports.SpaceConsumer = exports.Snackbar = exports.Slider = exports.Select = exports.Search = exports.Radio = exports.Popover = exports.Overrides = exports.Modal = exports.Menu = exports.Loader = exports.List = exports.Link = exports.Input = exports.Image = exports.Icons = exports.useCombinedRef = exports.useCombinedHandler = exports.Helpers = exports.Grid = exports.FormControl = exports.DatePicker = exports.Col = exports.ClassNames = exports.Checkbox = exports.ButtonGroup = exports.Button = exports.Box = exports.BaseButton = exports.Badge = exports.Avatar = void 0;
+exports.Fade = exports.Grow = exports.Collapse = void 0;
 var tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./index"), exports);
 exports.Avatar = (0, tslib_1.__importStar)(require("./avatar"));
@@ -47,7 +48,6 @@ exports.Switch = (0, tslib_1.__importStar)(require("./switch"));
 exports.Tabs = (0, tslib_1.__importStar)(require("./tabs"));
 exports.Tag = (0, tslib_1.__importStar)(require("./tag"));
 exports.TextArea = (0, tslib_1.__importStar)(require("./textarea"));
-exports.Themes = (0, tslib_1.__importStar)(require("./themes"));
 exports.TimePicker = (0, tslib_1.__importStar)(require("./time-picker"));
 exports.TimeRangePicker = (0, tslib_1.__importStar)(require("./time-range-picker"));
 exports.TimeZonePicker = (0, tslib_1.__importStar)(require("./time-zone-picker"));
@@ -57,3 +57,8 @@ exports.Video = (0, tslib_1.__importStar)(require("./video"));
 exports.PaymentCard = (0, tslib_1.__importStar)(require("./payment-card"));
 exports.PhoneInput = (0, tslib_1.__importStar)(require("./phone-input"));
 exports.DateInput = (0, tslib_1.__importStar)(require("./date-input"));
+exports.Breadcrumb = (0, tslib_1.__importStar)(require("./breadcrumb"));
+exports.Transition = (0, tslib_1.__importStar)(require("./transitions/transition"));
+exports.Collapse = (0, tslib_1.__importStar)(require("./transitions/collapse"));
+exports.Grow = (0, tslib_1.__importStar)(require("./transitions/grow"));
+exports.Fade = (0, tslib_1.__importStar)(require("./transitions/fade"));

package/asyncSelect/asyncSelect.d.ts

@@ -1,7 +1,9 @@
 /**
  *  Created by Aneree on 03/11/20.
  */
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { AsyncSelectProps } from './types';
-declare const AsyncSelect: (props: React.PropsWithChildren<AsyncSelectProps>) => ReactElement;
+declare const AsyncSelect: ({ loadOptions, initialOptions, resolveSelectedOptions, value, hideSelectAll, ...restProps }: AsyncSelectProps & {
+    children?: ReactNode;
+}) => ReactElement;
 export { AsyncSelect };

package/asyncSelect/asyncSelect.js

@@ -7,117 +7,54 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  *  Created by Aneree on 03/11/20.
  */
 var react_1 = require("react");
-var keyBy_1 = (0, tslib_1.__importDefault)(require("lodash/keyBy"));
-//components
 var select_1 = require("../select");
-//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("./hooks/useInputChangeHandler");
-var useAsyncOptionHandlers_1 = require("./hooks/useAsyncOptionHandlers");
-var useResolveSelectedOptions_1 = require("./hooks/useResolveSelectedOptions");
-//helpers
+var useAsyncSelect_1 = require("./hooks/useAsyncSelect");
 var helpers_1 = require("./helpers");
-//utils
-var overrides_1 = require("../overrides");
-var EMPTY_ARRAY = [];
-// eslint-disable-next-line max-statements
-var AsyncSelect = function (props) {
-    var loadOptions = props.loadOptions, searchingText = props.searchingText, paginationBuffer = props.paginationBuffer, debounceInterval = props.debounceInterval, resolveSelectedOptions = props.resolveSelectedOptions, _a = props.minimumInput, minimumInput = _a === void 0 ? 0 : _a, _b = props.loadOnMount, loadOnMount = _b === void 0 ? false : _b, _c = props.loadOnFocus, loadOnFocus = _c === void 0 ? false : _c, _d = props.initialOptions, initialOptions = _d === void 0 ? EMPTY_ARRAY : _d, _e = props.listenAllInputChanges, listenAllInputChanges = _e === void 0 ? true : _e, 
-    //selectProps
-    onInputChange = props.onInputChange, noResultsMsg = props.noResultsMsg, overrides = props.overrides, value = props.value, _f = props.controlRef, controlRef = _f === void 0 ? null : _f, propsCreateOption = props.createOption, restSelectProps = (0, tslib_1.__rest)(props, ["loadOptions", "searchingText", "paginationBuffer", "debounceInterval", "resolveSelectedOptions", "minimumInput", "loadOnMount", "loadOnFocus", "initialOptions", "listenAllInputChanges", "onInputChange", "noResultsMsg", "overrides", "value", "controlRef", "createOption"]);
-    var _g = restSelectProps.valueKey, valueKey = _g === void 0 ? 'id' : _g;
-    var locale = (0, locale_1.useLocale)();
-    var valueKeyRef = (0, useLatest_1.useLatest)(valueKey);
-    var loadOnMountRef = (0, useLatest_1.useLatest)(loadOnMount);
-    var _h = (0, tslib_1.__read)((0, react_1.useState)(loadOnMount), 2), isLoading = _h[0], setIsLoading = _h[1];
-    var _j = (0, tslib_1.__read)((0, react_1.useState)(initialOptions), 2), options = _j[0], setOptions = _j[1];
-    var _k = (0, tslib_1.__read)((0, react_1.useState)((0, keyBy_1.default)(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, controlRef);
-    var _m = (0, tslib_1.__read)((0, react_1.useState)(null), 2), rootRef = _m[0], setRootRef = _m[1];
-    var _o = (0, tslib_1.__read)((0, react_1.useState)(null), 2), popoverRef = _o[0], setPopoverRef = _o[1];
-    (0, useResolveSelectedOptions_1.useResolveSelectedOptions)({
-        value: value,
-        valueKey: valueKey,
-        inputRef: inputRef,
-        allOptionsMap: allOptionsMap,
-        setOptions: setOptions,
-        setIsLoading: setIsLoading,
-        setAllOptionsMap: setAllOptionsMap,
-        resolveSelectedOptions: resolveSelectedOptions,
-    });
-    var _p = (0, useAsyncOptionHandlers_1.useAsyncOptionHandlers)({
-        valueKey: valueKey,
-        isLoading: isLoading,
-        minimumInput: minimumInput,
-        paginationBuffer: paginationBuffer,
-        inputRef: inputRef,
-        setAllOptionsMap: setAllOptionsMap,
-        setIsLoading: setIsLoading,
-        setOptions: setOptions,
-        loadOptions: loadOptions,
-        createOption: propsCreateOption,
-    }), fetchOptions = _p.fetchOptions, onPaginate = _p.onPaginate, inputChangeHandlerToDebounce = _p.onInputChange, createOption = _p.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) {
-        /**
-         * 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 ************************************************/
-    (0, react_1.useEffect)(function () {
-        if (loadOnMountRef.current) {
-            fetchOptions(0);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- only want to load the options on first mount
-    }, []);
-    /********************************************************************************************************************/
-    var selectedOptions = (0, react_1.useMemo)(function () {
-        return value === null || value === void 0 ? void 0 : value.map(function (valueOption) {
-            var _a;
-            var optionKey = valueOption[valueKeyRef.current];
-            //In case of unresolved values, till the value is being resolved, show the unresolved value to the user
-            return (_a = allOptionsMap[optionKey]) !== null && _a !== void 0 ? _a : valueOption;
+var constants_1 = require("../select/constants");
+var UNGROUP_GROUP_CONFIG = [{ id: constants_1.UNGROUPED_ID, label: 'Ungrouped' }];
+var AsyncSelect = 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 = (0, tslib_1.__rest)(_a, ["loadOptions", "initialOptions", "resolveSelectedOptions", "value", "hideSelectAll"]);
+    var _c = (0, tslib_1.__read)((0, react_1.useState)(true), 2), hasMore = _c[0], setHasMore = _c[1];
+    var adaptedLoadOptions = (0, react_1.useCallback)(function (input, groupFilters) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
+        var _a, filter, _b, options, complete;
+        return (0, tslib_1.__generator)(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _a = (0, 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 }],
+                        }];
+            }
         });
-    }, 
-    // All options map needs to be present in the dependency list so that the values get recomputed when
-    // the resolved options have been fetched
-    [value, allOptionsMap, valueKeyRef]);
-    var mergedOverrides = (0, react_1.useMemo)(function () {
-        return (0, overrides_1.mergeOverrides)((0, tslib_1.__assign)({ Root: { props: { ref: setRootRef, onFocus: handleFocus } }, Popover: { props: { overrides: { Inner: { props: { ref: setPopoverRef } } } } } }, (props.type === 'overlay'
-            ? {
-                // In overlaySelect, overflow property is on OverlayContentContainer
-                OverlayContentContainer: { props: { onScroll: onPaginate } },
-                Menu: { props: { $onPaginate: onPaginate } },
+    }); }, [loadOptions]);
+    var adaptedResolveSelectedOptions = (0, react_1.useCallback)(function (groupVsUnresolvedValueKeys) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
+        var resolvedOptions;
+        var _a;
+        return (0, 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)];
             }
-            : {
-                //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, props.type, onPaginate, overrides]);
-    return ((0, jsx_runtime_1.jsx)(select_1.Select, (0, tslib_1.__assign)({}, restSelectProps, { hideSelectAll: true, options: options, isLoading: isLoading, value: selectedOptions, controlRef: combinedRef, overrides: mergedOverrides, onInputChange: _onInputChange, noResultsMsg: (0, helpers_1.getNoResultsMsg)({
-            isLoading: isLoading,
-            noResultsMsg: noResultsMsg,
-            inputText: (0, helpers_1.getInputValue)(inputRef),
-            minimumInput: minimumInput,
-            searchingText: searchingText !== null && searchingText !== void 0 ? searchingText : locale.asyncSelect.searchingText,
-            emptyInputMsg: locale.asyncSelect.emptyInputMsg,
-        }), createOption: createOption }), void 0));
+        });
+    }); }, [resolveSelectedOptions]);
+    var adaptedValue = (0, react_1.useMemo)(function () {
+        var _a;
+        return (value ? (_a = {}, _a[constants_1.UNGROUPED_ID] = value, _a) : value);
+    }, [value]);
+    var _d = (0, useAsyncSelect_1.useAsyncSelect)((0, tslib_1.__assign)((0, 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 })), resultCountMap = _d.resultCountMap, selectProps = (0, tslib_1.__rest)(_d, ["resultCountMap"]);
+    return (0, jsx_runtime_1.jsx)(select_1.Select, (0, tslib_1.__assign)({}, selectProps, { hideSelectAll: hideSelectAll || hasMore }), void 0);
 };
 exports.AsyncSelect = AsyncSelect;

package/asyncSelect/groupedAsyncSelect.d.ts

@@ -0,0 +1,5 @@
+import { GroupedAsyncSelectProps } from './types';
+import { ReactNode } from 'react';
+export declare const GroupedAsyncSelect: ({ onChange, showSelectAll, selectAllSelected, selectOnTab, ...restProps }: GroupedAsyncSelectProps & {
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/asyncSelect/groupedAsyncSelect.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupedAsyncSelect = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var useAsyncSelect_1 = require("./hooks/useAsyncSelect");
+var select_1 = require("../select");
+var CollapsibleSelectMenu_1 = require("../select/selectMenuAdapter/CollapsibleSelectMenu");
+var react_1 = require("react");
+var overrides_1 = require("../overrides");
+var helpers_1 = require("./helpers");
+var reduce_1 = (0, tslib_1.__importDefault)(require("lodash/reduce"));
+var isObject_1 = (0, tslib_1.__importDefault)(require("lodash/isObject"));
+var default_props_1 = (0, tslib_1.__importDefault)(require("../select/default-props"));
+var locale_1 = require("../locale");
+var GroupedAsyncSelect = function (_a) {
+    var onChange = _a.onChange, showSelectAll = _a.showSelectAll, selectAllSelected = _a.selectAllSelected, selectOnTab = _a.selectOnTab, restProps = (0, tslib_1.__rest)(_a, ["onChange", "showSelectAll", "selectAllSelected", "selectOnTab"]);
+    var locale = (0, locale_1.useLocale)();
+    var adaptedOnChange = (0, react_1.useCallback)(function (params) {
+        var groupedValue = (0, helpers_1.arrayToGroupedOptions)(params.value);
+        return onChange === null || onChange === void 0 ? void 0 : onChange((0, tslib_1.__assign)((0, tslib_1.__assign)({}, params), { value: groupedValue, valueKeys: (0, reduce_1.default)(groupedValue, function (acc, values, groupId) {
+                acc[groupId] = values === null || values === void 0 ? void 0 : values.map(function (valueObjOrId) {
+                    return (0, isObject_1.default)(valueObjOrId) ? valueObjOrId[restProps.valueKey || default_props_1.default.valueKey] : valueObjOrId;
+                });
+                return acc;
+            }, {}) }));
+    }, [onChange, restProps.valueKey]);
+    var _b = (0, useAsyncSelect_1.useAsyncSelect)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { onChange: adaptedOnChange })), resultCountMap = _b.resultCountMap, selectProps = (0, tslib_1.__rest)(_b, ["resultCountMap"]);
+    var overrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            StatefulMenu: {
+                component: CollapsibleSelectMenu_1.CollapsibleSelectMenu,
+                props: {
+                    groupConfig: restProps.groupConfig.map(function (group) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, group), { count: resultCountMap[group.id] })); }),
+                    clearAsOption: restProps.clearAsOption,
+                    selectOnTab: selectOnTab,
+                    shouldDisplaySelectAll: showSelectAll,
+                    disableWhenSelectAllChecked: true,
+                    hideGroupSelectAll: true,
+                },
+            },
+        }, selectProps.overrides);
+    }, [selectProps.overrides, restProps.groupConfig, resultCountMap, restProps.clearAsOption, selectOnTab, showSelectAll]);
+    return ((0, jsx_runtime_1.jsx)(select_1.Select, (0, tslib_1.__assign)({}, selectProps, { overrides: overrides, hideSelectAll: !showSelectAll, __selectAllShouldReturnAllOptions: showSelectAll, __selectAllSelected: selectAllSelected }, ((selectProps === null || selectProps === void 0 ? void 0 : selectProps.type) === 'overlay' ? { scrollContainer: 'menuContainer' } : {}), { "aria-label": "".concat(selectProps['aria-label'] || '', " ").concat(locale.select.collapsibleMenuDescription) }), void 0));
+};
+exports.GroupedAsyncSelect = GroupedAsyncSelect;

package/asyncSelect/helpers.d.ts

@@ -3,15 +3,22 @@
  */
 import { RefObject } from 'react';
 import * as React from 'react';
-import { AllOptionsMap, Option } from './types';
-export declare const getNoResultsMsg: ({ isLoading, minimumInput, inputText, noResultsMsg, searchingText, emptyInputMsg, }: {
+import { AllOptionsMap, GroupConfig, GroupedOptions, Option } from './types';
+import { normalizeOptions } from '../baseui/select/utils';
+import { Value } from '../select/types';
+export declare const getNoResultsMsg: ({ isLoading, minimumInput, inputText, noResultsMsg, searchingText, emptyInputMsg, searchable, }: {
     isLoading: boolean;
     minimumInput: number;
     inputText: string;
     noResultsMsg?: React.ReactNode;
-    searchingText: string;
+    searchingText: React.ReactNode;
     emptyInputMsg: string;
+    searchable?: boolean | undefined;
 }) => string | React.ReactNode | undefined;
 export declare const shouldPaginate: (element: HTMLElement, paginationBuffer?: number) => boolean;
-export declare const addOptionsInMap: (optionsMap: AllOptionsMap, options: Array<Option>, valueKey: string) => AllOptionsMap;
 export declare const getInputValue: (inputRef: RefObject<HTMLInputElement>) => string;
+export declare const arrayToGroupedOptions: (options: Array<Option> | GroupedOptions | Value) => GroupedOptions;
+export declare const mergeOptions: (a: Array<Option> | GroupedOptions, b: Array<Option> | GroupedOptions) => GroupedOptions;
+export declare const initGroupOptions: (groupConfig: GroupConfig) => GroupedOptions;
+export declare const addOptionsInMap: (optionsMap: AllOptionsMap, options: Array<Option> | GroupedOptions, valueKey: string) => AllOptionsMap;
+export { normalizeOptions };

package/asyncSelect/helpers.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInputValue = exports.addOptionsInMap = exports.shouldPaginate = exports.getNoResultsMsg = void 0;
+exports.normalizeOptions = exports.addOptionsInMap = exports.initGroupOptions = exports.mergeOptions = exports.arrayToGroupedOptions = exports.getInputValue = exports.shouldPaginate = exports.getNoResultsMsg = void 0;
 var tslib_1 = require("tslib");
+var utils_1 = require("../baseui/select/utils");
+Object.defineProperty(exports, "normalizeOptions", { enumerable: true, get: function () { return utils_1.normalizeOptions; } });
+var constants_1 = require("../select/constants");
 var getNoResultsMsg = function (_a) {
-    var isLoading = _a.isLoading, minimumInput = _a.minimumInput, inputText = _a.inputText, noResultsMsg = _a.noResultsMsg, searchingText = _a.searchingText, emptyInputMsg = _a.emptyInputMsg;
+    var isLoading = _a.isLoading, minimumInput = _a.minimumInput, inputText = _a.inputText, noResultsMsg = _a.noResultsMsg, searchingText = _a.searchingText, emptyInputMsg = _a.emptyInputMsg, _b = _a.searchable, searchable = _b === void 0 ? true : _b;
     if (isLoading) {
         return searchingText;
     }
@@ -11,6 +14,8 @@ var getNoResultsMsg = function (_a) {
     if (minimumInput > 0 && inputText.length < minimumInput) {
         return "Type at least ".concat(minimumInput, " characters to search");
     }
+    if (searchable === false)
+        return noResultsMsg;
     return inputText ? noResultsMsg : emptyInputMsg;
 };
 exports.getNoResultsMsg = getNoResultsMsg;
@@ -20,8 +25,38 @@ var shouldPaginate = function (element, paginationBuffer) {
         element.scrollTop >= element.scrollHeight - element.clientHeight - paginationBuffer;
 };
 exports.shouldPaginate = shouldPaginate;
+var getInputValue = function (inputRef) { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || ''; };
+exports.getInputValue = getInputValue;
+var arrayToGroupedOptions = function (options) {
+    if (!Array.isArray(options)) {
+        return options;
+    }
+    return options.reduce(function (acc, option) {
+        acc[option.__optgroup || constants_1.UNGROUPED_ID] = acc[option.__optgroup || constants_1.UNGROUPED_ID] || [];
+        acc[option.__optgroup || constants_1.UNGROUPED_ID].push(option);
+        return acc;
+    }, {});
+};
+exports.arrayToGroupedOptions = arrayToGroupedOptions;
+var mergeOptions = function (a, b) {
+    var groupedA = (0, exports.arrayToGroupedOptions)(a), groupedB = (0, exports.arrayToGroupedOptions)(b);
+    var allKeys = Object.keys((0, tslib_1.__assign)((0, tslib_1.__assign)({}, groupedA), groupedB));
+    return allKeys.reduce(function (acc, key) {
+        acc[key] = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((groupedA[key] || [])), false), (0, tslib_1.__read)((groupedB[key] || [])), false);
+        return acc;
+    }, {});
+};
+exports.mergeOptions = mergeOptions;
+var initGroupOptions = function (groupConfig) {
+    return groupConfig.reduce(function (acc, _a) {
+        var id = _a.id;
+        acc[id] = [];
+        return acc;
+    }, {});
+};
+exports.initGroupOptions = initGroupOptions;
 var addOptionsInMap = function (optionsMap, options, valueKey) {
-    var newOptions = options.filter(function (option) { return !optionsMap[option[valueKey]]; });
+    var newOptions = (0, utils_1.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 = (0, tslib_1.__assign)({}, optionsMap);
@@ -34,5 +69,3 @@ var addOptionsInMap = function (optionsMap, options, valueKey) {
     return optionsMap;
 };
 exports.addOptionsInMap = addOptionsInMap;
-var getInputValue = function (inputRef) { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || ''; };
-exports.getInputValue = getInputValue;

package/asyncSelect/hooks/useAsyncOptionHandlers.d.ts

@@ -1,28 +1,35 @@
 /**
  *  Created by Aneree on 15/01/21.
  */
-import { MutableRefObject } from 'react';
-import { Option, OptionsT } 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 {
+    labelKey: string;
     valueKey: string;
     isLoading: boolean;
     minimumInput: number;
     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;
+    sortedOptionsRef: MutableRefObject<GroupedOptions>;
 }
-declare const useAsyncOptionHandlers: ({ inputRef, valueKey, isLoading, setOptions, loadOptions, minimumInput, setIsLoading, paginationBuffer, setAllOptionsMap, createOption: propsCreateOption, }: UseAsyncOptionHandlersArgs) => {
-    onPaginate: (event: any) => void;
+declare const useAsyncOptionHandlers: ({ inputRef, labelKey, valueKey, isLoading, setOptions, sortedOptionsRef, 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>;
-    createOption: ((label: string) => Promise<OptionsT>) | undefined;
+    fetchOptions: (itemGroups: {
+        group: string;
+        pageNumber: number;
+    }[]) => Promise<void>;
+    createOption: (label: string) => Promise<Options>;
+    resultCountMap: Record<string, number | undefined>;
 };
 export { useAsyncOptionHandlers };