@sprinklrjs/spaceweb 10.1.0

package/date-picker/types.d.ts

@@ -0,0 +1,104 @@
+/// <reference types="react" />
+import { CalendarProps as BaseCalendarProps, DatepickerProps as BaseDatepickerProps, SharedStylePropsT } from 'baseui/datepicker';
+import { TimePickerProps } from '../time-picker';
+import { InputSize, InputVariant } from '../input';
+import { Override } from '../overrides/types';
+import { Intent } from '../types';
+export declare type FormatString = string;
+export declare type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export declare type CalendarProps = Omit<BaseCalendarProps, 'overrides'> & {
+    formatString?: FormatString;
+    overrides?: DatepickerOverrides;
+    adapter?: any;
+    weekStartsOn?: WeekStartsOn;
+};
+export declare type TimeSelect = 'start' | 'end';
+export declare type DateTimeSelectSharedProps = {
+    $timeSelect: TimeSelect;
+};
+export declare type DatepickerOverrides<T = SharedStyleProps> = {
+    CalendarContainer?: Override<T>;
+    CalendarHeader?: Override<T>;
+    Day?: Override<T>;
+    Input?: Override<T>;
+    InputWrapper?: Override<T>;
+    Month?: Override<T>;
+    MonthContainer?: Override<T>;
+    MonthHeader?: Override<T>;
+    MonthYearSelectButton?: Override<T>;
+    MonthYearSelectIconContainer?: Override<T>;
+    MonthYearSelectPopover?: Override<T>;
+    MonthYearSelectStatefulMenu?: Override<T>;
+    NextButton?: Override<T>;
+    NextButtonIcon?: Override<T>;
+    Popover?: Override<T>;
+    PrevButton?: Override<T>;
+    PrevButtonIcon?: Override<T>;
+    Root?: Override<T>;
+    TimePicker?: Override<TimePickerProps & Record<string, any>>;
+    TimePickerFormControl?: Override<Record<string, any>>;
+    DateInputFormControl?: Override<Record<string, any>>;
+    Week?: Override<T>;
+    WeekdayHeader?: Override<T>;
+    Footer?: Override<T>;
+    DateTimeSelect?: Override<DateTimeSelectSharedProps>;
+};
+export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSelectStart' | 'timeSelectEnd' | 'value' | 'onChange' | 'quickSelect' | 'quickSelectOptions' | 'size' | 'overrides' | 'onDayClick' | 'onDayMouseOver' | 'onDayMouseLeave' | 'onMonthChange' | 'onYearChange' | 'formatString' | 'peekNextMonth' | 'fixedHeight'> & {
+    intent?: Intent;
+    timeSelect?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    adapter?: any;
+    isOpen?: boolean;
+    variant?: InputVariant;
+    value: Date | Date[] | undefined;
+    onChange?: (data: {
+        value?: (Date | undefined)[] | Date | null;
+    }) => any;
+    size?: InputSize;
+    overrides?: DatepickerOverrides;
+    autoSizeInput?: boolean;
+    formatString?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * @deprecated This will be removed in next major release. Spaceweb will handle this prop.
+     */
+    peekNextMonth?: boolean;
+    /**
+     * @deprecated This will be removed in next major release. Spaceweb will handle this prop.
+     */
+    fixedHeight?: boolean;
+};
+export declare type StatefulContainerProps = {
+    children: (props: StatelessDatePickerProps) => JSX.Element;
+    adapter?: any;
+    value?: Date;
+    onChange?: (data: {
+        value?: Date | undefined | null;
+    }) => any;
+    startOpen?: boolean;
+};
+export declare type DatePickerProps = Omit<StatelessDatePickerProps, 'value' | 'range'> & Omit<StatefulContainerProps, 'children'>;
+export declare type DatePickerSharedProps = SharedStylePropsT;
+export declare type SharedStyleProps = {
+    $date: Date;
+    $disabled?: boolean;
+    $endDate?: boolean;
+    $endOfMonth?: boolean;
+    $hasRangeHighlighted?: boolean;
+    $hasRangeOnRight?: boolean;
+    $hasRangeSelected?: boolean;
+    $isFocusVisible?: boolean;
+    $isHighlighted?: boolean;
+    $isHovered?: boolean;
+    $outsideMonth?: boolean;
+    $peekNextMonth?: boolean;
+    $pseudoHighlighted?: boolean;
+    $pseudoSelected?: boolean;
+    $range?: boolean;
+    $selected?: boolean;
+    $startDate?: boolean;
+    $startOfMonth?: boolean;
+    $outsideMonthWithinRange?: boolean;
+    $month?: number;
+};

