@perses-dev/components 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/Legend/Legend.js

@@ -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 , onItemMouseOver , onItemMouseOut , tableProps  }) {
+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)=>{
@@ -92,9 +92,11 @@ export function Legend({ width , height , options , data , selectedItems , onSel
     }
     if (options.position === 'right') {
         return /*#__PURE__*/ _jsx(Box, {
-            sx: {
+            style: {
                 width: width,
-                height: height,
+                height: height
+            },
+            sx: {
                 position: 'absolute',
                 top: 0,
                 right: 0
@@ -104,9 +106,11 @@ export function Legend({ width , height , options , data , selectedItems , onSel
     }
     // Position bottom
     return /*#__PURE__*/ _jsx(Box, {
-        sx: {
+        style: {
             width: width,
-            height: height,
+            height: height
+        },
+        sx: {
             position: 'absolute',
             bottom: 0
         },

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 { 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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SAASC,aAAa,QAAQ,mBAAmB;AACjD,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,MAAK,EACLC,OAAM,EACNC,QAAO,EACPC,KAAI,EACJC,cAAa,EACbC,sBAAqB,EACrBC,gBAAe,EACfC,eAAc,EACdC,WAAU,EACE;IACZ,MAAMC,oBAAoB,CAACC,GAA8CC;QACvE,MAAMC,kBAAkBF,EAAEG,WAAWH,EAAEI;QAEvC,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;IAEnC,2EAA2E;IAC3E,+EAA+E;IAC/E,2EAA2E;IAC3E,sBAAsB;IACtB,MAAMC,sBAAsBhB,KAAKiB,UAAUtB;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,aAAa,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,aAAa,SAAS;QAChC,qBACE,KAAChC;YACCiC,IAAI;gBACFzB,OAAOA;gBACPC,QAAQA;gBACRuB,UAAU;gBACVE,KAAK;gBACLC,OAAO;YACT;sBAECJ;;IAGP;IAEA,kBAAkB;IAClB,qBACE,KAAC/B;QACCiC,IAAI;YACFzB,OAAOA;YACPC,QAAQA;YACRuB,UAAU;YACVI,QAAQ;QACV;kBAECL;;AAGP"}
+{"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 { ReactElement, 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): 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        }}\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      }}\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","bottom"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SAASC,aAAa,QAAQ,mBAAmB;AACjD,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;YACT;sBAECL;;IAGP;IAEA,kBAAkB;IAClB,qBACE,KAAC/B;QACCiC,OAAO;YACLzB,OAAOA;YACPC,QAAQA;QACV;QACAyB,IAAI;YACFF,UAAU;YACVK,QAAQ;QACV;kBAECN;;AAGP"}

package/dist/Legend/LegendColorBadge.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+/// <reference types="react" />
 import { BoxProps } from '@mui/material';
 export interface LegendColorBadgeProps extends BoxProps<'div'> {
     color: string;
 }
-export declare const LegendColorBadge: React.NamedExoticComponent<LegendColorBadgeProps>;
+export declare const LegendColorBadge: import("react").NamedExoticComponent<LegendColorBadgeProps>;
 //# sourceMappingURL=LegendColorBadge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LegendColorBadge.d.ts","sourceRoot":"","sources":["../../src/Legend/LegendColorBadge.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,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,mDAe3B,CAAC"}
+{"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"}

package/dist/Legend/LegendColorBadge.js

@@ -11,10 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import { memo } from 'react';
 import { Box } from '@mui/material';
 import { combineSx } from '../utils';
-export const LegendColorBadge = /*#__PURE__*/ React.memo(function LegendColorBadge({ color , sx , ...others }) {
+export const LegendColorBadge = /*#__PURE__*/ memo(function LegendColorBadge({ color, sx, ...others }) {
     return /*#__PURE__*/ _jsx(Box, {
         ...others,
         sx: combineSx({

package/dist/Legend/LegendColorBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/LegendColorBadge.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport { Box, BoxProps } from '@mui/material';\nimport { combineSx } from '../utils';\n\nexport interface LegendColorBadgeProps extends BoxProps<'div'> {\n  color: string;\n}\n\nexport const LegendColorBadge = React.memo(function LegendColorBadge({ color, sx, ...others }: LegendColorBadgeProps) {\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":["React","Box","combineSx","LegendColorBadge","memo","color","sx","others","height","width","margin","theme","spacing","style","backgroundColor"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,SAASC,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,SAAS,QAAQ,WAAW;AAMrC,OAAO,MAAMC,iCAAmBH,MAAMI,KAAK,SAASD,iBAAiB,EAAEE,MAAK,EAAEC,GAAE,EAAE,GAAGC,QAA+B;IAClH,qBACE,KAACN;QACE,GAAGM,MAAM;QACVD,IAAIJ,UACF;YACEM,QAAQ;YACRC,OAAO;YACPC,QAAQ,CAACC,QAAUA,MAAMC,QAAQ;QACnC,GACAN;QAEFO,OAAO;YAAEC,iBAAiBT;QAAM;;AAGtC,GAAG"}
+{"version":3,"sources":["../../src/Legend/LegendColorBadge.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { memo, 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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,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"}

package/dist/Legend/ListLegend.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { ListLegendItemProps } from './ListLegendItem';
 import { LegendItem, SelectedLegendItemState } from './legend-model';
 export interface ListLegendProps {
@@ -16,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, onItemMouseOver, onItemMouseOut, }: ListLegendProps): JSX.Element;
+export declare function ListLegend({ items, height, width, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut, }: ListLegendProps): ReactElement;
 //# 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,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"}
+{"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,CA8BhC"}

package/dist/Legend/ListLegend.js

@@ -19,7 +19,7 @@ import { isLegendItemVisuallySelected } from './legend-model';
  * 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 , onItemMouseOver , onItemMouseOut  }) {
+ */ 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, {

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 { 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,SAASA,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,cAAc,QAA6B,mBAAmB;AACvE,SAA8CC,4BAA4B,QAAQ,iBAAiB;AAYnG;;;;;CAKC,GACD,OAAO,SAASC,WAAW,EACzBC,MAAK,EACLC,OAAM,EACNC,MAAK,EACLC,cAAa,EACbC,kBAAiB,EACjBC,gBAAe,EACfC,eAAc,EACE;IAChB,6DAA6D;IAC7D,MAAMC,iBAAiBP,MAAMQ,SAAS;IAEtC,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;QAehB;QACAC,MAAK;;AAGX"}
+{"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 { 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\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,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;IAEtC,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"}

package/dist/Legend/ListLegendItem.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { MouseEvent } from 'react';
 import { ListItemProps } from '@mui/material';
 import { LegendItem } from './legend-model';
-export declare type LegendItemEventOpts = {
+export type LegendItemEventOpts = {
     /**
      * Unique identifier for the legend item.
      */
@@ -19,9 +19,9 @@ export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick
      * 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;
+    onClick: (e: MouseEvent<HTMLElement>, seriesId: string) => void;
+    onMouseOver?: (e: MouseEvent, opts: LegendItemEventOpts) => void;
+    onMouseOut?: (e: MouseEvent, opts: LegendItemEventOpts) => void;
     /**
      * When `true`, will keep labels to a single line with overflow ellipsized. The
      * full content will be shown on hover.
@@ -30,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" | "dense" | "components" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "disablePadding" | "divider" | "secondaryAction" | "componentsProps" | "slotProps" | "slots" | "item" | "index" | "isVisuallySelected" | "truncateLabel"> & React.RefAttributes<HTMLDivElement>>>;
+export declare const ListLegendItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ListLegendItemProps, "ref"> & import("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;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"}
+{"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"}

package/dist/Legend/ListLegendItem.js

@@ -10,13 +10,12 @@
 // 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 { createElement as _createElement } from "react";
-import React, { forwardRef, useState } from 'react';
-import { Box, ListItemText, ListItem } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useState } from 'react';
+import { Box, ListItemText, ListItemButton } from '@mui/material';
 import { combineSx } from '../utils';
 import { LegendColorBadge } from './LegendColorBadge';
-const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , onMouseOver , onMouseOut , index , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ item, sx, truncateLabel, onClick, isVisuallySelected, onMouseOver, onMouseOut, index, ...others }, ref) {
     const [noWrap, setNoWrap] = useState(truncateLabel);
     function handleTextMouseOver() {
         if (truncateLabel) {
@@ -29,33 +28,26 @@ const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ it
         }
     }
     const handleClick = (e)=>{
-        var _item_onClick;
         onClick(e, item.id);
-        (_item_onClick = item.onClick) === null || _item_onClick === void 0 ? void 0 : _item_onClick.call(item, e);
+        item.onClick?.(e);
     };
-    return /*#__PURE__*/ _createElement(ListItem, {
+    return /*#__PURE__*/ _jsxs(ListItemButton, {
         ...others,
-        component: "div",
         role: "listitem",
         sx: combineSx({
             padding: 0,
             cursor: 'pointer'
         }, sx),
         dense: true,
-        key: item.id,
         onClick: handleClick,
-        onMouseOver: (e)=>{
-            return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+        onMouseOver: (e)=>onMouseOver?.(e, {
                 id: item.id,
                 index
-            });
-        },
-        onMouseOut: (e)=>{
-            return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+            }),
+        onMouseOut: (e)=>onMouseOut?.(e, {
                 id: item.id,
                 index
-            });
-        },
+            }),
         selected: isVisuallySelected,
         ref: ref,
         children: [
@@ -79,6 +71,6 @@ const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ it
         ]
     });
 });
-export const ListLegendItem = /*#__PURE__*/ React.memo(ListLegendItemBase);
+export const ListLegendItem = /*#__PURE__*/ memo(ListLegendItemBase);
 
 //# sourceMappingURL=ListLegendItem.js.map

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 { 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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAEjC,OAAOA,SAASC,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AACpD,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,gBAAgB;AAC3E,SAASC,SAAS,QAAQ,WAAW;AACrC,SAASC,gBAAgB,QAAQ,qBAAqB;AAwCtD,MAAMC,mCAAqBP,WAAgD,SAASQ,eAClF,EAAEC,KAAI,EAAEC,GAAE,EAAEC,cAAa,EAAEC,QAAO,EAAEC,mBAAkB,EAAEC,YAAW,EAAEC,WAAU,EAAEC,MAAK,EAAE,GAAGC,QAAQ,EACnGC,GAAG;IAEH,MAAM,CAACC,QAAQC,UAAU,GAAGnB,SAASU;IAErC,SAASU;QACP,IAAIV,eAAe;YACjBS,UAAU;QACZ;IACF;IAEA,SAASE;QACP,IAAIX,eAAe;YACjBS,UAAU;QACZ;IACF;IAEA,MAAMG,cAAuD,CAACC;YAE5Df;QADAG,QAAQY,GAAGf,KAAKgB;QAChBhB,CAAAA,gBAAAA,KAAKG,qBAALH,2BAAAA,KAAAA,IAAAA,cAAAA,KAAAA,MAAee;IACjB;IAEA,qBACE,eAACpB;QACE,GAAGa,MAAM;QACVS,WAAU;QACVC,MAAK;QACLjB,IAAIL,UACF;YACEuB,SAAS;YACTC,QAAQ;QACV,GACAnB;QAEFoB,OAAO;QACPC,KAAKtB,KAAKgB;QACVb,SAASW;QACTT,aAAa,CAACU;YAAwBV,OAAAA,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAcU,GAAG;gBAAEC,IAAIhB,KAAKgB;gBAAIT;YAAM;;QAC5ED,YAAY,CAACS;YAAwBT,OAAAA,uBAAAA,wBAAAA,KAAAA,IAAAA,WAAaS,GAAG;gBAAEC,IAAIhB,KAAKgB;gBAAIT;YAAM;;QAC1EgB,UAAUnB;QACVK,KAAKA;;0BAEL,KAAChB;gBAAIQ,IAAI;oBAAEuB,SAAS;oBAAQC,YAAY;gBAAS;0BAC/C,cAAA,KAAC5B;oBAAiB6B,OAAO1B,KAAK0B;;;0BAEhC,KAAChC;gBACCiC,SAAS3B,KAAK4B;gBACdC,wBAAwB;oBAAEnB,QAAQA;gBAAO;gBACzCL,aAAaO;gBACbN,YAAYO;;;;AAIpB;AAEA,OAAO,MAAMd,+BAAiBT,MAAMwC,KAAKhC,oBAAoB"}
+{"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 { forwardRef, memo, MouseEvent, MouseEventHandler, ReactElement, useState } from 'react';\nimport { Box, ListItemText, ListItemProps, ListItemButton } 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: MouseEvent<HTMLElement>, seriesId: string) => void;\n\n  onMouseOver?: (e: MouseEvent, opts: LegendItemEventOpts) => void;\n  onMouseOut?: (e: 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): ReactElement {\n  const [noWrap, setNoWrap] = useState(truncateLabel);\n\n  function handleTextMouseOver(): void {\n    if (truncateLabel) {\n      setNoWrap(false);\n    }\n  }\n\n  function handleTextMouseOut(): void {\n    if (truncateLabel) {\n      setNoWrap(true);\n    }\n  }\n\n  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    onClick(e, item.id);\n    item.onClick?.(e);\n  };\n\n  return (\n    <ListItemButton\n      {...others}\n      role=\"listitem\"\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      onClick={handleClick}\n      onMouseOver={(e: MouseEvent) => onMouseOver?.(e, { id: item.id, index })}\n      onMouseOut={(e: 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    </ListItemButton>\n  );\n});\n\nexport const ListLegendItem = memo(ListLegendItemBase);\n"],"names":["forwardRef","memo","useState","Box","ListItemText","ListItemButton","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onClick","isVisuallySelected","onMouseOver","onMouseOut","index","others","ref","noWrap","setNoWrap","handleTextMouseOver","handleTextMouseOut","handleClick","e","id","role","padding","cursor","dense","selected","display","alignItems","color","primary","label","primaryTypographyProps"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,IAAI,EAA+CC,QAAQ,QAAQ,QAAQ;AAChG,SAASC,GAAG,EAAEC,YAAY,EAAiBC,cAAc,QAAQ,gBAAgB;AACjF,SAASC,SAAS,QAAQ,WAAW;AACrC,SAASC,gBAAgB,QAAQ,qBAAqB;AAwCtD,MAAMC,mCAAqBR,WAAgD,SAASS,eAClF,EAAEC,IAAI,EAAEC,EAAE,EAAEC,aAAa,EAAEC,OAAO,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,UAAU,EAAEC,KAAK,EAAE,GAAGC,QAAQ,EACnGC,GAAG;IAEH,MAAM,CAACC,QAAQC,UAAU,GAAGnB,SAASU;IAErC,SAASU;QACP,IAAIV,eAAe;YACjBS,UAAU;QACZ;IACF;IAEA,SAASE;QACP,IAAIX,eAAe;YACjBS,UAAU;QACZ;IACF;IAEA,MAAMG,cAAiD,CAACC;QACtDZ,QAAQY,GAAGf,KAAKgB,EAAE;QAClBhB,KAAKG,OAAO,GAAGY;IACjB;IAEA,qBACE,MAACpB;QACE,GAAGa,MAAM;QACVS,MAAK;QACLhB,IAAIL,UACF;YACEsB,SAAS;YACTC,QAAQ;QACV,GACAlB;QAEFmB,OAAO;QACPjB,SAASW;QACTT,aAAa,CAACU,IAAkBV,cAAcU,GAAG;gBAAEC,IAAIhB,KAAKgB,EAAE;gBAAET;YAAM;QACtED,YAAY,CAACS,IAAkBT,aAAaS,GAAG;gBAAEC,IAAIhB,KAAKgB,EAAE;gBAAET;YAAM;QACpEc,UAAUjB;QACVK,KAAKA;;0BAEL,KAAChB;gBAAIQ,IAAI;oBAAEqB,SAAS;oBAAQC,YAAY;gBAAS;0BAC/C,cAAA,KAAC1B;oBAAiB2B,OAAOxB,KAAKwB,KAAK;;;0BAErC,KAAC9B;gBACC+B,SAASzB,KAAK0B,KAAK;gBACnBC,wBAAwB;oBAAEjB,QAAQA;gBAAO;gBACzCL,aAAaO;gBACbN,YAAYO;;;;AAIpB;AAEA,OAAO,MAAMd,+BAAiBR,KAAKO,oBAAoB"}

package/dist/Legend/TableLegend.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { TableProps } from '../Table';
 import { LegendItem } from './legend-model';
 export interface TableLegendProps extends Pick<TableProps<LegendItem>, 'sorting' | 'onSortingChange'> {
@@ -11,5 +11,5 @@ export interface TableLegendProps extends Pick<TableProps<LegendItem>, 'sorting'
     onItemMouseOut?: TableProps<LegendItem>['onRowMouseOut'];
     columns?: TableProps<LegendItem>['columns'];
 }
-export declare function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, height, width, columns: additionalColumns, sorting, onSortingChange, }: TableLegendProps): JSX.Element;
+export declare function TableLegend({ items, selectedItems: initRowSelection, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, height, width, columns: additionalColumns, sorting, onSortingChange, }: TableLegendProps): ReactElement;
 //# 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,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"}
+{"version":3,"file":"TableLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/TableLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,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,GAAG,YAAY,CAwCjC"}

package/dist/Legend/TableLegend.js

@@ -21,7 +21,7 @@ const COLUMNS = [
         // 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.
-        cell: ({ getValue  })=>/*#__PURE__*/ _jsx("span", {
+        cell: ({ getValue })=>/*#__PURE__*/ _jsx("span", {
                 title: getValue(),
                 children: getValue()
             })
@@ -33,7 +33,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-export function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , height , width , columns: additionalColumns = [] , sorting , onSortingChange  }) {
+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.
@@ -65,6 +65,7 @@ export function TableLegend({ items , selectedItems: initRowSelection , onSelect
         data: items,
         columns: columns,
         density: "compact",
+        defaultColumnWidth: "auto",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,
         checkboxSelection: true,

package/dist/Legend/TableLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/TableLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Table, TableProps, TableColumnConfig } from '../Table';\nimport { LegendItem } from './legend-model';\n\nexport interface TableLegendProps extends Pick<TableProps<LegendItem>, 'sorting' | 'onSortingChange'> {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';\n  onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];\n  onItemMouseOver?: TableProps<LegendItem>['onRowMouseOver'];\n  onItemMouseOut?: TableProps<LegendItem>['onRowMouseOut'];\n  columns?: TableProps<LegendItem>['columns'];\n}\n\nconst COLUMNS: Array<TableColumnConfig<LegendItem>> = [\n  {\n    accessorKey: 'label',\n    header: 'Name',\n    enableSorting: true,\n\n    // Starting with `title` attr instead of a tooltip because it is easier to\n    // implement. We should try adding a tooltip in the future, but we'll need\n    // to be very careful about performance when doing so with large tables.\n    cell: ({ getValue }) => <span title={getValue()}>{getValue()}</span>,\n  },\n];\n\nconst getRowId: NonNullable<TableProps<LegendItem>['getRowId']> = (data) => {\n  return data.id;\n};\n\nconst getCheckboxColor: TableProps<LegendItem>['getCheckboxColor'] = (data) => {\n  return data.color;\n};\n\nexport function TableLegend({\n  items,\n  selectedItems: initRowSelection,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  height,\n  width,\n  columns: additionalColumns = [],\n  sorting,\n  onSortingChange,\n}: TableLegendProps) {\n  const rowSelection = useMemo(() => {\n    return typeof initRowSelection !== 'string'\n      ? initRowSelection\n      : // Turn \"ALL\" state into a table component friendly map of all of the selected\n        // items for checkboxes.\n        // TODO: clean this up if we switch to also using checkboxes in list legend.\n        items.reduce((allRowSelection, item, index) => {\n          allRowSelection[getRowId(item, index)] = true;\n          return allRowSelection;\n        }, {} as Record<string, boolean>);\n  }, [initRowSelection, items]);\n\n  const columns = useMemo(() => {\n    return [...COLUMNS, ...additionalColumns];\n  }, [additionalColumns]);\n\n  return (\n    <Table\n      height={height}\n      width={width}\n      rowSelection={rowSelection}\n      onRowSelectionChange={onSelectedItemsChange}\n      onRowMouseOver={onItemMouseOver}\n      onRowMouseOut={onItemMouseOut}\n      sorting={sorting}\n      onSortingChange={onSortingChange}\n      data={items}\n      columns={columns}\n      density=\"compact\"\n      getRowId={getRowId}\n      getCheckboxColor={getCheckboxColor}\n      checkboxSelection\n      rowSelectionVariant=\"legend\"\n    />\n  );\n}\n"],"names":["useMemo","Table","COLUMNS","accessorKey","header","enableSorting","cell","getValue","span","title","getRowId","data","id","getCheckboxColor","color","TableLegend","items","selectedItems","initRowSelection","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","height","width","columns","additionalColumns","sorting","onSortingChange","rowSelection","reduce","allRowSelection","item","index","onRowSelectionChange","onRowMouseOver","onRowMouseOut","density","checkboxSelection","rowSelectionVariant"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,OAAO,QAAQ,QAAQ;AAChC,SAASC,KAAK,QAAuC,WAAW;AAchE,MAAMC,UAAgD;IACpD;QACEC,aAAa;QACbC,QAAQ;QACRC,eAAe;QAEf,0EAA0E;QAC1E,0EAA0E;QAC1E,wEAAwE;QACxEC,MAAM,CAAC,EAAEC,SAAQ,EAAE,iBAAK,KAACC;gBAAKC,OAAOF;0BAAaA;;IACpD;CACD;AAED,MAAMG,WAA4D,CAACC;IACjE,OAAOA,KAAKC;AACd;AAEA,MAAMC,mBAA+D,CAACF;IACpE,OAAOA,KAAKG;AACd;AAEA,OAAO,SAASC,YAAY,EAC1BC,MAAK,EACLC,eAAeC,iBAAgB,EAC/BC,sBAAqB,EACrBC,gBAAe,EACfC,eAAc,EACdC,OAAM,EACNC,MAAK,EACLC,SAASC,oBAAoB,EAAE,CAAA,EAC/BC,QAAO,EACPC,gBAAe,EACE;IACjB,MAAMC,eAAe5B,QAAQ;QAC3B,OAAO,OAAOkB,qBAAqB,WAC/BA,mBAEA,wBAAwB;QACxB,4EAA4E;QAC5EF,MAAMa,OAAO,CAACC,iBAAiBC,MAAMC;YACnCF,eAAe,CAACpB,SAASqB,MAAMC,OAAO,GAAG;YACzC,OAAOF;QACT,GAAG,CAAC;IACV,GAAG;QAACZ;QAAkBF;KAAM;IAE5B,MAAMQ,UAAUxB,QAAQ;QACtB,OAAO;eAAIE;eAAYuB;SAAkB;IAC3C,GAAG;QAACA;KAAkB;IAEtB,qBACE,KAACxB;QACCqB,QAAQA;QACRC,OAAOA;QACPK,cAAcA;QACdK,sBAAsBd;QACtBe,gBAAgBd;QAChBe,eAAed;QACfK,SAASA;QACTC,iBAAiBA;QACjBhB,MAAMK;QACNQ,SAASA;QACTY,SAAQ;QACR1B,UAAUA;QACVG,kBAAkBA;QAClBwB,iBAAiB;QACjBC,qBAAoB;;AAG1B"}
+{"version":3,"sources":["../../src/Legend/TableLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo } from 'react';\nimport { Table, TableProps, TableColumnConfig } from '../Table';\nimport { LegendItem } from './legend-model';\n\nexport interface TableLegendProps extends Pick<TableProps<LegendItem>, 'sorting' | 'onSortingChange'> {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: TableProps<LegendItem>['rowSelection'] | 'ALL';\n  onSelectedItemsChange: TableProps<LegendItem>['onRowSelectionChange'];\n  onItemMouseOver?: TableProps<LegendItem>['onRowMouseOver'];\n  onItemMouseOut?: TableProps<LegendItem>['onRowMouseOut'];\n  columns?: TableProps<LegendItem>['columns'];\n}\n\nconst COLUMNS: Array<TableColumnConfig<LegendItem>> = [\n  {\n    accessorKey: 'label',\n    header: 'Name',\n    enableSorting: true,\n\n    // Starting with `title` attr instead of a tooltip because it is easier to\n    // implement. We should try adding a tooltip in the future, but we'll need\n    // to be very careful about performance when doing so with large tables.\n    cell: ({ getValue }) => <span title={getValue()}>{getValue()}</span>,\n  },\n];\n\nconst getRowId: NonNullable<TableProps<LegendItem>['getRowId']> = (data) => {\n  return data.id;\n};\n\nconst getCheckboxColor: TableProps<LegendItem>['getCheckboxColor'] = (data) => {\n  return data.color;\n};\n\nexport function TableLegend({\n  items,\n  selectedItems: initRowSelection,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  height,\n  width,\n  columns: additionalColumns = [],\n  sorting,\n  onSortingChange,\n}: TableLegendProps): ReactElement {\n  const rowSelection = useMemo(() => {\n    return typeof initRowSelection !== 'string'\n      ? initRowSelection\n      : // Turn \"ALL\" state into a table component friendly map of all of the selected\n        // items for checkboxes.\n        // TODO: clean this up if we switch to also using checkboxes in list legend.\n        items.reduce(\n          (allRowSelection, item, index) => {\n            allRowSelection[getRowId(item, index)] = true;\n            return allRowSelection;\n          },\n          {} as Record<string, boolean>\n        );\n  }, [initRowSelection, items]);\n\n  const columns = useMemo(() => {\n    return [...COLUMNS, ...additionalColumns];\n  }, [additionalColumns]);\n\n  return (\n    <Table\n      height={height}\n      width={width}\n      rowSelection={rowSelection}\n      onRowSelectionChange={onSelectedItemsChange}\n      onRowMouseOver={onItemMouseOver}\n      onRowMouseOut={onItemMouseOut}\n      sorting={sorting}\n      onSortingChange={onSortingChange}\n      data={items}\n      columns={columns}\n      density=\"compact\"\n      defaultColumnWidth=\"auto\"\n      getRowId={getRowId}\n      getCheckboxColor={getCheckboxColor}\n      checkboxSelection\n      rowSelectionVariant=\"legend\"\n    />\n  );\n}\n"],"names":["useMemo","Table","COLUMNS","accessorKey","header","enableSorting","cell","getValue","span","title","getRowId","data","id","getCheckboxColor","color","TableLegend","items","selectedItems","initRowSelection","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","height","width","columns","additionalColumns","sorting","onSortingChange","rowSelection","reduce","allRowSelection","item","index","onRowSelectionChange","onRowMouseOver","onRowMouseOut","density","defaultColumnWidth","checkboxSelection","rowSelectionVariant"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,KAAK,QAAuC,WAAW;AAchE,MAAMC,UAAgD;IACpD;QACEC,aAAa;QACbC,QAAQ;QACRC,eAAe;QAEf,0EAA0E;QAC1E,0EAA0E;QAC1E,wEAAwE;QACxEC,MAAM,CAAC,EAAEC,QAAQ,EAAE,iBAAK,KAACC;gBAAKC,OAAOF;0BAAaA;;IACpD;CACD;AAED,MAAMG,WAA4D,CAACC;IACjE,OAAOA,KAAKC,EAAE;AAChB;AAEA,MAAMC,mBAA+D,CAACF;IACpE,OAAOA,KAAKG,KAAK;AACnB;AAEA,OAAO,SAASC,YAAY,EAC1BC,KAAK,EACLC,eAAeC,gBAAgB,EAC/BC,qBAAqB,EACrBC,eAAe,EACfC,cAAc,EACdC,MAAM,EACNC,KAAK,EACLC,SAASC,oBAAoB,EAAE,EAC/BC,OAAO,EACPC,eAAe,EACE;IACjB,MAAMC,eAAe5B,QAAQ;QAC3B,OAAO,OAAOkB,qBAAqB,WAC/BA,mBAEA,wBAAwB;QACxB,4EAA4E;QAC5EF,MAAMa,MAAM,CACV,CAACC,iBAAiBC,MAAMC;YACtBF,eAAe,CAACpB,SAASqB,MAAMC,OAAO,GAAG;YACzC,OAAOF;QACT,GACA,CAAC;IAET,GAAG;QAACZ;QAAkBF;KAAM;IAE5B,MAAMQ,UAAUxB,QAAQ;QACtB,OAAO;eAAIE;eAAYuB;SAAkB;IAC3C,GAAG;QAACA;KAAkB;IAEtB,qBACE,KAACxB;QACCqB,QAAQA;QACRC,OAAOA;QACPK,cAAcA;QACdK,sBAAsBd;QACtBe,gBAAgBd;QAChBe,eAAed;QACfK,SAASA;QACTC,iBAAiBA;QACjBhB,MAAMK;QACNQ,SAASA;QACTY,SAAQ;QACRC,oBAAmB;QACnB3B,UAAUA;QACVG,kBAAkBA;QAClByB,iBAAiB;QACjBC,qBAAoB;;AAG1B"}

package/dist/Legend/legend-model.d.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler } from 'react';
 import { LegendOptionsBase } from '@perses-dev/core';
-export declare type LegendComponentOptions = LegendOptionsBase;
+export type LegendComponentOptions = LegendOptionsBase;
 export interface LegendItem {
     id: string;
     label: string;
@@ -19,6 +19,6 @@ export interface LegendItem {
  *   value. When the associated entry for a legend item is `true`, that item
  *   will be treated as selected and visually highlighted.
  */
-export declare type SelectedLegendItemState = Record<LegendItem['id'], boolean> | 'ALL';
+export type SelectedLegendItemState = Record<LegendItem['id'], boolean> | 'ALL';
 export declare function isLegendItemVisuallySelected(item: LegendItem, selectedItems: SelectedLegendItemState): boolean;
 //# sourceMappingURL=legend-model.d.ts.map

package/dist/Legend/legend-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"legend-model.d.ts","sourceRoot":"","sources":["../../src/Legend/legend-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AASrD,oBAAY,sBAAsB,GAAG,iBAAiB,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE/B,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED;;;;;;GAMG;AACH,oBAAY,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC;AAEhF,wBAAgB,4BAA4B,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,uBAAuB,WAIpG"}
+{"version":3,"file":"legend-model.d.ts","sourceRoot":"","sources":["../../src/Legend/legend-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AASrD,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE/B,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED;;;;;;GAMG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC;AAEhF,wBAAgB,4BAA4B,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,EAAE,uBAAuB,GAAG,OAAO,CAI9G"}

package/dist/Legend/legend-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/legend-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEventHandler } from 'react';\nimport { LegendOptionsBase } from '@perses-dev/core';\n\n// This file contains legend-related model code specific to the legend component.\n// See the `core` package for common/shared legend model code and the\n// `plugin-system` package for legend model code specific to panel plugin specs.\n\n// Note: explicitly defining different options for the legend component and\n// legend spec that extend from some common options, so we can allow the\n// component and the spec to diverge in some upcoming work.\nexport type LegendComponentOptions = LegendOptionsBase;\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  color: string;\n\n  /**\n   * Additional data for the legend item. Useful for laying out additional\n   * columns when using a table legend.\n   */\n  data?: Record<string, unknown>;\n\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\n/**\n * State of selected items in the legend.\n * - When \"ALL\", all legend items are selected, but not visually highlighted.\n * - Otherwise, it is a Record that associates legend item ids with a boolean\n *   value. When the associated entry for a legend item is `true`, that item\n *   will be treated as selected and visually highlighted.\n */\nexport type SelectedLegendItemState = Record<LegendItem['id'], boolean> | 'ALL';\n\nexport function isLegendItemVisuallySelected(item: LegendItem, selectedItems: SelectedLegendItemState) {\n  // In the \"ALL\" case, technically all legend items are selected, but we do\n  // not render them differently.\n  return selectedItems !== 'ALL' && !!selectedItems[item.id];\n}\n"],"names":["isLegendItemVisuallySelected","item","selectedItems","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;AAqCjC,OAAO,SAASA,6BAA6BC,IAAgB,EAAEC,aAAsC;IACnG,0EAA0E;IAC1E,+BAA+B;IAC/B,OAAOA,kBAAkB,SAAS,CAAC,CAACA,aAAa,CAACD,KAAKE,GAAG;AAC5D"}
+{"version":3,"sources":["../../src/Legend/legend-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MouseEventHandler } from 'react';\nimport { LegendOptionsBase } from '@perses-dev/core';\n\n// This file contains legend-related model code specific to the legend component.\n// See the `core` package for common/shared legend model code and the\n// `plugin-system` package for legend model code specific to panel plugin specs.\n\n// Note: explicitly defining different options for the legend component and\n// legend spec that extend from some common options, so we can allow the\n// component and the spec to diverge in some upcoming work.\nexport type LegendComponentOptions = LegendOptionsBase;\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  color: string;\n\n  /**\n   * Additional data for the legend item. Useful for laying out additional\n   * columns when using a table legend.\n   */\n  data?: Record<string, unknown>;\n\n  onClick?: MouseEventHandler<HTMLElement>;\n}\n\n/**\n * State of selected items in the legend.\n * - When \"ALL\", all legend items are selected, but not visually highlighted.\n * - Otherwise, it is a Record that associates legend item ids with a boolean\n *   value. When the associated entry for a legend item is `true`, that item\n *   will be treated as selected and visually highlighted.\n */\nexport type SelectedLegendItemState = Record<LegendItem['id'], boolean> | 'ALL';\n\nexport function isLegendItemVisuallySelected(item: LegendItem, selectedItems: SelectedLegendItemState): boolean {\n  // In the \"ALL\" case, technically all legend items are selected, but we do\n  // not render them differently.\n  return selectedItems !== 'ALL' && !!selectedItems[item.id];\n}\n"],"names":["isLegendItemVisuallySelected","item","selectedItems","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;AAqCjC,OAAO,SAASA,6BAA6BC,IAAgB,EAAEC,aAAsC;IACnG,0EAA0E;IAC1E,+BAA+B;IAC/B,OAAOA,kBAAkB,SAAS,CAAC,CAACA,aAAa,CAACD,KAAKE,EAAE,CAAC;AAC5D"}

package/dist/LineChart/LineChart.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 import { FormatOptions } from '@perses-dev/core';
 import type { EChartsCoreOption, GridComponentOption, LegendComponentOption, YAXisComponentOption } from 'echarts';
-import { EChartsDataFormat, ChartInstance } from '../model/graph';
+import { EChartsDataFormat, ChartInstance } from '../model';
 import { TooltipConfig } from '../TimeSeriesTooltip';
 import { ZoomEventData } from '../utils';
 export interface LineChartProps {

package/dist/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA0B,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE1F,OAAO,EAAuC,aAAa,EAA0B,MAAM,sBAAsB,CAAC;AAElH,OAAO,EAOL,aAAa,EACd,MAAM,UAAU,CAAC;AAgBlB,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GAuPpB,CAAC"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAAkD,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA0B,aAAa,EAAE,MAAM,UAAU,CAAC;AAEpF,OAAO,EAAuC,aAAa,EAA0B,MAAM,sBAAsB,CAAC;AAClH,OAAO,EAOL,aAAa,EACd,MAAM,UAAU,CAAC;AAgBlB,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,SAAS,0GAmPpB,CAAC"}

package/dist/LineChart/LineChart.js

@@ -18,9 +18,8 @@ import { LineChart as EChartsLineChart } from 'echarts/charts';
 import { GridComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { EChart } from '../EChart';
-import { useChartsTheme } from '../context/ChartsProvider';
+import { useChartsTheme, useTimeZone } from '../context';
 import { LineChartTooltip, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';
-import { useTimeZone } from '../context/TimeZoneProvider';
 import { clearHighlightedSeries, enableDataZoom, getDateRange, getFormattedDate, getFormattedAxis, restoreChart } from '../utils';
 use([
     EChartsLineChart,
@@ -35,18 +34,17 @@ use([
     LegendComponent,
     CanvasRenderer
 ]);
-export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height , data , yAxis , format , grid , legend , tooltipConfig =DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }, ref) {
-    var _option_tooltip;
+export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height, data, yAxis, format, grid, legend, tooltipConfig = DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
     const [showTooltip, setShowTooltip] = useState(true);
     const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState(null);
-    const { timeZone  } = useTimeZone();
+    const { timeZone } = useTimeZone();
     const [isDragging, setIsDragging] = useState(false);
     const [startX, setStartX] = useState(0);
     useImperativeHandle(ref, ()=>{
         return {
-            highlightSeries ({ id  }) {
+            highlightSeries ({ id }) {
                 if (!chartRef.current) {
                     // when chart undef, do not highlight series when hovering over legend
                     return;
@@ -75,10 +73,8 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
-                var _params_batch__startValue;
-                const startIndex = (_params_batch__startValue = params.batch[0].startValue) !== null && _params_batch__startValue !== void 0 ? _params_batch__startValue : 0;
-                var _params_batch__endValue;
-                const endIndex = (_params_batch__endValue = params.batch[0].endValue) !== null && _params_batch__endValue !== void 0 ? _params_batch__endValue : data.xAxis.length - 1;
+                const startIndex = params.batch[0].startValue ?? 0;
+                const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;
                 const xAxisStartValue = data.xAxis[startIndex];
                 const xAxisEndValue = data.xAxis[endIndex];
                 if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
@@ -100,14 +96,13 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
     if (chartRef.current !== undefined) {
         enableDataZoom(chartRef.current);
     }
-    const { noDataOption  } = chartsTheme;
+    const { noDataOption } = chartsTheme;
     const option = useMemo(()=>{
         if (data.timeSeries === undefined) return {};
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
         // empty array because a `null` value will throw an error.
         if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
-        var _data_rangeMs;
-        const rangeMs = (_data_rangeMs = data.rangeMs) !== null && _data_rangeMs !== void 0 ? _data_rangeMs : getDateRange(data.xAxis);
+        const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);
         const option = {
             series: data.timeSeries,
             xAxis: {
@@ -162,7 +157,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
         noDataVariant
     ]);
     return /*#__PURE__*/ _jsxs(Box, {
-        sx: {
+        style: {
             height
         },
         onClick: (e)=>{
@@ -192,7 +187,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
             }
         },
         onMouseDown: (e)=>{
-            const { clientX  } = e;
+            const { clientX } = e;
             setIsDragging(true);
             setStartX(clientX);
         },
@@ -201,7 +196,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
             if (!(e.target instanceof HTMLCanvasElement)) {
                 return;
             }
-            const { clientX  } = e;
+            const { clientX } = e;
             if (isDragging) {
                 const deltaX = clientX - startX;
                 if (deltaX > 0) {
@@ -241,7 +236,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
             }
         },
         children: [
-            showTooltip === true && ((_option_tooltip = option.tooltip) === null || _option_tooltip === void 0 ? void 0 : _option_tooltip.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(LineChartTooltip, {
+            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,