@perses-dev/components 0.55.0 → 0.56.0-beta.0

package/dist/Table/TableToolbar.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // 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.
@@ -12,128 +13,199 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Checkbox, IconButton, InputAdornment, ListItemText, Menu, MenuItem, Stack, Tooltip } from "@mui/material";
+import { Subscribe } from "@tanstack/react-table";
 import Close from "mdi-material-ui/Close";
 import Magnify from "mdi-material-ui/Magnify";
 import UnfoldLess from "mdi-material-ui/UnfoldLessHorizontal";
 import UnfoldMore from "mdi-material-ui/UnfoldMoreHorizontal";
 import ViewColumn from "mdi-material-ui/ViewColumn";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { TextField } from "../controls/index.js";
-export function TableToolbar({ isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight = 400, isExpandAllEnabled, isAllExpanded, onExpandAllChange }) {
-    'use no memo'; // TanStack Table columns retain their identity when visibility changes.
+export function TableToolbar(t0) {
+    const $ = _c(24);
+    const { isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight: t1, isExpandAllEnabled, isAllExpanded, onExpandAllChange } = t0;
+    const columnFilterMenuMaxHeight = t1 === undefined ? 400 : t1;
     const [colMenuAnchor, setColMenuAnchor] = useState(null);
     const colMenuOpen = Boolean(colMenuAnchor);
     const [searchResetKey, setSearchResetKey] = useState(0);
-    const handleSearchClear = useCallback(()=>{
-        onGlobalFilterChange('');
-        setSearchResetKey((prev)=>prev + 1);
-    }, [
-        onGlobalFilterChange
-    ]);
+    let t2;
+    if ($[0] !== onGlobalFilterChange) {
+        t2 = ()=>{
+            onGlobalFilterChange("");
+            setSearchResetKey(_temp);
+        };
+        $[0] = onGlobalFilterChange;
+        $[1] = t2;
+    } else {
+        t2 = $[1];
+    }
+    const handleSearchClear = t2;
     if (!isSearchEnabled && !isColumnFilterEnabled && !isExpandAllEnabled) {
         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, {
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = {
+            backgroundColor: _temp2
+        };
+        $[2] = t3;
+    } else {
+        t3 = $[2];
+    }
+    let t4;
+    if ($[3] !== globalFilter || $[4] !== handleSearchClear || $[5] !== isSearchEnabled || $[6] !== onGlobalFilterChange || $[7] !== searchResetKey) {
+        t4 = 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"
                             })
-                        }),
-                        endAdornment: globalFilter !== '' && /*#__PURE__*/ _jsx(InputAdornment, {
-                            position: "end",
-                            children: /*#__PURE__*/ _jsx(IconButton, {
-                                onClick: handleSearchClear,
-                                children: /*#__PURE__*/ _jsx(Close, {
-                                    fontSize: "small"
-                                })
-                            })
                         })
-                    }
-                },
-                sx: {
-                    flexGrow: 1
+                    })
                 }
