@sprinklrjs/spaceweb 11.0.0 → 12.14.4

package/date-picker/styled-components.js

@@ -54,6 +54,56 @@ var getEdgeDayBeforeStyle = function (code, firstChild, peekNextMonth) {
         '101010010000010': !peekNextMonth && firstChild ? { content: 'none' } : pseudoSelectedStyle,
     }[code] || {});
 };
+function generateDayStyles(defaultCode, defaultStyle) {
+    var _a;
+    var codeForSM = "".concat(defaultCode.substr(0, 12), "1").concat(defaultCode.substr(12 + 1));
+    var codeForEM = "".concat(defaultCode.substr(0, 13), "1").concat(defaultCode.substr(13 + 1));
+    return _a = {},
+        _a[defaultCode] = defaultStyle,
+        _a[codeForSM] = defaultStyle,
+        _a[codeForEM] = defaultStyle,
+        _a;
+}
+var getTempRTLAdaptedStyles = function (code) {
+    var dayStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, generateDayStyles('100110100000000', {
+        ':before': {
+            right: '0%',
+            left: '0%',
+        },
+    })), generateDayStyles('100100001001000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101000001010000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101110100000000', {
+        ':before': {
+            right: '50%',
+            left: '0%',
+        },
+    })), generateDayStyles('101111000000000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('100111000000000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('101000001001000', {
+        ':before': {
+            left: '50%',
+        },
+    })), generateDayStyles('100100001010000', {
+        ':before': {
+            left: '50%',
+        },
+    }));
+    return dayStyles[code] || {};
+};
 var getDayStyles = function (todaySOD) { return [
     'text-12 leading-8 w-9',
     function (_a, props) {
@@ -76,7 +126,7 @@ var getDayStyles = function (todaySOD) { return [
                 !$isHovered &&
                 !$hasRangeHighlighted && {
                 backgroundColor: 'transparent',
-            })), { backgroundColor: backgroundColor, height: '100%', top: 0 }), ':before': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
+            })), { backgroundColor: backgroundColor, height: '100%', top: 0 }), ':before': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ borderTopWidth: '0px', borderBottomWidth: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' }, ($outsideMonthWithinRange ? { content: '' } : {})), ($startOfMonth
                 ? {
                     borderTopLeftRadius: '100%',
                     borderBottomLeftRadius: '100%',
@@ -86,7 +136,7 @@ var getDayStyles = function (todaySOD) { return [
                     borderTopRightRadius: '100%',
                     borderBottomRightRadius: '100%',
                 }
-                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), ':first-child': (0, tslib_1.__assign)({}, ($range
+                : {})), ($outsideMonth ? { backgroundColor: 'transparent' } : {})), (getTempRTLAdaptedStyles(code)[':before'] || {})), ':first-child': (0, tslib_1.__assign)({}, ($range
                 ? {
                     ':before': (0, tslib_1.__assign)({}, getEdgeDayBeforeStyle(code, true, props.$peekNextMonth)),
                 }
@@ -97,7 +147,7 @@ var getDayStyles = function (todaySOD) { return [
                 : {})) }, (date_fns_adapter_1.default.isEqual($date, todaySOD) &&
             !$selected && {
             color: theme.spr.text04,
-        })), ($outsideMonth && { color: theme.spr.text03 }));
+        })), ($outsideMonth && { color: $selected ? theme.spr.text05 : theme.spr.text03 }));
     },
 ]; };
 exports.getDayStyles = getDayStyles;

package/date-picker/types.d.ts

