@sprinklrjs/spaceweb 10.1.0

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

@@ -0,0 +1,41 @@
+export declare type TimeRangePickerLocale = {
+    headerLabel: string;
+    timezoneLabel: string;
+    today: string;
+    yesterday: string;
+    lastOneHour: string;
+    lastTwelveHour: string;
+    lastTwentyFourHour: string;
+    thisWeek: string;
+    lastWeek: string;
+    lastSevenDays: string;
+    thisMonth: string;
+    lastMonth: string;
+    lastTwentyEightDays: string;
+    lastThirtyDays: string;
+    lastSixtyDays: string;
+    lastNinetyDays: string;
+    lastOneTwentyDays: string;
+    lastOneEightyDays: string;
+    thisYear: string;
+    lastYear: string;
+    lastThreeSixtyFiveDays: string;
+    nextSevenDays: string;
+    nextFourteenDays: string;
+    nextMonth: string;
+    customRange: string;
+    cancelBtnLabel: string;
+    saveBtnLabel: string;
+    timeSelectStartLabel: string;
+    timeSelectEndLabel: string;
+    screenReaderMessageInput: string;
+    ariaLabelRange: string;
+    ariaLabel: string;
+    selectedDate: string;
+    selectedDateRange: string;
+    selectSecondDatePrompt: string;
+    timezonePlaceholder: string;
+    rangeErrorMsg: string;
+    presetMenuAriaLabel: string;
+    popoverAriaLabel: string;
+};

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

@@ -0,0 +1 @@
+export {};

package/esm/time-range-picker/styled-component.d.ts

@@ -0,0 +1 @@
+export declare const StyledHeader: import("../style/styled").StyledComponent;

package/esm/time-range-picker/styled-component.js

