@perses-dev/components 0.55.1 → 0.56.0-beta.1

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 { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport type { Column, ColumnSizingInfoState, ColumnSizingState, HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport type { ReactElement } from 'react';\nimport { forwardRef, useMemo, useRef } from 'react';\nimport type { TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { TableVirtuoso } from 'react-virtuoso';\n\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { InnerTable } from './InnerTable';\nimport type { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { TableBody } from './TableBody';\nimport type { TableCellProps } from './TableCell';\nimport { TableCell } from './TableCell';\nimport { TableFoot } from './TableFoot';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableRow } from './TableRow';\nimport type { TableToolbarProps } from './TableToolbar';\nimport { TableToolbar } from './TableToolbar';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\ntype TableContext<TableData> = {\n  width: number | string;\n  density: VirtualizedTableProps<TableData>['density'];\n  onTableKeyDown: React.KeyboardEventHandler<HTMLTableElement>;\n  onTableBlur: React.FocusEventHandler<HTMLTableElement>;\n  onRowClick: VirtualizedTableProps<TableData>['onRowClick'];\n  onRowMouseOver: VirtualizedTableProps<TableData>['onRowMouseOver'];\n  onRowMouseOut: VirtualizedTableProps<TableData>['onRowMouseOut'];\n};\n\n// Defined outside VirtualizedTable so the object reference is stable and\n// TableVirtuoso never remounts its internal components due to a changed prop.\n// Props that vary per-render are passed via the `context` prop instead.\nconst VirtuosoTableComponents: TableComponents<Row<unknown>, TableContext<unknown>> = {\n  Scroller: forwardRef(({ context: _, ...props }, ref) => <VirtualizedTableContainer {...props} ref={ref} />),\n  Table: ({ context, ...props }): ReactElement => (\n    <InnerTable\n      {...props}\n      width={context.width}\n      density={context.density}\n      onKeyDown={context.onTableKeyDown}\n      onBlur={context.onTableBlur}\n    />\n  ),\n  TableHead: forwardRef(({ context: _, ...props }, ref) => <TableHead {...props} ref={ref} />),\n  TableFoot: forwardRef(({ context: _, ...props }, ref) => <TableFoot {...props} ref={ref} />),\n  TableRow: ({ item, context, ...props }): ReactElement | null => {\n    if (!item) {\n      return null;\n    }\n\n    const rowEventOpts: TableRowEventOpts = { id: item.id, index: item.index };\n\n    return (\n      <TableRow\n        {...props}\n        onClick={(e) => context.onRowClick(e, item.id)}\n        density={context.density}\n        onMouseOver={(e) => {\n          context.onRowMouseOver?.(e, rowEventOpts);\n        }}\n        onMouseOut={(e) => {\n          context.onRowMouseOut?.(e, rowEventOpts);\n        }}\n      />\n    );\n  },\n  TableBody: forwardRef(({ context: _, ...props }, ref) => <TableBody {...props} ref={ref} />),\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  cellConfigs,\n  pagination,\n  onPaginationChange,\n  rowCount,\n  toolbarConfig,\n}: VirtualizedTableProps<TableData>): ReactElement {\n  'use no memo'; // TanStack Table row and column getters read mutable state behind stable identities.\n\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 tableContext: TableContext<TableData> = useMemo(\n    () => ({\n      width,\n      density,\n      onTableKeyDown: keyboardNav.onTableKeyDown,\n      onTableBlur: keyboardNav.onTableBlur,\n      onRowClick,\n      onRowMouseOver,\n      onRowMouseOut,\n    }),\n    [width, density, keyboardNav.onTableKeyDown, keyboardNav.onTableBlur, onRowClick, onRowMouseOver, onRowMouseOut],\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 calculate all column sizes once per render at the root table level\n   * and pass the column sizes down as CSS variables to the <table> element.\n   */\n  const columnSizeVars: { [key: string]: number } = {};\n  headers.forEach((headerGroup) => {\n    headerGroup.headers\n      .filter((header) => header.column.getCanResize())\n      .forEach((header) => {\n        columnSizeVars[`--header-${header.id}-size`] = header.getSize();\n        columnSizeVars[`--col-${header.column.id}-size`] = header.column.getSize();\n      });\n  });\n\n  return (\n    <Box style={{ width, height, ...columnSizeVars }}>\n      <TableToolbar {...toolbarConfig} width={width} />\n      <TableVirtuoso\n        ref={virtuosoRef}\n        data={rows}\n        components={VirtuosoTableComponents as TableComponents<Row<TableData>, TableContext<TableData>>}\n        context={tableContext}\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":["Box","TablePagination","TableRow","MuiTableRow","flexRender","forwardRef","useMemo","useRef","TableVirtuoso","useVirtualizedTableKeyboardNav","InnerTable","TableBody","TableCell","TableFoot","TableHead","TableHeaderCell","TableToolbar","VirtualizedTableContainer","VirtuosoTableComponents","Scroller","context","_","props","ref","Table","width","density","onKeyDown","onTableKeyDown","onBlur","onTableBlur","item","rowEventOpts","id","index","onClick","e","onRowClick","onMouseOver","onRowMouseOver","onMouseOut","onRowMouseOut","VirtualizedTable","height","defaultColumnWidth","defaultColumnHeight","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","tableContext","handleChangePage","_event","newPage","pageIndex","handleChangeRowsPerPage","event","pageSize","parseInt","target","value","columnSizeVars","forEach","headerGroup","filter","header","getCanResize","getSize","style","data","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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"}
+{"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 { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport type { ReactTable, Row, RowData } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport type { ReactElement } from 'react';\nimport { forwardRef, useMemo, useRef } from 'react';\nimport type { TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { TableVirtuoso } from 'react-virtuoso';\n\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { InnerTable } from './InnerTable';\nimport type { TableCellConfigs, TableFeatures, TableProps, TableRowEventOpts } from './model/table-model';\nimport { TableBody } from './TableBody';\nimport type { TableCellProps } from './TableCell';\nimport { TableCell } from './TableCell';\nimport { TableFoot } from './TableFoot';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableRow } from './TableRow';\nimport type { TableToolbarProps } from './TableToolbar';\nimport { TableToolbar } from './TableToolbar';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\ntype TableContext<TableData extends RowData> = {\n  width: number | string;\n  density: VirtualizedTableProps<TableData>['density'];\n  onTableKeyDown: React.KeyboardEventHandler<HTMLTableElement>;\n  onTableBlur: React.FocusEventHandler<HTMLTableElement>;\n  onRowClick: VirtualizedTableProps<TableData>['onRowClick'];\n  onRowMouseOver: VirtualizedTableProps<TableData>['onRowMouseOver'];\n  onRowMouseOut: VirtualizedTableProps<TableData>['onRowMouseOut'];\n};\n\n// Defined outside VirtualizedTable so the object reference is stable and\n// TableVirtuoso never remounts its internal components due to a changed prop.\n// Props that vary per-render are passed via the `context` prop instead.\nconst VirtuosoTableComponents: TableComponents<Row<TableFeatures, RowData>, TableContext<RowData>> = {\n  Scroller: forwardRef(({ context: _, ...props }, ref) => <VirtualizedTableContainer {...props} ref={ref} />),\n  Table: ({ context, ...props }): ReactElement => (\n    <InnerTable\n      {...props}\n      width={context.width}\n      density={context.density}\n      onKeyDown={context.onTableKeyDown}\n      onBlur={context.onTableBlur}\n    />\n  ),\n  TableHead: forwardRef(({ context: _, ...props }, ref) => <TableHead {...props} ref={ref} />),\n  TableFoot: forwardRef(({ context: _, ...props }, ref) => <TableFoot {...props} ref={ref} />),\n  TableRow: ({ item, context, ...props }): ReactElement | null => {\n    if (!item) {\n      return null;\n    }\n\n    const rowEventOpts: TableRowEventOpts = { id: item.id, index: item.index };\n\n    return (\n      <TableRow\n        {...props}\n        onClick={(e) => context.onRowClick(e, item)}\n        density={context.density}\n        onMouseOver={(e) => {\n          context.onRowMouseOver?.(e, rowEventOpts);\n        }}\n        onMouseOut={(e) => {\n          context.onRowMouseOut?.(e, rowEventOpts);\n        }}\n      />\n    );\n  },\n  TableBody: forwardRef(({ context: _, ...props }, ref) => <TableBody {...props} ref={ref} />),\n};\n\nexport type VirtualizedTableProps<TableData extends RowData> = 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>, row: Row<TableFeatures, TableData>) => void;\n    /**\n     * The value returned by `useTable`. Its identity changes whenever table\n     * state or options change, unlike the row, column, and header objects it\n     * returns, which keep their identities across state changes.\n     */\n    table: ReactTable<TableFeatures, TableData>;\n    cellConfigs?: TableCellConfigs;\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 extends RowData>({\n  width,\n  height,\n  density,\n  defaultColumnWidth,\n  defaultColumnHeight,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  table,\n  cellConfigs,\n  pagination,\n  onPaginationChange,\n  toolbarConfig,\n}: VirtualizedTableProps<TableData>): ReactElement {\n  // Rows, columns, and headers keep their identities when table state such as\n  // selection, sorting, or sizing changes. Anything that reads that state\n  // through their methods must call `table` directly in the same expression or\n  // callback, so the React Compiler invalidates it whenever `table` changes.\n  const rows = table.getRowModel().rows;\n  const columnCount = table.getVisibleFlatColumns().length;\n\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: columnCount,\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 tableContext: TableContext<TableData> = useMemo(\n    () => ({\n      width,\n      density,\n      onTableKeyDown: keyboardNav.onTableKeyDown,\n      onTableBlur: keyboardNav.onTableBlur,\n      onRowClick,\n      onRowMouseOver,\n      onRowMouseOut,\n    }),\n    [width, density, keyboardNav.onTableKeyDown, keyboardNav.onTableBlur, onRowClick, onRowMouseOver, onRowMouseOut],\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 calculate all column sizes once per render at the root table level\n   * and pass the column sizes down as CSS variables to the <table> element.\n   */\n  const columnSizeVars: { [key: string]: number } = {};\n  table.getHeaderGroups().forEach((headerGroup) => {\n    headerGroup.headers\n      .filter((header) => header.column.getCanResize())\n      .forEach((header) => {\n        columnSizeVars[`--header-${header.id}-size`] = header.getSize();\n        columnSizeVars[`--col-${header.column.id}-size`] = header.column.getSize();\n      });\n  });\n\n  return (\n    <Box style={{ width, height, ...columnSizeVars }}>\n      <TableToolbar {...toolbarConfig} width={width} />\n      <TableVirtuoso\n        ref={virtuosoRef}\n        data={rows}\n        components={VirtuosoTableComponents as TableComponents<Row<TableFeatures, TableData>, TableContext<TableData>>}\n        context={tableContext}\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              {table.getHeaderGroups().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={table.getVisibleFlatColumns().length}\n                    count={table.getRowCount()}\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 = table.getRowModel().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":["Box","TablePagination","TableRow","MuiTableRow","flexRender","forwardRef","useRef","TableVirtuoso","useVirtualizedTableKeyboardNav","InnerTable","TableBody","TableCell","TableFoot","TableHead","TableHeaderCell","TableToolbar","VirtualizedTableContainer","VirtuosoTableComponents","Scroller","Table","context","props","width","density","onKeyDown","onTableKeyDown","onBlur","onTableBlur","item","rowEventOpts","id","index","onClick","e","onRowClick","onMouseOver","onRowMouseOver","onMouseOut","onRowMouseOut"],"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,GAAG,EAAEC,eAAe,EAAEC,YAAYC,WAAW,QAAQ,gBAAgB;AAE9E,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,UAAU,EAAWC,MAAM,QAAQ,QAAQ;AAEpD,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,SAASC,8BAA8B,QAAQ,4CAAyC;AACxF,SAASC,UAAU,QAAQ,kBAAe;AAE1C,SAASC,SAAS,QAAQ,iBAAc;AAExC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,eAAe,QAAQ,uBAAoB;AACpD,SAASZ,QAAQ,QAAQ,gBAAa;AAEtC,SAASa,YAAY,QAAQ,oBAAiB;AAC9C,SAASC,yBAAyB,QAAQ,iCAA8B;AAiBxE,yEAAyE;AACzE,8EAA8E;AAC9E,wEAAwE;AACxE,MAAMC,0BAA+F;IACnGC,wBAAUb,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;IACrBc,OAAO,CAAC,EAAEC,OAAO,EAAE,GAAQ,AAALC,OAAO,iBAC3B,KAACZ;YACE,GAAGY,KAAK;YACTC,OAAOF,QAAQE,KAAK;YACpBC,SAASH,QAAQG,OAAO;YACxBC,WAAWJ,QAAQK,cAAc;YACjCC,QAAQN,QAAQO,WAAW;;IAG/Bd,yBAAWR,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;IACtBO,yBAAWP,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;IACtBH,UAAU,CAAC,EAAE0B,IAAI,EAAER,OAAO,EAAE,GAAQ,AAALC,OAAO;QACpC,IAAI,CAACO,MAAM;YACT,OAAO;QACT;QAEA,MAAMC,eAAkC;YAAEC,IAAIF,KAAKE,EAAE;YAAEC,OAAOH,KAAKG,KAAK;QAAC;QAEzE,qBACE,KAAC7B;YACE,GAAGmB,KAAK;YACTW,SAAS,CAACC,IAAMb,QAAQc,UAAU,CAACD,GAAGL;YACtCL,SAASH,QAAQG,OAAO;YACxBY,aAAa,CAACF;gBACZb,QAAQgB,cAAc,GAAGH,GAAGJ;YAC9B;YACAQ,YAAY,CAACJ;gBACXb,QAAQkB,aAAa,GAAGL,GAAGJ;YAC7B;;IAGN;IACAnB,yBAAWL,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;AACxB;AA4BA,6EAA6E;AAC7E,4EAA4E;AAC5E,mBAAmB;AACnB,OAAO"}

package/dist/Table/VirtualizedTableContainer.js

@@ -11,18 +11,38 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { TableContainer as MuiTableContainer } from "@mui/material";
 import { forwardRef } from "react";
 import { combineSx } from "../utils/combine-sx.js";
 export const VirtualizedTableContainer = /*#__PURE__*/ forwardRef(function VirtualizedTableContainer(props, ref) {
-    return /*#__PURE__*/ _jsx(MuiTableContainer, {
-        ...props,
-        tabIndex: -1,
-        ref: ref,
-        sx: combineSx({
+    const $ = _c(6);
+    let t0;
+    if ($[0] !== props.sx) {
+        t0 = combineSx({
             flexGrow: 1
-        }, props.sx)
-    });
+        }, props.sx);
+        $[0] = props.sx;
+        $[1] = t0;
+    } else {
+        t0 = $[1];
+    }
+    let t1;
+    if ($[2] !== props || $[3] !== ref || $[4] !== t0) {
+        t1 = /*#__PURE__*/ _jsx(MuiTableContainer, {
+            ...props,
+            tabIndex: -1,
+            ref: ref,
+            sx: t0
+        });
+        $[2] = props;
+        $[3] = ref;
+        $[4] = t0;
+        $[5] = t1;
+    } else {
+        t1 = $[5];
+    }
+    return t1;
 });
 
 //# sourceMappingURL=VirtualizedTableContainer.js.map

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 type { TableContainerProps as MuiTableContainerProps } from '@mui/material';\nimport { TableContainer as MuiTableContainer } from '@mui/material';\nimport { forwardRef } from 'react';\n\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;;AAGjC,SAASA,kBAAkBC,iBAAiB,QAAQ,gBAAgB;AACpE,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAASC,SAAS,QAAQ,yBAAsB;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 type { TableContainerProps as MuiTableContainerProps } from '@mui/material';\nimport { TableContainer as MuiTableContainer } from '@mui/material';\nimport { forwardRef } from 'react';\n\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"],"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;;;AAGjC,SAASA,kBAAkBC,iBAAiB,QAAQ,gBAAgB;AACpE,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAASC,SAAS,QAAQ,yBAAsB;AAIhD,OAAO,MAAMC,0CAA4BF,WACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGA"}

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

@@ -1,14 +1,15 @@
 import type { FuzzyMatchThreshold } from '@perses-dev/components';
-import type { ExpandedState, TableOptions } from '@tanstack/react-table';
+import type { ExpandedState, RowData, TableOptions } from '@tanstack/react-table';
 import type { SetStateAction } from 'react';
-export interface UseFuzzySearchResult<TableData> {
+import type { TableFeatures } from '../model/table-model';
+export interface UseFuzzySearchResult<TableData extends RowData> {
     globalFilter: string;
     setGlobalFilter: (value: string) => void;
-    fuzzySearchOptions: Pick<TableOptions<TableData>, 'filterFns' | 'globalFilterFn' | 'getFilteredRowModel' | 'filterFromLeafRows' | 'onGlobalFilterChange'>;
+    fuzzySearchOptions: Pick<TableOptions<TableFeatures, TableData>, 'globalFilterFn' | 'filterFromLeafRows' | 'onGlobalFilterChange'>;
 }
 /**
- * Returns fuzzy search state and the corresponding `useReactTable` options.
+ * Returns fuzzy search state and the corresponding `useTable` options.
  * Filter options are disabled when `showSearch` is falsy.
  */
-export declare function useFuzzySearch<TableData>(isSearchEnabled: boolean | undefined, threshold: FuzzyMatchThreshold, expanded: ExpandedState, setExpanded: (value: SetStateAction<ExpandedState>) => void): UseFuzzySearchResult<TableData>;
+export declare function useFuzzySearch<TableData extends RowData>(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,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,KAAK,EAAE,aAAa,EAAY,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEnF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAW5C,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"}
+{"version":3,"file":"useFuzzySearch.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useFuzzySearch.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,KAAK,EAAE,aAAa,EAAY,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE5F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAU1D,MAAM,WAAW,oBAAoB,CAAC,SAAS,SAAS,OAAO;IAC7D,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kBAAkB,EAAE,IAAI,CACtB,YAAY,CAAC,aAAa,EAAE,SAAS,CAAC,EACtC,gBAAgB,GAAG,oBAAoB,GAAG,sBAAsB,CACjE,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,SAAS,SAAS,OAAO,EACtD,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,CA4BjC"}

package/dist/Table/hooks/useFuzzySearch.js

@@ -10,53 +10,78 @@
 // 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 { c as _c } from "react-compiler-runtime";
 import { rankings, rankItem } from "@tanstack/match-sorter-utils";
-import { getFilteredRowModel } from "@tanstack/react-table";
-import { useCallback, useState } from "react";
+import { tableOptions } from "@tanstack/react-table";
+import { useState } from "react";
 const getFuzzyFilterFunction = (threshold)=>(row, columnId, value, addMeta)=>{
         const itemRank = rankItem(row.getValue(columnId), value, {
             threshold: rankings[threshold]
         });
-        addMeta({
+        addMeta?.({
             itemRank
         });
         return itemRank.passed;
     };
 /**
- * Returns fuzzy search state and the corresponding `useReactTable` options.
+ * Returns fuzzy search state and the corresponding `useTable` options.
  * Filter options are disabled when `showSearch` is falsy.
  */ export function useFuzzySearch(isSearchEnabled, threshold, expanded, setExpanded) {
-    const [globalFilter, setGlobalFilter] = useState('');
+    const $ = _c(12);
+    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: handleGlobalFilterChange,
-        fuzzySearchOptions: {
-            filterFns: {
-                fuzzy: getFuzzyFilterFunction(threshold)
-            },
-            globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,
-            getFilteredRowModel: isSearchEnabled ? getFilteredRowModel() : undefined,
+    let t0;
+    if ($[0] !== expanded || $[1] !== prevExpandedState || $[2] !== setExpanded) {
+        t0 = (value)=>{
+            setGlobalFilter((prev)=>{
+                if (!prev) {
+                    setPrevExpandedState(expanded);
+                    setExpanded(true);
+                } else {
+                    if (prev && !value) {
+                        setExpanded(prevExpandedState);
+                    }
+                }
+                return value;
+            });
+        };
+        $[0] = expanded;
+        $[1] = prevExpandedState;
+        $[2] = setExpanded;
+        $[3] = t0;
+    } else {
+        t0 = $[3];
+    }
+    const handleGlobalFilterChange = t0;
+    let t1;
+    if ($[4] !== handleGlobalFilterChange || $[5] !== isSearchEnabled || $[6] !== threshold) {
+        t1 = tableOptions({
+            globalFilterFn: isSearchEnabled ? getFuzzyFilterFunction(threshold) : undefined,
             filterFromLeafRows: isSearchEnabled,
             onGlobalFilterChange: handleGlobalFilterChange
-        }
-    };
+        });
+        $[4] = handleGlobalFilterChange;
+        $[5] = isSearchEnabled;
+        $[6] = threshold;
+        $[7] = t1;
+    } else {
+        t1 = $[7];
+    }
+    let t2;
+    if ($[8] !== globalFilter || $[9] !== handleGlobalFilterChange || $[10] !== t1) {
+        t2 = {
+            globalFilter,
+            setGlobalFilter: handleGlobalFilterChange,
+            fuzzySearchOptions: t1
+        };
+        $[8] = globalFilter;
+        $[9] = handleGlobalFilterChange;
+        $[10] = t1;
+        $[11] = t2;
+    } else {
+        t2 = $[11];
+    }
+    return t2;
 }
 
 //# sourceMappingURL=useFuzzySearch.js.map

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 type { FuzzyMatchThreshold } from '@perses-dev/components';\nimport { rankings, rankItem } from '@tanstack/match-sorter-utils';\nimport type { ExpandedState, FilterFn, TableOptions } from '@tanstack/react-table';\nimport { getFilteredRowModel } from '@tanstack/react-table';\nimport type { SetStateAction } from 'react';\nimport { useCallback, useState } from 'react';\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":["rankings","rankItem","getFilteredRowModel","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;AAGjC,SAASA,QAAQ,EAAEC,QAAQ,QAAQ,+BAA+B;AAElE,SAASC,mBAAmB,QAAQ,wBAAwB;AAE5D,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9C,MAAMC,yBACJ,CAACC,YACD,CAACC,KAAKC,UAAUC,OAAOC;QACrB,MAAMC,WAAWV,SAASM,IAAIK,QAAQ,CAACJ,WAAWC,OAAO;YAAEH,WAAWN,QAAQ,CAACM,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;YAC5C1B,qBAAqBa,kBAAkBb,wBAAwB0B;YAC/DC,oBAAoBd;YACpBe,sBAAsBR;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 type { FuzzyMatchThreshold } from '@perses-dev/components';\nimport { rankings, rankItem } from '@tanstack/match-sorter-utils';\nimport type { ExpandedState, FilterFn, RowData, TableOptions } from '@tanstack/react-table';\nimport { tableOptions } from '@tanstack/react-table';\nimport type { SetStateAction } from 'react';\nimport { useCallback, useState } from 'react';\n\nimport type { TableFeatures } from '../model/table-model';\n\nconst getFuzzyFilterFunction =\n  <TableData extends RowData>(threshold: FuzzyMatchThreshold): FilterFn<TableFeatures, TableData> =>\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 extends RowData> {\n  globalFilter: string;\n  setGlobalFilter: (value: string) => void;\n  fuzzySearchOptions: Pick<\n    TableOptions<TableFeatures, TableData>,\n    'globalFilterFn' | 'filterFromLeafRows' | 'onGlobalFilterChange'\n  >;\n}\n\n/**\n * Returns fuzzy search state and the corresponding `useTable` options.\n * Filter options are disabled when `showSearch` is falsy.\n */\nexport function useFuzzySearch<TableData extends RowData>(\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: tableOptions<TableFeatures, TableData>({\n      globalFilterFn: isSearchEnabled ? getFuzzyFilterFunction<TableData>(threshold) : undefined,\n      filterFromLeafRows: isSearchEnabled,\n      onGlobalFilterChange: handleGlobalFilterChange,\n    }),\n  };\n}\n"],"names":["rankings","rankItem","tableOptions","useState","getFuzzyFilterFunction","threshold","row","columnId","value","addMeta","itemRank","getValue","passed"],"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;;AAGjC,SAASA,QAAQ,EAAEC,QAAQ,QAAQ,+BAA+B;AAElE,SAASC,YAAY,QAAQ,wBAAwB;AAErD,SAAsBC,QAAQ,QAAQ,QAAQ;AAI9C,MAAMC,yBACJ,CAA4BC,YAC5B,CAACC,KAAKC,UAAUC,OAAOC;QACrB,MAAMC,WAAWT,SAASK,IAAIK,QAAQ,CAACJ,WAAWC,OAAO;YAAEH,WAAWL,QAASK,CAAAA,UAAS,AAAC;QAAC;QAC1FI,UAAU;YAAEC;QAAS;QACrB,OAAOA,SAASE,MAAM;IACxB;AAWF;;;CAGC,GACD,OAAO"}

package/dist/Table/hooks/useTableKeyboardNav.js

@@ -10,16 +10,17 @@
 // 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 { useCallback, useState } from "react";
+import { c as _c } from "react-compiler-runtime";
+import { useState } from "react";
 const DEFAULT_ACTIVE_CELL = {
     row: 0,
     column: 0
 };
 const ARROW_KEYS = new Set([
-    'ArrowRight',
-    'ArrowLeft',
-    'ArrowUp',
-    'ArrowDown'
+    "ArrowRight",
+    "ArrowLeft",
+    "ArrowUp",
+    "ArrowDown"
 ]);
 function isArrowKey(key) {
     return ARROW_KEYS.has(key);
@@ -29,77 +30,117 @@ function isArrowKey(key) {
  * to be wrapped by implementation-specific tables to account for differences
  * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`
  * for an example.
- */ export function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }) {
+ */ export function useTableKeyboardNav(t0) {
+    const $ = _c(13);
+    const { maxRows, maxColumns, onActiveCellChange } = t0;
     const [activeCell, setActiveCell] = useState(DEFAULT_ACTIVE_CELL);
     const [isActive, setIsActive] = useState(false);
-    const handleCellFocus = (cellPosition)=>{
-        if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {
-            return;
-        }
-        setIsActive(true);
-        setActiveCell(cellPosition);
-    };
-    const handleKeyDown = useCallback((e)=>{
-        // Including some of the basic a11y keyboard interaction patterns from:
-        // https://www.w3.org/WAI/ARIA/apg/patterns/grid/
-        // TODO: add other keyboard combos.
-        const key = e.key;
-        if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {
-            setActiveCell((curActiveCell)=>{
-                let nextRow = curActiveCell.row;
-                let nextColumn = curActiveCell.column;
-                if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {
-                    e.preventDefault();
-                    nextColumn += 1;
-                } else if (key === 'ArrowLeft' && nextColumn > 0) {
-                    e.preventDefault();
-                    nextColumn -= 1;
-                } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {
-                    e.preventDefault();
-                    nextRow += 1;
-                } else if (key === 'ArrowUp' && nextRow > 0) {
-                    e.preventDefault();
-                    nextRow -= 1;
-                } else if (key === 'Home') {
-                    e.preventDefault();
-                    nextRow = 0;
-                    nextColumn = 0;
-                } else if (key === 'End') {
-                    e.preventDefault();
-                    nextRow = maxRows - 1;
-                    nextColumn = maxColumns - 1;
-                }
-                const defaultNewPosition = {
-                    column: nextColumn,
-                    row: nextRow
-                };
-                const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;
-                if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {
-                    // Return original to avoid creating a new object if nothing
-                    // changed.
-                    return curActiveCell;
-                }
-                return newPosition;
-            });
-        }
-    }, [
-        maxColumns,
-        maxRows,
-        onActiveCellChange
-    ]);
-    const handleTableBlur = useCallback((e)=>{
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-            setIsActive(false);
-            setActiveCell(DEFAULT_ACTIVE_CELL);
-        }
-    }, []);
-    return {
-        activeCell,
-        isActive,
-        onTableKeyDown: handleKeyDown,
-        onCellFocus: handleCellFocus,
-        onTableBlur: handleTableBlur
-    };
+    let t1;
+    if ($[0] !== activeCell || $[1] !== isActive) {
+        t1 = (cellPosition)=>{
+            if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {
+                return;
+            }
+            setIsActive(true);
+            setActiveCell(cellPosition);
+        };
+        $[0] = activeCell;
+        $[1] = isActive;
+        $[2] = t1;
+    } else {
+        t1 = $[2];
+    }
+    const handleCellFocus = t1;
+    let t2;
+    if ($[3] !== maxColumns || $[4] !== maxRows || $[5] !== onActiveCellChange) {
+        t2 = (e)=>{
+            const key = e.key;
+            if (isArrowKey(key) || key === "Home" || key === "End" || key === "PageDown" || key === "PageUp") {
+                setActiveCell((curActiveCell)=>{
+                    let nextRow = curActiveCell.row;
+                    let nextColumn = curActiveCell.column;
+                    if (key === "ArrowRight" && nextColumn < maxColumns - 1) {
+                        e.preventDefault();
+                        nextColumn = nextColumn + 1;
+                    } else {
+                        if (key === "ArrowLeft" && nextColumn > 0) {
+                            e.preventDefault();
+                            nextColumn = nextColumn - 1;
+                        } else {
+                            if (key === "ArrowDown" && nextRow < maxRows - 1) {
+                                e.preventDefault();
+                                nextRow = nextRow + 1;
+                            } else {
+                                if (key === "ArrowUp" && nextRow > 0) {
+                                    e.preventDefault();
+                                    nextRow = nextRow - 1;
+                                } else {
+                                    if (key === "Home") {
+                                        e.preventDefault();
+                                        nextRow = 0;
+                                        nextColumn = 0;
+                                    } else {
+                                        if (key === "End") {
+                                            e.preventDefault();
+                                            nextRow = maxRows - 1;
+                                            nextColumn = maxColumns - 1;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    const defaultNewPosition = {
+                        column: nextColumn,
+                        row: nextRow
+                    };
+                    const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;
+                    if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {
+                        return curActiveCell;
+                    }
+                    return newPosition;
+                });
+            }
+        };
+        $[3] = maxColumns;
+        $[4] = maxRows;
+        $[5] = onActiveCellChange;
+        $[6] = t2;
+    } else {
+        t2 = $[6];
+    }
+    const handleKeyDown = t2;
+    let t3;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = (e_0)=>{
+            if (!e_0.currentTarget.contains(e_0.relatedTarget)) {
+                setIsActive(false);
+                setActiveCell(DEFAULT_ACTIVE_CELL);
+            }
+        };
+        $[7] = t3;
+    } else {
+        t3 = $[7];
+    }
+    const handleTableBlur = t3;
+    let t4;
+    if ($[8] !== activeCell || $[9] !== handleCellFocus || $[10] !== handleKeyDown || $[11] !== isActive) {
+        t4 = {
+            activeCell,
+            isActive,
+            onTableKeyDown: handleKeyDown,
+            onCellFocus: handleCellFocus,
+            onTableBlur: handleTableBlur
+        };
+        $[8] = activeCell;
+        $[9] = handleCellFocus;
+        $[10] = handleKeyDown;
+        $[11] = isActive;
+        $[12] = t4;
+    } else {
+        t4 = $[12];
+    }
+    return t4;
 }
 
 //# sourceMappingURL=useTableKeyboardNav.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.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 type { FocusEventHandler, KeyboardEventHandler } from 'react';\nimport { useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n  maxRows: number;\n  maxColumns: number;\n\n  /**\n   * Function used to modify the active table cell based on the keyboard event,\n   * the current position, and the default recommended next position (this value\n   * will be `undefined` in cases where there is no default handler like `PageUp`\n   * and `PageDown`). This can be used to modify the next position that will be\n   * used and/or to handle side effects related to the new position (e.g.\n   * pagination, scrolling the active cell into view).\n   */\n  onActiveCellChange?: (\n    e: React.KeyboardEvent<HTMLTableElement>,\n    currentActiveCell: TableCellPosition,\n    defaultNextActiveCell: TableCellPosition | undefined,\n  ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n  row: 0,\n  column: 0,\n};\n\nconst ARROW_KEYS = new Set(['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown']);\n\nfunction isArrowKey(key: string): boolean {\n  return ARROW_KEYS.has(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps): {\n  activeCell: TableCellPosition;\n  isActive: boolean;\n  onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n  onCellFocus: (cellPosition: TableCellPosition) => void;\n  onTableBlur: FocusEventHandler<HTMLTableElement>;\n} {\n  const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n  const [isActive, setIsActive] = useState(false);\n\n  const handleCellFocus = (cellPosition: TableCellPosition): void => {\n    if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n      return;\n    }\n    setIsActive(true);\n    setActiveCell(cellPosition);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n    (e) => {\n      // Including some of the basic a11y keyboard interaction patterns from:\n      // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n      // TODO: add other keyboard combos.\n      const key = e.key;\n\n      if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n        setActiveCell((curActiveCell) => {\n          let nextRow: number = curActiveCell.row;\n          let nextColumn: number = curActiveCell.column;\n\n          if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n            e.preventDefault();\n            nextColumn += 1;\n          } else if (key === 'ArrowLeft' && nextColumn > 0) {\n            e.preventDefault();\n            nextColumn -= 1;\n          } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n            e.preventDefault();\n            nextRow += 1;\n          } else if (key === 'ArrowUp' && nextRow > 0) {\n            e.preventDefault();\n            nextRow -= 1;\n          } else if (key === 'Home') {\n            e.preventDefault();\n            nextRow = 0;\n            nextColumn = 0;\n          } else if (key === 'End') {\n            e.preventDefault();\n            nextRow = maxRows - 1;\n            nextColumn = maxColumns - 1;\n          }\n\n          const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n          const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n          if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n            // Return original to avoid creating a new object if nothing\n            // changed.\n            return curActiveCell;\n          }\n\n          return newPosition;\n        });\n      }\n    },\n    [maxColumns, maxRows, onActiveCellChange],\n  );\n\n  const handleTableBlur: FocusEventHandler<HTMLTableElement> = useCallback((e) => {\n    if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n      setIsActive(false);\n      setActiveCell(DEFAULT_ACTIVE_CELL);\n    }\n  }, []);\n\n  return {\n    activeCell,\n    isActive,\n    onTableKeyDown: handleKeyDown,\n    onCellFocus: handleCellFocus,\n    onTableBlur: handleTableBlur,\n  };\n}\n"],"names":["useCallback","useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","Set","isArrowKey","key","has","useTableKeyboardNav","maxRows","maxColumns","onActiveCellChange","activeCell","setActiveCell","isActive","setIsActive","handleCellFocus","cellPosition","handleKeyDown","e","curActiveCell","nextRow","nextColumn","preventDefault","defaultNewPosition","newPosition","handleTableBlur","currentTarget","contains","relatedTarget","onTableKeyDown","onCellFocus","onTableBlur"],"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;AAGjC,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AA0B9C,MAAMC,sBAAyC;IAC7CC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,aAAa,IAAIC,IAAI;IAAC;IAAc;IAAa;IAAW;CAAY;AAE9E,SAASC,WAAWC,GAAW;IAC7B,OAAOH,WAAWI,GAAG,CAACD;AACxB;AAEA;;;;;CAKC,GACD,OAAO,SAASE,oBAAoB,EAAEC,OAAO,EAAEC,UAAU,EAAEC,kBAAkB,EAA4B;IAOvG,MAAM,CAACC,YAAYC,cAAc,GAAGd,SAA4BC;IAChE,MAAM,CAACc,UAAUC,YAAY,GAAGhB,SAAS;IAEzC,MAAMiB,kBAAkB,CAACC;QACvB,IAAIA,aAAaf,MAAM,KAAKU,WAAWV,MAAM,IAAIe,aAAahB,GAAG,KAAKW,WAAWX,GAAG,IAAIa,UAAU;YAChG;QACF;QACAC,YAAY;QACZF,cAAcI;IAChB;IAEA,MAAMC,gBAA8DpB,YAClE,CAACqB;QACC,uEAAuE;QACvE,iDAAiD;QACjD,mCAAmC;QACnC,MAAMb,MAAMa,EAAEb,GAAG;QAEjB,IAAID,WAAWC,QAAQA,QAAQ,UAAUA,QAAQ,SAASA,QAAQ,cAAcA,QAAQ,UAAU;YAChGO,cAAc,CAACO;gBACb,IAAIC,UAAkBD,cAAcnB,GAAG;gBACvC,IAAIqB,aAAqBF,cAAclB,MAAM;gBAE7C,IAAII,QAAQ,gBAAgBgB,aAAaZ,aAAa,GAAG;oBACvDS,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAegB,aAAa,GAAG;oBAChDH,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAee,UAAUZ,UAAU,GAAG;oBACvDU,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,aAAae,UAAU,GAAG;oBAC3CF,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,QAAQ;oBACzBa,EAAEI,cAAc;oBAChBF,UAAU;oBACVC,aAAa;gBACf,OAAO,IAAIhB,QAAQ,OAAO;oBACxBa,EAAEI,cAAc;oBAChBF,UAAUZ,UAAU;oBACpBa,aAAaZ,aAAa;gBAC5B;gBAEA,MAAMc,qBAAqB;oBAAEtB,QAAQoB;oBAAYrB,KAAKoB;gBAAQ;gBAE9D,MAAMI,cAAcd,qBAAqBQ,GAAGC,eAAeI,uBAAuBA;gBAElF,IAAIC,YAAYxB,GAAG,KAAKmB,cAAcnB,GAAG,IAAIwB,YAAYvB,MAAM,KAAKkB,cAAclB,MAAM,EAAE;oBACxF,4DAA4D;oBAC5D,WAAW;oBACX,OAAOkB;gBACT;gBAEA,OAAOK;YACT;QACF;IACF,GACA;QAACf;QAAYD;QAASE;KAAmB;IAG3C,MAAMe,kBAAuD5B,YAAY,CAACqB;QACxE,IAAI,CAACA,EAAEQ,aAAa,CAACC,QAAQ,CAACT,EAAEU,aAAa,GAAW;YACtDd,YAAY;YACZF,cAAcb;QAChB;IACF,GAAG,EAAE;IAEL,OAAO;QACLY;QACAE;QACAgB,gBAAgBZ;QAChBa,aAAaf;QACbgB,aAAaN;IACf;AACF"}
+{"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.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 type { FocusEventHandler, KeyboardEventHandler } from 'react';\nimport { useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n  maxRows: number;\n  maxColumns: number;\n\n  /**\n   * Function used to modify the active table cell based on the keyboard event,\n   * the current position, and the default recommended next position (this value\n   * will be `undefined` in cases where there is no default handler like `PageUp`\n   * and `PageDown`). This can be used to modify the next position that will be\n   * used and/or to handle side effects related to the new position (e.g.\n   * pagination, scrolling the active cell into view).\n   */\n  onActiveCellChange?: (\n    e: React.KeyboardEvent<HTMLTableElement>,\n    currentActiveCell: TableCellPosition,\n    defaultNextActiveCell: TableCellPosition | undefined,\n  ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n  row: 0,\n  column: 0,\n};\n\nconst ARROW_KEYS = new Set(['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown']);\n\nfunction isArrowKey(key: string): boolean {\n  return ARROW_KEYS.has(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps): {\n  activeCell: TableCellPosition;\n  isActive: boolean;\n  onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n  onCellFocus: (cellPosition: TableCellPosition) => void;\n  onTableBlur: FocusEventHandler<HTMLTableElement>;\n} {\n  const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n  const [isActive, setIsActive] = useState(false);\n\n  const handleCellFocus = (cellPosition: TableCellPosition): void => {\n    if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n      return;\n    }\n    setIsActive(true);\n    setActiveCell(cellPosition);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n    (e) => {\n      // Including some of the basic a11y keyboard interaction patterns from:\n      // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n      // TODO: add other keyboard combos.\n      const key = e.key;\n\n      if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n        setActiveCell((curActiveCell) => {\n          let nextRow: number = curActiveCell.row;\n          let nextColumn: number = curActiveCell.column;\n\n          if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n            e.preventDefault();\n            nextColumn += 1;\n          } else if (key === 'ArrowLeft' && nextColumn > 0) {\n            e.preventDefault();\n            nextColumn -= 1;\n          } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n            e.preventDefault();\n            nextRow += 1;\n          } else if (key === 'ArrowUp' && nextRow > 0) {\n            e.preventDefault();\n            nextRow -= 1;\n          } else if (key === 'Home') {\n            e.preventDefault();\n            nextRow = 0;\n            nextColumn = 0;\n          } else if (key === 'End') {\n            e.preventDefault();\n            nextRow = maxRows - 1;\n            nextColumn = maxColumns - 1;\n          }\n\n          const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n          const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n          if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n            // Return original to avoid creating a new object if nothing\n            // changed.\n            return curActiveCell;\n          }\n\n          return newPosition;\n        });\n      }\n    },\n    [maxColumns, maxRows, onActiveCellChange],\n  );\n\n  const handleTableBlur: FocusEventHandler<HTMLTableElement> = useCallback((e) => {\n    if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n      setIsActive(false);\n      setActiveCell(DEFAULT_ACTIVE_CELL);\n    }\n  }, []);\n\n  return {\n    activeCell,\n    isActive,\n    onTableKeyDown: handleKeyDown,\n    onCellFocus: handleCellFocus,\n    onTableBlur: handleTableBlur,\n  };\n}\n"],"names":["useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","Set","isArrowKey","key","has"],"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;;AAGjC,SAAsBA,QAAQ,QAAQ,QAAQ;AA0B9C,MAAMC,sBAAyC;IAC7CC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,aAAa,IAAIC,IAAI;IAAC;IAAc;IAAa;IAAW;CAAY;AAE9E,SAASC,WAAWC,GAAG;IACrB,OAAOH,WAAWI,GAAG,CAACD;AACxB;AAEA;;;;;CAKC,GACD,OAAO"}

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

@@ -6,7 +6,7 @@ interface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavPr
         startIndex: number;
         endIndex: number;
     }>;
-    virtualTable: RefObject<TableVirtuosoHandle>;
+    virtualTable: RefObject<TableVirtuosoHandle | null>;
     maxRows: number;
     maxColumns: number;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAGtE,UAAU,mCAAoC,SAAQ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC;IACxG,YAAY,EAAE,gBAAgB,CAAC;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,YAAY,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mCAAmC,GAAG;IACvC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACvD,WAAW,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAClD,CAmFA"}
+{"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAGtE,UAAU,mCAAoC,SAAQ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC;IACxG,YAAY,EAAE,gBAAgB,CAAC;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,YAAY,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mCAAmC,GAAG;IACvC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACvD,WAAW,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAClD,CAmFA"}