@perses-dev/components 0.0.0-snapshot-saving-defaults-refinements-1b25cec → 0.0.0-snapshot-time-chart-rewrite-4667058

package/dist/GaugeChart/GaugeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GaugeChart/GaugeChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useDeepMemo } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\nexport interface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\n  unit: UnitOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n  const { width, height, data, unit, axisLine, max } = props;\n  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: PROGRESS_WIDTH,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n              width: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: data.value,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter: (value: number) => {\n              return formatValue(value, unit);\n            },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, chartsTheme, unit, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n        padding: `${chartsTheme.container.padding.default}px`,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number) {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = formatValue(value, unit);\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","unit","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}
+{"version":3,"sources":["../../src/GaugeChart/GaugeChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { formatValue, useDeepMemo, UnitOptions } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\nexport interface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\n  unit: UnitOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n  const { width, height, data, unit, axisLine, max } = props;\n  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: PROGRESS_WIDTH,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n              width: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: data.value,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter:\n              data.value === null\n                ? // We use a different function when we *know* the value is null\n                  // at this level because the `formatter` function argument is `NaN`\n                  // when the value is `null`, making it difficult to differentiate\n                  // `null` from a true `NaN` case.\n                  () => 'null'\n                : (value: number) => {\n                    return formatValue(value, unit);\n                  },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, chartsTheme, unit, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n        padding: `${chartsTheme.container.padding.default}px`,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number | null, unit: UnitOptions, width: number, height: number) {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = typeof value === 'number' ? formatValue(value, unit) : `${value}`;\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["formatValue","useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","unit","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","name","label","echartsTheme","textStyle","overflow","sx","padding","container","default","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}

package/dist/Legend/CompactLegend.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
-import { LegendItem, SelectedLegendItemState } from '../model';
 import { ListLegendItemProps } from './ListLegendItem';
+import { LegendItem, SelectedLegendItemState } from './legend-model';
 export interface CompactLegendProps {
     height: number;
     items: LegendItem[];
     selectedItems: SelectedLegendItemState;
     onLegendItemClick: ListLegendItemProps['onClick'];
+    onItemMouseOver: ListLegendItemProps['onMouseOver'];
+    onItemMouseOut: ListLegendItemProps['onMouseOut'];
 }
 /**
  * CompactLegend is default and used when legend items need to show side by side
@@ -13,5 +15,5 @@ export interface CompactLegendProps {
  * number of items. The `ListLegend` is used for cases with large numbers of items
  * because it is virtualized.
  */
-export declare function CompactLegend({ height, items, selectedItems, onLegendItemClick }: CompactLegendProps): JSX.Element;
+export declare function CompactLegend({ height, items, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut, }: CompactLegendProps): JSX.Element;
 //# sourceMappingURL=CompactLegend.d.ts.map

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,UAAU,EAAE,uBAAuB,EAAgC,MAAM,UAAU,CAAC;AAC7F,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;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,eAkBpG"}
+{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":";AAcA,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,eAqBpB"}

package/dist/Legend/CompactLegend.js

@@ -12,14 +12,14 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { isLegendItemVisuallySelected } from '../model';
 import { ListLegendItem } from './ListLegendItem';
+import { isLegendItemVisuallySelected } from './legend-model';
 /**
  * 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
  * number of items. The `ListLegend` is used for cases with large numbers of items
  * because it is virtualized.
- */ export function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
+ */ export function CompactLegend({ height , items , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
     return /*#__PURE__*/ _jsx(Box, {
         component: "ul",
         sx: {
@@ -34,9 +34,12 @@ import { ListLegendItem } from './ListLegendItem';
             overflowY: 'scroll',
             margin: 0
         },
-        children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
+        children: items.map((item, index)=>/*#__PURE__*/ _jsx(ListLegendItem, {
                 item: item,
+                index: index,
                 isVisuallySelected: isLegendItemVisuallySelected(item, selectedItems),
+                onMouseOver: onItemMouseOver,
+                onMouseOut: onItemMouseOut,
                 onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',

package/dist/Legend/CompactLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/CompactLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from '../model';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\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({ height, items, selectedItems, onLegendItemClick }: CompactLegendProps) {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\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","component","sx","width","padding","overflowY","margin","map","item","isVisuallySelected","onClick","float","paddingRight","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AACpC,SAA8CC,4BAA4B,QAAQ,UAAU,CAAC;AAC7F,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AASvE;;;;;CAKC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,aAAa,CAAA,EAAEC,iBAAiB,CAAA,EAAsB,EAAE;IACrG,qBACE,KAACP,GAAG;QAACQ,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEN,MAAM;YAAEO,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGR,KAAK,CAACS,GAAG,CAAC,CAACC,IAAI,iBACd,KAACb,cAAc;gBAEba,IAAI,EAAEA,IAAI;gBACVC,kBAAkB,EAAEf,4BAA4B,CAACc,IAAI,EAAET,aAAa,CAAC;gBACrEW,OAAO,EAAEV,iBAAiB;gBAC1BE,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbQ,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eARIJ,IAAI,CAACK,EAAE,CASZ,AACH,CAAC;MACE,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/CompactLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\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) {\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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AACpC,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AACvE,SAA8CC,4BAA4B,QAAQ,gBAAgB,CAAC;AAWnG;;;;;CAKC,GACD,OAAO,SAASC,aAAa,CAAC,EAC5BC,MAAM,CAAA,EACNC,KAAK,CAAA,EACLC,aAAa,CAAA,EACbC,iBAAiB,CAAA,EACjBC,eAAe,CAAA,EACfC,cAAc,CAAA,EACK,EAAE;IACrB,qBACE,KAACT,GAAG;QAACU,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAER,MAAM;YAAES,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGV,KAAK,CAACW,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,iBACrB,KAACjB,cAAc;gBAEbgB,IAAI,EAAEA,IAAI;gBACVC,KAAK,EAAEA,KAAK;gBACZC,kBAAkB,EAAEjB,4BAA4B,CAACe,IAAI,EAAEX,aAAa,CAAC;gBACrEc,WAAW,EAAEZ,eAAe;gBAC5Ba,UAAU,EAAEZ,cAAc;gBAC1Ba,OAAO,EAAEf,iBAAiB;gBAC1BI,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbW,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eAXIP,IAAI,CAACQ,EAAE,CAYZ,AACH,CAAC;MACE,CACN;AACJ,CAAC"}

package/dist/Legend/Legend.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
-import { LegendOptions, LegendItem, SelectedLegendItemState } from '../model';
+import { TableLegendProps } from './TableLegend';
+import { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';
+import { ListLegendItemProps } from './ListLegendItem';
 export interface LegendProps {
     width: number;
     height: number;
     data: LegendItem[];
-    options: LegendOptions;
+    options: LegendComponentOptions;
     /**
      * State of selected items in the legend.
      *
@@ -16,6 +18,18 @@ export interface LegendProps {
      * Callback fired when the selected items in the legend changes.
      */
     onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;
+    /**
+     * Callback fired when the mouse is moved over a legend item.
+     */
+    onItemMouseOver?: ListLegendItemProps['onMouseOver'];
+    /**
+     * Callback fired when the mouse is moved out of a legend item.
+     */
+    onItemMouseOut?: ListLegendItemProps['onMouseOut'];
+    /**
+     * Props specific to legend with `mode` set to `table`.
+     */
+    tableProps?: Pick<TableLegendProps, 'columns' | 'onSortingChange' | 'sorting'>;
 }
-export declare function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange }: LegendProps): JSX.Element;
+export declare function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, tableProps, }: LegendProps): JSX.Element;
 //# sourceMappingURL=Legend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,uBAAuB,EAAiB,MAAM,UAAU,CAAC;AAK7F,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;;OAKG;IACH,aAAa,EAAE,uBAAuB,CAAC;IAEvC;;OAEG;IACH,qBAAqB,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,IAAI,CAAC;CACvE;AASD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,qBAAqB,EAAE,EAAE,WAAW,eA0FzG"}
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAmBA,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,eA8Fb"}

package/dist/Legend/Legend.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { produce } from 'immer';
-import { getLegendMode } from '../model';
+import { getLegendMode } from '@perses-dev/core';
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
 import { TableLegend } from './TableLegend';
@@ -23,7 +23,7 @@ import { TableLegend } from './TableLegend';
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-export function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange  }) {
+export function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , tableProps  }) {
     const onLegendItemClick = (e, seriesId)=>{
         const isModifiedClick = e.metaKey || e.shiftKey;
         const newSelected = produce(selectedItems, (draft)=>{
@@ -66,14 +66,17 @@ export function Legend({ width , height , options , data , selectedItems , onSel
         height,
         items: data,
         selectedItems,
-        onLegendItemClick
+        onLegendItemClick,
+        onItemMouseOver,
+        onItemMouseOut
     };
     let legendContent;
     if (mode === 'Table') {
         legendContent = /*#__PURE__*/ _jsx(TableLegend, {
             ...commonLegendProps,
             onSelectedItemsChange: onSelectedItemsChange,
-            width: width
+            width: width,
+            ...tableProps
         });
     } else if (options.position === 'Right' || needsVirtualization) {
         legendContent = /*#__PURE__*/ _jsx(ListLegend, {

package/dist/Legend/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { produce } from 'immer';\nimport { ReactNode } from 'react';\nimport { LegendOptions, LegendItem, SelectedLegendItemState, getLegendMode } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\nimport { TableLegend } from './TableLegend';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\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// 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({ width, height, options, data, selectedItems, onSelectedItemsChange }: LegendProps) {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => {\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  };\n\n  let legendContent: ReactNode;\n  if (mode === 'Table') {\n    legendContent = <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} />;\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        sx={{\n          width: width,\n          height: height,\n          position: 'absolute',\n          top: 0,\n          right: 0,\n        }}\n      >\n        {legendContent}\n      </Box>\n    );\n  }\n\n  // Position bottom\n  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\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","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","mode","needsVirtualization","length","commonLegendProps","items","legendContent","position","sx","top","right","bottom"],"mappings":"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"}
+{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { produce } from 'immer';\nimport { ReactNode } from 'react';\nimport { getLegendMode } from '@perses-dev/core';\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) {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => {\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        sx={{\n          width: width,\n          height: height,\n          position: 'absolute',\n          top: 0,\n          right: 0,\n        }}\n      >\n        {legendContent}\n      </Box>\n    );\n  }\n\n  // Position bottom\n  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\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","sx","top","right","bottom"],"mappings":"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"}

package/dist/Legend/ListLegend.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="react" />
-import { LegendItem, SelectedLegendItemState } from '../model';
 import { ListLegendItemProps } from './ListLegendItem';
+import { LegendItem, SelectedLegendItemState } from './legend-model';
 export interface ListLegendProps {
     items: LegendItem[];
     height: number;
     width: number;
     selectedItems: SelectedLegendItemState;
     onLegendItemClick: ListLegendItemProps['onClick'];
+    onItemMouseOver: ListLegendItemProps['onMouseOver'];
+    onItemMouseOut: ListLegendItemProps['onMouseOut'];
 }
 /**
  * ListLegend is used when legend.position is 'right' since legend items are
@@ -14,5 +16,5 @@ export interface ListLegendProps {
  * large number of items because it is virtualized and easier to visually scan
  * large numbers of items when there is a single item per row.
  */
-export declare function ListLegend({ items, height, width, selectedItems, onLegendItemClick }: ListLegendProps): JSX.Element;
+export declare function ListLegend({ items, height, width, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut, }: ListLegendProps): JSX.Element;
 //# sourceMappingURL=ListLegend.d.ts.map

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,UAAU,EAAE,uBAAuB,EAAgC,MAAM,UAAU,CAAC;AAC7F,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;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,eAAe,eA6BrG"}
+{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAcA,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,eA8BjB"}

package/dist/Legend/ListLegend.js

@@ -12,14 +12,14 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Virtuoso } from 'react-virtuoso';
-import { isLegendItemVisuallySelected } from '../model';
 import { ListLegendItem } from './ListLegendItem';
+import { isLegendItemVisuallySelected } from './legend-model';
 /**
  * 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
  * large number of items because it is virtualized and easier to visually scan
  * large numbers of items when there is a single item per row.
- */ export function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
+ */ 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, {
@@ -31,13 +31,14 @@ import { ListLegendItem } from './ListLegendItem';
         itemContent: (index, item)=>{
             return /*#__PURE__*/ _jsx(ListLegendItem, {
                 item: item,
+                index: index,
                 truncateLabel: truncateLabels,
                 isVisuallySelected: isLegendItemVisuallySelected(item, selectedItems),
                 onClick: onLegendItemClick,
+                onMouseOver: onItemMouseOver,
+                onMouseOut: onItemMouseOut,
                 sx: {
-                    // Having an explicit width is important for the ellipsizing to
-                    // work correctly. Subtract padding to simulate padding.
-                    width: width,
+                    width: '100%',
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }

package/dist/Legend/ListLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Virtuoso } from 'react-virtuoso';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from '../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}\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({ items, height, width, selectedItems, onLegendItemClick }: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n\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            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            sx={{\n              // Having an explicit width is important for the ellipsizing to\n              // work correctly. Subtract padding to simulate padding.\n              width: width,\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n}\n"],"names":["Virtuoso","isLegendItemVisuallySelected","ListLegendItem","ListLegend","items","height","width","selectedItems","onLegendItemClick","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","sx","wordBreak","overflow","id","role"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,gBAAgB,CAAC;AAC1C,SAA8CC,4BAA4B,QAAQ,UAAU,CAAC;AAC7F,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AAUvE;;;;;CAKC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,aAAa,CAAA,EAAEC,iBAAiB,CAAA,EAAmB,EAAE;IACtG,6DAA6D;IAC7D,MAAMC,cAAc,GAAGL,KAAK,CAACM,MAAM,GAAG,CAAC,AAAC;IAExC,qBACE,KAACV,QAAQ;QACPW,KAAK,EAAE;YAAEN,MAAM;YAAEC,KAAK;SAAE;QACxBM,IAAI,EAAER,KAAK;QACXS,WAAW,EAAE,CAACC,KAAK,EAAEC,IAAI,GAAK;YAC5B,qBACE,KAACb,cAAc;gBAEba,IAAI,EAAEA,IAAI;gBACVC,aAAa,EAAEP,cAAc;gBAC7BQ,kBAAkB,EAAEhB,4BAA4B,CAACc,IAAI,EAAER,aAAa,CAAC;gBACrEW,OAAO,EAAEV,iBAAiB;gBAC1BW,EAAE,EAAE;oBACF,+DAA+D;oBAC/D,wDAAwD;oBACxDb,KAAK,EAAEA,KAAK;oBACZc,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAE,QAAQ;iBACnB;eAXIN,IAAI,CAACO,EAAE,CAYZ,CACF;QACJ,CAAC;QACDC,IAAI,EAAC,MAAM;MACX,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Virtuoso } from 'react-virtuoso';\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) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n\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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,gBAAgB,CAAC;AAC1C,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AACvE,SAA8CC,4BAA4B,QAAQ,gBAAgB,CAAC;AAYnG;;;;;CAKC,GACD,OAAO,SAASC,UAAU,CAAC,EACzBC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNC,KAAK,CAAA,EACLC,aAAa,CAAA,EACbC,iBAAiB,CAAA,EACjBC,eAAe,CAAA,EACfC,cAAc,CAAA,EACE,EAAE;IAClB,6DAA6D;IAC7D,MAAMC,cAAc,GAAGP,KAAK,CAACQ,MAAM,GAAG,CAAC,AAAC;IAExC,qBACE,KAACZ,QAAQ;QACPa,KAAK,EAAE;YAAER,MAAM;YAAEC,KAAK;SAAE;QACxBQ,IAAI,EAAEV,KAAK;QACXW,WAAW,EAAE,CAACC,KAAK,EAAEC,IAAI,GAAK;YAC5B,qBACE,KAAChB,cAAc;gBAEbgB,IAAI,EAAEA,IAAI;gBACVD,KAAK,EAAEA,KAAK;gBACZE,aAAa,EAAEP,cAAc;gBAC7BQ,kBAAkB,EAAEjB,4BAA4B,CAACe,IAAI,EAAEV,aAAa,CAAC;gBACrEa,OAAO,EAAEZ,iBAAiB;gBAC1Ba,WAAW,EAAEZ,eAAe;gBAC5Ba,UAAU,EAAEZ,cAAc;gBAC1Ba,EAAE,EAAE;oBACFjB,KAAK,EAAE,MAAM;oBACbkB,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAE,QAAQ;iBACnB;eAZIR,IAAI,CAACS,EAAE,CAaZ,CACF;QACJ,CAAC;QACDC,IAAI,EAAC,MAAM;MACX,CACF;AACJ,CAAC"}

package/dist/Legend/ListLegendItem.d.ts

@@ -1,14 +1,27 @@
 import React from 'react';
 import { ListItemProps } from '@mui/material';
-import { LegendItem } from '../model';
-export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick'> {
+import { LegendItem } from './legend-model';
+export declare type LegendItemEventOpts = {
+    /**
+     * Unique identifier for the legend item.
+     */
+    id: string;
+    /**
+     * Index of the row in the original data.
+     */
+    index: number;
+};
+export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick' | 'onMouseOver' | 'onMouseOut'> {
     item: LegendItem;
+    index: number;
     /**
      * When true, the item is rendered differently to visually communicate it is
      * selected.
      */
     isVisuallySelected?: boolean;
     onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => void;
+    onMouseOver?: (e: React.MouseEvent, opts: LegendItemEventOpts) => void;
+    onMouseOut?: (e: React.MouseEvent, opts: LegendItemEventOpts) => void;
     /**
      * When `true`, will keep labels to a single line with overflow ellipsized. The
      * full content will be shown on hover.
@@ -17,5 +30,5 @@ export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick
      */
     truncateLabel?: boolean;
 }
-export declare const ListLegendItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ListLegendItemProps, "classes" | "className" | "style" | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "alignItems" | "disabled" | "selected" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "dense" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "disablePadding" | "secondaryAction" | "item" | "isVisuallySelected" | "truncateLabel"> & React.RefAttributes<HTMLDivElement>>>;
+export declare const ListLegendItem: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<ListLegendItemProps, "classes" | "className" | "style" | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "alignItems" | "disabled" | "selected" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "dense" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "disablePadding" | "secondaryAction" | "item" | "index" | "isVisuallySelected" | "truncateLabel"> & React.RefAttributes<HTMLDivElement>>>;
 //# sourceMappingURL=ListLegendItem.d.ts.map

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,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAChF,IAAI,EAAE,UAAU,CAAC;IAEjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAElF;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAwDD,eAAO,MAAM,cAAc,o6JAAiC,CAAC"}
+{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,oBAAY,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,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAElF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACvE,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEtE;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA0DD,eAAO,MAAM,cAAc,86JAAiC,CAAC"}

package/dist/Legend/ListLegendItem.js

@@ -16,14 +16,14 @@ import React, { forwardRef, useState } from 'react';
 import { Box, ListItemText, ListItem } from '@mui/material';
 import { combineSx } from '../utils';
 import { LegendColorBadge } from './LegendColorBadge';
-const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , onMouseOver , onMouseOut , index , ...others }, ref) {
     const [noWrap, setNoWrap] = useState(truncateLabel);
-    function handleMouseOver() {
+    function handleTextMouseOver() {
         if (truncateLabel) {
             setNoWrap(false);
         }
     }
-    function handleMouseOut() {
+    function handleTextMouseOut() {
         if (truncateLabel) {
             setNoWrap(true);
         }
@@ -44,6 +44,18 @@ const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ it
         dense: true,
         key: item.id,
         onClick: handleClick,
+        onMouseOver: (e)=>{
+            return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+                id: item.id,
+                index
+            });
+        },
+        onMouseOut: (e)=>{
+            return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+                id: item.id,
+                index
+            });
+        },
         selected: isVisuallySelected,
         ref: ref,
         children: [
@@ -61,8 +73,8 @@ const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ it
                 primaryTypographyProps: {
                     noWrap: noWrap
                 },
-                onMouseOver: handleMouseOver,
-                onMouseOut: handleMouseOut
+                onMouseOver: handleTextMouseOver,
+                onMouseOut: handleTextMouseOut
             })
         ]
     });

package/dist/Legend/ListLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegendItem.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { forwardRef, useState } from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\n\nexport interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick'> {\n  item: LegendItem;\n\n  /**\n   * When true, the item is rendered differently to visually communicate it is\n   * selected.\n   */\n  isVisuallySelected?: boolean;\n\n  onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => void;\n\n  /**\n   * When `true`, will keep labels to a single line with overflow ellipsized. The\n   * full content will be shown on hover.\n   *\n   * When `false` or unset, will show the full label.\n   */\n  truncateLabel?: boolean;\n}\n\nconst ListLegendItemBase = forwardRef<HTMLDivElement, ListLegendItemProps>(function ListLegendItem(\n  { item, sx, truncateLabel, onClick, isVisuallySelected, ...others },\n  ref\n) {\n  const [noWrap, setNoWrap] = useState(truncateLabel);\n\n  function handleMouseOver() {\n    if (truncateLabel) {\n      setNoWrap(false);\n    }\n  }\n\n  function handleMouseOut() {\n    if (truncateLabel) {\n      setNoWrap(true);\n    }\n  }\n\n  const handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n    onClick(e, item.id);\n    item.onClick?.(e);\n  };\n\n  return (\n    <ListItem\n      {...others}\n      component=\"div\"\n      role=\"listitem\"\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      key={item.id}\n      onClick={handleClick}\n      selected={isVisuallySelected}\n      ref={ref}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText\n        primary={item.label}\n        primaryTypographyProps={{ noWrap: noWrap }}\n        onMouseOver={handleMouseOver}\n        onMouseOut={handleMouseOut}\n      ></ListItemText>\n    </ListItem>\n  );\n});\n\nexport const ListLegendItem = React.memo(ListLegendItemBase);\n"],"names":["React","forwardRef","useState","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onClick","isVisuallySelected","others","ref","noWrap","setNoWrap","handleMouseOver","handleMouseOut","handleClick","e","id","component","role","padding","cursor","dense","key","selected","display","alignItems","color","primary","label","primaryTypographyProps","onMouseOver","onMouseOut","memo"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AACpD,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAE3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAsBtD,MAAMC,kBAAkB,iBAAGP,UAAU,CAAsC,SAASQ,cAAc,CAChG,EAAEC,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAEC,aAAa,CAAA,EAAEC,OAAO,CAAA,EAAEC,kBAAkB,CAAA,EAAE,GAAGC,MAAM,EAAE,EACnEC,GAAG,EACH;IACA,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAACU,aAAa,CAAC,AAAC;IAEpD,SAASO,eAAe,GAAG;QACzB,IAAIP,aAAa,EAAE;YACjBM,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,SAASE,cAAc,GAAG;QACxB,IAAIR,aAAa,EAAE;YACjBM,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;IAED,MAAMG,WAAW,GAA4C,CAACC,CAAC,GAAK;YAElEZ,GAAY;QADZG,OAAO,CAACS,CAAC,EAAEZ,IAAI,CAACa,EAAE,CAAC,CAAC;QACpBb,CAAAA,GAAY,GAAZA,IAAI,CAACG,OAAO,cAAZH,GAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,GAAY,CAAZA,IAAiB,CAAjBA,IAAI,EAAWY,CAAC,CAAC,CAAC;IACpB,CAAC,AAAC;IAEF,qBACE,eAACjB,QAAQ;QACN,GAAGU,MAAM;QACVS,SAAS,EAAC,KAAK;QACfC,IAAI,EAAC,UAAU;QACfd,EAAE,EAAEL,SAAS,CACX;YACEoB,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDhB,EAAE,CACH;QACDiB,KAAK,EAAE,IAAI;QACXC,GAAG,EAAEnB,IAAI,CAACa,EAAE;QACZV,OAAO,EAAEQ,WAAW;QACpBS,QAAQ,EAAEhB,kBAAkB;QAC5BE,GAAG,EAAEA,GAAG;;0BAER,KAACb,GAAG;gBAACQ,EAAE,EAAE;oBAAEoB,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACzB,gBAAgB;oBAAC0B,KAAK,EAAEvB,IAAI,CAACuB,KAAK;kBAAI;cACnC;0BACN,KAAC7B,YAAY;gBACX8B,OAAO,EAAExB,IAAI,CAACyB,KAAK;gBACnBC,sBAAsB,EAAE;oBAAEnB,MAAM,EAAEA,MAAM;iBAAE;gBAC1CoB,WAAW,EAAElB,eAAe;gBAC5BmB,UAAU,EAAElB,cAAc;cACZ;;MACP,CACX;AACJ,CAAC,CAAC,AAAC;AAEH,OAAO,MAAMX,cAAc,iBAAGT,KAAK,CAACuC,IAAI,CAAC/B,kBAAkB,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegendItem.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { forwardRef, useState } from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\nimport { LegendItem } from './legend-model';\n\nexport type LegendItemEventOpts = {\n  /**\n   * Unique identifier for the legend item.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick' | 'onMouseOver' | 'onMouseOut'> {\n  item: LegendItem;\n\n  index: number;\n\n  /**\n   * When true, the item is rendered differently to visually communicate it is\n   * selected.\n   */\n  isVisuallySelected?: boolean;\n\n  onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => void;\n\n  onMouseOver?: (e: React.MouseEvent, opts: LegendItemEventOpts) => void;\n  onMouseOut?: (e: React.MouseEvent, opts: LegendItemEventOpts) => void;\n\n  /**\n   * When `true`, will keep labels to a single line with overflow ellipsized. The\n   * full content will be shown on hover.\n   *\n   * When `false` or unset, will show the full label.\n   */\n  truncateLabel?: boolean;\n}\n\nconst ListLegendItemBase = forwardRef<HTMLDivElement, ListLegendItemProps>(function ListLegendItem(\n  { item, sx, truncateLabel, onClick, isVisuallySelected, onMouseOver, onMouseOut, index, ...others },\n  ref\n) {\n  const [noWrap, setNoWrap] = useState(truncateLabel);\n\n  function handleTextMouseOver() {\n    if (truncateLabel) {\n      setNoWrap(false);\n    }\n  }\n\n  function handleTextMouseOut() {\n    if (truncateLabel) {\n      setNoWrap(true);\n    }\n  }\n\n  const handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n    onClick(e, item.id);\n    item.onClick?.(e);\n  };\n\n  return (\n    <ListItem\n      {...others}\n      component=\"div\"\n      role=\"listitem\"\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      key={item.id}\n      onClick={handleClick}\n      onMouseOver={(e: React.MouseEvent) => onMouseOver?.(e, { id: item.id, index })}\n      onMouseOut={(e: React.MouseEvent) => onMouseOut?.(e, { id: item.id, index })}\n      selected={isVisuallySelected}\n      ref={ref}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText\n        primary={item.label}\n        primaryTypographyProps={{ noWrap: noWrap }}\n        onMouseOver={handleTextMouseOver}\n        onMouseOut={handleTextMouseOut}\n      ></ListItemText>\n    </ListItem>\n  );\n});\n\nexport const ListLegendItem = React.memo(ListLegendItemBase);\n"],"names":["React","forwardRef","useState","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onClick","isVisuallySelected","onMouseOver","onMouseOut","index","others","ref","noWrap","setNoWrap","handleTextMouseOver","handleTextMouseOut","handleClick","e","id","component","role","padding","cursor","dense","key","selected","display","alignItems","color","primary","label","primaryTypographyProps","memo"],"mappings":"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"}

package/dist/Legend/TableLegend.d.ts

@@ -1,12 +1,15 @@
 /// <reference types="react" />
 import { TableProps } from '../Table';
-import { LegendItem } from '../model';
-export interface TableLegendProps {
+import { LegendItem } from './legend-model';
+export interface TableLegendProps extends Pick<TableProps<LegendItem>, 'sorting' | 'onSortingChange'> {
     items: LegendItem[];
     height: number;
     width: number;
     selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';
     onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];
+    onItemMouseOver?: TableProps<LegendItem>['onRowMouseOver'];
+    onItemMouseOut?: TableProps<LegendItem>['onRowMouseOut'];
+    columns?: TableProps<LegendItem>['columns'];
 }
-export declare function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, height, width, }: TableLegendProps): JSX.Element;
+export declare function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, height, width, columns: additionalColumns, sorting, onSortingChange, }: TableLegendProps): JSX.Element;
 //# sourceMappingURL=TableLegend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/TableLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAS,UAAU,EAAqB,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC;IAC9D,qBAAqB,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,sBAAsB,CAAC,CAAC;CACvE;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EAAE,gBAAgB,EAC/B,qBAAqB,EACrB,MAAM,EACN,KAAK,GACN,EAAE,gBAAgB,eA2BlB"}
+{"version":3,"file":"TableLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/TableLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAS,UAAU,EAAqB,MAAM,UAAU,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,SAAS,GAAG,iBAAiB,CAAC;IACnG,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC;IAC9D,qBAAqB,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,sBAAsB,CAAC,CAAC;IACtE,eAAe,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAC;IACzD,OAAO,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC7C;AAuBD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,aAAa,EAAE,gBAAgB,EAC/B,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,MAAM,EACN,KAAK,EACL,OAAO,EAAE,iBAAsB,EAC/B,OAAO,EACP,eAAe,GAChB,EAAE,gBAAgB,eAoClB"}

package/dist/Legend/TableLegend.js

@@ -17,6 +17,7 @@ const COLUMNS = [
     {
         accessorKey: 'label',
         header: 'Name',
+        enableSorting: true,
         // Starting with `title` attr instead of a tooltip because it is easier to
         // implement. We should try adding a tooltip in the future, but we'll need
         // to be very careful about performance when doing so with large tables.
@@ -32,7 +33,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-export function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width  }) {
+export function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , height , width , columns: additionalColumns = [] , sorting , onSortingChange  }) {
     const rowSelection = useMemo(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
         // TODO: clean this up if we switch to also using checkboxes in list legend.
@@ -44,17 +45,30 @@ export function TableLegend({ items , selectedItems: initRowSelection , onSelect
         initRowSelection,
         items
     ]);
+    const columns = useMemo(()=>{
+        return [
+            ...COLUMNS,
+            ...additionalColumns
+        ];
+    }, [
+        additionalColumns
+    ]);
     return /*#__PURE__*/ _jsx(Table, {
         height: height,
         width: width,
         rowSelection: rowSelection,
         onRowSelectionChange: onSelectedItemsChange,
+        onRowMouseOver: onItemMouseOver,
+        onRowMouseOut: onItemMouseOut,
+        sorting: sorting,
+        onSortingChange: onSortingChange,
         data: items,
-        columns: COLUMNS,
+        columns: columns,
         density: "compact",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,
-        checkboxSelection: true
+        checkboxSelection: true,
+        rowSelectionVariant: "legend"
     });
 }