package/date-picker/types.js

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

package/date-picker/useDatePickerState.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare type UseDatePickerStateType = {
+    onClose?: () => void;
+    onOpen?: () => void;
+    startOpen?: boolean;
+};
+export declare const useDatePickerState: ({ onClose, onOpen, startOpen }?: UseDatePickerStateType) => {
+    isOpen: boolean | undefined;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
+    handleOpen: () => void;
+    handleClose: () => void;
+};
+export {};

package/date-picker/useDatePickerState.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDatePickerState = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useDatePickerState = function (_a) {
+    var _b = _a === void 0 ? {} : _a, onClose = _b.onClose, onOpen = _b.onOpen, startOpen = _b.startOpen;
+    var _c = (0, tslib_1.__read)((0, react_1.useState)(startOpen), 2), isOpen = _c[0], setIsOpen = _c[1];
+    var handleOpen = (0, react_1.useCallback)(function () {
+        setIsOpen(true);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    }, [setIsOpen, onOpen]);
+    var handleClose = (0, react_1.useCallback)(function () {
+        setIsOpen(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [setIsOpen, onClose]);
+    return {
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        handleOpen: handleOpen,
+        handleClose: handleClose,
+    };
+};
+exports.useDatePickerState = useDatePickerState;

package/date-picker/utils.d.ts

@@ -0,0 +1,24 @@
+import { Locale } from '../locale';
+interface FormatDateParams {
+    date: Date | Date[] | undefined;
+    formatString?: string;
+    locale: any;
+    dateHelpers?: any;
+}
+export declare const normalizeDashes: (formatString: string) => string;
+export declare const formatDate: (params: FormatDateParams) => any;
+export declare const getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[] | undefined) => string | undefined, locale: Locale) => string;
+export declare const prepareLocale: (locale?: globalThis.Locale, options?: {
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+} | undefined) => any;
+export declare const isTimeInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+    dateHelpers?: any;
+}) => boolean;
+export declare const isDayInRange: (date: Date | Date[] | null | undefined, { minDate, maxDate, dateHelpers, }: {
+    minDate?: Date | undefined;
+    maxDate?: Date | undefined;
+    dateHelpers?: any;
+}) => boolean;
+export {};

