@sprinklrjs/spaceweb 14.12.2 → 14.13.0

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/classNames/index.d.ts

@@ -1 +1,11 @@
-export { default } from 'classnames';
+import baseClassnames from 'classnames';
+/**
+ * classNames is a merging utility for class names.
+ * When importing, please import as `cx` or `classNames`.
+ * @warning This is NOT the same as the `css` themes utility.
+ * `css` is provided by the useStyle() hook and can handle CSS-in-JS, functions, and CSSProperties.
+ * `cx` **cannot** handle these, and will not work with functions or StyleObjects!
+ * @see https://github.com/JedWatson/classnames?tab=readme-ov-file#usage
+ */
+declare const documentedClassnames: typeof baseClassnames;
+export default documentedClassnames;

package/classNames/index.js

@@ -1,8 +1,14 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var classnames_1 = require("classnames");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(classnames_1).default; } });
+var tslib_1 = require("tslib");
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
+/**
+ * classNames is a merging utility for class names.
+ * When importing, please import as `cx` or `classNames`.
+ * @warning This is NOT the same as the `css` themes utility.
+ * `css` is provided by the useStyle() hook and can handle CSS-in-JS, functions, and CSSProperties.
+ * `cx` **cannot** handle these, and will not work with functions or StyleObjects!
+ * @see https://github.com/JedWatson/classnames?tab=readme-ov-file#usage
+ */
+var documentedClassnames = classnames_1.default;
+exports.default = documentedClassnames;

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/classNames/index.d.ts

@@ -1 +1,11 @@
-export { default } from 'classnames';
+import baseClassnames from 'classnames';
+/**
+ * classNames is a merging utility for class names.
+ * When importing, please import as `cx` or `classNames`.
+ * @warning This is NOT the same as the `css` themes utility.
+ * `css` is provided by the useStyle() hook and can handle CSS-in-JS, functions, and CSSProperties.
+ * `cx` **cannot** handle these, and will not work with functions or StyleObjects!
+ * @see https://github.com/JedWatson/classnames?tab=readme-ov-file#usage
+ */
+declare const documentedClassnames: typeof baseClassnames;
+export default documentedClassnames;

package/esm/classNames/index.js

@@ -1 +1,11 @@
-export { default } from 'classnames';
+import baseClassnames from 'classnames';
+/**
+ * classNames is a merging utility for class names.
+ * When importing, please import as `cx` or `classNames`.
+ * @warning This is NOT the same as the `css` themes utility.
+ * `css` is provided by the useStyle() hook and can handle CSS-in-JS, functions, and CSSProperties.
+ * `cx` **cannot** handle these, and will not work with functions or StyleObjects!
+ * @see https://github.com/JedWatson/classnames?tab=readme-ov-file#usage
+ */
+var documentedClassnames = baseClassnames;
+export default documentedClassnames;

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/select/overrides.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { type ReactElement } from 'react';
 import type { ClassName, ClassNameStyleFn, Styles } from '../types';
 import type { SharedProps } from './types';
 export declare const SelectArrow: ({ $isOpen, title, overrides: _overrides, ...restProps }: {
@@ -6,7 +6,7 @@ export declare const SelectArrow: ({ $isOpen, title, overrides: _overrides, ...r
     $isOpen: any;
     title: any;
     overrides: any;
-}) => React.ReactElement;
+}) => ReactElement;
 export declare const getSearchIconContainerStyles: ClassName;
 export declare const getSearchIconStyles: ClassNameStyleFn<SharedProps>;
 export declare const getControlContainerStyles: ClassName;