@@ -19,6 +19,7 @@ export declare type DateTimeSelectSharedProps = {
 export declare type DatepickerOverrides<T = SharedStyleProps> = {
     CalendarContainer?: Override<T>;
     CalendarHeader?: Override<T>;
+    Calendar?: Override<CalendarProps & Record<string, any>>;
     Day?: Override<T>;
     Input?: Override<T>;
     InputWrapper?: Override<T>;
@@ -43,7 +44,11 @@ export declare type DatepickerOverrides<T = SharedStyleProps> = {
     Footer?: Override<T>;
     DateTimeSelect?: Override<DateTimeSelectSharedProps>;
 };
+export declare type Nullable<T> = T | null | undefined;
 export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSelectStart' | 'timeSelectEnd' | 'value' | 'onChange' | 'quickSelect' | 'quickSelectOptions' | 'size' | 'overrides' | 'onDayClick' | 'onDayMouseOver' | 'onDayMouseLeave' | 'onMonthChange' | 'onYearChange' | 'formatString' | 'peekNextMonth' | 'fixedHeight'> & {
+    id?: string;
+    showTimezone?: boolean;
+    timezone?: string;
     intent?: Intent;
     timeSelect?: boolean;
     onBlur?: () => void;
@@ -53,7 +58,8 @@ export declare type StatelessDatePickerProps = Omit<BaseDatepickerProps, 'timeSe
     variant?: InputVariant;
     value: Date | Date[] | undefined;
     onChange?: (data: {
-        value?: (Date | undefined | null)[] | Date | null;
+        value?: Nullable<Date>[] | Nullable<Date>;
+        timezone?: string;
     }) => any;
     size?: InputSize;
     overrides?: DatepickerOverrides;
@@ -75,8 +81,11 @@ export declare type StatefulContainerProps = {
     value?: Date;
     onChange?: (data: {
         value?: Date | undefined | null;
+        timezone?: string;
     }) => any;
     startOpen?: boolean;
+    showTimezone?: boolean;
+    timezone?: string;
 };
 export declare type DatePickerProps = Omit<StatelessDatePickerProps, 'value' | 'range'> & Omit<StatefulContainerProps, 'children'>;
 export declare type DatePickerSharedProps = SharedStylePropsT;

package/date-picker/utils.d.ts

@@ -5,9 +5,11 @@ interface FormatDateParams {
     formatString?: string;
     locale: any;
     dateHelpers?: DateHelpers<Date>;
+    timezone?: string;
+    showTimezone?: boolean;
 }
 export declare const normalizeDashes: (formatString: string) => string;
-export declare const formatDate: (params: FormatDateParams) => string;
+export declare const formatDate: ({ showTimezone, ...params }: FormatDateParams) => string;
 export declare const getAriaLabel: (value: Date | Date[] | undefined, formatDisplayValue: (date?: Date | Date[] | undefined) => string, locale: Locale) => string;
 export declare const prepareLocale: (locale?: globalThis.Locale, options?: {
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;

package/date-picker/utils.js

@@ -10,7 +10,8 @@ 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 formatDate = function (_a) {
+    var _b = _a.showTimezone, showTimezone = _b === void 0 ? false : _b, params = (0, tslib_1.__rest)(_a, ["showTimezone"]);
     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);
@@ -22,10 +23,14 @@ var formatDate = function (params) {
     if (Array.isArray(date) && !date[0] && !date[1]) {
         return '';
     }
+    var formattedDate;
     if (Array.isArray(date)) {
-        return date.map(function (day) { return format(day); }).join(' – ');
+        formattedDate = date.map(function (day) { return format(day); }).join(' – ');
     }
-    return format(date);
+    else {
+        formattedDate = format(date);
+    }
+    return "".concat(formattedDate).concat(params.timezone && showTimezone ? " | ".concat(params.timezone) : '');
 };
 exports.formatDate = formatDate;
 var getAriaLabel = function (value, formatDisplayValue, locale) {

package/date-time/DateTime.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DateTimeProps } from './types';
+export declare const DateTime: ({ date, variant, dateTimeOptions }: DateTimeProps) => JSX.Element;

package/date-time/DateTime.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTime = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+//hooks
+var useDateTime_1 = require("./useDateTime");
+var DateTime = function (_a) {
+    var date = _a.date, variant = _a.variant, dateTimeOptions = _a.dateTimeOptions;
+    var formattedDate = (0, useDateTime_1.useDateTime)({ date: date, variant: variant, dateTimeOptions: dateTimeOptions });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedDate }, void 0);
+};
+exports.DateTime = DateTime;

package/date-time/index.d.ts

@@ -0,0 +1,3 @@
+export { DateTime } from './DateTime';
+export { useDateTime } from './useDateTime';
+export * from './types';

package/date-time/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDateTime = exports.DateTime = void 0;
+var tslib_1 = require("tslib");
+var DateTime_1 = require("./DateTime");
+Object.defineProperty(exports, "DateTime", { enumerable: true, get: function () { return DateTime_1.DateTime; } });
+var useDateTime_1 = require("./useDateTime");
+Object.defineProperty(exports, "useDateTime", { enumerable: true, get: function () { return useDateTime_1.useDateTime; } });
+(0, tslib_1.__exportStar)(require("./types"), exports);

package/date-time/package.json

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

package/date-time/types.d.ts

@@ -0,0 +1,21 @@
+import { ValueOf } from '../utility-types';
+export declare const DATE_TIME_VARIANTS: {
+    readonly SHORT_DATE: "shortDate";
+    readonly MEDIUM_DATE: "mediumDate";
+    readonly LONG_DATE: "longDate";
+    readonly FULL_DATE: "fullDate";
+    readonly SHORT_TIME: "shortTime";
+    readonly MEDIUM_TIME: "mediumTime";
+    readonly LONG_TIME: "longTime";
+    readonly FULL_TIME: "fullTime";
+    readonly SHORT_DATE_TIME: "shortDateTime";
+    readonly MEDIUM_DATE_TIME: "mediumDateTime";
+    readonly LONG_DATE_TIME: "longDateTime";
+    readonly FULL_DATE_TIME: "fullDateTime";
+    readonly CUSTOM: "custom";
+};
+export declare type DateTimeProps = {
+    date: Date | number;
+    variant: ValueOf<typeof DATE_TIME_VARIANTS>;
+    dateTimeOptions?: Intl.DateTimeFormatOptions;
+};

package/date-time/types.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DATE_TIME_VARIANTS = void 0;
+exports.DATE_TIME_VARIANTS = {
+    SHORT_DATE: 'shortDate',
+    MEDIUM_DATE: 'mediumDate',
+    LONG_DATE: 'longDate',
+    FULL_DATE: 'fullDate',
+    SHORT_TIME: 'shortTime',
+    MEDIUM_TIME: 'mediumTime',
+    LONG_TIME: 'longTime',
+    FULL_TIME: 'fullTime',
+    SHORT_DATE_TIME: 'shortDateTime',
+    MEDIUM_DATE_TIME: 'mediumDateTime',
+    LONG_DATE_TIME: 'longDateTime',
+    FULL_DATE_TIME: 'fullDateTime',
+    CUSTOM: 'custom',
+};

package/date-time/useDateTime.d.ts

@@ -0,0 +1,2 @@
+import { DateTimeProps } from './types';
+export declare const useDateTime: ({ date, variant, dateTimeOptions }: DateTimeProps) => string;

package/date-time/useDateTime.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDateTime = void 0;
+var tslib_1 = require("tslib");
+var locale_1 = require("../locale");
+var variants_1 = require("./variants");
+var useDateTime = function (_a) {
+    var date = _a.date, variant = _a.variant, dateTimeOptions = _a.dateTimeOptions;
+    var variantOptions = variants_1.VARIANTS_DATE_FORMAT_OPTIONS[variant];
+    var langCode = (0, locale_1.useLocale)().langCode;
+    return Intl.DateTimeFormat(langCode, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, variantOptions), dateTimeOptions)).format(date);
+};
+exports.useDateTime = useDateTime;

