@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

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, controlRef = props.controlRef, propsInputRef = props.inputRef, propsCreateOption = props.createOption, restSelectProps = (0, tslib_1.__rest)(props, ["loadOptions", "searchingText", "paginationBuffer", "debounceInterval", "resolveSelectedOptions", "minimumInput", "loadOnMount", "loadOnFocus", "initialOptions", "listenAllInputChanges", "onInputChange", "noResultsMsg", "overrides", "value", "controlRef", "inputRef", "createOption"]);
-    var _f = restSelectProps.valueKey, valueKey = _f === void 0 ? 'id' : _f;
-    var locale = (0, locale_1.useLocale)();
-    var valueKeyRef = (0, useLatest_1.useLatest)(valueKey);
-    var loadOnMountRef = (0, useLatest_1.useLatest)(loadOnMount);
-    var _g = (0, tslib_1.__read)((0, react_1.useState)(loadOnMount), 2), isLoading = _g[0], setIsLoading = _g[1];
-    var _h = (0, tslib_1.__read)((0, react_1.useState)(initialOptions), 2), options = _h[0], setOptions = _h[1];
-    var _j = (0, tslib_1.__read)((0, react_1.useState)((0, keyBy_1.default)(initialOptions, valueKey)), 2), allOptionsMap = _j[0], setAllOptionsMap = _j[1];
-    var _k = (0, tslib_1.__read)((0, react_1.useState)(null), 2), inputElement = _k[0], setInputElement = _k[1];
-    var inputRef = (0, useLatest_1.useLatest)(inputElement);
-    var combinedRef = (0, useCombinedRef_1.default)(setInputElement, propsInputRef);
-    var _l = (0, tslib_1.__read)((0, react_1.useState)(null), 2), rootRef = _l[0], setRootRef = _l[1];
-    var _m = (0, tslib_1.__read)((0, react_1.useState)(null), 2), popoverRef = _m[0], setPopoverRef = _m[1];
-    (0, useResolveSelectedOptions_1.useResolveSelectedOptions)({
-        value: value,
-        valueKey: valueKey,
-        inputRef: inputRef,
-        allOptionsMap: allOptionsMap,
-        setOptions: setOptions,
-        setIsLoading: setIsLoading,
-        setAllOptionsMap: setAllOptionsMap,
-        resolveSelectedOptions: resolveSelectedOptions,
-    });
-    var _o = (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 = _o.fetchOptions, onPaginate = _o.onPaginate, inputChangeHandlerToDebounce = _o.onInputChange, createOption = _o.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, { filterOptions: restSelectProps.filterOptions, hideSelectAll: true, options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: 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,44 @@
+"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,
+                },
+            },
+        }, 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: 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,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,23 @@ 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;
+    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, 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>;
+    fetchOptions: (itemGroups: {
+        group: string;
+        pageNumber: number;
+    }[]) => Promise<void>;
     createOption: ((label: string) => Promise<Options>) | undefined;
+    resultCountMap: Record<string, number | undefined>;
 };
 export { useAsyncOptionHandlers };

package/asyncSelect/hooks/useAsyncOptionHandlers.js

@@ -6,21 +6,30 @@ var tslib_1 = require("tslib");
  *  Created by Aneree on 15/01/21.
  */
 var react_1 = require("react");
+//components
+var select_1 = require("../../select");
 //hooks
 var useLatest_1 = require("../../hooks/useLatest");
-//helpers
 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, loadOptions = _a.loadOptions, minimumInput = _a.minimumInput, setIsLoading = _a.setIsLoading, paginationBuffer = _a.paginationBuffer, setAllOptionsMap = _a.setAllOptionsMap, propsCreateOption = _a.createOption;
-    var pageRef = (0, react_1.useRef)(0);
-    var completeRef = (0, react_1.useRef)(false);
-    var isPaginatingRef = (0, react_1.useRef)(false);
+    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 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 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)));
+    }); }, []);
     var valueKeyRef = (0, useLatest_1.useLatest)(valueKey);
     var loadOptionsRef = (0, useLatest_1.useLatest)(loadOptions);
     var minimumInputRef = (0, useLatest_1.useLatest)(minimumInput);
     var paginationBufferRef = (0, useLatest_1.useLatest)(paginationBuffer);
