@perses-dev/components 0.30.0 → 0.31.0

package/dist/Legend/CompactLegend.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-import { LegendItem } from '../model';
-interface CompactLegendProps {
+import { LegendItem, SelectedLegendItemState } from '../model';
+import { ListLegendItemProps } from './ListLegendItem';
+export interface CompactLegendProps {
     height: number;
     items: LegendItem[];
+    selectedItems: SelectedLegendItemState;
+    onLegendItemClick: ListLegendItemProps['onClick'];
 }
 /**
  * CompactLegend is default and used when legend items need to show side by side
@@ -10,6 +13,5 @@ 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 }: CompactLegendProps): JSX.Element;
-export {};
+export declare function CompactLegend({ height, items, selectedItems, onLegendItemClick }: 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,MAAM,UAAU,CAAC;AAGtC,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,kBAAkB,eAgBlE"}
+{"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"}

package/dist/Legend/CompactLegend.js

@@ -12,13 +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';
 /**
  * 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  }) {
+ */ export function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
     return /*#__PURE__*/ _jsx(Box, {
         component: "ul",
         sx: {
@@ -35,6 +36,8 @@ import { ListLegendItem } from './ListLegendItem';
         },
         children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
                 item: item,
+                isVisuallySelected: isLegendItemVisuallySelected(item, selectedItems),
+                onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',
                     float: 'left',

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 } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\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 }: 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          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","CompactLegend","height","items","component","sx","width","padding","overflowY","margin","map","item","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;AAEpC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAOlD;;;;;CAKC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAsB,EAAE;IACnE,qBACE,KAACJ,GAAG;QAACK,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEJ,MAAM;YAAEK,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGN,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,iBACd,KAACX,cAAc;gBAEbW,IAAI,EAAEA,IAAI;gBACVN,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbM,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eANIF,IAAI,CAACG,EAAE,CAOZ,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 { 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"}

package/dist/Legend/Legend.d.ts

@@ -1,19 +1,21 @@
 /// <reference types="react" />
-import { LegendOptions, LegendItem } from '../model';
-import { ListLegendProps } from './ListLegend';
+import { LegendOptions, LegendItem, SelectedLegendItemState } from '../model';
 export interface LegendProps {
     width: number;
     height: number;
     data: LegendItem[];
     options: LegendOptions;
     /**
-     * Additional props that will be passed to the list variation of the legend
-     * that is used when:
-     * - The legend is positioned on the right.
-     * - The legend has a large number of items to display and requires virtualization
-     *   to render performantly.
+     * State of selected items in the legend.
+     *
+     * Selected legend item state is a controlled value that should be managed using a
+     * combination of this prop and `onSelectedChange`.
      */
-    listProps?: Pick<ListLegendProps, 'initialRowHeight'>;
+    selectedItems: SelectedLegendItemState;
+    /**
+     * Callback fired when the selected items in the legend changes.
+     */
+    onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;
 }
-export declare function Legend({ width, height, options, data, listProps }: LegendProps): JSX.Element;
+export declare function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange }: 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":";AAcA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAG3D,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;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;CACvD;AASD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,WAAW,eAsC9E"}
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAI9E,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,eAiFzG"}

package/dist/Legend/Legend.js

@@ -12,6 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { produce } from 'immer';
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
 // When the number of items to display is above this number, it is likely to
@@ -20,7 +21,45 @@ import { CompactLegend } from './CompactLegend';
 // 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 , listProps  }) {
+export function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange  }) {
+    const onLegendItemClick = (e, seriesId)=>{
+        const isModifiedClick = e.metaKey || e.shiftKey;
+        const newSelected = produce(selectedItems, (draft)=>{
+            if (draft === 'ALL') {
+                return {
+                    [seriesId]: true
+                };
+            }
+            const isSelected = !!draft[seriesId];
+            // Clicks with modifier key can select multiple items.
+            if (isModifiedClick) {
+                if (isSelected) {
+                    // Modified click on already selected item. Remove that item.
+                    delete draft[seriesId];
+                } else {
+                    // Modified click on not-selected item. Add it.
+                    draft[seriesId] = true;
+                }
+                return draft;
+            }
+            if (isSelected) {
+                // Clicked item was already selected. Unselect it and return to
+                // ALL state.
+                return 'ALL';
+            }
+            // Select clicked item.
+            return {
+                [seriesId]: true
+            };
+        });
+        onSelectedItemsChange(newSelected);
+    };
+    const commonLegendProps = {
+        height,
+        items: data,
+        selectedItems,
+        onLegendItemClick
+    };
     if (options.position === 'Right') {
         return /*#__PURE__*/ _jsx(Box, {
             sx: {
@@ -31,10 +70,8 @@ export function Legend({ width , height , options , data , listProps  }) {
                 right: 0
             },
             children: /*#__PURE__*/ _jsx(ListLegend, {
-                items: data,
-                width: width,
-                height: height,
-                ...listProps
+                ...commonLegendProps,
+                width: width
             })
         });
     }
@@ -51,13 +88,10 @@ export function Legend({ width , height , options , data , listProps  }) {
             bottom: 0
         },
         children: needsVirtualization ? /*#__PURE__*/ _jsx(ListLegend, {
-            items: data,
-            width: width,
-            height: height,
-            ...listProps
+            ...commonLegendProps,
+            width: width
         }) : /*#__PURE__*/ _jsx(CompactLegend, {
-            items: data,
-            height: height
+            ...commonLegendProps
         })
     });
 }

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 { LegendOptions, LegendItem } from '../model';\nimport { ListLegend, ListLegendProps } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\n\n  /**\n   * Additional props that will be passed to the list variation of the legend\n   * that is used when:\n   * - The legend is positioned on the right.\n   * - The legend has a large number of items to display and requires virtualization\n   *   to render performantly.\n   */\n  listProps?: Pick<ListLegendProps, 'initialRowHeight'>;\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, listProps }: LegendProps) {\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        <ListLegend items={data} width={width} height={height} {...listProps} />\n      </Box>\n    );\n  }\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  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\n      }}\n    >\n      {needsVirtualization ? (\n        <ListLegend items={data} width={width} height={height} {...listProps} />\n      ) : (\n        <CompactLegend items={data} height={height} />\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegend","CompactLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","listProps","position","sx","top","right","items","needsVirtualization","length","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;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,UAAU,QAAyB,cAAc,CAAC;AAC3D,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAkBhD,4EAA4E;AAC5E,6EAA6E;AAC7E,mFAAmF;AACnF,6EAA6E;AAC7E,wDAAwD;AACxD,MAAMC,yBAAyB,GAAG,GAAG,AAAC;AAEtC,OAAO,SAASC,MAAM,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAEC,SAAS,CAAA,EAAe,EAAE;IAC/E,IAAIF,OAAO,CAACG,QAAQ,KAAK,OAAO,EAAE;QAChC,qBACE,KAACV,GAAG;YACFW,EAAE,EAAE;gBACFN,KAAK,EAAEA,KAAK;gBACZC,MAAM,EAAEA,MAAM;gBACdI,QAAQ,EAAE,UAAU;gBACpBE,GAAG,EAAE,CAAC;gBACNC,KAAK,EAAE,CAAC;aACT;sBAED,cAAA,KAACZ,UAAU;gBAACa,KAAK,EAAEN,IAAI;gBAAEH,KAAK,EAAEA,KAAK;gBAAEC,MAAM,EAAEA,MAAM;gBAAG,GAAGG,SAAS;cAAI;UACpE,CACN;IACJ,CAAC;IAED,2EAA2E;IAC3E,+EAA+E;IAC/E,2EAA2E;IAC3E,sBAAsB;IACtB,MAAMM,mBAAmB,GAAGP,IAAI,CAACQ,MAAM,IAAIb,yBAAyB,AAAC;IACrE,qBACE,KAACH,GAAG;QACFW,EAAE,EAAE;YACFN,KAAK,EAAEA,KAAK;YACZC,MAAM,EAAEA,MAAM;YACdI,QAAQ,EAAE,UAAU;YACpBO,MAAM,EAAE,CAAC;SACV;kBAEAF,mBAAmB,iBAClB,KAACd,UAAU;YAACa,KAAK,EAAEN,IAAI;YAAEH,KAAK,EAAEA,KAAK;YAAEC,MAAM,EAAEA,MAAM;YAAG,GAAGG,SAAS;UAAI,iBAExE,KAACP,aAAa;YAACY,KAAK,EAAEN,IAAI;YAAEF,MAAM,EAAEA,MAAM;UAAI,AAC/C;MACG,CACN;AACJ,CAAC"}
+{"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 { LegendOptions, LegendItem, SelectedLegendItemState } from '../model';\nimport { ListLegend, ListLegendProps } from './ListLegend';\nimport { CompactLegend, CompactLegendProps } from './CompactLegend';\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 commonLegendProps: ListLegendProps | CompactLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    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        <ListLegend {...commonLegendProps} width={width} />\n      </Box>\n    );\n  }\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  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\n      }}\n    >\n      {needsVirtualization ? (\n        <ListLegend {...commonLegendProps} width={width} />\n      ) : (\n        <CompactLegend {...commonLegendProps} />\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","produce","ListLegend","CompactLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","commonLegendProps","items","position","sx","top","right","needsVirtualization","length","bottom"],"mappings":"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"}

package/dist/Legend/ListLegend.d.ts

@@ -1,15 +1,12 @@
 /// <reference types="react" />
-import { LegendItem } from '../model';
+import { LegendItem, SelectedLegendItemState } from '../model';
+import { ListLegendItemProps } from './ListLegendItem';
 export interface ListLegendProps {
     items: LegendItem[];
     height: number;
     width: number;
-    /**
-     * The height used when initially laying out items in the list. Once items
-     * render, the height is determined based on the content. This is needed
-     * because the list is virtualized.
-     */
-    initialRowHeight?: number;
+    selectedItems: SelectedLegendItemState;
+    onLegendItemClick: ListLegendItemProps['onClick'];
 }
 /**
  * ListLegend is used when legend.position is 'right' since legend items are
@@ -17,5 +14,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, initialRowHeight }: ListLegendProps): JSX.Element;
+export declare function ListLegend({ items, height, width, selectedItems, onLegendItemClick }: 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":";AAgBA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAA6C,EAAE,EAAE,eAAe,eAgIlH"}
+{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAeA,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,eA6CrG"}

package/dist/Legend/ListLegend.js

@@ -11,91 +11,42 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from '@mui/material';
-import { VariableSizeList } from 'react-window';
-import { useRef, useEffect, forwardRef, useCallback } from 'react';
+import { useTheme, Box } from '@mui/material';
+import { Virtuoso } from 'react-virtuoso';
+import { isLegendItemVisuallySelected } from '../model';
 import { ListLegendItem } from './ListLegendItem';
-const DEFAULT_INITIAL_ROW_HEIGHT = 26;
 /**
  * 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 , initialRowHeight =DEFAULT_INITIAL_ROW_HEIGHT  }) {
-    // Storing a ref to the react-window `VariableSizeList`, so we can call
-    // `resetAfterIndex` to resize the list after mouseover/out events to account
-    // for the change in list items on hover.
-    const listRef = useRef(null);
-    // Storing row heights, so we can use dynamic heights, which enables the
-    // user the hover to show the full label, while still having a virtualized
-    // list.
-    const rowHeights = useRef({});
+ */ export function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
     const theme = useTheme();
-    // Padding value used throughout to adjust the react-window virtual layouts
-    // to simulate padding per the guidance from:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
+    // Padding value used in the react virtuoso header/footer components to
+    // simulate top/bottom padding based on recommendation in this
+    // issue.
+    // https://github.com/petyosi/react-virtuoso/issues/238
     const LIST_PADDING = parseInt(theme.spacing(1), 10);
+    const mockPadding = /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            width: '100%',
+            height: `${LIST_PADDING}px`
+        }
+    });
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
-    // Gets the row height for a given item to enable the virtualized list to
-    // render the row properly.
-    function getRowHeight(index) {
-        const currentHeight = rowHeights.current[index];
-        return currentHeight !== null && currentHeight !== void 0 ? currentHeight : initialRowHeight;
-    }
-    // Set the height for a given item to enable the virtualized list to
-    // adjust to size changes.
-    function setRowHeight(index, size) {
-        var // Tell the virtualized list that items changed size and need to be
-        // re-evaluated.
-        ref;
-        (ref = listRef.current) === null || ref === void 0 ? void 0 : ref.resetAfterIndex(0);
-        rowHeights.current = {
-            ...rowHeights.current,
-            [index]: size
-        };
-    }
-    // Renderer for virtualized rows in `VariableSizeList`.
-    function ListLegendRow({ index , style  }) {
-        // Storing a ref to the row's `ListLegendItem`, so we can get the "real"
-        // height and adjust the height of the row based on it, enabling the dynamic
-        // heights on hover.
-        const rowRef = useRef(null);
-        // useCallback is important here to avoid constantly running the useEffect
-        // that calls this in `ListLegendItem`.
-        const handleRowLayoutChange = useCallback(()=>{
-            // Handle size changes from hovering on a list item.
-            if (rowRef.current) {
-                setRowHeight(index, rowRef.current.clientHeight);
-            }
-        }, [
-            index
-        ]);
-        // Adjust row heights when the row being rendered changes.
-        useEffect(()=>{
-            handleRowLayoutChange();
-        }, [
-            handleRowLayoutChange
-        ]);
-        const item = items[index];
-        if (!item) {
-            // This shouldn't happen if configured correctly, but covering
-            // the case to appease the type checking and to cover any edge
-            // cases.
-            return null;
-        }
-        const originalTop = parseFloat(`${style.top}`);
-        return /*#__PURE__*/ _jsx("div", {
-            style: {
-                ...style,
-                // Adjust the top position to simulate top padding on the list.
-                top: `${originalTop + LIST_PADDING}px`
-            },
-            children: /*#__PURE__*/ _jsx(ListLegendItem, {
-                ref: rowRef,
+    return /*#__PURE__*/ _jsx(Virtuoso, {
+        style: {
+            height,
+            width
+        },
+        data: items,
+        itemContent: (index, item)=>{
+            return /*#__PURE__*/ _jsx(ListLegendItem, {
                 item: item,
                 truncateLabel: truncateLabels,
-                onLayoutChange: handleRowLayoutChange,
+                isVisuallySelected: isLegendItemVisuallySelected(item, selectedItems),
+                onClick: onLegendItemClick,
                 sx: {
                     // Having an explicit width is important for the ellipsizing to
                     // work correctly. Subtract padding to simulate padding.
@@ -103,33 +54,17 @@ const DEFAULT_INITIAL_ROW_HEIGHT = 26;
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }
-            }, item.id)
-        });
-    }
-    // Renderer for the inner container element of the `VariableSizeList` used
-    // to adjust styles to simulate padding on the list per:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-    const InnerElementType = /*#__PURE__*/ forwardRef(function InnerElementType({ style , ...rest }, ref) {
-        const originalHeight = (style === null || style === void 0 ? void 0 : style.height) ? parseFloat(`${style === null || style === void 0 ? void 0 : style.height}`) : 0;
-        return /*#__PURE__*/ _jsx("div", {
-            ref: ref,
-            role: "list",
-            style: {
-                ...style,
-                // Adjust height to account for simulated padding.
-                height: `${originalHeight + LIST_PADDING * 2}px`
+            }, item.id);
+        },
+        role: "list",
+        components: {
+            Header: ()=>{
+                return mockPadding;
             },
-            ...rest
-        });
-    });
-    return /*#__PURE__*/ _jsx(VariableSizeList, {
-        height: height,
-        width: width,
-        itemCount: items.length,
-        itemSize: getRowHeight,
-        innerElementType: InnerElementType,
-        ref: listRef,
-        children: ListLegendRow
+            Footer: ()=>{
+                return mockPadding;
+            }
+        }
     });
 }
 

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 { useTheme } from '@mui/material';\nimport { VariableSizeList, ListChildComponentProps } from 'react-window';\nimport { useRef, useEffect, forwardRef, useCallback } from 'react';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n\n  /**\n   * The height used when initially laying out items in the list. Once items\n   * render, the height is determined based on the content. This is needed\n   * because the list is virtualized.\n   */\n  initialRowHeight?: number;\n}\n\nconst DEFAULT_INITIAL_ROW_HEIGHT = 26;\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, initialRowHeight = DEFAULT_INITIAL_ROW_HEIGHT }: ListLegendProps) {\n  // Storing a ref to the react-window `VariableSizeList`, so we can call\n  // `resetAfterIndex` to resize the list after mouseover/out events to account\n  // for the change in list items on hover.\n  const listRef = useRef<VariableSizeList>(null);\n  // Storing row heights, so we can use dynamic heights, which enables the\n  // user the hover to show the full label, while still having a virtualized\n  // list.\n  const rowHeights = useRef<Record<number, number>>({});\n\n  const theme = useTheme();\n  // Padding value used throughout to adjust the react-window virtual layouts\n  // to simulate padding per the guidance from:\n  // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list\n  const LIST_PADDING = parseInt(theme.spacing(1), 10);\n\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n\n  // Gets the row height for a given item to enable the virtualized list to\n  // render the row properly.\n  function getRowHeight(index: number) {\n    const currentHeight = rowHeights.current[index];\n    return currentHeight ?? initialRowHeight;\n  }\n\n  // Set the height for a given item to enable the virtualized list to\n  // adjust to size changes.\n  function setRowHeight(index: number, size: number) {\n    // Tell the virtualized list that items changed size and need to be\n    // re-evaluated.\n    listRef.current?.resetAfterIndex(0);\n    rowHeights.current = { ...rowHeights.current, [index]: size };\n  }\n\n  // Renderer for virtualized rows in `VariableSizeList`.\n  function ListLegendRow({ index, style }: ListChildComponentProps) {\n    // Storing a ref to the row's `ListLegendItem`, so we can get the \"real\"\n    // height and adjust the height of the row based on it, enabling the dynamic\n    // heights on hover.\n    const rowRef = useRef<HTMLDivElement | null>(null);\n\n    // useCallback is important here to avoid constantly running the useEffect\n    // that calls this in `ListLegendItem`.\n    const handleRowLayoutChange = useCallback(() => {\n      // Handle size changes from hovering on a list item.\n      if (rowRef.current) {\n        setRowHeight(index, rowRef.current.clientHeight);\n      }\n    }, [index]);\n\n    // Adjust row heights when the row being rendered changes.\n    useEffect(() => {\n      handleRowLayoutChange();\n    }, [handleRowLayoutChange]);\n\n    const item = items[index];\n\n    if (!item) {\n      // This shouldn't happen if configured correctly, but covering\n      // the case to appease the type checking and to cover any edge\n      // cases.\n      return null;\n    }\n\n    const originalTop = parseFloat(`${style.top}`);\n\n    return (\n      <div\n        style={{\n          ...style,\n          // Adjust the top position to simulate top padding on the list.\n          top: `${originalTop + LIST_PADDING}px`,\n        }}\n      >\n        <ListLegendItem\n          ref={rowRef}\n          key={item.id}\n          item={item}\n          truncateLabel={truncateLabels}\n          onLayoutChange={handleRowLayoutChange}\n          sx={{\n            // Having an explicit width is important for the ellipsizing to\n            // work correctly. Subtract padding to simulate padding.\n            width: width - LIST_PADDING,\n            wordBreak: 'break-word',\n            overflow: 'hidden',\n          }}\n        />\n      </div>\n    );\n  }\n\n  // Renderer for the inner container element of the `VariableSizeList` used\n  // to adjust styles to simulate padding on the list per:\n  // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list\n  const InnerElementType = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(function InnerElementType(\n    { style, ...rest },\n    ref\n  ) {\n    const originalHeight = style?.height ? parseFloat(`${style?.height}`) : 0;\n\n    return (\n      <div\n        ref={ref}\n        role=\"list\"\n        style={{\n          ...style,\n          // Adjust height to account for simulated padding.\n          height: `${originalHeight + LIST_PADDING * 2}px`,\n        }}\n        {...rest}\n      />\n    );\n  });\n\n  return (\n    <VariableSizeList\n      height={height}\n      width={width}\n      itemCount={items.length}\n      itemSize={getRowHeight}\n      innerElementType={InnerElementType}\n      ref={listRef}\n    >\n      {ListLegendRow}\n    </VariableSizeList>\n  );\n}\n"],"names":["useTheme","VariableSizeList","useRef","useEffect","forwardRef","useCallback","ListLegendItem","DEFAULT_INITIAL_ROW_HEIGHT","ListLegend","items","height","width","initialRowHeight","listRef","rowHeights","theme","LIST_PADDING","parseInt","spacing","truncateLabels","length","getRowHeight","index","currentHeight","current","setRowHeight","size","resetAfterIndex","ListLegendRow","style","rowRef","handleRowLayoutChange","clientHeight","item","originalTop","parseFloat","top","div","ref","truncateLabel","onLayoutChange","sx","wordBreak","overflow","id","InnerElementType","rest","originalHeight","role","itemCount","itemSize","innerElementType"],"mappings":"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"}
+{"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 { useTheme, Box } from '@mui/material';\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  const theme = useTheme();\n  // Padding value used in the react virtuoso header/footer components to\n  // simulate top/bottom padding based on recommendation in this\n  // issue.\n  // https://github.com/petyosi/react-virtuoso/issues/238\n  const LIST_PADDING = parseInt(theme.spacing(1), 10);\n  const mockPadding = <Box sx={{ width: '100%', height: `${LIST_PADDING}px` }}></Box>;\n\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 - LIST_PADDING,\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n      components={{\n        Header: () => {\n          return mockPadding;\n        },\n        Footer: () => {\n          return mockPadding;\n        },\n      }}\n    />\n  );\n}\n"],"names":["useTheme","Box","Virtuoso","isLegendItemVisuallySelected","ListLegendItem","ListLegend","items","height","width","selectedItems","onLegendItemClick","theme","LIST_PADDING","parseInt","spacing","mockPadding","sx","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","wordBreak","overflow","id","role","components","Header","Footer"],"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,EAAEC,GAAG,QAAQ,eAAe,CAAC;AAC9C,SAASC,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,MAAMC,KAAK,GAAGX,QAAQ,EAAE,AAAC;IACzB,uEAAuE;IACvE,8DAA8D;IAC9D,SAAS;IACT,uDAAuD;IACvD,MAAMY,YAAY,GAAGC,QAAQ,CAACF,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,AAAC;IACpD,MAAMC,WAAW,iBAAG,KAACd,GAAG;QAACe,EAAE,EAAE;YAAER,KAAK,EAAE,MAAM;YAAED,MAAM,EAAE,CAAC,EAAEK,YAAY,CAAC,EAAE,CAAC;SAAE;MAAQ,AAAC;IAEpF,6DAA6D;IAC7D,MAAMK,cAAc,GAAGX,KAAK,CAACY,MAAM,GAAG,CAAC,AAAC;IAExC,qBACE,KAAChB,QAAQ;QACPiB,KAAK,EAAE;YAAEZ,MAAM;YAAEC,KAAK;SAAE;QACxBY,IAAI,EAAEd,KAAK;QACXe,WAAW,EAAE,CAACC,KAAK,EAAEC,IAAI,GAAK;YAC5B,qBACE,KAACnB,cAAc;gBAEbmB,IAAI,EAAEA,IAAI;gBACVC,aAAa,EAAEP,cAAc;gBAC7BQ,kBAAkB,EAAEtB,4BAA4B,CAACoB,IAAI,EAAEd,aAAa,CAAC;gBACrEiB,OAAO,EAAEhB,iBAAiB;gBAC1BM,EAAE,EAAE;oBACF,+DAA+D;oBAC/D,wDAAwD;oBACxDR,KAAK,EAAEA,KAAK,GAAGI,YAAY;oBAC3Be,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAE,QAAQ;iBACnB;eAXIL,IAAI,CAACM,EAAE,CAYZ,CACF;QACJ,CAAC;QACDC,IAAI,EAAC,MAAM;QACXC,UAAU,EAAE;YACVC,MAAM,EAAE,IAAM;gBACZ,OAAOjB,WAAW,CAAC;YACrB,CAAC;YACDkB,MAAM,EAAE,IAAM;gBACZ,OAAOlB,WAAW,CAAC;YACrB,CAAC;SACF;MACD,CACF;AACJ,CAAC"}