package/date-time/variants.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_VARIANT: "shortDate";
+export declare const VARIANTS_DATE_FORMAT_OPTIONS: {
+    [key: string]: Intl.DateTimeFormatOptions;
+};

package/date-time/variants.js

@@ -0,0 +1,87 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VARIANTS_DATE_FORMAT_OPTIONS = exports.DEFAULT_VARIANT = void 0;
+var types_1 = require("./types");
+exports.DEFAULT_VARIANT = types_1.DATE_TIME_VARIANTS.SHORT_DATE; //dd/mm/yyyy in en_US
+exports.VARIANTS_DATE_FORMAT_OPTIONS = (_a = {},
+    _a[types_1.DATE_TIME_VARIANTS.SHORT_DATE] = { year: 'numeric', month: 'numeric', day: 'numeric' },
+    _a[types_1.DATE_TIME_VARIANTS.MEDIUM_DATE] = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.LONG_DATE] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.FULL_DATE] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        weekday: 'long',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.SHORT_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[types_1.DATE_TIME_VARIANTS.MEDIUM_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true,
+    },
+    _a[types_1.DATE_TIME_VARIANTS.LONG_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'short',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.FULL_TIME] = {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'long',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.SHORT_DATE_TIME] = {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[types_1.DATE_TIME_VARIANTS.MEDIUM_DATE_TIME] = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    },
+    _a[types_1.DATE_TIME_VARIANTS.LONG_DATE_TIME] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true,
+        timeZoneName: 'short',
+    },
+    _a[types_1.DATE_TIME_VARIANTS.FULL_DATE_TIME] = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        weekday: 'long',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: false,
+        timeZoneName: 'long',
+    },
+    _a);

