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

package/dist/Table/VirtualizedTable.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-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.
@@ -10,7 +11,6 @@
 // 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 { flexRender } from '@tanstack/react-table';
 import { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';
 import { TableVirtuoso } from 'react-virtuoso';
@@ -28,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, toolbarConfig }) {
+export function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, columnSizing, columnSizingInfo, 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
@@ -116,140 +116,163 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, d
             pageSize: parseInt(event.target.value, 10)
         });
     };
-    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: 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;
-                                /*
+    /**
+   * Instead of calling `column.getSize()` on every render for every header
+   * and especially every data cell (very expensive),
+   * we will calculate all column sizes at once at the root table level in a useMemo
+   * and pass the column sizes down as CSS variables to the <table> element.
+   */ const columnSizeVars = useMemo(()=>{
+        const colSizes = {};
+        headers.forEach((headerGroup)=>{
+            headerGroup.headers.filter((header)=>header.column.getCanResize()).forEach((header)=>{
+                colSizes[`--header-${header.id}-size`] = header.getSize();
+                colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+            });
+        });
+        return colSizes;
+    // We want to recalculate column sizes whenever column sizes or column resizing info changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        columnSizingInfo,
+        columnSizing,
+        headers
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, {
+        style: {
+            width,
+            height,
+            ...columnSizeVars
+        },
+        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: header.column.getCanResize() ? `calc(var(--header-${header?.id}-size) * 1px)` : 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,
+                                        resizeConfig: header.column.getCanResize() ? {
+                                            resizeHandler: header.getResizeHandler(),
+                                            resetSizeHandler: header.column.resetSize,
+                                            isResizing: header.column.getIsResizing()
+                                        } : undefined,
+                                        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: 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,
+                            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);
-                            })
-                        });
-                    }
-                })
-            ]
-        })
+                                    '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.getCanResize() ? `calc(var(--col-${cell.column.id}-size) * 1px)` : 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, 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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"}
+{"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, ColumnSizingInfoState, ColumnSizingState, 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' | 'defaultColumnHeight' | 'defaultColumnWidth'>\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    columnSizing: ColumnSizingState;\n    columnSizingInfo: ColumnSizingInfoState;\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      | 'isExpandAllEnabled'\n      | 'isAllExpanded'\n      | 'onExpandAllChange'\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  columnSizing,\n  columnSizingInfo,\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  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we will calculate all column sizes at once at the root table level in a useMemo\n   * and pass the column sizes down as CSS variables to the <table> element.\n   */\n  const columnSizeVars = useMemo(() => {\n    const colSizes: { [key: string]: number } = {};\n    headers.forEach((headerGroup) => {\n      headerGroup.headers\n        .filter((header) => header.column.getCanResize())\n        .forEach((header) => {\n          colSizes[`--header-${header.id}-size`] = header.getSize();\n          colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n        });\n    });\n    return colSizes;\n    // We want to recalculate column sizes whenever column sizes or column resizing info changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [columnSizingInfo, columnSizing, headers]);\n\n  return (\n    <Box style={{ width, height, ...columnSizeVars }}>\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={\n                            header.column.getCanResize()\n                              ? `calc(var(--header-${header?.id}-size) * 1px)`\n                              : column.getSize() || defaultColumnWidth\n                          }\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                          resizeConfig={\n                            header.column.getCanResize()\n                              ? {\n                                  resizeHandler: header.getResizeHandler(),\n                                  resetSizeHandler: header.column.resetSize,\n                                  isResizing: header.column.getIsResizing(),\n                                }\n                              : undefined\n                          }\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={\n                      cell.column.getCanResize()\n                        ? `calc(var(--col-${cell.column.id}-size) * 1px)`\n                        : cell.column.getSize() || defaultColumnWidth\n                    }\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","useMemo","useRef","TableToolbar","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","TableFoot","VirtualizedTable","width","height","density","defaultColumnWidth","defaultColumnHeight","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","columnSizing","columnSizingInfo","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","columnSizeVars","colSizes","forEach","headerGroup","filter","header","getCanResize","getSize","style","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","resizeConfig","resizeHandler","getResizeHandler","resetSizeHandler","resetSize","isResizing","getIsResizing","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","_","includes","reduce","acc","key","String","data-testid","title","text","color","textColor","dataLink"],"mappings":"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"}

