@sprinklrjs/spaceweb 10.1.0 → 12.14.4

package/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 { 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,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,14 @@
 "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.switchEpochTimezone = exports.getTzOffset = exports.convertDateFromSystemTzToTargetTz = exports.convertDateFromTargetTzToSystemTz = exports.convertDateFromSrcTzToTargetTz = 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 date_fns_1 = require("date-fns");
+var date_fns_tz_1 = require("date-fns-tz");
 var utils_1 = require("../date-picker/utils");
 var constants_2 = require("./constants");
 var getSelectedTimeRange = function (selectedTimeRange, timeRangeOptions) { return timeRangeOptions.find(function (_a) {
@@ -27,6 +30,51 @@ var getSystemTzName = function () {
     return SYSTEM_TIMEZONE;
 };
 exports.getSystemTzName = getSystemTzName;
+/**
+  @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.
+*/
+var convertDateFromSrcTzToTargetTz = function (date, srcTz, targetTz) {
+    if (srcTz === void 0) { srcTz = (0, exports.getSystemTzName)(); }
+    if (targetTz === void 0) { targetTz = (0, exports.getSystemTzName)(); }
+    return +(0, date_fns_tz_1.utcToZonedTime)((0, date_fns_tz_1.zonedTimeToUtc)(date, srcTz), targetTz);
+};
+exports.convertDateFromSrcTzToTargetTz = convertDateFromSrcTzToTargetTz;
+/**
+ * @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
+ */
+var convertDateFromTargetTzToSystemTz = function (date, timezone) {
+    if (timezone === void 0) { timezone = (0, exports.getSystemTzName)(); }
+    return (0, exports.convertDateFromSrcTzToTargetTz)(date, timezone, (0, exports.getSystemTzName)());
+};
+exports.convertDateFromTargetTzToSystemTz = convertDateFromTargetTzToSystemTz;
+/**
+ * @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
+ */
+var convertDateFromSystemTzToTargetTz = function (date, timezone) {
+    if (timezone === void 0) { timezone = (0, exports.getSystemTzName)(); }
+    return (0, exports.convertDateFromSrcTzToTargetTz)(date, (0, exports.getSystemTzName)(), timezone);
+};
+exports.convertDateFromSystemTzToTargetTz = convertDateFromSystemTzToTargetTz;
 /**
  * returns milliseconds offset from timezone name
  */
@@ -38,6 +86,7 @@ var getTzOffset = function (timezone, date) {
 };
 exports.getTzOffset = getTzOffset;
 /**
+ * @deprecated use convertDateFromTargetTzToSystemTz function to make sure you account for DST cases too
  * convert epoch from one timezone to another
  */
 var switchEpochTimezone = function (date, tzFrom, tzTo) {
@@ -49,14 +98,6 @@ var switchEpochTimezone = function (date, tzFrom, tzTo) {
     return +date + offset;
 };
 exports.switchEpochTimezone = switchEpochTimezone;
-/**
- * adapts date with the system timezone
- */
-var adaptDateWithSystemTz = function (date, selectedTimezone) {
-    var timestampInMillis = (0, exports.switchEpochTimezone)(date, selectedTimezone, (0, exports.getSystemTzName)());
-    return new Date(timestampInMillis);
-};
-exports.adaptDateWithSystemTz = adaptDateWithSystemTz;
 /**
  * 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.
@@ -76,8 +117,8 @@ var getDateForGivenTimezone = function (timezone) {
 exports.getDateForGivenTimezone = getDateForGivenTimezone;
 var getDefaultTimeRangePresets = function (locale) {
     var switchTimezoneOfRange = function (startDate, endDate, timezone) { return [
-        new Date((0, exports.switchEpochTimezone)(startDate, (0, exports.getSystemTzName)(), timezone)),
-        new Date((0, exports.switchEpochTimezone)(endDate, (0, exports.getSystemTzName)(), timezone)),
+        new Date((0, exports.convertDateFromTargetTzToSystemTz)(startDate, timezone)),
+        new Date((0, exports.convertDateFromTargetTzToSystemTz)(endDate, timezone)),
     ]; };
     return [
         {
@@ -143,9 +184,7 @@ 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 = (0, exports.getDateForGivenTimezone)(timezone);
-                endDate.setMonth(startDate.getMonth());
-                endDate.setDate(startDate.getDate() + 6);
+                var endDate = (0, date_fns_1.addDays)(startDate, 6);
                 endDate.setHours(23, 59, 59, 999);
                 return switchTimezoneOfRange(startDate, endDate, timezone);
             },
@@ -159,9 +198,7 @@ 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 = (0, exports.getDateForGivenTimezone)(timezone);
-                startDate.setMonth(endDate.getMonth());
-                startDate.setDate(endDate.getDate() - 6);
+                var startDate = (0, date_fns_1.subDays)(endDate, 6);
                 startDate.setHours(0, 0, 0, 0);
                 return switchTimezoneOfRange(startDate, endDate, timezone);
             },
@@ -422,3 +459,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/time-zone-picker/types.d.ts

@@ -22,4 +22,6 @@ export declare type TimezonePickerProps = {
     style?: Styles;
     overrides?: TimezonePickerOverrides;
     size?: Size;
+    clearable?: boolean;
+    placeholder?: string;
 };

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 {
@@ -50,7 +50,6 @@ exports.innerStyles = [
             paddingBottom: theme.padding['2'],
             paddingLeft: theme.padding['3'],
             paddingRight: theme.padding['3'],
-            minWidth: '72px',
             boxSizing: 'border-box',
         };
     },

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

@@ -7,9 +7,9 @@ var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
 var stateful_tooltip_container_1 = (0, tslib_1.__importDefault)(require("./stateful-tooltip-container"));
 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 children = props.children, size = props.size, label = props.label, _a = props.overrides, overrides = _a === void 0 ? {} : _a, viewportAsBoundary = props.viewportAsBoundary, restProps = (0, tslib_1.__rest)(props, ["children", "size", "label", "overrides", "viewportAsBoundary"]);
     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, viewportAsBoundary: viewportAsBoundary }, { 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, popperOptions, ignoreBoundary, viewportAsBoundary, ...restProps }: TooltipProps): ReactElement;
     displayName: string;
 };
 export default Tooltip;

package/tooltip/tooltip.js

@@ -5,6 +5,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 // TODO: baseui/tooltip is using Popover internally which we cannot override
 var tooltip_1 = require("baseui/tooltip");
 var React = (0, tslib_1.__importStar)(require("react"));
+var react_1 = require("react");
 var PopoverEnahncer_1 = require("../popover/PopoverEnahncer");
 var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
 var layer_1 = require("../layer");
@@ -13,6 +14,7 @@ var hooks_1 = require("../popover/hooks");
 var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
 var overrides_2 = require("./overrides");
 var styled_component_1 = require("./styled-component");
+var utils_1 = require("../popover/utils");
 var DISABLED_FOCUS_PROPS = {
     autoFocus: false,
     focusLock: false,
@@ -21,10 +23,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, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, viewportAsBoundary = _a.viewportAsBoundary, restProps = (0, tslib_1.__rest)(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
     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 +37,15 @@ 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));
+    var mergedPopperOptions = (0, react_1.useMemo)(function () { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, utils_1.getPopperOptions)({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
+    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 : {}), { popperOptions: mergedPopperOptions }, { 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,13 @@ export declare type StatefulTooltipProps = Omit<BaseStatefulTooltipProps, 'overr
     children?: React.ReactNode | ((args: {
         isOpen: boolean;
     }) => React.ReactNode);
+    dismissOnClickOutside?: boolean;
+    dismissOnEsc?: boolean;
+    triggerType?: TriggerType;
+    placement?: TetherPlacement;
+    viewportAsBoundary?: boolean;
 } & 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 +53,9 @@ export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'childre
         isOpen: boolean;
     }) => React.ReactNode);
     targetElement?: HTMLElement | null;
+    triggerType?: TriggerType;
+    placement?: TetherPlacement;
+    viewportAsBoundary?: boolean;
 } & DeprecatedProps;
 export type { Placement, TriggerType, AccessibilityType } from '../popover';
 export type { StatefulTooltipContainerProps } from 'baseui/tooltip';