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

package/dist/BarChart/BarChart.d.ts

@@ -1,5 +1,4 @@
-/// <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,8 +8,8 @@ export interface BarChartProps {
     width: number;
     height: number;
     data: BarChartData[] | null;
-    unit?: UnitOptions;
+    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,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,2CAoF5C"}

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'
-    } , mode ='value'  } = props;
+    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.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":"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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,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/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.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;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,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/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

@@ -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;
 };
@@ -25,7 +25,7 @@ export interface ContentWithLegendProps {
     /**
      * Size used for the legend.
      *
-     * @default 'Medium'
+     * @default 'medium'
      */
     legendSize?: LegendSize;
     /**
@@ -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

@@ -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;
@@ -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,40 +52,40 @@ const LEGEND_HEIGHT_LG = 100;
     if (!hasLegend) {
         return noLegendLayout;
     }
-    const { position  } = legendOptions;
+    const { position } = legendOptions;
     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

@@ -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,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,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
@@ -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
-                                })
+                            }
                         })
                     ]
                 }),