package/dist/Legend/ListLegendItem.d.ts

@@ -1,8 +1,14 @@
 import React from 'react';
 import { ListItemProps } from '@mui/material';
 import { LegendItem } from '../model';
-interface ListLegendItemProps extends ListItemProps<'div'> {
+export interface ListLegendItemProps extends Omit<ListItemProps<'div'>, 'onClick'> {
     item: LegendItem;
+    /**
+     * When true, the item is rendered differently to visually communicate it is
+     * selected.
+     */
+    isVisuallySelected?: boolean;
+    onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => void;
     /**
      * When `true`, will keep labels to a single line with overflow ellipsized. The
      * full content will be shown on hover.
@@ -10,12 +16,6 @@ interface ListLegendItemProps extends ListItemProps<'div'> {
      * When `false` or unset, will show the full label.
      */
     truncateLabel?: boolean;
-    /**
-     * Called when the layout of the legend item changes as a result of the hover
-     * behavior when `truncateLabel` is `true`.
-     */
-    onLayoutChange?: () => void;
 }
-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" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction" | "item" | "truncateLabel" | "onLayoutChange"> & React.RefAttributes<HTMLDivElement>>>;
-export {};
+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" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction" | "item" | "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,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,mBAAoB,SAAQ,aAAa,CAAC,KAAK,CAAC;IACxD,IAAI,EAAE,UAAU,CAAC;IAEjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAyDD,eAAO,MAAM,cAAc,g6JAAiC,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;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"}

