@perses-dev/components 0.0.0-snapshot-test-internal-dep-dd238ac → 0.0.0-snapshot-color-palette-gen-test-bc1b508

package/dist/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps, DialogActions, DialogContentProps as MuiDialogContentProps, DialogProps, DialogTitleProps } from '@mui/material';
+import { ButtonProps, DialogActions, DialogContentProps as MuiDialogContentProps, DialogProps, DialogTitleProps, Theme } from '@mui/material';
 export interface DialogHeaderProps extends DialogTitleProps {
     /**
      * Callback fired when close button is clicked. If undefined, close button will not appear in header.
@@ -16,6 +16,7 @@ export interface DialogContentProps extends MuiDialogContentProps {
 export declare const Dialog: {
     ({ children, ...props }: DialogProps): JSX.Element;
     Header: ({ children, onClose, ...props }: DialogHeaderProps) => JSX.Element;
+    Form: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
     Content: ({ children, width, sx, ...props }: DialogContentProps) => JSX.Element;
     PrimaryButton: ({ children, ...props }: DialogButtonProps) => JSX.Element;
     SecondaryButton: ({ children, ...props }: DialogButtonProps) => JSX.Element;

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,EAGjB,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,oBAAY,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyCD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CAvCT,iBAAiB;iDAaR,kBAAkB;4CAM7B,iBAAiB;8CAMf,iBAAiB;;CAcyC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,WAAW,EAEX,aAAa,EAEb,kBAAkB,IAAI,qBAAqB,EAC3C,WAAW,EAEX,gBAAgB,EAGhB,KAAK,EACN,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,oBAAY,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqDD,eAAO,MAAM,MAAM;6BAA4B,WAAW;8CAnDT,iBAAiB;;iDAaR,kBAAkB;4CAM7B,iBAAiB;8CAMf,iBAAiB;;CA0ByC,CAAC"}

package/dist/Dialog/Dialog.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { Button, Dialog as MuiDialog, DialogActions, DialogContent, DialogTitle, IconButton } from '@mui/material';
+import { Button, Dialog as MuiDialog, DialogActions, DialogContent, DialogTitle, IconButton, styled } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
 import { combineSx } from '../utils';
 const Header = ({ children , onClose , ...props })=>{
@@ -51,6 +51,16 @@ const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ _jsx(Button, {
         ...props,
         children: children
     });
+/*
+ * Material-ui has a prop "scroll=paper" that is specifically for dialog header and actions to be sticky and body to scroll,
+ * but that doesn't work when dialog content is wrapped in form.
+ * https://github.com/mui-org/material-ui/issues/13253
+ * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog
+ */ const Form = styled('form')({
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column'
+});
 /**
  * Render the CSS of the dialog's close button, according to the given material theme.
  * @param theme material theme
@@ -66,6 +76,7 @@ export const Dialog = ({ children , ...props })=>/*#__PURE__*/ _jsx(MuiDialog, {
         children: children
     });
 Dialog.Header = Header;
+Dialog.Form = Form;
 Dialog.Content = Content;
 Dialog.PrimaryButton = PrimaryButton;
 Dialog.SecondaryButton = SecondaryButton;

package/dist/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport {\n  Button,\n  ButtonProps,\n  Dialog as MuiDialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps as MuiDialogContentProps,\n  DialogProps,\n  DialogTitle,\n  DialogTitleProps,\n  IconButton,\n  Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport interface DialogContentProps extends MuiDialogContentProps {\n  /**\n   * @default 500\n   */\n  width?: number;\n}\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps) => {\n  return (\n    <>\n      <DialogTitle {...props}>{children}</DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, width = 500, sx, ...props }: DialogContentProps) => (\n  <DialogContent dividers {...props} sx={combineSx({ width: `${width}px` }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme) => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","theme","position","top","spacing","right","Actions"],"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,MAAM,OAAO,CAAC;AAC1B,SACEC,MAAM,EAENC,MAAM,IAAIC,SAAS,EACnBC,aAAa,EACbC,aAAa,EAGbC,WAAW,EAEXC,UAAU,QAEL,eAAe,CAAC;AACvB,OAAOC,SAAS,MAAM,uBAAuB,CAAC;AAC9C,SAASC,SAAS,QAAQ,UAAU,CAAC;AAkBrC,MAAMC,MAAM,GAAG,CAAC,EAAEC,QAAQ,CAAA,EAAEC,OAAO,CAAA,EAAE,GAAGC,KAAK,EAAqB,GAAK;IACrE,qBACE;;0BACE,KAACP,WAAW;gBAAE,GAAGO,KAAK;0BAAGF,QAAQ;cAAe;YAC/CC,OAAO,kBACN,KAACL,UAAU;gBAACO,YAAU,EAAC,OAAO;gBAACC,OAAO,EAAEH,OAAO;gBAAEI,EAAE,EAAEC,0BAA0B;0BAC7E,cAAA,KAACT,SAAS,KAAG;cACF,AACd;;MACA,CACH;AACJ,CAAC,AAAC;AAEF,MAAMU,OAAO,GAAG,CAAC,EAAEP,QAAQ,CAAA,EAAEQ,KAAK,EAAG,GAAG,CAAA,EAAEH,EAAE,CAAA,EAAE,GAAGH,KAAK,EAAsB,iBAC1E,KAACR,aAAa;QAACe,QAAQ;QAAE,GAAGP,KAAK;QAAEG,EAAE,EAAEP,SAAS,CAAC;YAAEU,KAAK,EAAE,CAAC,EAAEA,KAAK,CAAC,EAAE,CAAC;SAAE,EAAEH,EAAE,CAAC;kBAC1EL,QAAQ;MACK,AACjB,AAAC;AAEF,MAAMU,aAAa,GAAG,CAAC,EAAEV,QAAQ,CAAA,EAAE,GAAGE,KAAK,EAAqB,iBAC9D,KAACZ,MAAM;QAACqB,OAAO,EAAC,WAAW;QAACC,IAAI,EAAC,QAAQ;QAAE,GAAGV,KAAK;kBAChDF,QAAQ;MACF,AACV,AAAC;AAEF,MAAMa,eAAe,GAAG,CAAC,EAAEb,QAAQ,CAAA,EAAE,GAAGE,KAAK,EAAqB,iBAChE,KAACZ,MAAM;QAACqB,OAAO,EAAC,UAAU;QAACG,KAAK,EAAC,WAAW;QAAE,GAAGZ,KAAK;kBACnDF,QAAQ;MACF,AACV,AAAC;AAEF;;;CAGC,GACD,MAAMM,0BAA0B,GAAG,CAACS,KAAY,GAAK;IACnD,OAAO;QAAEC,QAAQ,EAAE,UAAU;QAAEC,GAAG,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;QAAEC,KAAK,EAAEJ,KAAK,CAACG,OAAO,CAAC,GAAG,CAAC;KAAE,CAAC;AACtF,CAAC,AAAC;AAEF,OAAO,MAAM3B,MAAM,GAAG,CAAC,EAAES,QAAQ,CAAA,EAAE,GAAGE,KAAK,EAAe,iBAAK,KAACV,SAAS;QAAE,GAAGU,KAAK;kBAAGF,QAAQ;MAAa,CAAC;AAE5GT,MAAM,CAACQ,MAAM,GAAGA,MAAM,CAAC;AACvBR,MAAM,CAACgB,OAAO,GAAGA,OAAO,CAAC;AACzBhB,MAAM,CAACmB,aAAa,GAAGA,aAAa,CAAC;AACrCnB,MAAM,CAACsB,eAAe,GAAGA,eAAe,CAAC;AACzCtB,MAAM,CAAC6B,OAAO,GAAG3B,aAAa,CAAC"}
+{"version":3,"sources":["../../src/Dialog/Dialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport {\n  Button,\n  ButtonProps,\n  Dialog as MuiDialog,\n  DialogActions,\n  DialogContent,\n  DialogContentProps as MuiDialogContentProps,\n  DialogProps,\n  DialogTitle,\n  DialogTitleProps,\n  IconButton,\n  styled,\n  Theme,\n} from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { combineSx } from '../utils';\n\nexport interface DialogHeaderProps extends DialogTitleProps {\n  /**\n   * Callback fired when close button is clicked. If undefined, close button will not appear in header.\n   */\n  onClose?: (e: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport type DialogButtonProps = Omit<ButtonProps, 'variant' | 'color' | 'type'>;\n\nexport interface DialogContentProps extends MuiDialogContentProps {\n  /**\n   * @default 500\n   */\n  width?: number;\n}\n\nconst Header = ({ children, onClose, ...props }: DialogHeaderProps) => {\n  return (\n    <>\n      <DialogTitle {...props}>{children}</DialogTitle>\n      {onClose && (\n        <IconButton aria-label=\"Close\" onClick={onClose} sx={dialogCloseIconButtonStyle}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </>\n  );\n};\n\nconst Content = ({ children, width = 500, sx, ...props }: DialogContentProps) => (\n  <DialogContent dividers {...props} sx={combineSx({ width: `${width}px` }, sx)}>\n    {children}\n  </DialogContent>\n);\n\nconst PrimaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"contained\" type=\"submit\" {...props}>\n    {children}\n  </Button>\n);\n\nconst SecondaryButton = ({ children, ...props }: DialogButtonProps) => (\n  <Button variant=\"outlined\" color=\"secondary\" {...props}>\n    {children}\n  </Button>\n);\n\n/*\n * Material-ui has a prop \"scroll=paper\" that is specifically for dialog header and actions to be sticky and body to scroll,\n * but that doesn't work when dialog content is wrapped in form.\n * https://github.com/mui-org/material-ui/issues/13253\n * This component adds style to get expected behavior & should be used whenever we have a Form inside a Dialog\n */\nconst Form = styled('form')({\n  overflowY: 'auto',\n  display: 'flex',\n  flexDirection: 'column',\n});\n\n/**\n * Render the CSS of the dialog's close button, according to the given material theme.\n * @param theme material theme\n */\nconst dialogCloseIconButtonStyle = (theme: Theme) => {\n  return { position: 'absolute', top: theme.spacing(0.5), right: theme.spacing(0.5) };\n};\n\nexport const Dialog = ({ children, ...props }: DialogProps) => <MuiDialog {...props}>{children}</MuiDialog>;\n\nDialog.Header = Header;\nDialog.Form = Form;\nDialog.Content = Content;\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\nDialog.Actions = DialogActions;\n"],"names":["React","Button","Dialog","MuiDialog","DialogActions","DialogContent","DialogTitle","IconButton","styled","CloseIcon","combineSx","Header","children","onClose","props","aria-label","onClick","sx","dialogCloseIconButtonStyle","Content","width","dividers","PrimaryButton","variant","type","SecondaryButton","color","Form","overflowY","display","flexDirection","theme","position","top","spacing","right","Actions"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,gBAalB,CAAC"}
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,gBAqBlB,CAAC"}

package/dist/InfoTooltip/InfoTooltip.js

@@ -14,6 +14,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { styled, Tooltip as MuiTooltip, tooltipClasses, Typography } from '@mui/material';
 export const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
+    // Wrap children in a span to cover the following use cases:
+    //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.
+    //  - Non-element tooltip children (e.g. text). The tooltip needs something that
+    //   can have a ref as a child.
+    // We wrap in a `span` and not a `div` to minimize the impact on page layout
+    // and styles.
+    const wrappedChildren = /*#__PURE__*/ _jsx("span", {
+        children: children
+    });
     return /*#__PURE__*/ _jsx(StyledTooltip, {
         arrow: true,
         id: id,
@@ -24,9 +33,7 @@ export const InfoTooltip = ({ id , title , description , placement , children ,
         }),
         enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
         enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
-        children: /*#__PURE__*/ _jsx("div", {
-            children: children
-        })
+        children: wrappedChildren
     });
 };
 const TooltipContent = ({ title , description  })=>{

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps) => {\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? 'top'}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      <div>{children}</div>\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","StyledTooltip","arrow","TooltipContent","div","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"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,MAAM,OAAO,CAAC;AAC1B,SACEC,MAAM,EAENC,OAAO,IAAIC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,eAAe,CAAC;AAcvB,OAAO,MAAMC,WAAW,GAAG,CAAC,EAC1BC,EAAE,CAAA,EACFC,KAAK,CAAA,EACLC,WAAW,CAAA,EACXC,SAAS,CAAA,EACTC,QAAQ,CAAA,EACRC,UAAU,CAAA,EACVC,cAAc,CAAA,EACG,GAAK;IACtB,qBACE,KAACC,aAAa;QACZC,KAAK;QACLR,EAAE,EAAEA,EAAE;QACNG,SAAS,EAAEA,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,KAAK;QAC7BF,KAAK,gBAAE,KAACQ,cAAc;YAACR,KAAK,EAAEA,KAAK;YAAEC,WAAW,EAAEA,WAAW;UAAI;QACjEG,UAAU,EAAEA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,GAAG;QAC7BC,cAAc,EAAEA,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,GAAG;kBAErC,cAAA,KAACI,KAAG;sBAAEN,QAAQ;UAAO;MACP,CAChB;AACJ,CAAC,CAAC;AAEF,MAAMK,cAAc,GAAG,CAAC,EAAER,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAmD,GAAK;IAClG,qBACE;;YACGD,KAAK,kBACJ,KAACH,UAAU;gBACTa,OAAO,EAAC,OAAO;gBACfC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,UAAU,EAAEL,KAAK,CAACM,UAAU,CAACC,gBAAgB;qBAC9C,CAAA,AAAC;0BAEDnB,KAAK;cACK,AACd;0BACD,KAACH,UAAU;gBACTa,OAAO,EAAC,SAAS;gBACjBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;qBAClC,CAAA,AAAC;0BAEDf,WAAW;cACD;;MACZ,CACH;AACJ,CAAC,AAAC;AAEF,MAAMK,aAAa,GAAGb,MAAM,CAAC,CAAC,EAAE2B,SAAS,CAAA,EAAE,GAAGC,KAAK,EAAmB,iBACpE,KAAC1B,UAAU;QAAE,GAAG0B,KAAK;QAAEC,OAAO,EAAE;YAAEC,MAAM,EAAEH,SAAS;SAAE;MAAI,AAC1D,CAAC,CAAC,CAAC,EAAER,KAAK,CAAA,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEhB,cAAc,CAAC4B,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCC,eAAe,EAAEb,KAAK,CAACE,OAAO,CAACY,UAAU,CAACF,OAAO;YACjDX,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;YACjCW,QAAQ,EAAE,OAAO;YACjBC,OAAO,EAAEhB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC;YACzBC,SAAS,EAAElB,KAAK,CAACmB,OAAO,CAAC,CAAC,CAAC;SAC5B;QACD,CAAC,CAAC,GAAG,EAAEnC,cAAc,CAACW,KAAK,CAAC,CAAC,CAAC,EAAE;YAC9BM,KAAK,EAAED,KAAK,CAACE,OAAO,CAACY,UAAU,CAACF,OAAO;SACxC;KACF,CAAA,AAAC,CAAC,AAAC"}
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom';\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps) => {\n  // Wrap children in a span to cover the following use cases:\n  //  - Disabled buttons. MUI console.errors on putting these inside a tooltip.\n  //  - Non-element tooltip children (e.g. text). The tooltip needs something that\n  //   can have a ref as a child.\n  // We wrap in a `span` and not a `div` to minimize the impact on page layout\n  // and styles.\n  const wrappedChildren = <span>{children}</span>;\n\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? 'top'}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      {wrappedChildren}\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","wrappedChildren","span","StyledTooltip","arrow","TooltipContent","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"mappings":"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"}

package/dist/Legend/CompactLegend.d.ts

@@ -6,7 +6,9 @@ interface CompactLegendProps {
 }
 /**
  * CompactLegend is default and used when legend items need to show side by side
- * which corresponds to when legend.position is `bottom`
+ * 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 declare function CompactLegend({ height, items }: CompactLegendProps): JSX.Element;
 export {};

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;;;GAGG;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,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"}

package/dist/Legend/CompactLegend.js

@@ -15,7 +15,9 @@ import { Box } from '@mui/material';
 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`
+ * 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  }) {
     return /*#__PURE__*/ _jsx(Box, {
         component: "ul",

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`\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;;;CAGC,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 } 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"}

package/dist/Legend/Legend.d.ts

@@ -1,11 +1,19 @@
 /// <reference types="react" />
 import { LegendOptions, LegendItem } from '../model';
-interface LegendProps {
+import { ListLegendProps } from './ListLegend';
+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.
+     */
+    listProps?: Pick<ListLegendProps, 'initialRowHeight'>;
 }
-export declare function Legend({ width, height, options, data }: LegendProps): JSX.Element;
-export {};
+export declare function Legend({ width, height, options, data, listProps }: 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;AAIrD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,WAAW,eA+BnE"}
+{"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"}

package/dist/Legend/Legend.js

@@ -14,23 +14,35 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
-export function Legend({ width , height , options , data  }) {
+// When the number of items to display is above this number, it is likely to
+// cause performance issues in the browser. The legend will be displayed in a
+// format (list) that allows for virtualization to minimize the performance impact.
+// 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  }) {
     if (options.position === 'Right') {
         return /*#__PURE__*/ _jsx(Box, {
             sx: {
                 width: width,
-                height: '100%',
+                height: height,
                 position: 'absolute',
                 top: 0,
-                right: 0,
-                overflowX: 'hidden',
-                overflowY: 'scroll'
+                right: 0
             },
             children: /*#__PURE__*/ _jsx(ListLegend, {
-                items: data
+                items: data,
+                width: width,
+                height: height,
+                ...listProps
             })
         });
     }
+    // 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;
     return /*#__PURE__*/ _jsx(Box, {
         sx: {
             width: width,
@@ -38,7 +50,12 @@ export function Legend({ width , height , options , data  }) {
             position: 'absolute',
             bottom: 0
         },
-        children: /*#__PURE__*/ _jsx(CompactLegend, {
+        children: needsVirtualization ? /*#__PURE__*/ _jsx(ListLegend, {
+            items: data,
+            width: width,
+            height: height,
+            ...listProps
+        }) : /*#__PURE__*/ _jsx(CompactLegend, {
             items: data,
             height: height
         })

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 } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\n\ninterface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\n}\n\nexport function Legend({ width, height, options, data }: LegendProps) {\n  if (options.position === 'Right') {\n    return (\n      <Box\n        sx={{\n          width: width,\n          height: '100%',\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          overflowX: 'hidden',\n          overflowY: 'scroll',\n        }}\n      >\n        <ListLegend items={data} />\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\n      }}\n    >\n      <CompactLegend items={data} height={height} />\n    </Box>\n  );\n}\n"],"names":["Box","ListLegend","CompactLegend","Legend","width","height","options","data","position","sx","top","right","overflowX","overflowY","items","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,QAAQ,cAAc,CAAC;AAC1C,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAShD,OAAO,SAASC,MAAM,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAe,EAAE;IACpE,IAAID,OAAO,CAACE,QAAQ,KAAK,OAAO,EAAE;QAChC,qBACE,KAACR,GAAG;YACFS,EAAE,EAAE;gBACFL,KAAK,EAAEA,KAAK;gBACZC,MAAM,EAAE,MAAM;gBACdG,QAAQ,EAAE,UAAU;gBACpBE,GAAG,EAAE,CAAC;gBACNC,KAAK,EAAE,CAAC;gBACRC,SAAS,EAAE,QAAQ;gBACnBC,SAAS,EAAE,QAAQ;aACpB;sBAED,cAAA,KAACZ,UAAU;gBAACa,KAAK,EAAEP,IAAI;cAAI;UACvB,CACN;IACJ,CAAC;IAED,qBACE,KAACP,GAAG;QACFS,EAAE,EAAE;YACFL,KAAK,EAAEA,KAAK;YACZC,MAAM,EAAEA,MAAM;YACdG,QAAQ,EAAE,UAAU;YACpBO,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACb,aAAa;YAACY,KAAK,EAAEP,IAAI;YAAEF,MAAM,EAAEA,MAAM;UAAI;MAC1C,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 { 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"}

package/dist/Legend/ListLegend.d.ts

@@ -1,11 +1,21 @@
 /// <reference types="react" />
 import { LegendItem } from '../model';
-interface ListLegendProps {
+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;
 }
 /**
- * ListLegend is used when legend.position is 'right' since legend items are stacked
+ * 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 declare function ListLegend({ items }: ListLegendProps): JSX.Element;
-export {};
+export declare function ListLegend({ items, height, width, initialRowHeight }: ListLegendProps): JSX.Element;
 //# sourceMappingURL=ListLegend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,eAAe;IACvB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,eAyBpD"}
+{"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"}

package/dist/Legend/ListLegend.js

@@ -11,29 +11,125 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { List } from '@mui/material';
+import { useTheme } from '@mui/material';
+import { VariableSizeList } from 'react-window';
+import { useRef, useEffect, forwardRef, useCallback } from 'react';
 import { ListLegendItem } from './ListLegendItem';
+const DEFAULT_INITIAL_ROW_HEIGHT = 26;
 /**
- * ListLegend is used when legend.position is 'right' since legend items are stacked
- */ export function ListLegend({ items  }) {
+ * 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({});
+    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
+    const LIST_PADDING = parseInt(theme.spacing(1), 10);
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
-    return /*#__PURE__*/ _jsx(List, {
-        children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
+    // 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,
                 item: item,
+                truncateLabel: truncateLabels,
+                onLayoutChange: handleRowLayoutChange,
                 sx: {
-                    width: 190,
-                    textOverflow: 'ellipsis',
+                    // Having an explicit width is important for the ellipsizing to
+                    // work correctly. Subtract padding to simulate padding.
+                    width: width - LIST_PADDING,
                     wordBreak: 'break-word',
-                    overflow: truncateLabels ? 'hidden' : 'visible',
-                    whiteSpace: truncateLabels ? 'nowrap' : 'normal',
-                    // TODO: add optional hover effect to show unformatted label
-                    '&:hover': {
-                        overflow: 'visible',
-                        whiteSpace: 'normal'
-                    }
+                    overflow: 'hidden'
                 }
-            }, item.id))
+            }, 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`
+            },
+            ...rest
+        });
+    });
+    return /*#__PURE__*/ _jsx(VariableSizeList, {
+        height: height,
+        width: width,
+        itemCount: items.length,
+        itemSize: getRowHeight,
+        innerElementType: InnerElementType,
+        ref: listRef,
+        children: ListLegendRow
     });
 }
 

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 { List } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface ListLegendProps {\n  items: LegendItem[];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are stacked\n */\nexport function ListLegend({ items }: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  return (\n    <List>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 190,\n            textOverflow: 'ellipsis',\n            wordBreak: 'break-word',\n            overflow: truncateLabels ? 'hidden' : 'visible',\n            whiteSpace: truncateLabels ? 'nowrap' : 'normal',\n            // TODO: add optional hover effect to show unformatted label\n            '&:hover': {\n              overflow: 'visible',\n              whiteSpace: 'normal', // this allow you to see the full label on hover\n            },\n          }}\n        />\n      ))}\n    </List>\n  );\n}\n"],"names":["List","ListLegendItem","ListLegend","items","truncateLabels","length","map","item","sx","width","textOverflow","wordBreak","overflow","whiteSpace","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,IAAI,QAAQ,eAAe,CAAC;AAErC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAMlD;;CAEC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAmB,EAAE;IACrD,6DAA6D;IAC7D,MAAMC,cAAc,GAAGD,KAAK,CAACE,MAAM,GAAG,CAAC,AAAC;IACxC,qBACE,KAACL,IAAI;kBACFG,KAAK,CAACG,GAAG,CAAC,CAACC,IAAI,iBACd,KAACN,cAAc;gBAEbM,IAAI,EAAEA,IAAI;gBACVC,EAAE,EAAE;oBACFC,KAAK,EAAE,GAAG;oBACVC,YAAY,EAAE,UAAU;oBACxBC,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAER,cAAc,GAAG,QAAQ,GAAG,SAAS;oBAC/CS,UAAU,EAAET,cAAc,GAAG,QAAQ,GAAG,QAAQ;oBAChD,4DAA4D;oBAC5D,SAAS,EAAE;wBACTQ,QAAQ,EAAE,SAAS;wBACnBC,UAAU,EAAE,QAAQ;qBACrB;iBACF;eAbIN,IAAI,CAACO,EAAE,CAcZ,AACH,CAAC;MACG,CACP;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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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"}

package/dist/Legend/ListLegendItem.d.ts

@@ -1,9 +1,21 @@
 import React from 'react';
 import { ListItemProps } from '@mui/material';
 import { LegendItem } from '../model';
-interface ListLegendItemProps extends ListItemProps {
+interface ListLegendItemProps extends ListItemProps<'div'> {
     item: LegendItem;
+    /**
+     * When `true`, will keep labels to a single line with overflow ellipsized. The
+     * full content will be shown on hover.
+     *
+     * 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.NamedExoticComponent<ListLegendItemProps>;
+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 {};
 //# 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,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,mBAAoB,SAAQ,aAAa;IACjD,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,iDAsBzB,CAAC"}
+{"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"}