@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/slider/styled-components.d.ts

@@ -1,7 +1,24 @@
-import { Styles } from '../types';
-export declare const getInnerTrackStyles: Styles;
-export declare const getThumbStyles: Styles;
-export declare const getInnerThumbStyles: Styles;
-export declare const getThumbValueStyles: Styles;
-export declare const StyledMark: import("../style/styled").StyledComponent;
-export declare const StyledMarkLabel: import("../style/styled").StyledComponent;
+import { StyleUtils } from '../types';
+export declare const addOpacity: (token: string, opacity: string) => string | null;
+export declare const secondaryIntentColor: ({ theme }: {
+    theme: any;
+}, { $intent }: {
+    $intent: any;
+}, defaultColor?: any) => any;
+export declare const StyledRoot: import("../style").StyledComponent;
+export declare const StyledTrack: import("../style").StyledComponent;
+export declare const getInnerTrackBackgroundColor: (utils: StyleUtils, { $value, $min, $max, $intent, $primaryIntentColor, $secondaryIntentColor, $trackColors: trackColors }: {
+    $value: any;
+    $min: any;
+    $max: any;
+    $intent: any;
+    $primaryIntentColor: any;
+    $secondaryIntentColor: any;
+    $trackColors: any;
+}) => string;
+export declare const StyledInnerTrack: import("../style").StyledComponent;
+export declare const StyledThumb: import("../style").StyledComponent;
+export declare const StyledInnerThumb: import("../style").StyledComponent;
+export declare const StyledThumbValue: import("../style").StyledComponent;
+export declare const StyledMark: import("../style").StyledComponent;
+export declare const StyledMarkLabel: import("../style").StyledComponent;

package/slider/styled-components.js

@@ -1,93 +1,130 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledMarkLabel = exports.StyledMark = exports.getThumbValueStyles = exports.getInnerThumbStyles = exports.getThumbStyles = exports.getInnerTrackStyles = void 0;
-var tslib_1 = require("tslib");
-var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
+exports.StyledMarkLabel = exports.StyledMark = exports.StyledThumbValue = exports.StyledInnerThumb = exports.StyledThumb = exports.StyledInnerTrack = exports.getInnerTrackBackgroundColor = exports.StyledTrack = exports.StyledRoot = exports.secondaryIntentColor = exports.addOpacity = void 0;
+var style_1 = require("../style");
 var intentHelper_1 = require("../helpers/intentHelper");
 var helpers_1 = require("../helpers");
+var intentBackgroundColor = {
+    default: 'spr-ui-04',
+    error: 'spr-bg-error',
+    success: 'spr-bg-success',
+    warning: 'spr-bg-warning',
+};
 var addOpacity = function (token, opacity) {
     return token.includes('rgb') ? "".concat(token.split(')')[0] + opacity, ")") : (0, helpers_1.hex2rgb)(token, opacity);
 };