@@ -18,9 +18,7 @@ export declare const OverlaySelectPopoverOverride: ({ content, children: inputCo
     closePopover: any;
     setStickySentinelRef: any;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const SingleValueTombstone: ({ $selectSize }: {
-    $selectSize: any;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleValueTombstone: import("react").ForwardRefExoticComponent<Pick<SharedProps, "$selectSize"> & import("react").RefAttributes<HTMLElement>>;
 export declare const selectMenuOverrides: {
     readonly Menu: {
         readonly props: {

package/esm/select/overrides.js

@@ -1,5 +1,6 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { getComponentSizeTheme, getDefaultSize } from '../helpers/themeHelpers';
 import ChevronDown from '../icon/components/chevron-down';
 import { borderRadius as borderRadiusLongHandHelper } from '../helpers/longHandHelpers';
@@ -159,17 +160,17 @@ export var OverlaySelectPopoverOverride = function (_a) {
     var content = _a.content, inputContainer = _a.children, closePopover = _a.closePopover, setStickySentinelRef = _a.setStickySentinelRef;
     return (_jsxs(_Fragment, { children: [_jsx(Box, { ref: setStickySentinelRef }), inputContainer, typeof content === 'function' ? content({ closeMenu: closePopover }) : content] }));
 };
-export var SingleValueTombstone = function (_a) {
+export var SingleValueTombstone = forwardRef(function (_a, ref) {
     var $selectSize = _a.$selectSize;
     var theme = useStyle().theme;
     var defaultHeightClass = $selectSize === 'xxxs' ? 'h-4' : 'h-4.5';
     var inputSizeTheme = getComponentSizeTheme(theme, 'input', $selectSize, getDefaultSize(theme));
-    return (_jsx(StyledTombstone, { "data-testid": "single-value-tombstone", className: [
+    return (_jsx(StyledTombstone, { ref: ref, "data-testid": "single-value-tombstone", className: [
             "w-24 rounded-8 ".concat(defaultHeightClass),
             //@ts-ignore -- theme override
             (inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight) ? { height: inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight } : {},
         ] }));
-};
+});
 export var selectMenuOverrides = {
     Menu: {
         props: {

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/esm/style/_parseStyleProp.js

@@ -19,10 +19,10 @@ var resolveStyleObjects = function (flattenStyles, _a) {
                 utils: utils,
                 styletronCss: styletronCss,
                 props: props,
-            }), 2), classNames = _c[0], styletronClassNames_1 = _c[1];
+            }), 2), classNames_1 = _c[0], styletronClassNames_1 = _c[1];
             // save computation if `debugCssInJs` is not enabled
             return [
-                "".concat(mergedClassnames, " ").concat(classNames),
+                "".concat(mergedClassnames, " ").concat(classNames_1),
                 utils.debugCssInJs ? "".concat(cssInJsClassNames, " ").concat(styletronClassNames_1) : cssInJsClassNames,
             ];
         }

package/esm/tabs/styled-components.d.ts

@@ -1,8 +1,8 @@
-import type { SharedPropsTabs } from './types';
-import type { ClassName, Styles } from '../types';
+import type { SharedPropsTab, SharedPropsTabs } from './types';
+import type { ClassName, StyleFn } from '../types';
 export declare const tabsStyles: (_: any, { $variant, $position }: SharedPropsTabs) => string;
 export declare const tabStyle: ClassName;
-export declare const tabUnderlineStyles: Styles;
+export declare const tabUnderlineStyles: StyleFn<SharedPropsTab>;
 export declare const StyledTabsPanel: import("../style").StyledComponent;
 export declare const StyledRoot: import("../style").StyledComponent;
 export declare const StyledIconContainer: import("../style").StyledComponent;

package/esm/tabs/styled-components.js

@@ -35,6 +35,7 @@ export var tabStyle = function (_, _a) {
             $position === 'top' ? 'mx-4' : '',
             $position === 'left' ? 'mt-3 mb-3' : '',
             $position === 'right' ? 'mt-3 mb-3' : '',
+            // @ts-ignore -- theme overrides
             getTabStyleOverride,
         ];
     }
@@ -48,6 +49,7 @@ export var tabStyle = function (_, _a) {
             $position === 'top' ? 'mx-4' : '',
             $position === 'left' ? 'mt-3 mb-3' : '',
             $position === 'right' ? 'mt-3 mb-3' : '',
+            // @ts-ignore -- theme overrides
             getTabStyleOverride,
         ];
     }
@@ -61,7 +63,6 @@ export var tabStyle = function (_, _a) {
     });
 };
 // Adds an underline element for selected tab
-// @ts-ignore -- '::after' pseudo-element is not in type CSSProperties but is valid here
 export var tabUnderlineStyles = function (_a, _b) {
     var theme = _a.theme;
     var $variant = _b.$variant, $position = _b.$position, $selected = _b.$selected, $disabled = _b.$disabled;
@@ -79,8 +80,10 @@ export var tabUnderlineStyles = function (_a, _b) {
         },
     }); };
     if ($variant === 'default' && $position === 'top') {
+        // eslint-disable-next-line @sprinklrjs/hds-no-use-css-in-js -- No current alternatives
         if ($selected)
             return __assign(__assign({}, underlineStyle(theme.spr.borderQuinary)), { __useCssInJs: 1 });
+        // eslint-disable-next-line @sprinklrjs/hds-no-use-css-in-js -- No current alternatives
         if (!$disabled)
             return { ':hover': underlineStyle(theme.spr.borderQuaternary), __useCssInJs: 1 };
     }

package/esm/tabs/tab.js

@@ -26,6 +26,8 @@ var Tab = function (props) {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     }, [onChange, onClick, tabId]);
     var _className = useMemo(function () { return [resetStyles, tabStyle, className]; }, [className]);
+    // eslint-disable-next-line @sprinklrjs/no-ts-ignores -- No current alternatives
+    // @ts-ignore -- CSS-in-JS -- Styletron styles used for the underline
     var _style = useMemo(function () { return [tabUnderlineStyles, style]; }, [style]);
     return (_jsx(TabComp, __assign({ "data-spaceweb": "tab", role: "tab", "aria-selected": _selected, 
         // id should not be passed to DOM.

package/esm/time-range-picker/RangeSelectorContainer.js

@@ -114,7 +114,9 @@ var RangeSelectorContainer = function (_a) {
                         fill: theme.spr.clrRed,
                     });
                 } }), _jsx(Typography, __assign({ className: "my-0", variant: "bs3" }, { children: errMsg }))] }))) : null;