@@ -0,0 +1,2 @@
+import styled from '../style/styled';
+export var StyledHeader = styled('div', 'flex justify-between items-center h-10 px-5');

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

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+import { DatepickerOverrides, FormatString, StatelessDatePickerProps } from '../date-picker';
+import { Override } from '../overrides';
+import { Option } from 'baseui/select';
+import { BaseSelectProps } from '../select/types';
+export type { FormatString } from '../date-picker';
+export declare type TimeRangePreset = {
+    id: string;
+    label: string;
+    getTimeRangeLimits?: (timezone?: string) => [Date, Date] | [];
+};
+export declare type TimezonePickerProps = {
+    setTimezone: React.Dispatch<string>;
+    timezone: string;
+    overrides?: BaseSelectProps['overrides'];
+};
+export declare type TimeRangeListProps = {
+    timeRangePresets: TimeRangePreset[];
+    onChange: ({ date, preset }: any) => void;
+    timeRange?: Date[];
+    preset: string | undefined;
+    overrides?: {
+        Menu?: Override<any>;
+        MenuItem?: Override<any>;
+    };
+};
+export declare type TimeRangePickerOverrides = DatepickerOverrides<Record<string, any>> & {
+    TimeRangeList?: Override<TimeRangeListProps & Record<string, any>>;
+    Header?: Override<Record<string, any>>;
+    HeaderBeforeEnhancer?: Override<Record<string, any>>;
+    FooterBeforeEnhancer?: Override<Record<string, any>>;
+    TimezonePicker?: Override<Record<string, any>>;
+};
+export declare type TimeRangePickerValue = {
+    value: Date[] | string;
+    date: Date[];
+    preset: string;
+    timezone?: string;
+};
+declare type Preset = string;
+export declare type SizeVariant = 'default' | 'compact';
+export declare type TimeRangePickerProps = Omit<StatelessDatePickerProps, 'value' | 'overrides' | 'onChange' | 'isOpen' | 'onFocus' | 'onBlur' | 'range'> & {
+    /**
+     * @deprecated Please prevent passing preset to value. Instead, pass it in the prop `preset`.
+     *   This will be removed in future major releases.
+     */
+    value?: Preset | Date[];
+    preset?: Preset;
+    timezone?: string;
+    timeRangePresets?: TimeRangePreset[];
+    onSubmit: (timeRangePickerValue: TimeRangePickerValue) => void;
+    overrides?: TimeRangePickerOverrides;
+    mapLabels?: (args: Option) => React.ReactNode;
+    onChange?: (timeRangePickerValue: TimeRangePickerValue) => any;
+    showTimezoneInSummary?: boolean;
+    onClear?: () => void;
+    showFullDateInSummary?: boolean;
+    startOpen?: boolean;
+    disableTimezone?: boolean;
+    displayVariant?: SizeVariant;
+};
+export declare type RangeSelectorContainerProps = Omit<TimeRangePickerProps, 'onFocus' | 'onBlur' | 'timeRangePresets' | 'onSubmit' | 'formatDisplayValue' | 'onClear' | 'timezone'> & {
+    timeRangePresets: TimeRangePreset[];
+    onSubmit: ({ timeRange, preset, timezone }: {
+        timeRange: Date[];
+        preset?: string;
+        timezone?: string;
+    }) => void;
+    onClose: () => void;
+    timeRange: Date[];
+    timezone: string;
+    formatString: FormatString;
+};
+export declare type RangeSelectorProps = Omit<RangeSelectorContainerProps, 'onSubmit' | 'onClose' | 'onChage' | 'formatDate' | 'formatDisplayValue'> & {
+    timeRange?: Date[];
+    onChange: ({ date, preset }: any) => void;
+    preset: string | undefined;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,42 @@
+import { Locale } from '../locale';
+import { SizeVariant, TimeRangePreset } from './types';
+export declare const getSelectedTimeRange: (selectedTimeRange: string | undefined, timeRangeOptions: Array<TimeRangePreset>) => TimeRangePreset | undefined;
+export declare const getSystemTzName: () => string;
+/**
+ * returns milliseconds offset from timezone name
+ */
+export declare const getTzOffset: (timezone: string, date?: number | Date | undefined) => number;
+/**
+ * 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.
+ * Now in Asia/Kolkata timezone today implies 19th Feb. But for Asia/Kabul which is one hour behind Asia/Kolkata Today still implies 18th Feb.
+ * So, this function will subtract that offset of 1 hour from current date so new time 11:30PM, with this time we can get correct value
+ * of today, this week, etc preset.
+ */
+export declare const getDateForGivenTimezone: (timezone?: string | undefined) => Date;
+export declare const getDefaultTimeRangePresets: (locale: Locale) => TimeRangePreset[];
+export declare const formatSummaryValue: ({ date, presetId, presetLabel, timezone, formatString, showFullDateInSummary, showTimezoneInSummary, adapter, locale, hidePresetLabel, displayVariant, }: {
+    date: Date[];
+    presetId: string;
+    presetLabel: string;
+    timezone?: string | undefined;
+    formatString?: string | undefined;
+    showFullDateInSummary?: boolean | undefined;
+    showTimezoneInSummary?: boolean | undefined;
+    adapter?: any;
+    locale?: any;
+    hidePresetLabel?: boolean | undefined;
+    displayVariant?: SizeVariant | undefined;
+}) => string;
+export declare const getHeight: ({ monthsShown, timeSelect }: {
+    monthsShown?: number | undefined;
+    timeSelect?: boolean | undefined;
+}) => number;

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

@@ -0,0 +1,411 @@
+import { DEFAULT_FORMAT_STRING } from '../date-picker/constants';
+import { findTimeZone, getZonedTime } from 'timezone-support/dist/index-1900-2050';
+import dateFnsAdapter from 'baseui/datepicker/utils/date-fns-adapter';
+import DateHelpers from 'baseui/datepicker/utils/date-helpers';
+import { normalizeDashes } from '../date-picker/utils';
+import { CALENDAR_HEIGHT, CUSTOM_OPTION, TIME_SELECT_ROW_HEIGHT } from './constants';
+export var getSelectedTimeRange = function (selectedTimeRange, timeRangeOptions) { return timeRangeOptions.find(function (_a) {
+    var id = _a.id;
+    return id === selectedTimeRange;
+}); };
+var SYSTEM_TIMEZONE;
+export var getSystemTzName = function () {
+    if (!SYSTEM_TIMEZONE) {
+        var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        var TZ_ALIASES = {
+            //Intl return Asia/Calcutta in chrome and safari, while firefox returns Asia/Kolkata
+            'Asia/Calcutta': 'Asia/Kolkata',
+            'America/Buenos_Aires': 'America/Argentina/Buenos_Aires',
+        };
+        SYSTEM_TIMEZONE = TZ_ALIASES[timezone] || timezone;
+    }
+    return SYSTEM_TIMEZONE;
+};
+/**
+ * returns milliseconds offset from timezone name
+ */
+export var getTzOffset = function (timezone, date) {
+    var _a, _b;
+    var timezoneObject = findTimeZone(timezone);
+    var zonedTime = getZonedTime(date !== null && date !== void 0 ? date : new Date(), timezoneObject);
+    return ((_b = (_a = zonedTime.zone) === null || _a === void 0 ? void 0 : _a.offset) !== null && _b !== void 0 ? _b : 0) * 60 * 1000;
+};
+/**
+ * convert epoch from one timezone to another
+ */
+export var switchEpochTimezone = function (date, tzFrom, tzTo) {
+    if (tzFrom === void 0) { tzFrom = getSystemTzName(); }
+    if (tzTo === void 0) { tzTo = getSystemTzName(); }
+    var tzFromOffset = getTzOffset(tzFrom, date);
+    var tzToOffset = getTzOffset(tzTo, date);
+    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.
+ * Now in Asia/Kolkata timezone today implies 19th Feb. But for Asia/Kabul which is one hour behind Asia/Kolkata Today still implies 18th Feb.
+ * So, this function will subtract that offset of 1 hour from current date so new time 11:30PM, with this time we can get correct value
+ * of today, this week, etc preset.
+ */
+export var getDateForGivenTimezone = function (timezone) {
+    var nativeDate = new Date();
+    if (!timezone) {
+        return nativeDate;
+    }
+    var timezoneObject = findTimeZone(timezone);
+    var _a = getZonedTime(nativeDate, timezoneObject), year = _a.year, month = _a.month, day = _a.day, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds, milliseconds = _a.milliseconds;
+    return new Date(year, month - 1, day, hours, minutes, seconds, milliseconds);
+};
+export var getDefaultTimeRangePresets = function (locale) {
+    var switchTimezoneOfRange = function (startDate, endDate, timezone) { return [
+        new Date(switchEpochTimezone(startDate, getSystemTzName(), timezone)),
+        new Date(switchEpochTimezone(endDate, getSystemTzName(), timezone)),
+    ]; };
+    return [
+        {
+            id: 'TODAY',
+            label: locale.timeRangePicker.today,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'YESTERDAY',
+            label: locale.timeRangePicker.yesterday,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                startDate.setDate(startDate.getDate() - 1);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setHours(23, 59, 59, 999);
+                endDate.setDate(endDate.getDate() - 1);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_1_HOUR',
+            label: locale.timeRangePicker.lastOneHour,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(startDate.getHours() - 1);
+                var endDate = getDateForGivenTimezone(timezone);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_12_HOURS',
+            label: locale.timeRangePicker.lastTwelveHour,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(startDate.getHours() - 12);
+                var endDate = getDateForGivenTimezone(timezone);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_24_HOURS',
+            label: locale.timeRangePicker.lastTwentyFourHour,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(startDate.getHours() - 24);
+                var endDate = getDateForGivenTimezone(timezone);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'THIS_WEEK',
+            label: locale.timeRangePicker.thisWeek,
+            getTimeRangeLimits: function (timezone) {
+                var date = getDateForGivenTimezone(timezone);
+                // subtract day number from today's date will get us to Monday, subtract one more to get Sunday
+                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);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_WEEK',
+            label: locale.timeRangePicker.lastWeek,
+            getTimeRangeLimits: function (timezone) {
+                var date = getDateForGivenTimezone(timezone);
+                // first get to monday and then subtract two more days to get the Saturday of previous week
+                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);
+                startDate.setHours(0, 0, 0, 0);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_7_DAYS',
+            label: locale.timeRangePicker.lastSevenDays,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                startDate.setDate(startDate.getDate() - 6);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'THIS_MONTH',
+            label: locale.timeRangePicker.thisMonth,
+            getTimeRangeLimits: function (timezone) {
+                var date = getDateForGivenTimezone(timezone);
+                var startDate = new Date(date.getFullYear(), date.getMonth(), 1);
+                startDate.setHours(0, 0, 0, 0);
+                var zonedEndDate = getDateForGivenTimezone(timezone);
+                var endDate = new Date(zonedEndDate.getFullYear(), zonedEndDate.getMonth() + 1, 0);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_MONTH',
+            label: locale.timeRangePicker.lastMonth,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setDate(1);
+                startDate.setMonth(startDate.getMonth() - 1);
+                startDate.setHours(0, 0, 0, 0);
+                var endDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_28_DAYS',
+            label: locale.timeRangePicker.lastTwentyEightDays,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                startDate.setDate(startDate.getDate() - 27);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_30_DAYS',
+            label: locale.timeRangePicker.lastThirtyDays,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                startDate.setDate(startDate.getDate() - 29);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_60_DAYS',
+            label: locale.timeRangePicker.lastSixtyDays,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                startDate.setDate(startDate.getDate() - 59);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_90_DAYS',
+            label: locale.timeRangePicker.lastNinetyDays,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                startDate.setDate(startDate.getDate() - 89);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_120_DAYS',
+            label: locale.timeRangePicker.lastOneTwentyDays,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                startDate.setDate(startDate.getDate() - 119);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_180_DAYS',
+            label: locale.timeRangePicker.lastOneEightyDays,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                startDate.setDate(startDate.getDate() - 179);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'THIS_YEAR',
+            label: locale.timeRangePicker.thisYear,
+            getTimeRangeLimits: function (timezone) {
+                var date = getDateForGivenTimezone(timezone);
+                var startDate = new Date(date.getFullYear(), 0, 1);
+                startDate.setHours(0, 0, 0, 0);
+                var endDate = new Date(date.getFullYear(), 12, 0);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_YEAR',
+            label: locale.timeRangePicker.lastYear,
+            getTimeRangeLimits: function (timezone) {
+                var date = getDateForGivenTimezone(timezone);
+                var startDate = new Date(date.getFullYear() - 1, 0, 1);
+                startDate.setHours(0, 0, 0, 0);
+                var endDate = new Date(date.getFullYear() - 1, 12, 0);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'LAST_365_DAYS',
+            label: locale.timeRangePicker.lastThreeSixtyFiveDays,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                startDate.setDate(startDate.getDate() - 364);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'NEXT_7_DAYS',
+            label: locale.timeRangePicker.nextSevenDays,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setDate(endDate.getDate() + 6);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'NEXT_14_DAYS',
+            label: locale.timeRangePicker.nextFourteenDays,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setHours(0, 0, 0, 0);
+                var endDate = getDateForGivenTimezone(timezone);
+                endDate.setDate(endDate.getDate() + 13);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+        {
+            id: 'NEXT_MONTH',
+            label: locale.timeRangePicker.nextMonth,
+            getTimeRangeLimits: function (timezone) {
+                var startDate = getDateForGivenTimezone(timezone);
+                startDate.setDate(1);
+                startDate.setMonth(startDate.getMonth() + 1);
+                startDate.setHours(0, 0, 0, 0);
+                var endDate = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 0);
+                endDate.setHours(23, 59, 59, 999);
+                return switchTimezoneOfRange(startDate, endDate, timezone);
+            },
+        },
+    ];
+};
+var formatSummaryForCompactVariant = function (_a) {
+    var isTimeRangeCustom = _a.isTimeRangeCustom, presetLabel = _a.presetLabel, locale = _a.locale, date = _a.date, adapter = _a.adapter;
+    var dateHelpers = new DateHelpers(adapter);
+    if (!isTimeRangeCustom) {
+        return presetLabel;
+    }
+    if (date.length === 0) {
+        return '';
+    }
+    if (date.length === 1) {
+        return "".concat(dateHelpers.formatDate(date[0], 'dd MMM ‘yy', locale));
+    }
+    var startMonth = dateHelpers.getMonth(date[0]);
+    var endMonth = dateHelpers.getMonth(date[1]);
+    var startYear = dateHelpers.getYear(date[0]);
+    var endYear = dateHelpers.getYear(date[1]);
+    if (startYear !== endYear) {
+        // Dec ‘21 - Feb ‘22
+        return "".concat(dateHelpers.formatDate(date[0], 'MMM ‘yy', locale), " \u2013 ").concat(dateHelpers.formatDate(date[1], 'MMM ‘yy', locale));
+    }
+    if (startMonth === endMonth) {
+        // if selected range is from 15-20 may of 2022, then
+        // 15 - 20 May
+        return "".concat(dateHelpers.formatDate(date[0], 'dd'), " \u2013 ").concat(dateHelpers.formatDate(date[1], 'dd'), " ").concat(dateHelpers.formatDate(date[0], 'MMM', locale));
+    }
+    // year and month both different
+    // 13 Apr - 15 May
+    return "".concat(dateHelpers.formatDate(date[0], 'dd MMM', locale), " \u2013 ").concat(dateHelpers.formatDate(date[1], 'dd MMM', locale));
+};
+// eslint-disable-next-line max-statements
+export var formatSummaryValue = function (_a) {
+    var date = _a.date, presetId = _a.presetId, presetLabel = _a.presetLabel, _b = _a.timezone, timezone = _b === void 0 ? getSystemTzName() : _b, _c = _a.formatString, formatString = _c === void 0 ? DEFAULT_FORMAT_STRING : _c, _d = _a.showFullDateInSummary, showFullDateInSummary = _d === void 0 ? false : _d, _e = _a.showTimezoneInSummary, showTimezoneInSummary = _e === void 0 ? false : _e, _f = _a.adapter, adapter = _f === void 0 ? dateFnsAdapter : _f, locale = _a.locale, _g = _a.hidePresetLabel, hidePresetLabel = _g === void 0 ? false : _g, _h = _a.displayVariant, displayVariant = _h === void 0 ? 'default' : _h;
+    var dateHelpers = new DateHelpers(adapter);
+    var normalizedFormatString = normalizeDashes(formatString);
+    var dateString = date.map(function (day) { return dateHelpers.formatDate(day, normalizedFormatString, locale); }).join(' – ');
+    var isTimeRangeCustom = presetId === CUSTOM_OPTION.id;
+    // case to handle clearable, where date is empty array
+    if (!dateString && isTimeRangeCustom) {
+        return '';
+    }
+    var label = hidePresetLabel ? '' : presetLabel;
+    if (displayVariant === 'compact') {
+        return formatSummaryForCompactVariant({
+            adapter: adapter,
+            date: date,
+            isTimeRangeCustom: isTimeRangeCustom,
+            presetLabel: presetLabel,
+            locale: locale,
+        });
+    }
+    if ((isTimeRangeCustom || showFullDateInSummary) && dateString) {
+        label = hidePresetLabel ? dateString : "".concat(label, ": ").concat(dateString);
+    }
+    if (showTimezoneInSummary) {
+        label = "".concat(label, " | ").concat(timezone);
+    }
+    return label;
+};
+export var getHeight = function (_a) {
+    var monthsShown = _a.monthsShown, timeSelect = _a.timeSelect;
+    if (timeSelect && monthsShown === 1) {
+        return CALENDAR_HEIGHT + 2 * TIME_SELECT_ROW_HEIGHT;
+    }
+    if (timeSelect) {
+        return CALENDAR_HEIGHT + TIME_SELECT_ROW_HEIGHT;
+    }
+    return CALENDAR_HEIGHT;
+};

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

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { TimezonePickerProps } from './types';
+export declare const TimezonePicker: {
+    (props: TimezonePickerProps): ReactElement;
+    defaultProps: {
+        size: string;
+    };
+};

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

@@ -0,0 +1,52 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import { Select } from '../select';
+import { useContextualFormProps } from '../form-control/context';
+import { useOverrides } from '../overrides';
+import { buildTimeZones } from './utils';
+export var TimezonePicker = function (props) {
+    var adaptedProps = useContextualFormProps(props);
+    var onChange = adaptedProps.onChange, _a = adaptedProps.date, date = _a === void 0 ? new Date() : _a, mapLabels = adaptedProps.mapLabels, value = adaptedProps.value, _b = adaptedProps.overrides, overrides = _b === void 0 ? {} : _b, restProps = __rest(adaptedProps, ["onChange", "date", "mapLabels", "value", "overrides"]);
+    var _c = __read(useState(), 2), timezoneId = _c[0], setTimezoneId = _c[1];
+    var time = date.getTime();
+    var timeZoneList = useMemo(function () {
+        if (props.timezoneOptions) {
+            return props.timezoneOptions;
+        }
+        var list = buildTimeZones(date);
+        if (!mapLabels)
+            return list;
+        return list.map(function (timeZone) {
+            var label = mapLabels(timeZone);
+            return __assign(__assign({}, timeZone), { label: label });
+        });
+    }, [date, mapLabels, props.timezoneOptions]);
+    useEffect(function () {
+        if (!value && typeof Intl !== 'undefined') {
+            var selectedTimezone_1 = timezoneId;
+            if (!timezoneId) {
+                selectedTimezone_1 = Intl.DateTimeFormat().resolvedOptions().timeZone;
+                setTimezoneId(selectedTimezone_1);
+            }
+            var timezone = timeZoneList.find(function (_a) {
+                var id = _a.id;
+                return id === selectedTimezone_1;
+            });
+            timezone && (onChange === null || onChange === void 0 ? void 0 : onChange(timezone));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [time]);
+    var handleChange = useCallback(function (params) {
+        var _a;
+        onChange === null || onChange === void 0 ? void 0 : onChange(params.option);
+        setTimezoneId((_a = params.option) === null || _a === void 0 ? void 0 : _a.id);
+    }, [onChange, setTimezoneId]);
+    var _value = useMemo(function () { return (value || timezoneId ? [{ id: value || timezoneId }] : []); }, [value, timezoneId]);
+    var _d = __read(useOverrides(overrides.Select, Select), 2), SelectComp = _d[0], selectProps = _d[1];
+    //@ts-ignore check why `type` is mandatory for select
+    return _jsx(SelectComp, __assign({ value: _value, onChange: handleChange, options: timeZoneList }, restProps, selectProps), void 0);
+};
+TimezonePicker.defaultProps = {
+    size: 'md',
+};

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

@@ -0,0 +1,2 @@
+export { TimezonePicker } from './TimezonePicker';
+export * from './types';

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

@@ -0,0 +1,2 @@
+export { TimezonePicker } from './TimezonePicker';
+export * from './types';