-            }, searchResetKey),
-            isExpandAllEnabled && /*#__PURE__*/ _jsx(Tooltip, {
-                title: isAllExpanded ? 'Collapse all' : 'Expand all',
-                children: /*#__PURE__*/ _jsx(IconButton, {
-                    onClick: onExpandAllChange,
+            },
+            sx: {
+                flexGrow: 1
+            }
+        }, searchResetKey);
+        $[3] = globalFilter;
+        $[4] = handleSearchClear;
+        $[5] = isSearchEnabled;
+        $[6] = onGlobalFilterChange;
+        $[7] = searchResetKey;
+        $[8] = t4;
+    } else {
+        t4 = $[8];
+    }
+    let t5;
+    if ($[9] !== isAllExpanded || $[10] !== isExpandAllEnabled || $[11] !== onExpandAllChange) {
+        t5 = isExpandAllEnabled && /*#__PURE__*/ _jsx(Tooltip, {
+            title: isAllExpanded ? "Collapse all" : "Expand all",
+            children: /*#__PURE__*/ _jsx(IconButton, {
+                onClick: onExpandAllChange,
+                color: "info",
+                "aria-label": isAllExpanded ? "collapse all rows" : "expand all rows",
+                children: isAllExpanded ? /*#__PURE__*/ _jsx(UnfoldLess, {}) : /*#__PURE__*/ _jsx(UnfoldMore, {})
+            })
+        });
+        $[9] = isAllExpanded;
+        $[10] = isExpandAllEnabled;
+        $[11] = onExpandAllChange;
+        $[12] = t5;
+    } else {
+        t5 = $[12];
+    }
+    let t6;
+    if ($[13] !== colMenuAnchor || $[14] !== colMenuOpen || $[15] !== columnFilterMenuMaxHeight || $[16] !== columns || $[17] !== isColumnFilterEnabled) {
+        t6 = isColumnFilterEnabled && /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(IconButton, {
+                    onClick: (e)=>setColMenuAnchor(e.currentTarget),
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": colMenuOpen,
                     color: "info",
-                    "aria-label": isAllExpanded ? 'collapse all rows' : 'expand all rows',
-                    children: isAllExpanded ? /*#__PURE__*/ _jsx(UnfoldLess, {}) : /*#__PURE__*/ _jsx(UnfoldMore, {})
+                    children: /*#__PURE__*/ _jsx(ViewColumn, {})
+                }),
+                /*#__PURE__*/ _jsx(Menu, {
+                    anchorEl: colMenuAnchor,
+                    open: colMenuOpen,
+                    onClose: ()=>setColMenuAnchor(null),
+                    slotProps: {
+                        list: {
+                            dense: true
+                        }
+                    },
+                    sx: {
+                        maxHeight: columnFilterMenuMaxHeight
+                    },
+                    children: columns.map(_temp3)
                 })
-            }),
-            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
-                            }
-                        },
+            ]
+        });
+        $[13] = colMenuAnchor;
+        $[14] = colMenuOpen;
+        $[15] = columnFilterMenuMaxHeight;
+        $[16] = columns;
+        $[17] = isColumnFilterEnabled;
+        $[18] = t6;
+    } else {
+        t6 = $[18];
+    }
+    let t7;
+    if ($[19] !== t4 || $[20] !== t5 || $[21] !== t6 || $[22] !== width) {
+        t7 = /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            gap: 1,
+            alignItems: "center",
+            justifyContent: "flex-end",
+            width: width,
+            padding: "0.5rem",
+            sx: t3,
+            children: [
+                t4,
+                t5,
+                t6
+            ]
+        });
+        $[19] = t4;
+        $[20] = t5;
+        $[21] = t6;
+        $[22] = width;
+        $[23] = t7;
+    } else {
+        t7 = $[23];
+    }
+    return t7;
+}
+function _temp3(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(Subscribe, {
+                source: column.table.atoms.columnVisibility,
+                children: ()=>/*#__PURE__*/ _jsx(Checkbox, {
+                        checked: column.getIsVisible(),
+                        disabled: !column.getCanHide(),
+                        size: "small",
+                        disableRipple: 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);
-                        })
+                            p: 0,
+                            mr: 1
+                        }
                     })
-                ]
+            }),
+            /*#__PURE__*/ _jsx(ListItemText, {
+                primary: label
             })
         ]
-    });
+    }, column.id);
+}
+function _temp2(theme) {
+    return theme.palette.background.default;
+}
+function _temp(prev) {
+    return prev + 1;
 }
 
 //# sourceMappingURL=TableToolbar.js.map

package/dist/Table/TableToolbar.js.map