-    var fetchOptions = (0, react_1.useCallback)(function (pageNumber) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
-        var timeoutId, _a, options_1, complete;
+    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 _a;
         return (0, tslib_1.__generator)(this, function (_b) {
             switch (_b.label) {
                 case 0:
@@ -28,51 +37,98 @@ var useAsyncOptionHandlers = function (_a) {
                     _b.label = 1;
                 case 1:
                     _b.trys.push([1, , 3, 4]);
-                    return [4 /*yield*/, loadOptionsRef.current((0, helpers_1.getInputValue)(inputRef), pageNumber)];
+                    return [4 /*yield*/, loadOptionsRef.current((0, helpers_1.getInputValue)(inputRef), itemGroups)];
                 case 2:
-                    _a = _b.sent(), options_1 = _a.options, complete = _a.complete;
-                    setAllOptionsMap(function (prevOptions) { return (0, helpers_1.addOptionsInMap)(prevOptions, options_1, valueKeyRef.current); });
+                    loadedOptions = _b.sent();
+                    groupedOptions_1 = {};
+                    selectedOptionsByGroup_1 = (0, helpers_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 (0, helpers_1.addOptionsInMap)(prevOptions, groupedOptions_1, valueKeyRef.current); });
                     //Merge options when it's not the first page
-                    setOptions(function (prevOptions) { return (pageNumber ? (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(prevOptions), false), (0, tslib_1.__read)(options_1), false) : options_1); });
-                    completeRef.current = complete;
-                    pageRef.current = pageNumber;
-                    isPaginatingRef.current = false;
+                    setOptions(function (prevOptions) {
+                        var updatedOptions = (0, 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);
+                            }
+                            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];
+                            }
+                        });
+                        return updatedOptions;
+                    });
+                    itemGroups.forEach(function (_a) {
+                        var group = _a.group, pageNumber = _a.pageNumber;
+                        pageRef.current[group] = pageNumber;
+                    });
                     return [3 /*break*/, 4];
                 case 3:
+                    itemGroups.forEach(function (_a) {
+                        var group = _a.group;
+                        isPaginatingRef.current[group] = false;
+                    });
                     clearTimeout(timeoutId);
                     setIsLoading(false);
                     return [7 /*endfinally*/];
                 case 4: return [2 /*return*/];
             }
         });
-    }); }, []);
-    var onPaginate = (0, react_1.useCallback)(function (event) {
+    }); }, [
+        setIsLoading,
+        loadOptionsRef,
+        inputRef,
+        selectedOptionsRef,
+        setAllOptionsMap,
+        sortedOptionsRef,
+        updateResultCount,
+        valueKeyRef,
+        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 &&
-            !completeRef.current &&
+            !isPaginatingRef.current[itemGroup] &&
+            !completeRef.current[itemGroup] &&
             (0, helpers_1.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 = (0, react_1.useCallback)(function () {
         if ((0, helpers_1.getInputValue)(inputRef).length < minimumInputRef.current) {
             //reset state
             setIsLoading(false);
-            setOptions([]);
-            pageRef.current = 0;
-            completeRef.current = false;
+            var emptyOptions = (0, helpers_1.initGroupOptions)(groupConfig);
+            sortedOptionsRef.current = emptyOptions;
+            setOptions(emptyOptions);
+            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 = (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 'Spaceweb: [AsyncSelect] `createOption` is not defined';
+                        throw new Error('Spaceweb: [AsyncSelect] `createOption` is not defined');
                     }
                     _a.label = 1;
                 case 1:
@@ -97,6 +153,7 @@ var useAsyncOptionHandlers = function (_a) {
         onInputChange: onInputChange,
         fetchOptions: fetchOptions,
         createOption: propsCreateOption ? createOption : undefined,
+        resultCountMap: resultCountMap,
     };
 };
 exports.useAsyncOptionHandlers = useAsyncOptionHandlers;

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