-var secondaryIntentColor = function (_a, _b) {
+exports.addOpacity = addOpacity;
+var secondaryIntentColor = function (_a, _b, defaultColor) {
     var theme = _a.theme;
     var $intent = _b.$intent;
+    if (defaultColor === void 0) { defaultColor = theme.spr.bgTertiary; }
     switch ($intent) {
         case 'error':
-            return theme.spr.supportErrorHighlight;
+            return theme.spr.bgErrorHighlight;
         case 'success':
-            return theme.spr.supportSuccessHighlight;
+            return theme.spr.bgSuccessHighlight;
         case 'warning':
-            return theme.spr.supportWarningHighlight;
+            return theme.spr.bgWarningHighlight;
         default:
-            return addOpacity(theme.spr.ui04, '0.1');
+            return defaultColor;
+    }
+};
+exports.secondaryIntentColor = secondaryIntentColor;
+exports.StyledRoot = (0, style_1.styled)('div', 'relative w-full p-4');
+exports.StyledRoot.displayName = 'StyledRoot';
+exports.StyledTrack = (0, style_1.styled)('div', 'flex bg-transparent p-0', function (_, props) {
+    var _a = props.$value, $value = _a === void 0 ? [] : _a, $disabled = props.$disabled, $isDragged = props.$isDragged;
+    var cursorClass = 'inherit';
+    if ($disabled) {
+        cursorClass = 'cursor-not-allowed';
+    }
+    else if ($isDragged) {
+        cursorClass = 'cursor-grabbing';
+    }
+    else if ($value.length === 1) {
+        cursorClass = 'cursor-pointer';
+    }
+    return cursorClass;
+});
+exports.StyledTrack.displayName = 'StyledTrack';
+var getInnerTrackBackgroundColor = function (utils, _a) {
+    var $value = _a.$value, $min = _a.$min, $max = _a.$max, $intent = _a.$intent, $primaryIntentColor = _a.$primaryIntentColor, $secondaryIntentColor = _a.$secondaryIntentColor, trackColors = _a.$trackColors;
+    var isRTL = utils.isRTL, theme = utils.theme;
+    var intentPrimary = $primaryIntentColor !== null && $primaryIntentColor !== void 0 ? $primaryIntentColor : (0, intentHelper_1.intentColor)(utils, { $intent: $intent });
+    var intentSecondary = $secondaryIntentColor !== null && $secondaryIntentColor !== void 0 ? $secondaryIntentColor : (0, exports.secondaryIntentColor)({ theme: theme }, { $intent: $intent });
+    var scaledValue = $value.map(function (value) { return ((value - $min) / ($max - $min)) * 100; });
+    var gradientDirection = isRTL ? 'to left' : 'to right';
+    var background = '';
+    if (scaledValue.length === 1) {
+        background = "linear-gradient(".concat(gradientDirection, ", ").concat(intentPrimary, " ").concat(scaledValue[0], "%, ").concat(intentSecondary, " ").concat(scaledValue[0], "%)");
+    }
+    else if (scaledValue.length === 2) {
+        background = "linear-gradient(".concat(gradientDirection, ", ").concat(intentSecondary, " ").concat(scaledValue[0], "%,").concat(intentPrimary, " ").concat(scaledValue[0], "% ").concat(scaledValue[1], "%,").concat(intentSecondary, " ").concat(scaledValue[1], "%)");
     }
+    else {
+        var gradientValue_1 = '';
+        trackColors.forEach(function (color, index) {
+            if (index === 0) {
+                gradientValue_1 += "".concat(color, " ").concat(scaledValue[index], "%,");
+            }
+            else if (index === trackColors.length - 1) {
+                gradientValue_1 += "".concat(color, " ").concat(scaledValue[index - 1], "%");
+            }
+            else {
+                gradientValue_1 += "".concat(color, " ").concat(scaledValue[index - 1], "% ").concat(scaledValue[index], "%,");
+            }
+        });
+        background = "linear-gradient(".concat(gradientDirection, ",").concat(gradientValue_1, ")");
+    }
+    return background;
 };
-exports.getInnerTrackStyles = [
-    'w-full self-center',
-    function (_a, _b) {
-        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 = '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'));
-    },
-];
-exports.getThumbStyles = [
-    'flex items-center justify-center h-4 w-4',
-    function (_a, _b) {
-        var theme = _a.theme;
-        var $disabled = _b.$disabled, $isFocusVisible = _b.$isFocusVisible, $intent = _b.$intent;
-        var intentPrimary = (0, intentHelper_1.intentColor)({ theme: theme }, { $intent: $intent });
-        var intentSecondary = secondaryIntentColor({ theme: theme }, { $intent: $intent });
-        var hoverStyles = {
-            boxShadow: "0px 0px 0px 6px ".concat(intentSecondary),
-        };
-        return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: intentPrimary }, (0, longHandHelpers_1.borderRadius)('16px')), { cursor: $disabled ? 'not-allowed' : 'inherit' }), (!$disabled && {
-            ':hover': hoverStyles,
-            ':focus': (0, tslib_1.__assign)({ outline: 'none' }, ($isFocusVisible && hoverStyles)),
-        }));
-    },
-];
-exports.getInnerThumbStyles = [
-    'h-0 w-0 absolute border-l-8 border-t-8 border-b-8 border-r-8 border-solid',
-    function (_a) {
-        var theme = _a.theme, px2rem = _a.px2rem;
-        return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)('transparent')), { borderTopColor: theme.spr.tooltip01, backgroundColor: 'transparent', top: px2rem('-16px') }));
-    },
-];
-exports.getThumbValueStyles = [
-    'py-2 px-3 spr-tooltip-01 typography-l3 spr-text-06 absolute',
-    function (_a) {
-        var px2rem = _a.px2rem;
-        return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderRadius)('4px')), { top: px2rem('-47px') }));
-    },
-];
-exports.StyledMark = (0, styled_1.default)('div', 'ml-4 spr-ui-01 w-px relative opacity-50', function (_a, _b) {
-    var px2rem = _a.px2rem, theme = _a.theme;
-    var $markIndex = _b.$markIndex, $intent = _b.$intent, $value = _b.$value, $min = _b.$min, $max = _b.$max, $step = _b.$step;
-    var intentPrimary = (0, intentHelper_1.intentColor)({ theme: theme }, { $intent: $intent });
+exports.getInnerTrackBackgroundColor = getInnerTrackBackgroundColor;
+exports.StyledInnerTrack = (0, style_1.styledWithCssVariables)('div', function (styleUtils, sharedProps) { return ({
+    '--sw-bg-image': (0, exports.getInnerTrackBackgroundColor)(styleUtils, sharedProps),
+}); }, 'w-full self-center rounded-20 h-1 bg-image-[--sw-bg-image]', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return $disabled ? 'cursor-not-allowed opacity-60 forced-colors:border-disabled' : 'opacity-100 cursor-inherit';
+});
+exports.StyledInnerTrack.displayName = 'StyledInnerTrack';
+exports.StyledThumb = (0, style_1.styled)('div', 'flex items-center justify-center h-4 w-4 rounded-full forced-colors:border-1 bg-[--sw-bg-color] shadow-[--sw-shadow]', function (_, _a) {
+    var $disabled = _a.$disabled;
+    return !$disabled ? 'focus:outline-none hover:shadow-[--sw-shadow-hover] hover:bg-[--sw-bg-color-hover]' : '';
+}, function (_, _a) {
+    var $disabled = _a.$disabled, $isFocusVisible = _a.$isFocusVisible;
+    return !$disabled && $isFocusVisible ? 'focus:shadow-[--sw-shadow-focus] focus:bg-[--sw-bg-color-hover]' : '';
+}, function (_, _a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 'cursor-not-allowed forced-colors:border-disabled' : 'cursor-inherit');
+});
+exports.StyledThumb.displayName = 'StyledThumb';
+exports.StyledInnerThumb = (0, style_1.styledWithCssVariables)('div', function (_a, _) {
+    var theme = _a.theme;
+    return ({ '--sw-border-top-color': theme.spr.bgInverse });
+}, 'h-0 w-0 absolute border-l-6 border-t-6 border-b-6 border-r-6 border-solid border-transparent bg-transparent' +
+    ' border-t-[--sw-border-top-color] -top-3');
+exports.StyledInnerThumb.displayName = 'StyledInnerThumb';
+exports.StyledThumbValue = (0, style_1.styled)('div', 'whitespace-no-wrap py-1 px-3 spr-bg-inverse text-14 leading-150 font-400 spr-text-inverse absolute rounded-4', 'max-w-xs -top-10.25');
+exports.StyledThumbValue.displayName = 'StyledThumbValue';
+exports.StyledMark = (0, style_1.styled)('div', 'ml-4 spr-bg-primary w-px relative opacity-50 h-1', function (_, _a) {
+    var $markIndex = _a.$markIndex, $intent = _a.$intent, $value = _a.$value, $min = _a.$min, $max = _a.$max, $step = _a.$step, $primaryIntentColor = _a.$primaryIntentColor;
+    var intentPrimary = $primaryIntentColor !== null && $primaryIntentColor !== void 0 ? $primaryIntentColor : intentBackgroundColor[$intent];
     var markValue = $min + $markIndex * $step;
     var backgroundColor;
-    if ($markIndex === 0 || $markIndex === ($max - $min) / $step)
-        backgroundColor = 'transparent';
-    else if ($value.length === 1)
-        backgroundColor = $value[0] > markValue ? theme.spr.ui01 : intentPrimary;
-    else
-        backgroundColor = $value[0] < markValue && markValue < $value[1] ? theme.spr.ui01 : intentPrimary;
-    return {
-        height: px2rem('6px'),
-        backgroundColor: backgroundColor,
-    };
+    if ($markIndex === 0 || $markIndex === ($max - $min) / $step) {
+        backgroundColor = 'bg-transparent';
+    }
+    else if ($value.length === 1) {
+        backgroundColor = $value[0] > markValue ? 'spr-bg-primary' : intentPrimary;
+    }
+    else if ($value.length === 2) {
+        backgroundColor = $value[0] < markValue && markValue < $value[1] ? 'spr-bg-primary' : intentPrimary;
+    }
+    else {
+        backgroundColor = 'spr-bg-primary';
+    }
+    return backgroundColor;
 });
