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

package/dist/Table/TableToolbar.js

@@ -0,0 +1,127 @@
+// Copyright 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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Checkbox, IconButton, InputAdornment, ListItemText, Menu, MenuItem, Stack } from '@mui/material';
+import { useCallback, useState } from 'react';
+import Magnify from 'mdi-material-ui/Magnify';
+import Close from 'mdi-material-ui/Close';
+import ViewColumn from 'mdi-material-ui/ViewColumn';
+import { TextField } from '../controls';
+export function TableToolbar({ isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight = 400 }) {
+    const [colMenuAnchor, setColMenuAnchor] = useState(null);
+    const colMenuOpen = Boolean(colMenuAnchor);
+    const [searchResetKey, setSearchResetKey] = useState(0);
+    const handleSearchClear = useCallback(()=>{
+        onGlobalFilterChange('');
+        setSearchResetKey((prev)=>prev + 1);
+    }, [
+        onGlobalFilterChange
+    ]);
+    if (!isSearchEnabled && !isColumnFilterEnabled) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        gap: 1,
+        alignItems: "center",
+        justifyContent: "flex-end",
+        width: width,
+        padding: "0.5rem",
+        sx: {
+            backgroundColor: (theme)=>theme.palette.background.default
+        },
+        children: [
+            isSearchEnabled && /*#__PURE__*/ _jsx(TextField, {
+                placeholder: "Search...",
+                value: globalFilter,
+                onChange: onGlobalFilterChange,
+                variant: "standard",
+                slotProps: {
+                    htmlInput: {
+                        'aria-label': 'search table'
+                    },
+                    input: {
+                        startAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                            position: "start",
+                            children: /*#__PURE__*/ _jsx(Magnify, {
+                                fontSize: "small"
+                            })
+                        }),
+                        endAdornment: globalFilter !== '' && /*#__PURE__*/ _jsx(InputAdornment, {
+                            position: "end",
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                onClick: handleSearchClear,
+                                children: /*#__PURE__*/ _jsx(Close, {
+                                    fontSize: "small"
+                                })
+                            })
+                        })
+                    }
+                },
+                sx: {
+                    flexGrow: 1
+                }
+            }, searchResetKey),
+            isColumnFilterEnabled && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        onClick: (e)=>setColMenuAnchor(e.currentTarget),
+                        "aria-haspopup": "listbox",
+                        "aria-expanded": colMenuOpen,
+                        color: "info",
+                        children: /*#__PURE__*/ _jsx(ViewColumn, {})
+                    }),
+                    /*#__PURE__*/ _jsx(Menu, {
+                        anchorEl: colMenuAnchor,
+                        open: colMenuOpen,
+                        onClose: ()=>setColMenuAnchor(null),
+                        slotProps: {
+                            list: {
+                                dense: true
+                            }
+                        },
+                        sx: {
+                            maxHeight: columnFilterMenuMaxHeight
+                        },
+                        children: columns.map((column)=>{
+                            const header = column.columnDef.header;
+                            const label = typeof header === 'string' ? header : column.id;
+                            return /*#__PURE__*/ _jsxs(MenuItem, {
+                                disabled: !column.getCanHide(),
+                                onClick: column.getCanHide() ? column.getToggleVisibilityHandler() : undefined,
+                                dense: true,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                        checked: column.getIsVisible(),
+                                        disabled: !column.getCanHide(),
+                                        size: "small",
+                                        disableRipple: true,
+                                        sx: {
+                                            p: 0,
+                                            mr: 1
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(ListItemText, {
+                                        primary: label
+                                    })
+                                ]
+                            }, column.id);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TableToolbar.js.map

package/dist/Table/TableToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/TableToolbar.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, IconButton, InputAdornment, ListItemText, Menu, MenuItem, Stack } from '@mui/material';\nimport { Column } from '@tanstack/react-table';\nimport { ReactElement, useCallback, useState } from 'react';\nimport Magnify from 'mdi-material-ui/Magnify';\nimport Close from 'mdi-material-ui/Close';\nimport ViewColumn from 'mdi-material-ui/ViewColumn';\nimport { TextField } from '../controls';\n\nexport interface TableToolbarProps<TableData> {\n  /**\n   * When `true`, a search input is rendered.\n   */\n  isSearchEnabled?: boolean;\n\n  /**\n   * Current value of the global filter / search query.\n   */\n  globalFilter: string;\n\n  /**\n   * Callback fired when the search query changes.\n   */\n  onGlobalFilterChange: (value: string) => void;\n\n  /**\n   * When `true`, a \"Columns\" button is rendered that opens a column visibility dropdown.\n   */\n  isColumnFilterEnabled?: boolean;\n\n  /**\n   * All columns from the table instance, used to build the visibility menu.\n   */\n  columns: Array<Column<TableData>>;\n  /**\n   * The width of the toolbar, used to determine when to switch to a more compact layout.\n   */\n  width: number | string;\n\n  /**\n   * Max height for the column filter menu.\n   */\n  columnFilterMenuMaxHeight?: number | string;\n}\n\nexport function TableToolbar<TableData>({\n  isSearchEnabled,\n  globalFilter,\n  onGlobalFilterChange,\n  isColumnFilterEnabled,\n  columns,\n  width,\n  columnFilterMenuMaxHeight = 400,\n}: TableToolbarProps<TableData>): ReactElement | null {\n  const [colMenuAnchor, setColMenuAnchor] = useState<null | HTMLElement>(null);\n  const colMenuOpen = Boolean(colMenuAnchor);\n  const [searchResetKey, setSearchResetKey] = useState(0);\n\n  const handleSearchClear = useCallback(() => {\n    onGlobalFilterChange('');\n    setSearchResetKey((prev) => prev + 1);\n  }, [onGlobalFilterChange]);\n\n  if (!isSearchEnabled && !isColumnFilterEnabled) {\n    return null;\n  }\n\n  return (\n    <Stack\n      direction=\"row\"\n      gap={1}\n      alignItems=\"center\"\n      justifyContent=\"flex-end\"\n      width={width}\n      padding=\"0.5rem\"\n      sx={{ backgroundColor: (theme) => theme.palette.background.default }}\n    >\n      {isSearchEnabled && (\n        <TextField\n          key={searchResetKey}\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={onGlobalFilterChange}\n          variant=\"standard\"\n          slotProps={{\n            htmlInput: { 'aria-label': 'search table' },\n            input: {\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <Magnify fontSize=\"small\" />\n                </InputAdornment>\n              ),\n              endAdornment: globalFilter !== '' && (\n                <InputAdornment position=\"end\">\n                  <IconButton onClick={handleSearchClear}>\n                    <Close fontSize=\"small\" />\n                  </IconButton>\n                </InputAdornment>\n              ),\n            },\n          }}\n          sx={{ flexGrow: 1 }}\n        />\n      )}\n      {isColumnFilterEnabled && (\n        <>\n          <IconButton\n            onClick={(e) => setColMenuAnchor(e.currentTarget)}\n            aria-haspopup=\"listbox\"\n            aria-expanded={colMenuOpen}\n            color=\"info\"\n          >\n            <ViewColumn />\n          </IconButton>\n          <Menu\n            anchorEl={colMenuAnchor}\n            open={colMenuOpen}\n            onClose={() => setColMenuAnchor(null)}\n            slotProps={{ list: { dense: true } }}\n            sx={{ maxHeight: columnFilterMenuMaxHeight }}\n          >\n            {columns.map((column) => {\n              const header = column.columnDef.header;\n              const label = typeof header === 'string' ? header : column.id;\n              return (\n                <MenuItem\n                  key={column.id}\n                  disabled={!column.getCanHide()}\n                  onClick={column.getCanHide() ? column.getToggleVisibilityHandler() : undefined}\n                  dense\n                >\n                  <Checkbox\n                    checked={column.getIsVisible()}\n                    disabled={!column.getCanHide()}\n                    size=\"small\"\n                    disableRipple\n                    sx={{ p: 0, mr: 1 }}\n                  />\n                  <ListItemText primary={label} />\n                </MenuItem>\n              );\n            })}\n          </Menu>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Checkbox","IconButton","InputAdornment","ListItemText","Menu","MenuItem","Stack","useCallback","useState","Magnify","Close","ViewColumn","TextField","TableToolbar","isSearchEnabled","globalFilter","onGlobalFilterChange","isColumnFilterEnabled","columns","width","columnFilterMenuMaxHeight","colMenuAnchor","setColMenuAnchor","colMenuOpen","Boolean","searchResetKey","setSearchResetKey","handleSearchClear","prev","direction","gap","alignItems","justifyContent","padding","sx","backgroundColor","theme","palette","background","default","placeholder","value","onChange","variant","slotProps","htmlInput","input","startAdornment","position","fontSize","endAdornment","onClick","flexGrow","e","currentTarget","aria-haspopup","aria-expanded","color","anchorEl","open","onClose","list","dense","maxHeight","map","column","header","columnDef","label","id","disabled","getCanHide","getToggleVisibilityHandler","undefined","checked","getIsVisible","size","disableRipple","p","mr","primary"],"mappings":"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"}

package/dist/Table/VirtualizedTable.d.ts

@@ -1,5 +1,6 @@
 import { Column, HeaderGroup, Row } from '@tanstack/react-table';
 import { ReactElement } from 'react';
+import { TableToolbarProps } from './TableToolbar';
 import { TableCellConfigs, TableProps } from './model/table-model';
 export type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth' | 'defaultColumnHeight'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {
     onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;
@@ -8,6 +9,7 @@ export type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableDat
     headers: Array<HeaderGroup<TableData>>;
     cellConfigs?: TableCellConfigs;
     rowCount: number;
+    toolbarConfig: Pick<TableToolbarProps<TableData>, 'isSearchEnabled' | 'globalFilter' | 'onGlobalFilterChange' | 'isColumnFilterEnabled' | 'columns' | 'columnFilterMenuMaxHeight'>;
 };
-export declare function VirtualizedTable<TableData>({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount, }: VirtualizedTableProps<TableData>): ReactElement;
+export declare function VirtualizedTable<TableData>({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig, }: VirtualizedTableProps<TableData>): ReactElement;
 //# 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;AAG7E,OAAO,EAAmB,YAAY,EAAE,MAAM,OAAO,CAAC;AAQtD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAStF,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,GAAG,qBAAqB,CAAC,CAC3G,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,oBAAoB,CAAC,GAAG;IACtG,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;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,QAAQ,GACT,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAsPjD"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAc,WAAW,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EAAE,YAAY,EAAmB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAQjE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAStF,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,GAAG,qBAAqB,CAAC,CAC3G,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,oBAAoB,CAAC,GAAG;IACtG,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;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,IAAI,CACjB,iBAAiB,CAAC,SAAS,CAAC,EAC1B,iBAAiB,GACjB,cAAc,GACd,sBAAsB,GACtB,uBAAuB,GACvB,SAAS,GACT,2BAA2B,CAC9B,CAAC;CACH,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,aAAa,GACd,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAyPjD"}

package/dist/Table/VirtualizedTable.js

@@ -10,11 +10,12 @@
 // 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { flexRender } from '@tanstack/react-table';
 import { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';
 import { TableVirtuoso } from 'react-virtuoso';
-import { useRef, useMemo } from 'react';
+import { useMemo, useRef } from 'react';
+import { TableToolbar } from './TableToolbar';
 import { TableRow } from './TableRow';
 import { TableBody } from './TableBody';
 import { InnerTable } from './InnerTable';
@@ -27,7 +28,7 @@ import { TableFoot } from './TableFoot';
 // 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, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount }) {
+export function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig }) {
     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
@@ -115,129 +116,139 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, d
             pageSize: parseInt(event.target.value, 10)
         });
     };
