@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/select/types.d.ts

@@ -1,33 +1,49 @@
-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 type * as React from 'react';
+import type { DropdownProps as BaseDropdownProps, Id, Option, Options, OverridesDropdown as BaseuiDropdownOverrides, 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';
-/**
- * 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 = {
+import type { STATE_CHANGE_TYPE } from './constants';
+import type { Override } from '../overrides';
+import type { TagProps } from '../tag';
+import type { Intent, SpacewebComponentProps } from '../types';
+import type { PopoverProps } from '../popover/types';
+import type { ValueOf } from '../utility-types';
+import type { Value } from '../baseui/select/types';
+import type { Merge, SimpleUnionOmit } from '../type-utils';
+import type { ButtonProps } from '../button';
+import type { SubMenuItem, MenuItemActions } from '../menu/types';
+import type { NoResultsMessageProps } from './no-results-message';
+/** @deprecated */
+type DeprecatedSize = 'xxxs' | 'xs' | 'sm' | 'md' | 'lg';
+export type Size = 'small' | 'medium' | DeprecatedSize;
+export type Type = 'select' | 'search';
+type OverridableComponent = keyof Omit<BaseuiSelectOverrides, 'Dropdown' | 'DropdownListItem' | 'DropdownOption'> | 'Menu' | 'MenuItem' | 'NoResults' | 'Divider' | 'ListItemText' | 'OverlayContentContainer' | 'Checkbox' | 'StartEnhancer' | 'EndEnhancer';
+export type SelectActions = {
     setDropdownOpen?: (shouldOpen: boolean) => void;
 };
-export declare type OnChangeParams = {
+export type OnChangeParams = {
     value: Value;
     option?: Option;
     type?: ValueOf<typeof STATE_CHANGE_TYPE>;
+    valueKeys?: Array<Id>;
 };
-export declare type BaseSelectProps = SpacewebComponentProps<Omit<BaseuiSelectProps, 'overrides' | 'size' | 'type' | 'onChange' | 'positive' | 'error'>> & {
+export type BaseSelectProps = SpacewebComponentProps<Omit<BaseuiSelectProps, 'overrides' | 'size' | 'type' | 'onChange' | 'positive' | 'error' | 'selectLocale' | 'startEnhancer' | 'endEnhancer'>> & {
     onChange?: (params: OnChangeParams) => unknown;
     intent?: Intent;
     overrides?: {
         [key in OverridableComponent]?: Override<any>;
     };
+    startEnhancer?: React.ReactNode | ((props: SharedProps) => React.ReactNode);
+    endEnhancer?: React.ReactNode | ((props: SharedProps) => React.ReactNode);
+    /**
+     * Renders an adjoined `Button` as the start enhancer.
+     * Cannot be used together with `startEnhancer`. Not supported for `overlay` or `mobile` select types.
+     */
+    startEnhancerButtonProps?: SelectEnhancerButtonConfig;
+    /**
+     * Renders an adjoined `Button` as the end enhancer.
+     * Cannot be used together with `endEnhancer`. Not supported for `overlay` or `mobile` select types.
+     */
+    endEnhancerButtonProps?: SelectEnhancerButtonConfig;
     type?: Type;
     hideSelectAll?: boolean;
     size?: Size;
@@ -37,30 +53,47 @@ export declare type BaseSelectProps = SpacewebComponentProps<Omit<BaseuiSelectPr
     createOption?: (label: string) => Options | Promise<Options>;
     onPaste?: (event: React.ClipboardEvent) => Options | undefined;
     virtual?: boolean;
+    /**
+     * Action buttons rendered for each menu item. Pass `({ item }) => …` to vary actions per option (`$item`).
+     * Select-all, group-select-all, clear, creatable, and no-results rows hide actions by default.
+     */
+    getActionsElement?: MenuItemActions;
     ignoreBoundary?: boolean;
     delimiter?: string;
     clearAsOption?: boolean;
     clearAsOptionLabel?: string;
     selectOnTab?: boolean;
+    limitTags?: number;
+    expandLimitTagsOnFocus?: boolean;
+    children?: PopoverProps['children'];
+    noResultsConfig?: NoResultsMessageProps;
 };
-declare type Merge<A, B> = Omit<A, keyof B> & B;
-export declare type OverlaySelectProps = Merge<BaseSelectProps, {
+export type OverlaySelectProps = Merge<BaseSelectProps, {
     type: 'overlay';
     overlayWidth?: string;
-    children: PopoverProps['children'];
     scrollContainer?: 'overlayContainer' | 'menuContainer';
 }>;
-export declare type MobileSelectProps = Merge<OverlaySelectProps, {
+export type MobileSelectProps = Merge<OverlaySelectProps, {
     type: 'mobile';
-    children?: React.ReactNode;
     label?: React.ReactNode;
 }>;
-export declare type SelectProps = BaseSelectProps | OverlaySelectProps | MobileSelectProps;
-export declare type StatefulSelectProps = SelectProps & {
+export type SelectProps = SimpleUnionOmit<BaseSelectProps | OverlaySelectProps | MobileSelectProps, 'value'> & {
+    value?: ReadonlyArray<Option | Id>;
+};
+export type StatefulSelectProps = SelectProps & {
     initialState?: State;
     stateReducer?: StateReducer;
 };
-export declare type SharedProps = {
+export type NestedSelectOption = Option & SubMenuItem;
+export type NestedSelectOptions = Array<NestedSelectOption>;
+/**
+ * creatable is not supported as of now
+ */
+export type GroupedSelectProps = SimpleUnionOmit<SelectProps, 'creatable' | 'options'> & {
+    options?: Record<string, Array<Option>>;
+    hideGroupSelectAll?: boolean;
+};
+export type SharedProps = {
     $clearable?: boolean;
     $creatable?: boolean;
     $disabled?: boolean;
@@ -80,16 +113,20 @@ export declare type SharedProps = {
     $isEmpty?: boolean;
     $size?: Size;
     $selectSize?: Size;
+    $limitTags?: number;
 };
-export declare type DropdownProps = Omit<BaseDropdownProps, 'overrides' | 'size' | 'type'> & {
+/** Props for an adjoined `Button` enhancer. `size` and `disabled` follow the Select field. */
+export type SelectEnhancerButtonProps = Omit<ButtonProps, 'size' | 'disabled' | 'intent'>;
+export type SelectEnhancerButtonConfig = SelectEnhancerButtonProps | ((sharedProps: SharedProps) => SelectEnhancerButtonProps);
+export type DropdownProps = Omit<BaseDropdownProps, 'overrides' | 'size' | 'type'> & {
     overrides?: {
         [key in keyof BaseuiDropdownOverrides]?: Override<any>;
     };
     type?: Type;
 };
 export declare const CLEAR_OPTION_ID = "__clear";
-declare type RemoveValue = () => void;
-export declare type MultiValueProps = Omit<TagProps, 'overrides'> & SharedProps & {
+type RemoveValue = () => void;
+export type MultiValueProps = Omit<TagProps, 'overrides'> & SharedProps & {
     $isContainerFocused?: boolean;
     $valueByIdMap: Record<string, Option>;
     $valueKey: string;
@@ -106,4 +143,4 @@ export declare type MultiValueProps = Omit<TagProps, 'overrides'> & SharedProps
     };
 };
 export { SELECT_ALL_ID };
-export type { Option, Value, Options, Optgroups, StateReducer, ControlRef, ImperativeMethods, AutosizeInputProps, StatefulContainerProps, SelectState, AutosizeInputState, State as StatefulContainerState, } from '../baseui/select';
+export type { Option, Id, Value, Options, Optgroups, StateReducer, ControlRef, ImperativeMethods, AutosizeInputProps, StatefulContainerProps, SelectState, AutosizeInputState, State as StatefulContainerState, } from '../baseui/select';

package/select/utils/adapt-select-value.d.ts

@@ -0,0 +1,2 @@
+import { Option, Id, Value } from '../types';
+export declare const adaptSelectValue: (optionsIdMap: Record<Id, Option>, value?: ReadonlyArray<Option | Id>) => Value | undefined;

package/select/utils/adapt-select-value.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adaptSelectValue = void 0;
+var adaptSelectValue = function (optionsIdMap, value) {
+    return value &&
+        value.reduce(function (acc, val) {
+            if (typeof val === 'string' || typeof val === 'number') {
+                optionsIdMap[val] && acc.push(optionsIdMap[val]);
+            }
+            else {
+                acc.push(val);
+            }
+            return acc;
+        }, []);
+};
+exports.adaptSelectValue = adaptSelectValue;

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

@@ -2,7 +2,7 @@
 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 default_props_1 = 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;

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.filterOptions = void 0;
 var tslib_1 = require("tslib");
 // todo: no deep import
-var default_filter_options_1 = (0, tslib_1.__importDefault)(require("../../baseui/select/utils/default-filter-options"));
+var default_filter_options_1 = 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));
+    return (0, default_filter_options_1.default)(options, filterValue, excludeOptions, tslib_1.__assign({ matchProp: 'label' }, newProps));
 };
 exports.filterOptions = filterOptions;

package/select/utils/hidden-element.js

@@ -5,7 +5,7 @@ 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: {
+    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ id: id, style: {
             border: 0,
             clip: 'rect(0 0 0 0)',
             height: '0px',
@@ -14,6 +14,6 @@ var HiddenElement = function (_a) {
             padding: 0,
             position: 'absolute',
             width: '0px',
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 exports.HiddenElement = HiddenElement;

package/select/utils/merge-options.js

@@ -17,6 +17,6 @@ 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));
+    return removeDuplicates(valueKey, tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(optArr1), false), tslib_1.__read(optArr2), false));
 }
 exports.mergeOptions = mergeOptions;

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

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

package/singleton/createSingletonContext.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This file should be used within spaceweb repository only. Using this outside may lead to breaking behavior.
+ */
+import type { Context } from 'react';
+export declare function createSingletonContext<T>(defaultValue: T, identifier: string): Context<T>;

package/singleton/createSingletonContext.js

@@ -0,0 +1,21 @@
+"use strict";
+/**
+ * This file should be used within spaceweb repository only. Using this outside may lead to breaking behavior.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSingletonContext = void 0;
+/*
+ * Please refer the following doc - https://sprinklr.atlassian.net/wiki/spaces/Frontend/pages/5506367561/ModuleFederation+Handbook#Using-Singleton-Context
+ */
+var react_1 = require("react");
+var allContexts = {};
+function createSingletonContext(defaultValue, identifier) {
+    if (allContexts[identifier]) {
+        return allContexts[identifier];
+    }
+    var context = (0, react_1.createContext)(defaultValue);
+    context.displayName = identifier;
+    allContexts[identifier] = context;
+    return context;
+}
+exports.createSingletonContext = createSingletonContext;

package/slider/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATE_CHANGE_TYPE = void 0;
+exports.STATE_CHANGE_TYPE = Object.freeze({
+    change: 'change',
+    finalChange: 'finalChange',
+});

package/slider/index.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatefulSlider = exports.StatefulSliderContainer = exports.Slider = void 0;
 var tslib_1 = require("tslib");
 var slider_1 = require("./slider");
-Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(slider_1).default; } });
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return tslib_1.__importDefault(slider_1).default; } });
 var stateful_slider_container_1 = require("./stateful-slider-container");
