@perses-dev/components 0.0.0-snapshot-saving-defaults-refinements-1b25cec → 0.0.0-snapshot-time-chart-rewrite-4667058

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: 32,\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":"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,aAAa,EAAEC,eAAe,QAAkD,uBAAuB,CAAC;AACjH,SAASC,QAAQ,QAAQ,eAAe,CAAC;AACzC,SAASC,WAAW,EAAEC,OAAO,QAAQ,OAAO,CAAC;AAC7C,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AACtD,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAChD,SAAqBC,8BAA8B,QAAQ,qBAAqB,CAAC;AAEjF,MAAMC,kBAAkB,GAAG,CAACC,IAAa,EAAEC,KAAa,GAAK;IAC3D,OAAO,CAAC,EAAEA,KAAK,CAAC,CAAC,CAAC;AACpB,CAAC,AAAC;AAEF;;;;;CAKC,GACD,OAAO,SAASC,KAAK,CAAY,EAC/BF,IAAI,CAAA,EACJG,OAAO,CAAA,EACPC,OAAO,EAAG,UAAU,CAAA,EACpBC,iBAAiB,CAAA,EACjBC,oBAAoB,CAAA,EACpBC,gBAAgB,CAAA,EAChBC,QAAQ,EAAGT,kBAAkB,CAAA,EAC7BU,YAAY,EAAG,EAAE,CAAA,EACjB,GAAGC,UAAU,EACS,EAAE;IACxB,MAAMC,KAAK,GAAGlB,QAAQ,EAAE,AAAC;IAEzB,MAAMmB,wBAAwB,GAAkC,CAACC,mBAAmB,GAAK;QACvF,MAAMC,eAAe,GACnB,OAAOD,mBAAmB,KAAK,UAAU,GAAGA,mBAAmB,CAACJ,YAAY,CAAC,GAAGI,mBAAmB,AAAC;QACtGP,oBAAoB,aAApBA,oBAAoB,WAAmB,GAAvCA,KAAAA,CAAuC,GAAvCA,oBAAoB,CAAGQ,eAAe,CAAC,CAAC;IAC1C,CAAC,AAAC;IAEF,MAAMC,cAAc,GAAyBpB,OAAO,CAAC,IAAM;QACzD,OAAO;YACLqB,EAAE,EAAE,mBAAmB;YACvBC,IAAI,EAAE,EAAE;YACRC,MAAM,EAAE,CAAC,EAAEC,KAAK,CAAA,EAAE,GAAK;gBACrB,qBACE,KAACtB,aAAa;oBACZuB,OAAO,EAAED,KAAK,CAACE,oBAAoB,EAAE;oBACrCC,aAAa,EAAEH,KAAK,CAACI,qBAAqB,EAAE;oBAC5CC,QAAQ,EAAEL,KAAK,CAACM,+BAA+B,EAAE;oBACjDC,KAAK,EAAEf,KAAK,CAACgB,OAAO,CAACC,IAAI,CAACC,OAAO;oBACjCzB,OAAO,EAAEA,OAAO;kBAChB,CACF;YACJ,CAAC;YACD0B,IAAI,EAAE,CAAC,EAAEC,GAAG,CAAA,EAAE,GAAK;gBACjB,qBACE,KAAClC,aAAa;oBACZuB,OAAO,EAAEW,GAAG,CAACC,aAAa,EAAE;oBAC5BV,aAAa,EAAES,GAAG,CAACE,iBAAiB,EAAE;oBACtCT,QAAQ,EAAE,CAACU,CAAC,GAAK;wBACfH,GAAG,CAACI,wBAAwB,EAAE,CAACD,CAAC,CAAC,CAAC;oBACpC,CAAC;oBACDR,KAAK,EAAEnB,gBAAgB,aAAhBA,gBAAgB,WAAgB,GAAhCA,KAAAA,CAAgC,GAAhCA,gBAAgB,CAAGwB,GAAG,CAACK,QAAQ,CAAC;oBACvChC,OAAO,EAAEA,OAAO;kBAChB,CACF;YACJ,CAAC;SACF,CAAC;IACJ,CAAC,EAAE;QAACA,OAAO;QAAEG,gBAAgB;QAAEI,KAAK,CAACgB,OAAO,CAACC,IAAI,CAACC,OAAO;KAAC,CAAC,AAAC;IAE5D,MAAMQ,YAAY,GAAgC1C,OAAO,CAAC,IAAM;QAC9D,MAAM2C,gBAAgB,GAAGxC,8BAA8B,CAACK,OAAO,CAAC,AAAC;QAEjE,IAAIE,iBAAiB,EAAE;YACrBiC,gBAAgB,CAACC,OAAO,CAACxB,cAAc,CAAC,CAAC;QAC3C,CAAC;QAED,OAAOuB,gBAAgB,CAAC;IAC1B,CAAC,EAAE;QAACvB,cAAc;QAAEV,iBAAiB;QAAEF,OAAO;KAAC,CAAC,AAAC;IAEjD,MAAMgB,KAAK,GAAG5B,aAAa,CAAC;QAC1BS,IAAI;QACJG,OAAO,EAAEkC,YAAY;QACrB7B,QAAQ;QACRhB,eAAe,EAAEA,eAAe,EAAE;QAClCgD,kBAAkB,EAAE,CAAC,CAACnC,iBAAiB;QACvCC,oBAAoB,EAAEM,wBAAwB;QAC9C6B,KAAK,EAAE;YACLhC,YAAY;SACb;KACF,CAAC,AAAC;IAEH,MAAMiC,cAAc,GAAGhD,WAAW,CAChC,CAACiD,KAAa,GAAK;QACjBxB,KAAK,CAACyB,MAAM,CAACD,KAAK,CAAC,CAACE,cAAc,EAAE,CAAC;IACvC,CAAC,EACD;QAAC1B,KAAK;KAAC,CACR,AAAC;IAEF,qBACE,KAACvB,gBAAgB;QACd,GAAGc,UAAU;QACdN,OAAO,EAAEA,OAAO;QAChB0C,UAAU,EAAEJ,cAAc;QAC1BK,IAAI,EAAE5B,KAAK,CAAC6B,WAAW,EAAE,CAACD,IAAI;QAC9B5C,OAAO,EAAEgB,KAAK,CAAC8B,iBAAiB,EAAE;QAClCC,OAAO,EAAE/B,KAAK,CAACgC,eAAe,EAAE;MAChC,CACF;AACJ,CAAC"}
+{"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

@@ -1,8 +1,21 @@
 /// <reference types="react" />
 import { TableCellProps as MuiTableCellProps } from '@mui/material';
-import { TableDensity } from './model/table-model';
-export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex'> {
+import { TableCellAlignment, TableDensity } from './model/table-model';
+export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {
     density: TableDensity;
+    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.
@@ -14,5 +27,5 @@ export interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex'> {
     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, ...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,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AAmBvE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACzE,OAAO,EAAE,YAAY,CAAC;IAEtB;;;;;;;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,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

@@ -19,7 +19,7 @@ const StyledMuiTableCell = styled(MuiTableCell)(({ theme  })=>({
         backgroundColor: 'inherit',
         '&.MuiTableCell-head': {
             // Important to avoid scrolling behind the header showing through.
-            backgroundColor: theme.palette.background.paper
+            backgroundColor: theme.palette.background.default
         },
         '&:focus-visible': {
             outline: `solid 1px ${theme.palette.primary.main}`,
@@ -29,7 +29,7 @@ const StyledMuiTableCell = styled(MuiTableCell)(({ theme  })=>({
             borderRadius: 0
         }
     }));
-export function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , ...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.
@@ -75,14 +75,22 @@ export function TableCell({ children , density , variant , width , focusState ='
         ref: elRef,
         children: /*#__PURE__*/ _jsx(Box, {
             sx: {
-                ...getTableCellLayout(theme, density),
+                ...getTableCellLayout(theme, density, {
+                    isLastColumn,
+                    isFirstColumn
+                }),
                 position: 'relative',
                 // Text truncation. Currently enforced on all cells. We may control
                 // 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 { 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.paper,\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'> {\n  density: TableDensity;\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  ...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),\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","paper","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","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
             }
         }
     });

package/dist/Table/TableCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableCheckbox.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 { Checkbox, CheckboxProps, alpha } from '@mui/material';\nimport { TableDensity } from './model/table-model';\n\nexport interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {\n  color?: string;\n  density: TableDensity;\n}\n\nexport function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps) {\n  const isCompact = density === 'compact';\n\n  return (\n    <Checkbox\n      size={isCompact ? 'small' : 'medium'}\n      {...otherProps}\n      // Disable ripple and set background color below because of some issues\n      // with re-rendering with the keyboard interactions that causes the ripple\n      // animation to stutter.\n      focusRipple={false}\n      // Tab index is handled by the overall keyboard interactions for the table\n      // to avoid trapping a keyboard user in a table by requiring them to tab\n      // through every single checkbox.\n      tabIndex={-1}\n      sx={{\n        color: color,\n\n        padding: (theme) => theme.spacing(isCompact ? 0.25 : 0.5),\n\n        // Centering.\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n\n        '&.Mui-checked': {\n          color: color,\n        },\n\n        '&.Mui-focusVisible': {\n          background: color ? alpha(color, 0.5) : undefined,\n        },\n\n        '& .MuiSvgIcon-root': { fontSize: isCompact ? 14 : 16 },\n      }}\n    />\n  );\n}\n"],"names":["Checkbox","alpha","TableCheckbox","color","density","otherProps","isCompact","size","focusRipple","tabIndex","sx","padding","theme","spacing","position","top","left","transform","background","undefined","fontSize"],"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,QAAQ,EAAiBC,KAAK,QAAQ,eAAe,CAAC;AAQ/D,OAAO,SAASC,aAAa,CAAC,EAAEC,KAAK,CAAA,EAAEC,OAAO,CAAA,EAAE,GAAGC,UAAU,EAAsB,EAAE;IACnF,MAAMC,SAAS,GAAGF,OAAO,KAAK,SAAS,AAAC;IAExC,qBACE,KAACJ,QAAQ;QACPO,IAAI,EAAED,SAAS,GAAG,OAAO,GAAG,QAAQ;QACnC,GAAGD,UAAU;QACd,uEAAuE;QACvE,0EAA0E;QAC1E,wBAAwB;QACxBG,WAAW,EAAE,KAAK;QAClB,0EAA0E;QAC1E,wEAAwE;QACxE,iCAAiC;QACjCC,QAAQ,EAAE,CAAC,CAAC;QACZC,EAAE,EAAE;YACFP,KAAK,EAAEA,KAAK;YAEZQ,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACP,SAAS,GAAG,IAAI,GAAG,GAAG,CAAC;YAEzD,aAAa;YACbQ,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,IAAI,EAAE,KAAK;YACXC,SAAS,EAAE,uBAAuB;YAElC,eAAe,EAAE;gBACfd,KAAK,EAAEA,KAAK;aACb;YAED,oBAAoB,EAAE;gBACpBe,UAAU,EAAEf,KAAK,GAAGF,KAAK,CAACE,KAAK,EAAE,GAAG,CAAC,GAAGgB,SAAS;aAClD;YAED,oBAAoB,EAAE;gBAAEC,QAAQ,EAAEd,SAAS,GAAG,EAAE,GAAG,EAAE;aAAE;SACxD;MACD,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Table/TableCheckbox.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 { Checkbox, CheckboxProps, alpha } from '@mui/material';\nimport { TableDensity } from './model/table-model';\n\nexport interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {\n  color?: string;\n  density: TableDensity;\n}\n\nexport function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps) {\n  const isCompact = density === 'compact';\n\n  return (\n    <Checkbox\n      size={isCompact ? 'small' : 'medium'}\n      {...otherProps}\n      // Disable ripple and set background color below because of some issues\n      // with re-rendering with the keyboard interactions that causes the ripple\n      // animation to stutter.\n      focusRipple={false}\n      // Tab index is handled by the overall keyboard interactions for the table\n      // to avoid trapping a keyboard user in a table by requiring them to tab\n      // through every single checkbox.\n      tabIndex={-1}\n      sx={{\n        color: color,\n\n        padding: (theme) => theme.spacing(isCompact ? 0.25 : 0.5),\n\n        // Centering.\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n\n        '&.Mui-checked': {\n          color: color,\n        },\n\n        '&.Mui-focusVisible': {\n          background: color ? alpha(color, 0.5) : undefined,\n        },\n\n        '& .MuiSvgIcon-root': { fontSize: isCompact ? 16 : 18 },\n      }}\n    />\n  );\n}\n"],"names":["Checkbox","alpha","TableCheckbox","color","density","otherProps","isCompact","size","focusRipple","tabIndex","sx","padding","theme","spacing","position","top","left","transform","background","undefined","fontSize"],"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,QAAQ,EAAiBC,KAAK,QAAQ,eAAe,CAAC;AAQ/D,OAAO,SAASC,aAAa,CAAC,EAAEC,KAAK,CAAA,EAAEC,OAAO,CAAA,EAAE,GAAGC,UAAU,EAAsB,EAAE;IACnF,MAAMC,SAAS,GAAGF,OAAO,KAAK,SAAS,AAAC;IAExC,qBACE,KAACJ,QAAQ;QACPO,IAAI,EAAED,SAAS,GAAG,OAAO,GAAG,QAAQ;QACnC,GAAGD,UAAU;QACd,uEAAuE;QACvE,0EAA0E;QAC1E,wBAAwB;QACxBG,WAAW,EAAE,KAAK;QAClB,0EAA0E;QAC1E,wEAAwE;QACxE,iCAAiC;QACjCC,QAAQ,EAAE,CAAC,CAAC;QACZC,EAAE,EAAE;YACFP,KAAK,EAAEA,KAAK;YAEZQ,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACP,SAAS,GAAG,IAAI,GAAG,GAAG,CAAC;YAEzD,aAAa;YACbQ,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,IAAI,EAAE,KAAK;YACXC,SAAS,EAAE,uBAAuB;YAElC,eAAe,EAAE;gBACfd,KAAK,EAAEA,KAAK;aACb;YAED,oBAAoB,EAAE;gBACpBe,UAAU,EAAEf,KAAK,GAAGF,KAAK,CAACE,KAAK,EAAE,GAAG,CAAC,GAAGgB,SAAS;aAClD;YAED,oBAAoB,EAAE;gBAAEC,QAAQ,EAAEd,SAAS,GAAG,EAAE,GAAG,EAAE;aAAE;SACxD;MACD,CACF;AACJ,CAAC"}

package/dist/Table/TableHeaderCell.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { SortDirection } from './model/table-model';
+import { TableCellProps } from './TableCell';
+export interface TableHeaderCellProps extends TableCellProps {
+    /**
+     * Handler called when a sort event is triggered.
+     * When specified, the header will include sorting interactions and indicators.
+     */
+    onSort?: ((event: unknown) => void) | undefined;
+    /**
+     * The current direction the header is sorted.
+     */
+    sortDirection?: SortDirection;
+    /**
+     * The next direction the header will be sorted when another sort action
+     * is triggered via click/keyboard. This impacts some UI interactions (e.g.
+     * the direction of the sort arrow on hover f the column is currently
+     * unsorted.)
+     */
+    nextSortDirection?: SortDirection;
+}
+export declare function TableHeaderCell({ onSort, sortDirection, nextSortDirection, children, ...cellProps }: TableHeaderCellProps): JSX.Element;
+//# sourceMappingURL=TableHeaderCell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableHeaderCell.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,oBAAoB,eA4CtB"}

package/dist/Table/TableHeaderCell.js

@@ -0,0 +1,53 @@
+// 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 { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';
+import { TableCell } from './TableCell';
+export function TableHeaderCell({ onSort , sortDirection , nextSortDirection , children , ...cellProps }) {
+    const showSortLabel = !!onSort;
+    const headerText = /*#__PURE__*/ _jsx(Typography, {
+        noWrap: true,
+        variant: "inherit",
+        component: "div",
+        color: "inherit",
+        children: children
+    });
+    const isActive = !!sortDirection;
+    const direction = isActive ? sortDirection : nextSortDirection;
+    return /*#__PURE__*/ _jsx(TableCell, {
+        ...cellProps,
+        children: showSortLabel ? /*#__PURE__*/ _jsx(TableSortLabel, {
+            onClick: onSort,
+            direction: direction,
+            active: isActive,
+            sx: {
+                // Overrides a default vertical alignment in the CSS that changes
+                // the header vertical rhythm in a way that's inconsistent with
+                // non-sorting headers.
+                verticalAlign: 'unset',
+                // Makes it possible to ellipsize the text if it's too long.
+                maxWidth: '100%',
+                // Make the arrow visible when focused using the keyboard to assist
+                // with a11y.
+                '&:focus-visible': {
+                    [`& .${tableSortLabelClasses.icon}`]: {
+                        opacity: isActive ? 1 : 0.5
+                    }
+                }
+            },
+            children: headerText
+        }) : headerText
+    });
+}
+
+//# sourceMappingURL=TableHeaderCell.js.map

package/dist/Table/TableHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/TableHeaderCell.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 { TableSortLabel, Typography, tableSortLabelClasses } from '@mui/material';\nimport { SortDirection } from './model/table-model';\nimport { TableCell, TableCellProps } from './TableCell';\n\nexport interface TableHeaderCellProps extends TableCellProps {\n  /**\n   * Handler called when a sort event is triggered.\n   * When specified, the header will include sorting interactions and indicators.\n   */\n  onSort?: ((event: unknown) => void) | undefined;\n\n  /**\n   * The current direction the header is sorted.\n   */\n  sortDirection?: SortDirection;\n\n  /**\n   * The next direction the header will be sorted when another sort action\n   * is triggered via click/keyboard. This impacts some UI interactions (e.g.\n   * the direction of the sort arrow on hover f the column is currently\n   * unsorted.)\n   */\n  nextSortDirection?: SortDirection;\n}\n\nexport function TableHeaderCell({\n  onSort,\n  sortDirection,\n  nextSortDirection,\n  children,\n  ...cellProps\n}: TableHeaderCellProps) {\n  const showSortLabel = !!onSort;\n\n  const headerText = (\n    <Typography noWrap variant=\"inherit\" component=\"div\" color=\"inherit\">\n      {children}\n    </Typography>\n  );\n\n  const isActive = !!sortDirection;\n  const direction = isActive ? sortDirection : nextSortDirection;\n\n  return (\n    <TableCell {...cellProps}>\n      {showSortLabel ? (\n        <TableSortLabel\n          onClick={onSort}\n          direction={direction}\n          active={isActive}\n          sx={{\n            // Overrides a default vertical alignment in the CSS that changes\n            // the header vertical rhythm in a way that's inconsistent with\n            // non-sorting headers.\n            verticalAlign: 'unset',\n\n            // Makes it possible to ellipsize the text if it's too long.\n            maxWidth: '100%',\n\n            // Make the arrow visible when focused using the keyboard to assist\n            // with a11y.\n            '&:focus-visible': {\n              [`& .${tableSortLabelClasses.icon}`]: {\n                opacity: isActive ? 1 : 0.5,\n              },\n            },\n          }}\n        >\n          {headerText}\n        </TableSortLabel>\n      ) : (\n        headerText\n      )}\n    </TableCell>\n  );\n}\n"],"names":["TableSortLabel","Typography","tableSortLabelClasses","TableCell","TableHeaderCell","onSort","sortDirection","nextSortDirection","children","cellProps","showSortLabel","headerText","noWrap","variant","component","color","isActive","direction","onClick","active","sx","verticalAlign","maxWidth","icon","opacity"],"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,cAAc,EAAEC,UAAU,EAAEC,qBAAqB,QAAQ,eAAe,CAAC;AAElF,SAASC,SAAS,QAAwB,aAAa,CAAC;AAuBxD,OAAO,SAASC,eAAe,CAAC,EAC9BC,MAAM,CAAA,EACNC,aAAa,CAAA,EACbC,iBAAiB,CAAA,EACjBC,QAAQ,CAAA,EACR,GAAGC,SAAS,EACS,EAAE;IACvB,MAAMC,aAAa,GAAG,CAAC,CAACL,MAAM,AAAC;IAE/B,MAAMM,UAAU,iBACd,KAACV,UAAU;QAACW,MAAM;QAACC,OAAO,EAAC,SAAS;QAACC,SAAS,EAAC,KAAK;QAACC,KAAK,EAAC,SAAS;kBACjEP,QAAQ;MACE,AACd,AAAC;IAEF,MAAMQ,QAAQ,GAAG,CAAC,CAACV,aAAa,AAAC;IACjC,MAAMW,SAAS,GAAGD,QAAQ,GAAGV,aAAa,GAAGC,iBAAiB,AAAC;IAE/D,qBACE,KAACJ,SAAS;QAAE,GAAGM,SAAS;kBACrBC,aAAa,iBACZ,KAACV,cAAc;YACbkB,OAAO,EAAEb,MAAM;YACfY,SAAS,EAAEA,SAAS;YACpBE,MAAM,EAAEH,QAAQ;YAChBI,EAAE,EAAE;gBACF,iEAAiE;gBACjE,+DAA+D;gBAC/D,uBAAuB;gBACvBC,aAAa,EAAE,OAAO;gBAEtB,4DAA4D;gBAC5DC,QAAQ,EAAE,MAAM;gBAEhB,mEAAmE;gBACnE,aAAa;gBACb,iBAAiB,EAAE;oBACjB,CAAC,CAAC,GAAG,EAAEpB,qBAAqB,CAACqB,IAAI,CAAC,CAAC,CAAC,EAAE;wBACpCC,OAAO,EAAER,QAAQ,GAAG,CAAC,GAAG,GAAG;qBAC5B;iBACF;aACF;sBAEAL,UAAU;UACI,GAEjBA,UAAU,AACX;MACS,CACZ;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,aAAc,SAAQ,gBAAgB,CAAC,KAAK,CAAC;IACrD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,iqJAanB,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAS,MAAM,eAAe,CAAC;AAElG,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,aAAc,SAAQ,gBAAgB,CAAC,KAAK,CAAC;IACrD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,iqJAanB,CAAC"}

package/dist/Table/TableRow.js

@@ -11,16 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableRow as MuiTableRow } from '@mui/material';
+import { TableRow as MuiTableRow, alpha } from '@mui/material';
 import { forwardRef } from 'react';
 export const TableRow = /*#__PURE__*/ forwardRef(function TableRow(props, ref) {
     return /*#__PURE__*/ _jsx(MuiTableRow, {
         ...props,
         ref: ref,
         sx: {
-            backgroundColor: (theme)=>theme.palette.background.paper,
+            backgroundColor: (theme)=>theme.palette.background.default,
             '&:hover': {
-                backgroundColor: (theme)=>theme.palette.primary.light
+                backgroundColor: (theme)=>alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
             }
         }
     });

package/dist/Table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableRow.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 { TableRow as MuiTableRow, TableRowProps as MuiTableRowProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\ninterface TableRowProps extends MuiTableRowProps<'div'> {\n  density: TableDensity;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(props, ref) {\n  return (\n    <MuiTableRow\n      {...props}\n      ref={ref}\n      sx={{\n        backgroundColor: (theme) => theme.palette.background.paper,\n        '&:hover': {\n          backgroundColor: (theme) => theme.palette.primary.light,\n        },\n      }}\n    />\n  );\n});\n"],"names":["TableRow","MuiTableRow","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","paper","primary","light"],"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,QAAQ,IAAIC,WAAW,QAA2C,eAAe,CAAC;AAC3F,SAASC,UAAU,QAAQ,OAAO,CAAC;AAOnC,OAAO,MAAMF,QAAQ,iBAAGE,UAAU,CAAqC,SAASF,QAAQ,CAACG,KAAK,EAAEC,GAAG,EAAE;IACnG,qBACE,KAACH,WAAW;QACT,GAAGE,KAAK;QACTC,GAAG,EAAEA,GAAG;QACRC,EAAE,EAAE;YACFC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,UAAU,CAACC,KAAK;YAC1D,SAAS,EAAE;gBACTJ,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACG,OAAO,CAACC,KAAK;aACxD;SACF;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Table/TableRow.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 { TableRow as MuiTableRow, TableRowProps as MuiTableRowProps, alpha } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\ninterface TableRowProps extends MuiTableRowProps<'div'> {\n  density: TableDensity;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(props, ref) {\n  return (\n    <MuiTableRow\n      {...props}\n      ref={ref}\n      sx={{\n        backgroundColor: (theme) => theme.palette.background.default,\n        '&:hover': {\n          backgroundColor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n        },\n      }}\n    />\n  );\n});\n"],"names":["TableRow","MuiTableRow","alpha","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","default","primary","main","action","hoverOpacity"],"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,QAAQ,IAAIC,WAAW,EAAqCC,KAAK,QAAQ,eAAe,CAAC;AAClG,SAASC,UAAU,QAAQ,OAAO,CAAC;AAOnC,OAAO,MAAMH,QAAQ,iBAAGG,UAAU,CAAqC,SAASH,QAAQ,CAACI,KAAK,EAAEC,GAAG,EAAE;IACnG,qBACE,KAACJ,WAAW;QACT,GAAGG,KAAK;QACTC,GAAG,EAAEA,GAAG;QACRC,EAAE,EAAE;YACFC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,UAAU,CAACC,OAAO;YAC5D,SAAS,EAAE;gBACTJ,eAAe,EAAE,CAACC,KAAK,GAAKN,KAAK,CAACM,KAAK,CAACC,OAAO,CAACG,OAAO,CAACC,IAAI,EAAEL,KAAK,CAACC,OAAO,CAACK,MAAM,CAACC,YAAY,CAAC;aACjG;SACF;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}

package/dist/Table/VirtualizedTable.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { Column, HeaderGroup, Row } from '@tanstack/react-table';
 import { TableProps } from './model/table-model';
-export declare type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & {
-    onRowClick: (id: string) => void;
+export declare type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {
+    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;
     rows: Array<Row<TableData>>;
     columns: Array<Column<TableData, unknown>>;
     headers: Array<HeaderGroup<TableData>>;
 };
-export declare function VirtualizedTable<TableData>({ width, height, density, onRowClick, rows, columns, headers, }: VirtualizedTableProps<TableData>): JSX.Element;
+export declare function VirtualizedTable<TableData>({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, }: VirtualizedTableProps<TableData>): JSX.Element;
 //# sourceMappingURL=VirtualizedTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAU7E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAQjD,oBAAY,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAAG;IACrH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACxC,CAAC;AAKF,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,eA+HlC"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAW7E,OAAO,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQpE,oBAAY,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAClH,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChE,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACxC,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,eA4KlC"}

package/dist/Table/VirtualizedTable.js

@@ -19,13 +19,14 @@ import { TableRow } from './TableRow';
 import { TableBody } from './TableBody';
 import { InnerTable } from './InnerTable';
 import { TableHead } from './TableHead';
+import { TableHeaderCell } from './TableHeaderCell';
 import { TableCell } from './TableCell';
 import { VirtualizedTableContainer } from './VirtualizedTableContainer';
 import { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';
 // Separating out the virtualized table because we may want a paginated table
 // in the future that does not need virtualization, and we'd likely lay them
 // out differently.
-export function VirtualizedTable({ width , height , density , onRowClick , rows , columns , headers  }) {
+export function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOver , onRowMouseOut , rows , columns , headers  }) {
     const virtuosoRef = useRef(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -69,10 +70,20 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                 if (!row) {
                     return null;
                 }
+                const rowEventOpts = {
+                    id: row.id,
+                    index: row.index
+                };
                 return /*#__PURE__*/ _jsx(TableRow, {
                     ...props,
-                    onClick: ()=>onRowClick(row.id),
-                    density: density
+                    onClick: (e)=>onRowClick(e, row.id),
+                    density: density,
+                    onMouseOver: (e)=>{
+                        onRowMouseOver === null || onRowMouseOver === void 0 ? void 0 : onRowMouseOver(e, rowEventOpts);
+                    },
+                    onMouseOut: (e)=>{
+                        onRowMouseOut === null || onRowMouseOut === void 0 ? void 0 : onRowMouseOut(e, rowEventOpts);
+                    }
                 });
             },
             TableBody
@@ -81,6 +92,8 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
         density,
         keyboardNav.onTableKeyDown,
         onRowClick,
+        onRowMouseOut,
+        onRowMouseOver,
         rows,
         width
     ]);
@@ -102,18 +115,28 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                     children: headers.map((headerGroup)=>{
                         return /*#__PURE__*/ _jsx(TableRow, {
                             density: density,
-                            children: headerGroup.headers.map((header, i)=>{
+                            children: headerGroup.headers.map((header, i, headers)=>{
+                                var ref, ref1;
                                 const column = header.column;
                                 const position = {
                                     row: 0,
                                     column: i
                                 };
-                                return /*#__PURE__*/ _jsx(TableCell, {
+                                const isSorted = column.getIsSorted();
+                                const nextSorting = column.getNextSortingOrder();
+                                return /*#__PURE__*/ _jsx(TableHeaderCell, {
+                                    onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
+                                    sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
+                                    nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
                                     width: column.getSize() || 'auto',
+                                    align: (ref = column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
                                     variant: "head",
                                     density: density,
+                                    description: (ref1 = column.columnDef.meta) === null || ref1 === void 0 ? void 0 : ref1.headerDescription,
                                     focusState: getFocusState(position),
                                     onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                                    isFirstColumn: i === 0,
+                                    isLastColumn: i === headers.length - 1,
                                     children: flexRender(column.columnDef.header, header.getContext())
                                 }, header.id);
                             })
@@ -127,20 +150,38 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                     return null;
                 }
                 return /*#__PURE__*/ _jsx(_Fragment, {
-                    children: row.getVisibleCells().map((cell, i)=>{
+                    children: row.getVisibleCells().map((cell, i, cells)=>{
+                        var ref, ref1;
                         const position = {
                             // Add 1 to the row index because the header is row 0
                             row: index + 1,
                             column: i
                         };
+                        const cellContext = cell.getContext();
+                        const cellRenderFn = cell.column.columnDef.cell;
+                        const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;
+                        const cellDescriptionDef = (ref = cell.column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.cellDescription;
+                        let description = undefined;
+                        if (typeof cellDescriptionDef === 'function') {
+                            // If the cell description is a function, set the value using
+                            // the function.
+                            description = cellDescriptionDef(cellContext);
+                        } else if (cellDescriptionDef && typeof cellContent === 'string') {
+                            // If the cell description is `true` AND the cell content is
+                            // a string (and thus viable as a `title` attribute), use the
+                            // cell content.
+                            description = cellContent;
+                        }
                         return /*#__PURE__*/ _jsx(TableCell, {
-                            sx: {
-                                width: cell.column.getSize() || 'auto'
-                            },
+                            width: cell.column.getSize() || 'auto',
+                            align: (ref1 = cell.column.columnDef.meta) === null || ref1 === void 0 ? void 0 : ref1.align,
                             density: density,
                             focusState: getFocusState(position),
                             onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
-                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                            isFirstColumn: i === 0,
+                            isLastColumn: i === cells.length - 1,
+                            description: description,
+                            children: cellContent
                         }, cell.id);
                     })
                 });

package/dist/Table/VirtualizedTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/VirtualizedTable.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 { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & {\n  onRowClick: (id: string) => void;\n  rows: Array<Row<TableData>>;\n  columns: Array<Column<TableData, unknown>>;\n  headers: Array<HeaderGroup<TableData>>;\n};\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  onRowClick,\n  rows,\n  columns,\n  headers,\n}: VirtualizedTableProps<TableData>) {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n    return {\n      Scroller: VirtualizedTableContainer,\n      Table: (props) => {\n        return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n      },\n      TableHead,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }) => {\n        const index = props['data-index'];\n        const row = rows[index];\n        if (!row) {\n          return null;\n        }\n\n        return <TableRow {...props} onClick={() => onRowClick(row.id)} density={density} />;\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, rows, width]);\n\n  return (\n    <Box sx={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      return (\n                        <TableCell\n                          key={header.id}\n                          width={column.getSize() || 'auto'}\n                          variant=\"head\"\n                          density={density}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i) => {\n                const position: TableCellPosition = {\n                  // Add 1 to the row index because the header is row 0\n                  row: index + 1,\n                  column: i,\n                };\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    sx={{ width: cell.column.getSize() || 'auto' }}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                  >\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","rows","columns","headers","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","onClick","id","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","getSize","variant","focusState","onFocusTrigger","onCellFocus","columnDef","getContext","itemContent","getVisibleCells","cell"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/VirtualizedTable.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 { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> &\n  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {\n    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;\n    rows: Array<Row<TableData>>;\n    columns: Array<Column<TableData, unknown>>;\n    headers: Array<HeaderGroup<TableData>>;\n  };\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  rows,\n  columns,\n  headers,\n}: VirtualizedTableProps<TableData>) {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n    return {\n      Scroller: VirtualizedTableContainer,\n      Table: (props) => {\n        return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n      },\n      TableHead,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }) => {\n        const index = props['data-index'];\n        const row = rows[index];\n        if (!row) {\n          return null;\n        }\n\n        const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n        return (\n          <TableRow\n            {...props}\n            onClick={(e) => onRowClick(e, row.id)}\n            density={density}\n            onMouseOver={(e) => {\n              onRowMouseOver?.(e, rowEventOpts);\n            }}\n            onMouseOut={(e) => {\n              onRowMouseOut?.(e, rowEventOpts);\n            }}\n          />\n        );\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, rows, width]);\n\n  return (\n    <Box sx={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      const isSorted = column.getIsSorted();\n                      const nextSorting = column.getNextSortingOrder();\n\n                      return (\n                        <TableHeaderCell\n                          key={header.id}\n                          onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n                          sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n                          nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n                          width={column.getSize() || 'auto'}\n                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\n                          description={column.columnDef.meta?.headerDescription}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                          isFirstColumn={i === 0}\n                          isLastColumn={i === headers.length - 1}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableHeaderCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i, cells) => {\n                const position: TableCellPosition = {\n                  // Add 1 to the row index because the header is row 0\n                  row: index + 1,\n                  column: i,\n                };\n\n                const cellContext = cell.getContext();\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;\n\n                const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n                let description: string | undefined = undefined;\n                if (typeof cellDescriptionDef === 'function') {\n                  // If the cell description is a function, set the value using\n                  // the function.\n                  description = cellDescriptionDef(cellContext);\n                } else if (cellDescriptionDef && typeof cellContent === 'string') {\n                  // If the cell description is `true` AND the cell content is\n                  // a string (and thus viable as a `title` attribute), use the\n                  // cell content.\n                  description = cellContent;\n                }\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    width={cell.column.getSize() || 'auto'}\n                    align={cell.column.columnDef.meta?.align}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                    isFirstColumn={i === 0}\n                    isLastColumn={i === cells.length - 1}\n                    description={description}\n                  >\n                    {cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells","cellContext","cellRenderFn","cellContent","cellDescriptionDef","cellDescription"],"mappings":"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"}