@@ -1 +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, Tooltip } from '@mui/material';\nimport type { Column } from '@tanstack/react-table';\nimport Close from 'mdi-material-ui/Close';\nimport Magnify from 'mdi-material-ui/Magnify';\nimport UnfoldLess from 'mdi-material-ui/UnfoldLessHorizontal';\nimport UnfoldMore from 'mdi-material-ui/UnfoldMoreHorizontal';\nimport ViewColumn from 'mdi-material-ui/ViewColumn';\nimport type { ReactElement } from 'react';\nimport { useCallback, useState } from 'react';\n\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  /**\n   * When `true`, an \"Expand All\" / \"Collapse All\" toggle button is rendered.\n   */\n  isExpandAllEnabled?: boolean;\n\n  /**\n   * Whether all rows are currently expanded.\n   */\n  isAllExpanded?: boolean;\n\n  /**\n   * Callback to toggle expand/collapse all rows.\n   */\n  onExpandAllChange?: (event: unknown) => void;\n}\n\nexport function TableToolbar<TableData>({\n  isSearchEnabled,\n  globalFilter,\n  onGlobalFilterChange,\n  isColumnFilterEnabled,\n  columns,\n  width,\n  columnFilterMenuMaxHeight = 400,\n  isExpandAllEnabled,\n  isAllExpanded,\n  onExpandAllChange,\n}: TableToolbarProps<TableData>): ReactElement | null {\n  'use no memo'; // TanStack Table columns retain their identity when visibility changes.\n\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 && !isExpandAllEnabled) {\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      {isExpandAllEnabled && (\n        <Tooltip title={isAllExpanded ? 'Collapse all' : 'Expand all'}>\n          <IconButton\n            onClick={onExpandAllChange}\n            color=\"info\"\n            aria-label={isAllExpanded ? 'collapse all rows' : 'expand all rows'}\n          >\n            {isAllExpanded ? <UnfoldLess /> : <UnfoldMore />}\n          </IconButton>\n        </Tooltip>\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","Tooltip","Close","Magnify","UnfoldLess","UnfoldMore","ViewColumn","useCallback","useState","TextField","TableToolbar","isSearchEnabled","globalFilter","onGlobalFilterChange","isColumnFilterEnabled","columns","width","columnFilterMenuMaxHeight","isExpandAllEnabled","isAllExpanded","onExpandAllChange","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","title","color","aria-label","e","currentTarget","aria-haspopup","aria-expanded","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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"}
+{"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, Tooltip } from '@mui/material';\nimport type { Column, RowData } from '@tanstack/react-table';\nimport { Subscribe } from '@tanstack/react-table';\nimport Close from 'mdi-material-ui/Close';\nimport Magnify from 'mdi-material-ui/Magnify';\nimport UnfoldLess from 'mdi-material-ui/UnfoldLessHorizontal';\nimport UnfoldMore from 'mdi-material-ui/UnfoldMoreHorizontal';\nimport ViewColumn from 'mdi-material-ui/ViewColumn';\nimport type { ReactElement } from 'react';\nimport { useCallback, useState } from 'react';\n\nimport { TextField } from '../controls';\nimport type { TableFeatures } from './model/table-model';\n\nexport interface TableToolbarProps<TableData extends RowData> {\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<TableFeatures, 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  /**\n   * When `true`, an \"Expand All\" / \"Collapse All\" toggle button is rendered.\n   */\n  isExpandAllEnabled?: boolean;\n\n  /**\n   * Whether all rows are currently expanded.\n   */\n  isAllExpanded?: boolean;\n\n  /**\n   * Callback to toggle expand/collapse all rows.\n   */\n  onExpandAllChange?: (event: unknown) => void;\n}\n\nexport function TableToolbar<TableData extends RowData>({\n  isSearchEnabled,\n  globalFilter,\n  onGlobalFilterChange,\n  isColumnFilterEnabled,\n  columns,\n  width,\n  columnFilterMenuMaxHeight = 400,\n  isExpandAllEnabled,\n  isAllExpanded,\n  onExpandAllChange,\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 && !isExpandAllEnabled) {\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      {isExpandAllEnabled && (\n        <Tooltip title={isAllExpanded ? 'Collapse all' : 'Expand all'}>\n          <IconButton\n            onClick={onExpandAllChange}\n            color=\"info\"\n            aria-label={isAllExpanded ? 'collapse all rows' : 'expand all rows'}\n          >\n            {isAllExpanded ? <UnfoldLess /> : <UnfoldMore />}\n          </IconButton>\n        </Tooltip>\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                  {/* Columns keep their identity when visibility changes, so subscribe to it explicitly. */}\n                  <Subscribe source={column.table.atoms.columnVisibility}>\n                    {() => (\n                      <Checkbox\n                        checked={column.getIsVisible()}\n                        disabled={!column.getCanHide()}\n                        size=\"small\"\n                        disableRipple\n                        sx={{ p: 0, mr: 1 }}\n                      />\n                    )}\n                  </Subscribe>\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","Tooltip","Subscribe","Close","Magnify","UnfoldLess","UnfoldMore","ViewColumn","useState","TextField"],"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,QAAQ,EAAEC,UAAU,EAAEC,cAAc,EAAEC,YAAY,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,QAAQ,gBAAgB;AAEnH,SAASC,SAAS,QAAQ,wBAAwB;AAClD,OAAOC,WAAW,wBAAwB;AAC1C,OAAOC,aAAa,0BAA0B;AAC9C,OAAOC,gBAAgB,uCAAuC;AAC9D,OAAOC,gBAAgB,uCAAuC;AAC9D,OAAOC,gBAAgB,6BAA6B;AAEpD,SAAsBC,QAAQ,QAAQ,QAAQ;AAE9C,SAASC,SAAS,QAAQ,uBAAc;AAsDxC,OAAO"}

