@sprinklrjs/spaceweb 14.12.2 → 14.12.3

package/a11y/StatusMessage.d.ts

@@ -1,6 +1,6 @@
 import type { StatusMessageProps } from './types';
 export declare const StatusMessage: {
-    ({ children, politeness, timeout }: StatusMessageProps): null;
+    ({ children, politeness, timeout, id }: StatusMessageProps): null;
     displayName: string;
     __standard: string;
 };

package/a11y/StatusMessage.js

@@ -4,12 +4,12 @@ exports.StatusMessage = void 0;
 var react_1 = require("react");
 var LiveAnnouncer_1 = require("./LiveAnnouncer");
 var StatusMessage = function (_a) {
-    var children = _a.children, politeness = _a.politeness, timeout = _a.timeout;
+    var children = _a.children, politeness = _a.politeness, timeout = _a.timeout, id = _a.id;
     (0, react_1.useEffect)(function () {
         if (children) {
             (0, LiveAnnouncer_1.announce)(children, { politeness: politeness, timeout: timeout });
         }
-    }, [children, politeness, timeout]);
+    }, [children, politeness, timeout, id]);
     return null;
 };
 exports.StatusMessage = StatusMessage;

package/a11y/types.d.ts

@@ -20,4 +20,9 @@ export type StatusMessageProps = AnnounceOptions & {
      * visible output and adds nothing to the layout.
      */
     children?: string;
+    /**
+     * Opaque instance identity. Bump this when re-announcing the same `children`
+     * string (e.g. increment a counter on each copy action).
+     */
+    id?: string | number;
 };

package/esm/a11y/StatusMessage.d.ts

@@ -1,6 +1,6 @@
 import type { StatusMessageProps } from './types';
 export declare const StatusMessage: {
-    ({ children, politeness, timeout }: StatusMessageProps): null;
+    ({ children, politeness, timeout, id }: StatusMessageProps): null;
     displayName: string;
     __standard: string;
 };

package/esm/a11y/StatusMessage.js

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import { announce } from './LiveAnnouncer';
 export var StatusMessage = function (_a) {
-    var children = _a.children, politeness = _a.politeness, timeout = _a.timeout;
+    var children = _a.children, politeness = _a.politeness, timeout = _a.timeout, id = _a.id;
     useEffect(function () {
         if (children) {
             announce(children, { politeness: politeness, timeout: timeout });
         }
-    }, [children, politeness, timeout]);
+    }, [children, politeness, timeout, id]);
     return null;
 };
 StatusMessage.displayName = 'StatusMessage';

package/esm/a11y/types.d.ts

@@ -20,4 +20,9 @@ export type StatusMessageProps = AnnounceOptions & {
      * visible output and adds nothing to the layout.
      */
     children?: string;
+    /**
+     * Opaque instance identity. Bump this when re-announcing the same `children`
+     * string (e.g. increment a counter on each copy action).
+     */
+    id?: string | number;
 };

package/esm/menu/menu-item.js

@@ -81,7 +81,7 @@ function MenuActionContainer(_a) {
                 // Only show actions that are always visible or whose parent item is highlighted
                 className: [
                     index === 0 ? 'ml-0' : 'ml-1',
-                    alwaysVisible || sharedProps.$highlighted ? 'visible' : 'invisible w-0 ml-0',
+                    alwaysVisible || sharedProps.$highlighted ? 'visible' : 'invisible w-0 overflow-hidden ml-0',
                 ] }, { children: React.cloneElement(actionEl, { tabIndex: -1 }) }), (_a = actionEl.key) !== null && _a !== void 0 ? _a : "menu-action-".concat(index)));
         }) })));
 }

package/esm/snackbar/Snackbar.d.ts

@@ -1,7 +1,7 @@
 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;
+    ({ intent: _intent, message: _message, id, disableManualClose, placement, autoHide, autoHideDuration, hideOnClickAway, overrides: _overrides, onClose, }: SnackbarProps): ReactElement | null;
     __standard: string;
 };
 export default Snackbar;

package/esm/snackbar/Snackbar.js

@@ -19,11 +19,12 @@ 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, id = _a.id, _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,
+        id: id,
         message: _message,
         overrides: _overrides,
         autoHide: autoHide,