-    return (_jsxs(Box, __assign({ className: "spr-ui-01 rounded-8" }, { children: [_jsxs(Header, __assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [_jsx(HeaderBeforeEnhancer, __assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), _jsx(RangeSelector, __assign({ overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown, hidePresetSearch: hidePresetSearch, footerContent: _jsx(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: _jsxs(Box, __assign({ className: "justify-between w-0 grow flex" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps)), _jsxs(Stack, __assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: [cx({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, _jsxs(StackItem, __assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? (_jsx(Button, __assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : (_jsx(Button, __assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), _jsx(Button, __assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
+    return (_jsxs(Box, __assign({ className: "spr-ui-01 rounded-8" }, { children: [_jsxs(Header, __assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [_jsx(HeaderBeforeEnhancer, __assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), _jsx(RangeSelector, __assign({ overrides: props.overrides, timeSelect: props.timeSelect, timeRangePresets: timeRangePresets, timezone: timezone, timeRange: timeRange, preset: preset, onChange: onDateChange, adapter: adapter, peekNextMonth: props.peekNextMonth, excludeDates: props.excludeDates, filterDate: props.filterDate, minDate: minDate, maxDate: maxDate, formatString: props.formatString, locale: props.locale, fixedHeight: props.fixedHeight, monthsShown: monthsShown, hidePresetSearch: hidePresetSearch, footerContent: _jsx(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: _jsxs(Box, __assign({ className: "justify-between w-0 grow flex" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps)), _jsxs(Stack, __assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, 
+                                // @ts-ignore -- CSS-in-JS
+                                className: [cx({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, _jsxs(StackItem, __assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? (_jsx(Button, __assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : (_jsx(Button, __assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), _jsx(Button, __assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
 };
 RangeSelectorContainer.displayName = 'RangeSelectorContainer';
 export default RangeSelectorContainer;

package/esm/types.d.ts

@@ -90,7 +90,7 @@ export type StyleUtils = ThemeContext & {
     getStyle: GetStyle;
     px2rem: Px2Rem;
 };
-export type ClassNameStyleFn<P = any> = (utils: StyleUtils, props: P) => string | undefined | RecursiveArray<string | undefined>;
+export type ClassNameStyleFn<P = any> = (utils: StyleUtils, props: P) => ClassName;
 /**
  * ClassName type for Spaceweb's components
  * See: https://frontend.sprinklr.com/spaceweb/guides/styling#styled

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.13.0",
   "description": "Components for SpaceWeb",
   "main": "index.js",
   "module": "./esm/index.js",
@@ -38,7 +38,7 @@
     "body-scroll-lock": "3.1.5",
     "card-validator": "^6.2.0",
     "class-variance-authority": "^0.7.0",
-    "classnames": "2.2.6",
+    "classnames": "^2.5.1",
     "csstype": "^3.0.2",
     "date-fns": "^2.6.0",
     "date-fns-tz": "^1.2.2",
@@ -100,7 +100,7 @@
     "ts-node": "^10.4.0"
   },
   "peerDependencies": {
-    "@sprinklrjs/spaceweb-themes": "14.12.2",
+    "@sprinklrjs/spaceweb-themes": "14.13.0",
     "react": ">=17.0.2 <19.0.0",
     "react-dom": ">=17.0.2 <19.0.0"
   }

package/select/overrides.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { type ReactElement } from 'react';
 import type { ClassName, ClassNameStyleFn, Styles } from '../types';
 import type { SharedProps } from './types';
 export declare const SelectArrow: ({ $isOpen, title, overrides: _overrides, ...restProps }: {
@@ -6,7 +6,7 @@ export declare const SelectArrow: ({ $isOpen, title, overrides: _overrides, ...r
     $isOpen: any;
     title: any;
     overrides: any;
-}) => React.ReactElement;
+}) => ReactElement;
 export declare const getSearchIconContainerStyles: ClassName;
 export declare const getSearchIconStyles: ClassNameStyleFn<SharedProps>;
 export declare const getControlContainerStyles: ClassName;
@@ -18,9 +18,7 @@ export declare const OverlaySelectPopoverOverride: ({ content, children: inputCo
     closePopover: any;
     setStickySentinelRef: any;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const SingleValueTombstone: ({ $selectSize }: {
-    $selectSize: any;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleValueTombstone: import("react").ForwardRefExoticComponent<Pick<SharedProps, "$selectSize"> & import("react").RefAttributes<HTMLElement>>;
 export declare const selectMenuOverrides: {
     readonly Menu: {
         readonly props: {

package/select/overrides.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectMenuOverrides = exports.SingleValueTombstone = exports.OverlaySelectPopoverOverride = exports.getValueTypography = exports.getValueContainerStyles = exports.getControlContainerStyles = exports.getSearchIconStyles = exports.getSearchIconContainerStyles = exports.SelectArrow = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var chevron_down_1 = tslib_1.__importDefault(require("../icon/components/chevron-down"));
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
@@ -165,18 +166,17 @@ var OverlaySelectPopoverOverride = function (_a) {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(box_1.Box, { ref: setStickySentinelRef }), inputContainer, typeof content === 'function' ? content({ closeMenu: closePopover }) : content] }));
 };
 exports.OverlaySelectPopoverOverride = OverlaySelectPopoverOverride;
-var SingleValueTombstone = function (_a) {
+exports.SingleValueTombstone = (0, react_1.forwardRef)(function (_a, ref) {
     var $selectSize = _a.$selectSize;
     var theme = (0, style_1.useStyle)().theme;
     var defaultHeightClass = $selectSize === 'xxxs' ? 'h-4' : 'h-4.5';
     var inputSizeTheme = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'input', $selectSize, (0, themeHelpers_1.getDefaultSize)(theme));
-    return ((0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { "data-testid": "single-value-tombstone", className: [
+    return ((0, jsx_runtime_1.jsx)(StyledTombstone_1.StyledTombstone, { ref: ref, "data-testid": "single-value-tombstone", className: [
             "w-24 rounded-8 ".concat(defaultHeightClass),
             //@ts-ignore -- theme override
             (inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight) ? { height: inputSizeTheme === null || inputSizeTheme === void 0 ? void 0 : inputSizeTheme.lineHeight } : {},
         ] }));
-};
-exports.SingleValueTombstone = SingleValueTombstone;
+});
 exports.selectMenuOverrides = {
     Menu: {
         props: {

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;