@perses-dev/components 0.0.0-snapshot-panel-extra-content-3-17f9c42 → 0.0.0-snapshot-scatterplot-fix-imports-95e1b59

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, 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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"}
+{"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              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeStartTime(newValue);\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.end}\n              minDateTime={timeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeEndTime(newValue);\n              }}\n              onAccept={(newValue) => {\n                if (newValue === null) return;\n                setShowStartCalendar(true);\n                onChangeEndTime(newValue);\n              }}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <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","variant","paddingLeft","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TimeRangeValue } from '@perses-dev/core';
 import { TimeOption } from '../model';
 interface DateTimeRangePickerProps {
@@ -7,6 +6,6 @@ interface DateTimeRangePickerProps {
     timeOptions: TimeOption[];
     height?: string;
 }
-export declare function DateTimeRangePicker(props: DateTimeRangePickerProps): JSX.Element;
+export declare function DateTimeRangePicker(props: DateTimeRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DateTimeRangePicker.d.ts.map

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;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,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"}
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAeA,OAAO,EAML,cAAc,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,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,2CAwDlE"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.js

@@ -17,7 +17,7 @@ import { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';
 import { AbsoluteTimePicker } from './AbsoluteTimePicker';
 import { TimeRangeSelector } from './TimeRangeSelector';
 export function DateTimeRangePicker(props) {
-    const { value , onChange , timeOptions , height  } = props;
+    const { value, onChange, timeOptions, height } = props;
     const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);
     const anchorEl = useRef();
     const convertedTimeRange = useMemo(()=>{

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 { TimeOption } from '../model';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector } 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;AAE1B,SAASC,kBAAkB,QAAQ,sBAAsB,CAAC;AAC1D,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AASxD,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"}
+{"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 { TimeOption } from '../model';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector } 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,SAASA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,QAAQ;AAClD,SAASC,GAAG,EAAEC,WAAW,EAAEC,OAAO,EAAEC,KAAK,QAAQ,gBAAgB;AACjE,SAIEC,mBAAmB,EACnBC,mBAAmB,QAEd,mBAAmB;AAE1B,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AASxD,OAAO,SAASC,oBAAoBC,KAA+B;IACjE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGJ;IAEjD,MAAM,CAACK,wBAAwBC,0BAA0B,GAAGjB,SAAS;IACrE,MAAMkB,WAAWnB;IAEjB,MAAMoB,qBAAqBlB,QAAQ;QACjC,OAAOK,oBAAoBM,SAASL,oBAAoBK,SAASA;IACnE,GAAG;QAACA;KAAM;IAEV,qBACE,MAACP;QAAMe,WAAU;QAAMC,SAAS;QAAGN,QAAQA;;0BACzC,KAACX;gBACCc,UAAUA,SAASI,OAAO;gBAC1BC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,MAAMV;gBACNW,SAAS,IAAMV,0BAA0B;gBACzCW,IAAI,CAACC,QAAW,CAAA;wBACdC,SAASD,MAAMR,OAAO,CAAC;oBACzB,CAAA;0BAEA,cAAA,KAACb;oBACCuB,kBAAkBZ;oBAClBN,UAAU,CAACD;wBACTC,SAASD;wBACTK,0BAA0B;oBAC5B;oBACAe,UAAU,IAAMf,0BAA0B;;;0BAG9C,KAACd;gBAAY8B,SAAS;0BACpB,cAAA,KAAC/B;oBAAIgC,KAAKhB;8BACR,cAAA,KAACT;wBACCK,aAAaA;wBACbF,OAAOA;wBACPG,QAAQA;wBACRoB,gBAAgB,CAACC;4BACf,MAAMC,WAAWD,MAAME,MAAM,CAAC1B,KAAK;4BACnC,MAAM2B,oBAAuC;gCAC3CC,cAAcH;gCACdI,KAAK,IAAIC;4BACX;4BACA7B,SAAS0B;4BACTtB,0BAA0B;wBAC5B;wBACA0B,eAAe;4BACb1B,0BAA0B;wBAC5B;;;;;;AAMZ"}

package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectChangeEvent } from '@mui/material';
 import { TimeRangeValue } from '@perses-dev/core';
 import { TimeOption } from '../model';
@@ -9,6 +8,6 @@ interface TimeRangeSelectorProps {
     onCustomClick: () => void;
     height?: string;
 }
-export declare function TimeRangeSelector(props: TimeRangeSelectorProps): JSX.Element;
+export declare function TimeRangeSelector(props: TimeRangeSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TimeRangeSelector.d.ts.map

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,EAAuB,MAAM,kBAAkB,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,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,eAqD9D"}
+{"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,EAAuB,MAAM,kBAAkB,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,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,2CAqD9D"}

package/dist/DateTimeRangePicker/TimeRangeSelector.js

@@ -18,8 +18,8 @@ import { useTimeZone } from '../context/TimeZoneProvider';
 import { formatAbsoluteRange } from './utils';
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 export function TimeRangeSelector(props) {
-    const { value , timeOptions , onSelectChange , onCustomClick , height  } = props;
-    const { timeZone  } = useTimeZone();
+    const { value, timeOptions, onSelectChange, onCustomClick, height } = props;
+    const { timeZone } = useTimeZone();
     const formattedValue = !isRelativeTimeRange(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
     return /*#__PURE__*/ _jsxs(Select, {
         value: formattedValue,

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, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { TimeOption } from '../model';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\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        // `transform: none` prevents calendar icon from flipping over when menu is open\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n          transform: 'none',\n        },\n        // paddingRight creates more space for the calendar icon (it's a bigger icon)\n        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {\n          paddingRight: '36px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem 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","transform","paddingRight","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,SAAyBC,mBAAmB,QAAQ,kBAAkB,CAAC;AACvE,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAE1D,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAU/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,gFAAgF;YAChF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;gBAChBC,SAAS,EAAE,MAAM;aAClB;YACD,6EAA6E;YAC7E,yDAAyD,EAAE;gBACzDC,YAAY,EAAE,MAAM;aACrB;YACD,mBAAmB,EAAEV,MAAM,GAAG;gBAAEW,UAAU,EAAEX,MAAM;gBAAEY,QAAQ,EAAE,CAAC;aAAE,GAAG,EAAE;SACvE;;YAEAf,WAAW,CAACgB,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAAC5B,QAAQ;oBAAWS,KAAK,EAAEkB,IAAI,CAAClB,KAAK,CAACO,YAAY;8BAC/CW,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDzB,mBAAmB,CAACM,KAAK,CAAC,iBACzB,KAACT,QAAQ;gBACP8B,OAAO,EAAE,IAAM;oBACblB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACZ,QAAQ;gBACPS,KAAK,EAAEM,cAAc;gBACrBe,OAAO,EAAE,IAAM;oBACblB,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, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { TimeOption } from '../model';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\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        // `transform: none` prevents calendar icon from flipping over when menu is open\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n          transform: 'none',\n        },\n        // paddingRight creates more space for the calendar icon (it's a bigger icon)\n        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {\n          paddingRight: '36px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem 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","transform","paddingRight","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,SAASA,QAAQ,EAAEC,MAAM,QAA2B,gBAAgB;AACpE,OAAOC,cAAc,2BAA2B;AAChD,SAAyBC,mBAAmB,QAAQ,mBAAmB;AACvE,SAASC,WAAW,QAAQ,8BAA8B;AAE1D,SAASC,mBAAmB,QAAQ,UAAU;AAE9C,MAAMC,mBAAmB;AAUzB,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,cAAc,EAAEC,aAAa,EAAEC,MAAM,EAAE,GAAGL;IACtE,MAAM,EAAEM,QAAQ,EAAE,GAAGV;IACrB,MAAMW,iBAAiB,CAACZ,oBAAoBM,SACxCJ,oBAAoBI,OAAOH,kBAAkBQ,YAC7CL,MAAMO,YAAY;IACtB,qBACE,MAACf;QACCQ,OAAOM;QACPE,UAAUN;QACVO,eAAehB;QACfiB,YAAY;YACV,cAAc,CAAC,oCAAoC,EAAEJ,eAAe,CAAC;QACvE;QACAK,IAAI;YACF,gFAAgF;YAChF,mBAAmB;gBACjBC,WAAW;gBACXC,WAAW;YACb;YACA,6EAA6E;YAC7E,2DAA2D;gBACzDC,cAAc;YAChB;YACA,qBAAqBV,SAAS;gBAAEW,YAAYX;gBAAQY,UAAU;YAAE,IAAI,CAAC;QACvE;;YAECf,YAAYgB,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAAC5B;oBAAmBS,OAAOkB,KAAKlB,KAAK,CAACO,YAAY;8BAC/CW,KAAKE,OAAO;mBADAD;YAKhBzB,oBAAoBM,uBACnB,KAACT;gBACC8B,SAAS;oBACPlB;gBACF;0BACD;+BAID,KAACZ;gBACCS,OAAOM;gBACPe,SAAS;oBACPlB;gBACF;0BAECG;;;;AAKX"}

package/dist/DateTimeRangePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './DateTimeRangePicker';\nexport * from './TimeRangeSelector';\nexport * from './AbsoluteTimePicker';\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,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './DateTimeRangePicker';\nexport * from './TimeRangeSelector';\nexport * from './AbsoluteTimePicker';\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,wBAAwB;AACtC,cAAc,sBAAsB;AACpC,cAAc,uBAAuB"}

package/dist/DateTimeRangePicker/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/utils.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { isBefore, isValid } from 'date-fns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { formatWithTimeZone } from '../utils';\n\n/*\n * Date validation and check if end is after start\n */\nexport function validateDateRange(startDate: Date, endDate: Date) {\n  // TODO: display error as helperText\n  if (!isValid(startDate) || !isValid(endDate)) {\n    console.error('Invalid Date');\n    return false;\n  }\n  if (!isBefore(startDate, endDate)) {\n    console.error('End Time is before Start Time');\n    return false;\n  }\n  return true;\n}\n\n/**\n * Format start and end time based on provided date format\n */\nexport function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string, timeZone?: string) {\n  const formattedStart = formatWithTimeZone(timeRange.start, dateFormat, timeZone);\n  const formattedEnd = formatWithTimeZone(timeRange.end, dateFormat, timeZone);\n  return `${formattedStart} - ${formattedEnd}`;\n}\n"],"names":["isBefore","isValid","formatWithTimeZone","validateDateRange","startDate","endDate","console","error","formatAbsoluteRange","timeRange","dateFormat","timeZone","formattedStart","start","formattedEnd","end"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,QAAQ,EAAEC,OAAO,QAAQ,UAAU,CAAC;AAE7C,SAASC,kBAAkB,QAAQ,UAAU,CAAC;AAE9C;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAACC,SAAe,EAAEC,OAAa,EAAE;IAChE,oCAAoC;IACpC,IAAI,CAACJ,OAAO,CAACG,SAAS,CAAC,IAAI,CAACH,OAAO,CAACI,OAAO,CAAC,EAAE;QAC5CC,OAAO,CAACC,KAAK,CAAC,cAAc,CAAC,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,CAACP,QAAQ,CAACI,SAAS,EAAEC,OAAO,CAAC,EAAE;QACjCC,OAAO,CAACC,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAC/C,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;CAEC,GACD,OAAO,SAASC,mBAAmB,CAACC,SAA4B,EAAEC,UAAkB,EAAEC,QAAiB,EAAE;IACvG,MAAMC,cAAc,GAAGV,kBAAkB,CAACO,SAAS,CAACI,KAAK,EAAEH,UAAU,EAAEC,QAAQ,CAAC,AAAC;IACjF,MAAMG,YAAY,GAAGZ,kBAAkB,CAACO,SAAS,CAACM,GAAG,EAAEL,UAAU,EAAEC,QAAQ,CAAC,AAAC;IAC7E,OAAO,CAAC,EAAEC,cAAc,CAAC,GAAG,EAAEE,YAAY,CAAC,CAAC,CAAC;AAC/C,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/utils.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { isBefore, isValid } from 'date-fns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { formatWithTimeZone } from '../utils';\n\n/*\n * Date validation and check if end is after start\n */\nexport function validateDateRange(startDate: Date, endDate: Date) {\n  // TODO: display error as helperText\n  if (!isValid(startDate) || !isValid(endDate)) {\n    console.error('Invalid Date');\n    return false;\n  }\n  if (!isBefore(startDate, endDate)) {\n    console.error('End Time is before Start Time');\n    return false;\n  }\n  return true;\n}\n\n/**\n * Format start and end time based on provided date format\n */\nexport function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string, timeZone?: string) {\n  const formattedStart = formatWithTimeZone(timeRange.start, dateFormat, timeZone);\n  const formattedEnd = formatWithTimeZone(timeRange.end, dateFormat, timeZone);\n  return `${formattedStart} - ${formattedEnd}`;\n}\n"],"names":["isBefore","isValid","formatWithTimeZone","validateDateRange","startDate","endDate","console","error","formatAbsoluteRange","timeRange","dateFormat","timeZone","formattedStart","start","formattedEnd","end"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,QAAQ,EAAEC,OAAO,QAAQ,WAAW;AAE7C,SAASC,kBAAkB,QAAQ,WAAW;AAE9C;;CAEC,GACD,OAAO,SAASC,kBAAkBC,SAAe,EAAEC,OAAa;IAC9D,oCAAoC;IACpC,IAAI,CAACJ,QAAQG,cAAc,CAACH,QAAQI,UAAU;QAC5CC,QAAQC,KAAK,CAAC;QACd,OAAO;IACT;IACA,IAAI,CAACP,SAASI,WAAWC,UAAU;QACjCC,QAAQC,KAAK,CAAC;QACd,OAAO;IACT;IACA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,SAASC,oBAAoBC,SAA4B,EAAEC,UAAkB,EAAEC,QAAiB;IACrG,MAAMC,iBAAiBV,mBAAmBO,UAAUI,KAAK,EAAEH,YAAYC;IACvE,MAAMG,eAAeZ,mBAAmBO,UAAUM,GAAG,EAAEL,YAAYC;IACnE,OAAO,CAAC,EAAEC,eAAe,GAAG,EAAEE,aAAa,CAAC;AAC9C"}

package/dist/Dialog/Dialog.d.ts

@@ -6,7 +6,7 @@ export interface DialogHeaderProps extends DialogTitleProps {
      */
     onClose?: (e: React.MouseEvent<HTMLElement>) => void;
 }
-export declare type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;
+export type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;
 export interface DialogContentProps extends MuiDialogContentProps {
     /**
      * @default 500
@@ -14,12 +14,12 @@ export interface DialogContentProps extends MuiDialogContentProps {
     width?: number;
 }
 export declare const Dialog: {
-    ({ children, ...props }: DialogProps): JSX.Element;
-    Header: ({ children, onClose, ...props }: DialogHeaderProps) => JSX.Element;
+    ({ children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, onClose, ...props }: DialogHeaderProps) => import("react/jsx-runtime").JSX.Element;
     Form: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
-    Content: ({ children, width, sx, ...props }: DialogContentProps) => JSX.Element;
-    PrimaryButton: ({ children, ...props }: DialogButtonProps) => JSX.Element;
-    SecondaryButton: ({ children, ...props }: DialogButtonProps) => JSX.Element;
+    Content: ({ children, width, sx, ...props }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
+    PrimaryButton: ({ children, ...props }: DialogButtonProps) => import("react/jsx-runtime").JSX.Element;
+    SecondaryButton: ({ children, ...props }: DialogButtonProps) => import("react/jsx-runtime").JSX.Element;
     Actions: typeof DialogActions;
 };
 //# sourceMappingURL=Dialog.d.ts.map

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

@@ -1 +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,EAGhB,KAAK,EACN,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;AAqDD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CAnDT,iBAAiB;;iDAaR,kBAAkB;4CAM7B,iBAAiB;8CAMf,iBAAiB;;CA0ByC,CAAC"}
+{"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,EAGhB,KAAK,EACN,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,MAAM,MAAM,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;AAqDD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CAnDT,iBAAiB;;iDAaR,kBAAkB;4CAM7B,iBAAiB;8CAMf,iBAAiB;;CA0ByC,CAAC"}

package/dist/Dialog/Dialog.js

@@ -15,7 +15,7 @@ import React from 'react';
 import { Button, Dialog as MuiDialog, DialogActions, DialogContent, DialogTitle, IconButton, styled } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
 import { combineSx } from '../utils';
-const Header = ({ children , onClose , ...props })=>{
+const Header = ({ children, onClose, ...props })=>{
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(DialogTitle, {
@@ -31,7 +31,7 @@ const Header = ({ children , onClose , ...props })=>{
         ]
     });
 };
-const Content = ({ children , width =500 , sx , ...props })=>/*#__PURE__*/ _jsx(DialogContent, {
+const Content = ({ children, width = 500, sx, ...props })=>/*#__PURE__*/ _jsx(DialogContent, {
         dividers: true,
         ...props,
         sx: combineSx({
@@ -39,13 +39,13 @@ const Content = ({ children , width =500 , sx , ...props })=>/*#__PURE__*/ _jsx(
         }, sx),
         children: children
     });
-const PrimaryButton = ({ children , ...props })=>/*#__PURE__*/ _jsx(Button, {
+const PrimaryButton = ({ children, ...props })=>/*#__PURE__*/ _jsx(Button, {
         variant: "contained",
         type: "submit",
         ...props,
         children: children
     });
-const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ _jsx(Button, {
+const SecondaryButton = ({ children, ...props })=>/*#__PURE__*/ _jsx(Button, {
         variant: "outlined",
         color: "secondary",
         ...props,
@@ -71,7 +71,7 @@ const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ _jsx(Button, {
         right: theme.spacing(0.5)
     };
 };
-export const Dialog = ({ children , ...props })=>/*#__PURE__*/ _jsx(MuiDialog, {
+export const Dialog = ({ children, ...props })=>/*#__PURE__*/ _jsx(MuiDialog, {
         ...props,
         children: children
     });

package/dist/Dialog/Dialog.js.map

@@ -1 +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  styled,\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 * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form = styled('form')({\n  overflowY: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\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.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","styled","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","theme","position","top","spacing","right","Actions"],"mappings":"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"}
+{"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  styled,\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 * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form = styled('form')({\n  overflowY: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\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.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","styled","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","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,OAAOA,WAAW,QAAQ;AAC1B,SACEC,MAAM,EAENC,UAAUC,SAAS,EACnBC,aAAa,EACbC,aAAa,EAGbC,WAAW,EAEXC,UAAU,EACVC,MAAM,QAED,gBAAgB;AACvB,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,SAAS,QAAQ,WAAW;AAkBrC,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,OAA0B;IAChE,qBACE;;0BACE,KAACR;gBAAa,GAAGQ,KAAK;0BAAGF;;YACxBC,yBACC,KAACN;gBAAWQ,cAAW;gBAAQC,SAASH;gBAASI,IAAIC;0BACnD,cAAA,KAACT;;;;AAKX;AAEA,MAAMU,UAAU,CAAC,EAAEP,QAAQ,EAAEQ,QAAQ,GAAG,EAAEH,EAAE,EAAE,GAAGH,OAA2B,iBAC1E,KAACT;QAAcgB,QAAQ;QAAE,GAAGP,KAAK;QAAEG,IAAIP,UAAU;YAAEU,OAAO,CAAC,EAAEA,MAAM,EAAE,CAAC;QAAC,GAAGH;kBACvEL;;AAIL,MAAMU,gBAAgB,CAAC,EAAEV,QAAQ,EAAE,GAAGE,OAA0B,iBAC9D,KAACb;QAAOsB,SAAQ;QAAYC,MAAK;QAAU,GAAGV,KAAK;kBAChDF;;AAIL,MAAMa,kBAAkB,CAAC,EAAEb,QAAQ,EAAE,GAAGE,OAA0B,iBAChE,KAACb;QAAOsB,SAAQ;QAAWG,OAAM;QAAa,GAAGZ,KAAK;kBACnDF;;AAIL;;;;;CAKC,GACD,MAAMe,OAAOnB,OAAO,QAAQ;IAC1BoB,WAAW;IACXC,SAAS;IACTC,eAAe;AACjB;AAEA;;;CAGC,GACD,MAAMZ,6BAA6B,CAACa;IAClC,OAAO;QAAEC,UAAU;QAAYC,KAAKF,MAAMG,OAAO,CAAC;QAAMC,OAAOJ,MAAMG,OAAO,CAAC;IAAK;AACpF;AAEA,OAAO,MAAMhC,SAAS,CAAC,EAAEU,QAAQ,EAAE,GAAGE,OAAoB,iBAAK,KAACX;QAAW,GAAGW,KAAK;kBAAGF;OAAsB;AAE5GV,OAAOS,MAAM,GAAGA;AAChBT,OAAOyB,IAAI,GAAGA;AACdzB,OAAOiB,OAAO,GAAGA;AACjBjB,OAAOoB,aAAa,GAAGA;AACvBpB,OAAOuB,eAAe,GAAGA;AACzBvB,OAAOkC,OAAO,GAAGhC"}

package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 interface DiscardChangesConfirmationDialogProps {
     description: string;
     isOpen: boolean;
     onCancel: () => void;
     onDiscardChanges: () => void;
 }
-export declare const DiscardChangesConfirmationDialog: (props: DiscardChangesConfirmationDialogProps) => JSX.Element;
+export declare const DiscardChangesConfirmationDialog: (props: DiscardChangesConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DiscardChangesConfirmationDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":";AAgBA,UAAU,qCAAqC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,gCAAgC,UAAW,qCAAqC,gBAiB5F,CAAC"}
+{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAgBA,UAAU,qCAAqC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,gCAAgC,UAAW,qCAAqC,4CAiB5F,CAAC"}

package/dist/Dialog/DiscardChangesConfirmationDialog.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@mui/material';
 import { Dialog } from './Dialog';
 export const DiscardChangesConfirmationDialog = (props)=>{
-    const { description , isOpen , onCancel , onDiscardChanges  } = props;
+    const { description, isOpen, onCancel, onDiscardChanges } = props;
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: isOpen,
         "aria-labelledby": "discard-dialog",

package/dist/Dialog/DiscardChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/DiscardChangesConfirmationDialog.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 { Button } from '@mui/material';\nimport { Dialog } from './Dialog';\n\ninterface DiscardChangesConfirmationDialogProps {\n  description: string;\n  isOpen: boolean;\n  onCancel: () => void;\n  onDiscardChanges: () => void;\n}\n\nexport const DiscardChangesConfirmationDialog = (props: DiscardChangesConfirmationDialogProps) => {\n  const { description, isOpen, onCancel, onDiscardChanges } = props;\n\n  return (\n    <Dialog open={isOpen} aria-labelledby=\"discard-dialog\">\n      <Dialog.Header>Discard Changes</Dialog.Header>\n      <Dialog.Content>{description}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"contained\" onClick={onDiscardChanges}>\n          Discard Changes\n        </Button>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onCancel}>\n          Cancel\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n};\n"],"names":["Button","Dialog","DiscardChangesConfirmationDialog","props","description","isOpen","onCancel","onDiscardChanges","open","aria-labelledby","Header","Content","Actions","variant","onClick","color"],"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,QAAQ,eAAe,CAAC;AACvC,SAASC,MAAM,QAAQ,UAAU,CAAC;AASlC,OAAO,MAAMC,gCAAgC,GAAG,CAACC,KAA4C,GAAK;IAChG,MAAM,EAAEC,WAAW,CAAA,EAAEC,MAAM,CAAA,EAAEC,QAAQ,CAAA,EAAEC,gBAAgB,CAAA,EAAE,GAAGJ,KAAK,AAAC;IAElE,qBACE,MAACF,MAAM;QAACO,IAAI,EAAEH,MAAM;QAAEI,iBAAe,EAAC,gBAAgB;;0BACpD,KAACR,MAAM,CAACS,MAAM;0BAAC,iBAAe;cAAgB;0BAC9C,KAACT,MAAM,CAACU,OAAO;0BAAEP,WAAW;cAAkB;0BAC9C,MAACH,MAAM,CAACW,OAAO;;kCACb,KAACZ,MAAM;wBAACa,OAAO,EAAC,WAAW;wBAACC,OAAO,EAAEP,gBAAgB;kCAAE,iBAEvD;sBAAS;kCACT,KAACP,MAAM;wBAACa,OAAO,EAAC,UAAU;wBAACE,KAAK,EAAC,WAAW;wBAACD,OAAO,EAAER,QAAQ;kCAAE,QAEhE;sBAAS;;cACM;;MACV,CACT;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Dialog/DiscardChangesConfirmationDialog.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 { Button } from '@mui/material';\nimport { Dialog } from './Dialog';\n\ninterface DiscardChangesConfirmationDialogProps {\n  description: string;\n  isOpen: boolean;\n  onCancel: () => void;\n  onDiscardChanges: () => void;\n}\n\nexport const DiscardChangesConfirmationDialog = (props: DiscardChangesConfirmationDialogProps) => {\n  const { description, isOpen, onCancel, onDiscardChanges } = props;\n\n  return (\n    <Dialog open={isOpen} aria-labelledby=\"discard-dialog\">\n      <Dialog.Header>Discard Changes</Dialog.Header>\n      <Dialog.Content>{description}</Dialog.Content>\n      <Dialog.Actions>\n        <Button variant=\"contained\" onClick={onDiscardChanges}>\n          Discard Changes\n        </Button>\n        <Button variant=\"outlined\" color=\"secondary\" onClick={onCancel}>\n          Cancel\n        </Button>\n      </Dialog.Actions>\n    </Dialog>\n  );\n};\n"],"names":["Button","Dialog","DiscardChangesConfirmationDialog","props","description","isOpen","onCancel","onDiscardChanges","open","aria-labelledby","Header","Content","Actions","variant","onClick","color"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,SAASC,MAAM,QAAQ,WAAW;AASlC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C,MAAM,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGJ;IAE5D,qBACE,MAACF;QAAOO,MAAMH;QAAQI,mBAAgB;;0BACpC,KAACR,OAAOS,MAAM;0BAAC;;0BACf,KAACT,OAAOU,OAAO;0BAAEP;;0BACjB,MAACH,OAAOW,OAAO;;kCACb,KAACZ;wBAAOa,SAAQ;wBAAYC,SAASP;kCAAkB;;kCAGvD,KAACP;wBAAOa,SAAQ;wBAAWE,OAAM;wBAAYD,SAASR;kCAAU;;;;;;AAMxE,EAAE"}

package/dist/Dialog/index.js.map

@@ -1 +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';\nexport * from './DiscardChangesConfirmationDialog';\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;AACzB,cAAc,oCAAoC,CAAC"}
+{"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';\nexport * from './DiscardChangesConfirmationDialog';\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,WAAW;AACzB,cAAc,qCAAqC"}

package/dist/Drawer/Drawer.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { DrawerProps as MuiDrawerProps } from '@mui/material';
 export interface DrawerProps extends MuiDrawerProps {
     isOpen: boolean;
     onClose: () => void;
     anchor?: 'left' | 'right';
 }
-export declare const Drawer: ({ anchor, isOpen, onClose, PaperProps, children, ...rest }: DrawerProps) => JSX.Element;
+export declare const Drawer: ({ anchor, isOpen, onClose, PaperProps, children, ...rest }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Drawer.d.ts.map

package/dist/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuB,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAGnF,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAID,eAAO,MAAM,MAAM,+DAA0E,WAAW,gBAqBvG,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAuB,WAAW,IAAI,cAAc,EAAiB,MAAM,eAAe,CAAC;AAGlG,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAID,eAAO,MAAM,MAAM,+DAA0E,WAAW,4CAuBvG,CAAC"}

package/dist/Drawer/Drawer.js

@@ -11,10 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Drawer as MuiDrawer } from '@mui/material';
+import { Drawer as MuiDrawer, useMediaQuery } from '@mui/material';
 import { combineSx } from '../utils';
 const DRAWER_DEFAULT_WIDTH = 1080;
-export const Drawer = ({ anchor ='right' , isOpen , onClose , PaperProps , children , ...rest })=>{
+export const Drawer = ({ anchor = 'right', isOpen, onClose, PaperProps, children, ...rest })=>{
+    const isSmaller = useMediaQuery(`(max-width:${DRAWER_DEFAULT_WIDTH}px)`);
     return /*#__PURE__*/ _jsx(MuiDrawer, {
         ...rest,
         open: isOpen,
@@ -23,7 +24,7 @@ export const Drawer = ({ anchor ='right' , isOpen , onClose , PaperProps , child
         PaperProps: {
             ...PaperProps,
             sx: combineSx({
-                width: `${DRAWER_DEFAULT_WIDTH}px`,
+                width: isSmaller ? '100%' : `${DRAWER_DEFAULT_WIDTH}px`,
                 overflow: 'hidden'
             }, PaperProps === null || PaperProps === void 0 ? void 0 : PaperProps.sx)
         },

package/dist/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Drawer/Drawer.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 { Drawer as MuiDrawer, DrawerProps as MuiDrawerProps } from '@mui/material';\nimport { combineSx } from '../utils';\n\nexport interface DrawerProps extends MuiDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  anchor?: 'left' | 'right';\n}\n\nconst DRAWER_DEFAULT_WIDTH = 1080;\n\nexport const Drawer = ({ anchor = 'right', isOpen, onClose, PaperProps, children, ...rest }: DrawerProps) => {\n  return (\n    <MuiDrawer\n      {...rest}\n      open={isOpen}\n      onClose={onClose}\n      anchor={anchor}\n      PaperProps={{\n        ...PaperProps,\n        sx: combineSx(\n          {\n            width: `${DRAWER_DEFAULT_WIDTH}px`,\n            overflow: 'hidden',\n          },\n          PaperProps?.sx\n        ),\n      }}\n    >\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["Drawer","MuiDrawer","combineSx","DRAWER_DEFAULT_WIDTH","anchor","isOpen","onClose","PaperProps","children","rest","open","sx","width","overflow"],"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,IAAIC,SAAS,QAAuC,eAAe,CAAC;AACnF,SAASC,SAAS,QAAQ,UAAU,CAAC;AAQrC,MAAMC,oBAAoB,GAAG,IAAI,AAAC;AAElC,OAAO,MAAMH,MAAM,GAAG,CAAC,EAAEI,MAAM,EAAG,OAAO,CAAA,EAAEC,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAEC,UAAU,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGC,IAAI,EAAe,GAAK;IAC3G,qBACE,KAACR,SAAS;QACP,GAAGQ,IAAI;QACRC,IAAI,EAAEL,MAAM;QACZC,OAAO,EAAEA,OAAO;QAChBF,MAAM,EAAEA,MAAM;QACdG,UAAU,EAAE;YACV,GAAGA,UAAU;YACbI,EAAE,EAAET,SAAS,CACX;gBACEU,KAAK,EAAE,CAAC,EAAET,oBAAoB,CAAC,EAAE,CAAC;gBAClCU,QAAQ,EAAE,QAAQ;aACnB,EACDN,UAAU,aAAVA,UAAU,WAAI,GAAdA,KAAAA,CAAc,GAAdA,UAAU,CAAEI,EAAE,CACf;SACF;kBAEAH,QAAQ;MACC,CACZ;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Drawer/Drawer.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 { Drawer as MuiDrawer, DrawerProps as MuiDrawerProps, useMediaQuery } from '@mui/material';\nimport { combineSx } from '../utils';\n\nexport interface DrawerProps extends MuiDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  anchor?: 'left' | 'right';\n}\n\nconst DRAWER_DEFAULT_WIDTH = 1080;\n\nexport const Drawer = ({ anchor = 'right', isOpen, onClose, PaperProps, children, ...rest }: DrawerProps) => {\n  const isSmaller = useMediaQuery(`(max-width:${DRAWER_DEFAULT_WIDTH}px)`);\n\n  return (\n    <MuiDrawer\n      {...rest}\n      open={isOpen}\n      onClose={onClose}\n      anchor={anchor}\n      PaperProps={{\n        ...PaperProps,\n        sx: combineSx(\n          {\n            width: isSmaller ? '100%' : `${DRAWER_DEFAULT_WIDTH}px`,\n            overflow: 'hidden',\n          },\n          PaperProps?.sx\n        ),\n      }}\n    >\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["Drawer","MuiDrawer","useMediaQuery","combineSx","DRAWER_DEFAULT_WIDTH","anchor","isOpen","onClose","PaperProps","children","rest","isSmaller","open","sx","width","overflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAUC,SAAS,EAAiCC,aAAa,QAAQ,gBAAgB;AAClG,SAASC,SAAS,QAAQ,WAAW;AAQrC,MAAMC,uBAAuB;AAE7B,OAAO,MAAMJ,SAAS,CAAC,EAAEK,SAAS,OAAO,EAAEC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,QAAQ,EAAE,GAAGC,MAAmB;IACtG,MAAMC,YAAYT,cAAc,CAAC,WAAW,EAAEE,qBAAqB,GAAG,CAAC;IAEvE,qBACE,KAACH;QACE,GAAGS,IAAI;QACRE,MAAMN;QACNC,SAASA;QACTF,QAAQA;QACRG,YAAY;YACV,GAAGA,UAAU;YACbK,IAAIV,UACF;gBACEW,OAAOH,YAAY,SAAS,CAAC,EAAEP,qBAAqB,EAAE,CAAC;gBACvDW,UAAU;YACZ,GACAP,uBAAAA,iCAAAA,WAAYK,EAAE;QAElB;kBAECJ;;AAGP,EAAE"}

package/dist/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Drawer/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Drawer';\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"}
+{"version":3,"sources":["../../src/Drawer/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './Drawer';\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,WAAW"}

package/dist/EChart/EChart.d.ts

@@ -15,9 +15,9 @@ export interface MouseEventsParameters<T> {
     color: string;
     info: Record<string, unknown>;
 }
-declare type OnEventFunction<T> = (params: MouseEventsParameters<T>, instance?: ECharts) => void;
+type OnEventFunction<T> = (params: MouseEventsParameters<T>, instance?: ECharts) => void;
 declare const mouseEvents: readonly ["click", "dblclick", "mousedown", "mousemove", "mouseup", "mouseover", "mouseout", "globalout", "contextmenu"];
-export declare type MouseEventName = (typeof mouseEvents)[number];
+export type MouseEventName = (typeof mouseEvents)[number];
 export interface DataZoomPayloadBatchItem {
     dataZoomId: string;
     start?: number;
@@ -36,11 +36,11 @@ export interface BatchEventsParameters {
     type: BatchEventName;
     batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];
 }
-declare type OnBatchEventFunction = (params: BatchEventsParameters) => void;
+type OnBatchEventFunction = (params: BatchEventsParameters) => void;
 declare const batchEvents: readonly ["datazoom", "downplay", "highlight"];
-export declare type BatchEventName = (typeof batchEvents)[number];
-declare type ChartEventName = 'finished';
-export declare type OnEventsType<T> = {
+export type BatchEventName = (typeof batchEvents)[number];
+type ChartEventName = 'finished';
+export type OnEventsType<T> = {
     [mouseEventName in MouseEventName]?: OnEventFunction<T>;
 } & {
     [batchEventName in BatchEventName]?: OnBatchEventFunction;
@@ -57,6 +57,6 @@ export interface EChartsProps<T> {
     syncGroup?: string;
     onChartInitialized?: (instance: ECharts) => void;
 }
-export declare const EChart: React.MemoExoticComponent<(<T>({ option, theme, renderer, sx, onEvents, _instance, syncGroup, onChartInitialized, }: EChartsProps<T>) => JSX.Element)>;
+export declare const EChart: React.MemoExoticComponent<(<T>({ option, theme, renderer, sx, onEvents, _instance, syncGroup, onChartInitialized, }: EChartsProps<T>) => import("react/jsx-runtime").JSX.Element)>;
 export {};
 //# sourceMappingURL=EChart.d.ts.map

package/dist/EChart/EChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"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"}

package/dist/EChart/EChart.js

@@ -32,7 +32,7 @@ const batchEvents = [
     'downplay',
     'highlight'
 ];
-export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , syncGroup , onChartInitialized  }) {
+export const EChart = /*#__PURE__*/ React.memo(function EChart({ option, theme, renderer, sx, onEvents, _instance, syncGroup, onChartInitialized }) {
     const initialOption = useRef(option);
     const prevOption = useRef(option);
     const containerRef = useRef(null);
@@ -145,8 +145,8 @@ function bindEvents(instance, events) {
     }
     for(const eventName in events){
         if (Object.prototype.hasOwnProperty.call(events, eventName)) {
-            var _eventName;
-            const customEvent = (_eventName = events[eventName]) !== null && _eventName !== void 0 ? _eventName : null;
+            var _events_eventName;
+            const customEvent = (_events_eventName = events[eventName]) !== null && _events_eventName !== void 0 ? _events_eventName : null;
             if (customEvent) {
                 bindEvent(eventName, customEvent);
             }