package/esm/allComponentsAndUtilities.d.ts

@@ -53,3 +53,4 @@ export * as Video from './video';
 export * as PaymentCard from './payment-card';
 export * as PhoneInput from './phone-input';
 export * as DateInput from './date-input';
+export * as Breadcrumb from './breadcrumb';

package/esm/allComponentsAndUtilities.js

@@ -102,3 +102,5 @@ import * as PhoneInput_1 from './phone-input';
 export { PhoneInput_1 as PhoneInput };
 import * as DateInput_1 from './date-input';
 export { DateInput_1 as DateInput };
+import * as Breadcrumb_1 from './breadcrumb';
+export { Breadcrumb_1 as Breadcrumb };

package/esm/asyncSelect/asyncSelect.d.ts

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

package/esm/asyncSelect/asyncSelect.js

@@ -1,120 +1,55 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __awaiter, __generator, __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 { useCallback, useMemo } from 'react';
 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, controlRef = props.controlRef, propsInputRef = props.inputRef, propsCreateOption = props.createOption, restSelectProps = __rest(props, ["loadOptions", "searchingText", "paginationBuffer", "debounceInterval", "resolveSelectedOptions", "minimumInput", "loadOnMount", "loadOnFocus", "initialOptions", "listenAllInputChanges", "onInputChange", "noResultsMsg", "overrides", "value", "controlRef", "inputRef", "createOption"]);