package/date-picker/utils.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDayInRange = exports.isTimeInRange = exports.prepareLocale = exports.getAriaLabel = exports.formatDate = exports.normalizeDashes = void 0;
+var tslib_1 = require("tslib");
+var en_US_1 = (0, tslib_1.__importDefault)(require("date-fns/locale/en-US"));
+var i18n_interpolation_1 = (0, tslib_1.__importDefault)(require("baseui/helpers/i18n-interpolation"));
+var date_helpers_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-helpers"));
+var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
+var constants_1 = require("./constants");
+// replacing both hyphens and em-dashes with en-dashes
+var normalizeDashes = function (formatString) { return formatString.replace(/-/g, '–').replace(/—/g, '–'); };
+exports.normalizeDashes = normalizeDashes;
+var formatDate = function (params) {
+    var date = params.date;
+    var formatString = params.formatString || (0, exports.normalizeDashes)(constants_1.DEFAULT_FORMAT_STRING);
+    var dateHelpers = params.dateHelpers || new date_helpers_1.default(date_fns_adapter_1.default);
+    var locale = params.locale;
+    var format = function (dateToFormat) { return dateHelpers.formatDate(dateToFormat, formatString, locale); };
+    if (!date) {
+        return '';
+    }
+    if (Array.isArray(date) && !date[0] && !date[1]) {
+        return '';
+    }
+    if (Array.isArray(date)) {
+        return date.map(function (day) { return format(day); }).join(' – ');
+    }
+    return format(date);
+};
+exports.formatDate = formatDate;
+var getAriaLabel = function (value, formatDisplayValue, locale) {
+    // No date selected
+    if (!value || (Array.isArray(value) && !value.length)) {
+        return '';
+    }
+    // Date selected in a non-range picker
+    if (!Array.isArray(value)) {
+        return (0, i18n_interpolation_1.default)(locale.timeRangePicker.selectedDate, {
+            date: formatDisplayValue(value) || '',
+        });
+    }
+    // Start and end dates are selected in a range picker
+    if (value.length > 1) {
+        return (0, i18n_interpolation_1.default)(locale.timeRangePicker.selectedDateRange, {
+            startDate: formatDisplayValue(value[0]),
+            endDate: formatDisplayValue(value[1]),
+        });
+    }
+    // A single date selected in a range picker
+    return "".concat((0, i18n_interpolation_1.default)(locale.timeRangePicker.selectedDate, {
+        date: formatDisplayValue(value[0]),
+    }), " ").concat(locale.timeRangePicker.selectSecondDatePrompt);
+};
+exports.getAriaLabel = getAriaLabel;
+var prepareLocale = function (locale, options) {
+    if (locale === void 0) { locale = en_US_1.default; }
+    return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, locale), { options: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, locale.options), ((options === null || options === void 0 ? void 0 : options.weekStartsOn) !== undefined && { weekStartsOn: options.weekStartsOn })) }));
+};
+exports.prepareLocale = prepareLocale;
+// checks whether given date(both day & time) is in [minDate, maxDate] range.
+var isTimeInRange = function (date, _a) {
+    var minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.dateHelpers, dateHelpers = _b === void 0 ? new date_helpers_1.default(date_fns_adapter_1.default) : _b;
+    if (!date) {
+        return true;
+    }
+    if (Array.isArray(date)) {
+        return date.every(function (_date) { return (!minDate || !dateHelpers.isBefore(_date, minDate)) && (!maxDate || !dateHelpers.isAfter(_date, maxDate)); });
+    }
+    return (!minDate || !dateHelpers.isBefore(date, minDate)) && (!maxDate || !dateHelpers.isAfter(date, maxDate));
+};
+exports.isTimeInRange = isTimeInRange;
+// checks whether given date(only day) is in [minDate, maxDate] range.
+var isDayInRange = function (date, _a) {
+    var minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.dateHelpers, dateHelpers = _b === void 0 ? new date_helpers_1.default(date_fns_adapter_1.default) : _b;
+    if (!date) {
+        return true;
+    }
+    if (Array.isArray(date)) {
+        return date.every(function (_date) { return !dateHelpers.isDayDisabled(_date, { minDate: minDate, maxDate: maxDate }); });
+    }
+    return !dateHelpers.isDayDisabled(date, { minDate: minDate, maxDate: maxDate });
+};
+exports.isDayInRange = isDayInRange;

package/esm/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/esm/allComponentsAndUtilities.js

