@perses-dev/components 0.55.0-rc.1 → 0.56.0-beta.0

package/dist/Legend/Legend.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -23,101 +24,202 @@ import { TableLegend } from "./TableLegend.js";
 // 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 }) {
-    const onLegendItemClick = (e, seriesId)=>{
-        const isModifiedClick = e.metaKey || e.shiftKey;
-        const newSelected = produce(selectedItems, (draft)=>{
-            if (draft === 'ALL') {
+export function Legend(t0) {
+    const $ = _c(36);
+    const { width, height, options, data, selectedItems, onSelectedItemsChange, onItemMouseOver, onItemMouseOut, tableProps } = t0;
+    let t1;
+    if ($[0] !== onSelectedItemsChange || $[1] !== selectedItems) {
+        t1 = (e, seriesId)=>{
+            const isModifiedClick = e.metaKey || e.shiftKey;
+            const newSelected = produce(selectedItems, (draft)=>{
+                if (draft === "ALL") {
+                    return {
+                        [seriesId]: true
+                    };
+                }
+                const isSelected = !!draft[seriesId];
+                if (isModifiedClick) {
+                    if (isSelected) {
+                        delete draft[seriesId];
+                    } else {
+                        draft[seriesId] = true;
+                    }
+                    return draft;
+                }
+                if (isSelected) {
+                    return "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);
-    };
+            });
+            onSelectedItemsChange(newSelected);
+        };
+        $[0] = onSelectedItemsChange;
+        $[1] = selectedItems;
+        $[2] = t1;
+    } else {
+        t1 = $[2];
+    }
+    const onLegendItemClick = t1;
     const mode = getLegendMode(options.mode);
-    // The bottom legend is displayed as a list when the number of items is too
-    // large and requires virtualization. Otherwise, it is rendered more compactly.
-    // We do not need this check for the right-side legend because it is always
-    // a virtualized list.
     const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;
-    const commonLegendProps = {
-        height,
-        items: data,
-        selectedItems,
-        onLegendItemClick,
-        onItemMouseOver,
-        onItemMouseOut
-    };
-    let legendContent;
-    if (mode === 'table') {
-        legendContent = /*#__PURE__*/ _jsx(TableLegend, {
-            ...commonLegendProps,
-            onSelectedItemsChange: onSelectedItemsChange,
-            width: width,
-            ...tableProps
-        });
-    } else if (options.position === 'right' || needsVirtualization) {
-        legendContent = /*#__PURE__*/ _jsx(ListLegend, {
-            ...commonLegendProps,
-            width: width,
-            onLegendItemClick: onLegendItemClick
-        });
+    let t2;
+    if ($[3] !== data || $[4] !== height || $[5] !== onItemMouseOut || $[6] !== onItemMouseOver || $[7] !== onLegendItemClick || $[8] !== selectedItems) {
+        t2 = {
+            height,
+            items: data,
+            selectedItems,
+            onLegendItemClick,
+            onItemMouseOver,
+            onItemMouseOut
+        };
+        $[3] = data;
+        $[4] = height;
+        $[5] = onItemMouseOut;
+        $[6] = onItemMouseOver;
+        $[7] = onLegendItemClick;
+        $[8] = selectedItems;
+        $[9] = t2;
     } else {
-        legendContent = /*#__PURE__*/ _jsx(CompactLegend, {
-            ...commonLegendProps,
-            onLegendItemClick: onLegendItemClick
-        });
+        t2 = $[9];
     }
-    if (options.position === 'right') {
-        return /*#__PURE__*/ _jsx(Box, {
-            style: {
+    const commonLegendProps = t2;
+    let legendContent;
+    if (mode === "table") {
+        let t3;
+        if ($[10] !== commonLegendProps || $[11] !== onSelectedItemsChange || $[12] !== tableProps || $[13] !== width) {
+            t3 = /*#__PURE__*/ _jsx(TableLegend, {
+                ...commonLegendProps,
+                onSelectedItemsChange: onSelectedItemsChange,
                 width: width,
-                height: height
-            },
-            sx: {
-                position: 'absolute',
+                ...tableProps
+            });
+            $[10] = commonLegendProps;
+            $[11] = onSelectedItemsChange;
+            $[12] = tableProps;
+            $[13] = width;
+            $[14] = t3;
+        } else {
+            t3 = $[14];
+        }
+        legendContent = t3;
+    } else {
+        if (options.position === "right" || needsVirtualization) {
+            let t3;
+            if ($[15] !== commonLegendProps || $[16] !== onLegendItemClick || $[17] !== width) {
+                t3 = /*#__PURE__*/ _jsx(ListLegend, {
+                    ...commonLegendProps,
+                    width: width,
+                    onLegendItemClick: onLegendItemClick
+                });
+                $[15] = commonLegendProps;
+                $[16] = onLegendItemClick;
+                $[17] = width;
+                $[18] = t3;
+            } else {
+                t3 = $[18];
+            }
+            legendContent = t3;
+        } else {
+            let t3;
+            if ($[19] !== commonLegendProps || $[20] !== onLegendItemClick) {
+                t3 = /*#__PURE__*/ _jsx(CompactLegend, {
+                    ...commonLegendProps,
+                    onLegendItemClick: onLegendItemClick
+                });
+                $[19] = commonLegendProps;
+                $[20] = onLegendItemClick;
+                $[21] = t3;
+            } else {
+                t3 = $[21];
+            }
+            legendContent = t3;
+        }
+    }
+    if (options.position === "right") {
+        let t3;
+        if ($[22] !== height || $[23] !== width) {
+            t3 = {
+                width,
+                height
+            };
+            $[22] = height;
+            $[23] = width;
+            $[24] = t3;
+        } else {
+            t3 = $[24];
+        }
+        let t4;
+        if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+            t4 = {
+                position: "absolute",
                 top: 0,
                 right: 0,
-                backgroundColor: (theme)=>`${theme.palette.background.default}`
-            },
+                backgroundColor: _temp
+            };
+            $[25] = t4;
+        } else {
+            t4 = $[25];
+        }
+        let t5;
+        if ($[26] !== legendContent || $[27] !== t3) {
+            t5 = /*#__PURE__*/ _jsx(Box, {
+                style: t3,
+                sx: t4,
+                children: legendContent
+            });
+            $[26] = legendContent;
+            $[27] = t3;
+            $[28] = t5;
+        } else {
+            t5 = $[28];
+        }
+        return t5;
+    }
+    let t3;
+    if ($[29] !== height || $[30] !== width) {
+        t3 = {
+            width,
+            height
+        };
+        $[29] = height;
+        $[30] = width;
+        $[31] = t3;
+    } else {
+        t3 = $[31];
+    }
+    let t4;
+    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = {
+            position: "absolute",
+            bottom: 0,
+            backgroundColor: _temp2
+        };
+        $[32] = t4;
+    } else {
+        t4 = $[32];
+    }
+    let t5;
+    if ($[33] !== legendContent || $[34] !== t3) {
+        t5 = /*#__PURE__*/ _jsx(Box, {
+            style: t3,
+            sx: t4,
             children: legendContent
         });
+        $[33] = legendContent;
+        $[34] = t3;
+        $[35] = t5;
+    } else {
+        t5 = $[35];
     }
-    // Position bottom
-    return /*#__PURE__*/ _jsx(Box, {
-        style: {
-            width: width,
-            height: height
-        },
-        sx: {
-            position: 'absolute',
-            bottom: 0,
-            backgroundColor: (theme)=>`${theme.palette.background.default}`
-        },
-        children: legendContent
-    });
+    return t5;
+}
+function _temp2(theme_0) {
+    return `${theme_0.palette.background.default}`;
+}
+function _temp(theme) {
+    return `${theme.palette.background.default}`;
 }
 
 //# sourceMappingURL=Legend.js.map

package/dist/Legend/Legend.js.map

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

package/dist/Legend/LegendColorBadge.js

@@ -11,21 +11,66 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { Box } from "@mui/material";
 import { memo } from "react";
 import { combineSx } from "../utils/index.js";
-export const LegendColorBadge = /*#__PURE__*/ memo(function LegendColorBadge({ color, sx, ...others }) {
-    return /*#__PURE__*/ _jsx(Box, {
-        ...others,
-        sx: combineSx({
+export const LegendColorBadge = /*#__PURE__*/ memo(function LegendColorBadge(t0) {
+    const $ = _c(12);
+    let color;
+    let others;
+    let sx;
+    if ($[0] !== t0) {
+        ({ color, sx, ...others } = t0);
+        $[0] = t0;
+        $[1] = color;
+        $[2] = others;
+        $[3] = sx;
+    } else {
+        color = $[1];
+        others = $[2];
+        sx = $[3];
+    }
+    let t1;
+    if ($[4] !== sx) {
+        t1 = combineSx({
             height: 4,
             width: 16,
-            margin: (theme)=>theme.spacing(0.5)
-        }, sx),
-        style: {
+            margin: _temp
+        }, sx);
+        $[4] = sx;
+        $[5] = t1;
+    } else {
+        t1 = $[5];
+    }
+    let t2;
+    if ($[6] !== color) {
+        t2 = {
             backgroundColor: color
-        }
-    });
+        };
+        $[6] = color;
+        $[7] = t2;
+    } else {
+        t2 = $[7];
+    }
+    let t3;
+    if ($[8] !== others || $[9] !== t1 || $[10] !== t2) {
+        t3 = /*#__PURE__*/ _jsx(Box, {
+            ...others,
+            sx: t1,
+            style: t2
+        });
+        $[8] = others;
+        $[9] = t1;
+        $[10] = t2;
+        $[11] = t3;
+    } else {
+        t3 = $[11];
+    }
+    return t3;
 });
+function _temp(theme) {
+    return theme.spacing(0.5);
+}
 
 //# sourceMappingURL=LegendColorBadge.js.map

package/dist/Legend/LegendColorBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/LegendColorBadge.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { BoxProps } from '@mui/material';\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { memo } from 'react';\n\nimport { combineSx } from '../utils';\n\nexport interface LegendColorBadgeProps extends BoxProps<'div'> {\n  color: string;\n}\n\nexport const LegendColorBadge = memo(function LegendColorBadge({\n  color,\n  sx,\n  ...others\n}: LegendColorBadgeProps): ReactElement {\n  return (\n    <Box\n      {...others}\n      sx={combineSx(\n        {\n          height: 4,\n          width: 16,\n          margin: (theme) => theme.spacing(0.5),\n        },\n        sx,\n      )}\n      style={{ backgroundColor: color }}\n    />\n  );\n});\n"],"names":["Box","memo","combineSx","LegendColorBadge","color","sx","others","height","width","margin","theme","spacing","style","backgroundColor"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,SAAS,QAAQ,oBAAW;AAMrC,OAAO,MAAMC,iCAAmBF,KAAK,SAASE,iBAAiB,EAC7DC,KAAK,EACLC,EAAE,EACF,GAAGC,QACmB;IACtB,qBACE,KAACN;QACE,GAAGM,MAAM;QACVD,IAAIH,UACF;YACEK,QAAQ;YACRC,OAAO;YACPC,QAAQ,CAACC,QAAUA,MAAMC,OAAO,CAAC;QACnC,GACAN;QAEFO,OAAO;YAAEC,iBAAiBT;QAAM;;AAGtC,GAAG"}
+{"version":3,"sources":["../../src/Legend/LegendColorBadge.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { BoxProps } from '@mui/material';\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { memo } from 'react';\n\nimport { combineSx } from '../utils';\n\nexport interface LegendColorBadgeProps extends BoxProps<'div'> {\n  color: string;\n}\n\nexport const LegendColorBadge = memo(function LegendColorBadge({\n  color,\n  sx,\n  ...others\n}: LegendColorBadgeProps): ReactElement {\n  return (\n    <Box\n      {...others}\n      sx={combineSx(\n        {\n          height: 4,\n          width: 16,\n          margin: (theme) => theme.spacing(0.5),\n        },\n        sx,\n      )}\n      style={{ backgroundColor: color }}\n    />\n  );\n});\n"],"names":["Box","memo","combineSx","LegendColorBadge"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,SAAS,QAAQ,oBAAW;AAMrC,OAAO,MAAMC,iCAAmBF,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmBlC"}

package/dist/Legend/ListLegend.js

@@ -11,6 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { Virtuoso } from "react-virtuoso";
 import { isLegendItemVisuallySelected } from "./legend-model.js";
 import { ListLegendItem } from "./ListLegendItem.js";
@@ -19,18 +20,25 @@ import { ListLegendItem } from "./ListLegendItem.js";
  * 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 }) {
-    // show full labels on hover when there are many total series
+ */ export function ListLegend(t0) {
+    const $ = _c(13);
+    const { items, height, width, selectedItems, onLegendItemClick, onItemMouseOver, onItemMouseOut } = t0;
     const truncateLabels = items.length > 5;
-    // Virtuoso requires its scroll container to remain a div, so native ul semantics cannot be used here.
-    /* oxlint-disable jsx-a11y/prefer-tag-over-role */ return /*#__PURE__*/ _jsx(Virtuoso, {
-        style: {
+    let t1;
+    if ($[0] !== height || $[1] !== width) {
+        t1 = {
             height,
             width
-        },
-        data: items,
-        itemContent: (index, item)=>{
-            return /*#__PURE__*/ _jsx(ListLegendItem, {
+        };
+        $[0] = height;
+        $[1] = width;
+        $[2] = t1;
+    } else {
+        t1 = $[2];
+    }
+    let t2;
+    if ($[3] !== onItemMouseOut || $[4] !== onItemMouseOver || $[5] !== onLegendItemClick || $[6] !== selectedItems || $[7] !== truncateLabels) {
+        t2 = (index, item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
                 item: item,
                 index: index,
                 truncateLabel: truncateLabels,
@@ -39,14 +47,36 @@ import { ListLegendItem } from "./ListLegendItem.js";
                 onMouseOver: onItemMouseOver,
                 onMouseOut: onItemMouseOut,
                 sx: {
-                    width: '100%',
-                    wordBreak: 'break-word',
-                    overflow: 'hidden'
+                    width: "100%",
+                    wordBreak: "break-word",
+                    overflow: "hidden"
                 }
             }, item.id);
-        },
-        role: "list"
-    });
-/* oxlint-enable jsx-a11y/prefer-tag-over-role */ }
+        $[3] = onItemMouseOut;
+        $[4] = onItemMouseOver;
+        $[5] = onLegendItemClick;
+        $[6] = selectedItems;
+        $[7] = truncateLabels;
+        $[8] = t2;
+    } else {
+        t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== items || $[10] !== t1 || $[11] !== t2) {
+        t3 = /*#__PURE__*/ _jsx(Virtuoso, {
+            style: t1,
+            data: items,
+            itemContent: t2,
+            role: "list"
+        });
+        $[9] = items;
+        $[10] = t1;
+        $[11] = t2;
+        $[12] = t3;
+    } else {
+        t3 = $[12];
+    }
+    return t3;
+}
 
 //# sourceMappingURL=ListLegend.js.map

package/dist/Legend/ListLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { ReactElement } from 'react';\nimport { Virtuoso } from 'react-virtuoso';\n\nimport type { LegendItem, SelectedLegendItemState } from './legend-model';\nimport { isLegendItemVisuallySelected } from './legend-model';\nimport type { ListLegendItemProps } from './ListLegendItem';\nimport { ListLegendItem } from './ListLegendItem';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({\n  items,\n  height,\n  width,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: ListLegendProps): ReactElement {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  // Virtuoso requires its scroll container to remain a div, so native ul semantics cannot be used here.\n  /* oxlint-disable jsx-a11y/prefer-tag-over-role */\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            index={index}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            onMouseOver={onItemMouseOver}\n            onMouseOut={onItemMouseOut}\n            sx={{\n              width: '100%',\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n  /* oxlint-enable jsx-a11y/prefer-tag-over-role */\n}\n"],"names":["Virtuoso","isLegendItemVisuallySelected","ListLegendItem","ListLegend","items","height","width","selectedItems","onLegendItemClick","onItemMouseOver","onItemMouseOut","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","onMouseOver","onMouseOut","sx","wordBreak","overflow","id","role"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,QAAQ,QAAQ,iBAAiB;AAG1C,SAASC,4BAA4B,QAAQ,oBAAiB;AAE9D,SAASC,cAAc,QAAQ,sBAAmB;AAYlD;;;;;CAKC,GACD,OAAO,SAASC,WAAW,EACzBC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,iBAAiB,EACjBC,eAAe,EACfC,cAAc,EACE;IAChB,6DAA6D;IAC7D,MAAMC,iBAAiBP,MAAMQ,MAAM,GAAG;IACtC,sGAAsG;IACtG,gDAAgD,GAChD,qBACE,KAACZ;QACCa,OAAO;YAAER;YAAQC;QAAM;QACvBQ,MAAMV;QACNW,aAAa,CAACC,OAAOC;YACnB,qBACE,KAACf;gBAECe,MAAMA;gBACND,OAAOA;gBACPE,eAAeP;gBACfQ,oBAAoBlB,6BAA6BgB,MAAMV;gBACvDa,SAASZ;gBACTa,aAAaZ;gBACba,YAAYZ;gBACZa,IAAI;oBACFjB,OAAO;oBACPkB,WAAW;oBACXC,UAAU;gBACZ;eAZKR,KAAKS,EAAE;QAelB;QACAC,MAAK;;AAGT,+CAA+C,GACjD"}
+{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { ReactElement } from 'react';\nimport { Virtuoso } from 'react-virtuoso';\n\nimport type { LegendItem, SelectedLegendItemState } from './legend-model';\nimport { isLegendItemVisuallySelected } from './legend-model';\nimport type { ListLegendItemProps } from './ListLegendItem';\nimport { ListLegendItem } from './ListLegendItem';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n  onItemMouseOver: ListLegendItemProps['onMouseOver'];\n  onItemMouseOut: ListLegendItemProps['onMouseOut'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({\n  items,\n  height,\n  width,\n  selectedItems,\n  onLegendItemClick,\n  onItemMouseOver,\n  onItemMouseOut,\n}: ListLegendProps): ReactElement {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  // Virtuoso requires its scroll container to remain a div, so native ul semantics cannot be used here.\n  /* oxlint-disable jsx-a11y/prefer-tag-over-role */\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            index={index}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            onMouseOver={onItemMouseOver}\n            onMouseOut={onItemMouseOut}\n            sx={{\n              width: '100%',\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n  /* oxlint-enable jsx-a11y/prefer-tag-over-role */\n}\n"],"names":["Virtuoso","isLegendItemVisuallySelected","ListLegendItem"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SAASA,QAAQ,QAAQ,iBAAiB;AAG1C,SAASC,4BAA4B,QAAQ,oBAAiB;AAE9D,SAASC,cAAc,QAAQ,sBAAmB;AAYlD;;;;;CAKC,GACD,OAAO"}