@sprinklrjs/spaceweb 10.1.0

package/allComponentsAndUtilities.d.ts

@@ -0,0 +1,55 @@
+/**
+NOTE: This file is only for size tooling.
+Do not import anything from this module!
+**/
+export * from './index';
+export * as Avatar from './avatar';
+export * as Badge from './badge';
+export * as BaseButton from './base-button';
+export * as Box from './box';
+export * as Button from './button';
+export * as ButtonGroup from './button-group';
+export * as Checkbox from './checkbox';
+export * as ClassNames from './classNames';
+export * as Col from './col';
+export * as DatePicker from './date-picker';
+export * as FormControl from './form-control';
+export * as Grid from './grid';
+export * as Helpers from './helpers';
+export * as useCombinedHandler from './hooks/useCombinedHandler';
+export * as useCombinedRef from './hooks/useCombinedRef';
+export * from './hooks/useFocusVisible';
+export * as Icons from './icon';
+export * as Image from './image';
+export * as Input from './input';
+export * as Link from './link';
+export * as List from './list';
+export * as Loader from './loader';
+export * as Menu from './menu';
+export * as Modal from './modal';
+export * as Overrides from './overrides';
+export * as Popover from './popover';
+export * as Radio from './radio';
+export * as Search from './search';
+export * as Select from './select';
+export * as Slider from './slider';
+export * as Snackbar from './snackbar';
+export * as SpaceConsumer from './spaceConsumer';
+export * as SpacewebProvider from './spacewebProvider';
+export * as Stack from './stack';
+export * as Style from './style';
+export * as StyleEngine from './styleEngine';
+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';
+export * as Tooltip from './tooltip';
+export * as Typography from './typography';
+export * as Video from './video';
+export * as PaymentCard from './payment-card';
+export * as PhoneInput from './phone-input';
+export * as DateInput from './date-input';

package/allComponentsAndUtilities.js

@@ -0,0 +1,59 @@
+"use strict";
+/**
+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;
+var tslib_1 = require("tslib");
+(0, tslib_1.__exportStar)(require("./index"), exports);
+exports.Avatar = (0, tslib_1.__importStar)(require("./avatar"));
+exports.Badge = (0, tslib_1.__importStar)(require("./badge"));
+exports.BaseButton = (0, tslib_1.__importStar)(require("./base-button"));
+exports.Box = (0, tslib_1.__importStar)(require("./box"));
+exports.Button = (0, tslib_1.__importStar)(require("./button"));
+exports.ButtonGroup = (0, tslib_1.__importStar)(require("./button-group"));
+exports.Checkbox = (0, tslib_1.__importStar)(require("./checkbox"));
+exports.ClassNames = (0, tslib_1.__importStar)(require("./classNames"));
+exports.Col = (0, tslib_1.__importStar)(require("./col"));
+exports.DatePicker = (0, tslib_1.__importStar)(require("./date-picker"));
+exports.FormControl = (0, tslib_1.__importStar)(require("./form-control"));
+exports.Grid = (0, tslib_1.__importStar)(require("./grid"));
+exports.Helpers = (0, tslib_1.__importStar)(require("./helpers"));
+exports.useCombinedHandler = (0, tslib_1.__importStar)(require("./hooks/useCombinedHandler"));
+exports.useCombinedRef = (0, tslib_1.__importStar)(require("./hooks/useCombinedRef"));
+(0, tslib_1.__exportStar)(require("./hooks/useFocusVisible"), exports);
+exports.Icons = (0, tslib_1.__importStar)(require("./icon"));
+exports.Image = (0, tslib_1.__importStar)(require("./image"));
+exports.Input = (0, tslib_1.__importStar)(require("./input"));
+exports.Link = (0, tslib_1.__importStar)(require("./link"));
+exports.List = (0, tslib_1.__importStar)(require("./list"));
+exports.Loader = (0, tslib_1.__importStar)(require("./loader"));
+exports.Menu = (0, tslib_1.__importStar)(require("./menu"));
+exports.Modal = (0, tslib_1.__importStar)(require("./modal"));
+exports.Overrides = (0, tslib_1.__importStar)(require("./overrides"));
+exports.Popover = (0, tslib_1.__importStar)(require("./popover"));
+exports.Radio = (0, tslib_1.__importStar)(require("./radio"));
+exports.Search = (0, tslib_1.__importStar)(require("./search"));
+exports.Select = (0, tslib_1.__importStar)(require("./select"));
+exports.Slider = (0, tslib_1.__importStar)(require("./slider"));
+exports.Snackbar = (0, tslib_1.__importStar)(require("./snackbar"));
+exports.SpaceConsumer = (0, tslib_1.__importStar)(require("./spaceConsumer"));
+exports.SpacewebProvider = (0, tslib_1.__importStar)(require("./spacewebProvider"));
+exports.Stack = (0, tslib_1.__importStar)(require("./stack"));
+exports.Style = (0, tslib_1.__importStar)(require("./style"));
+exports.StyleEngine = (0, tslib_1.__importStar)(require("./styleEngine"));
+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"));
+exports.Tooltip = (0, tslib_1.__importStar)(require("./tooltip"));
+exports.Typography = (0, tslib_1.__importStar)(require("./typography"));
+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"));

package/asyncSelect/asyncSelect.d.ts

@@ -0,0 +1,7 @@
+/**
+ *  Created by Aneree on 03/11/20.
+ */
+import { ReactElement } from 'react';
+import { AsyncSelectProps } from './types';
+declare const AsyncSelect: (props: React.PropsWithChildren<AsyncSelectProps>) => ReactElement;
+export { AsyncSelect };

