@perses-dev/components 0.50.0 → 0.51.0-beta.0

package/dist/StatusHistoryChart/StatusHistoryChart.js

@@ -16,10 +16,9 @@ import { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
 import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import { useMemo } from 'react';
-import { useChartsTheme, useTimeZone } from '../context';
+import { useChartsTheme } from '../context/ChartsProvider';
+import { useTimeZone } from '../context/TimeZoneProvider';
 import { EChart } from '../EChart';
-import { getColorsForValues } from './utils/get-color';
 import { getFormattedStatusHistoryAxisLabel } from './get-formatted-axis-label';
 import { generateTooltipHTML } from './StatusHistoryTooltip';
 use([
@@ -31,34 +30,18 @@ use([
     TooltipComponent,
     CanvasRenderer
 ]);
-export function StatusHistoryChart(props) {
-    const { height, data, xAxisCategories, yAxisCategories, timeScale } = props;
+export const StatusHistoryChart = (props)=>{
+    const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;
     const { timeZone } = useTimeZone();
     const chartsTheme = useChartsTheme();
     const theme = useTheme();
-    const uniqueValues = useMemo(()=>[
-            ...new Set(data.map((item)=>item[2]))
-        ].filter((value)=>value !== undefined), [
-        data
-    ]);
-    // get colors from theme and generate colors if not provided
-    const pieces = useMemo(()=>{
-        const themeColors = Array.isArray(chartsTheme.echartsTheme.color) ? chartsTheme.echartsTheme.color.filter((color)=>typeof color === 'string') : [];
-        return uniqueValues.map((value, index)=>({
-                value,
-                color: getColorsForValues(uniqueValues, themeColors)[index]
-            }));
-    }, [
-        uniqueValues,
-        chartsTheme.echartsTheme.color
-    ]);
-    var _timeScale_rangeMs;
     const option = {
         tooltip: {
             appendToBody: true,
             formatter: (params)=>{
                 return generateTooltipHTML({
-                    data: params.data,
+                    data: params.data.value,
+                    label: params.data.label,
                     marker: params.marker,
                     xAxisCategories,
                     yAxisCategories,
@@ -81,7 +64,7 @@ export function StatusHistoryChart(props) {
             },
             axisLabel: {
                 hideOverlap: true,
-                formatter: getFormattedStatusHistoryAxisLabel((_timeScale_rangeMs = timeScale === null || timeScale === void 0 ? void 0 : timeScale.rangeMs) !== null && _timeScale_rangeMs !== void 0 ? _timeScale_rangeMs : 0, timeZone)
+                formatter: getFormattedStatusHistoryAxisLabel(timeScale?.rangeMs ?? 0, timeZone)
             }
         },
         yAxis: {
@@ -104,7 +87,7 @@ export function StatusHistoryChart(props) {
         visualMap: {
             show: false,
             type: 'piecewise',
-            pieces
+            pieces: colors
         },
         series: [
             {
@@ -144,6 +127,6 @@ export function StatusHistoryChart(props) {
             theme: chartsTheme.echartsTheme
         })
     });
-}
+};
 
 //# sourceMappingURL=StatusHistoryChart.js.map

package/dist/StatusHistoryChart/StatusHistoryChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatusHistoryChart/StatusHistoryChart.tsx"],"sourcesContent":["// Copyright 2024 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, useTheme } from '@mui/material';\nimport { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  VisualMapComponent,\n  LegendComponentOption,\n} from 'echarts/components';\nimport { EChartsCoreOption, use } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { TimeScale } from '@perses-dev/core';\nimport { ReactElement, useMemo } from 'react';\nimport { useChartsTheme, useTimeZone } from '../context';\nimport { EChart } from '../EChart';\nimport { getColorsForValues } from './utils/get-color';\nimport { getFormattedStatusHistoryAxisLabel } from './get-formatted-axis-label';\nimport { generateTooltipHTML } from './StatusHistoryTooltip';\n\nuse([\n  EChartsHeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport type StatusHistoryData = [number, number, number | undefined];\n\nexport interface StatusHistoryChartProps {\n  height: number;\n  data: StatusHistoryData[];\n  xAxisCategories: number[];\n  yAxisCategories: string[];\n  legend?: LegendComponentOption;\n  timeScale?: TimeScale;\n}\n\nexport function StatusHistoryChart(props: StatusHistoryChartProps): ReactElement {\n  const { height, data, xAxisCategories, yAxisCategories, timeScale } = props;\n  const { timeZone } = useTimeZone();\n  const chartsTheme = useChartsTheme();\n  const theme = useTheme();\n\n  const uniqueValues = useMemo(\n    () => [...new Set(data.map((item) => item[2]))].filter((value): value is number => value !== undefined),\n    [data]\n  );\n\n  // get colors from theme and generate colors if not provided\n  const pieces = useMemo(() => {\n    const themeColors = Array.isArray(chartsTheme.echartsTheme.color)\n      ? chartsTheme.echartsTheme.color.filter((color): color is string => typeof color === 'string')\n      : [];\n\n    return uniqueValues.map((value, index) => ({\n      value,\n      color: getColorsForValues(uniqueValues, themeColors)[index],\n    }));\n  }, [uniqueValues, chartsTheme.echartsTheme.color]);\n\n  const option: EChartsCoreOption = {\n    tooltip: {\n      appendToBody: true,\n      formatter: (params: { data: StatusHistoryData; marker: string }) => {\n        return generateTooltipHTML({\n          data: params.data,\n          marker: params.marker,\n          xAxisCategories,\n          yAxisCategories,\n          theme,\n        });\n      },\n    },\n    grid: {\n      top: '5%',\n      bottom: '5%',\n    },\n    xAxis: {\n      type: 'category',\n      data: xAxisCategories,\n      axisLine: {\n        show: false,\n      },\n      splitArea: {\n        show: false,\n      },\n      axisLabel: {\n        hideOverlap: true,\n        formatter: getFormattedStatusHistoryAxisLabel(timeScale?.rangeMs ?? 0, timeZone),\n      },\n    },\n    yAxis: {\n      type: 'category',\n      data: yAxisCategories,\n      axisLine: {\n        show: false,\n      },\n      splitArea: {\n        show: false,\n        interval: 0,\n      },\n      splitLine: {\n        show: false,\n      },\n      axisLabel: {\n        interval: 0,\n      },\n    },\n    visualMap: {\n      show: false,\n      type: 'piecewise',\n      pieces,\n    },\n    series: [\n      {\n        name: 'Status history',\n        type: 'heatmap',\n        coordinateSystem: 'cartesian2d',\n        data: data,\n        label: {\n          show: false,\n        },\n        itemStyle: {\n          borderWidth: 1,\n          borderType: 'solid',\n          borderColor: '#ffffff',\n        },\n        emphasis: {\n          itemStyle: {\n            opacity: 0.5,\n          },\n        },\n      },\n    ],\n  };\n\n  return (\n    <Box style={{ height: height }} sx={{ overflow: 'auto' }}>\n      <EChart\n        sx={{\n          width: '100%',\n          height: height,\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","HeatmapChart","EChartsHeatmapChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","VisualMapComponent","use","CanvasRenderer","useMemo","useChartsTheme","useTimeZone","EChart","getColorsForValues","getFormattedStatusHistoryAxisLabel","generateTooltipHTML","StatusHistoryChart","props","height","data","xAxisCategories","yAxisCategories","timeScale","timeZone","chartsTheme","theme","uniqueValues","Set","map","item","filter","value","undefined","pieces","themeColors","Array","isArray","echartsTheme","color","index","option","tooltip","appendToBody","formatter","params","marker","grid","top","bottom","xAxis","type","axisLine","show","splitArea","axisLabel","hideOverlap","rangeMs","yAxis","interval","splitLine","visualMap","series","name","coordinateSystem","label","itemStyle","borderWidth","borderType","borderColor","emphasis","opacity","style","sx","overflow","width"],"mappings":"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"}
+{"version":3,"sources":["../../src/StatusHistoryChart/StatusHistoryChart.tsx"],"sourcesContent":["// Copyright 2024 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, useTheme } from '@mui/material';\nimport { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  VisualMapComponent,\n  LegendComponentOption,\n} from 'echarts/components';\nimport { use } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { TimeScale } from '@perses-dev/core';\nimport { EChartsCoreOption } from 'echarts';\nimport { FC } from 'react';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { EChart } from '../EChart';\nimport { getFormattedStatusHistoryAxisLabel } from './get-formatted-axis-label';\nimport { generateTooltipHTML } from './StatusHistoryTooltip';\n\nuse([\n  EChartsHeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport type StatusHistoryData = [number, number, number | undefined];\n\nexport interface StatusHistoryDataItem {\n  value: StatusHistoryData;\n  label?: string;\n  itemStyle?: {\n    color?: string;\n    borderColor?: string;\n    borderWidth?: number;\n  };\n}\n\nexport interface StatusHistoryChartProps {\n  height: number;\n  data: StatusHistoryDataItem[];\n  xAxisCategories: number[];\n  yAxisCategories: string[];\n  legend?: LegendComponentOption;\n  timeScale?: TimeScale;\n  colors?: Array<{ value: number | string; color: string }>;\n}\n\nexport const StatusHistoryChart: FC<StatusHistoryChartProps> = (props) => {\n  const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;\n  const { timeZone } = useTimeZone();\n  const chartsTheme = useChartsTheme();\n  const theme = useTheme();\n\n  const option: EChartsCoreOption = {\n    tooltip: {\n      appendToBody: true,\n      formatter: (params: { data: StatusHistoryDataItem; marker: string }) => {\n        return generateTooltipHTML({\n          data: params.data.value,\n          label: params.data.label,\n          marker: params.marker,\n          xAxisCategories,\n          yAxisCategories,\n          theme,\n        });\n      },\n    },\n    grid: {\n      top: '5%',\n      bottom: '5%',\n    },\n    xAxis: {\n      type: 'category',\n      data: xAxisCategories,\n      axisLine: {\n        show: false,\n      },\n      splitArea: {\n        show: false,\n      },\n      axisLabel: {\n        hideOverlap: true,\n        formatter: getFormattedStatusHistoryAxisLabel(timeScale?.rangeMs ?? 0, timeZone),\n      },\n    },\n    yAxis: {\n      type: 'category',\n      data: yAxisCategories,\n      axisLine: {\n        show: false,\n      },\n      splitArea: {\n        show: false,\n        interval: 0,\n      },\n      splitLine: {\n        show: false,\n      },\n      axisLabel: {\n        interval: 0,\n      },\n    },\n    visualMap: {\n      show: false,\n      type: 'piecewise',\n      pieces: colors,\n    },\n    series: [\n      {\n        name: 'Status history',\n        type: 'heatmap',\n        coordinateSystem: 'cartesian2d',\n        data: data,\n        label: {\n          show: false,\n        },\n        itemStyle: {\n          borderWidth: 1,\n          borderType: 'solid',\n          borderColor: '#ffffff',\n        },\n        emphasis: {\n          itemStyle: {\n            opacity: 0.5,\n          },\n        },\n      },\n    ],\n  };\n\n  return (\n    <Box style={{ height: height }} sx={{ overflow: 'auto' }}>\n      <EChart\n        sx={{\n          width: '100%',\n          height: height,\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n};\n"],"names":["Box","useTheme","HeatmapChart","EChartsHeatmapChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","VisualMapComponent","use","CanvasRenderer","useChartsTheme","useTimeZone","EChart","getFormattedStatusHistoryAxisLabel","generateTooltipHTML","StatusHistoryChart","props","height","data","xAxisCategories","yAxisCategories","timeScale","colors","timeZone","chartsTheme","theme","option","tooltip","appendToBody","formatter","params","value","label","marker","grid","top","bottom","xAxis","type","axisLine","show","splitArea","axisLabel","hideOverlap","rangeMs","yAxis","interval","splitLine","visualMap","pieces","series","name","coordinateSystem","itemStyle","borderWidth","borderType","borderColor","emphasis","opacity","style","sx","overflow","width","echartsTheme"],"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,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,gBAAgBC,mBAAmB,QAAQ,iBAAiB;AACrE,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,EAChBC,kBAAkB,QAEb,qBAAqB;AAC5B,SAASC,GAAG,QAAQ,eAAe;AACnC,SAASC,cAAc,QAAQ,oBAAoB;AAInD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,kCAAkC,QAAQ,6BAA6B;AAChF,SAASC,mBAAmB,QAAQ,yBAAyB;AAE7DN,IAAI;IACFN;IACAK;IACAJ;IACAC;IACAC;IACAC;IACAG;CACD;AAwBD,OAAO,MAAMM,qBAAkD,CAACC;IAC9D,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,eAAe,EAAEC,eAAe,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGN;IAC9E,MAAM,EAAEO,QAAQ,EAAE,GAAGZ;IACrB,MAAMa,cAAcd;IACpB,MAAMe,QAAQzB;IAEd,MAAM0B,SAA4B;QAChCC,SAAS;YACPC,cAAc;YACdC,WAAW,CAACC;gBACV,OAAOhB,oBAAoB;oBACzBI,MAAMY,OAAOZ,IAAI,CAACa,KAAK;oBACvBC,OAAOF,OAAOZ,IAAI,CAACc,KAAK;oBACxBC,QAAQH,OAAOG,MAAM;oBACrBd;oBACAC;oBACAK;gBACF;YACF;QACF;QACAS,MAAM;YACJC,KAAK;YACLC,QAAQ;QACV;QACAC,OAAO;YACLC,MAAM;YACNpB,MAAMC;YACNoB,UAAU;gBACRC,MAAM;YACR;YACAC,WAAW;gBACTD,MAAM;YACR;YACAE,WAAW;gBACTC,aAAa;gBACbd,WAAWhB,mCAAmCQ,WAAWuB,WAAW,GAAGrB;YACzE;QACF;QACAsB,OAAO;YACLP,MAAM;YACNpB,MAAME;YACNmB,UAAU;gBACRC,MAAM;YACR;YACAC,WAAW;gBACTD,MAAM;gBACNM,UAAU;YACZ;YACAC,WAAW;gBACTP,MAAM;YACR;YACAE,WAAW;gBACTI,UAAU;YACZ;QACF;QACAE,WAAW;YACTR,MAAM;YACNF,MAAM;YACNW,QAAQ3B;QACV;QACA4B,QAAQ;YACN;gBACEC,MAAM;gBACNb,MAAM;gBACNc,kBAAkB;gBAClBlC,MAAMA;gBACNc,OAAO;oBACLQ,MAAM;gBACR;gBACAa,WAAW;oBACTC,aAAa;oBACbC,YAAY;oBACZC,aAAa;gBACf;gBACAC,UAAU;oBACRJ,WAAW;wBACTK,SAAS;oBACX;gBACF;YACF;SACD;IACH;IAEA,qBACE,KAAC3D;QAAI4D,OAAO;YAAE1C,QAAQA;QAAO;QAAG2C,IAAI;YAAEC,UAAU;QAAO;kBACrD,cAAA,KAACjD;YACCgD,IAAI;gBACFE,OAAO;gBACP7C,QAAQA;YACV;YACAS,QAAQA;YACRD,OAAOD,YAAYuC,YAAY;;;AAIvC,EAAE"}

package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts

@@ -2,11 +2,12 @@ import { Theme } from '@mui/material';
 import { StatusHistoryData } from './StatusHistoryChart';
 interface CustomTooltipProps {
     data: StatusHistoryData;
+    label?: string;
     marker: string;
     xAxisCategories: number[];
     yAxisCategories: string[];
     theme: Theme;
 }
-export declare function generateTooltipHTML({ data, marker, xAxisCategories, yAxisCategories, theme, }: CustomTooltipProps): string;
+export declare function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme, }: CustomTooltipProps): string;
 export {};
 //# sourceMappingURL=StatusHistoryTooltip.d.ts.map

package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusHistoryTooltip.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/StatusHistoryTooltip.ts"],"names":[],"mappings":"AAaA,OAAO,EAAO,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,iBAAiB,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,eAAe,EACf,eAAe,EACf,KAAK,GACN,EAAE,kBAAkB,GAAG,MAAM,CAmC7B"}
+{"version":3,"file":"StatusHistoryTooltip.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/StatusHistoryTooltip.ts"],"names":[],"mappings":"AAaA,OAAO,EAAO,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,MAAM,EACN,eAAe,EACf,eAAe,EACf,KAAK,GACN,EAAE,kBAAkB,GAAG,MAAM,CAmC7B"}

package/dist/StatusHistoryChart/StatusHistoryTooltip.js

@@ -12,8 +12,8 @@
 // limitations under the License.
 import { css } from '@mui/material';
 import { getDateAndTime } from '../utils';
-export function generateTooltipHTML({ data, marker, xAxisCategories, yAxisCategories, theme }) {
-    const [x, y, value] = data;
+export function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme }) {
+    const [x, y] = data;
     const xAxisLabel = xAxisCategories[x];
     const { formattedDate, formattedTime } = getDateAndTime(xAxisLabel);
     const tooltipHeader = css`
@@ -37,7 +37,7 @@ export function generateTooltipHTML({ data, marker, xAxisCategories, yAxisCatego
           <strong>${yAxisCategories[y]}</strong>
         </div>
         <div>
-          ${value}
+          ${label}
         </div>
       </div>
     </div>

package/dist/StatusHistoryChart/StatusHistoryTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatusHistoryChart/StatusHistoryTooltip.ts"],"sourcesContent":["// Copyright 2024 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 { css, Theme } from '@mui/material';\nimport { getDateAndTime } from '../utils';\nimport { StatusHistoryData } from './StatusHistoryChart';\n\ninterface CustomTooltipProps {\n  data: StatusHistoryData;\n  marker: string;\n  xAxisCategories: number[];\n  yAxisCategories: string[];\n  theme: Theme;\n}\n\nexport function generateTooltipHTML({\n  data,\n  marker,\n  xAxisCategories,\n  yAxisCategories,\n  theme,\n}: CustomTooltipProps): string {\n  const [x, y, value] = data;\n  const xAxisLabel = xAxisCategories[x];\n\n  const { formattedDate, formattedTime } = getDateAndTime(xAxisLabel);\n\n  const tooltipHeader = css`\n    border-bottom: 1px solid ${theme.palette.grey[500]};\n    padding-bottom: 8px;\n  `;\n\n  const tooltipContentStyles = css`\n    display: flex;\n    justify-content: space-between;\n    padding-top: 8px;\n  `;\n\n  const labelStyles = css`\n    margin-right: 16px;\n  `;\n\n  return `\n    <div>\n      <div style=\"${tooltipHeader.styles}\">${formattedDate} ${formattedTime}</div>\n      <div style=\"${tooltipContentStyles.styles}\">\n        <div style=\"${labelStyles.styles}\">\n          ${marker}\n          <strong>${yAxisCategories[y]}</strong>\n        </div>\n        <div>\n          ${value}\n        </div>\n      </div>\n    </div>\n  `;\n}\n"],"names":["css","getDateAndTime","generateTooltipHTML","data","marker","xAxisCategories","yAxisCategories","theme","x","y","value","xAxisLabel","formattedDate","formattedTime","tooltipHeader","palette","grey","tooltipContentStyles","labelStyles","styles"],"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,SAASA,GAAG,QAAe,gBAAgB;AAC3C,SAASC,cAAc,QAAQ,WAAW;AAW1C,OAAO,SAASC,oBAAoB,EAClCC,IAAI,EACJC,MAAM,EACNC,eAAe,EACfC,eAAe,EACfC,KAAK,EACc;IACnB,MAAM,CAACC,GAAGC,GAAGC,MAAM,GAAGP;IACtB,MAAMQ,aAAaN,eAAe,CAACG,EAAE;IAErC,MAAM,EAAEI,aAAa,EAAEC,aAAa,EAAE,GAAGZ,eAAeU;IAExD,MAAMG,gBAAgBd,GAAG,CAAC;6BACC,EAAEO,MAAMQ,OAAO,CAACC,IAAI,CAAC,IAAI,CAAC;;EAErD,CAAC;IAED,MAAMC,uBAAuBjB,GAAG,CAAC;;;;EAIjC,CAAC;IAED,MAAMkB,cAAclB,GAAG,CAAC;;EAExB,CAAC;IAED,OAAO,CAAC;;kBAEQ,EAAEc,cAAcK,MAAM,CAAC,EAAE,EAAEP,cAAc,CAAC,EAAEC,cAAc;kBAC1D,EAAEI,qBAAqBE,MAAM,CAAC;oBAC5B,EAAED,YAAYC,MAAM,CAAC;UAC/B,EAAEf,OAAO;kBACD,EAAEE,eAAe,CAACG,EAAE,CAAC;;;UAG7B,EAAEC,MAAM;;;;EAIhB,CAAC;AACH"}
+{"version":3,"sources":["../../src/StatusHistoryChart/StatusHistoryTooltip.ts"],"sourcesContent":["// Copyright 2024 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 { css, Theme } from '@mui/material';\nimport { getDateAndTime } from '../utils';\nimport { StatusHistoryData } from './StatusHistoryChart';\n\ninterface CustomTooltipProps {\n  data: StatusHistoryData;\n  label?: string;\n  marker: string;\n  xAxisCategories: number[];\n  yAxisCategories: string[];\n  theme: Theme;\n}\n\nexport function generateTooltipHTML({\n  data,\n  label,\n  marker,\n  xAxisCategories,\n  yAxisCategories,\n  theme,\n}: CustomTooltipProps): string {\n  const [x, y] = data;\n  const xAxisLabel = xAxisCategories[x];\n\n  const { formattedDate, formattedTime } = getDateAndTime(xAxisLabel);\n\n  const tooltipHeader = css`\n    border-bottom: 1px solid ${theme.palette.grey[500]};\n    padding-bottom: 8px;\n  `;\n\n  const tooltipContentStyles = css`\n    display: flex;\n    justify-content: space-between;\n    padding-top: 8px;\n  `;\n\n  const labelStyles = css`\n    margin-right: 16px;\n  `;\n\n  return `\n    <div>\n      <div style=\"${tooltipHeader.styles}\">${formattedDate} ${formattedTime}</div>\n      <div style=\"${tooltipContentStyles.styles}\">\n        <div style=\"${labelStyles.styles}\">\n          ${marker}\n          <strong>${yAxisCategories[y]}</strong>\n        </div>\n        <div>\n          ${label}\n        </div>\n      </div>\n    </div>\n  `;\n}\n"],"names":["css","getDateAndTime","generateTooltipHTML","data","label","marker","xAxisCategories","yAxisCategories","theme","x","y","xAxisLabel","formattedDate","formattedTime","tooltipHeader","palette","grey","tooltipContentStyles","labelStyles","styles"],"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,SAASA,GAAG,QAAe,gBAAgB;AAC3C,SAASC,cAAc,QAAQ,WAAW;AAY1C,OAAO,SAASC,oBAAoB,EAClCC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,eAAe,EACfC,eAAe,EACfC,KAAK,EACc;IACnB,MAAM,CAACC,GAAGC,EAAE,GAAGP;IACf,MAAMQ,aAAaL,eAAe,CAACG,EAAE;IAErC,MAAM,EAAEG,aAAa,EAAEC,aAAa,EAAE,GAAGZ,eAAeU;IAExD,MAAMG,gBAAgBd,GAAG,CAAC;6BACC,EAAEQ,MAAMO,OAAO,CAACC,IAAI,CAAC,IAAI,CAAC;;EAErD,CAAC;IAED,MAAMC,uBAAuBjB,GAAG,CAAC;;;;EAIjC,CAAC;IAED,MAAMkB,cAAclB,GAAG,CAAC;;EAExB,CAAC;IAED,OAAO,CAAC;;kBAEQ,EAAEc,cAAcK,MAAM,CAAC,EAAE,EAAEP,cAAc,CAAC,EAAEC,cAAc;kBAC1D,EAAEI,qBAAqBE,MAAM,CAAC;oBAC5B,EAAED,YAAYC,MAAM,CAAC;UAC/B,EAAEd,OAAO;kBACD,EAAEE,eAAe,CAACG,EAAE,CAAC;;;UAG7B,EAAEN,MAAM;;;;EAIhB,CAAC;AACH"}

package/dist/StatusHistoryChart/utils/get-color.d.ts

@@ -1,4 +1,4 @@
-export declare const fallbackColor = "#1f77b4";
+export declare const FALLBACK_COLOR = "#1f77b4";
 export declare function getColorForValue(value: number | string, baseColor: string): string;
 export declare function getColorsForValues(uniqueValues: Array<number | string>, themeColors: string[]): string[];
 export declare function hexToHSL(hex: string): [number, number, number];

package/dist/StatusHistoryChart/utils/get-color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-color.d.ts","sourceRoot":"","sources":["../../../src/StatusHistoryChart/utils/get-color.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CA2ClF;AAED,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAaxG;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CA8B9D;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAWhE"}
+{"version":3,"file":"get-color.d.ts","sourceRoot":"","sources":["../../../src/StatusHistoryChart/utils/get-color.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,cAAc,YAAY,CAAC;AAExC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CA2ClF;AAED,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAaxG;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CA8B9D;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAWhE"}

package/dist/StatusHistoryChart/utils/get-color.js

@@ -10,11 +10,11 @@
 // 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 const fallbackColor = '#1f77b4';
+export const FALLBACK_COLOR = '#1f77b4';
 export function getColorForValue(value, baseColor) {
     // Validate base color
     if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {
-        baseColor = fallbackColor;
+        baseColor = FALLBACK_COLOR;
     }
     try {
         const [baseH, baseS, baseL] = hexToHSL(baseColor);
@@ -39,7 +39,7 @@ export function getColorForValue(value, baseColor) {
         }
         return color;
     } catch (_) {
-        return fallbackColor;
+        return FALLBACK_COLOR;
     }
 }
 export function getColorsForValues(uniqueValues, themeColors) {
@@ -50,9 +50,9 @@ export function getColorsForValues(uniqueValues, themeColors) {
     // Use theme colors first, then generate additional ones
     return uniqueValues.map((value, index)=>{
         if (index < themeColors.length) {
-            return themeColors[index] || fallbackColor;
+            return themeColors[index] || FALLBACK_COLOR;
         }
-        return getColorForValue(value, themeColors[0] || fallbackColor);
+        return getColorForValue(value, themeColors[0] || FALLBACK_COLOR);
     });
 }
 export function hexToHSL(hex) {

package/dist/StatusHistoryChart/utils/get-color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/StatusHistoryChart/utils/get-color.ts"],"sourcesContent":["// Copyright 2024 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 const fallbackColor = '#1f77b4';\n\nexport function getColorForValue(value: number | string, baseColor: string): string {\n  // Validate base color\n  if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {\n    baseColor = fallbackColor;\n  }\n\n  try {\n    const [baseH, baseS, baseL] = hexToHSL(baseColor);\n\n    // Ensure numeric values are valid\n    if (isNaN(baseH) || isNaN(baseS) || isNaN(baseL)) {\n      throw new Error('Invalid HSL values');\n    }\n\n    // Create deterministic hash\n    const hash = String(value)\n      .split('')\n      .reduce((acc, char) => acc + char.charCodeAt(0), 0);\n\n    const hueStep = 60;\n    const lightnessVariation = 15;\n\n    const hueOffset = (hash % 6) * hueStep; // 6 segments of 60° each\n    const newH = (baseH + hueOffset) % 360;\n    const newL = baseL + (hash % 2 ? lightnessVariation : -lightnessVariation);\n\n    // Keep saturation high for better distinction\n    const newS = Math.min(baseS + 10, 90);\n    const color = hslToHex(\n      Math.abs(newH),\n      Math.min(Math.max(newS, 50), 90), // Keep saturation 50-90%\n      Math.min(Math.max(newL, 30), 70) // Keep lightness 30-70%\n    );\n\n    // Validate generated color\n    if (!color.match(/^#[0-9A-Fa-f]{6}$/)) {\n      throw new Error('Invalid generated color');\n    }\n\n    return color;\n  } catch (_) {\n    return fallbackColor;\n  }\n}\n\nexport function getColorsForValues(uniqueValues: Array<number | string>, themeColors: string[]): string[] {\n  // If we have enough theme colors, use them\n  if (themeColors.length >= uniqueValues.length) {\n    return themeColors.slice(0, uniqueValues.length);\n  }\n\n  // Use theme colors first, then generate additional ones\n  return uniqueValues.map((value, index) => {\n    if (index < themeColors.length) {\n      return themeColors[index] || fallbackColor;\n    }\n    return getColorForValue(value, themeColors[0] || fallbackColor);\n  });\n}\n\nexport function hexToHSL(hex: string): [number, number, number] {\n  const r = parseInt(hex.slice(1, 3), 16) / 255;\n  const g = parseInt(hex.slice(3, 5), 16) / 255;\n  const b = parseInt(hex.slice(5, 7), 16) / 255;\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  let h = 0;\n  let s = 0;\n  const l = (max + min) / 2;\n\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n    switch (max) {\n      case r:\n        h = (g - b) / d + (g < b ? 6 : 0);\n        break;\n      case g:\n        h = (b - r) / d + 2;\n        break;\n      case b:\n        h = (r - g) / d + 4;\n        break;\n    }\n    h /= 6;\n  }\n\n  return [h * 360, s * 100, l * 100];\n}\n\nexport function hslToHex(h: number, s: number, l: number): string {\n  l /= 100;\n  const a = (s * Math.min(l, 1 - l)) / 100;\n  const f = (n: number): string => {\n    const k = (n + h / 30) % 12;\n    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n    return Math.round(255 * color)\n      .toString(16)\n      .padStart(2, '0');\n  };\n  return `#${f(0)}${f(8)}${f(4)}`;\n}\n"],"names":["fallbackColor","getColorForValue","value","baseColor","match","baseH","baseS","baseL","hexToHSL","isNaN","Error","hash","String","split","reduce","acc","char","charCodeAt","hueStep","lightnessVariation","hueOffset","newH","newL","newS","Math","min","color","hslToHex","abs","max","_","getColorsForValues","uniqueValues","themeColors","length","slice","map","index","hex","r","parseInt","g","b","h","s","l","d","a","f","n","k","round","toString","padStart"],"mappings":"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"}
+{"version":3,"sources":["../../../src/StatusHistoryChart/utils/get-color.ts"],"sourcesContent":["// Copyright 2024 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 const FALLBACK_COLOR = '#1f77b4';\n\nexport function getColorForValue(value: number | string, baseColor: string): string {\n  // Validate base color\n  if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {\n    baseColor = FALLBACK_COLOR;\n  }\n\n  try {\n    const [baseH, baseS, baseL] = hexToHSL(baseColor);\n\n    // Ensure numeric values are valid\n    if (isNaN(baseH) || isNaN(baseS) || isNaN(baseL)) {\n      throw new Error('Invalid HSL values');\n    }\n\n    // Create deterministic hash\n    const hash = String(value)\n      .split('')\n      .reduce((acc, char) => acc + char.charCodeAt(0), 0);\n\n    const hueStep = 60;\n    const lightnessVariation = 15;\n\n    const hueOffset = (hash % 6) * hueStep; // 6 segments of 60° each\n    const newH = (baseH + hueOffset) % 360;\n    const newL = baseL + (hash % 2 ? lightnessVariation : -lightnessVariation);\n\n    // Keep saturation high for better distinction\n    const newS = Math.min(baseS + 10, 90);\n    const color = hslToHex(\n      Math.abs(newH),\n      Math.min(Math.max(newS, 50), 90), // Keep saturation 50-90%\n      Math.min(Math.max(newL, 30), 70) // Keep lightness 30-70%\n    );\n\n    // Validate generated color\n    if (!color.match(/^#[0-9A-Fa-f]{6}$/)) {\n      throw new Error('Invalid generated color');\n    }\n\n    return color;\n  } catch (_) {\n    return FALLBACK_COLOR;\n  }\n}\n\nexport function getColorsForValues(uniqueValues: Array<number | string>, themeColors: string[]): string[] {\n  // If we have enough theme colors, use them\n  if (themeColors.length >= uniqueValues.length) {\n    return themeColors.slice(0, uniqueValues.length);\n  }\n\n  // Use theme colors first, then generate additional ones\n  return uniqueValues.map((value, index) => {\n    if (index < themeColors.length) {\n      return themeColors[index] || FALLBACK_COLOR;\n    }\n    return getColorForValue(value, themeColors[0] || FALLBACK_COLOR);\n  });\n}\n\nexport function hexToHSL(hex: string): [number, number, number] {\n  const r = parseInt(hex.slice(1, 3), 16) / 255;\n  const g = parseInt(hex.slice(3, 5), 16) / 255;\n  const b = parseInt(hex.slice(5, 7), 16) / 255;\n\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  let h = 0;\n  let s = 0;\n  const l = (max + min) / 2;\n\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n    switch (max) {\n      case r:\n        h = (g - b) / d + (g < b ? 6 : 0);\n        break;\n      case g:\n        h = (b - r) / d + 2;\n        break;\n      case b:\n        h = (r - g) / d + 4;\n        break;\n    }\n    h /= 6;\n  }\n\n  return [h * 360, s * 100, l * 100];\n}\n\nexport function hslToHex(h: number, s: number, l: number): string {\n  l /= 100;\n  const a = (s * Math.min(l, 1 - l)) / 100;\n  const f = (n: number): string => {\n    const k = (n + h / 30) % 12;\n    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n    return Math.round(255 * color)\n      .toString(16)\n      .padStart(2, '0');\n  };\n  return `#${f(0)}${f(8)}${f(4)}`;\n}\n"],"names":["FALLBACK_COLOR","getColorForValue","value","baseColor","match","baseH","baseS","baseL","hexToHSL","isNaN","Error","hash","String","split","reduce","acc","char","charCodeAt","hueStep","lightnessVariation","hueOffset","newH","newL","newS","Math","min","color","hslToHex","abs","max","_","getColorsForValues","uniqueValues","themeColors","length","slice","map","index","hex","r","parseInt","g","b","h","s","l","d","a","f","n","k","round","toString","padStart"],"mappings":"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"}

package/dist/Table/Table.js

@@ -34,7 +34,7 @@ const DEFAULT_SORTING = [];
     const theme = useTheme();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
-        onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(newRowSelection);
+        onRowSelectionChange?.(newRowSelection);
     };
     const handleRowSelectionEvent = useCallback((table, row, isModified)=>{
         if (rowSelectionVariant === 'standard' || isModified) {
@@ -48,7 +48,7 @@ const DEFAULT_SORTING = [];
                 table.toggleAllRowsSelected();
             } else {
                 // Focus the selected row.
-                onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange({
+                onRowSelectionChange?.({
                     [row.id]: true
                 });
             }
@@ -59,14 +59,14 @@ const DEFAULT_SORTING = [];
     ]);
     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);
+        const isModifed = !!nativePointerEvent?.metaKey || !!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);
+        onSortingChange?.(newSorting);
     };
     const checkboxColumn = useMemo(()=>{
         return {
@@ -88,7 +88,7 @@ const DEFAULT_SORTING = [];
                     onChange: (e)=>{
                         handleCheckboxChange(e, table, row);
                     },
-                    color: getCheckboxColor === null || getCheckboxColor === void 0 ? void 0 : getCheckboxColor(row.original),
+                    color: getCheckboxColor?.(row.original),
                     density: density
                 });
             },

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 {\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 { ReactElement, useCallback, useMemo } from 'react';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { TableCheckbox } from './TableCheckbox';\nimport { TableProps, persesColumnsToTanstackColumns, DEFAULT_COLUMN_WIDTH } 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  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>): 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 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 (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      defaultColumnWidth={defaultColumnWidth}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getAllFlatColumns()}\n      headers={table.getHeaderGroups()}\n      cellConfigs={cellConfigs}\n    />\n  );\n}\n"],"names":["useReactTable","getCoreRowModel","getSortedRowModel","useTheme","useCallback","useMemo","VirtualizedTable","TableCheckbox","persesColumnsToTanstackColumns","DEFAULT_COLUMN_WIDTH","DEFAULT_GET_ROW_ID","data","index","DEFAULT_ROW_SELECTION","DEFAULT_SORTING","Table","columns","cellConfigs","density","defaultColumnWidth","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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"}
+{"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 { ReactElement, useCallback, useMemo } from 'react';\nimport { VirtualizedTable } from './VirtualizedTable';\nimport { TableCheckbox } from './TableCheckbox';\nimport { TableProps, persesColumnsToTanstackColumns, DEFAULT_COLUMN_WIDTH } 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  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>): 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 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 (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      defaultColumnWidth={defaultColumnWidth}\n      onRowClick={handleRowClick}\n      rows={table.getRowModel().rows}\n      columns={table.getAllFlatColumns()}\n      headers={table.getHeaderGroups()}\n      cellConfigs={cellConfigs}\n    />\n  );\n}\n"],"names":["useReactTable","getCoreRowModel","getSortedRowModel","useTheme","useCallback","useMemo","VirtualizedTable","TableCheckbox","persesColumnsToTanstackColumns","DEFAULT_COLUMN_WIDTH","DEFAULT_GET_ROW_ID","data","index","DEFAULT_ROW_SELECTION","DEFAULT_SORTING","Table","columns","cellConfigs","density","defaultColumnWidth","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.js

@@ -41,9 +41,8 @@ export function TableCell({ children, density, variant, width, focusState = 'non
         focusState
     ]);
     const handleFocus = (e)=>{
-        var _e_currentTarget;
         // From https://zellwk.com/blog/keyboard-focusable-elements/
-        const nestedFocusTarget = (_e_currentTarget = e.currentTarget) === null || _e_currentTarget === void 0 ? void 0 : _e_currentTarget.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
+        const nestedFocusTarget = e.currentTarget?.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.
@@ -56,7 +55,7 @@ export function TableCell({ children, density, variant, width, focusState = 'non
         // plays with the triggering of focus with keyboard interactions.
         // These report that a focus event happened, so we can adjust the current
         // tabindex and focuses to the right cell.
-        onFocusTrigger === null || onFocusTrigger === void 0 ? void 0 : onFocusTrigger(e);
+        onFocusTrigger?.(e);
     };
     return /*#__PURE__*/ _jsx(StyledMuiTableCell, {
         ...otherProps,
@@ -83,7 +82,7 @@ export function TableCell({ children, density, variant, width, focusState = 'non
                 minWidth: '100%',
                 whiteSpace: 'nowrap',
                 overflow: 'visible',
-                backgroundColor: `${backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.palette.background.default} !important`,
+                backgroundColor: `${backgroundColor ?? theme.palette.background.default} !important`,
                 outline: `solid 1px ${theme.palette.info.main}`,
                 outlineOffset: '-1px'
             }
@@ -108,8 +107,8 @@ export function TableCell({ children, density, variant, width, focusState = 'non
                 flexDirection: 'inherit'
             },
             style: {
-                backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'inherit',
-                color: color !== null && color !== void 0 ? color : 'inherit'
+                backgroundColor: backgroundColor ?? 'inherit',
+                color: color ?? 'inherit'
             },
             title: description,
             "aria-label": description,

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 { ReactElement, 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  color?: string;\n  backgroundColor?: string;\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  align,\n  color,\n  backgroundColor,\n  ...otherProps\n}: TableCellProps): ReactElement {\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      style={{ width: width }}\n      sx={{\n        position: 'relative',\n        borderBottom: isHeader ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`,\n        '&:hover #original-cell': {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          zIndex: 10,\n          width: 'fit-content',\n          minWidth: '100%',\n          whiteSpace: 'nowrap',\n          overflow: 'visible',\n          backgroundColor: `${backgroundColor ?? theme.palette.background.default} !important`,\n          outline: `solid 1px ${theme.palette.info.main}`,\n          outlineOffset: '-1px',\n        },\n      }}\n      ref={elRef}\n    >\n      <Box\n        id=\"original-cell\"\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        style={{\n          backgroundColor: backgroundColor ?? 'inherit',\n          color: color ?? 'inherit',\n        }}\n        title={description}\n        aria-label={description}\n        textAlign={align}\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","align","color","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","style","sx","position","borderBottom","grey","top","left","zIndex","minWidth","whiteSpace","overflow","info","ref","id","textOverflow","flexDirection","title","aria-label","textAlign"],"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 { ReactElement, 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  color?: string;\n  backgroundColor?: string;\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  align,\n  color,\n  backgroundColor,\n  ...otherProps\n}: TableCellProps): ReactElement {\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      style={{ width: width }}\n      sx={{\n        position: 'relative',\n        borderBottom: isHeader ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`,\n        '&:hover #original-cell': {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          zIndex: 10,\n          width: 'fit-content',\n          minWidth: '100%',\n          whiteSpace: 'nowrap',\n          overflow: 'visible',\n          backgroundColor: `${backgroundColor ?? theme.palette.background.default} !important`,\n          outline: `solid 1px ${theme.palette.info.main}`,\n          outlineOffset: '-1px',\n        },\n      }}\n      ref={elRef}\n    >\n      <Box\n        id=\"original-cell\"\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        style={{\n          backgroundColor: backgroundColor ?? 'inherit',\n          color: color ?? 'inherit',\n        }}\n        title={description}\n        aria-label={description}\n        textAlign={align}\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","align","color","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","style","sx","position","borderBottom","grey","top","left","zIndex","minWidth","whiteSpace","overflow","info","ref","id","textOverflow","flexDirection","title","aria-label","textAlign"],"mappings":"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"}

package/dist/Table/VirtualizedTable.js

@@ -79,10 +79,10 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, o
                     onClick: (e)=>onRowClick(e, row.id),
                     density: density,
                     onMouseOver: (e)=>{
-                        onRowMouseOver === null || onRowMouseOver === void 0 ? void 0 : onRowMouseOver(e, rowEventOpts);
+                        onRowMouseOver?.(e, rowEventOpts);
                     },
                     onMouseOut: (e)=>{
-                        onRowMouseOut === null || onRowMouseOut === void 0 ? void 0 : onRowMouseOut(e, rowEventOpts);
+                        onRowMouseOut?.(e, rowEventOpts);
                     }
                 });
             },
@@ -116,7 +116,6 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, o
                         return /*#__PURE__*/ _jsx(TableRow, {
                             density: density,
                             children: headerGroup.headers.map((header, i, headers)=>{
-                                var _column_columnDef_meta, _column_columnDef_meta1;
                                 const column = header.column;
                                 const position = {
                                     row: 0,
@@ -129,10 +128,10 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, o
                                     sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
                                     nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
                                     width: column.getSize() || defaultColumnWidth,
-                                    align: (_column_columnDef_meta = column.columnDef.meta) === null || _column_columnDef_meta === void 0 ? void 0 : _column_columnDef_meta.align,
+                                    align: column.columnDef.meta?.align,
                                     variant: "head",
                                     density: density,
-                                    description: (_column_columnDef_meta1 = column.columnDef.meta) === null || _column_columnDef_meta1 === void 0 ? void 0 : _column_columnDef_meta1.headerDescription,
+                                    description: column.columnDef.meta?.headerDescription,
                                     focusState: getFocusState(position),
                                     onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                                     isFirstColumn: i === 0,
@@ -151,17 +150,16 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, o
                 }
                 return /*#__PURE__*/ _jsx(_Fragment, {
                     children: row.getVisibleCells().map((cell, i, cells)=>{
-                        var _cell_column_columnDef_meta, _cell_column_columnDef_meta1;
                         const position = {
                             // Add 1 to the row index because the header is row 0
                             row: index + 1,
                             column: i
                         };
                         const cellContext = cell.getContext();
-                        const cellConfig = cellConfigs === null || cellConfigs === void 0 ? void 0 : cellConfigs[cellContext.cell.id];
+                        const cellConfig = cellConfigs?.[cellContext.cell.id];
                         const cellRenderFn = cell.column.columnDef.cell;
                         const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
-                        const cellDescriptionDef = (_cell_column_columnDef_meta = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : _cell_column_columnDef_meta.cellDescription;
+                        const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
                         let description = undefined;
                         if (typeof cellDescriptionDef === 'function') {
                             // If the cell description is a function, set the value using
@@ -173,21 +171,20 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, o
                             // cell content.
                             description = cellContent;
                         }
-                        var _cellConfig_textColor, _cellConfig_backgroundColor;
                         return /*#__PURE__*/ _jsx(TableCell, {
                             "data-testid": cell.id,
-                            title: description || (cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.text) || cellContent,
+                            title: description || cellConfig?.text || cellContent,
                             width: cell.column.getSize() || defaultColumnWidth,
-                            align: (_cell_column_columnDef_meta1 = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta1 === void 0 ? void 0 : _cell_column_columnDef_meta1.align,
+                            align: cell.column.columnDef.meta?.align,
                             density: density,
                             focusState: getFocusState(position),
                             onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                             isFirstColumn: i === 0,
                             isLastColumn: i === cells.length - 1,
                             description: description,
-                            color: (_cellConfig_textColor = cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.textColor) !== null && _cellConfig_textColor !== void 0 ? _cellConfig_textColor : undefined,
-                            backgroundColor: (_cellConfig_backgroundColor = cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.backgroundColor) !== null && _cellConfig_backgroundColor !== void 0 ? _cellConfig_backgroundColor : undefined,
-                            children: (cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.text) || cellContent
+                            color: cellConfig?.textColor ?? undefined,
+                            backgroundColor: cellConfig?.backgroundColor ?? undefined,
+                            children: cellConfig?.text || cellContent
                         }, cell.id);
                     })
                 });