@sprinklrjs/spaceweb 14.12.3 → 14.13.1

package/asyncSelect/hooks/useBaseAsyncSelect.js

@@ -257,9 +257,9 @@ var useBaseAsyncSelect = function (params) {
     var updateOptions = (0, react_1.useCallback)(function (getUpdatedOptions) {
         var updatedOptions = getUpdatedOptions(options);
         setOptions(updatedOptions);
-        setAllOptionsMap((0, keyBy_1.default)((0, utils_1.normalizeOptions)(updatedOptions)));
+        setAllOptionsMap((0, keyBy_1.default)((0, utils_1.normalizeOptions)(updatedOptions), valueKey));
         sortedOptionsRef.current = updatedOptions;
-    }, [options]);
+    }, [options, valueKey]);
     var updateResultCountMap = (0, react_1.useCallback)(function (getUpdatedResultCountMap) { return setResultCountMap(getUpdatedResultCountMap(resultCountMap)); }, [resultCountMap, setResultCountMap]);
     return tslib_1.__assign(tslib_1.__assign({}, restSelectProps), { options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: combinedRef, overrides: mergedOverrides, noResultsMsg: adaptedNoResultsMsg, createOption: createOption, onInputChange: _onInputChange, valueKey: valueKey, labelKey: labelKey, type: restSelectProps.type, groupConfigWithCount: groupConfigWithCount, onChange: onChange, onOpen: (0, react_1.useCallback)(function () {
             moveSelectedOptionsToTop &&

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/date-picker/DateInput.js

@@ -102,15 +102,31 @@ function (_a) {
     }, [date, minDate, maxDate, dateHelpers]);
     var updateDate = function (nextDate) {
         if ((0, exports.isDateValid)(nextDate)) {
-            var newDate = dateHelpers.setDate(date || new Date(), nextDate);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setDate(date, nextDate));
+            }
+            else {
+                var monthNum = Number(month);
+                var yearNum = Number(year);
+                if ((0, exports.isMonthValid)(monthNum) &&
+                    yearNum >= minYear &&
+                    yearNum <= maxYear &&
+                    nextDate <= (0, getDaysInMonth_1.default)(new Date(yearNum, monthNum - 1))) {
+                    onChange(new Date(yearNum, monthNum - 1, nextDate));
+                }
+            }
         }
         else {
             setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
         }
     };
     var dateBlur = function (_event) {
-        setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
+        if (date) {
+            setDay(dateHelpers.formatDate(date, 'dd'));
+        }
+        else if (!(0, exports.isDateValid)(Number(day))) {
+            setDay('');
+        }
     };
     // Match main: derive a number via Number(raw), not parseInt. For mask partials like "1_",
     // Number returns NaN so we do not commit; parseInt("1_") === 1 incorrectly committed day 1.
@@ -139,15 +155,31 @@ function (_a) {
     };
     var updateMonth = function (nextMonth) {
         if ((0, exports.isMonthValid)(nextMonth)) {
-            var newDate = dateHelpers.setMonth(date || new Date(), nextMonth - 1);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setMonth(date, nextMonth - 1));
+            }
+            else {
+                var dayNum = Number(day);
+                var yearNum = Number(year);
+                if ((0, exports.isDateValid)(dayNum) &&
+                    yearNum >= minYear &&
+                    yearNum <= maxYear &&
+                    dayNum <= (0, getDaysInMonth_1.default)(new Date(yearNum, nextMonth - 1))) {
+                    onChange(new Date(yearNum, nextMonth - 1, dayNum));
+                }
+            }
         }
         else {
             setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
         }
     };
     var monthBlur = function (_event) {
-        setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
+        if (date) {
+            setMonth(dateHelpers.formatDate(date, 'MM'));
+        }
+        else if (!(0, exports.isMonthValid)(Number(month))) {
+            setMonth('');
+        }
     };
     // Same rules as dayChange: Number(raw) rejects partial mask values like "1_".
     var monthChange = function (event) {
@@ -176,15 +208,33 @@ function (_a) {
     // year
     var updateYear = function (nextYear) {
         if (nextYear >= minYear && nextYear <= maxYear) {
-            var newDate = dateHelpers.setYear(date || new Date(), nextYear);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setYear(date, nextYear));
+            }
+            else {
+                var dayNum = Number(day);
+                var monthNum = Number(month);
+                if ((0, exports.isDateValid)(dayNum) &&
+                    (0, exports.isMonthValid)(monthNum) &&
+                    dayNum <= (0, getDaysInMonth_1.default)(new Date(nextYear, monthNum - 1))) {
+                    onChange(new Date(nextYear, monthNum - 1, dayNum));
+                }
+            }
         }
         else {
             setYear(date ? dateHelpers.getYear(date) : '');
         }
     };
     var yearBlur = function (_event) {
-        setYear(date ? dateHelpers.formatDate(date, 'yyyy') : '');
+        if (date) {
+            setYear(dateHelpers.formatDate(date, 'yyyy'));
+        }
+        else {
+            var yearNum = Number(year);
+            if (!(yearNum >= minYear && yearNum <= maxYear)) {
+                setYear('');
+            }
+        }
     };
     var yearChange = function (event) {
         setYear(event.target.value);

package/esm/asyncSelect/hooks/useBaseAsyncSelect.js

@@ -254,9 +254,9 @@ export var useBaseAsyncSelect = function (params) {
     var updateOptions = useCallback(function (getUpdatedOptions) {
         var updatedOptions = getUpdatedOptions(options);
         setOptions(updatedOptions);
-        setAllOptionsMap(_keyBy(normalizeOptions(updatedOptions)));
+        setAllOptionsMap(_keyBy(normalizeOptions(updatedOptions), valueKey));
         sortedOptionsRef.current = updatedOptions;
-    }, [options]);
+    }, [options, valueKey]);
     var updateResultCountMap = useCallback(function (getUpdatedResultCountMap) { return setResultCountMap(getUpdatedResultCountMap(resultCountMap)); }, [resultCountMap, setResultCountMap]);
     return __assign(__assign({}, restSelectProps), { options: options, isLoading: isLoading, value: selectedOptions, controlRef: controlRef, inputRef: combinedRef, overrides: mergedOverrides, noResultsMsg: adaptedNoResultsMsg, createOption: createOption, onInputChange: _onInputChange, valueKey: valueKey, labelKey: labelKey, type: restSelectProps.type, groupConfigWithCount: groupConfigWithCount, onChange: onChange, onOpen: useCallback(function () {
             moveSelectedOptionsToTop &&

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/date-picker/DateInput.js

@@ -97,15 +97,31 @@ function (_a) {
     }, [date, minDate, maxDate, dateHelpers]);
     var updateDate = function (nextDate) {
         if (isDateValid(nextDate)) {
-            var newDate = dateHelpers.setDate(date || new Date(), nextDate);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setDate(date, nextDate));
+            }
+            else {
+                var monthNum = Number(month);
+                var yearNum = Number(year);
+                if (isMonthValid(monthNum) &&
+                    yearNum >= minYear &&
+                    yearNum <= maxYear &&
+                    nextDate <= getDaysInMonth(new Date(yearNum, monthNum - 1))) {
+                    onChange(new Date(yearNum, monthNum - 1, nextDate));
+                }
+            }
         }
         else {
             setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
         }
     };
     var dateBlur = function (_event) {
-        setDay(date ? dateHelpers.formatDate(date, 'dd') : '');
+        if (date) {
+            setDay(dateHelpers.formatDate(date, 'dd'));
+        }
+        else if (!isDateValid(Number(day))) {
+            setDay('');
+        }
     };
     // Match main: derive a number via Number(raw), not parseInt. For mask partials like "1_",
     // Number returns NaN so we do not commit; parseInt("1_") === 1 incorrectly committed day 1.
@@ -134,15 +150,31 @@ function (_a) {
     };
     var updateMonth = function (nextMonth) {
         if (isMonthValid(nextMonth)) {
-            var newDate = dateHelpers.setMonth(date || new Date(), nextMonth - 1);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setMonth(date, nextMonth - 1));
+            }
+            else {
+                var dayNum = Number(day);
+                var yearNum = Number(year);
+                if (isDateValid(dayNum) &&
+                    yearNum >= minYear &&
+                    yearNum <= maxYear &&
+                    dayNum <= getDaysInMonth(new Date(yearNum, nextMonth - 1))) {
+                    onChange(new Date(yearNum, nextMonth - 1, dayNum));
+                }
+            }
         }
         else {
             setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
         }
     };
     var monthBlur = function (_event) {
-        setMonth(date ? dateHelpers.formatDate(date, 'MM') : '');
+        if (date) {
+            setMonth(dateHelpers.formatDate(date, 'MM'));
+        }
+        else if (!isMonthValid(Number(month))) {
+            setMonth('');
+        }
     };
     // Same rules as dayChange: Number(raw) rejects partial mask values like "1_".
     var monthChange = function (event) {
@@ -171,15 +203,33 @@ function (_a) {
     // year
     var updateYear = function (nextYear) {
         if (nextYear >= minYear && nextYear <= maxYear) {
-            var newDate = dateHelpers.setYear(date || new Date(), nextYear);
-            onChange(newDate);
+            if (date) {
+                onChange(dateHelpers.setYear(date, nextYear));
+            }
+            else {
+                var dayNum = Number(day);
+                var monthNum = Number(month);
+                if (isDateValid(dayNum) &&
+                    isMonthValid(monthNum) &&
+                    dayNum <= getDaysInMonth(new Date(nextYear, monthNum - 1))) {
+                    onChange(new Date(nextYear, monthNum - 1, dayNum));
+                }
+            }
         }
         else {
             setYear(date ? dateHelpers.getYear(date) : '');
         }
     };
     var yearBlur = function (_event) {
-        setYear(date ? dateHelpers.formatDate(date, 'yyyy') : '');
+        if (date) {
+            setYear(dateHelpers.formatDate(date, 'yyyy'));
+        }
+        else {
+            var yearNum = Number(year);
+            if (!(yearNum >= minYear && yearNum <= maxYear)) {
+                setYear('');
+            }
+        }
     };
     var yearChange = function (event) {
         setYear(event.target.value);

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprinklrjs/spaceweb",
-  "version": "14.12.3",
+  "version": "14.13.1",
   "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.3",
+    "@sprinklrjs/spaceweb-themes": "14.13.1",
     "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/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.