@sprinklrjs/spaceweb 10.1.0 → 11.0.0

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

@@ -13,8 +13,7 @@ import DefaultTimezonePicker from './TimezonePicker';
 import ErrorIcon from '../icon/components/error';
 import { StyledFooter, StyledFooterBeforeEnhancer } from '../date-picker/styled-components';
 import { useLocale } from '../locale';
-import { getSelectedTimeRange } from './utils';
-import { isTimeInRange } from '../date-picker/utils';
+import { getRangeError, getSelectedTimeRange } from './utils';
 import { useOverrides } from '../overrides';
 var getPresetId = function (selectedPreset, selectedValue) {
     if (selectedPreset) {
@@ -33,42 +32,40 @@ var RangeSelectorContainer = function (_a) {
     var _g = __read(useState(selectedTimeRange), 2), timeRange = _g[0], setTimeRange = _g[1];
     var _h = __read(useState(getPresetId(selectedPreset, selectedValue)), 2), preset = _h[0], setPreset = _h[1];
     var _j = __read(useState(selectedTimezone), 2), timezone = _j[0], setTimezone = _j[1];
-    var _k = __read(useState(false), 2), hasError = _k[0], setHasError = _k[1];
     useEffect(function () {
         setTimeRange(selectedTimeRange);
         setPreset(getPresetId(selectedPreset, selectedValue));
     }, [selectedTimeRange, selectedValue, selectedPreset]);
-    var _l = __read(useOverrides((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Header, StyledHeader), 2), Header = _l[0], headerProps = _l[1];
-    var _m = __read(useOverrides((_c = props.overrides) === null || _c === void 0 ? void 0 : _c.HeaderBeforeEnhancer, Typography), 2), HeaderBeforeEnhancer = _m[0], headerBeforeEnhancerProps = _m[1];
-    var _o = __read(useOverrides((_d = props.overrides) === null || _d === void 0 ? void 0 : _d.Footer, StyledFooter), 2), Footer = _o[0], footerProps = _o[1];
-    var _p = __read(useOverrides((_e = props.overrides) === null || _e === void 0 ? void 0 : _e.FooterBeforeEnhancer, StyledFooterBeforeEnhancer), 2), FooterBeforeEnhancer = _p[0], footerBeforeEnhancerProps = _p[1];
-    var _q = __read(useOverrides((_f = props.overrides) === null || _f === void 0 ? void 0 : _f.TimezonePicker, DefaultTimezonePicker), 2), TimezonePicker = _q[0], timezonePickerProps = _q[1];
-    useEffect(function () {
-        if ((preset === 'CUSTOM' && timeRange.length !== 2) || typeof preset !== 'string') {
-            setHasError(true);
-        }
-        else if (!isTimeInRange(timeRange, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers })) {
-            setHasError(true);
-        }
-        else {
-            setHasError(false);
-        }
-    }, [preset, timeRange, minDate, maxDate, dateHelpers]);
+    var _k = __read(useOverrides((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Header, StyledHeader), 2), Header = _k[0], headerProps = _k[1];
+    var _l = __read(useOverrides((_c = props.overrides) === null || _c === void 0 ? void 0 : _c.HeaderBeforeEnhancer, Typography), 2), HeaderBeforeEnhancer = _l[0], headerBeforeEnhancerProps = _l[1];
+    var _m = __read(useOverrides((_d = props.overrides) === null || _d === void 0 ? void 0 : _d.Footer, StyledFooter), 2), Footer = _m[0], footerProps = _m[1];
+    var _o = __read(useOverrides((_e = props.overrides) === null || _e === void 0 ? void 0 : _e.FooterBeforeEnhancer, StyledFooterBeforeEnhancer), 2), FooterBeforeEnhancer = _o[0], footerBeforeEnhancerProps = _o[1];
+    var _p = __read(useOverrides((_f = props.overrides) === null || _f === void 0 ? void 0 : _f.TimezonePicker, DefaultTimezonePicker), 2), TimezonePicker = _p[0], timezonePickerProps = _p[1];
+    var _q = useMemo(function () {
+        return getRangeError({
+            dateHelpers: dateHelpers,
+            timeRange: timeRange,
+            maxDate: maxDate,
+            minDate: minDate,
+            locale: locale,
+            preset: preset,
+        });
+    }, [timeRange, minDate, maxDate, dateHelpers, locale, preset]), hasError = _q.hasError, errMsg = _q.errMsg;
     var onDateChange = useCallback(function (_a) {
         var _b, _c, _d;
-        var date = _a.date, preset = _a.preset;
+        var date = _a.date, _preset = _a.preset;
         // if preset is passed then we have to get the time range limits else date is array
-        if (preset) {
-            var nextDate = (_d = (_c = (_b = getSelectedTimeRange(preset, timeRangePresets)) === null || _b === void 0 ? void 0 : _b.getTimeRangeLimits) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : [];
+        if (_preset) {
+            var nextDate = (_d = (_c = (_b = getSelectedTimeRange(_preset, timeRangePresets)) === null || _b === void 0 ? void 0 : _b.getTimeRangeLimits) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : [];
             /* Here we have to manually set 0 ms on startDate and 999ms on endDate, becuase baseui internally clamps day to start of the day.
             But in this function they only set hours, minutes and seconds to 0 and ms remains as it is. So, isDayInRange check fails, where
             they checks (startDate<=endDate). As milliseconds of end Date may be greater then start Date, it leads to failure of presets like
             Last 1 Hour, Last 2 to 1 Hours, Last 12 Hours, etc...
             */
             nextDate = __spreadArray(__spreadArray([], __read((nextDate[0] ? [new Date(nextDate[0].setMilliseconds(0))] : [])), false), __read((nextDate[1] ? [new Date(nextDate[1].setMilliseconds(999))] : [])), false);
-            setPreset(preset);
+            setPreset(_preset);
             setTimeRange(nextDate);
-            onChange === null || onChange === void 0 ? void 0 : onChange(__assign({ value: preset, date: nextDate, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
+            onChange === null || onChange === void 0 ? void 0 : onChange(__assign({ value: _preset, date: nextDate, preset: _preset }, (disableTimezone ? {} : { timezone: timezone })));
         }
         else {
             var nextDate = date;
@@ -87,15 +84,18 @@ var RangeSelectorContainer = function (_a) {
     var handleSubmit = useCallback(function () {
         return onSubmit(__assign({ timeRange: timeRange, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
     }, [timeRange, preset, timezone, onSubmit, disableTimezone]);
-    var errorEl = hasError ? (_jsxs(Stack, __assign({ direction: "horizontal", gap: 1, className: cx('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [_jsx(ErrorIcon, { size: 14, className: [
+    // show error message only when it is present, hasError can be true when user has not selected any date,
+    // but we are showing any error message for that scenario.
+    var errorEl = errMsg ? (_jsxs(Stack, __assign({ direction: "horizontal", gap: 1, className: cx('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [_jsx(ErrorIcon, { size: 14, className: [
+                    'block',
                     function (_a) {
                         var theme = _a.theme;
                         return ({
                             fill: theme.spr.clrRed,
                         });
                     },
-                ] }, void 0), _jsx(Typography, __assign({ className: "my-0", variant: "bs3" }, { children: locale.timeRangePicker.rangeErrorMsg }), void 0)] }), void 0)) : 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: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), _jsx(RangeSelector, { 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 }, void 0), _jsxs(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: "justify-between" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps), void 0), _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: "self-end" }, { children: [_jsx(Button, __assign({ size: "sm", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ size: "sm", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0), monthsShown === 1 ? errorEl : null] }), void 0)] }), void 0)] }), void 0));
+                ] }, void 0), _jsx(Typography, __assign({ className: "my-0", variant: "bs3" }, { children: errMsg }), void 0)] }), void 0)) : 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: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : (_jsx(TimezonePicker, __assign({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), _jsx(RangeSelector, { 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 }, void 0), _jsxs(Footer, __assign({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: "justify-between" }, { children: [_jsx(FooterBeforeEnhancer, __assign({}, footerBeforeEnhancerProps), void 0), _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: [_jsx(Button, __assign({ size: "sm", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), _jsx(Button, __assign({ size: "sm", className: "ml-3", onClick: handleSubmit, disabled: hasError, "data-testid": "save" }, { children: locale.timeRangePicker.saveBtnLabel }), void 0)] }), void 0), monthsShown === 1 ? errorEl : null] }), void 0)] }), void 0)] }), void 0));
 };
 RangeSelectorContainer.displayName = 'RangeSelectorContainer';
 export default RangeSelectorContainer;

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

