@perses-dev/components 0.0.0-snapshot-explorer-plugin-c4a7621 → 0.0.0-snapshot-profile-8090608

package/README.md

@@ -12,7 +12,4 @@ import { LineChart } from "@perses-dev/components";
 
 For detailed examples of how to use certain components, see individual docs for:
 
-- [LineChart.md](./src/LineChart/LineChart.md)
-- [GaugeChart.md](./src/GaugeChart/GaugeChart.md)
-- [StatChart.md](./src/StatChart/StatChart.md)
-- [BarChart.md](./src/BarChart/BarChart.md)
+- [LineChart.md](./src/LineChart/LineChart.md)

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 { ChangeEvent, ReactElement, useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport DeleteIcon from 'mdi-material-ui/Delete';\n\ninterface ColorPickerProps {\n  color: string;\n  onChange?: (color: string) => void;\n  onClear?: () => void;\n  /**\n   * Preset color palette\n   */\n  palette?: string[];\n}\n\nexport const ColorPicker = ({ color, onChange, onClear, palette }: ColorPickerProps): ReactElement => {\n  // value is the visible value for the controlled text input\n  const [value, setValue] = useState(color);\n\n  const handleColorChange = (color: string): void => {\n    setValue(color);\n    onChange?.(color);\n  };\n\n  // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\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?.(e.target.value);\n    }\n  };\n\n  return (\n    <Stack spacing={1}>\n      <HexColorPicker color={color} onChange={handleColorChange} style={{ width: '100%' }} />\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      <Stack direction=\"row\" gap={1} alignItems=\"center\">\n        <TextField\n          inputProps={{ 'aria-label': 'enter hex color' }}\n          fullWidth\n          value={value}\n          onChange={handleInputChange}\n        />\n        {onClear && (\n          <IconButton onClick={onClear}>\n            <DeleteIcon />\n          </IconButton>\n        )}\n      </Stack>\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","useState","HexColorPicker","CircleIcon","DeleteIcon","ColorPicker","color","onChange","onClear","palette","value","setValue","handleColorChange","handleInputChange","e","inputValue","target","replace","substring","isValidHex","spacing","style","width","direction","flexWrap","justifyContent","map","i","size","aria-label","sx","onClick","gap","alignItems","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,SAAoCC,QAAQ,QAAQ,QAAQ;AAC5D,SAASC,cAAc,QAAQ,iBAAiB;AAChD,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,gBAAgB,yBAAyB;AAYhD,OAAO,MAAMC,cAAc,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAoB;IACjF,2DAA2D;IAC3D,MAAM,CAACC,OAAOC,SAAS,GAAGV,SAASK;IAEnC,MAAMM,oBAAoB,CAACN;QACzBK,SAASL;QACTC,WAAWD;IACb;IAEA,6FAA6F;IAC7F,MAAMO,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;YAC9BH,WAAWO,EAAEE,MAAM,CAACN,KAAK;QAC3B;IACF;IAEA,qBACE,MAACX;QAAMqB,SAAS;;0BACd,KAAClB;gBAAeI,OAAOA;gBAAOC,UAAUK;gBAAmBS,OAAO;oBAAEC,OAAO;gBAAO;;0BAClF,KAACvB;gBAAMwB,WAAU;gBAAMC,UAAS;gBAAOC,gBAAe;gBAAeH,OAAM;0BACxEb,WACCA,QAAQiB,GAAG,CAAC,CAACpB,OAAOqB,kBAClB,KAAC7B;wBAEC8B,MAAK;wBACLC,cAAY,CAAC,gBAAgB,EAAEvB,MAAM,CAAC;wBACtCwB,IAAI;4BAAExB;wBAAM;wBACZyB,SAAS,IAAMnB,kBAAkBN;kCAEjC,cAAA,KAACH;uBANIwB;;0BAUb,MAAC5B;gBAAMwB,WAAU;gBAAMS,KAAK;gBAAGC,YAAW;;kCACxC,KAACjC;wBACCkC,YAAY;4BAAE,cAAc;wBAAkB;wBAC9CC,SAAS;wBACTzB,OAAOA;wBACPH,UAAUM;;oBAEXL,yBACC,KAACV;wBAAWiC,SAASvB;kCACnB,cAAA,KAACJ;;;;;;AAMb,EAAE;AAEF,MAAMe,aAAa,CAACT,OAAe0B;IACjC,MAAMC,UAAU;IAChB,MAAMC,QAAQD,QAAQE,IAAI,CAAC7B;IAC3B,MAAM8B,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"}
+{"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 { ChangeEvent, ReactElement, useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport DeleteIcon from 'mdi-material-ui/Delete';\n\ninterface ColorPickerProps {\n  color: string;\n  onChange?: (color: string) => void;\n  onClear?: () => void;\n  /**\n   * Preset color palette\n   */\n  palette?: string[];\n}\n\nexport const ColorPicker = ({ color, onChange, onClear, palette }: ColorPickerProps): ReactElement => {\n  // value is the visible value for the controlled text input\n  const [value, setValue] = useState(color);\n\n  const handleColorChange = (color: string): void => {\n    setValue(color);\n    onChange?.(color);\n  };\n\n  // we should update this if https://github.com/omgovich/react-colorful/issues/157 is resolved\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {\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?.(e.target.value);\n    }\n  };\n\n  return (\n    <Stack spacing={1}>\n      <HexColorPicker color={color} onChange={handleColorChange} style={{ width: '100%' }} />\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      <Stack direction=\"row\" gap={1} alignItems=\"center\">\n        <TextField\n          inputProps={{ 'aria-label': 'enter hex color' }}\n          fullWidth\n          value={value}\n          onChange={handleInputChange}\n        />\n        {onClear && (\n          <IconButton onClick={onClear}>\n            <DeleteIcon />\n          </IconButton>\n        )}\n      </Stack>\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","useState","HexColorPicker","CircleIcon","DeleteIcon","ColorPicker","color","onChange","onClear","palette","value","setValue","handleColorChange","handleInputChange","e","inputValue","target","replace","substring","isValidHex","spacing","style","width","direction","flexWrap","justifyContent","map","i","size","aria-label","sx","onClick","gap","alignItems","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,SAAoCC,QAAQ,QAAQ,QAAQ;AAC5D,SAASC,cAAc,QAAQ,iBAAiB;AAChD,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,gBAAgB,yBAAyB;AAYhD,OAAO,MAAMC,cAAc,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAoB;IACjF,2DAA2D;IAC3D,MAAM,CAACC,OAAOC,SAAS,GAAGV,SAASK;IAEnC,MAAMM,oBAAoB,CAACN;QACzBK,SAASL;QACTC,WAAWD;IACb;IAEA,6FAA6F;IAC7F,MAAMO,oBAAoB,CAACC;QACzB,MAAMC,aAAaD,EAAEE,MAAM,CAACN,KAAK,CAACO,OAAO,CAAC,kBAAkB,IAAIC,SAAS,CAAC,GAAG;QAC7EP,SAAS,CAAC,CAAC,EAAEI,YAAY,GAAG,0DAA0D;QACtF,qDAAqD;QACrD,IAAII,WAAWL,EAAEE,MAAM,CAACN,KAAK,GAAG;YAC9BH,WAAWO,EAAEE,MAAM,CAACN,KAAK;QAC3B;IACF;IAEA,qBACE,MAACX;QAAMqB,SAAS;;0BACd,KAAClB;gBAAeI,OAAOA;gBAAOC,UAAUK;gBAAmBS,OAAO;oBAAEC,OAAO;gBAAO;;0BAClF,KAACvB;gBAAMwB,WAAU;gBAAMC,UAAS;gBAAOC,gBAAe;gBAAeH,OAAM;0BACxEb,WACCA,QAAQiB,GAAG,CAAC,CAACpB,OAAOqB,kBAClB,KAAC7B;wBAEC8B,MAAK;wBACLC,cAAY,CAAC,gBAAgB,EAAEvB,OAAO;wBACtCwB,IAAI;4BAAExB;wBAAM;wBACZyB,SAAS,IAAMnB,kBAAkBN;kCAEjC,cAAA,KAACH;uBANIwB;;0BAUb,MAAC5B;gBAAMwB,WAAU;gBAAMS,KAAK;gBAAGC,YAAW;;kCACxC,KAACjC;wBACCkC,YAAY;4BAAE,cAAc;wBAAkB;wBAC9CC,SAAS;wBACTzB,OAAOA;wBACPH,UAAUM;;oBAEXL,yBACC,KAACV;wBAAWiC,SAASvB;kCACnB,cAAA,KAACJ;;;;;;AAMb,EAAE;AAEF,MAAMe,aAAa,CAACT,OAAe0B;IACjC,MAAMC,UAAU;IAChB,MAAMC,QAAQD,QAAQE,IAAI,CAAC7B;IAC3B,MAAM8B,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/OptionsColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ColorPicker/OptionsColorPicker.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 { ReactElement, useState, MouseEvent } from 'react';\nimport { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { useChartsTheme } from '../context';\nimport { ColorPicker } from './ColorPicker';\n\nexport interface OptionsColorPickerProps {\n  label: string;\n  color: string;\n  onColorChange: (color: string) => void;\n  onClear?: () => void;\n}\n\nexport function OptionsColorPicker({ label, color, onColorChange, onClear }: OptionsColorPickerProps): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = (): void => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size=\"small\"\n        aria-label={`change ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"options color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        slotProps={{ paper: { sx: { padding: (theme) => theme.spacing(2) } } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} palette={[defaultColor, ...palette]} onChange={onColorChange} onClear={onClear} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["useState","styled","IconButton","Popover","CircleIcon","useChartsTheme","ColorPicker","OptionsColorPicker","label","color","onColorChange","onClear","anchorEl","setAnchorEl","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","size","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","slotProps","paper","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","backgroundColor"],"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,SAAuBA,QAAQ,QAAoB,QAAQ;AAC3D,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,cAAc,QAAQ,aAAa;AAC5C,SAASC,WAAW,QAAQ,gBAAgB;AAS5C,OAAO,SAASC,mBAAmB,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAEC,OAAO,EAA2B;IAClG,MAAM,CAACC,UAAUC,YAAY,GAAGb,SAAmC;IACnE,MAAMc,SAASC,QAAQH;IAEvB,MAAMI,kBAAkB,CAACC;QACvBJ,YAAYI,MAAMC,aAAa;IACjC;IAEA,MAAMC,mBAAmB;QACvBN,YAAY;IACd;IAEA,MAAM,EACJO,YAAY,EAAEC,YAAY,EAAEC,OAAO,EAAE,EACtC,GAAGjB;IAEJ,qBACE;;0BACE,KAACkB;gBACCC,MAAK;gBACLC,cAAY,CAAC,OAAO,EAAEjB,MAAM,MAAM,CAAC;gBACnCkB,YAAYZ;gBACZa,WAAWlB;gBACXmB,SAASZ;0BAET,cAAA,KAACZ;;0BAEH,KAACD;gBACC0B,eAAY;gBACZC,MAAMhB;gBACNF,UAAUA;gBACVmB,SAASZ;gBACTa,WAAW;oBAAEC,OAAO;wBAAEC,IAAI;4BAAEC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;oBAAE;gBAAE;gBACrEC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,iBAAiB;oBACfF,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAAClC;oBAAYG,OAAOA;oBAAOa,SAAS;wBAACD;2BAAiBC;qBAAQ;oBAAEoB,UAAUhC;oBAAeC,SAASA;;;;;AAI1G;AAEA,MAAMY,kBAAkBtB,OAAOC,YAAY;IACzCyC,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEjB,SAAS,EAAED,UAAU,EAAE,GAAM,CAAA;QACjCmB,iBAAiBnB,cAAcC,YAAY,CAAC,EAAEA,UAAU,EAAE,CAAC,GAAG;QAC9DlB,OAAOkB;IACT,CAAA"}
+{"version":3,"sources":["../../src/ColorPicker/OptionsColorPicker.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 { ReactElement, useState, MouseEvent } from 'react';\nimport { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { useChartsTheme } from '../context';\nimport { ColorPicker } from './ColorPicker';\n\nexport interface OptionsColorPickerProps {\n  label: string;\n  color: string;\n  onColorChange: (color: string) => void;\n  onClear?: () => void;\n}\n\nexport function OptionsColorPicker({ label, color, onColorChange, onClear }: OptionsColorPickerProps): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = (): void => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size=\"small\"\n        aria-label={`change ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"options color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        slotProps={{ paper: { sx: { padding: (theme) => theme.spacing(2) } } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} palette={[defaultColor, ...palette]} onChange={onColorChange} onClear={onClear} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["useState","styled","IconButton","Popover","CircleIcon","useChartsTheme","ColorPicker","OptionsColorPicker","label","color","onColorChange","onClear","anchorEl","setAnchorEl","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","size","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","slotProps","paper","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","backgroundColor"],"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,SAAuBA,QAAQ,QAAoB,QAAQ;AAC3D,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,cAAc,QAAQ,aAAa;AAC5C,SAASC,WAAW,QAAQ,gBAAgB;AAS5C,OAAO,SAASC,mBAAmB,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAEC,OAAO,EAA2B;IAClG,MAAM,CAACC,UAAUC,YAAY,GAAGb,SAAmC;IACnE,MAAMc,SAASC,QAAQH;IAEvB,MAAMI,kBAAkB,CAACC;QACvBJ,YAAYI,MAAMC,aAAa;IACjC;IAEA,MAAMC,mBAAmB;QACvBN,YAAY;IACd;IAEA,MAAM,EACJO,YAAY,EAAEC,YAAY,EAAEC,OAAO,EAAE,EACtC,GAAGjB;IAEJ,qBACE;;0BACE,KAACkB;gBACCC,MAAK;gBACLC,cAAY,CAAC,OAAO,EAAEjB,MAAM,MAAM,CAAC;gBACnCkB,YAAYZ;gBACZa,WAAWlB;gBACXmB,SAASZ;0BAET,cAAA,KAACZ;;0BAEH,KAACD;gBACC0B,eAAY;gBACZC,MAAMhB;gBACNF,UAAUA;gBACVmB,SAASZ;gBACTa,WAAW;oBAAEC,OAAO;wBAAEC,IAAI;4BAAEC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;wBAAG;oBAAE;gBAAE;gBACrEC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,iBAAiB;oBACfF,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAAClC;oBAAYG,OAAOA;oBAAOa,SAAS;wBAACD;2BAAiBC;qBAAQ;oBAAEoB,UAAUhC;oBAAeC,SAASA;;;;;AAI1G;AAEA,MAAMY,kBAAkBtB,OAAOC,YAAY;IACzCyC,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEjB,SAAS,EAAED,UAAU,EAAE,GAAM,CAAA;QACjCmB,iBAAiBnB,cAAcC,YAAY,GAAGA,UAAU,EAAE,CAAC,GAAG;QAC9DlB,OAAOkB;IACT,CAAA"}

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 { ReactElement } 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): ReactElement {\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      style={{\n        width,\n        height,\n      }}\n      sx={{\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        style={{\n          width: content.width,\n          height: content.height,\n        }}\n        sx={{\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":["Box","useTheme","getLegendSize","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","style","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;;AAGjC,SAASA,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,OAAO;YACLV;YACAC;QACF;QACAU,IAAI;YACFC,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACrB;gBACCkB,OAAO;oBACLV,OAAOO,QAAQP,KAAK;oBACpBC,QAAQM,QAAQN,MAAM;gBACxB;gBACAU,IAAI;oBACFG,aAAa,CAAC,EAAEL,OAAOM,KAAK,CAAC,EAAE,CAAC;oBAChCC,cAAc,CAAC,EAAEP,OAAOQ,MAAM,CAAC,EAAE,CAAC;oBAClCJ,UAAU;gBACZ;0BAEC,OAAOf,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP,KAAK;oBAAEC,QAAQM,QAAQN,MAAM;gBAAC,KAAKH;;YAEhGC,eAAeS,OAAOU,IAAI,kBAAI,KAACvB;gBAAQ,GAAGI,WAAW;gBAAEE,QAAQO,OAAOP,MAAM;gBAAED,OAAOQ,OAAOR,KAAK;;;;AAGxG"}
+{"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 { ReactElement } 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): ReactElement {\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      style={{\n        width,\n        height,\n      }}\n      sx={{\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        style={{\n          width: content.width,\n          height: content.height,\n        }}\n        sx={{\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":["Box","useTheme","getLegendSize","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","style","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;;AAGjC,SAASA,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,OAAO;YACLV;YACAC;QACF;QACAU,IAAI;YACFC,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACrB;gBACCkB,OAAO;oBACLV,OAAOO,QAAQP,KAAK;oBACpBC,QAAQM,QAAQN,MAAM;gBACxB;gBACAU,IAAI;oBACFG,aAAa,GAAGL,OAAOM,KAAK,CAAC,EAAE,CAAC;oBAChCC,cAAc,GAAGP,OAAOQ,MAAM,CAAC,EAAE,CAAC;oBAClCJ,UAAU;gBACZ;0BAEC,OAAOf,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP,KAAK;oBAAEC,QAAQM,QAAQN,MAAM;gBAAC,KAAKH;;YAEhGC,eAAeS,OAAOU,IAAI,kBAAI,KAACvB;gBAAQ,GAAGI,WAAW;gBAAEE,QAAQO,OAAOP,MAAM;gBAAED,OAAOQ,OAAOR,KAAK;;;;AAGxG"}

package/dist/DragAndDrop/DragButton.d.ts

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import { IconButtonProps, MenuProps } from '@mui/material';
-import { ReactElement } from 'react';
 export declare function handleMoveUp<T>(element: T, elements: T[]): T[];
 export declare function handleMoveDown<T>(element: T, elements: T[]): T[];
 export interface DragButtonProps extends IconButtonProps {
@@ -9,5 +9,5 @@ export interface DragButtonProps extends IconButtonProps {
     onMoveRight?: () => void;
     menuSx?: MenuProps['sx'];
 }
-export declare function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }: DragButtonProps): ReactElement;
+export declare const DragButton: import("react").ForwardRefExoticComponent<Omit<DragButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=DragButton.d.ts.map

package/dist/DragAndDrop/DragButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DragButton.d.ts","sourceRoot":"","sources":["../../src/DragAndDrop/DragButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,eAAe,EAAkB,SAAS,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAwB,YAAY,EAAE,MAAM,OAAO,CAAC;AAE3D,wBAAgB,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAU9D;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAUhE;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,eAAe,GAAG,YAAY,CAsCnH"}
+{"version":3,"file":"DragButton.d.ts","sourceRoot":"","sources":["../../src/DragAndDrop/DragButton.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAc,eAAe,EAAkB,SAAS,EAAE,MAAM,eAAe,CAAC;AAIvF,wBAAgB,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAU9D;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAUhE;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,4HAiDrB,CAAC"}

package/dist/DragAndDrop/DragButton.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IconButton, Menu, MenuItem } from '@mui/material';
 import DragIcon from 'mdi-material-ui/Drag';
-import { useState } from 'react';
+import { useState, forwardRef } from 'react';
 export function handleMoveUp(element, elements) {
     const index = elements.indexOf(element);
     if (index === 0) {
@@ -38,7 +38,7 @@ export function handleMoveDown(element, elements) {
     newElements.splice(index + 1, 0, element);
     return newElements;
 }
-export function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }) {
+export const DragButton = /*#__PURE__*/ forwardRef(function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps }, ref) {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     function handleClick(event) {
@@ -51,6 +51,8 @@ export function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menu
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(IconButton, {
+                ...otherProps,
+                ref: ref,
                 "aria-label": "move",
                 "aria-haspopup": true,
                 "aria-expanded": open,
@@ -92,6 +94,6 @@ export function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menu
             })
         ]
     });
-}
+});
 
 //# sourceMappingURL=DragButton.js.map

package/dist/DragAndDrop/DragButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DragAndDrop/DragButton.tsx"],"sourcesContent":["// Copyright 2024 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, IconButtonProps, Menu, MenuItem, MenuProps } from '@mui/material';\nimport DragIcon from 'mdi-material-ui/Drag';\nimport { useState, MouseEvent, ReactElement } from 'react';\n\nexport function handleMoveUp<T>(element: T, elements: T[]): T[] {\n  const index = elements.indexOf(element);\n  if (index === 0) {\n    return elements;\n  }\n\n  const newElements = [...elements];\n  newElements.splice(index, 1);\n  newElements.splice(index - 1, 0, element);\n  return newElements;\n}\n\nexport function handleMoveDown<T>(element: T, elements: T[]): T[] {\n  const index = elements.indexOf(element);\n  if (index === elements.length - 1) {\n    return elements;\n  }\n\n  const newElements = [...elements];\n  newElements.splice(index, 1);\n  newElements.splice(index + 1, 0, element);\n  return newElements;\n}\n\nexport interface DragButtonProps extends IconButtonProps {\n  onMoveUp?: () => void;\n  onMoveDown?: () => void;\n  onMoveLeft?: () => void;\n  onMoveRight?: () => void;\n  menuSx?: MenuProps['sx'];\n}\n\nexport function DragButton({ onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx }: DragButtonProps): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n\n  function handleClick(event: MouseEvent<HTMLElement>): void {\n    setAnchorEl(event.currentTarget);\n  }\n\n  function handleMove(callback?: () => void): void {\n    setAnchorEl(null);\n    callback?.();\n  }\n\n  return (\n    <>\n      <IconButton aria-label=\"move\" aria-haspopup={true} aria-expanded={open} size=\"small\" onClick={handleClick}>\n        <DragIcon />\n      </IconButton>\n      {(onMoveUp || onMoveDown || onMoveLeft || onMoveRight) && (\n        <Menu\n          id=\"drag-button-menu\"\n          MenuListProps={{\n            'aria-labelledby': 'drag-button-menu',\n          }}\n          anchorEl={anchorEl}\n          open={open}\n          onClose={() => handleMove(undefined)}\n          sx={menuSx}\n        >\n          {onMoveUp && <MenuItem onClick={() => handleMove(onMoveUp)}>Move Up</MenuItem>}\n          {onMoveDown && <MenuItem onClick={() => handleMove(onMoveDown)}>Move Down</MenuItem>}\n          {onMoveLeft && <MenuItem onClick={() => handleMove(onMoveLeft)}>Move Left</MenuItem>}\n          {onMoveRight && <MenuItem onClick={() => handleMove(onMoveRight)}>Move Right</MenuItem>}\n          {onMoveRight && <MenuItem onClick={() => handleMove(onMoveRight)}>Move Right</MenuItem>}\n        </Menu>\n      )}\n    </>\n  );\n}\n"],"names":["IconButton","Menu","MenuItem","DragIcon","useState","handleMoveUp","element","elements","index","indexOf","newElements","splice","handleMoveDown","length","DragButton","onMoveUp","onMoveDown","onMoveLeft","onMoveRight","menuSx","anchorEl","setAnchorEl","open","Boolean","handleClick","event","currentTarget","handleMove","callback","aria-label","aria-haspopup","aria-expanded","size","onClick","id","MenuListProps","onClose","undefined","sx"],"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,EAAmBC,IAAI,EAAEC,QAAQ,QAAmB,gBAAgB;AACvF,OAAOC,cAAc,uBAAuB;AAC5C,SAASC,QAAQ,QAAkC,QAAQ;AAE3D,OAAO,SAASC,aAAgBC,OAAU,EAAEC,QAAa;IACvD,MAAMC,QAAQD,SAASE,OAAO,CAACH;IAC/B,IAAIE,UAAU,GAAG;QACf,OAAOD;IACT;IAEA,MAAMG,cAAc;WAAIH;KAAS;IACjCG,YAAYC,MAAM,CAACH,OAAO;IAC1BE,YAAYC,MAAM,CAACH,QAAQ,GAAG,GAAGF;IACjC,OAAOI;AACT;AAEA,OAAO,SAASE,eAAkBN,OAAU,EAAEC,QAAa;IACzD,MAAMC,QAAQD,SAASE,OAAO,CAACH;IAC/B,IAAIE,UAAUD,SAASM,MAAM,GAAG,GAAG;QACjC,OAAON;IACT;IAEA,MAAMG,cAAc;WAAIH;KAAS;IACjCG,YAAYC,MAAM,CAACH,OAAO;IAC1BE,YAAYC,MAAM,CAACH,QAAQ,GAAG,GAAGF;IACjC,OAAOI;AACT;AAUA,OAAO,SAASI,WAAW,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,UAAU,EAAEC,WAAW,EAAEC,MAAM,EAAmB;IACnG,MAAM,CAACC,UAAUC,YAAY,GAAGjB,SAA6B;IAC7D,MAAMkB,OAAOC,QAAQH;IAErB,SAASI,YAAYC,KAA8B;QACjDJ,YAAYI,MAAMC,aAAa;IACjC;IAEA,SAASC,WAAWC,QAAqB;QACvCP,YAAY;QACZO;IACF;IAEA,qBACE;;0BACE,KAAC5B;gBAAW6B,cAAW;gBAAOC,iBAAe;gBAAMC,iBAAeT;gBAAMU,MAAK;gBAAQC,SAAST;0BAC5F,cAAA,KAACrB;;YAEDY,CAAAA,YAAYC,cAAcC,cAAcC,WAAU,mBAClD,MAACjB;gBACCiC,IAAG;gBACHC,eAAe;oBACb,mBAAmB;gBACrB;gBACAf,UAAUA;gBACVE,MAAMA;gBACNc,SAAS,IAAMT,WAAWU;gBAC1BC,IAAInB;;oBAEHJ,0BAAY,KAACb;wBAAS+B,SAAS,IAAMN,WAAWZ;kCAAW;;oBAC3DC,4BAAc,KAACd;wBAAS+B,SAAS,IAAMN,WAAWX;kCAAa;;oBAC/DC,4BAAc,KAACf;wBAAS+B,SAAS,IAAMN,WAAWV;kCAAa;;oBAC/DC,6BAAe,KAAChB;wBAAS+B,SAAS,IAAMN,WAAWT;kCAAc;;oBACjEA,6BAAe,KAAChB;wBAAS+B,SAAS,IAAMN,WAAWT;kCAAc;;;;;;AAK5E"}
+{"version":3,"sources":["../../src/DragAndDrop/DragButton.tsx"],"sourcesContent":["// Copyright 2024 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, IconButtonProps, Menu, MenuItem, MenuProps } from '@mui/material';\nimport DragIcon from 'mdi-material-ui/Drag';\nimport { useState, MouseEvent, ReactElement, forwardRef } from 'react';\n\nexport function handleMoveUp<T>(element: T, elements: T[]): T[] {\n  const index = elements.indexOf(element);\n  if (index === 0) {\n    return elements;\n  }\n\n  const newElements = [...elements];\n  newElements.splice(index, 1);\n  newElements.splice(index - 1, 0, element);\n  return newElements;\n}\n\nexport function handleMoveDown<T>(element: T, elements: T[]): T[] {\n  const index = elements.indexOf(element);\n  if (index === elements.length - 1) {\n    return elements;\n  }\n\n  const newElements = [...elements];\n  newElements.splice(index, 1);\n  newElements.splice(index + 1, 0, element);\n  return newElements;\n}\n\nexport interface DragButtonProps extends IconButtonProps {\n  onMoveUp?: () => void;\n  onMoveDown?: () => void;\n  onMoveLeft?: () => void;\n  onMoveRight?: () => void;\n  menuSx?: MenuProps['sx'];\n}\n\nexport const DragButton = forwardRef<HTMLButtonElement, DragButtonProps>(function DragButton(\n  { onMoveUp, onMoveDown, onMoveLeft, onMoveRight, menuSx, ...otherProps }: DragButtonProps,\n  ref\n): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n\n  function handleClick(event: MouseEvent<HTMLElement>): void {\n    setAnchorEl(event.currentTarget);\n  }\n\n  function handleMove(callback?: () => void): void {\n    setAnchorEl(null);\n    callback?.();\n  }\n\n  return (\n    <>\n      <IconButton\n        {...otherProps}\n        ref={ref}\n        aria-label=\"move\"\n        aria-haspopup={true}\n        aria-expanded={open}\n        size=\"small\"\n        onClick={handleClick}\n      >\n        <DragIcon />\n      </IconButton>\n      {(onMoveUp || onMoveDown || onMoveLeft || onMoveRight) && (\n        <Menu\n          id=\"drag-button-menu\"\n          MenuListProps={{\n            'aria-labelledby': 'drag-button-menu',\n          }}\n          anchorEl={anchorEl}\n          open={open}\n          onClose={() => handleMove(undefined)}\n          sx={menuSx}\n        >\n          {onMoveUp && <MenuItem onClick={() => handleMove(onMoveUp)}>Move Up</MenuItem>}\n          {onMoveDown && <MenuItem onClick={() => handleMove(onMoveDown)}>Move Down</MenuItem>}\n          {onMoveLeft && <MenuItem onClick={() => handleMove(onMoveLeft)}>Move Left</MenuItem>}\n          {onMoveRight && <MenuItem onClick={() => handleMove(onMoveRight)}>Move Right</MenuItem>}\n          {onMoveRight && <MenuItem onClick={() => handleMove(onMoveRight)}>Move Right</MenuItem>}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["IconButton","Menu","MenuItem","DragIcon","useState","forwardRef","handleMoveUp","element","elements","index","indexOf","newElements","splice","handleMoveDown","length","DragButton","onMoveUp","onMoveDown","onMoveLeft","onMoveRight","menuSx","otherProps","ref","anchorEl","setAnchorEl","open","Boolean","handleClick","event","currentTarget","handleMove","callback","aria-label","aria-haspopup","aria-expanded","size","onClick","id","MenuListProps","onClose","undefined","sx"],"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,EAAmBC,IAAI,EAAEC,QAAQ,QAAmB,gBAAgB;AACvF,OAAOC,cAAc,uBAAuB;AAC5C,SAASC,QAAQ,EAA4BC,UAAU,QAAQ,QAAQ;AAEvE,OAAO,SAASC,aAAgBC,OAAU,EAAEC,QAAa;IACvD,MAAMC,QAAQD,SAASE,OAAO,CAACH;IAC/B,IAAIE,UAAU,GAAG;QACf,OAAOD;IACT;IAEA,MAAMG,cAAc;WAAIH;KAAS;IACjCG,YAAYC,MAAM,CAACH,OAAO;IAC1BE,YAAYC,MAAM,CAACH,QAAQ,GAAG,GAAGF;IACjC,OAAOI;AACT;AAEA,OAAO,SAASE,eAAkBN,OAAU,EAAEC,QAAa;IACzD,MAAMC,QAAQD,SAASE,OAAO,CAACH;IAC/B,IAAIE,UAAUD,SAASM,MAAM,GAAG,GAAG;QACjC,OAAON;IACT;IAEA,MAAMG,cAAc;WAAIH;KAAS;IACjCG,YAAYC,MAAM,CAACH,OAAO;IAC1BE,YAAYC,MAAM,CAACH,QAAQ,GAAG,GAAGF;IACjC,OAAOI;AACT;AAUA,OAAO,MAAMI,2BAAaV,WAA+C,SAASU,WAChF,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,UAAU,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGC,YAA6B,EACzFC,GAAG;IAEH,MAAM,CAACC,UAAUC,YAAY,GAAGpB,SAA6B;IAC7D,MAAMqB,OAAOC,QAAQH;IAErB,SAASI,YAAYC,KAA8B;QACjDJ,YAAYI,MAAMC,aAAa;IACjC;IAEA,SAASC,WAAWC,QAAqB;QACvCP,YAAY;QACZO;IACF;IAEA,qBACE;;0BACE,KAAC/B;gBACE,GAAGqB,UAAU;gBACdC,KAAKA;gBACLU,cAAW;gBACXC,iBAAe;gBACfC,iBAAeT;gBACfU,MAAK;gBACLC,SAAST;0BAET,cAAA,KAACxB;;YAEDa,CAAAA,YAAYC,cAAcC,cAAcC,WAAU,mBAClD,MAAClB;gBACCoC,IAAG;gBACHC,eAAe;oBACb,mBAAmB;gBACrB;gBACAf,UAAUA;gBACVE,MAAMA;gBACNc,SAAS,IAAMT,WAAWU;gBAC1BC,IAAIrB;;oBAEHJ,0BAAY,KAACd;wBAASkC,SAAS,IAAMN,WAAWd;kCAAW;;oBAC3DC,4BAAc,KAACf;wBAASkC,SAAS,IAAMN,WAAWb;kCAAa;;oBAC/DC,4BAAc,KAAChB;wBAASkC,SAAS,IAAMN,WAAWZ;kCAAa;;oBAC/DC,6BAAe,KAACjB;wBAASkC,SAAS,IAAMN,WAAWX;kCAAc;;oBACjEA,6BAAe,KAACjB;wBAASkC,SAAS,IAAMN,WAAWX;kCAAc;;;;;;AAK5E,GAAG"}

package/dist/DragAndDrop/DropIndicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DragAndDrop/DropIndicator.tsx"],"sourcesContent":["// Copyright 2024 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 { Box, Stack } from '@mui/material';\nimport { ReactElement } from 'react';\n\nexport function DropIndicator(): ReactElement {\n  return (\n    <Stack direction=\"row\" alignItems=\"center\">\n      <Box\n        sx={{\n          content: '\"\"',\n          width: 8,\n          height: 8,\n          boxSizing: 'border-box',\n          position: 'absolute',\n          backgroundColor: (theme) => theme.palette.background.default,\n          border: (theme) => `2px solid ${theme.palette.info.main}`,\n          borderRadius: '50%',\n        }}\n      ></Box>\n      <Box\n        sx={{\n          content: '\"\"',\n          height: 2,\n          background: (theme) => theme.palette.info.main,\n          width: '100%',\n        }}\n      ></Box>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","DropIndicator","direction","alignItems","sx","content","width","height","boxSizing","position","backgroundColor","theme","palette","background","default","border","info","main","borderRadius"],"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,GAAG,EAAEC,KAAK,QAAQ,gBAAgB;AAG3C,OAAO,SAASC;IACd,qBACE,MAACD;QAAME,WAAU;QAAMC,YAAW;;0BAChC,KAACJ;gBACCK,IAAI;oBACFC,SAAS;oBACTC,OAAO;oBACPC,QAAQ;oBACRC,WAAW;oBACXC,UAAU;oBACVC,iBAAiB,CAACC,QAAUA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO;oBAC5DC,QAAQ,CAACJ,QAAU,CAAC,UAAU,EAAEA,MAAMC,OAAO,CAACI,IAAI,CAACC,IAAI,CAAC,CAAC;oBACzDC,cAAc;gBAChB;;0BAEF,KAACnB;gBACCK,IAAI;oBACFC,SAAS;oBACTE,QAAQ;oBACRM,YAAY,CAACF,QAAUA,MAAMC,OAAO,CAACI,IAAI,CAACC,IAAI;oBAC9CX,OAAO;gBACT;;;;AAIR"}
+{"version":3,"sources":["../../src/DragAndDrop/DropIndicator.tsx"],"sourcesContent":["// Copyright 2024 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 { Box, Stack } from '@mui/material';\nimport { ReactElement } from 'react';\n\nexport function DropIndicator(): ReactElement {\n  return (\n    <Stack direction=\"row\" alignItems=\"center\">\n      <Box\n        sx={{\n          content: '\"\"',\n          width: 8,\n          height: 8,\n          boxSizing: 'border-box',\n          position: 'absolute',\n          backgroundColor: (theme) => theme.palette.background.default,\n          border: (theme) => `2px solid ${theme.palette.info.main}`,\n          borderRadius: '50%',\n        }}\n      ></Box>\n      <Box\n        sx={{\n          content: '\"\"',\n          height: 2,\n          background: (theme) => theme.palette.info.main,\n          width: '100%',\n        }}\n      ></Box>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","DropIndicator","direction","alignItems","sx","content","width","height","boxSizing","position","backgroundColor","theme","palette","background","default","border","info","main","borderRadius"],"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,GAAG,EAAEC,KAAK,QAAQ,gBAAgB;AAG3C,OAAO,SAASC;IACd,qBACE,MAACD;QAAME,WAAU;QAAMC,YAAW;;0BAChC,KAACJ;gBACCK,IAAI;oBACFC,SAAS;oBACTC,OAAO;oBACPC,QAAQ;oBACRC,WAAW;oBACXC,UAAU;oBACVC,iBAAiB,CAACC,QAAUA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO;oBAC5DC,QAAQ,CAACJ,QAAU,CAAC,UAAU,EAAEA,MAAMC,OAAO,CAACI,IAAI,CAACC,IAAI,EAAE;oBACzDC,cAAc;gBAChB;;0BAEF,KAACnB;gBACCK,IAAI;oBACFC,SAAS;oBACTE,QAAQ;oBACRM,YAAY,CAACF,QAAUA,MAAMC,OAAO,CAACI,IAAI,CAACC,IAAI;oBAC9CX,OAAO;gBACT;;;;AAIR"}

package/dist/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Drawer as MuiDrawer, DrawerProps as MuiDrawerProps, useMediaQuery } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { combineSx } from '../utils';\n\nexport interface DrawerProps extends MuiDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  anchor?: 'left' | 'right';\n}\n\nconst DRAWER_DEFAULT_WIDTH = 1080;\n\nexport const Drawer = ({\n  anchor = 'right',\n  isOpen,\n  onClose,\n  PaperProps,\n  children,\n  ...rest\n}: DrawerProps): ReactElement => {\n  const isSmaller = useMediaQuery(`(max-width:${DRAWER_DEFAULT_WIDTH}px)`);\n\n  return (\n    <MuiDrawer\n      {...rest}\n      open={isOpen}\n      onClose={onClose}\n      anchor={anchor}\n      PaperProps={{\n        ...PaperProps,\n        sx: combineSx(\n          {\n            width: isSmaller ? '100%' : `${DRAWER_DEFAULT_WIDTH}px`,\n            overflow: 'hidden',\n          },\n          PaperProps?.sx\n        ),\n      }}\n    >\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["Drawer","MuiDrawer","useMediaQuery","combineSx","DRAWER_DEFAULT_WIDTH","anchor","isOpen","onClose","PaperProps","children","rest","isSmaller","open","sx","width","overflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAUC,SAAS,EAAiCC,aAAa,QAAQ,gBAAgB;AAElG,SAASC,SAAS,QAAQ,WAAW;AAQrC,MAAMC,uBAAuB;AAE7B,OAAO,MAAMJ,SAAS,CAAC,EACrBK,SAAS,OAAO,EAChBC,MAAM,EACNC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACR,GAAGC,MACS;IACZ,MAAMC,YAAYT,cAAc,CAAC,WAAW,EAAEE,qBAAqB,GAAG,CAAC;IAEvE,qBACE,KAACH;QACE,GAAGS,IAAI;QACRE,MAAMN;QACNC,SAASA;QACTF,QAAQA;QACRG,YAAY;YACV,GAAGA,UAAU;YACbK,IAAIV,UACF;gBACEW,OAAOH,YAAY,SAAS,CAAC,EAAEP,qBAAqB,EAAE,CAAC;gBACvDW,UAAU;YACZ,GACAP,YAAYK;QAEhB;kBAECJ;;AAGP,EAAE"}
+{"version":3,"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Drawer as MuiDrawer, DrawerProps as MuiDrawerProps, useMediaQuery } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { combineSx } from '../utils';\n\nexport interface DrawerProps extends MuiDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  anchor?: 'left' | 'right';\n}\n\nconst DRAWER_DEFAULT_WIDTH = 1080;\n\nexport const Drawer = ({\n  anchor = 'right',\n  isOpen,\n  onClose,\n  PaperProps,\n  children,\n  ...rest\n}: DrawerProps): ReactElement => {\n  const isSmaller = useMediaQuery(`(max-width:${DRAWER_DEFAULT_WIDTH}px)`);\n\n  return (\n    <MuiDrawer\n      {...rest}\n      open={isOpen}\n      onClose={onClose}\n      anchor={anchor}\n      PaperProps={{\n        ...PaperProps,\n        sx: combineSx(\n          {\n            width: isSmaller ? '100%' : `${DRAWER_DEFAULT_WIDTH}px`,\n            overflow: 'hidden',\n          },\n          PaperProps?.sx\n        ),\n      }}\n    >\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["Drawer","MuiDrawer","useMediaQuery","combineSx","DRAWER_DEFAULT_WIDTH","anchor","isOpen","onClose","PaperProps","children","rest","isSmaller","open","sx","width","overflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAUC,SAAS,EAAiCC,aAAa,QAAQ,gBAAgB;AAElG,SAASC,SAAS,QAAQ,WAAW;AAQrC,MAAMC,uBAAuB;AAE7B,OAAO,MAAMJ,SAAS,CAAC,EACrBK,SAAS,OAAO,EAChBC,MAAM,EACNC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACR,GAAGC,MACS;IACZ,MAAMC,YAAYT,cAAc,CAAC,WAAW,EAAEE,qBAAqB,GAAG,CAAC;IAEvE,qBACE,KAACH;QACE,GAAGS,IAAI;QACRE,MAAMN;QACNC,SAASA;QACTF,QAAQA;QACRG,YAAY;YACV,GAAGA,UAAU;YACbK,IAAIV,UACF;gBACEW,OAAOH,YAAY,SAAS,GAAGP,qBAAqB,EAAE,CAAC;gBACvDW,UAAU;YACZ,GACAP,YAAYK;QAEhB;kBAECJ;;AAGP,EAAE"}

package/dist/EChart/EChart.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 import { ECharts, EChartsCoreOption } from 'echarts/core';
 import { SxProps, Theme } from '@mui/material';
 import { EChartsTheme } from '../model';
@@ -52,11 +52,12 @@ export interface EChartsProps<T> {
     theme?: string | EChartsTheme;
     renderer?: 'canvas' | 'svg';
     sx?: SxProps<Theme>;
+    style?: CSSProperties;
     onEvents?: OnEventsType<T>;
     _instance?: React.MutableRefObject<ECharts | undefined>;
     syncGroup?: string;
     onChartInitialized?: (instance: ECharts) => void;
 }
-export declare const EChart: import("react").MemoExoticComponent<(<T>({ option, theme, renderer, sx, onEvents, _instance, syncGroup, onChartInitialized, }: EChartsProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+export declare const EChart: import("react").MemoExoticComponent<(<T>({ option, theme, renderer, sx, style, onEvents, _instance, syncGroup, onChartInitialized, }: EChartsProps<T>) => import("react/jsx-runtime").JSX.Element)>;
 export {};
 //# sourceMappingURL=EChart.d.ts.map

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

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

package/dist/EChart/EChart.js

@@ -12,10 +12,30 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect, useLayoutEffect, useRef } from 'react';
-import { init, connect } from 'echarts/core';
+import { init, connect, use } from 'echarts/core';
 import { Box } from '@mui/material';
 import isEqual from 'lodash/isEqual';
 import debounce from 'lodash/debounce';
+import { GaugeChart as EChartsGaugeChart, PieChart as EChartsPieChart, ScatterChart as EChartsScatterChart, CustomChart as EChartsCustomChart, HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
+import { DatasetComponent, DataZoomComponent, LegendComponent, GridComponent, TitleComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+// Loading the ECharts extensions should happen in the respective plugin (in this case, the scatterplot + custom plugin).
+// This is a workaround for https://github.com/perses/plugins/issues/83.
+use([
+    DatasetComponent,
+    DataZoomComponent,
+    LegendComponent,
+    EChartsGaugeChart,
+    EChartsPieChart,
+    EChartsScatterChart,
+    EChartsCustomChart,
+    EChartsHeatmapChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    CanvasRenderer,
+    VisualMapComponent
+]);
 const mouseEvents = [
     'click',
     'dblclick',
@@ -32,7 +52,7 @@ const batchEvents = [
     'downplay',
     'highlight'
 ];
-export const EChart = /*#__PURE__*/ memo(function EChart({ option, theme, renderer, sx, onEvents, _instance, syncGroup, onChartInitialized }) {
+export const EChart = /*#__PURE__*/ memo(function EChart({ option, theme, renderer, sx, style, onEvents, _instance, syncGroup, onChartInitialized }) {
     const initialOption = useRef(option);
     const prevOption = useRef(option);
     const containerRef = useRef(null);
@@ -122,11 +142,13 @@ export const EChart = /*#__PURE__*/ memo(function EChart({ option, theme, render
         });
         updateSize();
     }, [
-        sx
+        sx,
+        style
     ]);
     return /*#__PURE__*/ _jsx(Box, {
         ref: containerRef,
-        sx: sx
+        sx: sx,
+        style: style
     });
 });
 // Validate event config and bind custom events

package/dist/EChart/EChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EChart/EChart.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 { memo, useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init, connect } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport isEqual from 'lodash/isEqual';\nimport debounce from 'lodash/debounce';\nimport { EChartsTheme } from '../model';\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  syncGroup?: string;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  onEvents,\n  _instance,\n  syncGroup,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    if (chartElement.current === undefined) return;\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return (): void => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\n\n  // When syncGroup is explicitly set, charts within same group share interactions such as crosshair\n  useEffect(() => {\n    if (!chartElement.current || !syncGroup) return;\n    chartElement.current.group = syncGroup;\n    connect([chartElement.current]); // more info: https://echarts.apache.org/en/api.html#echarts.connect\n  }, [syncGroup, chartElement]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (!chartElement.current) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return (): void => {\n      window.removeEventListener('resize', updateSize);\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (!chart || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return (): void => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  // TODO: re-evaluate how this is triggered. It's technically working right\n  // now because the sx prop is an object that gets re-created, but that also\n  // means it runs unnecessarily some of the time and theoretically might\n  // not run in some other cases. Maybe it should use a resize observer?\n  useEffect(() => {\n    // TODO: fix this debouncing. This likely isn't working as intended because\n    // the debounced function is re-created every time this useEffect is called.\n    const updateSize = debounce(\n      () => {\n        if (!chartElement.current) return;\n        chartElement.current.resize();\n      },\n      200,\n      {\n        leading: true,\n      }\n    );\n    updateSize();\n  }, [sx]);\n\n  return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>): void {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown): void {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["memo","useEffect","useLayoutEffect","useRef","init","connect","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","option","theme","renderer","sx","onEvents","_instance","syncGroup","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","group","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","leading","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}
+{"version":3,"sources":["../../src/EChart/EChart.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 { CSSProperties, memo, useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init, connect, use } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport isEqual from 'lodash/isEqual';\nimport debounce from 'lodash/debounce';\n\nimport {\n  GaugeChart as EChartsGaugeChart,\n  PieChart as EChartsPieChart,\n  ScatterChart as EChartsScatterChart,\n  CustomChart as EChartsCustomChart,\n  HeatmapChart as EChartsHeatmapChart,\n} from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  GridComponent,\n  TitleComponent,\n  TooltipComponent,\n  VisualMapComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChartsTheme } from '../model';\n\n// Loading the ECharts extensions should happen in the respective plugin (in this case, the scatterplot + custom plugin).\n// This is a workaround for https://github.com/perses/plugins/issues/83.\nuse([\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  EChartsGaugeChart,\n  EChartsPieChart,\n  EChartsScatterChart,\n  EChartsCustomChart,\n  EChartsHeatmapChart,\n  GridComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n  VisualMapComponent,\n]);\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  style?: CSSProperties;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  syncGroup?: string;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  style,\n  onEvents,\n  _instance,\n  syncGroup,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    if (chartElement.current === undefined) return;\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return (): void => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\n\n  // When syncGroup is explicitly set, charts within same group share interactions such as crosshair\n  useEffect(() => {\n    if (!chartElement.current || !syncGroup) return;\n    chartElement.current.group = syncGroup;\n    connect([chartElement.current]); // more info: https://echarts.apache.org/en/api.html#echarts.connect\n  }, [syncGroup, chartElement]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (!chartElement.current) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return (): void => {\n      window.removeEventListener('resize', updateSize);\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (!chart || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return (): void => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  // TODO: re-evaluate how this is triggered. It's technically working right\n  // now because the sx prop is an object that gets re-created, but that also\n  // means it runs unnecessarily some of the time and theoretically might\n  // not run in some other cases. Maybe it should use a resize observer?\n  useEffect(() => {\n    // TODO: fix this debouncing. This likely isn't working as intended because\n    // the debounced function is re-created every time this useEffect is called.\n    const updateSize = debounce(\n      () => {\n        if (!chartElement.current) return;\n        chartElement.current.resize();\n      },\n      200,\n      {\n        leading: true,\n      }\n    );\n    updateSize();\n  }, [sx, style]);\n\n  return <Box ref={containerRef} sx={sx} style={style}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>): void {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown): void {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["memo","useEffect","useLayoutEffect","useRef","init","connect","use","Box","isEqual","debounce","GaugeChart","EChartsGaugeChart","PieChart","EChartsPieChart","ScatterChart","EChartsScatterChart","CustomChart","EChartsCustomChart","HeatmapChart","EChartsHeatmapChart","DatasetComponent","DataZoomComponent","LegendComponent","GridComponent","TitleComponent","TooltipComponent","VisualMapComponent","CanvasRenderer","mouseEvents","batchEvents","EChart","option","theme","renderer","sx","style","onEvents","_instance","syncGroup","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","group","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","leading","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}

package/dist/InfoTooltip/InfoTooltip.js

@@ -49,7 +49,8 @@ const TooltipContent = ({ title, description })=>{
             /*#__PURE__*/ _jsx(Typography, {
                 variant: "caption",
                 sx: (theme)=>({
-                        color: theme.palette.text.primary
+                        color: theme.palette.text.primary,
+                        whiteSpace: 'pre-line'
                     }),
                 children: description
             })

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 { ReactElement, ReactNode } from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n  description: string;\n  children: ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps): ReactElement => {\n  // Wrap children in a span to cover the following use cases:\n  //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.\n  //  - Non-element tooltip children (e.g. text). The tooltip needs something that\n  //   can have a ref as a child.\n  // We wrap in a `span` and not a `div` to minimize the impact on page layout\n  // and styles.\n  const wrappedChildren = <span>{children}</span>;\n\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? 'top'}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      {wrappedChildren}\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>): ReactElement => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","wrappedChildren","span","StyledTooltip","arrow","TooltipContent","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"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;;AAGjC,SACEA,MAAM,EAENC,WAAWC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,gBAAgB;AAcvB,OAAO,MAAMC,cAAc,CAAC,EAC1BC,EAAE,EACFC,KAAK,EACLC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,UAAU,EACVC,cAAc,EACG;IACjB,4DAA4D;IAC5D,6EAA6E;IAC7E,gFAAgF;IAChF,+BAA+B;IAC/B,4EAA4E;IAC5E,cAAc;IACd,MAAMC,gCAAkB,KAACC;kBAAMJ;;IAE/B,qBACE,KAACK;QACCC,KAAK;QACLV,IAAIA;QACJG,WAAWA,aAAa;QACxBF,qBAAO,KAACU;YAAeV,OAAOA;YAAOC,aAAaA;;QAClDG,YAAYA,cAAc;QAC1BC,gBAAgBA,kBAAkB;kBAEjCC;;AAGP,EAAE;AAEF,MAAMI,iBAAiB,CAAC,EAAEV,KAAK,EAAEC,WAAW,EAAmD;IAC7F,qBACE;;YACGD,uBACC,KAACH;gBACCc,SAAQ;gBACRC,IAAI,CAACC,QAAW,CAAA;wBACdC,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,YAAYL,MAAMM,UAAU,CAACC,gBAAgB;oBAC/C,CAAA;0BAECpB;;0BAGL,KAACH;gBACCc,SAAQ;gBACRC,IAAI,CAACC,QAAW,CAAA;wBACdC,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;oBACnC,CAAA;0BAEChB;;;;AAIT;AAEA,MAAMO,gBAAgBf,OAAO,CAAC,EAAE4B,SAAS,EAAE,GAAGC,OAAwB,iBACpE,KAAC3B;QAAY,GAAG2B,KAAK;QAAEC,SAAS;YAAEC,QAAQH;QAAU;QACnD,CAAC,EAAER,KAAK,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEjB,eAAe6B,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCC,iBAAiBb,MAAME,OAAO,CAACY,UAAU,CAACF,OAAO;YACjDX,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;YACjCW,UAAU;YACVC,SAAShB,MAAMiB,OAAO,CAAC;YACvBC,WAAWlB,MAAMmB,OAAO,CAAC,EAAE;QAC7B;QACA,CAAC,CAAC,GAAG,EAAEpC,eAAea,KAAK,CAAC,CAAC,CAAC,EAAE;YAC9BK,OAAOD,MAAME,OAAO,CAACY,UAAU,CAACF,OAAO;QACzC;IACF,CAAA"}
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 { ReactElement, ReactNode } from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n  description: string;\n  children: ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps): ReactElement => {\n  // Wrap children in a span to cover the following use cases:\n  //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.\n  //  - Non-element tooltip children (e.g. text). The tooltip needs something that\n  //   can have a ref as a child.\n  // We wrap in a `span` and not a `div` to minimize the impact on page layout\n  // and styles.\n  const wrappedChildren = <span>{children}</span>;\n\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? 'top'}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      {wrappedChildren}\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>): ReactElement => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n          whiteSpace: 'pre-line',\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","wrappedChildren","span","StyledTooltip","arrow","TooltipContent","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","whiteSpace","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"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;;AAGjC,SACEA,MAAM,EAENC,WAAWC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,gBAAgB;AAcvB,OAAO,MAAMC,cAAc,CAAC,EAC1BC,EAAE,EACFC,KAAK,EACLC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,UAAU,EACVC,cAAc,EACG;IACjB,4DAA4D;IAC5D,6EAA6E;IAC7E,gFAAgF;IAChF,+BAA+B;IAC/B,4EAA4E;IAC5E,cAAc;IACd,MAAMC,gCAAkB,KAACC;kBAAMJ;;IAE/B,qBACE,KAACK;QACCC,KAAK;QACLV,IAAIA;QACJG,WAAWA,aAAa;QACxBF,qBAAO,KAACU;YAAeV,OAAOA;YAAOC,aAAaA;;QAClDG,YAAYA,cAAc;QAC1BC,gBAAgBA,kBAAkB;kBAEjCC;;AAGP,EAAE;AAEF,MAAMI,iBAAiB,CAAC,EAAEV,KAAK,EAAEC,WAAW,EAAmD;IAC7F,qBACE;;YACGD,uBACC,KAACH;gBACCc,SAAQ;gBACRC,IAAI,CAACC,QAAW,CAAA;wBACdC,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,YAAYL,MAAMM,UAAU,CAACC,gBAAgB;oBAC/C,CAAA;0BAECpB;;0BAGL,KAACH;gBACCc,SAAQ;gBACRC,IAAI,CAACC,QAAW,CAAA;wBACdC,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCI,YAAY;oBACd,CAAA;0BAECpB;;;;AAIT;AAEA,MAAMO,gBAAgBf,OAAO,CAAC,EAAE6B,SAAS,EAAE,GAAGC,OAAwB,iBACpE,KAAC5B;QAAY,GAAG4B,KAAK;QAAEC,SAAS;YAAEC,QAAQH;QAAU;QACnD,CAAC,EAAET,KAAK,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEjB,eAAe8B,OAAO,EAAE,CAAC,EAAE;YAChCC,iBAAiBd,MAAME,OAAO,CAACa,UAAU,CAACF,OAAO;YACjDZ,OAAOD,MAAME,OAAO,CAACC,IAAI,CAACC,OAAO;YACjCY,UAAU;YACVC,SAASjB,MAAMkB,OAAO,CAAC;YACvBC,WAAWnB,MAAMoB,OAAO,CAAC,EAAE;QAC7B;QACA,CAAC,CAAC,GAAG,EAAErC,eAAea,KAAK,EAAE,CAAC,EAAE;YAC9BK,OAAOD,MAAME,OAAO,CAACa,UAAU,CAACF,OAAO;QACzC;IACF,CAAA"}

package/dist/JSONEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAK1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,KAAK,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IAC/G,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CAiCrE"}
+{"version":3,"file":"JSONEditor.d.ts","sourceRoot":"","sources":["../src/JSONEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAK/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,KAAK,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IAC/G,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CAiCrE"}

package/dist/JSONEditor.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
 import { linter, lintGutter } from '@codemirror/lint';
@@ -21,11 +21,6 @@ export function JSONEditor(props) {
     const isDarkMode = theme.palette.mode === 'dark';
     const [value, setValue] = useState(()=>JSON.stringify(props.value, null, 2));
     const [lastProcessedValue, setLastProcessedValue] = useState(value);
-    useEffect(()=>{
-        setValue(JSON.stringify(props.value, null, 2));
-    }, [
-        props.value
-    ]);
     return /*#__PURE__*/ _jsx(CodeMirror, {
         ...props,
         style: {
@@ -40,6 +35,10 @@ export function JSONEditor(props) {
         value: value,
         onChange: (newValue)=>{
             setValue(newValue);
+            // Trigger the provided onChange callback in real-time
+            if (props.onChange) {
+                props.onChange(newValue);
+            }
         },
         onBlur: ()=>{
             // Don't trigger the provided onChange if the last processed value is equal to the current value.

package/dist/JSONEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/JSONEditor.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 { ReactElement, useEffect, useState } from 'react';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport { useTheme } from '@mui/material';\nimport { ReactCodeMirrorProps } from '@uiw/react-codemirror/src';\n\ntype JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {\n  value: T;\n  placeholder?: string;\n  onChange?: (next: string) => void;\n};\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [lastProcessedValue, setLastProcessedValue] = useState<string>(value);\n\n  useEffect(() => {\n    setValue(JSON.stringify(props.value, null, 2));\n  }, [props.value]);\n\n  return (\n    <CodeMirror\n      {...props}\n      style={{ border: `1px solid ${theme.palette.divider}` }}\n      theme={isDarkMode ? 'dark' : 'light'}\n      extensions={[json(), linter(jsonParseLinter()), lintGutter()]}\n      value={value}\n      onChange={(newValue) => {\n        setValue(newValue);\n      }}\n      onBlur={() => {\n        // Don't trigger the provided onChange if the last processed value is equal to the current value.\n        // This prevents e.g CTRL+F to trigger value refresh downstream, which would cause the embedded\n        // find & replace interface to close immediately.\n        if (lastProcessedValue !== value && props.onChange !== undefined) {\n          props.onChange(value);\n          setLastProcessedValue(value);\n        }\n      }}\n      placeholder={props.placeholder}\n    />\n  );\n}\n"],"names":["useEffect","useState","CodeMirror","json","jsonParseLinter","linter","lintGutter","useTheme","JSONEditor","props","theme","isDarkMode","palette","mode","value","setValue","JSON","stringify","lastProcessedValue","setLastProcessedValue","style","border","divider","extensions","onChange","newValue","onBlur","undefined","placeholder"],"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,SAAuBA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAC1D,OAAOC,gBAAgB,wBAAwB;AAC/C,SAASC,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,QAAQ,QAAQ,gBAAgB;AASzC,OAAO,SAASC,WAAcC,KAAyB;IACrD,MAAMC,QAAQH;IACd,MAAMI,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,MAAM,CAACC,OAAOC,SAAS,GAAGd,SAAS,IAAMe,KAAKC,SAAS,CAACR,MAAMK,KAAK,EAAE,MAAM;IAC3E,MAAM,CAACI,oBAAoBC,sBAAsB,GAAGlB,SAAiBa;IAErEd,UAAU;QACRe,SAASC,KAAKC,SAAS,CAACR,MAAMK,KAAK,EAAE,MAAM;IAC7C,GAAG;QAACL,MAAMK,KAAK;KAAC;IAEhB,qBACE,KAACZ;QACE,GAAGO,KAAK;QACTW,OAAO;YAAEC,QAAQ,CAAC,UAAU,EAAEX,MAAME,OAAO,CAACU,OAAO,CAAC,CAAC;QAAC;QACtDZ,OAAOC,aAAa,SAAS;QAC7BY,YAAY;YAACpB;YAAQE,OAAOD;YAAoBE;SAAa;QAC7DQ,OAAOA;QACPU,UAAU,CAACC;YACTV,SAASU;QACX;QACAC,QAAQ;YACN,iGAAiG;YACjG,+FAA+F;YAC/F,iDAAiD;YACjD,IAAIR,uBAAuBJ,SAASL,MAAMe,QAAQ,KAAKG,WAAW;gBAChElB,MAAMe,QAAQ,CAACV;gBACfK,sBAAsBL;YACxB;QACF;QACAc,aAAanB,MAAMmB,WAAW;;AAGpC"}
+{"version":3,"sources":["../src/JSONEditor.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 { ReactElement, useState } from 'react';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport { useTheme } from '@mui/material';\nimport { ReactCodeMirrorProps } from '@uiw/react-codemirror/src';\n\ntype JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {\n  value: T;\n  placeholder?: string;\n  onChange?: (next: string) => void;\n};\n\nexport function JSONEditor<T>(props: JSONEditorProps<T>): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n\n  const [value, setValue] = useState(() => JSON.stringify(props.value, null, 2));\n  const [lastProcessedValue, setLastProcessedValue] = useState<string>(value);\n\n  return (\n    <CodeMirror\n      {...props}\n      style={{ border: `1px solid ${theme.palette.divider}` }}\n      theme={isDarkMode ? 'dark' : 'light'}\n      extensions={[json(), linter(jsonParseLinter()), lintGutter()]}\n      value={value}\n      onChange={(newValue) => {\n        setValue(newValue);\n        // Trigger the provided onChange callback in real-time\n        if (props.onChange) {\n          props.onChange(newValue);\n        }\n      }}\n      onBlur={() => {\n        // Don't trigger the provided onChange if the last processed value is equal to the current value.\n        // This prevents e.g CTRL+F to trigger value refresh downstream, which would cause the embedded\n        // find & replace interface to close immediately.\n        if (lastProcessedValue !== value && props.onChange !== undefined) {\n          props.onChange(value);\n          setLastProcessedValue(value);\n        }\n      }}\n      placeholder={props.placeholder}\n    />\n  );\n}\n"],"names":["useState","CodeMirror","json","jsonParseLinter","linter","lintGutter","useTheme","JSONEditor","props","theme","isDarkMode","palette","mode","value","setValue","JSON","stringify","lastProcessedValue","setLastProcessedValue","style","border","divider","extensions","onChange","newValue","onBlur","undefined","placeholder"],"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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,OAAOC,gBAAgB,wBAAwB;AAC/C,SAASC,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,QAAQ,QAAQ,gBAAgB;AASzC,OAAO,SAASC,WAAcC,KAAyB;IACrD,MAAMC,QAAQH;IACd,MAAMI,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,MAAM,CAACC,OAAOC,SAAS,GAAGd,SAAS,IAAMe,KAAKC,SAAS,CAACR,MAAMK,KAAK,EAAE,MAAM;IAC3E,MAAM,CAACI,oBAAoBC,sBAAsB,GAAGlB,SAAiBa;IAErE,qBACE,KAACZ;QACE,GAAGO,KAAK;QACTW,OAAO;YAAEC,QAAQ,CAAC,UAAU,EAAEX,MAAME,OAAO,CAACU,OAAO,EAAE;QAAC;QACtDZ,OAAOC,aAAa,SAAS;QAC7BY,YAAY;YAACpB;YAAQE,OAAOD;YAAoBE;SAAa;QAC7DQ,OAAOA;QACPU,UAAU,CAACC;YACTV,SAASU;YACT,sDAAsD;YACtD,IAAIhB,MAAMe,QAAQ,EAAE;gBAClBf,MAAMe,QAAQ,CAACC;YACjB;QACF;QACAC,QAAQ;YACN,iGAAiG;YACjG,+FAA+F;YAC/F,iDAAiD;YACjD,IAAIR,uBAAuBJ,SAASL,MAAMe,QAAQ,KAAKG,WAAW;gBAChElB,MAAMe,QAAQ,CAACV;gBACfK,sBAAsBL;YACxB;QACF;QACAc,aAAanB,MAAMmB,WAAW;;AAGpC"}

package/dist/OptionsEditorLayout/OptionsEditorControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorControl.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 { FormControl, FormLabel, FormControlLabelProps, Stack, Box, IconButton } from '@mui/material';\nimport React, { ReactElement } from 'react';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { useId } from '../utils';\nimport { InfoTooltip } from '../InfoTooltip';\n\nexport type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'> & {\n  description?: string;\n};\n\nexport const OptionsEditorControl = ({ label, control, description }: OptionsEditorControlProps): ReactElement => {\n  // Make sure we have a unique ID we can use for associating labels and\n  // controls for a11y.\n  const generatedControlId = useId('EditorSectionControl');\n  const controlId = `${generatedControlId}-control`;\n\n  const controlProps = {\n    id: controlId,\n  };\n\n  return (\n    <FormControl>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\">\n        <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <FormLabel htmlFor={controlId}>{label}</FormLabel>\n          {description && (\n            <InfoTooltip description={description} enterDelay={100}>\n              <IconButton\n                size=\"small\"\n                sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4x', margin: '0 2px' })}\n              >\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.grey[700] }}\n                />\n              </IconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n        <Box sx={{ width: '180px', textAlign: 'right' }}> {React.cloneElement(control, controlProps)}</Box>\n      </Stack>\n    </FormControl>\n  );\n};\n"],"names":["FormControl","FormLabel","Stack","Box","IconButton","React","InformationOutlineIcon","useId","InfoTooltip","OptionsEditorControl","label","control","description","generatedControlId","controlId","controlProps","id","direction","alignItems","justifyContent","htmlFor","enterDelay","size","sx","theme","borderRadius","shape","padding","margin","aria-describedby","aria-hidden","fontSize","color","palette","grey","width","textAlign","cloneElement"],"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,WAAW,EAAEC,SAAS,EAAyBC,KAAK,EAAEC,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AACtG,OAAOC,WAA6B,QAAQ;AAC5C,OAAOC,4BAA4B,qCAAqC;AACxE,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,WAAW,QAAQ,iBAAiB;AAM7C,OAAO,MAAMC,uBAAuB,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,WAAW,EAA6B;IAC7F,sEAAsE;IACtE,qBAAqB;IACrB,MAAMC,qBAAqBN,MAAM;IACjC,MAAMO,YAAY,CAAC,EAAED,mBAAmB,QAAQ,CAAC;IAEjD,MAAME,eAAe;QACnBC,IAAIF;IACN;IAEA,qBACE,KAACd;kBACC,cAAA,MAACE;YAAMe,WAAU;YAAMC,YAAW;YAASC,gBAAe;;8BACxD,MAACjB;oBAAMe,WAAU;oBAAMC,YAAW;oBAASC,gBAAe;;sCACxD,KAAClB;4BAAUmB,SAASN;sCAAYJ;;wBAC/BE,6BACC,KAACJ;4BAAYI,aAAaA;4BAAaS,YAAY;sCACjD,cAAA,KAACjB;gCACCkB,MAAK;gCACLC,IAAI,CAACC,QAAW,CAAA;wCAAEC,cAAcD,MAAME,KAAK,CAACD,YAAY;wCAAEE,SAAS;wCAAMC,QAAQ;oCAAQ,CAAA;0CAEzF,cAAA,KAACtB;oCACCuB,oBAAiB;oCACjBC,eAAa;oCACbC,UAAS;oCACTR,IAAI;wCAAES,OAAO,CAACR,QAAUA,MAAMS,OAAO,CAACC,IAAI,CAAC,IAAI;oCAAC;;;;;;8BAM1D,MAAC/B;oBAAIoB,IAAI;wBAAEY,OAAO;wBAASC,WAAW;oBAAQ;;wBAAG;sCAAE/B,MAAMgC,YAAY,CAAC1B,SAASI;;;;;;AAIvF,EAAE"}
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorControl.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 { FormControl, FormLabel, FormControlLabelProps, Stack, Box, IconButton } from '@mui/material';\nimport React, { ReactElement } from 'react';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { useId } from '../utils';\nimport { InfoTooltip } from '../InfoTooltip';\n\nexport type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'> & {\n  description?: string;\n};\n\nexport const OptionsEditorControl = ({ label, control, description }: OptionsEditorControlProps): ReactElement => {\n  // Make sure we have a unique ID we can use for associating labels and\n  // controls for a11y.\n  const generatedControlId = useId('EditorSectionControl');\n  const controlId = `${generatedControlId}-control`;\n\n  const controlProps = {\n    id: controlId,\n  };\n\n  return (\n    <FormControl>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\">\n        <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <FormLabel htmlFor={controlId}>{label}</FormLabel>\n          {description && (\n            <InfoTooltip description={description} enterDelay={100}>\n              <IconButton\n                size=\"small\"\n                sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4x', margin: '0 2px' })}\n              >\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.grey[700] }}\n                />\n              </IconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n        <Box sx={{ width: '180px', textAlign: 'right' }}> {React.cloneElement(control, controlProps)}</Box>\n      </Stack>\n    </FormControl>\n  );\n};\n"],"names":["FormControl","FormLabel","Stack","Box","IconButton","React","InformationOutlineIcon","useId","InfoTooltip","OptionsEditorControl","label","control","description","generatedControlId","controlId","controlProps","id","direction","alignItems","justifyContent","htmlFor","enterDelay","size","sx","theme","borderRadius","shape","padding","margin","aria-describedby","aria-hidden","fontSize","color","palette","grey","width","textAlign","cloneElement"],"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,WAAW,EAAEC,SAAS,EAAyBC,KAAK,EAAEC,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AACtG,OAAOC,WAA6B,QAAQ;AAC5C,OAAOC,4BAA4B,qCAAqC;AACxE,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,WAAW,QAAQ,iBAAiB;AAM7C,OAAO,MAAMC,uBAAuB,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,WAAW,EAA6B;IAC7F,sEAAsE;IACtE,qBAAqB;IACrB,MAAMC,qBAAqBN,MAAM;IACjC,MAAMO,YAAY,GAAGD,mBAAmB,QAAQ,CAAC;IAEjD,MAAME,eAAe;QACnBC,IAAIF;IACN;IAEA,qBACE,KAACd;kBACC,cAAA,MAACE;YAAMe,WAAU;YAAMC,YAAW;YAASC,gBAAe;;8BACxD,MAACjB;oBAAMe,WAAU;oBAAMC,YAAW;oBAASC,gBAAe;;sCACxD,KAAClB;4BAAUmB,SAASN;sCAAYJ;;wBAC/BE,6BACC,KAACJ;4BAAYI,aAAaA;4BAAaS,YAAY;sCACjD,cAAA,KAACjB;gCACCkB,MAAK;gCACLC,IAAI,CAACC,QAAW,CAAA;wCAAEC,cAAcD,MAAME,KAAK,CAACD,YAAY;wCAAEE,SAAS;wCAAMC,QAAQ;oCAAQ,CAAA;0CAEzF,cAAA,KAACtB;oCACCuB,oBAAiB;oCACjBC,eAAa;oCACbC,UAAS;oCACTR,IAAI;wCAAES,OAAO,CAACR,QAAUA,MAAMS,OAAO,CAACC,IAAI,CAAC,IAAI;oCAAC;;;;;;8BAM1D,MAAC/B;oBAAIoB,IAAI;wBAAEY,OAAO;wBAASC,WAAW;oBAAQ;;wBAAG;sCAAE/B,MAAMgC,YAAY,CAAC1B,SAASI;;;;;;AAIvF,EAAE"}

package/dist/Overlay/Overlay.js

@@ -38,7 +38,7 @@ export function LoadingOverlay(props) {
             height: '100%',
             alignItems: 'center',
             justifyContent: 'center',
-            padding: '0 10px'
+            px: 1
         },
         children: /*#__PURE__*/ _jsx(Skeleton, {
             variant: variant,

package/dist/Overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Overlay/Overlay.tsx"],"sourcesContent":["// Copyright 2024 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 { Skeleton, SkeletonOwnProps, Stack, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface TextOverlayProps {\n  message: string;\n}\n\nexport function TextOverlay(props: TextOverlayProps): ReactElement {\n  const { message } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>\n      <Typography>{message}</Typography>\n    </Stack>\n  );\n}\n\ninterface NoDataOverlayProps {\n  resource: string;\n}\n\nexport function NoDataOverlay(props: NoDataOverlayProps): ReactElement {\n  const { resource } = props;\n\n  return <TextOverlay message={`No ${resource}`} />;\n}\n\ninterface LoadingOverlayProps {\n  variant?: SkeletonOwnProps['variant'];\n}\n\nexport function LoadingOverlay(props: LoadingOverlayProps): ReactElement {\n  const { variant = 'rounded' } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center', padding: '0 10px' }}>\n      <Skeleton variant={variant} width=\"100%\" height=\"30%\" aria-label=\"Loading...\" />\n    </Stack>\n  );\n}\n"],"names":["Skeleton","Stack","Typography","TextOverlay","props","message","sx","height","alignItems","justifyContent","NoDataOverlay","resource","LoadingOverlay","variant","padding","width","aria-label"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAoBC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAO9E,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;QAAS;kBAC1E,cAAA,KAACP;sBAAYG;;;AAGnB;AAMA,OAAO,SAASK,cAAcN,KAAyB;IACrD,MAAM,EAAEO,QAAQ,EAAE,GAAGP;IAErB,qBAAO,KAACD;QAAYE,SAAS,CAAC,GAAG,EAAEM,SAAS,CAAC;;AAC/C;AAMA,OAAO,SAASC,eAAeR,KAA0B;IACvD,MAAM,EAAES,UAAU,SAAS,EAAE,GAAGT;IAEhC,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;YAAUK,SAAS;QAAS;kBAC7F,cAAA,KAACd;YAASa,SAASA;YAASE,OAAM;YAAOR,QAAO;YAAMS,cAAW;;;AAGvE"}
+{"version":3,"sources":["../../src/Overlay/Overlay.tsx"],"sourcesContent":["// Copyright 2024 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 { Skeleton, SkeletonOwnProps, Stack, Typography } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface TextOverlayProps {\n  message: string;\n}\n\nexport function TextOverlay(props: TextOverlayProps): ReactElement {\n  const { message } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>\n      <Typography>{message}</Typography>\n    </Stack>\n  );\n}\n\ninterface NoDataOverlayProps {\n  resource: string;\n}\n\nexport function NoDataOverlay(props: NoDataOverlayProps): ReactElement {\n  const { resource } = props;\n\n  return <TextOverlay message={`No ${resource}`} />;\n}\n\ninterface LoadingOverlayProps {\n  variant?: SkeletonOwnProps['variant'];\n}\n\nexport function LoadingOverlay(props: LoadingOverlayProps): ReactElement {\n  const { variant = 'rounded' } = props;\n\n  return (\n    <Stack sx={{ height: '100%', alignItems: 'center', justifyContent: 'center', px: 1 }}>\n      <Skeleton variant={variant} width=\"100%\" height=\"30%\" aria-label=\"Loading...\" />\n    </Stack>\n  );\n}\n"],"names":["Skeleton","Stack","Typography","TextOverlay","props","message","sx","height","alignItems","justifyContent","NoDataOverlay","resource","LoadingOverlay","variant","px","width","aria-label"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAoBC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAO9E,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;QAAS;kBAC1E,cAAA,KAACP;sBAAYG;;;AAGnB;AAMA,OAAO,SAASK,cAAcN,KAAyB;IACrD,MAAM,EAAEO,QAAQ,EAAE,GAAGP;IAErB,qBAAO,KAACD;QAAYE,SAAS,CAAC,GAAG,EAAEM,UAAU;;AAC/C;AAMA,OAAO,SAASC,eAAeR,KAA0B;IACvD,MAAM,EAAES,UAAU,SAAS,EAAE,GAAGT;IAEhC,qBACE,KAACH;QAAMK,IAAI;YAAEC,QAAQ;YAAQC,YAAY;YAAUC,gBAAgB;YAAUK,IAAI;QAAE;kBACjF,cAAA,KAACd;YAASa,SAASA;YAASE,OAAM;YAAOR,QAAO;YAAMS,cAAW;;;AAGvE"}

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.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 { Box, FormControl, MenuItem, Select } from '@mui/material';\nimport { DurationString } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport { TimeOption } from '../model';\n\ninterface RefreshIntervalPickerProps {\n  timeOptions: TimeOption[];\n  value?: DurationString;\n  onChange: (value: DurationString) => void;\n  height?: string;\n}\n\nexport function RefreshIntervalPicker(props: RefreshIntervalPickerProps): ReactElement {\n  const { value, onChange, timeOptions, height } = props;\n  const formattedValue = value;\n\n  // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select\n  const customInterval = useMemo(() => {\n    if (value && !timeOptions.some((option) => option.value.pastDuration === value)) {\n      return <MenuItem value={value}>{value}</MenuItem>;\n    }\n  }, [timeOptions, value]);\n\n  return (\n    <FormControl>\n      <Box>\n        <Select\n          id=\"refreshInterval\"\n          value={formattedValue}\n          onChange={(event) => {\n            const duration = event.target.value as DurationString;\n            onChange(duration);\n          }}\n          inputProps={{\n            'aria-label': `Select refresh interval. Currently set to ${formattedValue}`,\n          }}\n          sx={{\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem key={idx} value={item.value.pastDuration}>\n              {item.display}\n            </MenuItem>\n          ))}\n          {customInterval}\n        </Select>\n      </Box>\n    </FormControl>\n  );\n}\n"],"names":["Box","FormControl","MenuItem","Select","useMemo","RefreshIntervalPicker","props","value","onChange","timeOptions","height","formattedValue","customInterval","some","option","pastDuration","id","event","duration","target","inputProps","sx","lineHeight","paddingY","map","item","idx","display"],"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,GAAG,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAEnE,SAAuBC,OAAO,QAAQ,QAAQ;AAU9C,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGJ;IACjD,MAAMK,iBAAiBJ;IAEvB,oHAAoH;IACpH,MAAMK,iBAAiBR,QAAQ;QAC7B,IAAIG,SAAS,CAACE,YAAYI,IAAI,CAAC,CAACC,SAAWA,OAAOP,KAAK,CAACQ,YAAY,KAAKR,QAAQ;YAC/E,qBAAO,KAACL;gBAASK,OAAOA;0BAAQA;;QAClC;IACF,GAAG;QAACE;QAAaF;KAAM;IAEvB,qBACE,KAACN;kBACC,cAAA,KAACD;sBACC,cAAA,MAACG;gBACCa,IAAG;gBACHT,OAAOI;gBACPH,UAAU,CAACS;oBACT,MAAMC,WAAWD,MAAME,MAAM,CAACZ,KAAK;oBACnCC,SAASU;gBACX;gBACAE,YAAY;oBACV,cAAc,CAAC,0CAA0C,EAAET,eAAe,CAAC;gBAC7E;gBACAU,IAAI;oBACF,qBAAqBX,SAAS;wBAAEY,YAAYZ;wBAAQa,UAAU;oBAAE,IAAI,CAAC;gBACvE;;oBAECd,YAAYe,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAACxB;4BAAmBK,OAAOkB,KAAKlB,KAAK,CAACQ,YAAY;sCAC/CU,KAAKE,OAAO;2BADAD;oBAIhBd;;;;;AAKX"}
+{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.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 { Box, FormControl, MenuItem, Select } from '@mui/material';\nimport { DurationString } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport { TimeOption } from '../model';\n\ninterface RefreshIntervalPickerProps {\n  timeOptions: TimeOption[];\n  value?: DurationString;\n  onChange: (value: DurationString) => void;\n  height?: string;\n}\n\nexport function RefreshIntervalPicker(props: RefreshIntervalPickerProps): ReactElement {\n  const { value, onChange, timeOptions, height } = props;\n  const formattedValue = value;\n\n  // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select\n  const customInterval = useMemo(() => {\n    if (value && !timeOptions.some((option) => option.value.pastDuration === value)) {\n      return <MenuItem value={value}>{value}</MenuItem>;\n    }\n  }, [timeOptions, value]);\n\n  return (\n    <FormControl>\n      <Box>\n        <Select\n          id=\"refreshInterval\"\n          value={formattedValue}\n          onChange={(event) => {\n            const duration = event.target.value as DurationString;\n            onChange(duration);\n          }}\n          inputProps={{\n            'aria-label': `Select refresh interval. Currently set to ${formattedValue}`,\n          }}\n          sx={{\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem key={idx} value={item.value.pastDuration}>\n              {item.display}\n            </MenuItem>\n          ))}\n          {customInterval}\n        </Select>\n      </Box>\n    </FormControl>\n  );\n}\n"],"names":["Box","FormControl","MenuItem","Select","useMemo","RefreshIntervalPicker","props","value","onChange","timeOptions","height","formattedValue","customInterval","some","option","pastDuration","id","event","duration","target","inputProps","sx","lineHeight","paddingY","map","item","idx","display"],"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,GAAG,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAEnE,SAAuBC,OAAO,QAAQ,QAAQ;AAU9C,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGJ;IACjD,MAAMK,iBAAiBJ;IAEvB,oHAAoH;IACpH,MAAMK,iBAAiBR,QAAQ;QAC7B,IAAIG,SAAS,CAACE,YAAYI,IAAI,CAAC,CAACC,SAAWA,OAAOP,KAAK,CAACQ,YAAY,KAAKR,QAAQ;YAC/E,qBAAO,KAACL;gBAASK,OAAOA;0BAAQA;;QAClC;IACF,GAAG;QAACE;QAAaF;KAAM;IAEvB,qBACE,KAACN;kBACC,cAAA,KAACD;sBACC,cAAA,MAACG;gBACCa,IAAG;gBACHT,OAAOI;gBACPH,UAAU,CAACS;oBACT,MAAMC,WAAWD,MAAME,MAAM,CAACZ,KAAK;oBACnCC,SAASU;gBACX;gBACAE,YAAY;oBACV,cAAc,CAAC,0CAA0C,EAAET,gBAAgB;gBAC7E;gBACAU,IAAI;oBACF,qBAAqBX,SAAS;wBAAEY,YAAYZ;wBAAQa,UAAU;oBAAE,IAAI,CAAC;gBACvE;;oBAECd,YAAYe,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAACxB;4BAAmBK,OAAOkB,KAAKlB,KAAK,CAACQ,YAAY;sCAC/CU,KAAKE,OAAO;2BADAD;oBAIhBd;;;;;AAKX"}