@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/snackbar/Snackbar.js

@@ -1,27 +1,36 @@
 import { __assign, __read } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Layer as DefaultLayer } from '../baseui/layer';
-import { isValidElement, cloneElement } from 'react';
+import { isValidElement, cloneElement, useEffect, useMemo } from 'react';
 import _noop from 'lodash/noop';
+import { announce } from '../a11y';
+import hyperspaceDark from '@sprinklrjs/spaceweb-themes/hyperspace/dark';
+import hyperspaceLight from '@sprinklrjs/spaceweb-themes/hyperspace/light';
 import { IconButton } from '../button';
 import { add$props } from '../helpers';
 import CloseIcon from '../icon/components/close';
 import { useOverrides } from '../overrides';
-import { INTENT_TO_ICON, TYPE_TO_HIDE_DURATION } from './constants';
+import { INTENT_TO_ICON, INTENT_TO_ROLE, TYPE_TO_HIDE_DURATION } from './constants';
+import { isDarkTheme } from '../helpers/themeHelpers';
 import { LayersManager, Z_INDEX } from '../layer';
-import { StyledContentContainer, StyledIconsContainer, StyledMessage, StyledPlacementContainer, StyledSnackbarContainer, getIconStyles, } from './styled-component';
+import { StyledContentContainer, StyledIconsContainer, StyledMessage, StyledPlacementContainer, StyledSnackbarContainer, getIconStyles, getSnackbarContainerAnimationStyle, } from './styled-component';
 import useSnackbar from './useSnackbar';
 import { useLocale } from '../locale';
+import { useStyle } from '../style';
+import { ThemeProvider } from '../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 ? 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 : _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 ? 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 : _h;
+    var outerTheme = useStyle().theme;
+    var inverseTheme = useMemo(function () { return (isDarkTheme(outerTheme) ? hyperspaceLight : hyperspaceDark); }, [outerTheme]);
     var _j = useSnackbar({
         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 = INTENT_TO_ICON[intent];
     var sharedProps = add$props({
         intent: intent,
@@ -31,6 +40,7 @@ var Snackbar = function (_a) {
         autoHideDuration: autoHideDuration,
         hideOnClickAway: hideOnClickAway,
         open: open,
+        messageChangeTransition: messageChangeTransition,
     });
     var _k = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Layer, DefaultLayer), 2), Layer = _k[0], layerProps = _k[1];
     var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.PlacementContainer, StyledPlacementContainer), 2), PlacementContainer = _l[0], placementContainerProps = _l[1];
@@ -42,16 +52,22 @@ var Snackbar = function (_a) {
     var _s = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIcon, CloseIcon), 2), Close = _s[0], closeProps = _s[1];
     var _t = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.CloseIconButton, IconButton), 2), CloseIconButton = _t[0], closeIconButtonProps = _t[1];
     var locale = useLocale();