@@ -5,6 +5,7 @@ import { Menu as DefaultMenu, MenuItem as DefaultMenuItem } from '../menu';
 import { Box } from '../box';
 import { useOverrides } from '../overrides';
 import { useLocale } from '../locale';
+import { useIsMobileDevice } from '../hooks/useIsMobileDevice';
 var TimeRangeList = function (_a) {
     var onChange = _a.onChange, timeRange = _a.timeRange, preset = _a.preset, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides;
     var locale = useLocale();
@@ -16,9 +17,15 @@ var TimeRangeList = function (_a) {
             onChange({ preset: timeRangePreset.id });
         }
     }, [onChange, timeRange]);
+    var isMobileDevice = useIsMobileDevice();
     var _b = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Menu, DefaultMenu), 2), Menu = _b[0], menuProps = _b[1];
     var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, DefaultMenuItem), 2), MenuItem = _c[0], menuItemProps = _c[1];
-    return (_jsx(Box, __assign({ className: "w-40 overflow-y-auto border-r-1 border-l-0 border-t-0 border-b-0 spr-border-01 border-solid" }, { children: _jsx(Menu, __assign({ "aria-label": locale.timeRangePicker.presetMenuAriaLabel, disableNavigationOnMount: true, resetMenuHighlightOnMouseLeave: true, className: ['focus-visible:-outline-offset-2', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], role: "listbox" }, menuProps, { children: timeRangePresets.map(function (timeRangePreset) { return (_jsx(MenuItem, __assign({ onClick: function () { return onItemSelect(timeRangePreset); }, selected: timeRangePreset.id === preset, className: [
+    return (_jsx(Box, __assign({ className: [
+            'overflow-y-auto border-r-1 border-l-0 border-t-0 border-b-0 spr-border-01 border-solid',
+            {
+                width: isMobileDevice ? '110px' : '160px',
+            },
+        ] }, { children: _jsx(Menu, __assign({ "aria-label": locale.timeRangePicker.presetMenuAriaLabel, disableNavigationOnMount: true, resetMenuHighlightOnMouseLeave: true, className: ['focus-visible:-outline-offset-2', menuProps === null || menuProps === void 0 ? void 0 : menuProps.className], role: "listbox", "$showFocusOutline": true }, menuProps, { children: timeRangePresets.map(function (timeRangePreset) { return (_jsx(MenuItem, __assign({ onClick: function () { return onItemSelect(timeRangePreset); }, selected: timeRangePreset.id === preset, className: [
                     'static',
                     function (_a, _b) {
                         var theme = _a.theme;

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

@@ -51,9 +51,6 @@ export var TimeRangePicker = function (_a) {
         if (!Array.isArray(date) && date) {
             return formatDate(date);
         }
-        if (formatDisplayValue) {
-            return formatDisplayValue(date, normalizedFormatString);
-        }
         var timeRangePreset;
         if (typeof preset === 'string') {
             timeRangePreset = getSelectedTimeRange(preset, timeRangeList);
@@ -61,7 +58,7 @@ export var TimeRangePicker = function (_a) {
         else if (typeof value === 'string') {
             timeRangePreset = getSelectedTimeRange(value, timeRangeList);
         }
-        return formatSummaryValue({
+        var options = {
             date: date,
             presetId: (_a = timeRangePreset === null || timeRangePreset === void 0 ? void 0 : timeRangePreset.id) !== null && _a !== void 0 ? _a : CUSTOM_OPTION.id,
             presetLabel: (_b = timeRangePreset === null || timeRangePreset === void 0 ? void 0 : timeRangePreset.label) !== null && _b !== void 0 ? _b : locale.timeRangePicker.customRange,
@@ -73,7 +70,11 @@ export var TimeRangePicker = function (_a) {
             adapter: adapter,
             locale: dateFnsLocale,
             displayVariant: displayVariant,
-        });
+        };
+        if (formatDisplayValue) {
+            return formatDisplayValue(date, normalizedFormatString, options);
+        }
+        return formatSummaryValue(options);
     }, [
         timezone,
         value,

package/esm/time-range-picker/locale.d.ts

@@ -38,4 +38,7 @@ export declare type TimeRangePickerLocale = {
     rangeErrorMsg: string;
     presetMenuAriaLabel: string;
     popoverAriaLabel: string;
+    minDateErrorMessage: string;
+    maxDateErrorMessage: string;
+    minMaxDateErrorMessage: string;
 };

package/esm/time-range-picker/types.d.ts

@@ -30,6 +30,7 @@ export declare type TimeRangePickerOverrides = DatepickerOverrides<Record<string
     HeaderBeforeEnhancer?: Override<Record<string, any>>;
     FooterBeforeEnhancer?: Override<Record<string, any>>;
     TimezonePicker?: Override<Record<string, any>>;
+    Calendar?: Override<Record<string, any>>;
 };
 export declare type TimeRangePickerValue = {
     value: Date[] | string;
@@ -39,7 +40,20 @@ export declare type TimeRangePickerValue = {
 };
 declare type Preset = string;
 export declare type SizeVariant = 'default' | 'compact';
-export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value' | 'overrides' | 'onChange' | 'isOpen' | 'onFocus' | 'onBlur' | 'range'> & {
+export declare type FormatSummaryValueOptions = {
+    date: Date[];
+    presetId: string;
+    presetLabel: string;
+    timezone?: string;
+    formatString?: string;
+    showFullDateInSummary?: boolean;
+    showTimezoneInSummary?: boolean;
+    adapter?: any;
+    locale?: any;
+    hidePresetLabel?: boolean;
+    displayVariant?: SizeVariant;
+};
+export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value' | 'overrides' | 'onChange' | 'isOpen' | 'onFocus' | 'onBlur' | 'range' | 'formatDisplayValue'> & {
     /**
      * @deprecated Please prevent passing preset to value. Instead, pass it in the prop `preset`.
      *   This will be removed in future major releases.
@@ -58,6 +72,7 @@ export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value
     startOpen?: boolean;
     disableTimezone?: boolean;
     displayVariant?: SizeVariant;
+    formatDisplayValue?: (date: Date | undefined | null | Array<Date | undefined | null>, formatString: string, options: FormatSummaryValueOptions) => string;
 };
 export declare type RangeSelectorContainerProps = Omit<TimeRangePickerProps, 'onFocus' | 'onBlur' | 'timeRangePresets' | 'onSubmit' | 'formatDisplayValue' | 'onClear' | 'timezone'> & {
     timeRangePresets: TimeRangePreset[];

package/esm/time-range-picker/utils.d.ts

@@ -1,5 +1,6 @@
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 import { Locale } from '../locale';
-import { SizeVariant, TimeRangePreset } from './types';
+import { FormatSummaryValueOptions, TimeRangePreset } from './types';
 export declare const getSelectedTimeRange: (selectedTimeRange: string | undefined, timeRangeOptions: Array<TimeRangePreset>) => TimeRangePreset | undefined;
 export declare const getSystemTzName: () => string;
 /**
@@ -23,20 +24,19 @@ export declare const adaptDateWithSystemTz: (date: Date, selectedTimezone: strin
  */
 export declare const getDateForGivenTimezone: (timezone?: string | undefined) => Date;
 export declare const getDefaultTimeRangePresets: (locale: Locale) => TimeRangePreset[];
-export declare const formatSummaryValue: ({ date, presetId, presetLabel, timezone, formatString, showFullDateInSummary, showTimezoneInSummary, adapter, locale, hidePresetLabel, displayVariant, }: {
-    date: Date[];
-    presetId: string;
-    presetLabel: string;
-    timezone?: string | undefined;
-    formatString?: string | undefined;
-    showFullDateInSummary?: boolean | undefined;
-    showTimezoneInSummary?: boolean | undefined;
-    adapter?: any;
-    locale?: any;
-    hidePresetLabel?: boolean | undefined;
-    displayVariant?: SizeVariant | undefined;
-}) => string;
+export declare const formatSummaryValue: ({ date, presetId, presetLabel, timezone, formatString, showFullDateInSummary, showTimezoneInSummary, adapter, locale, hidePresetLabel, displayVariant, }: FormatSummaryValueOptions) => string;
 export declare const getHeight: ({ monthsShown, timeSelect }: {
     monthsShown?: number | undefined;
     timeSelect?: boolean | undefined;
 }) => number;
+export declare const getRangeError: ({ maxDate, minDate, dateHelpers, timeRange, locale, preset, }: {
+    minDate?: Date | null | undefined;
+    maxDate?: Date | null | undefined;
+    dateHelpers: DateHelpers<Date>;
+    timeRange: Date[];
+    locale: Locale;
+    preset?: string | undefined;
+}) => {
+    hasError: boolean;
+    errMsg?: string;
+};

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

@@ -2,7 +2,8 @@ import { DEFAULT_FORMAT_STRING } from '../date-picker/constants';
 import { findTimeZone, getZonedTime } from 'timezone-support/dist/index-1900-2050';
 import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
-import { normalizeDashes } from '../date-picker/utils';
+import getInterpolatedString from 'baseui/helpers/i18n-interpolation';
+import { isTimeInRange, normalizeDashes } from '../date-picker/utils';
 import { CALENDAR_HEIGHT, CUSTOM_OPTION, TIME_SELECT_ROW_HEIGHT } from './constants';
 export var getSelectedTimeRange = function (selectedTimeRange, timeRangeOptions) { return timeRangeOptions.find(function (_a) {
     var id = _a.id;
@@ -409,3 +410,46 @@ export var getHeight = function (_a) {
     }
     return CALENDAR_HEIGHT;
 };
+var ERROR_FORMATE_DATE = 'dd MMM, yyyy hh:mm a';
+export var getRangeError = function (_a) {
+    var maxDate = _a.maxDate, minDate = _a.minDate, dateHelpers = _a.dateHelpers, timeRange = _a.timeRange, locale = _a.locale, preset = _a.preset;
+    if ((preset === 'CUSTOM' && timeRange.length !== 2) || typeof preset !== 'string') {
+        return {
+            hasError: true,
+        };
+    }
+    var isValidTimeRange = isTimeInRange(timeRange, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers });
+    if (isValidTimeRange) {
+        return {
+            hasError: false,
+        };
+    }
+    if (minDate && maxDate) {
+        return {
+            hasError: true,
+            errMsg: getInterpolatedString(locale.timeRangePicker.minMaxDateErrorMessage, {
+                minDate: dateHelpers.formatDate(minDate, ERROR_FORMATE_DATE),
+                maxDate: dateHelpers.formatDate(maxDate, ERROR_FORMATE_DATE),
+            }),
+        };
+    }
+    if (minDate) {
+        return {
+            hasError: true,
+            errMsg: getInterpolatedString(locale.timeRangePicker.minDateErrorMessage, {
+                minDate: dateHelpers.formatDate(minDate, ERROR_FORMATE_DATE),
+            }),
+        };
+    }
+    if (maxDate) {
+        return {
+            hasError: true,
+            errMsg: getInterpolatedString(locale.timeRangePicker.maxDateErrorMessage, {
+                maxDate: dateHelpers.formatDate(maxDate, ERROR_FORMATE_DATE),
+            }),
+        };
+    }
+    return {
+        hasError: false,
+    };
+};

package/esm/time-zone-picker/TimezonePicker.d.ts

@@ -1,8 +1,3 @@
 import { ReactElement } from 'react';
 import { TimezonePickerProps } from './types';
-export declare const TimezonePicker: {
-    (props: TimezonePickerProps): ReactElement;
-    defaultProps: {
-        size: string;
-    };
-};
+export declare const TimezonePicker: (props: TimezonePickerProps) => ReactElement;

package/esm/time-zone-picker/TimezonePicker.js

@@ -7,8 +7,8 @@ import { useOverrides } from '../overrides';
 import { buildTimeZones } from './utils';
 export var TimezonePicker = function (props) {
     var adaptedProps = useContextualFormProps(props);
-    var onChange = adaptedProps.onChange, _a = adaptedProps.date, date = _a === void 0 ? new Date() : _a, mapLabels = adaptedProps.mapLabels, value = adaptedProps.value, _b = adaptedProps.overrides, overrides = _b === void 0 ? {} : _b, restProps = __rest(adaptedProps, ["onChange", "date", "mapLabels", "value", "overrides"]);
-    var _c = __read(useState(), 2), timezoneId = _c[0], setTimezoneId = _c[1];
+    var onChange = adaptedProps.onChange, _a = adaptedProps.date, date = _a === void 0 ? new Date() : _a, mapLabels = adaptedProps.mapLabels, value = adaptedProps.value, _b = adaptedProps.overrides, overrides = _b === void 0 ? {} : _b, _c = adaptedProps.size, size = _c === void 0 ? 'md' : _c, restProps = __rest(adaptedProps, ["onChange", "date", "mapLabels", "value", "overrides", "size"]);
+    var _d = __read(useState(), 2), timezoneId = _d[0], setTimezoneId = _d[1];
     var time = date.getTime();
     var timeZoneList = useMemo(function () {
         if (props.timezoneOptions) {
@@ -43,10 +43,8 @@ export var TimezonePicker = function (props) {
         setTimezoneId((_a = params.option) === null || _a === void 0 ? void 0 : _a.id);
     }, [onChange, setTimezoneId]);
     var _value = useMemo(function () { return (value || timezoneId ? [{ id: value || timezoneId }] : []); }, [value, timezoneId]);
-    var _d = __read(useOverrides(overrides.Select, Select), 2), SelectComp = _d[0], selectProps = _d[1];
+    var _e = __read(useOverrides(overrides.Select, Select), 2), SelectComp = _e[0], selectProps = _e[1];
+    return (
     //@ts-ignore check why `type` is mandatory for select
-    return _jsx(SelectComp, __assign({ value: _value, onChange: handleChange, options: timeZoneList }, restProps, selectProps), void 0);
-};
-TimezonePicker.defaultProps = {
-    size: 'md',
+    _jsx(SelectComp, __assign({ value: _value, onChange: handleChange, options: timeZoneList, size: size }, restProps, selectProps), void 0));
 };

package/esm/tooltip/disabled-tooltip-container.d.ts

@@ -3,6 +3,31 @@ import { TooltipProps } from './types';
 export declare type DisabledTooltipContainerProps = Partial<Omit<TooltipProps, 'children'>> & Pick<TooltipProps, 'children'>;
 declare const DisabledTooltipContainer: {
     ({ content, children, onMouseEnterDelay, onMouseLeaveDelay, overrides, ...props }: DisabledTooltipContainerProps): React.ReactElement | null;
-    defaultProps: any;
+    defaultProps: {
+        showArrow: boolean;
+        accessibilityType?: "none" | "menu" | "tooltip" | undefined;
+        animateOutTime?: number | undefined;
+        autoFocus?: boolean | undefined;
+        focusLock?: boolean | undefined;
+        'data-baseweb'?: string | undefined;
+        id?: string | undefined;
+        ignoreBoundary?: boolean | undefined;
+        mountNode?: HTMLElement | undefined;
+        onBlur?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+        onClick?: ((e: React.SyntheticEvent<Element, Event>) => unknown) | undefined;
+        onFocus?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+        focusOptions?: FocusOptions | undefined;
+        onMouseEnter?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+        onMouseEnterDelay?: number | undefined;
+        onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+        onMouseLeaveDelay?: number | undefined;
+        overrides?: import("baseui/popover").PopoverOverrides | undefined;
+        placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+        popperOptions?: any;
+        renderAll?: boolean | undefined;
+        returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions) | undefined;
+        triggerType?: "hover" | "click" | undefined;
+        popoverMargin?: number | undefined;
+    };
 };
 export default DisabledTooltipContainer;

package/esm/tooltip/overrides.js

@@ -30,7 +30,7 @@ var getTypography = function (_a, _b) {
     return __assign(__assign({}, theme.typography.bs3), { fontWeight: theme.fontWeight.normal });
 };
 export var innerStyles = [
-    'flex flex-col items-center break-words',
+    'break-words',
     function (utils) {
         var theme = utils.theme;
         return {

package/esm/tooltip/stateful-tooltip-container.d.ts

@@ -3,6 +3,31 @@ import { StatefulTooltipContainerProps } from './types';
 declare const StatefulContainer: {
     (props: StatefulTooltipContainerProps): React.ReactElement;
     displayName: string;
-    defaultProps: any;
+    defaultProps: {
+        showArrow: boolean;
+        accessibilityType?: "none" | "menu" | "tooltip" | undefined;
+        animateOutTime?: number | undefined;
+        autoFocus?: boolean | undefined;
+        focusLock?: boolean | undefined;
+        'data-baseweb'?: string | undefined;
+        id?: string | undefined;
+        ignoreBoundary?: boolean | undefined;
+        mountNode?: HTMLElement | undefined;
+        onBlur?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+        onClick?: ((e: React.SyntheticEvent<Element, Event>) => unknown) | undefined;
+        onFocus?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+        focusOptions?: FocusOptions | undefined;
+        onMouseEnter?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+        onMouseEnterDelay?: number | undefined;
+        onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+        onMouseLeaveDelay?: number | undefined;
+        overrides?: import("baseui/popover").PopoverOverrides | undefined;
+        placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+        popperOptions?: any;
+        renderAll?: boolean | undefined;
+        returnFocus?: boolean | FocusOptions | ((returnTo: Element) => boolean | FocusOptions) | undefined;
+        triggerType?: "hover" | "click" | undefined;
+        popoverMargin?: number | undefined;
+    };
 };
 export default StatefulContainer;

package/esm/tooltip/stateful-tooltip.d.ts

@@ -1,8 +1,34 @@
+import * as React from 'react';
 import { ReactElement } from 'react';
 import { StatefulTooltipProps } from './types';
 declare const StatefulTooltip: {
     (props: StatefulTooltipProps): ReactElement;
     displayName: string;
-    defaultProps: any;
+    defaultProps: {
+        showArrow: boolean;
+        focusLock: boolean;
+        returnFocus: boolean;
+        accessibilityType?: "none" | "menu" | "tooltip" | undefined;
+        animateOutTime?: number | undefined;
+        autoFocus?: boolean | undefined;
+        'data-baseweb'?: string | undefined;
+        id?: string | undefined;
+        ignoreBoundary?: boolean | undefined;
+        mountNode?: HTMLElement | undefined;
+        onBlur?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+        onClick?: ((e: React.SyntheticEvent<Element, Event>) => unknown) | undefined;
+        onFocus?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+        focusOptions?: FocusOptions | undefined;
+        onMouseEnter?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+        onMouseEnterDelay?: number | undefined;
+        onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+        onMouseLeaveDelay?: number | undefined;
+        overrides?: import("baseui/popover").PopoverOverrides | undefined;
+        placement?: "auto" | "bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "rightTop" | "rightBottom" | "bottomRight" | "bottomLeft" | "leftBottom" | "leftTop" | undefined;
+        popperOptions?: any;
+        renderAll?: boolean | undefined;
+        triggerType?: "hover" | "click" | undefined;
+        popoverMargin?: number | undefined;
+    };
 };
 export default StatefulTooltip;

package/esm/tooltip/stateful-tooltip.js

@@ -7,7 +7,7 @@ import Tooltip from './tooltip';
 var StatefulTooltip = function (props) {
     var children = props.children, size = props.size, label = props.label, _a = props.overrides, overrides = _a === void 0 ? {} : _a, restProps = __rest(props, ["children", "size", "label", "overrides"]);
     var _overrides = useConvertOverrides(overrides, undefined, [overrides]);
-    return (_jsx(StatefulContainer, __assign({}, restProps, { overrides: _overrides }, { children: function (tooltipProps) { return (_jsx(Tooltip, __assign({}, tooltipProps, { size: size, label: label }, { children: children }), void 0)); } }), void 0));
+    return (_jsx(StatefulContainer, __assign({ dismissOnClickOutside: true, dismissOnEsc: true, triggerType: "hover" }, restProps, { overrides: _overrides }, { children: function (tooltipProps) { return (_jsx(Tooltip, __assign({}, tooltipProps, { size: size, label: label }, { children: children }), void 0)); } }), void 0));
 };
 StatefulTooltip.displayName = 'StatefulTooltip';
 StatefulTooltip.defaultProps = __assign(__assign({}, defaultProps), { showArrow: true, focusLock: false, returnFocus: false });

package/esm/tooltip/tooltip.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { TooltipProps } from './types';
 declare const Tooltip: {
-    ({ size, label, content, overrides, children, targetElement, isOpen, triggerType, returnFocus, focusLock, ...restProps }: TooltipProps): ReactElement;
+    ({ size, label, content, overrides, children, targetElement, isOpen, triggerType, returnFocus, focusLock, placement, ...restProps }: TooltipProps): ReactElement;
     displayName: string;
 };
 export default Tooltip;

package/esm/tooltip/tooltip.js

@@ -19,10 +19,10 @@ var DISABLED_FOCUS_PROPS = {
 // @ts-ignore
 BaseTooltip.displayName = 'BaseUITooltip';
 var Tooltip = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, label = _a.label, content = _a.content, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, children = _a.children, targetElement = _a.targetElement, isOpen = _a.isOpen, _d = _a.triggerType, triggerType = _d === void 0 ? 'hover' : _d, _e = _a.returnFocus, returnFocus = _e === void 0 ? triggerType === 'click' : _e, _f = _a.focusLock, focusLock = _f === void 0 ? false : _f, restProps = __rest(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock"]);
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, label = _a.label, content = _a.content, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, children = _a.children, targetElement = _a.targetElement, isOpen = _a.isOpen, _d = _a.triggerType, triggerType = _d === void 0 ? 'hover' : _d, _e = _a.returnFocus, returnFocus = _e === void 0 ? triggerType === 'click' : _e, _f = _a.focusLock, focusLock = _f === void 0 ? false : _f, _g = _a.placement, placement = _g === void 0 ? 'auto' : _g, restProps = __rest(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement"]);
     var focusLockProps = useFocusLock({ returnFocus: returnFocus, focusLock: focusLock });
     var sharedProps = { $size: size, $label: !!label };
-    var _g = __read(useOverrides(overrides.Label, StyledLabel), 2), Label = _g[0], labelProps = _g[1];
+    var _h = __read(useOverrides(overrides.Label, StyledLabel), 2), Label = _h[0], labelProps = _h[1];
     // add label on top of content
     var contentToDisplay = [];
     if (label) {
@@ -33,14 +33,14 @@ var Tooltip = function (_a) {
     if (typeof children === 'function') {
         childNode = children({ isOpen: isOpen });
     }
-    var _h = useContent({ content: contentToDisplay }), setContentHost = _h.setContentHost, wrappedContent = _h.wrappedContent;
+    var _j = useContent({ content: contentToDisplay }), setContentHost = _j.setContentHost, wrappedContent = _j.wrappedContent;
     var _overrides = useConvertOverrides({
         Body: { style: getBodyStyle, props: sharedProps },
         Arrow: { style: getArrowStyle, props: sharedProps },
         Inner: { style: innerStyles, props: __assign(__assign({}, sharedProps), { ref: setContentHost }) },
     }, overrides, [overrides, size, label, setContentHost]);
     var id = useUniqueId();
-    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BaseTooltip, __assign({ id: id }, restProps, { triggerType: triggerType, isOpen: isOpen, overrides: _overrides, content: wrappedContent }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BaseTooltip, __assign({ id: id }, restProps, { triggerType: triggerType, isOpen: isOpen, overrides: _overrides, content: wrappedContent, placement: placement }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
 };
 Tooltip.displayName = 'Tooltip';
 export default Tooltip;

package/esm/tooltip/types.d.ts

@@ -1,7 +1,9 @@
+import { TetherPlacement } from 'baseui/layer';
 import { SharedStylePropsArg } from 'baseui/popover';
 import { StatefulTooltipProps as BaseStatefulTooltipProps, TooltipProps as BaseTooltipProps } from 'baseui/tooltip';
 import * as React from 'react';
 import { Override } from '../overrides';
+import { TriggerType } from '../popover';
 declare type SpacewebSharedProps = {
     $size: Size;
     $label: boolean;
@@ -22,7 +24,7 @@ interface DeprecatedProps {
      */
     focusLock?: BaseTooltipProps['focusLock'];
 }
-export declare type StatefulTooltipProps = Omit<BaseStatefulTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus'> & {
+export declare type StatefulTooltipProps = Omit<BaseStatefulTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus' | 'dismissOnEsc' | 'dismissOnClickOutside' | 'triggerType' | 'placement'> & {
     overrides?: {
         [key in keyof BaseStatefulTooltipProps['overrides']]?: Override<SharedProps & Record<string, any>>;
     } & {
@@ -33,8 +35,12 @@ export declare type StatefulTooltipProps = Omit<BaseStatefulTooltipProps, 'overr
     children?: React.ReactNode | ((args: {
         isOpen: boolean;
     }) => React.ReactNode);
+    dismissOnClickOutside?: boolean;
+    dismissOnEsc?: boolean;
+    triggerType?: TriggerType;
+    placement?: TetherPlacement;
 } & DeprecatedProps;
-export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus'> & {
+export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus' | 'triggerType' | 'placement'> & {
     overrides?: {
         [key in keyof BaseTooltipProps['overrides']]?: Override<SharedProps & Record<string, any>>;
     } & {
@@ -46,6 +52,8 @@ export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'childre
         isOpen: boolean;
     }) => React.ReactNode);
     targetElement?: HTMLElement | null;
+    triggerType?: TriggerType;
+    placement?: TetherPlacement;
 } & DeprecatedProps;
 export type { Placement, TriggerType, AccessibilityType } from '../popover';
 export type { StatefulTooltipContainerProps } from 'baseui/tooltip';

package/esm/types.d.ts

@@ -1,6 +1,7 @@
 import { AllHTMLAttributes, ElementType } from 'react';
-import { Theme as BaseTheme } from 'baseui/themes';
-import { StandardEngine as StyletronStandardEngine, StyleObject as StyletronStyleObject } from 'styletron-react';
+import { Theme as BaseTheme } from 'baseui/theme';
+import { StyleObject as StyletronStyleObject } from 'styletron-react';
+import { StandardEngine as StyletronStandardEngine } from 'styletron-standard';
 import { Direction, Theme, ThemeClassNames } from '@sprinklrjs/spaceweb-themes/types';
 export declare type StyleObject = StyletronStyleObject;
 export declare type StandardEngine = StyletronStandardEngine;

package/esm/video/Video.js

@@ -23,16 +23,18 @@ var Video = forwardRef(function (props, ref) {
     }, overrides || {});
     var _c = __read(useOverrides(mergedOverrides.Root, StyledRoot), 2), Root = _c[0], rootProps = _c[1];
     var _d = __read(useOverrides(mergedOverrides.Video, StyledVideo), 2), Vid = _d[0], videoProps = _d[1];
+    var _e = __read(useOverrides(mergedOverrides.PlayButton, Play), 2), PlayButton = _e[0], playButtonProps = _e[1];
+    var _f = __read(useOverrides(mergedOverrides.PosterImage, Image), 2), PosterImage = _f[0], posterImageProps = _f[1];
     var onPlay = videoProps.onPlay;
     var onClickPlay = useCallback(function (event) {
         startPlay(true);
         if (_isFunction(onPlay))
             onPlay(event);
     }, [onPlay]);
-    return played || !videoProps.poster ? (_jsx(Root, __assign({ "data-spaceweb": "video" }, rootProps, { children: _jsx(Vid, __assign({ ref: ref, "data-testid": "video" }, videoProps, { autoPlay: played }, { children: children }), void 0) }), void 0)) : (_jsxs(Root, __assign({ "data-spaceweb": "video" }, rootProps, { className: "flex items-center relative justify-center ".concat(classNames({ 'cursor-pointer': !videoProps.disabled })) }, { children: [_jsx(Image, __assign({}, videoProps, { src: videoProps.poster, alt: "Thumbnail", overrides: {
+    return played || !videoProps.poster ? (_jsx(Root, __assign({ "data-spaceweb": "video" }, rootProps, { children: _jsx(Vid, __assign({ ref: ref, "data-testid": "video" }, videoProps, { autoPlay: played }, { children: children }), void 0) }), void 0)) : (_jsxs(Root, __assign({ "data-spaceweb": "video" }, rootProps, { className: "flex items-center relative justify-center ".concat(classNames({ 'cursor-pointer': !videoProps.disabled })) }, { children: [_jsx(PosterImage, __assign({}, videoProps, { src: videoProps.poster, alt: "Thumbnail", overrides: {
                     Image: { style: videoProps.$style },
                     Root: { style: rootProps.$style },
-                }, onClick: videoProps.disabled ? _noop : onClickPlay }), void 0), _jsx("div", __assign({ className: css('absolute') }, { children: videoProps.disabled ? (_jsx(VideoDisabled, { className: "w-8 h-8 cursor-not-allowed spr-icon-05" }, void 0)) : (_jsx(Play, { className: "w-8 h-8 spr-icon-05", onClick: onClickPlay }, void 0)) }), void 0)] }), void 0));
+                }, onClick: videoProps.disabled ? _noop : onClickPlay }, posterImageProps), void 0), _jsx("div", __assign({ className: css('absolute') }, { children: videoProps.disabled ? (_jsx(VideoDisabled, { className: "w-8 h-8 cursor-not-allowed spr-icon-05" }, void 0)) : (_jsx(PlayButton, __assign({ className: "w-8 h-8 spr-icon-05", onClick: onClickPlay }, playButtonProps), void 0)) }), void 0)] }), void 0));
 });
 Video.displayName = 'Video';
 export default Video;

package/esm/video/types.d.ts

@@ -5,6 +5,8 @@ import { SpacewebComponentProps } from '../types';
 export declare type VideoOverrides = {
     Root?: Override<{}>;
     Video?: Override<{}>;
+    PlayButton?: Override<{}>;
+    PosterImage?: Override<{}>;
 };
 export declare type VideoProps = SpacewebComponentProps<React.VideoHTMLAttributes<HTMLVideoElement>> & {
     children?: ReactChildren;