@sprinklrjs/spaceweb 14.12.2 → 14.13.0

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);
     };

package/style/_parseStyleProp.js

@@ -22,10 +22,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/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/tabs/styled-components.js

@@ -39,6 +39,7 @@ 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,
         ];
     }
@@ -52,6 +53,7 @@ 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,
         ];
     }
@@ -66,7 +68,6 @@ var tabStyle = function (_, _a) {
 };
 exports.tabStyle = tabStyle;
 // Adds an underline element for selected tab
-// @ts-ignore -- '::after' pseudo-element is not in type CSSProperties but is valid here
 var tabUnderlineStyles = function (_a, _b) {
     var theme = _a.theme;
     var $variant = _b.$variant, $position = _b.$position, $selected = _b.$selected, $disabled = _b.$disabled;
@@ -84,8 +85,10 @@ 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 tslib_1.__assign(tslib_1.__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/tabs/tab.js

@@ -28,6 +28,8 @@ var Tab = function (props) {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     }, [onChange, onClick, tabId]);
     var _className = (0, react_1.useMemo)(function () { return [helpers_2.resetStyles, styled_components_1.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 = (0, react_1.useMemo)(function () { return [styled_components_1.tabUnderlineStyles, style]; }, [style]);
     return ((0, jsx_runtime_1.jsx)(TabComp, tslib_1.__assign({ "data-spaceweb": "tab", role: "tab", "aria-selected": _selected, 
         // id should not be passed to DOM.

package/time-range-picker/RangeSelectorContainer.js

@@ -116,7 +116,9 @@ var RangeSelectorContainer = function (_a) {
                         fill: theme.spr.clrRed,
                     });
                 } }), (0, jsx_runtime_1.jsx)(typography_1.Typography, tslib_1.__assign({ className: "my-0", variant: "bs3" }, { children: errMsg }))] }))) : null;
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, tslib_1.__assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, tslib_1.__assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, tslib_1.__assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), (0, jsx_runtime_1.jsx)(RangeSelector, tslib_1.__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: (0, jsx_runtime_1.jsx)(Footer, tslib_1.__assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "justify-between w-0 grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, tslib_1.__assign({}, footerBeforeEnhancerProps)), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, className: [(0, classNames_1.default)({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, tslib_1.__assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), (0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }))] })), monthsShown === 1 ? errorEl : null] }))] })) })) }, rangeSelectorProps))] })));
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, tslib_1.__assign({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, tslib_1.__assign({ variant: "heading-7", "$as": "span", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel })), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, tslib_1.__assign({ setTimezone: setTimezone, timezone: timezone, timezoneOptions: timezoneOptions }, timezonePickerProps, { className: ['w-0 grow max-w-md', timezonePickerProps === null || timezonePickerProps === void 0 ? void 0 : timezonePickerProps.className] })))] })), (0, jsx_runtime_1.jsx)(RangeSelector, tslib_1.__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: (0, jsx_runtime_1.jsx)(Footer, tslib_1.__assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: ['px-6 py-3 mt-2', footerProps.className] }, { children: (0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: "justify-between w-0 grow flex" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, tslib_1.__assign({}, footerBeforeEnhancerProps)), (0, jsx_runtime_1.jsxs)(stack_1.Stack, tslib_1.__assign({ direction: monthsShown === 1 ? 'vertical' : 'horizontal', gap: 3, 
+                                // @ts-ignore -- CSS-in-JS
+                                className: [(0, classNames_1.default)({ 'items-center': monthsShown !== 1 }), { maxWidth: 'fit-content' }] }, { children: [monthsShown === 1 ? null : errorEl, (0, jsx_runtime_1.jsxs)(stack_1.StackItem, tslib_1.__assign({ className: "flex self-end" }, { children: [(footerProps === null || footerProps === void 0 ? void 0 : footerProps.showClearButton) ? ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: footerProps.handleClearBtnClick, variant: "secondary", "data-testid": "clear", disabled: timeRange.length === 0 }, { children: locale.timeRangePicker.clearBtnLabel }))) : ((0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__assign({ size: "xs", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }))), (0, jsx_runtime_1.jsx)(button_1.Button, tslib_1.__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';
 exports.default = RangeSelectorContainer;