@@ -52,18 +53,12 @@ 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();
-    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' });
+        if (typeof _message === 'string' && _message) {
+            announce(_message, { politeness: INTENT_TO_ROLE[_intent] === 'alert' ? 'assertive' : 'polite' });
         }
-    }, [isStringMessage, message, role]);
+    }, [_message, _intent, id]);
     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

package/esm/snackbar/snackbarContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Intent } from '.';
+import type { Intent } from './types';
 type Notification = {
     message: string;
     intent?: Intent;

package/esm/snackbar/snackbarContext.js

@@ -10,14 +10,19 @@ 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 _d = __read(useState(0), 2), id = _d[0], setId = _d[1];
     var notify = useCallback(function (_a) {
         var _b = _a.intent, _intent = _b === void 0 ? 'success' : _b, _message = _a.message;
+        setId(function (prev) { return prev + 1; });
         setMessage(_message);
         setIntent(_intent);
     }, []);
-    var onClose = useCallback(function () {
+    var onClose = useCallback(function (reason) {
+        // Keep content when swapping instances; only clear on real dismiss.
+        if (reason === 'messageChange')
+            return;
         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] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SnackbarContext.Provider, __assign({ value: notify }, { children: children })), message && intent ? _jsx(Snackbar, { id: id, message: message, intent: intent, onClose: onClose }) : null] }));
 };

package/esm/snackbar/types.d.ts

@@ -26,6 +26,12 @@ export type SnackbarOverrides = {
 };
 export type SnackbarProps = {
     message?: React.ReactNode;
+    /**
+     * Opaque instance identity. Bump this (e.g. increment a counter) when re-showing
+     * the same `message` so the snackbar re-opens and re-announces for screen readers.
+     * `SnackbarProvider` / `useNotification` set this automatically on every `notify()`.
+     */
+    id?: string | number;
     intent?: Intent;
     hideOnClickAway?: boolean;
     disableManualClose?: boolean;

package/esm/snackbar/useSnackbar.d.ts

@@ -5,6 +5,7 @@ type UseSnackbarParams = {
     autoHideDuration: number;
     hideOnClickAway: boolean;
     intent: Intent;
+    id?: string | number;
     message?: React.ReactNode;
     onClose?: (reason: HideReason) => void;
     overrides?: SnackbarOverrides;
@@ -23,5 +24,5 @@ type UseSnackbarReturnValue = {
     intent: Intent;
     overrides?: SnackbarOverrides;
 };
-declare const useSnackbar: ({ autoHide, autoHideDuration, hideOnClickAway, intent: nextIntent, message: nextMessage, onClose, overrides: nextOverrides, }: UseSnackbarParams) => UseSnackbarReturnValue;
+declare const useSnackbar: ({ autoHide, autoHideDuration, hideOnClickAway, intent: nextIntent, id, message: nextMessage, onClose, overrides: nextOverrides, }: UseSnackbarParams) => UseSnackbarReturnValue;
 export default useSnackbar;

package/esm/snackbar/useSnackbar.js

@@ -33,10 +33,10 @@ var useAutoHide = function (_a) {
     }, [open, autoHide, autoHideDuration, autoHideTimeoutRef]);
 };
 var useDomVisibility = function (_a) {
-    var message = _a.message, open = _a.open, enter = _a.enter, handleClose = _a.handleClose, intent = _a.intent;
+    var message = _a.message, open = _a.open, enter = _a.enter, handleClose = _a.handleClose, intent = _a.intent, id = _a.id;
     var _b = __read(useState(false), 2), domVisibility = _b[0], setDomVisibility = _b[1];
     var removeFromDomTimeoutRef = useRef();
-    // handle exit, enter on message change
+    // handle exit, enter on message / intent / id change
     useEffect(function () {
         if (!message)
             return undefined;
@@ -51,7 +51,7 @@ var useDomVisibility = function (_a) {
         open && handleClose('messageChange');
         return function () { return window.clearTimeout(timeoutId); };
         // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
-    }, [message, intent]);
+    }, [message, intent, id]);
     // remove from DOM, once transition is over
     useUpdateEffect(function () {
         if (open)
@@ -64,7 +64,7 @@ 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, nextOverrides = _a.overrides;
+    var autoHide = _a.autoHide, autoHideDuration = _a.autoHideDuration, hideOnClickAway = _a.hideOnClickAway, nextIntent = _a.intent, id = _a.id, 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,
@@ -89,7 +89,14 @@ var useSnackbar = function (_a) {
     };
     useAutoHide({ open: open, handleClose: handleClose, autoHideTimeoutRef: autoHideTimeoutRef, autoHideDuration: autoHideDuration, autoHide: autoHide });
     var snackbarContainerRef = useHideOnClickAway({ hideOnClickAway: hideOnClickAway, handleClose: handleClose, open: open });
-    var shouldRender = useDomVisibility({ handleClose: handleClose, open: open, intent: nextIntent, message: nextMessage, enter: enter });
+    var shouldRender = useDomVisibility({
+        handleClose: handleClose,
+        open: open,
+        intent: nextIntent,
+        id: id,
+        message: nextMessage,
+        enter: enter,
+    });
     var handleMouseEnter = function () {
         window.clearTimeout(autoHideTimeoutRef.current);
     };

package/menu/menu-item.js

@@ -83,7 +83,7 @@ function MenuActionContainer(_a) {
                 // Only show actions that are always visible or whose parent item is highlighted
                 className: [
                     index === 0 ? 'ml-0' : 'ml-1',
-                    alwaysVisible || sharedProps.$highlighted ? 'visible' : 'invisible w-0 ml-0',
+                    alwaysVisible || sharedProps.$highlighted ? 'visible' : 'invisible w-0 overflow-hidden ml-0',
                 ] }, { children: React.cloneElement(actionEl, { tabIndex: -1 }) }), (_a = actionEl.key) !== null && _a !== void 0 ? _a : "menu-action-".concat(index)));
         }) })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.12.2",
