@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

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

@@ -1,19 +1,49 @@
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
 import { Locale } from '../locale';
-import { SizeVariant, TimeRangePreset } from './types';
+import type { FormatSummaryValueOptions, TimeRangePreset } from './types';
 export declare const getSelectedTimeRange: (selectedTimeRange: string | undefined, timeRangeOptions: Array<TimeRangePreset>) => TimeRangePreset | undefined;
 export declare const getSystemTzName: () => string;
+/**
+  @param date: Date object or epoch in source timezone
+  @param srcTz: source timezone
+  @param targetTz: target timezone
+  This function is used to convert the time from one timezone to another timezone.
+  Example use-case of this function
+  Lets say you want to find out what time it will be in New York when it is 6th Nov, 2022 00:00 in Los Angeles.
+  then you can call like:
+  convertDateFromSrcTzToTargetTz(new Date('6 Nov 2022, 00:00'), "America/Los_Angeles", "America/New_York")
+  this function will return 6 Nov 2022, 2:00 because generally NY is 3 hours ahead of LA but at 2:00AM NY will switch to DST
+  and hence it will be not 3:00AM but 2:00AM.
+*/
+export declare const convertDateFromSrcTzToTargetTz: (date: Date | number, srcTz?: string, targetTz?: string) => number;
+/**
+ * @param date Date object or epoch representing the date in particular timezone
+ * @param timezone timezone of the date
+ * @returns epoch of the same time in system timezone
+ * Use case:
+ * Lets say user selects 6 Nov 2022, 00:00 from Time range picker and selects New York timezone.
+ * Now we want to find out what that time represents in our system timezone(Los Angeles) which in given case is 5 Nov 2022, 21:00
+ */
+export declare const convertDateFromTargetTzToSystemTz: (date: Date | number, timezone?: string) => number;
+/**
+ * @param date date in system timezone
+ * @param timezone timezone in which you want to convert this date to
+ * @returns date in that timezone
+ * Use case:
+ * User will come back with 5 Nov 2022, 21:00 but has selected new york timezone so we want to find out
+ * what time it will be in new york when it is 5 Nov 2022, 21:00 in system timezone(Los Angeles), which is
+ * 6 Nov 2022, 00:00
+ */
+export declare const convertDateFromSystemTzToTargetTz: (date: Date | number, timezone?: string) => number;
 /**
  * returns milliseconds offset from timezone name
  */
 export declare const getTzOffset: (timezone: string, date?: number | Date | undefined) => number;
 /**
+ * @deprecated use convertDateFromTargetTzToSystemTz function to make sure you account for DST cases too
  * convert epoch from one timezone to another
  */
 export declare const switchEpochTimezone: (date: Date | number, tzFrom?: string, tzTo?: string) => number;