package/dist/Table/VirtualizedTable.d.ts

@@ -1,17 +1,17 @@
-import type { Column, ColumnSizingInfoState, ColumnSizingState, HeaderGroup, Row } from '@tanstack/react-table';
+import type { ReactTable, Row, RowData } from '@tanstack/react-table';
 import type { ReactElement } from 'react';
-import type { TableCellConfigs, TableProps } from './model/table-model';
+import type { TableCellConfigs, TableFeatures, TableProps } from './model/table-model';
 import type { TableToolbarProps } from './TableToolbar';
-export type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnHeight' | 'defaultColumnWidth'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {
-    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;
-    rows: Array<Row<TableData>>;
-    columns: Array<Column<TableData, unknown>>;
-    headers: Array<HeaderGroup<TableData>>;
-    columnSizing: ColumnSizingState;
-    columnSizingInfo: ColumnSizingInfoState;
+export type VirtualizedTableProps<TableData extends RowData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnHeight' | 'defaultColumnWidth'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {
+    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, row: Row<TableFeatures, TableData>) => void;
+    /**
+     * The value returned by `useTable`. Its identity changes whenever table
+     * state or options change, unlike the row, column, and header objects it
+     * returns, which keep their identities across state changes.
+     */
+    table: ReactTable<TableFeatures, TableData>;
     cellConfigs?: TableCellConfigs;
-    rowCount: number;
     toolbarConfig: Pick<TableToolbarProps<TableData>, 'isSearchEnabled' | 'globalFilter' | 'onGlobalFilterChange' | 'isColumnFilterEnabled' | 'columns' | 'columnFilterMenuMaxHeight' | 'isExpandAllEnabled' | 'isAllExpanded' | 'onExpandAllChange'>;
 };
-export declare function VirtualizedTable<TableData>({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig, }: VirtualizedTableProps<TableData>): ReactElement;
+export declare function VirtualizedTable<TableData extends RowData>({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, table, cellConfigs, pagination, onPaginationChange, 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":"AAcA,OAAO,KAAK,EAAE,MAAM,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEhH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQ3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AASxD,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,qBAAqB,GAAG,oBAAoB,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,YAAY,EAAE,iBAAiB,CAAC;IAChC,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,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,GAC3B,oBAAoB,GACpB,eAAe,GACf,mBAAmB,CACtB,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,CAyRjD"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQ1G,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AASxD,MAAM,MAAM,qBAAqB,CAAC,SAAS,SAAS,OAAO,IAAI,QAAQ,CACrE,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,qBAAqB,GAAG,oBAAoB,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,GAAG,EAAE,GAAG,CAAC,aAAa,EAAE,SAAS,CAAC,KAAK,IAAI,CAAC;IAC1G;;;;OAIG;IACH,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;IAC5C,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,aAAa,EAAE,IAAI,CACjB,iBAAiB,CAAC,SAAS,CAAC,EAC1B,iBAAiB,GACjB,cAAc,GACd,sBAAsB,GACtB,uBAAuB,GACvB,SAAS,GACT,2BAA2B,GAC3B,oBAAoB,GACpB,eAAe,GACf,mBAAmB,CACtB,CAAC;CACH,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,SAAS,OAAO,EAAE,EAC1D,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,KAAK,EACL,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,aAAa,GACd,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CA8RjD"}