+  "version": "14.12.3",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -100,7 +100,7 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.12.2",
+    "@sprinklrjs/spaceweb-themes": "14.12.3",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }

package/snackbar/Snackbar.d.ts

@@ -1,7 +1,7 @@
 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;
+    ({ intent: _intent, message: _message, id, disableManualClose, placement, autoHide, autoHideDuration, hideOnClickAway, overrides: _overrides, onClose, }: SnackbarProps): ReactElement | null;
     __standard: string;
 };
 export default Snackbar;

package/snackbar/Snackbar.js

@@ -21,11 +21,12 @@ 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, id = _a.id, _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,
+        id: id,
         message: _message,
         overrides: _overrides,
         autoHide: autoHide,
@@ -54,18 +55,12 @@ var Snackbar = function (_a) {
     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)();
-    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' });
+        if (typeof _message === 'string' && _message) {
+            (0, a11y_1.announce)(_message, { politeness: constants_1.INTENT_TO_ROLE[_intent] === 'alert' ? 'assertive' : 'polite' });
         }
-    }, [isStringMessage, message, role]);
+    }, [_message, _intent, id]);
     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

package/snackbar/snackbarContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Intent } from '.';
+import type { Intent } from './types';
 type Notification = {
     message: string;
     intent?: Intent;

package/snackbar/snackbarContext.js

@@ -14,15 +14,20 @@ 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 _d = tslib_1.__read((0, react_1.useState)(0), 2), id = _d[0], setId = _d[1];
     var notify = (0, react_1.useCallback)(function (_a) {
         var _b = _a.intent, _intent = _b === void 0 ? 'success' : _b, _message = _a.message;
+        setId(function (prev) { return prev + 1; });
         setMessage(_message);
         setIntent(_intent);
     }, []);
-    var onClose = (0, react_1.useCallback)(function () {
+    var onClose = (0, react_1.useCallback)(function (reason) {
+        // Keep content when swapping instances; only clear on real dismiss.
+        if (reason === 'messageChange')
+            return;
         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] }));
+    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, { id: id, message: message, intent: intent, onClose: onClose }) : null] }));
 };
 exports.SnackbarProvider = SnackbarProvider;

package/snackbar/types.d.ts