-    return /*#__PURE__*/ _jsx(Box, {
-        style: {
-            width,
-            height
-        },
-        children: /*#__PURE__*/ _jsx(TableVirtuoso, {
-            ref: virtuosoRef,
-            totalCount: rows.length,
-            components: VirtuosoTableComponents,
-            // Note: this value is impacted by overscan. See this issue if overscan
-            // is added.
-            // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138
-            rangeChanged: setVisibleRange,
-            fixedHeaderContent: ()=>{
-                return /*#__PURE__*/ _jsx(_Fragment, {
-                    children: headers.map((headerGroup)=>{
-                        return /*#__PURE__*/ _jsx(TableRow, {
-                            density: density,
-                            children: headerGroup.headers.map((header, i, headers)=>{
-                                const column = header.column;
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: /*#__PURE__*/ _jsxs(Box, {
+            style: {
+                width,
+                height,
+                display: 'flex',
+                flexDirection: 'column'
+            },
+            children: [
+                /*#__PURE__*/ _jsx(TableToolbar, {
+                    ...toolbarConfig,
+                    width: width
+                }),
+                /*#__PURE__*/ _jsx(TableVirtuoso, {
+                    ref: virtuosoRef,
+                    totalCount: rows.length,
+                    components: VirtuosoTableComponents,
+                    // Note: this value is impacted by overscan. See this issue if overscan
+                    // is added.
+                    // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138
+                    rangeChanged: setVisibleRange,
+                    fixedHeaderContent: ()=>{
+                        return /*#__PURE__*/ _jsx(_Fragment, {
+                            children: headers.map((headerGroup)=>{
+                                return /*#__PURE__*/ _jsx(TableRow, {
+                                    density: density,
+                                    children: headerGroup.headers.map((header, i, headers)=>{
+                                        const column = header.column;
+                                        const position = {
+                                            row: 0,
+                                            column: i
+                                        };
+                                        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() || defaultColumnWidth,
+                                            defaultColumnHeight: defaultColumnHeight,
+                                            align: column.columnDef.meta?.align,
+                                            variant: "head",
+                                            density: density,
+                                            description: column.columnDef.meta?.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);
+                                    })
+                                }, headerGroup.id);
+                            })
+                        });
+                    },
+                    fixedFooterContent: pagination ? ()=>/*#__PURE__*/ _jsx(MuiTableRow, {
+                            sx: {
+                                backgroundColor: (theme)=>theme.palette.background.default
+                            },
+                            children: /*#__PURE__*/ _jsx(TablePagination, {
+                                colSpan: columns.length,
+                                count: rowCount,
+                                page: pagination.pageIndex,
+                                rowsPerPage: pagination.pageSize,
+                                onPageChange: handleChangePage,
+                                onRowsPerPageChange: handleChangeRowsPerPage
+                            })
+                        }) : undefined,
+                    itemContent: (index)=>{
+                        const row = rows[index];
+                        if (!row) {
+                            return null;
+                        }
+                        return /*#__PURE__*/ _jsx(_Fragment, {
+                            children: row.getVisibleCells().map((cell, i, cells)=>{
                                 const position = {
-                                    row: 0,
+                                    row: index + 1,
                                     column: i
                                 };
-                                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() || defaultColumnWidth,
+                                const cellContext = cell.getContext();
+                                const cellConfig = cellConfigs?.[cellContext.cell.id];
+                                const cellRenderFn = cell.column.columnDef.cell;
+                                const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
+                                /*
+                     IMPORTANT:
+                     If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)
+                     Components have no access to any context (Which is intentional and correct)
+                     We may want to add parameters to a link from neighboring cells in the future as well.
+                     If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)
+                  */ const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
+                                let description = undefined;
+                                if (typeof cellDescriptionDef === 'function') {
+                                    // If the cell description is a function, set the value using
+                                    // 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;
+                                }
+                                /* this has been specifically added for the data link,
+                     therefore, non string and numeric values should be excluded
+                  */ const adjacentCellsValuesMap = Object.entries(row.original)?.filter(([_, value])=>[
+                                        'string',
+                                        'number'
+                                    ].includes(typeof value)).reduce((acc, [key, value])=>({
+                                        ...acc,
+                                        [key]: String(value)
+                                    }), {});
+                                return /*#__PURE__*/ _jsx(TableCell, {
+                                    "data-testid": cell.id,
+                                    title: description || cellConfig?.text || cellContent,
+                                    width: cell.column.getSize() || defaultColumnWidth,
                                     defaultColumnHeight: defaultColumnHeight,
-                                    align: column.columnDef.meta?.align,
-                                    variant: "head",
+                                    align: cell.column.columnDef.meta?.align,
                                     density: density,
-                                    description: column.columnDef.meta?.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);
+                                    isLastColumn: i === cells.length - 1,
+                                    description: description,
+                                    color: cellConfig?.textColor ?? undefined,
+                                    backgroundColor: cellConfig?.backgroundColor ?? undefined,
+                                    dataLink: cell.column.columnDef.meta?.dataLink,
+                                    adjacentCellsValuesMap: adjacentCellsValuesMap,
+                                    children: cellConfig?.text || cellContent
+                                }, cell.id);
                             })
-                        }, headerGroup.id);
-                    })
-                });
-            },
-            fixedFooterContent: pagination ? ()=>/*#__PURE__*/ _jsx(MuiTableRow, {
-                    sx: {
-                        backgroundColor: (theme)=>theme.palette.background.default
-                    },
-                    children: /*#__PURE__*/ _jsx(TablePagination, {
-                        colSpan: columns.length,
-                        count: rowCount,
-                        page: pagination.pageIndex,
-                        rowsPerPage: pagination.pageSize,
-                        onPageChange: handleChangePage,
-                        onRowsPerPageChange: handleChangeRowsPerPage
-                    })
-                }) : undefined,
-            itemContent: (index)=>{
-                const row = rows[index];
-                if (!row) {
-                    return null;
-                }
-                return /*#__PURE__*/ _jsx(_Fragment, {
-                    children: row.getVisibleCells().map((cell, i, cells)=>{
-                        const position = {
-                            row: index + 1,
-                            column: i
-                        };
-                        const cellContext = cell.getContext();
-                        const cellConfig = cellConfigs?.[cellContext.cell.id];
-                        const cellRenderFn = cell.column.columnDef.cell;
-                        const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
-                        /* 
-                   IMPORTANT:
-                   If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)
-                   Components have no access to any context (Which is intentional and correct)
-                   We may want to add parameters to a link from neighboring cells in the future as well.
-                   If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)
-                */ const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
-                        let description = undefined;
-                        if (typeof cellDescriptionDef === 'function') {
-                            // If the cell description is a function, set the value using
-                            // 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;
-                        }
-                        /* this has been specifically added for the data link, 
-                   therefore, non string and numeric values should be excluded
-                */ const adjacentCellsValuesMap = Object.entries(row.original)?.filter(([_, value])=>[
-                                'string',
-                                'number'
-                            ].includes(typeof value)).reduce((acc, [key, value])=>({
-                                ...acc,
-                                [key]: String(value)
-                            }), {});
-                        return /*#__PURE__*/ _jsx(TableCell, {
-                            "data-testid": cell.id,
-                            title: description || cellConfig?.text || cellContent,
-                            width: cell.column.getSize() || defaultColumnWidth,
-                            defaultColumnHeight: defaultColumnHeight,
-                            align: cell.column.columnDef.meta?.align,
-                            density: density,
-                            focusState: getFocusState(position),
-                            onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
-                            isFirstColumn: i === 0,
-                            isLastColumn: i === cells.length - 1,
-                            description: description,
-                            color: cellConfig?.textColor ?? undefined,
-                            backgroundColor: cellConfig?.backgroundColor ?? undefined,
-                            dataLink: cell.column.columnDef.meta?.dataLink,
-                            adjacentCellsValuesMap: adjacentCellsValuesMap,
-                            children: cellConfig?.text || cellContent
-                        }, cell.id);
-                    })
-                });
-            }
+                        });
+                    }
+                })
+            ]
         })
     });
 }

package/dist/Table/VirtualizedTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo, ReactElement } 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 { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { TableFoot } from './TableFoot';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n  Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth' | 'defaultColumnHeight'>\n> &\n  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {\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    cellConfigs?: TableCellConfigs;\n    rowCount: number;\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  defaultColumnWidth,\n  defaultColumnHeight,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  rows,\n  columns,\n  headers,\n  cellConfigs,\n  pagination,\n  onPaginationChange,\n  rowCount,\n}: VirtualizedTableProps<TableData>): ReactElement {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\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\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): ReactElement => {\n        return (\n          <InnerTable\n            {...props}\n            width={width}\n            density={density}\n            onKeyDown={keyboardNav.onTableKeyDown}\n            onBlur={keyboardNav.onTableBlur}\n          />\n        );\n      },\n      TableHead,\n      TableFoot,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }): ReactElement | null => {\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  }, [\n    density,\n    keyboardNav.onTableKeyDown,\n    keyboardNav.onTableBlur,\n    onRowClick,\n    onRowMouseOut,\n    onRowMouseOver,\n    rows,\n    width,\n  ]);\n\n  const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ ...pagination, pageIndex: newPage });\n  };\n\n  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ pageIndex: 0, pageSize: parseInt(event.target.value, 10) });\n  };\n\n  return (\n    <Box style={{ 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() || defaultColumnWidth}\n                          defaultColumnHeight={defaultColumnHeight}\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        fixedFooterContent={\n          pagination\n            ? (): ReactElement => (\n                <MuiTableRow sx={{ backgroundColor: (theme) => theme.palette.background.default }}>\n                  <TablePagination\n                    colSpan={columns.length}\n                    count={rowCount}\n                    page={pagination.pageIndex}\n                    rowsPerPage={pagination.pageSize}\n                    onPageChange={handleChangePage}\n                    onRowsPerPageChange={handleChangeRowsPerPage}\n                  />\n                </MuiTableRow>\n              )\n            : undefined\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                  row: index + 1,\n                  column: i,\n                };\n\n                const cellContext = cell.getContext();\n                const cellConfig = cellConfigs?.[cellContext.cell.id];\n\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;\n\n                /* \n                   IMPORTANT:\n                   If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)\n                   Components have no access to any context (Which is intentional and correct)\n                   We may want to add parameters to a link from neighboring cells in the future as well.\n                   If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)\n                */\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                /* this has been specifically added for the data link, \n                   therefore, non string and numeric values should be excluded\n                */\n                const adjacentCellsValuesMap = Object.entries(row.original as Record<string, unknown>)\n                  ?.filter(([_, value]) => ['string', 'number'].includes(typeof value))\n                  .reduce(\n                    (acc, [key, value]) => ({\n                      ...acc,\n                      [key]: String(value),\n                    }),\n                    {}\n                  );\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    data-testid={cell.id}\n                    title={description || cellConfig?.text || cellContent}\n                    width={cell.column.getSize() || defaultColumnWidth}\n                    defaultColumnHeight={defaultColumnHeight}\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                    color={cellConfig?.textColor ?? undefined}\n                    backgroundColor={cellConfig?.backgroundColor ?? undefined}\n                    dataLink={cell.column.columnDef.meta?.dataLink}\n                    adjacentCellsValuesMap={adjacentCellsValuesMap}\n                  >\n                    {cellConfig?.text || cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TablePagination","TableRow","MuiTableRow","TableVirtuoso","useRef","useMemo","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","TableFoot","VirtualizedTable","width","height","density","defaultColumnWidth","defaultColumnHeight","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","cellConfigs","pagination","onPaginationChange","rowCount","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","onBlur","onTableBlur","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","handleChangePage","_event","newPage","pageIndex","handleChangeRowsPerPage","event","pageSize","parseInt","target","value","style","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","fixedFooterContent","sx","backgroundColor","theme","palette","background","default","colSpan","count","page","rowsPerPage","onPageChange","onRowsPerPageChange","itemContent","getVisibleCells","cell","cells","cellContext","cellConfig","cellRenderFn","cellContent","cellDescriptionDef","cellDescription","adjacentCellsValuesMap","Object","entries","original","filter","_","includes","reduce","acc","key","String","data-testid","title","text","color","textColor","dataLink"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Column, flexRender, HeaderGroup, Row } from '@tanstack/react-table';\nimport { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport { TableComponents, TableVirtuoso, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { ReactElement, useMemo, useRef } from 'react';\nimport { TableToolbar, TableToolbarProps } from './TableToolbar';\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 { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { TableFoot } from './TableFoot';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n  Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth' | 'defaultColumnHeight'>\n> &\n  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {\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    cellConfigs?: TableCellConfigs;\n    rowCount: number;\n    toolbarConfig: Pick<\n      TableToolbarProps<TableData>,\n      | 'isSearchEnabled'\n      | 'globalFilter'\n      | 'onGlobalFilterChange'\n      | 'isColumnFilterEnabled'\n      | 'columns'\n      | 'columnFilterMenuMaxHeight'\n    >;\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  defaultColumnWidth,\n  defaultColumnHeight,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  rows,\n  columns,\n  headers,\n  cellConfigs,\n  pagination,\n  onPaginationChange,\n  rowCount,\n  toolbarConfig,\n}: VirtualizedTableProps<TableData>): ReactElement {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\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\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): ReactElement => {\n        return (\n          <InnerTable\n            {...props}\n            width={width}\n            density={density}\n            onKeyDown={keyboardNav.onTableKeyDown}\n            onBlur={keyboardNav.onTableBlur}\n          />\n        );\n      },\n      TableHead,\n      TableFoot,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }): ReactElement | null => {\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  }, [\n    density,\n    keyboardNav.onTableKeyDown,\n    keyboardNav.onTableBlur,\n    onRowClick,\n    onRowMouseOut,\n    onRowMouseOver,\n    rows,\n    width,\n  ]);\n\n  const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ ...pagination, pageIndex: newPage });\n  };\n\n  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ pageIndex: 0, pageSize: parseInt(event.target.value, 10) });\n  };\n\n  return (\n    <>\n      <Box style={{ width, height, display: 'flex', flexDirection: 'column' }}>\n        <TableToolbar {...toolbarConfig} width={width} />\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() || defaultColumnWidth}\n                            defaultColumnHeight={defaultColumnHeight}\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          fixedFooterContent={\n            pagination\n              ? (): ReactElement => (\n                  <MuiTableRow sx={{ backgroundColor: (theme) => theme.palette.background.default }}>\n                    <TablePagination\n                      colSpan={columns.length}\n                      count={rowCount}\n                      page={pagination.pageIndex}\n                      rowsPerPage={pagination.pageSize}\n                      onPageChange={handleChangePage}\n                      onRowsPerPageChange={handleChangeRowsPerPage}\n                    />\n                  </MuiTableRow>\n                )\n              : undefined\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                    row: index + 1,\n                    column: i,\n                  };\n\n                  const cellContext = cell.getContext();\n                  const cellConfig = cellConfigs?.[cellContext.cell.id];\n\n                  const cellRenderFn = cell.column.columnDef.cell;\n                  const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;\n\n                  /*\n                     IMPORTANT:\n                     If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)\n                     Components have no access to any context (Which is intentional and correct)\n                     We may want to add parameters to a link from neighboring cells in the future as well.\n                     If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)\n                  */\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                  /* this has been specifically added for the data link,\n                     therefore, non string and numeric values should be excluded\n                  */\n                  const adjacentCellsValuesMap = Object.entries(row.original as Record<string, unknown>)\n                    ?.filter(([_, value]) => ['string', 'number'].includes(typeof value))\n                    .reduce(\n                      (acc, [key, value]) => ({\n                        ...acc,\n                        [key]: String(value),\n                      }),\n                      {}\n                    );\n\n                  return (\n                    <TableCell\n                      key={cell.id}\n                      data-testid={cell.id}\n                      title={description || cellConfig?.text || cellContent}\n                      width={cell.column.getSize() || defaultColumnWidth}\n                      defaultColumnHeight={defaultColumnHeight}\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                      color={cellConfig?.textColor ?? undefined}\n                      backgroundColor={cellConfig?.backgroundColor ?? undefined}\n                      dataLink={cell.column.columnDef.meta?.dataLink}\n                      adjacentCellsValuesMap={adjacentCellsValuesMap}\n                    >\n                      {cellConfig?.text || cellContent}\n                    </TableCell>\n                  );\n                })}\n              </>\n            );\n          }}\n        />\n      </Box>\n    </>\n  );\n}\n"],"names":["flexRender","Box","TablePagination","TableRow","MuiTableRow","TableVirtuoso","useMemo","useRef","TableToolbar","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","TableFoot","VirtualizedTable","width","height","density","defaultColumnWidth","defaultColumnHeight","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","cellConfigs","pagination","onPaginationChange","rowCount","toolbarConfig","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","onBlur","onTableBlur","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","handleChangePage","_event","newPage","pageIndex","handleChangeRowsPerPage","event","pageSize","parseInt","target","value","style","display","flexDirection","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","fixedFooterContent","sx","backgroundColor","theme","palette","background","default","colSpan","count","page","rowsPerPage","onPageChange","onRowsPerPageChange","itemContent","getVisibleCells","cell","cells","cellContext","cellConfig","cellRenderFn","cellContent","cellDescriptionDef","cellDescription","adjacentCellsValuesMap","Object","entries","original","filter","_","includes","reduce","acc","key","String","data-testid","title","text","color","textColor","dataLink"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTableContainer.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTableContainer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuC,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGnH,KAAK,8BAA8B,GAAG,sBAAsB,CAAC;AAE7D,eAAO,MAAM,yBAAyB,wIAIrC,CAAC"}
+{"version":3,"file":"VirtualizedTableContainer.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTableContainer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuC,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAInH,KAAK,8BAA8B,GAAG,sBAAsB,CAAC;AAE7D,eAAO,MAAM,yBAAyB,wIAIrC,CAAC"}

