@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/time-range-picker/utils.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRangeError = exports.getHeight = exports.formatSummaryValue = exports.getDefaultTimeRangePresets = exports.getDateForGivenTimezone = exports.adaptDateWithSystemTz = exports.switchEpochTimezone = exports.getTzOffset = exports.getSystemTzName = exports.getSelectedTimeRange = void 0;
+exports.getValidRange = exports.getRangeError = 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_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) {
@@ -28,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
  */
@@ -39,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) {
@@ -50,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.
@@ -77,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 [
         {
@@ -144,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);
             },
@@ -160,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);
             },
@@ -382,7 +418,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
 var formatSummaryValue = function (_a) {
     var date = _a.date, presetId = _a.presetId, presetLabel = _a.presetLabel, _b = _a.timezone, timezone = _b === void 0 ? (0, exports.getSystemTzName)() : _b, _c = _a.formatString, formatString = _c === void 0 ? constants_1.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 ? date_fns_adapter_1.default : _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 date_helpers_1.default(adapter);
@@ -394,7 +429,7 @@ var formatSummaryValue = function (_a) {
         return '';
     }
     var label = hidePresetLabel ? '' : presetLabel;
-    if (displayVariant === 'compact') {
+    if (displayVariant === 'compact' || displayVariant === 'iconButton') {
         return formatSummaryForCompactVariant({
             adapter: adapter,
             date: date,
@@ -412,17 +447,6 @@ var formatSummaryValue = function (_a) {
     return label;
 };
 exports.formatSummaryValue = formatSummaryValue;
-var getHeight = function (_a) {
-    var monthsShown = _a.monthsShown, timeSelect = _a.timeSelect;
-    if (timeSelect && monthsShown === 1) {
-        return constants_2.CALENDAR_HEIGHT + 2 * constants_2.TIME_SELECT_ROW_HEIGHT;
-    }
-    if (timeSelect) {
-        return constants_2.CALENDAR_HEIGHT + constants_2.TIME_SELECT_ROW_HEIGHT;
-    }
-    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;
@@ -467,3 +491,24 @@ var getRangeError = function (_a) {
     };
 };
 exports.getRangeError = getRangeError;
+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 = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((range[0] ? [new Date(range[0].setMilliseconds(0))] : [])), false), (0, tslib_1.__read)((range[1] ? [new Date(range[1].setMilliseconds(999))] : [])), false);
+    var originalRange = (0, tslib_1.__spreadArray)([], (0, tslib_1.__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 (nextRange[0] && nextRange[1] && dateHelpers.isBefore(nextRange[1], nextRange[0])) {
+        return originalRange;
+    }
+    return nextRange;
+};
+exports.getValidRange = getValidRange;

package/time-zone-picker/TimezonePicker.js

@@ -4,15 +4,16 @@ exports.TimezonePicker = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var memoize_one_1 = (0, tslib_1.__importDefault)(require("memoize-one"));
 var select_1 = require("../select");
 var context_1 = require("../form-control/context");
 var overrides_1 = require("../overrides");
 var utils_1 = require("./utils");
+var contants_1 = require("./contants");
+var getMemoizedDate = (0, memoize_one_1.default)(function () { return new Date(); });
 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, _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 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 = (0, tslib_1.__rest)(adaptedProps, ["onChange", "date", "mapLabels", "value", "overrides", "size"]);
     var timeZoneList = (0, react_1.useMemo)(function () {
         if (props.timezoneOptions) {
             return props.timezoneOptions;
@@ -25,28 +26,11 @@ var TimezonePicker = function (props) {
             return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, timeZone), { label: label });
         });
     }, [date, mapLabels, props.timezoneOptions]);
-    (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(function () { return (value || timezoneId ? [{ id: value || timezoneId }] : []); }, [value, timezoneId]);
-    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Select, select_1.Select), 2), SelectComp = _e[0], selectProps = _e[1];
+    }, [onChange]);
+    var _value = (0, react_1.useMemo)(function () { return (value ? [{ id: contants_1.FALLBACK_TIME_ZONES[value] === undefined ? value : contants_1.FALLBACK_TIME_ZONES[value] }] : []); }, [value]);
+    var _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Select, select_1.Select), 2), SelectComp = _d[0], selectProps = _d[1];
     return (
     //@ts-ignore check why `type` is mandatory for select
     (0, jsx_runtime_1.jsx)(SelectComp, (0, tslib_1.__assign)({ value: _value, onChange: handleChange, options: timeZoneList, size: size }, restProps, selectProps), void 0));

package/time-zone-picker/contants.d.ts

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

