@perses-dev/components 0.54.0-beta.0 → 0.54.0-beta.1

package/dist/ContentWithLegend/ContentWithLegend.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, useTheme } from '@mui/material';
-import { getLegendSize } from '@perses-dev/core'; // TODO
+import { getLegendSize } from '../model';
 import { Legend } from '../Legend';
 import { getContentWithLegendLayout } from './model/content-with-legend-model';
 /**

package/dist/ContentWithLegend/ContentWithLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.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 { ReactElement } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport { getLegendSize } from '@perses-dev/core'; // TODO\nimport { Legend } from '../Legend';\nimport { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps): ReactElement {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      style={{\n        width,\n        height,\n      }}\n      sx={{\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        style={{\n          width: content.width,\n          height: content.height,\n        }}\n        sx={{\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","getLegendSize","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","style","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"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,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,aAAa,QAAQ,mBAAmB,CAAC,OAAO;AACzD,SAASC,MAAM,QAAQ,YAAY;AACnC,SAAiCC,0BAA0B,QAAQ,oCAAoC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,MAAM,EACNC,UAAU,CAAC,EACXC,UAAU,EACVC,mBAAmB,GAAG,EACtBC,oBAAoB,GAAG,EACA;IACvB,MAAMC,QAAQb;IACd,MAAM,EAAEc,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGb,2BAA2B;QAC7DI;QACAC;QACAF;QACAM;QACAD;QACAF;QACAI;QACAH,YAAYT,cAAcS;IAC5B;IAEA,qBACE,MAACX;QACCkB,OAAO;YACLV;YACAC;QACF;QACAU,IAAI;YACFC,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACrB;gBACCkB,OAAO;oBACLV,OAAOO,QAAQP,KAAK;oBACpBC,QAAQM,QAAQN,MAAM;gBACxB;gBACAU,IAAI;oBACFG,aAAa,GAAGL,OAAOM,KAAK,CAAC,EAAE,CAAC;oBAChCC,cAAc,GAAGP,OAAOQ,MAAM,CAAC,EAAE,CAAC;gBACpC;0BAEC,OAAOnB,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP,KAAK;oBAAEC,QAAQM,QAAQN,MAAM;gBAAC,KAAKH;;YAEhGC,eAAeS,OAAOU,IAAI,kBAAI,KAACvB;gBAAQ,GAAGI,WAAW;gBAAEE,QAAQO,OAAOP,MAAM;gBAAED,OAAOQ,OAAOR,KAAK;;;;AAGxG"}
+{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.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 { ReactElement } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport { getLegendSize } from '../model';\nimport { Legend } from '../Legend';\nimport { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  legendSize,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps): ReactElement {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendProps,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n    legendSize: getLegendSize(legendSize),\n  });\n\n  return (\n    <Box\n      style={{\n        width,\n        height,\n      }}\n      sx={{\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        style={{\n          width: content.width,\n          height: content.height,\n        }}\n        sx={{\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","getLegendSize","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","legendSize","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","style","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"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,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,aAAa,QAAQ,WAAW;AACzC,SAASC,MAAM,QAAQ,YAAY;AACnC,SAAiCC,0BAA0B,QAAQ,oCAAoC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,MAAM,EACNC,UAAU,CAAC,EACXC,UAAU,EACVC,mBAAmB,GAAG,EACtBC,oBAAoB,GAAG,EACA;IACvB,MAAMC,QAAQb;IACd,MAAM,EAAEc,OAAO,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGb,2BAA2B;QAC7DI;QACAC;QACAF;QACAM;QACAD;QACAF;QACAI;QACAH,YAAYT,cAAcS;IAC5B;IAEA,qBACE,MAACX;QACCkB,OAAO;YACLV;YACAC;QACF;QACAU,IAAI;YACFC,UAAU;YACVC,UAAU;QACZ;;0BAEA,KAACrB;gBACCkB,OAAO;oBACLV,OAAOO,QAAQP,KAAK;oBACpBC,QAAQM,QAAQN,MAAM;gBACxB;gBACAU,IAAI;oBACFG,aAAa,GAAGL,OAAOM,KAAK,CAAC,EAAE,CAAC;oBAChCC,cAAc,GAAGP,OAAOQ,MAAM,CAAC,EAAE,CAAC;gBACpC;0BAEC,OAAOnB,aAAa,aAAaA,SAAS;oBAAEE,OAAOO,QAAQP,KAAK;oBAAEC,QAAQM,QAAQN,MAAM;gBAAC,KAAKH;;YAEhGC,eAAeS,OAAOU,IAAI,kBAAI,KAACvB;gBAAQ,GAAGI,WAAW;gBAAEE,QAAQO,OAAOP,MAAM;gBAAED,OAAOQ,OAAOR,KAAK;;;;AAGxG"}

package/dist/ContentWithLegend/model/content-with-legend-model.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
-import { LegendPositions, LegendSize } from '@perses-dev/core';
+import { LegendPositions, LegendSize } from '../../model';
 import { LegendProps } from '../../Legend';
 type Dimensions = {
     width: number;

package/dist/ContentWithLegend/model/content-with-legend-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-with-legend-model.d.ts","sourceRoot":"","sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAiB,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAEjF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAEpD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,2BACf,SAAQ,QAAQ,CAAC,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,aAAa,CAAC,CAAC;IAC1E,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,GAAG;QACnB,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,KAAK,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,iBAAiB,EAAE,gBAe/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,GAAG,uBAAuB,CAwFvD"}
+{"version":3,"file":"content-with-legend-model.d.ts","sourceRoot":"","sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAiB,UAAU,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAEjF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAEpD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,2BACf,SAAQ,QAAQ,CAAC,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,aAAa,CAAC,CAAC;IAC1E,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,GAAG;QACnB,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,KAAK,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5E,eAAO,MAAM,iBAAiB,EAAE,gBAe/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,GAAG,uBAAuB,CAwFvD"}

package/dist/ContentWithLegend/model/content-with-legend-model.js

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { getLegendMode } from '@perses-dev/core'; //TODO
+import { getLegendMode } from '../../model';
 import { getTableCellLayout } from '../../Table';
 export const TABLE_LEGEND_SIZE = {
     medium: {

package/dist/ContentWithLegend/model/content-with-legend-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"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 { Theme } from '@mui/material';\nimport { LegendPositions, getLegendMode, LegendSize } from '@perses-dev/core'; //TODO\nimport { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n\n  /**\n   * Size used for the legend.\n   *\n   * @default 'medium'\n   */\n  legendSize?: LegendSize;\n\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts\n  extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {\n  legendProps?: ContentWithLegendProps['legendProps'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  medium: {\n    // 5 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 6,\n\n    // Pixel value\n    right: 250,\n  },\n  small: {\n    // 3 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 4,\n\n    // Pixel value\n    right: 150,\n  },\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendProps,\n  legendSize,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const legendOptions = legendProps?.options;\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'list') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    const tableColumns = legendProps?.tableProps?.columns || [];\n    const columnsWidth = tableColumns.reduce((total, col) => {\n      if (typeof col.width === 'number') {\n        total += col.width;\n      }\n      return total;\n    }, 0);\n\n    legendWidth = position === 'right' ? TABLE_LEGEND_SIZE[legendSize]['right'] + columnsWidth : width;\n\n    // Use the smaller of the size-based row count or the number of legend items + 1 for the header.\n    const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['bottom'], legendProps.data.length + 1);\n    legendHeight = position === 'bottom' ? rowsToShow * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'right' && contentWidth < minChildrenWidth) ||\n    (position === 'bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'right' ? spacing : 0,\n      bottom: position === 'bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getLegendMode","getTableCellLayout","TABLE_LEGEND_SIZE","medium","bottom","right","small","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendProps","legendSize","minChildrenHeight","minChildrenWidth","spacing","theme","legendOptions","options","hasLegend","noLegendLayout","legend","show","content","margin","position","mode","legendWidth","legendHeight","tableLayout","tableColumns","tableProps","columns","columnsWidth","reduce","total","col","rowsToShow","Math","min","data","length","contentWidth","contentHeight"],"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,SAA0BA,aAAa,QAAoB,mBAAmB,CAAC,MAAM;AAErF,SAASC,kBAAkB,QAAQ,cAAc;AA4EjD,OAAO,MAAMC,oBAAsC;IACjDC,QAAQ;QACN,sEAAsE;QACtEC,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;IACAC,OAAO;QACL,sEAAsE;QACtEF,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;AACF,EAAE;AAEF,MAAME,6BAA6B;AACnC,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAEzB;;CAEC,GACD,OAAO,SAASC,2BAA2B,EACzCC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,UAAU,EACVC,iBAAiB,EACjBC,gBAAgB,EAChBC,OAAO,EACPC,KAAK,EACuB;IAC5B,MAAMC,gBAAgBN,aAAaO;IACnC,MAAMC,YAAY,CAAC,CAACF;IAEpB,MAAMG,iBAA0C;QAC9CC,QAAQ;YACNC,MAAM;YACNb,OAAO;YACPC,QAAQ;QACV;QACAa,SAAS;YACPd;YACAC;QACF;QACAc,QAAQ;YACNrB,OAAO;YACPD,QAAQ;QACV;IACF;IAEA,IAAI,CAACiB,WAAW;QACd,OAAOC;IACT;IAEA,MAAM,EAAEK,QAAQ,EAAE,GAAGR;IACrB,MAAMS,OAAO5B,cAAcmB,cAAcS,IAAI;IAE7C,IAAIC;IACJ,IAAIC;IAEJ,IAAIF,SAAS,QAAQ;QACnB,oEAAoE;QACpE,iCAAiC;QACjCC,cAAcF,aAAa,UAAU,MAAMhB;QAE3C,kFAAkF;QAClFmB,eAAetB;QACf,IAAImB,aAAa,SAAS;YACxBG,eAAelB;QACjB,OAAO,IAAIA,UAAUL,4BAA4B;YAC/CuB,eAAerB;QACjB;IACF,OAAO;QACL,aAAa;QAEb,MAAMsB,cAAc9B,mBAAmBiB,OAAO;QAE9C,MAAMc,eAAenB,aAAaoB,YAAYC,WAAW,EAAE;QAC3D,MAAMC,eAAeH,aAAaI,MAAM,CAAC,CAACC,OAAOC;YAC/C,IAAI,OAAOA,IAAI3B,KAAK,KAAK,UAAU;gBACjC0B,SAASC,IAAI3B,KAAK;YACpB;YACA,OAAO0B;QACT,GAAG;QAEHR,cAAcF,aAAa,UAAUzB,iBAAiB,CAACY,WAAW,CAAC,QAAQ,GAAGqB,eAAexB;QAE7F,gGAAgG;QAChG,MAAM4B,aAAaC,KAAKC,GAAG,CAACvC,iBAAiB,CAACY,WAAW,CAAC,SAAS,EAAED,YAAY6B,IAAI,CAACC,MAAM,GAAG;QAC/Fb,eAAeH,aAAa,WAAWY,aAAaR,YAAYnB,MAAM,GAAGA;IAC3E;IAEA,MAAMgC,eAAejB,aAAa,UAAUhB,QAAQkB,cAAcZ,UAAUN;IAC5E,MAAMkC,gBAAgBlB,aAAa,WAAWf,SAASkB,eAAeb,UAAUL;IAEhF,IACE,AAACe,aAAa,WAAWiB,eAAe5B,oBACvCW,aAAa,YAAYkB,gBAAgB9B,mBAC1C;QACA,8CAA8C;QAC9C,OAAOO;IACT;IAEA,OAAO;QACLC,QAAQ;YACNZ,OAAOkB;YACPjB,QAAQkB;YACRN,MAAM;QACR;QACAC,SAAS;YACPd,OAAOiC;YACPhC,QAAQiC;QACV;QACAnB,QAAQ;YACNrB,OAAOsB,aAAa,UAAUV,UAAU;YACxCb,QAAQuB,aAAa,WAAWV,UAAU;QAC5C;IACF;AACF"}
+{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"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 { Theme } from '@mui/material';\nimport { LegendPositions, getLegendMode, LegendSize } from '../../model';\nimport { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n\n  /**\n   * Size used for the legend.\n   *\n   * @default 'medium'\n   */\n  legendSize?: LegendSize;\n\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts\n  extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {\n  legendProps?: ContentWithLegendProps['legendProps'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendSize, Record<LegendPositions, number>>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  medium: {\n    // 5 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 6,\n\n    // Pixel value\n    right: 250,\n  },\n  small: {\n    // 3 rows plus header. Value to be multiplied by row height in pixels.\n    bottom: 4,\n\n    // Pixel value\n    right: 150,\n  },\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendProps,\n  legendSize,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const legendOptions = legendProps?.options;\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'list') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    const tableColumns = legendProps?.tableProps?.columns || [];\n    const columnsWidth = tableColumns.reduce((total, col) => {\n      if (typeof col.width === 'number') {\n        total += col.width;\n      }\n      return total;\n    }, 0);\n\n    legendWidth = position === 'right' ? TABLE_LEGEND_SIZE[legendSize]['right'] + columnsWidth : width;\n\n    // Use the smaller of the size-based row count or the number of legend items + 1 for the header.\n    const rowsToShow = Math.min(TABLE_LEGEND_SIZE[legendSize]['bottom'], legendProps.data.length + 1);\n    legendHeight = position === 'bottom' ? rowsToShow * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'right' && contentWidth < minChildrenWidth) ||\n    (position === 'bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'right' ? spacing : 0,\n      bottom: position === 'bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getLegendMode","getTableCellLayout","TABLE_LEGEND_SIZE","medium","bottom","right","small","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendProps","legendSize","minChildrenHeight","minChildrenWidth","spacing","theme","legendOptions","options","hasLegend","noLegendLayout","legend","show","content","margin","position","mode","legendWidth","legendHeight","tableLayout","tableColumns","tableProps","columns","columnsWidth","reduce","total","col","rowsToShow","Math","min","data","length","contentWidth","contentHeight"],"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,SAA0BA,aAAa,QAAoB,cAAc;AAEzE,SAASC,kBAAkB,QAAQ,cAAc;AA4EjD,OAAO,MAAMC,oBAAsC;IACjDC,QAAQ;QACN,sEAAsE;QACtEC,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;IACAC,OAAO;QACL,sEAAsE;QACtEF,QAAQ;QAER,cAAc;QACdC,OAAO;IACT;AACF,EAAE;AAEF,MAAME,6BAA6B;AACnC,MAAMC,mBAAmB;AACzB,MAAMC,mBAAmB;AAEzB;;CAEC,GACD,OAAO,SAASC,2BAA2B,EACzCC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,UAAU,EACVC,iBAAiB,EACjBC,gBAAgB,EAChBC,OAAO,EACPC,KAAK,EACuB;IAC5B,MAAMC,gBAAgBN,aAAaO;IACnC,MAAMC,YAAY,CAAC,CAACF;IAEpB,MAAMG,iBAA0C;QAC9CC,QAAQ;YACNC,MAAM;YACNb,OAAO;YACPC,QAAQ;QACV;QACAa,SAAS;YACPd;YACAC;QACF;QACAc,QAAQ;YACNrB,OAAO;YACPD,QAAQ;QACV;IACF;IAEA,IAAI,CAACiB,WAAW;QACd,OAAOC;IACT;IAEA,MAAM,EAAEK,QAAQ,EAAE,GAAGR;IACrB,MAAMS,OAAO5B,cAAcmB,cAAcS,IAAI;IAE7C,IAAIC;IACJ,IAAIC;IAEJ,IAAIF,SAAS,QAAQ;QACnB,oEAAoE;QACpE,iCAAiC;QACjCC,cAAcF,aAAa,UAAU,MAAMhB;QAE3C,kFAAkF;QAClFmB,eAAetB;QACf,IAAImB,aAAa,SAAS;YACxBG,eAAelB;QACjB,OAAO,IAAIA,UAAUL,4BAA4B;YAC/CuB,eAAerB;QACjB;IACF,OAAO;QACL,aAAa;QAEb,MAAMsB,cAAc9B,mBAAmBiB,OAAO;QAE9C,MAAMc,eAAenB,aAAaoB,YAAYC,WAAW,EAAE;QAC3D,MAAMC,eAAeH,aAAaI,MAAM,CAAC,CAACC,OAAOC;YAC/C,IAAI,OAAOA,IAAI3B,KAAK,KAAK,UAAU;gBACjC0B,SAASC,IAAI3B,KAAK;YACpB;YACA,OAAO0B;QACT,GAAG;QAEHR,cAAcF,aAAa,UAAUzB,iBAAiB,CAACY,WAAW,CAAC,QAAQ,GAAGqB,eAAexB;QAE7F,gGAAgG;QAChG,MAAM4B,aAAaC,KAAKC,GAAG,CAACvC,iBAAiB,CAACY,WAAW,CAAC,SAAS,EAAED,YAAY6B,IAAI,CAACC,MAAM,GAAG;QAC/Fb,eAAeH,aAAa,WAAWY,aAAaR,YAAYnB,MAAM,GAAGA;IAC3E;IAEA,MAAMgC,eAAejB,aAAa,UAAUhB,QAAQkB,cAAcZ,UAAUN;IAC5E,MAAMkC,gBAAgBlB,aAAa,WAAWf,SAASkB,eAAeb,UAAUL;IAEhF,IACE,AAACe,aAAa,WAAWiB,eAAe5B,oBACvCW,aAAa,YAAYkB,gBAAgB9B,mBAC1C;QACA,8CAA8C;QAC9C,OAAOO;IACT;IAEA,OAAO;QACLC,QAAQ;YACNZ,OAAOkB;YACPjB,QAAQkB;YACRN,MAAM;QACR;QACAC,SAAS;YACPd,OAAOiC;YACPhC,QAAQiC;QACV;QACAnB,QAAQ;YACNrB,OAAOsB,aAAa,UAAUV,UAAU;YACxCb,QAAQuB,aAAa,WAAWV,UAAU;QAC5C;IACF;AACF"}

package/dist/FormEditor/FormActions.d.ts

@@ -1,6 +1,6 @@
 import { StackProps } from '@mui/material';
 import { ReactElement } from 'react';
-import { Action } from '@perses-dev/core';
+import { Action } from '@perses-dev/components';
 export interface FormActionsProps extends StackProps {
     action: Action;
     submitText?: string;

package/dist/FormEditor/FormActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormActions.d.ts","sourceRoot":"","sources":["../../src/FormEditor/FormActions.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0B,UAAU,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,UAAmB,EACnB,UAAqB,EACrB,UAAU,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,YAAY,CAkDjC"}
+{"version":3,"file":"FormActions.d.ts","sourceRoot":"","sources":["../../src/FormEditor/FormActions.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0B,UAAU,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,UAAmB,EACnB,UAAqB,EACrB,UAAU,EACV,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,YAAY,CAkDjC"}

package/dist/FormEditor/FormActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormEditor/FormActions.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 { Button, Divider, Stack, StackProps } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { Action } from '@perses-dev/core'; // TODO the internal permission system of Perses should not be in a shared library\n\nexport interface FormActionsProps extends StackProps {\n  action: Action;\n  submitText?: string;\n  cancelText?: string;\n  isReadonly?: boolean;\n  isValid?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSubmit?: () => void;\n  onDelete?: () => void;\n  onCancel?: () => void;\n}\n\nexport function FormActions({\n  action,\n  submitText = 'Save',\n  cancelText = 'Cancel',\n  isReadonly,\n  isValid,\n  onActionChange,\n  onSubmit,\n  onDelete,\n  onCancel,\n  ...props\n}: FormActionsProps): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }} {...props}>\n      {action === 'read' ? (\n        <>\n          {onActionChange && (\n            <Button disabled={isReadonly} variant=\"contained\" onClick={() => onActionChange('update')}>\n              Edit\n            </Button>\n          )}\n          {onDelete && (\n            <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n              Delete\n            </Button>\n          )}\n          {onCancel && (onSubmit || onDelete) && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{\n                borderColor: (theme) => theme.palette.grey['500'],\n                '&.MuiDivider-root': {\n                  marginLeft: 2,\n                  marginRight: 1,\n                },\n              }}\n            />\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      ) : (\n        <>\n          {onSubmit && (\n            <Button variant=\"contained\" disabled={!isValid} onClick={onSubmit}>\n              {submitText}\n            </Button>\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack","FormActions","action","submitText","cancelText","isReadonly","isValid","onActionChange","onSubmit","onDelete","onCancel","props","direction","gap","sx","marginLeft","disabled","variant","onClick","color","orientation","flexItem","borderColor","theme","palette","grey","marginRight"],"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,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAoB,gBAAgB;AAgBnE,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,aAAa,MAAM,EACnBC,aAAa,QAAQ,EACrBC,UAAU,EACVC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACR,GAAGC,OACc;IACjB,qBACE,KAACX;QAAMY,WAAU;QAAMC,KAAK;QAAGC,IAAI;YAAEC,YAAY;QAAO;QAAI,GAAGJ,KAAK;kBACjET,WAAW,uBACV;;gBACGK,gCACC,KAACT;oBAAOkB,UAAUX;oBAAYY,SAAQ;oBAAYC,SAAS,IAAMX,eAAe;8BAAW;;gBAI5FE,0BACC,KAACX;oBAAOqB,OAAM;oBAAQH,UAAUX;oBAAYY,SAAQ;oBAAWC,SAAST;8BAAU;;gBAInFC,YAAaF,CAAAA,YAAYC,QAAO,mBAC/B,KAACV;oBACCqB,aAAY;oBACZC,QAAQ;oBACRP,IAAI;wBACFQ,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;wBACjD,qBAAqB;4BACnBV,YAAY;4BACZW,aAAa;wBACf;oBACF;;gBAGHhB,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;2BAKP;;gBACGI,0BACC,KAACV;oBAAOmB,SAAQ;oBAAYD,UAAU,CAACV;oBAASY,SAASV;8BACtDL;;gBAGJO,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;;;AAOf"}
+{"version":3,"sources":["../../src/FormEditor/FormActions.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 { Button, Divider, Stack, StackProps } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { Action } from '@perses-dev/components'; // TODO the internal permission system of Perses should not be in a shared library\n\nexport interface FormActionsProps extends StackProps {\n  action: Action;\n  submitText?: string;\n  cancelText?: string;\n  isReadonly?: boolean;\n  isValid?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSubmit?: () => void;\n  onDelete?: () => void;\n  onCancel?: () => void;\n}\n\nexport function FormActions({\n  action,\n  submitText = 'Save',\n  cancelText = 'Cancel',\n  isReadonly,\n  isValid,\n  onActionChange,\n  onSubmit,\n  onDelete,\n  onCancel,\n  ...props\n}: FormActionsProps): ReactElement {\n  return (\n    <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }} {...props}>\n      {action === 'read' ? (\n        <>\n          {onActionChange && (\n            <Button disabled={isReadonly} variant=\"contained\" onClick={() => onActionChange('update')}>\n              Edit\n            </Button>\n          )}\n          {onDelete && (\n            <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n              Delete\n            </Button>\n          )}\n          {onCancel && (onSubmit || onDelete) && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{\n                borderColor: (theme) => theme.palette.grey['500'],\n                '&.MuiDivider-root': {\n                  marginLeft: 2,\n                  marginRight: 1,\n                },\n              }}\n            />\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      ) : (\n        <>\n          {onSubmit && (\n            <Button variant=\"contained\" disabled={!isValid} onClick={onSubmit}>\n              {submitText}\n            </Button>\n          )}\n          {onCancel && (\n            <Button color=\"secondary\" variant=\"outlined\" onClick={onCancel}>\n              {cancelText}\n            </Button>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Button","Divider","Stack","FormActions","action","submitText","cancelText","isReadonly","isValid","onActionChange","onSubmit","onDelete","onCancel","props","direction","gap","sx","marginLeft","disabled","variant","onClick","color","orientation","flexItem","borderColor","theme","palette","grey","marginRight"],"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,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAoB,gBAAgB;AAgBnE,OAAO,SAASC,YAAY,EAC1BC,MAAM,EACNC,aAAa,MAAM,EACnBC,aAAa,QAAQ,EACrBC,UAAU,EACVC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACR,GAAGC,OACc;IACjB,qBACE,KAACX;QAAMY,WAAU;QAAMC,KAAK;QAAGC,IAAI;YAAEC,YAAY;QAAO;QAAI,GAAGJ,KAAK;kBACjET,WAAW,uBACV;;gBACGK,gCACC,KAACT;oBAAOkB,UAAUX;oBAAYY,SAAQ;oBAAYC,SAAS,IAAMX,eAAe;8BAAW;;gBAI5FE,0BACC,KAACX;oBAAOqB,OAAM;oBAAQH,UAAUX;oBAAYY,SAAQ;oBAAWC,SAAST;8BAAU;;gBAInFC,YAAaF,CAAAA,YAAYC,QAAO,mBAC/B,KAACV;oBACCqB,aAAY;oBACZC,QAAQ;oBACRP,IAAI;wBACFQ,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAAC,MAAM;wBACjD,qBAAqB;4BACnBV,YAAY;4BACZW,aAAa;wBACf;oBACF;;gBAGHhB,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;2BAKP;;gBACGI,0BACC,KAACV;oBAAOmB,SAAQ;oBAAYD,UAAU,CAACV;oBAASY,SAASV;8BACtDL;;gBAGJO,0BACC,KAACZ;oBAAOqB,OAAM;oBAAYF,SAAQ;oBAAWC,SAASR;8BACnDN;;;;;AAOf"}

package/dist/FormatControls/FormatControls.d.ts

@@ -1,5 +1,5 @@
-import { FormatOptions } from '@perses-dev/core';
 import { ReactElement } from 'react';
+import { FormatOptions } from '../model';
 export interface FormatControlsProps {
     value: FormatOptions;
     onChange: (unit: FormatOptions) => void;

package/dist/FormatControls/FormatControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAuE,MAAM,kBAAkB,CAAC;AACtH,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAKrC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,GAAG,YAAY,CA+DvG"}
+{"version":3,"file":"FormatControls.d.ts","sourceRoot":"","sources":["../../src/FormatControls/FormatControls.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,aAAa,EAAuE,MAAM,UAAU,CAAC;AAG9G,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,mBAAmB,GAAG,YAAY,CA+DvG"}

package/dist/FormatControls/FormatControls.js

@@ -12,9 +12,9 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Switch } from '@mui/material';
-import { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '@perses-dev/core'; // TODO
 import { OptionsEditorControl } from '../OptionsEditorLayout';
 import { SettingsAutocomplete } from '../SettingsAutocomplete';
+import { isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';
 import { UnitSelector } from './UnitSelector';
 const DECIMAL_PLACES_OPTIONS = [
     {

package/dist/FormatControls/FormatControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormatControls/FormatControls.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.\nimport { Switch, SwitchProps } from '@mui/material';\nimport { FormatOptions, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '@perses-dev/core'; // TODO\nimport { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { UnitSelector } from './UnitSelector';\n\nexport interface FormatControlsProps {\n  value: FormatOptions;\n  onChange: (unit: FormatOptions) => void;\n  disabled?: boolean;\n}\n\nconst DECIMAL_PLACES_OPTIONS: Array<{ id: string; label: string; decimalPlaces?: number }> = [\n  { id: 'default', label: 'Default', decimalPlaces: undefined },\n  { id: '0', label: '0', decimalPlaces: 0 },\n  { id: '1', label: '1', decimalPlaces: 1 },\n  { id: '2', label: '2', decimalPlaces: 2 },\n  { id: '3', label: '3', decimalPlaces: 3 },\n  { id: '4', label: '4', decimalPlaces: 4 },\n];\n\nfunction getOptionByDecimalPlaces(\n  decimalPlaces?: number\n): { id: string; label: string; decimalPlaces?: number } | undefined {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimalPlaces === decimalPlaces);\n}\n\nexport function FormatControls({ value, onChange, disabled = false }: FormatControlsProps): ReactElement {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasShortValues = isUnitWithShortValues(value);\n\n  const handleUnitChange = (newValue: FormatOptions | undefined): void => {\n    onChange(newValue || { unit: 'decimal' }); // Fallback to 'decimal' if undefined\n  };\n\n  const handleDecimalPlacesChange = ({\n    decimalPlaces,\n  }: {\n    id: string;\n    label: string;\n    decimalPlaces?: number;\n  }): void => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimalPlaces: decimalPlaces,\n      });\n    }\n  };\n\n  const handleShortValuesChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasShortValues) {\n      onChange({\n        ...value,\n        shortValues: checked,\n      });\n    }\n  };\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Short values\"\n        control={\n          <Switch\n            checked={hasShortValues ? shouldShortenValues(value.shortValues) : false}\n            onChange={handleShortValuesChange}\n            disabled={!hasShortValues}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={<UnitSelector value={value} onChange={handleUnitChange} disabled={disabled} />}\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimalPlaces)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={(_, value) => handleDecimalPlacesChange(value)}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","isUnitWithDecimalPlaces","isUnitWithShortValues","shouldShortenValues","OptionsEditorControl","SettingsAutocomplete","UnitSelector","DECIMAL_PLACES_OPTIONS","id","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleUnitChange","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","_","checked","shortValues","control","options","getOptionLabel","disableClearable"],"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;;AACjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,SAAwBC,uBAAuB,EAAEC,qBAAqB,EAAEC,mBAAmB,QAAQ,mBAAmB,CAAC,OAAO;AAE9H,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C,MAAMC,yBAAuF;IAC3F;QAAEC,IAAI;QAAWC,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAEH,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBACPF,aAAsB;IAEtB,OAAOH,uBAAuBM,IAAI,CAAC,CAACC,IAAMA,EAAEJ,aAAa,KAAKA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAuB;IACvF,MAAMC,mBAAmBlB,wBAAwBe;IACjD,MAAMI,iBAAiBlB,sBAAsBc;IAE7C,MAAMK,mBAAmB,CAACC;QACxBL,SAASK,YAAY;YAAEC,MAAM;QAAU,IAAI,qCAAqC;IAClF;IAEA,MAAMC,4BAA4B,CAAC,EACjCd,aAAa,EAKd;QACC,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMe,0BAAmD,CAACC,GAAYC;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,qBACE;;0BACE,KAACvB;gBACCK,OAAM;gBACNoB,uBACE,KAAC7B;oBACC2B,SAASP,iBAAiBjB,oBAAoBa,MAAMY,WAAW,IAAI;oBACnEX,UAAUQ;oBACVP,UAAU,CAACE;;;0BAIjB,KAAChB;gBACCK,OAAM;gBACNoB,uBAAS,KAACvB;oBAAaU,OAAOA;oBAAOC,UAAUI;oBAAkBH,UAAUA;;;0BAE7E,KAACd;gBACCK,OAAM;gBACNoB,uBACE,KAACxB;oBACCW,OAAOJ,yBAAyBI,MAAMN,aAAa;oBACnDoB,SAASvB;oBACTwB,gBAAgB,CAACjB,IAAMA,EAAEL,KAAK;oBAC9BQ,UAAU,CAACS,GAAGV,QAAUQ,0BAA0BR;oBAClDE,UAAU,CAACC;oBACXa,gBAAgB;;;;;AAM5B"}
+{"version":3,"sources":["../../src/FormatControls/FormatControls.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.\nimport { Switch, SwitchProps } from '@mui/material';\n\nimport { ReactElement } from 'react';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { FormatOptions, isUnitWithDecimalPlaces, isUnitWithShortValues, shouldShortenValues } from '../model';\nimport { UnitSelector } from './UnitSelector';\n\nexport interface FormatControlsProps {\n  value: FormatOptions;\n  onChange: (unit: FormatOptions) => void;\n  disabled?: boolean;\n}\n\nconst DECIMAL_PLACES_OPTIONS: Array<{ id: string; label: string; decimalPlaces?: number }> = [\n  { id: 'default', label: 'Default', decimalPlaces: undefined },\n  { id: '0', label: '0', decimalPlaces: 0 },\n  { id: '1', label: '1', decimalPlaces: 1 },\n  { id: '2', label: '2', decimalPlaces: 2 },\n  { id: '3', label: '3', decimalPlaces: 3 },\n  { id: '4', label: '4', decimalPlaces: 4 },\n];\n\nfunction getOptionByDecimalPlaces(\n  decimalPlaces?: number\n): { id: string; label: string; decimalPlaces?: number } | undefined {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimalPlaces === decimalPlaces);\n}\n\nexport function FormatControls({ value, onChange, disabled = false }: FormatControlsProps): ReactElement {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasShortValues = isUnitWithShortValues(value);\n\n  const handleUnitChange = (newValue: FormatOptions | undefined): void => {\n    onChange(newValue || { unit: 'decimal' }); // Fallback to 'decimal' if undefined\n  };\n\n  const handleDecimalPlacesChange = ({\n    decimalPlaces,\n  }: {\n    id: string;\n    label: string;\n    decimalPlaces?: number;\n  }): void => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimalPlaces: decimalPlaces,\n      });\n    }\n  };\n\n  const handleShortValuesChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasShortValues) {\n      onChange({\n        ...value,\n        shortValues: checked,\n      });\n    }\n  };\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Short values\"\n        control={\n          <Switch\n            checked={hasShortValues ? shouldShortenValues(value.shortValues) : false}\n            onChange={handleShortValuesChange}\n            disabled={!hasShortValues}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={<UnitSelector value={value} onChange={handleUnitChange} disabled={disabled} />}\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimalPlaces)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={(_, value) => handleDecimalPlacesChange(value)}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","OptionsEditorControl","SettingsAutocomplete","isUnitWithDecimalPlaces","isUnitWithShortValues","shouldShortenValues","UnitSelector","DECIMAL_PLACES_OPTIONS","id","label","decimalPlaces","undefined","getOptionByDecimalPlaces","find","o","FormatControls","value","onChange","disabled","hasDecimalPlaces","hasShortValues","handleUnitChange","newValue","unit","handleDecimalPlacesChange","handleShortValuesChange","_","checked","shortValues","control","options","getOptionLabel","disableClearable"],"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;;AACjC,SAASA,MAAM,QAAqB,gBAAgB;AAGpD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAAwBC,uBAAuB,EAAEC,qBAAqB,EAAEC,mBAAmB,QAAQ,WAAW;AAC9G,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C,MAAMC,yBAAuF;IAC3F;QAAEC,IAAI;QAAWC,OAAO;QAAWC,eAAeC;IAAU;IAC5D;QAAEH,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;IACxC;QAAEF,IAAI;QAAKC,OAAO;QAAKC,eAAe;IAAE;CACzC;AAED,SAASE,yBACPF,aAAsB;IAEtB,OAAOH,uBAAuBM,IAAI,CAAC,CAACC,IAAMA,EAAEJ,aAAa,KAAKA;AAChE;AAEA,OAAO,SAASK,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAuB;IACvF,MAAMC,mBAAmBhB,wBAAwBa;IACjD,MAAMI,iBAAiBhB,sBAAsBY;IAE7C,MAAMK,mBAAmB,CAACC;QACxBL,SAASK,YAAY;YAAEC,MAAM;QAAU,IAAI,qCAAqC;IAClF;IAEA,MAAMC,4BAA4B,CAAC,EACjCd,aAAa,EAKd;QACC,IAAIS,kBAAkB;YACpBF,SAAS;gBACP,GAAGD,KAAK;gBACRN,eAAeA;YACjB;QACF;IACF;IAEA,MAAMe,0BAAmD,CAACC,GAAYC;QACpE,IAAIP,gBAAgB;YAClBH,SAAS;gBACP,GAAGD,KAAK;gBACRY,aAAaD;YACf;QACF;IACF;IAEA,qBACE;;0BACE,KAAC1B;gBACCQ,OAAM;gBACNoB,uBACE,KAAC7B;oBACC2B,SAASP,iBAAiBf,oBAAoBW,MAAMY,WAAW,IAAI;oBACnEX,UAAUQ;oBACVP,UAAU,CAACE;;;0BAIjB,KAACnB;gBACCQ,OAAM;gBACNoB,uBAAS,KAACvB;oBAAaU,OAAOA;oBAAOC,UAAUI;oBAAkBH,UAAUA;;;0BAE7E,KAACjB;gBACCQ,OAAM;gBACNoB,uBACE,KAAC3B;oBACCc,OAAOJ,yBAAyBI,MAAMN,aAAa;oBACnDoB,SAASvB;oBACTwB,gBAAgB,CAACjB,IAAMA,EAAEL,KAAK;oBAC9BQ,UAAU,CAACS,GAAGV,QAAUQ,0BAA0BR;oBAClDE,UAAU,CAACC;oBACXa,gBAAgB;;;;;AAM5B"}

package/dist/FormatControls/UnitSelector.d.ts

@@ -1,5 +1,5 @@
-import { FormatOptions } from '@perses-dev/core';
 import { ReactElement } from 'react';
+import { FormatOptions } from '../model';
 export interface UnitSelectorProps {
     value?: FormatOptions;
     onChange: (format: FormatOptions | undefined) => void;

package/dist/FormatControls/UnitSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/FormatControls/UnitSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAA2B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,GAAG,UAAU,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAqBlH"}
+{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/FormatControls/UnitSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,aAAa,EAA2B,MAAM,UAAU,CAAC;AAElE,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,GAAG,UAAU,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAqBlH"}

package/dist/FormatControls/UnitSelector.js

@@ -11,8 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { UNIT_CONFIG } from '@perses-dev/core'; // TODO
 import { SettingsAutocomplete } from '../SettingsAutocomplete';
+import { UNIT_CONFIG } from '../model';
 const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
     return {
         ...config,

package/dist/FormatControls/UnitSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormatControls/UnitSelector.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 { FormatOptions, UNIT_CONFIG, UnitConfig } from '@perses-dev/core'; // TODO\nimport { ReactElement } from 'react';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value?: FormatOptions;\n  onChange: (format: FormatOptions | undefined) => void;\n  disabled?: boolean;\n}\n\ntype AutocompleteUnitOption = UnitConfig & {\n  id: NonNullable<FormatOptions['unit']>;\n};\n\nconst KIND_OPTIONS: readonly AutocompleteUnitOption[] = Object.entries(UNIT_CONFIG)\n  .map<AutocompleteUnitOption>(([id, config]) => {\n    return {\n      ...config,\n      id: id as AutocompleteUnitOption['id'],\n      group: config.group || 'Decimal',\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nexport function UnitSelector({ value, onChange, disabled = false, ...otherProps }: UnitSelectorProps): ReactElement {\n  const unitConfig = UNIT_CONFIG[value?.unit || 'decimal'];\n\n  const handleChange = (_: unknown, newValue: AutocompleteUnitOption | null): void => {\n    if (newValue === null) {\n      onChange(undefined);\n    } else {\n      onChange({ unit: newValue.id } as FormatOptions);\n    }\n  };\n\n  return (\n    <SettingsAutocomplete<AutocompleteUnitOption, false, false>\n      value={value ? { id: value.unit || 'decimal', ...unitConfig } : null}\n      options={KIND_OPTIONS}\n      groupBy={(option) => option.group ?? 'Decimal'}\n      onChange={handleChange}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["UNIT_CONFIG","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","group","filter","disableSelectorOption","UnitSelector","value","onChange","disabled","otherProps","unitConfig","unit","handleChange","_","newValue","undefined","options","groupBy","option"],"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,SAAwBA,WAAW,QAAoB,mBAAmB,CAAC,OAAO;AAElF,SAASC,oBAAoB,QAAQ,0BAA0B;AAY/D,MAAMC,eAAkDC,OAAOC,OAAO,CAACJ,aACpEK,GAAG,CAAyB,CAAC,CAACC,IAAIC,OAAO;IACxC,OAAO;QACL,GAAGA,MAAM;QACTD,IAAIA;QACJE,OAAOD,OAAOC,KAAK,IAAI;IACzB;AACF,GACCC,MAAM,CAAC,CAACF,SAAW,CAACA,OAAOG,qBAAqB;AAEnD,OAAO,SAASC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGC,YAA+B;IAClG,MAAMC,aAAahB,WAAW,CAACY,OAAOK,QAAQ,UAAU;IAExD,MAAMC,eAAe,CAACC,GAAYC;QAChC,IAAIA,aAAa,MAAM;YACrBP,SAASQ;QACX,OAAO;YACLR,SAAS;gBAAEI,MAAMG,SAASd,EAAE;YAAC;QAC/B;IACF;IAEA,qBACE,KAACL;QACCW,OAAOA,QAAQ;YAAEN,IAAIM,MAAMK,IAAI,IAAI;YAAW,GAAGD,UAAU;QAAC,IAAI;QAChEM,SAASpB;QACTqB,SAAS,CAACC,SAAWA,OAAOhB,KAAK,IAAI;QACrCK,UAAUK;QACVJ,UAAUA;QACT,GAAGC,UAAU;;AAGpB"}
+{"version":3,"sources":["../../src/FormatControls/UnitSelector.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 { ReactElement } from 'react';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { FormatOptions, UNIT_CONFIG, UnitConfig } from '../model';\n\nexport interface UnitSelectorProps {\n  value?: FormatOptions;\n  onChange: (format: FormatOptions | undefined) => void;\n  disabled?: boolean;\n}\n\ntype AutocompleteUnitOption = UnitConfig & {\n  id: NonNullable<FormatOptions['unit']>;\n};\n\nconst KIND_OPTIONS: readonly AutocompleteUnitOption[] = Object.entries(UNIT_CONFIG)\n  .map<AutocompleteUnitOption>(([id, config]) => {\n    return {\n      ...config,\n      id: id as AutocompleteUnitOption['id'],\n      group: config.group || 'Decimal',\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nexport function UnitSelector({ value, onChange, disabled = false, ...otherProps }: UnitSelectorProps): ReactElement {\n  const unitConfig = UNIT_CONFIG[value?.unit || 'decimal'];\n\n  const handleChange = (_: unknown, newValue: AutocompleteUnitOption | null): void => {\n    if (newValue === null) {\n      onChange(undefined);\n    } else {\n      onChange({ unit: newValue.id } as FormatOptions);\n    }\n  };\n\n  return (\n    <SettingsAutocomplete<AutocompleteUnitOption, false, false>\n      value={value ? { id: value.unit || 'decimal', ...unitConfig } : null}\n      options={KIND_OPTIONS}\n      groupBy={(option) => option.group ?? 'Decimal'}\n      onChange={handleChange}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["SettingsAutocomplete","UNIT_CONFIG","KIND_OPTIONS","Object","entries","map","id","config","group","filter","disableSelectorOption","UnitSelector","value","onChange","disabled","otherProps","unitConfig","unit","handleChange","_","newValue","undefined","options","groupBy","option"],"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,oBAAoB,QAAQ,0BAA0B;AAC/D,SAAwBC,WAAW,QAAoB,WAAW;AAYlE,MAAMC,eAAkDC,OAAOC,OAAO,CAACH,aACpEI,GAAG,CAAyB,CAAC,CAACC,IAAIC,OAAO;IACxC,OAAO;QACL,GAAGA,MAAM;QACTD,IAAIA;QACJE,OAAOD,OAAOC,KAAK,IAAI;IACzB;AACF,GACCC,MAAM,CAAC,CAACF,SAAW,CAACA,OAAOG,qBAAqB;AAEnD,OAAO,SAASC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAE,GAAGC,YAA+B;IAClG,MAAMC,aAAaf,WAAW,CAACW,OAAOK,QAAQ,UAAU;IAExD,MAAMC,eAAe,CAACC,GAAYC;QAChC,IAAIA,aAAa,MAAM;YACrBP,SAASQ;QACX,OAAO;YACLR,SAAS;gBAAEI,MAAMG,SAASd,EAAE;YAAC;QAC/B;IACF;IAEA,qBACE,KAACN;QACCY,OAAOA,QAAQ;YAAEN,IAAIM,MAAMK,IAAI,IAAI;YAAW,GAAGD,UAAU;QAAC,IAAI;QAChEM,SAASpB;QACTqB,SAAS,CAACC,SAAWA,OAAOhB,KAAK,IAAI;QACrCK,UAAUK;QACVJ,UAAUA;QACT,GAAGC,UAAU;;AAGpB"}

package/dist/Legend/Legend.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { produce } from 'immer';
-import { getLegendMode } from '@perses-dev/core'; // TODO
+import { getLegendMode } from '../model';
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
 import { TableLegend } from './TableLegend';

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 { ReactElement, ReactNode } from 'react';\nimport { getLegendMode } from '@perses-dev/core'; // TODO\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\nimport { TableLegend, TableLegendProps } from './TableLegend';\nimport { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';\nimport { ListLegendItemProps } from './ListLegendItem';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendComponentOptions;\n\n  /**\n   * State of selected items in the legend.\n   *\n   * Selected legend item state is a controlled value that should be managed using a\n   * combination of this prop and `onSelectedChange`.\n   */\n  selectedItems: SelectedLegendItemState;\n\n  /**\n   * Callback fired when the selected items in the legend changes.\n   */\n  onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;\n\n  /**\n   * Callback fired when the mouse is moved over a legend item.\n   */\n  onItemMouseOver?: ListLegendItemProps['onMouseOver'];\n\n  /**\n   * Callback fired when the mouse is moved out of a legend item.\n   */\n  onItemMouseOut?: ListLegendItemProps['onMouseOut'];\n\n  /**\n   * Props specific to legend with `mode` set to `table`.\n   */\n  tableProps?: Pick<TableLegendProps, 'columns' | 'onSortingChange' | 'sorting'>;\n}\n\n// When the number of items to display is above this number, it is likely to\n// cause performance issues in the browser. The legend will be displayed in a\n// format (list) that allows for virtualization to minimize the performance impact.\n// Set this number based on testing, but it may need to be tuned a bit on the\n// future as people test this out on different machines.\nconst NEED_VIRTUALIZATION_LIMIT = 500;\n\nexport function Legend({\n  width,\n  height,\n  options,\n  data,\n  selectedItems,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  tableProps,\n}: LegendProps): ReactElement {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string): void => {\n    const isModifiedClick = e.metaKey || e.shiftKey;\n\n    const newSelected = produce(selectedItems, (draft) => {\n      if (draft === 'ALL') {\n        return {\n          [seriesId]: true,\n        };\n      }\n\n      const isSelected = !!draft[seriesId];\n\n      // Clicks with modifier key can select multiple items.\n      if (isModifiedClick) {\n        if (isSelected) {\n          // Modified click on already selected item. Remove that item.\n          delete draft[seriesId];\n        } else {\n          // Modified click on not-selected item. Add it.\n          draft[seriesId] = true;\n        }\n        return draft;\n      }\n\n      if (isSelected) {\n        // Clicked item was already selected. Unselect it and return to\n        // ALL state.\n        return 'ALL' as const;\n      }\n\n      // Select clicked item.\n      return { [seriesId]: true };\n    });\n    onSelectedItemsChange(newSelected);\n  };\n\n  const mode = getLegendMode(options.mode);\n\n  // The bottom legend is displayed as a list when the number of items is too\n  // large and requires virtualization. Otherwise, it is rendered more compactly.\n  // We do not need this check for the right-side legend because it is always\n  // a virtualized list.\n  const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;\n\n  const commonLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    onLegendItemClick,\n    onItemMouseOver,\n    onItemMouseOut,\n  };\n\n  let legendContent: ReactNode;\n  if (mode === 'table') {\n    legendContent = (\n      <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} {...tableProps} />\n    );\n  } else if (options.position === 'right' || needsVirtualization) {\n    legendContent = <ListLegend {...commonLegendProps} width={width} onLegendItemClick={onLegendItemClick} />;\n  } else {\n    legendContent = <CompactLegend {...commonLegendProps} onLegendItemClick={onLegendItemClick} />;\n  }\n\n  if (options.position === 'right') {\n    return (\n      <Box\n        style={{\n          width: width,\n          height: height,\n        }}\n        sx={{\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          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","ListLegend","CompactLegend","TableLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","tableProps","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","mode","needsVirtualization","length","commonLegendProps","items","legendContent","position","style","sx","top","right","backgroundColor","theme","palette","background","default","bottom"],"mappings":"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"}
+{"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 { ReactElement, ReactNode } from 'react';\nimport { getLegendMode } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\nimport { TableLegend, TableLegendProps } from './TableLegend';\nimport { LegendItem, LegendComponentOptions, SelectedLegendItemState } from './legend-model';\nimport { ListLegendItemProps } from './ListLegendItem';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendComponentOptions;\n\n  /**\n   * State of selected items in the legend.\n   *\n   * Selected legend item state is a controlled value that should be managed using a\n   * combination of this prop and `onSelectedChange`.\n   */\n  selectedItems: SelectedLegendItemState;\n\n  /**\n   * Callback fired when the selected items in the legend changes.\n   */\n  onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;\n\n  /**\n   * Callback fired when the mouse is moved over a legend item.\n   */\n  onItemMouseOver?: ListLegendItemProps['onMouseOver'];\n\n  /**\n   * Callback fired when the mouse is moved out of a legend item.\n   */\n  onItemMouseOut?: ListLegendItemProps['onMouseOut'];\n\n  /**\n   * Props specific to legend with `mode` set to `table`.\n   */\n  tableProps?: Pick<TableLegendProps, 'columns' | 'onSortingChange' | 'sorting'>;\n}\n\n// When the number of items to display is above this number, it is likely to\n// cause performance issues in the browser. The legend will be displayed in a\n// format (list) that allows for virtualization to minimize the performance impact.\n// Set this number based on testing, but it may need to be tuned a bit on the\n// future as people test this out on different machines.\nconst NEED_VIRTUALIZATION_LIMIT = 500;\n\nexport function Legend({\n  width,\n  height,\n  options,\n  data,\n  selectedItems,\n  onSelectedItemsChange,\n  onItemMouseOver,\n  onItemMouseOut,\n  tableProps,\n}: LegendProps): ReactElement {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string): void => {\n    const isModifiedClick = e.metaKey || e.shiftKey;\n\n    const newSelected = produce(selectedItems, (draft) => {\n      if (draft === 'ALL') {\n        return {\n          [seriesId]: true,\n        };\n      }\n\n      const isSelected = !!draft[seriesId];\n\n      // Clicks with modifier key can select multiple items.\n      if (isModifiedClick) {\n        if (isSelected) {\n          // Modified click on already selected item. Remove that item.\n          delete draft[seriesId];\n        } else {\n          // Modified click on not-selected item. Add it.\n          draft[seriesId] = true;\n        }\n        return draft;\n      }\n\n      if (isSelected) {\n        // Clicked item was already selected. Unselect it and return to\n        // ALL state.\n        return 'ALL' as const;\n      }\n\n      // Select clicked item.\n      return { [seriesId]: true };\n    });\n    onSelectedItemsChange(newSelected);\n  };\n\n  const mode = getLegendMode(options.mode);\n\n  // The bottom legend is displayed as a list when the number of items is too\n  // large and requires virtualization. Otherwise, it is rendered more compactly.\n  // We do not need this check for the right-side legend because it is always\n  // a virtualized list.\n  const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;\n\n  const commonLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    onLegendItemClick,\n    onItemMouseOver,\n    onItemMouseOut,\n  };\n\n  let legendContent: ReactNode;\n  if (mode === 'table') {\n    legendContent = (\n      <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} {...tableProps} />\n    );\n  } else if (options.position === 'right' || needsVirtualization) {\n    legendContent = <ListLegend {...commonLegendProps} width={width} onLegendItemClick={onLegendItemClick} />;\n  } else {\n    legendContent = <CompactLegend {...commonLegendProps} onLegendItemClick={onLegendItemClick} />;\n  }\n\n  if (options.position === 'right') {\n    return (\n      <Box\n        style={{\n          width: width,\n          height: height,\n        }}\n        sx={{\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          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","ListLegend","CompactLegend","TableLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","onItemMouseOver","onItemMouseOut","tableProps","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","mode","needsVirtualization","length","commonLegendProps","items","legendContent","position","style","sx","top","right","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;AAEhC,SAASC,aAAa,QAAQ,WAAW;AACzC,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,WAAW,QAA0B,gBAAgB;AAuC9D,4EAA4E;AAC5E,6EAA6E;AAC7E,mFAAmF;AACnF,6EAA6E;AAC7E,wDAAwD;AACxD,MAAMC,4BAA4B;AAElC,OAAO,SAASC,OAAO,EACrBC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,IAAI,EACJC,aAAa,EACbC,qBAAqB,EACrBC,eAAe,EACfC,cAAc,EACdC,UAAU,EACE;IACZ,MAAMC,oBAAoB,CAACC,GAA8CC;QACvE,MAAMC,kBAAkBF,EAAEG,OAAO,IAAIH,EAAEI,QAAQ;QAE/C,MAAMC,cAActB,QAAQW,eAAe,CAACY;YAC1C,IAAIA,UAAU,OAAO;gBACnB,OAAO;oBACL,CAACL,SAAS,EAAE;gBACd;YACF;YAEA,MAAMM,aAAa,CAAC,CAACD,KAAK,CAACL,SAAS;YAEpC,sDAAsD;YACtD,IAAIC,iBAAiB;gBACnB,IAAIK,YAAY;oBACd,6DAA6D;oBAC7D,OAAOD,KAAK,CAACL,SAAS;gBACxB,OAAO;oBACL,+CAA+C;oBAC/CK,KAAK,CAACL,SAAS,GAAG;gBACpB;gBACA,OAAOK;YACT;YAEA,IAAIC,YAAY;gBACd,+DAA+D;gBAC/D,aAAa;gBACb,OAAO;YACT;YAEA,uBAAuB;YACvB,OAAO;gBAAE,CAACN,SAAS,EAAE;YAAK;QAC5B;QACAN,sBAAsBU;IACxB;IAEA,MAAMG,OAAOxB,cAAcQ,QAAQgB,IAAI;IAEvC,2EAA2E;IAC3E,+EAA+E;IAC/E,2EAA2E;IAC3E,sBAAsB;IACtB,MAAMC,sBAAsBhB,KAAKiB,MAAM,IAAItB;IAE3C,MAAMuB,oBAAoB;QACxBpB;QACAqB,OAAOnB;QACPC;QACAK;QACAH;QACAC;IACF;IAEA,IAAIgB;IACJ,IAAIL,SAAS,SAAS;QACpBK,8BACE,KAAC1B;YAAa,GAAGwB,iBAAiB;YAAEhB,uBAAuBA;YAAuBL,OAAOA;YAAQ,GAAGQ,UAAU;;IAElH,OAAO,IAAIN,QAAQsB,QAAQ,KAAK,WAAWL,qBAAqB;QAC9DI,8BAAgB,KAAC5B;YAAY,GAAG0B,iBAAiB;YAAErB,OAAOA;YAAOS,mBAAmBA;;IACtF,OAAO;QACLc,8BAAgB,KAAC3B;YAAe,GAAGyB,iBAAiB;YAAEZ,mBAAmBA;;IAC3E;IAEA,IAAIP,QAAQsB,QAAQ,KAAK,SAAS;QAChC,qBACE,KAAChC;YACCiC,OAAO;gBACLzB,OAAOA;gBACPC,QAAQA;YACV;YACAyB,IAAI;gBACFF,UAAU;gBACVG,KAAK;gBACLC,OAAO;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"}

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

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from 'react';
-import { LegendOptionsBase } from '@perses-dev/core';
+import { LegendOptionsBase } from '../model';
 export type LegendComponentOptions = LegendOptionsBase;
 export interface LegendItem {
     id: string;

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

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

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

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

package/dist/Table/Table.d.ts

@@ -6,5 +6,5 @@ import { TableProps } from './model/table-model';
  *
  * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**
  */
-export declare function Table<TableData>({ data, columns, cellConfigs, density, defaultColumnWidth, defaultColumnHeight, checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId, rowSelection, sorting, getItemActions, hasItemActions, pagination, onPaginationChange, rowSelectionVariant, ...otherProps }: TableProps<TableData>): ReactElement;
+export declare function Table<TableData>({ data, columns, cellConfigs, density, defaultColumnWidth, defaultColumnHeight, checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId, rowSelection, sorting, getItemActions, hasItemActions, pagination, onPaginationChange, rowSelectionVariant, getSubRows, hiddenColumns, tableToolbarConfig, ...otherProps }: TableProps<TableData>): ReactElement;
 //# sourceMappingURL=Table.d.ts.map

package/dist/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAwB,UAAU,EAAkC,MAAM,qBAAqB,CAAC;AAYvG;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,SAAS,EAAE,EAC/B,IAAI,EACJ,OAAO,EACP,WAAW,EACX,OAAoB,EACpB,kBAAyC,EACzC,mBAA4B,EAC5B,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,QAA6B,EAC7B,YAAoC,EACpC,OAAyB,EACzB,cAAc,EACd,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,mBAAgC,EAChC,GAAG,UAAU,EACd,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,YAAY,CA6JtC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,YAAY,EAAkC,MAAM,OAAO,CAAC;AAIrE,OAAO,EAAwD,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAYvG;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,SAAS,EAAE,EAC/B,IAAI,EACJ,OAAO,EACP,WAAW,EACX,OAAoB,EACpB,kBAAyC,EACzC,mBAA4B,EAC5B,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,QAA6B,EAC7B,YAAoC,EACpC,OAAyB,EACzB,cAAc,EACd,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,mBAAgC,EAChC,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,GAAG,UAAU,EACd,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,YAAY,CAmLtC"}

package/dist/Table/Table.js

@@ -12,8 +12,9 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack, useTheme } from '@mui/material';
-import { getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
-import { useCallback, useMemo } from 'react';
+import { getCoreRowModel, getExpandedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { useCallback, useMemo, useState } from 'react';
+import { useFuzzySearch } from './hooks/useFuzzySearch';
 import { TableCheckbox } from './TableCheckbox';
 import { VirtualizedTable } from './VirtualizedTable';
 import { DEFAULT_COLUMN_WIDTH, persesColumnsToTanstackColumns } from './model/table-model';
@@ -30,8 +31,13 @@ const DEFAULT_SORTING = [];
  * **not** intended to be a general use data table for use cases unrelated to Perses.
  *
  * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**
- */ export function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, getItemActions, hasItemActions, pagination, onPaginationChange, rowSelectionVariant = 'standard', ...otherProps }) {
+ */ export function Table({ data, columns, cellConfigs, density = 'standard', defaultColumnWidth = DEFAULT_COLUMN_WIDTH, defaultColumnHeight = 'auto', checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId = DEFAULT_GET_ROW_ID, rowSelection = DEFAULT_ROW_SELECTION, sorting = DEFAULT_SORTING, getItemActions, hasItemActions, pagination, onPaginationChange, rowSelectionVariant = 'standard', getSubRows, hiddenColumns, tableToolbarConfig, ...otherProps }) {
     const theme = useTheme();
+    const { globalFilter, setGlobalFilter, fuzzySearchOptions } = useFuzzySearch(tableToolbarConfig?.isSearchEnabled);
+    const [columnVisibility, setColumnVisibility] = useState(hiddenColumns?.reduce((acc, columnId)=>({
+            ...acc,
+            [columnId]: false
+        }), {}) ?? {});
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
         onRowSelectionChange?.(newRowSelection);
@@ -138,7 +144,7 @@ const DEFAULT_SORTING = [];
     const table = useReactTable({
         data,
         columns: tableColumns,
-        getRowId,
+        getRowId: getRowId,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
@@ -148,12 +154,18 @@ const DEFAULT_SORTING = [];
         enableRowSelection: !!checkboxSelection,
         onRowSelectionChange: handleRowSelectionChange,
         onSortingChange: handleSortingChange,
+        onColumnVisibilityChange: setColumnVisibility,
+        getSubRows: getSubRows,
+        getExpandedRowModel: getSubRows ? getExpandedRowModel() : undefined,
+        ...fuzzySearchOptions,
         // For now, defaulting to sort by descending first. We can expose the ability
         // to customize it if/when we have use cases for it.
         sortDescFirst: true,
         state: {
             rowSelection,
             sorting,
+            globalFilter: tableToolbarConfig?.isSearchEnabled ? globalFilter : undefined,
+            columnVisibility,
             ...pagination ? {
                 pagination
             } : {}
@@ -174,12 +186,20 @@ const DEFAULT_SORTING = [];
         defaultColumnHeight: defaultColumnHeight,
         onRowClick: handleRowClick,
         rows: table.getRowModel().rows,
-        columns: table.getAllFlatColumns(),
+        columns: table.getVisibleFlatColumns(),
         headers: table.getHeaderGroups(),
         cellConfigs: cellConfigs,
         pagination: pagination,
         onPaginationChange: onPaginationChange,
-        rowCount: table.getRowCount()
+        rowCount: table.getRowCount(),
+        toolbarConfig: {
+            isSearchEnabled: tableToolbarConfig?.isSearchEnabled,
+            globalFilter,
+            onGlobalFilterChange: setGlobalFilter,
+            isColumnFilterEnabled: tableToolbarConfig?.isColumnFilterEnabled,
+            columns: table.getAllColumns(),
+            columnFilterMenuMaxHeight: tableToolbarConfig?.columnFilterMenuMaxHeight
+        }
     });
 }
 

package/dist/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/Table.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 { Stack, useTheme } from '@mui/material';\nimport {\n  ColumnDef,\n  OnChangeFn,\n  Row,\n  RowSelectionState,\n  SortingState,\n  Table as TanstackTable,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { ReactElement, useCallback, useMemo } from 'react';\nimport { TableCheckbox } from './TableCheckbox';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { DEFAULT_COLUMN_WIDTH, TableProps, persesColumnsToTanstackColumns } from './model/table-model';\n\nconst DEFAULT_GET_ROW_ID = (data: unknown, index: number): string => {\n  return `${index}`;\n};\n\n// Setting these defaults one enables them to be consistent across renders instead\n// of being recreated every time, which can be important for perf because react\n// does not do deep equality checking for objects and arrays.\nconst DEFAULT_ROW_SELECTION: NonNullable<TableProps<unknown>['rowSelection']> = {};\nconst DEFAULT_SORTING: NonNullable<TableProps<unknown>['sorting']> = [];\n\n/**\n * Component used to render tabular data in Perses use cases. This component is\n * **not** intended to be a general use data table for use cases unrelated to Perses.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function Table<TableData>({\n  data,\n  columns,\n  cellConfigs,\n  density = 'standard',\n  defaultColumnWidth = DEFAULT_COLUMN_WIDTH,\n  defaultColumnHeight = 'auto',\n  checkboxSelection,\n  onRowSelectionChange,\n  onSortingChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = DEFAULT_ROW_SELECTION,\n  sorting = DEFAULT_SORTING,\n  getItemActions,\n  hasItemActions,\n  pagination,\n  onPaginationChange,\n  rowSelectionVariant = 'standard',\n  ...otherProps\n}: TableProps<TableData>): ReactElement {\n  const theme = useTheme();\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {\n    const newRowSelection =\n      typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;\n    onRowSelectionChange?.(newRowSelection);\n  };\n\n  const handleRowSelectionEvent = useCallback(\n    (table: TanstackTable<TableData>, row: Row<TableData>, isModified: boolean) => {\n      if (rowSelectionVariant === 'standard' || isModified) {\n        row.toggleSelected();\n      } else {\n        // Legend variant (when action not modified with shift/meta key).\n        // Note that this behavior needs to be kept in sync with behavior in\n        // the Legend component for list-based legends.\n        if (row.getIsSelected() && !table.getIsAllRowsSelected()) {\n          // Row was already selected. Revert to select all.\n          table.toggleAllRowsSelected();\n        } else {\n          // Focus the selected row.\n          onRowSelectionChange?.({\n            [row.id]: true,\n          });\n        }\n      }\n    },\n    [onRowSelectionChange, rowSelectionVariant]\n  );\n\n  const handleCheckboxChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, table: TanstackTable<TableData>, row: Row<TableData>) => {\n      const nativePointerEvent =\n        e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent)\n          ? (e.nativeEvent as PointerEvent)\n          : undefined;\n      const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;\n      handleRowSelectionEvent(table, row, isModifed);\n    },\n    [handleRowSelectionEvent]\n  );\n\n  const handleSortingChange: OnChangeFn<SortingState> = (sortingUpdater) => {\n    const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;\n    onSortingChange?.(newSorting);\n  };\n\n  const actionsColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'itemActions',\n      header: 'Actions',\n      cell: ({ row }): ReactElement => {\n        return (\n          <Stack direction=\"row\" alignItems=\"center\">\n            {getItemActions?.({ id: row.id, data: row.original })}\n          </Stack>\n        );\n      },\n      enableSorting: false,\n    };\n  }, [getItemActions]);\n\n  const checkboxColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'checkboxRowSelect',\n      size: 28,\n      header: ({ table }): ReactElement => {\n        return (\n          <TableCheckbox\n            checked={table.getIsAllRowsSelected()}\n            indeterminate={table.getIsSomeRowsSelected()}\n            onChange={table.getToggleAllRowsSelectedHandler()}\n            color={theme.palette.text.primary}\n            density={density}\n          />\n        );\n      },\n      cell: ({ row, table }): ReactElement => {\n        return (\n          <TableCheckbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={(e) => {\n              handleCheckboxChange(e, table, row);\n            }}\n            color={getCheckboxColor?.(row.original)}\n            density={density}\n          />\n        );\n      },\n      enableSorting: false,\n    };\n  }, [theme.palette.text.primary, density, getCheckboxColor, handleCheckboxChange]);\n\n  const tableColumns: Array<ColumnDef<TableData>> = useMemo(() => {\n    const initTableColumns = persesColumnsToTanstackColumns(columns);\n\n    if (hasItemActions) {\n      initTableColumns.unshift(actionsColumn);\n    }\n\n    if (checkboxSelection) {\n      initTableColumns.unshift(checkboxColumn);\n    }\n\n    return initTableColumns;\n  }, [checkboxColumn, checkboxSelection, columns, hasItemActions, actionsColumn]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,\n    // without this setting, the getPaginationRowModel setting persists and it is not possible to switch from paginated to unpaginated\n    // can be removed once https://github.com/TanStack/table/pull/5974 is merged\n    manualPagination: !pagination,\n    enableRowSelection: !!checkboxSelection,\n    onRowSelectionChange: handleRowSelectionChange,\n    onSortingChange: handleSortingChange,\n    // For now, defaulting to sort by descending first. We can expose the ability\n    // to customize it if/when we have use cases for it.\n    sortDescFirst: true,\n    state: {\n      rowSelection,\n      sorting,\n      ...(pagination ? { pagination } : {}),\n    },\n  });\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>, rowId: string) => {\n      const row = table.getRow(rowId);\n      const isModifiedClick = e.metaKey || e.shiftKey;\n      handleRowSelectionEvent(table, row, isModifiedClick);\n    },\n    [handleRowSelectionEvent, table]\n  );\n\n  return (\n    <VirtualizedTable\n      {...otherProps}\n      density={density}\n      defaultColumnWidth={defaultColumnWidth}\n      defaultColumnHeight={defaultColumnHeight}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getAllFlatColumns()}\n      headers={table.getHeaderGroups()}\n      cellConfigs={cellConfigs}\n      pagination={pagination}\n      onPaginationChange={onPaginationChange}\n      rowCount={table.getRowCount()}\n    />\n  );\n}\n"],"names":["Stack","useTheme","getCoreRowModel","getPaginationRowModel","getSortedRowModel","useReactTable","useCallback","useMemo","TableCheckbox","VirtualizedTable","DEFAULT_COLUMN_WIDTH","persesColumnsToTanstackColumns","DEFAULT_GET_ROW_ID","data","index","DEFAULT_ROW_SELECTION","DEFAULT_SORTING","Table","columns","cellConfigs","density","defaultColumnWidth","defaultColumnHeight","checkboxSelection","onRowSelectionChange","onSortingChange","getCheckboxColor","getRowId","rowSelection","sorting","getItemActions","hasItemActions","pagination","onPaginationChange","rowSelectionVariant","otherProps","theme","handleRowSelectionChange","rowSelectionUpdater","newRowSelection","handleRowSelectionEvent","table","row","isModified","toggleSelected","getIsSelected","getIsAllRowsSelected","toggleAllRowsSelected","id","handleCheckboxChange","e","nativePointerEvent","nativeEvent","MouseEvent","KeyboardEvent","undefined","isModifed","metaKey","shiftKey","handleSortingChange","sortingUpdater","newSorting","actionsColumn","header","cell","direction","alignItems","original","enableSorting","checkboxColumn","size","checked","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","getIsSomeSelected","tableColumns","initTableColumns","unshift","manualPagination","enableRowSelection","sortDescFirst","state","handleRowClick","rowId","getRow","isModifiedClick","onRowClick","rows","getRowModel","getAllFlatColumns","headers","getHeaderGroups","rowCount","getRowCount"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/Table.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 { Stack, useTheme } from '@mui/material';\nimport {\n  ColumnDef,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  OnChangeFn,\n  Row,\n  RowSelectionState,\n  SortingState,\n  Table as TanstackTable,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { ReactElement, useCallback, useMemo, useState } from 'react';\nimport { useFuzzySearch } from './hooks/useFuzzySearch';\nimport { TableCheckbox } from './TableCheckbox';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { DEFAULT_COLUMN_WIDTH, persesColumnsToTanstackColumns, TableProps } from './model/table-model';\n\nconst DEFAULT_GET_ROW_ID = (data: unknown, index: number): string => {\n  return `${index}`;\n};\n\n// Setting these defaults one enables them to be consistent across renders instead\n// of being recreated every time, which can be important for perf because react\n// does not do deep equality checking for objects and arrays.\nconst DEFAULT_ROW_SELECTION: NonNullable<TableProps<unknown>['rowSelection']> = {};\nconst DEFAULT_SORTING: NonNullable<TableProps<unknown>['sorting']> = [];\n\n/**\n * Component used to render tabular data in Perses use cases. This component is\n * **not** intended to be a general use data table for use cases unrelated to Perses.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function Table<TableData>({\n  data,\n  columns,\n  cellConfigs,\n  density = 'standard',\n  defaultColumnWidth = DEFAULT_COLUMN_WIDTH,\n  defaultColumnHeight = 'auto',\n  checkboxSelection,\n  onRowSelectionChange,\n  onSortingChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = DEFAULT_ROW_SELECTION,\n  sorting = DEFAULT_SORTING,\n  getItemActions,\n  hasItemActions,\n  pagination,\n  onPaginationChange,\n  rowSelectionVariant = 'standard',\n  getSubRows,\n  hiddenColumns,\n  tableToolbarConfig,\n  ...otherProps\n}: TableProps<TableData>): ReactElement {\n  const theme = useTheme();\n\n  const { globalFilter, setGlobalFilter, fuzzySearchOptions } = useFuzzySearch<TableData>(\n    tableToolbarConfig?.isSearchEnabled\n  );\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    hiddenColumns?.reduce((acc, columnId) => ({ ...acc, [columnId]: false }), {}) ?? {}\n  );\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> = (rowSelectionUpdater) => {\n    const newRowSelection =\n      typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;\n    onRowSelectionChange?.(newRowSelection);\n  };\n\n  const handleRowSelectionEvent = useCallback(\n    (table: TanstackTable<TableData>, row: Row<TableData>, isModified: boolean) => {\n      if (rowSelectionVariant === 'standard' || isModified) {\n        row.toggleSelected();\n      } else {\n        // Legend variant (when action not modified with shift/meta key).\n        // Note that this behavior needs to be kept in sync with behavior in\n        // the Legend component for list-based legends.\n        if (row.getIsSelected() && !table.getIsAllRowsSelected()) {\n          // Row was already selected. Revert to select all.\n          table.toggleAllRowsSelected();\n        } else {\n          // Focus the selected row.\n          onRowSelectionChange?.({\n            [row.id]: true,\n          });\n        }\n      }\n    },\n    [onRowSelectionChange, rowSelectionVariant]\n  );\n\n  const handleCheckboxChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>, table: TanstackTable<TableData>, row: Row<TableData>) => {\n      const nativePointerEvent =\n        e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent)\n          ? (e.nativeEvent as PointerEvent)\n          : undefined;\n      const isModifed = !!nativePointerEvent?.metaKey || !!nativePointerEvent?.shiftKey;\n      handleRowSelectionEvent(table, row, isModifed);\n    },\n    [handleRowSelectionEvent]\n  );\n\n  const handleSortingChange: OnChangeFn<SortingState> = (sortingUpdater) => {\n    const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;\n    onSortingChange?.(newSorting);\n  };\n\n  const actionsColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'itemActions',\n      header: 'Actions',\n      cell: ({ row }): ReactElement => {\n        return (\n          <Stack direction=\"row\" alignItems=\"center\">\n            {getItemActions?.({ id: row.id, data: row.original })}\n          </Stack>\n        );\n      },\n      enableSorting: false,\n    };\n  }, [getItemActions]);\n\n  const checkboxColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'checkboxRowSelect',\n      size: 28,\n      header: ({ table }): ReactElement => {\n        return (\n          <TableCheckbox\n            checked={table.getIsAllRowsSelected()}\n            indeterminate={table.getIsSomeRowsSelected()}\n            onChange={table.getToggleAllRowsSelectedHandler()}\n            color={theme.palette.text.primary}\n            density={density}\n          />\n        );\n      },\n      cell: ({ row, table }): ReactElement => {\n        return (\n          <TableCheckbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={(e) => {\n              handleCheckboxChange(e, table, row);\n            }}\n            color={getCheckboxColor?.(row.original)}\n            density={density}\n          />\n        );\n      },\n      enableSorting: false,\n    };\n  }, [theme.palette.text.primary, density, getCheckboxColor, handleCheckboxChange]);\n\n  const tableColumns: Array<ColumnDef<TableData>> = useMemo(() => {\n    const initTableColumns = persesColumnsToTanstackColumns(columns);\n\n    if (hasItemActions) {\n      initTableColumns.unshift(actionsColumn);\n    }\n\n    if (checkboxSelection) {\n      initTableColumns.unshift(checkboxColumn);\n    }\n\n    return initTableColumns;\n  }, [checkboxColumn, checkboxSelection, columns, hasItemActions, actionsColumn]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getRowId: getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,\n    // without this setting, the getPaginationRowModel setting persists and it is not possible to switch from paginated to unpaginated\n    // can be removed once https://github.com/TanStack/table/pull/5974 is merged\n    manualPagination: !pagination,\n    enableRowSelection: !!checkboxSelection,\n    onRowSelectionChange: handleRowSelectionChange,\n    onSortingChange: handleSortingChange,\n    onColumnVisibilityChange: setColumnVisibility,\n    getSubRows: getSubRows,\n    getExpandedRowModel: getSubRows ? getExpandedRowModel() : undefined,\n    ...fuzzySearchOptions,\n    // For now, defaulting to sort by descending first. We can expose the ability\n    // to customize it if/when we have use cases for it.\n    sortDescFirst: true,\n    state: {\n      rowSelection,\n      sorting,\n      globalFilter: tableToolbarConfig?.isSearchEnabled ? globalFilter : undefined,\n      columnVisibility,\n      ...(pagination ? { pagination } : {}),\n    },\n  });\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>, rowId: string) => {\n      const row = table.getRow(rowId);\n      const isModifiedClick = e.metaKey || e.shiftKey;\n      handleRowSelectionEvent(table, row, isModifiedClick);\n    },\n    [handleRowSelectionEvent, table]\n  );\n\n  return (\n    <VirtualizedTable\n      {...otherProps}\n      density={density}\n      defaultColumnWidth={defaultColumnWidth}\n      defaultColumnHeight={defaultColumnHeight}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getVisibleFlatColumns()}\n      headers={table.getHeaderGroups()}\n      cellConfigs={cellConfigs}\n      pagination={pagination}\n      onPaginationChange={onPaginationChange}\n      rowCount={table.getRowCount()}\n      toolbarConfig={{\n        isSearchEnabled: tableToolbarConfig?.isSearchEnabled,\n        globalFilter,\n        onGlobalFilterChange: setGlobalFilter,\n        isColumnFilterEnabled: tableToolbarConfig?.isColumnFilterEnabled,\n        columns: table.getAllColumns(),\n        columnFilterMenuMaxHeight: tableToolbarConfig?.columnFilterMenuMaxHeight,\n      }}\n    />\n  );\n}\n"],"names":["Stack","useTheme","getCoreRowModel","getExpandedRowModel","getPaginationRowModel","getSortedRowModel","useReactTable","useCallback","useMemo","useState","useFuzzySearch","TableCheckbox","VirtualizedTable","DEFAULT_COLUMN_WIDTH","persesColumnsToTanstackColumns","DEFAULT_GET_ROW_ID","data","index","DEFAULT_ROW_SELECTION","DEFAULT_SORTING","Table","columns","cellConfigs","density","defaultColumnWidth","defaultColumnHeight","checkboxSelection","onRowSelectionChange","onSortingChange","getCheckboxColor","getRowId","rowSelection","sorting","getItemActions","hasItemActions","pagination","onPaginationChange","rowSelectionVariant","getSubRows","hiddenColumns","tableToolbarConfig","otherProps","theme","globalFilter","setGlobalFilter","fuzzySearchOptions","isSearchEnabled","columnVisibility","setColumnVisibility","reduce","acc","columnId","handleRowSelectionChange","rowSelectionUpdater","newRowSelection","handleRowSelectionEvent","table","row","isModified","toggleSelected","getIsSelected","getIsAllRowsSelected","toggleAllRowsSelected","id","handleCheckboxChange","e","nativePointerEvent","nativeEvent","MouseEvent","KeyboardEvent","undefined","isModifed","metaKey","shiftKey","handleSortingChange","sortingUpdater","newSorting","actionsColumn","header","cell","direction","alignItems","original","enableSorting","checkboxColumn","size","checked","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","getIsSomeSelected","tableColumns","initTableColumns","unshift","manualPagination","enableRowSelection","onColumnVisibilityChange","sortDescFirst","state","handleRowClick","rowId","getRow","isModifiedClick","onRowClick","rows","getRowModel","getVisibleFlatColumns","headers","getHeaderGroups","rowCount","getRowCount","toolbarConfig","onGlobalFilterChange","isColumnFilterEnabled","getAllColumns","columnFilterMenuMaxHeight"],"mappings":"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"}

package/dist/Table/TableToolbar.d.ts

@@ -0,0 +1,34 @@
+import { Column } from '@tanstack/react-table';
+import { ReactElement } from 'react';
+export interface TableToolbarProps<TableData> {
+    /**
+     * When `true`, a search input is rendered.
+     */
+    isSearchEnabled?: boolean;
+    /**
+     * Current value of the global filter / search query.
+     */
+    globalFilter: string;
+    /**
+     * Callback fired when the search query changes.
+     */
+    onGlobalFilterChange: (value: string) => void;
+    /**
+     * When `true`, a "Columns" button is rendered that opens a column visibility dropdown.
+     */
+    isColumnFilterEnabled?: boolean;
+    /**
+     * All columns from the table instance, used to build the visibility menu.
+     */
+    columns: Array<Column<TableData>>;
+    /**
+     * The width of the toolbar, used to determine when to switch to a more compact layout.
+     */
+    width: number | string;
+    /**
+     * Max height for the column filter menu.
+     */
+    columnFilterMenuMaxHeight?: number | string;
+}
+export declare function TableToolbar<TableData>({ isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight, }: TableToolbarProps<TableData>): ReactElement | null;
+//# sourceMappingURL=TableToolbar.d.ts.map

package/dist/Table/TableToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToolbar.d.ts","sourceRoot":"","sources":["../../src/Table/TableToolbar.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAM5D,MAAM,WAAW,iBAAiB,CAAC,SAAS;IAC1C;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7C;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,EACtC,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,qBAAqB,EACrB,OAAO,EACP,KAAK,EACL,yBAA+B,GAChC,EAAE,iBAAiB,CAAC,SAAS,CAAC,GAAG,YAAY,GAAG,IAAI,CA8FpD"}