@@ -0,0 +1,104 @@
+/**
+NOTE: This file is only for size tooling.
+Do not import anything from this module!
+**/
+export * from './index';
+import * as Avatar_1 from './avatar';
+export { Avatar_1 as Avatar };
+import * as Badge_1 from './badge';
+export { Badge_1 as Badge };
+import * as BaseButton_1 from './base-button';
+export { BaseButton_1 as BaseButton };
+import * as Box_1 from './box';
+export { Box_1 as Box };
+import * as Button_1 from './button';
+export { Button_1 as Button };
+import * as ButtonGroup_1 from './button-group';
+export { ButtonGroup_1 as ButtonGroup };
+import * as Checkbox_1 from './checkbox';
+export { Checkbox_1 as Checkbox };
+import * as ClassNames_1 from './classNames';
+export { ClassNames_1 as ClassNames };
+import * as Col_1 from './col';
+export { Col_1 as Col };
+import * as DatePicker_1 from './date-picker';
+export { DatePicker_1 as DatePicker };
+import * as FormControl_1 from './form-control';
+export { FormControl_1 as FormControl };
+import * as Grid_1 from './grid';
+export { Grid_1 as Grid };
+import * as Helpers_1 from './helpers';
+export { Helpers_1 as Helpers };
+import * as useCombinedHandler_1 from './hooks/useCombinedHandler';
+export { useCombinedHandler_1 as useCombinedHandler };
+import * as useCombinedRef_1 from './hooks/useCombinedRef';
+export { useCombinedRef_1 as useCombinedRef };
+export * from './hooks/useFocusVisible';
+import * as Icons_1 from './icon';
+export { Icons_1 as Icons };
+import * as Image_1 from './image';
+export { Image_1 as Image };
+import * as Input_1 from './input';
+export { Input_1 as Input };
+import * as Link_1 from './link';
+export { Link_1 as Link };
+import * as List_1 from './list';
+export { List_1 as List };
+import * as Loader_1 from './loader';
+export { Loader_1 as Loader };
+import * as Menu_1 from './menu';
+export { Menu_1 as Menu };
+import * as Modal_1 from './modal';
+export { Modal_1 as Modal };
+import * as Overrides_1 from './overrides';
+export { Overrides_1 as Overrides };
+import * as Popover_1 from './popover';
+export { Popover_1 as Popover };
+import * as Radio_1 from './radio';
+export { Radio_1 as Radio };
+import * as Search_1 from './search';
+export { Search_1 as Search };
+import * as Select_1 from './select';
+export { Select_1 as Select };
+import * as Slider_1 from './slider';
+export { Slider_1 as Slider };
+import * as Snackbar_1 from './snackbar';
+export { Snackbar_1 as Snackbar };
+import * as SpaceConsumer_1 from './spaceConsumer';
+export { SpaceConsumer_1 as SpaceConsumer };
+import * as SpacewebProvider_1 from './spacewebProvider';
+export { SpacewebProvider_1 as SpacewebProvider };
+import * as Stack_1 from './stack';
+export { Stack_1 as Stack };
+import * as Style_1 from './style';
+export { Style_1 as Style };
+import * as StyleEngine_1 from './styleEngine';
+export { StyleEngine_1 as StyleEngine };
+import * as Switch_1 from './switch';
+export { Switch_1 as Switch };
+import * as Tabs_1 from './tabs';
+export { Tabs_1 as Tabs };
+import * as Tag_1 from './tag';
+export { Tag_1 as Tag };
+import * as TextArea_1 from './textarea';
+export { TextArea_1 as TextArea };
+import * as Themes_1 from './themes';
+export { Themes_1 as Themes };
+import * as TimePicker_1 from './time-picker';
+export { TimePicker_1 as TimePicker };
+import * as TimeRangePicker_1 from './time-range-picker';
+export { TimeRangePicker_1 as TimeRangePicker };
+import * as TimeZonePicker_1 from './time-zone-picker';
+export { TimeZonePicker_1 as TimeZonePicker };
+import * as Tooltip_1 from './tooltip';
+export { Tooltip_1 as Tooltip };
+import * as Typography_1 from './typography';
+export { Typography_1 as Typography };
+import * as Video_1 from './video';
+export { Video_1 as Video };
+import * as PaymentCard_1 from './payment-card';
+export { PaymentCard_1 as PaymentCard };
+import * as PhoneInput_1 from './phone-input';
+export { PhoneInput_1 as PhoneInput };
+import * as DateInput_1 from './date-input';
+export { DateInput_1 as DateInput };

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