-Object.defineProperty(exports, "StatefulSliderContainer", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_slider_container_1).default; } });
+Object.defineProperty(exports, "StatefulSliderContainer", { enumerable: true, get: function () { return tslib_1.__importDefault(stateful_slider_container_1).default; } });
 var stateful_slider_1 = require("./stateful-slider");
-Object.defineProperty(exports, "StatefulSlider", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(stateful_slider_1).default; } });
-(0, tslib_1.__exportStar)(require("./types"), exports);
+Object.defineProperty(exports, "StatefulSlider", { enumerable: true, get: function () { return tslib_1.__importDefault(stateful_slider_1).default; } });
+tslib_1.__exportStar(require("./types"), exports);

package/slider/mark.d.ts

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

package/slider/mark.js

@@ -2,12 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var styled_components_1 = require("./styled-components");
-var useOverrides_1 = require("../overrides/useOverrides");
+var overrides_1 = require("../overrides");
 var Mark = React.forwardRef(function (_a, ref) {
-    var markLabel = _a.markLabel, getMarkLabel = _a.getMarkLabel, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["markLabel", "getMarkLabel", "overrides"]);
-    var _b = (0, tslib_1.__read)((0, useOverrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.MarkLabel, styled_components_1.StyledMarkLabel), 2), MarkLabel = _b[0], markLabelProps = _b[1];
-    return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledMark, (0, tslib_1.__assign)({}, props, { ref: ref }, { children: markLabel ? (0, jsx_runtime_1.jsx)(MarkLabel, (0, tslib_1.__assign)({}, markLabelProps, { children: getMarkLabel(props) }), void 0) : null }), void 0));
+    var markLabel = _a.markLabel, getMarkLabel = _a.getMarkLabel, overrides = _a.overrides, props = tslib_1.__rest(_a, ["markLabel", "getMarkLabel", "overrides"]);
+    var _b = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.MarkLabel, styled_components_1.StyledMarkLabel), 2), MarkLabel = _b[0], markLabelProps = _b[1];
+    //@ts-ignore -- style prop is passed via react-range
+    var propStyle = props === null || props === void 0 ? void 0 : props.style;
+    propStyle.insetInlineStart = propStyle.left;
+    return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledMark, tslib_1.__assign({ "data-testid": "slider-mark" }, props, { ref: ref }, { children: markLabel ? (0, jsx_runtime_1.jsx)(MarkLabel, tslib_1.__assign({}, markLabelProps, { children: getMarkLabel(props) })) : null })));
 });
 exports.default = Mark;

