@sprinklrjs/spaceweb 11.0.0 → 12.14.4

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

@@ -4,13 +4,15 @@ import { useMemo, useCallback } from 'react';
 import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
 import DateHelpers from 'baseui/datepicker/utils/date-helpers';
 import RangeSelectorContainer from './RangeSelectorContainer';
-import { getSelectedTimeRange, getSystemTzName, getDefaultTimeRangePresets, switchEpochTimezone, adaptDateWithSystemTz, formatSummaryValue, } from './utils';
+import { getSelectedTimeRange, getSystemTzName, getDefaultTimeRangePresets, convertDateFromTargetTzToSystemTz, convertDateFromSystemTzToTargetTz, formatSummaryValue, } from './utils';
 import { useDatePickerState, StatelessDatePicker } from '../date-picker';
 import { useLocale } from '../locale';
 import { DEFAULT_FORMAT_STRING } from '../date-picker/constants';
 import { mergeOverrides } from '../overrides';
 import { normalizeDashes, prepareLocale } from '../date-picker/utils';
 import { CUSTOM_OPTION } from './constants';
+import { IconButton } from '../button';
+import BaseCalendarIcon from '../icon/components/calendar-solid';
 var __DEV__ = process.env.NODE_ENV !== 'production';
 export var TimeRangePicker = function (_a) {
     var _b = _a.adapter, adapter = _b === void 0 ? dateFnsAdapter : _b, onSubmit = _a.onSubmit, _timezone = _a.timezone, value = _a.value, formatDisplayValue = _a.formatDisplayValue, timeRangePresets = _a.timeRangePresets, overrides = _a.overrides, timeSelect = _a.timeSelect, peekNextMonth = _a.peekNextMonth, excludeDates = _a.excludeDates, filterDate = _a.filterDate, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.placeholder, placeholder = _c === void 0 ? "".concat(DEFAULT_FORMAT_STRING, "-").concat(DEFAULT_FORMAT_STRING) : _c, _d = _a.formatString, formatString = _d === void 0 ? DEFAULT_FORMAT_STRING : _d, onClose = _a.onClose, onChange = _a.onChange, showTimezoneInSummary = _a.showTimezoneInSummary, clearable = _a.clearable, onClear = _a.onClear, showFullDateInSummary = _a.showFullDateInSummary, autoSizeInput = _a.autoSizeInput, preset = _a.preset, _e = _a.startOpen, startOpen = _e === void 0 ? false : _e, fixedHeight = _a.fixedHeight, _f = _a.monthsShown, monthsShown = _f === void 0 ? 2 : _f, weekStartsOn = _a.weekStartsOn, _g = _a.disableTimezone, disableTimezone = _g === void 0 ? false : _g, _h = _a.displayVariant, displayVariant = _h === void 0 ? 'default' : _h, props = __rest(_a, ["adapter", "onSubmit", "timezone", "value", "formatDisplayValue", "timeRangePresets", "overrides", "timeSelect", "peekNextMonth", "excludeDates", "filterDate", "minDate", "maxDate", "placeholder", "formatString", "onClose", "onChange", "showTimezoneInSummary", "clearable", "onClear", "showFullDateInSummary", "autoSizeInput", "preset", "startOpen", "fixedHeight", "monthsShown", "weekStartsOn", "disableTimezone", "displayVariant"]);
@@ -41,9 +43,8 @@ export var TimeRangePicker = function (_a) {
     ], false); }, [timeRangePresets, locale]);
     var formatDate = useCallback(function (date, normalizedFormatString) {
         if (normalizedFormatString === void 0) { normalizedFormatString = normalizeDashes(formatString); }
-        var adaptedSystemTz = new Date(switchEpochTimezone(date, timezone, getSystemTzName()));
-        return dateHelpers.formatDate(adaptedSystemTz, normalizedFormatString, dateFnsLocale);
-    }, [formatString, dateHelpers, timezone, dateFnsLocale]);
+        return dateHelpers.formatDate(date, normalizedFormatString, dateFnsLocale);
+    }, [formatString, dateHelpers, dateFnsLocale]);
     var defaultFormatDisplayValue = useCallback(function (date, normalizedFormatString) {
         var _a, _b;
         if (normalizedFormatString === void 0) { normalizedFormatString = normalizeDashes(formatString); }
@@ -97,8 +98,8 @@ export var TimeRangePicker = function (_a) {
         var timeRange = _a.timeRange, preset = _a.preset, timezone = _a.timezone;
         // value is returned only for backward compatibility will be removed in future version.
         if (preset === 'CUSTOM') {
-            var startMillis = switchEpochTimezone(timeRange[0], getSystemTzName(), timezone);
-            var endMillis = switchEpochTimezone(timeRange[1], getSystemTzName(), timezone);
+            var startMillis = convertDateFromTargetTzToSystemTz(timeRange[0], timezone);
+            var endMillis = convertDateFromTargetTzToSystemTz(timeRange[1], timezone);
             var dates = [new Date(startMillis), new Date(endMillis)];
             onSubmit(__assign({ value: dates, preset: preset, date: dates }, (disableTimezone ? {} : { timezone: timezone })));
         }
@@ -117,12 +118,18 @@ export var TimeRangePicker = function (_a) {
         else {
             dates = (_c = (_b = (_a = getSelectedTimeRange(preset !== null && preset !== void 0 ? preset : value, timeRangeList)) === null || _a === void 0 ? void 0 : _a.getTimeRangeLimits) === null || _b === void 0 ? void 0 : _b.call(_a, timezone)) !== null && _c !== void 0 ? _c : [];
         }
-        return __spreadArray(__spreadArray([], __read((dates[0] ? [adaptDateWithSystemTz(dates[0], timezone)] : [])), false), __read((dates[1] ? [adaptDateWithSystemTz(dates[1], timezone)] : [])), false);
+        return __spreadArray(__spreadArray([], __read((dates[0] ? [new Date(convertDateFromSystemTzToTargetTz(dates[0], timezone))] : [])), false), __read((dates[1] ? [new Date(convertDateFromSystemTzToTargetTz(dates[1], timezone))] : [])), false);
     }, [value, timeRangeList, timezone, preset]);
     var mergedOverrides = useMemo(function () {
         return mergeOverrides({
-            Input: {
-                props: {
+            Input: __assign(__assign({}, (displayVariant === 'iconButton'
+                ? {
+                    component: function () { return (_jsx(IconButton, __assign({ tooltipContent: locale.calendar.calendarButtonAriaLabel, size: props.size, bordered: true, shape: "square" }, { children: _jsx(BaseCalendarIcon, {}, void 0) }), void 0)); },
+                    Before: {
+                        component: function () { return null; },
+                    },
+                }
+                : {})), { props: {
                     overrides: __assign({}, (displayVariant === 'compact'
                         ? {
                             Before: {
@@ -130,8 +137,7 @@ export var TimeRangePicker = function (_a) {
                             },
                         }
                         : {})),
-                },
-            },
+                } }),
             InputWrapper: {
                 props: {
                     'data-testid': 'time-range',
@@ -175,6 +181,8 @@ export var TimeRangePicker = function (_a) {
         disableTimezone,
         locale.timeRangePicker.popoverAriaLabel,
         displayVariant,
+        locale.calendar.calendarButtonAriaLabel,
+        props.size,
     ]);
     var handleInputChange = useCallback(function (_a) {
         var _b = _a.value, _value = _b === void 0 ? [] : _b;
@@ -183,5 +191,5 @@ export var TimeRangePicker = function (_a) {
         onSubmit(__assign({ value: _value, preset: 'CUSTOM', date: _value }, (disableTimezone ? {} : { timezone: timezone })));
         onClear === null || onClear === void 0 ? void 0 : onClear();
     }, [onSubmit, timezone, onClear, disableTimezone]);
-    return (_jsx(StatelessDatePicker, { value: timeRange, isOpen: isOpen, onFocus: handleOpen, onBlur: handleClose, formatDisplayValue: defaultFormatDisplayValue, trapTabbing: false, intent: props.intent, variant: props.variant, size: props.size, disabled: props.disabled, formatString: formatString, placeholder: placeholder, "aria-label": locale.timeRangePicker.ariaLabelRange, overrides: mergedOverrides, clearable: clearable, onChange: handleInputChange, autoSizeInput: autoSizeInput, locale: dateFnsLocale, mountNode: props.mountNode, minDate: minDate, maxDate: maxDate }, void 0));
+    return (_jsx(StatelessDatePicker, { value: timeRange, isOpen: isOpen, onFocus: handleOpen, onBlur: handleClose, formatDisplayValue: defaultFormatDisplayValue, trapTabbing: false, intent: props.intent, variant: props.variant, size: props.size, disabled: props.disabled, formatString: formatString, placeholder: placeholder, "aria-label": locale.timeRangePicker.ariaLabelRange, overrides: mergedOverrides, clearable: clearable, onChange: handleInputChange, autoSizeInput: autoSizeInput, locale: dateFnsLocale, mountNode: props.mountNode, minDate: minDate, maxDate: maxDate, "aria-describedby": props['aria-describedby'], "aria-labelledby": props['aria-labelledby'], required: props.required, id: props.id }, void 0));
 };

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

@@ -1,4 +1,4 @@
 export { TimeRangePicker } from './TimeRangePicker';
-export { getDefaultTimeRangePresets, formatSummaryValue } from './utils';
+export { getDefaultTimeRangePresets, formatSummaryValue, convertDateFromSrcTzToTargetTz, convertDateFromSystemTzToTargetTz, convertDateFromTargetTzToSystemTz, } from './utils';
 export type { TimeRangePickerLocale } from './locale';
 export type { TimeRangePickerValue, TimeRangePickerProps, TimeRangePreset, TimeRangePickerOverrides, FormatString, } from './types';

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

@@ -1,2 +1,2 @@
 export { TimeRangePicker } from './TimeRangePicker';
-export { getDefaultTimeRangePresets, formatSummaryValue } from './utils';
+export { getDefaultTimeRangePresets, formatSummaryValue, convertDateFromSrcTzToTargetTz, convertDateFromSystemTzToTargetTz, convertDateFromTargetTzToSystemTz, } from './utils';

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

@@ -39,7 +39,7 @@ export declare type TimeRangePickerValue = {
     timezone?: string;
 };
 declare type Preset = string;
-export declare type SizeVariant = 'default' | 'compact';
+export declare type SizeVariant = 'default' | 'compact' | 'iconButton';
 export declare type FormatSummaryValueOptions = {
     date: Date[];
     presetId: string;
@@ -60,7 +60,6 @@ export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value
      */
     value?: Preset | Date[];
     preset?: Preset;
-    timezone?: string;
     timeRangePresets?: TimeRangePreset[];
     onSubmit: (timeRangePickerValue: TimeRangePickerValue) => void;
     overrides?: TimeRangePickerOverrides;

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

@@ -3,18 +3,47 @@ import { Locale } from '../locale';
 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.

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

@@ -3,6 +3,8 @@ import { findTimeZone, getZonedTime } from 'timezone-support/dist/index-1900-205
 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 { CALENDAR_HEIGHT, CUSTOM_OPTION, TIME_SELECT_ROW_HEIGHT } from './constants';
 export var getSelectedTimeRange = function (selectedTimeRange, timeRangeOptions) { return timeRangeOptions.find(function (_a) {
@@ -22,6 +24,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
  */
@@ -32,6 +76,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) {
@@ -42,13 +87,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.
@@ -67,8 +105,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 [
         {
@@ -134,9 +172,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);
             },
@@ -150,9 +186,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);
             },

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

@@ -45,7 +45,6 @@ export var innerStyles = [
             paddingBottom: theme.padding['2'],
             paddingLeft: theme.padding['3'],
             paddingRight: theme.padding['3'],
-            minWidth: '72px',
             boxSizing: 'border-box',
         };
     },

package/esm/tooltip/stateful-tooltip.js

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

package/esm/tooltip/tooltip.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { TooltipProps } from './types';
 declare const Tooltip: {
-    ({ size, label, content, overrides, children, targetElement, isOpen, triggerType, returnFocus, focusLock, placement, ...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/esm/tooltip/tooltip.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // TODO: baseui/tooltip is using Popover internally which we cannot override
 import { Tooltip as BaseTooltip } from 'baseui/tooltip';
 import * as React from 'react';
+import { useMemo } from 'react';
 import { PopoverChildEnhancer } from '../popover/PopoverEnahncer';
 import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { LayersManager, Z_INDEX } from '../layer';
@@ -11,6 +12,7 @@ import { useFocusLock, useContent } from '../popover/hooks';
 import useUniqueId from '../hooks/useUniqueId';
 import { getArrowStyle, getBodyStyle, innerStyles } from './overrides';
 import { StyledLabel } from './styled-component';
+import { getPopperOptions } from '../popover/utils';
 var DISABLED_FOCUS_PROPS = {
     autoFocus: false,
     focusLock: false,
@@ -19,7 +21,7 @@ var DISABLED_FOCUS_PROPS = {
 // @ts-ignore
 BaseTooltip.displayName = 'BaseUITooltip';
 var Tooltip = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, label = _a.label, content = _a.content, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, children = _a.children, targetElement = _a.targetElement, isOpen = _a.isOpen, _d = _a.triggerType, triggerType = _d === void 0 ? 'hover' : _d, _e = _a.returnFocus, returnFocus = _e === void 0 ? triggerType === 'click' : _e, _f = _a.focusLock, focusLock = _f === void 0 ? false : _f, _g = _a.placement, placement = _g === void 0 ? 'auto' : _g, restProps = __rest(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement"]);
+    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 = __rest(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement", "popperOptions", "ignoreBoundary", "viewportAsBoundary"]);
     var focusLockProps = useFocusLock({ returnFocus: returnFocus, focusLock: focusLock });
     var sharedProps = { $size: size, $label: !!label };
     var _h = __read(useOverrides(overrides.Label, StyledLabel), 2), Label = _h[0], labelProps = _h[1];
@@ -40,7 +42,8 @@ var Tooltip = function (_a) {
         Inner: { style: innerStyles, props: __assign(__assign({}, sharedProps), { ref: setContentHost }) },
     }, overrides, [overrides, size, label, setContentHost]);
     var id = useUniqueId();
-    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BaseTooltip, __assign({ id: id }, restProps, { triggerType: triggerType, isOpen: isOpen, overrides: _overrides, content: wrappedContent, placement: placement }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    var mergedPopperOptions = useMemo(function () { return (__assign(__assign({}, getPopperOptions({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
+    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BaseTooltip, __assign({ id: id }, restProps, { triggerType: triggerType, isOpen: isOpen, overrides: _overrides, content: wrappedContent, placement: placement }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { popperOptions: mergedPopperOptions }, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
 };
 Tooltip.displayName = 'Tooltip';
 export default Tooltip;

package/esm/tooltip/types.d.ts

@@ -39,6 +39,7 @@ export declare type StatefulTooltipProps = Omit<BaseStatefulTooltipProps, 'overr
     dismissOnEsc?: boolean;
     triggerType?: TriggerType;
     placement?: TetherPlacement;
+    viewportAsBoundary?: boolean;
 } & DeprecatedProps;
 export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus' | 'triggerType' | 'placement'> & {
     overrides?: {
@@ -54,6 +55,7 @@ export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'childre
     targetElement?: HTMLElement | null;
     triggerType?: TriggerType;
     placement?: TetherPlacement;
+    viewportAsBoundary?: boolean;
 } & DeprecatedProps;
 export type { Placement, TriggerType, AccessibilityType } from '../popover';
 export type { StatefulTooltipContainerProps } from 'baseui/tooltip';

package/esm/types.d.ts

@@ -60,7 +60,7 @@ export declare type Variant = 'primary' | 'secondary' | 'tertiary' | 'minimal';
 /**
  * Size Options
  */
-export declare type Size = 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type Size = 'xxxxs' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Intent Options
  */
@@ -77,6 +77,7 @@ export declare type Px2Rem = (px: number | string) => string;
  * `useStyle` return type
  */
 export declare type StyleUtils = ThemeContext & {
+    isRTL?: boolean;
     css: CSSFunc;
     getStyle: GetStyle;
     px2rem: Px2Rem;

package/esm/typography/Typography.js

@@ -17,9 +17,22 @@ var defaultVariantToHTMLTagMapping = {
     bl1: 'p',
     bl2: 'p',
     bl3: 'p',
+    'body-8': 'span',
+    'body-10': 'span',
+    'body-12': 'span',
+    'body-13': 'span',
+    'body-14': 'span',
+    'body-16': 'span',
+    'display-18': 'h6',
+    'display-20': 'h5',
+    'display-24': 'h4',
+    'display-28': 'h3',
+    'display-32': 'h2',
+    'display-40': 'h1',
+    'display-42': 'h1',
 };
 var Typography = forwardRef(function (_a, ref) {
-    var $as = _a.$as, _b = _a.variant, variant = _b === void 0 ? 'l1' : _b, weight = _a.weight, restProps = __rest(_a, ["$as", "variant", "weight"]);
+    var $as = _a.$as, _b = _a.variant, variant = _b === void 0 ? 'body-14' : _b, weight = _a.weight, restProps = __rest(_a, ["$as", "variant", "weight"]);
     var sharedProps = add$props({ variant: variant, weight: weight });
     return (_jsx(StyledTypography, __assign({ ref: ref, "data-spaceweb": "typography-".concat(variant), "$as": $as || defaultVariantToHTMLTagMapping[variant] }, restProps, sharedProps), void 0));
 });

package/esm/typography/constants.d.ts

@@ -4,3 +4,59 @@ export declare const WEIGHT: Readonly<{
     semibold: number;
     bold: number;
 }>;
+export declare const DEFAULT_BODY_WEIGHT = 400;
+export declare const DEFAULT_DISPLAY_WEIGHT = 600;
+export declare const TYPOGRAPHY_VARIANT_MAP: {
+    'body-8': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-10': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-12': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-13': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-14': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-16': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-18': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-20': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-24': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-28': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-32': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-40': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-42': {
+        fontSize: string;
+        lineHeight: string;
+    };
+};

package/esm/typography/constants.js

@@ -4,3 +4,59 @@ export var WEIGHT = Object.freeze({
     semibold: 600,
     bold: 700,
 });
+export var DEFAULT_BODY_WEIGHT = 400;
+export var DEFAULT_DISPLAY_WEIGHT = 600;
+export var TYPOGRAPHY_VARIANT_MAP = {
+    'body-8': {
+        fontSize: '8px',
+        lineHeight: '10px',
+    },
+    'body-10': {
+        fontSize: '10px',
+        lineHeight: '12px',
+    },
+    'body-12': {
+        fontSize: '12px',
+        lineHeight: '15px',
+    },
+    'body-13': {
+        fontSize: '13px',
+        lineHeight: '16px',
+    },
+    'body-14': {
+        fontSize: '14px',
+        lineHeight: '18px',
+    },
+    'body-16': {
+        fontSize: '16px',
+        lineHeight: '20px',
+    },
+    'display-18': {
+        fontSize: '18px',
+        lineHeight: '24px',
+    },
+    'display-20': {
+        fontSize: '20px',
+        lineHeight: '26px',
+    },
+    'display-24': {
+        fontSize: '24px',
+        lineHeight: '34px',
+    },
+    'display-28': {
+        fontSize: '28px',
+        lineHeight: '34px',
+    },
+    'display-32': {
+        fontSize: '32px',
+        lineHeight: '38px',
+    },
+    'display-40': {
+        fontSize: '40px',
+        lineHeight: '46px',
+    },
+    'display-42': {
+        fontSize: '42px',
+        lineHeight: '48px',
+    },
+};

package/esm/typography/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Typography } from './Typography';
+export { TYPOGRAPHY_VARIANT_MAP } from './constants';
 export type { TypographyProps, FontWeight, TypographyVariant } from './types';

package/esm/typography/index.js

@@ -1 +1,2 @@
 export { default as Typography } from './Typography';
+export { TYPOGRAPHY_VARIANT_MAP } from './constants';

package/esm/typography/styled-components.js

@@ -1,10 +1,18 @@
 import { styled } from '../style';
-import { WEIGHT as WeightAlias } from './constants';
+import { WEIGHT as WeightAlias, TYPOGRAPHY_VARIANT_MAP, DEFAULT_BODY_WEIGHT, DEFAULT_DISPLAY_WEIGHT, } from './constants';
+var getTypographyWeight = function ($variant) {
+    return $variant.includes('body')
+        ? DEFAULT_BODY_WEIGHT
+        : $variant.includes('display')
+            ? DEFAULT_DISPLAY_WEIGHT
+            : WeightAlias.regular;
+};
 export var StyledTypography = styled('span', function (_a, _b) {
-    var theme = _a.theme;
+    var _c, _d;
+    var theme = _a.theme, classes = _a.classes;
     var $variant = _b.$variant, $weight = _b.$weight;
-    var variantStyles = theme.typography[$variant] || theme.typography.l3;
+    var variantStyles = (_d = (_c = TYPOGRAPHY_VARIANT_MAP[$variant]) !== null && _c !== void 0 ? _c : theme.typography[$variant]) !== null && _d !== void 0 ? _d : theme.typography['l1'];
     var fontSize = variantStyles.fontSize, lineHeight = variantStyles.lineHeight, variantFontWeight = variantStyles.fontWeight;
-    var fontWeight = $weight ? "".concat(WeightAlias[$weight]) : variantFontWeight;
+    var fontWeight = $weight ? "".concat(WeightAlias[$weight]) : variantFontWeight !== null && variantFontWeight !== void 0 ? variantFontWeight : getTypographyWeight($variant);
     return { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight };
 });

package/esm/typography/types.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { SpacewebComponentProps } from '../types';
-export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'bl1' | 'bl2' | 'bl3' | 'bs1' | 'bs2' | 'bs3' | 'l1' | 'l2' | 'l3' | 'l4';
+export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'bl1' | 'bl2' | 'bl3' | 'bs1' | 'bs2' | 'bs3' | 'l1' | 'l2' | 'l3' | 'l4' | 'body-8' | 'body-10' | 'body-12' | 'body-13' | 'body-14' | 'body-16' | 'display-18' | 'display-20' | 'display-24' | 'display-28' | 'display-32' | 'display-40' | 'display-42';
 export declare type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 export declare type TypographyProps = PropsWithChildren<SpacewebComponentProps> & {
     /** variant of typography element */

package/esm/utils/intlNumberFormatUtils/index.d.ts

@@ -0,0 +1,7 @@
+import { NumberVariant } from './types';
+export declare const getFormattedNumber: ({ value, locale, variant, numberOptions, }: {
+    value: number;
+    locale: string;
+    variant: NumberVariant;
+    numberOptions?: Intl.NumberFormatOptions | undefined;
+}) => string;

package/esm/utils/intlNumberFormatUtils/index.js

@@ -0,0 +1,36 @@
+import { __assign } from "tslib";
+import { NUMBER_VARIANTS } from './types';
+export var getFormattedNumber = function (_a) {
+    var value = _a.value, locale = _a.locale, variant = _a.variant, numberOptions = _a.numberOptions;
+    var absValue = Math.abs(value);
+    var betweenZeroAndOne = absValue > 0 && absValue < 1;
+    var maximumFractionDigits, notation;
+    switch (variant.type) {
+        case NUMBER_VARIANTS.EXPANDED_AUTO_FORMAT: {
+            var decimalDigits = betweenZeroAndOne ? 4 : 2;
+            maximumFractionDigits = decimalDigits;
+            notation = 'standard';
+            break;
+        }
+        case NUMBER_VARIANTS.EXPANDED_DECIMAL_FORMAT: {
+            maximumFractionDigits = variant.decimalDigits;
+            notation = 'standard';
+            break;
+        }
+        case NUMBER_VARIANTS.COMPACT_AUTO_FORMAT: {
+            var decimalDigits = betweenZeroAndOne ? 4 : 2;
+            maximumFractionDigits = decimalDigits;
+            notation = 'compact';
+            break;
+        }
+        case NUMBER_VARIANTS.COMPACT_DECIMAL_FORMAT: {
+            maximumFractionDigits = variant.decimalDigits;
+            notation = 'compact';
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return Intl.NumberFormat(locale, __assign({ minimumFractionDigits: 0, maximumFractionDigits: maximumFractionDigits, notation: notation }, numberOptions)).format(value);
+};