@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/asyncSelect/hooks/useAsyncSelect.js

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsyncSelect = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var keyBy_1 = (0, tslib_1.__importDefault)(require("lodash/keyBy"));
+var reduce_1 = (0, tslib_1.__importDefault)(require("lodash/reduce"));
+var isObject_1 = (0, tslib_1.__importDefault)(require("lodash/isObject"));
+//hooks
+var locale_1 = require("../../locale");
+var useLatest_1 = require("../../hooks/useLatest");
+var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedRef"));
+var useInputChangeHandler_1 = require("./useInputChangeHandler");
+var useAsyncOptionHandlers_1 = require("./useAsyncOptionHandlers");
+var useResolveSelectedOptions_1 = require("./useResolveSelectedOptions");
+//helpers
+var helpers_1 = require("../helpers");
+var utils_1 = require("baseui/select/utils");
+var helpers_2 = require("../../helpers");
+//utils
+var overrides_1 = require("../../overrides");
+var default_props_1 = (0, tslib_1.__importDefault)(require("../../select/default-props"));
+var constants_1 = require("../../select/constants");
+var EMPTY_OBJ = {};
+var useAsyncSelect = function (params) {
+    var loadOptions = params.loadOptions, searchingText = params.searchingText, paginationBuffer = params.paginationBuffer, debounceInterval = params.debounceInterval, resolveSelectedOptions = params.resolveSelectedOptions, _a = params.minimumInput, minimumInput = _a === void 0 ? 0 : _a, _b = params.loadOnMount, loadOnMount = _b === void 0 ? false : _b, _c = params.loadOnFocus, loadOnFocus = _c === void 0 ? false : _c, _d = params.initialOptions, initialOptions = _d === void 0 ? EMPTY_OBJ : _d, _e = params.listenAllInputChanges, listenAllInputChanges = _e === void 0 ? true : _e, groupConfig = params.groupConfig, resolveValuesOnUpdate = params.resolveValuesOnUpdate, hideUnresolvedValues = params.hideUnresolvedValues, _f = params.moveSelectedOptionsToTop, moveSelectedOptionsToTop = _f === void 0 ? false : _f, 
+    //selectProps
+    onInputChange = params.onInputChange, noResultsMsg = params.noResultsMsg, overrides = params.overrides, groupedValue = params.value, controlRef = params.controlRef, propsInputRef = params.inputRef, propsCreateOption = params.createOption, _g = params.valueKey, valueKey = _g === void 0 ? default_props_1.default.valueKey : _g, _h = params.labelKey, labelKey = _h === void 0 ? default_props_1.default.labelKey : _h, propsOnChange = params.onChange, restSelectProps = (0, tslib_1.__rest)(params, ["loadOptions", "searchingText", "paginationBuffer", "debounceInterval", "resolveSelectedOptions", "minimumInput", "loadOnMount", "loadOnFocus", "initialOptions", "listenAllInputChanges", "groupConfig", "resolveValuesOnUpdate", "hideUnresolvedValues", "moveSelectedOptionsToTop", "onInputChange", "noResultsMsg", "overrides", "value", "controlRef", "inputRef", "createOption", "valueKey", "labelKey", "onChange"]);
+    var locale = (0, locale_1.useLocale)();
+    var loadOnMountRef = (0, useLatest_1.useLatest)(loadOnMount);
+    var _j = (0, tslib_1.__read)((0, react_1.useState)(function () {
+        return (0, helpers_1.mergeOptions)(initialOptions, (0, helpers_1.initGroupOptions)(groupConfig));
+    }), 2), options = _j[0], setOptions = _j[1];
+    var _k = (0, tslib_1.__read)((0, react_1.useState)(function () {
+        return (0, keyBy_1.default)((0, utils_1.normalizeOptions)(initialOptions), valueKey);
+    }), 2), allOptionsMap = _k[0], setAllOptionsMap = _k[1];
+    var _l = (0, tslib_1.__read)((0, react_1.useState)(null), 2), inputElement = _l[0], setInputElement = _l[1];
+    var inputRef = (0, useLatest_1.useLatest)(inputElement);
+    var combinedRef = (0, useCombinedRef_1.default)(setInputElement, propsInputRef);
+    var _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];
+    var _p = (0, useResolveSelectedOptions_1.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 = (0, tslib_1.__read)((0, react_1.useState)(loadOnMount), 2), _isLoading = _q[0], setIsLoading = _q[1];
+    var isLoading = isResolvingValues || _isLoading;
+    var unresolvedValueKeysRef = (0, react_1.useRef)([]);
+    var selectedOptions = (0, react_1.useMemo)(function () {
+        if (!groupedValue) {
+            return undefined;
+        }
+        unresolvedValueKeysRef.current = [];
+        var groupedValueObject = (0, reduce_1.default)(groupedValue, function (acc, values, groupId) {
+            acc[groupId] = (values || []).flatMap(function (valueObjOrId) {
+                var _a, _b;
+                var valueId = (0, isObject_1.default)(valueObjOrId) ? valueObjOrId[valueKey] : valueObjOrId;
+                var isResolving = isResolvingValues && unresolvedGroupedValueKeys[groupId].includes(valueId);
+                var valueObject = (0, isObject_1.default)(valueObjOrId)
+                    ? valueObjOrId
+                    : (_a = {},
+                        _a[valueKey] = valueId,
+                        _a[labelKey] = valueId,
+                        _a);
+                var isUnresolved = !allOptionsMap[valueId];
+                var resolvedObject = isUnresolved ? valueObject : (0, tslib_1.__assign)((0, tslib_1.__assign)({}, valueObject), allOptionsMap[valueId]);
+                if (isResolving) {
+                    return [(0, tslib_1.__assign)((0, tslib_1.__assign)({}, resolvedObject), (_b = {}, _b[constants_1.LOADING_KEY] = true, _b))];
+                }
+                if (isUnresolved && hideUnresolvedValues) {
+                    unresolvedValueKeysRef.current.push({ id: valueId, groupId: groupId });
+                    return [];
+                }
+                return [resolvedObject];
+            });
+            return acc;
+        }, {});
+        return (0, utils_1.normalizeOptions)(groupedValueObject);
+    }, 
+    // All options map needs to be present in the dependency list so that the values get recomputed when
+    // the resolved options have been fetched
+    [
+        groupedValue,
+        valueKey,
+        isResolvingValues,
+        unresolvedGroupedValueKeys,
+        labelKey,
+        allOptionsMap,
+        hideUnresolvedValues,
+    ]);
+    var _r = (0, useAsyncOptionHandlers_1.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 = (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(groupConfig.map(function (_a) {
+                var id = _a.id;
+                return ({ group: id, pageNumber: 0 });
+            }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- only want to load the options on first mount
+    }, []);
+    /********************************************************************************************************************/
+    var inputText = (0, helpers_1.getInputValue)(inputRef), adaptedNoResultsMsg = (0, helpers_1.getNoResultsMsg)({
+        isLoading: isLoading,
+        noResultsMsg: noResultsMsg,
+        inputText: inputText,
+        minimumInput: minimumInput,
+        searchingText: searchingText !== null && searchingText !== void 0 ? searchingText : locale.asyncSelect.searchingText,
+        emptyInputMsg: locale.asyncSelect.emptyInputMsg,
+    });
+    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 } } } } }, StatefulMenu: { props: { $onPaginate: onPaginate } }, NoResults: { props: (0, helpers_2.add$props)({ isLoading: isLoading, inputText: inputText, adaptedNoResultsMsg: adaptedNoResultsMsg }) } }, (params.type === 'overlay'
+            ? {
+                // In overlaySelect, overflow property is on OverlayContentContainer
+                OverlayContentContainer: { props: { onScroll: onPaginate } },
+                Menu: { props: { $onPaginate: onPaginate } },
+            }
+            : {
+                //Overriding DropdownContainer and not StatefulMenu so that async select remains functional even when
+                //user overrides StatefulMenu in favour of rendering virtualized menu
+                Menu: { props: { onScroll: onPaginate } },
+            })), overrides);
+    }, [handleFocus, onPaginate, isLoading, inputText, adaptedNoResultsMsg, params.type, overrides]);
+    var onChange = (0, react_1.useCallback)(function (onChangeParams) {
+        propsOnChange === null || propsOnChange === void 0 ? void 0 : propsOnChange((0, tslib_1.__assign)((0, tslib_1.__assign)({}, onChangeParams), { valueKeys: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(unresolvedValueKeysRef.current.map(function (_a) {
+                var id = _a.id;
+                return id;
+            })), false), (0, tslib_1.__read)(onChangeParams.value.map(function (opt) { return opt[valueKey]; })), false), value: unresolvedValueKeysRef.current.length
+                ? (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(unresolvedValueKeysRef.current.map(function (_a) {
+                    var _b;
+                    var id = _a.id, groupId = _a.groupId;
+                    return (_b = {},
+                        _b[valueKey] = id,
+                        _b[labelKey] = id,
+                        _b.__optgroup = groupId,
+                        _b);
+                })), false), (0, tslib_1.__read)(onChangeParams.value), false) : onChangeParams.value }));
+    }, [propsOnChange, valueKey, labelKey]);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({ children: undefined }, restSelectProps), { options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: combinedRef, overrides: mergedOverrides, noResultsMsg: adaptedNoResultsMsg, createOption: createOption, onInputChange: _onInputChange, valueKey: valueKey, labelKey: labelKey, type: restSelectProps.type, resultCountMap: resultCountMap, onChange: onChange, onOpen: function () {
+            moveSelectedOptionsToTop && setOptions(function (prev) { return (0, helpers_1.mergeOptions)((selectedOptions || []), prev); });
+            restSelectProps.onOpen && restSelectProps.onOpen();
+        } });
+};
+exports.useAsyncSelect = useAsyncSelect;

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

