@perses-dev/components 0.38.0 → 0.40.0

package/dist/BarChart/BarChart.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UnitOptions } from '@perses-dev/core';
+import { FormatOptions } from '@perses-dev/core';
 import { ModeOption } from '../ModeSelector';
 export interface BarChartData {
     label: string;
@@ -9,7 +9,7 @@ export interface BarChartProps {
     width: number;
     height: number;
     data: BarChartData[] | null;
-    unit?: UnitOptions;
+    format?: FormatOptions;
     mode?: ModeOption;
 }
 export declare function BarChart(props: BarChartProps): JSX.Element;

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,WAAW,EAAe,MAAM,kBAAkB,CAAC;AAQ5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAO7C,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,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,eA+E5C"}
+{"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"}

package/dist/BarChart/BarChart.js

@@ -18,8 +18,9 @@ import { BarChart as EChartsBarChart } from 'echarts/charts';
 import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { Box } from '@mui/material';
-import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { useChartsTheme } from '../context/ChartsProvider';
 import { EChart } from '../EChart';
+import { getFormattedAxis } from '../utils';
 use([
     EChartsBarChart,
     GridComponent,
@@ -31,12 +32,12 @@ use([
 const BAR_WIN_WIDTH = 14;
 const BAR_GAP = 6;
 export function BarChart(props) {
-    const { width , height , data , unit ={
-        kind: 'Decimal'
+    const { width , height , data , format ={
+        unit: 'decimal'
     } , mode ='value'  } = props;
     const chartsTheme = useChartsTheme();
     const option = useMemo(()=>{
-        if (data == null) return chartsTheme.noDataOption;
+        if (data == null || !data.length) return chartsTheme.noDataOption;
         const source = [];
         data.map((d)=>{
             source.push([
@@ -57,7 +58,7 @@ export function BarChart(props) {
                     source: source
                 }
             ],
-            xAxis: {},
+            xAxis: getFormattedAxis({}, format),
             yAxis: {
                 type: 'category',
                 splitLine: {
@@ -76,11 +77,11 @@ export function BarChart(props) {
                     formatter: (params)=>{
                         if (mode === 'percentage') {
                             return params.data[1] && formatValue(params.data[1], {
-                                kind: 'Percent',
-                                decimal_places: unit.decimal_places
+                                unit: 'percent',
+                                decimalPlaces: format.decimalPlaces
                             });
                         }
-                        return params.data[1] && formatValue(params.data[1], unit);
+                        return params.data[1] && formatValue(params.data[1], format);
                     },
                     barMinWidth: BAR_WIN_WIDTH,
                     barCategoryGap: BAR_GAP
@@ -93,7 +94,12 @@ export function BarChart(props) {
             tooltip: {
                 appendToBody: true,
                 confine: true,
-                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${formatValue(params.data[1], unit)}`
+                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${formatValue(params.data[1], format)}`
+            },
+            // increase distance between grid and container to prevent y axis labels from getting cut off
+            grid: {
+                left: '5%',
+                right: '5%'
             }
         };
     }, [
@@ -101,7 +107,7 @@ export function BarChart(props) {
         chartsTheme,
         width,
         mode,
-        unit
+        format
     ]);
     return /*#__PURE__*/ _jsx(Box, {
         sx: {

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 { UnitOptions, 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/ChartsThemeProvider';\nimport { EChart } from '../EChart';\nimport { ModeOption } from '../ModeSelector';\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  unit?: UnitOptions;\n  mode?: ModeOption;\n}\n\nexport function BarChart(props: BarChartProps) {\n  const { width, height, data, unit = { kind: 'Decimal' }, mode = 'value' } = props;\n  const chartsTheme = useChartsTheme();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data == null) 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: {},\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                  kind: 'Percent',\n                  decimal_places: unit.decimal_places,\n                })\n              );\n            }\n            return params.data[1] && formatValue(params.data[1], unit);\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], unit)}`,\n      },\n    };\n  }, [data, chartsTheme, width, mode, unit]);\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","BAR_WIN_WIDTH","BAR_GAP","props","width","height","data","unit","kind","mode","chartsTheme","option","noDataOption","source","map","d","push","label","value","title","show","dataset","dimensions","xAxis","yAxis","type","splitLine","axisLabel","overflow","series","position","formatter","params","decimal_places","barMinWidth","barCategoryGap","itemStyle","borderRadius","color","echartsTheme","tooltip","appendToBody","confine","name","sx","minHeight","length","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/BarChart/index.js.map

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

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":"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"}
+{"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"}

package/dist/ColorPicker/index.js.map

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

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;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,EAAEC,QAAQ,QAAQ,eAAe,CAAC;AAC9C,SAASC,aAAa,QAAQ,kBAAkB,CAAC;AACjD,SAASC,MAAM,QAAQ,WAAW,CAAC;AACnC,SAAiCC,0BAA0B,QAAQ,mCAAmC,CAAC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,iBAAiB,CAAC,EAChCC,QAAQ,CAAA,EACRC,WAAW,CAAA,EACXC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNC,OAAO,EAAG,CAAC,CAAA,EACXC,UAAU,CAAA,EACVC,gBAAgB,EAAG,GAAG,CAAA,EACtBC,iBAAiB,EAAG,GAAG,CAAA,EACA,EAAE;IACzB,MAAMC,KAAK,GAAGb,QAAQ,EAAE,AAAC;IACzB,MAAM,EAAEc,OAAO,CAAA,EAAEC,MAAM,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGb,0BAA0B,CAAC;QAC7DI,KAAK;QACLC,MAAM;QACNF,WAAW;QACXM,iBAAiB;QACjBD,gBAAgB;QAChBF,OAAO;QACPI,KAAK;QACLH,UAAU,EAAET,aAAa,CAACS,UAAU,CAAC;KACtC,CAAC,AAAC;IAEH,qBACE,MAACX,GAAG;QACFkB,EAAE,EAAE;YACFV,KAAK;YACLC,MAAM;YACNU,QAAQ,EAAE,UAAU;YACpBC,QAAQ,EAAE,QAAQ;SACnB;;0BAED,KAACpB,GAAG;gBACFkB,EAAE,EAAE;oBACFV,KAAK,EAAEO,OAAO,CAACP,KAAK;oBACpBC,MAAM,EAAEM,OAAO,CAACN,MAAM;oBACtBY,WAAW,EAAE,CAAC,EAAEJ,MAAM,CAACK,KAAK,CAAC,EAAE,CAAC;oBAChCC,YAAY,EAAE,CAAC,EAAEN,MAAM,CAACO,MAAM,CAAC,EAAE,CAAC;oBAClCJ,QAAQ,EAAE,QAAQ;iBACnB;0BAEA,OAAOd,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;oBAAEE,KAAK,EAAEO,OAAO,CAACP,KAAK;oBAAEC,MAAM,EAAEM,OAAO,CAACN,MAAM;iBAAE,CAAC,GAAGH,QAAQ;cACnG;YACLC,WAAW,IAAIS,MAAM,CAACS,IAAI,kBAAI,KAACtB,MAAM;gBAAE,GAAGI,WAAW;gBAAEE,MAAM,EAAEO,MAAM,CAACP,MAAM;gBAAED,KAAK,EAAEQ,MAAM,CAACR,KAAK;cAAI;;MAClG,CACN;AACJ,CAAC"}
+{"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"}

package/dist/ContentWithLegend/index.js.map

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

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

@@ -25,7 +25,7 @@ export interface ContentWithLegendProps {
     /**
      * Size used for the legend.
      *
-     * @default 'Medium'
+     * @default 'medium'
      */
     legendSize?: LegendSize;
     /**

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

@@ -13,17 +13,17 @@
 import { getLegendMode } from '@perses-dev/core';
 import { getTableCellLayout } from '../../Table';
 export const TABLE_LEGEND_SIZE = {
-    Medium: {
+    medium: {
         // 5 rows plus header. Value to be multiplied by row height in pixels.
-        Bottom: 6,
+        bottom: 6,
         // Pixel value
-        Right: 250
+        right: 250
     },
-    Small: {
+    small: {
         // 3 rows plus header. Value to be multiplied by row height in pixels.
-        Bottom: 4,
+        bottom: 4,
         // Pixel value
-        Right: 150
+        right: 150
     }
 };
 const PANEL_HEIGHT_LG_BREAKPOINT = 300;
@@ -56,36 +56,36 @@ const LEGEND_HEIGHT_LG = 100;
     const mode = getLegendMode(legendOptions.mode);
     let legendWidth;
     let legendHeight;
-    if (mode === 'List') {
+    if (mode === 'list') {
         // TODO: normalize list to share similar height options as the table
         // when we add more size options.
-        legendWidth = position === 'Right' ? 200 : width;
+        legendWidth = position === 'right' ? 200 : width;
         // TODO: account for number of legend items returned when adjusting legend spacing
         legendHeight = LEGEND_HEIGHT_SM;
-        if (position === 'Right') {
+        if (position === 'right') {
             legendHeight = height;
         } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {
             legendHeight = LEGEND_HEIGHT_LG;
         }
     } else {
-        var ref;
+        var _legendProps_tableProps;
         // Table mode
         const tableLayout = getTableCellLayout(theme, 'compact');
-        const tableColumns = (legendProps === null || legendProps === void 0 ? void 0 : (ref = legendProps.tableProps) === null || ref === void 0 ? void 0 : ref.columns) || [];
+        const tableColumns = (legendProps === null || legendProps === void 0 ? void 0 : (_legendProps_tableProps = legendProps.tableProps) === null || _legendProps_tableProps === void 0 ? void 0 : _legendProps_tableProps.columns) || [];
         const columnsWidth = tableColumns.reduce((total, col)=>{
             if (typeof col.width === 'number') {
                 total += col.width;
             }
             return total;
         }, 0);
-        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE[legendSize]['Right'] + columnsWidth : width;
+        legendWidth = position === 'right' ? TABLE_LEGEND_SIZE[legendSize]['right'] + columnsWidth : width;
         // Use the smaller of the size-based row count or the number of legend items + 1 for the header.
-        const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['Bottom'], legendProps.data.length + 1);
-        legendHeight = position === 'Bottom' ? rowsToShow * tableLayout.height : height;
+        const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['bottom'], legendProps.data.length + 1);
+        legendHeight = position === 'bottom' ? rowsToShow * tableLayout.height : height;
     }
-    const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;
-    const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;
-    if (position === 'Right' && contentWidth < minChildrenWidth || position === 'Bottom' && contentHeight < minChildrenHeight) {
+    const contentWidth = position === 'right' ? width - legendWidth - spacing : width;
+    const contentHeight = position === 'bottom' ? height - legendHeight - spacing : height;
+    if (position === 'right' && contentWidth < minChildrenWidth || position === 'bottom' && contentHeight < minChildrenHeight) {
         // Legend does not fit. Just show the content.
         return noLegendLayout;
     }
@@ -100,8 +100,8 @@ const LEGEND_HEIGHT_LG = 100;
             height: contentHeight
         },
         margin: {
-            right: position === 'Right' ? spacing : 0,
-            bottom: position === 'Bottom' ? spacing : 0
+            right: position === 'right' ? spacing : 0,
+            bottom: position === 'bottom' ? spacing : 0
         }
     };
 }

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","right","bottom","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.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,gBAoLjG,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,gBAsKjG,CAAC"}

package/dist/DateTimeRangePicker/AbsoluteTimePicker.js

@@ -85,20 +85,15 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=
                 showStartCalendar && /*#__PURE__*/ _jsxs(Box, {
                     sx: (theme)=>({
                             // TODO: create separate reusable calendar component
-                            '.MuiPickerStaticWrapper-content': {
+                            '.MuiPickersLayout-contentWrapper': {
                                 backgroundColor: theme.palette.background.default
-                            },
-                            // reposition AM and PM buttons
-                            '.MuiIconButton-sizeMedium': {
-                                top: 80,
-                                bottom: 'auto',
-                                margin: theme.spacing(0, 3)
                             }
                         }),
                     children: [
                         /*#__PURE__*/ _jsx(Typography, {
                             variant: "h3",
                             padding: 1,
+                            paddingLeft: 2,
                             children: "Select Start Time"
                         }),
                         /*#__PURE__*/ _jsx(StaticDateTimePicker, {
@@ -112,29 +107,21 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=
                             },
                             onAccept: ()=>{
                                 setShowStartCalendar(false);
-                            },
-                            renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                                    ...params
-                                })
+                            }
                         })
                     ]
                 }),
                 !showStartCalendar && /*#__PURE__*/ _jsxs(Box, {
                     sx: (theme)=>({
-                            '.MuiPickerStaticWrapper-content': {
+                            '.MuiPickersLayout-contentWrapper': {
                                 backgroundColor: theme.palette.background.default
-                            },
-                            // reposition AM and PM buttons
-                            '.MuiIconButton-sizeMedium': {
-                                top: 80,
-                                bottom: 'auto',
-                                margin: theme.spacing(0, 3)
                             }
                         }),
                     children: [
                         /*#__PURE__*/ _jsx(Typography, {
                             variant: "h3",
                             padding: 1,
+                            paddingLeft: 2,
                             children: "Select End Time"
                         }),
                         /*#__PURE__*/ _jsx(StaticDateTimePicker, {
@@ -151,10 +138,7 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange , onCancel  })=
                                 if (newValue === null) return;
                                 setShowStartCalendar(true);
                                 onChangeEndTime(newValue);
-                            },
-                            renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                                    ...params
-                                })
+                            }
                         })
                     ]
                 }),

package/dist/DateTimeRangePicker/AbsoluteTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Box, Stack, TextField, Typography, Button } from '@mui/material';\nimport { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { validateDateRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\ninterface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n}\n\ntype AbsoluteTimeRangeInputValue = {\n  [Property in keyof AbsoluteTimeRange]: string;\n};\n\nexport const AbsoluteTimePicker = ({ initialTimeRange, onChange, onCancel }: AbsoluteTimeFormProps) => {\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  // Time range values as dates that can be used as a time range.\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n\n  // Time range values as strings used to populate the text inputs. May not\n  // be valid as dates when the user is typing.\n  const [timeRangeInputs, setTimeRangeInputs] = useState<AbsoluteTimeRangeInputValue>({\n    start: formatWithUserTimeZone(initialTimeRange.start, DATE_TIME_FORMAT),\n    end: formatWithUserTimeZone(initialTimeRange.end, DATE_TIME_FORMAT),\n  });\n\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: string | Date, segment: keyof AbsoluteTimeRange) => {\n    const isInputChange = typeof newTime === 'string';\n    const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, DATE_TIME_FORMAT);\n\n    setTimeRangeInputs((prevTimeRangeInputs) => {\n      return {\n        ...prevTimeRangeInputs,\n        [segment]: newInputTime,\n      };\n    });\n\n    // When the change is a string from an input, do not try to convert it to\n    // a date because there are likely to be interim stages of editing where it\n    // is not valid as a date. When the change is a Date from the calendar/clock\n    // interface, we can be sure it is a date.\n    if (!isInputChange) {\n      setTimeRange((prevTimeRange) => {\n        return {\n          ...prevTimeRange,\n          [segment]: newTime,\n        };\n      });\n    }\n  };\n\n  const onChangeStartTime = (newStartTime: string | Date) => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: string | Date) => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = () => {\n    const newDates = {\n      start: new Date(timeRangeInputs.start),\n      end: new Date(timeRangeInputs.end),\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\n      setTimeRange(newDates);\n      return newDates;\n    }\n  };\n\n  const onApply = () => {\n    const newDates = updateDateRange();\n    if (newDates) {\n      onChange(newDates);\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickerStaticWrapper-content': {\n                backgroundColor: theme.palette.background.default,\n              },\n              // reposition AM and PM buttons\n              '.MuiIconButton-sizeMedium': {\n                top: 80,\n                bottom: 'auto',\n                margin: theme.spacing(0, 3),\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeStartTime(newValue);\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n              renderInput={(params) => <TextField {...params} />}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickerStaticWrapper-content': {\n                backgroundColor: theme.palette.background.default,\n              },\n              // reposition AM and PM buttons\n              '.MuiIconButton-sizeMedium': {\n                top: 80,\n                bottom: 'auto',\n                margin: theme.spacing(0, 3),\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.end}\n              minDateTime={timeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeEndTime(newValue);\n              }}\n              onAccept={(newValue) => {\n                if (newValue === null) return;\n                setShowStartCalendar(true);\n                onChangeEndTime(newValue);\n              }}\n              renderInput={(params) => <TextField {...params} />}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              // TODO: add helperText, fix validation after we decide on form state solution\n              onChangeStartTime(event.target.value);\n            }}\n            onBlur={() => updateDateRange()}\n            value={timeRangeInputs.start}\n            label=\"Start Time\"\n            placeholder={DATE_TIME_FORMAT}\n            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590\n            type=\"tel\"\n          />\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              onChangeEndTime(event.target.value);\n            }}\n            onBlur={() => updateDateRange()}\n            value={timeRangeInputs.end}\n            label=\"End Time\"\n            placeholder={DATE_TIME_FORMAT}\n            type=\"tel\"\n          />\n        </Stack>\n        <Stack direction=\"row\" sx={{ padding: (theme) => theme.spacing(0, 1) }} gap={1}>\n          <Button variant=\"contained\" onClick={() => onApply()} fullWidth>\n            Apply\n          </Button>\n          <Button variant=\"outlined\" onClick={() => onCancel()} fullWidth>\n            Cancel\n          </Button>\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["useState","Box","Stack","TextField","Typography","Button","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useTimeZone","validateDateRange","DATE_TIME_FORMAT","AbsoluteTimePicker","initialTimeRange","onChange","onCancel","formatWithUserTimeZone","timeRange","setTimeRange","timeRangeInputs","setTimeRangeInputs","start","end","showStartCalendar","setShowStartCalendar","changeTimeRange","newTime","segment","isInputChange","newInputTime","prevTimeRangeInputs","prevTimeRange","onChangeStartTime","newStartTime","onChangeEndTime","newEndTime","updateDateRange","newDates","Date","isValidDateRange","onApply","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","top","bottom","margin","variant","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","renderInput","params","minDateTime","direction","alignItems","gap","pl","pr","event","target","onBlur","label","placeholder","type","onClick","fullWidth"],"mappings":"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"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Box, Stack, TextField, Typography, Button } from '@mui/material';\nimport { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { validateDateRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\ninterface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n}\n\ntype AbsoluteTimeRangeInputValue = {\n  [Property in keyof AbsoluteTimeRange]: string;\n};\n\nexport const AbsoluteTimePicker = ({ initialTimeRange, onChange, onCancel }: AbsoluteTimeFormProps) => {\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  // Time range values as dates that can be used as a time range.\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n\n  // Time range values as strings used to populate the text inputs. May not\n  // be valid as dates when the user is typing.\n  const [timeRangeInputs, setTimeRangeInputs] = useState<AbsoluteTimeRangeInputValue>({\n    start: formatWithUserTimeZone(initialTimeRange.start, DATE_TIME_FORMAT),\n    end: formatWithUserTimeZone(initialTimeRange.end, DATE_TIME_FORMAT),\n  });\n\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: string | Date, segment: keyof AbsoluteTimeRange) => {\n    const isInputChange = typeof newTime === 'string';\n    const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, DATE_TIME_FORMAT);\n\n    setTimeRangeInputs((prevTimeRangeInputs) => {\n      return {\n        ...prevTimeRangeInputs,\n        [segment]: newInputTime,\n      };\n    });\n\n    // When the change is a string from an input, do not try to convert it to\n    // a date because there are likely to be interim stages of editing where it\n    // is not valid as a date. When the change is a Date from the calendar/clock\n    // interface, we can be sure it is a date.\n    if (!isInputChange) {\n      setTimeRange((prevTimeRange) => {\n        return {\n          ...prevTimeRange,\n          [segment]: newTime,\n        };\n      });\n    }\n  };\n\n  const onChangeStartTime = (newStartTime: string | Date) => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: string | Date) => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = () => {\n    const newDates = {\n      start: new Date(timeRangeInputs.start),\n      end: new Date(timeRangeInputs.end),\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\n      setTimeRange(newDates);\n      return newDates;\n    }\n  };\n\n  const onApply = () => {\n    const newDates = updateDateRange();\n    if (newDates) {\n      onChange(newDates);\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeStartTime(newValue);\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.end}\n              minDateTime={timeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeEndTime(newValue);\n              }}\n              onAccept={(newValue) => {\n                if (newValue === null) return;\n                setShowStartCalendar(true);\n                onChangeEndTime(newValue);\n              }}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              // TODO: add helperText, fix validation after we decide on form state solution\n              onChangeStartTime(event.target.value);\n            }}\n            onBlur={() => updateDateRange()}\n            value={timeRangeInputs.start}\n            label=\"Start Time\"\n            placeholder={DATE_TIME_FORMAT}\n            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590\n            type=\"tel\"\n          />\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              onChangeEndTime(event.target.value);\n            }}\n            onBlur={() => updateDateRange()}\n            value={timeRangeInputs.end}\n            label=\"End Time\"\n            placeholder={DATE_TIME_FORMAT}\n            type=\"tel\"\n          />\n        </Stack>\n        <Stack direction=\"row\" sx={{ padding: (theme) => theme.spacing(0, 1) }} gap={1}>\n          <Button variant=\"contained\" onClick={() => onApply()} fullWidth>\n            Apply\n          </Button>\n          <Button variant=\"outlined\" onClick={() => onCancel()} fullWidth>\n            Cancel\n          </Button>\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["useState","Box","Stack","TextField","Typography","Button","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useTimeZone","validateDateRange","DATE_TIME_FORMAT","AbsoluteTimePicker","initialTimeRange","onChange","onCancel","formatWithUserTimeZone","timeRange","setTimeRange","timeRangeInputs","setTimeRangeInputs","start","end","showStartCalendar","setShowStartCalendar","changeTimeRange","newTime","segment","isInputChange","newInputTime","prevTimeRangeInputs","prevTimeRange","onChangeStartTime","newStartTime","onChangeEndTime","newEndTime","updateDateRange","newDates","Date","isValidDateRange","onApply","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","variant","paddingLeft","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","minDateTime","direction","alignItems","gap","pl","pr","event","target","onBlur","label","placeholder","type","onClick","fullWidth"],"mappings":"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"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useRef, useState, useMemo } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  TimeRangeValue,\n} from '@perses-dev/core';\nimport { TimeOption } from '../model';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector } from './TimeRangeSelector';\n\ninterface DateTimeRangePickerProps {\n  value: TimeRangeValue;\n  onChange: (value: TimeRangeValue) => void;\n  timeOptions: TimeOption[];\n  height?: string;\n}\n\nexport function DateTimeRangePicker(props: DateTimeRangePickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  return (\n    <Stack direction=\"row\" spacing={1} height={height}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={timeOptions}\n            value={value}\n            height={height}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              onChange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","isRelativeTimeRange","toAbsoluteTimeRange","AbsoluteTimePicker","TimeRangeSelector","DateTimeRangePicker","props","value","onChange","timeOptions","height","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onCancel","fullWidth","ref","onSelectChange","event","duration","target","relativeTimeInput","pastDuration","end","Date","onCustomClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,OAAO,CAAC;AAClD,SAASC,GAAG,EAAEC,WAAW,EAAEC,OAAO,EAAEC,KAAK,QAAQ,eAAe,CAAC;AACjE,SAIEC,mBAAmB,EACnBC,mBAAmB,QAEd,kBAAkB,CAAC;AAE1B,SAASC,kBAAkB,QAAQ,sBAAsB,CAAC;AAC1D,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AASxD,OAAO,SAASC,mBAAmB,CAACC,KAA+B,EAAE;IACnE,MAAM,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGJ,KAAK,AAAC;IAEvD,MAAM,CAACK,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAC5E,MAAMkB,QAAQ,GAAGnB,MAAM,EAAE,AAAC;IAE1B,MAAMoB,kBAAkB,GAAGlB,OAAO,CAAC,IAAM;QACvC,OAAOK,mBAAmB,CAACM,KAAK,CAAC,GAAGL,mBAAmB,CAACK,KAAK,CAAC,GAAGA,KAAK,CAAC;IACzE,CAAC,EAAE;QAACA,KAAK;KAAC,CAAC,AAAC;IAEZ,qBACE,MAACP,KAAK;QAACe,SAAS,EAAC,KAAK;QAACC,OAAO,EAAE,CAAC;QAAEN,MAAM,EAAEA,MAAM;;0BAC/C,KAACX,OAAO;gBACNc,QAAQ,EAAEA,QAAQ,CAACI,OAAO;gBAC1BC,YAAY,EAAE;oBACZC,QAAQ,EAAE,QAAQ;oBAClBC,UAAU,EAAE,QAAQ;iBACrB;gBACDC,IAAI,EAAEV,sBAAsB;gBAC5BW,OAAO,EAAE,IAAMV,yBAAyB,CAAC,KAAK,CAAC;gBAC/CW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,OAAO,EAAED,KAAK,CAACR,OAAO,CAAC,CAAC,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACb,kBAAkB;oBACjBuB,gBAAgB,EAAEZ,kBAAkB;oBACpCN,QAAQ,EAAE,CAACD,KAAwB,GAAK;wBACtCC,QAAQ,CAACD,KAAK,CAAC,CAAC;wBAChBK,yBAAyB,CAAC,KAAK,CAAC,CAAC;oBACnC,CAAC;oBACDe,QAAQ,EAAE,IAAMf,yBAAyB,CAAC,KAAK,CAAC;kBAChD;cACM;0BACV,KAACd,WAAW;gBAAC8B,SAAS;0BACpB,cAAA,KAAC/B,GAAG;oBAACgC,GAAG,EAAEhB,QAAQ;8BAChB,cAAA,KAACT,iBAAiB;wBAChBK,WAAW,EAAEA,WAAW;wBACxBF,KAAK,EAAEA,KAAK;wBACZG,MAAM,EAAEA,MAAM;wBACdoB,cAAc,EAAE,CAACC,KAAK,GAAK;4BACzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAAC1B,KAAK,AAAC;4BACpC,MAAM2B,iBAAiB,GAAsB;gCAC3CC,YAAY,EAAEH,QAAQ;gCACtBI,GAAG,EAAE,IAAIC,IAAI,EAAE;6BAChB,AAAC;4BACF7B,QAAQ,CAAC0B,iBAAiB,CAAC,CAAC;4BAC5BtB,yBAAyB,CAAC,KAAK,CAAC,CAAC;wBACnC,CAAC;wBACD0B,aAAa,EAAE,IAAM;4BACnB1B,yBAAyB,CAAC,IAAI,CAAC,CAAC;wBAClC,CAAC;sBACD;kBACE;cACM;;MACR,CACR;AACJ,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useRef, useState, useMemo } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  TimeRangeValue,\n} from '@perses-dev/core';\nimport { TimeOption } from '../model';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector } from './TimeRangeSelector';\n\ninterface DateTimeRangePickerProps {\n  value: TimeRangeValue;\n  onChange: (value: TimeRangeValue) => void;\n  timeOptions: TimeOption[];\n  height?: string;\n}\n\nexport function DateTimeRangePicker(props: DateTimeRangePickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  return (\n    <Stack direction=\"row\" spacing={1} height={height}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={timeOptions}\n            value={value}\n            height={height}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              onChange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","isRelativeTimeRange","toAbsoluteTimeRange","AbsoluteTimePicker","TimeRangeSelector","DateTimeRangePicker","props","value","onChange","timeOptions","height","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onCancel","fullWidth","ref","onSelectChange","event","duration","target","relativeTimeInput","pastDuration","end","Date","onCustomClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,QAAQ;AAClD,SAASC,GAAG,EAAEC,WAAW,EAAEC,OAAO,EAAEC,KAAK,QAAQ,gBAAgB;AACjE,SAIEC,mBAAmB,EACnBC,mBAAmB,QAEd,mBAAmB;AAE1B,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AASxD,OAAO,SAASC,oBAAoBC,KAA+B;IACjE,MAAM,EAAEC,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"}