@perses-dev/components 0.35.0 → 0.36.0

package/dist/LineChart/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/utils.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport merge from 'lodash/merge';\nimport type { YAXisComponentOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions } from '../model';\nimport { dateFormatOptionsWithTimeZone } from '../utils';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  startIndex: number;\n  endIndex: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon\n */\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance) {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/**\n * Calculate date range, used as a fallback when xAxis time range not passed as prop\n */\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n\n/*\n * Determines time granularity for axis labels, defaults to hh:mm\n */\nexport function getFormattedDate(value: number, rangeMs: number, timeZone?: string) {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = dateFormatOptionsWithTimeZone(\n    {\n      hour: 'numeric',\n      minute: 'numeric',\n      hourCycle: 'h23',\n    },\n    timeZone\n  );\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n\n/*\n * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future\n */\nexport function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions) {\n  // TODO: support alternate yAxis that shows on right side\n  const Y_AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number) => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(Y_AXIS_DEFAULT, yAxis)];\n}\n"],"names":["merge","formatValue","dateFormatOptionsWithTimeZone","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","getDateRange","data","defaultRange","lastDatum","getFormattedDate","value","rangeMs","timeZone","dateFormatOptions","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","format","replace","getYAxes","yAxis","unit","Y_AXIS_DEFAULT","boundaryGap","axisLabel","formatter"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/utils.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { formatValue, UnitOptions } from '@perses-dev/core';\nimport merge from 'lodash/merge';\nimport type { YAXisComponentOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { dateFormatOptionsWithTimeZone } from '../utils';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  startIndex: number;\n  endIndex: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon\n */\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance) {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/**\n * Calculate date range, used as a fallback when xAxis time range not passed as prop\n */\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n\n/*\n * Determines time granularity for axis labels, defaults to hh:mm\n */\nexport function getFormattedDate(value: number, rangeMs: number, timeZone?: string) {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = dateFormatOptionsWithTimeZone(\n    {\n      hour: 'numeric',\n      minute: 'numeric',\n      hourCycle: 'h23',\n    },\n    timeZone\n  );\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n\n/*\n * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future\n */\nexport function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions) {\n  // TODO: support alternate yAxis that shows on right side\n  const Y_AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number) => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(Y_AXIS_DEFAULT, yAxis)];\n}\n\n/*\n * Clear all highlighted series when cursor exits canvas\n * https://echarts.apache.org/en/api.html#action.downplay\n */\nexport function clearHighlightedSeries(chart: EChartsInstance, totalSeries: number) {\n  if (chart.dispatchAction !== undefined) {\n    for (let i = 0; i < totalSeries; i++) {\n      chart.dispatchAction({\n        type: 'downplay',\n        seriesIndex: i,\n      });\n    }\n  }\n}\n"],"names":["formatValue","merge","dateFormatOptionsWithTimeZone","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","getDateRange","data","defaultRange","lastDatum","getFormattedDate","value","rangeMs","timeZone","dateFormatOptions","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","format","replace","getYAxes","yAxis","unit","Y_AXIS_DEFAULT","boundaryGap","axisLabel","formatter","clearHighlightedSeries","totalSeries","i","seriesIndex"],"mappings":"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"}

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { DurationString } from '@perses-dev/core';
+import { TimeOption } from '../model';
+interface RefreshIntervalPickerProps {
+    timeOptions: TimeOption[];
+    value?: DurationString;
+    onChange: (value: DurationString) => void;
+    height?: string;
+}
+export declare function RefreshIntervalPicker(props: RefreshIntervalPickerProps): JSX.Element;
+export {};
+//# sourceMappingURL=RefreshIntervalPicker.d.ts.map

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefreshIntervalPicker.d.ts","sourceRoot":"","sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,UAAU,0BAA0B;IAClC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eA6BtE"}

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -0,0 +1,45 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, FormControl, MenuItem, Select } from '@mui/material';
+export function RefreshIntervalPicker(props) {
+    const { value , onChange , timeOptions , height  } = props;
+    const formattedValue = value;
+    return /*#__PURE__*/ _jsx(FormControl, {
+        children: /*#__PURE__*/ _jsx(Box, {
+            children: /*#__PURE__*/ _jsx(Select, {
+                id: "refreshInterval",
+                value: formattedValue,
+                onChange: (event)=>{
+                    const duration = event.target.value;
+                    onChange(duration);
+                },
+                inputProps: {
+                    'aria-label': `Select refresh interval. Currently set to ${formattedValue}`
+                },
+                sx: {
+                    '.MuiSelect-select': height ? {
+                        lineHeight: height,
+                        paddingY: 0
+                    } : {}
+                },
+                children: timeOptions.map((item, idx)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        value: item.value.pastDuration,
+                        children: item.display
+                    }, idx))
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=RefreshIntervalPicker.js.map

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, FormControl, MenuItem, Select } from '@mui/material';\nimport { DurationString } from '@perses-dev/core';\nimport { TimeOption } from '../model';\n\ninterface RefreshIntervalPickerProps {\n  timeOptions: TimeOption[];\n  value?: DurationString;\n  onChange: (value: DurationString) => void;\n  height?: string;\n}\n\nexport function RefreshIntervalPicker(props: RefreshIntervalPickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n  const formattedValue = value;\n  return (\n    <FormControl>\n      <Box>\n        <Select\n          id=\"refreshInterval\"\n          value={formattedValue}\n          onChange={(event) => {\n            const duration = event.target.value as DurationString;\n            onChange(duration);\n          }}\n          inputProps={{\n            'aria-label': `Select refresh interval. Currently set to ${formattedValue}`,\n          }}\n          sx={{\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          {timeOptions.map((item, idx) => (\n            <MenuItem key={idx} value={item.value.pastDuration}>\n              {item.display}\n            </MenuItem>\n          ))}\n        </Select>\n      </Box>\n    </FormControl>\n  );\n}\n"],"names":["Box","FormControl","MenuItem","Select","RefreshIntervalPicker","props","value","onChange","timeOptions","height","formattedValue","id","event","duration","target","inputProps","sx","lineHeight","paddingY","map","item","idx","pastDuration","display"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,eAAe,CAAC;AAWnE,OAAO,SAASC,qBAAqB,CAACC,KAAiC,EAAE;IACvE,MAAM,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGJ,KAAK,AAAC;IACvD,MAAMK,cAAc,GAAGJ,KAAK,AAAC;IAC7B,qBACE,KAACL,WAAW;kBACV,cAAA,KAACD,GAAG;sBACF,cAAA,KAACG,MAAM;gBACLQ,EAAE,EAAC,iBAAiB;gBACpBL,KAAK,EAAEI,cAAc;gBACrBH,QAAQ,EAAE,CAACK,KAAK,GAAK;oBACnB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAACR,KAAK,AAAkB,AAAC;oBACtDC,QAAQ,CAACM,QAAQ,CAAC,CAAC;gBACrB,CAAC;gBACDE,UAAU,EAAE;oBACV,YAAY,EAAE,CAAC,0CAA0C,EAAEL,cAAc,CAAC,CAAC;iBAC5E;gBACDM,EAAE,EAAE;oBACF,mBAAmB,EAAEP,MAAM,GAAG;wBAAEQ,UAAU,EAAER,MAAM;wBAAES,QAAQ,EAAE,CAAC;qBAAE,GAAG,EAAE;iBACvE;0BAEAV,WAAW,CAACW,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAACnB,QAAQ;wBAAWI,KAAK,EAAEc,IAAI,CAACd,KAAK,CAACgB,YAAY;kCAC/CF,IAAI,CAACG,OAAO;uBADAF,GAAG,CAEP,AACZ,CAAC;cACK;UACL;MACM,CACd;AACJ,CAAC"}

package/dist/RefreshIntervalPicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RefreshIntervalPicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/RefreshIntervalPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RefreshIntervalPicker/index.ts"],"names":[],"mappings":"AAaA,cAAc,yBAAyB,CAAC"}

package/dist/{model/units → RefreshIntervalPicker}/index.js

@@ -10,8 +10,6 @@
 // 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.
-export * from './units';
-export * from './constants';
-export * from './types';
+export * from './RefreshIntervalPicker';
 
 //# sourceMappingURL=index.js.map

package/dist/RefreshIntervalPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RefreshIntervalPicker/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './RefreshIntervalPicker';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,yBAAyB,CAAC"}

package/dist/StatChart/StatChart.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { UnitOptions } from '@perses-dev/core';
 import { LineSeriesOption } from 'echarts/charts';
-import { UnitOptions } from '../model/units';
 import { GraphSeries } from '../model/graph';
 export interface StatChartData {
     calculatedValue?: number | null;

package/dist/StatChart/StatChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIjF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAkI9C"}
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAe,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAI5D,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU7C,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAkI9C"}

package/dist/StatChart/StatChart.js

@@ -12,6 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { formatValue } from '@perses-dev/core';
 import { Box, Typography, styled } from '@mui/material';
 import merge from 'lodash/merge';
 import { use } from 'echarts/core';
@@ -19,7 +20,6 @@ import { LineChart as EChartsLineChart } from 'echarts/charts';
 import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { useChartsTheme } from '../context/ChartsThemeProvider';
-import { formatValue } from '../model/units';
 import { EChart } from '../EChart';
 import { useOptimalFontSize } from './calculateFontSize';
 use([

package/dist/StatChart/StatChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box, Typography, styled } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\nimport { useOptimalFontSize } from './calculateFontSize';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\n\nexport interface StatChartData {\n  calculatedValue?: number | null;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n  showSeriesName?: boolean;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline, showSeriesName } = props;\n  const chartsTheme = useChartsTheme();\n\n  let formattedValue = '';\n  if (data.calculatedValue === null) {\n    formattedValue = 'null';\n  } else if (typeof data.calculatedValue === 'number') {\n    formattedValue = formatValue(data.calculatedValue, unit);\n  }\n\n  const containerPadding = chartsTheme.container.padding.default;\n\n  // calculate series name font size and height\n  let seriesNameFontSize = useOptimalFontSize({\n    text: data?.seriesData?.name ?? '',\n    fontWeight: SERIES_NAME_FONT_WEIGHT,\n    width,\n    height: height * 0.125, // assume series name will take 12.5% of available height\n    lineHeight: LINE_HEIGHT,\n    maxSize: SERIES_NAME_MAX_FONT_SIZE,\n  });\n  const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n  // calculate value font size and height\n  const availableWidth = width - containerPadding * 2;\n  const availableHeight = height - seriesNameHeight;\n  const valueFontSize = useOptimalFontSize({\n    text: formattedValue,\n    fontWeight: VALUE_FONT_WEIGHT,\n    // without sparkline, use only 50% of the available width so it looks better for multiseries\n    width: sparkline ? availableWidth : availableWidth * 0.5,\n    // with sparkline, use only 25% of available height to leave room for chart\n    // without sparkline, value should take up 90% of available space\n    height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n    lineHeight: LINE_HEIGHT,\n  });\n  const valueFontHeight = valueFontSize * LINE_HEIGHT;\n\n  // make sure the series name font size is slightly smaller than value font size\n  seriesNameFontSize = Math.min(valueFontSize * 0.7, seriesNameFontSize);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        name: series.name,\n        data: series.values,\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n        min: (value: { min: number; max: number }) => {\n          if (value.min >= 0 && value.min <= 1) {\n            // helps with PercentDecimal units, or datasets that return 0 or 1 booleans\n            return 0;\n          }\n          return value.min;\n        },\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      {showSeriesName && (\n        <SeriesName padding={containerPadding} fontSize={seriesNameFontSize}>\n          {data.seriesData?.name}\n        </SeriesName>\n      )}\n      <Value variant=\"h3\" color={color} fontSize={valueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: height - seriesNameHeight - valueFontHeight,\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n\nconst SeriesName = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'padding' && prop !== 'fontSize',\n})<{ padding?: number; fontSize?: number; textAlignment?: string }>(({ theme, padding, fontSize }) => ({\n  color: theme.palette.text.secondary,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","useOptimalFontSize","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","StatChart","props","data","width","height","unit","color","sparkline","showSeriesName","chartsTheme","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","text","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","valueFontSize","valueFontHeight","Math","min","option","undefined","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","SeriesName","fontSize","Value","variant","theme","echartsTheme","renderer","shouldForwardProp","prop","palette","secondary","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}
+{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { formatValue, UnitOptions } from '@perses-dev/core';\nimport { Box, Typography, styled } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\nimport { useOptimalFontSize } from './calculateFontSize';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\n\nexport interface StatChartData {\n  calculatedValue?: number | null;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n  showSeriesName?: boolean;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, color, sparkline, showSeriesName } = props;\n  const chartsTheme = useChartsTheme();\n\n  let formattedValue = '';\n  if (data.calculatedValue === null) {\n    formattedValue = 'null';\n  } else if (typeof data.calculatedValue === 'number') {\n    formattedValue = formatValue(data.calculatedValue, unit);\n  }\n\n  const containerPadding = chartsTheme.container.padding.default;\n\n  // calculate series name font size and height\n  let seriesNameFontSize = useOptimalFontSize({\n    text: data?.seriesData?.name ?? '',\n    fontWeight: SERIES_NAME_FONT_WEIGHT,\n    width,\n    height: height * 0.125, // assume series name will take 12.5% of available height\n    lineHeight: LINE_HEIGHT,\n    maxSize: SERIES_NAME_MAX_FONT_SIZE,\n  });\n  const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n  // calculate value font size and height\n  const availableWidth = width - containerPadding * 2;\n  const availableHeight = height - seriesNameHeight;\n  const valueFontSize = useOptimalFontSize({\n    text: formattedValue,\n    fontWeight: VALUE_FONT_WEIGHT,\n    // without sparkline, use only 50% of the available width so it looks better for multiseries\n    width: sparkline ? availableWidth : availableWidth * 0.5,\n    // with sparkline, use only 25% of available height to leave room for chart\n    // without sparkline, value should take up 90% of available space\n    height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n    lineHeight: LINE_HEIGHT,\n  });\n  const valueFontHeight = valueFontSize * LINE_HEIGHT;\n\n  // make sure the series name font size is slightly smaller than value font size\n  seriesNameFontSize = Math.min(valueFontSize * 0.7, seriesNameFontSize);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        name: series.name,\n        data: series.values,\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n        min: (value: { min: number; max: number }) => {\n          if (value.min >= 0 && value.min <= 1) {\n            // helps with PercentDecimal units, or datasets that return 0 or 1 booleans\n            return 0;\n          }\n          return value.min;\n        },\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      {showSeriesName && (\n        <SeriesName padding={containerPadding} fontSize={seriesNameFontSize}>\n          {data.seriesData?.name}\n        </SeriesName>\n      )}\n      <Value variant=\"h3\" color={color} fontSize={valueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: height - seriesNameHeight - valueFontHeight,\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n\nconst SeriesName = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'padding' && prop !== 'fontSize',\n})<{ padding?: number; fontSize?: number; textAlignment?: string }>(({ theme, padding, fontSize }) => ({\n  color: theme.palette.text.secondary,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","formatValue","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","useOptimalFontSize","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","StatChart","props","data","width","height","unit","color","sparkline","showSeriesName","chartsTheme","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","text","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","valueFontSize","valueFontHeight","Math","min","option","undefined","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","SeriesName","fontSize","Value","variant","theme","echartsTheme","renderer","shouldForwardProp","prop","palette","secondary","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}

package/dist/Table/InnerTable.js

@@ -23,14 +23,14 @@ const TABLE_DENSITY_CONFIG = {
     compact: 'small',
     standard: 'medium'
 };
-export const InnerTable = /*#__PURE__*/ forwardRef(function InnerTable({ density , width , ...otherProps }, ref) {
+export const InnerTable = /*#__PURE__*/ forwardRef(function InnerTable({ density , ...otherProps }, ref) {
     return /*#__PURE__*/ _jsx(StyledMuiTable, {
         ...otherProps,
         tabIndex: -1,
         size: TABLE_DENSITY_CONFIG[density],
         ref: ref,
         sx: {
-            width: width
+            width: '100%'
         }
     });
 });

package/dist/Table/InnerTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/InnerTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Table as MuiTable, styled, TableProps as MuiTableProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\nconst StyledMuiTable = styled(MuiTable)(({ theme }) => ({\n  // This value is needed to have a consistent table layout when scrolling.\n  tableLayout: 'fixed',\n  borderCollapse: 'separate',\n  backgroundColor: theme.palette.background.default,\n}));\n\ntype InnerTableProps = Omit<MuiTableProps, 'size'> & {\n  density: TableDensity;\n};\n\nconst TABLE_DENSITY_CONFIG: Record<TableDensity, MuiTableProps['size']> = {\n  compact: 'small',\n  standard: 'medium',\n};\n\nexport const InnerTable = forwardRef<HTMLTableElement, InnerTableProps>(function InnerTable(\n  { density, width, ...otherProps },\n  ref\n) {\n  return (\n    <StyledMuiTable\n      {...otherProps}\n      tabIndex={-1}\n      size={TABLE_DENSITY_CONFIG[density]}\n      ref={ref}\n      sx={{\n        width: width,\n      }}\n    />\n  );\n});\n"],"names":["Table","MuiTable","styled","forwardRef","StyledMuiTable","theme","tableLayout","borderCollapse","backgroundColor","palette","background","default","TABLE_DENSITY_CONFIG","compact","standard","InnerTable","density","width","otherProps","ref","tabIndex","size","sx"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,KAAK,IAAIC,QAAQ,EAAEC,MAAM,QAAqC,eAAe,CAAC;AACvF,SAASC,UAAU,QAAQ,OAAO,CAAC;AAGnC,MAAMC,cAAc,GAAGF,MAAM,CAACD,QAAQ,CAAC,CAAC,CAAC,EAAEI,KAAK,CAAA,EAAE,GAAM,CAAA;QACtD,yEAAyE;QACzEC,WAAW,EAAE,OAAO;QACpBC,cAAc,EAAE,UAAU;QAC1BC,eAAe,EAAEH,KAAK,CAACI,OAAO,CAACC,UAAU,CAACC,OAAO;KAClD,CAAA,AAAC,CAAC,AAAC;AAMJ,MAAMC,oBAAoB,GAAgD;IACxEC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,QAAQ;CACnB,AAAC;AAEF,OAAO,MAAMC,UAAU,iBAAGZ,UAAU,CAAoC,SAASY,UAAU,CACzF,EAAEC,OAAO,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGC,UAAU,EAAE,EACjCC,GAAG,EACH;IACA,qBACE,KAACf,cAAc;QACZ,GAAGc,UAAU;QACdE,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAET,oBAAoB,CAACI,OAAO,CAAC;QACnCG,GAAG,EAAEA,GAAG;QACRG,EAAE,EAAE;YACFL,KAAK,EAAEA,KAAK;SACb;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Table/InnerTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Table as MuiTable, styled, TableProps as MuiTableProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\nconst StyledMuiTable = styled(MuiTable)(({ theme }) => ({\n  // This value is needed to have a consistent table layout when scrolling.\n  tableLayout: 'fixed',\n  borderCollapse: 'separate',\n  backgroundColor: theme.palette.background.default,\n}));\n\ntype InnerTableProps = Omit<MuiTableProps, 'size'> & {\n  density: TableDensity;\n};\n\nconst TABLE_DENSITY_CONFIG: Record<TableDensity, MuiTableProps['size']> = {\n  compact: 'small',\n  standard: 'medium',\n};\n\nexport const InnerTable = forwardRef<HTMLTableElement, InnerTableProps>(function InnerTable(\n  { density, ...otherProps },\n  ref\n) {\n  return (\n    <StyledMuiTable\n      {...otherProps}\n      tabIndex={-1}\n      size={TABLE_DENSITY_CONFIG[density]}\n      ref={ref}\n      sx={{\n        width: '100%',\n      }}\n    />\n  );\n});\n"],"names":["Table","MuiTable","styled","forwardRef","StyledMuiTable","theme","tableLayout","borderCollapse","backgroundColor","palette","background","default","TABLE_DENSITY_CONFIG","compact","standard","InnerTable","density","otherProps","ref","tabIndex","size","sx","width"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,KAAK,IAAIC,QAAQ,EAAEC,MAAM,QAAqC,eAAe,CAAC;AACvF,SAASC,UAAU,QAAQ,OAAO,CAAC;AAGnC,MAAMC,cAAc,GAAGF,MAAM,CAACD,QAAQ,CAAC,CAAC,CAAC,EAAEI,KAAK,CAAA,EAAE,GAAM,CAAA;QACtD,yEAAyE;QACzEC,WAAW,EAAE,OAAO;QACpBC,cAAc,EAAE,UAAU;QAC1BC,eAAe,EAAEH,KAAK,CAACI,OAAO,CAACC,UAAU,CAACC,OAAO;KAClD,CAAA,AAAC,CAAC,AAAC;AAMJ,MAAMC,oBAAoB,GAAgD;IACxEC,OAAO,EAAE,OAAO;IAChBC,QAAQ,EAAE,QAAQ;CACnB,AAAC;AAEF,OAAO,MAAMC,UAAU,iBAAGZ,UAAU,CAAoC,SAASY,UAAU,CACzF,EAAEC,OAAO,CAAA,EAAE,GAAGC,UAAU,EAAE,EAC1BC,GAAG,EACH;IACA,qBACE,KAACd,cAAc;QACZ,GAAGa,UAAU;QACdE,QAAQ,EAAE,CAAC,CAAC;QACZC,IAAI,EAAER,oBAAoB,CAACI,OAAO,CAAC;QACnCE,GAAG,EAAEA,GAAG;QACRG,EAAE,EAAE;YACFC,KAAK,EAAE,MAAM;SACd;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}

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, density, checkboxSelection, onRowSelectionChange, getCheckboxColor, getRowId, rowSelection, ...otherProps }: TableProps<TableData>): JSX.Element;
+export declare function Table<TableData>({ data, columns, density, checkboxSelection, onRowSelectionChange, onSortingChange, getCheckboxColor, getRowId, rowSelection, sorting, rowSelectionVariant, ...otherProps }: TableProps<TableData>): JSX.Element;
 //# 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":";AAkBA,OAAO,EAAE,UAAU,EAAkC,MAAM,qBAAqB,CAAC;AAMjF;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,SAAS,EAAE,EAC/B,IAAI,EACJ,OAAO,EACP,OAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,QAA6B,EAC7B,YAAiB,EACjB,GAAG,UAAU,EACd,EAAE,UAAU,CAAC,SAAS,CAAC,eA+EvB"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":";AA4BA,OAAO,EAAE,UAAU,EAAkC,MAAM,qBAAqB,CAAC;AAYjF;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,SAAS,EAAE,EAC/B,IAAI,EACJ,OAAO,EACP,OAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,QAA6B,EAC7B,YAAoC,EACpC,OAAyB,EACzB,mBAAgC,EAChC,GAAG,UAAU,EACd,EAAE,UAAU,CAAC,SAAS,CAAC,eA+HvB"}

package/dist/Table/Table.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import { useReactTable, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { useTheme } from '@mui/material';
 import { useCallback, useMemo } from 'react';
 import { VirtualizedTable } from './VirtualizedTable';
@@ -20,17 +20,54 @@ import { persesColumnsToTanstackColumns } from './model/table-model';
 const DEFAULT_GET_ROW_ID = (data, index)=>{
     return `${index}`;
 };
+// Setting these defaults one enables them to be consistent across renders instead
+// of being recreated every time, which can be important for perf because react
+// does not do deep equality checking for objects and arrays.
+const DEFAULT_ROW_SELECTION = {};
+const DEFAULT_SORTING = [];
 /**
  * Component used to render tabular data in Perses use cases. This component is
  * **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 , density ='standard' , checkboxSelection , onRowSelectionChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection ={} , ...otherProps }) {
+ */ export function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , onSortingChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection =DEFAULT_ROW_SELECTION , sorting =DEFAULT_SORTING , rowSelectionVariant ='standard' , ...otherProps }) {
     const theme = useTheme();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
         onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(newRowSelection);
     };
+    const handleRowSelectionEvent = useCallback((table, row, isModified)=>{
+        if (rowSelectionVariant === 'standard' || isModified) {
+            row.toggleSelected();
+        } else {
+            // Legend variant (when action not modified with shift/meta key).
+            // Note that this behavior needs to be kept in sync with behavior in
+            // the Legend component for list-based legends.
+            if (row.getIsSelected() && !table.getIsAllRowsSelected()) {
+                // Row was already selected. Revert to select all.
+                table.toggleAllRowsSelected();
+            } else {
+                // Focus the selected row.
+                onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange({
+                    [row.id]: true
+                });
+            }
+        }
+    }, [
+        onRowSelectionChange,
+        rowSelectionVariant
+    ]);
+    const handleCheckboxChange = useCallback((e, table, row)=>{
+        const nativePointerEvent = e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent) ? e.nativeEvent : undefined;
+        const isModifed = !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.metaKey) || !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.shiftKey);
+        handleRowSelectionEvent(table, row, isModifed);
+    }, [
+        handleRowSelectionEvent
+    ]);
+    const handleSortingChange = (sortingUpdater)=>{
+        const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;
+        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(newSorting);
+    };
     const checkboxColumn = useMemo(()=>{
         return {
             id: 'checkboxRowSelect',
@@ -44,22 +81,24 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
                     density: density
                 });
             },
-            cell: ({ row  })=>{
+            cell: ({ row , table  })=>{
                 return /*#__PURE__*/ _jsx(TableCheckbox, {
                     checked: row.getIsSelected(),
                     indeterminate: row.getIsSomeSelected(),
                     onChange: (e)=>{
-                        row.getToggleSelectedHandler()(e);
+                        handleCheckboxChange(e, table, row);
                     },
                     color: getCheckboxColor === null || getCheckboxColor === void 0 ? void 0 : getCheckboxColor(row.original),
                     density: density
                 });
-            }
+            },
+            enableSorting: false
         };
     }, [
+        theme.palette.text.primary,
         density,
         getCheckboxColor,
-        theme.palette.text.primary
+        handleCheckboxChange
     ]);
     const tableColumns = useMemo(()=>{
         const initTableColumns = persesColumnsToTanstackColumns(columns);
@@ -77,15 +116,24 @@ const DEFAULT_GET_ROW_ID = (data, index)=>{
         columns: tableColumns,
         getRowId,
         getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
         enableRowSelection: !!checkboxSelection,
         onRowSelectionChange: handleRowSelectionChange,
+        onSortingChange: handleSortingChange,
+        // 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
+            rowSelection,
+            sorting
         }
     });
-    const handleRowClick = useCallback((rowId)=>{
-        table.getRow(rowId).toggleSelected();
+    const handleRowClick = useCallback((e, rowId)=>{
+        const row = table.getRow(rowId);
+        const isModifiedClick = e.metaKey || e.shiftKey;
+        handleRowSelectionEvent(table, row, isModifiedClick);
     }, [
+        handleRowSelectionEvent,
         table
     ]);
     return /*#__PURE__*/ _jsx(VirtualizedTable, {

package/dist/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/Table.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useReactTable, getCoreRowModel, ColumnDef, RowSelectionState, OnChangeFn } from '@tanstack/react-table';\nimport { useTheme } from '@mui/material';\nimport { useCallback, useMemo } from 'react';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { TableCheckbox } from './TableCheckbox';\nimport { TableProps, persesColumnsToTanstackColumns } from './model/table-model';\n\nconst DEFAULT_GET_ROW_ID = (data: unknown, index: number) => {\n  return `${index}`;\n};\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  density = 'standard',\n  checkboxSelection,\n  onRowSelectionChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = {},\n  ...otherProps\n}: TableProps<TableData>) {\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 checkboxColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'checkboxRowSelect',\n      size: 28,\n      header: ({ table }) => {\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 }) => {\n        return (\n          <TableCheckbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={(e) => {\n              row.getToggleSelectedHandler()(e);\n            }}\n            color={getCheckboxColor?.(row.original)}\n            density={density}\n          />\n        );\n      },\n    };\n  }, [density, getCheckboxColor, theme.palette.text.primary]);\n\n  const tableColumns: Array<ColumnDef<TableData>> = useMemo(() => {\n    const initTableColumns = persesColumnsToTanstackColumns(columns);\n\n    if (checkboxSelection) {\n      initTableColumns.unshift(checkboxColumn);\n    }\n\n    return initTableColumns;\n  }, [checkboxColumn, checkboxSelection, columns]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    enableRowSelection: !!checkboxSelection,\n    onRowSelectionChange: handleRowSelectionChange,\n    state: {\n      rowSelection,\n    },\n  });\n\n  const handleRowClick = useCallback(\n    (rowId: string) => {\n      table.getRow(rowId).toggleSelected();\n    },\n    [table]\n  );\n\n  return (\n    <VirtualizedTable\n      {...otherProps}\n      density={density}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getAllFlatColumns()}\n      headers={table.getHeaderGroups()}\n    />\n  );\n}\n"],"names":["useReactTable","getCoreRowModel","useTheme","useCallback","useMemo","VirtualizedTable","TableCheckbox","persesColumnsToTanstackColumns","DEFAULT_GET_ROW_ID","data","index","Table","columns","density","checkboxSelection","onRowSelectionChange","getCheckboxColor","getRowId","rowSelection","otherProps","theme","handleRowSelectionChange","rowSelectionUpdater","newRowSelection","checkboxColumn","id","size","header","table","checked","getIsAllRowsSelected","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","cell","row","getIsSelected","getIsSomeSelected","e","getToggleSelectedHandler","original","tableColumns","initTableColumns","unshift","enableRowSelection","state","handleRowClick","rowId","getRow","toggleSelected","onRowClick","rows","getRowModel","getAllFlatColumns","headers","getHeaderGroups"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/Table.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  useReactTable,\n  getCoreRowModel,\n  ColumnDef,\n  RowSelectionState,\n  OnChangeFn,\n  Row,\n  Table as TanstackTable,\n  SortingState,\n  getSortedRowModel,\n} from '@tanstack/react-table';\nimport { useTheme } from '@mui/material';\nimport { useCallback, useMemo } from 'react';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { TableCheckbox } from './TableCheckbox';\nimport { TableProps, persesColumnsToTanstackColumns } from './model/table-model';\n\nconst DEFAULT_GET_ROW_ID = (data: unknown, index: number) => {\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  density = 'standard',\n  checkboxSelection,\n  onRowSelectionChange,\n  onSortingChange,\n  getCheckboxColor,\n  getRowId = DEFAULT_GET_ROW_ID,\n  rowSelection = DEFAULT_ROW_SELECTION,\n  sorting = DEFAULT_SORTING,\n  rowSelectionVariant = 'standard',\n  ...otherProps\n}: TableProps<TableData>) {\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 checkboxColumn: ColumnDef<TableData> = useMemo(() => {\n    return {\n      id: 'checkboxRowSelect',\n      size: 28,\n      header: ({ table }) => {\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 }) => {\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 (checkboxSelection) {\n      initTableColumns.unshift(checkboxColumn);\n    }\n\n    return initTableColumns;\n  }, [checkboxColumn, checkboxSelection, columns]);\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\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    },\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      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getAllFlatColumns()}\n      headers={table.getHeaderGroups()}\n    />\n  );\n}\n"],"names":["useReactTable","getCoreRowModel","getSortedRowModel","useTheme","useCallback","useMemo","VirtualizedTable","TableCheckbox","persesColumnsToTanstackColumns","DEFAULT_GET_ROW_ID","data","index","DEFAULT_ROW_SELECTION","DEFAULT_SORTING","Table","columns","density","checkboxSelection","onRowSelectionChange","onSortingChange","getCheckboxColor","getRowId","rowSelection","sorting","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","checkboxColumn","size","header","checked","indeterminate","getIsSomeRowsSelected","onChange","getToggleAllRowsSelectedHandler","color","palette","text","primary","cell","getIsSomeSelected","original","enableSorting","tableColumns","initTableColumns","unshift","enableRowSelection","sortDescFirst","state","handleRowClick","rowId","getRow","isModifiedClick","onRowClick","rows","getRowModel","getAllFlatColumns","headers","getHeaderGroups"],"mappings":"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"}