package/time-zone-picker/contants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FALLBACK_TIME_ZONES = void 0;
+exports.FALLBACK_TIME_ZONES = {
+    HST: 'Pacific/Honolulu',
+};

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

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildTimeZones = void 0;
 var index_1900_2050_1 = require("timezone-support/dist/index-1900-2050");
 var parse_format_1 = require("timezone-support/dist/parse-format");
+var contants_1 = require("./contants");
 var buildTimeZones = function (compareDate) {
     return (0, index_1900_2050_1.listTimeZones)()
+        .filter(function (zone) { return contants_1.FALLBACK_TIME_ZONES[zone] === undefined; })
         .map(function (zone) {
         var timezone = (0, index_1900_2050_1.findTimeZone)(zone);
         var zonedTime = (0, index_1900_2050_1.getZonedTime)(compareDate, timezone);

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

@@ -21,13 +21,15 @@ declare const DisabledTooltipContainer: {
         onMouseEnterDelay?: number | undefined;
         onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
         onMouseLeaveDelay?: number | undefined;
-        overrides?: import("baseui/popover").PopoverOverrides | 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/tooltip/disabled-tooltip-container.js

@@ -4,7 +4,7 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var React = (0, tslib_1.__importStar)(require("react"));
 var tooltip_1 = (0, tslib_1.__importDefault)(require("./tooltip"));
-var default_props_1 = (0, tslib_1.__importDefault)(require("baseui/tooltip/default-props"));
+var default_props_1 = (0, tslib_1.__importDefault)(require("../baseui/tooltip/default-props"));
 var overrides_1 = require("../overrides");
 var DisabledTooltipContainer = function (_a) {
     var content = _a.content, children = _a.children, onMouseEnterDelay = _a.onMouseEnterDelay, onMouseLeaveDelay = _a.onMouseLeaveDelay, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["content", "children", "onMouseEnterDelay", "onMouseLeaveDelay", "overrides"]);

package/tooltip/overrides.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.innerStyles = exports.getBodyStyle = exports.getArrowStyle = void 0;
 var tslib_1 = require("tslib");
-var getArrowStyle = function (_a) {
+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,
+    });
 };
 exports.getArrowStyle = getArrowStyle;
 var getBodyStyle = function () { return ({
@@ -36,10 +39,12 @@ var getTypography = function (_a, _b) {
 };
 exports.innerStyles = [
     'break-words',
-    function (utils) {
+    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'],
@@ -50,8 +55,8 @@ exports.innerStyles = [
             paddingBottom: theme.padding['2'],
             paddingLeft: theme.padding['3'],
             paddingRight: theme.padding['3'],
-            minWidth: '72px',
             boxSizing: 'border-box',
+            width: 'max-content',
         };
     },
     getTypography,

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

@@ -21,13 +21,15 @@ declare const StatefulContainer: {
         onMouseEnterDelay?: number | undefined;
         onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
         onMouseLeaveDelay?: number | undefined;
-        overrides?: import("baseui/popover").PopoverOverrides | 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/tooltip/stateful-tooltip-container.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var default_props_1 = (0, tslib_1.__importDefault)(require("baseui/tooltip/default-props"));
+var default_props_1 = (0, tslib_1.__importDefault)(require("../baseui/tooltip/default-props"));
 var popover_1 = require("../popover");
 var StatefulContainer = function (props) { return ((0, jsx_runtime_1.jsx)(popover_1.StatefulContainer, (0, tslib_1.__assign)({}, props), void 0)); };
 StatefulContainer.displayName = 'StatefulContainer';

package/tooltip/stateful-tooltip.d.ts

@@ -23,12 +23,14 @@ declare const StatefulTooltip: {
         onMouseEnterDelay?: number | undefined;
         onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
         onMouseLeaveDelay?: number | undefined;
-        overrides?: import("baseui/popover").PopoverOverrides | 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/tooltip/stateful-tooltip.js

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var default_props_1 = (0, tslib_1.__importDefault)(require("baseui/tooltip/default-props"));
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var default_props_1 = (0, tslib_1.__importDefault)(require("../baseui/tooltip/default-props"));
 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 _overrides = (0, useConvertOverrides_1.useConvertOverrides)(overrides, undefined, [overrides]);
-    return ((0, jsx_runtime_1.jsx)(stateful_tooltip_container_1.default, (0, tslib_1.__assign)({ dismissOnClickOutside: true, dismissOnEsc: true, triggerType: "hover" }, restProps, { overrides: _overrides }, { children: function (tooltipProps) { return ((0, jsx_runtime_1.jsx)(tooltip_1.default, (0, tslib_1.__assign)({}, tooltipProps, { size: size, label: label }, { children: children }), void 0)); } }), void 0));
+    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 = (0, tslib_1.__rest)(props, ["children", "size", "label", "overrides", "viewportAsBoundary", "intent"]);
+    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, intent: intent }, { 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/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/tooltip/styled-component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLabel = exports.StyledInner = exports.StyledArrow = exports.StyledBody = void 0;
 var tslib_1 = require("tslib");
 var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
-var tooltip_1 = require("baseui/tooltip");
+var tooltip_1 = require("../baseui/tooltip");
 Object.defineProperty(exports, "StyledBody", { enumerable: true, get: function () { return tooltip_1.StyledBody; } });
 Object.defineProperty(exports, "StyledArrow", { enumerable: true, get: function () { return tooltip_1.StyledArrow; } });
 Object.defineProperty(exports, "StyledInner", { enumerable: true, get: function () { return tooltip_1.StyledInner; } });

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, placement, ...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;

package/tooltip/tooltip.js

@@ -3,16 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 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 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");
 var overrides_1 = require("../overrides");
 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,28 +22,34 @@ 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, _g = _a.placement, placement = _g === void 0 ? 'auto' : _g, restProps = (0, tslib_1.__rest)(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement"]);
+    var _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, _h = _a.viewportAsBoundary, viewportAsBoundary = _h === void 0 ? true : _h, _j = _a.intent, intent = _j === void 0 ? 'default' : _j, restProps = (0, tslib_1.__rest)(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement", "popperOptions", "ignoreBoundary", "viewportAsBoundary", "intent"]);
     var focusLockProps = (0, hooks_1.useFocusLock)({ returnFocus: returnFocus, focusLock: focusLock });
-    var sharedProps = { $size: size, $label: !!label };
-    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Label, styled_component_1.StyledLabel), 2), Label = _h[0], labelProps = _h[1];
+    var sharedProps = (0, react_1.useMemo)(function () { return ({ $size: size, $label: !!label, $intent: intent }); }, [intent, label, size]);
+    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides.Label, styled_component_1.StyledLabel), 2), Label = _k[0], labelProps = _k[1];
     // add label on top of content
     var contentToDisplay = [];
     if (label) {
         contentToDisplay.push((0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({}, labelProps, sharedProps, { children: label }), "label"));
     }
     contentToDisplay.push((0, jsx_runtime_1.jsx)(React.Fragment, { children: typeof content === 'function' ? content() : content }, "content"));
-    var childNode = children;
+    var childNode;
     if (typeof children === 'function') {
         childNode = children({ isOpen: isOpen });
     }
-    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]);
+    else {
+        childNode = children;
+    }
+    var _l = (0, hooks_1.useContent)({ content: contentToDisplay }), setContentHost = _l.setContentHost, wrappedContent = _l.wrappedContent;
+    var _overrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            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, setContentHost, sharedProps]);
     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, placement: placement }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { children: (0, jsx_runtime_1.jsx)(PopoverEnahncer_1.PopoverChildEnhancer, (0, tslib_1.__assign)({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    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,12 +1,14 @@
-import { TetherPlacement } from 'baseui/layer';
-import { SharedStylePropsArg } from 'baseui/popover';
-import { StatefulTooltipProps as BaseStatefulTooltipProps, TooltipProps as BaseTooltipProps } from 'baseui/tooltip';
+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';
+import type { Intent } from '../types';
 declare type SpacewebSharedProps = {
     $size: Size;
     $label: boolean;
+    $intent: Intent;
 };
 export declare type Size = 'sm' | 'md' | 'lg';
 export declare type SharedProps = SharedStylePropsArg & SpacewebSharedProps;
@@ -39,6 +41,8 @@ export declare type StatefulTooltipProps = Omit<BaseStatefulTooltipProps, 'overr
     dismissOnEsc?: boolean;
     triggerType?: TriggerType;
     placement?: TetherPlacement;
+    viewportAsBoundary?: boolean;
+    intent?: Intent;
 } & DeprecatedProps;
 export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus' | 'triggerType' | 'placement'> & {
     overrides?: {
@@ -54,6 +58,8 @@ export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'childre
     targetElement?: HTMLElement | null;
     triggerType?: TriggerType;
     placement?: TetherPlacement;
+    viewportAsBoundary?: boolean;
+    intent?: Intent;
 } & DeprecatedProps;
 export type { Placement, TriggerType, AccessibilityType } from '../popover';
-export type { StatefulTooltipContainerProps } from 'baseui/tooltip';
+export type { StatefulTooltipContainerProps } from '../baseui/tooltip';

package/transitions/collapse/collapse.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { CollapseProps } from './types';
+declare const Collapse: {
+    ({ visible, timingFunction, children, onEnter, onEntering, onEntered, onExit, onExited, onExiting, disableExitTransition, disableEnterTransition, enableAppearTransition, containerRef, duration, dimension, overrides, collapsedSize, unmountOnExit, ...props }: CollapseProps): ReactElement;
+    displayName: string;
+};
+export default Collapse;

package/transitions/collapse/collapse.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Transition_1 = (0, tslib_1.__importDefault)(require("react-transition-group/Transition"));
+var helperFunction_1 = require("../transition/helperFunction");
+var useCombinedHandler_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedHandler"));
+var styled_components_1 = require("./styled-components");
+var overrides_1 = require("../../overrides");
+var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedRef"));
+var constants_1 = require("../transition/constants");
+var usePreferredReducedMotion_1 = (0, tslib_1.__importDefault)(require("../../hooks/usePreferredReducedMotion"));
+var Collapse = function (_a) {
+    var _b = _a.visible, visible = _b === void 0 ? true : _b, _c = _a.timingFunction, timingFunction = _c === void 0 ? constants_1.DEFAULT_TIMING_FUNCTION : _c, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExited = _a.onExited, onExiting = _a.onExiting, _d = _a.disableExitTransition, disableExitTransition = _d === void 0 ? false : _d, _e = _a.disableEnterTransition, disableEnterTransition = _e === void 0 ? false : _e, _f = _a.enableAppearTransition, enableAppearTransition = _f === void 0 ? false : _f, _g = _a.containerRef, containerRef = _g === void 0 ? null : _g, _h = _a.duration, duration = _h === void 0 ? { enter: constants_1.DEFAULT_DURATION, exit: constants_1.DEFAULT_DURATION } : _h, _j = _a.dimension, dimension = _j === void 0 ? 'height' : _j, overrides = _a.overrides, _k = _a.collapsedSize, collapsedSize = _k === void 0 ? 0 : _k, unmountOnExit = _a.unmountOnExit, props = (0, tslib_1.__rest)(_a, ["visible", "timingFunction", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExited", "onExiting", "disableExitTransition", "disableEnterTransition", "enableAppearTransition", "containerRef", "duration", "dimension", "overrides", "collapsedSize", "unmountOnExit"]);
+    var prefersReducedMotion = (0, usePreferredReducedMotion_1.default)();
+    var nodeRef = (0, react_1.useRef)(null);
+    var mergedRef = (0, useCombinedRef_1.default)(nodeRef, containerRef);
+    // eslint-disable-next-line no-param-reassign
+    if (unmountOnExit)
+        collapsedSize = 0;
+    var scrollKey = dimension === 'height' ? 'scrollHeight' : 'scrollWidth';
+    // accepting duration as both number and object
+    var durationProp = typeof duration === 'number' ? { enter: duration, exit: duration } : duration;
+    var handleEnter = (0, useCombinedHandler_1.default)(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = collapsedSize ? "".concat(collapsedSize, "px") : '0px';
+        }
+    }, onEnter);
+    var handleEntering = (0, useCombinedHandler_1.default)(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = "".concat(nodeRef.current[scrollKey], "px");
+        }
+    }, onEntering);
+    var handleEntered = (0, useCombinedHandler_1.default)(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = '';
+        }
+    }, onEntered);
+    var handleExit = (0, useCombinedHandler_1.default)(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = "".concat(nodeRef.current[scrollKey], "px");
+            (0, helperFunction_1.forceReflow)(nodeRef.current);
+        }
+    }, onExit);
+    var handleExiting = (0, useCombinedHandler_1.default)(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = "".concat(collapsedSize, "px");
+        }
+    }, onExiting);
+    var handleExited = (0, useCombinedHandler_1.default)(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = "".concat(collapsedSize, "px");
+        }
+    }, onExited);
+    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Container, styled_components_1.StyledContainer), 2), Container = _l[0], containerProps = _l[1];
+    var sharedProps = {
+        $duration: durationProp,
+        $timingFunction: timingFunction,
+        $dimension: dimension,
+        $collapsedSize: collapsedSize,
+    };
+    return prefersReducedMotion ? ((0, jsx_runtime_1.jsx)(Container, (0, tslib_1.__assign)({}, containerProps, sharedProps, { children: visible ? children : null }), void 0)) : ((0, jsx_runtime_1.jsx)(Transition_1.default, (0, tslib_1.__assign)({ in: visible }, props, { unmountOnExit: unmountOnExit, timeout: durationProp, nodeRef: nodeRef, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: handleExited, enter: !disableEnterTransition, exit: !disableExitTransition, appear: enableAppearTransition }, { children: function (state) { return ((0, jsx_runtime_1.jsx)(Container, (0, tslib_1.__assign)({ ref: mergedRef, "$state": state }, sharedProps, containerProps, { children: children }), void 0)); } }), void 0));
+};
+Collapse.displayName = 'Collapse';
+exports.default = Collapse;