@perses-dev/components 0.35.0 → 0.36.0

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/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,eAqIlC"}
+{"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
     ]);
@@ -103,17 +116,23 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                         return /*#__PURE__*/ _jsx(TableRow, {
                             density: density,
                             children: headerGroup.headers.map((header, i, headers)=>{
-                                var ref;
+                                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,
@@ -132,21 +151,37 @@ export function VirtualizedTable({ width , height , density , onRowClick , rows
                 }
                 return /*#__PURE__*/ _jsx(_Fragment, {
                     children: row.getVisibleCells().map((cell, i, cells)=>{
-                        var ref;
+                        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, {
                             width: cell.column.getSize() || 'auto',
-                            align: (ref = cell.column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
+                            align: (ref1 = cell.column.columnDef.meta) === null || ref1 === void 0 ? void 0 : ref1.align,
                             density: density,
                             focusState: getFocusState(position),
                             onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                             isFirstColumn: i === 0,
                             isLastColumn: i === cells.length - 1,
-                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                            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, headers) => {\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                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\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                        </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, 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                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                  >\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","align","columnDef","meta","variant","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells"],"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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"}

package/dist/Table/model/table-model.d.ts

@@ -1,7 +1,18 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
-import { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowData, RowSelectionState } from '@tanstack/react-table';
+import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
 export declare type TableDensity = 'compact' | 'standard';
+export declare type SortDirection = 'asc' | 'desc' | undefined;
+export declare type TableRowEventOpts = {
+    /**
+     * Unique identifier for the row.
+     */
+    id: string;
+    /**
+     * Index of the row in the original data.
+     */
+    index: number;
+};
 export interface TableProps<TableData> {
     /**
      * Height of the table.
@@ -31,6 +42,18 @@ export interface TableProps<TableData> {
      * When `true`, the first column of the table will include checkboxes.
      */
     checkboxSelection?: boolean;
+    /**
+     * Determines the behavior of row selection.
+     *
+     * - `standard`: clicking a checkbox will toggle that rows's selected/unselected
+     *    state and will not impact other rows.
+     * - `legend`: clicking a checkbox will "focus" that row by selecting it and
+     *    unselecting other rows. Clicking a checkbox with a modifier key pressed,
+     *    will change this behavior to behave like `standard`.
+     *
+     * @default 'standard'
+     */
+    rowSelectionVariant?: 'standard' | 'legend';
     /**
      * State of selected rows in the table when `checkboxSelection` is enabled.
      *
@@ -38,10 +61,29 @@ export interface TableProps<TableData> {
      * combination of this prop and `onRowSelectionChange`.
      */
     rowSelection?: RowSelectionState;
+    /**
+     * Callback fired when the mouse is moved over a table row.
+     */
+    onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;
+    /**
+     * Callback fired when the mouse is moved out of a table row.
+     */
+    onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;
+    /**
+     * State of the column sorting in the table.
+     *
+     * The column sorting is a controlled value that should be managed using a
+     * combination fo this prop and `onSortingChange`.
+     */
+    sorting?: SortingState;
     /**
      * Callback fired when the selected rows in the table changes.
      */
     onRowSelectionChange?: (rowSelection: RowSelectionState) => void;
+    /**
+     * Callback fired when the table sorting changes.
+     */
+    onSortingChange?: (sorting: SortingState) => void;
     /**
      * Function used to determine the unique identifier used for each row. This
      * value is used to key `rowSelection`. If this value is not set, the index
@@ -69,14 +111,40 @@ export declare function getTableCellLayout(theme: Theme, density: TableDensity,
 export declare type TableCellAlignment = 'left' | 'right' | 'center';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
-        align?: TableCellAlignment;
+        align?: TableColumnConfig<TData>['align'];
+        headerDescription?: TableColumnConfig<TData>['headerDescription'];
+        cellDescription?: TableColumnConfig<TData>['cellDescription'];
     }
 }
-export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell'> {
+export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {
     /**
      * Text to display in the header for the column.
      */
     header: string;
+    /**
+     * Alignment of the content in the cell.
+     */
+    align?: TableCellAlignment;
+    /**
+     * Text to display when hovering over a cell. This can be useful for
+     * providing additional information about the column when the content is
+     * ellipsized to fit in the space.
+     *
+     * If set to `true`, it will use the value generated by the `cell` prop if it
+     * can be treated as a string.
+     */
+    cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;
+    /**
+     * When `true`, the column will be sortable.
+     * @default false
+     */
+    enableSorting?: boolean;
+    /**
+     * Text to display when hovering over the header text. This can be useful for
+     * providing additional information about the column when you want to keep the
+     * header text relatively short to manage the column width.
+     */
+    headerDescription?: string;
     /**
      * Width of the column when rendered in a table. It should be a number in pixels
      * or "auto" to allow the table to automatically adjust the width to fill
@@ -84,10 +152,6 @@ export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<
      * @default 'auto'
      */
     width?: number | 'auto';
-    /**
-     * Alignment of the content in the cell.
-     */
-    align?: TableCellAlignment;
 }
 /**
  * Takes in a perses table column and transforms it into a tanstack column.

package/dist/Table/model/table-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAGjH,oBAAY,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,UAAU,CAAC,SAAS;IACnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,CAAC;IAE7C;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEjE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAE9C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,MAAM,CAAC;CACnD;AAWD,aAAK,eAAe,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;IACrG,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,aAAK,sBAAsB,GAAG;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,EAAE,YAAY,EAAE,aAAa,EAAE,GAAE,sBAA2B,GAC3D,eAAe,CAiCjB;AAED,oBAAY,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAM7D,OAAO,QAAQ,sBAAsB,CAAC;IAEpC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,KAAK,CAAC,EAAE,kBAAkB,CAAC;KAC5B;CACF;AAKD,MAAM,WAAW,iBAAiB,CAAC,SAAS,CAI1C,SAAQ,IAAI,CAAC,oBAAoB,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC1E;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAIf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,mCAmCrG"}
+{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":"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"}

package/dist/Table/model/table-model.js

@@ -52,7 +52,7 @@ function calculateTableCellHeight(lineHeight, paddingY) {
 /**
  * Takes in a perses table column and transforms it into a tanstack column.
  */ export function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width , align , ...otherProps })=>{
+    const tableCols = columns.map(({ width , align , headerDescription , cellDescription , enableSorting , ...otherProps })=>{
         // Tanstack Table does not support an "auto" value to naturally size to fit
         // the space in a table. We translate our custom "auto" setting to 0 size
         // for these columns, so it is easy to fall back to auto when rendering.
@@ -70,10 +70,14 @@ function calculateTableCellHeight(lineHeight, paddingY) {
         const result = {
             ...otherProps,
             ...sizeProps,
+            // Default sorting to false, so it is very explicitly set per column.
+            enableSorting: !!enableSorting,
             // Open-ended store for extra metadata in TanStack Table, so you can bake
             // in your own features.
             meta: {
-                align
+                align,
+                headerDescription,
+                cellDescription
             }
         };
         return result;

package/dist/Table/model/table-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { AccessorKeyColumnDef, ColumnDef, CoreOptions, RowData, RowSelectionState } from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard';\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n\n    const basePaddingX = theme.spacing(0.5);\n    const edgePaddingX = theme.spacing(1);\n    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n      height: calculateTableCellHeight(lineHeight, paddingY),\n      fontSize: theme.typography.body2.fontSize,\n      lineHeight: lineHeight,\n    };\n  }\n\n  // standard density\n  const paddingY = theme.spacing(1);\n  const basePaddingX = theme.spacing(1.25);\n  const edgePaddingX = theme.spacing(2);\n  const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableCellAlignment;\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(({ width, align, ...otherProps }) => {\n    // Tanstack Table does not support an \"auto\" value to naturally size to fit\n    // the space in a table. We translate our custom \"auto\" setting to 0 size\n    // for these columns, so it is easy to fall back to auto when rendering.\n    // Taking from a recommendation in this github discussion:\n    // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n    const sizeProps =\n      width === 'auto' || width === undefined\n        ? {\n            // All zero values are used as shorthand for \"auto\" when rendering\n            // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n            size: 0,\n            minSize: 0,\n            maxSize: 0,\n          }\n        : {\n            size: width,\n          };\n\n    const result = {\n      ...otherProps,\n      ...sizeProps,\n\n      // Open-ended store for extra metadata in TanStack Table, so you can bake\n      // in your own features.\n      meta: {\n        align,\n      },\n    };\n\n    return result;\n  });\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"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;AAsEjC,SAASA,wBAAwB,CAACC,UAAuC,EAAEC,QAAgB,EAAU;IACnG,6EAA6E;IAC7E,mDAAmD;IACnD,MAAMC,aAAa,GAAG,OAAOF,UAAU,KAAK,QAAQ,GAAGG,QAAQ,CAACH,UAAU,EAAE,EAAE,CAAC,GAAGA,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,AAAC;IAClG,MAAMI,kBAAkB,GAAG,OAAOH,QAAQ,KAAK,QAAQ,GAAGE,QAAQ,CAACF,QAAQ,EAAE,EAAE,CAAC,GAAGA,QAAQ,AAAC;IAE5F,OAAOC,aAAa,GAAGE,kBAAkB,GAAG,CAAC,CAAC;AAChD,CAAC;AAWD;;;CAGC,GACD,OAAO,SAASC,kBAAkB,CAChCC,KAAY,EACZC,OAAqB,EACrB,EAAEC,YAAY,CAAA,EAAEC,aAAa,CAAA,EAA0B,GAAG,EAAE,EAC3C;IACjB,IAAIF,OAAO,KAAK,SAAS,EAAE;QACzB,MAAMN,QAAQ,GAAGK,KAAK,CAACI,OAAO,CAAC,GAAG,CAAC,AAAC;QAEpC,MAAMC,YAAY,GAAGL,KAAK,CAACI,OAAO,CAAC,GAAG,CAAC,AAAC;QACxC,MAAME,YAAY,GAAGN,KAAK,CAACI,OAAO,CAAC,CAAC,CAAC,AAAC;QACtC,MAAMG,WAAW,GAAGJ,aAAa,GAAGG,YAAY,GAAGD,YAAY,AAAC;QAChE,MAAMG,YAAY,GAAGN,YAAY,GAAGI,YAAY,GAAGD,YAAY,AAAC;QAEhE,MAAMX,UAAU,GAAGM,KAAK,CAACS,UAAU,CAACC,KAAK,CAAChB,UAAU,AAAC;QAErD,OAAO;YACLiB,OAAO,EAAE,CAAC,EAAEhB,QAAQ,CAAC,CAAC,EAAEa,YAAY,CAAC,CAAC,EAAEb,QAAQ,CAAC,CAAC,EAAEY,WAAW,CAAC,CAAC;YACjEK,MAAM,EAAEnB,wBAAwB,CAACC,UAAU,EAAEC,QAAQ,CAAC;YACtDkB,QAAQ,EAAEb,KAAK,CAACS,UAAU,CAACC,KAAK,CAACG,QAAQ;YACzCnB,UAAU,EAAEA,UAAU;SACvB,CAAC;IACJ,CAAC;IAED,mBAAmB;IACnB,MAAMC,SAAQ,GAAGK,KAAK,CAACI,OAAO,CAAC,CAAC,CAAC,AAAC;IAClC,MAAMC,aAAY,GAAGL,KAAK,CAACI,OAAO,CAAC,IAAI,CAAC,AAAC;IACzC,MAAME,aAAY,GAAGN,KAAK,CAACI,OAAO,CAAC,CAAC,CAAC,AAAC;IACtC,MAAMG,YAAW,GAAGJ,aAAa,GAAGG,aAAY,GAAGD,aAAY,AAAC;IAChE,MAAMG,aAAY,GAAGN,YAAY,GAAGI,aAAY,GAAGD,aAAY,AAAC;IAChE,MAAMX,WAAU,GAAGM,KAAK,CAACS,UAAU,CAACK,KAAK,CAACpB,UAAU,AAAC;IAErD,OAAO;QACLiB,OAAO,EAAE,CAAC,EAAEhB,SAAQ,CAAC,CAAC,EAAEa,aAAY,CAAC,CAAC,EAAEb,SAAQ,CAAC,CAAC,EAAEY,YAAW,CAAC,CAAC;QACjEK,MAAM,EAAEnB,wBAAwB,CAACC,WAAU,EAAEC,SAAQ,CAAC;QACtDkB,QAAQ,EAAEb,KAAK,CAACS,UAAU,CAACK,KAAK,CAACD,QAAQ;QACzCnB,UAAU,EAAEA,WAAU;KACvB,CAAC;AACJ,CAAC;AA4CD;;CAEC,GACD,OAAO,SAASqB,8BAA8B,CAAYC,OAA4C,EAAE;IACtG,MAAMC,SAAS,GAAgCD,OAAO,CAACE,GAAG,CAAC,CAAC,EAAEC,KAAK,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGC,UAAU,EAAE,GAAK;QAC9F,2EAA2E;QAC3E,yEAAyE;QACzE,wEAAwE;QACxE,0DAA0D;QAC1D,+EAA+E;QAC/E,MAAMC,SAAS,GACbH,KAAK,KAAK,MAAM,IAAIA,KAAK,KAAKI,SAAS,GACnC;YACE,kEAAkE;YAClE,qEAAqE;YACrEC,IAAI,EAAE,CAAC;YACPC,OAAO,EAAE,CAAC;YACVC,OAAO,EAAE,CAAC;SACX,GACD;YACEF,IAAI,EAAEL,KAAK;SACZ,AAAC;QAER,MAAMQ,MAAM,GAAG;YACb,GAAGN,UAAU;YACb,GAAGC,SAAS;YAEZ,yEAAyE;YACzE,wBAAwB;YACxBM,IAAI,EAAE;gBACJR,KAAK;aACN;SACF,AAAC;QAEF,OAAOO,MAAM,CAAC;IAChB,CAAC,CAAC,AAAC;IAEH,OAAOV,SAAS,CAAC;AACnB,CAAC"}
+{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n\n    const basePaddingX = theme.spacing(0.5);\n    const edgePaddingX = theme.spacing(1);\n    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n      height: calculateTableCellHeight(lineHeight, paddingY),\n      fontSize: theme.typography.body2.fontSize,\n      lineHeight: lineHeight,\n    };\n  }\n\n  // standard density\n  const paddingY = theme.spacing(1);\n  const basePaddingX = theme.spacing(1.25);\n  const edgePaddingX = theme.spacing(2);\n  const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { UnitOptions } from '@perses-dev/core';
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { EChartsDataFormat, UnitOptions } from '../model';
+import { EChartsDataFormat } from '../model';
 import { CursorCoordinates } from './tooltip-model';
 export interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI1D,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,iBAAiB,8DAiF5B,CAAC"}
+{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,iBAAiB,8DAkF5B,CAAC"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -65,7 +65,8 @@ export const TimeSeriesTooltip = /*#__PURE__*/ memo(function TimeSeriesTooltip({
                     visibility: 'visible',
                     opacity: 1,
                     transition: 'all 0.1s ease-out',
-                    zIndex: theme.zIndex.tooltip,
+                    // Ensure pinned tooltip shows behind edit panel drawer and sticky header
+                    zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,
                     overflow: 'hidden',
                     '&:hover': {
                         overflowY: 'auto'