-/**
- * adapts date with the system timezone
- */
-export declare const adaptDateWithSystemTz: (date: Date, selectedTimezone: string) => Date;
 /**
  * Adds or subtract the offset according to timezone passed so that we can get correct start date and end date in that timezone.
  * ex. Lets say we are in Asia/Kolakata timezone on 19th Feb and time is 12:30 AM, and selected Asia/Kabul timezone and preset as Today.
@@ -23,20 +53,21 @@ 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 getHeight: ({ monthsShown, timeSelect }: {
-    monthsShown?: number | undefined;
-    timeSelect?: boolean | undefined;
-}) => number;
+export declare const formatSummaryValue: ({ date, presetId, presetLabel, timezone, formatString, showFullDateInSummary, showTimezoneInSummary, adapter, locale, hidePresetLabel, displayVariant, }: FormatSummaryValueOptions) => string;
+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;
+};
+export declare const getValidRange: ({ range, minDate, maxDate, dateHelpers, }: {
+    minDate?: Date | null | undefined;
+    maxDate?: Date | null | undefined;
+    range: [Date, Date] | [];
+    dateHelpers: DateHelpers<Date>;
+}) => [Date, Date] | [];

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

@@ -1,9 +1,13 @@
+import { __read, __spreadArray } from "tslib";
 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 { CALENDAR_HEIGHT, CUSTOM_OPTION, TIME_SELECT_ROW_HEIGHT } from './constants';
+import dateFnsAdapter from '../baseui/datepicker/utils/date-fns-adapter';
+import DateHelpers from '../baseui/datepicker/utils/date-helpers';
+import getInterpolatedString from '../baseui/helpers/i18n-interpolation';
+import { subDays, addDays } from 'date-fns';
+import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';
+import { isTimeInRange, normalizeDashes } from '../date-picker/utils';
+import { CUSTOM_OPTION } from './constants';
 export var getSelectedTimeRange = function (selectedTimeRange, timeRangeOptions) { return timeRangeOptions.find(function (_a) {
     var id = _a.id;
     return id === selectedTimeRange;
@@ -21,6 +25,48 @@ export var getSystemTzName = function () {
     }
     return SYSTEM_TIMEZONE;
 };
+/**
+  @param date: Date object or epoch in source timezone
+  @param srcTz: source timezone
+  @param targetTz: target timezone
+  This function is used to convert the time from one timezone to another timezone.
+  Example use-case of this function
+  Lets say you want to find out what time it will be in New York when it is 6th Nov, 2022 00:00 in Los Angeles.
+  then you can call like:
+  convertDateFromSrcTzToTargetTz(new Date('6 Nov 2022, 00:00'), "America/Los_Angeles", "America/New_York")
+  this function will return 6 Nov 2022, 2:00 because generally NY is 3 hours ahead of LA but at 2:00AM NY will switch to DST
+  and hence it will be not 3:00AM but 2:00AM.
+*/
+export var convertDateFromSrcTzToTargetTz = function (date, srcTz, targetTz) {
+    if (srcTz === void 0) { srcTz = getSystemTzName(); }
+    if (targetTz === void 0) { targetTz = getSystemTzName(); }
+    return +utcToZonedTime(zonedTimeToUtc(date, srcTz), targetTz);
+};
+/**
+ * @param date Date object or epoch representing the date in particular timezone
+ * @param timezone timezone of the date
+ * @returns epoch of the same time in system timezone
+ * Use case:
+ * Lets say user selects 6 Nov 2022, 00:00 from Time range picker and selects New York timezone.
+ * Now we want to find out what that time represents in our system timezone(Los Angeles) which in given case is 5 Nov 2022, 21:00
+ */
+export var convertDateFromTargetTzToSystemTz = function (date, timezone) {
+    if (timezone === void 0) { timezone = getSystemTzName(); }
+    return convertDateFromSrcTzToTargetTz(date, timezone, getSystemTzName());
+};
+/**
+ * @param date date in system timezone
+ * @param timezone timezone in which you want to convert this date to
+ * @returns date in that timezone
+ * Use case:
+ * User will come back with 5 Nov 2022, 21:00 but has selected new york timezone so we want to find out
+ * what time it will be in new york when it is 5 Nov 2022, 21:00 in system timezone(Los Angeles), which is
+ * 6 Nov 2022, 00:00
+ */
+export var convertDateFromSystemTzToTargetTz = function (date, timezone) {
+    if (timezone === void 0) { timezone = getSystemTzName(); }
+    return convertDateFromSrcTzToTargetTz(date, getSystemTzName(), timezone);
+};
 /**
  * returns milliseconds offset from timezone name
  */