package/slider/slider.d.ts

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-import { SliderProps } from './types';
+import type { ReactElement } from 'react';
+import type { SliderProps } from './types';
 declare const Slider: {
-    ({ overrides, markLabel, intent, getMarkLabel, className, style, ...restProps }: SliderProps): ReactElement;
-    displayName: string;
+    ({ overrides, disabled, marks, onChange, onFinalChange, min: propMin, max: propMax, step, persistentThumb, valueToLabel, value: propProvidedValue, intent, className, style, getMarkLabel, markLabel, primaryIntentColor, secondaryIntentColor, trackColors, thumbColors, }: SliderProps): ReactElement;
+    __standard: string;
 };
 export default Slider;

package/slider/slider.js

@@ -2,80 +2,111 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var slider_1 = require("../baseui/slider");
-var mark_1 = (0, tslib_1.__importDefault)(require("./mark"));
+var react_range_1 = require("react-range");
+var focusVisible_1 = require("../baseui/utils/focusVisible");
 var styled_components_1 = require("./styled-components");
-var useHasMounted_1 = require("../hooks/useHasMounted");
 var overrides_1 = require("../overrides");
-// @ts-ignore
-slider_1.Slider.displayName = 'BaseSlider';
+var react_1 = require("react");
+var style_1 = require("../style");
+var useHasMounted_1 = require("../hooks/useHasMounted");
+var DocumentProvider_1 = require("../spacewebProvider/DocumentProvider");
+var mark_1 = tslib_1.__importDefault(require("./mark"));
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+var intentHelper_1 = require("../helpers/intentHelper");
+var limitValue = function (value) {
+    if (value.length === 0) {
+        throw new Error('the value prop represents positions of thumbs, so its length should be greater than 0');
+    }
+    return value;
+};
 var defaultMarkLabel = function (_a) {
     var $markIndex = _a.$markIndex, $min = _a.$min, $step = _a.$step;
     return "".concat(($min || 0) + $markIndex * $step);
 };
 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"]);