-exports.StyledMarkLabel = (0, styled_1.default)('div', 'absolute typography-l3', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
-        top: px2rem('15px'),
-        transform: 'translateX(-50%)',
-    });
+exports.StyledMarkLabel = (0, style_1.styled)('div', 'absolute text-11 leading-4 font-400 top-3.75', function (_a) {
+    var isRTL = _a.isRTL;
+    return isRTL ? 'translate-x-1/2' : '-translate-x-1/2';
 });

package/slider/types.d.ts

@@ -1,13 +1,26 @@
-/// <reference types="react" />
-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 & {
+import type { ReactElement, ReactNode } from 'react';
+import type { STATE_CHANGE_TYPE } from './constants';
+export type Params = {
+    value: Array<number>;
+};
+export type State = {
+    value: Array<number>;
+};
+export type ChangeAction = keyof typeof STATE_CHANGE_TYPE;
+export type StateReducer = (stateType: string, nextState: State, currentState: State) => State;
+type GetMarkLabelFn = (props: SharedProps & {
     $markIndex: number;
 }) => React.ReactNode;
-declare type CommonSliderProps = {
+type CommonSliderProps = {
+    /** @deprecated */
     intent?: Intent;
     markLabel?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    marks?: boolean;
     overrides?: {
         Root?: Override<SharedProps & Record<string, any>>;
         Track?: Override<SharedProps & Record<string, any>>;
@@ -20,22 +33,43 @@ declare type CommonSliderProps = {
     };
     disabled?: boolean;
     getMarkLabel?: GetMarkLabelFn;
+    primaryIntentColor?: string;
+    secondaryIntentColor?: string;
+    trackColors?: string[];
+    thumbColors?: string[];
+    onChange?: (a: Params) => unknown;
+    onFinalChange?: (a: Params) => unknown;
 };
-export declare type SharedProps = BaseSharedProps & {
-    $intent?: boolean;
+export type SharedProps = {
+    /** @deprecated */
+    $intent?: Intent;
     $step: number;
+    $disabled?: boolean;
+    $isDragged?: boolean;
+    $marks?: boolean;
+    $max?: number;
+    $min?: number;
+    $thumbIndex?: number;
+    $value?: Array<number>;
+    $isFocusVisible?: boolean;
+    $trackColors?: string[];
+    $thumbColors?: string[];
 };
-export declare type SliderProps = SpacewebComponentProps<Omit<BaseSliderProps, 'overrides'>> & CommonSliderProps;
-export declare type StatefulContainerProps = SpacewebComponentProps<Omit<BaseStatefulContainerProps, 'overrides' | 'stateReducer' | 'min' | 'max' | 'step' | 'onChange' | 'onFinalChange'>> & CommonSliderProps & {
-    stateReducer?: BaseStatefulContainerProps['stateReducer'];
-    min?: BaseStatefulContainerProps['min'];
-    max?: BaseStatefulContainerProps['max'];
-    step?: BaseStatefulContainerProps['step'];
-    onChange?: BaseStatefulContainerProps['onChange'];
-    onFinalChange?: BaseStatefulContainerProps['onFinalChange'];
+export type SliderProps = SpacewebComponentProps<{
+    value: Array<number>;
+    persistentThumb?: boolean;
+    valueToLabel?: (value: number) => ReactNode;
+}> & CommonSliderProps;
+export type StatefulContainerProps = SpacewebComponentProps<{
+    children: (a: SliderProps) => ReactElement;
+    initialState?: State;
+    stateReducer?: StateReducer;
+}> & CommonSliderProps;
+export type StatefulSliderProps = SpacewebComponentProps<Omit<SliderProps, 'value'>> & {
+    /** Initial state populated into the component */
+    initialState?: State;
 };
-export declare type StatefulSliderProps = SpacewebComponentProps<Omit<BaseStatefulSliderProps, 'overrides'>> & CommonSliderProps;
-export declare type MarkProps = SharedProps & {
+export type MarkProps = SharedProps & {
     $markIndex: number;
     overrides?: {
         MarkLabel?: Override<SharedProps & Record<string, any>>;

package/snackbar/Snackbar.d.ts

@@ -1,4 +1,7 @@
-import { ReactElement } from 'react';
-import { SnackbarProps } from './types';
-declare const Snackbar: ({ intent: _intent, message: _message, disableManualClose, placement, autoHide, autoHideDuration, hideOnClickAway, overrides, onClose, }: SnackbarProps) => ReactElement | null;
+import type { ReactElement } from 'react';
+import type { SnackbarProps } from './types';
+declare const Snackbar: {
+    ({ intent: _intent, message: _message, disableManualClose, placement, autoHide, autoHideDuration, hideOnClickAway, overrides: _overrides, onClose, }: SnackbarProps): ReactElement | null;
+    __standard: string;
+};
 export default Snackbar;

package/snackbar/Snackbar.js

@@ -4,26 +4,35 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var layer_1 = require("../baseui/layer");
 var react_1 = require("react");
-var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+var a11y_1 = require("../a11y");
+var dark_1 = tslib_1.__importDefault(require("@sprinklrjs/spaceweb-themes/hyperspace/dark"));
+var light_1 = tslib_1.__importDefault(require("@sprinklrjs/spaceweb-themes/hyperspace/light"));
 var button_1 = require("../button");
 var helpers_1 = require("../helpers");
-var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
+var close_1 = tslib_1.__importDefault(require("../icon/components/close"));
 var overrides_1 = require("../overrides");
 var constants_1 = require("./constants");
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var layer_2 = require("../layer");
 var styled_component_1 = require("./styled-component");
-var useSnackbar_1 = (0, tslib_1.__importDefault)(require("./useSnackbar"));
+var useSnackbar_1 = tslib_1.__importDefault(require("./useSnackbar"));
 var locale_1 = require("../locale");
+var style_1 = require("../style");
+var theme_1 = require("../theme");
 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 _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 outerTheme = (0, style_1.useStyle)().theme;
+    var inverseTheme = (0, react_1.useMemo)(function () { return ((0, themeHelpers_1.isDarkTheme)(outerTheme) ? light_1.default : dark_1.default); }, [outerTheme]);
     var _j = (0, useSnackbar_1.default)({
         intent: _intent,
         message: _message,
+        overrides: _overrides,
         autoHide: autoHide,
         autoHideDuration: autoHideDuration,
         hideOnClickAway: hideOnClickAway,
         onClose: onClose,
-    }), open = _j.open, shouldRender = _j.shouldRender, handleClose = _j.handleClose, snackbarContainerProps = _j.snackbarContainerProps, snackbarContainerRef = _j.snackbarContainerRef, intent = _j.intent, message = _j.message;
+    }), open = _j.open, shouldRender = _j.shouldRender, handleClose = _j.handleClose, snackbarContainerProps = _j.snackbarContainerProps, snackbarContainerRef = _j.snackbarContainerRef, intent = _j.intent, message = _j.message, overrides = _j.overrides, messageChangeTransition = _j.messageChangeTransition;
     var IntentIconComponent = constants_1.INTENT_TO_ICON[intent];
     var sharedProps = (0, helpers_1.add$props)({
         intent: intent,
@@ -33,27 +42,34 @@ var Snackbar = function (_a) {
         autoHideDuration: autoHideDuration,
         hideOnClickAway: hideOnClickAway,
         open: open,
+        messageChangeTransition: messageChangeTransition,
     });
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Layer, layer_1.Layer), 2), Layer = _k[0], layerProps = _k[1];
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.PlacementContainer, styled_component_1.StyledPlacementContainer), 2), PlacementContainer = _l[0], placementContainerProps = _l[1];
-    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SnackbarContainer, styled_component_1.StyledSnackbarContainer), 2), SnackbarContainer = _m[0], snackbarContainerOverrideProps = _m[1];
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ContentContainer, styled_component_1.StyledContentContainer), 2), ContentContainer = _o[0], contentContainerProps = _o[1];
-    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Message, styled_component_1.StyledMessage), 2), Message = _p[0], messageProps = _p[1];
-    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), 2), CloseIconButton = _t[0], closeIconButtonProps = _t[1];
+    var _k = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Layer, layer_1.Layer), 2), Layer = _k[0], layerProps = _k[1];
+    var _l = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.PlacementContainer, styled_component_1.StyledPlacementContainer), 2), PlacementContainer = _l[0], placementContainerProps = _l[1];
+    var _m = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SnackbarContainer, styled_component_1.StyledSnackbarContainer), 2), SnackbarContainer = _m[0], snackbarContainerOverrideProps = _m[1];
+    var _o = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ContentContainer, styled_component_1.StyledContentContainer), 2), ContentContainer = _o[0], contentContainerProps = _o[1];
+    var _p = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Message, styled_component_1.StyledMessage), 2), Message = _p[0], messageProps = _p[1];
+    var _q = 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 = 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 = 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 = 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',
-                                        },
-                                    },
-                                ], 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;
+    var role = constants_1.INTENT_TO_ROLE[intent];
+    // We don't know if the message contains any interactive elements, so we only
+    // delegate to the shared screen-reader announcer when the message is a string.
+    var isStringMessage = typeof message === 'string';
+    // Announce string messages through the shared global live region instead of
+    // hand-rolling sr-only regions here. The announcer keeps a single source of
+    // truth for status messages (WCAG 4.1.3) and re-announces repeated text.
+    (0, react_1.useEffect)(function () {
+        if (isStringMessage && message) {
+            (0, a11y_1.announce)(message, { politeness: role === 'alert' ? 'assertive' : 'polite' });
+        }
+    }, [isStringMessage, message, role]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: shouldRender ? ((0, jsx_runtime_1.jsx)(layer_2.LayersManager, tslib_1.__assign({ zIndex: layer_2.Z_INDEX.SNACKBAR }, { children: (0, jsx_runtime_1.jsx)(Layer, tslib_1.__assign({}, sharedProps, layerProps, { children: (0, jsx_runtime_1.jsx)(PlacementContainer, tslib_1.__assign({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: (0, jsx_runtime_1.jsx)(SnackbarContainer, tslib_1.__assign({}, snackbarContainerProps, { ref: snackbarContainerRef }, sharedProps, snackbarContainerOverrideProps, { style: [styled_component_1.getSnackbarContainerAnimationStyle, snackbarContainerOverrideProps.style] }, { children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, tslib_1.__assign({ theme: inverseTheme }, { children: (0, jsx_runtime_1.jsxs)(ContentContainer, tslib_1.__assign({}, sharedProps, contentContainerProps, { children: [(0, jsx_runtime_1.jsx)(IconsContainer, tslib_1.__assign({}, sharedProps, iconsContainerProps, { children: (0, jsx_runtime_1.jsx)(IntentIcon, tslib_1.__assign({ size: 20, className: styled_component_1.getIconStyles }, sharedProps, intentIconProps)) })), (0, jsx_runtime_1.jsx)(Message
+                                    // The sr-only region handles screen reader announcements
+                                    // to prevent the message from being read twice
+                                    , tslib_1.__assign({ "data-testid": "snackbar-message", "aria-hidden": isStringMessage ? 'true' : 'false' }, sharedProps, messageProps, { children: (0, react_1.isValidElement)(message) ? (0, react_1.cloneElement)(message) : message })), !disableManualClose && ((0, jsx_runtime_1.jsx)(CloseIconButton, tslib_1.__assign({ shape: "square", className: "ml-3", size: "small", onClick: function () { return handleClose('manualClose'); }, "aria-label": locale.snackbar.closeAriaLabel }, sharedProps, closeIconButtonProps, { children: (0, jsx_runtime_1.jsx)(Close, tslib_1.__assign({ "data-testid": "snackbar-close", className: "spr-icon-primary" }, sharedProps, closeProps)) })))] })) })) })) })) })) }))) : null }));
 };