package/asyncSelect/asyncSelect.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AsyncSelect = void 0;
+var tslib_1 = require("tslib");
+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 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;
+        });
+    }, 
+    // 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 } },
+            }
+            : {
+                //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));
+};
+exports.AsyncSelect = AsyncSelect;

package/asyncSelect/helpers.d.ts

@@ -0,0 +1,17 @@
+/**
+ *  Created by Aneree on 10/12/20.
+ */
+import { RefObject } from 'react';
+import * as React from 'react';
+import { AllOptionsMap, Option } from './types';
+export declare const getNoResultsMsg: ({ isLoading, minimumInput, inputText, noResultsMsg, searchingText, emptyInputMsg, }: {
+    isLoading: boolean;
+    minimumInput: number;
+    inputText: string;
+    noResultsMsg?: React.ReactNode;
+    searchingText: string;
+    emptyInputMsg: string;
+}) => 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;

package/asyncSelect/helpers.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInputValue = exports.addOptionsInMap = exports.shouldPaginate = exports.getNoResultsMsg = void 0;
+var tslib_1 = require("tslib");
+var getNoResultsMsg = function (_a) {
+    var isLoading = _a.isLoading, minimumInput = _a.minimumInput, inputText = _a.inputText, noResultsMsg = _a.noResultsMsg, searchingText = _a.searchingText, emptyInputMsg = _a.emptyInputMsg;
+    if (isLoading) {
+        return searchingText;
+    }
+    //todo: Add locale support
+    if (minimumInput > 0 && inputText.length < minimumInput) {
+        return "Type at least ".concat(minimumInput, " characters to search");
+    }
+    return inputText ? noResultsMsg : emptyInputMsg;
+};
+exports.getNoResultsMsg = getNoResultsMsg;
+var shouldPaginate = function (element, paginationBuffer) {
+    if (paginationBuffer === void 0) { paginationBuffer = 50; }
+    return element.scrollHeight > element.clientHeight &&
+        element.scrollTop >= element.scrollHeight - element.clientHeight - paginationBuffer;
+};
+exports.shouldPaginate = shouldPaginate;
+var addOptionsInMap = function (optionsMap, options, valueKey) {
+    var newOptions = 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);
+        //Not re-setting options that are already present in the map to prevent their reference from changing
+        newOptions.forEach(function (option) {
+            newOptionsMap_1[option[valueKey]] = option;
+        });
+        return newOptionsMap_1;
+    }
+    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

@@ -0,0 +1,28 @@
+/**
+ *  Created by Aneree on 15/01/21.
+ */
+import { MutableRefObject } from 'react';
+import { Option, OptionsT } from '../../select';
+import { SetStateFunc, AllOptionsMap, AsyncSelectProps } from '../types';
+interface UseAsyncOptionHandlersArgs {
+    valueKey: string;
+    isLoading: boolean;
+    minimumInput: number;
+    paginationBuffer?: number;
+    inputRef: MutableRefObject<HTMLInputElement | null>;
+    setIsLoading: SetStateFunc<boolean>;
+    setOptions: SetStateFunc<Array<Option>>;
+    setAllOptionsMap: SetStateFunc<AllOptionsMap>;
+    loadOptions: (input: string, page: number) => Promise<{
+        options: Array<Option>;
+        complete: boolean;
+    }>;
+    createOption: AsyncSelectProps['createOption'];
+}
+declare const useAsyncOptionHandlers: ({ inputRef, valueKey, isLoading, setOptions, loadOptions, minimumInput, setIsLoading, paginationBuffer, setAllOptionsMap, createOption: propsCreateOption, }: UseAsyncOptionHandlersArgs) => {
+    onPaginate: (event: any) => void;
+    onInputChange: () => void;
+    fetchOptions: (pageNumber: number) => Promise<void>;
+    createOption: ((label: string) => Promise<OptionsT>) | undefined;
+};
+export { useAsyncOptionHandlers };