-    // 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 _b = _a.overrides, overrides = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.marks, marks = _d === void 0 ? false : _d, _e = _a.onChange, onChange = _e === void 0 ? noop_1.default : _e, _f = _a.onFinalChange, onFinalChange = _f === void 0 ? noop_1.default : _f, _g = _a.min, propMin = _g === void 0 ? 0 : _g, _h = _a.max, propMax = _h === void 0 ? 100 : _h, _j = _a.step, step = _j === void 0 ? 1 : _j, _k = _a.persistentThumb, persistentThumb = _k === void 0 ? false : _k, _l = _a.valueToLabel, valueToLabel = _l === void 0 ? function (label) { return label; } : _l, propProvidedValue = _a.value, _m = _a.intent, intent = _m === void 0 ? 'default' : _m, className = _a.className, style = _a.style, _o = _a.getMarkLabel, getMarkLabel = _o === void 0 ? defaultMarkLabel : _o, markLabel = _a.markLabel, primaryIntentColor = _a.primaryIntentColor, secondaryIntentColor = _a.secondaryIntentColor, trackColors = _a.trackColors, thumbColors = _a.thumbColors;
+    var _p = tslib_1.__read((0, react_1.useState)(-1), 2), hoveredThumbIndex = _p[0], setHoveredThumbIndex = _p[1];
     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: {
-                $intent: intent,
-                'data-spaceweb': 'slider',
-            },
-        },
-        Track: {
-            style: 'p-0',
-        },
-        InnerTrack: {
-            style: styled_components_1.getInnerTrackStyles,
-            props: {
-                $intent: intent,
-                'data-testid': 'slider-track',
-            },
-        },
-        Mark: {
-            component: mark_1.default,
-            props: {
-                $intent: intent,
-                'data-testid': 'slider-mark',
-                getMarkLabel: getMarkLabel,
-                markLabel: markLabel,
-                overrides: {
-                    MarkLabel: overrides === null || overrides === void 0 ? void 0 : overrides.MarkLabel,
+    var _q = tslib_1.__read((0, react_1.useState)(false), 2), isFocusVisible = _q[0], setIsFocusVisible = _q[1];
+    var _r = tslib_1.__read((0, react_1.useState)(-1), 2), focusedThumbIndex = _r[0], setFocusedThumbIndex = _r[1];
+    var styleUtils = (0, style_1.useStyle)();
+    var isRTL = styleUtils.isRTL, theme = styleUtils.theme;
+    var ownerDocument = (0, DocumentProvider_1.useDocument)();
+    //check if more than 2 thumbs are rendered , trackColors and thumbColors array have been provided with correct length
+    if (propProvidedValue.length > 2 &&
+        ((trackColors === null || trackColors === void 0 ? void 0 : trackColors.length) !== propProvidedValue.length + 1 || (thumbColors === null || thumbColors === void 0 ? void 0 : thumbColors.length) !== propProvidedValue.length)) {
+        throw new Error('for value array length greater than 2 , please provide trackColors array having length = value.length + 1 and thumbColors array having length = value.length');
+    }
+    var handleFocus = (0, react_1.useCallback)(function (event) {
+        var _a;
+        if ((0, focusVisible_1.isFocusVisible)(event)) {
+            setIsFocusVisible(true);
+        }
+        var index = +((_a = event.target.getAttribute('data-thumbIndex')) !== null && _a !== void 0 ? _a : -1);
+        setFocusedThumbIndex(index);
+    }, []);
+    var handleBlur = (0, react_1.useCallback)(function (_event) {
+        if (isFocusVisible) {
+            setIsFocusVisible(false);
+        }
+        setFocusedThumbIndex(-1);
+    }, [isFocusVisible]);
+    var min = Math.min(propMin, propMax);
+    var max = Math.max(min, propMax);
+    var providedValue = propProvidedValue.map(function (item) { return Math.min(max, Math.max(min, item)); });
+    if (min === max) {
+        max += step / 100; // if min and max are equal then react-range library will throw error , to prevent it , we add a step/100 value in max
+    }
+    var value = limitValue(providedValue);
+    var sharedProps = {
+        $disabled: disabled,
+        $step: step,
+        $min: min,
+        $max: max,
+        $marks: marks,
+        $value: value,
+        $isFocusVisible: isFocusVisible,
+        $intent: intent,
+        $primaryIntentColor: primaryIntentColor,
+        $secondaryIntentColor: secondaryIntentColor,
+        $trackColors: trackColors,
+        $thumbColors: thumbColors,
+    };
+    var _s = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Root, styled_components_1.StyledRoot), 2), Root = _s[0], rootProps = _s[1];
+    var _t = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Track, styled_components_1.StyledTrack), 2), Track = _t[0], trackProps = _t[1];
+    var _u = tslib_1.__read((0, overrides_1.useOverrides)(overrides.InnerTrack, styled_components_1.StyledInnerTrack), 2), InnerTrack = _u[0], innerTrackProps = _u[1];
+    var _v = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Thumb, styled_components_1.StyledThumb), 2), Thumb = _v[0], thumbProps = _v[1];
+    var _w = tslib_1.__read((0, overrides_1.useOverrides)(overrides.InnerThumb, styled_components_1.StyledInnerThumb), 2), InnerThumb = _w[0], innerThumbProps = _w[1];
+    var _x = tslib_1.__read((0, overrides_1.useOverrides)(overrides.ThumbValue, styled_components_1.StyledThumbValue), 2), ThumbValue = _x[0], thumbValueProps = _x[1];
+    var _y = tslib_1.__read((0, overrides_1.useOverrides)(overrides.Mark, mark_1.default), 2), MarkOverriden = _y[0], markProps = _y[1];
+    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "data-spaceweb": "slider" }, sharedProps, rootProps, { onFocus: (0, focusVisible_1.forkFocus)(rootProps, handleFocus), onBlur: (0, focusVisible_1.forkBlur)(rootProps, handleBlur), style: [style, rootProps === null || rootProps === void 0 ? void 0 : rootProps.style], className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: hasMounted ? ((0, jsx_runtime_1.jsx)(react_range_1.Range, tslib_1.__assign({ step: step, min: min, max: max, values: value, disabled: disabled, onChange: function (val) { return onChange({ value: val }); }, onFinalChange: function (val) { return onFinalChange({ value: val }); }, rtl: isRTL, renderTrack: function (_a) {
+                var props = _a.props, children = _a.children, isDragged = _a.isDragged;
+                return ((0, jsx_runtime_1.jsx)(Track, tslib_1.__assign({ onMouseDown: props.onMouseDown, onTouchStart: props.onTouchStart, "$isDragged": isDragged }, sharedProps, trackProps, { children: (0, jsx_runtime_1.jsx)(InnerTrack, tslib_1.__assign({ "data-testid": "slider-track", "$isDragged": isDragged, ref: props.ref }, sharedProps, innerTrackProps, { children: children })) })));
+            }, renderThumb: function (_a) {
+                var props = _a.props, index = _a.index, isDragged = _a.isDragged;
+                var displayLabel = persistentThumb || ((hoveredThumbIndex === index || isDragged) && !disabled);
+                // In SSR, Thumbs are not properly positioned, hence hiding thumbs on server render.
+                // Refer https://github.com/tajo/react-range/issues/67#issuecomment-591703422
+                // Thumb is made ClientOnly to avoid Hydration mismatch error
+                return ((0, jsx_runtime_1.jsxs)(Thumb, tslib_1.__assign({}, props, { "data-thumbIndex": index, onMouseEnter: function () { return setHoveredThumbIndex(index); }, onMouseLeave: function () { return setHoveredThumbIndex(-1); }, "$thumbIndex": index, "$isDragged": isDragged, style: tslib_1.__assign(tslib_1.__assign({ '--sw-bg-color': value.length > 2 ? thumbColors[index] : primaryIntentColor !== null && primaryIntentColor !== void 0 ? primaryIntentColor : (0, intentHelper_1.intentColor)(styleUtils, sharedProps), '--sw-bg-color-hover': value.length > 2
+                            ? (0, styled_components_1.addOpacity)(thumbColors[index], '0.1')
+                            : secondaryIntentColor !== null && secondaryIntentColor !== void 0 ? secondaryIntentColor : (0, intentHelper_1.intentColor)(styleUtils, sharedProps, theme.spr.interactiveHover), '--sw-shadow': isFocusVisible && focusedThumbIndex === index
+                            ? "0 0 0 3px ".concat(theme.spr.focus01)
+                            : '0 1px 4px rgba(0, 0, 0, 0.12)', '--sw-shadow-hover': "0px 0px 0px 4px ".concat(value.length > 2
+                            ? (0, styled_components_1.addOpacity)(thumbColors[index], '0.1')
+                            : secondaryIntentColor !== null && secondaryIntentColor !== void 0 ? secondaryIntentColor : (0, styled_components_1.secondaryIntentColor)({ theme: theme }, sharedProps, (0, styled_components_1.addOpacity)(theme.spr.interactiveHover, '0.33'))), '--sw-shadow-focus': "0px 0px 0px 4px ".concat(value.length > 2
+                            ? (0, styled_components_1.addOpacity)(thumbColors[index], '0.1')
+                            : secondaryIntentColor !== null && secondaryIntentColor !== void 0 ? secondaryIntentColor : (0, styled_components_1.secondaryIntentColor)({ theme: theme }, sharedProps, (0, styled_components_1.addOpacity)(theme.spr.interactiveHover, '0.33'))) }, props.style), { zIndex: 'unset' }) }, sharedProps, thumbProps, { "$isFocusVisible": isFocusVisible && focusedThumbIndex === index }, { children: [displayLabel && ((0, jsx_runtime_1.jsx)(ThumbValue, tslib_1.__assign({ "$thumbIndex": index, "$isDragged": isDragged }, sharedProps, thumbValueProps, { children: valueToLabel(value[index]) }))), displayLabel && ((0, jsx_runtime_1.jsx)(InnerThumb, tslib_1.__assign({ "$thumbIndex": index, "$isDragged": isDragged }, sharedProps, innerThumbProps)))] })));
+            } }, (marks
+            ? {
+                renderMark: function (_a) {
+                    var props = _a.props, index = _a.index;
+                    return ((0, jsx_runtime_1.jsx)(MarkOverriden, tslib_1.__assign({ markLabel: markLabel, getMarkLabel: getMarkLabel, "$markIndex": index, overrides: overrides }, props, sharedProps, markProps)));
                 },
-            },
-        },
-        Thumb: {
-            // In SSR, Thumbs are not properly positioned, hence hiding thumbs on server render.
-            // Refer https://github.com/tajo/react-range/issues/67#issuecomment-591703422
-            // Thumb is made ClientOnly to avoid Hydration mismatch error
-            component: hasMounted ? undefined : function () { return null; },
-            style: styled_components_1.getThumbStyles,
-            props: {
-                $intent: intent,
-            },
-        },
-        InnerThumb: {
-            style: styled_components_1.getInnerThumbStyles,
-            props: {
-                $intent: intent,
-            },
-        },
-        ThumbValue: {
-            style: styled_components_1.getThumbValueStyles,
-            props: {
-                $intent: intent,
-            },
-        },
-        TickBar: {
-            component: function () { return null; },
-        },
-    }, 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);
+            }
+            : {}), { 
+            // @ts-ignore -- need to pass ownerDocument to make it work in live chat
+            ownerDocument: ownerDocument }))) : ((0, jsx_runtime_1.jsx)(Track, tslib_1.__assign({}, sharedProps, trackProps, { children: (0, jsx_runtime_1.jsx)(InnerTrack, tslib_1.__assign({ "data-testid": "slider-track" }, sharedProps, innerTrackProps)) }))) })));
 };