+Snackbar.__standard = 'Component';
 exports.default = Snackbar;

package/snackbar/constants.d.ts

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

package/snackbar/constants.js

@@ -1,18 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TYPE_TO_HIDE_DURATION = exports.INTENT_TO_ICON = exports.TRANSITION_DURATION = void 0;
+exports.TYPE_TO_HIDE_DURATION = exports.INTENT_TO_ROLE = exports.INTENT_TO_ICON = exports.TRANSITION_DURATION = void 0;
 var tslib_1 = require("tslib");
-var alert_solid_1 = (0, tslib_1.__importDefault)(require("../icon/components/alert-solid"));
-var tickCircle_solid_1 = (0, tslib_1.__importDefault)(require("../icon/components/tickCircle-solid"));
-var error_solid_1 = (0, tslib_1.__importDefault)(require("../icon/components/error-solid"));
+var alert_solid_1 = tslib_1.__importDefault(require("../icon/components/alert-solid"));
+var warning_solid_1 = tslib_1.__importDefault(require("../icon/components/warning-solid"));
+var tickCircle_solid_1 = tslib_1.__importDefault(require("../icon/components/tickCircle-solid"));
+var delete_solid_1 = tslib_1.__importDefault(require("../icon/components/delete-solid"));
 exports.TRANSITION_DURATION = 1000;
 exports.INTENT_TO_ICON = {
     success: tickCircle_solid_1.default,
-    error: error_solid_1.default,
-    warning: alert_solid_1.default,
+    error: alert_solid_1.default,
+    warning: warning_solid_1.default,
+    delete: delete_solid_1.default,
+};
+exports.INTENT_TO_ROLE = {
+    success: 'status',
+    error: 'alert',
+    warning: 'alert',
+    delete: 'status',
 };
 exports.TYPE_TO_HIDE_DURATION = {
     success: 3000,
     error: 5000,
     warning: 5000,
+    delete: 3000,
 };

