@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/ClientOnly.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare type ClientOnlyProps = {
+    children: ReactNode;
+};
+export declare const ClientOnly: ({ children }: ClientOnlyProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/ClientOnly.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientOnly = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var useTransitionState_1 = require("./hooks/useTransitionState");
+var ClientOnly = function (_a) {
+    var children = _a.children;
+    var _b = (0, tslib_1.__read)((0, useTransitionState_1.useTransitionState)(false), 2), hasMounted = _b[0], setHasMounted = _b[1];
+    (0, react_1.useEffect)(function () {
+        setHasMounted(true);
+    }, [setHasMounted]);
+    if (!hasMounted) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
+};
+exports.ClientOnly = ClientOnly;

package/allComponentsAndUtilities.d.ts

@@ -43,7 +43,6 @@ export * as Switch from './switch';
 export * as Tabs from './tabs';
 export * as Tag from './tag';
 export * as TextArea from './textarea';
-export * as Themes from './themes';
 export * as TimePicker from './time-picker';
 export * as TimeRangePicker from './time-range-picker';
 export * as TimeZonePicker from './time-zone-picker';
@@ -54,3 +53,7 @@ export * as PaymentCard from './payment-card';
 export * as PhoneInput from './phone-input';
 export * as DateInput from './date-input';
 export * as Breadcrumb from './breadcrumb';
+export * as Transition from './transitions/transition';
+export * as Collapse from './transitions/collapse';
+export * as Grow from './transitions/grow';
+export * as Fade from './transitions/fade';

package/allComponentsAndUtilities.js

@@ -4,7 +4,8 @@ NOTE: This file is only for size tooling.
 Do not import anything from this module!
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Breadcrumb = exports.DateInput = exports.PhoneInput = exports.PaymentCard = exports.Video = exports.Typography = exports.Tooltip = exports.TimeZonePicker = exports.TimeRangePicker = exports.TimePicker = exports.Themes = exports.TextArea = exports.Tag = exports.Tabs = exports.Switch = exports.StyleEngine = exports.Style = exports.Stack = exports.SpacewebProvider = exports.SpaceConsumer = exports.Snackbar = exports.Slider = exports.Select = exports.Search = exports.Radio = exports.Popover = exports.Overrides = exports.Modal = exports.Menu = exports.Loader = exports.List = exports.Link = exports.Input = exports.Image = exports.Icons = exports.useCombinedRef = exports.useCombinedHandler = exports.Helpers = exports.Grid = exports.FormControl = exports.DatePicker = exports.Col = exports.ClassNames = exports.Checkbox = exports.ButtonGroup = exports.Button = exports.Box = exports.BaseButton = exports.Badge = exports.Avatar = void 0;
+exports.Transition = exports.Breadcrumb = exports.DateInput = exports.PhoneInput = exports.PaymentCard = exports.Video = exports.Typography = exports.Tooltip = exports.TimeZonePicker = exports.TimeRangePicker = exports.TimePicker = exports.TextArea = exports.Tag = exports.Tabs = exports.Switch = exports.StyleEngine = exports.Style = exports.Stack = exports.SpacewebProvider = exports.SpaceConsumer = exports.Snackbar = exports.Slider = exports.Select = exports.Search = exports.Radio = exports.Popover = exports.Overrides = exports.Modal = exports.Menu = exports.Loader = exports.List = exports.Link = exports.Input = exports.Image = exports.Icons = exports.useCombinedRef = exports.useCombinedHandler = exports.Helpers = exports.Grid = exports.FormControl = exports.DatePicker = exports.Col = exports.ClassNames = exports.Checkbox = exports.ButtonGroup = exports.Button = exports.Box = exports.BaseButton = exports.Badge = exports.Avatar = void 0;
+exports.Fade = exports.Grow = exports.Collapse = void 0;
 var tslib_1 = require("tslib");
 (0, tslib_1.__exportStar)(require("./index"), exports);
 exports.Avatar = (0, tslib_1.__importStar)(require("./avatar"));
@@ -47,7 +48,6 @@ exports.Switch = (0, tslib_1.__importStar)(require("./switch"));
 exports.Tabs = (0, tslib_1.__importStar)(require("./tabs"));
 exports.Tag = (0, tslib_1.__importStar)(require("./tag"));
 exports.TextArea = (0, tslib_1.__importStar)(require("./textarea"));
-exports.Themes = (0, tslib_1.__importStar)(require("./themes"));
 exports.TimePicker = (0, tslib_1.__importStar)(require("./time-picker"));
 exports.TimeRangePicker = (0, tslib_1.__importStar)(require("./time-range-picker"));
 exports.TimeZonePicker = (0, tslib_1.__importStar)(require("./time-zone-picker"));
@@ -58,3 +58,7 @@ exports.PaymentCard = (0, tslib_1.__importStar)(require("./payment-card"));
 exports.PhoneInput = (0, tslib_1.__importStar)(require("./phone-input"));
 exports.DateInput = (0, tslib_1.__importStar)(require("./date-input"));
 exports.Breadcrumb = (0, tslib_1.__importStar)(require("./breadcrumb"));
+exports.Transition = (0, tslib_1.__importStar)(require("./transitions/transition"));
+exports.Collapse = (0, tslib_1.__importStar)(require("./transitions/collapse"));
+exports.Grow = (0, tslib_1.__importStar)(require("./transitions/grow"));
+exports.Fade = (0, tslib_1.__importStar)(require("./transitions/fade"));

package/asyncSelect/asyncSelect.d.ts

@@ -3,7 +3,7 @@
  */
 import { ReactElement, ReactNode } from 'react';
 import { AsyncSelectProps } from './types';
-declare const AsyncSelect: ({ loadOptions, initialOptions, resolveSelectedOptions, value, ...restProps }: AsyncSelectProps & {
+declare const AsyncSelect: ({ loadOptions, initialOptions, resolveSelectedOptions, value, hideSelectAll, ...restProps }: AsyncSelectProps & {
     children?: ReactNode;
 }) => ReactElement;
 export { AsyncSelect };

package/asyncSelect/asyncSelect.js

@@ -13,7 +13,8 @@ var helpers_1 = require("./helpers");
 var constants_1 = require("../select/constants");
 var UNGROUP_GROUP_CONFIG = [{ id: constants_1.UNGROUPED_ID, label: 'Ungrouped' }];
 var AsyncSelect = function (_a) {
-    var loadOptions = _a.loadOptions, initialOptions = _a.initialOptions, resolveSelectedOptions = _a.resolveSelectedOptions, value = _a.value, restProps = (0, tslib_1.__rest)(_a, ["loadOptions", "initialOptions", "resolveSelectedOptions", "value"]);
+    var loadOptions = _a.loadOptions, initialOptions = _a.initialOptions, resolveSelectedOptions = _a.resolveSelectedOptions, value = _a.value, _b = _a.hideSelectAll, hideSelectAll = _b === void 0 ? false : _b, restProps = (0, tslib_1.__rest)(_a, ["loadOptions", "initialOptions", "resolveSelectedOptions", "value", "hideSelectAll"]);
+    var _c = (0, tslib_1.__read)((0, react_1.useState)(true), 2), hasMore = _c[0], setHasMore = _c[1];
     var adaptedLoadOptions = (0, react_1.useCallback)(function (input, groupFilters) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
         var _a, filter, _b, options, complete;
         return (0, tslib_1.__generator)(this, function (_c) {
@@ -26,6 +27,7 @@ var AsyncSelect = function (_a) {
                     return [4 /*yield*/, loadOptions(input, filter.pageNumber)];
                 case 1:
                     _b = _c.sent(), options = _b.options, complete = _b.complete;
+                    setHasMore(!complete);
                     return [2 /*return*/, {
                             groups: [{ group: filter.group, options: options, complete: complete }],
                         }];
@@ -52,7 +54,7 @@ var AsyncSelect = function (_a) {
         var _a;
         return (value ? (_a = {}, _a[constants_1.UNGROUPED_ID] = value, _a) : value);
     }, [value]);
-    var _b = (0, useAsyncSelect_1.useAsyncSelect)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { initialOptions: (0, react_1.useMemo)(function () { return (0, helpers_1.arrayToGroupedOptions)(initialOptions || []); }, [initialOptions]), loadOptions: adaptedLoadOptions, groupConfig: UNGROUP_GROUP_CONFIG, resolveSelectedOptions: resolveSelectedOptions ? adaptedResolveSelectedOptions : undefined, value: adaptedValue })), resultCountMap = _b.resultCountMap, selectProps = (0, tslib_1.__rest)(_b, ["resultCountMap"]);
-    return (0, jsx_runtime_1.jsx)(select_1.Select, (0, tslib_1.__assign)({}, selectProps, { hideSelectAll: true }), void 0);
+    var _d = (0, useAsyncSelect_1.useAsyncSelect)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { initialOptions: (0, react_1.useMemo)(function () { return (0, helpers_1.arrayToGroupedOptions)(initialOptions || []); }, [initialOptions]), loadOptions: adaptedLoadOptions, groupConfig: UNGROUP_GROUP_CONFIG, resolveSelectedOptions: resolveSelectedOptions ? adaptedResolveSelectedOptions : undefined, value: adaptedValue })), resultCountMap = _d.resultCountMap, selectProps = (0, tslib_1.__rest)(_d, ["resultCountMap"]);
+    return (0, jsx_runtime_1.jsx)(select_1.Select, (0, tslib_1.__assign)({}, selectProps, { hideSelectAll: hideSelectAll || hasMore }), void 0);
 };
 exports.AsyncSelect = AsyncSelect;

package/asyncSelect/groupedAsyncSelect.d.ts

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

package/asyncSelect/groupedAsyncSelect.js

@@ -12,8 +12,10 @@ var helpers_1 = require("./helpers");
 var reduce_1 = (0, tslib_1.__importDefault)(require("lodash/reduce"));
 var isObject_1 = (0, tslib_1.__importDefault)(require("lodash/isObject"));
 var default_props_1 = (0, tslib_1.__importDefault)(require("../select/default-props"));
+var locale_1 = require("../locale");
 var GroupedAsyncSelect = function (_a) {
     var onChange = _a.onChange, showSelectAll = _a.showSelectAll, selectAllSelected = _a.selectAllSelected, selectOnTab = _a.selectOnTab, restProps = (0, tslib_1.__rest)(_a, ["onChange", "showSelectAll", "selectAllSelected", "selectOnTab"]);
+    var locale = (0, locale_1.useLocale)();
     var adaptedOnChange = (0, react_1.useCallback)(function (params) {
         var groupedValue = (0, helpers_1.arrayToGroupedOptions)(params.value);
         return onChange === null || onChange === void 0 ? void 0 : onChange((0, tslib_1.__assign)((0, tslib_1.__assign)({}, params), { value: groupedValue, valueKeys: (0, reduce_1.default)(groupedValue, function (acc, values, groupId) {
@@ -32,10 +34,11 @@ var GroupedAsyncSelect = function (_a) {
                     groupConfig: restProps.groupConfig.map(function (group) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, group), { count: resultCountMap[group.id] })); }),
                     clearAsOption: restProps.clearAsOption,
                     selectOnTab: selectOnTab,
+                    shouldDisplaySelectAll: showSelectAll,
                 },
             },
         }, selectProps.overrides);
-    }, [selectProps.overrides, restProps.groupConfig, resultCountMap, restProps.clearAsOption, selectOnTab]);
-    return ((0, jsx_runtime_1.jsx)(select_1.Select, (0, tslib_1.__assign)({}, selectProps, { overrides: overrides, hideSelectAll: !showSelectAll, __selectAllShouldReturnAllOptions: showSelectAll, __selectAllSelected: selectAllSelected }, ((selectProps === null || selectProps === void 0 ? void 0 : selectProps.type) === 'overlay' ? { scrollContainer: 'menuContainer' } : {})), void 0));
+    }, [selectProps.overrides, restProps.groupConfig, resultCountMap, restProps.clearAsOption, selectOnTab, showSelectAll]);
+    return ((0, jsx_runtime_1.jsx)(select_1.Select, (0, tslib_1.__assign)({}, selectProps, { overrides: overrides, hideSelectAll: !showSelectAll, __selectAllShouldReturnAllOptions: showSelectAll, __selectAllSelected: selectAllSelected }, ((selectProps === null || selectProps === void 0 ? void 0 : selectProps.type) === 'overlay' ? { scrollContainer: 'menuContainer' } : {}), { "aria-label": "".concat(selectProps['aria-label'] || '', " ").concat(locale.select.collapsibleMenuDescription) }), void 0));
 };
 exports.GroupedAsyncSelect = GroupedAsyncSelect;

