@perses-dev/components 0.43.0-rc2 → 0.44.0-rc0

package/dist/BarChart/BarChart.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormatOptions } from '@perses-dev/core';
 import { ModeOption } from '../ModeSelector';
 export interface BarChartData {
@@ -12,5 +11,5 @@ export interface BarChartProps {
     format?: FormatOptions;
     mode?: ModeOption;
 }
-export declare function BarChart(props: BarChartProps): JSX.Element;
+export declare function BarChart(props: BarChartProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BarChart.d.ts.map

package/dist/BarChart/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../src/BarChart/BarChart.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAe,MAAM,kBAAkB,CAAC;AAQ9D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQ7C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eAoF5C"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../src/BarChart/BarChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,aAAa,EAAe,MAAM,kBAAkB,CAAC;AAQ9D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQ7C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAoF5C"}

package/dist/BarChart/BarChart.js

@@ -32,9 +32,9 @@ use([
 const BAR_WIN_WIDTH = 14;
 const BAR_GAP = 6;
 export function BarChart(props) {
-    const { width , height , data , format ={
+    const { width, height, data, format = {
         unit: 'decimal'
-    } , mode ='value'  } = props;
+    }, mode = 'value' } = props;
     const chartsTheme = useChartsTheme();
     const option = useMemo(()=>{
         if (data == null || !data.length) return chartsTheme.noDataOption;

package/dist/BarChart/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/BarChart/BarChart.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 { useMemo } from 'react';\nimport { FormatOptions, formatValue } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { BarChart as EChartsBarChart } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box } from '@mui/material';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { EChart } from '../EChart';\nimport { ModeOption } from '../ModeSelector';\nimport { getFormattedAxis } from '../utils';\n\nuse([EChartsBarChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst BAR_WIN_WIDTH = 14;\nconst BAR_GAP = 6;\n\nexport interface BarChartData {\n  label: string;\n  value: number | null;\n}\n\nexport interface BarChartProps {\n  width: number;\n  height: number;\n  data: BarChartData[] | null;\n  format?: FormatOptions;\n  mode?: ModeOption;\n}\n\nexport function BarChart(props: BarChartProps) {\n  const { width, height, data, format = { unit: 'decimal' }, mode = 'value' } = props;\n  const chartsTheme = useChartsTheme();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data == null || !data.length) return chartsTheme.noDataOption;\n\n    const source: Array<Array<BarChartData['label'] | BarChartData['value']>> = [];\n    data.map((d) => {\n      source.push([d.label, d.value]);\n    });\n\n    return {\n      title: {\n        show: false,\n      },\n      dataset: [\n        {\n          dimensions: ['label', 'value'],\n          source: source,\n        },\n      ],\n      xAxis: getFormattedAxis({}, format),\n      yAxis: {\n        type: 'category',\n        splitLine: {\n          show: false,\n        },\n        axisLabel: {\n          overflow: 'truncate',\n          width: width / 3,\n        },\n      },\n      series: {\n        type: 'bar',\n        label: {\n          show: true,\n          position: 'right',\n          formatter: (params: { data: number[] }) => {\n            if (mode === 'percentage') {\n              return (\n                params.data[1] &&\n                formatValue(params.data[1], {\n                  unit: 'percent',\n                  decimalPlaces: format.decimalPlaces,\n                })\n              );\n            }\n            return params.data[1] && formatValue(params.data[1], format);\n          },\n          barMinWidth: BAR_WIN_WIDTH,\n          barCategoryGap: BAR_GAP,\n        },\n        itemStyle: {\n          borderRadius: 4,\n          color: chartsTheme.echartsTheme[0],\n        },\n      },\n      tooltip: {\n        appendToBody: true,\n        confine: true,\n        formatter: (params: { name: string; data: number[] }) =>\n          params.data[1] && `<b>${params.name}</b> &emsp; ${formatValue(params.data[1], format)}`,\n      },\n      // increase distance between grid and container to prevent y axis labels from getting cut off\n      grid: {\n        left: '5%',\n        right: '5%',\n      },\n    };\n  }, [data, chartsTheme, width, mode, format]);\n\n  return (\n    <Box sx={{ width: width, height: height, overflow: 'auto' }}>\n      <EChart\n        sx={{\n          minHeight: height,\n          height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","formatValue","use","BarChart","EChartsBarChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","useChartsTheme","EChart","getFormattedAxis","BAR_WIN_WIDTH","BAR_GAP","props","width","height","data","format","unit","mode","chartsTheme","option","length","noDataOption","source","map","d","push","label","value","title","show","dataset","dimensions","xAxis","yAxis","type","splitLine","axisLabel","overflow","series","position","formatter","params","decimalPlaces","barMinWidth","barCategoryGap","itemStyle","borderRadius","color","echartsTheme","tooltip","appendToBody","confine","name","grid","left","right","sx","minHeight","theme"],"mappings":"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"}
+{"version":3,"sources":["../../src/BarChart/BarChart.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 { useMemo } from 'react';\nimport { FormatOptions, formatValue } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { BarChart as EChartsBarChart } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box } from '@mui/material';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { EChart } from '../EChart';\nimport { ModeOption } from '../ModeSelector';\nimport { getFormattedAxis } from '../utils';\n\nuse([EChartsBarChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst BAR_WIN_WIDTH = 14;\nconst BAR_GAP = 6;\n\nexport interface BarChartData {\n  label: string;\n  value: number | null;\n}\n\nexport interface BarChartProps {\n  width: number;\n  height: number;\n  data: BarChartData[] | null;\n  format?: FormatOptions;\n  mode?: ModeOption;\n}\n\nexport function BarChart(props: BarChartProps) {\n  const { width, height, data, format = { unit: 'decimal' }, mode = 'value' } = props;\n  const chartsTheme = useChartsTheme();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data == null || !data.length) return chartsTheme.noDataOption;\n\n    const source: Array<Array<BarChartData['label'] | BarChartData['value']>> = [];\n    data.map((d) => {\n      source.push([d.label, d.value]);\n    });\n\n    return {\n      title: {\n        show: false,\n      },\n      dataset: [\n        {\n          dimensions: ['label', 'value'],\n          source: source,\n        },\n      ],\n      xAxis: getFormattedAxis({}, format),\n      yAxis: {\n        type: 'category',\n        splitLine: {\n          show: false,\n        },\n        axisLabel: {\n          overflow: 'truncate',\n          width: width / 3,\n        },\n      },\n      series: {\n        type: 'bar',\n        label: {\n          show: true,\n          position: 'right',\n          formatter: (params: { data: number[] }) => {\n            if (mode === 'percentage') {\n              return (\n                params.data[1] &&\n                formatValue(params.data[1], {\n                  unit: 'percent',\n                  decimalPlaces: format.decimalPlaces,\n                })\n              );\n            }\n            return params.data[1] && formatValue(params.data[1], format);\n          },\n          barMinWidth: BAR_WIN_WIDTH,\n          barCategoryGap: BAR_GAP,\n        },\n        itemStyle: {\n          borderRadius: 4,\n          color: chartsTheme.echartsTheme[0],\n        },\n      },\n      tooltip: {\n        appendToBody: true,\n        confine: true,\n        formatter: (params: { name: string; data: number[] }) =>\n          params.data[1] && `<b>${params.name}</b> &emsp; ${formatValue(params.data[1], format)}`,\n      },\n      // increase distance between grid and container to prevent y axis labels from getting cut off\n      grid: {\n        left: '5%',\n        right: '5%',\n      },\n    };\n  }, [data, chartsTheme, width, mode, format]);\n\n  return (\n    <Box sx={{ width: width, height: height, overflow: 'auto' }}>\n      <EChart\n        sx={{\n          minHeight: height,\n          height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","formatValue","use","BarChart","EChartsBarChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","useChartsTheme","EChart","getFormattedAxis","BAR_WIN_WIDTH","BAR_GAP","props","width","height","data","format","unit","mode","chartsTheme","option","length","noDataOption","source","map","d","push","label","value","title","show","dataset","dimensions","xAxis","yAxis","type","splitLine","axisLabel","overflow","series","position","formatter","params","decimalPlaces","barMinWidth","barCategoryGap","itemStyle","borderRadius","color","echartsTheme","tooltip","appendToBody","confine","name","grid","left","right","sx","minHeight","theme"],"mappings":"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"}

package/dist/ColorPicker/ColorPicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ColorPickerProps {
     color: string;
     onChange?: (color: string) => void;
@@ -7,6 +6,6 @@ interface ColorPickerProps {
      */
     palette?: string[];
 }
-export declare const ColorPicker: ({ color, onChange, palette }: ColorPickerProps) => JSX.Element;
+export declare const ColorPicker: ({ color, onChange, palette }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ColorPicker.d.ts.map

package/dist/ColorPicker/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":";AAkBA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,iCAAkC,gBAAgB,gBA4CzE,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAkBA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,iCAAkC,gBAAgB,4CA4CzE,CAAC"}

package/dist/ColorPicker/ColorPicker.js

@@ -15,7 +15,7 @@ import { IconButton, Stack, TextField } from '@mui/material';
 import React, { useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import CircleIcon from 'mdi-material-ui/Circle';
-export const ColorPicker = ({ color , onChange , palette  })=>{
+export const ColorPicker = ({ color, onChange, palette })=>{
     // value is the visible value for the controlled text input
     const [value, setValue] = useState(color);
     const handleColorChange = (color)=>{

package/dist/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ColorPicker/ColorPicker.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 { IconButton, Stack, TextField } from '@mui/material';\nimport React, { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\nimport CircleIcon from 'mdi-material-ui/Circle';\n\ninterface ColorPickerProps {\n  color: string;\n  onChange?: (color: string) => void;\n  /**\n   * Preset color palette\n   */\n  palette?: string[];\n}\n\nexport const ColorPicker = ({ color, onChange, palette }: ColorPickerProps) => {\n  // value is the visible value for the controlled text input\n  const [value, setValue] = useState(color);\n\n  const handleColorChange = (color: string) => {\n    setValue(color);\n    onChange && onChange(color);\n  };\n\n  // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, '').substring(0, 8);\n    setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format\n    // only set color if input value is a valid hex color\n    if (isValidHex(e.target.value)) {\n      onChange && onChange(e.target.value);\n    }\n  };\n\n  return (\n    <Stack spacing={1}>\n      <HexColorPicker color={color} onChange={handleColorChange} />\n      <Stack direction=\"row\" flexWrap=\"wrap\" justifyContent=\"space-evenly\" width={'200px'}>\n        {palette &&\n          palette.map((color, i) => (\n            <IconButton\n              key={i}\n              size=\"small\"\n              aria-label={`change color to ${color}`}\n              sx={{ color }}\n              onClick={() => handleColorChange(color)}\n            >\n              <CircleIcon />\n            </IconButton>\n          ))}\n      </Stack>\n      <TextField\n        inputProps={{ 'aria-label': 'enter hex color' }}\n        fullWidth\n        value={value}\n        onChange={handleInputChange}\n      />\n    </Stack>\n  );\n};\n\nconst isValidHex = (value: string, alpha?: boolean): boolean => {\n  const matcher = /^#?([0-9A-F]{3,8})$/i;\n  const match = matcher.exec(value);\n  const length = match && match[1] ? match[1].length : 0;\n  return (\n    length === 3 || // '#rgb' format\n    length === 6 || // '#rrggbb' format\n    (!!alpha && length === 4) || // '#rgba' format\n    (!!alpha && length === 8) // '#rrggbbaa' format\n  );\n};\n"],"names":["IconButton","Stack","TextField","React","useState","HexColorPicker","CircleIcon","ColorPicker","color","onChange","palette","value","setValue","handleColorChange","handleInputChange","e","inputValue","target","replace","substring","isValidHex","spacing","direction","flexWrap","justifyContent","width","map","i","size","aria-label","sx","onClick","inputProps","fullWidth","alpha","matcher","match","exec","length"],"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,UAAU,EAAEC,KAAK,EAAEC,SAAS,QAAQ,gBAAgB;AAC7D,OAAOC,SAASC,QAAQ,QAAQ,QAAQ;AACxC,SAASC,cAAc,QAAQ,iBAAiB;AAChD,OAAOC,gBAAgB,yBAAyB;AAWhD,OAAO,MAAMC,cAAc,CAAC,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,QAAO,EAAoB;IACxE,2DAA2D;IAC3D,MAAM,CAACC,OAAOC,SAAS,GAAGR,SAASI;IAEnC,MAAMK,oBAAoB,CAACL;QACzBI,SAASJ;QACTC,YAAYA,SAASD;IACvB;IAEA,6FAA6F;IAC7F,MAAMM,oBAAoB,CAACC;QACzB,MAAMC,aAAaD,EAAEE,OAAON,MAAMO,QAAQ,kBAAkB,IAAIC,UAAU,GAAG;QAC7EP,SAAS,CAAC,CAAC,EAAEI,WAAW,CAAC,GAAG,0DAA0D;QACtF,qDAAqD;QACrD,IAAII,WAAWL,EAAEE,OAAON,QAAQ;YAC9BF,YAAYA,SAASM,EAAEE,OAAON;QAChC;IACF;IAEA,qBACE,MAACV;QAAMoB,SAAS;;0BACd,KAAChB;gBAAeG,OAAOA;gBAAOC,UAAUI;;0BACxC,KAACZ;gBAAMqB,WAAU;gBAAMC,UAAS;gBAAOC,gBAAe;gBAAeC,OAAO;0BACzEf,WACCA,QAAQgB,IAAI,CAAClB,OAAOmB,kBAClB,KAAC3B;wBAEC4B,MAAK;wBACLC,cAAY,CAAC,gBAAgB,EAAErB,MAAM,CAAC;wBACtCsB,IAAI;4BAAEtB;wBAAM;wBACZuB,SAAS,IAAMlB,kBAAkBL;kCAEjC,cAAA,KAACF;uBANIqB;;0BAUb,KAACzB;gBACC8B,YAAY;oBAAE,cAAc;gBAAkB;gBAC9CC,SAAS;gBACTtB,OAAOA;gBACPF,UAAUK;;;;AAIlB,EAAE;AAEF,MAAMM,aAAa,CAACT,OAAeuB;IACjC,MAAMC,UAAU;IAChB,MAAMC,QAAQD,QAAQE,KAAK1B;IAC3B,MAAM2B,SAASF,SAASA,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,EAAE,CAACE,SAAS;IACrD,OACEA,WAAW,KAAK,gBAAgB;IAChCA,WAAW,KAAK,mBAAmB;IAClC,CAAC,CAACJ,SAASI,WAAW,KAAM,iBAAiB;IAC7C,CAAC,CAACJ,SAASI,WAAW,EAAG,qBAAqB;;AAEnD"}
+{"version":3,"sources":["../../src/ColorPicker/ColorPicker.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 { IconButton, Stack, TextField } from '@mui/material';\nimport React, { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\nimport CircleIcon from 'mdi-material-ui/Circle';\n\ninterface ColorPickerProps {\n  color: string;\n  onChange?: (color: string) => void;\n  /**\n   * Preset color palette\n   */\n  palette?: string[];\n}\n\nexport const ColorPicker = ({ color, onChange, palette }: ColorPickerProps) => {\n  // value is the visible value for the controlled text input\n  const [value, setValue] = useState(color);\n\n  const handleColorChange = (color: string) => {\n    setValue(color);\n    onChange && onChange(color);\n  };\n\n  // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = e.target.value.replace(/([^0-9A-F]+)/gi, '').substring(0, 8);\n    setValue(`#${inputValue}`); // always prefix input value with # to indicate hex format\n    // only set color if input value is a valid hex color\n    if (isValidHex(e.target.value)) {\n      onChange && onChange(e.target.value);\n    }\n  };\n\n  return (\n    <Stack spacing={1}>\n      <HexColorPicker color={color} onChange={handleColorChange} />\n      <Stack direction=\"row\" flexWrap=\"wrap\" justifyContent=\"space-evenly\" width={'200px'}>\n        {palette &&\n          palette.map((color, i) => (\n            <IconButton\n              key={i}\n              size=\"small\"\n              aria-label={`change color to ${color}`}\n              sx={{ color }}\n              onClick={() => handleColorChange(color)}\n            >\n              <CircleIcon />\n            </IconButton>\n          ))}\n      </Stack>\n      <TextField\n        inputProps={{ 'aria-label': 'enter hex color' }}\n        fullWidth\n        value={value}\n        onChange={handleInputChange}\n      />\n    </Stack>\n  );\n};\n\nconst isValidHex = (value: string, alpha?: boolean): boolean => {\n  const matcher = /^#?([0-9A-F]{3,8})$/i;\n  const match = matcher.exec(value);\n  const length = match && match[1] ? match[1].length : 0;\n  return (\n    length === 3 || // '#rgb' format\n    length === 6 || // '#rrggbb' format\n    (!!alpha && length === 4) || // '#rgba' format\n    (!!alpha && length === 8) // '#rrggbbaa' format\n  );\n};\n"],"names":["IconButton","Stack","TextField","React","useState","HexColorPicker","CircleIcon","ColorPicker","color","onChange","palette","value","setValue","handleColorChange","handleInputChange","e","inputValue","target","replace","substring","isValidHex","spacing","direction","flexWrap","justifyContent","width","map","i","size","aria-label","sx","onClick","inputProps","fullWidth","alpha","matcher","match","exec","length"],"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,UAAU,EAAEC,KAAK,EAAEC,SAAS,QAAQ,gBAAgB;AAC7D,OAAOC,SAASC,QAAQ,QAAQ,QAAQ;AACxC,SAASC,cAAc,QAAQ,iBAAiB;AAChD,OAAOC,gBAAgB,yBAAyB;AAWhD,OAAO,MAAMC,cAAc,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,EAAoB;IACxE,2DAA2D;IAC3D,MAAM,CAACC,OAAOC,SAAS,GAAGR,SAASI;IAEnC,MAAMK,oBAAoB,CAACL;QACzBI,SAASJ;QACTC,YAAYA,SAASD;IACvB;IAEA,6FAA6F;IAC7F,MAAMM,oBAAoB,CAACC;QACzB,MAAMC,aAAaD,EAAEE,MAAM,CAACN,KAAK,CAACO,OAAO,CAAC,kBAAkB,IAAIC,SAAS,CAAC,GAAG;QAC7EP,SAAS,CAAC,CAAC,EAAEI,WAAW,CAAC,GAAG,0DAA0D;QACtF,qDAAqD;QACrD,IAAII,WAAWL,EAAEE,MAAM,CAACN,KAAK,GAAG;YAC9BF,YAAYA,SAASM,EAAEE,MAAM,CAACN,KAAK;QACrC;IACF;IAEA,qBACE,MAACV;QAAMoB,SAAS;;0BACd,KAAChB;gBAAeG,OAAOA;gBAAOC,UAAUI;;0BACxC,KAACZ;gBAAMqB,WAAU;gBAAMC,UAAS;gBAAOC,gBAAe;gBAAeC,OAAO;0BACzEf,WACCA,QAAQgB,GAAG,CAAC,CAAClB,OAAOmB,kBAClB,KAAC3B;wBAEC4B,MAAK;wBACLC,cAAY,CAAC,gBAAgB,EAAErB,MAAM,CAAC;wBACtCsB,IAAI;4BAAEtB;wBAAM;wBACZuB,SAAS,IAAMlB,kBAAkBL;kCAEjC,cAAA,KAACF;uBANIqB;;0BAUb,KAACzB;gBACC8B,YAAY;oBAAE,cAAc;gBAAkB;gBAC9CC,SAAS;gBACTtB,OAAOA;gBACPF,UAAUK;;;;AAIlB,EAAE;AAEF,MAAMM,aAAa,CAACT,OAAeuB;IACjC,MAAMC,UAAU;IAChB,MAAMC,QAAQD,QAAQE,IAAI,CAAC1B;IAC3B,MAAM2B,SAASF,SAASA,KAAK,CAAC,EAAE,GAAGA,KAAK,CAAC,EAAE,CAACE,MAAM,GAAG;IACrD,OACEA,WAAW,KAAK,gBAAgB;IAChCA,WAAW,KAAK,mBAAmB;IAClC,CAAC,CAACJ,SAASI,WAAW,KAAM,iBAAiB;IAC7C,CAAC,CAACJ,SAASI,WAAW,EAAG,qBAAqB;;AAEnD"}

package/dist/ContentWithLegend/ContentWithLegend.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ContentWithLegendProps } from './model/content-with-legend-model';
 /**
  * Component to help lay out content alongside a `Legend` component based on the
@@ -7,5 +6,5 @@ import { ContentWithLegendProps } from './model/content-with-legend-model';
  * See the documentation for the `Legend` component for more details about the
  * features and configuration of the legend.
  */
-export declare function ContentWithLegend({ children, legendProps, width, height, spacing, legendSize, minChildrenWidth, minChildrenHeight, }: ContentWithLegendProps): JSX.Element;
+export declare function ContentWithLegend({ children, legendProps, width, height, spacing, legendSize, minChildrenWidth, minChildrenHeight, }: ContentWithLegendProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ContentWithLegend.d.ts.map

package/dist/ContentWithLegend/ContentWithLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentWithLegend.d.ts","sourceRoot":"","sources":["../../src/ContentWithLegend/ContentWithLegend.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,sBAAsB,EAA8B,MAAM,mCAAmC,CAAC;AAEvG;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAW,EACX,UAAU,EACV,gBAAsB,EACtB,iBAAuB,GACxB,EAAE,sBAAsB,eAoCxB"}
+{"version":3,"file":"ContentWithLegend.d.ts","sourceRoot":"","sources":["../../src/ContentWithLegend/ContentWithLegend.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,sBAAsB,EAA8B,MAAM,mCAAmC,CAAC;AAEvG;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAW,EACX,UAAU,EACV,gBAAsB,EACtB,iBAAuB,GACxB,EAAE,sBAAsB,2CAoCxB"}

package/dist/ContentWithLegend/ContentWithLegend.js

@@ -22,9 +22,9 @@ import { getContentWithLegendLayout } from './model/content-with-legend-model';
  *
  * See the documentation for the `Legend` component for more details about the
  * features and configuration of the legend.
- */ export function ContentWithLegend({ children , legendProps , width , height , spacing =0 , legendSize , minChildrenWidth =100 , minChildrenHeight =100  }) {
+ */ export function ContentWithLegend({ children, legendProps, width, height, spacing = 0, legendSize, minChildrenWidth = 100, minChildrenHeight = 100 }) {
     const theme = useTheme();
-    const { content , legend , margin  } = getContentWithLegendLayout({
+    const { content, legend, margin } = getContentWithLegendLayout({
         width,
         height,
         legendProps,

package/dist/ContentWithLegend/ContentWithLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.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 { Box, useTheme } from '@mui/material';\nimport { getLegendSize } from '@perses-dev/core';\nimport { Legend } from '../Legend';\nimport { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps) {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      sx={{\n        width,\n        height,\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        sx={{\n          width: content.width,\n          height: content.height,\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n          overflow: 'hidden',\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["React","Box","useTheme","getLegendSize","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"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,SAASC,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,MAAM,QAAQ,YAAY;AACnC,SAAiCC,0BAA0B,QAAQ,oCAAoC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,kBAAkB,EAChCC,SAAQ,EACRC,YAAW,EACXC,MAAK,EACLC,OAAM,EACNC,SAAU,EAAC,EACXC,WAAU,EACVC,kBAAmB,IAAG,EACtBC,mBAAoB,IAAG,EACA;IACvB,MAAMC,QAAQb;IACd,MAAM,EAAEc,QAAO,EAAEC,OAAM,EAAEC,OAAM,EAAE,GAAGb,2BAA2B;QAC7DI;QACAC;QACAF;QACAM;QACAD;QACAF;QACAI;QACAH,YAAYT,cAAcS;IAC5B;IAEA,qBACE,MAACX;QACCkB,IAAI;YACFV;YACAC;YACAU,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACpB;gBACCkB,IAAI;oBACFV,OAAOO,QAAQP;oBACfC,QAAQM,QAAQN;oBAChBY,aAAa,CAAC,EAAEJ,OAAOK,MAAM,EAAE,CAAC;oBAChCC,cAAc,CAAC,EAAEN,OAAOO,OAAO,EAAE,CAAC;oBAClCJ,UAAU;gBACZ;0BAEC,OAAOd,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP;oBAAOC,QAAQM,QAAQN;gBAAO,KAAKH;;YAEhGC,eAAeS,OAAOS,sBAAQ,KAACtB;gBAAQ,GAAGI,WAAW;gBAAEE,QAAQO,OAAOP;gBAAQD,OAAOQ,OAAOR;;;;AAGnG"}
+{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.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 { Box, useTheme } from '@mui/material';\nimport { getLegendSize } from '@perses-dev/core';\nimport { Legend } from '../Legend';\nimport { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps) {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      sx={{\n        width,\n        height,\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        sx={{\n          width: content.width,\n          height: content.height,\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n          overflow: 'hidden',\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["React","Box","useTheme","getLegendSize","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"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,SAASC,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,MAAM,QAAQ,YAAY;AACnC,SAAiCC,0BAA0B,QAAQ,oCAAoC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,MAAM,EACNC,UAAU,CAAC,EACXC,UAAU,EACVC,mBAAmB,GAAG,EACtBC,oBAAoB,GAAG,EACA;IACvB,MAAMC,QAAQb;IACd,MAAM,EAAEc,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGb,2BAA2B;QAC7DI;QACAC;QACAF;QACAM;QACAD;QACAF;QACAI;QACAH,YAAYT,cAAcS;IAC5B;IAEA,qBACE,MAACX;QACCkB,IAAI;YACFV;YACAC;YACAU,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACpB;gBACCkB,IAAI;oBACFV,OAAOO,QAAQP,KAAK;oBACpBC,QAAQM,QAAQN,MAAM;oBACtBY,aAAa,CAAC,EAAEJ,OAAOK,KAAK,CAAC,EAAE,CAAC;oBAChCC,cAAc,CAAC,EAAEN,OAAOO,MAAM,CAAC,EAAE,CAAC;oBAClCJ,UAAU;gBACZ;0BAEC,OAAOd,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP,KAAK;oBAAEC,QAAQM,QAAQN,MAAM;gBAAC,KAAKH;;YAEhGC,eAAeS,OAAOS,IAAI,kBAAI,KAACtB;gBAAQ,GAAGI,WAAW;gBAAEE,QAAQO,OAAOP,MAAM;gBAAED,OAAOQ,OAAOR,KAAK;;;;AAGxG"}

package/dist/ContentWithLegend/model/content-with-legend-model.d.ts

@@ -2,7 +2,7 @@
 import { Theme } from '@mui/material';
 import { LegendPositions, LegendSize } from '@perses-dev/core';
 import { LegendProps } from '../../Legend';
-declare type Dimensions = {
+type Dimensions = {
     width: number;
     height: number;
 };
@@ -64,7 +64,7 @@ export interface ContentWithLegendLayout {
         bottom: number;
     };
 }
-declare type LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;
+type LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;
 export declare const TABLE_LEGEND_SIZE: LegendSizeConfig;
 /**
  * Returns information for laying out content alongside a legend.

package/dist/ContentWithLegend/model/content-with-legend-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-with-legend-model.d.ts","sourceRoot":"","sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAiB,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAEjF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAEpD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,2BACf,SAAQ,QAAQ,CAAC,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,aAAa,CAAC,CAAC;IAC1E,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,GAAG;QACnB,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,iBAAiB,EAAE,gBAe/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,GAAG,uBAAuB,CAwFvD"}
+{"version":3,"file":"content-with-legend-model.d.ts","sourceRoot":"","sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAiB,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAEjF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAEpD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,2BACf,SAAQ,QAAQ,CAAC,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,aAAa,CAAC,CAAC;IAC1E,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,GAAG;QACnB,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,KAAK,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,iBAAiB,EAAE,gBAe/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,GAAG,uBAAuB,CAwFvD"}

package/dist/ContentWithLegend/model/content-with-legend-model.js

@@ -31,7 +31,7 @@ const LEGEND_HEIGHT_SM = 40;
 const LEGEND_HEIGHT_LG = 100;
 /**
  * Returns information for laying out content alongside a legend.
- */ export function getContentWithLegendLayout({ width , height , legendProps , legendSize , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+ */ export function getContentWithLegendLayout({ width, height, legendProps, legendSize, minChildrenHeight, minChildrenWidth, spacing, theme }) {
     const legendOptions = legendProps === null || legendProps === void 0 ? void 0 : legendProps.options;
     const hasLegend = !!legendOptions;
     const noLegendLayout = {
@@ -52,7 +52,7 @@ const LEGEND_HEIGHT_LG = 100;
     if (!hasLegend) {
         return noLegendLayout;
     }
-    const { position  } = legendOptions;
+    const { position } = legendOptions;
     const mode = getLegendMode(legendOptions.mode);
     let legendWidth;
     let legendHeight;

package/dist/ContentWithLegend/model/content-with-legend-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.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 { Theme } from '@mui/material';\nimport { LegendPositions, getLegendMode, LegendSize } from '@perses-dev/core';\nimport { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n\n  /**\n   * Size used for the legend.\n   *\n   * @default 'medium'\n   */\n  legendSize?: LegendSize;\n\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts\n  extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {\n  legendProps?: ContentWithLegendProps['legendProps'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  medium: {\n    // 5 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 6,\n\n    // Pixel value\n    right: 250,\n  },\n  small: {\n    // 3 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 4,\n\n    // Pixel value\n    right: 150,\n  },\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendProps,\n  legendSize,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const legendOptions = legendProps?.options;\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'list') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    const tableColumns = legendProps?.tableProps?.columns || [];\n    const columnsWidth = tableColumns.reduce((total, col) => {\n      if (typeof col.width === 'number') {\n        total += col.width;\n      }\n      return total;\n    }, 0);\n\n    legendWidth = position === 'right' ? TABLE_LEGEND_SIZE[legendSize]['right'] + columnsWidth : width;\n\n    // Use the smaller of the size-based row count or the number of legend items + 1 for the header.\n    const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['bottom'], legendProps.data.length + 1);\n    legendHeight = position === 'bottom' ? rowsToShow * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'right' && contentWidth < minChildrenWidth) ||\n    (position === 'bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'right' ? spacing : 0,\n      bottom: position === 'bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getLegendMode","getTableCellLayout","TABLE_LEGEND_SIZE","medium","bottom","right","small","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendProps","legendSize","minChildrenHeight","minChildrenWidth","spacing","theme","legendOptions","options","hasLegend","noLegendLayout","legend","show","content","margin","position","mode","legendWidth","legendHeight","tableLayout","tableColumns","tableProps","columns","columnsWidth","reduce","total","col","rowsToShow","Math","min","data","length","contentWidth","contentHeight"],"mappings":"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"}
+{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.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 { Theme } from '@mui/material';\nimport { LegendPositions, getLegendMode, LegendSize } from '@perses-dev/core';\nimport { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n\n  /**\n   * Size used for the legend.\n   *\n   * @default 'medium'\n   */\n  legendSize?: LegendSize;\n\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts\n  extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {\n  legendProps?: ContentWithLegendProps['legendProps'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  medium: {\n    // 5 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 6,\n\n    // Pixel value\n    right: 250,\n  },\n  small: {\n    // 3 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 4,\n\n    // Pixel value\n    right: 150,\n  },\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendProps,\n  legendSize,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const legendOptions = legendProps?.options;\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'list') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    const tableColumns = legendProps?.tableProps?.columns || [];\n    const columnsWidth = tableColumns.reduce((total, col) => {\n      if (typeof col.width === 'number') {\n        total += col.width;\n      }\n      return total;\n    }, 0);\n\n    legendWidth = position === 'right' ? TABLE_LEGEND_SIZE[legendSize]['right'] + columnsWidth : width;\n\n    // Use the smaller of the size-based row count or the number of legend items + 1 for the header.\n    const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['bottom'], legendProps.data.length + 1);\n    legendHeight = position === 'bottom' ? rowsToShow * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'right' && contentWidth < minChildrenWidth) ||\n    (position === 'bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'right' ? spacing : 0,\n      bottom: position === 'bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getLegendMode","getTableCellLayout","TABLE_LEGEND_SIZE","medium","bottom","right","small","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendProps","legendSize","minChildrenHeight","minChildrenWidth","spacing","theme","legendOptions","options","hasLegend","noLegendLayout","legend","show","content","margin","position","mode","legendWidth","legendHeight","tableLayout","tableColumns","tableProps","columns","columnsWidth","reduce","total","col","rowsToShow","Math","min","data","length","contentWidth","contentHeight"],"mappings":"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"}

package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { AbsoluteTimeRange } from '@perses-dev/core';
 interface AbsoluteTimeFormProps {
     initialTimeRange: AbsoluteTimeRange;
     onChange: (timeRange: AbsoluteTimeRange) => void;
     onCancel: () => void;
 }
-export declare const AbsoluteTimePicker: ({ initialTimeRange, onChange, onCancel }: AbsoluteTimeFormProps) => JSX.Element;
+export declare const AbsoluteTimePicker: ({ initialTimeRange, onChange, onCancel }: AbsoluteTimeFormProps) => import("react/jsx-runtime").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;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,eAAO,MAAM,kBAAkB,6CAA8C,qBAAqB,gBAsKjG,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,4CAsKjG,CAAC"}

package/dist/DateTimeRangePicker/AbsoluteTimePicker.js

@@ -18,8 +18,8 @@ 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 , onCancel  })=>{
-    const { formatWithUserTimeZone  } = useTimeZone();
+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

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              '.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":"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,QAAQ,QAAQ;AACjC,SAASC,GAAG,EAAEC,KAAK,EAAEC,SAAS,EAAEC,UAAU,EAAEC,MAAM,QAAQ,gBAAgB;AAC1E,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,sBAAsB;AACjF,SAASC,cAAc,QAAQ,qCAAqC;AAEpE,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,MAAMC,mBAAmB;AAYzB,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,iBAAgB,EAAEC,SAAQ,EAAEC,SAAQ,EAAyB;IAChG,MAAM,EAAEC,uBAAsB,EAAE,GAAGP;IAEnC,+DAA+D;IAC/D,MAAM,CAACQ,WAAWC,aAAa,GAAGlB,SAA4Ba;IAE9D,yEAAyE;IACzE,6CAA6C;IAC7C,MAAM,CAACM,iBAAiBC,mBAAmB,GAAGpB,SAAsC;QAClFqB,OAAOL,uBAAuBH,iBAAiBQ,OAAOV;QACtDW,KAAKN,uBAAuBH,iBAAiBS,KAAKX;IACpD;IAEA,MAAM,CAACY,mBAAmBC,qBAAqB,GAAGxB,SAAkB;IAEpE,MAAMyB,kBAAkB,CAACC,SAAwBC;QAC/C,MAAMC,gBAAgB,OAAOF,YAAY;QACzC,MAAMG,eAAeD,gBAAgBF,UAAUV,uBAAuBU,SAASf;QAE/ES,mBAAmB,CAACU;YAClB,OAAO;gBACL,GAAGA,mBAAmB;gBACtB,CAACH,QAAQ,EAAEE;YACb;QACF;QAEA,yEAAyE;QACzE,2EAA2E;QAC3E,4EAA4E;QAC5E,0CAA0C;QAC1C,IAAI,CAACD,eAAe;YAClBV,aAAa,CAACa;gBACZ,OAAO;oBACL,GAAGA,aAAa;oBAChB,CAACJ,QAAQ,EAAED;gBACb;YACF;QACF;IACF;IAEA,MAAMM,oBAAoB,CAACC;QACzBR,gBAAgBQ,cAAc;IAChC;IAEA,MAAMC,kBAAkB,CAACC;QACvBV,gBAAgBU,YAAY;IAC9B;IAEA,MAAMC,kBAAkB;QACtB,MAAMC,WAAW;YACfhB,OAAO,IAAIiB,KAAKnB,gBAAgBE;YAChCC,KAAK,IAAIgB,KAAKnB,gBAAgBG;QAChC;QACA,MAAMiB,mBAAmB7B,kBAAkB2B,SAAShB,OAAOgB,SAASf;QACpE,IAAIiB,kBAAkB;YACpBrB,aAAamB;YACb,OAAOA;QACT;IACF;IAEA,MAAMG,UAAU;QACd,MAAMH,WAAWD;QACjB,IAAIC,UAAU;YACZvB,SAASuB;QACX;IACF;IAEA,qBACE,KAAC/B;QAAqBmC,aAAajC;kBACjC,cAAA,MAACN;YACCwC,SAAS;YACTC,IAAI,CAACC,QAAW,CAAA;oBACdC,SAASD,MAAMF,QAAQ,GAAG,GAAG;gBAC/B,CAAA;;gBAECnB,mCACC,MAACtB;oBACC0C,IAAI,CAACC,QAAW,CAAA;4BACd,oDAAoD;4BACpD,oCAAoC;gCAClCE,iBAAiBF,MAAMG,QAAQC,WAAWC;4BAC5C;wBACF,CAAA;;sCAEA,KAAC7C;4BAAW8C,SAAQ;4BAAKL,SAAS;4BAAGM,aAAa;sCAAG;;sCAGrD,KAAC5C;4BACC6C,wBAAuB;4BACvBC,QAAO;4BACPC,uBAAuB;4BACvBC,OAAO1C,iBAAiBQ;4BACxBP,UAAU,CAAC0C;gCACT,IAAIA,aAAa,MAAM;gCACvBxB,kBAAkBwB;4BACpB;4BACAC,UAAU;gCACRjC,qBAAqB;4BACvB;;;;gBAIL,CAACD,mCACA,MAACtB;oBACC0C,IAAI,CAACC,QAAW,CAAA;4BACd,oCAAoC;gCAClCE,iBAAiBF,MAAMG,QAAQC,WAAWC;4BAC5C;wBACF,CAAA;;sCAEA,KAAC7C;4BAAW8C,SAAQ;4BAAKL,SAAS;4BAAGM,aAAa;sCAAG;;sCAGrD,KAAC5C;4BACC6C,wBAAuB;4BACvBC,QAAO;4BACPC,uBAAuB;4BACvBC,OAAO1C,iBAAiBS;4BACxBoC,aAAazC,UAAUI;4BACvBP,UAAU,CAAC0C;gCACT,IAAIA,aAAa,MAAM;gCACvBtB,gBAAgBsB;4BAClB;4BACAC,UAAU,CAACD;gCACT,IAAIA,aAAa,MAAM;gCACvBhC,qBAAqB;gCACrBU,gBAAgBsB;4BAClB;;;;8BAIN,MAACtD;oBAAMyD,WAAU;oBAAMC,YAAW;oBAASC,KAAK;oBAAGC,IAAI;oBAAGC,IAAI;;sCAC5D,KAAC5D;4BACCW,UAAU,CAACkD;gCACT,8EAA8E;gCAC9EhC,kBAAkBgC,MAAMC,OAAOV;4BACjC;4BACAW,QAAQ,IAAM9B;4BACdmB,OAAOpC,gBAAgBE;4BACvB8C,OAAM;4BACNC,aAAazD;4BACb,8GAA8G;4BAC9G0D,MAAK;;sCAEP,KAAClE;4BACCW,UAAU,CAACkD;gCACT9B,gBAAgB8B,MAAMC,OAAOV;4BAC/B;4BACAW,QAAQ,IAAM9B;4BACdmB,OAAOpC,gBAAgBG;4BACvB6C,OAAM;4BACNC,aAAazD;4BACb0D,MAAK;;;;8BAGT,MAACnE;oBAAMyD,WAAU;oBAAMhB,IAAI;wBAAEE,SAAS,CAACD,QAAUA,MAAMF,QAAQ,GAAG;oBAAG;oBAAGmB,KAAK;;sCAC3E,KAACxD;4BAAO6C,SAAQ;4BAAYoB,SAAS,IAAM9B;4BAAW+B,SAAS;sCAAC;;sCAGhE,KAAClE;4BAAO6C,SAAQ;4BAAWoB,SAAS,IAAMvD;4BAAYwD,SAAS;sCAAC;;;;;;;AAO1E,EAAE"}
+{"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,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,MAAK,EAAEC,SAAQ,EAAEC,YAAW,EAAEC,OAAM,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;gBACnBC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,MAAMV;gBACNW,SAAS,IAAMV,0BAA0B;gBACzCW,IAAI,CAACC,QAAW,CAAA;wBACdC,SAASD,MAAMR,QAAQ;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,OAAO1B;4BAC9B,MAAM2B,oBAAuC;gCAC3CC,cAAcH;gCACdI,KAAK,IAAIC;4BACX;4BACA7B,SAAS0B;4BACTtB,0BAA0B;wBAC5B;wBACA0B,eAAe;4BACb1B,0BAA0B;wBAC5B;;;;;;AAMZ"}
+{"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,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,MAAK,EAAEC,YAAW,EAAEC,eAAc,EAAEC,cAAa,EAAEC,OAAM,EAAE,GAAGL;IACtE,MAAM,EAAEM,SAAQ,EAAE,GAAGV;IACrB,MAAMW,iBAAiB,CAACZ,oBAAoBM,SACxCJ,oBAAoBI,OAAOH,kBAAkBQ,YAC7CL,MAAMO;IACV,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,IAAI,CAACC,MAAMC,oBACtB,KAAC5B;oBAAmBS,OAAOkB,KAAKlB,MAAMO;8BACnCW,KAAKE;mBADOD;YAKhBzB,oBAAoBM,uBACnB,KAACT;gBACC8B,SAAS;oBACPlB;gBACF;0BACD;+BAID,KAACZ;gBACCS,OAAOM;gBACPe,SAAS;oBACPlB;gBACF;0BAECG;;;;AAKX"}
+{"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/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,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,MAAM;QACd,OAAO;IACT;IACA,IAAI,CAACP,SAASI,WAAWC,UAAU;QACjCC,QAAQC,MAAM;QACd,OAAO;IACT;IACA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,SAASC,oBAAoBC,SAA4B,EAAEC,UAAkB,EAAEC,QAAiB;IACrG,MAAMC,iBAAiBV,mBAAmBO,UAAUI,OAAOH,YAAYC;IACvE,MAAMG,eAAeZ,mBAAmBO,UAAUM,KAAKL,YAAYC;IACnE,OAAO,CAAC,EAAEC,eAAe,GAAG,EAAEE,aAAa,CAAC;AAC9C"}
+{"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"}