@perses-dev/components 0.55.0-beta.2 → 0.55.0-beta.3

package/dist/EChart/EChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright 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  BarChart as EChartsBarChart,\n  LineChart as EChartsLineChart,\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  ToolboxComponent,\n  MarkPointComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChartsTheme } from '../model';\n\n// Loading the ECharts extensions should happen in the respective plugins.\n// This is a workaround for https://github.com/perses/plugins/issues/83.\nuse([\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  EChartsBarChart,\n  EChartsLineChart,\n  EChartsGaugeChart,\n  EChartsPieChart,\n  EChartsScatterChart,\n  EChartsCustomChart,\n  EChartsHeatmapChart,\n  GridComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n  VisualMapComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\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","BarChart","EChartsBarChart","LineChart","EChartsLineChart","GaugeChart","EChartsGaugeChart","PieChart","EChartsPieChart","ScatterChart","EChartsScatterChart","CustomChart","EChartsCustomChart","HeatmapChart","EChartsHeatmapChart","DatasetComponent","DataZoomComponent","LegendComponent","GridComponent","TitleComponent","TooltipComponent","VisualMapComponent","ToolboxComponent","MarkPointComponent","MarkAreaComponent","MarkLineComponent","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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"}
+{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright 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, SxProps, Theme } from '@mui/material';\nimport {\n  BarChart as EChartsBarChart,\n  LineChart as EChartsLineChart,\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  ToolboxComponent,\n  MarkPointComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n} from 'echarts/components';\nimport { ECharts, EChartsCoreOption, init, connect, use as registerEChartsComponents } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport debounce from 'lodash/debounce';\nimport isEqual from 'lodash/isEqual';\nimport { CSSProperties, memo, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport { EChartsTheme } from '../model';\n\n// Loading the ECharts extensions should happen in the respective plugins.\n// This is a workaround for https://github.com/perses/plugins/issues/83.\nregisterEChartsComponents([\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  EChartsBarChart,\n  EChartsLineChart,\n  EChartsGaugeChart,\n  EChartsPieChart,\n  EChartsScatterChart,\n  EChartsCustomChart,\n  EChartsHeatmapChart,\n  GridComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n  VisualMapComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\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":["Box","BarChart","EChartsBarChart","LineChart","EChartsLineChart","GaugeChart","EChartsGaugeChart","PieChart","EChartsPieChart","ScatterChart","EChartsScatterChart","CustomChart","EChartsCustomChart","HeatmapChart","EChartsHeatmapChart","DatasetComponent","DataZoomComponent","LegendComponent","GridComponent","TitleComponent","TooltipComponent","VisualMapComponent","ToolboxComponent","MarkPointComponent","MarkAreaComponent","MarkLineComponent","init","connect","use","registerEChartsComponents","CanvasRenderer","debounce","isEqual","memo","useEffect","useLayoutEffect","useRef","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/EChart/timezone-formatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timezone-formatter.d.ts","sourceRoot":"","sources":["../../src/EChart/timezone-formatter.ts"],"names":[],"mappings":"AAmBA;;GAEG;AACH,wBAAgB,gCAAgC,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WACxD,MAAM,KAAG,MAAM,CA0BxC"}
+{"version":3,"file":"timezone-formatter.d.ts","sourceRoot":"","sources":["../../src/EChart/timezone-formatter.ts"],"names":[],"mappings":"AAmBA;;GAEG;AACH,wBAAgB,gCAAgC,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAC/D,OAAO,MAAM,KAAG,MAAM,CA0BxC"}

package/dist/FontSizeSelector/FontSizeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontSizeSelector.d.ts","sourceRoot":"","sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAyBrC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,GAAG,YAAY,CAmBzF"}
+{"version":3,"file":"FontSizeSelector.d.ts","sourceRoot":"","sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AA0BrC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,GAAG,YAAY,CAmBzF"}

package/dist/FontSizeSelector/FontSizeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"sourcesContent":["// Copyright 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 { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst FONT_SIZE_OPTIONS = [\n  { id: 'default', label: 'Default', value: undefined },\n  { id: '12', label: '12', value: 12 },\n  { id: '14', label: '14', value: 14 },\n  { id: '16', label: '16', value: 16 },\n  { id: '20', label: '20', value: 20 },\n  { id: '24', label: '24', value: 24 },\n  { id: '28', label: '28', value: 28 },\n  { id: '32', label: '32', value: 32 },\n  { id: '36', label: '36', value: 36 },\n  { id: '40', label: '40', value: 40 },\n  { id: '48', label: '48', value: 48 },\n  { id: '56', label: '56', value: 56 },\n  { id: '64', label: '64', value: 64 },\n  { id: '72', label: '72', value: 72 },\n  { id: '96', label: '96', value: 96 },\n  { id: '128', label: '128', value: 128 },\n  { id: '160', label: '160', value: 160 },\n  { id: '192', label: '192', value: 192 },\n];\n\nexport type FontSizeOption = number | undefined;\n\nexport interface FontSizeSelectorProps {\n  value: FontSizeOption;\n  onChange: (fontSize: FontSizeOption) => void;\n}\n\nexport function FontSizeSelector({ value, onChange }: FontSizeSelectorProps): ReactElement {\n  const handleFontSizeChange = (_: unknown, { value }: { value: FontSizeOption }): void => {\n    onChange(value);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Font Size\"\n      control={\n        <SettingsAutocomplete\n          value={FONT_SIZE_OPTIONS.find((o) => o.value === value)}\n          options={FONT_SIZE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleFontSizeChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","FONT_SIZE_OPTIONS","id","label","value","undefined","FontSizeSelector","onChange","handleFontSizeChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAE/D,MAAMC,oBAAoB;IACxB;QAAEC,IAAI;QAAWC,OAAO;QAAWC,OAAOC;IAAU;IACpD;QAAEH,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;CACvC;AASD,OAAO,SAASE,iBAAiB,EAAEF,KAAK,EAAEG,QAAQ,EAAyB;IACzE,MAAMC,uBAAuB,CAACC,GAAY,EAAEL,KAAK,EAA6B;QAC5EG,SAASH;IACX;IAEA,qBACE,KAACL;QACCI,OAAM;QACNO,uBACE,KAACV;YACCI,OAAOH,kBAAkBU,IAAI,CAAC,CAACC,IAAMA,EAAER,KAAK,KAAKA;YACjDS,SAASZ;YACTa,gBAAgB,CAACF,IAAMA,EAAET,KAAK;YAC9BI,UAAUC;YACVO,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../src/FontSizeSelector/FontSizeSelector.tsx"],"sourcesContent":["// Copyright 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';\n\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst FONT_SIZE_OPTIONS = [\n  { id: 'default', label: 'Default', value: undefined },\n  { id: '12', label: '12', value: 12 },\n  { id: '14', label: '14', value: 14 },\n  { id: '16', label: '16', value: 16 },\n  { id: '20', label: '20', value: 20 },\n  { id: '24', label: '24', value: 24 },\n  { id: '28', label: '28', value: 28 },\n  { id: '32', label: '32', value: 32 },\n  { id: '36', label: '36', value: 36 },\n  { id: '40', label: '40', value: 40 },\n  { id: '48', label: '48', value: 48 },\n  { id: '56', label: '56', value: 56 },\n  { id: '64', label: '64', value: 64 },\n  { id: '72', label: '72', value: 72 },\n  { id: '96', label: '96', value: 96 },\n  { id: '128', label: '128', value: 128 },\n  { id: '160', label: '160', value: 160 },\n  { id: '192', label: '192', value: 192 },\n];\n\nexport type FontSizeOption = number | undefined;\n\nexport interface FontSizeSelectorProps {\n  value: FontSizeOption;\n  onChange: (fontSize: FontSizeOption) => void;\n}\n\nexport function FontSizeSelector({ value, onChange }: FontSizeSelectorProps): ReactElement {\n  const handleFontSizeChange = (_: unknown, { value }: { value: FontSizeOption }): void => {\n    onChange(value);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Font Size\"\n      control={\n        <SettingsAutocomplete\n          value={FONT_SIZE_OPTIONS.find((o) => o.value === value)}\n          options={FONT_SIZE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleFontSizeChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","FONT_SIZE_OPTIONS","id","label","value","undefined","FontSizeSelector","onChange","handleFontSizeChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAIjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAE/D,MAAMC,oBAAoB;IACxB;QAAEC,IAAI;QAAWC,OAAO;QAAWC,OAAOC;IAAU;IACpD;QAAEH,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAMC,OAAO;QAAMC,OAAO;IAAG;IACnC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;IACtC;QAAEF,IAAI;QAAOC,OAAO;QAAOC,OAAO;IAAI;CACvC;AASD,OAAO,SAASE,iBAAiB,EAAEF,KAAK,EAAEG,QAAQ,EAAyB;IACzE,MAAMC,uBAAuB,CAACC,GAAY,EAAEL,KAAK,EAA6B;QAC5EG,SAASH;IACX;IAEA,qBACE,KAACL;QACCI,OAAM;QACNO,uBACE,KAACV;YACCI,OAAOH,kBAAkBU,IAAI,CAAC,CAACC,IAAMA,EAAER,KAAK,KAAKA;YACjDS,SAASZ;YACTa,gBAAgB,CAACF,IAAMA,EAAET,KAAK;YAC9BI,UAAUC;YACVO,gBAAgB;;;AAK1B"}

package/dist/FormatControls/FormatControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,aAAa,EAAuE,MAAM,UAAU,CAAC;AAG9G,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,GAAG,YAAY,CA+DvG"}
+{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,aAAa,EAAuE,MAAM,UAAU,CAAC;AAK9G,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,GAAG,YAAY,CA+DvG"}

package/dist/FormatControls/FormatControls.js

@@ -12,9 +12,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Switch } from '@mui/material';
+import { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';
 import { OptionsEditorControl } from '../OptionsEditorLayout';
 import { SettingsAutocomplete } from '../SettingsAutocomplete';
-import { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';
 import { UnitSelector } from './UnitSelector';
 const DECIMAL_PLACES_OPTIONS = [
     {

package/dist/FormatControls/FormatControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormatControls/FormatControls.tsx"],"sourcesContent":["// Copyright 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.\nimport { Switch, SwitchProps } from '@mui/material';\n\nimport { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { FormatOptions, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';\nimport { UnitSelector } from './UnitSelector';\n\nexport interface FormatControlsProps {\n  value: FormatOptions;\n  onChange: (unit: FormatOptions) => void;\n  disabled?: boolean;\n}\n\nconst DECIMAL_PLACES_OPTIONS: Array<{ id: string; label: string; decimalPlaces?: number }> = [\n  { id: 'default', label: 'Default', decimalPlaces: undefined },\n  { id: '0', label: '0', decimalPlaces: 0 },\n  { id: '1', label: '1', decimalPlaces: 1 },\n  { id: '2', label: '2', decimalPlaces: 2 },\n  { id: '3', label: '3', decimalPlaces: 3 },\n  { id: '4', label: '4', decimalPlaces: 4 },\n];\n\nfunction getOptionByDecimalPlaces(\n  decimalPlaces?: number\n): { id: string; label: string; decimalPlaces?: number } | undefined {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimalPlaces === decimalPlaces);\n}\n\nexport function FormatControls({ value, onChange, disabled = false }: FormatControlsProps): ReactElement {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasShortValues = isUnitWithShortValues(value);\n\n  const handleUnitChange = (newValue: FormatOptions | undefined): void => {\n    onChange(newValue || { unit: 'decimal' }); // Fallback to 'decimal' if undefined\n  };\n\n  const handleDecimalPlacesChange = ({\n    decimalPlaces,\n  }: {\n    id: string;\n    label: string;\n    decimalPlaces?: number;\n  }): void => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimalPlaces: decimalPlaces,\n      });\n    }\n  };\n\n  const handleShortValuesChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasShortValues) {\n      onChange({\n        ...value,\n        shortValues: checked,\n      });\n    }\n  };\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Short values\"\n        control={\n          <Switch\n            checked={hasShortValues ? shouldShortenValues(value.shortValues) : false}\n            onChange={handleShortValuesChange}\n            disabled={!hasShortValues}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={<UnitSelector value={value} onChange={handleUnitChange} disabled={disabled} />}\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimalPlaces)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={(_, value) => handleDecimalPlacesChange(value)}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","OptionsEditorControl","SettingsAutocomplete","isUnitWithDecimalPlaces","isUnitWithShortValues","shouldShortenValues","UnitSelector","DECIMAL_PLACES_OPTIONS","id","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleUnitChange","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","_","checked","shortValues","control","options","getOptionLabel","disableClearable"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AACjC,SAASA,MAAM,QAAqB,gBAAgB;AAGpD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAAwBC,uBAAuB,EAAEC,qBAAqB,EAAEC,mBAAmB,QAAQ,WAAW;AAC9G,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C,MAAMC,yBAAuF;IAC3F;QAAEC,IAAI;QAAWC,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAEH,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBACPF,aAAsB;IAEtB,OAAOH,uBAAuBM,IAAI,CAAC,CAACC,IAAMA,EAAEJ,aAAa,KAAKA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAuB;IACvF,MAAMC,mBAAmBhB,wBAAwBa;IACjD,MAAMI,iBAAiBhB,sBAAsBY;IAE7C,MAAMK,mBAAmB,CAACC;QACxBL,SAASK,YAAY;YAAEC,MAAM;QAAU,IAAI,qCAAqC;IAClF;IAEA,MAAMC,4BAA4B,CAAC,EACjCd,aAAa,EAKd;QACC,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMe,0BAAmD,CAACC,GAAYC;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,qBACE;;0BACE,KAAC1B;gBACCQ,OAAM;gBACNoB,uBACE,KAAC7B;oBACC2B,SAASP,iBAAiBf,oBAAoBW,MAAMY,WAAW,IAAI;oBACnEX,UAAUQ;oBACVP,UAAU,CAACE;;;0BAIjB,KAACnB;gBACCQ,OAAM;gBACNoB,uBAAS,KAACvB;oBAAaU,OAAOA;oBAAOC,UAAUI;oBAAkBH,UAAUA;;;0BAE7E,KAACjB;gBACCQ,OAAM;gBACNoB,uBACE,KAAC3B;oBACCc,OAAOJ,yBAAyBI,MAAMN,aAAa;oBACnDoB,SAASvB;oBACTwB,gBAAgB,CAACjB,IAAMA,EAAEL,KAAK;oBAC9BQ,UAAU,CAACS,GAAGV,QAAUQ,0BAA0BR;oBAClDE,UAAU,CAACC;oBACXa,gBAAgB;;;;;AAM5B"}
+{"version":3,"sources":["../../src/FormatControls/FormatControls.tsx"],"sourcesContent":["// Copyright 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.\nimport { Switch, SwitchProps } from '@mui/material';\nimport { ReactElement } from 'react';\n\nimport { FormatOptions, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { UnitSelector } from './UnitSelector';\n\nexport interface FormatControlsProps {\n  value: FormatOptions;\n  onChange: (unit: FormatOptions) => void;\n  disabled?: boolean;\n}\n\nconst DECIMAL_PLACES_OPTIONS: Array<{ id: string; label: string; decimalPlaces?: number }> = [\n  { id: 'default', label: 'Default', decimalPlaces: undefined },\n  { id: '0', label: '0', decimalPlaces: 0 },\n  { id: '1', label: '1', decimalPlaces: 1 },\n  { id: '2', label: '2', decimalPlaces: 2 },\n  { id: '3', label: '3', decimalPlaces: 3 },\n  { id: '4', label: '4', decimalPlaces: 4 },\n];\n\nfunction getOptionByDecimalPlaces(\n  decimalPlaces?: number,\n): { id: string; label: string; decimalPlaces?: number } | undefined {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimalPlaces === decimalPlaces);\n}\n\nexport function FormatControls({ value, onChange, disabled = false }: FormatControlsProps): ReactElement {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasShortValues = isUnitWithShortValues(value);\n\n  const handleUnitChange = (newValue: FormatOptions | undefined): void => {\n    onChange(newValue || { unit: 'decimal' }); // Fallback to 'decimal' if undefined\n  };\n\n  const handleDecimalPlacesChange = ({\n    decimalPlaces,\n  }: {\n    id: string;\n    label: string;\n    decimalPlaces?: number;\n  }): void => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimalPlaces: decimalPlaces,\n      });\n    }\n  };\n\n  const handleShortValuesChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasShortValues) {\n      onChange({\n        ...value,\n        shortValues: checked,\n      });\n    }\n  };\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Short values\"\n        control={\n          <Switch\n            checked={hasShortValues ? shouldShortenValues(value.shortValues) : false}\n            onChange={handleShortValuesChange}\n            disabled={!hasShortValues}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={<UnitSelector value={value} onChange={handleUnitChange} disabled={disabled} />}\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimalPlaces)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={(_, value) => handleDecimalPlacesChange(value)}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","isUnitWithDecimalPlaces","isUnitWithShortValues","shouldShortenValues","OptionsEditorControl","SettingsAutocomplete","UnitSelector","DECIMAL_PLACES_OPTIONS","id","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleUnitChange","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","_","checked","shortValues","control","options","getOptionLabel","disableClearable"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AACjC,SAASA,MAAM,QAAqB,gBAAgB;AAGpD,SAAwBC,uBAAuB,EAAEC,qBAAqB,EAAEC,mBAAmB,QAAQ,WAAW;AAC9G,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C,MAAMC,yBAAuF;IAC3F;QAAEC,IAAI;QAAWC,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAEH,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBACPF,aAAsB;IAEtB,OAAOH,uBAAuBM,IAAI,CAAC,CAACC,IAAMA,EAAEJ,aAAa,KAAKA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAuB;IACvF,MAAMC,mBAAmBlB,wBAAwBe;IACjD,MAAMI,iBAAiBlB,sBAAsBc;IAE7C,MAAMK,mBAAmB,CAACC;QACxBL,SAASK,YAAY;YAAEC,MAAM;QAAU,IAAI,qCAAqC;IAClF;IAEA,MAAMC,4BAA4B,CAAC,EACjCd,aAAa,EAKd;QACC,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMe,0BAAmD,CAACC,GAAYC;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,qBACE;;0BACE,KAACvB;gBACCK,OAAM;gBACNoB,uBACE,KAAC7B;oBACC2B,SAASP,iBAAiBjB,oBAAoBa,MAAMY,WAAW,IAAI;oBACnEX,UAAUQ;oBACVP,UAAU,CAACE;;;0BAIjB,KAAChB;gBACCK,OAAM;gBACNoB,uBAAS,KAACvB;oBAAaU,OAAOA;oBAAOC,UAAUI;oBAAkBH,UAAUA;;;0BAE7E,KAACd;gBACCK,OAAM;gBACNoB,uBACE,KAACxB;oBACCW,OAAOJ,yBAAyBI,MAAMN,aAAa;oBACnDoB,SAASvB;oBACTwB,gBAAgB,CAACjB,IAAMA,EAAEL,KAAK;oBAC9BQ,UAAU,CAACS,GAAGV,QAAUQ,0BAA0BR;oBAClDE,UAAU,CAACC;oBACXa,gBAAgB;;;;;AAM5B"}

package/dist/FormatControls/UnitSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/FormatControls/UnitSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,aAAa,EAA2B,MAAM,UAAU,CAAC;AAElE,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,GAAG,UAAU,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAqBlH"}
+{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/FormatControls/UnitSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,aAAa,EAA2B,MAAM,UAAU,CAAC;AAGlE,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,GAAG,UAAU,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAqBlH"}

package/dist/FormatControls/UnitSelector.js

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SettingsAutocomplete } from '../SettingsAutocomplete';
 import { UNIT_CONFIG } from '../model';
+import { SettingsAutocomplete } from '../SettingsAutocomplete';
 const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
     return {
         ...config,

package/dist/FormatControls/UnitSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormatControls/UnitSelector.tsx"],"sourcesContent":["// Copyright 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 { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { FormatOptions, UNIT_CONFIG, UnitConfig } from '../model';\n\nexport interface UnitSelectorProps {\n  value?: FormatOptions;\n  onChange: (format: FormatOptions | undefined) => void;\n  disabled?: boolean;\n}\n\ntype AutocompleteUnitOption = UnitConfig & {\n  id: NonNullable<FormatOptions['unit']>;\n};\n\nconst KIND_OPTIONS: readonly AutocompleteUnitOption[] = Object.entries(UNIT_CONFIG)\n  .map<AutocompleteUnitOption>(([id, config]) => {\n    return {\n      ...config,\n      id: id as AutocompleteUnitOption['id'],\n      group: config.group || 'Decimal',\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nexport function UnitSelector({ value, onChange, disabled = false, ...otherProps }: UnitSelectorProps): ReactElement {\n  const unitConfig = UNIT_CONFIG[value?.unit || 'decimal'];\n\n  const handleChange = (_: unknown, newValue: AutocompleteUnitOption | null): void => {\n    if (newValue === null) {\n      onChange(undefined);\n    } else {\n      onChange({ unit: newValue.id } as FormatOptions);\n    }\n  };\n\n  return (\n    <SettingsAutocomplete<AutocompleteUnitOption, false, false>\n      value={value ? { id: value.unit || 'decimal', ...unitConfig } : null}\n      options={KIND_OPTIONS}\n      groupBy={(option) => option.group ?? 'Decimal'}\n      onChange={handleChange}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["SettingsAutocomplete","UNIT_CONFIG","KIND_OPTIONS","Object","entries","map","id","config","group","filter","disableSelectorOption","UnitSelector","value","onChange","disabled","otherProps","unitConfig","unit","handleChange","_","newValue","undefined","options","groupBy","option"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,oBAAoB,QAAQ,0BAA0B;AAC/D,SAAwBC,WAAW,QAAoB,WAAW;AAYlE,MAAMC,eAAkDC,OAAOC,OAAO,CAACH,aACpEI,GAAG,CAAyB,CAAC,CAACC,IAAIC,OAAO;IACxC,OAAO;QACL,GAAGA,MAAM;QACTD,IAAIA;QACJE,OAAOD,OAAOC,KAAK,IAAI;IACzB;AACF,GACCC,MAAM,CAAC,CAACF,SAAW,CAACA,OAAOG,qBAAqB;AAEnD,OAAO,SAASC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGC,YAA+B;IAClG,MAAMC,aAAaf,WAAW,CAACW,OAAOK,QAAQ,UAAU;IAExD,MAAMC,eAAe,CAACC,GAAYC;QAChC,IAAIA,aAAa,MAAM;YACrBP,SAASQ;QACX,OAAO;YACLR,SAAS;gBAAEI,MAAMG,SAASd,EAAE;YAAC;QAC/B;IACF;IAEA,qBACE,KAACN;QACCY,OAAOA,QAAQ;YAAEN,IAAIM,MAAMK,IAAI,IAAI;YAAW,GAAGD,UAAU;QAAC,IAAI;QAChEM,SAASpB;QACTqB,SAAS,CAACC,SAAWA,OAAOhB,KAAK,IAAI;QACrCK,UAAUK;QACVJ,UAAUA;QACT,GAAGC,UAAU;;AAGpB"}
+{"version":3,"sources":["../../src/FormatControls/UnitSelector.tsx"],"sourcesContent":["// Copyright 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';\n\nimport { FormatOptions, UNIT_CONFIG, UnitConfig } from '../model';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value?: FormatOptions;\n  onChange: (format: FormatOptions | undefined) => void;\n  disabled?: boolean;\n}\n\ntype AutocompleteUnitOption = UnitConfig & {\n  id: NonNullable<FormatOptions['unit']>;\n};\n\nconst KIND_OPTIONS: readonly AutocompleteUnitOption[] = Object.entries(UNIT_CONFIG)\n  .map<AutocompleteUnitOption>(([id, config]) => {\n    return {\n      ...config,\n      id: id as AutocompleteUnitOption['id'],\n      group: config.group || 'Decimal',\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nexport function UnitSelector({ value, onChange, disabled = false, ...otherProps }: UnitSelectorProps): ReactElement {\n  const unitConfig = UNIT_CONFIG[value?.unit || 'decimal'];\n\n  const handleChange = (_: unknown, newValue: AutocompleteUnitOption | null): void => {\n    if (newValue === null) {\n      onChange(undefined);\n    } else {\n      onChange({ unit: newValue.id } as FormatOptions);\n    }\n  };\n\n  return (\n    <SettingsAutocomplete<AutocompleteUnitOption, false, false>\n      value={value ? { id: value.unit || 'decimal', ...unitConfig } : null}\n      options={KIND_OPTIONS}\n      groupBy={(option) => option.group ?? 'Decimal'}\n      onChange={handleChange}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["UNIT_CONFIG","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","group","filter","disableSelectorOption","UnitSelector","value","onChange","disabled","otherProps","unitConfig","unit","handleChange","_","newValue","undefined","options","groupBy","option"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAIjC,SAAwBA,WAAW,QAAoB,WAAW;AAClE,SAASC,oBAAoB,QAAQ,0BAA0B;AAY/D,MAAMC,eAAkDC,OAAOC,OAAO,CAACJ,aACpEK,GAAG,CAAyB,CAAC,CAACC,IAAIC,OAAO;IACxC,OAAO;QACL,GAAGA,MAAM;QACTD,IAAIA;QACJE,OAAOD,OAAOC,KAAK,IAAI;IACzB;AACF,GACCC,MAAM,CAAC,CAACF,SAAW,CAACA,OAAOG,qBAAqB;AAEnD,OAAO,SAASC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGC,YAA+B;IAClG,MAAMC,aAAahB,WAAW,CAACY,OAAOK,QAAQ,UAAU;IAExD,MAAMC,eAAe,CAACC,GAAYC;QAChC,IAAIA,aAAa,MAAM;YACrBP,SAASQ;QACX,OAAO;YACLR,SAAS;gBAAEI,MAAMG,SAASd,EAAE;YAAC;QAC/B;IACF;IAEA,qBACE,KAACL;QACCW,OAAOA,QAAQ;YAAEN,IAAIM,MAAMK,IAAI,IAAI;YAAW,GAAGD,UAAU;QAAC,IAAI;QAChEM,SAASpB;QACTqB,SAAS,CAACC,SAAWA,OAAOhB,KAAK,IAAI;QACrCK,UAAUK;QACVJ,UAAUA;QACT,GAAGC,UAAU;;AAGpB"}

package/dist/InfoTooltip/InfoTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAShD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,KAAG,YAqBrB,CAAC"}
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,GAAI,8EAQzB,gBAAgB,KAAG,YAqBrB,CAAC"}

package/dist/InfoTooltip/InfoTooltip.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { styled, Tooltip as MuiTooltip, tooltipClasses, Typography } from '@mui/material';
 export const InfoTooltip = ({ id, title, description, placement, children, enterDelay, enterNextDelay })=>{
     // Wrap children in a span to cover the following use cases:

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"sourcesContent":["// Copyright 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,+BAA+B;AAC/B,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"}
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"sourcesContent":["// Copyright 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 {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\nimport { ReactElement, ReactNode } from 'react';\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,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SACEA,MAAM,EAENC,WAAWC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,gBAAgB;AAevB,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

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
 import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import { ReactElement } from 'react';
 type JSONEditorProps<T> = Omit<ReactCodeMirrorProps, 'onBlur' | 'theme' | 'extensions' | 'onChange' | 'value'> & {
     value: T;
     placeholder?: string;

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,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAKzE,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":"AAgBA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAE/C,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,11 +11,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useState } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
 import { linter, lintGutter } from '@codemirror/lint';
 import { useTheme } from '@mui/material';
+import CodeMirror from '@uiw/react-codemirror';
+import { useState } from 'react';
 export function JSONEditor(props) {
     const theme = useTheme();
     const isDarkMode = theme.palette.mode === 'dark';

package/dist/JSONEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/JSONEditor.tsx"],"sourcesContent":["// Copyright 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, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport { useTheme } from '@mui/material';\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,+BAA+B;AAC/B,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,gBAA0C,wBAAwB;AACzE,SAASC,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,QAAQ,QAAQ,gBAAgB;AAQzC,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"}
+{"version":3,"sources":["../src/JSONEditor.tsx"],"sourcesContent":["// Copyright 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 { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { linter, lintGutter } from '@codemirror/lint';\nimport { useTheme } from '@mui/material';\nimport CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { ReactElement, useState } from 'react';\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":["json","jsonParseLinter","linter","lintGutter","useTheme","CodeMirror","useState","JSONEditor","props","theme","isDarkMode","palette","mode","value","setValue","JSON","stringify","lastProcessedValue","setLastProcessedValue","style","border","divider","extensions","onChange","newValue","onBlur","undefined","placeholder"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAC9D,SAASC,MAAM,EAAEC,UAAU,QAAQ,mBAAmB;AACtD,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,OAAOC,gBAA0C,wBAAwB;AACzE,SAAuBC,QAAQ,QAAQ,QAAQ;AAQ/C,OAAO,SAASC,WAAcC,KAAyB;IACrD,MAAMC,QAAQL;IACd,MAAMM,aAAaD,MAAME,OAAO,CAACC,IAAI,KAAK;IAE1C,MAAM,CAACC,OAAOC,SAAS,GAAGR,SAAS,IAAMS,KAAKC,SAAS,CAACR,MAAMK,KAAK,EAAE,MAAM;IAC3E,MAAM,CAACI,oBAAoBC,sBAAsB,GAAGZ,SAAiBO;IAErE,qBACE,KAACR;QACE,GAAGG,KAAK;QACTW,OAAO;YAAEC,QAAQ,CAAC,UAAU,EAAEX,MAAME,OAAO,CAACU,OAAO,EAAE;QAAC;QACtDZ,OAAOC,aAAa,SAAS;QAC7BY,YAAY;YAACtB;YAAQE,OAAOD;YAAoBE;SAAa;QAC7DU,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/Legend/CompactLegend.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
-import { ListLegendItemProps } from './ListLegendItem';
 import { LegendItem, SelectedLegendItemState } from './legend-model';
+import { ListLegendItemProps } from './ListLegendItem';
 export interface CompactLegendProps {
     height: number;
     items: LegendItem[];

package/dist/Legend/CompactLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AAEnG,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAClD,eAAe,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,cAAc,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,kBAAkB,GAAG,YAAY,CAqBnC"}
+{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AACnG,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAClD,eAAe,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,cAAc,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,kBAAkB,GAAG,YAAY,CAqBnC"}

package/dist/Legend/CompactLegend.js

@@ -12,8 +12,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Box } from '@mui/material';
-import { ListLegendItem } from './ListLegendItem';
 import { isLegendItemVisuallySelected } from './legend-model';
+import { ListLegendItem } from './ListLegendItem';
 /**
  * CompactLegend is default and used when legend items need to show side by side
  * which corresponds to when legend.position is `bottom` with a relatively small

package/dist/Legend/CompactLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/CompactLegend.tsx"],"sourcesContent":["// Copyright 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 } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({\n  height,\n  items,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: CompactLegendProps): ReactElement {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item, index) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          index={index}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onMouseOver={onItemMouseOver}\n          onMouseOut={onItemMouseOut}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","isLegendItemVisuallySelected","CompactLegend","height","items","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","component","sx","width","padding","overflowY","margin","map","item","index","isVisuallySelected","onMouseOver","onMouseOut","onClick","float","paddingRight","id"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,cAAc,QAA6B,mBAAmB;AACvE,SAA8CC,4BAA4B,QAAQ,iBAAiB;AAWnG;;;;;CAKC,GACD,OAAO,SAASC,cAAc,EAC5BC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACK;IACnB,qBACE,KAACT;QAAIU,WAAU;QAAKC,IAAI;YAAEC,OAAO;YAAQR;YAAQS,SAAS;gBAAC;gBAAG;gBAAG;gBAAG;aAAE;YAAEC,WAAW;YAAUC,QAAQ;QAAE;kBACpGV,MAAMW,GAAG,CAAC,CAACC,MAAMC,sBAChB,KAACjB;gBAECgB,MAAMA;gBACNC,OAAOA;gBACPC,oBAAoBjB,6BAA6Be,MAAMX;gBACvDc,aAAaZ;gBACba,YAAYZ;gBACZa,SAASf;gBACTI,IAAI;oBACFC,OAAO;oBACPW,OAAO;oBACPC,cAAc;gBAChB;eAXKP,KAAKQ,EAAE;;AAgBtB"}
+{"version":3,"sources":["../../src/Legend/CompactLegend.tsx"],"sourcesContent":["// Copyright 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 } from '@mui/material';\nimport { ReactElement } from 'react';\n\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({\n  height,\n  items,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: CompactLegendProps): ReactElement {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item, index) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          index={index}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onMouseOver={onItemMouseOver}\n          onMouseOut={onItemMouseOut}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","isLegendItemVisuallySelected","ListLegendItem","CompactLegend","height","items","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","component","sx","width","padding","overflowY","margin","map","item","index","isVisuallySelected","onMouseOver","onMouseOut","onClick","float","paddingRight","id"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,SAA8CC,4BAA4B,QAAQ,iBAAiB;AACnG,SAASC,cAAc,QAA6B,mBAAmB;AAWvE;;;;;CAKC,GACD,OAAO,SAASC,cAAc,EAC5BC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACK;IACnB,qBACE,KAACT;QAAIU,WAAU;QAAKC,IAAI;YAAEC,OAAO;YAAQR;YAAQS,SAAS;gBAAC;gBAAG;gBAAG;gBAAG;aAAE;YAAEC,WAAW;YAAUC,QAAQ;QAAE;kBACpGV,MAAMW,GAAG,CAAC,CAACC,MAAMC,sBAChB,KAAChB;gBAECe,MAAMA;gBACNC,OAAOA;gBACPC,oBAAoBlB,6BAA6BgB,MAAMX;gBACvDc,aAAaZ;gBACba,YAAYZ;gBACZa,SAASf;gBACTI,IAAI;oBACFC,OAAO;oBACPW,OAAO;oBACPC,cAAc;gBAChB;eAXKP,KAAKQ,EAAE;;AAgBtB"}

package/dist/Legend/Legend.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
-import { TableLegendProps } from './TableLegend';
 import { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';
 import { ListLegendItemProps } from './ListLegendItem';
+import { TableLegendProps } from './TableLegend';
 export interface LegendProps {
     width: number;
     height: number;

package/dist/Legend/Legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC;IAEhC;;;;;OAKG;IACH,aAAa,EAAE,uBAAuB,CAAC;IAEvC;;OAEG;IACH,qBAAqB,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAEtE;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IAErD;;OAEG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAEnD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,iBAAiB,GAAG,SAAS,CAAC,CAAC;CAChF;AASD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,aAAa,EACb,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,UAAU,GACX,EAAE,WAAW,GAAG,YAAY,CAoG5B"}
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAa,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAE7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,sBAAsB,CAAC;IAEhC;;;;;OAKG;IACH,aAAa,EAAE,uBAAuB,CAAC;IAEvC;;OAEG;IACH,qBAAqB,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAEtE;;OAEG;IACH,eAAe,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IAErD;;OAEG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAEnD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,iBAAiB,GAAG,SAAS,CAAC,CAAC;CAChF;AASD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,aAAa,EACb,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,UAAU,GACX,EAAE,WAAW,GAAG,YAAY,CAoG5B"}

package/dist/Legend/Legend.js

@@ -14,8 +14,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { produce } from 'immer';
 import { getLegendMode } from '../model';
-import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
+import { ListLegend } from './ListLegend';
 import { TableLegend } from './TableLegend';
 // When the number of items to display is above this number, it is likely to
 // cause performance issues in the browser. The legend will be displayed in a

package/dist/Legend/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 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 } from '@mui/material';\nimport { produce } from 'immer';\nimport { ReactElement, ReactNode } from 'react';\nimport { getLegendMode } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\nimport { TableLegend, TableLegendProps } from './TableLegend';\nimport { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';\nimport { ListLegendItemProps } from './ListLegendItem';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendComponentOptions;\n\n  /**\n   * State of selected items in the legend.\n   *\n   * Selected legend item state is a controlled value that should be managed using a\n   * combination of this prop and `onSelectedChange`.\n   */\n  selectedItems: SelectedLegendItemState;\n\n  /**\n   * Callback fired when the selected items in the legend changes.\n   */\n  onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;\n\n  /**\n   * Callback fired when the mouse is moved over a legend item.\n   */\n  onItemMouseOver?: ListLegendItemProps['onMouseOver'];\n\n  /**\n   * Callback fired when the mouse is moved out of a legend item.\n   */\n  onItemMouseOut?: ListLegendItemProps['onMouseOut'];\n\n  /**\n   * Props specific to legend with `mode` set to `table`.\n   */\n  tableProps?: Pick<TableLegendProps, 'columns' | 'onSortingChange' | 'sorting'>;\n}\n\n// When the number of items to display is above this number, it is likely to\n// cause performance issues in the browser. The legend will be displayed in a\n// format (list) that allows for virtualization to minimize the performance impact.\n// Set this number based on testing, but it may need to be tuned a bit on the\n// future as people test this out on different machines.\nconst NEED_VIRTUALIZATION_LIMIT = 500;\n\nexport function Legend({\n  width,\n  height,\n  options,\n  data,\n  selectedItems,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  tableProps,\n}: LegendProps): ReactElement {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string): void => {\n    const isModifiedClick = e.metaKey || e.shiftKey;\n\n    const newSelected = produce(selectedItems, (draft) => {\n      if (draft === 'ALL') {\n        return {\n          [seriesId]: true,\n        };\n      }\n\n      const isSelected = !!draft[seriesId];\n\n      // Clicks with modifier key can select multiple items.\n      if (isModifiedClick) {\n        if (isSelected) {\n          // Modified click on already selected item. Remove that item.\n          delete draft[seriesId];\n        } else {\n          // Modified click on not-selected item. Add it.\n          draft[seriesId] = true;\n        }\n        return draft;\n      }\n\n      if (isSelected) {\n        // Clicked item was already selected. Unselect it and return to\n        // ALL state.\n        return 'ALL' as const;\n      }\n\n      // Select clicked item.\n      return { [seriesId]: true };\n    });\n    onSelectedItemsChange(newSelected);\n  };\n\n  const mode = getLegendMode(options.mode);\n\n  // The bottom legend is displayed as a list when the number of items is too\n  // large and requires virtualization. Otherwise, it is rendered more compactly.\n  // We do not need this check for the right-side legend because it is always\n  // a virtualized list.\n  const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;\n\n  const commonLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    onLegendItemClick,\n    onItemMouseOver,\n    onItemMouseOut,\n  };\n\n  let legendContent: ReactNode;\n  if (mode === 'table') {\n    legendContent = (\n      <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} {...tableProps} />\n    );\n  } else if (options.position === 'right' || needsVirtualization) {\n    legendContent = <ListLegend {...commonLegendProps} width={width} onLegendItemClick={onLegendItemClick} />;\n  } else {\n    legendContent = <CompactLegend {...commonLegendProps} onLegendItemClick={onLegendItemClick} />;\n  }\n\n  if (options.position === 'right') {\n    return (\n      <Box\n        style={{\n          width: width,\n          height: height,\n        }}\n        sx={{\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          backgroundColor: (theme) => `${theme.palette.background.default}`,\n        }}\n      >\n        {legendContent}\n      </Box>\n    );\n  }\n\n  // Position bottom\n  return (\n    <Box\n      style={{\n        width: width,\n        height: height,\n      }}\n      sx={{\n        position: 'absolute',\n        bottom: 0,\n        backgroundColor: (theme) => `${theme.palette.background.default}`,\n      }}\n    >\n      {legendContent}\n    </Box>\n  );\n}\n"],"names":["Box","produce","getLegendMode","ListLegend","CompactLegend","TableLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","tableProps","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","mode","needsVirtualization","length","commonLegendProps","items","legendContent","position","style","sx","top","right","backgroundColor","theme","palette","background","default","bottom"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SAASC,aAAa,QAAQ,WAAW;AACzC,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,QAA0B,gBAAgB;AAuC9D,4EAA4E;AAC5E,6EAA6E;AAC7E,mFAAmF;AACnF,6EAA6E;AAC7E,wDAAwD;AACxD,MAAMC,4BAA4B;AAElC,OAAO,SAASC,OAAO,EACrBC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,IAAI,EACJC,aAAa,EACbC,qBAAqB,EACrBC,eAAe,EACfC,cAAc,EACdC,UAAU,EACE;IACZ,MAAMC,oBAAoB,CAACC,GAA8CC;QACvE,MAAMC,kBAAkBF,EAAEG,OAAO,IAAIH,EAAEI,QAAQ;QAE/C,MAAMC,cAActB,QAAQW,eAAe,CAACY;YAC1C,IAAIA,UAAU,OAAO;gBACnB,OAAO;oBACL,CAACL,SAAS,EAAE;gBACd;YACF;YAEA,MAAMM,aAAa,CAAC,CAACD,KAAK,CAACL,SAAS;YAEpC,sDAAsD;YACtD,IAAIC,iBAAiB;gBACnB,IAAIK,YAAY;oBACd,6DAA6D;oBAC7D,OAAOD,KAAK,CAACL,SAAS;gBACxB,OAAO;oBACL,+CAA+C;oBAC/CK,KAAK,CAACL,SAAS,GAAG;gBACpB;gBACA,OAAOK;YACT;YAEA,IAAIC,YAAY;gBACd,+DAA+D;gBAC/D,aAAa;gBACb,OAAO;YACT;YAEA,uBAAuB;YACvB,OAAO;gBAAE,CAACN,SAAS,EAAE;YAAK;QAC5B;QACAN,sBAAsBU;IACxB;IAEA,MAAMG,OAAOxB,cAAcQ,QAAQgB,IAAI;IAEvC,2EAA2E;IAC3E,+EAA+E;IAC/E,2EAA2E;IAC3E,sBAAsB;IACtB,MAAMC,sBAAsBhB,KAAKiB,MAAM,IAAItB;IAE3C,MAAMuB,oBAAoB;QACxBpB;QACAqB,OAAOnB;QACPC;QACAK;QACAH;QACAC;IACF;IAEA,IAAIgB;IACJ,IAAIL,SAAS,SAAS;QACpBK,8BACE,KAAC1B;YAAa,GAAGwB,iBAAiB;YAAEhB,uBAAuBA;YAAuBL,OAAOA;YAAQ,GAAGQ,UAAU;;IAElH,OAAO,IAAIN,QAAQsB,QAAQ,KAAK,WAAWL,qBAAqB;QAC9DI,8BAAgB,KAAC5B;YAAY,GAAG0B,iBAAiB;YAAErB,OAAOA;YAAOS,mBAAmBA;;IACtF,OAAO;QACLc,8BAAgB,KAAC3B;YAAe,GAAGyB,iBAAiB;YAAEZ,mBAAmBA;;IAC3E;IAEA,IAAIP,QAAQsB,QAAQ,KAAK,SAAS;QAChC,qBACE,KAAChC;YACCiC,OAAO;gBACLzB,OAAOA;gBACPC,QAAQA;YACV;YACAyB,IAAI;gBACFF,UAAU;gBACVG,KAAK;gBACLC,OAAO;gBACPC,iBAAiB,CAACC,QAAU,GAAGA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO,EAAE;YACnE;sBAECV;;IAGP;IAEA,kBAAkB;IAClB,qBACE,KAAC/B;QACCiC,OAAO;YACLzB,OAAOA;YACPC,QAAQA;QACV;QACAyB,IAAI;YACFF,UAAU;YACVU,QAAQ;YACRL,iBAAiB,CAACC,QAAU,GAAGA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO,EAAE;QACnE;kBAECV;;AAGP"}
+{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 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 } from '@mui/material';\nimport { produce } from 'immer';\nimport { ReactElement, ReactNode } from 'react';\n\nimport { getLegendMode } from '../model';\nimport { CompactLegend } from './CompactLegend';\nimport { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';\nimport { ListLegend } from './ListLegend';\nimport { ListLegendItemProps } from './ListLegendItem';\nimport { TableLegend, TableLegendProps } from './TableLegend';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendComponentOptions;\n\n  /**\n   * State of selected items in the legend.\n   *\n   * Selected legend item state is a controlled value that should be managed using a\n   * combination of this prop and `onSelectedChange`.\n   */\n  selectedItems: SelectedLegendItemState;\n\n  /**\n   * Callback fired when the selected items in the legend changes.\n   */\n  onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;\n\n  /**\n   * Callback fired when the mouse is moved over a legend item.\n   */\n  onItemMouseOver?: ListLegendItemProps['onMouseOver'];\n\n  /**\n   * Callback fired when the mouse is moved out of a legend item.\n   */\n  onItemMouseOut?: ListLegendItemProps['onMouseOut'];\n\n  /**\n   * Props specific to legend with `mode` set to `table`.\n   */\n  tableProps?: Pick<TableLegendProps, 'columns' | 'onSortingChange' | 'sorting'>;\n}\n\n// When the number of items to display is above this number, it is likely to\n// cause performance issues in the browser. The legend will be displayed in a\n// format (list) that allows for virtualization to minimize the performance impact.\n// Set this number based on testing, but it may need to be tuned a bit on the\n// future as people test this out on different machines.\nconst NEED_VIRTUALIZATION_LIMIT = 500;\n\nexport function Legend({\n  width,\n  height,\n  options,\n  data,\n  selectedItems,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  tableProps,\n}: LegendProps): ReactElement {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string): void => {\n    const isModifiedClick = e.metaKey || e.shiftKey;\n\n    const newSelected = produce(selectedItems, (draft) => {\n      if (draft === 'ALL') {\n        return {\n          [seriesId]: true,\n        };\n      }\n\n      const isSelected = !!draft[seriesId];\n\n      // Clicks with modifier key can select multiple items.\n      if (isModifiedClick) {\n        if (isSelected) {\n          // Modified click on already selected item. Remove that item.\n          delete draft[seriesId];\n        } else {\n          // Modified click on not-selected item. Add it.\n          draft[seriesId] = true;\n        }\n        return draft;\n      }\n\n      if (isSelected) {\n        // Clicked item was already selected. Unselect it and return to\n        // ALL state.\n        return 'ALL' as const;\n      }\n\n      // Select clicked item.\n      return { [seriesId]: true };\n    });\n    onSelectedItemsChange(newSelected);\n  };\n\n  const mode = getLegendMode(options.mode);\n\n  // The bottom legend is displayed as a list when the number of items is too\n  // large and requires virtualization. Otherwise, it is rendered more compactly.\n  // We do not need this check for the right-side legend because it is always\n  // a virtualized list.\n  const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;\n\n  const commonLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    onLegendItemClick,\n    onItemMouseOver,\n    onItemMouseOut,\n  };\n\n  let legendContent: ReactNode;\n  if (mode === 'table') {\n    legendContent = (\n      <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} {...tableProps} />\n    );\n  } else if (options.position === 'right' || needsVirtualization) {\n    legendContent = <ListLegend {...commonLegendProps} width={width} onLegendItemClick={onLegendItemClick} />;\n  } else {\n    legendContent = <CompactLegend {...commonLegendProps} onLegendItemClick={onLegendItemClick} />;\n  }\n\n  if (options.position === 'right') {\n    return (\n      <Box\n        style={{\n          width: width,\n          height: height,\n        }}\n        sx={{\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          backgroundColor: (theme) => `${theme.palette.background.default}`,\n        }}\n      >\n        {legendContent}\n      </Box>\n    );\n  }\n\n  // Position bottom\n  return (\n    <Box\n      style={{\n        width: width,\n        height: height,\n      }}\n      sx={{\n        position: 'absolute',\n        bottom: 0,\n        backgroundColor: (theme) => `${theme.palette.background.default}`,\n      }}\n    >\n      {legendContent}\n    </Box>\n  );\n}\n"],"names":["Box","produce","getLegendMode","CompactLegend","ListLegend","TableLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","tableProps","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","mode","needsVirtualization","length","commonLegendProps","items","legendContent","position","style","sx","top","right","backgroundColor","theme","palette","background","default","bottom"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,OAAO,QAAQ,QAAQ;AAGhC,SAASC,aAAa,QAAQ,WAAW;AACzC,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,UAAU,QAAQ,eAAe;AAE1C,SAASC,WAAW,QAA0B,gBAAgB;AAqC9D,4EAA4E;AAC5E,6EAA6E;AAC7E,mFAAmF;AACnF,6EAA6E;AAC7E,wDAAwD;AACxD,MAAMC,4BAA4B;AAElC,OAAO,SAASC,OAAO,EACrBC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,IAAI,EACJC,aAAa,EACbC,qBAAqB,EACrBC,eAAe,EACfC,cAAc,EACdC,UAAU,EACE;IACZ,MAAMC,oBAAoB,CAACC,GAA8CC;QACvE,MAAMC,kBAAkBF,EAAEG,OAAO,IAAIH,EAAEI,QAAQ;QAE/C,MAAMC,cAActB,QAAQW,eAAe,CAACY;YAC1C,IAAIA,UAAU,OAAO;gBACnB,OAAO;oBACL,CAACL,SAAS,EAAE;gBACd;YACF;YAEA,MAAMM,aAAa,CAAC,CAACD,KAAK,CAACL,SAAS;YAEpC,sDAAsD;YACtD,IAAIC,iBAAiB;gBACnB,IAAIK,YAAY;oBACd,6DAA6D;oBAC7D,OAAOD,KAAK,CAACL,SAAS;gBACxB,OAAO;oBACL,+CAA+C;oBAC/CK,KAAK,CAACL,SAAS,GAAG;gBACpB;gBACA,OAAOK;YACT;YAEA,IAAIC,YAAY;gBACd,+DAA+D;gBAC/D,aAAa;gBACb,OAAO;YACT;YAEA,uBAAuB;YACvB,OAAO;gBAAE,CAACN,SAAS,EAAE;YAAK;QAC5B;QACAN,sBAAsBU;IACxB;IAEA,MAAMG,OAAOxB,cAAcQ,QAAQgB,IAAI;IAEvC,2EAA2E;IAC3E,+EAA+E;IAC/E,2EAA2E;IAC3E,sBAAsB;IACtB,MAAMC,sBAAsBhB,KAAKiB,MAAM,IAAItB;IAE3C,MAAMuB,oBAAoB;QACxBpB;QACAqB,OAAOnB;QACPC;QACAK;QACAH;QACAC;IACF;IAEA,IAAIgB;IACJ,IAAIL,SAAS,SAAS;QACpBK,8BACE,KAAC1B;YAAa,GAAGwB,iBAAiB;YAAEhB,uBAAuBA;YAAuBL,OAAOA;YAAQ,GAAGQ,UAAU;;IAElH,OAAO,IAAIN,QAAQsB,QAAQ,KAAK,WAAWL,qBAAqB;QAC9DI,8BAAgB,KAAC3B;YAAY,GAAGyB,iBAAiB;YAAErB,OAAOA;YAAOS,mBAAmBA;;IACtF,OAAO;QACLc,8BAAgB,KAAC5B;YAAe,GAAG0B,iBAAiB;YAAEZ,mBAAmBA;;IAC3E;IAEA,IAAIP,QAAQsB,QAAQ,KAAK,SAAS;QAChC,qBACE,KAAChC;YACCiC,OAAO;gBACLzB,OAAOA;gBACPC,QAAQA;YACV;YACAyB,IAAI;gBACFF,UAAU;gBACVG,KAAK;gBACLC,OAAO;gBACPC,iBAAiB,CAACC,QAAU,GAAGA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO,EAAE;YACnE;sBAECV;;IAGP;IAEA,kBAAkB;IAClB,qBACE,KAAC/B;QACCiC,OAAO;YACLzB,OAAOA;YACPC,QAAQA;QACV;QACAyB,IAAI;YACFF,UAAU;YACVU,QAAQ;YACRL,iBAAiB,CAACC,QAAU,GAAGA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO,EAAE;QACnE;kBAECV;;AAGP"}

package/dist/Legend/LegendColorBadge.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxProps } from '@mui/material';
 export interface LegendColorBadgeProps extends BoxProps<'div'> {
     color: string;

package/dist/Legend/LegendColorBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LegendColorBadge.d.ts","sourceRoot":"","sources":["../../src/Legend/LegendColorBadge.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG9C,MAAM,WAAW,qBAAsB,SAAQ,QAAQ,CAAC,KAAK,CAAC;IAC5D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,6DAmB3B,CAAC"}
+{"version":3,"file":"LegendColorBadge.d.ts","sourceRoot":"","sources":["../../src/Legend/LegendColorBadge.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAK9C,MAAM,WAAW,qBAAsB,SAAQ,QAAQ,CAAC,KAAK,CAAC;IAC5D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,6DAmB3B,CAAC"}

package/dist/Legend/LegendColorBadge.js

@@ -11,8 +11,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { memo } from 'react';
 import { Box } from '@mui/material';
+import { memo } from 'react';
 import { combineSx } from '../utils';
 export const LegendColorBadge = /*#__PURE__*/ memo(function LegendColorBadge({ color, sx, ...others }) {
     return /*#__PURE__*/ _jsx(Box, {

package/dist/Legend/LegendColorBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/LegendColorBadge.tsx"],"sourcesContent":["// Copyright 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, ReactElement } from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { combineSx } from '../utils';\n\nexport interface LegendColorBadgeProps extends BoxProps<'div'> {\n  color: string;\n}\n\nexport const LegendColorBadge = memo(function LegendColorBadge({\n  color,\n  sx,\n  ...others\n}: LegendColorBadgeProps): ReactElement {\n  return (\n    <Box\n      {...others}\n      sx={combineSx(\n        {\n          height: 4,\n          width: 16,\n          margin: (theme) => theme.spacing(0.5),\n        },\n        sx\n      )}\n      style={{ backgroundColor: color }}\n    />\n  );\n});\n"],"names":["memo","Box","combineSx","LegendColorBadge","color","sx","others","height","width","margin","theme","spacing","style","backgroundColor"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,IAAI,QAAsB,QAAQ;AAC3C,SAASC,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,SAAS,QAAQ,WAAW;AAMrC,OAAO,MAAMC,iCAAmBH,KAAK,SAASG,iBAAiB,EAC7DC,KAAK,EACLC,EAAE,EACF,GAAGC,QACmB;IACtB,qBACE,KAACL;QACE,GAAGK,MAAM;QACVD,IAAIH,UACF;YACEK,QAAQ;YACRC,OAAO;YACPC,QAAQ,CAACC,QAAUA,MAAMC,OAAO,CAAC;QACnC,GACAN;QAEFO,OAAO;YAAEC,iBAAiBT;QAAM;;AAGtC,GAAG"}
+{"version":3,"sources":["../../src/Legend/LegendColorBadge.tsx"],"sourcesContent":["// Copyright 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, BoxProps } from '@mui/material';\nimport { memo, ReactElement } from 'react';\n\nimport { combineSx } from '../utils';\n\nexport interface LegendColorBadgeProps extends BoxProps<'div'> {\n  color: string;\n}\n\nexport const LegendColorBadge = memo(function LegendColorBadge({\n  color,\n  sx,\n  ...others\n}: LegendColorBadgeProps): ReactElement {\n  return (\n    <Box\n      {...others}\n      sx={combineSx(\n        {\n          height: 4,\n          width: 16,\n          margin: (theme) => theme.spacing(0.5),\n        },\n        sx,\n      )}\n      style={{ backgroundColor: color }}\n    />\n  );\n});\n"],"names":["Box","memo","combineSx","LegendColorBadge","color","sx","others","height","width","margin","theme","spacing","style","backgroundColor"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,IAAI,QAAsB,QAAQ;AAE3C,SAASC,SAAS,QAAQ,WAAW;AAMrC,OAAO,MAAMC,iCAAmBF,KAAK,SAASE,iBAAiB,EAC7DC,KAAK,EACLC,EAAE,EACF,GAAGC,QACmB;IACtB,qBACE,KAACN;QACE,GAAGM,MAAM;QACVD,IAAIH,UACF;YACEK,QAAQ;YACRC,OAAO;YACPC,QAAQ,CAACC,QAAUA,MAAMC,OAAO,CAAC;QACnC,GACAN;QAEFO,OAAO;YAAEC,iBAAiBT;QAAM;;AAGtC,GAAG"}

package/dist/Legend/ListLegend.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
-import { ListLegendItemProps } from './ListLegendItem';
 import { LegendItem, SelectedLegendItemState } from './legend-model';
+import { ListLegendItemProps } from './ListLegendItem';
 export interface ListLegendProps {
     items: LegendItem[];
     height: number;

package/dist/Legend/ListLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AAEnG,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAClD,eAAe,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,cAAc,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,eAAe,GAAG,YAAY,CA6BhC"}
+{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,gBAAgB,CAAC;AACnG,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAClD,eAAe,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACpD,cAAc,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,eAAe,GAAG,YAAY,CAgChC"}

package/dist/Legend/ListLegend.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,9 +10,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Virtuoso } from 'react-virtuoso';
-import { ListLegendItem } from './ListLegendItem';
 import { isLegendItemVisuallySelected } from './legend-model';
+import { ListLegendItem } from './ListLegendItem';
 /**
  * ListLegend is used when legend.position is 'right' since legend items are
  * stacked. It is also used for `bottom` positioned legends when there are a
@@ -22,7 +22,8 @@ import { isLegendItemVisuallySelected } from './legend-model';
  */ export function ListLegend({ items, height, width, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
-    return /*#__PURE__*/ _jsx(Virtuoso, {
+    // Virtuoso requires its scroll container to remain a div, so native ul semantics cannot be used here.
+    /* oxlint-disable jsx-a11y/prefer-tag-over-role */ return /*#__PURE__*/ _jsx(Virtuoso, {
         style: {
             height,
             width
@@ -46,6 +47,6 @@ import { isLegendItemVisuallySelected } from './legend-model';
         },
         role: "list"
     });
-}
+/* oxlint-enable jsx-a11y/prefer-tag-over-role */ }
 
 //# sourceMappingURL=ListLegend.js.map

package/dist/Legend/ListLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright 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 { Virtuoso } from 'react-virtuoso';\nimport { ReactElement } from 'react';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({\n  items,\n  height,\n  width,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: ListLegendProps): ReactElement {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            index={index}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            onMouseOver={onItemMouseOver}\n            onMouseOut={onItemMouseOut}\n            sx={{\n              width: '100%',\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n}\n"],"names":["Virtuoso","ListLegendItem","isLegendItemVisuallySelected","ListLegend","items","height","width","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","onMouseOver","onMouseOut","sx","wordBreak","overflow","id","role"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,cAAc,QAA6B,mBAAmB;AACvE,SAA8CC,4BAA4B,QAAQ,iBAAiB;AAYnG;;;;;CAKC,GACD,OAAO,SAASC,WAAW,EACzBC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACE;IAChB,6DAA6D;IAC7D,MAAMC,iBAAiBP,MAAMQ,MAAM,GAAG;IACtC,qBACE,KAACZ;QACCa,OAAO;YAAER;YAAQC;QAAM;QACvBQ,MAAMV;QACNW,aAAa,CAACC,OAAOC;YACnB,qBACE,KAAChB;gBAECgB,MAAMA;gBACND,OAAOA;gBACPE,eAAeP;gBACfQ,oBAAoBjB,6BAA6Be,MAAMV;gBACvDa,SAASZ;gBACTa,aAAaZ;gBACba,YAAYZ;gBACZa,IAAI;oBACFjB,OAAO;oBACPkB,WAAW;oBACXC,UAAU;gBACZ;eAZKR,KAAKS,EAAE;QAelB;QACAC,MAAK;;AAGX"}
+{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright 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 { Virtuoso } from 'react-virtuoso';\n\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from './legend-model';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({\n  items,\n  height,\n  width,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: ListLegendProps): ReactElement {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  // Virtuoso requires its scroll container to remain a div, so native ul semantics cannot be used here.\n  /* oxlint-disable jsx-a11y/prefer-tag-over-role */\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            index={index}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            onMouseOver={onItemMouseOver}\n            onMouseOut={onItemMouseOut}\n            sx={{\n              width: '100%',\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n  /* oxlint-enable jsx-a11y/prefer-tag-over-role */\n}\n"],"names":["Virtuoso","isLegendItemVisuallySelected","ListLegendItem","ListLegend","items","height","width","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","onMouseOver","onMouseOut","sx","wordBreak","overflow","id","role"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,QAAQ,QAAQ,iBAAiB;AAE1C,SAA8CC,4BAA4B,QAAQ,iBAAiB;AACnG,SAASC,cAAc,QAA6B,mBAAmB;AAYvE;;;;;CAKC,GACD,OAAO,SAASC,WAAW,EACzBC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACE;IAChB,6DAA6D;IAC7D,MAAMC,iBAAiBP,MAAMQ,MAAM,GAAG;IACtC,sGAAsG;IACtG,gDAAgD,GAChD,qBACE,KAACZ;QACCa,OAAO;YAAER;YAAQC;QAAM;QACvBQ,MAAMV;QACNW,aAAa,CAACC,OAAOC;YACnB,qBACE,KAACf;gBAECe,MAAMA;gBACND,OAAOA;gBACPE,eAAeP;gBACfQ,oBAAoBlB,6BAA6BgB,MAAMV;gBACvDa,SAASZ;gBACTa,aAAaZ;gBACba,YAAYZ;gBACZa,IAAI;oBACFjB,OAAO;oBACPkB,WAAW;oBACXC,UAAU;gBACZ;eAZKR,KAAKS,EAAE;QAelB;QACAC,MAAK;;AAGT,+CAA+C,GACjD"}

package/dist/Legend/ListLegendItem.d.ts

@@ -1,5 +1,5 @@
-import { MouseEvent } from 'react';
 import { ListItemProps } from '@mui/material';
+import { MouseEvent } from 'react';
 import { LegendItem } from './legend-model';
 export type LegendItemEventOpts = {
     /**

package/dist/Legend/ListLegendItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAoB,UAAU,EAA6C,MAAM,OAAO,CAAC;AAChG,OAAO,EAAqB,aAAa,EAAkB,MAAM,eAAe,CAAC;AAGjF,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,YAAY,CAAC;IAC/G,IAAI,EAAE,UAAU,CAAC;IAEjB,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjE,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEhE;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAwDD,eAAO,MAAM,cAAc,kKAA2B,CAAC"}
+{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,aAAa,EAAkB,MAAM,eAAe,CAAC;AACjF,OAAO,EAAoB,UAAU,EAA6C,MAAM,OAAO,CAAC;AAGhG,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,YAAY,CAAC;IAC/G,IAAI,EAAE,UAAU,CAAC;IAEjB,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACjE,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEhE;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA2DD,eAAO,MAAM,cAAc,kKAA2B,CAAC"}