@sprinklrjs/spaceweb 10.1.0 → 11.0.0

package/time-range-picker/RangeSelectorContainer.js

@@ -16,7 +16,6 @@ var error_1 = (0, tslib_1.__importDefault)(require("../icon/components/error"));
 var styled_components_1 = require("../date-picker/styled-components");
 var locale_1 = require("../locale");
 var utils_1 = require("./utils");
-var utils_2 = require("../date-picker/utils");
 var overrides_1 = require("../overrides");
 var getPresetId = function (selectedPreset, selectedValue) {
     if (selectedPreset) {
@@ -35,42 +34,40 @@ var RangeSelectorContainer = function (_a) {
     var _g = (0, tslib_1.__read)((0, react_1.useState)(selectedTimeRange), 2), timeRange = _g[0], setTimeRange = _g[1];
     var _h = (0, tslib_1.__read)((0, react_1.useState)(getPresetId(selectedPreset, selectedValue)), 2), preset = _h[0], setPreset = _h[1];
     var _j = (0, tslib_1.__read)((0, react_1.useState)(selectedTimezone), 2), timezone = _j[0], setTimezone = _j[1];
-    var _k = (0, tslib_1.__read)((0, react_1.useState)(false), 2), hasError = _k[0], setHasError = _k[1];
     (0, react_1.useEffect)(function () {
         setTimeRange(selectedTimeRange);
         setPreset(getPresetId(selectedPreset, selectedValue));
     }, [selectedTimeRange, selectedValue, selectedPreset]);
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Header, styled_component_1.StyledHeader), 2), Header = _l[0], headerProps = _l[1];
-    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_c = props.overrides) === null || _c === void 0 ? void 0 : _c.HeaderBeforeEnhancer, typography_1.Typography), 2), HeaderBeforeEnhancer = _m[0], headerBeforeEnhancerProps = _m[1];
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_d = props.overrides) === null || _d === void 0 ? void 0 : _d.Footer, styled_components_1.StyledFooter), 2), Footer = _o[0], footerProps = _o[1];
-    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_e = props.overrides) === null || _e === void 0 ? void 0 : _e.FooterBeforeEnhancer, styled_components_1.StyledFooterBeforeEnhancer), 2), FooterBeforeEnhancer = _p[0], footerBeforeEnhancerProps = _p[1];
-    var _q = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_f = props.overrides) === null || _f === void 0 ? void 0 : _f.TimezonePicker, TimezonePicker_1.default), 2), TimezonePicker = _q[0], timezonePickerProps = _q[1];
-    (0, react_1.useEffect)(function () {
-        if ((preset === 'CUSTOM' && timeRange.length !== 2) || typeof preset !== 'string') {
-            setHasError(true);
-        }
-        else if (!(0, utils_2.isTimeInRange)(timeRange, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers })) {
-            setHasError(true);
-        }
-        else {
-            setHasError(false);
-        }
-    }, [preset, timeRange, minDate, maxDate, dateHelpers]);
+    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_b = props.overrides) === null || _b === void 0 ? void 0 : _b.Header, styled_component_1.StyledHeader), 2), Header = _k[0], headerProps = _k[1];
+    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_c = props.overrides) === null || _c === void 0 ? void 0 : _c.HeaderBeforeEnhancer, typography_1.Typography), 2), HeaderBeforeEnhancer = _l[0], headerBeforeEnhancerProps = _l[1];
+    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_d = props.overrides) === null || _d === void 0 ? void 0 : _d.Footer, styled_components_1.StyledFooter), 2), Footer = _m[0], footerProps = _m[1];
+    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_e = props.overrides) === null || _e === void 0 ? void 0 : _e.FooterBeforeEnhancer, styled_components_1.StyledFooterBeforeEnhancer), 2), FooterBeforeEnhancer = _o[0], footerBeforeEnhancerProps = _o[1];
+    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)((_f = props.overrides) === null || _f === void 0 ? void 0 : _f.TimezonePicker, TimezonePicker_1.default), 2), TimezonePicker = _p[0], timezonePickerProps = _p[1];
+    var _q = (0, react_1.useMemo)(function () {
+        return (0, utils_1.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 = (0, react_1.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 = (0, utils_1.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 = (0, utils_1.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 = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((nextDate[0] ? [new Date(nextDate[0].setMilliseconds(0))] : [])), false), (0, tslib_1.__read)((nextDate[1] ? [new Date(nextDate[1].setMilliseconds(999))] : [])), false);
-            setPreset(preset);
+            setPreset(_preset);
             setTimeRange(nextDate);
-            onChange === null || onChange === void 0 ? void 0 : onChange((0, tslib_1.__assign)({ value: preset, date: nextDate, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
+            onChange === null || onChange === void 0 ? void 0 : onChange((0, tslib_1.__assign)({ value: _preset, date: nextDate, preset: _preset }, (disableTimezone ? {} : { timezone: timezone })));
         }
         else {
             var nextDate = date;
@@ -89,15 +86,18 @@ var RangeSelectorContainer = function (_a) {
     var handleSubmit = (0, react_1.useCallback)(function () {
         return onSubmit((0, tslib_1.__assign)({ timeRange: timeRange, preset: preset }, (disableTimezone ? {} : { timezone: timezone })));
     }, [timeRange, preset, timezone, onSubmit, disableTimezone]);
-    var errorEl = hasError ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 1, className: (0, classNames_1.default)('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_1.default, { 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 ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 1, className: (0, classNames_1.default)('mr-1', { 'items-center': monthsShown !== 1 }), shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_1.default, { size: 14, className: [
+                    'block',
                     function (_a) {
                         var theme = _a.theme;
                         return ({
                             fill: theme.spr.clrRed,
                         });
                     },
-                ] }, void 0), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ className: "my-0", variant: "bs3" }, { children: locale.timeRangePicker.rangeErrorMsg }), void 0)] }), void 0)) : null;
-    return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, (0, tslib_1.__assign)({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, (0, tslib_1.__assign)({ variant: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, (0, tslib_1.__assign)({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), (0, jsx_runtime_1.jsx)(RangeSelector_1.default, { 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), (0, jsx_runtime_1.jsxs)(Footer, (0, tslib_1.__assign)({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: "justify-between" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, (0, tslib_1.__assign)({}, footerBeforeEnhancerProps), void 0), (0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, 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, (0, tslib_1.__assign)({ className: "self-end" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "sm", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__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), (0, jsx_runtime_1.jsx)(typography_1.Typography, (0, tslib_1.__assign)({ className: "my-0", variant: "bs3" }, { children: errMsg }), void 0)] }), void 0)) : null;
+    return ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ className: "spr-ui-01 rounded-8" }, { children: [(0, jsx_runtime_1.jsxs)(Header, (0, tslib_1.__assign)({ "$setTimezone": setTimezone, "$onClose": props.onClose }, headerProps, { children: [(0, jsx_runtime_1.jsx)(HeaderBeforeEnhancer, (0, tslib_1.__assign)({ variant: "bs1", "$as": "span", weight: "medium", className: "flex items-center" }, headerBeforeEnhancerProps, { children: locale.timeRangePicker.headerLabel }), void 0), disableTimezone ? null : ((0, jsx_runtime_1.jsx)(TimezonePicker, (0, tslib_1.__assign)({ setTimezone: setTimezone, timezone: timezone }, timezonePickerProps), void 0))] }), void 0), (0, jsx_runtime_1.jsx)(RangeSelector_1.default, { 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), (0, jsx_runtime_1.jsxs)(Footer, (0, tslib_1.__assign)({ "$hasError": hasError, "$onSubmit": handleSubmit, "$onClose": props.onClose }, footerProps, { className: "justify-between" }, { children: [(0, jsx_runtime_1.jsx)(FooterBeforeEnhancer, (0, tslib_1.__assign)({}, footerBeforeEnhancerProps), void 0), (0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, 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, (0, tslib_1.__assign)({ className: "flex self-end" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ size: "sm", onClick: props.onClose, variant: "secondary", "data-testid": "cancel" }, { children: locale.timeRangePicker.cancelBtnLabel }), void 0), (0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__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';
 exports.default = RangeSelectorContainer;

package/time-range-picker/TimeRangeList.js

@@ -7,6 +7,7 @@ var menu_1 = require("../menu");
 var box_1 = require("../box");
 var overrides_1 = require("../overrides");
 var locale_1 = require("../locale");
+var useIsMobileDevice_1 = require("../hooks/useIsMobileDevice");
 var TimeRangeList = function (_a) {
     var onChange = _a.onChange, timeRange = _a.timeRange, preset = _a.preset, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides;
     var locale = (0, locale_1.useLocale)();
@@ -18,9 +19,15 @@ var TimeRangeList = function (_a) {
             onChange({ preset: timeRangePreset.id });
         }
     }, [onChange, timeRange]);
+    var isMobileDevice = (0, useIsMobileDevice_1.useIsMobileDevice)();
     var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Menu, menu_1.Menu), 2), Menu = _b[0], menuProps = _b[1];
     var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.MenuItem, menu_1.MenuItem), 2), MenuItem = _c[0], menuItemProps = _c[1];
-    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__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: (0, jsx_runtime_1.jsx)(Menu, (0, tslib_1.__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 ((0, jsx_runtime_1.jsx)(MenuItem, (0, tslib_1.__assign)({ onClick: function () { return onItemSelect(timeRangePreset); }, selected: timeRangePreset.id === preset, className: [
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__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: (0, jsx_runtime_1.jsx)(Menu, (0, tslib_1.__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 ((0, jsx_runtime_1.jsx)(MenuItem, (0, tslib_1.__assign)({ onClick: function () { return onItemSelect(timeRangePreset); }, selected: timeRangePreset.id === preset, className: [
                     'static',
                     function (_a, _b) {
                         var theme = _a.theme;

package/time-range-picker/TimeRangePicker.js

@@ -54,9 +54,6 @@ 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 = (0, utils_1.getSelectedTimeRange)(preset, timeRangeList);
@@ -64,7 +61,7 @@ var TimeRangePicker = function (_a) {
         else if (typeof value === 'string') {
             timeRangePreset = (0, utils_1.getSelectedTimeRange)(value, timeRangeList);
         }
-        return (0, utils_1.formatSummaryValue)({
+        var options = {
             date: date,
             presetId: (_a = timeRangePreset === null || timeRangePreset === void 0 ? void 0 : timeRangePreset.id) !== null && _a !== void 0 ? _a : constants_2.CUSTOM_OPTION.id,
             presetLabel: (_b = timeRangePreset === null || timeRangePreset === void 0 ? void 0 : timeRangePreset.label) !== null && _b !== void 0 ? _b : locale.timeRangePicker.customRange,
@@ -76,7 +73,11 @@ var TimeRangePicker = function (_a) {
             adapter: adapter,
             locale: dateFnsLocale,
             displayVariant: displayVariant,
-        });
+        };
+        if (formatDisplayValue) {
+            return formatDisplayValue(date, normalizedFormatString, options);
+        }
+        return (0, utils_1.formatSummaryValue)(options);
     }, [
         timezone,
         value,

package/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/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/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/time-range-picker/utils.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getHeight = exports.formatSummaryValue = exports.getDefaultTimeRangePresets = exports.getDateForGivenTimezone = exports.adaptDateWithSystemTz = exports.switchEpochTimezone = exports.getTzOffset = exports.getSystemTzName = exports.getSelectedTimeRange = void 0;
+exports.getRangeError = exports.getHeight = exports.formatSummaryValue = exports.getDefaultTimeRangePresets = exports.getDateForGivenTimezone = exports.adaptDateWithSystemTz = exports.switchEpochTimezone = exports.getTzOffset = exports.getSystemTzName = exports.getSelectedTimeRange = void 0;
 var tslib_1 = require("tslib");
 var constants_1 = require("../date-picker/constants");
 var index_1900_2050_1 = require("timezone-support/dist/index-1900-2050");
 var date_fns_adapter_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-fns-adapter"));
 var date_helpers_1 = (0, tslib_1.__importDefault)(require("baseui/datepicker/utils/date-helpers"));
+var i18n_interpolation_1 = (0, tslib_1.__importDefault)(require("baseui/helpers/i18n-interpolation"));
 var utils_1 = require("../date-picker/utils");
 var constants_2 = require("./constants");
 var getSelectedTimeRange = function (selectedTimeRange, timeRangeOptions) { return timeRangeOptions.find(function (_a) {
@@ -422,3 +423,47 @@ var getHeight = function (_a) {
     return constants_2.CALENDAR_HEIGHT;
 };
 exports.getHeight = getHeight;
+var ERROR_FORMATE_DATE = 'dd MMM, yyyy hh:mm a';
+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 = (0, utils_1.isTimeInRange)(timeRange, { minDate: minDate, maxDate: maxDate, dateHelpers: dateHelpers });
+    if (isValidTimeRange) {
+        return {
+            hasError: false,
+        };
+    }
+    if (minDate && maxDate) {
+        return {
+            hasError: true,
+            errMsg: (0, i18n_interpolation_1.default)(locale.timeRangePicker.minMaxDateErrorMessage, {
+                minDate: dateHelpers.formatDate(minDate, ERROR_FORMATE_DATE),
+                maxDate: dateHelpers.formatDate(maxDate, ERROR_FORMATE_DATE),
+            }),
+        };
+    }
+    if (minDate) {
+        return {
+            hasError: true,
+            errMsg: (0, i18n_interpolation_1.default)(locale.timeRangePicker.minDateErrorMessage, {
+                minDate: dateHelpers.formatDate(minDate, ERROR_FORMATE_DATE),
+            }),
+        };
+    }
+    if (maxDate) {
+        return {
+            hasError: true,
+            errMsg: (0, i18n_interpolation_1.default)(locale.timeRangePicker.maxDateErrorMessage, {
+                maxDate: dateHelpers.formatDate(maxDate, ERROR_FORMATE_DATE),
+            }),
+        };
+    }
+    return {
+        hasError: false,
+    };
+};
+exports.getRangeError = getRangeError;

package/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/time-zone-picker/TimezonePicker.js

@@ -10,8 +10,8 @@ var overrides_1 = require("../overrides");
 var utils_1 = require("./utils");
 var TimezonePicker = function (props) {
     var adaptedProps = (0, context_1.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 = (0, tslib_1.__rest)(adaptedProps, ["onChange", "date", "mapLabels", "value", "overrides"]);
-    var _c = (0, tslib_1.__read)((0, react_1.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 = (0, tslib_1.__rest)(adaptedProps, ["onChange", "date", "mapLabels", "value", "overrides", "size"]);
+    var _d = (0, tslib_1.__read)((0, react_1.useState)(), 2), timezoneId = _d[0], setTimezoneId = _d[1];
     var time = date.getTime();
     var timeZoneList = (0, react_1.useMemo)(function () {
         if (props.timezoneOptions) {
@@ -46,11 +46,9 @@ var TimezonePicker = function (props) {
         setTimezoneId((_a = params.option) === null || _a === void 0 ? void 0 : _a.id);
     }, [onChange, setTimezoneId]);
     var _value = (0, react_1.useMemo)(function () { return (value || timezoneId ? [{ id: value || timezoneId }] : []); }, [value, timezoneId]);
-    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Select, select_1.Select), 2), SelectComp = _d[0], selectProps = _d[1];
+    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Select, select_1.Select), 2), SelectComp = _e[0], selectProps = _e[1];
+    return (
     //@ts-ignore check why `type` is mandatory for select
-    return (0, jsx_runtime_1.jsx)(SelectComp, (0, tslib_1.__assign)({ value: _value, onChange: handleChange, options: timeZoneList }, restProps, selectProps), void 0);
+    (0, jsx_runtime_1.jsx)(SelectComp, (0, tslib_1.__assign)({ value: _value, onChange: handleChange, options: timeZoneList, size: size }, restProps, selectProps), void 0));
 };
 exports.TimezonePicker = TimezonePicker;
-exports.TimezonePicker.defaultProps = {
-    size: 'md',
-};

package/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/tooltip/overrides.js

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

package/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/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/tooltip/stateful-tooltip.js

@@ -9,7 +9,7 @@ var tooltip_1 = (0, tslib_1.__importDefault)(require("./tooltip"));
 var StatefulTooltip = function (props) {
     var children = props.children, size = props.size, label = props.label, _a = props.overrides, overrides = _a === void 0 ? {} : _a, restProps = (0, tslib_1.__rest)(props, ["children", "size", "label", "overrides"]);
     var _overrides = (0, useConvertOverrides_1.useConvertOverrides)(overrides, undefined, [overrides]);
-    return ((0, jsx_runtime_1.jsx)(stateful_tooltip_container_1.default, (0, tslib_1.__assign)({}, restProps, { overrides: _overrides }, { children: function (tooltipProps) { return ((0, jsx_runtime_1.jsx)(tooltip_1.default, (0, tslib_1.__assign)({}, tooltipProps, { size: size, label: label }, { children: children }), void 0)); } }), void 0));
+    return ((0, jsx_runtime_1.jsx)(stateful_tooltip_container_1.default, (0, tslib_1.__assign)({ dismissOnClickOutside: true, dismissOnEsc: true, triggerType: "hover" }, restProps, { overrides: _overrides }, { children: function (tooltipProps) { return ((0, jsx_runtime_1.jsx)(tooltip_1.default, (0, tslib_1.__assign)({}, tooltipProps, { size: size, label: label }, { children: children }), void 0)); } }), void 0));
 };
 StatefulTooltip.displayName = 'StatefulTooltip';
 StatefulTooltip.defaultProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, default_props_1.default), { showArrow: true, focusLock: false, returnFocus: false });

package/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/tooltip/tooltip.js

@@ -21,10 +21,10 @@ var DISABLED_FOCUS_PROPS = {
 // @ts-ignore
 tooltip_1.Tooltip.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 = (0, tslib_1.__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 = (0, tslib_1.__rest)(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement"]);
     var focusLockProps = (0, hooks_1.useFocusLock)({ returnFocus: returnFocus, focusLock: focusLock });
     var sharedProps = { $size: size, $label: !!label };
-    var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Label, styled_component_1.StyledLabel), 2), Label = _g[0], labelProps = _g[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Label, styled_component_1.StyledLabel), 2), Label = _h[0], labelProps = _h[1];
     // add label on top of content
     var contentToDisplay = [];
     if (label) {
@@ -35,14 +35,14 @@ var Tooltip = function (_a) {
     if (typeof children === 'function') {
         childNode = children({ isOpen: isOpen });
     }
-    var _h = (0, hooks_1.useContent)({ content: contentToDisplay }), setContentHost = _h.setContentHost, wrappedContent = _h.wrappedContent;
+    var _j = (0, hooks_1.useContent)({ content: contentToDisplay }), setContentHost = _j.setContentHost, wrappedContent = _j.wrappedContent;
     var _overrides = (0, useConvertOverrides_1.useConvertOverrides)({
         Body: { style: overrides_2.getBodyStyle, props: sharedProps },
         Arrow: { style: overrides_2.getArrowStyle, props: sharedProps },
         Inner: { style: overrides_2.innerStyles, props: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, sharedProps), { ref: setContentHost }) },
     }, overrides, [overrides, size, label, setContentHost]);
     var id = (0, useUniqueId_1.default)();
-    return ((0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_1.Z_INDEX.POPOVER }, { children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, (0, tslib_1.__assign)({ id: id }, restProps, { triggerType: triggerType, isOpen: isOpen, overrides: _overrides, content: wrappedContent }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { children: (0, jsx_runtime_1.jsx)(PopoverEnahncer_1.PopoverChildEnhancer, (0, tslib_1.__assign)({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(layer_1.LayersManager, (0, tslib_1.__assign)({ zIndex: layer_1.Z_INDEX.POPOVER }, { children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, (0, tslib_1.__assign)({ id: id }, restProps, { triggerType: triggerType, isOpen: isOpen, overrides: _overrides, content: wrappedContent, placement: placement }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { children: (0, jsx_runtime_1.jsx)(PopoverEnahncer_1.PopoverChildEnhancer, (0, tslib_1.__assign)({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
 };
 Tooltip.displayName = 'Tooltip';
 exports.default = Tooltip;

package/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';