-    var _f = restSelectProps.valueKey, valueKey = _f === void 0 ? 'id' : _f;
-    var locale = useLocale();
-    var valueKeyRef = useLatest(valueKey);
-    var loadOnMountRef = useLatest(loadOnMount);
-    var _g = __read(useState(loadOnMount), 2), isLoading = _g[0], setIsLoading = _g[1];
-    var _h = __read(useState(initialOptions), 2), options = _h[0], setOptions = _h[1];
-    var _j = __read(useState(_keyBy(initialOptions, valueKey)), 2), allOptionsMap = _j[0], setAllOptionsMap = _j[1];
-    var _k = __read(useState(null), 2), inputElement = _k[0], setInputElement = _k[1];
-    var inputRef = useLatest(inputElement);
-    var combinedRef = useCombinedRefs(setInputElement, propsInputRef);
-    var _l = __read(useState(null), 2), rootRef = _l[0], setRootRef = _l[1];
-    var _m = __read(useState(null), 2), popoverRef = _m[0], setPopoverRef = _m[1];
-    useResolveSelectedOptions({
-        value: value,
-        valueKey: valueKey,
-        inputRef: inputRef,
-        allOptionsMap: allOptionsMap,
-        setOptions: setOptions,
-        setIsLoading: setIsLoading,
-        setAllOptionsMap: setAllOptionsMap,
-        resolveSelectedOptions: resolveSelectedOptions,
-    });
-    var _o = useAsyncOptionHandlers({
-        valueKey: valueKey,
-        isLoading: isLoading,
-        minimumInput: minimumInput,
-        paginationBuffer: paginationBuffer,
-        inputRef: inputRef,
-        setAllOptionsMap: setAllOptionsMap,
-        setIsLoading: setIsLoading,
-        setOptions: setOptions,
-        loadOptions: loadOptions,
-        createOption: propsCreateOption,
-    }), fetchOptions = _o.fetchOptions, onPaginate = _o.onPaginate, inputChangeHandlerToDebounce = _o.onInputChange, createOption = _o.createOption;
-    var _onInputChange = 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;
+import { useAsyncSelect } from './hooks/useAsyncSelect';
+import { arrayToGroupedOptions } from './helpers';
+import { UNGROUPED_ID } from '../select/constants';
+var UNGROUP_GROUP_CONFIG = [{ id: UNGROUPED_ID, label: 'Ungrouped' }];
+var AsyncSelect = function (_a) {
+    var loadOptions = _a.loadOptions, initialOptions = _a.initialOptions, resolveSelectedOptions = _a.resolveSelectedOptions, value = _a.value, restProps = __rest(_a, ["loadOptions", "initialOptions", "resolveSelectedOptions", "value"]);
+    var adaptedLoadOptions = useCallback(function (input, groupFilters) { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, filter, _b, options, complete;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _a = __read(groupFilters, 1), filter = _a[0];
+                    if (!filter) {
+                        return [2 /*return*/, { groups: [] }];
+                    }
+                    return [4 /*yield*/, loadOptions(input, filter.pageNumber)];
+                case 1:
+                    _b = _c.sent(), options = _b.options, complete = _b.complete;
+                    return [2 /*return*/, {
+                            groups: [{ group: filter.group, options: options, complete: complete }],
+                        }];
+            }
         });
-    }, 
-    // All options map needs to be present in the dependency list so that the values get recomputed when
-    // the resolved options have been fetched
-    [value, allOptionsMap, valueKeyRef]);
-    var mergedOverrides = 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 } },
+    }); }, [loadOptions]);
+    var adaptedResolveSelectedOptions = useCallback(function (groupVsUnresolvedValueKeys) { return __awaiter(void 0, void 0, void 0, function () {
+        var resolvedOptions;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!resolveSelectedOptions) {
+                        return [2 /*return*/, {}];
+                    }
+                    return [4 /*yield*/, resolveSelectedOptions(groupVsUnresolvedValueKeys[UNGROUPED_ID] || [])];
+                case 1:
+                    resolvedOptions = _b.sent();
+                    return [2 /*return*/, (_a = {}, _a[UNGROUPED_ID] = resolvedOptions, _a)];
             }
-            : {
-                //Overriding DropdownContainer and not StatefulMenu so that async select remains functional even when
-                //user overrides StatefulMenu in favour of rendering virtualized menu
-                Menu: { props: { onScroll: onPaginate } },
-            })), overrides);
-    }, [handleFocus, props.type, onPaginate, overrides]);
-    return (_jsx(Select, __assign({}, restSelectProps, { filterOptions: restSelectProps.filterOptions, hideSelectAll: true, options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: 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));
+        });
+    }); }, [resolveSelectedOptions]);
+    var adaptedValue = useMemo(function () {
+        var _a;
+        return (value ? (_a = {}, _a[UNGROUPED_ID] = value, _a) : value);
+    }, [value]);
+    var _b = useAsyncSelect(__assign(__assign({}, restProps), { initialOptions: useMemo(function () { return arrayToGroupedOptions(initialOptions || []); }, [initialOptions]), loadOptions: adaptedLoadOptions, groupConfig: UNGROUP_GROUP_CONFIG, resolveSelectedOptions: resolveSelectedOptions ? adaptedResolveSelectedOptions : undefined, value: adaptedValue })), resultCountMap = _b.resultCountMap, selectProps = __rest(_b, ["resultCountMap"]);
+    return _jsx(Select, __assign({}, selectProps, { hideSelectAll: true }), void 0);
 };
 export { AsyncSelect };

package/esm/asyncSelect/groupedAsyncSelect.d.ts

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