package/asyncSelect/helpers.d.ts

@@ -4,15 +4,16 @@
 import { RefObject } from 'react';
 import * as React from 'react';
 import { AllOptionsMap, GroupConfig, GroupedOptions, Option } from './types';
-import { normalizeOptions } from 'baseui/select/utils';
+import { normalizeOptions } from '../baseui/select/utils';
 import { Value } from '../select/types';
-export declare const getNoResultsMsg: ({ isLoading, minimumInput, inputText, noResultsMsg, searchingText, emptyInputMsg, }: {
+export declare const getNoResultsMsg: ({ isLoading, minimumInput, inputText, noResultsMsg, searchingText, emptyInputMsg, searchable, }: {
     isLoading: boolean;
     minimumInput: number;
     inputText: string;
     noResultsMsg?: React.ReactNode;
     searchingText: React.ReactNode;
     emptyInputMsg: string;
+    searchable?: boolean | undefined;
 }) => string | React.ReactNode | undefined;
 export declare const shouldPaginate: (element: HTMLElement, paginationBuffer?: number) => boolean;
 export declare const getInputValue: (inputRef: RefObject<HTMLInputElement>) => string;

package/asyncSelect/helpers.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = exports.addOptionsInMap = exports.initGroupOptions = exports.mergeOptions = exports.arrayToGroupedOptions = exports.getInputValue = exports.shouldPaginate = exports.getNoResultsMsg = void 0;
 var tslib_1 = require("tslib");
-var utils_1 = require("baseui/select/utils");
+var utils_1 = require("../baseui/select/utils");
 Object.defineProperty(exports, "normalizeOptions", { enumerable: true, get: function () { return utils_1.normalizeOptions; } });
 var constants_1 = require("../select/constants");
 var getNoResultsMsg = function (_a) {
-    var isLoading = _a.isLoading, minimumInput = _a.minimumInput, inputText = _a.inputText, noResultsMsg = _a.noResultsMsg, searchingText = _a.searchingText, emptyInputMsg = _a.emptyInputMsg;
+    var isLoading = _a.isLoading, minimumInput = _a.minimumInput, inputText = _a.inputText, noResultsMsg = _a.noResultsMsg, searchingText = _a.searchingText, emptyInputMsg = _a.emptyInputMsg, _b = _a.searchable, searchable = _b === void 0 ? true : _b;
     if (isLoading) {
         return searchingText;
     }
@@ -14,6 +14,8 @@ var getNoResultsMsg = function (_a) {
     if (minimumInput > 0 && inputText.length < minimumInput) {
         return "Type at least ".concat(minimumInput, " characters to search");
     }
+    if (searchable === false)
+        return noResultsMsg;
     return inputText ? noResultsMsg : emptyInputMsg;
 };
 exports.getNoResultsMsg = getNoResultsMsg;

package/asyncSelect/hooks/useAsyncOptionHandlers.d.ts

@@ -4,7 +4,7 @@
 import { MutableRefObject, UIEvent } from 'react';
 import { Options } from '../../select';
 import { SetStateFunc, AllOptionsMap, AsyncSelectProps, LoadOptions, GroupedOptions, GroupConfig } from '../types';
-import { Value } from 'baseui/select/types';
+import { Value } from '../../baseui/select/types';
 interface UseAsyncOptionHandlersArgs {
     valueKey: string;
     isLoading: boolean;
@@ -19,8 +19,9 @@ interface UseAsyncOptionHandlersArgs {
     groupConfig: GroupConfig;
     selectedOptions?: Value;
     moveSelectedOptionsToTop: boolean;
+    sortedOptionsRef: MutableRefObject<GroupedOptions>;
 }
-declare const useAsyncOptionHandlers: ({ inputRef, valueKey, isLoading, setOptions, loadOptions, minimumInput, setIsLoading, paginationBuffer, setAllOptionsMap, createOption: propsCreateOption, groupConfig, selectedOptions, moveSelectedOptionsToTop, }: UseAsyncOptionHandlersArgs) => {
+declare const useAsyncOptionHandlers: ({ inputRef, valueKey, isLoading, setOptions, sortedOptionsRef, loadOptions, minimumInput, setIsLoading, paginationBuffer, setAllOptionsMap, createOption: propsCreateOption, groupConfig, selectedOptions, moveSelectedOptionsToTop, }: UseAsyncOptionHandlersArgs) => {
     onPaginate: (event: UIEvent<HTMLElement>, itemGroup?: string) => void;
     onInputChange: () => void;
     fetchOptions: (itemGroups: {

package/asyncSelect/hooks/useAsyncOptionHandlers.js

@@ -6,12 +6,14 @@ var tslib_1 = require("tslib");
  *  Created by Aneree on 15/01/21.
  */
 var react_1 = require("react");
+//components
+var select_1 = require("../../select");
 //hooks
 var useLatest_1 = require("../../hooks/useLatest");
 var helpers_1 = require("../helpers");
 var constants_1 = require("../../select/constants");
 var useAsyncOptionHandlers = function (_a) {
-    var inputRef = _a.inputRef, valueKey = _a.valueKey, isLoading = _a.isLoading, setOptions = _a.setOptions, loadOptions = _a.loadOptions, minimumInput = _a.minimumInput, setIsLoading = _a.setIsLoading, paginationBuffer = _a.paginationBuffer, setAllOptionsMap = _a.setAllOptionsMap, propsCreateOption = _a.createOption, groupConfig = _a.groupConfig, selectedOptions = _a.selectedOptions, moveSelectedOptionsToTop = _a.moveSelectedOptionsToTop;
+    var inputRef = _a.inputRef, valueKey = _a.valueKey, isLoading = _a.isLoading, setOptions = _a.setOptions, sortedOptionsRef = _a.sortedOptionsRef, loadOptions = _a.loadOptions, minimumInput = _a.minimumInput, setIsLoading = _a.setIsLoading, paginationBuffer = _a.paginationBuffer, setAllOptionsMap = _a.setAllOptionsMap, propsCreateOption = _a.createOption, groupConfig = _a.groupConfig, selectedOptions = _a.selectedOptions, moveSelectedOptionsToTop = _a.moveSelectedOptionsToTop;
     var pageRef = (0, react_1.useRef)({});
     var completeRef = (0, react_1.useRef)({});
     var isPaginatingRef = (0, react_1.useRef)({});
@@ -54,11 +56,13 @@ var useAsyncOptionHandlers = function (_a) {
                             var group = _a.group, pageNumber = _a.pageNumber;
                             if (pageNumber) {
                                 updatedOptions[group] = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(prevOptions[group]), false), (0, tslib_1.__read)(groupedOptions_1[group]), false);
+                                sortedOptionsRef.current[group] = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sortedOptionsRef.current[group]), false), (0, tslib_1.__read)(groupedOptions_1[group]), false);
                             }
                             else {
                                 updatedOptions[group] =
                                     moveSelectedOptionsToTop && selectedOptionsByGroup_1[group]
-                                        ? (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(selectedOptionsByGroup_1[group]), false), (0, tslib_1.__read)(groupedOptions_1[group]), false) : groupedOptions_1[group];
+                                        ? (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(selectedOptionsByGroup_1[group].filter(function (selectedOption) { return !selectedOption[select_1.LOADING_KEY]; })), false), (0, tslib_1.__read)(groupedOptions_1[group]), false) : groupedOptions_1[group];
+                                sortedOptionsRef.current[group] = groupedOptions_1[group];
                             }
                         });
                         return updatedOptions;
@@ -66,10 +70,13 @@ var useAsyncOptionHandlers = function (_a) {
                     itemGroups.forEach(function (_a) {
                         var group = _a.group, pageNumber = _a.pageNumber;
                         pageRef.current[group] = pageNumber;
-                        isPaginatingRef.current[group] = false;
                     });
                     return [3 /*break*/, 4];
                 case 3:
+                    itemGroups.forEach(function (_a) {
+                        var group = _a.group;
+                        isPaginatingRef.current[group] = false;
+                    });
                     clearTimeout(timeoutId);
                     setIsLoading(false);
                     return [7 /*endfinally*/];
@@ -77,14 +84,15 @@ var useAsyncOptionHandlers = function (_a) {
             }
         });
     }); }, [
-        inputRef,
+        setIsLoading,
         loadOptionsRef,
+        inputRef,
+        selectedOptionsRef,
         setAllOptionsMap,
-        setIsLoading,
-        setOptions,
+        sortedOptionsRef,
         updateResultCount,
         valueKeyRef,
-        selectedOptionsRef,
+        moveSelectedOptionsToTop,
     ]);
     var onPaginate = (0, react_1.useCallback)(function (event, itemGroup) {
         var _a;
@@ -101,7 +109,9 @@ var useAsyncOptionHandlers = function (_a) {
         if ((0, helpers_1.getInputValue)(inputRef).length < minimumInputRef.current) {
             //reset state
             setIsLoading(false);
-            setOptions((0, helpers_1.initGroupOptions)(groupConfig));
+            var emptyOptions = (0, helpers_1.initGroupOptions)(groupConfig);
+            sortedOptionsRef.current = emptyOptions;
+            setOptions(emptyOptions);
             pageRef.current = {};
             completeRef.current = {};
             setResultCountMap({});

package/asyncSelect/hooks/useAsyncSelect.js

@@ -15,7 +15,7 @@ var useAsyncOptionHandlers_1 = require("./useAsyncOptionHandlers");
 var useResolveSelectedOptions_1 = require("./useResolveSelectedOptions");
 //helpers
 var helpers_1 = require("../helpers");
-var utils_1 = require("baseui/select/utils");
+var utils_1 = require("../../baseui/select/utils");
 var helpers_2 = require("../../helpers");
 //utils
 var overrides_1 = require("../../overrides");
@@ -25,31 +25,33 @@ var EMPTY_OBJ = {};
 var useAsyncSelect = function (params) {
     var loadOptions = params.loadOptions, searchingText = params.searchingText, paginationBuffer = params.paginationBuffer, debounceInterval = params.debounceInterval, resolveSelectedOptions = params.resolveSelectedOptions, _a = params.minimumInput, minimumInput = _a === void 0 ? 0 : _a, _b = params.loadOnMount, loadOnMount = _b === void 0 ? false : _b, _c = params.loadOnFocus, loadOnFocus = _c === void 0 ? false : _c, _d = params.initialOptions, initialOptions = _d === void 0 ? EMPTY_OBJ : _d, _e = params.listenAllInputChanges, listenAllInputChanges = _e === void 0 ? true : _e, groupConfig = params.groupConfig, resolveValuesOnUpdate = params.resolveValuesOnUpdate, hideUnresolvedValues = params.hideUnresolvedValues, _f = params.moveSelectedOptionsToTop, moveSelectedOptionsToTop = _f === void 0 ? false : _f, 
     //selectProps
-    onInputChange = params.onInputChange, noResultsMsg = params.noResultsMsg, overrides = params.overrides, groupedValue = params.value, controlRef = params.controlRef, propsInputRef = params.inputRef, propsCreateOption = params.createOption, _g = params.valueKey, valueKey = _g === void 0 ? default_props_1.default.valueKey : _g, _h = params.labelKey, labelKey = _h === void 0 ? default_props_1.default.labelKey : _h, propsOnChange = params.onChange, restSelectProps = (0, tslib_1.__rest)(params, ["loadOptions", "searchingText", "paginationBuffer", "debounceInterval", "resolveSelectedOptions", "minimumInput", "loadOnMount", "loadOnFocus", "initialOptions", "listenAllInputChanges", "groupConfig", "resolveValuesOnUpdate", "hideUnresolvedValues", "moveSelectedOptionsToTop", "onInputChange", "noResultsMsg", "overrides", "value", "controlRef", "inputRef", "createOption", "valueKey", "labelKey", "onChange"]);
+    onInputChange = params.onInputChange, noResultsMsg = params.noResultsMsg, overrides = params.overrides, groupedValue = params.value, controlRef = params.controlRef, propsInputRef = params.inputRef, propsCreateOption = params.createOption, _g = params.valueKey, valueKey = _g === void 0 ? default_props_1.default.valueKey : _g, _h = params.labelKey, labelKey = _h === void 0 ? default_props_1.default.labelKey : _h, propsOnChange = params.onChange, onOpen = params.onOpen, filterOptions = params.filterOptions, restSelectProps = (0, tslib_1.__rest)(params, ["loadOptions", "searchingText", "paginationBuffer", "debounceInterval", "resolveSelectedOptions", "minimumInput", "loadOnMount", "loadOnFocus", "initialOptions", "listenAllInputChanges", "groupConfig", "resolveValuesOnUpdate", "hideUnresolvedValues", "moveSelectedOptionsToTop", "onInputChange", "noResultsMsg", "overrides", "value", "controlRef", "inputRef", "createOption", "valueKey", "labelKey", "onChange", "onOpen", "filterOptions"]);
     var locale = (0, locale_1.useLocale)();
     var loadOnMountRef = (0, useLatest_1.useLatest)(loadOnMount);
     var _j = (0, tslib_1.__read)((0, react_1.useState)(function () {
         return (0, helpers_1.mergeOptions)(initialOptions, (0, helpers_1.initGroupOptions)(groupConfig));
     }), 2), options = _j[0], setOptions = _j[1];
+    var sortedOptionsRef = (0, react_1.useRef)({});
     var _k = (0, tslib_1.__read)((0, react_1.useState)(function () {
         return (0, keyBy_1.default)((0, utils_1.normalizeOptions)(initialOptions), valueKey);
     }), 2), allOptionsMap = _k[0], setAllOptionsMap = _k[1];
     var _l = (0, tslib_1.__read)((0, react_1.useState)(null), 2), inputElement = _l[0], setInputElement = _l[1];
     var inputRef = (0, useLatest_1.useLatest)(inputElement);
     var combinedRef = (0, useCombinedRef_1.default)(setInputElement, propsInputRef);
-    var _m = (0, tslib_1.__read)((0, react_1.useState)(null), 2), rootRef = _m[0], setRootRef = _m[1];
-    var _o = (0, tslib_1.__read)((0, react_1.useState)(null), 2), popoverRef = _o[0], setPopoverRef = _o[1];
-    var _p = (0, useResolveSelectedOptions_1.useResolveSelectedOptions)({
+    var rootRef = (0, react_1.useRef)(null);
+    var popoverRef = (0, react_1.useRef)(null);
+    var _m = (0, useResolveSelectedOptions_1.useResolveSelectedOptions)({
         groupedValue: groupedValue,
         valueKey: valueKey,
         inputRef: inputRef,
         allOptionsMap: allOptionsMap,
+        sortedOptionsRef: sortedOptionsRef,
         setOptions: setOptions,
         setAllOptionsMap: setAllOptionsMap,
         resolveValuesOnUpdate: resolveValuesOnUpdate,
         resolveSelectedOptions: resolveSelectedOptions,
-    }), unresolvedGroupedValueKeys = _p.unresolvedGroupedValueKeys, isResolvingValues = _p.isResolvingValues;
-    var _q = (0, tslib_1.__read)((0, react_1.useState)(loadOnMount), 2), _isLoading = _q[0], setIsLoading = _q[1];
+    }), unresolvedGroupedValueKeys = _m.unresolvedGroupedValueKeys, isResolvingValues = _m.isResolvingValues;
+    var _o = (0, tslib_1.__read)((0, react_1.useState)(loadOnMount), 2), _isLoading = _o[0], setIsLoading = _o[1];
     var isLoading = isResolvingValues || _isLoading;
     var unresolvedValueKeysRef = (0, react_1.useRef)([]);
     var selectedOptions = (0, react_1.useMemo)(function () {
@@ -94,7 +96,7 @@ var useAsyncSelect = function (params) {
         allOptionsMap,
         hideUnresolvedValues,
     ]);
-    var _r = (0, useAsyncOptionHandlers_1.useAsyncOptionHandlers)({
+    var _p = (0, useAsyncOptionHandlers_1.useAsyncOptionHandlers)({
         valueKey: valueKey,
         isLoading: isLoading,
         minimumInput: minimumInput,
@@ -102,13 +104,14 @@ var useAsyncSelect = function (params) {
         inputRef: inputRef,
         setAllOptionsMap: setAllOptionsMap,
         setIsLoading: setIsLoading,
+        sortedOptionsRef: sortedOptionsRef,
         setOptions: setOptions,
         loadOptions: loadOptions,
         createOption: propsCreateOption,
         groupConfig: groupConfig,
         selectedOptions: selectedOptions,
         moveSelectedOptionsToTop: moveSelectedOptionsToTop,
-    }), fetchOptions = _r.fetchOptions, onPaginate = _r.onPaginate, inputChangeHandlerToDebounce = _r.onInputChange, createOption = _r.createOption, resultCountMap = _r.resultCountMap;
+    }), fetchOptions = _p.fetchOptions, onPaginate = _p.onPaginate, inputChangeHandlerToDebounce = _p.onInputChange, createOption = _p.createOption, resultCountMap = _p.resultCountMap;
     var _onInputChange = (0, useInputChangeHandler_1.useInputChangeHandler)({
         inputElement: inputElement,
         listenAllInputChanges: listenAllInputChanges,
@@ -118,15 +121,18 @@ var useAsyncSelect = function (params) {
     });
     /************************************************ HANDLING FOCUS ****************************************************/
     var handleFocus = (0, react_1.useCallback)(function (event) {
+        var _a, _b;
         /**
          * 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))) {
+        if (loadOnFocus &&
+            !((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(lastFocusedNode)) &&
+            !((_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.contains(lastFocusedNode))) {
             inputChangeHandlerToDebounce();
         }
-    }, [loadOnFocus, inputChangeHandlerToDebounce, rootRef, popoverRef]);
+    }, [loadOnFocus, inputChangeHandlerToDebounce]);
     /******************************************* HANDLING FETCH ON MOUNT ************************************************/
     (0, react_1.useEffect)(function () {
         if (loadOnMountRef.current) {
@@ -145,9 +151,10 @@ var useAsyncSelect = function (params) {
         minimumInput: minimumInput,
         searchingText: searchingText !== null && searchingText !== void 0 ? searchingText : locale.asyncSelect.searchingText,
         emptyInputMsg: locale.asyncSelect.emptyInputMsg,
+        searchable: restSelectProps.searchable,
     });
     var mergedOverrides = (0, react_1.useMemo)(function () {
-        return (0, overrides_1.mergeOverrides)((0, tslib_1.__assign)({ Root: { props: { ref: setRootRef, onFocus: handleFocus } }, Popover: { props: { overrides: { Inner: { props: { ref: setPopoverRef } } } } }, StatefulMenu: { props: { $onPaginate: onPaginate } }, NoResults: { props: (0, helpers_2.add$props)({ isLoading: isLoading, inputText: inputText, adaptedNoResultsMsg: adaptedNoResultsMsg }) } }, (params.type === 'overlay'
+        return (0, overrides_1.mergeOverrides)((0, tslib_1.__assign)({ Root: { props: { ref: rootRef, onFocus: handleFocus } }, Popover: { props: { overrides: { Inner: { props: { ref: popoverRef } } } } }, StatefulMenu: { props: { $onPaginate: onPaginate } }, NoResults: { props: (0, helpers_2.add$props)({ isLoading: isLoading, inputText: inputText, adaptedNoResultsMsg: adaptedNoResultsMsg }) } }, (params.type === 'overlay'
             ? {
                 // In overlaySelect, overflow property is on OverlayContentContainer
                 OverlayContentContainer: { props: { onScroll: onPaginate } },
@@ -174,9 +181,16 @@ var useAsyncSelect = function (params) {
                         _b);
                 })), false), (0, tslib_1.__read)(onChangeParams.value), false) : onChangeParams.value }));
     }, [propsOnChange, valueKey, labelKey]);
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({ children: undefined }, restSelectProps), { options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: combinedRef, overrides: mergedOverrides, noResultsMsg: adaptedNoResultsMsg, createOption: createOption, onInputChange: _onInputChange, valueKey: valueKey, labelKey: labelKey, type: restSelectProps.type, resultCountMap: resultCountMap, onChange: onChange, onOpen: function () {
-            moveSelectedOptionsToTop && setOptions(function (prev) { return (0, helpers_1.mergeOptions)((selectedOptions || []), prev); });
-            restSelectProps.onOpen && restSelectProps.onOpen();
-        } });
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({ children: undefined }, restSelectProps), { options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: combinedRef, overrides: mergedOverrides, noResultsMsg: adaptedNoResultsMsg, createOption: createOption, onInputChange: _onInputChange, valueKey: valueKey, labelKey: labelKey, type: restSelectProps.type, resultCountMap: resultCountMap, onChange: onChange, onOpen: (0, react_1.useCallback)(function () {
+            moveSelectedOptionsToTop &&
+                setOptions((0, helpers_1.mergeOptions)((selectedOptions || []), sortedOptionsRef.current || []));
+            onOpen && onOpen();
+        }, [moveSelectedOptionsToTop, onOpen, selectedOptions]), filterOptions: (0, react_1.useCallback)(function () {
+            var param = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                param[_i] = arguments[_i];
+            }
+            return (filterOptions ? filterOptions.apply(void 0, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(param), false)) : param[0]);
+        }, [filterOptions]) });
 };
 exports.useAsyncSelect = useAsyncSelect;

package/asyncSelect/hooks/useResolveSelectedOptions.d.ts

@@ -13,8 +13,9 @@ interface UseResolveSelectedOptionsArgs {
     inputRef: MutableRefObject<HTMLInputElement | null>;
     setOptions: SetStateFunc<GroupedOptions>;
     setAllOptionsMap: SetStateFunc<AllOptionsMap>;
+    sortedOptionsRef: MutableRefObject<GroupedOptions>;
 }
-declare const useResolveSelectedOptions: ({ groupedValue, valueKey, allOptionsMap, resolveValuesOnUpdate, resolveSelectedOptions, inputRef, setOptions, setAllOptionsMap, }: UseResolveSelectedOptionsArgs) => {
+declare const useResolveSelectedOptions: ({ groupedValue, valueKey, allOptionsMap, resolveValuesOnUpdate, resolveSelectedOptions, inputRef, setOptions, sortedOptionsRef, setAllOptionsMap, }: UseResolveSelectedOptionsArgs) => {
     isResolvingValues: boolean;
     unresolvedGroupedValueKeys: Record<string, Id[]>;
 };

package/asyncSelect/hooks/useResolveSelectedOptions.js

@@ -14,7 +14,7 @@ var useFirstMountState_1 = require("../../hooks/useFirstMountState");
 //helpers
 var helpers_1 = require("../helpers");
 var useResolveSelectedOptions = function (_a) {
-    var groupedValue = _a.groupedValue, valueKey = _a.valueKey, allOptionsMap = _a.allOptionsMap, resolveValuesOnUpdate = _a.resolveValuesOnUpdate, resolveSelectedOptions = _a.resolveSelectedOptions, inputRef = _a.inputRef, setOptions = _a.setOptions, setAllOptionsMap = _a.setAllOptionsMap;
+    var groupedValue = _a.groupedValue, valueKey = _a.valueKey, allOptionsMap = _a.allOptionsMap, resolveValuesOnUpdate = _a.resolveValuesOnUpdate, resolveSelectedOptions = _a.resolveSelectedOptions, inputRef = _a.inputRef, setOptions = _a.setOptions, sortedOptionsRef = _a.sortedOptionsRef, setAllOptionsMap = _a.setAllOptionsMap;
     var isFirstMount = (0, useFirstMountState_1.useFirstMountState)();
     var unresolvedValuesResults = (0, react_1.useRef)({
         unresolvedGroupedValueKeys: {},
@@ -58,7 +58,8 @@ var useResolveSelectedOptions = function (_a) {
                         //Inject the resolved selected options into the options state
                         // 1. Only if currently shown options are not filtered i.e. user input text is empty (All options need to be shown)
                         if (!(0, helpers_1.getInputValue)(inputRef)) {
-                            setOptions(function (prevOptions) { return (0, helpers_1.mergeOptions)(prevOptions, options_1); });
+                            sortedOptionsRef.current = (0, helpers_1.mergeOptions)(sortedOptionsRef.current, options_1);
+                            setOptions((0, helpers_1.mergeOptions)(sortedOptionsRef.current, options_1));
                         }
                         return [3 /*break*/, 4];
                     case 3:

package/asyncSelect/types.d.ts

@@ -19,12 +19,7 @@ export declare type LoadOptions = (input: string, groupFilters: {
     }>;
 }>;
 export declare type AsyncSelectValue = Array<Id | Option> | Value;
-/**
- * NOTE:
- *   AsyncSelect does not support select all option
- *   removed the support of these props in AsyncSelect
- */
-declare type BaseAsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' | 'hideSelectAll' | 'value' | 'onChange' | 'scrollContainer'> & {
+declare type BaseAsyncSelectProps = Omit<SelectProps, 'isLoading' | 'options' | 'value' | 'onChange' | 'scrollContainer'> & {
     paginationBuffer?: number;
     searchingText?: ReactNode;
     minimumInput?: number;

package/avatar/avatar.js

@@ -25,8 +25,7 @@ function getInitials(name) {
 }
 //If Image is already available in disk cache, then we should directly set isImageLoaded state to true, to avoid flicker between initials and avatar.
 var getIsImageLoaded = function (src) {
-    var isServer = typeof window === 'undefined';
-    if (!src || isServer) {
+    if (!src) {
         return false;
     }
     var imageEl = new Image();
@@ -39,40 +38,45 @@ var Icon = function (_a) {
     return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ className: ['h-full w-full flex items-center justify-center', className] }, props, { children: (0, jsx_runtime_1.jsx)(UserIcon, (0, tslib_1.__assign)({ "data-testid": "user-icon", className: "w-1/2 h-1/2" }, iconProps), void 0) }), void 0));
 };
 var Avatar = function (props) {
-    var _a = (0, tslib_1.__read)((0, react_1.useState)(null), 2), imageRef = _a[0], setImageRef = _a[1];
+    var _a = (0, tslib_1.__read)((0, react_1.useState)(null), 2), imageEl = _a[0], setImageEl = _a[1];
     var _b = props.shape, shape = _b === void 0 ? 'circle' : _b, _c = props.size, size = _c === void 0 ? 'md' : _c, className = props.className, color = props.color, allowPhoneInitials = props.allowPhoneInitials, name = props.name, overrides = props.overrides, initials = props.initials, src = props.src;
-    var _d = (0, tslib_1.__read)((0, react_1.useState)(function () { return getIsImageLoaded(src); }), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
+    var _d = (0, tslib_1.__read)((0, react_1.useState)(), 2), imageLoaded = _d[0], setImageLoaded = _d[1];
     var displayName = (0, cleanupDisplayName_1.cleanupDisplayName)(name);
     var randomBgColor = (0, useAvatarColor_1.useAvatarColor)(displayName);
     var isPhoneNumber = PHONENUMBER_REGEX.test(displayName);
     var px2rem = (0, style_1.useStyle)().px2rem;
     var avatarSize = typeof size === 'string' ? styled_component_1.avatarSizeConfig[size].size : px2rem(size);
-    var sharedProps = (0, tslib_1.__assign)({ $avatarSize: size, $color: color || randomBgColor, $didImageFailToLoad: !imageLoaded }, (0, helpers_1.add$props)({ shape: shape, imageLoaded: imageLoaded }));
+    var _initials = initials || getInitials(displayName);
+    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({ $avatarSize: size, $color: color || randomBgColor, $didImageFailToLoad: !imageLoaded }, (0, helpers_1.add$props)({ shape: shape, imageLoaded: imageLoaded })), { $isSingleLetterInitial: _initials.length === 1 });
     (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
-        if (!imageRef || !src) {
+        if (!imageEl) {
+            setImageLoaded(getIsImageLoaded(src));
+            return undefined;
+        }
+        if (!src) {
             setImageLoaded(false);
             return undefined;
         }
-        if (imageRef) {
-            imageRef.onload = function () { return setImageLoaded(true); };
-            imageRef.onerror = function () { return setImageLoaded(false); };
+        if (imageEl) {
+            imageEl.onload = function () { return setImageLoaded(true); };
+            imageEl.onerror = function () { return setImageLoaded(false); };
             /**
              * Important to set src once onload listener is attached.
              * In some cases, image loads before these listeners are attached.
              */
-            imageRef.src = src;
+            imageEl.src = src;
         }
         return function () {
-            if (imageRef) {
-                imageRef.onload = null;
-                imageRef.onerror = null;
+            if (imageEl) {
+                imageEl.onload = null;
+                imageEl.onerror = null;
             }
         };
-    }, [src, imageRef]);
+    }, [src, imageEl]);
     var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1];
     var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Avatar, styled_component_1.StyledAvatar), 2), AvatarImage = _f[0], avatarImageProps = _f[1];
     var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Initials, styled_component_1.StyledInitials), 2), Initials = _g[0], initialsProps = _g[1];
     return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "aria-label": imageLoaded ? null : name, className: className, "data-spaceweb": "avatar", "$size": avatarSize }, sharedProps, rootProps, { children: [!imageLoaded &&
-                (isPhoneNumber && !allowPhoneInitials ? ((0, jsx_runtime_1.jsx)(Icon, (0, tslib_1.__assign)({ overrides: overrides }, sharedProps, initialsProps), void 0)) : ((0, jsx_runtime_1.jsx)(Initials, (0, tslib_1.__assign)({}, sharedProps, initialsProps, { children: initials || getInitials(displayName) }), void 0))), (0, jsx_runtime_1.jsx)(AvatarImage, (0, tslib_1.__assign)({ ref: setImageRef, src: src, alt: name, "$size": avatarSize }, sharedProps, avatarImageProps), void 0)] }), void 0));
+                (isPhoneNumber && !allowPhoneInitials ? ((0, jsx_runtime_1.jsx)(Icon, (0, tslib_1.__assign)({ overrides: overrides }, sharedProps, initialsProps), void 0)) : ((0, jsx_runtime_1.jsx)(Initials, (0, tslib_1.__assign)({}, sharedProps, initialsProps, { children: _initials }), void 0))), (0, jsx_runtime_1.jsx)(AvatarImage, (0, tslib_1.__assign)({ ref: setImageEl, src: src, alt: name, "$size": avatarSize }, sharedProps, avatarImageProps), void 0)] }), void 0));
 };
 exports.Avatar = Avatar;

