@perses-dev/components 0.0.0-snapshot-time-zone-selector-946f408 → 0.0.0-snapshot-panel-actions-520389b

package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts

@@ -4,7 +4,6 @@ interface AbsoluteTimeFormProps {
     initialTimeRange: AbsoluteTimeRange;
     onChange: (timeRange: AbsoluteTimeRange) => void;
     onCancel: () => void;
-    timeZone: string;
 }
 /**
  * Start and End datetime picker, allowing use to select a specific time range selecting two absolute dates and times.
@@ -15,6 +14,6 @@ interface AbsoluteTimeFormProps {
  * @param onCancel event received when user click on cancel
  * @constructor
  */
-export declare const DateTimeRangePicker: ({ initialTimeRange, onChange, onCancel, timeZone, }: AbsoluteTimeFormProps) => ReactElement;
+export declare const DateTimeRangePicker: ({ initialTimeRange, onChange, onCancel }: AbsoluteTimeFormProps) => ReactElement;
 export {};
 //# sourceMappingURL=DateTimeRangePicker.d.ts.map

package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAMD;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,wDAK7B,qBAAqB,KAAG,YAwK1B,CAAC"}
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,6CAA8C,qBAAqB,KAAG,YA0KrG,CAAC"}

package/dist/TimeRangeSelector/DateTimeRangePicker.js