package/esm/asyncSelect/groupedAsyncSelect.js

@@ -0,0 +1,37 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAsyncSelect } from './hooks/useAsyncSelect';
+import { Select } from '../select';
+import { CollapsibleSelectMenu } from '../select/selectMenuAdapter/CollapsibleSelectMenu';
+import { useCallback, useMemo } from 'react';
+import { mergeOverrides } from '../overrides';
+import { arrayToGroupedOptions } from './helpers';
+import _reduce from 'lodash/reduce';
+import _isObject from 'lodash/isObject';
+import defaultProps from '../select/default-props';
+export var GroupedAsyncSelect = function (_a) {
+    var onChange = _a.onChange, showSelectAll = _a.showSelectAll, selectAllSelected = _a.selectAllSelected, selectOnTab = _a.selectOnTab, restProps = __rest(_a, ["onChange", "showSelectAll", "selectAllSelected", "selectOnTab"]);
+    var adaptedOnChange = useCallback(function (params) {
+        var groupedValue = arrayToGroupedOptions(params.value);
+        return onChange === null || onChange === void 0 ? void 0 : onChange(__assign(__assign({}, params), { value: groupedValue, valueKeys: _reduce(groupedValue, function (acc, values, groupId) {
+                acc[groupId] = values === null || values === void 0 ? void 0 : values.map(function (valueObjOrId) {
+                    return _isObject(valueObjOrId) ? valueObjOrId[restProps.valueKey || defaultProps.valueKey] : valueObjOrId;
+                });
+                return acc;
+            }, {}) }));
+    }, [onChange, restProps.valueKey]);
+    var _b = useAsyncSelect(__assign(__assign({}, restProps), { onChange: adaptedOnChange })), resultCountMap = _b.resultCountMap, selectProps = __rest(_b, ["resultCountMap"]);
+    var overrides = useMemo(function () {
+        return mergeOverrides({
+            StatefulMenu: {
+                component: CollapsibleSelectMenu,
+                props: {
+                    groupConfig: restProps.groupConfig.map(function (group) { return (__assign(__assign({}, group), { count: resultCountMap[group.id] })); }),
+                    clearAsOption: restProps.clearAsOption,
+                    selectOnTab: selectOnTab,
+                },
+            },
+        }, selectProps.overrides);
+    }, [selectProps.overrides, restProps.groupConfig, resultCountMap, restProps.clearAsOption, selectOnTab]);
+    return (_jsx(Select, __assign({}, selectProps, { overrides: overrides, hideSelectAll: !showSelectAll, __selectAllShouldReturnAllOptions: showSelectAll, __selectAllSelected: selectAllSelected }, ((selectProps === null || selectProps === void 0 ? void 0 : selectProps.type) === 'overlay' ? { scrollContainer: 'menuContainer' } : {})), void 0));
+};

package/esm/asyncSelect/helpers.d.ts

@@ -3,7 +3,9 @@
  */
 import { RefObject } from 'react';
 import * as React from 'react';
-import { AllOptionsMap, Option } from './types';
+import { AllOptionsMap, GroupConfig, GroupedOptions, Option } from './types';
+import { normalizeOptions } from 'baseui/select/utils';
+import { Value } from '../select/types';
 export declare const getNoResultsMsg: ({ isLoading, minimumInput, inputText, noResultsMsg, searchingText, emptyInputMsg, }: {
     isLoading: boolean;
     minimumInput: number;
@@ -13,5 +15,9 @@ export declare const getNoResultsMsg: ({ isLoading, minimumInput, inputText, noR
     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;
+export declare const arrayToGroupedOptions: (options: Array<Option> | GroupedOptions | Value) => GroupedOptions;
+export declare const mergeOptions: (a: Array<Option> | GroupedOptions, b: Array<Option> | GroupedOptions) => GroupedOptions;
+export declare const initGroupOptions: (groupConfig: GroupConfig) => GroupedOptions;
+export declare const addOptionsInMap: (optionsMap: AllOptionsMap, options: Array<Option> | GroupedOptions, valueKey: string) => AllOptionsMap;
+export { normalizeOptions };