package/avatar/styled-component.js

@@ -12,21 +12,33 @@ exports.avatarSizeConfig = {
     xxl: { size: '84px', rectangleBorderRadius: '12px', fontSize: '42px' },
     xxxl: { size: '96px', rectangleBorderRadius: '12px', fontSize: '48px' },
 };
-var getSizeConfig = function (size) { var _a; return (_a = exports.avatarSizeConfig[size]) !== null && _a !== void 0 ? _a : exports.avatarSizeConfig.md; };
-var getFontSize = function (size) { return "".concat(size / 2, "px"); };
+var getRectangleBorderRadius = function (size) {
+    var _a, _b;
+    if (typeof size === 'number') {
+        return "".concat(Math.ceil(Number(size) / 4), "px");
+    }
+    return (_b = (_a = exports.avatarSizeConfig[size]) === null || _a === void 0 ? void 0 : _a.rectangleBorderRadius) !== null && _b !== void 0 ? _b : exports.avatarSizeConfig.md.rectangleBorderRadius;
+};
+var getFontSize = function (size, isSingleLetterInitial) {
+    var _size = typeof size === 'number' ? size : parseFloat(exports.avatarSizeConfig[size].size);
+    if (isSingleLetterInitial) {
+        return _size > 17 ? "".concat(Math.max(13, _size * 0.6), "px") : "".concat(_size * 0.75, "px");
+    }
+    else {
+        return "".concat(_size / 2, "px");
+    }
+};
 exports.StyledAvatarGroup = (0, styled_1.default)('div', 'flex');
 exports.StyledRoot = (0, styled_1.default)('div', 'box-border inline-block', function (_, _a) {
     var $shape = _a.$shape, $color = _a.$color, $didImageFailToLoad = _a.$didImageFailToLoad, $avatarSize = _a.$avatarSize, $size = _a.$size;
-    var avatarSizeTheme = getSizeConfig($avatarSize);
-    var borderRadius = $shape === 'circle' ? '50%' : avatarSizeTheme.rectangleBorderRadius;
+    var borderRadius = $shape === 'circle' ? '50%' : getRectangleBorderRadius($avatarSize);
     return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)(borderRadius)), { background: $didImageFailToLoad ? $color : undefined, height: $didImageFailToLoad ? $size : undefined, width: $didImageFailToLoad ? $size : undefined });
 });