@@ -26,6 +26,12 @@ export type SnackbarOverrides = {
 };
 export type SnackbarProps = {
     message?: React.ReactNode;
+    /**
+     * Opaque instance identity. Bump this (e.g. increment a counter) when re-showing
+     * the same `message` so the snackbar re-opens and re-announces for screen readers.
+     * `SnackbarProvider` / `useNotification` set this automatically on every `notify()`.
+     */
+    id?: string | number;
     intent?: Intent;
     hideOnClickAway?: boolean;
     disableManualClose?: boolean;

package/snackbar/useSnackbar.d.ts

@@ -5,6 +5,7 @@ type UseSnackbarParams = {
     autoHideDuration: number;
     hideOnClickAway: boolean;
     intent: Intent;
+    id?: string | number;
     message?: React.ReactNode;
     onClose?: (reason: HideReason) => void;
     overrides?: SnackbarOverrides;
@@ -23,5 +24,5 @@ type UseSnackbarReturnValue = {
     intent: Intent;
     overrides?: SnackbarOverrides;
 };
-declare const useSnackbar: ({ autoHide, autoHideDuration, hideOnClickAway, intent: nextIntent, message: nextMessage, onClose, overrides: nextOverrides, }: UseSnackbarParams) => UseSnackbarReturnValue;
+declare const useSnackbar: ({ autoHide, autoHideDuration, hideOnClickAway, intent: nextIntent, id, message: nextMessage, onClose, overrides: nextOverrides, }: UseSnackbarParams) => UseSnackbarReturnValue;
 export default useSnackbar;

package/snackbar/useSnackbar.js

@@ -35,10 +35,10 @@ var useAutoHide = function (_a) {
     }, [open, autoHide, autoHideDuration, autoHideTimeoutRef]);
 };
 var useDomVisibility = function (_a) {
-    var message = _a.message, open = _a.open, enter = _a.enter, handleClose = _a.handleClose, intent = _a.intent;
+    var message = _a.message, open = _a.open, enter = _a.enter, handleClose = _a.handleClose, intent = _a.intent, id = _a.id;
     var _b = tslib_1.__read((0, react_1.useState)(false), 2), domVisibility = _b[0], setDomVisibility = _b[1];
     var removeFromDomTimeoutRef = (0, react_1.useRef)();
-    // handle exit, enter on message change
+    // handle exit, enter on message / intent / id change
     (0, react_1.useEffect)(function () {
         if (!message)
             return undefined;
@@ -53,7 +53,7 @@ var useDomVisibility = function (_a) {
         open && handleClose('messageChange');
         return function () { return window.clearTimeout(timeoutId); };
         // eslint-disable-next-line react-hooks/exhaustive-deps -- handleClose not required
-    }, [message, intent]);
+    }, [message, intent, id]);
     // remove from DOM, once transition is over
     (0, useUpdateEffect_1.default)(function () {
         if (open)
@@ -66,7 +66,7 @@ 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, nextOverrides = _a.overrides;
+    var autoHide = _a.autoHide, autoHideDuration = _a.autoHideDuration, hideOnClickAway = _a.hideOnClickAway, nextIntent = _a.intent, id = _a.id, nextMessage = _a.message, onClose = _a.onClose, nextOverrides = _a.overrides;
     var _b = tslib_1.__read((0, react_1.useState)(false), 2), open = _b[0], setOpen = _b[1];
     var _c = tslib_1.__read((0, react_1.useState)({
         intent: nextIntent,
@@ -91,7 +91,14 @@ var useSnackbar = function (_a) {
     };
     useAutoHide({ open: open, handleClose: handleClose, autoHideTimeoutRef: autoHideTimeoutRef, autoHideDuration: autoHideDuration, autoHide: autoHide });
     var snackbarContainerRef = useHideOnClickAway({ hideOnClickAway: hideOnClickAway, handleClose: handleClose, open: open });
-    var shouldRender = useDomVisibility({ handleClose: handleClose, open: open, intent: nextIntent, message: nextMessage, enter: enter });
+    var shouldRender = useDomVisibility({
+        handleClose: handleClose,
+        open: open,
+        intent: nextIntent,
+        id: id,
+        message: nextMessage,
+        enter: enter,
+    });
     var handleMouseEnter = function () {
         window.clearTimeout(autoHideTimeoutRef.current);
     };