package/asyncSelect/hooks/useAsyncOptionHandlers.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsyncOptionHandlers = void 0;
+var tslib_1 = require("tslib");
+/**
+ *  Created by Aneree on 15/01/21.
+ */
+var react_1 = require("react");
+//hooks
+var useLatest_1 = require("../../hooks/useLatest");
+//helpers
+var helpers_1 = require("../helpers");
+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 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;
+        return (0, tslib_1.__generator)(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    timeoutId = setTimeout(function () { return setIsLoading(true); }, 500);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, , 3, 4]);
+                    return [4 /*yield*/, loadOptionsRef.current((0, helpers_1.getInputValue)(inputRef), pageNumber)];
+                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); });
+                    //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;
+                    return [3 /*break*/, 4];
+                case 3:
+                    clearTimeout(timeoutId);
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    var onPaginate = (0, react_1.useCallback)(function (event) {
+        if (!isLoading &&
+            !isPaginatingRef.current &&
+            !completeRef.current &&
+            (0, helpers_1.shouldPaginate)(event.target, paginationBufferRef.current)) {
+            isPaginatingRef.current = true;
+            fetchOptions(pageRef.current + 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;
+            return;
+        }
+        fetchOptions(0);
+    }, [fetchOptions]);
+    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';
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, propsCreateOption(label)];
+                case 2:
+                    createdOptions = _a.sent();
+                    return [2 /*return*/, createdOptions];
+                case 3:
+                    err_1 = _a.sent();
+                    throw err_1;
+                case 4:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, [propsCreateOption, setIsLoading]);
+    return {
+        onPaginate: onPaginate,
+        onInputChange: onInputChange,
+        fetchOptions: fetchOptions,
+        createOption: propsCreateOption ? createOption : undefined,
+    };
+};
+exports.useAsyncOptionHandlers = useAsyncOptionHandlers;

package/asyncSelect/hooks/useInputChangeHandler.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AsyncSelectProps } from '../types';
+declare type InputEventHandler = React.FormEventHandler<HTMLInputElement>;
+declare type OnInputChange = AsyncSelectProps['onInputChange'];
+interface UseInputChangeHandlerArgs {
+    inputElement: HTMLInputElement | null;
+    listenAllInputChanges: boolean;
+    debounceInterval?: number;
+    onInputChange: OnInputChange;
+    inputChangeHandlerToDebounce: InputEventHandler;
+}
+declare const useInputChangeHandler: ({ inputElement, listenAllInputChanges, onInputChange, inputChangeHandlerToDebounce, debounceInterval, }: UseInputChangeHandlerArgs) => OnInputChange;
+export { useInputChangeHandler };