package/dist/Table/VirtualizedTableContainer.js

@@ -13,11 +13,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TableContainer as MuiTableContainer } from '@mui/material';
 import { forwardRef } from 'react';
+import { combineSx } from '../utils/combine-sx';
 export const VirtualizedTableContainer = /*#__PURE__*/ forwardRef(function VirtualizedTableContainer(props, ref) {
     return /*#__PURE__*/ _jsx(MuiTableContainer, {
         ...props,
         tabIndex: -1,
-        ref: ref
+        ref: ref,
+        sx: combineSx({
+            flexGrow: 1
+        }, props.sx)
     });
 });
 

package/dist/Table/VirtualizedTableContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/VirtualizedTableContainer.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableContainer as MuiTableContainer, TableContainerProps as MuiTableContainerProps } from '@mui/material';\nimport { forwardRef } from 'react';\n\ntype VirtualizedTableContainerProps = MuiTableContainerProps;\n\nexport const VirtualizedTableContainer = forwardRef<HTMLDivElement, VirtualizedTableContainerProps>(\n  function VirtualizedTableContainer(props, ref) {\n    return <MuiTableContainer {...props} tabIndex={-1} ref={ref} />;\n  }\n);\n"],"names":["TableContainer","MuiTableContainer","forwardRef","VirtualizedTableContainer","props","ref","tabIndex"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,kBAAkBC,iBAAiB,QAAuD,gBAAgB;AACnH,SAASC,UAAU,QAAQ,QAAQ;AAInC,OAAO,MAAMC,0CAA4BD,WACvC,SAASC,0BAA0BC,KAAK,EAAEC,GAAG;IAC3C,qBAAO,KAACJ;QAAmB,GAAGG,KAAK;QAAEE,UAAU,CAAC;QAAGD,KAAKA;;AAC1D,GACA"}
+{"version":3,"sources":["../../src/Table/VirtualizedTableContainer.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableContainer as MuiTableContainer, TableContainerProps as MuiTableContainerProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { combineSx } from '../utils/combine-sx';\n\ntype VirtualizedTableContainerProps = MuiTableContainerProps;\n\nexport const VirtualizedTableContainer = forwardRef<HTMLDivElement, VirtualizedTableContainerProps>(\n  function VirtualizedTableContainer(props, ref) {\n    return <MuiTableContainer {...props} tabIndex={-1} ref={ref} sx={combineSx({ flexGrow: 1 }, props.sx)} />;\n  }\n);\n"],"names":["TableContainer","MuiTableContainer","forwardRef","combineSx","VirtualizedTableContainer","props","ref","tabIndex","sx","flexGrow"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,kBAAkBC,iBAAiB,QAAuD,gBAAgB;AACnH,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAASC,SAAS,QAAQ,sBAAsB;AAIhD,OAAO,MAAMC,0CAA4BF,WACvC,SAASE,0BAA0BC,KAAK,EAAEC,GAAG;IAC3C,qBAAO,KAACL;QAAmB,GAAGI,KAAK;QAAEE,UAAU,CAAC;QAAGD,KAAKA;QAAKE,IAAIL,UAAU;YAAEM,UAAU;QAAE,GAAGJ,MAAMG,EAAE;;AACtG,GACA"}

package/dist/Table/hooks/useFuzzySearch.d.ts

@@ -0,0 +1,12 @@
+import { OnChangeFn, TableOptions } from '@tanstack/react-table';
+export interface UseFuzzySearchResult<TableData> {
+    globalFilter: string;
+    setGlobalFilter: OnChangeFn<string>;
+    fuzzySearchOptions: Pick<TableOptions<TableData>, 'filterFns' | 'globalFilterFn' | 'getFilteredRowModel' | 'filterFromLeafRows' | 'onGlobalFilterChange'>;
+}
+/**
+ * Returns fuzzy search state and the corresponding `useReactTable` options.
+ * Filter options are disabled when `showSearch` is falsy.
+ */
+export declare function useFuzzySearch<TableData>(isSearchEnabled: boolean | undefined): UseFuzzySearchResult<TableData>;
+//# sourceMappingURL=useFuzzySearch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFuzzySearch.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useFuzzySearch.ts"],"names":[],"mappings":"AAaA,OAAO,EAAiC,UAAU,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAUhG,MAAM,WAAW,oBAAoB,CAAC,SAAS;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACpC,kBAAkB,EAAE,IAAI,CACtB,YAAY,CAAC,SAAS,CAAC,EACvB,WAAW,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,oBAAoB,GAAG,sBAAsB,CACvG,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAc/G"}