package/dist/Legend/ListLegendItem.js

@@ -12,11 +12,11 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import React, { forwardRef, useState, useEffect } from 'react';
+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 , onLayoutChange , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
     const [noWrap, setNoWrap] = useState(truncateLabel);
     function handleMouseOver() {
         if (truncateLabel) {
@@ -28,14 +28,11 @@ const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ it
             setNoWrap(true);
         }
     }
-    useEffect(()=>{
-        // When `noWrap` changes, so does the layout of the component. Notifies the
-        // parent, so it can handle those changes.
-        onLayoutChange === null || onLayoutChange === void 0 ? void 0 : onLayoutChange();
-    }, [
-        noWrap,
-        onLayoutChange
-    ]);
+    const handleClick = (e)=>{
+        var ref;
+        onClick(e, item.id);
+        (ref = item.onClick) === null || ref === void 0 ? void 0 : ref.call(item, e);
+    };
     return /*#__PURE__*/ _createElement(ListItem, {
         ...others,
         component: "div",
@@ -46,8 +43,8 @@ const ListLegendItemBase = /*#__PURE__*/ forwardRef(function ListLegendItem({ it
         }, sx),
         dense: true,
         key: item.id,
-        onClick: item.onClick,
-        selected: item.isSelected,
+        onClick: handleClick,
+        selected: isVisuallySelected,
         ref: ref,
         children: [
             /*#__PURE__*/ _jsx(Box, {

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, useEffect } from 'react';\nimport { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps extends ListItemProps<'div'> {\n  item: LegendItem;\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  /**\n   * Called when the layout of the legend item changes as a result of the hover\n   * behavior when `truncateLabel` is `true`.\n   */\n  onLayoutChange?: () => void;\n}\n\nconst ListLegendItemBase = forwardRef<HTMLDivElement, ListLegendItemProps>(function ListLegendItem(\n  { item, sx, truncateLabel, onLayoutChange, ...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  useEffect(() => {\n    // When `noWrap` changes, so does the layout of the component. Notifies the\n    // parent, so it can handle those changes.\n    onLayoutChange?.();\n  }, [noWrap, onLayoutChange]);\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={item.onClick}\n      selected={item.isSelected}\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","useEffect","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItemBase","ListLegendItem","item","sx","truncateLabel","onLayoutChange","others","ref","noWrap","setNoWrap","handleMouseOver","handleMouseOut","component","role","padding","cursor","dense","key","id","onClick","selected","isSelected","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,EAAEC,SAAS,QAAQ,OAAO,CAAC;AAC/D,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAE3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAoBtD,MAAMC,kBAAkB,iBAAGR,UAAU,CAAsC,SAASS,cAAc,CAChG,EAAEC,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAEC,aAAa,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGC,MAAM,EAAE,EACtDC,GAAG,EACH;IACA,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAACW,aAAa,CAAC,AAAC;IAEpD,SAASM,eAAe,GAAG;QACzB,IAAIN,aAAa,EAAE;YACjBK,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC;IAED,SAASE,cAAc,GAAG;QACxB,IAAIP,aAAa,EAAE;YACjBK,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;IAEDf,SAAS,CAAC,IAAM;QACd,2EAA2E;QAC3E,0CAA0C;QAC1CW,cAAc,aAAdA,cAAc,WAAI,GAAlBA,KAAAA,CAAkB,GAAlBA,cAAc,EAAI,CAAC;IACrB,CAAC,EAAE;QAACG,MAAM;QAAEH,cAAc;KAAC,CAAC,CAAC;IAE7B,qBACE,eAACR,QAAQ;QACN,GAAGS,MAAM;QACVM,SAAS,EAAC,KAAK;QACfC,IAAI,EAAC,UAAU;QACfV,EAAE,EAAEL,SAAS,CACX;YACEgB,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDZ,EAAE,CACH;QACDa,KAAK,EAAE,IAAI;QACXC,GAAG,EAAEf,IAAI,CAACgB,EAAE;QACZC,OAAO,EAAEjB,IAAI,CAACiB,OAAO;QACrBC,QAAQ,EAAElB,IAAI,CAACmB,UAAU;QACzBd,GAAG,EAAEA,GAAG;;0BAER,KAACZ,GAAG;gBAACQ,EAAE,EAAE;oBAAEmB,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACxB,gBAAgB;oBAACyB,KAAK,EAAEtB,IAAI,CAACsB,KAAK;kBAAI;cACnC;0BACN,KAAC5B,YAAY;gBACX6B,OAAO,EAAEvB,IAAI,CAACwB,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,MAAMV,cAAc,iBAAGV,KAAK,CAACuC,IAAI,CAAC9B,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 { 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"}