package/snackbar/index.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Snackbar = void 0;
 var tslib_1 = require("tslib");
 var Snackbar_1 = require("./Snackbar");
-Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return (0, tslib_1.__importDefault)(Snackbar_1).default; } });
-(0, tslib_1.__exportStar)(require("./types"), exports);
+Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return tslib_1.__importDefault(Snackbar_1).default; } });
+tslib_1.__exportStar(require("./types"), exports);

package/snackbar/snackbarContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Intent } from '.';
+type Notification = {
+    message: string;
+    intent?: Intent;
+};
+type SnackbarContextValue = (notification: Notification) => void;
+export declare const useNotification: () => SnackbarContextValue;
+export declare const SnackbarProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.ReactElement;
+export {};

package/snackbar/snackbarContext.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnackbarProvider = exports.useNotification = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var createSingletonContext_1 = require("@sprinklrjs/spaceweb/singleton/createSingletonContext");
+var noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+var _1 = require(".");
+var SnackbarContext = (0, createSingletonContext_1.createSingletonContext)(noop_1.default, 'SnackbarContext');
+var useNotification = function () { return (0, react_1.useContext)(SnackbarContext); };
+exports.useNotification = useNotification;
+var SnackbarProvider = function (_a) {
+    var children = _a.children;
+    var _b = tslib_1.__read((0, react_1.useState)(''), 2), message = _b[0], setMessage = _b[1];
+    var _c = tslib_1.__read((0, react_1.useState)('success'), 2), intent = _c[0], setIntent = _c[1];
+    var notify = (0, react_1.useCallback)(function (_a) {
+        var _b = _a.intent, _intent = _b === void 0 ? 'success' : _b, _message = _a.message;
+        setMessage(_message);
+        setIntent(_intent);
+    }, []);
+    var onClose = (0, react_1.useCallback)(function () {
+        setMessage('');
+        setIntent('success');
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SnackbarContext.Provider, tslib_1.__assign({ value: notify }, { children: children })), message && intent ? (0, jsx_runtime_1.jsx)(_1.Snackbar, { message: message, intent: intent, onClose: onClose }) : null] }));
+};
+exports.SnackbarProvider = SnackbarProvider;