package/dist/Table/VirtualizedTableContainer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-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.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { TableContainer as MuiTableContainer } from '@mui/material';
 import { forwardRef } from 'react';
 import { combineSx } from '../utils/combine-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';\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"}
+{"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

@@ -1,12 +1,14 @@
-import { OnChangeFn, TableOptions } from '@tanstack/react-table';
+import { ExpandedState, TableOptions } from '@tanstack/react-table';
+import { SetStateAction } from 'react';
+import { FuzzyMatchThreshold } from '@perses-dev/components';
 export interface UseFuzzySearchResult<TableData> {
     globalFilter: string;
-    setGlobalFilter: OnChangeFn<string>;
+    setGlobalFilter: (value: string) => void;
     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>;
+export declare function useFuzzySearch<TableData>(isSearchEnabled: boolean | undefined, threshold: FuzzyMatchThreshold, expanded: ExpandedState, setExpanded: (value: SetStateAction<ExpandedState>) => void): UseFuzzySearchResult<TableData>;
 //# sourceMappingURL=useFuzzySearch.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"useFuzzySearch.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useFuzzySearch.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAiC,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEnG,OAAO,EAAE,cAAc,EAAyB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAU7D,MAAM,WAAW,oBAAoB,CAAC,SAAS;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,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,EACtC,eAAe,EAAE,OAAO,GAAG,SAAS,EACpC,SAAS,EAAE,mBAAmB,EAC9B,QAAQ,EAAE,aAAa,EACvB,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,aAAa,CAAC,KAAK,IAAI,GAC1D,oBAAoB,CAAC,SAAS,CAAC,CA8BjC"}

package/dist/Table/hooks/useFuzzySearch.js

@@ -11,31 +11,50 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { getFilteredRowModel } from '@tanstack/react-table';
-import { rankItem } from '@tanstack/match-sorter-utils';
-import { useState } from 'react';
-const fuzzyFilter = (row, columnId, value, addMeta)=>{
-    const itemRank = rankItem(row.getValue(columnId), value);
-    addMeta({
-        itemRank
-    });
-    return itemRank.passed;
-};
+import { rankings, rankItem } from '@tanstack/match-sorter-utils';
+import { useCallback, useState } from 'react';
+const getFuzzyFilterFunction = (threshold)=>(row, columnId, value, addMeta)=>{
+        const itemRank = rankItem(row.getValue(columnId), value, {
+            threshold: rankings[threshold]
+        });
+        addMeta({
+            itemRank
+        });
+        return itemRank.passed;
+    };
 /**
  * Returns fuzzy search state and the corresponding `useReactTable` options.
  * Filter options are disabled when `showSearch` is falsy.
- */ export function useFuzzySearch(isSearchEnabled) {
+ */ export function useFuzzySearch(isSearchEnabled, threshold, expanded, setExpanded) {
     const [globalFilter, setGlobalFilter] = useState('');
+    const [prevExpandedState, setPrevExpandedState] = useState(expanded);
+    // expand all rows when a search query is entered, and restore previous expansion state when the query is cleared
+    const handleGlobalFilterChange = useCallback((value)=>{
+        setGlobalFilter((prev)=>{
+            if (!prev) {
+                setPrevExpandedState(expanded);
+                setExpanded(true);
+            } else if (prev && !value) {
+                setExpanded(prevExpandedState);
+            }
+            return value;
+        });
+    }, [
+        expanded,
+        prevExpandedState,
+        setExpanded
+    ]);
     return {
         globalFilter,
-        setGlobalFilter,
+        setGlobalFilter: handleGlobalFilterChange,
         fuzzySearchOptions: {
             filterFns: {
-                fuzzy: fuzzyFilter
+                fuzzy: getFuzzyFilterFunction(threshold)
             },
             globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,
             getFilteredRowModel: isSearchEnabled ? getFilteredRowModel() : undefined,
             filterFromLeafRows: isSearchEnabled,
-            onGlobalFilterChange: setGlobalFilter
+            onGlobalFilterChange: handleGlobalFilterChange
         }
     };
 }

package/dist/Table/hooks/useFuzzySearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/hooks/useFuzzySearch.ts"],"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 { FilterFn, getFilteredRowModel, OnChangeFn, TableOptions } from '@tanstack/react-table';\nimport { rankItem } from '@tanstack/match-sorter-utils';\nimport { useState } from 'react';\n\nconst fuzzyFilter: FilterFn<unknown> = (row, columnId, value, addMeta) => {\n  const itemRank = rankItem(row.getValue(columnId), value);\n  addMeta({ itemRank });\n  return itemRank.passed;\n};\n\nexport interface UseFuzzySearchResult<TableData> {\n  globalFilter: string;\n  setGlobalFilter: OnChangeFn<string>;\n  fuzzySearchOptions: Pick<\n    TableOptions<TableData>,\n    'filterFns' | 'globalFilterFn' | 'getFilteredRowModel' | 'filterFromLeafRows' | 'onGlobalFilterChange'\n  >;\n}\n\n/**\n * Returns fuzzy search state and the corresponding `useReactTable` options.\n * Filter options are disabled when `showSearch` is falsy.\n */\nexport function useFuzzySearch<TableData>(isSearchEnabled: boolean | undefined): UseFuzzySearchResult<TableData> {\n  const [globalFilter, setGlobalFilter] = useState('');\n\n  return {\n    globalFilter,\n    setGlobalFilter,\n    fuzzySearchOptions: {\n      filterFns: { fuzzy: fuzzyFilter },\n      globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,\n      getFilteredRowModel: isSearchEnabled ? getFilteredRowModel() : undefined,\n      filterFromLeafRows: isSearchEnabled,\n      onGlobalFilterChange: setGlobalFilter,\n    },\n  };\n}\n"],"names":["getFilteredRowModel","rankItem","useState","fuzzyFilter","row","columnId","value","addMeta","itemRank","getValue","passed","useFuzzySearch","isSearchEnabled","globalFilter","setGlobalFilter","fuzzySearchOptions","filterFns","fuzzy","globalFilterFn","undefined","filterFromLeafRows","onGlobalFilterChange"],"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,SAAmBA,mBAAmB,QAAkC,wBAAwB;AAChG,SAASC,QAAQ,QAAQ,+BAA+B;AACxD,SAASC,QAAQ,QAAQ,QAAQ;AAEjC,MAAMC,cAAiC,CAACC,KAAKC,UAAUC,OAAOC;IAC5D,MAAMC,WAAWP,SAASG,IAAIK,QAAQ,CAACJ,WAAWC;IAClDC,QAAQ;QAAEC;IAAS;IACnB,OAAOA,SAASE,MAAM;AACxB;AAWA;;;CAGC,GACD,OAAO,SAASC,eAA0BC,eAAoC;IAC5E,MAAM,CAACC,cAAcC,gBAAgB,GAAGZ,SAAS;IAEjD,OAAO;QACLW;QACAC;QACAC,oBAAoB;YAClBC,WAAW;gBAAEC,OAAOd;YAAY;YAChCe,gBAAgBN,kBAAkB,UAAUO;YAC5CnB,qBAAqBY,kBAAkBZ,wBAAwBmB;YAC/DC,oBAAoBR;YACpBS,sBAAsBP;QACxB;IACF;AACF"}
+{"version":3,"sources":["../../../src/Table/hooks/useFuzzySearch.ts"],"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 { ExpandedState, FilterFn, getFilteredRowModel, TableOptions } from '@tanstack/react-table';\nimport { rankings, rankItem } from '@tanstack/match-sorter-utils';\nimport { SetStateAction, useCallback, useState } from 'react';\nimport { FuzzyMatchThreshold } from '@perses-dev/components';\n\nconst getFuzzyFilterFunction =\n  (threshold: FuzzyMatchThreshold): FilterFn<unknown> =>\n  (row, columnId, value, addMeta) => {\n    const itemRank = rankItem(row.getValue(columnId), value, { threshold: rankings[threshold] });\n    addMeta({ itemRank });\n    return itemRank.passed;\n  };\n\nexport interface UseFuzzySearchResult<TableData> {\n  globalFilter: string;\n  setGlobalFilter: (value: string) => void;\n  fuzzySearchOptions: Pick<\n    TableOptions<TableData>,\n    'filterFns' | 'globalFilterFn' | 'getFilteredRowModel' | 'filterFromLeafRows' | 'onGlobalFilterChange'\n  >;\n}\n\n/**\n * Returns fuzzy search state and the corresponding `useReactTable` options.\n * Filter options are disabled when `showSearch` is falsy.\n */\nexport function useFuzzySearch<TableData>(\n  isSearchEnabled: boolean | undefined,\n  threshold: FuzzyMatchThreshold,\n  expanded: ExpandedState,\n  setExpanded: (value: SetStateAction<ExpandedState>) => void\n): UseFuzzySearchResult<TableData> {\n  const [globalFilter, setGlobalFilter] = useState('');\n  const [prevExpandedState, setPrevExpandedState] = useState<ExpandedState>(expanded);\n\n  // expand all rows when a search query is entered, and restore previous expansion state when the query is cleared\n  const handleGlobalFilterChange = useCallback(\n    (value: string): void => {\n      setGlobalFilter((prev) => {\n        if (!prev) {\n          setPrevExpandedState(expanded);\n          setExpanded(true);\n        } else if (prev && !value) {\n          setExpanded(prevExpandedState);\n        }\n        return value;\n      });\n    },\n    [expanded, prevExpandedState, setExpanded]\n  );\n  return {\n    globalFilter,\n    setGlobalFilter: handleGlobalFilterChange,\n    fuzzySearchOptions: {\n      filterFns: { fuzzy: getFuzzyFilterFunction(threshold) },\n      globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,\n      getFilteredRowModel: isSearchEnabled ? getFilteredRowModel() : undefined,\n      filterFromLeafRows: isSearchEnabled,\n      onGlobalFilterChange: handleGlobalFilterChange,\n    },\n  };\n}\n"],"names":["getFilteredRowModel","rankings","rankItem","useCallback","useState","getFuzzyFilterFunction","threshold","row","columnId","value","addMeta","itemRank","getValue","passed","useFuzzySearch","isSearchEnabled","expanded","setExpanded","globalFilter","setGlobalFilter","prevExpandedState","setPrevExpandedState","handleGlobalFilterChange","prev","fuzzySearchOptions","filterFns","fuzzy","globalFilterFn","undefined","filterFromLeafRows","onGlobalFilterChange"],"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,SAAkCA,mBAAmB,QAAsB,wBAAwB;AACnG,SAASC,QAAQ,EAAEC,QAAQ,QAAQ,+BAA+B;AAClE,SAAyBC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAG9D,MAAMC,yBACJ,CAACC,YACD,CAACC,KAAKC,UAAUC,OAAOC;QACrB,MAAMC,WAAWT,SAASK,IAAIK,QAAQ,CAACJ,WAAWC,OAAO;YAAEH,WAAWL,QAAQ,CAACK,UAAU;QAAC;QAC1FI,QAAQ;YAAEC;QAAS;QACnB,OAAOA,SAASE,MAAM;IACxB;AAWF;;;CAGC,GACD,OAAO,SAASC,eACdC,eAAoC,EACpCT,SAA8B,EAC9BU,QAAuB,EACvBC,WAA2D;IAE3D,MAAM,CAACC,cAAcC,gBAAgB,GAAGf,SAAS;IACjD,MAAM,CAACgB,mBAAmBC,qBAAqB,GAAGjB,SAAwBY;IAE1E,iHAAiH;IACjH,MAAMM,2BAA2BnB,YAC/B,CAACM;QACCU,gBAAgB,CAACI;YACf,IAAI,CAACA,MAAM;gBACTF,qBAAqBL;gBACrBC,YAAY;YACd,OAAO,IAAIM,QAAQ,CAACd,OAAO;gBACzBQ,YAAYG;YACd;YACA,OAAOX;QACT;IACF,GACA;QAACO;QAAUI;QAAmBH;KAAY;IAE5C,OAAO;QACLC;QACAC,iBAAiBG;QACjBE,oBAAoB;YAClBC,WAAW;gBAAEC,OAAOrB,uBAAuBC;YAAW;YACtDqB,gBAAgBZ,kBAAkB,UAAUa;YAC5C5B,qBAAqBe,kBAAkBf,wBAAwB4B;YAC/DC,oBAAoBd;YACpBe,sBAAsBR;QACxB;IACF;AACF"}