-exports.StyledInitials = (0, styled_1.default)('div', 'items-center justify-center h-full flex font-semibold spr-text-01', function (_, _a) {
-    var $avatarSize = _a.$avatarSize;
-    var fontSize = typeof $avatarSize === 'number' ? getFontSize($avatarSize) : getSizeConfig($avatarSize).fontSize;
-    return {
-        fontSize: fontSize,
-    };
+exports.StyledInitials = (0, styled_1.default)('div', 'items-center justify-center h-full flex font-medium spr-text-01', function (_, _a) {
+    var $avatarSize = _a.$avatarSize, $isSingleLetterInitial = _a.$isSingleLetterInitial;
+    return ({
+        fontSize: getFontSize($avatarSize, $isSingleLetterInitial),
+    });
 });
 // borderRadius should be inherited
 exports.StyledAvatar = (0, styled_1.default)('img', 'box-border object-cover', function (_, _a) {

package/avatar/types.d.ts

@@ -29,6 +29,7 @@ export declare type AvatarSharedProps = {
     $shape: Shape;
     $color?: string;
     $avatarSize: string;
+    $isSingleLetterInitial: boolean;
 };
 declare type AvatarOverrides = {
     Root?: Override<AvatarSharedProps & Record<string, any>>;

package/badge/types.d.ts

@@ -16,7 +16,7 @@ export declare type BadgeProps = {
     };
 };
 export declare type SharedProps = {
-    $content?: React.ReactNode;
+    $content?: BadgeProps['content'];
     $horizontalPosition: 'left' | 'right';
     $verticalPosition: 'top' | 'bottom';
     $overlap: Overlap;