@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/select/styled-component.js

@@ -1,40 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.InputContainer = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledSelect = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.StyledInput = exports.StyledInputContainer = void 0;
+exports.Input = exports.InputContainer = exports.StyledOverlayContentContainer = exports.NoResults = exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledPlaceholder = exports.StyledInputSizer = exports.StyledIconsContainer = exports.StyledDropdownContainer = exports.StyledControlContainer = exports.StyledClearIcon = exports.StyledRoot = exports.LoadingIndicator = exports.StyledInput = exports.StyledInputContainer = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var select_1 = require("baseui/select");
 var React = (0, tslib_1.__importStar)(require("react"));
-var withThemeOverride_1 = (0, tslib_1.__importDefault)(require("../helpers/baseui/withThemeOverride"));
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var locale_1 = require("../locale");
 var menu_item_1 = (0, tslib_1.__importDefault)(require("../menu/menu-item"));
 var style_1 = require("../style");
 var themeHelpers_1 = require("../helpers/themeHelpers");
-var StyledSelect = (0, withThemeOverride_1.default)(select_1.Select, function (theme) { return ({
-    borders: {
-        inputBorderRadius: theme.input.borderRadius,
-    },
-    colors: {
-        borderFocus: theme.spr.focus01,
-        contentPrimary: theme.spr.text01,
-        contentSecondary: theme.spr.text03,
-        inputBorder: theme.spr.field,
-        inputFill: theme.spr.ui01,
-        inputFillError: theme.spr.ui01,
-        inputFillDisabled: theme.spr.ui02,
-        inputFillActive: theme.spr.ui01,
-        inputFillPositive: theme.spr.ui01,
-        inputTextDisabled: theme.spr.text02,
-        inputPlaceholder: theme.spr.textPlaceholder,
-        inputBorderError: theme.spr.supportError,
-        inputBorderPositive: theme.spr.supportSuccess,
-        inputEnhancerFill: theme.spr.icon03,
-        inputEnhancerFillDisabled: theme.spr.iconDisable,
-        inputEnhancerTextDisabled: theme.spr.text02,
-    },
-}); });
-exports.StyledSelect = StyledSelect;
+var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
+var hidden_element_1 = require("./utils/hidden-element");
+var i18n_interpolation_1 = (0, tslib_1.__importDefault)(require("../baseui/helpers/i18n-interpolation"));
+var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
+var loader_1 = require("../loader");
+var react_1 = require("react");
 var NoResults = React.forwardRef(function (_a, ref) {
     var msg = _a.msg, props = (0, tslib_1.__rest)(_a, ["msg"]);
     var locale = (0, locale_1.useLocale)();
@@ -55,16 +35,10 @@ exports.StyledInputContainer = (0, style_1.styled)('div', 'relative inline-block
     };
 });
 exports.StyledInput = (0, style_1.styled)('input', 'bg-transparent border-none inline-block m-0 p-0 max-w-full box-content outline-none', function (_, props) {
-    var $searchable = props.$searchable, $width = props.$width;
-    return {
-        color: 'inherit',
-        lineHeight: 'inherit',
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        letterSpacing: 'normal',
-        width: !$searchable ? '1px' : $width || '100%',
-        boxShadow: 'none',
-    };
+    var $searchable = props.$searchable, $width = props.$width, $disabled = props.$disabled;
+    return (0, tslib_1.__assign)({ color: 'inherit', lineHeight: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', letterSpacing: 'normal', width: !$searchable ? '1px' : $width || '100%', boxShadow: 'none', '::placeholder': {
+            color: 'transparent',
+        } }, ($disabled ? { '-webkit-text-fill-color': 'transparent' } : {}));
 });
 var DEFAULT_OVERLAY_WIDTH = '300px';
 var StyledOverlayContentContainer = (0, style_1.styled)('div', 'overflow-auto', function (_a, _b) {
@@ -73,25 +47,63 @@ var StyledOverlayContentContainer = (0, style_1.styled)('div', 'overflow-auto',
     return ((0, tslib_1.__assign)({ width: $overlayWidth || DEFAULT_OVERLAY_WIDTH }, (0, longHandHelpers_1.borderRadius)('inherit')));
 });
 exports.StyledOverlayContentContainer = StyledOverlayContentContainer;
+var getCommaSeparatedValues = function (value, limitTags, labelKey, locale) {
+    if (limitTags === void 0) { limitTags = Number(Infinity); }
+    var _limitTags = limitTags < 0 ? Number(Infinity) : limitTags;
+    var commaSeparatedValues = value === null || value === void 0 ? void 0 : value.slice(0, _limitTags).map(function (val) { return val[labelKey]; });
+    var extraTagNumber = (value === null || value === void 0 ? void 0 : value.length) > limitTags ? value.length - limitTags : 0;
+    if (extraTagNumber > 0) {
+        commaSeparatedValues.push("".concat("+".concat(extraTagNumber, " ").concat(extraTagNumber === 1 ? locale.select.item : locale.select.items)));
+    }
+    var _commaSeparatedValues = commaSeparatedValues === null || commaSeparatedValues === void 0 ? void 0 : commaSeparatedValues.join(',');
+    return value && value.length > 0
+        ? "".concat((0, i18n_interpolation_1.default)(locale.select.selectedValuesPrefix, { values: _commaSeparatedValues }), ".")
+        : '';
+};
 var InputContainer = function (_a) {
-    var menuId = _a.menuId, size = _a.size, props = (0, tslib_1.__rest)(_a, ["menuId", "size"]);
-    return ((0, jsx_runtime_1.jsx)(exports.StyledInputContainer, (0, tslib_1.__assign)({}, props, { "$selectSize": size, role: props.$searchable ? undefined : 'combobox', "aria-haspopup": props.$searchable ? null : 'listbox', "aria-owns": !props.$searchable && props.$isOpen ? menuId : null }), void 0));
+    var _b;
+    var menuId = _a.menuId, size = _a.size, $value = _a.$value, $labelKey = _a.$labelKey, placeholder = _a.placeholder, $limitTags = _a.$limitTags, props = (0, tslib_1.__rest)(_a, ["menuId", "size", "$value", "$labelKey", "placeholder", "$limitTags"]);
+    var locale = (0, locale_1.useLocale)();
+    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale);
+    var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
+    var selectedValuesId = (0, useUniqueId_1.default)();
+    var ariaDescribedBy = commaSeparatedValues ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
+    var containerRef = React.useRef(null);
+    if (!props.$searchable) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [commaSeparatedValues ? (0, jsx_runtime_1.jsx)(hidden_element_1.HiddenElement, (0, tslib_1.__assign)({ id: selectedValuesId }, { children: commaSeparatedValues }), void 0) : null, (0, jsx_runtime_1.jsx)(exports.StyledInputContainer, (0, tslib_1.__assign)({}, props, { "$selectSize": size, "aria-owns": props.$isOpen ? menuId : null, "aria-describedby": ariaDescribedBy, "aria-expanded": props.$isOpen, role: "combobox", ref: containerRef, "aria-placeholder": placeholder !== null && placeholder !== void 0 ? placeholder : locale.select.selectPlaceholder, "aria-haspopup": "listbox" }, { children: props.children
+                        ? React.cloneElement(React.Children.only(props.children), { onFocus: function () { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } })
+                        : null }), void 0)] }, void 0));
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)(exports.StyledInputContainer, (0, tslib_1.__assign)({}, props, { "$selectSize": size }), void 0);
+    }
 };
 exports.InputContainer = InputContainer;
 var Input = React.forwardRef(function (_a, ref) {
-    var id = _a.id, menuId = _a.menuId, props = (0, tslib_1.__rest)(_a, ["id", "menuId"]);
-    return ((0, jsx_runtime_1.jsx)(exports.StyledInput, (0, tslib_1.__assign)({}, props, { id: id, "aria-controls": props.$searchable && props.$isOpen ? menuId : null, ref: ref }), void 0));
+    var _b;
+    var id = _a.id, $menuId = _a.$menuId, placeholder = _a.placeholder, $value = _a.$value, $labelKey = _a.$labelKey, _c = _a.$limitTags, $limitTags = _c === void 0 ? Number(Infinity) : _c, props = (0, tslib_1.__rest)(_a, ["id", "$menuId", "placeholder", "$value", "$labelKey", "$limitTags"]);
+    var locale = (0, locale_1.useLocale)();
+    var commaSeparatedValues = getCommaSeparatedValues($value, $limitTags, $labelKey, locale);
+    var baseAriaDescribedBy = (_b = props['aria-describedby']) !== null && _b !== void 0 ? _b : '';
+    var selectedValuesId = (0, useUniqueId_1.default)();
+    var ariaDescribedBy = commaSeparatedValues || props['aria-label'] ? "".concat(selectedValuesId, " ").concat(baseAriaDescribedBy) : baseAriaDescribedBy;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [commaSeparatedValues || props['aria-label'] ? ((0, jsx_runtime_1.jsx)(hidden_element_1.HiddenElement, (0, tslib_1.__assign)({ id: selectedValuesId }, { children: "".concat(commaSeparatedValues, " ").concat(props['aria-label'] || '') }), void 0)) : null, (0, jsx_runtime_1.jsx)(exports.StyledInput, (0, tslib_1.__assign)({}, (0, omit_1.default)(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));
 });
 exports.Input = Input;
-var select_2 = require("baseui/select");
-Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return select_2.StyledRoot; } });
-Object.defineProperty(exports, "StyledClearIcon", { enumerable: true, get: function () { return select_2.StyledClearIcon; } });
-Object.defineProperty(exports, "StyledControlContainer", { enumerable: true, get: function () { return select_2.StyledControlContainer; } });
-Object.defineProperty(exports, "StyledDropdownContainer", { enumerable: true, get: function () { return select_2.StyledDropdownContainer; } });
-Object.defineProperty(exports, "StyledIconsContainer", { enumerable: true, get: function () { return select_2.StyledIconsContainer; } });
-Object.defineProperty(exports, "StyledInputSizer", { enumerable: true, get: function () { return select_2.StyledInputSizer; } });
-Object.defineProperty(exports, "StyledPlaceholder", { enumerable: true, get: function () { return select_2.StyledPlaceholder; } });
-Object.defineProperty(exports, "StyledSearchIconContainer", { enumerable: true, get: function () { return select_2.StyledSearchIconContainer; } });
-Object.defineProperty(exports, "StyledSelectArrow", { enumerable: true, get: function () { return select_2.StyledSelectArrow; } });
-Object.defineProperty(exports, "StyledSingleValue", { enumerable: true, get: function () { return select_2.StyledSingleValue; } });
-Object.defineProperty(exports, "StyledValueContainer", { enumerable: true, get: function () { return select_2.StyledValueContainer; } });
+exports.LoadingIndicator = (0, react_1.memo)(function () { return ((0, jsx_runtime_1.jsx)(loader_1.Loader, { size: 16, variant: "clip", className: "mx-1", overrides: {
+        Loader: {
+            style: (0, longHandHelpers_1.borderWidth)('2px'),
+        },
+    } }, void 0)); });
+var select_1 = require("../baseui/select");
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return select_1.StyledRoot; } });
+Object.defineProperty(exports, "StyledClearIcon", { enumerable: true, get: function () { return select_1.StyledClearIcon; } });
+Object.defineProperty(exports, "StyledControlContainer", { enumerable: true, get: function () { return select_1.StyledControlContainer; } });
+Object.defineProperty(exports, "StyledDropdownContainer", { enumerable: true, get: function () { return select_1.StyledDropdownContainer; } });
+Object.defineProperty(exports, "StyledIconsContainer", { enumerable: true, get: function () { return select_1.StyledIconsContainer; } });
+Object.defineProperty(exports, "StyledInputSizer", { enumerable: true, get: function () { return select_1.StyledInputSizer; } });
+Object.defineProperty(exports, "StyledPlaceholder", { enumerable: true, get: function () { return select_1.StyledPlaceholder; } });
+Object.defineProperty(exports, "StyledSearchIconContainer", { enumerable: true, get: function () { return select_1.StyledSearchIconContainer; } });
+Object.defineProperty(exports, "StyledSelectArrow", { enumerable: true, get: function () { return select_1.StyledSelectArrow; } });
+Object.defineProperty(exports, "StyledSingleValue", { enumerable: true, get: function () { return select_1.StyledSingleValue; } });
+Object.defineProperty(exports, "StyledValueContainer", { enumerable: true, get: function () { return select_1.StyledValueContainer; } });