package/snackbar/styled-component.d.ts

@@ -1,8 +1,32 @@
-export declare const StyledPlacementContainer: import("../style/styled").StyledComponent;
-export declare const StyledSnackbarContainer: import("../style/styled").StyledComponent;
-export declare const StyledIconsContainer: import("../style/styled").StyledComponent;
-export declare const StyledContentContainer: import("../style/styled").StyledComponent;
-export declare const StyledMessage: import("../style/styled").StyledComponent;
-export declare const getIconStyles: (utils: any, props: any) => {
-    fill: any;
+export declare const StyledPlacementContainer: import("../style").StyledComponent;
+export declare const getSnackbarContainerAnimationStyle: (_: any, { $placement, $open, $messageChangeTransition }: {
+    $placement: any;
+    $open: any;
+    $messageChangeTransition: any;
+}) => import("styletron-standard").StyleObject | {
+    transform: string;
+    animationName: {
+        '0%': {
+            transform: string;
+            opacity: number;
+        };
+        '99%': {
+            transform: string;
+            opacity: number;
+        };
+        '100%': {
+            transform: string;
+            opacity: number;
+        };
+    };
+    animationDuration: string;
 };
+export declare const StyledSnackbarContainer: import("../style").StyledComponent;
+export declare const StyledIconsContainer: import("../style").StyledComponent;
+export declare const StyledContentContainer: import("../style").StyledComponent;
+export declare const StyledMessage: import("../style").StyledComponent;
+export declare const getIconStyles: ({ theme }: {
+    theme: any;
+}, { $intent }: {
+    $intent: any;
+}) => string;