@@ -31,6 +77,7 @@ export var getTzOffset = function (timezone, date) {
     return ((_b = (_a = zonedTime.zone) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 0) * 60 * 1000;
 };
 /**
+ * @deprecated use convertDateFromTargetTzToSystemTz function to make sure you account for DST cases too
  * convert epoch from one timezone to another
  */
 export var switchEpochTimezone = function (date, tzFrom, tzTo) {
@@ -41,13 +88,6 @@ export var switchEpochTimezone = function (date, tzFrom, tzTo) {
     var offset = tzToOffset - tzFromOffset;
     return +date + offset;
 };
-/**
- * adapts date with the system timezone
- */
-export var adaptDateWithSystemTz = function (date, selectedTimezone) {
-    var timestampInMillis = switchEpochTimezone(date, selectedTimezone, getSystemTzName());
-    return new Date(timestampInMillis);
-};
 /**
  * Adds or subtract the offset according to timezone passed so that we can get correct start date and end date in that timezone.
  * ex. Lets say we are in Asia/Kolakata timezone on 19th Feb and time is 12:30 AM, and selected Asia/Kabul timezone and preset as Today.
@@ -66,8 +106,8 @@ export var getDateForGivenTimezone = function (timezone) {
 };
 export var getDefaultTimeRangePresets = function (locale) {
     var switchTimezoneOfRange = function (startDate, endDate, timezone) { return [
-        new Date(switchEpochTimezone(startDate, getSystemTzName(), timezone)),
-        new Date(switchEpochTimezone(endDate, getSystemTzName(), timezone)),
+        new Date(convertDateFromTargetTzToSystemTz(startDate, timezone)),
+        new Date(convertDateFromTargetTzToSystemTz(endDate, timezone)),
     ]; };
     return [
         {
@@ -133,9 +173,7 @@ export var getDefaultTimeRangePresets = function (locale) {
                 var firstday = date.getDate() - (date.getDay() - 1) - 1;
                 var startDate = new Date(date.setDate(firstday));
                 startDate.setHours(0, 0, 0, 0);
-                var endDate = getDateForGivenTimezone(timezone);
-                endDate.setMonth(startDate.getMonth());
-                endDate.setDate(startDate.getDate() + 6);
+                var endDate = addDays(startDate, 6);
                 endDate.setHours(23, 59, 59, 999);
                 return switchTimezoneOfRange(startDate, endDate, timezone);
             },
@@ -149,9 +187,7 @@ export var getDefaultTimeRangePresets = function (locale) {
                 var lastday = date.getDate() - (date.getDay() - 1) - 2;
                 var endDate = new Date(date.setDate(lastday));
                 endDate.setHours(23, 59, 59, 999);
-                var startDate = getDateForGivenTimezone(timezone);
-                startDate.setMonth(endDate.getMonth());
-                startDate.setDate(endDate.getDate() - 6);
+                var startDate = subDays(endDate, 6);
                 startDate.setHours(0, 0, 0, 0);
                 return switchTimezoneOfRange(startDate, endDate, timezone);
             },
@@ -370,7 +406,6 @@ var formatSummaryForCompactVariant = function (_a) {
     // 13 Apr - 15 May
     return "".concat(dateHelpers.formatDate(date[0], 'dd MMM', locale), " \u2013 ").concat(dateHelpers.formatDate(date[1], 'dd MMM', locale));
 };
-// eslint-disable-next-line max-statements
 export var formatSummaryValue = function (_a) {
     var date = _a.date, presetId = _a.presetId, presetLabel = _a.presetLabel, _b = _a.timezone, timezone = _b === void 0 ? getSystemTzName() : _b, _c = _a.formatString, formatString = _c === void 0 ? DEFAULT_FORMAT_STRING : _c, _d = _a.showFullDateInSummary, showFullDateInSummary = _d === void 0 ? false : _d, _e = _a.showTimezoneInSummary, showTimezoneInSummary = _e === void 0 ? false : _e, _f = _a.adapter, adapter = _f === void 0 ? dateFnsAdapter : _f, locale = _a.locale, _g = _a.hidePresetLabel, hidePresetLabel = _g === void 0 ? false : _g, _h = _a.displayVariant, displayVariant = _h === void 0 ? 'default' : _h;
     var dateHelpers = new DateHelpers(adapter);
@@ -382,7 +417,7 @@ export var formatSummaryValue = function (_a) {
         return '';
     }
     var label = hidePresetLabel ? '' : presetLabel;
-    if (displayVariant === 'compact') {
+    if (displayVariant === 'compact' || displayVariant === 'iconButton') {
         return formatSummaryForCompactVariant({
             adapter: adapter,
             date: date,
@@ -399,13 +434,66 @@ export var formatSummaryValue = function (_a) {
     }
     return label;
 };
-export var getHeight = function (_a) {
-    var monthsShown = _a.monthsShown, timeSelect = _a.timeSelect;
-    if (timeSelect && monthsShown === 1) {
-        return CALENDAR_HEIGHT + 2 * TIME_SELECT_ROW_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,
+    };
+};
+export var getValidRange = function (_a) {
+    var range = _a.range, minDate = _a.minDate, maxDate = _a.maxDate, dateHelpers = _a.dateHelpers;
+    /* 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...
+    */
+    var nextRange = __spreadArray(__spreadArray([], __read((range[0] ? [new Date(range[0].setMilliseconds(0))] : [])), false), __read((range[1] ? [new Date(range[1].setMilliseconds(999))] : [])), false);
+    var originalRange = __spreadArray([], __read(nextRange), false);
+    if (nextRange[0] && minDate) {
+        nextRange[0] = dateHelpers.max([nextRange[0], minDate]);
+    }
+    if (nextRange[1] && maxDate) {
+        nextRange[1] = dateHelpers.min([nextRange[1], maxDate]);
     }
-    if (timeSelect) {
-        return CALENDAR_HEIGHT + TIME_SELECT_ROW_HEIGHT;
+    if (nextRange[0] && nextRange[1] && dateHelpers.isBefore(nextRange[1], nextRange[0])) {
+        return originalRange;
     }
-    return CALENDAR_HEIGHT;
+    return nextRange;
 };

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

@@ -1,15 +1,16 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useCallback, useMemo } from 'react';
+import memoizeOne from 'memoize-one';
 import { Select } from '../select';
 import { useContextualFormProps } from '../form-control/context';
 import { useOverrides } from '../overrides';
 import { buildTimeZones } from './utils';
+import { FALLBACK_TIME_ZONES } from './contants';
+var getMemoizedDate = memoizeOne(function () { return new Date(); });
 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 time = date.getTime();
+    var onChange = adaptedProps.onChange, _a = adaptedProps.date, date = _a === void 0 ? getMemoizedDate() : _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 timeZoneList = useMemo(function () {
         if (props.timezoneOptions) {
             return props.timezoneOptions;
@@ -22,31 +23,12 @@ export var TimezonePicker = function (props) {
             return __assign(__assign({}, timeZone), { label: label });
         });
     }, [date, mapLabels, props.timezoneOptions]);
-    useEffect(function () {
-        if (!value && typeof Intl !== 'undefined') {
-            var selectedTimezone_1 = timezoneId;
-            if (!timezoneId) {
-                selectedTimezone_1 = Intl.DateTimeFormat().resolvedOptions().timeZone;
-                setTimezoneId(selectedTimezone_1);
-            }
-            var timezone = timeZoneList.find(function (_a) {
-                var id = _a.id;
-                return id === selectedTimezone_1;
-            });
-            timezone && (onChange === null || onChange === void 0 ? void 0 : onChange(timezone));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [time]);
     var handleChange = useCallback(function (params) {
-        var _a;
         onChange === null || onChange === void 0 ? void 0 : onChange(params.option);
-        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]);
+    }, [onChange]);
+    var _value = useMemo(function () { return (value ? [{ id: FALLBACK_TIME_ZONES[value] === undefined ? value : FALLBACK_TIME_ZONES[value] }] : []); }, [value]);
     var _d = __read(useOverrides(overrides.Select, Select), 2), SelectComp = _d[0], selectProps = _d[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/time-zone-picker/contants.d.ts

@@ -0,0 +1,3 @@
+export declare const FALLBACK_TIME_ZONES: {
+    HST: string;
+};

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

@@ -0,0 +1,3 @@
+export var FALLBACK_TIME_ZONES = {
+    HST: 'Pacific/Honolulu',
+};

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

@@ -14,7 +14,7 @@ export declare type TimezonePickerProps = {
     date?: Date;
     disabled?: boolean;
     mapLabels?: (args: Option) => React.ReactNode;
-    onChange?: (value: Timezone) => any;
+    onChange?: (value: Timezone | null) => any;
     timezoneOptions?: Timezone[];
     value?: string;
     intent?: Intent;
@@ -22,4 +22,6 @@ export declare type TimezonePickerProps = {
     style?: Styles;
     overrides?: TimezonePickerOverrides;
     size?: Size;
+    clearable?: boolean;
+    placeholder?: string;
 };

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

@@ -1,7 +1,9 @@
 import { findTimeZone, getZonedTime, listTimeZones } from 'timezone-support/dist/index-1900-2050';
 import { formatZonedTime } from 'timezone-support/dist/parse-format';
+import { FALLBACK_TIME_ZONES } from './contants';
 export var buildTimeZones = function (compareDate) {
     return listTimeZones()
+        .filter(function (zone) { return FALLBACK_TIME_ZONES[zone] === undefined; })
         .map(function (zone) {
         var timezone = findTimeZone(zone);
         var zonedTime = getZonedTime(compareDate, timezone);

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

@@ -3,6 +3,33 @@ 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;
+        repositionOnResize?: boolean | undefined;
+        positionFixed?: boolean | undefined;
+    };
 };
 export default DisabledTooltipContainer;

package/esm/tooltip/disabled-tooltip-container.js

@@ -2,7 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import Tooltip from './tooltip';
-import baseDefaultProps from 'baseui/tooltip/default-props';
+import baseDefaultProps from '../baseui/tooltip/default-props';
 import { mergeOverrides } from '../overrides';
 var DisabledTooltipContainer = function (_a) {
     var content = _a.content, children = _a.children, onMouseEnterDelay = _a.onMouseEnterDelay, onMouseLeaveDelay = _a.onMouseLeaveDelay, overrides = _a.overrides, props = __rest(_a, ["content", "children", "onMouseEnterDelay", "onMouseLeaveDelay", "overrides"]);

package/esm/tooltip/overrides.js

@@ -1,7 +1,10 @@
 import { __assign } from "tslib";
-export var getArrowStyle = function (_a) {
+export var getArrowStyle = function (_a, _b) {
     var theme = _a.theme;
-    return ({ backgroundColor: theme.spr.tooltip01 });
+    var $intent = _b.$intent;
+    return ({
+        backgroundColor: $intent === 'ai' ? theme.spr.clrMagenta : theme.spr.tooltip01,
+    });
 };
 export var getBodyStyle = function () { return ({
     backgroundColor: 'transparent',
@@ -30,11 +33,13 @@ 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',
-    function (utils) {
+    'break-words',
+    function (utils, _a) {
+        var $intent = _a.$intent;
         var theme = utils.theme;
+        var isAiIntent = $intent === 'ai';
         return {
-            backgroundColor: theme.spr.tooltip01,
+            backgroundColor: isAiIntent ? theme.spr.clrMagenta : theme.spr.tooltip01,
             color: theme.spr.text06,
             borderTopLeftRadius: theme.borderRadius['4'],
             borderTopRightRadius: theme.borderRadius['4'],
@@ -45,8 +50,8 @@ export var innerStyles = [
             paddingBottom: theme.padding['2'],
             paddingLeft: theme.padding['3'],
             paddingRight: theme.padding['3'],
-            minWidth: '72px',
             boxSizing: 'border-box',
+            width: 'max-content',
         };
     },
     getTypography,

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

@@ -3,6 +3,33 @@ 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;
+        repositionOnResize?: boolean | undefined;
+        positionFixed?: boolean | undefined;
+    };
 };
 export default StatefulContainer;

package/esm/tooltip/stateful-tooltip-container.js

@@ -1,6 +1,6 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import baseDefaultProps from 'baseui/tooltip/default-props';
+import baseDefaultProps from '../baseui/tooltip/default-props';
 import { StatefulContainer as StatefulPopoverContainer } from '../popover';
 var StatefulContainer = function (props) { return (_jsx(StatefulPopoverContainer, __assign({}, props), void 0)); };
 StatefulContainer.displayName = 'StatefulContainer';

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

@@ -1,8 +1,36 @@
+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;
+        repositionOnResize?: boolean | undefined;
+        positionFixed?: boolean | undefined;
+    };
 };
 export default StatefulTooltip;

package/esm/tooltip/stateful-tooltip.js

@@ -1,13 +1,11 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import defaultProps from 'baseui/tooltip/default-props';
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
+import defaultProps from '../baseui/tooltip/default-props';
 import StatefulContainer from './stateful-tooltip-container';
 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));
+    var children = props.children, size = props.size, label = props.label, _a = props.overrides, overrides = _a === void 0 ? {} : _a, viewportAsBoundary = props.viewportAsBoundary, intent = props.intent, restProps = __rest(props, ["children", "size", "label", "overrides", "viewportAsBoundary", "intent"]);
+    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, viewportAsBoundary: viewportAsBoundary, intent: intent }, { children: children }), void 0)); } }), void 0));
 };
 StatefulTooltip.displayName = 'StatefulTooltip';
 StatefulTooltip.defaultProps = __assign(__assign({}, defaultProps), { showArrow: true, focusLock: false, returnFocus: false });

package/esm/tooltip/styled-component.d.ts

@@ -1,2 +1,2 @@
-export { StyledBody, StyledArrow, StyledInner } from 'baseui/tooltip';
+export { StyledBody, StyledArrow, StyledInner } from '../baseui/tooltip';
 export declare const StyledLabel: import("../style/styled").StyledComponent;

package/esm/tooltip/styled-component.js

@@ -1,3 +1,3 @@
 import styled from '../style/styled';
-export { StyledBody, StyledArrow, StyledInner } from 'baseui/tooltip';
+export { StyledBody, StyledArrow, StyledInner } from '../baseui/tooltip';
 export var StyledLabel = styled('div', 'spr-text-02 mb-1 typography-l1 font-medium self-start');

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, popperOptions, ignoreBoundary, viewportAsBoundary, intent, ...restProps }: TooltipProps): ReactElement;
     displayName: string;
 };
 export default Tooltip;