@@ -0,0 +1,120 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ *  Created by Aneree on 03/11/20.
+ */
+import { useMemo, useCallback, useState, useEffect } from 'react';
+import _keyBy from 'lodash/keyBy';
+//components
+import { Select } from '../select';
+//hooks
+import { useLocale } from '../locale';
+import { useLatest } from '../hooks/useLatest';
+import useCombinedRefs from '../hooks/useCombinedRef';
+import { useInputChangeHandler } from './hooks/useInputChangeHandler';
+import { useAsyncOptionHandlers } from './hooks/useAsyncOptionHandlers';
+import { useResolveSelectedOptions } from './hooks/useResolveSelectedOptions';
+//helpers
+import { getNoResultsMsg, getInputValue } from './helpers';
+//utils
+import { mergeOverrides } from '../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 = __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 = useLocale();
+    var valueKeyRef = useLatest(valueKey);
+    var loadOnMountRef = useLatest(loadOnMount);
+    var _h = __read(useState(loadOnMount), 2), isLoading = _h[0], setIsLoading = _h[1];
+    var _j = __read(useState(initialOptions), 2), options = _j[0], setOptions = _j[1];
+    var _k = __read(useState(_keyBy(initialOptions, valueKey)), 2), allOptionsMap = _k[0], setAllOptionsMap = _k[1];
+    var _l = __read(useState(null), 2), inputElement = _l[0], setInputElement = _l[1];
+    var inputRef = useLatest(inputElement);
+    var combinedRef = useCombinedRefs(setInputElement, controlRef);
+    var _m = __read(useState(null), 2), rootRef = _m[0], setRootRef = _m[1];
+    var _o = __read(useState(null), 2), popoverRef = _o[0], setPopoverRef = _o[1];
+    useResolveSelectedOptions({
+        value: value,
+        valueKey: valueKey,
+        inputRef: inputRef,
+        allOptionsMap: allOptionsMap,
+        setOptions: setOptions,
+        setIsLoading: setIsLoading,
+        setAllOptionsMap: setAllOptionsMap,
+        resolveSelectedOptions: resolveSelectedOptions,
+    });
+    var _p = 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 = useInputChangeHandler({
+        inputElement: inputElement,
+        listenAllInputChanges: listenAllInputChanges,
+        onInputChange: onInputChange,
+        inputChangeHandlerToDebounce: inputChangeHandlerToDebounce,
+        debounceInterval: debounceInterval,
+    });
+    /************************************************ HANDLING FOCUS ****************************************************/
+    var handleFocus = 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 ************************************************/
+    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 = 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 = useMemo(function () {
+        return mergeOverrides(__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 (_jsx(Select, __assign({}, restSelectProps, { hideSelectAll: true, options: options, isLoading: isLoading, value: selectedOptions, controlRef: combinedRef, overrides: mergedOverrides, onInputChange: _onInputChange, noResultsMsg: getNoResultsMsg({
+            isLoading: isLoading,
+            noResultsMsg: noResultsMsg,
+            inputText: getInputValue(inputRef),
+            minimumInput: minimumInput,
+            searchingText: searchingText !== null && searchingText !== void 0 ? searchingText : locale.asyncSelect.searchingText,
+            emptyInputMsg: locale.asyncSelect.emptyInputMsg,
+        }), createOption: createOption }), void 0));
+};
+export { AsyncSelect };

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

@@ -0,0 +1,31 @@
+import { __assign } from "tslib";
+export 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;
+};
+export var shouldPaginate = function (element, paginationBuffer) {
+    if (paginationBuffer === void 0) { paginationBuffer = 50; }
+    return element.scrollHeight > element.clientHeight &&
+        element.scrollTop >= element.scrollHeight - element.clientHeight - paginationBuffer;
+};
+export 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 = __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;
+};
+export var getInputValue = function (inputRef) { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || ''; };

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