@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/esm/select/selectMenuAdapter/CollapsibleSelectMenu.js

@@ -1,6 +1,7 @@
 import { __assign, __read } from "tslib";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import _isNumber from 'lodash/isNumber';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useGetExpandedGroup } from './hooks/useGetExpandedGroup';
 import { Box } from '../../box';
 import { Menu } from '../../menu';
@@ -15,19 +16,24 @@ import { UNGROUPED_ID } from '../constants';
 import { BaseButton } from '../../base-button';
 import ChevronDown from '../../icon/components/chevron-down';
 import { chevronStyles } from '../../helpers/commonStyles';
+import { getNextItemIndexToHighlight, nextItem, prevItem } from '../../menu/helpers';
+import { Collapse } from '../../transitions/collapse';
 var Collapsible = function (_a) {
-    var _b;
-    var children = _a.children, group = _a.group, expanded = _a.expanded, onClick = _a.onClick, disabled = _a.disabled;
+    var children = _a.children, group = _a.group, expanded = _a.expanded, onClick = _a.onClick, disabled = _a.disabled, isFirstGroupedHeader = _a.isFirstGroupedHeader;
     return (_jsxs(Box, __assign({ className: { borderRadius: 'inherit' } }, { children: [_jsxs(BaseButton, __assign({ disabled: disabled, onClick: function () { return onClick(group.id); }, className: [
-                    'w-full flex justify-between items-center py-2 pl-4 pr-3 border-t-1 border-b-1 border-solid spr-border-01 disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-none',
-                    expanded ? 'border-b-1' : 'border-b-0',
-                ], type: "button" }, { children: [_jsxs(Typography, __assign({ className: "block", variant: "h7" }, { children: [(_b = group.count) !== null && _b !== void 0 ? _b : '', " ", group.label] }), void 0), _jsx(ChevronDown, { style: chevronStyles, "$isOpen": expanded, "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") }, void 0)] }), void 0), expanded ? children : null] }), void 0));
+                    'w-full flex justify-between items-center py-2 pl-3 pr-3 border-t-1 border-b-1 border-solid spr-border-01 disabled:opacity-60 disabled:cursor-not-allowed focus-visible:outline-none',
+                    expanded ? '' : 'border-b-0',
+                    isFirstGroupedHeader ? 'border-t-0' : '',
+                ], type: "button" }, { children: [_jsxs(Typography, __assign({ className: "block", variant: "h7" }, { children: [group.label, " ", _isNumber(group.count) ? "(".concat(group.count, ")") : ''] }), void 0), _jsx(ChevronDown, { style: chevronStyles, "$isOpen": expanded, "data-testid": expanded ? "".concat(group.id, "-expanded") : "".concat(group.id, "-collapsed") }, void 0)] }), void 0), _jsx(Collapse, __assign({ unmountOnExit: true, mountOnEnter: true, visible: expanded }, { children: children }), void 0)] }), void 0));
 };
 export var CollapsibleSelectMenu = function (_a) {
     var _b, _c, _d, _e;
-    var overrides = _a.overrides, value = _a.value, groupedItems = _a.items, multi = _a.multi, labelKey = _a.labelKey, valueKey = _a.valueKey, onItemSelect = _a.onItemSelect, shouldDisplaySelectAll = _a.shouldDisplaySelectAll, selectAllChecked = _a.selectAllSelected, noResultsMsg = _a.noResultsMsg, $onPaginate = _a.$onPaginate, groupConfig = _a.groupConfig, virtual = _a.virtual, clearAsOption = _a.clearAsOption, selectOnTab = _a.selectOnTab;
+    var overrides = _a.overrides, value = _a.value, groupedItems = _a.items, multi = _a.multi, labelKey = _a.labelKey, valueKey = _a.valueKey, onItemSelect = _a.onItemSelect, shouldDisplaySelectAll = _a.shouldDisplaySelectAll, selectAllChecked = _a.selectAllSelected, noResultsMsg = _a.noResultsMsg, $onPaginate = _a.$onPaginate, groupConfig = _a.groupConfig, virtual = _a.virtual, clearAsOption = _a.clearAsOption, selectOnTab = _a.selectOnTab, inputRef = _a.inputRef;
     var selectAllSelected = !!shouldDisplaySelectAll && selectAllChecked;
     var _f = __read(useGetExpandedGroup({ groupConfig: groupConfig, groupedItems: groupedItems }), 2), expandedGroupId = _f[0], setExpandedGroupId = _f[1];
+    var _g = __read(useState(false), 2), isFirstItemHighlighted = _g[0], setIsFirstItemHighlighted = _g[1];
+    var _h = __read(useState(false), 2), isLastItemHighlighted = _h[0], setIsLastItemHighlighted = _h[1];
+    var menuRef = useRef(null);
     var selectedValuesSet = useMemo(function () {
         var set = new Set(_map(value, valueKey));
         return set;
@@ -48,21 +54,46 @@ export var CollapsibleSelectMenu = function (_a) {
         baseuiMenuListProps = listOverride.props;
     }
     var mergedOverrides = useMemo(function () { return mergeOverrides(selectMenuOverrides, overrides); }, [overrides]);
-    var _g = __read(useOverrides(mergedOverrides.Menu, Menu), 2), MenuComponent = _g[0], menuProps = _g[1];
-    var _h = __read(useOverrides(mergedOverrides.NoResults, NoResults), 2), NoResultsOverriden = _h[0], noResultsProps = _h[1];
+    var _j = __read(useOverrides(mergedOverrides.Menu, Menu), 2), MenuComponent = _j[0], menuProps = _j[1];
+    var _k = __read(useOverrides(mergedOverrides.NoResults, NoResults), 2), NoResultsOverriden = _k[0], noResultsProps = _k[1];
     var menuItemOverrides = useMemo(function () { return ({
         MenuItem: mergedOverrides.MenuItem,
         ListItemText: mergedOverrides.ListItemText,
     }); }, [mergedOverrides.ListItemText, mergedOverrides.MenuItem]);
+    useEffect(function () {
+        var inputElement = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+        var keydownHandler = function (event) {
+            var expandedGroupIndex = Math.max(groupConfig.findIndex(function (group) { return group.id === expandedGroupId; }), 0);
+            if (event.key === 'ArrowDown' && (event.shiftKey || isLastItemHighlighted)) {
+                setExpandedGroupId(groupConfig[Math.min(expandedGroupIndex + 1, groupConfig.length - 1)].id);
+                event.stopPropagation(); // prevents the menu to move to the second item of the next group
+            }
+            else if (event.key === 'ArrowUp' && (event.shiftKey || isFirstItemHighlighted)) {
+                setExpandedGroupId(groupConfig[Math.max(expandedGroupIndex - 1, 0)].id);
+            }
+        };
+        inputElement === null || inputElement === void 0 ? void 0 : inputElement.addEventListener('keydown', keydownHandler);
+        return function () {
+            inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener('keydown', keydownHandler);
+        };
+    }, [inputRef, expandedGroupId, groupConfig, setExpandedGroupId, isFirstItemHighlighted, isLastItemHighlighted]);
+    var handleOnHighlightedItemChange = function (item) {
+        var _a, _b;
+        var nextHighlightableElement = getNextItemIndexToHighlight(item !== null && item !== void 0 ? item : null, menuRef.current, nextItem);
+        var prevHighlightableElement = getNextItemIndexToHighlight(item !== null && item !== void 0 ? item : null, menuRef.current, prevItem);
+        setIsFirstItemHighlighted(!!(item && (!item.previousSibling || item === prevHighlightableElement)));
+        setIsLastItemHighlighted(!!(item && (!item.nextSibling || item === nextHighlightableElement)));
+        (_b = (_a = menuProps) === null || _a === void 0 ? void 0 : _a.onHighlightedItemChange) === null || _b === void 0 ? void 0 : _b.call(_a, item);
+    };
     var selectAllItem = shouldDisplaySelectAll ? groupedItems[UNGROUPED_ID][0] : null;
     var clearAsOptionItem = !multi && clearAsOption ? groupedItems[UNGROUPED_ID][0] : null;
-    return (_jsxs(Box, __assign({ className: { borderRadius: 'inherit' } }, { children: [selectAllItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: selectAllItem, selected: selectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": selectAllItem, button: true }, baseuiMenuItemProps, { className: ['mt-1 mx-1', baseuiMenuItemProps === null || baseuiMenuItemProps === void 0 ? void 0 : baseuiMenuItemProps.className] }), "select-all-option")) : null, groupConfig.map(function (group) {
+    return (_jsxs(Box, __assign({ className: { borderRadius: 'inherit' } }, { children: [selectAllItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: selectAllItem, selected: selectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": selectAllItem, button: true }, baseuiMenuItemProps, { className: ['mt-1 mx-1', baseuiMenuItemProps === null || baseuiMenuItemProps === void 0 ? void 0 : baseuiMenuItemProps.className] }), "select-all-option")) : null, groupConfig.map(function (group, index) {
                 var _a;
                 var groupId = group.id;
                 var itemsInGroup = groupedItems[groupId];
-                return (_jsx(Collapsible, __assign({ group: group, expanded: selectAllSelected ? false : groupId === expandedGroupId, disabled: selectAllSelected, onClick: function (newGroupId) { return setExpandedGroupId(function (prev) { return (prev === newGroupId ? undefined : newGroupId); }); } }, { children: _isEmpty(itemsInGroup) ? (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, "aria-disabled": true, "$groupId": groupId }, noResultsProps), void 0)) : (_jsxs(MenuComponent, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, tabIndex: -1, selectOnTab: selectOnTab }, menuProps, { virtual: virtual, className: ['overflow-auto', { maxHeight: '200px' }, (_a = menuProps) === null || _a === void 0 ? void 0 : _a.className], onScroll: function (e) {
+                return (_jsx(Collapsible, __assign({ isFirstGroupedHeader: index === 0, group: group, expanded: selectAllSelected ? false : groupId === expandedGroupId, disabled: selectAllSelected, onClick: function (newGroupId) { return setExpandedGroupId(function (prev) { return (prev === newGroupId ? undefined : newGroupId); }); } }, { children: _isEmpty(itemsInGroup) ? (_jsx(NoResultsOverriden, __assign({ "aria-live": "polite", "aria-atomic": true, msg: noResultsMsg, "aria-disabled": true, "$groupId": groupId }, noResultsProps), void 0)) : (_jsxs(MenuComponent, __assign({ resetMenuHighlightOnMouseLeave: true, focusWhenNavigationEnabled: false, tabIndex: -1, selectOnTab: selectOnTab }, menuProps, { virtual: virtual, className: ['overflow-auto', { maxHeight: '200px' }, (_a = menuProps) === null || _a === void 0 ? void 0 : _a.className], onScroll: function (e) {
                             $onPaginate === null || $onPaginate === void 0 ? void 0 : $onPaginate(e, groupId);
-                        } }, { children: [clearAsOptionItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: clearAsOptionItem, selected: selectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": clearAsOptionItem, button: true }, baseuiMenuItemProps), "clear-option")) : null, itemsInGroup.map(function (item) {
+                        }, onHighlightedItemChange: handleOnHighlightedItemChange, ref: menuRef }, { children: [clearAsOptionItem ? (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: clearAsOptionItem, selected: selectAllSelected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": clearAsOptionItem, button: true }, baseuiMenuItemProps), "clear-option")) : null, itemsInGroup.map(function (item) {
                                 var selected = selectedValuesSet.has(item[valueKey]);
                                 return (_jsx(SelectMenuItem, __assign({ overrides: menuItemOverrides, item: item, selected: selected, multi: multi, getItemLabel: getItemLabel, labelKey: labelKey, valueKey: valueKey, onItemSelect: onItemSelect, "$item": item, button: true }, baseuiMenuItemProps), item.isCreatable ? 'creatable-option' : item[valueKey]));
                             })] }), void 0)) }), groupId));

package/esm/select/selectMenuAdapter/SelectMenuAdapter.js

@@ -15,7 +15,7 @@ import { selectMenuOverrides } from '../overrides';
 import { NoResults } from '../styled-component';
 import { SELECT_ALL_ID } from '../types';
 import SelectMenuItem from './SelectMenuItem';
-import { normalizeOptions } from 'baseui/select/utils';
+import { normalizeOptions } from '../../baseui/select/utils';
 var removeUngroupedIfEmpty = function (groupedOptions) {
     var _a;
     if (!((_a = groupedOptions[UNGROUPED_ID]) === null || _a === void 0 ? void 0 : _a.length)) {

package/esm/select/selectMenuAdapter/SelectMenuItem.d.ts

@@ -8,7 +8,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     getItemLabel: (item: Record<string, any>) => React.ReactNode;
     onItemSelect: (item: Record<string, any>) => void;
     overrides?: {
-        MenuItem?: Override<Omit<import("../../list").ListItemProps, "overrides" | "onMouseEnter" | "onMouseLeave"> & {
+        MenuItem?: Override<Omit<import("../../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
             getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
             onMouseEnter?: (() => void) | undefined;
             onMouseLeave?: (() => void) | undefined;
@@ -36,9 +36,9 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
                     } | undefined;
                     selected?: boolean | undefined;
                     startEnhancer?: import("../../list/types").Enhancer<import("../../list").ListItemSharedProps>;
-                    tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
+                    tooltipContent?: React.ReactNode | import("../../baseui/popover").StatefulContentRenderProp;
                 } & Record<string, any>> | undefined;
-                Popover?: Override<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
+                Popover?: Override<Omit<import("../../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
                     overrides?: ({
                         Body?: Override<any> | undefined;
                         Arrow?: Override<any> | undefined;

package/esm/select/selectMenuAdapter/hooks/useGetExpandedGroup.d.ts

@@ -1,5 +1,5 @@
 import type { GroupConfig } from '../types';
-import type { Items } from 'baseui/menu/types';
+import type { Items } from '../../../baseui/menu/types';
 export declare const useGetExpandedGroup: ({ groupConfig, groupedItems, }: {
     groupConfig: GroupConfig;
     groupedItems: Items;

package/esm/select/selectMenuAdapter/hooks/useGetExpandedGroup.js

@@ -1,10 +1,11 @@
 import { __read } from "tslib";
 import { useState } from 'react';
 export var useGetExpandedGroup = function (_a) {
+    var _b;
     var groupConfig = _a.groupConfig, groupedItems = _a.groupedItems;
-    var _b = __read(useState(groupConfig[0].id), 2), expandedGroupId = _b[0], setExpandedGroupId = _b[1];
+    var _c = __read(useState((_b = groupConfig[0]) === null || _b === void 0 ? void 0 : _b.id), 2), expandedGroupId = _c[0], setExpandedGroupId = _c[1];
     // by default open very first group with non zero elements
-    var _c = __read(useState(false), 2), initialised = _c[0], setInitialised = _c[1];
+    var _d = __read(useState(false), 2), initialised = _d[0], setInitialised = _d[1];
     if (!initialised) {
         var validGroup = groupConfig.find(function (group) { var _a; return !!group.count || !!((_a = groupedItems[group.id]) === null || _a === void 0 ? void 0 : _a.length); });
         if (validGroup) {

package/esm/select/selectMenuAdapter/types.d.ts

@@ -1,7 +1,8 @@
 import { SelectProps } from '../types';
 import { Override } from '../../overrides';
 import { MenuItemProps, MenuProps } from '../../menu';
-import { StatefulMenuProps as BaseStatefulMenuProps } from 'baseui/menu/types';
+import { StatefulMenuProps as BaseStatefulMenuProps } from '../../baseui/menu/types';
+import { RefObject } from 'react';
 declare type PropsAddedByOverride = {
     id?: string;
     value: SelectProps['value'];
@@ -32,6 +33,7 @@ declare type PropsAddedByOverride = {
     virtual?: boolean;
     overscanCount?: number;
     selectOnTab?: boolean;
+    inputRef?: RefObject<HTMLInputElement>;
 };
 export declare type MenuAdapterProps = BaseStatefulMenuProps & PropsAddedByOverride;
 export declare type GroupConfig = {

package/esm/select/stateful-select.d.ts

@@ -13,10 +13,10 @@ declare namespace StatefulSelect {
         error: boolean;
         positive: boolean;
         escapeClearsValue: boolean;
-        filterOptions: ((options: import("baseui/select").Value, filterValue: string, excludeOptions: import("baseui/select").Value | null | undefined, a: {
+        filterOptions: ((options: import("./types").Value, filterValue: string, excludeOptions: import("./types").Value | null | undefined, a: {
             valueKey: string;
             labelKey: string;
-        }) => import("baseui/select").Value) | null | undefined;
+        }) => import("./types").Value) | null | undefined;
         filterOutSelected: boolean;
         isLoading: boolean;
         labelKey: string;
@@ -31,12 +31,12 @@ declare namespace StatefulSelect {
         onSelectResetsInput: boolean;
         openOnClick: boolean;
         startOpen: boolean;
-        options: import("baseui/select").Options;
+        options: import("./types").Options;
         overrides: {};
         required: boolean;
         searchable: boolean;
         type: "overlay" | import("./types").Type | "mobile";
-        value: import("baseui/select").Value;
+        value: import("./types").Value;
         valueKey: string;
         placement: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
         virtual: boolean;

package/esm/select/stateful-select.js

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StatefulSelectContainer } from 'baseui/select';
+import { StatefulSelectContainer } from '../baseui/select';
 import OverlaySelect from './overlaySelect';
 import Select from './select';
 import defaultProps from './default-props';

package/esm/select/styled-component.d.ts

@@ -1,8 +1,7 @@
-import { SelectProps } from 'baseui/select';
 import * as React from 'react';
 import { SharedProps, Size } from './types';
-import { Value } from 'baseui/select/types';
-declare const StyledSelect: React.ComponentType<SelectProps>;
+import { Value } from '../baseui/select/types';
+declare const StyledSelect: import("../style/styled").StyledComponent;
 declare const NoResults: React.ForwardRefExoticComponent<{
     msg?: string | undefined;
 } & React.RefAttributes<HTMLElement>>;
@@ -17,13 +16,14 @@ declare const InputContainer: ({ menuId, size, $value, $labelKey, placeholder, .
     placeholder: string;
 } & {
     children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 declare const Input: React.ForwardRefExoticComponent<SharedProps & {
     id: string;
-    menuId: string;
+    $menuId: string;
     placeholder: string;
     $value: Value;
     $labelKey: string;
 } & React.RefAttributes<HTMLInputElement>>;
-export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, } from 'baseui/select';
+export declare const LoadingIndicator: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, } from '../baseui/select';
 export { StyledSelect, NoResults, StyledOverlayContentContainer, InputContainer, Input };

package/esm/select/styled-component.js

@@ -1,22 +1,22 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select as BaseSelect } from 'baseui/select';
+import { Select as BaseSelect } from '../baseui/select';
 import * as React from 'react';
-import withThemeOverride from '../helpers/baseui/withThemeOverride';
-import { borderRadius } from '../helpers/longHandHelpers';
+import { borderRadius, borderWidth } from '../helpers/longHandHelpers';
 import { useLocale } from '../locale';
 import MenuItem from '../menu/menu-item';
 import { styled } from '../style';
 import { getComponentSizeTheme } from '../helpers/themeHelpers';
 import _omit from 'lodash/omit';
-import { useUID } from 'react-uid';
 import { HiddenElement } from './utils/hidden-element';
-import getInterpolatedString from 'baseui/helpers/i18n-interpolation';
-var StyledSelect = withThemeOverride(BaseSelect, function (theme) { return ({
-    borders: {
+import getInterpolatedString from '../baseui/helpers/i18n-interpolation';
+import useUniqueId from '../hooks/useUniqueId';
+import { Loader } from '../loader';
+import { memo } from 'react';
+var StyledSelect = styled(BaseSelect, function (utils) {
+    var theme = utils.theme;
+    return {
         inputBorderRadius: theme.input.borderRadius,
-    },
-    colors: {
         borderFocus: theme.spr.focus01,
         contentPrimary: theme.spr.text01,
         contentSecondary: theme.spr.text03,
@@ -33,8 +33,8 @@ var StyledSelect = withThemeOverride(BaseSelect, function (theme) { return ({
         inputEnhancerFill: theme.spr.icon03,
         inputEnhancerFillDisabled: theme.spr.iconDisable,
         inputEnhancerTextDisabled: theme.spr.text02,
-    },
-}); });
+    };
+});
 var NoResults = React.forwardRef(function (_a, ref) {
     var msg = _a.msg, props = __rest(_a, ["msg"]);
     var locale = useLocale();
@@ -77,7 +77,7 @@ var InputContainer = function (_a) {
     var locale = useLocale();
     var commaSeparatedValues = getCommaSeparatedValues($value, $labelKey, locale);
     var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
-    var selectedValuesId = useUID();
+    var selectedValuesId = useUniqueId();
     var ariaDescribedBy = commaSeparatedValues ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
     var containerRef = React.useRef(null);
     if (!props.$searchable) {
@@ -91,13 +91,18 @@ var InputContainer = function (_a) {
 };
 var Input = React.forwardRef(function (_a, ref) {
     var _b;
-    var id = _a.id, menuId = _a.menuId, placeholder = _a.placeholder, $value = _a.$value, $labelKey = _a.$labelKey, props = __rest(_a, ["id", "menuId", "placeholder", "$value", "$labelKey"]);
+    var id = _a.id, $menuId = _a.$menuId, placeholder = _a.placeholder, $value = _a.$value, $labelKey = _a.$labelKey, props = __rest(_a, ["id", "$menuId", "placeholder", "$value", "$labelKey"]);
     var locale = useLocale();
     var commaSeparatedValues = getCommaSeparatedValues($value, $labelKey, locale);
     var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
-    var selectedValuesId = useUID();
+    var selectedValuesId = useUniqueId();
     var ariaDescribedBy = commaSeparatedValues || props['aria-label'] ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
-    return (_jsxs(_Fragment, { children: [commaSeparatedValues || props['aria-label'] ? (_jsx(HiddenElement, __assign({ id: selectedValuesId }, { children: "".concat(commaSeparatedValues, " ").concat(props['aria-label'] || '') }), void 0)) : null, _jsx(StyledInput, __assign({}, _omit(props, 'aria-label'), { id: id, "aria-controls": props.$searchable && props.$isOpen ? menuId : null, ref: ref, "aria-describedby": ariaDescribedBy, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder }), void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [commaSeparatedValues || props['aria-label'] ? (_jsx(HiddenElement, __assign({ id: selectedValuesId }, { children: "".concat(commaSeparatedValues, " ").concat(props['aria-label'] || '') }), void 0)) : null, _jsx(StyledInput, __assign({}, _omit(props, 'aria-label'), { id: id, "aria-controls": props.$searchable && props.$isOpen ? $menuId : null, ref: ref, "aria-describedby": ariaDescribedBy, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder }), void 0)] }, void 0));
 });
-export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, } from 'baseui/select';
+export var LoadingIndicator = memo(function () { return (_jsx(Loader, { size: 16, variant: "clip", className: "mx-1", overrides: {
+        Loader: {
+            style: borderWidth('2px'),
+        },
+    } }, void 0)); });
+export { StyledRoot, StyledClearIcon, StyledControlContainer, StyledDropdownContainer, StyledIconsContainer, StyledInputSizer, StyledPlaceholder, StyledSearchIconContainer, StyledSelectArrow, StyledSingleValue, StyledValueContainer, } from '../baseui/select';
 export { StyledSelect, NoResults, StyledOverlayContentContainer, InputContainer, Input };

package/esm/select/types.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { OverridesDropdown as BaseuiDropdownOverrides, DropdownProps as BaseDropdownProps, Option, Options, SelectOverrides as BaseuiSelectOverrides, SelectProps as BaseuiSelectProps, State, StateReducer } from 'baseui/select';
+import { OverridesDropdown as BaseuiDropdownOverrides, DropdownProps as BaseDropdownProps, Option, Options, SelectOverrides as BaseuiSelectOverrides, SelectProps as BaseuiSelectProps, State, StateReducer } from '../baseui/select';
+import { SELECT_ALL_ID } from '../baseui/select/constants';
 import { STATE_CHANGE_TYPE } from './constants';
 import { Override } from '../overrides';
 import { TagProps } from '../tag';
 import { Intent, SpacewebComponentProps } from '../types';
 import { PopoverProps } from '../popover/types';
 import { ValueOf } from '../utility-types';
-import { Value } from 'baseui/select/types';
+import { Value } from '../baseui/select/types';
 /**
  * lg size is deprecated. Please use md.
  */
@@ -41,16 +42,6 @@ export declare type BaseSelectProps = SpacewebComponentProps<Omit<BaseuiSelectPr
     clearAsOption?: boolean;
     clearAsOptionLabel?: string;
     selectOnTab?: boolean;
-    /**
-     * This is an internal prop being used in AsyncSelect. Not meant for consumer.
-     * If true, selectAll event won't return all options in values.
-     */
-    __selectAllShouldReturnAllOptions?: boolean;
-    /**
-     * This is an internal prop being used in AsyncSelect.
-     * Selected state of SelectAll option will be decided based on this prop if __selectAllShouldReturnAllOptions is true.
-     */
-    __selectAllSelected?: boolean;
 };
 declare type Merge<A, B> = Omit<A, keyof B> & B;
 export declare type OverlaySelectProps = Merge<BaseSelectProps, {
@@ -96,7 +87,6 @@ export declare type DropdownProps = Omit<BaseDropdownProps, 'overrides' | 'size'
     };
     type?: Type;
 };
-export declare const SELECT_ALL_ID = "__selectAll";
 export declare const CLEAR_OPTION_ID = "__clear";
 declare type RemoveValue = () => void;
 export declare type MultiValueProps = Omit<TagProps, 'overrides'> & SharedProps & {
@@ -115,4 +105,5 @@ export declare type MultiValueProps = Omit<TagProps, 'overrides'> & SharedProps
         } & Record<string, any>>;
     };
 };
-export type { Option, Value, Options, Optgroups, StateReducer, ControlRef, ImperativeMethods, AutosizeInputProps, StatefulContainerProps, SelectState, AutosizeInputState, State as StatefulContainerState, } from 'baseui/select';
+export { SELECT_ALL_ID };
+export type { Option, Value, Options, Optgroups, StateReducer, ControlRef, ImperativeMethods, AutosizeInputProps, StatefulContainerProps, SelectState, AutosizeInputState, State as StatefulContainerState, } from '../baseui/select';

package/esm/select/types.js

@@ -1,2 +1,3 @@
-export var SELECT_ALL_ID = '__selectAll';
+import { SELECT_ALL_ID } from '../baseui/select/constants';
 export var CLEAR_OPTION_ID = '__clear';
+export { SELECT_ALL_ID };

package/esm/select/utils/default-create-option.d.ts

@@ -0,0 +1,5 @@
+import { Options } from '../../baseui/select';
+export declare const defaultCreateOption: (label: string, { labelKey, valueKey }?: {
+    labelKey?: string | undefined;
+    valueKey?: string | undefined;
+}) => Options;

package/esm/select/utils/default-create-option.js

@@ -0,0 +1,6 @@
+import defaultProps from '../default-props';
+export var defaultCreateOption = function (label, _a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a, _d = _c.labelKey, labelKey = _d === void 0 ? defaultProps.labelKey : _d, _e = _c.valueKey, valueKey = _e === void 0 ? defaultProps.valueKey : _e;
+    return [(_b = {}, _b[labelKey] = label.trim(), _b[valueKey] = label.trim(), _b)];
+};

package/esm/select/utils/default-filter-options.d.ts

@@ -1,2 +1,2 @@
-import defaultFilterOptions from 'baseui/select/utils/default-filter-options';
+import defaultFilterOptions from '../../baseui/select/utils/default-filter-options';
 export declare const filterOptions: typeof defaultFilterOptions;

package/esm/select/utils/default-filter-options.js

@@ -1,6 +1,6 @@
 import { __assign } from "tslib";
 // todo: no deep import
-import defaultFilterOptions from 'baseui/select/utils/default-filter-options';
+import defaultFilterOptions from '../../baseui/select/utils/default-filter-options';
 export var filterOptions = function (options, filterValue, excludeOptions, newProps) {
     return defaultFilterOptions(options, filterValue, excludeOptions, __assign({ matchProp: 'label' }, newProps));
 };

package/esm/select/utils/merge-options.js

@@ -1,5 +1,5 @@
 import { __read, __spreadArray } from "tslib";
-import { normalizeOptions } from 'baseui/select/utils';
+import { normalizeOptions } from '../../baseui/select/utils';
 import { UNGROUPED_ID } from '../constants';
 function removeDuplicates(valueKey, options) {
     var keySet = new Set();

package/esm/slider/mark.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
-declare const Mark: React.ForwardRefExoticComponent<import("baseui/slider").StyleProps & {
+declare const Mark: React.ForwardRefExoticComponent<import("../baseui/slider").StyleProps & {
     $intent?: boolean | undefined;
     $step: number;
 } & {
     $markIndex: number;
     overrides?: {
-        MarkLabel?: import("../overrides").Override<import("baseui/slider").StyleProps & {
+        MarkLabel?: import("../overrides").Override<import("../baseui/slider").StyleProps & {
             $intent?: boolean | undefined;
             $step: number;
         } & Record<string, any>> | undefined;
     } | undefined;
-    getMarkLabel: (props: import("baseui/slider").StyleProps & {
+    getMarkLabel: (props: import("../baseui/slider").StyleProps & {
         $intent?: boolean | undefined;
         $step: number;
     } & {

package/esm/slider/slider.js

@@ -1,10 +1,11 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Slider as BaseSlider } from 'baseui/slider';
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import { useMemo } from 'react';
+import { Slider as BaseSlider } from '../baseui/slider';
 import Mark from './mark';
 import { getInnerTrackStyles, getThumbStyles, getInnerThumbStyles, getThumbValueStyles } from './styled-components';
-import { isServer } from '../spacewebProvider/utils';
+import { useHasMounted } from '../hooks/useHasMounted';
+import { mergeOverrides } from '../overrides';
 // @ts-ignore
 BaseSlider.displayName = 'BaseSlider';
 var defaultMarkLabel = function (_a) {
@@ -13,7 +14,10 @@ var defaultMarkLabel = function (_a) {
 };
 var Slider = function (_a) {
     var overrides = _a.overrides, markLabel = _a.markLabel, _b = _a.intent, intent = _b === void 0 ? 'default' : _b, _c = _a.getMarkLabel, getMarkLabel = _c === void 0 ? defaultMarkLabel : _c, className = _a.className, style = _a.style, restProps = __rest(_a, ["overrides", "markLabel", "intent", "getMarkLabel", "className", "style"]);
-    var mergedOverrides = useConvertOverrides({
+    // Thumb component not getting correct position on server side also to resolve the hydration error
+    // useHasMounted Hook has been used to so that it triggers renders which allows thumb to get the correct position
+    var hasMounted = useHasMounted();
+    var mergedOverrides = useMemo(function () { return mergeOverrides({
         Root: {
             style: ['p-4', className, style],
             props: {
@@ -44,9 +48,10 @@ var Slider = function (_a) {
             },
         },
         Thumb: {
-            // In SSR, Thumbs are not properly positioned, hence hiding thumbs.
+            // In SSR, Thumbs are not properly positioned, hence hiding thumbs on server render.
             // Refer https://github.com/tajo/react-range/issues/67#issuecomment-591703422
-            component: isServer ? function () { return null; } : undefined,
+            // Thumb is made ClientOnly to avoid Hydration mismatch error
+            component: hasMounted ? undefined : function () { return null; },
             style: getThumbStyles,
             props: {
                 $intent: intent,
@@ -67,7 +72,7 @@ var Slider = function (_a) {
         TickBar: {
             component: function () { return null; },
         },
-    }, overrides);
+    }, overrides); }, [className, getMarkLabel, hasMounted, intent, markLabel, overrides, style]);
     return _jsx(BaseSlider, __assign({ overrides: mergedOverrides }, restProps), void 0);
 };
 Slider.displayName = 'Slider';

package/esm/slider/stateful-slider-container.js

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StatefulContainer as BaseStatefulContainer } from 'baseui/slider';
+import { StatefulContainer as BaseStatefulContainer } from '../baseui/slider';
 //@ts-ignore
 BaseStatefulContainer.displayName = 'BaseStatefulContainer';
 var StatefulContainer = function (_a) {

package/esm/slider/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SharedProps as BaseSharedProps, SliderProps as BaseSliderProps, StatefulContainerProps as BaseStatefulContainerProps, StatefulSliderProps as BaseStatefulSliderProps } from 'baseui/slider';
+import { SharedProps as BaseSharedProps, SliderProps as BaseSliderProps, StatefulContainerProps as BaseStatefulContainerProps, StatefulSliderProps as BaseStatefulSliderProps } from '../baseui/slider';
 import { Intent, SpacewebComponentProps } from '../types';
 import { Override } from '../overrides';
 declare type GetMarkLabelFn = (props: SharedProps & {

package/esm/snackbar/Snackbar.js

@@ -1,6 +1,6 @@
 import { __assign, __read } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Layer as DefaultLayer } from 'baseui/layer';
+import { Layer as DefaultLayer } from '../baseui/layer';
 import { isValidElement, cloneElement } from 'react';
 import _noop from 'lodash/noop';
 import { IconButton } from '../button';
@@ -40,7 +40,7 @@ var Snackbar = function (_a) {
     var _q = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.IconsContainer, StyledIconsContainer), 2), IconsContainer = _q[0], iconsContainerProps = _q[1];
     var _r = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.IntentIcon, IntentIconComponent), 2), IntentIcon = _r[0], intentIconProps = _r[1];
     var _s = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIcon, CloseIcon), 2), Close = _s[0], closeProps = _s[1];
-    var _t = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIconButton, IconButton)), CloseIconButton = _t[0], closeIconButtonProps = _t.slice(1);
+    var _t = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIconButton, IconButton), 2), CloseIconButton = _t[0], closeIconButtonProps = _t[1];
     var locale = useLocale();
     return shouldRender ? (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.SNACKBAR }, { children: _jsx(Layer, __assign({}, sharedProps, layerProps, { children: _jsx(PlacementContainer, __assign({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: _jsx(SnackbarContainer, __assign({}, snackbarContainerProps, { ref: snackbarContainerRef, role: "alert" }, sharedProps, snackbarContainerOverrideProps, { children: _jsxs(ContentContainer, __assign({}, sharedProps, contentContainerProps, { children: [_jsx(IconsContainer, __assign({}, sharedProps, iconsContainerProps, { children: _jsx(IntentIcon, __assign({ size: 14, className: getIconStyles }, sharedProps, intentIconProps), void 0) }), void 0), _jsx(Message, __assign({ "aria-atomic": true, "aria-live": "assertive" }, sharedProps, messageProps, { children: isValidElement(message) ? cloneElement(message) : message }), void 0), !disableManualClose && (_jsx(CloseIconButton, __assign({ shape: "square", className: [
                                     'cursor-pointer h-4 w-4 ml-3 rounded-2 min-w-0 border-0 flex-shrink-0',

package/esm/snackbar/constants.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { IconProps } from '../icon';
 import { Intent } from './types';
 export declare const TRANSITION_DURATION = 1000;
-export declare const INTENT_TO_ICON: Record<Intent, React.ComponentType<IconProps>>;
+export declare const INTENT_TO_ICON: Record<Intent, React.ComponentType<React.PropsWithChildren<IconProps>>>;
 export declare const TYPE_TO_HIDE_DURATION: Record<Intent, number>;

package/esm/snackbar/useSnackbar.js

@@ -12,7 +12,9 @@ var useHideOnClickAway = function (_a) {
                 handleClose('clickaway');
             }
         }
-    }, [open, hideOnClickAway]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
+    [open, hideOnClickAway]);
     useEffect(function () {
         document.addEventListener('click', handleDocumentClick);
         return function () { return document.removeEventListener('click', handleDocumentClick); };
@@ -27,29 +29,36 @@ var useAutoHide = function (_a) {
             return function () { return window.clearTimeout(autoHideTimeoutRef.current); };
         }
         return undefined;
-    }, [open, autoHide, autoHideDuration]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
+    }, [open, autoHide, autoHideDuration, autoHideTimeoutRef]);
 };
 var useDomVisibility = function (_a) {
     var message = _a.message, open = _a.open, enter = _a.enter, handleClose = _a.handleClose, intent = _a.intent;
     var _b = __read(useState(false), 2), domVisibility = _b[0], setDomVisibility = _b[1];
+    var removeFromDomTimeoutRef = useRef();
     // handle exit, enter on message change
     useEffect(function () {
         if (!message)
             return undefined;
         // enter new snackbar immediately if none is opened already else wait for exit transition to finish.
-        var timeoutId = window.setTimeout(enter, open ? TRANSITION_DURATION : 0);
+        var timeoutId = window.setTimeout(function () {
+            window.clearTimeout(removeFromDomTimeoutRef.current);
+            setDomVisibility(true);
+            enter();
+        }, open ? TRANSITION_DURATION : 0);
         setDomVisibility(true);
         // exit previously opened snackbar
         open && handleClose('messageChange');
         return function () { return window.clearTimeout(timeoutId); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
     }, [message, intent]);
     // remove from DOM, once transition is over
     useUpdateEffect(function () {
         if (open)
             return undefined;
-        var timeoutId = window.setTimeout(function () { return setDomVisibility(false); }, TRANSITION_DURATION);
+        removeFromDomTimeoutRef.current = window.setTimeout(function () { return setDomVisibility(false); }, TRANSITION_DURATION);
         return function () {
-            window.clearTimeout(timeoutId);
+            window.clearTimeout(removeFromDomTimeoutRef.current);
         };
     }, [open]);
     return domVisibility;
@@ -59,11 +68,11 @@ var useSnackbar = function (_a) {
     var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
     var _c = __read(useState({ intent: nextIntent, message: nextMessage }), 2), snackbarContent = _c[0], setSnackbarContent = _c[1];
     var autoHideTimeoutRef = useRef();
-    var handleClose = function (reason) {
+    var handleClose = useCallback(function (reason) {
         setOpen(false);
         window.clearTimeout(autoHideTimeoutRef.current);
         onClose === null || onClose === void 0 ? void 0 : onClose(reason);
-    };
+    }, [onClose]);
     var enter = function () {
         // set the intent and message to be rendered in the Snackbar which we are entering
         setSnackbarContent({ intent: nextIntent, message: nextMessage });

package/esm/spacewebProvider/AiIconLinearGradients.d.ts

@@ -0,0 +1,2 @@
+declare const AiIconLinearGradients: () => import("react/jsx-runtime").JSX.Element;
+export default AiIconLinearGradients;

package/esm/spacewebProvider/AiIconLinearGradients.js

@@ -0,0 +1,9 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStyle } from '../style';
+import { accessibilityStyles } from '../helpers/commonStyles';
+var AiIconLinearGradients = function () {
+    var theme = useStyle().theme;
+    return (_jsx("svg", __assign({ style: accessibilityStyles }, { children: _jsx("defs", { children: theme.name.includes('light') ? (_jsxs("linearGradient", __assign({ id: "aiGradientID", x1: "10.065", y1: "-152.894", x2: ".289", y2: "-163.48", gradientTransform: "matrix(1 0 0 -1 0 -149.213)", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { offset: "0", stopColor: "#de46e1" }, void 0), _jsx("stop", { offset: ".487", stopColor: "#8e43ff" }, void 0), _jsx("stop", { offset: "1", stopColor: "#0e61f6" }, void 0)] }), void 0)) : (_jsxs("linearGradient", __assign({ id: "aiGradientID", x1: "8.96", y1: "2.66", x2: "-2.87898", y2: "15.0443", gradientUnits: "userSpaceOnUse" }, { children: [_jsx("stop", { stopColor: "#DE46E1" }, void 0), _jsx("stop", { offset: "0.486707", stopColor: "#8E43FF" }, void 0), _jsx("stop", { offset: "1", stopColor: "#0E61F6" }, void 0)] }), void 0)) }, void 0) }), void 0));
+};
+export default AiIconLinearGradients;