@perses-dev/components 0.22.0 → 0.23.1

package/README.md

@@ -2,8 +2,7 @@
 
 This [package](https://www.npmjs.com/package/@perses-dev/components) includes individual components used in the Perses app and plugins. These components are broken up in a way that allows embedding in separate applications outside of Perses. For more info about corresponding packages see the [general UI README here](https://github.com/perses/perses/blob/main/ui/README.md) and markdown files in each component folder.
 
-
-## Usage 
+## Usage
 
 To import components from the components package use the syntax below:
 
@@ -11,7 +10,7 @@ To import components from the components package use the syntax below:
 import { LineChart } from "@perses-dev/components";
 ```
 
-For detailed examples of how to use certain components, see individual docs for: 
+For detailed examples of how to use certain components, see individual docs for:
 
 - [LineChart.md](./src/LineChart/LineChart.md)
 - [GaugeChart.md](./src/GaugeChart/GaugeChart.md)

package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts

@@ -3,7 +3,8 @@ import { AbsoluteTimeRange } from '@perses-dev/core';
 interface AbsoluteTimeFormProps {
     initialTimeRange: AbsoluteTimeRange;
     onChange: (timeRange: AbsoluteTimeRange) => void;
+    onCancel: () => void;
 }
-export declare const AbsoluteTimePicker: ({ initialTimeRange, onChange }: AbsoluteTimeFormProps) => JSX.Element;
+export declare const AbsoluteTimePicker: ({ initialTimeRange, onChange, onCancel }: AbsoluteTimeFormProps) => JSX.Element;
 export {};
 //# sourceMappingURL=AbsoluteTimePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AbsoluteTimePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.tsx"],"names":[],"mappings":";AAiBA,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;CAClD;AAED,eAAO,MAAM,kBAAkB,mCAAoC,qBAAqB,gBAuIvF,CAAC"}
+{"version":3,"file":"AbsoluteTimePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.tsx"],"names":[],"mappings":";AAiBA,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,eAAO,MAAM,kBAAkB,6CAA8C,qBAAqB,gBAoLjG,CAAC"}

package/dist/DateTimeRangePicker/AbsoluteTimePicker.js

@@ -12,43 +12,66 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box, Stack, TextField, Typography } from '@mui/material';
+import { Box, Stack, TextField, Typography, Button } from '@mui/material';
 import { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { useTimeZone } from '../context/TimeZoneProvider';
 import { validateDateRange } from './utils';
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
-export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
+export const AbsoluteTimePicker = ({ 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: formatWithUserTimeZone(initialTimeRange.start, DATE_TIME_FORMAT),
+        end: formatWithUserTimeZone(initialTimeRange.end, DATE_TIME_FORMAT)
+    });
     const [showStartCalendar, setShowStartCalendar] = useState(true);
-    const { formatWithUserTimeZone  } = useTimeZone();
-    // validate start and end time, propagate changes
-    const updateDateRange = (input, isStartDate)=>{
-        const newDate = new Date(input);
-        if (isStartDate === true) {
-            const isValidDateRange = validateDateRange(newDate, timeRange.end);
-            if (isValidDateRange === true) {
-                setTimeRange((current)=>{
-                    const updatedRange = {
-                        start: newDate,
-                        end: current.end
-                    };
-                    onChange(updatedRange);
-                    return updatedRange;
-                });
-            }
-        } else {
-            const isValidDateRange1 = validateDateRange(timeRange.start, newDate);
-            if (isValidDateRange1 === true) {
-                setTimeRange((current)=>{
-                    const updatedRange = {
-                        start: current.start,
-                        end: newDate
-                    };
-                    onChange(updatedRange);
-                    return updatedRange;
-                });
-            }
+    const changeTimeRange = (newTime, segment)=>{
+        const isInputChange = typeof newTime === 'string';
+        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, DATE_TIME_FORMAT);
+        setTimeRangeInputs((prevTimeRangeInputs)=>{
+            return {
+                ...prevTimeRangeInputs,
+                [segment]: newInputTime
+            };
+        });
+        // When the change is a string from an input, do not try to convert it to
+        // a date because there are likely to be interim stages of editing where it
+        // is not valid as a date. When the change is a Date from the calendar/clock
+        // interface, we can be sure it is a date.
+        if (!isInputChange) {
+            setTimeRange((prevTimeRange)=>{
+                return {
+                    ...prevTimeRange,
+                    [segment]: newTime
+                };
+            });
+        }
+    };
+    const onChangeStartTime = (newStartTime)=>{
+        changeTimeRange(newStartTime, 'start');
+    };
+    const onChangeEndTime = (newEndTime)=>{
+        changeTimeRange(newEndTime, 'end');
+    };
+    const updateDateRange = ()=>{
+        const newDates = {
+            start: new Date(timeRangeInputs.start),
+            end: new Date(timeRangeInputs.end)
+        };
+        const isValidDateRange = validateDateRange(newDates.start, newDates.end);
+        if (isValidDateRange) {
+            setTimeRange(newDates);
+            return newDates;
+        }
+    };
+    const onApply = ()=>{
+        const newDates = updateDateRange();
+        if (newDates) {
+            onChange(newDates);
         }
     };
     return /*#__PURE__*/ _jsx(LocalizationProvider, {
@@ -85,12 +108,7 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                             value: initialTimeRange.start,
                             onChange: (newValue)=>{
                                 if (newValue === null) return;
-                                setTimeRange((current)=>{
-                                    return {
-                                        start: newValue,
-                                        end: current.end
-                                    };
-                                });
+                                onChangeStartTime(newValue);
                             },
                             onAccept: ()=>{
                                 setShowStartCalendar(false);
@@ -127,16 +145,12 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                             minDateTime: timeRange.start,
                             onChange: (newValue)=>{
                                 if (newValue === null) return;
-                                setTimeRange((current)=>{
-                                    return {
-                                        start: current.start,
-                                        end: newValue
-                                    };
-                                });
+                                onChangeEndTime(newValue);
                             },
-                            onAccept: ()=>{
+                            onAccept: (newValue)=>{
+                                if (newValue === null) return;
                                 setShowStartCalendar(true);
-                                onChange(timeRange);
+                                onChangeEndTime(newValue);
                             },
                             renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
                                     ...params
@@ -154,24 +168,47 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                         /*#__PURE__*/ _jsx(TextField, {
                             onChange: (event)=>{
                                 // TODO: add helperText, fix validation after we decide on form state solution
-                                updateDateRange(event.target.value, true);
+                                onChangeStartTime(event.target.value);
                             },
-                            value: formatWithUserTimeZone(timeRange.start, DATE_TIME_FORMAT),
+                            onBlur: ()=>updateDateRange(),
+                            value: timeRangeInputs.start,
                             label: "Start Time",
-                            placeholder: "mm/dd/yyyy hh:mm",
+                            placeholder: DATE_TIME_FORMAT,
                             // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590
                             type: "tel"
                         }),
                         /*#__PURE__*/ _jsx(TextField, {
                             onChange: (event)=>{
-                                updateDateRange(event.target.value, false);
+                                onChangeEndTime(event.target.value);
                             },
-                            value: formatWithUserTimeZone(timeRange.end, DATE_TIME_FORMAT),
+                            onBlur: ()=>updateDateRange(),
+                            value: timeRangeInputs.end,
                             label: "End Time",
-                            placeholder: "mm/dd/yyyy hh:mm",
+                            placeholder: DATE_TIME_FORMAT,
                             type: "tel"
                         })
                     ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    sx: {
+                        padding: (theme)=>theme.spacing(0, 1)
+                    },
+                    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"
+                        })
+                    ]
                 })
             ]
         })

package/dist/DateTimeRangePicker/AbsoluteTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.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 { useState } from 'react';\nimport { Box, Stack, TextField, Typography } from '@mui/material';\nimport { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { validateDateRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\ninterface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n}\n\nexport const AbsoluteTimePicker = ({ initialTimeRange, onChange }: AbsoluteTimeFormProps) => {\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  // validate start and end time, propagate changes\n  const updateDateRange = (input: string, isStartDate: boolean) => {\n    const newDate = new Date(input);\n    if (isStartDate === true) {\n      const isValidDateRange = validateDateRange(newDate, timeRange.end);\n      if (isValidDateRange === true) {\n        setTimeRange((current) => {\n          const updatedRange = { start: newDate, end: current.end };\n          onChange(updatedRange);\n          return updatedRange;\n        });\n      }\n    } else {\n      const isValidDateRange = validateDateRange(timeRange.start, newDate);\n      if (isValidDateRange === true) {\n        setTimeRange((current) => {\n          const updatedRange = { start: current.start, end: newDate };\n          onChange(updatedRange);\n          return updatedRange;\n        });\n      }\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              '.MuiPickerStaticWrapper-content': {\n                backgroundColor: theme.palette.background.default,\n              },\n              // reposition AM and PM buttons\n              '.MuiIconButton-sizeMedium': {\n                top: 80,\n                bottom: 'auto',\n                margin: theme.spacing(0, 3),\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1}>\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                setTimeRange((current) => {\n                  return { start: newValue, end: current.end };\n                });\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n              renderInput={(params) => <TextField {...params} />}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickerStaticWrapper-content': {\n                backgroundColor: theme.palette.background.default,\n              },\n              // reposition AM and PM buttons\n              '.MuiIconButton-sizeMedium': {\n                top: 80,\n                bottom: 'auto',\n                margin: theme.spacing(0, 3),\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1}>\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                setTimeRange((current) => {\n                  return { start: current.start, end: newValue };\n                });\n              }}\n              onAccept={() => {\n                setShowStartCalendar(true);\n                onChange(timeRange);\n              }}\n              renderInput={(params) => <TextField {...params} />}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              // TODO: add helperText, fix validation after we decide on form state solution\n              updateDateRange(event.target.value, true);\n            }}\n            value={formatWithUserTimeZone(timeRange.start, DATE_TIME_FORMAT)}\n            label=\"Start Time\"\n            placeholder=\"mm/dd/yyyy hh:mm\"\n            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590\n            type=\"tel\"\n          />\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              updateDateRange(event.target.value, false);\n            }}\n            value={formatWithUserTimeZone(timeRange.end, DATE_TIME_FORMAT)}\n            label=\"End Time\"\n            placeholder=\"mm/dd/yyyy hh:mm\"\n            type=\"tel\"\n          />\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["useState","Box","Stack","TextField","Typography","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useTimeZone","validateDateRange","DATE_TIME_FORMAT","AbsoluteTimePicker","initialTimeRange","onChange","timeRange","setTimeRange","showStartCalendar","setShowStartCalendar","formatWithUserTimeZone","updateDateRange","input","isStartDate","newDate","Date","isValidDateRange","end","current","updatedRange","start","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","top","bottom","margin","variant","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","renderInput","params","minDateTime","direction","alignItems","gap","pl","pr","event","target","label","placeholder","type"],"mappings":"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"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.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 { useState } from 'react';\nimport { Box, Stack, TextField, Typography, Button } from '@mui/material';\nimport { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { validateDateRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\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\nexport const AbsoluteTimePicker = ({ initialTimeRange, onChange, onCancel }: AbsoluteTimeFormProps) => {\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) => {\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) => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: string | Date) => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = () => {\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 = () => {\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              '.MuiPickerStaticWrapper-content': {\n                backgroundColor: theme.palette.background.default,\n              },\n              // reposition AM and PM buttons\n              '.MuiIconButton-sizeMedium': {\n                top: 80,\n                bottom: 'auto',\n                margin: theme.spacing(0, 3),\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1}>\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              renderInput={(params) => <TextField {...params} />}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickerStaticWrapper-content': {\n                backgroundColor: theme.palette.background.default,\n              },\n              // reposition AM and PM buttons\n              '.MuiIconButton-sizeMedium': {\n                top: 80,\n                bottom: 'auto',\n                margin: theme.spacing(0, 3),\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1}>\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              renderInput={(params) => <TextField {...params} />}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              // TODO: add helperText, fix validation after we decide on form state solution\n              onChangeStartTime(event.target.value);\n            }}\n            onBlur={() => updateDateRange()}\n            value={timeRangeInputs.start}\n            label=\"Start Time\"\n            placeholder={DATE_TIME_FORMAT}\n            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590\n            type=\"tel\"\n          />\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              onChangeEndTime(event.target.value);\n            }}\n            onBlur={() => updateDateRange()}\n            value={timeRangeInputs.end}\n            label=\"End Time\"\n            placeholder={DATE_TIME_FORMAT}\n            type=\"tel\"\n          />\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","TextField","Typography","Button","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useTimeZone","validateDateRange","DATE_TIME_FORMAT","AbsoluteTimePicker","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","top","bottom","margin","variant","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","renderInput","params","minDateTime","direction","alignItems","gap","pl","pr","event","target","onBlur","label","placeholder","type","onClick","fullWidth"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"names":[],"mappings":";AAeA,OAAO,EAML,cAAc,EACf,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAqB,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEpE,UAAU,wBAAwB;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAuDlE"}
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"names":[],"mappings":";AAeA,OAAO,EAML,cAAc,EACf,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAqB,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEpE,UAAU,wBAAwB;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAwDlE"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.js

@@ -46,7 +46,8 @@ export function DateTimeRangePicker(props) {
                     onChange: (value)=>{
                         onChange(value);
                         setShowCustomDateSelector(false);
-                    }
+                    },
+                    onCancel: ()=>setShowCustomDateSelector(false)
                 })
             }),
             /*#__PURE__*/ _jsx(FormControl, {

package/dist/DateTimeRangePicker/DateTimeRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.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 { useRef, useState, useMemo } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  TimeRangeValue,\n} from '@perses-dev/core';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector, TimeOption } from './TimeRangeSelector';\n\ninterface DateTimeRangePickerProps {\n  value: TimeRangeValue;\n  onChange: (value: TimeRangeValue) => void;\n  timeOptions: TimeOption[];\n  height?: string;\n}\n\nexport function DateTimeRangePicker(props: DateTimeRangePickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  return (\n    <Stack direction=\"row\" spacing={1} height={height}>\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        <AbsoluteTimePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n          }}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={timeOptions}\n            value={value}\n            height={height}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              onChange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","isRelativeTimeRange","toAbsoluteTimeRange","AbsoluteTimePicker","TimeRangeSelector","DateTimeRangePicker","props","value","onChange","timeOptions","height","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","fullWidth","ref","onSelectChange","event","duration","target","relativeTimeInput","pastDuration","end","Date","onCustomClick"],"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;AAAA,SAASA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,OAAO,CAAC;AAClD,SAASC,GAAG,EAAEC,WAAW,EAAEC,OAAO,EAAEC,KAAK,QAAQ,eAAe,CAAC;AACjE,SAIEC,mBAAmB,EACnBC,mBAAmB,QAEd,kBAAkB,CAAC;AAC1B,SAASC,kBAAkB,QAAQ,sBAAsB,CAAC;AAC1D,SAASC,iBAAiB,QAAoB,qBAAqB,CAAC;AASpE,OAAO,SAASC,mBAAmB,CAACC,KAA+B,EAAE;IACnE,MAAM,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGJ,KAAK,AAAC;IAEvD,MAAM,CAACK,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAC5E,MAAMkB,QAAQ,GAAGnB,MAAM,EAAE,AAAC;IAE1B,MAAMoB,kBAAkB,GAAGlB,OAAO,CAAC,IAAM;QACvC,OAAOK,mBAAmB,CAACM,KAAK,CAAC,GAAGL,mBAAmB,CAACK,KAAK,CAAC,GAAGA,KAAK,CAAC;IACzE,CAAC,EAAE;QAACA,KAAK;KAAC,CAAC,AAAC;IAEZ,qBACE,MAACP,KAAK;QAACe,SAAS,EAAC,KAAK;QAACC,OAAO,EAAE,CAAC;QAAEN,MAAM,EAAEA,MAAM;;0BAC/C,KAACX,OAAO;gBACNc,QAAQ,EAAEA,QAAQ,CAACI,OAAO;gBAC1BC,YAAY,EAAE;oBACZC,QAAQ,EAAE,QAAQ;oBAClBC,UAAU,EAAE,QAAQ;iBACrB;gBACDC,IAAI,EAAEV,sBAAsB;gBAC5BW,OAAO,EAAE,IAAMV,yBAAyB,CAAC,KAAK,CAAC;gBAC/CW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,OAAO,EAAED,KAAK,CAACR,OAAO,CAAC,CAAC,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACb,kBAAkB;oBACjBuB,gBAAgB,EAAEZ,kBAAkB;oBACpCN,QAAQ,EAAE,CAACD,KAAwB,GAAK;wBACtCC,QAAQ,CAACD,KAAK,CAAC,CAAC;wBAChBK,yBAAyB,CAAC,KAAK,CAAC,CAAC;oBACnC,CAAC;kBACD;cACM;0BACV,KAACd,WAAW;gBAAC6B,SAAS;0BACpB,cAAA,KAAC9B,GAAG;oBAAC+B,GAAG,EAAEf,QAAQ;8BAChB,cAAA,KAACT,iBAAiB;wBAChBK,WAAW,EAAEA,WAAW;wBACxBF,KAAK,EAAEA,KAAK;wBACZG,MAAM,EAAEA,MAAM;wBACdmB,cAAc,EAAE,CAACC,KAAK,GAAK;4BACzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAACzB,KAAK,AAAC;4BACpC,MAAM0B,iBAAiB,GAAsB;gCAC3CC,YAAY,EAAEH,QAAQ;gCACtBI,GAAG,EAAE,IAAIC,IAAI,EAAE;6BAChB,AAAC;4BACF5B,QAAQ,CAACyB,iBAAiB,CAAC,CAAC;4BAC5BrB,yBAAyB,CAAC,KAAK,CAAC,CAAC;wBACnC,CAAC;wBACDyB,aAAa,EAAE,IAAM;4BACnBzB,yBAAyB,CAAC,IAAI,CAAC,CAAC;wBAClC,CAAC;sBACD;kBACE;cACM;;MACR,CACR;AACJ,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.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 { useRef, useState, useMemo } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  TimeRangeValue,\n} from '@perses-dev/core';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector, TimeOption } from './TimeRangeSelector';\n\ninterface DateTimeRangePickerProps {\n  value: TimeRangeValue;\n  onChange: (value: TimeRangeValue) => void;\n  timeOptions: TimeOption[];\n  height?: string;\n}\n\nexport function DateTimeRangePicker(props: DateTimeRangePickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  return (\n    <Stack direction=\"row\" spacing={1} height={height}>\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        <AbsoluteTimePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={timeOptions}\n            value={value}\n            height={height}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              onChange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","isRelativeTimeRange","toAbsoluteTimeRange","AbsoluteTimePicker","TimeRangeSelector","DateTimeRangePicker","props","value","onChange","timeOptions","height","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onCancel","fullWidth","ref","onSelectChange","event","duration","target","relativeTimeInput","pastDuration","end","Date","onCustomClick"],"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;AAAA,SAASA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,OAAO,CAAC;AAClD,SAASC,GAAG,EAAEC,WAAW,EAAEC,OAAO,EAAEC,KAAK,QAAQ,eAAe,CAAC;AACjE,SAIEC,mBAAmB,EACnBC,mBAAmB,QAEd,kBAAkB,CAAC;AAC1B,SAASC,kBAAkB,QAAQ,sBAAsB,CAAC;AAC1D,SAASC,iBAAiB,QAAoB,qBAAqB,CAAC;AASpE,OAAO,SAASC,mBAAmB,CAACC,KAA+B,EAAE;IACnE,MAAM,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGJ,KAAK,AAAC;IAEvD,MAAM,CAACK,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAC5E,MAAMkB,QAAQ,GAAGnB,MAAM,EAAE,AAAC;IAE1B,MAAMoB,kBAAkB,GAAGlB,OAAO,CAAC,IAAM;QACvC,OAAOK,mBAAmB,CAACM,KAAK,CAAC,GAAGL,mBAAmB,CAACK,KAAK,CAAC,GAAGA,KAAK,CAAC;IACzE,CAAC,EAAE;QAACA,KAAK;KAAC,CAAC,AAAC;IAEZ,qBACE,MAACP,KAAK;QAACe,SAAS,EAAC,KAAK;QAACC,OAAO,EAAE,CAAC;QAAEN,MAAM,EAAEA,MAAM;;0BAC/C,KAACX,OAAO;gBACNc,QAAQ,EAAEA,QAAQ,CAACI,OAAO;gBAC1BC,YAAY,EAAE;oBACZC,QAAQ,EAAE,QAAQ;oBAClBC,UAAU,EAAE,QAAQ;iBACrB;gBACDC,IAAI,EAAEV,sBAAsB;gBAC5BW,OAAO,EAAE,IAAMV,yBAAyB,CAAC,KAAK,CAAC;gBAC/CW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,OAAO,EAAED,KAAK,CAACR,OAAO,CAAC,CAAC,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACb,kBAAkB;oBACjBuB,gBAAgB,EAAEZ,kBAAkB;oBACpCN,QAAQ,EAAE,CAACD,KAAwB,GAAK;wBACtCC,QAAQ,CAACD,KAAK,CAAC,CAAC;wBAChBK,yBAAyB,CAAC,KAAK,CAAC,CAAC;oBACnC,CAAC;oBACDe,QAAQ,EAAE,IAAMf,yBAAyB,CAAC,KAAK,CAAC;kBAChD;cACM;0BACV,KAACd,WAAW;gBAAC8B,SAAS;0BACpB,cAAA,KAAC/B,GAAG;oBAACgC,GAAG,EAAEhB,QAAQ;8BAChB,cAAA,KAACT,iBAAiB;wBAChBK,WAAW,EAAEA,WAAW;wBACxBF,KAAK,EAAEA,KAAK;wBACZG,MAAM,EAAEA,MAAM;wBACdoB,cAAc,EAAE,CAACC,KAAK,GAAK;4BACzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAAC1B,KAAK,AAAC;4BACpC,MAAM2B,iBAAiB,GAAsB;gCAC3CC,YAAY,EAAEH,QAAQ;gCACtBI,GAAG,EAAE,IAAIC,IAAI,EAAE;6BAChB,AAAC;4BACF7B,QAAQ,CAAC0B,iBAAiB,CAAC,CAAC;4BAC5BtB,yBAAyB,CAAC,KAAK,CAAC,CAAC;wBACnC,CAAC;wBACD0B,aAAa,EAAE,IAAM;4BACnB1B,yBAAyB,CAAC,IAAI,CAAC,CAAC;wBAClC,CAAC;sBACD;kBACE;cACM;;MACR,CACR;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAM1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA4C9D"}
+{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAM1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA+C9D"}

package/dist/DateTimeRangePicker/TimeRangeSelector.js

@@ -25,6 +25,9 @@ export function TimeRangeSelector(props) {
         value: formattedValue,
         onChange: onSelectChange,
         IconComponent: Calendar,
+        inputProps: {
+            'aria-label': `Select time range. Currently set to ${formattedValue}`
+        },
         sx: {
             '.MuiSelect-icon': {
                 marginTop: '1px'

package/dist/DateTimeRangePicker/TimeRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n  height?: string;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick, height } = props;\n  const { timeZone } = useTimeZone();\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      sx={{\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","useTimeZone","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","height","timeZone","formattedValue","pastDuration","onChange","IconComponent","sx","marginTop","lineHeight","paddingY","map","item","idx","display","onClick"],"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;AAAA,SAASA,QAAQ,EAAEC,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAC1D,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAe/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGL,KAAK,AAAC;IAC5E,MAAM,EAAEM,QAAQ,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IACnC,MAAMW,cAAc,GAAG,CAACZ,mBAAmB,CAACM,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,EAAEQ,QAAQ,CAAC,GACtDL,KAAK,CAACO,YAAY,AAAC;IACvB,qBACE,MAACf,MAAM;QACLQ,KAAK,EAAEM,cAAc;QACrBE,QAAQ,EAAEN,cAAc;QACxBO,aAAa,EAAEhB,QAAQ;QACvBiB,EAAE,EAAE;YACF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;aACjB;YACD,mBAAmB,EAAEP,MAAM,GAAG;gBAAEQ,UAAU,EAAER,MAAM;gBAAES,QAAQ,EAAE,CAAC;aAAE,GAAG,EAAE;SACvE;;YAEAZ,WAAW,CAACa,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAACzB,QAAQ;oBAAWS,KAAK,EAAEe,IAAI,CAACf,KAAK,CAACO,YAAY;8BAC/CQ,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDtB,mBAAmB,CAACM,KAAK,CAAC,iBACzB,KAACT,QAAQ;gBACP2B,OAAO,EAAE,IAAM;oBACbf,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACZ,QAAQ;gBACPS,KAAK,EAAEM,cAAc;gBACrBY,OAAO,EAAE,IAAM;oBACbf,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAG,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n  height?: string;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick, height } = props;\n  const { timeZone } = useTimeZone();\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      inputProps={{\n        'aria-label': `Select time range. Currently set to ${formattedValue}`,\n      }}\n      sx={{\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","useTimeZone","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","height","timeZone","formattedValue","pastDuration","onChange","IconComponent","inputProps","sx","marginTop","lineHeight","paddingY","map","item","idx","display","onClick"],"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;AAAA,SAASA,QAAQ,EAAEC,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAC1D,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAe/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGL,KAAK,AAAC;IAC5E,MAAM,EAAEM,QAAQ,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IACnC,MAAMW,cAAc,GAAG,CAACZ,mBAAmB,CAACM,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,EAAEQ,QAAQ,CAAC,GACtDL,KAAK,CAACO,YAAY,AAAC;IACvB,qBACE,MAACf,MAAM;QACLQ,KAAK,EAAEM,cAAc;QACrBE,QAAQ,EAAEN,cAAc;QACxBO,aAAa,EAAEhB,QAAQ;QACvBiB,UAAU,EAAE;YACV,YAAY,EAAE,CAAC,oCAAoC,EAAEJ,cAAc,CAAC,CAAC;SACtE;QACDK,EAAE,EAAE;YACF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;aACjB;YACD,mBAAmB,EAAER,MAAM,GAAG;gBAAES,UAAU,EAAET,MAAM;gBAAEU,QAAQ,EAAE,CAAC;aAAE,GAAG,EAAE;SACvE;;YAEAb,WAAW,CAACc,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAAC1B,QAAQ;oBAAWS,KAAK,EAAEgB,IAAI,CAAChB,KAAK,CAACO,YAAY;8BAC/CS,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDvB,mBAAmB,CAACM,KAAK,CAAC,iBACzB,KAACT,QAAQ;gBACP4B,OAAO,EAAE,IAAM;oBACbhB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACZ,QAAQ;gBACPS,KAAK,EAAEM,cAAc;gBACrBa,OAAO,EAAE,IAAM;oBACbhB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAG,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}

package/dist/Dialog/Dialog.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ButtonProps, DialogActions, DialogContentProps as MuiDialogContentProps, DialogProps, DialogTitleProps } from '@mui/material';
+export interface DialogHeaderProps extends DialogTitleProps {
+    /**
+     * Callback fired when close button is clicked. If undefined, close button will not appear in header.
+     */
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+export declare type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;
+export interface DialogContentProps extends MuiDialogContentProps {
+    /**
+     * @default 500
+     */
+    width?: number;
+}
+export declare const Dialog: {
+    ({ children, ...props }: DialogProps): JSX.Element;
+    Header: ({ children, onClose, ...props }: DialogHeaderProps) => JSX.Element;
+    Content: ({ children, width, sx, ...props }: DialogContentProps) => JSX.Element;
+    PrimaryButton: ({ children, ...props }: DialogButtonProps) => JSX.Element;
+    SecondaryButton: ({ children, ...props }: DialogButtonProps) => JSX.Element;
+    Actions: typeof DialogActions;
+};
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,EAGjB,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,oBAAY,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyCD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CAvCT,iBAAiB;iDAaR,kBAAkB;4CAM7B,iBAAiB;8CAMf,iBAAiB;;CAcyC,CAAC"}

package/dist/Dialog/Dialog.js

@@ -0,0 +1,74 @@
+// 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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Dialog as MuiDialog, DialogActions, DialogContent, DialogTitle, IconButton } from '@mui/material';
+import CloseIcon from 'mdi-material-ui/Close';
+import { combineSx } from '../utils';
+const Header = ({ children , onClose , ...props })=>{
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                ...props,
+                children: children
+            }),
+            onClose && /*#__PURE__*/ _jsx(IconButton, {
+                "aria-label": "Close",
+                onClick: onClose,
+                sx: dialogCloseIconButtonStyle,
+                children: /*#__PURE__*/ _jsx(CloseIcon, {})
+            })
+        ]
+    });
+};
+const Content = ({ children , width =500 , sx , ...props })=>/*#__PURE__*/ _jsx(DialogContent, {
+        dividers: true,
+        ...props,
+        sx: combineSx({
+            width: `${width}px`
+        }, sx),
+        children: children
+    });
+const PrimaryButton = ({ children , ...props })=>/*#__PURE__*/ _jsx(Button, {
+        variant: "contained",
+        type: "submit",
+        ...props,
+        children: children
+    });
+const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ _jsx(Button, {
+        variant: "outlined",
+        color: "secondary",
+        ...props,
+        children: children
+    });
+/**
+ * Render the CSS of the dialog's close button, according to the given material theme.
+ * @param theme material theme
+ */ const dialogCloseIconButtonStyle = (theme)=>{
+    return {
+        position: 'absolute',
+        top: theme.spacing(0.5),
+        right: theme.spacing(0.5)
+    };
+};
+export const Dialog = ({ children , ...props })=>/*#__PURE__*/ _jsx(MuiDialog, {
+        ...props,
+        children: children
+    });
+Dialog.Header = Header;
+Dialog.Content = Content;
+Dialog.PrimaryButton = PrimaryButton;
+Dialog.SecondaryButton = SecondaryButton;
+Dialog.Actions = DialogActions;
+
+//# sourceMappingURL=Dialog.js.map

package/dist/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dialog/Dialog.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 from 'react';\nimport {\n  Button,\n  ButtonProps,\n  Dialog as MuiDialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps as MuiDialogContentProps,\n  DialogProps,\n  DialogTitle,\n  DialogTitleProps,\n  IconButton,\n  Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport interface DialogContentProps extends MuiDialogContentProps {\n  /**\n   * @default 500\n   */\n  width?: number;\n}\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps) => {\n  return (\n    <>\n      <DialogTitle {...props}>{children}</DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, width = 500, sx, ...props }: DialogContentProps) => (\n  <DialogContent dividers {...props} sx={combineSx({ width: `${width}px` }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme) => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","theme","position","top","spacing","right","Actions"],"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;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SACEC,MAAM,EAENC,MAAM,IAAIC,SAAS,EACnBC,aAAa,EACbC,aAAa,EAGbC,WAAW,EAEXC,UAAU,QAEL,eAAe,CAAC;AACvB,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,SAAS,QAAQ,UAAU,CAAC;AAkBrC,MAAMC,MAAM,GAAG,CAAC,EAAEC,QAAQ,CAAA,EAAEC,OAAO,CAAA,EAAE,GAAGC,KAAK,EAAqB,GAAK;IACrE,qBACE;;0BACE,KAACP,WAAW;gBAAE,GAAGO,KAAK;0BAAGF,QAAQ;cAAe;YAC/CC,OAAO,kBACN,KAACL,UAAU;gBAACO,YAAU,EAAC,OAAO;gBAACC,OAAO,EAAEH,OAAO;gBAAEI,EAAE,EAAEC,0BAA0B;0BAC7E,cAAA,KAACT,SAAS,KAAG;cACF,AACd;;MACA,CACH;AACJ,CAAC,AAAC;AAEF,MAAMU,OAAO,GAAG,CAAC,EAAEP,QAAQ,CAAA,EAAEQ,KAAK,EAAG,GAAG,CAAA,EAAEH,EAAE,CAAA,EAAE,GAAGH,KAAK,EAAsB,iBAC1E,KAACR,aAAa;QAACe,QAAQ;QAAE,GAAGP,KAAK;QAAEG,EAAE,EAAEP,SAAS,CAAC;YAAEU,KAAK,EAAE,CAAC,EAAEA,KAAK,CAAC,EAAE,CAAC;SAAE,EAAEH,EAAE,CAAC;kBAC1EL,QAAQ;MACK,AACjB,AAAC;AAEF,MAAMU,aAAa,GAAG,CAAC,EAAEV,QAAQ,CAAA,EAAE,GAAGE,KAAK,EAAqB,iBAC9D,KAACZ,MAAM;QAACqB,OAAO,EAAC,WAAW;QAACC,IAAI,EAAC,QAAQ;QAAE,GAAGV,KAAK;kBAChDF,QAAQ;MACF,AACV,AAAC;AAEF,MAAMa,eAAe,GAAG,CAAC,EAAEb,QAAQ,CAAA,EAAE,GAAGE,KAAK,EAAqB,iBAChE,KAACZ,MAAM;QAACqB,OAAO,EAAC,UAAU;QAACG,KAAK,EAAC,WAAW;QAAE,GAAGZ,KAAK;kBACnDF,QAAQ;MACF,AACV,AAAC;AAEF;;;CAGC,GACD,MAAMM,0BAA0B,GAAG,CAACS,KAAY,GAAK;IACnD,OAAO;QAAEC,QAAQ,EAAE,UAAU;QAAEC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;QAAEC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;KAAE,CAAC;AACtF,CAAC,AAAC;AAEF,OAAO,MAAM3B,MAAM,GAAG,CAAC,EAAES,QAAQ,CAAA,EAAE,GAAGE,KAAK,EAAe,iBAAK,KAACV,SAAS;QAAE,GAAGU,KAAK;kBAAGF,QAAQ;MAAa,CAAC;AAE5GT,MAAM,CAACQ,MAAM,GAAGA,MAAM,CAAC;AACvBR,MAAM,CAACgB,OAAO,GAAGA,OAAO,CAAC;AACzBhB,MAAM,CAACmB,aAAa,GAAGA,aAAa,CAAC;AACrCnB,MAAM,CAACsB,eAAe,GAAGA,eAAe,CAAC;AACzCtB,MAAM,CAAC6B,OAAO,GAAG3B,aAAa,CAAC"}

package/dist/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dialog';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Dialog/index.tsx"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC"}

package/dist/Dialog/index.js

@@ -0,0 +1,15 @@
+// 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.
+export * from './Dialog';
+
+//# sourceMappingURL=index.js.map

package/dist/Dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Dialog/index.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\nexport * from './Dialog';\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,UAAU,CAAC"}

package/dist/GaugeChart/GaugeChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU1D,oBAAY,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA+IhD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAQrG"}
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU1D,oBAAY,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAgJhD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAQrG"}

package/dist/GaugeChart/GaugeChart.js

@@ -191,7 +191,8 @@ export function GaugeChart(props) {
     return /*#__PURE__*/ _jsx(EChart, {
         sx: {
             width: width,
-            height: height
+            height: height,
+            padding: `${chartsTheme.container.padding.default}px`
         },
         option: option,
         theme: chartsTheme.echartsTheme