-    return shouldRender ? (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.SNACKBAR }, { children: _jsx(Layer, __assign({}, sharedProps, layerProps, { children: _jsx(PlacementContainer, __assign({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: _jsx(SnackbarContainer, __assign({}, snackbarContainerProps, { ref: snackbarContainerRef, role: "alert" }, sharedProps, snackbarContainerOverrideProps, { children: _jsxs(ContentContainer, __assign({}, sharedProps, contentContainerProps, { children: [_jsx(IconsContainer, __assign({}, sharedProps, iconsContainerProps, { children: _jsx(IntentIcon, __assign({ size: 14, className: getIconStyles }, sharedProps, intentIconProps), void 0) }), void 0), _jsx(Message, __assign({ "aria-atomic": true, "aria-live": "assertive" }, sharedProps, messageProps, { children: isValidElement(message) ? cloneElement(message) : message }), void 0), !disableManualClose && (_jsx(CloseIconButton, __assign({ shape: "square", className: [
-                                    'cursor-pointer h-4 w-4 ml-3 rounded-2 min-w-0 border-0 flex-shrink-0',
-                                    {
-                                        ':focus': {
-                                            backgroundColor: '#48484C',
-                                        },
-                                        ':hover': {
-                                            backgroundColor: '#48484C',
-                                        },
-                                    },
-                                ], onClick: function () { return handleClose('manualClose'); }, "aria-label": locale.snackbar.closeAriaLabel }, sharedProps, closeIconButtonProps, { children: _jsx(Close, __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 = 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.
+    useEffect(function () {
+        if (isStringMessage && message) {
+            announce(message, { politeness: role === 'alert' ? 'assertive' : 'polite' });
+        }
+    }, [isStringMessage, message, role]);
+    return (_jsx(_Fragment, { children: shouldRender ? (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.SNACKBAR }, { children: _jsx(Layer, __assign({}, sharedProps, layerProps, { children: _jsx(PlacementContainer, __assign({ "data-spaceweb": "snackbar", "data-testid": "snackbar" }, sharedProps, placementContainerProps, { children: _jsx(SnackbarContainer, __assign({}, snackbarContainerProps, { ref: snackbarContainerRef }, sharedProps, snackbarContainerOverrideProps, { style: [getSnackbarContainerAnimationStyle, snackbarContainerOverrideProps.style] }, { children: _jsx(ThemeProvider, __assign({ theme: inverseTheme }, { children: _jsxs(ContentContainer, __assign({}, sharedProps, contentContainerProps, { children: [_jsx(IconsContainer, __assign({}, sharedProps, iconsContainerProps, { children: _jsx(IntentIcon, __assign({ size: 20, className: getIconStyles }, sharedProps, intentIconProps)) })), _jsx(Message
+                                    // The sr-only region handles screen reader announcements
+                                    // to prevent the message from being read twice
+                                    , __assign({ "data-testid": "snackbar-message", "aria-hidden": isStringMessage ? 'true' : 'false' }, sharedProps, messageProps, { children: isValidElement(message) ? cloneElement(message) : message })), !disableManualClose && (_jsx(CloseIconButton, __assign({ shape: "square", className: "ml-3", size: "small", onClick: function () { return handleClose('manualClose'); }, "aria-label": locale.snackbar.closeAriaLabel }, sharedProps, closeIconButtonProps, { children: _jsx(Close, __assign({ "data-testid": "snackbar-close", className: "spr-icon-primary" }, sharedProps, closeProps)) })))] })) })) })) })) })) }))) : null }));
 };
+Snackbar.__standard = 'Component';
 export default Snackbar;

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

@@ -1,14 +1,23 @@
 import Alert from '../icon/components/alert-solid';
+import Warning from '../icon/components/warning-solid';
 import Tick from '../icon/components/tickCircle-solid';
-import Error from '../icon/components/error-solid';
+import Delete from '../icon/components/delete-solid';
 export var TRANSITION_DURATION = 1000;
 export var INTENT_TO_ICON = {
     success: Tick,
-    error: Error,
-    warning: Alert,
+    error: Alert,
+    warning: Warning,
+    delete: Delete,
+};
+export var INTENT_TO_ROLE = {
+    success: 'status',
+    error: 'alert',
+    warning: 'alert',
+    delete: 'status',
 };
 export var TYPE_TO_HIDE_DURATION = {
     success: 3000,
     error: 5000,
     warning: 5000,
+    delete: 3000,
 };

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

@@ -0,0 +1,23 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState, useCallback } from 'react';
+import { createSingletonContext } from '@sprinklrjs/spaceweb/singleton/createSingletonContext';
+import _noop from 'lodash/noop';
+import { Snackbar } from '.';
+var SnackbarContext = createSingletonContext(_noop, 'SnackbarContext');
+export var useNotification = function () { return useContext(SnackbarContext); };
+export var SnackbarProvider = function (_a) {
+    var children = _a.children;
+    var _b = __read(useState(''), 2), message = _b[0], setMessage = _b[1];
+    var _c = __read(useState('success'), 2), intent = _c[0], setIntent = _c[1];
+    var notify = useCallback(function (_a) {
+        var _b = _a.intent, _intent = _b === void 0 ? 'success' : _b, _message = _a.message;
+        setMessage(_message);
+        setIntent(_intent);
+    }, []);
+    var onClose = useCallback(function () {
+        setMessage('');
+        setIntent('success');
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(SnackbarContext.Provider, __assign({ value: notify }, { children: children })), message && intent ? _jsx(Snackbar, { message: message, intent: intent, onClose: onClose }) : null] }));
+};

package/esm/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;

package/esm/snackbar/styled-component.js

@@ -1,83 +1,83 @@
-import { __assign } from "tslib";
+import { isDarkTheme } from '../helpers/themeHelpers';
 import { styled } from '../style';
+import { TYPOGRAPHY_VARIANT_VS_CLASS_MAP, DEFAULT_BODY_WEIGHT } from '../typography/constants';
 import { TRANSITION_DURATION } from './constants';
-import { intentColor } from '../helpers/intentHelper';
 function placementRules(placement) {
     switch (placement) {
         case 'topLeft':
-            return {
-                alignItems: 'flex-start',
-                justifyContent: 'flex-start',
-                top: 0,
-            };
+            return 'items-start justify-start top-0';
         case 'topRight':
-            return {
-                alignItems: 'flex-end',
-                justifyContent: 'flex-start',
-                top: 0,
-            };
+            return 'items-end justify-start top-0';
         case 'top':
-            return {
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                top: 0,
-            };
+            return 'items-center justify-start top-0';
         case 'bottomLeft':
-            return {
-                alignItems: 'flex-start',
-                justifyContent: 'flex-end',
-                bottom: 0,
-            };
+            return 'items-start justify-end bottom-0';
         case 'bottomRight':
-            return {
-                alignItems: 'flex-end',
-                justifyContent: 'flex-end',
-                bottom: 0,
-            };
+            return 'items-end justify-end bottom-0';
         default:
         case 'bottom':
-            return {
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                bottom: 0,
-            };
+            return 'items-center justify-end bottom-0';
     }
 }
 var topPlacements = ['top', 'topLeft', 'topRight'];
-export var StyledPlacementContainer = styled('div', 'flex flex-col fixed right-0 left-0 mx-4 my-4 pointer-events-none', function (_a, _b) {
-    var theme = _a.theme;
-    var $placement = _b.$placement, $open = _b.$open;
+export var StyledPlacementContainer = styled('div', 'flex flex-col fixed right-0 left-0 mx-4 my-4 pointer-events-none', function (_, _a) {
+    var $placement = _a.$placement;
+    return placementRules($placement);
+});
+export var getSnackbarContainerAnimationStyle = function (_, _a) {
+    var $placement = _a.$placement, $open = _a.$open, $messageChangeTransition = _a.$messageChangeTransition;
     var translateY = '0px';
     if (!$open) {
         translateY = topPlacements.includes($placement) ? 'calc(-100% - 50px)' : 'calc(100% + 50px)';
     }
-    return __assign(__assign({}, placementRules($placement)), { transform: "translateY(".concat(translateY, ")"), transitionProperty: 'transform', transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.32, 1)', transitionDuration: "".concat(TRANSITION_DURATION, "ms") });
-});
-export var StyledSnackbarContainer = styled('div', 'pointer-events-auto flex spr-shadow-01 overflow-hidden rounded-8 relative', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
-        minHeight: px2rem(52),
-        maxWidth: px2rem(432),
-        minWidth: px2rem(250),
-    });
-});
-export var StyledIconsContainer = styled('div', 'flex items-center justify-center rounded-8', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
-        width: px2rem(14),
-        height: px2rem(14),
-    });
-});
-export var StyledContentContainer = styled('div', 'py-2 px-3 overflow-hidden flex items-center flex-1', function (_a) {
+    if ($messageChangeTransition) {
+        translateY = topPlacements.includes($placement) ? 'calc(-100% - 50px)' : 'calc(100% + 50px)';
+        return {
+            transform: "translateY(".concat(translateY, ")"),
+            animationName: {
+                '0%': {
+                    transform: 'translateY(0px)',
+                    opacity: 1,
+                },
+                '99%': {
+                    transform: topPlacements.includes($placement) ? 'translateY(50px)' : 'translateY(-50px)',
+                    opacity: 0,
+                },
+                '100%': {
+                    transform: topPlacements.includes($placement)
+                        ? 'translateY(calc(-100% - 50px))'
+                        : 'translateY(calc(100% + 50px))',
+                    opacity: 0,
+                },
+            },
+            // to make sure that snackbar reaches its final state before snackbar with new message is ready to appear
+            animationDuration: "".concat(TRANSITION_DURATION - 100, "ms"),
+        };
+    }
+    return {
+        transform: "translateY(".concat(translateY, ")"),
+        transitionProperty: 'transform',
+        transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.32, 1)',
+        transitionDuration: "".concat(TRANSITION_DURATION, "ms"),
+    };
+};
+export var StyledSnackbarContainer = styled('div', 'pointer-events-auto flex spr-shadow-100 overflow-hidden rounded-8 relative forced-colors:border-1 min-h-13 max-w-108 min-w-62.5');
+export var StyledIconsContainer = styled('div', 'flex items-center justify-center rounded-8 h-5 w-5');
+export var StyledContentContainer = styled('div', 'py-2 px-3 overflow-hidden flex items-center flex-1 spr-bg-primary');
+export var StyledMessage = styled('div', "".concat(TYPOGRAPHY_VARIANT_VS_CLASS_MAP['body-sm'], " ").concat(DEFAULT_BODY_WEIGHT, " ml-3 flex-1 flex items-center spr-text-primary break-words"));
+export var getIconStyles = function (_a, _b) {
     var theme = _a.theme;
-    return ({
-        backgroundColor: theme.name.includes('dark') ? theme.spr.ui05 : '#212123',
-    });
-});
-export var StyledMessage = styled('div', 'font-500 text-14  ml-3 flex-1 flex items-center spr-text-05', {
-    lineHeight: '18px',
-    wordBreak: 'break-word',
-});
-export var getIconStyles = function (utils, props) { return ({
-    fill: intentColor(utils, props, utils.theme.supportSuccess),
-}); };
+    var $intent = _b.$intent;
+    var isDark = isDarkTheme(theme);
+    switch ($intent) {
+        case 'error':
+            return 'spr-icon-error';
+        case 'warning':
+            return "spr-icon-warning ".concat(isDark ? 'spr-text-inverse' : 'spr-text-secondary');
+        case 'delete':
+            return 'spr-icon-primary';
+        case 'success':
+        default:
+            return 'spr-icon-success';
+    }
+};

package/esm/snackbar/types.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { Override } from '../overrides';
-export declare type Intent = 'success' | 'error' | 'warning';
-export declare type HideReason = 'timeout' | 'clickaway' | 'manualClose' | 'messageChange';
-export declare type Placement = 'topLeft' | 'top' | 'topRight' | 'bottomLeft' | 'bottom' | 'bottomRight';
-declare type SharedProps = {
+export type Intent = 'success' | 'error' | 'warning' | 'delete';
+export type HideReason = 'timeout' | 'clickaway' | 'manualClose' | 'messageChange';
+export type Placement = 'topLeft' | 'top' | 'topRight' | 'bottomLeft' | 'bottom' | 'bottomRight';
+type SharedProps = {
     $intent: Intent;
     $hideOnClickAway: boolean;
     $disableManualClose: boolean;
@@ -12,7 +12,19 @@ declare type SharedProps = {
     $placement: Placement;
     $open: boolean;
 };
-export declare type SnackbarProps = {
+export type SnackbarOverrides = {
+    Layer?: Override<SharedProps & Record<string, any>>;
+    PlacementContainer?: Override<SharedProps & Record<string, any>>;
+    SnackbarContainer?: Override<SharedProps & Record<string, any>>;
+    ContentContainer?: Override<SharedProps & Record<string, any>>;
+    Message?: Override<SharedProps & Record<string, any>>;
+    CloseIcon?: Override<SharedProps & Record<string, any>>;
+    CloseIconButton?: Override<SharedProps & Record<string, any>>;
+    IconsContainer?: Override<SharedProps & Record<string, any>>;
+    IntentIcon?: Override<SharedProps & Record<string, any>>;
+    SnackbarIcon?: Override<SharedProps & Record<string, any>>;
+};
+export type SnackbarProps = {
     message?: React.ReactNode;
     intent?: Intent;
     hideOnClickAway?: boolean;
@@ -21,17 +33,6 @@ export declare type SnackbarProps = {
     autoHide?: boolean;
     onClose?: (reason: HideReason) => void;
     placement?: Placement;
-    overrides?: {
-        Layer?: Override<SharedProps & Record<string, any>>;
-        PlacementContainer?: Override<SharedProps & Record<string, any>>;
-        SnackbarContainer?: Override<SharedProps & Record<string, any>>;
-        ContentContainer?: Override<SharedProps & Record<string, any>>;
-        Message?: Override<SharedProps & Record<string, any>>;
-        CloseIcon?: Override<SharedProps & Record<string, any>>;
-        CloseIconButton?: Override<SharedProps & Record<string, any>>;
-        IconsContainer?: Override<SharedProps & Record<string, any>>;
-        IntentIcon?: Override<SharedProps & Record<string, any>>;
-        SnackbarIcon?: Override<SharedProps & Record<string, any>>;
-    };
+    overrides?: SnackbarOverrides;
 };
 export {};

package/esm/snackbar/useSnackbar.d.ts

@@ -1,14 +1,15 @@
 import { MutableRefObject, ReactNode } from 'react';
-import { HideReason, Intent } from './types';
-declare type UseSnackbarParams = {
+import { HideReason, Intent, SnackbarOverrides } from './types';
+type UseSnackbarParams = {
     autoHide: boolean;
     autoHideDuration: number;
     hideOnClickAway: boolean;
     intent: Intent;
     message?: React.ReactNode;
     onClose?: (reason: HideReason) => void;
+    overrides?: SnackbarOverrides;
 };
-declare type UseSnackbarReturnValue = {
+type UseSnackbarReturnValue = {
     open: boolean;
     shouldRender: boolean;
     handleClose: (reason: HideReason) => void;
@@ -17,8 +18,10 @@ declare type UseSnackbarReturnValue = {
         onMouseEnter: () => void;
         onMouseLeave: () => void;
     };
+    messageChangeTransition: boolean;
     message: ReactNode;
     intent: Intent;
+    overrides?: SnackbarOverrides;
 };
-declare const useSnackbar: ({ autoHide, autoHideDuration, hideOnClickAway, intent: nextIntent, message: nextMessage, onClose, }: UseSnackbarParams) => UseSnackbarReturnValue;
+declare const useSnackbar: ({ autoHide, autoHideDuration, hideOnClickAway, intent: nextIntent, message: nextMessage, onClose, overrides: nextOverrides, }: UseSnackbarParams) => UseSnackbarReturnValue;
 export default useSnackbar;

package/esm/snackbar/useSnackbar.js

@@ -64,19 +64,28 @@ var useDomVisibility = function (_a) {
     return domVisibility;
 };
 var useSnackbar = function (_a) {
-    var autoHide = _a.autoHide, autoHideDuration = _a.autoHideDuration, hideOnClickAway = _a.hideOnClickAway, nextIntent = _a.intent, nextMessage = _a.message, onClose = _a.onClose;
+    var autoHide = _a.autoHide, autoHideDuration = _a.autoHideDuration, hideOnClickAway = _a.hideOnClickAway, nextIntent = _a.intent, nextMessage = _a.message, onClose = _a.onClose, nextOverrides = _a.overrides;
     var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
-    var _c = __read(useState({ intent: nextIntent, message: nextMessage }), 2), snackbarContent = _c[0], setSnackbarContent = _c[1];
+    var _c = __read(useState({
+        intent: nextIntent,
+        message: nextMessage,
+        overrides: nextOverrides,
+    }), 2), snackbarContent = _c[0], setSnackbarContent = _c[1];
+    var _d = __read(useState(false), 2), messageChangeTransition = _d[0], setMessageChangeTransition = _d[1];
     var autoHideTimeoutRef = useRef();
     var handleClose = useCallback(function (reason) {
         setOpen(false);
+        if (reason === 'messageChange') {
+            setMessageChangeTransition(true);
+        }
         window.clearTimeout(autoHideTimeoutRef.current);
         onClose === null || onClose === void 0 ? void 0 : onClose(reason);
     }, [onClose]);
     var enter = function () {
         // set the intent and message to be rendered in the Snackbar which we are entering
-        setSnackbarContent({ intent: nextIntent, message: nextMessage });
+        setSnackbarContent({ intent: nextIntent, message: nextMessage, overrides: nextOverrides });
         setOpen(true);
+        setMessageChangeTransition(false);
     };
     useAutoHide({ open: open, handleClose: handleClose, autoHideTimeoutRef: autoHideTimeoutRef, autoHideDuration: autoHideDuration, autoHide: autoHide });
     var snackbarContainerRef = useHideOnClickAway({ hideOnClickAway: hideOnClickAway, handleClose: handleClose, open: open });
@@ -90,7 +99,7 @@ var useSnackbar = function (_a) {
             autoHideTimeoutRef.current = window.setTimeout(function () { return handleClose('timeout'); }, autoHideDuration);
         }
     };
-    return __assign({ open: open, shouldRender: shouldRender, handleClose: handleClose, snackbarContainerRef: snackbarContainerRef, snackbarContainerProps: {
+    return __assign({ open: open, shouldRender: shouldRender, handleClose: handleClose, snackbarContainerRef: snackbarContainerRef, messageChangeTransition: messageChangeTransition, snackbarContainerProps: {
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
         } }, snackbarContent);

package/esm/spaceConsumer/SpaceConsumer.d.ts

@@ -2,9 +2,11 @@
  * @author Ivan Torres
  */
 import { ReactElement } from 'react';
-import { StyleUtils } from '../types';
-declare type Props = {
-    children: (styleUtils: StyleUtils) => ReactElement;
+import { StyleObject, StyleUtils } from '../types';
+type Props = {
+    children: (styleUtils: StyleUtils & {
+        styletronCSS: (style: StyleObject) => string;
+    }) => ReactElement;
 };
 declare const SpaceStyleConsumer: ({ children }: Props) => ReactElement;
 export default SpaceStyleConsumer;

package/esm/spaceConsumer/SpaceConsumer.js

@@ -1,9 +1,12 @@
 /**
  * @author Ivan Torres
  */
+import { __assign, __read } from "tslib";
 import useStyle from '../style/useStyle';
+import useMemoizedStyletron from '../style/useMemoizedStyletron';
 var SpaceStyleConsumer = function (_a) {
     var children = _a.children;
-    return children(useStyle());
+    var _b = __read(useMemoizedStyletron(), 1), styletronCSS = _b[0];
+    return children(__assign(__assign({}, useStyle()), { styletronCSS: styletronCSS }));
 };
 export default SpaceStyleConsumer;

package/esm/spacewebProvider/AiIconLinearGradients.js

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

package/esm/spacewebProvider/CustomBaseProvider.js

@@ -3,5 +3,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // todo: add dependency. ideally this should not be reqd with react-18. but baseui internally uses this.
 import { UIDReset } from 'react-uid';
 import { LayersManager } from '../layer';
-var CustomBaseProvider = function (props) { return (_jsx(LayersManager, __assign({ zIndex: props.zIndex, host: props.host }, { children: _jsx(UIDReset, __assign({ prefix: "bui" }, { children: props.children }), void 0) }), void 0)); };
+var CustomBaseProvider = function (props) { return (_jsx(LayersManager, __assign({ zIndex: props.zIndex, host: props.host }, { children: _jsx(UIDReset, __assign({ prefix: "bui" }, { children: props.children })) }))); };
 export default CustomBaseProvider;

package/esm/spacewebProvider/DocumentProvider.d.ts

@@ -6,4 +6,5 @@ export declare const DocumentProvider: {
     }>): ReactElement;
     displayName: string;
 };
+export declare const DocumentConsumer: import("react").Consumer<Document | undefined>;
 export declare const useDocument: () => Document | undefined;

package/esm/spacewebProvider/DocumentProvider.js

@@ -1,8 +1,9 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
+import { createSingletonContext } from '@sprinklrjs/spaceweb/singleton/createSingletonContext';
 import { isServer } from './utils';
-export var DocumentContext = createContext(isServer ? undefined : document);
+export var DocumentContext = createSingletonContext(isServer ? undefined : document, 'DocumentContext');
 DocumentContext.displayName = 'DocumentContext';
 export var DocumentProvider = function (props) {
     var documentValue = useMemo(function () {
@@ -10,8 +11,10 @@ export var DocumentProvider = function (props) {
             return props.value || document;
         }
         return undefined;
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- legacy code
     }, []);
-    return _jsx(DocumentContext.Provider, __assign({ value: documentValue }, { children: props.children }), void 0);
+    return _jsx(DocumentContext.Provider, __assign({ value: documentValue }, { children: props.children }));
 };
 DocumentProvider.displayName = 'DocumentProvider';
+export var DocumentConsumer = DocumentContext.Consumer;
 export var useDocument = function () { return useContext(DocumentContext); };

package/esm/spacewebProvider/SpacewebProvider.d.ts

@@ -4,7 +4,7 @@ import { StandardEngine } from 'styletron-standard';
 import { Direction, ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
 import { Override } from '../overrides';
 import { LocaleProvider } from '../locale';
-export declare type Props = {
+export type Props = {
     children: ReactNode;
     debug?: boolean;
     direction?: Direction;
@@ -19,6 +19,9 @@ export declare type Props = {
     locale?: React.ComponentProps<typeof LocaleProvider>['locale'];
     ownerDocument?: Document;
     density?: 'COMPACT' | 'COMFORTABLE' | 'SPACIOUS' | 'DEFAULT' | undefined;
+    debugCssInJs?: boolean;
+    deprecatedAIThemeEnabled?: boolean;
+    nonce?: string;
 };
 declare function SpacewebProviderWithDoc({ ownerDocument, children, ...rest }: Props): ReactElement;
 export default SpacewebProviderWithDoc;

package/esm/spacewebProvider/SpacewebProvider.js

@@ -12,25 +12,27 @@ import AiIconLinearGradients from './AiIconLinearGradients';
 import { useHasMounted } from '../hooks/useHasMounted';
 var LAYERS_DEFAULT_ZINDEX = 9999;
 function SpacewebProvider(props) {
-    var children = props.children, _a = props.layersZIndex, layersZIndex = _a === void 0 ? LAYERS_DEFAULT_ZINDEX : _a, overrides = props.overrides, theme = props.theme, locale = props.locale, _b = props.debug, debug = _b === void 0 ? false : _b, density = props.density, langCode = props.langCode;
+    var _a, _b;
+    var children = props.children, _c = props.layersZIndex, layersZIndex = _c === void 0 ? LAYERS_DEFAULT_ZINDEX : _c, overrides = props.overrides, theme = props.theme, locale = props.locale, _d = props.debug, debug = _d === void 0 ? false : _d, density = props.density, langCode = props.langCode, _e = props.debugCssInJs, debugCssInJs = _e === void 0 ? false : _e, nonce = props.nonce;
     var doc = useDocument();
-    var styleEngine = props.styleEngine || getStyleEngine(doc);
+    var styleEngine = props.styleEngine || getStyleEngine(doc, nonce);
     // TODO: This must be removed once baseui code exposes focusVisible from utils/index
     // https://github.com/uber/baseweb/issues/3322
     useEffect(function () {
         initFocusVisible({ ownerDocument: doc });
         return function () { return teardown(doc); };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- required here
     }, []);
     var outerTheme = useTheme();
     var direction = props.direction || outerTheme.direction || 'ltr';
+    var deprecatedAIThemeEnabled = (_b = (_a = props.deprecatedAIThemeEnabled) !== null && _a !== void 0 ? _a : outerTheme.deprecatedAIThemeEnabled) !== null && _b !== void 0 ? _b : false;
     var localeValue = useMemo(function () { return (__assign(__assign({}, locale), { langCode: langCode })); }, [locale, langCode]);
-    var themeValue = useMemo(function () { return (__assign(__assign({}, theme), { direction: direction })); }, [theme, direction]);
+    var themeValue = useMemo(function () { return (__assign(__assign({}, theme), { direction: direction, debugCssInJs: debugCssInJs, deprecatedAIThemeEnabled: deprecatedAIThemeEnabled })); }, [theme, direction, debugCssInJs, deprecatedAIThemeEnabled]);
     var hasMounted = useHasMounted();
-    return (_jsx(StyleProvider, __assign({ debug: debug, styleEngine: styleEngine }, { children: _jsx(ThemeProvider, __assign({ theme: themeValue, containerElement: hasMounted ? doc.documentElement : undefined, density: density }, { children: _jsx(LocaleProvider, __assign({ locale: localeValue }, { children: _jsxs(CustomBaseProvider, __assign({ zIndex: layersZIndex, host: doc === null || doc === void 0 ? void 0 : doc.body }, { children: [children, _jsx(AiIconLinearGradients, {}, void 0)] }), void 0) }), void 0) }), void 0) }), void 0));
+    return (_jsx(StyleProvider, __assign({ debug: debug, styleEngine: styleEngine }, { children: _jsx(ThemeProvider, __assign({ theme: themeValue, containerElement: hasMounted ? doc.documentElement : undefined, density: density }, { children: _jsx(LocaleProvider, __assign({ locale: localeValue }, { children: _jsxs(CustomBaseProvider, __assign({ zIndex: layersZIndex, host: doc === null || doc === void 0 ? void 0 : doc.body }, { children: [children, _jsx(AiIconLinearGradients, {})] })) })) })) })));
 }
 function SpacewebProviderWithDoc(_a) {
     var ownerDocument = _a.ownerDocument, children = _a.children, rest = __rest(_a, ["ownerDocument", "children"]);
-    return (_jsx(DocumentProvider, __assign({ value: ownerDocument }, { children: _jsx(SpacewebProvider, __assign({}, rest, { children: children }), void 0) }), void 0));
+    return (_jsx(DocumentProvider, __assign({ value: ownerDocument }, { children: _jsx(SpacewebProvider, __assign({}, rest, { children: children })) })));
 }
 export default SpacewebProviderWithDoc;