@@ -15,9 +15,9 @@ import { useState } from 'react';
 import { Box, Stack, Typography, Button } from '@mui/material';
 import { DateTimeField, LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { useTimeZone } from '../context';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { ErrorAlert } from '../ErrorAlert';
-import { formatWithTimeZone } from '../utils/format';
 import { DATE_TIME_FORMAT, validateDateRange } from './utils';
 /**
  * Start and End datetime picker, allowing use to select a specific time range selecting two absolute dates and times.
@@ -27,19 +27,20 @@ import { DATE_TIME_FORMAT, validateDateRange } from './utils';
  * @param onChange event received when start and end has been selected (click on apply)
  * @param onCancel event received when user click on cancel
  * @constructor
- */ export const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })=>{
+ */ export const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel })=>{
+    const { formatWithUserTimeZone } = useTimeZone();
     // Time range values as dates that can be used as a time range.
     const [timeRange, setTimeRange] = useState(initialTimeRange);
     // Time range values as strings used to populate the text inputs. May not
     // be valid as dates when the user is typing.
     const [timeRangeInputs, setTimeRangeInputs] = useState({
-        start: formatWithTimeZone(initialTimeRange.start, DATE_TIME_FORMAT, timeZone),
-        end: formatWithTimeZone(initialTimeRange.end, DATE_TIME_FORMAT, timeZone)
+        start: formatWithUserTimeZone(initialTimeRange.start, DATE_TIME_FORMAT),
+        end: formatWithUserTimeZone(initialTimeRange.end, DATE_TIME_FORMAT)
     });
     const [showStartCalendar, setShowStartCalendar] = useState(true);
     const changeTimeRange = (newTime, segment)=>{
         const isInputChange = typeof newTime === 'string';
-        const newInputTime = isInputChange ? newTime : formatWithTimeZone(newTime, DATE_TIME_FORMAT, timeZone);
+        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, DATE_TIME_FORMAT);
         setTimeRangeInputs((prevTimeRangeInputs)=>{
             return {
                 ...prevTimeRangeInputs,

package/dist/TimeRangeSelector/DateTimeRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Box, Stack, Typography, Button } from '@mui/material';\nimport { DateTimeField, LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { ErrorAlert } from '../ErrorAlert';\nimport { formatWithTimeZone } from '../utils/format';\nimport { DATE_TIME_FORMAT, validateDateRange } from './utils';\n\ninterface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n  timeZone: string;\n}\n\ntype AbsoluteTimeRangeInputValue = {\n  [Property in keyof AbsoluteTimeRange]: string;\n};\n\n/**\n * Start and End datetime picker, allowing use to select a specific time range selecting two absolute dates and times.\n * TODO: Use directly the MUI X ``DateTimePicker`` for datetime selection which is better. https://next.mui.com/x/react-date-pickers/date-time-picker/\n *   Use ``DateTimeRangePicker`` directly would be cool but paid https://next.mui.com/x/react-date-pickers/date-time-range-picker/\n * @param initialTimeRange initial time range to pre-select.\n * @param onChange event received when start and end has been selected (click on apply)\n * @param onCancel event received when user click on cancel\n * @constructor\n */\nexport const DateTimeRangePicker = ({\n  initialTimeRange,\n  onChange,\n  onCancel,\n  timeZone,\n}: AbsoluteTimeFormProps): ReactElement => {\n  // Time range values as dates that can be used as a time range.\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n\n  // Time range values as strings used to populate the text inputs. May not\n  // be valid as dates when the user is typing.\n  const [timeRangeInputs, setTimeRangeInputs] = useState<AbsoluteTimeRangeInputValue>({\n    start: formatWithTimeZone(initialTimeRange.start, DATE_TIME_FORMAT, timeZone),\n    end: formatWithTimeZone(initialTimeRange.end, DATE_TIME_FORMAT, timeZone),\n  });\n\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: string | Date, segment: keyof AbsoluteTimeRange): void => {\n    const isInputChange = typeof newTime === 'string';\n    const newInputTime = isInputChange ? newTime : formatWithTimeZone(newTime, DATE_TIME_FORMAT, timeZone);\n\n    setTimeRangeInputs((prevTimeRangeInputs) => {\n      return {\n        ...prevTimeRangeInputs,\n        [segment]: newInputTime,\n      };\n    });\n\n    // When the change is a string from an input, do not try to convert it to\n    // a date because there are likely to be interim stages of editing where it\n    // is not valid as a date. When the change is a Date from the calendar/clock\n    // interface, we can be sure it is a date.\n    if (!isInputChange) {\n      setTimeRange((prevTimeRange) => {\n        return {\n          ...prevTimeRange,\n          [segment]: newTime,\n        };\n      });\n    }\n  };\n\n  const onChangeStartTime = (newStartTime: string | Date): void => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: string | Date): void => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = (): { start: Date; end: Date } | undefined => {\n    const newDates = {\n      start: new Date(timeRangeInputs.start),\n      end: new Date(timeRangeInputs.end),\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\n      setTimeRange(newDates);\n      return newDates;\n    }\n  };\n\n  const onApply = (): void => {\n    const newDates = updateDateRange();\n    if (newDates) {\n      onChange(newDates);\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeStartTime(newValue);\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.end}\n              minDateTime={timeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeEndTime(newValue);\n              }}\n              onAccept={(newValue) => {\n                if (newValue === null) return;\n                setShowStartCalendar(true);\n                onChangeEndTime(newValue);\n              }}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              label=\"Start Time\"\n              value={new Date(timeRangeInputs.start)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeStartTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              label=\"End Time\"\n              value={new Date(timeRangeInputs.end)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeEndTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n        </Stack>\n        <Stack direction=\"row\" sx={{ padding: (theme) => theme.spacing(0, 1) }} gap={1}>\n          <Button variant=\"contained\" onClick={() => onApply()} fullWidth>\n            Apply\n          </Button>\n          <Button variant=\"outlined\" onClick={() => onCancel()} fullWidth>\n            Cancel\n          </Button>\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["useState","Box","Stack","Typography","Button","DateTimeField","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","ErrorBoundary","ErrorAlert","formatWithTimeZone","DATE_TIME_FORMAT","validateDateRange","DateTimeRangePicker","initialTimeRange","onChange","onCancel","timeZone","timeRange","setTimeRange","timeRangeInputs","setTimeRangeInputs","start","end","showStartCalendar","setShowStartCalendar","changeTimeRange","newTime","segment","isInputChange","newInputTime","prevTimeRangeInputs","prevTimeRange","onChangeStartTime","newStartTime","onChangeEndTime","newEndTime","updateDateRange","newDates","Date","isValidDateRange","onApply","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","variant","paddingLeft","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","minDateTime","direction","alignItems","gap","pl","pr","FallbackComponent","label","event","onBlur","format","onClick","fullWidth"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Box, Stack, Typography, Button } from '@mui/material';\nimport { DateTimeField, LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { ErrorAlert } from '../ErrorAlert';\nimport { DATE_TIME_FORMAT, validateDateRange } from './utils';\n\ninterface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n}\n\ntype AbsoluteTimeRangeInputValue = {\n  [Property in keyof AbsoluteTimeRange]: string;\n};\n\n/**\n * Start and End datetime picker, allowing use to select a specific time range selecting two absolute dates and times.\n * TODO: Use directly the MUI X ``DateTimePicker`` for datetime selection which is better. https://next.mui.com/x/react-date-pickers/date-time-picker/\n *   Use ``DateTimeRangePicker`` directly would be cool but paid https://next.mui.com/x/react-date-pickers/date-time-range-picker/\n * @param initialTimeRange initial time range to pre-select.\n * @param onChange event received when start and end has been selected (click on apply)\n * @param onCancel event received when user click on cancel\n * @constructor\n */\nexport const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel }: AbsoluteTimeFormProps): ReactElement => {\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  // Time range values as dates that can be used as a time range.\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n\n  // Time range values as strings used to populate the text inputs. May not\n  // be valid as dates when the user is typing.\n  const [timeRangeInputs, setTimeRangeInputs] = useState<AbsoluteTimeRangeInputValue>({\n    start: formatWithUserTimeZone(initialTimeRange.start, DATE_TIME_FORMAT),\n    end: formatWithUserTimeZone(initialTimeRange.end, DATE_TIME_FORMAT),\n  });\n\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: string | Date, segment: keyof AbsoluteTimeRange): void => {\n    const isInputChange = typeof newTime === 'string';\n    const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, DATE_TIME_FORMAT);\n\n    setTimeRangeInputs((prevTimeRangeInputs) => {\n      return {\n        ...prevTimeRangeInputs,\n        [segment]: newInputTime,\n      };\n    });\n\n    // When the change is a string from an input, do not try to convert it to\n    // a date because there are likely to be interim stages of editing where it\n    // is not valid as a date. When the change is a Date from the calendar/clock\n    // interface, we can be sure it is a date.\n    if (!isInputChange) {\n      setTimeRange((prevTimeRange) => {\n        return {\n          ...prevTimeRange,\n          [segment]: newTime,\n        };\n      });\n    }\n  };\n\n  const onChangeStartTime = (newStartTime: string | Date): void => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: string | Date): void => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = (): { start: Date; end: Date } | undefined => {\n    const newDates = {\n      start: new Date(timeRangeInputs.start),\n      end: new Date(timeRangeInputs.end),\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\n      setTimeRange(newDates);\n      return newDates;\n    }\n  };\n\n  const onApply = (): void => {\n    const newDates = updateDateRange();\n    if (newDates) {\n      onChange(newDates);\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeStartTime(newValue);\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.end}\n              minDateTime={timeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeEndTime(newValue);\n              }}\n              onAccept={(newValue) => {\n                if (newValue === null) return;\n                setShowStartCalendar(true);\n                onChangeEndTime(newValue);\n              }}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              label=\"Start Time\"\n              value={new Date(timeRangeInputs.start)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeStartTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              label=\"End Time\"\n              value={new Date(timeRangeInputs.end)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeEndTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n        </Stack>\n        <Stack direction=\"row\" sx={{ padding: (theme) => theme.spacing(0, 1) }} gap={1}>\n          <Button variant=\"contained\" onClick={() => onApply()} fullWidth>\n            Apply\n          </Button>\n          <Button variant=\"outlined\" onClick={() => onCancel()} fullWidth>\n            Cancel\n          </Button>\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["useState","Box","Stack","Typography","Button","DateTimeField","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useTimeZone","ErrorBoundary","ErrorAlert","DATE_TIME_FORMAT","validateDateRange","DateTimeRangePicker","initialTimeRange","onChange","onCancel","formatWithUserTimeZone","timeRange","setTimeRange","timeRangeInputs","setTimeRangeInputs","start","end","showStartCalendar","setShowStartCalendar","changeTimeRange","newTime","segment","isInputChange","newInputTime","prevTimeRangeInputs","prevTimeRange","onChangeStartTime","newStartTime","onChangeEndTime","newEndTime","updateDateRange","newDates","Date","isValidDateRange","onApply","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","variant","paddingLeft","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","minDateTime","direction","alignItems","gap","pl","pr","FallbackComponent","label","event","onBlur","format","onClick","fullWidth"],"mappings":"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"}

package/dist/TimeRangeSelector/TimeRangeSelector.d.ts

@@ -24,10 +24,6 @@ interface TimeRangeSelectorProps {
      * Defaults to true.
      */
     showCustomTimeRange?: boolean;
-    /**
-     * The time zone to use for the time range selector.
-     */
-    timeZone?: string;
 }
 /**
  * Date & time selection component to customize what data renders on dashboard.
@@ -35,6 +31,6 @@ interface TimeRangeSelectorProps {
  * @param props
  * @constructor
  */
-export declare function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange, timeZone, }: TimeRangeSelectorProps): ReactElement;
+export declare function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange, }: TimeRangeSelectorProps): ReactElement;
 export {};
 //# sourceMappingURL=TimeRangeSelector.d.ts.map