package/dist/Table/TableCell.d.ts

@@ -6,6 +6,16 @@ export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'al
     isLastColumn: boolean;
     isFirstColumn: boolean;
     align?: TableCellAlignment;
+    /**
+     * Additional information to be displayed when hovering over the cell. This
+     * may be the full cell value (e.g. to enable the user to see the full value
+     * if it is ellipsized to fit into the space) or some other descriptive text
+     * that is useful for the user.
+     *
+     * The hover behavior is currently managed with the `title` attribute, but this
+     * may be changed to a tooltip in the future.
+     */
+    description?: string;
     /**
      * How the cell should behave related to focus.
      * - `trigger-focus`: the cell should be auto-focused when it renders.
@@ -17,5 +27,5 @@ export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'al
     focusState?: 'trigger-focus' | 'focus-next' | 'none';
     onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;
 }
-export declare function TableCell({ children, density, variant, width, focusState, onFocusTrigger, isFirstColumn, isLastColumn, ...otherProps }: TableCellProps): JSX.Element;
+export declare function TableCell({ children, density, variant, width, focusState, onFocusTrigger, isFirstColumn, isLastColumn, description, ...otherProps }: TableCellProps): JSX.Element;
 //# sourceMappingURL=TableCell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAqC,cAAc,IAAI,iBAAiB,EAAiB,MAAM,eAAe,CAAC;AAEtH,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAmB3F,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IAGtB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,GAAG,UAAU,EACd,EAAE,cAAc,eAqEhB"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAqC,cAAc,IAAI,iBAAiB,EAAiB,MAAM,eAAe,CAAC;AAEtH,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAmB3F,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IAGtB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;CAClH;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,GAAG,UAAU,EACd,EAAE,cAAc,eA2EhB"}

package/dist/Table/TableCell.js

@@ -29,7 +29,7 @@ const StyledMuiTableCell = styled(MuiTableCell)(({ theme  })=>({
             borderRadius: 0
         }
     }));
-export function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , ...otherProps }) {
+export function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , description , ...otherProps }) {
     const theme = useTheme();
     const elRef = useRef();
     const isHeader = variant === 'head';
@@ -43,7 +43,7 @@ export function TableCell({ children , density , variant , width , focusState ='
     const handleFocus = (e)=>{
         var ref;
         // From https://zellwk.com/blog/keyboard-focusable-elements/
-        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details');
+        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
         if (nestedFocusTarget) {
             // If the cell has a focusable child, focus it instead. Mostly used for
             // checkbox cells, but could have other uses.
@@ -84,8 +84,13 @@ export function TableCell({ children , density , variant , width , focusState ='
                 // this with a prop on column config in the future.
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                textOverflow: 'ellipsis',
+                // Need to inherit from the MUI cell because this manages some ordering
+                // that the `TableSortLabel` uses to determine the location of the icon
+                // in headers.
+                flexDirection: 'inherit'
             },
+            title: description,
             children: children
         })
     });

package/dist/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density, { isLastColumn, isFirstColumn }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","isFirstColumn","isLastColumn","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableCellAlignment, TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * Additional information to be displayed when hovering over the cell. This\n   * may be the full cell value (e.g. to enable the user to see the full value\n   * if it is ellipsized to fit into the space) or some other descriptive text\n   * that is useful for the user.\n   *\n   * The hover behavior is currently managed with the `title` attribute, but this\n   * may be changed to a tooltip in the future.\n   */\n  description?: string;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  description,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details,[role=\"button\"]'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density, { isLastColumn, isFirstColumn }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n\n          // Need to inherit from the MUI cell because this manages some ordering\n          // that the `TableSortLabel` uses to determine the location of the icon\n          // in headers.\n          flexDirection: 'inherit',\n        }}\n        title={description}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","isFirstColumn","isLastColumn","description","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow","flexDirection","title"],"mappings":"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"}

package/dist/Table/TableCheckbox.js

@@ -40,7 +40,7 @@ export function TableCheckbox({ color , density , ...otherProps }) {
                 background: color ? alpha(color, 0.5) : undefined
             },
             '& .MuiSvgIcon-root': {
-                fontSize: isCompact ? 14 : 16
+                fontSize: isCompact ? 16 : 18
             }
         }
     });