-Slider.displayName = 'Slider';
+Slider.__standard = 'Component';
 exports.default = Slider;

package/slider/stateful-slider-container.d.ts

@@ -1,7 +1,4 @@
-import { ReactElement } from 'react';
-import { StatefulContainerProps } from './types';
-declare const StatefulContainer: {
-    ({ overrides, ...props }: StatefulContainerProps): ReactElement;
-    displayName: string;
-};
-export default StatefulContainer;
+/// <reference types="react" />
+import type { StatefulContainerProps } from './types';
+declare const StatefulSliderContainer: ({ children, initialState, stateReducer, max, min, step, onChange, onFinalChange, ...restProps }: StatefulContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default StatefulSliderContainer;

package/slider/stateful-slider-container.js

@@ -1,13 +1,27 @@
 "use strict";
 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");
-//@ts-ignore
-slider_1.StatefulContainer.displayName = 'BaseStatefulContainer';
-var StatefulContainer = function (_a) {
-    var overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["overrides"]);
-    return ((0, jsx_runtime_1.jsx)(slider_1.StatefulContainer, (0, tslib_1.__assign)({}, props, { overrides: overrides }), void 0));
+var react_1 = require("react");
+var constants_1 = require("./constants");
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+var defaultStateReducer = function (type, nextState) { return nextState; };
+var StatefulSliderContainer = function (_a) {
+    var children = _a.children, initialState = _a.initialState, _b = _a.stateReducer, stateReducer = _b === void 0 ? defaultStateReducer : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.min, min = _d === void 0 ? 1 : _d, _e = _a.step, step = _e === void 0 ? 1 : _e, _f = _a.onChange, onChange = _f === void 0 ? noop_1.default : _f, _g = _a.onFinalChange, onFinalChange = _g === void 0 ? noop_1.default : _g, restProps = tslib_1.__rest(_a, ["children", "initialState", "stateReducer", "max", "min", "step", "onChange", "onFinalChange"]);
+    var _h = tslib_1.__read((0, react_1.useState)(initialState && Array.isArray(initialState.value) ? initialState.value : [Math.round((max - min) / 2) + min]), 2), value = _h[0], setValue = _h[1];
+    var internalSetState = (0, react_1.useCallback)(function (type, _a) {
+        var value = _a.value;
+        var nextState = { value: value };
+        var newState = stateReducer(type, nextState, { value: value });
+        setValue(newState.value);
+    }, [stateReducer]);
+    var handleOnChange = (0, react_1.useCallback)(function (params) {
+        internalSetState(constants_1.STATE_CHANGE_TYPE.change, params);
+        return onChange(tslib_1.__assign({}, params));
+    }, [onChange, internalSetState]);
+    var handleOnFinalChange = (0, react_1.useCallback)(function (params) {
+        internalSetState(constants_1.STATE_CHANGE_TYPE.finalChange, params);
+        return onFinalChange(tslib_1.__assign({}, params));
+    }, [onFinalChange, internalSetState]);
+    return children(tslib_1.__assign(tslib_1.__assign({}, restProps), { value: value, onChange: handleOnChange, onFinalChange: handleOnFinalChange }));
 };
-StatefulContainer.displayName = 'StatefulContainer';
-exports.default = StatefulContainer;
+exports.default = StatefulSliderContainer;

package/slider/stateful-slider.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var stateful_slider_container_1 = (0, tslib_1.__importDefault)(require("./stateful-slider-container"));
-var slider_1 = (0, tslib_1.__importDefault)(require("./slider"));
-var StatefulSlider = function (props) { return ((0, jsx_runtime_1.jsx)(stateful_slider_container_1.default, (0, tslib_1.__assign)({}, props, { children: function (sliderProps) { return (0, jsx_runtime_1.jsx)(slider_1.default, (0, tslib_1.__assign)({}, sliderProps, { overrides: props.overrides }), void 0); } }), void 0)); };
+var stateful_slider_container_1 = tslib_1.__importDefault(require("./stateful-slider-container"));
+var slider_1 = tslib_1.__importDefault(require("./slider"));
+var StatefulSlider = function (props) { return ((0, jsx_runtime_1.jsx)(stateful_slider_container_1.default, tslib_1.__assign({}, props, { children: function (sliderProps) { return (0, jsx_runtime_1.jsx)(slider_1.default, tslib_1.__assign({}, sliderProps, { overrides: props.overrides })); } }))); };
 StatefulSlider.displayName = 'StatefulSlider';
 exports.default = StatefulSlider;