package/dist/TimeRangeSelector/TimeRangeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,cAAc,EAKf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,mBAA0B,EAC1B,QAAqC,GACtC,EAAE,sBAAsB,GAAG,YAAY,CAyGvC"}
+{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,cAAc,EAA+D,MAAM,kBAAkB,CAAC;AAC/G,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,mBAA0B,GAC3B,EAAE,sBAAsB,GAAG,YAAY,CAkGvC"}

package/dist/TimeRangeSelector/TimeRangeSelector.js

@@ -11,10 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, MenuItem, Popover, Select, useMediaQuery, useTheme } from '@mui/material';
-import ClockTimeFiveOutline from 'mdi-material-ui/ClockTimeFiveOutline';
-import { isRelativeTimeRange, toAbsoluteTimeRange, DEFAULT_DASHBOARD_TIMEZONE } from '@perses-dev/core';
+import { Box, MenuItem, Popover, Select } from '@mui/material';
+import Calendar from 'mdi-material-ui/Calendar';
+import { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';
 import { useMemo, useRef, useState } from 'react';
+import { useTimeZone } from '../context';
 import { DateTimeRangePicker } from './DateTimeRangePicker';
 import { buildCustomTimeOption, formatTimeRange } from './utils';
 /**
@@ -22,8 +23,8 @@ import { buildCustomTimeOption, formatTimeRange } from './utils';
  * This includes relative shortcuts and the ability to pick absolute start and end times.
  * @param props
  * @constructor
- */ export function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true, timeZone = DEFAULT_DASHBOARD_TIMEZONE }) {
-    const isMobile = useMediaQuery(useTheme().breakpoints.down('md'));
+ */ export function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true }) {
+    const { timeZone } = useTimeZone();
     const anchorEl = useRef(); // Used to position the absolute time range picker
     // Control the open state of the absolute time range picker
     const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);
@@ -67,8 +68,7 @@ import { buildCustomTimeOption, formatTimeRange } from './utils';
                         setShowCustomDateSelector(false);
                         setOpen(false);
                     },
-                    onCancel: ()=>setShowCustomDateSelector(false),
-                    timeZone: timeZone
+                    onCancel: ()=>setShowCustomDateSelector(false)
                 })
             }),
             /*#__PURE__*/ _jsx(Box, {
@@ -77,22 +77,18 @@ import { buildCustomTimeOption, formatTimeRange } from './utils';
                     open: open,
                     value: formatTimeRange(value, timeZone),
                     onClick: ()=>setOpen(!open),
-                    IconComponent: ClockTimeFiveOutline,
+                    IconComponent: Calendar,
                     inputProps: {
                         'aria-label': `Select time range. Currently set to ${value}`
                     },
                     sx: {
                         // `transform: none` prevents calendar icon from flipping over when menu is open
                         '.MuiSelect-icon': {
+                            marginTop: '1px',
                             transform: 'none'
                         },
                         // paddingRight creates more space for the calendar icon (it's a bigger icon)
-                        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': isMobile ? {
-                            paddingRight: '25px',
-                            textIndent: '-9999px',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden'
-                        } : {
+                        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
                             paddingRight: '36px'
                         },
                         '.MuiSelect-select': height ? {

package/dist/TimeRangeSelector/TimeRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, MenuItem, Popover, Select, useMediaQuery, useTheme } from '@mui/material';\nimport ClockTimeFiveOutline from 'mdi-material-ui/ClockTimeFiveOutline';\nimport {\n  TimeRangeValue,\n  isRelativeTimeRange,\n  AbsoluteTimeRange,\n  toAbsoluteTimeRange,\n  DEFAULT_DASHBOARD_TIMEZONE,\n} from '@perses-dev/core';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { TimeOption } from '../model';\nimport { DateTimeRangePicker } from './DateTimeRangePicker';\nimport { buildCustomTimeOption, formatTimeRange } from './utils';\n\ninterface TimeRangeSelectorProps {\n  /**\n   * The current value of the time range.\n   */\n  value: TimeRangeValue;\n  /**\n   * The list of time options to display in the dropdown.\n   * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.\n   */\n  timeOptions: TimeOption[];\n  /**\n   * The callback to call when the time range changes.\n   */\n  onChange: (value: TimeRangeValue) => void;\n  /**\n   * Custom line height for the select component.\n   */\n  height?: string;\n  /**\n   * Whether to show the custom time range option.\n   * Defaults to true.\n   */\n  showCustomTimeRange?: boolean;\n  /**\n   * The time zone to use for the time range selector.\n   */\n  timeZone?: string;\n}\n\n/**\n * Date & time selection component to customize what data renders on dashboard.\n * This includes relative shortcuts and the ability to pick absolute start and end times.\n * @param props\n * @constructor\n */\nexport function TimeRangeSelector({\n  value,\n  timeOptions,\n  onChange,\n  height,\n  showCustomTimeRange = true,\n  timeZone = DEFAULT_DASHBOARD_TIMEZONE,\n}: TimeRangeSelectorProps): ReactElement {\n  const isMobile = useMediaQuery(useTheme().breakpoints.down('md'));\n\n  const anchorEl = useRef(); // Used to position the absolute time range picker\n\n  // Control the open state of the absolute time range picker\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n\n  // Build the initial value of the absolute time range picker\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  // Last option is the absolute time range option (custom)\n  // If the value is an absolute time range, we display this time range\n  // If the value is a relative time range, we make a default CustomTimeOption built from undefined value\n  const lastOption = useMemo(\n    () => buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone),\n    [value, timeZone]\n  );\n\n  // Control the open state of the select component to prevent the menu from closing when the custom date picker is\n  // opened.\n  //\n  // Note that the value state of the select is here for display only. The real value (the one from props) is managed\n  // by click events on each menu item.\n  // This is a trick to get around the limitation of select with menu item that doesn't support objects as value...\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <DateTimeRangePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n            setOpen(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n          timeZone={timeZone}\n        />\n      </Popover>\n      <Box ref={anchorEl}>\n        <Select\n          open={open}\n          value={formatTimeRange(value, timeZone)}\n          onClick={() => setOpen(!open)}\n          IconComponent={ClockTimeFiveOutline}\n          inputProps={{\n            'aria-label': `Select time range. Currently set to ${value}`,\n          }}\n          sx={{\n            // `transform: none` prevents calendar icon from flipping over when menu is open\n            '.MuiSelect-icon': {\n              transform: 'none',\n            },\n            // paddingRight creates more space for the calendar icon (it's a bigger icon)\n            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': isMobile\n              ? {\n                  paddingRight: '25px',\n                  textIndent: '-9999px', // Hide text by moving it far off screen\n                  whiteSpace: 'nowrap', // Prevent text from wrapping\n                  overflow: 'hidden', // Hide any overflow\n                }\n              : {\n                  paddingRight: '36px',\n                },\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              value={formatTimeRange(item.value, timeZone)}\n              onClick={() => {\n                onChange(item.value);\n              }}\n            >\n              {item.display}\n            </MenuItem>\n          ))}\n          {showCustomTimeRange && (\n            <MenuItem\n              value={formatTimeRange(lastOption.value, timeZone)}\n              onClick={() => setShowCustomDateSelector(true)}\n            >\n              {lastOption.display}\n            </MenuItem>\n          )}\n        </Select>\n      </Box>\n    </>\n  );\n}\n"],"names":["Box","MenuItem","Popover","Select","useMediaQuery","useTheme","ClockTimeFiveOutline","isRelativeTimeRange","toAbsoluteTimeRange","DEFAULT_DASHBOARD_TIMEZONE","useMemo","useRef","useState","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","isMobile","breakpoints","down","anchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","current","anchorOrigin","vertical","horizontal","onClose","sx","theme","padding","spacing","initialTimeRange","onCancel","ref","onClick","IconComponent","inputProps","transform","paddingRight","textIndent","whiteSpace","overflow","lineHeight","paddingY","map","item","idx","display"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, MenuItem, Popover, Select } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, isRelativeTimeRange, AbsoluteTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { useTimeZone } from '../context';\nimport { TimeOption } from '../model';\nimport { DateTimeRangePicker } from './DateTimeRangePicker';\nimport { buildCustomTimeOption, formatTimeRange } from './utils';\n\ninterface TimeRangeSelectorProps {\n  /**\n   * The current value of the time range.\n   */\n  value: TimeRangeValue;\n  /**\n   * The list of time options to display in the dropdown.\n   * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.\n   */\n  timeOptions: TimeOption[];\n  /**\n   * The callback to call when the time range changes.\n   */\n  onChange: (value: TimeRangeValue) => void;\n  /**\n   * Custom line height for the select component.\n   */\n  height?: string;\n  /**\n   * Whether to show the custom time range option.\n   * Defaults to true.\n   */\n  showCustomTimeRange?: boolean;\n}\n\n/**\n * Date & time selection component to customize what data renders on dashboard.\n * This includes relative shortcuts and the ability to pick absolute start and end times.\n * @param props\n * @constructor\n */\nexport function TimeRangeSelector({\n  value,\n  timeOptions,\n  onChange,\n  height,\n  showCustomTimeRange = true,\n}: TimeRangeSelectorProps): ReactElement {\n  const { timeZone } = useTimeZone();\n\n  const anchorEl = useRef(); // Used to position the absolute time range picker\n\n  // Control the open state of the absolute time range picker\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n\n  // Build the initial value of the absolute time range picker\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  // Last option is the absolute time range option (custom)\n  // If the value is an absolute time range, we display this time range\n  // If the value is a relative time range, we make a default CustomTimeOption built from undefined value\n  const lastOption = useMemo(\n    () => buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone),\n    [value, timeZone]\n  );\n\n  // Control the open state of the select component to prevent the menu from closing when the custom date picker is\n  // opened.\n  //\n  // Note that the value state of the select is here for display only. The real value (the one from props) is managed\n  // by click events on each menu item.\n  // This is a trick to get around the limitation of select with menu item that doesn't support objects as value...\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <DateTimeRangePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n            setOpen(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n        />\n      </Popover>\n      <Box ref={anchorEl}>\n        <Select\n          open={open}\n          value={formatTimeRange(value, timeZone)}\n          onClick={() => setOpen(!open)}\n          IconComponent={Calendar}\n          inputProps={{\n            'aria-label': `Select time range. Currently set to ${value}`,\n          }}\n          sx={{\n            // `transform: none` prevents calendar icon from flipping over when menu is open\n            '.MuiSelect-icon': {\n              marginTop: '1px',\n              transform: 'none',\n            },\n            // paddingRight creates more space for the calendar icon (it's a bigger icon)\n            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {\n              paddingRight: '36px',\n            },\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              value={formatTimeRange(item.value, timeZone)}\n              onClick={() => {\n                onChange(item.value);\n              }}\n            >\n              {item.display}\n            </MenuItem>\n          ))}\n          {showCustomTimeRange && (\n            <MenuItem\n              value={formatTimeRange(lastOption.value, timeZone)}\n              onClick={() => setShowCustomDateSelector(true)}\n            >\n              {lastOption.display}\n            </MenuItem>\n          )}\n        </Select>\n      </Box>\n    </>\n  );\n}\n"],"names":["Box","MenuItem","Popover","Select","Calendar","isRelativeTimeRange","toAbsoluteTimeRange","useMemo","useRef","useState","useTimeZone","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","anchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","current","anchorOrigin","vertical","horizontal","onClose","sx","theme","padding","spacing","initialTimeRange","onCancel","ref","onClick","IconComponent","inputProps","marginTop","transform","paddingRight","lineHeight","paddingY","map","item","idx","display"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,MAAM,QAAQ,gBAAgB;AAC/D,OAAOC,cAAc,2BAA2B;AAChD,SAAyBC,mBAAmB,EAAqBC,mBAAmB,QAAQ,mBAAmB;AAC/G,SAAuBC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,qBAAqB,EAAEC,eAAe,QAAQ,UAAU;AA2BjE;;;;;CAKC,GACD,OAAO,SAASC,kBAAkB,EAChCC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,MAAM,EACNC,sBAAsB,IAAI,EACH;IACvB,MAAM,EAAEC,QAAQ,EAAE,GAAGV;IAErB,MAAMW,WAAWb,UAAU,kDAAkD;IAE7E,2DAA2D;IAC3D,MAAM,CAACc,wBAAwBC,0BAA0B,GAAGd,SAAS;IAErE,4DAA4D;IAC5D,MAAMe,qBAAqBjB,QAAQ;QACjC,OAAOF,oBAAoBU,SAAST,oBAAoBS,SAASA;IACnE,GAAG;QAACA;KAAM;IAEV,yDAAyD;IACzD,qEAAqE;IACrE,uGAAuG;IACvG,MAAMU,aAAalB,QACjB,IAAMK,sBAAsBP,oBAAoBU,SAASW,YAAYX,OAAOK,WAC5E;QAACL;QAAOK;KAAS;IAGnB,iHAAiH;IACjH,UAAU;IACV,EAAE;IACF,mHAAmH;IACnH,qCAAqC;IACrC,iHAAiH;IACjH,MAAM,CAACO,MAAMC,QAAQ,GAAGnB,SAAS;IAEjC,qBACE;;0BACE,KAACP;gBACCmB,UAAUA,SAASQ,OAAO;gBAC1BC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAL,MAAML;gBACNW,SAAS,IAAMV,0BAA0B;gBACzCW,IAAI,CAACC,QAAW,CAAA;wBACdC,SAASD,MAAME,OAAO,CAAC;oBACzB,CAAA;0BAEA,cAAA,KAAC1B;oBACC2B,kBAAkBd;oBAClBP,UAAU,CAACF;wBACTE,SAASF;wBACTQ,0BAA0B;wBAC1BK,QAAQ;oBACV;oBACAW,UAAU,IAAMhB,0BAA0B;;;0BAG9C,KAACvB;gBAAIwC,KAAKnB;0BACR,cAAA,MAAClB;oBACCwB,MAAMA;oBACNZ,OAAOF,gBAAgBE,OAAOK;oBAC9BqB,SAAS,IAAMb,QAAQ,CAACD;oBACxBe,eAAetC;oBACfuC,YAAY;wBACV,cAAc,CAAC,oCAAoC,EAAE5B,OAAO;oBAC9D;oBACAmB,IAAI;wBACF,gFAAgF;wBAChF,mBAAmB;4BACjBU,WAAW;4BACXC,WAAW;wBACb;wBACA,6EAA6E;wBAC7E,2DAA2D;4BACzDC,cAAc;wBAChB;wBACA,qBAAqB5B,SAAS;4BAAE6B,YAAY7B;4BAAQ8B,UAAU;wBAAE,IAAI,CAAC;oBACvE;;wBAEChC,YAAYiC,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAAClD;gCAECc,OAAOF,gBAAgBqC,KAAKnC,KAAK,EAAEK;gCACnCqB,SAAS;oCACPxB,SAASiC,KAAKnC,KAAK;gCACrB;0CAECmC,KAAKE,OAAO;+BANRD;wBASRhC,qCACC,KAAClB;4BACCc,OAAOF,gBAAgBY,WAAWV,KAAK,EAAEK;4BACzCqB,SAAS,IAAMlB,0BAA0B;sCAExCE,WAAW2B,OAAO;;;;;;;AAOjC"}

package/dist/cjs/TimeRangeSelector/DateTimeRangePicker.js

@@ -25,23 +25,24 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _xdatepickers = require("@mui/x-date-pickers");
 const _AdapterDateFnsV3 = require("@mui/x-date-pickers/AdapterDateFnsV3");
+const _context = require("../context");
 const _ErrorBoundary = require("../ErrorBoundary");
 const _ErrorAlert = require("../ErrorAlert");
-const _format = require("../utils/format");
 const _utils = require("./utils");
-const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })=>{
+const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel })=>{
+    const { formatWithUserTimeZone } = (0, _context.useTimeZone)();
     // Time range values as dates that can be used as a time range.
     const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
     // Time range values as strings used to populate the text inputs. May not
     // be valid as dates when the user is typing.
     const [timeRangeInputs, setTimeRangeInputs] = (0, _react.useState)({
-        start: (0, _format.formatWithTimeZone)(initialTimeRange.start, _utils.DATE_TIME_FORMAT, timeZone),
-        end: (0, _format.formatWithTimeZone)(initialTimeRange.end, _utils.DATE_TIME_FORMAT, timeZone)
+        start: formatWithUserTimeZone(initialTimeRange.start, _utils.DATE_TIME_FORMAT),
+        end: formatWithUserTimeZone(initialTimeRange.end, _utils.DATE_TIME_FORMAT)
     });
     const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
     const changeTimeRange = (newTime, segment)=>{
         const isInputChange = typeof newTime === 'string';
-        const newInputTime = isInputChange ? newTime : (0, _format.formatWithTimeZone)(newTime, _utils.DATE_TIME_FORMAT, timeZone);
+        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, _utils.DATE_TIME_FORMAT);
         setTimeRangeInputs((prevTimeRangeInputs)=>{
             return {
                 ...prevTimeRangeInputs,

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -22,9 +22,10 @@ Object.defineProperty(exports, "TimeRangeSelector", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _ClockTimeFiveOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ClockTimeFiveOutline"));
+const _Calendar = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Calendar"));
 const _core = require("@perses-dev/core");
 const _react = require("react");
+const _context = require("../context");
 const _DateTimeRangePicker = require("./DateTimeRangePicker");
 const _utils = require("./utils");
 function _interop_require_default(obj) {
@@ -32,8 +33,8 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true, timeZone = _core.DEFAULT_DASHBOARD_TIMEZONE }) {
-    const isMobile = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.down('md'));
+function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true }) {
+    const { timeZone } = (0, _context.useTimeZone)();
     const anchorEl = (0, _react.useRef)(); // Used to position the absolute time range picker
     // Control the open state of the absolute time range picker
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
@@ -77,8 +78,7 @@ function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTim
                         setShowCustomDateSelector(false);
                         setOpen(false);
                     },
-                    onCancel: ()=>setShowCustomDateSelector(false),
-                    timeZone: timeZone
+                    onCancel: ()=>setShowCustomDateSelector(false)
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
@@ -87,22 +87,18 @@ function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTim
                     open: open,
                     value: (0, _utils.formatTimeRange)(value, timeZone),
                     onClick: ()=>setOpen(!open),
-                    IconComponent: _ClockTimeFiveOutline.default,
+                    IconComponent: _Calendar.default,
                     inputProps: {
                         'aria-label': `Select time range. Currently set to ${value}`
                     },
                     sx: {
                         // `transform: none` prevents calendar icon from flipping over when menu is open
                         '.MuiSelect-icon': {
+                            marginTop: '1px',
                             transform: 'none'
                         },
                         // paddingRight creates more space for the calendar icon (it's a bigger icon)
-                        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': isMobile ? {
-                            paddingRight: '25px',
-                            textIndent: '-9999px',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden'
-                        } : {
+                        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
                             paddingRight: '36px'
                         },
                         '.MuiSelect-select': height ? {

package/dist/cjs/context/TimeZoneProvider.js

@@ -0,0 +1,98 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TimeZoneContext: function() {
+        return TimeZoneContext;
+    },
+    TimeZoneProvider: function() {
+        return TimeZoneProvider;
+    },
+    useTimeZone: function() {
+        return useTimeZone;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _utils = require("../utils");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const TimeZoneContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function TimeZoneProvider(props) {
+    const { children, timeZone } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeZoneContext.Provider, {
+        value: timeZone,
+        children: children
+    });
+}
+function useTimeZone() {
+    const timeZone = (0, _react.useContext)(TimeZoneContext);
+    return {
+        // fallback to "local" timezone if TimeZoneProvider is not present in the React tree
+        timeZone: timeZone ?? 'local',
+        formatWithUserTimeZone (date, formatString) {
+            return (0, _utils.formatWithTimeZone)(date, formatString, timeZone);
+        },
+        dateFormatOptionsWithUserTimeZone (dateFormatOptions) {
+            return (0, _utils.dateFormatOptionsWithTimeZone)(dateFormatOptions, timeZone);
+        }
+    };
+}

package/dist/cjs/context/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./ChartsProvider"), exports);
 _export_star(require("./SnackbarProvider"), exports);
+_export_star(require("./TimeZoneProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/index.js

@@ -39,7 +39,6 @@ _export_star(require("./SortSelector"), exports);
 _export_star(require("./Table"), exports);
 _export_star(require("./ThresholdsEditor"), exports);
 _export_star(require("./TimeRangeSelector"), exports);
-_export_star(require("./TimeZoneSelector"), exports);
 _export_star(require("./TimeSeriesTooltip"), exports);
 _export_star(require("./ToolbarIconButton"), exports);
 _export_star(require("./FormatControls"), exports);

package/dist/cjs/model/index.js

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./graph"), exports);
 _export_star(require("./theme"), exports);
 _export_star(require("./timeOption"), exports);
-_export_star(require("./timeZoneOption"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/context/TimeZoneProvider.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactElement } from 'react';
+export declare const TimeZoneContext: React.Context<string | undefined>;
+export interface TimeZoneProviderProps {
+    timeZone?: string;
+    children?: React.ReactNode;
+}
+export declare function TimeZoneProvider(props: TimeZoneProviderProps): ReactElement;
+export declare function useTimeZone(): {
+    timeZone: string;
+    formatWithUserTimeZone: (date: Date, formatString: string) => string;
+    dateFormatOptionsWithUserTimeZone: (dateFormatOptions: Intl.DateTimeFormatOptions) => Intl.DateTimeFormatOptions;
+};
+//# sourceMappingURL=TimeZoneProvider.d.ts.map

package/dist/context/TimeZoneProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeZoneProvider.d.ts","sourceRoot":"","sources":["../../src/context/TimeZoneProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAiB,YAAY,EAAc,MAAM,OAAO,CAAC;AAGvE,eAAO,MAAM,eAAe,mCAA+C,CAAC;AAE5E,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAG3E;AAED,wBAAgB,WAAW,IAAI;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,sBAAsB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IACrE,iCAAiC,EAAE,CAAC,iBAAiB,EAAE,IAAI,CAAC,qBAAqB,KAAK,IAAI,CAAC,qBAAqB,CAAC;CAClH,CAYA"}

package/dist/context/TimeZoneProvider.js

@@ -0,0 +1,38 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext } from 'react';
+import { formatWithTimeZone, dateFormatOptionsWithTimeZone } from '../utils';
+export const TimeZoneContext = /*#__PURE__*/ createContext(undefined);
+export function TimeZoneProvider(props) {
+    const { children, timeZone } = props;
+    return /*#__PURE__*/ _jsx(TimeZoneContext.Provider, {
+        value: timeZone,
+        children: children
+    });
+}
+export function useTimeZone() {
+    const timeZone = useContext(TimeZoneContext);
+    return {
+        // fallback to "local" timezone if TimeZoneProvider is not present in the React tree
+        timeZone: timeZone ?? 'local',
+        formatWithUserTimeZone (date, formatString) {
+            return formatWithTimeZone(date, formatString, timeZone);
+        },
+        dateFormatOptionsWithUserTimeZone (dateFormatOptions) {
+            return dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone);
+        }
+    };
+}
+
+//# sourceMappingURL=TimeZoneProvider.js.map

package/dist/context/TimeZoneProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/TimeZoneProvider.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { createContext, ReactElement, useContext } from 'react';\nimport { formatWithTimeZone, dateFormatOptionsWithTimeZone } from '../utils';\n\nexport const TimeZoneContext = createContext<string | undefined>(undefined);\n\nexport interface TimeZoneProviderProps {\n  timeZone?: string;\n  children?: React.ReactNode;\n}\n\nexport function TimeZoneProvider(props: TimeZoneProviderProps): ReactElement {\n  const { children, timeZone } = props;\n  return <TimeZoneContext.Provider value={timeZone}>{children}</TimeZoneContext.Provider>;\n}\n\nexport function useTimeZone(): {\n  timeZone: string;\n  formatWithUserTimeZone: (date: Date, formatString: string) => string;\n  dateFormatOptionsWithUserTimeZone: (dateFormatOptions: Intl.DateTimeFormatOptions) => Intl.DateTimeFormatOptions;\n} {\n  const timeZone = useContext(TimeZoneContext);\n  return {\n    // fallback to \"local\" timezone if TimeZoneProvider is not present in the React tree\n    timeZone: timeZone ?? 'local',\n    formatWithUserTimeZone(date: Date, formatString: string): string {\n      return formatWithTimeZone(date, formatString, timeZone);\n    },\n    dateFormatOptionsWithUserTimeZone(dateFormatOptions: Intl.DateTimeFormatOptions): Intl.DateTimeFormatOptions {\n      return dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone);\n    },\n  };\n}\n"],"names":["React","createContext","useContext","formatWithTimeZone","dateFormatOptionsWithTimeZone","TimeZoneContext","undefined","TimeZoneProvider","props","children","timeZone","Provider","value","useTimeZone","formatWithUserTimeZone","date","formatString","dateFormatOptionsWithUserTimeZone","dateFormatOptions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAASC,aAAa,EAAgBC,UAAU,QAAQ,QAAQ;AACvE,SAASC,kBAAkB,EAAEC,6BAA6B,QAAQ,WAAW;AAE7E,OAAO,MAAMC,gCAAkBJ,cAAkCK,WAAW;AAO5E,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGF;IAC/B,qBAAO,KAACH,gBAAgBM,QAAQ;QAACC,OAAOF;kBAAWD;;AACrD;AAEA,OAAO,SAASI;IAKd,MAAMH,WAAWR,WAAWG;IAC5B,OAAO;QACL,oFAAoF;QACpFK,UAAUA,YAAY;QACtBI,wBAAuBC,IAAU,EAAEC,YAAoB;YACrD,OAAOb,mBAAmBY,MAAMC,cAAcN;QAChD;QACAO,mCAAkCC,iBAA6C;YAC7E,OAAOd,8BAA8Bc,mBAAmBR;QAC1D;IACF;AACF"}

package/dist/context/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ChartsProvider';
 export * from './SnackbarProvider';
+export * from './TimeZoneProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}

package/dist/context/index.js

@@ -12,5 +12,6 @@
 // limitations under the License.
 export * from './ChartsProvider';
 export * from './SnackbarProvider';
+export * from './TimeZoneProvider';
 
 //# sourceMappingURL=index.js.map

package/dist/context/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './ChartsProvider';\nexport * from './SnackbarProvider';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,mBAAmB;AACjC,cAAc,qBAAqB"}
+{"version":3,"sources":["../../src/context/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './ChartsProvider';\nexport * from './SnackbarProvider';\nexport * from './TimeZoneProvider';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,mBAAmB;AACjC,cAAc,qBAAqB;AACnC,cAAc,qBAAqB"}

package/dist/index.d.ts

@@ -23,7 +23,6 @@ export * from './SortSelector';
 export * from './Table';
 export * from './ThresholdsEditor';
 export * from './TimeRangeSelector';
-export * from './TimeZoneSelector';
 export * from './TimeSeriesTooltip';
 export * from './ToolbarIconButton';
 export * from './FormatControls';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -35,7 +35,6 @@ export * from './SortSelector';
 export * from './Table';
 export * from './ThresholdsEditor';
 export * from './TimeRangeSelector';
-export * from './TimeZoneSelector';
 export * from './TimeSeriesTooltip';
 export * from './ToolbarIconButton';
 export * from './FormatControls';