@@ -6,59 +6,71 @@ var tslib_1 = require("tslib");
  *  Created by Aneree on 15/01/21.
  */
 var react_1 = require("react");
-var uniqBy_1 = (0, tslib_1.__importDefault)(require("lodash/uniqBy"));
+var forEach_1 = (0, tslib_1.__importDefault)(require("lodash/forEach"));
+var isEmpty_1 = (0, tslib_1.__importDefault)(require("lodash/isEmpty"));
+var isObject_1 = (0, tslib_1.__importDefault)(require("lodash/isObject"));
 //hooks
-var useLatest_1 = require("../../hooks/useLatest");
+var useFirstMountState_1 = require("../../hooks/useFirstMountState");
 //helpers
 var helpers_1 = require("../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 = (0, useLatest_1.useLatest)(value);
-    var valueKeyRef = (0, useLatest_1.useLatest)(valueKey);
-    var resolveSelectedOptionsRef = (0, useLatest_1.useLatest)(resolveSelectedOptions);
-    var allOptionsMapRef = (0, react_1.useRef)(allOptionsMap);
-    var fetchUnresolvedValueKeys = (0, react_1.useCallback)(function (unresolvedValueKeys) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
-        var options_1, e_1;
-        return (0, tslib_1.__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 (0, helpers_1.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 (!(0, helpers_1.getInputValue)(inputRef)) {
-                        setOptions(function (prevOptions) {
-                            // 2. Only if they are not already present in the state
-                            var combinedOptions = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(prevOptions), false), (0, tslib_1.__read)(options_1), false), uniqueOptions = (0, uniqBy_1.default)(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 = (0, useFirstMountState_1.useFirstMountState)();
+    var unresolvedValuesResults = (0, react_1.useRef)({
+        unresolvedGroupedValueKeys: {},
+        hasUnresolvedValues: false,
+    });
+    (0, react_1.useMemo)(function () {
+        var shouldCalculateUnresolvedValues = (resolveValuesOnUpdate || isFirstMount) && resolveSelectedOptions && !(0, isEmpty_1.default)(groupedValue);
+        if (!shouldCalculateUnresolvedValues) {
+            return;
+        }
+        var unresolvedGroupedValueKeys = {}, hasUnresolvedValues = false;
+        (0, forEach_1.default)(groupedValue, function (values, groupId) {
+            unresolvedGroupedValueKeys[groupId] = (values !== null && values !== void 0 ? values : [])
+                .map(function (valueObjOrId) { return ((0, isObject_1.default)(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 = (0, tslib_1.__read)((0, react_1.useState)(hasUnresolvedValues), 2), isResolvingValues = _c[0], setIsResolving = _c[1];
     (0, react_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 (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
+            var options_1;
+            return (0, tslib_1.__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 (0, helpers_1.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 (!(0, helpers_1.getInputValue)(inputRef)) {
+                            setOptions(function (prevOptions) { return (0, helpers_1.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 };
 };
 exports.useResolveSelectedOptions = useResolveSelectedOptions;

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

@@ -1,5 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATE_CHANGE_TYPE = exports.normalizeOptions = exports.arrayToGroupedOptions = exports.GroupedAsyncSelect = void 0;
 var tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./locale"), exports);
 (0, tslib_1.__exportStar)(require("./asyncSelect"), exports);
+var groupedAsyncSelect_1 = require("./groupedAsyncSelect");
+Object.defineProperty(exports, "GroupedAsyncSelect", { enumerable: true, get: function () { return groupedAsyncSelect_1.GroupedAsyncSelect; } });
+var helpers_1 = require("./helpers");
+Object.defineProperty(exports, "arrayToGroupedOptions", { enumerable: true, get: function () { return helpers_1.arrayToGroupedOptions; } });
+Object.defineProperty(exports, "normalizeOptions", { enumerable: true, get: function () { return helpers_1.normalizeOptions; } });
+var select_1 = require("../select");
+Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return select_1.STATE_CHANGE_TYPE; } });

package/asyncSelect/types.d.ts

@@ -2,27 +2,79 @@
  *  Created by Aneree on 03/11/20.
  */
 import { Dispatch, ReactNode, SetStateAction } from 'react';
-import { SelectProps, Option, Value } from '../select/types';
+import { SelectProps, Option, Value, OnChangeParams } from '../select/types';
 export declare type SetStateFunc<S> = Dispatch<SetStateAction<S>>;
-export declare type AllOptionsMap = Record<string | number, Option>;
+export declare type Id = string | number;
+export declare type AllOptionsMap = Record<Id, Option>;
+export declare type GroupedOptions = Record<string, Array<Option>>;
+export declare type LoadOptions = (input: string, groupFilters: {
+    group: string;
+    pageNumber: number;
+}[]) => Promise<{
+    groups: Array<{
+        group: string;
+        options: Array<Option>;
+        complete: boolean;
+        count?: number;
+    }>;
+}>;
+export declare type AsyncSelectValue = Array<Id | Option> | Value;
 /**
  * NOTE:
  *   AsyncSelect does not support select all option
  *   removed the support of these props in AsyncSelect
  */
-export declare type AsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' | 'hideSelectAll'> & {
-    loadOptions: (input: string, page: number) => Promise<{
-        options: Array<Option>;
-        complete: boolean;
-    }>;
+declare type BaseAsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' | 'hideSelectAll' | 'value' | 'onChange' | 'scrollContainer'> & {
     paginationBuffer?: number;
     searchingText?: ReactNode;
     minimumInput?: number;
     debounceInterval?: number;
-    initialOptions?: Array<Option>;
-    resolveSelectedOptions?: (unresolvedValueKeys: Array<string | number>) => Promise<Array<Option>>;
     loadOnFocus?: boolean;
     loadOnMount?: boolean;
     listenAllInputChanges?: boolean;
+    value?: AsyncSelectValue;
+    onChange?: (params: OnChangeParams & {
+        valueKeys: Id[];
+    }) => unknown;
+    resolveValuesOnUpdate?: boolean;
+    hideUnresolvedValues?: boolean;
+    moveSelectedOptionsToTop?: boolean;
+};
+export declare type AsyncSelectProps = BaseAsyncSelectProps & {
+    loadOptions: (input: string, page: number) => Promise<{
+        options: Array<Option>;
+        complete: boolean;
+    }>;
+    initialOptions?: Array<Option>;
+    resolveSelectedOptions?: (unresolvedValueKeys: Array<Id>) => Promise<Array<Option>>;
+};
+export declare type GroupConfig = Array<{
+    id: string;
+    label: string;
+}>;
+export declare type GroupedValue = Record<string, AsyncSelectValue>;
+export declare type GroupedAsyncSelectProps = Omit<BaseAsyncSelectProps, 'creatable' | 'onChange' | 'value'> & {
+    loadOptions: (input: string, groupFilters: Array<{
+        group: string;
+        pageNumber: number;
+    }>) => Promise<{
+        groups: {
+            group: string;
+            options: Array<Option>;
+            complete: boolean;
+            count?: number;
+        }[];
+    }>;
+    initialOptions?: Record<string, Array<Option>>;
+    groupConfig: GroupConfig;
+    initialExpandedCount?: number;
+    resolveSelectedOptions?: (groupVsUnresolvedValueKeys: Record<string, Array<Id>>) => Promise<GroupedOptions>;
+    value?: GroupedValue;
+    onChange?: (params: Omit<OnChangeParams, 'value'> & {
+        value: GroupedOptions;
+        valueKeys: Record<string, Id[]>;
+    }) => unknown;
+    showSelectAll?: boolean;
+    selectAllSelected?: boolean;
 };
 export type { Value, Option };

package/avatar/avatar.js

@@ -23,6 +23,16 @@ function getInitials(name) {
     var initials = words.map(function (word) { return word[0]; });
     return initials.slice(0, 2).join('').toUpperCase();
 }
+//If Image is already available in disk cache, then we should directly set isImageLoaded state to true, to avoid flicker between initials and avatar.
+var getIsImageLoaded = function (src) {
+    var isServer = typeof window === 'undefined';
+    if (!src || isServer) {
+        return false;
+    }
+    var imageEl = new Image();
+    imageEl.src = src;
+    return imageEl.complete;
+};
 var Icon = function (_a) {
     var overrides = _a.overrides, className = _a.className, props = (0, tslib_1.__rest)(_a, ["overrides", "className"]);
     var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.UserIcon, user_1.default), 2), UserIcon = _b[0], iconProps = _b[1];
@@ -30,8 +40,8 @@ var Icon = function (_a) {
 };
 var Avatar = function (props) {
     var _a = (0, tslib_1.__read)((0, react_1.useState)(null), 2), imageRef = _a[0], setImageRef = _a[1];
-    var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), imageLoaded = _b[0], setImageLoaded = _b[1];
-    var _c = props.shape, shape = _c === void 0 ? 'circle' : _c, _d = props.size, size = _d === void 0 ? 'md' : _d, className = props.className, color = props.color, allowPhoneInitials = props.allowPhoneInitials, name = props.name, overrides = props.overrides, initials = props.initials, src = props.src;
+    var _b = props.shape, shape = _b === void 0 ? 'circle' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, className = props.className, color = props.color, allowPhoneInitials = props.allowPhoneInitials, name = props.name, overrides = props.overrides, initials = props.initials, src = props.src;
+    var _d = (0, tslib_1.__read)((0, react_1.useState)(function () { return getIsImageLoaded(src); }), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
     var displayName = (0, cleanupDisplayName_1.cleanupDisplayName)(name);
     var randomBgColor = (0, useAvatarColor_1.useAvatarColor)(displayName);
     var isPhoneNumber = PHONENUMBER_REGEX.test(displayName);

package/avatar/styled-component.js

@@ -5,30 +5,15 @@ var tslib_1 = require("tslib");
 var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 exports.avatarSizeConfig = {
-    sm: { size: '24px', rectangleBorderRadius: '6px', fontSize: '8px' },
-    md: { size: '34px', rectangleBorderRadius: '8px', fontSize: '10px' },
-    lg: { size: '40px', rectangleBorderRadius: '8px', fontSize: '12px' },
-    xl: { size: '48px', rectangleBorderRadius: '8px', fontSize: '16px' },
-    xxl: { size: '84px', rectangleBorderRadius: '12px', fontSize: '16px' },
-    xxxl: { size: '96px', rectangleBorderRadius: '12px', fontSize: '16px' },
+    sm: { size: '24px', rectangleBorderRadius: '6px', fontSize: '12px' },
+    md: { size: '34px', rectangleBorderRadius: '8px', fontSize: '17px' },
+    lg: { size: '40px', rectangleBorderRadius: '8px', fontSize: '20px' },
+    xl: { size: '48px', rectangleBorderRadius: '8px', fontSize: '24px' },
+    xxl: { size: '84px', rectangleBorderRadius: '12px', fontSize: '42px' },
+    xxxl: { size: '96px', rectangleBorderRadius: '12px', fontSize: '48px' },
 };
 var getSizeConfig = function (size) { var _a; return (_a = exports.avatarSizeConfig[size]) !== null && _a !== void 0 ? _a : exports.avatarSizeConfig.md; };
-var getFontSize = function (size) {
-    if (size < 24)
-        return '8px';
-    else if (size < 36)
-        return '12px';
-    else if (size < 48)
-        return '16px';
-    else if (size < 60)
-        return '20px';
-    else if (size < 72)
-        return '24px';
-    else if (size < 84)
-        return '28px';
-    else
-        return '36px';
-};
+var getFontSize = function (size) { return "".concat(size / 2, "px"); };
 exports.StyledAvatarGroup = (0, styled_1.default)('div', 'flex');
 exports.StyledRoot = (0, styled_1.default)('div', 'box-border inline-block', function (_, _a) {
     var $shape = _a.$shape, $color = _a.$color, $didImageFailToLoad = _a.$didImageFailToLoad, $avatarSize = _a.$avatarSize, $size = _a.$size;

package/badge/styled-component.js

@@ -13,21 +13,23 @@ var sizeMap = {
     lg: '50%',
 };
 var isCustomContent = function (content) { return typeof content === 'function'; };
-var anchorOffset = function (_, _a) {
-    var $horizontalPosition = _a.$horizontalPosition, $verticalPosition = _a.$verticalPosition, $overlap = _a.$overlap;
+var anchorOffset = function (_a, _b) {
+    var isRTL = _a.isRTL;
+    var $horizontalPosition = _b.$horizontalPosition, $verticalPosition = _b.$verticalPosition, $overlap = _b.$overlap;
     var offset = $overlap === 'rectangle' ? 0 : '14%';
     var horizontalOffset = $horizontalPosition === 'left' ? { left: offset } : { right: offset };
     var verticalOffset = $verticalPosition === 'top' ? { top: offset } : { bottom: offset };
+    var rtlHorizontalPosition = isRTL ? ($horizontalPosition === 'right' ? 'left' : 'right') : $horizontalPosition;
     var transform = $verticalPosition === 'top'
         ? {
-            transform: $horizontalPosition === 'left'
-                ? 'translate(calc(-100% + min(1rem, 50%)), -50%)' // min of 1rem( for large elements ) and 50%( for small elements )
-                : 'translate(calc(100% - min(1rem, 50%)), -50%)',
+            transform: rtlHorizontalPosition === 'left'
+                ? 'translate(calc(-100% + min(1rem, 50%)), -50%) /* @noflip */' // min of 1rem( for large elements ) and 50%( for small elements )
+                : 'translate(calc(100% - min(1rem, 50%)), -50%) /* @noflip */',
         }
         : {
-            transform: $horizontalPosition === 'left'
-                ? 'translate(calc(-100% + min(1rem, 50%)), 50%)'
-                : 'translate(calc(100% - min(1rem, 50%)), 50%)',
+            transform: rtlHorizontalPosition === 'left'
+                ? 'translate(calc(-100% + min(1rem, 50%)), 50%) /* @noflip */'
+                : 'translate(calc(100% - min(1rem, 50%)), 50%) /* @noflip */',
         };
     return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, horizontalOffset), verticalOffset), transform);
 };

package/banner/banner.js

@@ -30,7 +30,7 @@ function Icon(_a) {
         },
     };
     var _c = intentToIconMap[intent], BaseIcon = _c.BaseIcon, prop = _c.prop;
-    return (0, jsx_runtime_1.jsx)(BaseIcon, (0, tslib_1.__assign)({ className: ['mr-1.5', prop, className] }, restProps, { size: 14 }), void 0);
+    return (0, jsx_runtime_1.jsx)(BaseIcon, (0, tslib_1.__assign)({ className: ['mr-1.5 flex-shrink-0', prop, className] }, restProps, { size: 14 }), void 0);
 }
 function BaseToggleButton(_a) {
     var show = _a.show, className = _a.className, onToggle = _a.onToggle, props = (0, tslib_1.__rest)(_a, ["show", "className", "onToggle"]);

package/breadcrumb/breadcrumb-item.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BreadcrumbItemProps } from './types';
+declare const BreadcrumbItem: {
+    ({ children, isLastChild, overrides, onClick, index, startEnhancer, endEnhancer, separator, gap, ...restProps }: BreadcrumbItemProps): JSX.Element;
+    displayName: string;
+};
+export default BreadcrumbItem;

package/breadcrumb/breadcrumb-item.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var typography_1 = require("../typography");
+var link_1 = require("../link");
+var styled_components_1 = require("./styled-components");
+var overrides_1 = require("../overrides");
+var breadcrumbItemOverrides = {
+    Link: {
+        style: [
+            'inline-flex text-16 leading-10',
+            function (_, _a) {
+                var $isLastChild = _a.$isLastChild;
+                return !$isLastChild ? { color: 'inherit', ':focus': { textDecoration: 'underline' } } : {};
+            },
+        ],
+    },
+};
+var BreadcrumbItem = function (_a) {
+    var children = _a.children, _b = _a.isLastChild, isLastChild = _b === void 0 ? false : _b, overrides = _a.overrides, _c = _a.onClick, onClick = _c === void 0 ? noop_1.default : _c, _d = _a.index, index = _d === void 0 ? 0 : _d, startEnhancer = _a.startEnhancer, endEnhancer = _a.endEnhancer, _e = _a.separator, separator = _e === void 0 ? styled_components_1.DEFAULT_SEPARATOR : _e, _f = _a.gap, gap = _f === void 0 ? 4 : _f, restProps = (0, tslib_1.__rest)(_a, ["children", "isLastChild", "overrides", "onClick", "index", "startEnhancer", "endEnhancer", "separator", "gap"]);
+    var sharedProps = {
+        $gap: gap,
+        $withStartEnhancer: !!startEnhancer,
+        $withEndEnhancer: !!endEnhancer,
+        $isLastChild: isLastChild,
+    };
+    var mergedOverrides = (0, overrides_1.mergeOverrides)(breadcrumbItemOverrides, overrides);
+    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.ListItem, styled_components_1.StyledListItem), 2), ListItem = _g[0], listItemProps = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.Link, !isLastChild ? link_1.Link : typography_1.Typography), 2), LinkOverride = _h[0], linkOverrideProps = _h[1];
+    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.StartEnhancer, styled_components_1.StyledStartEnhancer), 2), StartEnhancer = _j[0], startEnhancerProps = _j[1];
+    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(mergedOverrides === null || mergedOverrides === void 0 ? void 0 : mergedOverrides.EndEnhancer, styled_components_1.StyledEndEnhancer), 2), EndEnhancer = _k[0], endEnhancerProps = _k[1];
+    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Separator, styled_components_1.StyledSeparator), 2), BreadcrumbSeparator = _l[0], separatorWrapperProps = _l[1];
+    var renderEnhancer = function (enhancer) {
+        return typeof enhancer === 'function' ? enhancer(sharedProps) : enhancer;
+    };
+    return ((0, jsx_runtime_1.jsxs)(ListItem, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-list-item-".concat(index) }, sharedProps, listItemProps, { children: [(0, jsx_runtime_1.jsxs)(LinkOverride, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-link-".concat(index), onClick: function (e) { return onClick(e, index); } }, sharedProps, restProps, linkOverrideProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-startenhancer-".concat(index) }, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), children, endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-endenhancer-".concat(index) }, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0), !isLastChild && ((0, jsx_runtime_1.jsx)(BreadcrumbSeparator, (0, tslib_1.__assign)({ "data-testid": "breadcrumb-item-separator-".concat(index), "aria-hidden": true }, sharedProps, separatorWrapperProps, { children: separator }), void 0))] }), void 0));
+};
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+exports.default = BreadcrumbItem;

package/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BreadcrumbProps } from './types';
+declare const Breadcrumb: {
+    ({ children, separator, gap, overrides, }: BreadcrumbProps): JSX.Element;
+    displayName: string;
+};
+export default Breadcrumb;