package/asyncSelect/hooks/useInputChangeHandler.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputChangeHandler = void 0;
+/**
+ *  Created by Aneree on 22/04/21.
+ */
+var react_1 = require("react");
+//hooks
+var useLatest_1 = require("../../hooks/useLatest");
+var useDebouncedEventHandler_1 = require("../../hooks/useDebouncedEventHandler");
+var EMPTY_OBJECT = {};
+var useInputChangeHandler = function (_a) {
+    // When listenAllInputChanges is true, we want to listen to all the setStates of input value
+    // triggered within baseweb/select (achieved using mutation observer). In such a scenario, we don't want to trigger
+    // onInputChange received from props on input value changes that are not made by user.
+    // When listenAllInputChanges is false, we just want to intercept the input changes made by user and also propagate
+    // the same to consumers of AsyncSelect by invoking onInputChange from props
+    var inputElement = _a.inputElement, listenAllInputChanges = _a.listenAllInputChanges, onInputChange = _a.onInputChange, inputChangeHandlerToDebounce = _a.inputChangeHandlerToDebounce, debounceInterval = _a.debounceInterval;
+    var onDebouncedInputChange = (0, useDebouncedEventHandler_1.useDebouncedEventHandler)(inputChangeHandlerToDebounce, listenAllInputChanges ? undefined : onInputChange, debounceInterval);
+    var onDebouncedInputChangeRef = (0, useLatest_1.useLatest)(onDebouncedInputChange);
+    (0, react_1.useEffect)(function () {
+        if (listenAllInputChanges && inputElement) {
+            var observer_1 = new MutationObserver(function (mutations) {
+                mutations.forEach(function (mutation) {
+                    if (mutation.type === 'attributes') {
+                        onDebouncedInputChangeRef.current(EMPTY_OBJECT);
+                    }
+                });
+            });
+            observer_1.observe(inputElement, {
+                attributeFilter: ['value'],
+            });
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+    }, [inputElement, listenAllInputChanges]);
+    return listenAllInputChanges ? onInputChange : onDebouncedInputChange;
+};
+exports.useInputChangeHandler = useInputChangeHandler;

package/asyncSelect/hooks/useResolveSelectedOptions.d.ts

@@ -0,0 +1,18 @@
+/**
+ *  Created by Aneree on 15/01/21.
+ */
+import { MutableRefObject } from 'react';
+import { Option, Value } from '../../select';
+import { SetStateFunc, AllOptionsMap } from '../types';
+interface UseResolveSelectedOptionsArgs {
+    value?: Value;
+    valueKey: string;
+    allOptionsMap: AllOptionsMap;
+    resolveSelectedOptions?: (unresolvedValueKeys: Array<string | number>) => Promise<Array<Option>>;
+    inputRef: MutableRefObject<HTMLInputElement | null>;
+    setIsLoading: SetStateFunc<boolean>;
+    setOptions: SetStateFunc<Array<Option>>;
+    setAllOptionsMap: SetStateFunc<AllOptionsMap>;
+}
+declare const useResolveSelectedOptions: ({ value, valueKey, allOptionsMap, resolveSelectedOptions, inputRef, setIsLoading, setOptions, setAllOptionsMap, }: UseResolveSelectedOptionsArgs) => void;
+export { useResolveSelectedOptions };

package/asyncSelect/hooks/useResolveSelectedOptions.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResolveSelectedOptions = void 0;
+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"));
+//hooks
+var useLatest_1 = require("../../hooks/useLatest");
+//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*/];
+            }
+        });
+    }); }, []);
+    (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);
+            }
+        }
+    }, []);
+};
+exports.useResolveSelectedOptions = useResolveSelectedOptions;

package/asyncSelect/index.d.ts

@@ -0,0 +1,3 @@
+export type { Value, Option, AsyncSelectProps } from './types';
+export * from './locale';
+export * from './asyncSelect';

package/asyncSelect/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+(0, tslib_1.__exportStar)(require("./locale"), exports);
+(0, tslib_1.__exportStar)(require("./asyncSelect"), exports);

package/asyncSelect/locale.d.ts

@@ -0,0 +1,7 @@
+/**
+ *  Created by Aneree on 10/12/20.
+ */
+export interface AsyncSelectLocale {
+    searchingText: string;
+    emptyInputMsg: string;
+}

package/asyncSelect/locale.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/asyncSelect/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/asyncSelect/index.js"
+}

package/asyncSelect/types.d.ts

@@ -0,0 +1,29 @@
+/**
+ *  Created by Aneree on 03/11/20.
+ */
+import { Dispatch, MutableRefObject, RefCallback, SetStateAction } from 'react';
+import { SelectProps, Option, Value } from '../select/types';
+export declare type SetStateFunc<S> = Dispatch<SetStateAction<S>>;
+export declare type AllOptionsMap = Record<string | number, Option>;
+/**
+ * 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' | 'controlRef'> & {
+    loadOptions: (input: string, page: number) => Promise<{
+        options: Array<Option>;
+        complete: boolean;
+    }>;
+    paginationBuffer?: number;
+    searchingText?: string;
+    minimumInput?: number;
+    debounceInterval?: number;
+    initialOptions?: Array<Option>;
+    resolveSelectedOptions?: (unresolvedValueKeys: Array<string | number>) => Promise<Array<Option>>;
+    loadOnFocus?: boolean;
+    loadOnMount?: boolean;
+    controlRef?: MutableRefObject<HTMLInputElement> | RefCallback<HTMLInputElement> | null;
+    listenAllInputChanges?: boolean;
+};
+export type { Value, Option };

package/asyncSelect/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });