@perses-dev/components 0.55.1 → 0.56.0-beta.1

package/dist/TimeRangeSelector/DateTimeRangePicker.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright 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.
@@ -27,178 +28,383 @@ import { DATE_TIME_FORMAT, validateDateRange } from "./utils.js";
  * @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 })=>{
-    const stdTimeZone = [
-        'local',
-        'browser'
-    ].includes(timeZone.toLowerCase()) ? new Intl.DateTimeFormat().resolvedOptions().timeZone : timeZone;
+ */ export const DateTimeRangePicker = (t0)=>{
+    const $ = _c(56);
+    const { initialTimeRange, onChange, onCancel, timeZone } = t0;
+    let t1;
+    if ($[0] !== timeZone) {
+        t1 = [
+            "local",
+            "browser"
+        ].includes(timeZone.toLowerCase()) ? new Intl.DateTimeFormat().resolvedOptions().timeZone : timeZone;
+        $[0] = timeZone;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    const stdTimeZone = t1;
     const [timeRange, setTimeRange] = useState(initialTimeRange);
     const [showStartCalendar, setShowStartCalendar] = useState(true);
-    const changeTimeRange = (newTime, segment)=>{
-        setTimeRange((prevTimeRange)=>{
-            return {
-                ...prevTimeRange,
-                [segment]: newTime
+    let t2;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = (newTime, segment)=>{
+            setTimeRange((prevTimeRange)=>({
+                    ...prevTimeRange,
+                    [segment]: newTime
+                }));
+        };
+        $[2] = t2;
+    } else {
+        t2 = $[2];
+    }
+    const changeTimeRange = t2;
+    let t3;
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = (newStartTime)=>{
+            changeTimeRange(newStartTime, "start");
+        };
+        $[3] = t3;
+    } else {
+        t3 = $[3];
+    }
+    const onChangeStartTime = t3;
+    let t4;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = (newEndTime)=>{
+            changeTimeRange(newEndTime, "end");
+        };
+        $[4] = t4;
+    } else {
+        t4 = $[4];
+    }
+    const onChangeEndTime = t4;
+    let t5;
+    if ($[5] !== timeRange.end || $[6] !== timeRange.start) {
+        t5 = ()=>{
+            const newDates = {
+                start: timeRange.start,
+                end: timeRange.end
             };
-        });
-    };
-    const onChangeStartTime = (newStartTime)=>{
-        changeTimeRange(newStartTime, 'start');
-    };
-    const onChangeEndTime = (newEndTime)=>{
-        changeTimeRange(newEndTime, 'end');
-    };
-    const updateDateRange = ()=>{
-        const newDates = {
-            start: timeRange.start,
-            end: timeRange.end
+            const isValidDateRange = validateDateRange(newDates.start, newDates.end);
+            if (isValidDateRange) {
+                return newDates;
+            }
         };
-        const isValidDateRange = validateDateRange(newDates.start, newDates.end);
-        if (isValidDateRange) {
-            return newDates;
-        }
-    };
-    const onApply = ()=>{
-        const newDates = updateDateRange();
-        if (newDates) {
-            onChange(newDates);
-        }
-    };
-    return /*#__PURE__*/ _jsx(LocalizationProvider, {
-        dateAdapter: AdapterDateFns,
-        children: /*#__PURE__*/ _jsxs(Stack, {
-            spacing: 2,
-            sx: (theme)=>({
-                    padding: theme.spacing(1, 0, 2)
-                }),
+        $[5] = timeRange.end;
+        $[6] = timeRange.start;
+        $[7] = t5;
+    } else {
+        t5 = $[7];
+    }
+    const updateDateRange = t5;
+    let t6;
+    if ($[8] !== onChange || $[9] !== updateDateRange) {
+        t6 = ()=>{
+            const newDates_0 = updateDateRange();
+            if (newDates_0) {
+                onChange(newDates_0);
+            }
+        };
+        $[8] = onChange;
+        $[9] = updateDateRange;
+        $[10] = t6;
+    } else {
+        t6 = $[10];
+    }
+    const onApply = t6;
+    let t7;
+    if ($[11] !== showStartCalendar || $[12] !== stdTimeZone || $[13] !== timeRange.start) {
+        t7 = showStartCalendar && /*#__PURE__*/ _jsxs(Box, {
+            sx: _temp2,
             children: [
-                showStartCalendar && /*#__PURE__*/ _jsxs(Box, {
-                    sx: (theme)=>({
-                            // TODO: create separate reusable calendar component
-                            '.MuiPickersLayout-contentWrapper': {
-                                backgroundColor: theme.palette.background.default
-                            }
-                        }),
-                    children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            variant: "h3",
-                            padding: 1,
-                            paddingLeft: 2,
-                            children: "Select Start Time"
-                        }),
-                        /*#__PURE__*/ _jsx(StaticDateTimePicker, {
-                            timezone: stdTimeZone,
-                            displayStaticWrapperAs: "desktop",
-                            openTo: "day",
-                            disableHighlightToday: true,
-                            value: new TZDate(timeRange.start, stdTimeZone),
-                            onChange: (newValue)=>{
-                                if (newValue === null) return;
-                                onChangeStartTime(newValue);
-                            },
-                            onAccept: ()=>{
-                                setShowStartCalendar(false);
-                            }
-                        })
-                    ]
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h3",
+                    padding: 1,
+                    paddingLeft: 2,
+                    children: "Select Start Time"
                 }),
-                !showStartCalendar && /*#__PURE__*/ _jsxs(Box, {
-                    sx: (theme)=>({
-                            '.MuiPickersLayout-contentWrapper': {
-                                backgroundColor: theme.palette.background.default
-                            }
-                        }),
-                    children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            variant: "h3",
-                            padding: 1,
-                            paddingLeft: 2,
-                            children: "Select End Time"
-                        }),
-                        /*#__PURE__*/ _jsx(StaticDateTimePicker, {
-                            timezone: stdTimeZone,
-                            displayStaticWrapperAs: "desktop",
-                            openTo: "day",
-                            disableHighlightToday: true,
-                            value: new TZDate(timeRange.end, stdTimeZone),
-                            minDateTime: new TZDate(timeRange.start, stdTimeZone),
-                            onChange: (newValue)=>{
-                                if (newValue === null) return;
-                                onChangeEndTime(newValue);
-                            },
-                            onAccept: (newValue)=>{
-                                if (newValue === null) return;
-                                setShowStartCalendar(true);
-                                onChangeEndTime(newValue);
-                            }
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs(Stack, {
-                    direction: "row",
-                    alignItems: "center",
-                    gap: 1,
-                    pl: 1,
-                    pr: 1,
-                    children: [
-                        /*#__PURE__*/ _jsx(ErrorBoundary, {
-                            FallbackComponent: ErrorAlert,
-                            children: /*#__PURE__*/ _jsx(DateTimeField, {
-                                "data-testid": "start_time_input",
-                                timezone: stdTimeZone,
-                                label: "Start Time",
-                                value: new TZDate(timeRange.start, stdTimeZone),
-                                onChange: (event)=>{
-                                    if (event) {
-                                        onChangeStartTime(event);
-                                    }
-                                },
-                                onBlur: ()=>updateDateRange(),
-                                format: DATE_TIME_FORMAT
-                            })
-                        }),
-                        /*#__PURE__*/ _jsx(ErrorBoundary, {
-                            FallbackComponent: ErrorAlert,
-                            children: /*#__PURE__*/ _jsx(DateTimeField, {
-                                "data-testid": "end_time_input",
-                                timezone: stdTimeZone,
-                                label: "End Time",
-                                value: new TZDate(timeRange.end, stdTimeZone),
-                                onChange: (event)=>{
-                                    if (event) {
-                                        onChangeEndTime(event);
-                                    }
-                                },
-                                onBlur: ()=>updateDateRange(),
-                                format: DATE_TIME_FORMAT
-                            })
-                        })
-                    ]
+                /*#__PURE__*/ _jsx(StaticDateTimePicker, {
+                    timezone: stdTimeZone,
+                    displayStaticWrapperAs: "desktop",
+                    openTo: "day",
+                    disableHighlightToday: true,
+                    value: new TZDate(timeRange.start, stdTimeZone),
+                    onChange: (newValue)=>{
+                        if (newValue === null) {
+                            return;
+                        }
+                        onChangeStartTime(newValue);
+                    },
+                    onAccept: ()=>{
+                        setShowStartCalendar(false);
+                    }
+                })
+            ]
+        });
+        $[11] = showStartCalendar;
+        $[12] = stdTimeZone;
+        $[13] = timeRange.start;
+        $[14] = t7;
+    } else {
+        t7 = $[14];
+    }
+    let t8;
+    if ($[15] !== showStartCalendar || $[16] !== stdTimeZone || $[17] !== timeRange.end || $[18] !== timeRange.start) {
+        t8 = !showStartCalendar && /*#__PURE__*/ _jsxs(Box, {
+            sx: _temp3,
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h3",
+                    padding: 1,
+                    paddingLeft: 2,
+                    children: "Select End Time"
                 }),
-                /*#__PURE__*/ _jsxs(Stack, {
-                    direction: "row",
-                    sx: {
-                        padding: (theme)=>theme.spacing(0, 1)
+                /*#__PURE__*/ _jsx(StaticDateTimePicker, {
+                    timezone: stdTimeZone,
+                    displayStaticWrapperAs: "desktop",
+                    openTo: "day",
+                    disableHighlightToday: true,
+                    value: new TZDate(timeRange.end, stdTimeZone),
+                    minDateTime: new TZDate(timeRange.start, stdTimeZone),
+                    onChange: (newValue_0)=>{
+                        if (newValue_0 === null) {
+                            return;
+                        }
+                        onChangeEndTime(newValue_0);
                     },
-                    gap: 1,
-                    children: [
-                        /*#__PURE__*/ _jsx(Button, {
-                            variant: "contained",
-                            onClick: ()=>onApply(),
-                            fullWidth: true,
-                            children: "Apply"
-                        }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            variant: "outlined",
-                            onClick: ()=>onCancel(),
-                            fullWidth: true,
-                            children: "Cancel"
-                        })
-                    ]
+                    onAccept: (newValue_1)=>{
+                        if (newValue_1 === null) {
+                            return;
+                        }
+                        setShowStartCalendar(true);
+                        onChangeEndTime(newValue_1);
+                    }
                 })
             ]
-        })
-    });
+        });
+        $[15] = showStartCalendar;
+        $[16] = stdTimeZone;
+        $[17] = timeRange.end;
+        $[18] = timeRange.start;
+        $[19] = t8;
+    } else {
+        t8 = $[19];
+    }
+    let t9;
+    if ($[20] !== stdTimeZone || $[21] !== timeRange.start) {
+        t9 = new TZDate(timeRange.start, stdTimeZone);
+        $[20] = stdTimeZone;
+        $[21] = timeRange.start;
+        $[22] = t9;
+    } else {
+        t9 = $[22];
+    }
+    let t10;
+    if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+        t10 = (event)=>{
+            if (event) {
+                onChangeStartTime(event);
+            }
+        };
+        $[23] = t10;
+    } else {
+        t10 = $[23];
+    }
+    let t11;
+    if ($[24] !== updateDateRange) {
+        t11 = ()=>updateDateRange();
+        $[24] = updateDateRange;
+        $[25] = t11;
+    } else {
+        t11 = $[25];
+    }
+    let t12;
+    if ($[26] !== stdTimeZone || $[27] !== t11 || $[28] !== t9) {
+        t12 = /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorAlert,
+            children: /*#__PURE__*/ _jsx(DateTimeField, {
+                "data-testid": "start_time_input",
+                timezone: stdTimeZone,
+                label: "Start Time",
+                value: t9,
+                onChange: t10,
+                onBlur: t11,
+                format: DATE_TIME_FORMAT
+            })
+        });
+        $[26] = stdTimeZone;
+        $[27] = t11;
+        $[28] = t9;
+        $[29] = t12;
+    } else {
+        t12 = $[29];
+    }
+    let t13;
+    if ($[30] !== stdTimeZone || $[31] !== timeRange.end) {
+        t13 = new TZDate(timeRange.end, stdTimeZone);
+        $[30] = stdTimeZone;
+        $[31] = timeRange.end;
+        $[32] = t13;
+    } else {
+        t13 = $[32];
+    }
+    let t14;
+    if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+        t14 = (event_0)=>{
+            if (event_0) {
+                onChangeEndTime(event_0);
+            }
+        };
+        $[33] = t14;
+    } else {
+        t14 = $[33];
+    }
+    let t15;
+    if ($[34] !== updateDateRange) {
+        t15 = ()=>updateDateRange();
+        $[34] = updateDateRange;
+        $[35] = t15;
+    } else {
+        t15 = $[35];
+    }
+    let t16;
+    if ($[36] !== stdTimeZone || $[37] !== t13 || $[38] !== t15) {
+        t16 = /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorAlert,
+            children: /*#__PURE__*/ _jsx(DateTimeField, {
+                "data-testid": "end_time_input",
+                timezone: stdTimeZone,
+                label: "End Time",
+                value: t13,
+                onChange: t14,
+                onBlur: t15,
+                format: DATE_TIME_FORMAT
+            })
+        });
+        $[36] = stdTimeZone;
+        $[37] = t13;
+        $[38] = t15;
+        $[39] = t16;
+    } else {
+        t16 = $[39];
+    }
+    let t17;
+    if ($[40] !== t12 || $[41] !== t16) {
+        t17 = /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            gap: 1,
+            pl: 1,
+            pr: 1,
+            children: [
+                t12,
+                t16
+            ]
+        });
+        $[40] = t12;
+        $[41] = t16;
+        $[42] = t17;
+    } else {
+        t17 = $[42];
+    }
+    let t18;
+    if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+        t18 = {
+            padding: _temp4
+        };
+        $[43] = t18;
+    } else {
+        t18 = $[43];
+    }
+    let t19;
+    if ($[44] !== onApply) {
+        t19 = /*#__PURE__*/ _jsx(Button, {
+            variant: "contained",
+            onClick: ()=>onApply(),
+            fullWidth: true,
+            children: "Apply"
+        });
+        $[44] = onApply;
+        $[45] = t19;
+    } else {
+        t19 = $[45];
+    }
+    let t20;
+    if ($[46] !== onCancel) {
+        t20 = /*#__PURE__*/ _jsx(Button, {
+            variant: "outlined",
+            onClick: ()=>onCancel(),
+            fullWidth: true,
+            children: "Cancel"
+        });
+        $[46] = onCancel;
+        $[47] = t20;
+    } else {
+        t20 = $[47];
+    }
+    let t21;
+    if ($[48] !== t19 || $[49] !== t20) {
+        t21 = /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            sx: t18,
+            gap: 1,
+            children: [
+                t19,
+                t20
+            ]
+        });
+        $[48] = t19;
+        $[49] = t20;
+        $[50] = t21;
+    } else {
+        t21 = $[50];
+    }
+    let t22;
+    if ($[51] !== t17 || $[52] !== t21 || $[53] !== t7 || $[54] !== t8) {
+        t22 = /*#__PURE__*/ _jsx(LocalizationProvider, {
+            dateAdapter: AdapterDateFns,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                sx: _temp,
+                children: [
+                    t7,
+                    t8,
+                    t17,
+                    t21
+                ]
+            })
+        });
+        $[51] = t17;
+        $[52] = t21;
+        $[53] = t7;
+        $[54] = t8;
+        $[55] = t22;
+    } else {
+        t22 = $[55];
+    }
+    return t22;
 };
+function _temp(theme) {
+    return {
+        padding: theme.spacing(1, 0, 2)
+    };
+}
+function _temp2(theme_0) {
+    return {
+        ".MuiPickersLayout-contentWrapper": {
+            backgroundColor: theme_0.palette.background.default
+        }
+    };
+}
+function _temp3(theme_1) {
+    return {
+        ".MuiPickersLayout-contentWrapper": {
+            backgroundColor: theme_1.palette.background.default
+        }
+    };
+}
+function _temp4(theme_2) {
+    return theme_2.spacing(0, 1);
+}
 
 //# sourceMappingURL=DateTimeRangePicker.js.map

package/dist/TimeRangeSelector/DateTimeRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"sourcesContent":["// Copyright 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 { TZDate } from '@date-fns/tz';\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 type { AbsoluteTimeRange } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { useState } from 'react';\n\nimport { ErrorAlert } from '../ErrorAlert';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { DATE_TIME_FORMAT, validateDateRange } from './utils';\n\nexport interface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n  timeZone: 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  const stdTimeZone = ['local', 'browser'].includes(timeZone.toLowerCase())\n    ? new Intl.DateTimeFormat().resolvedOptions().timeZone\n    : timeZone;\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: Date, segment: keyof AbsoluteTimeRange): void => {\n    setTimeRange((prevTimeRange) => {\n      return {\n        ...prevTimeRange,\n        [segment]: newTime,\n      };\n    });\n  };\n\n  const onChangeStartTime = (newStartTime: Date): void => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: Date): void => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = (): { start: Date; end: Date } | undefined => {\n    const newDates = {\n      start: timeRange.start,\n      end: timeRange.end,\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\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              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.start, stdTimeZone)}\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              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.end, stdTimeZone)}\n              minDateTime={new TZDate(timeRange.start, stdTimeZone)}\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              data-testid=\"start_time_input\"\n              timezone={stdTimeZone}\n              label=\"Start Time\"\n              value={new TZDate(timeRange.start, stdTimeZone)}\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              data-testid=\"end_time_input\"\n              timezone={stdTimeZone}\n              label=\"End Time\"\n              value={new TZDate(timeRange.end, stdTimeZone)}\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":["TZDate","Box","Stack","Typography","Button","DateTimeField","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useState","ErrorAlert","ErrorBoundary","DATE_TIME_FORMAT","validateDateRange","DateTimeRangePicker","initialTimeRange","onChange","onCancel","timeZone","stdTimeZone","includes","toLowerCase","Intl","DateTimeFormat","resolvedOptions","timeRange","setTimeRange","showStartCalendar","setShowStartCalendar","changeTimeRange","newTime","segment","prevTimeRange","onChangeStartTime","newStartTime","onChangeEndTime","newEndTime","updateDateRange","newDates","start","end","isValidDateRange","onApply","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","variant","paddingLeft","timezone","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","minDateTime","direction","alignItems","gap","pl","pr","FallbackComponent","data-testid","label","event","onBlur","format","onClick","fullWidth"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"sourcesContent":["// Copyright 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 { TZDate } from '@date-fns/tz';\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 type { AbsoluteTimeRange } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { useState } from 'react';\n\nimport { ErrorAlert } from '../ErrorAlert';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { DATE_TIME_FORMAT, validateDateRange } from './utils';\n\nexport interface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n  timeZone: 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  const stdTimeZone = ['local', 'browser'].includes(timeZone.toLowerCase())\n    ? new Intl.DateTimeFormat().resolvedOptions().timeZone\n    : timeZone;\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: Date, segment: keyof AbsoluteTimeRange): void => {\n    setTimeRange((prevTimeRange) => {\n      return {\n        ...prevTimeRange,\n        [segment]: newTime,\n      };\n    });\n  };\n\n  const onChangeStartTime = (newStartTime: Date): void => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: Date): void => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = (): { start: Date; end: Date } | undefined => {\n    const newDates = {\n      start: timeRange.start,\n      end: timeRange.end,\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\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              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.start, stdTimeZone)}\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              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.end, stdTimeZone)}\n              minDateTime={new TZDate(timeRange.start, stdTimeZone)}\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              data-testid=\"start_time_input\"\n              timezone={stdTimeZone}\n              label=\"Start Time\"\n              value={new TZDate(timeRange.start, stdTimeZone)}\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              data-testid=\"end_time_input\"\n              timezone={stdTimeZone}\n              label=\"End Time\"\n              value={new TZDate(timeRange.end, stdTimeZone)}\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":["TZDate","Box","Stack","Typography","Button","DateTimeField","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useState","ErrorAlert","ErrorBoundary","DATE_TIME_FORMAT","validateDateRange","DateTimeRangePicker"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,QAAQ,eAAe;AACtC,SAASC,GAAG,EAAEC,KAAK,EAAEC,UAAU,EAAEC,MAAM,QAAQ,gBAAgB;AAC/D,SAASC,aAAa,EAAEC,oBAAoB,EAAEC,oBAAoB,QAAQ,sBAAsB;AAChG,SAASC,cAAc,QAAQ,uCAAuC;AAGtE,SAASC,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,UAAU,QAAQ,mBAAgB;AAC3C,SAASC,aAAa,QAAQ,sBAAmB;AACjD,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,aAAU;AAS9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4JjC"}