package/select/types.d.ts

@@ -1,13 +1,17 @@
 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';
-export declare type Size = 'sm' | 'md' | 'lg';
+import { Value } from '../baseui/select/types';
+/**
+ * lg size is deprecated. Please use md.
+ */
+export declare type Size = 'xxxs' | 'xs' | 'sm' | 'md' | 'lg';
 export declare type Type = 'select' | 'search';
 declare type OverridableComponent = keyof Omit<BaseuiSelectOverrides, 'Dropdown' | 'DropdownListItem' | 'DropdownOption'> | 'Menu' | 'MenuItem' | 'NoResults' | 'Divider' | 'ListItemText' | 'OverlayContentContainer';
 export declare type SelectActions = {
@@ -18,7 +22,7 @@ export declare type OnChangeParams = {
     option?: Option;
     type?: ValueOf<typeof STATE_CHANGE_TYPE>;
 };
-export declare type BaseSelectProps = SpacewebComponentProps<Omit<BaseuiSelectProps, 'overrides' | 'size' | 'type' | 'onChange' | 'positive' | 'error'>> & {
+export declare type BaseSelectProps = SpacewebComponentProps<Omit<BaseuiSelectProps, 'overrides' | 'size' | 'type' | 'onChange' | 'positive' | 'error' | 'selectLocale'>> & {
     onChange?: (params: OnChangeParams) => unknown;
     intent?: Intent;
     overrides?: {
@@ -34,12 +38,18 @@ export declare type BaseSelectProps = SpacewebComponentProps<Omit<BaseuiSelectPr
     onPaste?: (event: React.ClipboardEvent) => Options | undefined;
     virtual?: boolean;
     ignoreBoundary?: boolean;
+    delimiter?: string;
+    clearAsOption?: boolean;
+    clearAsOptionLabel?: string;
+    selectOnTab?: boolean;
+    limitTags?: number;
 };
 declare type Merge<A, B> = Omit<A, keyof B> & B;
 export declare type OverlaySelectProps = Merge<BaseSelectProps, {
     type: 'overlay';
     overlayWidth?: string;
     children: PopoverProps['children'];
+    scrollContainer?: 'overlayContainer' | 'menuContainer';
 }>;
 export declare type MobileSelectProps = Merge<OverlaySelectProps, {
     type: 'mobile';
@@ -51,6 +61,13 @@ export declare type StatefulSelectProps = SelectProps & {
     initialState?: State;
     stateReducer?: StateReducer;
 };
+/**
+ * creatable is not supported as of now
+ */
+export declare type GroupedSelectProps = Omit<SelectProps, 'creatable' | 'options'> & {
+    options?: Record<string, Array<Option>>;
+    hideGroupSelectAll?: boolean;
+};
 export declare type SharedProps = {
     $clearable?: boolean;
     $creatable?: boolean;
@@ -71,6 +88,7 @@ export declare type SharedProps = {
     $isEmpty?: boolean;
     $size?: Size;
     $selectSize?: Size;
+    $limitTags?: number;
 };
 export declare type DropdownProps = Omit<BaseDropdownProps, 'overrides' | 'size' | 'type'> & {
     overrides?: {
@@ -78,9 +96,12 @@ 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 & {
+    $isContainerFocused?: boolean;
+    $valueByIdMap: Record<string, Option>;
+    $valueKey: string;
     value: Option;
     removeValue: RemoveValue;
     selectSize: Size;
@@ -93,4 +114,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/select/types.js

@@ -1,4 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SELECT_ALL_ID = void 0;
-exports.SELECT_ALL_ID = '__selectAll';
+exports.SELECT_ALL_ID = exports.CLEAR_OPTION_ID = void 0;
+var constants_1 = require("../baseui/select/constants");
+Object.defineProperty(exports, "SELECT_ALL_ID", { enumerable: true, get: function () { return constants_1.SELECT_ALL_ID; } });
+exports.CLEAR_OPTION_ID = '__clear';

package/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/select/utils/default-create-option.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultCreateOption = void 0;
+var tslib_1 = require("tslib");
+var default_props_1 = (0, tslib_1.__importDefault)(require("../default-props"));
+var defaultCreateOption = function (label, _a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a, _d = _c.labelKey, labelKey = _d === void 0 ? default_props_1.default.labelKey : _d, _e = _c.valueKey, valueKey = _e === void 0 ? default_props_1.default.valueKey : _e;
+    return [(_b = {}, _b[labelKey] = label.trim(), _b[valueKey] = label.trim(), _b)];
+};
+exports.defaultCreateOption = defaultCreateOption;

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

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

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

@@ -1,9 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.filterOptions = void 0;
+var tslib_1 = require("tslib");
 // todo: no deep import
-var default_filter_options_1 = require("baseui/select/utils/default-filter-options");
-Object.defineProperty(exports, "filterOptions", { enumerable: true, get: function () { return __importDefault(default_filter_options_1).default; } });
+var default_filter_options_1 = (0, tslib_1.__importDefault)(require("../../baseui/select/utils/default-filter-options"));
+var filterOptions = function (options, filterValue, excludeOptions, newProps) {
+    return (0, default_filter_options_1.default)(options, filterValue, excludeOptions, (0, tslib_1.__assign)({ matchProp: 'label' }, newProps));
+};
+exports.filterOptions = filterOptions;

package/select/utils/hidden-element.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement, ReactNode } from 'react';
+declare const HiddenElement: ({ id, children }: {
+    id: string;
+    children?: ReactNode;
+}) => ReactElement;
+export { HiddenElement };

package/select/utils/hidden-element.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HiddenElement = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var HiddenElement = function (_a) {
+    var id = _a.id, children = _a.children;
+    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ id: id, style: {
+            border: 0,
+            clip: 'rect(0 0 0 0)',
+            height: '0px',
+            margin: '-1px',
+            overflow: 'hidden',
+            padding: 0,
+            position: 'absolute',
+            width: '0px',
+        } }, { children: children }), void 0));
+};
+exports.HiddenElement = HiddenElement;

package/select/utils/merge-options.d.ts

@@ -0,0 +1,2 @@
+import { Options, Value } from '../types';
+export declare function mergeOptions(valueKey: string, options1?: Options, options2?: Options): Value;

package/select/utils/merge-options.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeOptions = void 0;
+var tslib_1 = require("tslib");
+var utils_1 = require("../../baseui/select/utils");
+var constants_1 = require("../constants");
+function removeDuplicates(valueKey, options) {
+    var keySet = new Set();
+    return options.filter(function (opt) {
+        var key = (opt.__optgroup || constants_1.UNGROUPED_ID) + opt[valueKey];
+        var shouldAdd = !keySet.has(key);
+        keySet.add(key);
+        return shouldAdd;
+    });
+}
+function mergeOptions(valueKey, options1, options2) {
+    if (options1 === void 0) { options1 = []; }
+    if (options2 === void 0) { options2 = []; }
+    var optArr1 = (0, utils_1.normalizeOptions)(options1), optArr2 = (0, utils_1.normalizeOptions)(options2);
+    return removeDuplicates(valueKey, (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(optArr1), false), (0, tslib_1.__read)(optArr2), false));
+}
+exports.mergeOptions = mergeOptions;

package/select/utils/test-utils.d.ts

@@ -0,0 +1 @@
+export declare const getSelectedOptions: (container?: HTMLElement | undefined) => (string | null)[];

package/select/utils/test-utils.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedOptions = void 0;
+var react_1 = require("@testing-library/react");
+var getSelectedOptions = function (container) {
+    var elements = container
+        ? (0, react_1.getAllByTestId)(container, 'combobox-selected-value')
+        : react_1.screen.getAllByTestId('combobox-selected-value');
+    return elements.map(function (item) { return item.textContent; });
+};
+exports.getSelectedOptions = getSelectedOptions;

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

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var slider_1 = require("baseui/slider");
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var react_1 = require("react");
+var slider_1 = require("../baseui/slider");
 var mark_1 = (0, tslib_1.__importDefault)(require("./mark"));
 var styled_components_1 = require("./styled-components");
-var utils_1 = require("../spacewebProvider/utils");
+var useHasMounted_1 = require("../hooks/useHasMounted");
+var overrides_1 = require("../overrides");
 // @ts-ignore
 slider_1.Slider.displayName = 'BaseSlider';
 var defaultMarkLabel = function (_a) {
@@ -15,7 +16,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 = (0, tslib_1.__rest)(_a, ["overrides", "markLabel", "intent", "getMarkLabel", "className", "style"]);
-    var mergedOverrides = (0, useConvertOverrides_1.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 = (0, useHasMounted_1.useHasMounted)();
+    var mergedOverrides = (0, react_1.useMemo)(function () { return (0, overrides_1.mergeOverrides)({
         Root: {
             style: ['p-4', className, style],
             props: {
@@ -46,9 +50,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: utils_1.isServer ? function () { return null; } : undefined,
+            // Thumb is made ClientOnly to avoid Hydration mismatch error
+            component: hasMounted ? undefined : function () { return null; },
             style: styled_components_1.getThumbStyles,
             props: {
                 $intent: intent,
@@ -69,7 +74,7 @@ var Slider = function (_a) {
         TickBar: {
             component: function () { return null; },
         },
-    }, overrides);
+    }, overrides); }, [className, getMarkLabel, hasMounted, intent, markLabel, overrides, style]);
     return (0, jsx_runtime_1.jsx)(slider_1.Slider, (0, tslib_1.__assign)({ overrides: mergedOverrides }, restProps), void 0);
 };
 Slider.displayName = 'Slider';

package/slider/stateful-slider-container.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var slider_1 = require("baseui/slider");
+var slider_1 = require("../baseui/slider");
 //@ts-ignore
 slider_1.StatefulContainer.displayName = 'BaseStatefulContainer';
 var StatefulContainer = function (_a) {

package/slider/styled-components.js

@@ -7,7 +7,7 @@ var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var intentHelper_1 = require("../helpers/intentHelper");
 var helpers_1 = require("../helpers");
 var addOpacity = function (token, opacity) {
-    return token.includes('rgb') ? token.split(')')[0] + opacity + ')' : (0, helpers_1.hex2rgb)(token, opacity);
+    return token.includes('rgb') ? "".concat(token.split(')')[0] + opacity, ")") : (0, helpers_1.hex2rgb)(token, opacity);
 };
 var secondaryIntentColor = function (_a, _b) {
     var theme = _a.theme;
@@ -26,13 +26,13 @@ var secondaryIntentColor = function (_a, _b) {
 exports.getInnerTrackStyles = [
     'w-full self-center',
     function (_a, _b) {
-        var theme = _a.theme, direction = _a.direction, px2rem = _a.px2rem;
+        var theme = _a.theme, px2rem = _a.px2rem;
         var $disabled = _b.$disabled, $value = _b.$value, $min = _b.$min, $max = _b.$max, $intent = _b.$intent;
         var intentPrimary = (0, intentHelper_1.intentColor)({ theme: theme }, { $intent: $intent });
         var intentSecondary = secondaryIntentColor({ theme: theme }, { $intent: $intent });
         var scaledValue = $value.map(function (value) { return ((value - $min) / ($max - $min)) * 100; });
-        var gradientDirection = direction === 'rtl' ? 'to left' : 'to right';
-        return (0, tslib_1.__assign)({ background: scaledValue.length == 1
+        var gradientDirection = 'to right';
+        return (0, tslib_1.__assign)({ background: scaledValue.length === 1
                 ? "linear-gradient(".concat(gradientDirection, ", \n          ").concat(intentPrimary, " ").concat(scaledValue[0], "%, \n            ").concat(intentSecondary, " ").concat(scaledValue[0], "%)")
                 : "linear-gradient(".concat(gradientDirection, ", \n          ").concat(intentSecondary, " ").concat(scaledValue[0], "%,\n            ").concat(intentPrimary, " ").concat(scaledValue[0], "% ").concat(scaledValue[1], "%, \n              ").concat(intentSecondary, " ").concat(scaledValue[1], "%)"), opacity: $disabled ? '0.6' : '1', height: px2rem('6px'), cursor: $disabled ? 'not-allowed' : 'inherit' }, (0, longHandHelpers_1.borderRadius)('6px'));
     },

package/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/snackbar/Snackbar.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var layer_1 = require("baseui/layer");
+var layer_1 = require("../baseui/layer");
 var react_1 = require("react");
 var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
 var button_1 = require("../button");
@@ -13,6 +13,7 @@ var constants_1 = require("./constants");
 var layer_2 = require("../layer");
 var styled_component_1 = require("./styled-component");
 var useSnackbar_1 = (0, tslib_1.__importDefault)(require("./useSnackbar"));
+var locale_1 = require("../locale");
 var Snackbar = function (_a) {
     var _b = _a.intent, _intent = _b === void 0 ? 'success' : _b, _message = _a.message, _c = _a.disableManualClose, disableManualClose = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'bottom' : _d, _e = _a.autoHide, autoHide = _e === void 0 ? true : _e, _f = _a.autoHideDuration, autoHideDuration = _f === void 0 ? constants_1.TYPE_TO_HIDE_DURATION[_intent] : _f, _g = _a.hideOnClickAway, hideOnClickAway = _g === void 0 ? true : _g, overrides = _a.overrides, _h = _a.onClose, onClose = _h === void 0 ? noop_1.default : _h;
     var _j = (0, useSnackbar_1.default)({
@@ -41,19 +42,18 @@ var Snackbar = function (_a) {
     var _q = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.IconsContainer, styled_component_1.StyledIconsContainer), 2), IconsContainer = _q[0], iconsContainerProps = _q[1];
     var _r = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.IntentIcon, IntentIconComponent), 2), IntentIcon = _r[0], intentIconProps = _r[1];
     var _s = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIcon, close_1.default), 2), Close = _s[0], closeProps = _s[1];
-    var _t = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIconButton, button_1.IconButton)), CloseIconButton = _t[0], closeIconButtonProps = _t.slice(1);
-    return shouldRender ? ((0, jsx_runtime_1.jsx)(layer_2.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_2.Z_INDEX.SNACKBAR }, { children: (0, jsx_runtime_1.jsx)(Layer, (0, tslib_1.__assign)({}, sharedProps, layerProps, { children: (0, jsx_runtime_1.jsx)(PlacementContainer, (0, tslib_1.__assign)({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: (0, jsx_runtime_1.jsxs)(SnackbarContainer, (0, tslib_1.__assign)({}, snackbarContainerProps, { ref: snackbarContainerRef, role: "alert" }, sharedProps, snackbarContainerOverrideProps, { children: [(0, jsx_runtime_1.jsxs)(ContentContainer, (0, tslib_1.__assign)({}, sharedProps, contentContainerProps, { children: [(0, jsx_runtime_1.jsx)(IconsContainer, (0, tslib_1.__assign)({}, sharedProps, iconsContainerProps, { children: (0, jsx_runtime_1.jsx)(IntentIcon, (0, tslib_1.__assign)({ size: 30, className: styled_component_1.getIconStyles }, sharedProps, intentIconProps), void 0) }), void 0), (0, jsx_runtime_1.jsx)(Message, (0, tslib_1.__assign)({ "aria-atomic": true, "aria-live": "assertive" }, sharedProps, messageProps, { children: (0, react_1.isValidElement)(message) ? (0, react_1.cloneElement)(message) : message }), void 0)] }), void 0), !disableManualClose && ((0, jsx_runtime_1.jsx)(CloseIconButton, (0, tslib_1.__assign)({ shape: "square", className: [
-                                'cursor-pointer absolute h-4 w-4 rounded-2 min-w-0 border-0',
-                                {
-                                    top: '1rem',
-                                    right: '1rem',
-                                    ':focus': {
-                                        backgroundColor: '#48484C',
+    var _t = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIconButton, button_1.IconButton), 2), CloseIconButton = _t[0], closeIconButtonProps = _t[1];
+    var locale = (0, locale_1.useLocale)();
+    return shouldRender ? ((0, jsx_runtime_1.jsx)(layer_2.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_2.Z_INDEX.SNACKBAR }, { children: (0, jsx_runtime_1.jsx)(Layer, (0, tslib_1.__assign)({}, sharedProps, layerProps, { children: (0, jsx_runtime_1.jsx)(PlacementContainer, (0, tslib_1.__assign)({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: (0, jsx_runtime_1.jsx)(SnackbarContainer, (0, tslib_1.__assign)({}, snackbarContainerProps, { ref: snackbarContainerRef, role: "alert" }, sharedProps, snackbarContainerOverrideProps, { children: (0, jsx_runtime_1.jsxs)(ContentContainer, (0, tslib_1.__assign)({}, sharedProps, contentContainerProps, { children: [(0, jsx_runtime_1.jsx)(IconsContainer, (0, tslib_1.__assign)({}, sharedProps, iconsContainerProps, { children: (0, jsx_runtime_1.jsx)(IntentIcon, (0, tslib_1.__assign)({ size: 14, className: styled_component_1.getIconStyles }, sharedProps, intentIconProps), void 0) }), void 0), (0, jsx_runtime_1.jsx)(Message, (0, tslib_1.__assign)({ "aria-atomic": true, "aria-live": "assertive" }, sharedProps, messageProps, { children: (0, react_1.isValidElement)(message) ? (0, react_1.cloneElement)(message) : message }), void 0), !disableManualClose && ((0, jsx_runtime_1.jsx)(CloseIconButton, (0, tslib_1.__assign)({ shape: "square", className: [
+                                    'cursor-pointer h-4 w-4 ml-3 rounded-2 min-w-0 border-0 flex-shrink-0',
+                                    {
+                                        ':focus': {
+                                            backgroundColor: '#48484C',
+                                        },
+                                        ':hover': {
+                                            backgroundColor: '#48484C',
+                                        },
                                     },
-                                    ':hover': {
-                                        backgroundColor: '#48484C',
-                                    },
-                                },
-                            ], onClick: function () { return handleClose('manualClose'); } }, sharedProps, closeIconButtonProps, { children: (0, jsx_runtime_1.jsx)(Close, (0, tslib_1.__assign)({ "data-testid": "snackbar-close", size: 10, className: { fill: '#A0A0A8' } }, sharedProps, closeProps), void 0) }), void 0))] }), void 0) }), void 0) }), void 0) }), void 0)) : null;
+                                ], onClick: function () { return handleClose('manualClose'); }, "aria-label": locale.snackbar.closeAriaLabel }, sharedProps, closeIconButtonProps, { children: (0, jsx_runtime_1.jsx)(Close, (0, tslib_1.__assign)({ "data-testid": "snackbar-close", size: 10, className: { fill: '#A0A0A8' } }, sharedProps, closeProps), void 0) }), void 0))] }), void 0) }), void 0) }), void 0) }), void 0) }), void 0)) : null;
 };
 exports.default = Snackbar;

package/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/snackbar/styled-component.js

@@ -59,25 +59,28 @@ exports.StyledPlacementContainer = (0, style_1.styled)('div', 'flex flex-col fix
 exports.StyledSnackbarContainer = (0, style_1.styled)('div', 'pointer-events-auto flex spr-shadow-01 overflow-hidden rounded-8 relative', function (_a) {
     var px2rem = _a.px2rem;
     return ({
-        minHeight: px2rem(80),
+        minHeight: px2rem(52),
         maxWidth: px2rem(432),
         minWidth: px2rem(250),
     });
 });
-exports.StyledIconsContainer = (0, style_1.styled)('div', 'flex items-center justify-center rounded-full', function (_a) {
+exports.StyledIconsContainer = (0, style_1.styled)('div', 'flex items-center justify-center rounded-8', function (_a) {
     var px2rem = _a.px2rem;
     return ({
-        width: px2rem(30),
-        height: px2rem(30),
+        width: px2rem(14),
+        height: px2rem(14),
     });
 });
-exports.StyledContentContainer = (0, style_1.styled)('div', 'py-6 px-8 overflow-hidden flex items-center flex-1', function (_a) {
+exports.StyledContentContainer = (0, style_1.styled)('div', 'py-2 px-3 overflow-hidden flex items-center flex-1', function (_a) {
     var theme = _a.theme;
     return ({
         backgroundColor: theme.name.includes('dark') ? theme.spr.ui05 : '#212123',
     });
 });
-exports.StyledMessage = (0, style_1.styled)('div', 'typography-bs1 ml-3 flex-1 flex items-center spr-text-05');
+exports.StyledMessage = (0, style_1.styled)('div', 'font-500 text-14  ml-3 flex-1 flex items-center spr-text-05', {
+    lineHeight: '18px',
+    wordBreak: 'break-word',
+});
 var getIconStyles = function (utils, props) { return ({
     fill: (0, intentHelper_1.intentColor)(utils, props, utils.theme.supportSuccess),
 }); };