@prairielearn/ui 3.2.0 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @prairielearn/ui
 
+## 3.2.1
+
+### Patch Changes
+
+- 3c4799a: Upgrade all JavaScript dependencies
+- bfcdf32: Return no-op onChange handler in useShiftClickCheckbox
+- Updated dependencies [3c4799a]
+  - @prairielearn/browser-utils@2.7.1
+  - @prairielearn/run@2.0.2
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/components/TanstackTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TanstackTable.d.ts","sourceRoot":"","sources":["../../src/components/TanstackTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,MAAM,EAAO,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAQlG,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAoE1C,UAAU,kBAAkB,CAAC,YAAY;IACvC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CAC3D;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,EAC1C,KAAK,EACL,KAAK,EACL,OAA4B,EAC5B,SAAc,EACd,cAAsC,EACtC,UAA8B,EAC9B,SAAS,EACV,EAAE,kBAAkB,CAAC,YAAY,CAAC,2CA4WlC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,EAC9C,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACT,GAAG,QAAQ,EACZ,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,UAAU,CAAC,EAAE,SAAS,CAAC;KACxB,CAAC;IACF,YAAY,EAAE;QACZ,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IACvE,qBAAqB,CAAC,EAAE,IAAI,CAC1B,gCAAgC,CAAC,YAAY,CAAC,EAC9C,OAAO,GAAG,eAAe,GAAG,aAAa,CAC1C,GAAG;QAAE,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACtD,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,2CA8FvC;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,EACT,EAAE;IACD,QAAQ,EAAE,MAAM,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAOA","sourcesContent":["import { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport type { Cell, Header, Row, Table } from '@tanstack/table-core';\nimport clsx from 'clsx';\nimport { type ComponentProps, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\nimport { useDebouncedCallback } from 'use-debounce';\n\nimport { run } from '@prairielearn/run';\n\nimport { ColumnManager } from './ColumnManager.js';\nimport {\n  TanstackTableDownloadButton,\n  type TanstackTableDownloadButtonProps,\n} from './TanstackTableDownloadButton.js';\nimport { TanstackTableHeaderCell } from './TanstackTableHeaderCell.js';\nimport { useAutoSizeColumns } from './useAutoSizeColumns.js';\n\nfunction TableCell<RowDataModel>({\n  cell,\n  rowIdx,\n  colIdx,\n  canSort,\n  canFilter,\n  wrapText,\n  handleGridKeyDown,\n}: {\n  cell: Cell<RowDataModel, unknown>;\n  rowIdx: number;\n  colIdx: number;\n  canSort: boolean;\n  canFilter: boolean;\n  wrapText: boolean;\n  handleGridKeyDown: (e: React.KeyboardEvent, rowIdx: number, colIdx: number) => void;\n}) {\n  return (\n    <td\n      key={cell.id}\n      tabIndex={0}\n      data-grid-cell-row={rowIdx}\n      data-grid-cell-col={colIdx}\n      className={clsx(!canSort && !canFilter && 'text-center')}\n      style={{\n        display: 'flex',\n        width: cell.column.getSize(),\n        minWidth: 0,\n        maxWidth: cell.column.getSize(),\n        flexShrink: 0,\n        position: cell.column.getIsPinned() === 'left' ? 'sticky' : undefined,\n        left: cell.column.getIsPinned() === 'left' ? cell.column.getStart() : undefined,\n        verticalAlign: 'middle',\n      }}\n      onKeyDown={(e) => handleGridKeyDown(e, rowIdx, colIdx)}\n    >\n      <div\n        style={{\n          display: 'block',\n          minWidth: 0,\n          maxWidth: '100%',\n          overflow: wrapText ? 'visible' : 'hidden',\n          textOverflow: wrapText ? undefined : 'ellipsis',\n          whiteSpace: wrapText ? 'normal' : 'nowrap',\n          flex: '1 1 0%',\n          width: 0, // Allow flex to control width, but start from 0\n        }}\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </div>\n    </td>\n  );\n}\n\nconst DefaultNoResultsState = (\n  <TanstackTableEmptyState iconName=\"bi-search\">\n    No results found matching your search criteria.\n  </TanstackTableEmptyState>\n);\n\nconst DefaultEmptyState = (\n  <TanstackTableEmptyState iconName=\"bi-eye-slash\">No results found.</TanstackTableEmptyState>\n);\n\ninterface TanstackTableProps<RowDataModel> {\n  table: Table<RowDataModel>;\n  title: string;\n  filters?: Record<string, (props: { header: Header<RowDataModel, unknown> }) => ReactNode>;\n  rowHeight?: number;\n  noResultsState?: ReactNode;\n  emptyState?: ReactNode;\n  scrollRef?: React.RefObject<HTMLDivElement | null> | null;\n}\n\nconst DEFAULT_FILTER_MAP = {};\n\n/**\n * A generic component that renders a full-width, resizeable Tanstack Table.\n * @param params\n * @param params.table - The table model\n * @param params.title - The title of the table\n * @param params.filters - The filters for the table\n * @param params.rowHeight - The height of the rows in the table\n * @param params.noResultsState - The no results state for the table\n * @param params.emptyState - The empty state for the table\n * @param params.scrollRef - Optional ref that will be attached to the scroll container element.\n */\nexport function TanstackTable<RowDataModel>({\n  table,\n  title,\n  filters = DEFAULT_FILTER_MAP,\n  rowHeight = 42,\n  noResultsState = DefaultNoResultsState,\n  emptyState = DefaultEmptyState,\n  scrollRef,\n}: TanstackTableProps<RowDataModel>) {\n  const parentRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLDivElement>(null);\n  const scrollContainerRef = scrollRef ?? parentRef;\n\n  const rows = [...table.getTopRows(), ...table.getCenterRows()];\n  const rowVirtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => rowHeight,\n    overscan: 10,\n    measureElement: (el) => el?.getBoundingClientRect().height ?? rowHeight,\n  });\n\n  const visibleColumns = table.getVisibleLeafColumns();\n  const centerColumns = visibleColumns.filter((col) => !col.getIsPinned());\n\n  const columnVirtualizer = useVirtualizer({\n    count: centerColumns.length,\n    estimateSize: (index) => centerColumns[index]?.getSize(),\n    // `useAutoSizeColumns` solves a different problem (happens once when the column set changes)\n    // and we don't need to measure the cells themselves, so we can use the default estimateSize.\n    getScrollElement: () => scrollContainerRef.current,\n    horizontal: true,\n    overscan: 3,\n  });\n\n  const virtualColumns = columnVirtualizer.getVirtualItems();\n\n  const virtualPaddingLeft = run(() => {\n    if (columnVirtualizer && virtualColumns?.length > 0) {\n      return virtualColumns[0]?.start ?? 0;\n    }\n    return null;\n  });\n\n  const virtualPaddingRight = run(() => {\n    if (columnVirtualizer && virtualColumns?.length > 0) {\n      return (\n        columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)\n      );\n    }\n    return null;\n  });\n\n  // Check if any column has wrapping enabled\n  const hasWrappedColumns = table.getAllLeafColumns().some((col) => col.columnDef.meta?.wrapText);\n\n  // Create callback for remeasuring after resize\n  const handleResizeEnd = useMemo(() => {\n    if (!hasWrappedColumns) return undefined;\n    return () => rowVirtualizer.measure();\n  }, [hasWrappedColumns, rowVirtualizer]);\n\n  const getVisibleCells = (row: Row<RowDataModel>) => [\n    ...row.getLeftVisibleCells(),\n    ...row.getCenterVisibleCells(),\n  ];\n\n  const handleGridKeyDown = (e: React.KeyboardEvent, rowIdx: number, colIdx: number) => {\n    const rowLength = getVisibleCells(rows[rowIdx]).length;\n    const adjacentCells: Record<KeyboardEvent['key'], { row: number; col: number }> = {\n      ArrowDown: {\n        row: Math.min(rows.length - 1, rowIdx + 1),\n        col: colIdx,\n      },\n      ArrowUp: {\n        row: Math.max(0, rowIdx - 1),\n        col: colIdx,\n      },\n      ArrowRight: {\n        row: rowIdx,\n        col: Math.min(rowLength - 1, colIdx + 1),\n      },\n      ArrowLeft: {\n        row: rowIdx,\n        col: Math.max(0, colIdx - 1),\n      },\n    };\n\n    const next = adjacentCells[e.key];\n\n    if (!next) {\n      return;\n    }\n\n    // Only handle arrow keys if we're in the cell itself, not in an interactive element\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'TD') {\n      // If we are on the leftmost column, we should allow left scrolling.\n      if (colIdx === 0 && e.key === 'ArrowLeft') {\n        return;\n      }\n\n      // If we are on the top row, we should allow up scrolling.\n      if (rowIdx === 0 && e.key === 'ArrowUp') {\n        return;\n      }\n\n      // If we are on the rightmost column, we should allow right scrolling.\n      if (colIdx === rowLength - 1 && e.key === 'ArrowRight') {\n        return;\n      }\n\n      e.preventDefault();\n      const selector = `[data-grid-cell-row=\"${next.row}\"][data-grid-cell-col=\"${next.col}\"]`;\n      const nextCell = tableRef.current?.querySelector(selector) as HTMLElement | null;\n      nextCell?.focus();\n    }\n  };\n\n  const virtualRows = rowVirtualizer.getVirtualItems();\n\n  const headerGroups = table.getHeaderGroups();\n\n  const leafHeaderGroup = headerGroups[headerGroups.length - 1];\n\n  const leftPinnedHeaders = leafHeaderGroup.headers.filter(\n    (header) => header.column.getIsPinned() === 'left',\n  );\n  const centerHeaders = leafHeaderGroup.headers.filter((header) => !header.column.getIsPinned());\n\n  const isTableResizing = leafHeaderGroup.headers.some((header) => header.column.getIsResizing());\n\n  // We toggle this here instead of in the parent since this component logically manages all UI for the table.\n  useEffect(() => {\n    document.body.classList.toggle('pl-ui-no-user-select', isTableResizing);\n  }, [isTableResizing]);\n\n  const hasAutoSized = useAutoSizeColumns(table, tableRef, filters);\n\n  // Re-measure the virtualizer when auto-sizing completes\n  useEffect(() => {\n    if (hasAutoSized) {\n      // https://github.com/NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect/issues/58\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-pass-ref-to-parent\n      columnVirtualizer.measure();\n    }\n  }, [columnVirtualizer, hasAutoSized]);\n\n  const displayedCount = table.getRowModel().rows.length;\n  const totalCount = table.getCoreRowModel().rows.length;\n\n  return (\n    <div style={{ position: 'relative' }} className=\"d-flex flex-column h-100\">\n      <div\n        ref={scrollContainerRef}\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          overflow: 'auto',\n          overflowAnchor: 'none',\n        }}\n      >\n        <div\n          ref={tableRef}\n          style={{\n            position: 'relative',\n            width: `max(${table.getTotalSize()}px, 100%)`,\n          }}\n        >\n          <table\n            className=\"table table-hover mb-0\"\n            style={{ display: 'grid', tableLayout: 'fixed' }}\n            aria-label={title}\n            role=\"grid\"\n          >\n            <thead\n              className=\"position-sticky top-0 w-100 border-top\"\n              style={{\n                display: 'grid',\n                zIndex: 1,\n                borderBottom: 'var(--bs-border-width) solid black',\n              }}\n            >\n              <tr\n                key={leafHeaderGroup.id}\n                className=\"d-flex w-100\"\n                style={{ minWidth: `${table.getTotalSize()}px` }}\n              >\n                {/* Left pinned columns */}\n                {leftPinnedHeaders.map((header) => {\n                  return (\n                    <TanstackTableHeaderCell\n                      key={header.id}\n                      header={header}\n                      filters={filters}\n                      table={table}\n                      handleResizeEnd={handleResizeEnd}\n                      isPinned=\"left\"\n                    />\n                  );\n                })}\n\n                {/* Virtual padding for left side of center columns */}\n                {virtualPaddingLeft ? (\n                  <th style={{ display: 'flex', width: virtualPaddingLeft }} />\n                ) : null}\n\n                {/* Virtualized center columns */}\n                {virtualColumns.map((virtualColumn) => {\n                  const header = centerHeaders[virtualColumn.index];\n                  if (!header) return null;\n\n                  return (\n                    <TanstackTableHeaderCell\n                      key={header.id}\n                      header={header}\n                      filters={filters}\n                      table={table}\n                      handleResizeEnd={handleResizeEnd}\n                      isPinned={false}\n                    />\n                  );\n                })}\n\n                {/* Virtual padding for right side of center columns */}\n                {virtualPaddingRight ? (\n                  <th style={{ display: 'flex', width: virtualPaddingRight }} />\n                ) : null}\n\n                {/* Filler to span remaining width */}\n                <th\n                  tabIndex={-1}\n                  className=\"d-flex flex-grow-1 p-0\"\n                  style={{ minWidth: 0 }}\n                  aria-hidden=\"true\"\n                />\n              </tr>\n            </thead>\n            <tbody\n              className=\"position-relative w-100\"\n              style={{\n                display: 'grid',\n                height: `${rowVirtualizer.getTotalSize()}px`,\n              }}\n            >\n              {virtualRows.map((virtualRow) => {\n                const row = rows[virtualRow.index];\n                const rowIdx = virtualRow.index;\n                const leftPinnedCells = row.getLeftVisibleCells();\n                const centerCells = row.getCenterVisibleCells();\n\n                let currentColIdx = 0;\n\n                return (\n                  <tr\n                    key={row.id}\n                    ref={(node) => rowVirtualizer.measureElement(node)}\n                    data-index={virtualRow.index}\n                    className=\"d-flex position-absolute w-100\"\n                    style={{\n                      transform: `translateY(${virtualRow.start}px)`,\n                      minWidth: `${table.getTotalSize()}px`,\n                    }}\n                  >\n                    {leftPinnedCells.map((cell) => {\n                      const colIdx = currentColIdx++;\n                      const canSort = cell.column.getCanSort();\n                      const canFilter = cell.column.getCanFilter();\n                      const wrapText = cell.column.columnDef.meta?.wrapText ?? false;\n\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          cell={cell}\n                          rowIdx={rowIdx}\n                          colIdx={colIdx}\n                          canSort={canSort}\n                          canFilter={canFilter}\n                          wrapText={wrapText}\n                          handleGridKeyDown={handleGridKeyDown}\n                        />\n                      );\n                    })}\n\n                    {virtualPaddingLeft ? (\n                      <td style={{ display: 'flex', width: virtualPaddingLeft }} />\n                    ) : null}\n\n                    {virtualColumns.map((virtualColumn) => {\n                      const cell = centerCells[virtualColumn.index];\n                      if (!cell) return null;\n\n                      const colIdx = currentColIdx++;\n                      const canSort = cell.column.getCanSort();\n                      const canFilter = cell.column.getCanFilter();\n                      const wrapText = cell.column.columnDef.meta?.wrapText ?? false;\n\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          cell={cell}\n                          rowIdx={rowIdx}\n                          colIdx={colIdx}\n                          canSort={canSort}\n                          canFilter={canFilter}\n                          wrapText={wrapText}\n                          handleGridKeyDown={handleGridKeyDown}\n                        />\n                      );\n                    })}\n\n                    {virtualPaddingRight ? (\n                      <td style={{ display: 'flex', width: virtualPaddingRight }} />\n                    ) : null}\n\n                    {/* Filler to span remaining width */}\n                    <td\n                      tabIndex={-1}\n                      className=\"d-flex flex-grow-1 p-0\"\n                      style={{ minWidth: 0 }}\n                      aria-hidden=\"true\"\n                    />\n                  </tr>\n                );\n              })}\n            </tbody>\n          </table>\n        </div>\n      </div>\n      {table.getVisibleLeafColumns().length === 0 || displayedCount === 0 ? (\n        <div>\n          <div\n            className=\"d-flex flex-column justify-content-center align-items-center p-4\"\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              // Allow pointer events (e.g. scrolling) to reach the underlying table.\n              pointerEvents: 'none',\n            }}\n            role=\"status\"\n            aria-live=\"polite\"\n          >\n            <div\n              className=\"col-lg-6\"\n              style={{\n                // Allow selecting and interacting with the empty state content.\n                pointerEvents: 'auto',\n              }}\n            >\n              {table.getVisibleLeafColumns().length === 0 ? (\n                <TanstackTableEmptyState iconName=\"bi-eye-slash\">\n                  No columns selected. Use the View menu to show columns.\n                </TanstackTableEmptyState>\n              ) : displayedCount === 0 ? (\n                totalCount > 0 ? (\n                  noResultsState\n                ) : (\n                  emptyState\n                )\n              ) : null}\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A generic component that wraps the TanstackTable component in a card.\n * @param params\n * @param params.table - The table model\n * @param params.title - The title of the card\n * @param params.className - The class name to apply to the card\n * @param params.style - The style to apply to the card\n * @param params.singularLabel - The singular label for a single row in the table, e.g. \"student\"\n * @param params.pluralLabel - The plural label for multiple rows in the table, e.g. \"students\"\n * @param params.headerButtons - The buttons to display in the header\n * @param params.columnManager - Optional configuration for the column manager. See {@link ColumnManager} for more details.\n * @param params.columnManager.buttons - The buttons to display next to the column manager (View button)\n * @param params.columnManager.topContent - Optional content to display at the top of the column manager (View) dropdown menu\n * @param params.globalFilter - Configuration for the global filter\n * @param params.globalFilter.placeholder - Placeholder text for the search input\n * @param params.tableOptions - Specific options for the table. See {@link TanstackTableProps} for more details.\n * @param params.downloadButtonOptions - Specific options for the download button. See {@link TanstackTableDownloadButtonProps} for more details.\n */\nexport function TanstackTableCard<RowDataModel>({\n  table,\n  title,\n  singularLabel,\n  pluralLabel,\n  headerButtons,\n  columnManager,\n  globalFilter,\n  tableOptions,\n  downloadButtonOptions,\n  className,\n  ...divProps\n}: {\n  table: Table<RowDataModel>;\n  title: string;\n  singularLabel: string;\n  pluralLabel: string;\n  headerButtons?: ReactNode;\n  columnManager?: {\n    buttons?: ReactNode;\n    topContent?: ReactNode;\n  };\n  globalFilter: {\n    placeholder: string;\n  };\n  tableOptions: Partial<Omit<TanstackTableProps<RowDataModel>, 'table'>>;\n  downloadButtonOptions?: Omit<\n    TanstackTableDownloadButtonProps<RowDataModel>,\n    'table' | 'singularLabel' | 'pluralLabel'\n  > & { pluralLabel?: string; singularLabel?: string };\n} & Omit<ComponentProps<'div'>, 'class'>) {\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const [inputValue, setInputValue] = useState(\n    () => (table.getState().globalFilter as string) ?? '',\n  );\n\n  // Debounce the filter update\n  const debouncedSetFilter = useDebouncedCallback((value: string) => {\n    table.setGlobalFilter(value);\n  }, 150);\n\n  // Focus the search input when Ctrl+F is pressed\n  useEffect(() => {\n    function onKeyDown(event: KeyboardEvent) {\n      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'f') {\n        if (searchInputRef.current && searchInputRef.current !== document.activeElement) {\n          searchInputRef.current.focus();\n          event.preventDefault();\n        }\n      }\n    }\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, []);\n\n  const displayedCount = table.getRowModel().rows.length;\n  const totalCount = table.getCoreRowModel().rows.length;\n\n  return (\n    <div className={clsx('card d-flex flex-column', className)} {...divProps}>\n      <div className=\"card-header bg-primary text-white\">\n        <div className=\"d-flex align-items-center justify-content-between gap-2\">\n          <div>{title}</div>\n          <div className=\"d-flex gap-2\">\n            {headerButtons}\n\n            {downloadButtonOptions && (\n              <TanstackTableDownloadButton\n                table={table}\n                pluralLabel={pluralLabel}\n                singularLabel={singularLabel}\n                {...downloadButtonOptions}\n              />\n            )}\n          </div>\n        </div>\n      </div>\n      <div className=\"card-body d-flex flex-row flex-wrap flex-grow-0 align-items-center gap-2\">\n        <div className=\"position-relative w-100\" style={{ maxWidth: 'min(400px, 100%)' }}>\n          <input\n            ref={searchInputRef}\n            type=\"text\"\n            className=\"form-control pl-ui-tanstack-table-search-input pl-ui-tanstack-table-focusable-shadow\"\n            aria-label={globalFilter.placeholder}\n            placeholder={globalFilter.placeholder}\n            value={inputValue}\n            autoComplete=\"off\"\n            onInput={(e) => {\n              const value = e.currentTarget.value;\n              setInputValue(value);\n              debouncedSetFilter(value);\n            }}\n          />\n          {inputValue && (\n            <OverlayTrigger overlay={<Tooltip>Clear search</Tooltip>}>\n              <button\n                type=\"button\"\n                className=\"btn btn-floating-icon\"\n                aria-label=\"Clear search\"\n                onClick={() => {\n                  setInputValue('');\n                  debouncedSetFilter.cancel();\n                  table.setGlobalFilter('');\n                }}\n              >\n                <i className=\"bi bi-x-circle-fill\" aria-hidden=\"true\" />\n              </button>\n            </OverlayTrigger>\n          )}\n        </div>\n        <div className=\"d-flex flex-wrap flex-row align-items-center gap-2\">\n          <ColumnManager table={table} topContent={columnManager?.topContent} />\n          {columnManager?.buttons}\n        </div>\n        <div className=\"ms-auto text-muted text-nowrap\">\n          Showing {displayedCount} of {totalCount} {totalCount === 1 ? singularLabel : pluralLabel}\n        </div>\n      </div>\n      <div className=\"flex-grow-1\">\n        <TanstackTable table={table} title={title} {...tableOptions} />\n      </div>\n    </div>\n  );\n}\n\nexport function TanstackTableEmptyState({\n  iconName,\n  children,\n}: {\n  iconName: `bi-${string}`;\n  children: ReactNode;\n}) {\n  return (\n    <div className=\"d-flex flex-column justify-content-center align-items-center text-muted\">\n      <i className={clsx('bi', iconName, 'display-4 mb-2')} aria-hidden=\"true\" />\n      <div>{children}</div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"TanstackTable.d.ts","sourceRoot":"","sources":["../../src/components/TanstackTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,MAAM,EAAO,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAQlG,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAoE1C,UAAU,kBAAkB,CAAC,YAAY;IACvC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CAC3D;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,EAC1C,KAAK,EACL,KAAK,EACL,OAA4B,EAC5B,SAAc,EACd,cAAsC,EACtC,UAA8B,EAC9B,SAAS,EACV,EAAE,kBAAkB,CAAC,YAAY,CAAC,2CA2WlC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,EAC9C,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACT,GAAG,QAAQ,EACZ,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,SAAS,CAAC;QACpB,UAAU,CAAC,EAAE,SAAS,CAAC;KACxB,CAAC;IACF,YAAY,EAAE;QACZ,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;IACvE,qBAAqB,CAAC,EAAE,IAAI,CAC1B,gCAAgC,CAAC,YAAY,CAAC,EAC9C,OAAO,GAAG,eAAe,GAAG,aAAa,CAC1C,GAAG;QAAE,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACtD,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,2CA8FvC;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,EACT,EAAE;IACD,QAAQ,EAAE,MAAM,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAOA","sourcesContent":["import { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport type { Cell, Header, Row, Table } from '@tanstack/table-core';\nimport clsx from 'clsx';\nimport { type ComponentProps, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\nimport { useDebouncedCallback } from 'use-debounce';\n\nimport { run } from '@prairielearn/run';\n\nimport { ColumnManager } from './ColumnManager.js';\nimport {\n  TanstackTableDownloadButton,\n  type TanstackTableDownloadButtonProps,\n} from './TanstackTableDownloadButton.js';\nimport { TanstackTableHeaderCell } from './TanstackTableHeaderCell.js';\nimport { useAutoSizeColumns } from './useAutoSizeColumns.js';\n\nfunction TableCell<RowDataModel>({\n  cell,\n  rowIdx,\n  colIdx,\n  canSort,\n  canFilter,\n  wrapText,\n  handleGridKeyDown,\n}: {\n  cell: Cell<RowDataModel, unknown>;\n  rowIdx: number;\n  colIdx: number;\n  canSort: boolean;\n  canFilter: boolean;\n  wrapText: boolean;\n  handleGridKeyDown: (e: React.KeyboardEvent, rowIdx: number, colIdx: number) => void;\n}) {\n  return (\n    <td\n      key={cell.id}\n      tabIndex={0}\n      data-grid-cell-row={rowIdx}\n      data-grid-cell-col={colIdx}\n      className={clsx(!canSort && !canFilter && 'text-center')}\n      style={{\n        display: 'flex',\n        width: cell.column.getSize(),\n        minWidth: 0,\n        maxWidth: cell.column.getSize(),\n        flexShrink: 0,\n        position: cell.column.getIsPinned() === 'left' ? 'sticky' : undefined,\n        left: cell.column.getIsPinned() === 'left' ? cell.column.getStart() : undefined,\n        verticalAlign: 'middle',\n      }}\n      onKeyDown={(e) => handleGridKeyDown(e, rowIdx, colIdx)}\n    >\n      <div\n        style={{\n          display: 'block',\n          minWidth: 0,\n          maxWidth: '100%',\n          overflow: wrapText ? 'visible' : 'hidden',\n          textOverflow: wrapText ? undefined : 'ellipsis',\n          whiteSpace: wrapText ? 'normal' : 'nowrap',\n          flex: '1 1 0%',\n          width: 0, // Allow flex to control width, but start from 0\n        }}\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </div>\n    </td>\n  );\n}\n\nconst DefaultNoResultsState = (\n  <TanstackTableEmptyState iconName=\"bi-search\">\n    No results found matching your search criteria.\n  </TanstackTableEmptyState>\n);\n\nconst DefaultEmptyState = (\n  <TanstackTableEmptyState iconName=\"bi-eye-slash\">No results found.</TanstackTableEmptyState>\n);\n\ninterface TanstackTableProps<RowDataModel> {\n  table: Table<RowDataModel>;\n  title: string;\n  filters?: Record<string, (props: { header: Header<RowDataModel, unknown> }) => ReactNode>;\n  rowHeight?: number;\n  noResultsState?: ReactNode;\n  emptyState?: ReactNode;\n  scrollRef?: React.RefObject<HTMLDivElement | null> | null;\n}\n\nconst DEFAULT_FILTER_MAP = {};\n\n/**\n * A generic component that renders a full-width, resizeable Tanstack Table.\n * @param params\n * @param params.table - The table model\n * @param params.title - The title of the table\n * @param params.filters - The filters for the table\n * @param params.rowHeight - The height of the rows in the table\n * @param params.noResultsState - The no results state for the table\n * @param params.emptyState - The empty state for the table\n * @param params.scrollRef - Optional ref that will be attached to the scroll container element.\n */\nexport function TanstackTable<RowDataModel>({\n  table,\n  title,\n  filters = DEFAULT_FILTER_MAP,\n  rowHeight = 42,\n  noResultsState = DefaultNoResultsState,\n  emptyState = DefaultEmptyState,\n  scrollRef,\n}: TanstackTableProps<RowDataModel>) {\n  const parentRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLDivElement>(null);\n  const scrollContainerRef = scrollRef ?? parentRef;\n\n  const rows = [...table.getTopRows(), ...table.getCenterRows()];\n  const rowVirtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => rowHeight,\n    overscan: 10,\n    measureElement: (el) => el?.getBoundingClientRect().height ?? rowHeight,\n  });\n\n  const visibleColumns = table.getVisibleLeafColumns();\n  const centerColumns = visibleColumns.filter((col) => !col.getIsPinned());\n\n  const columnVirtualizer = useVirtualizer({\n    count: centerColumns.length,\n    estimateSize: (index) => centerColumns[index]?.getSize(),\n    // `useAutoSizeColumns` solves a different problem (happens once when the column set changes)\n    // and we don't need to measure the cells themselves, so we can use the default estimateSize.\n    getScrollElement: () => scrollContainerRef.current,\n    horizontal: true,\n    overscan: 3,\n  });\n\n  const virtualColumns = columnVirtualizer.getVirtualItems();\n\n  const virtualPaddingLeft = run(() => {\n    if (columnVirtualizer && virtualColumns?.length > 0) {\n      return virtualColumns[0]?.start ?? 0;\n    }\n    return null;\n  });\n\n  const virtualPaddingRight = run(() => {\n    if (columnVirtualizer && virtualColumns?.length > 0) {\n      return (\n        columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)\n      );\n    }\n    return null;\n  });\n\n  // Check if any column has wrapping enabled\n  const hasWrappedColumns = table.getAllLeafColumns().some((col) => col.columnDef.meta?.wrapText);\n\n  // Create callback for remeasuring after resize\n  const handleResizeEnd = useMemo(() => {\n    if (!hasWrappedColumns) return undefined;\n    return () => rowVirtualizer.measure();\n  }, [hasWrappedColumns, rowVirtualizer]);\n\n  const getVisibleCells = (row: Row<RowDataModel>) => [\n    ...row.getLeftVisibleCells(),\n    ...row.getCenterVisibleCells(),\n  ];\n\n  const handleGridKeyDown = (e: React.KeyboardEvent, rowIdx: number, colIdx: number) => {\n    const rowLength = getVisibleCells(rows[rowIdx]).length;\n    const adjacentCells: Record<KeyboardEvent['key'], { row: number; col: number }> = {\n      ArrowDown: {\n        row: Math.min(rows.length - 1, rowIdx + 1),\n        col: colIdx,\n      },\n      ArrowUp: {\n        row: Math.max(0, rowIdx - 1),\n        col: colIdx,\n      },\n      ArrowRight: {\n        row: rowIdx,\n        col: Math.min(rowLength - 1, colIdx + 1),\n      },\n      ArrowLeft: {\n        row: rowIdx,\n        col: Math.max(0, colIdx - 1),\n      },\n    };\n\n    const next = adjacentCells[e.key];\n\n    if (!next) {\n      return;\n    }\n\n    // Only handle arrow keys if we're in the cell itself, not in an interactive element\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'TD') {\n      // If we are on the leftmost column, we should allow left scrolling.\n      if (colIdx === 0 && e.key === 'ArrowLeft') {\n        return;\n      }\n\n      // If we are on the top row, we should allow up scrolling.\n      if (rowIdx === 0 && e.key === 'ArrowUp') {\n        return;\n      }\n\n      // If we are on the rightmost column, we should allow right scrolling.\n      if (colIdx === rowLength - 1 && e.key === 'ArrowRight') {\n        return;\n      }\n\n      e.preventDefault();\n      const selector = `[data-grid-cell-row=\"${next.row}\"][data-grid-cell-col=\"${next.col}\"]`;\n      const nextCell = tableRef.current?.querySelector(selector) as HTMLElement | null;\n      nextCell?.focus();\n    }\n  };\n\n  const virtualRows = rowVirtualizer.getVirtualItems();\n\n  const headerGroups = table.getHeaderGroups();\n\n  const leafHeaderGroup = headerGroups[headerGroups.length - 1];\n\n  const leftPinnedHeaders = leafHeaderGroup.headers.filter(\n    (header) => header.column.getIsPinned() === 'left',\n  );\n  const centerHeaders = leafHeaderGroup.headers.filter((header) => !header.column.getIsPinned());\n\n  const isTableResizing = leafHeaderGroup.headers.some((header) => header.column.getIsResizing());\n\n  // We toggle this here instead of in the parent since this component logically manages all UI for the table.\n  useEffect(() => {\n    document.body.classList.toggle('pl-ui-no-user-select', isTableResizing);\n  }, [isTableResizing]);\n\n  const hasAutoSized = useAutoSizeColumns(table, tableRef, filters);\n\n  // Re-measure the virtualizer when auto-sizing completes\n  useEffect(() => {\n    if (hasAutoSized) {\n      // https://github.com/NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect/issues/58\n      columnVirtualizer.measure();\n    }\n  }, [columnVirtualizer, hasAutoSized]);\n\n  const displayedCount = table.getRowModel().rows.length;\n  const totalCount = table.getCoreRowModel().rows.length;\n\n  return (\n    <div style={{ position: 'relative' }} className=\"d-flex flex-column h-100\">\n      <div\n        ref={scrollContainerRef}\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          overflow: 'auto',\n          overflowAnchor: 'none',\n        }}\n      >\n        <div\n          ref={tableRef}\n          style={{\n            position: 'relative',\n            width: `max(${table.getTotalSize()}px, 100%)`,\n          }}\n        >\n          <table\n            className=\"table table-hover mb-0\"\n            style={{ display: 'grid', tableLayout: 'fixed' }}\n            aria-label={title}\n            role=\"grid\"\n          >\n            <thead\n              className=\"position-sticky top-0 w-100 border-top\"\n              style={{\n                display: 'grid',\n                zIndex: 1,\n                borderBottom: 'var(--bs-border-width) solid black',\n              }}\n            >\n              <tr\n                key={leafHeaderGroup.id}\n                className=\"d-flex w-100\"\n                style={{ minWidth: `${table.getTotalSize()}px` }}\n              >\n                {/* Left pinned columns */}\n                {leftPinnedHeaders.map((header) => {\n                  return (\n                    <TanstackTableHeaderCell\n                      key={header.id}\n                      header={header}\n                      filters={filters}\n                      table={table}\n                      handleResizeEnd={handleResizeEnd}\n                      isPinned=\"left\"\n                    />\n                  );\n                })}\n\n                {/* Virtual padding for left side of center columns */}\n                {virtualPaddingLeft ? (\n                  <th style={{ display: 'flex', width: virtualPaddingLeft }} />\n                ) : null}\n\n                {/* Virtualized center columns */}\n                {virtualColumns.map((virtualColumn) => {\n                  const header = centerHeaders[virtualColumn.index];\n                  if (!header) return null;\n\n                  return (\n                    <TanstackTableHeaderCell\n                      key={header.id}\n                      header={header}\n                      filters={filters}\n                      table={table}\n                      handleResizeEnd={handleResizeEnd}\n                      isPinned={false}\n                    />\n                  );\n                })}\n\n                {/* Virtual padding for right side of center columns */}\n                {virtualPaddingRight ? (\n                  <th style={{ display: 'flex', width: virtualPaddingRight }} />\n                ) : null}\n\n                {/* Filler to span remaining width */}\n                <th\n                  tabIndex={-1}\n                  className=\"d-flex flex-grow-1 p-0\"\n                  style={{ minWidth: 0 }}\n                  aria-hidden=\"true\"\n                />\n              </tr>\n            </thead>\n            <tbody\n              className=\"position-relative w-100\"\n              style={{\n                display: 'grid',\n                height: `${rowVirtualizer.getTotalSize()}px`,\n              }}\n            >\n              {virtualRows.map((virtualRow) => {\n                const row = rows[virtualRow.index];\n                const rowIdx = virtualRow.index;\n                const leftPinnedCells = row.getLeftVisibleCells();\n                const centerCells = row.getCenterVisibleCells();\n\n                let currentColIdx = 0;\n\n                return (\n                  <tr\n                    key={row.id}\n                    ref={(node) => rowVirtualizer.measureElement(node)}\n                    data-index={virtualRow.index}\n                    className=\"d-flex position-absolute w-100\"\n                    style={{\n                      transform: `translateY(${virtualRow.start}px)`,\n                      minWidth: `${table.getTotalSize()}px`,\n                    }}\n                  >\n                    {leftPinnedCells.map((cell) => {\n                      const colIdx = currentColIdx++;\n                      const canSort = cell.column.getCanSort();\n                      const canFilter = cell.column.getCanFilter();\n                      const wrapText = cell.column.columnDef.meta?.wrapText ?? false;\n\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          cell={cell}\n                          rowIdx={rowIdx}\n                          colIdx={colIdx}\n                          canSort={canSort}\n                          canFilter={canFilter}\n                          wrapText={wrapText}\n                          handleGridKeyDown={handleGridKeyDown}\n                        />\n                      );\n                    })}\n\n                    {virtualPaddingLeft ? (\n                      <td style={{ display: 'flex', width: virtualPaddingLeft }} />\n                    ) : null}\n\n                    {virtualColumns.map((virtualColumn) => {\n                      const cell = centerCells[virtualColumn.index];\n                      if (!cell) return null;\n\n                      const colIdx = currentColIdx++;\n                      const canSort = cell.column.getCanSort();\n                      const canFilter = cell.column.getCanFilter();\n                      const wrapText = cell.column.columnDef.meta?.wrapText ?? false;\n\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          cell={cell}\n                          rowIdx={rowIdx}\n                          colIdx={colIdx}\n                          canSort={canSort}\n                          canFilter={canFilter}\n                          wrapText={wrapText}\n                          handleGridKeyDown={handleGridKeyDown}\n                        />\n                      );\n                    })}\n\n                    {virtualPaddingRight ? (\n                      <td style={{ display: 'flex', width: virtualPaddingRight }} />\n                    ) : null}\n\n                    {/* Filler to span remaining width */}\n                    <td\n                      tabIndex={-1}\n                      className=\"d-flex flex-grow-1 p-0\"\n                      style={{ minWidth: 0 }}\n                      aria-hidden=\"true\"\n                    />\n                  </tr>\n                );\n              })}\n            </tbody>\n          </table>\n        </div>\n      </div>\n      {table.getVisibleLeafColumns().length === 0 || displayedCount === 0 ? (\n        <div>\n          <div\n            className=\"d-flex flex-column justify-content-center align-items-center p-4\"\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              // Allow pointer events (e.g. scrolling) to reach the underlying table.\n              pointerEvents: 'none',\n            }}\n            role=\"status\"\n            aria-live=\"polite\"\n          >\n            <div\n              className=\"col-lg-6\"\n              style={{\n                // Allow selecting and interacting with the empty state content.\n                pointerEvents: 'auto',\n              }}\n            >\n              {table.getVisibleLeafColumns().length === 0 ? (\n                <TanstackTableEmptyState iconName=\"bi-eye-slash\">\n                  No columns selected. Use the View menu to show columns.\n                </TanstackTableEmptyState>\n              ) : displayedCount === 0 ? (\n                totalCount > 0 ? (\n                  noResultsState\n                ) : (\n                  emptyState\n                )\n              ) : null}\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A generic component that wraps the TanstackTable component in a card.\n * @param params\n * @param params.table - The table model\n * @param params.title - The title of the card\n * @param params.className - The class name to apply to the card\n * @param params.style - The style to apply to the card\n * @param params.singularLabel - The singular label for a single row in the table, e.g. \"student\"\n * @param params.pluralLabel - The plural label for multiple rows in the table, e.g. \"students\"\n * @param params.headerButtons - The buttons to display in the header\n * @param params.columnManager - Optional configuration for the column manager. See {@link ColumnManager} for more details.\n * @param params.columnManager.buttons - The buttons to display next to the column manager (View button)\n * @param params.columnManager.topContent - Optional content to display at the top of the column manager (View) dropdown menu\n * @param params.globalFilter - Configuration for the global filter\n * @param params.globalFilter.placeholder - Placeholder text for the search input\n * @param params.tableOptions - Specific options for the table. See {@link TanstackTableProps} for more details.\n * @param params.downloadButtonOptions - Specific options for the download button. See {@link TanstackTableDownloadButtonProps} for more details.\n */\nexport function TanstackTableCard<RowDataModel>({\n  table,\n  title,\n  singularLabel,\n  pluralLabel,\n  headerButtons,\n  columnManager,\n  globalFilter,\n  tableOptions,\n  downloadButtonOptions,\n  className,\n  ...divProps\n}: {\n  table: Table<RowDataModel>;\n  title: string;\n  singularLabel: string;\n  pluralLabel: string;\n  headerButtons?: ReactNode;\n  columnManager?: {\n    buttons?: ReactNode;\n    topContent?: ReactNode;\n  };\n  globalFilter: {\n    placeholder: string;\n  };\n  tableOptions: Partial<Omit<TanstackTableProps<RowDataModel>, 'table'>>;\n  downloadButtonOptions?: Omit<\n    TanstackTableDownloadButtonProps<RowDataModel>,\n    'table' | 'singularLabel' | 'pluralLabel'\n  > & { pluralLabel?: string; singularLabel?: string };\n} & Omit<ComponentProps<'div'>, 'class'>) {\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const [inputValue, setInputValue] = useState(\n    () => (table.getState().globalFilter as string) ?? '',\n  );\n\n  // Debounce the filter update\n  const debouncedSetFilter = useDebouncedCallback((value: string) => {\n    table.setGlobalFilter(value);\n  }, 150);\n\n  // Focus the search input when Ctrl+F is pressed\n  useEffect(() => {\n    function onKeyDown(event: KeyboardEvent) {\n      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'f') {\n        if (searchInputRef.current && searchInputRef.current !== document.activeElement) {\n          searchInputRef.current.focus();\n          event.preventDefault();\n        }\n      }\n    }\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, []);\n\n  const displayedCount = table.getRowModel().rows.length;\n  const totalCount = table.getCoreRowModel().rows.length;\n\n  return (\n    <div className={clsx('card d-flex flex-column', className)} {...divProps}>\n      <div className=\"card-header bg-primary text-white\">\n        <div className=\"d-flex align-items-center justify-content-between gap-2\">\n          <div>{title}</div>\n          <div className=\"d-flex gap-2\">\n            {headerButtons}\n\n            {downloadButtonOptions && (\n              <TanstackTableDownloadButton\n                table={table}\n                pluralLabel={pluralLabel}\n                singularLabel={singularLabel}\n                {...downloadButtonOptions}\n              />\n            )}\n          </div>\n        </div>\n      </div>\n      <div className=\"card-body d-flex flex-row flex-wrap flex-grow-0 align-items-center gap-2\">\n        <div className=\"position-relative w-100\" style={{ maxWidth: 'min(400px, 100%)' }}>\n          <input\n            ref={searchInputRef}\n            type=\"text\"\n            className=\"form-control pl-ui-tanstack-table-search-input pl-ui-tanstack-table-focusable-shadow\"\n            aria-label={globalFilter.placeholder}\n            placeholder={globalFilter.placeholder}\n            value={inputValue}\n            autoComplete=\"off\"\n            onInput={(e) => {\n              const value = e.currentTarget.value;\n              setInputValue(value);\n              debouncedSetFilter(value);\n            }}\n          />\n          {inputValue && (\n            <OverlayTrigger overlay={<Tooltip>Clear search</Tooltip>}>\n              <button\n                type=\"button\"\n                className=\"btn btn-floating-icon\"\n                aria-label=\"Clear search\"\n                onClick={() => {\n                  setInputValue('');\n                  debouncedSetFilter.cancel();\n                  table.setGlobalFilter('');\n                }}\n              >\n                <i className=\"bi bi-x-circle-fill\" aria-hidden=\"true\" />\n              </button>\n            </OverlayTrigger>\n          )}\n        </div>\n        <div className=\"d-flex flex-wrap flex-row align-items-center gap-2\">\n          <ColumnManager table={table} topContent={columnManager?.topContent} />\n          {columnManager?.buttons}\n        </div>\n        <div className=\"ms-auto text-muted text-nowrap\">\n          Showing {displayedCount} of {totalCount} {totalCount === 1 ? singularLabel : pluralLabel}\n        </div>\n      </div>\n      <div className=\"flex-grow-1\">\n        <TanstackTable table={table} title={title} {...tableOptions} />\n      </div>\n    </div>\n  );\n}\n\nexport function TanstackTableEmptyState({\n  iconName,\n  children,\n}: {\n  iconName: `bi-${string}`;\n  children: ReactNode;\n}) {\n  return (\n    <div className=\"d-flex flex-column justify-content-center align-items-center text-muted\">\n      <i className={clsx('bi', iconName, 'display-4 mb-2')} aria-hidden=\"true\" />\n      <div>{children}</div>\n    </div>\n  );\n}\n"]}

package/dist/components/TanstackTable.js

@@ -154,7 +154,6 @@ export function TanstackTable({ table, title, filters = DEFAULT_FILTER_MAP, rowH
     useEffect(() => {
         if (hasAutoSized) {
             // https://github.com/NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect/issues/58
-            // eslint-disable-next-line react-you-might-not-need-an-effect/no-pass-ref-to-parent
             columnVirtualizer.measure();
         }
     }, [columnVirtualizer, hasAutoSized]);

package/dist/components/TanstackTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TanstackTable.js","sourceRoot":"","sources":["../../src/components/TanstackTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAuC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,cAAc,MAAM,gCAAgC,CAAC;AAC5D,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EACL,2BAA2B,GAE5B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,SAAS,SAAS,CAAe,EAC/B,IAAI,EACJ,MAAM,EACN,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,iBAAiB,GASlB,EAAE;IACD,OAAO,CACL,aAEE,QAAQ,EAAE,CAAC,wBACS,MAAM,wBACN,MAAM,EAC1B,SAAS,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,EACxD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YAC5B,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YAC/B,UAAU,EAAE,CAAC;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;YACrE,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS;YAC/E,aAAa,EAAE,QAAQ;SACxB,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,YAEtD,cACE,KAAK,EAAE;gBACL,OAAO,EAAE,OAAO;gBAChB,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,MAAM;gBAChB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;gBACzC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU;gBAC/C,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;gBAC1C,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,CAAC,EAAE,gDAAgD;aAC3D,YAEA,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,GACtD,IA9BD,IAAI,CAAC,EAAE,CA+BT,CACN,CAAC;AAAA,CACH;AAED,MAAM,qBAAqB,GAAG,CAC5B,KAAC,uBAAuB,IAAC,QAAQ,EAAC,WAAW,gEAEnB,CAC3B,CAAC;AAEF,MAAM,iBAAiB,GAAG,CACxB,KAAC,uBAAuB,IAAC,QAAQ,EAAC,cAAc,kCAA4C,CAC7F,CAAC;AAYF,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;;;;;;;;GAUG;AACH,MAAM,UAAU,aAAa,CAAe,EAC1C,KAAK,EACL,KAAK,EACL,OAAO,GAAG,kBAAkB,EAC5B,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,qBAAqB,EACtC,UAAU,GAAG,iBAAiB,EAC9B,SAAS,GACwB,EAAE;IACnC,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,kBAAkB,GAAG,SAAS,IAAI,SAAS,CAAC;IAElD,MAAM,IAAI,GAAG,CAAC,GAAG,KAAK,CAAC,UAAU,EAAE,EAAE,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC;IAC/D,MAAM,cAAc,GAAG,cAAc,CAAC;QACpC,KAAK,EAAE,IAAI,CAAC,MAAM;QAClB,gBAAgB,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO;QAClD,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS;QAC7B,QAAQ,EAAE,EAAE;QACZ,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,qBAAqB,EAAE,CAAC,MAAM,IAAI,SAAS;KACxE,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;IACrD,MAAM,aAAa,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;IAEzE,MAAM,iBAAiB,GAAG,cAAc,CAAC;QACvC,KAAK,EAAE,aAAa,CAAC,MAAM;QAC3B,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE;QACxD,6FAA6F;QAC7F,6FAA6F;QAC7F,gBAAgB,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO;QAClD,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,CAAC;KACZ,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,iBAAiB,CAAC,eAAe,EAAE,CAAC;IAE3D,MAAM,kBAAkB,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACnC,IAAI,iBAAiB,IAAI,cAAc,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,OAAO,cAAc,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC;QACvC,CAAC;QACD,OAAO,IAAI,CAAC;IAAA,CACb,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACpC,IAAI,iBAAiB,IAAI,cAAc,EAAE,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,OAAO,CACL,iBAAiB,CAAC,YAAY,EAAE,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,CACzF,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC;IAAA,CACb,CAAC,CAAC;IAEH,2CAA2C;IAC3C,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAEhG,+CAA+C;IAC/C,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;QACpC,IAAI,CAAC,iBAAiB;YAAE,OAAO,SAAS,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;IAAA,CACvC,EAAE,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC,CAAC;IAExC,MAAM,eAAe,GAAG,CAAC,GAAsB,EAAE,EAAE,CAAC;QAClD,GAAG,GAAG,CAAC,mBAAmB,EAAE;QAC5B,GAAG,GAAG,CAAC,qBAAqB,EAAE;KAC/B,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAsB,EAAE,MAAc,EAAE,MAAc,EAAE,EAAE,CAAC;QACpF,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QACvD,MAAM,aAAa,GAA+D;YAChF,SAAS,EAAE;gBACT,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;gBAC1C,GAAG,EAAE,MAAM;aACZ;YACD,OAAO,EAAE;gBACP,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;gBAC5B,GAAG,EAAE,MAAM;aACZ;YACD,UAAU,EAAE;gBACV,GAAG,EAAE,MAAM;gBACX,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;aACzC;YACD,SAAS,EAAE;gBACT,GAAG,EAAE,MAAM;gBACX,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;aAC7B;SACF,CAAC;QAEF,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAElC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QAED,oFAAoF;QACpF,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;QACvC,IAAI,MAAM,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC5B,oEAAoE;YACpE,IAAI,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAC1C,OAAO;YACT,CAAC;YAED,0DAA0D;YAC1D,IAAI,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gBACxC,OAAO;YACT,CAAC;YAED,sEAAsE;YACtE,IAAI,MAAM,KAAK,SAAS,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;gBACvD,OAAO;YACT,CAAC;YAED,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,QAAQ,GAAG,wBAAwB,IAAI,CAAC,GAAG,0BAA0B,IAAI,CAAC,GAAG,IAAI,CAAC;YACxF,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAuB,CAAC;YACjF,QAAQ,EAAE,KAAK,EAAE,CAAC;QACpB,CAAC;IAAA,CACF,CAAC;IAEF,MAAM,WAAW,GAAG,cAAc,CAAC,eAAe,EAAE,CAAC;IAErD,MAAM,YAAY,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC;IAE7C,MAAM,eAAe,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE9D,MAAM,iBAAiB,GAAG,eAAe,CAAC,OAAO,CAAC,MAAM,CACtD,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,MAAM,CACnD,CAAC;IACF,MAAM,aAAa,GAAG,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;IAE/F,MAAM,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC;IAEhG,4GAA4G;IAC5G,SAAS,CAAC,GAAG,EAAE,CAAC;QACd,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,sBAAsB,EAAE,eAAe,CAAC,CAAC;IAAA,CACzE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,YAAY,GAAG,kBAAkB,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IAElE,wDAAwD;IACxD,SAAS,CAAC,GAAG,EAAE,CAAC;QACd,IAAI,YAAY,EAAE,CAAC;YACjB,4FAA4F;YAC5F,oFAAoF;YACpF,iBAAiB,CAAC,OAAO,EAAE,CAAC;QAC9B,CAAC;IAAA,CACF,EAAE,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAC;IAEtC,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC;IACvD,MAAM,UAAU,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC;IAEvD,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,SAAS,EAAC,0BAA0B;YACxE,cACE,GAAG,EAAE,kBAAkB,EACvB,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,CAAC;oBACP,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,QAAQ,EAAE,MAAM;oBAChB,cAAc,EAAE,MAAM;iBACvB,YAED,cACE,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,KAAK,EAAE,OAAO,KAAK,CAAC,YAAY,EAAE,WAAW;qBAC9C,YAED,iBACE,SAAS,EAAC,wBAAwB,EAClC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,gBACpC,KAAK,EACjB,IAAI,EAAC,MAAM;4BAEX,gBACE,SAAS,EAAC,wCAAwC,EAClD,KAAK,EAAE;oCACL,OAAO,EAAE,MAAM;oCACf,MAAM,EAAE,CAAC;oCACT,YAAY,EAAE,oCAAoC;iCACnD,YAED,cAEE,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,YAAY,EAAE,IAAI,EAAE,aAG/C,iBAAiB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC;4CACjC,OAAO,CACL,KAAC,uBAAuB,IAEtB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAC,MAAM,IALV,MAAM,CAAC,EAAE,CAMd,CACH,CAAC;wCAAA,CACH,CAAC,EAGD,kBAAkB,CAAC,CAAC,CAAC,CACpB,aAAI,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,EAAE,GAAI,CAC9D,CAAC,CAAC,CAAC,IAAI,EAGP,cAAc,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC;4CACrC,MAAM,MAAM,GAAG,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;4CAClD,IAAI,CAAC,MAAM;gDAAE,OAAO,IAAI,CAAC;4CAEzB,OAAO,CACL,KAAC,uBAAuB,IAEtB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,KAAK,IALV,MAAM,CAAC,EAAE,CAMd,CACH,CAAC;wCAAA,CACH,CAAC,EAGD,mBAAmB,CAAC,CAAC,CAAC,CACrB,aAAI,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAI,CAC/D,CAAC,CAAC,CAAC,IAAI,EAGR,aACE,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAC,wBAAwB,EAClC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,iBACV,MAAM,GAClB;yCAnDG,eAAe,CAAC,EAAE,CAoDpB,GACC,EACR,gBACE,SAAS,EAAC,yBAAyB,EACnC,KAAK,EAAE;oCACL,OAAO,EAAE,MAAM;oCACf,MAAM,EAAE,GAAG,cAAc,CAAC,YAAY,EAAE,IAAI;iCAC7C,YAEA,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC;oCAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;oCACnC,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC;oCAChC,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,EAAE,CAAC;oCAClD,MAAM,WAAW,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;oCAEhD,IAAI,aAAa,GAAG,CAAC,CAAC;oCAEtB,OAAO,CACL,cAEE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,IAAI,CAAC,gBACtC,UAAU,CAAC,KAAK,EAC5B,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE;4CACL,SAAS,EAAE,cAAc,UAAU,CAAC,KAAK,KAAK;4CAC9C,QAAQ,EAAE,GAAG,KAAK,CAAC,YAAY,EAAE,IAAI;yCACtC,aAEA,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;gDAC7B,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;gDAC/B,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;gDACzC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;gDAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,IAAI,KAAK,CAAC;gDAE/D,OAAO,CACL,KAAC,SAAS,IAER,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,IAP/B,IAAI,CAAC,EAAE,CAQZ,CACH,CAAC;4CAAA,CACH,CAAC,EAED,kBAAkB,CAAC,CAAC,CAAC,CACpB,aAAI,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,kBAAkB,EAAE,GAAI,CAC9D,CAAC,CAAC,CAAC,IAAI,EAEP,cAAc,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC;gDACrC,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gDAC9C,IAAI,CAAC,IAAI;oDAAE,OAAO,IAAI,CAAC;gDAEvB,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;gDAC/B,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;gDACzC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;gDAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,IAAI,KAAK,CAAC;gDAE/D,OAAO,CACL,KAAC,SAAS,IAER,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,iBAAiB,EAAE,iBAAiB,IAP/B,IAAI,CAAC,EAAE,CAQZ,CACH,CAAC;4CAAA,CACH,CAAC,EAED,mBAAmB,CAAC,CAAC,CAAC,CACrB,aAAI,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAI,CAC/D,CAAC,CAAC,CAAC,IAAI,EAGR,aACE,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAC,wBAAwB,EAClC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,iBACV,MAAM,GAClB;6CAlEG,GAAG,CAAC,EAAE,CAmER,CACN,CAAC;gCAAA,CACH,CAAC,GACI;4BACF,GACJ,GACF,EACL,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM,KAAK,CAAC,IAAI,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,CACpE,wBACE,cACE,SAAS,EAAC,kEAAkE,EAC5E,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,GAAG,EAAE,CAAC;wBACN,IAAI,EAAE,CAAC;wBACP,KAAK,EAAE,CAAC;wBACR,MAAM,EAAE,CAAC;wBACT,uEAAuE;wBACvE,aAAa,EAAE,MAAM;qBACtB,EACD,IAAI,EAAC,QAAQ,eACH,QAAQ,YAElB,cACE,SAAS,EAAC,UAAU,EACpB,KAAK,EAAE;4BACL,gEAAgE;4BAChE,aAAa,EAAE,MAAM;yBACtB,YAEA,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC5C,KAAC,uBAAuB,IAAC,QAAQ,EAAC,cAAc,wEAEtB,CAC3B,CAAC,CAAC,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,CACzB,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CACf,cAAc,CACf,CAAC,CAAC,CAAC,CACF,UAAU,CACX,CACF,CAAC,CAAC,CAAC,IAAI,GACJ,GACF,GACF,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AAAA,CACH;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,iBAAiB,CAAe,EAC9C,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACT,GAAG,QAAQ,EAmB2B,EAAE;IACxC,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,GAAG,EAAE,CAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAuB,IAAI,EAAE,CACtD,CAAC;IAEF,6BAA6B;IAC7B,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,CAAC,KAAa,EAAE,EAAE,CAAC;QACjE,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAAA,CAC9B,EAAE,GAAG,CAAC,CAAC;IAER,gDAAgD;IAChD,SAAS,CAAC,GAAG,EAAE,CAAC;QACd,SAAS,SAAS,CAAC,KAAoB,EAAE;YACvC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE,CAAC;gBACxE,IAAI,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,KAAK,QAAQ,CAAC,aAAa,EAAE,CAAC;oBAChF,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;oBAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACzB,CAAC;YACH,CAAC;QAAA,CACF;QACD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAAA,CACjE,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC;IACvD,MAAM,UAAU,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC;IAEvD,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,KAAM,QAAQ;YACtE,cAAK,SAAS,EAAC,mCAAmC,YAChD,eAAK,SAAS,EAAC,yDAAyD;wBACtE,wBAAM,KAAK,GAAO,EAClB,eAAK,SAAS,EAAC,cAAc,aAC1B,aAAa,EAEb,qBAAqB,IAAI,CACxB,KAAC,2BAA2B,IAC1B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,KACxB,qBAAqB,GACzB,CACH,IACG;wBACF,GACF,EACN,eAAK,SAAS,EAAC,0EAA0E;oBACvF,eAAK,SAAS,EAAC,yBAAyB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE;4BAC9E,gBACE,GAAG,EAAE,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,sFAAsF,gBACpF,YAAY,CAAC,WAAW,EACpC,WAAW,EAAE,YAAY,CAAC,WAAW,EACrC,KAAK,EAAE,UAAU,EACjB,YAAY,EAAC,KAAK,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;oCACd,MAAM,KAAK,GAAG,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;oCACpC,aAAa,CAAC,KAAK,CAAC,CAAC;oCACrB,kBAAkB,CAAC,KAAK,CAAC,CAAC;gCAAA,CAC3B,GACD,EACD,UAAU,IAAI,CACb,KAAC,cAAc,IAAC,OAAO,EAAE,KAAC,OAAO,+BAAuB,YACtD,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,uBAAuB,gBACtB,cAAc,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC;wCACb,aAAa,CAAC,EAAE,CAAC,CAAC;wCAClB,kBAAkB,CAAC,MAAM,EAAE,CAAC;wCAC5B,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;oCAAA,CAC3B,YAED,YAAG,SAAS,EAAC,qBAAqB,iBAAa,MAAM,GAAG,GACjD,GACM,CAClB,IACG,EACN,eAAK,SAAS,EAAC,oDAAoD;4BACjE,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,GAAI,EACrE,aAAa,EAAE,OAAO,IACnB,EACN,eAAK,SAAS,EAAC,gCAAgC,yBACpC,cAAc,UAAM,UAAU,OAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,IACpF;oBACF,EACN,cAAK,SAAS,EAAC,aAAa,YAC1B,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,KAAM,YAAY,GAAI,GAC3D;YACF,CACP,CAAC;AAAA,CACH;AAED,MAAM,UAAU,uBAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GAIT,EAAE;IACD,OAAO,CACL,eAAK,SAAS,EAAC,yEAAyE;YACtF,YAAG,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,gBAAgB,CAAC,iBAAc,MAAM,GAAG,EAC3E,wBAAM,QAAQ,GAAO;YACjB,CACP,CAAC;AAAA,CACH","sourcesContent":["import { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport type { Cell, Header, Row, Table } from '@tanstack/table-core';\nimport clsx from 'clsx';\nimport { type ComponentProps, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\nimport { useDebouncedCallback } from 'use-debounce';\n\nimport { run } from '@prairielearn/run';\n\nimport { ColumnManager } from './ColumnManager.js';\nimport {\n  TanstackTableDownloadButton,\n  type TanstackTableDownloadButtonProps,\n} from './TanstackTableDownloadButton.js';\nimport { TanstackTableHeaderCell } from './TanstackTableHeaderCell.js';\nimport { useAutoSizeColumns } from './useAutoSizeColumns.js';\n\nfunction TableCell<RowDataModel>({\n  cell,\n  rowIdx,\n  colIdx,\n  canSort,\n  canFilter,\n  wrapText,\n  handleGridKeyDown,\n}: {\n  cell: Cell<RowDataModel, unknown>;\n  rowIdx: number;\n  colIdx: number;\n  canSort: boolean;\n  canFilter: boolean;\n  wrapText: boolean;\n  handleGridKeyDown: (e: React.KeyboardEvent, rowIdx: number, colIdx: number) => void;\n}) {\n  return (\n    <td\n      key={cell.id}\n      tabIndex={0}\n      data-grid-cell-row={rowIdx}\n      data-grid-cell-col={colIdx}\n      className={clsx(!canSort && !canFilter && 'text-center')}\n      style={{\n        display: 'flex',\n        width: cell.column.getSize(),\n        minWidth: 0,\n        maxWidth: cell.column.getSize(),\n        flexShrink: 0,\n        position: cell.column.getIsPinned() === 'left' ? 'sticky' : undefined,\n        left: cell.column.getIsPinned() === 'left' ? cell.column.getStart() : undefined,\n        verticalAlign: 'middle',\n      }}\n      onKeyDown={(e) => handleGridKeyDown(e, rowIdx, colIdx)}\n    >\n      <div\n        style={{\n          display: 'block',\n          minWidth: 0,\n          maxWidth: '100%',\n          overflow: wrapText ? 'visible' : 'hidden',\n          textOverflow: wrapText ? undefined : 'ellipsis',\n          whiteSpace: wrapText ? 'normal' : 'nowrap',\n          flex: '1 1 0%',\n          width: 0, // Allow flex to control width, but start from 0\n        }}\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </div>\n    </td>\n  );\n}\n\nconst DefaultNoResultsState = (\n  <TanstackTableEmptyState iconName=\"bi-search\">\n    No results found matching your search criteria.\n  </TanstackTableEmptyState>\n);\n\nconst DefaultEmptyState = (\n  <TanstackTableEmptyState iconName=\"bi-eye-slash\">No results found.</TanstackTableEmptyState>\n);\n\ninterface TanstackTableProps<RowDataModel> {\n  table: Table<RowDataModel>;\n  title: string;\n  filters?: Record<string, (props: { header: Header<RowDataModel, unknown> }) => ReactNode>;\n  rowHeight?: number;\n  noResultsState?: ReactNode;\n  emptyState?: ReactNode;\n  scrollRef?: React.RefObject<HTMLDivElement | null> | null;\n}\n\nconst DEFAULT_FILTER_MAP = {};\n\n/**\n * A generic component that renders a full-width, resizeable Tanstack Table.\n * @param params\n * @param params.table - The table model\n * @param params.title - The title of the table\n * @param params.filters - The filters for the table\n * @param params.rowHeight - The height of the rows in the table\n * @param params.noResultsState - The no results state for the table\n * @param params.emptyState - The empty state for the table\n * @param params.scrollRef - Optional ref that will be attached to the scroll container element.\n */\nexport function TanstackTable<RowDataModel>({\n  table,\n  title,\n  filters = DEFAULT_FILTER_MAP,\n  rowHeight = 42,\n  noResultsState = DefaultNoResultsState,\n  emptyState = DefaultEmptyState,\n  scrollRef,\n}: TanstackTableProps<RowDataModel>) {\n  const parentRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLDivElement>(null);\n  const scrollContainerRef = scrollRef ?? parentRef;\n\n  const rows = [...table.getTopRows(), ...table.getCenterRows()];\n  const rowVirtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => rowHeight,\n    overscan: 10,\n    measureElement: (el) => el?.getBoundingClientRect().height ?? rowHeight,\n  });\n\n  const visibleColumns = table.getVisibleLeafColumns();\n  const centerColumns = visibleColumns.filter((col) => !col.getIsPinned());\n\n  const columnVirtualizer = useVirtualizer({\n    count: centerColumns.length,\n    estimateSize: (index) => centerColumns[index]?.getSize(),\n    // `useAutoSizeColumns` solves a different problem (happens once when the column set changes)\n    // and we don't need to measure the cells themselves, so we can use the default estimateSize.\n    getScrollElement: () => scrollContainerRef.current,\n    horizontal: true,\n    overscan: 3,\n  });\n\n  const virtualColumns = columnVirtualizer.getVirtualItems();\n\n  const virtualPaddingLeft = run(() => {\n    if (columnVirtualizer && virtualColumns?.length > 0) {\n      return virtualColumns[0]?.start ?? 0;\n    }\n    return null;\n  });\n\n  const virtualPaddingRight = run(() => {\n    if (columnVirtualizer && virtualColumns?.length > 0) {\n      return (\n        columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)\n      );\n    }\n    return null;\n  });\n\n  // Check if any column has wrapping enabled\n  const hasWrappedColumns = table.getAllLeafColumns().some((col) => col.columnDef.meta?.wrapText);\n\n  // Create callback for remeasuring after resize\n  const handleResizeEnd = useMemo(() => {\n    if (!hasWrappedColumns) return undefined;\n    return () => rowVirtualizer.measure();\n  }, [hasWrappedColumns, rowVirtualizer]);\n\n  const getVisibleCells = (row: Row<RowDataModel>) => [\n    ...row.getLeftVisibleCells(),\n    ...row.getCenterVisibleCells(),\n  ];\n\n  const handleGridKeyDown = (e: React.KeyboardEvent, rowIdx: number, colIdx: number) => {\n    const rowLength = getVisibleCells(rows[rowIdx]).length;\n    const adjacentCells: Record<KeyboardEvent['key'], { row: number; col: number }> = {\n      ArrowDown: {\n        row: Math.min(rows.length - 1, rowIdx + 1),\n        col: colIdx,\n      },\n      ArrowUp: {\n        row: Math.max(0, rowIdx - 1),\n        col: colIdx,\n      },\n      ArrowRight: {\n        row: rowIdx,\n        col: Math.min(rowLength - 1, colIdx + 1),\n      },\n      ArrowLeft: {\n        row: rowIdx,\n        col: Math.max(0, colIdx - 1),\n      },\n    };\n\n    const next = adjacentCells[e.key];\n\n    if (!next) {\n      return;\n    }\n\n    // Only handle arrow keys if we're in the cell itself, not in an interactive element\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'TD') {\n      // If we are on the leftmost column, we should allow left scrolling.\n      if (colIdx === 0 && e.key === 'ArrowLeft') {\n        return;\n      }\n\n      // If we are on the top row, we should allow up scrolling.\n      if (rowIdx === 0 && e.key === 'ArrowUp') {\n        return;\n      }\n\n      // If we are on the rightmost column, we should allow right scrolling.\n      if (colIdx === rowLength - 1 && e.key === 'ArrowRight') {\n        return;\n      }\n\n      e.preventDefault();\n      const selector = `[data-grid-cell-row=\"${next.row}\"][data-grid-cell-col=\"${next.col}\"]`;\n      const nextCell = tableRef.current?.querySelector(selector) as HTMLElement | null;\n      nextCell?.focus();\n    }\n  };\n\n  const virtualRows = rowVirtualizer.getVirtualItems();\n\n  const headerGroups = table.getHeaderGroups();\n\n  const leafHeaderGroup = headerGroups[headerGroups.length - 1];\n\n  const leftPinnedHeaders = leafHeaderGroup.headers.filter(\n    (header) => header.column.getIsPinned() === 'left',\n  );\n  const centerHeaders = leafHeaderGroup.headers.filter((header) => !header.column.getIsPinned());\n\n  const isTableResizing = leafHeaderGroup.headers.some((header) => header.column.getIsResizing());\n\n  // We toggle this here instead of in the parent since this component logically manages all UI for the table.\n  useEffect(() => {\n    document.body.classList.toggle('pl-ui-no-user-select', isTableResizing);\n  }, [isTableResizing]);\n\n  const hasAutoSized = useAutoSizeColumns(table, tableRef, filters);\n\n  // Re-measure the virtualizer when auto-sizing completes\n  useEffect(() => {\n    if (hasAutoSized) {\n      // https://github.com/NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect/issues/58\n      // eslint-disable-next-line react-you-might-not-need-an-effect/no-pass-ref-to-parent\n      columnVirtualizer.measure();\n    }\n  }, [columnVirtualizer, hasAutoSized]);\n\n  const displayedCount = table.getRowModel().rows.length;\n  const totalCount = table.getCoreRowModel().rows.length;\n\n  return (\n    <div style={{ position: 'relative' }} className=\"d-flex flex-column h-100\">\n      <div\n        ref={scrollContainerRef}\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          overflow: 'auto',\n          overflowAnchor: 'none',\n        }}\n      >\n        <div\n          ref={tableRef}\n          style={{\n            position: 'relative',\n            width: `max(${table.getTotalSize()}px, 100%)`,\n          }}\n        >\n          <table\n            className=\"table table-hover mb-0\"\n            style={{ display: 'grid', tableLayout: 'fixed' }}\n            aria-label={title}\n            role=\"grid\"\n          >\n            <thead\n              className=\"position-sticky top-0 w-100 border-top\"\n              style={{\n                display: 'grid',\n                zIndex: 1,\n                borderBottom: 'var(--bs-border-width) solid black',\n              }}\n            >\n              <tr\n                key={leafHeaderGroup.id}\n                className=\"d-flex w-100\"\n                style={{ minWidth: `${table.getTotalSize()}px` }}\n              >\n                {/* Left pinned columns */}\n                {leftPinnedHeaders.map((header) => {\n                  return (\n                    <TanstackTableHeaderCell\n                      key={header.id}\n                      header={header}\n                      filters={filters}\n                      table={table}\n                      handleResizeEnd={handleResizeEnd}\n                      isPinned=\"left\"\n                    />\n                  );\n                })}\n\n                {/* Virtual padding for left side of center columns */}\n                {virtualPaddingLeft ? (\n                  <th style={{ display: 'flex', width: virtualPaddingLeft }} />\n                ) : null}\n\n                {/* Virtualized center columns */}\n                {virtualColumns.map((virtualColumn) => {\n                  const header = centerHeaders[virtualColumn.index];\n                  if (!header) return null;\n\n                  return (\n                    <TanstackTableHeaderCell\n                      key={header.id}\n                      header={header}\n                      filters={filters}\n                      table={table}\n                      handleResizeEnd={handleResizeEnd}\n                      isPinned={false}\n                    />\n                  );\n                })}\n\n                {/* Virtual padding for right side of center columns */}\n                {virtualPaddingRight ? (\n                  <th style={{ display: 'flex', width: virtualPaddingRight }} />\n                ) : null}\n\n                {/* Filler to span remaining width */}\n                <th\n                  tabIndex={-1}\n                  className=\"d-flex flex-grow-1 p-0\"\n                  style={{ minWidth: 0 }}\n                  aria-hidden=\"true\"\n                />\n              </tr>\n            </thead>\n            <tbody\n              className=\"position-relative w-100\"\n              style={{\n                display: 'grid',\n                height: `${rowVirtualizer.getTotalSize()}px`,\n              }}\n            >\n              {virtualRows.map((virtualRow) => {\n                const row = rows[virtualRow.index];\n                const rowIdx = virtualRow.index;\n                const leftPinnedCells = row.getLeftVisibleCells();\n                const centerCells = row.getCenterVisibleCells();\n\n                let currentColIdx = 0;\n\n                return (\n                  <tr\n                    key={row.id}\n                    ref={(node) => rowVirtualizer.measureElement(node)}\n                    data-index={virtualRow.index}\n                    className=\"d-flex position-absolute w-100\"\n                    style={{\n                      transform: `translateY(${virtualRow.start}px)`,\n                      minWidth: `${table.getTotalSize()}px`,\n                    }}\n                  >\n                    {leftPinnedCells.map((cell) => {\n                      const colIdx = currentColIdx++;\n                      const canSort = cell.column.getCanSort();\n                      const canFilter = cell.column.getCanFilter();\n                      const wrapText = cell.column.columnDef.meta?.wrapText ?? false;\n\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          cell={cell}\n                          rowIdx={rowIdx}\n                          colIdx={colIdx}\n                          canSort={canSort}\n                          canFilter={canFilter}\n                          wrapText={wrapText}\n                          handleGridKeyDown={handleGridKeyDown}\n                        />\n                      );\n                    })}\n\n                    {virtualPaddingLeft ? (\n                      <td style={{ display: 'flex', width: virtualPaddingLeft }} />\n                    ) : null}\n\n                    {virtualColumns.map((virtualColumn) => {\n                      const cell = centerCells[virtualColumn.index];\n                      if (!cell) return null;\n\n                      const colIdx = currentColIdx++;\n                      const canSort = cell.column.getCanSort();\n                      const canFilter = cell.column.getCanFilter();\n                      const wrapText = cell.column.columnDef.meta?.wrapText ?? false;\n\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          cell={cell}\n                          rowIdx={rowIdx}\n                          colIdx={colIdx}\n                          canSort={canSort}\n                          canFilter={canFilter}\n                          wrapText={wrapText}\n                          handleGridKeyDown={handleGridKeyDown}\n                        />\n                      );\n                    })}\n\n                    {virtualPaddingRight ? (\n                      <td style={{ display: 'flex', width: virtualPaddingRight }} />\n                    ) : null}\n\n                    {/* Filler to span remaining width */}\n                    <td\n                      tabIndex={-1}\n                      className=\"d-flex flex-grow-1 p-0\"\n                      style={{ minWidth: 0 }}\n                      aria-hidden=\"true\"\n                    />\n                  </tr>\n                );\n              })}\n            </tbody>\n          </table>\n        </div>\n      </div>\n      {table.getVisibleLeafColumns().length === 0 || displayedCount === 0 ? (\n        <div>\n          <div\n            className=\"d-flex flex-column justify-content-center align-items-center p-4\"\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              // Allow pointer events (e.g. scrolling) to reach the underlying table.\n              pointerEvents: 'none',\n            }}\n            role=\"status\"\n            aria-live=\"polite\"\n          >\n            <div\n              className=\"col-lg-6\"\n              style={{\n                // Allow selecting and interacting with the empty state content.\n                pointerEvents: 'auto',\n              }}\n            >\n              {table.getVisibleLeafColumns().length === 0 ? (\n                <TanstackTableEmptyState iconName=\"bi-eye-slash\">\n                  No columns selected. Use the View menu to show columns.\n                </TanstackTableEmptyState>\n              ) : displayedCount === 0 ? (\n                totalCount > 0 ? (\n                  noResultsState\n                ) : (\n                  emptyState\n                )\n              ) : null}\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A generic component that wraps the TanstackTable component in a card.\n * @param params\n * @param params.table - The table model\n * @param params.title - The title of the card\n * @param params.className - The class name to apply to the card\n * @param params.style - The style to apply to the card\n * @param params.singularLabel - The singular label for a single row in the table, e.g. \"student\"\n * @param params.pluralLabel - The plural label for multiple rows in the table, e.g. \"students\"\n * @param params.headerButtons - The buttons to display in the header\n * @param params.columnManager - Optional configuration for the column manager. See {@link ColumnManager} for more details.\n * @param params.columnManager.buttons - The buttons to display next to the column manager (View button)\n * @param params.columnManager.topContent - Optional content to display at the top of the column manager (View) dropdown menu\n * @param params.globalFilter - Configuration for the global filter\n * @param params.globalFilter.placeholder - Placeholder text for the search input\n * @param params.tableOptions - Specific options for the table. See {@link TanstackTableProps} for more details.\n * @param params.downloadButtonOptions - Specific options for the download button. See {@link TanstackTableDownloadButtonProps} for more details.\n */\nexport function TanstackTableCard<RowDataModel>({\n  table,\n  title,\n  singularLabel,\n  pluralLabel,\n  headerButtons,\n  columnManager,\n  globalFilter,\n  tableOptions,\n  downloadButtonOptions,\n  className,\n  ...divProps\n}: {\n  table: Table<RowDataModel>;\n  title: string;\n  singularLabel: string;\n  pluralLabel: string;\n  headerButtons?: ReactNode;\n  columnManager?: {\n    buttons?: ReactNode;\n    topContent?: ReactNode;\n  };\n  globalFilter: {\n    placeholder: string;\n  };\n  tableOptions: Partial<Omit<TanstackTableProps<RowDataModel>, 'table'>>;\n  downloadButtonOptions?: Omit<\n    TanstackTableDownloadButtonProps<RowDataModel>,\n    'table' | 'singularLabel' | 'pluralLabel'\n  > & { pluralLabel?: string; singularLabel?: string };\n} & Omit<ComponentProps<'div'>, 'class'>) {\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const [inputValue, setInputValue] = useState(\n    () => (table.getState().globalFilter as string) ?? '',\n  );\n\n  // Debounce the filter update\n  const debouncedSetFilter = useDebouncedCallback((value: string) => {\n    table.setGlobalFilter(value);\n  }, 150);\n\n  // Focus the search input when Ctrl+F is pressed\n  useEffect(() => {\n    function onKeyDown(event: KeyboardEvent) {\n      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'f') {\n        if (searchInputRef.current && searchInputRef.current !== document.activeElement) {\n          searchInputRef.current.focus();\n          event.preventDefault();\n        }\n      }\n    }\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, []);\n\n  const displayedCount = table.getRowModel().rows.length;\n  const totalCount = table.getCoreRowModel().rows.length;\n\n  return (\n    <div className={clsx('card d-flex flex-column', className)} {...divProps}>\n      <div className=\"card-header bg-primary text-white\">\n        <div className=\"d-flex align-items-center justify-content-between gap-2\">\n          <div>{title}</div>\n          <div className=\"d-flex gap-2\">\n            {headerButtons}\n\n            {downloadButtonOptions && (\n              <TanstackTableDownloadButton\n                table={table}\n                pluralLabel={pluralLabel}\n                singularLabel={singularLabel}\n                {...downloadButtonOptions}\n              />\n            )}\n          </div>\n        </div>\n      </div>\n      <div className=\"card-body d-flex flex-row flex-wrap flex-grow-0 align-items-center gap-2\">\n        <div className=\"position-relative w-100\" style={{ maxWidth: 'min(400px, 100%)' }}>\n          <input\n            ref={searchInputRef}\n            type=\"text\"\n            className=\"form-control pl-ui-tanstack-table-search-input pl-ui-tanstack-table-focusable-shadow\"\n            aria-label={globalFilter.placeholder}\n            placeholder={globalFilter.placeholder}\n            value={inputValue}\n            autoComplete=\"off\"\n            onInput={(e) => {\n              const value = e.currentTarget.value;\n              setInputValue(value);\n              debouncedSetFilter(value);\n            }}\n          />\n          {inputValue && (\n            <OverlayTrigger overlay={<Tooltip>Clear search</Tooltip>}>\n              <button\n                type=\"button\"\n                className=\"btn btn-floating-icon\"\n                aria-label=\"Clear search\"\n                onClick={() => {\n                  setInputValue('');\n                  debouncedSetFilter.cancel();\n                  table.setGlobalFilter('');\n                }}\n              >\n                <i className=\"bi bi-x-circle-fill\" aria-hidden=\"true\" />\n              </button>\n            </OverlayTrigger>\n          )}\n        </div>\n        <div className=\"d-flex flex-wrap flex-row align-items-center gap-2\">\n          <ColumnManager table={table} topContent={columnManager?.topContent} />\n          {columnManager?.buttons}\n        </div>\n        <div className=\"ms-auto text-muted text-nowrap\">\n          Showing {displayedCount} of {totalCount} {totalCount === 1 ? singularLabel : pluralLabel}\n        </div>\n      </div>\n      <div className=\"flex-grow-1\">\n        <TanstackTable table={table} title={title} {...tableOptions} />\n      </div>\n    </div>\n  );\n}\n\nexport function TanstackTableEmptyState({\n  iconName,\n  children,\n}: {\n  iconName: `bi-${string}`;\n  children: ReactNode;\n}) {\n  return (\n    <div className=\"d-flex flex-column justify-content-center align-items-center text-muted\">\n      <i className={clsx('bi', iconName, 'display-4 mb-2')} aria-hidden=\"true\" />\n      <div>{children}</div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"TanstackTable.js","sourceRoot":"","sources":["../../src/components/TanstackTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport type { Cell, Header, Row, Table } from '@tanstack/table-core';\nimport clsx from 'clsx';\nimport { type ComponentProps, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\nimport { useDebouncedCallback } from 'use-debounce';\n\nimport { run } from '@prairielearn/run';\n\nimport { ColumnManager } from './ColumnManager.js';\nimport {\n  TanstackTableDownloadButton,\n  type TanstackTableDownloadButtonProps,\n} from './TanstackTableDownloadButton.js';\nimport { TanstackTableHeaderCell } from './TanstackTableHeaderCell.js';\nimport { useAutoSizeColumns } from './useAutoSizeColumns.js';\n\nfunction TableCell<RowDataModel>({\n  cell,\n  rowIdx,\n  colIdx,\n  canSort,\n  canFilter,\n  wrapText,\n  handleGridKeyDown,\n}: {\n  cell: Cell<RowDataModel, unknown>;\n  rowIdx: number;\n  colIdx: number;\n  canSort: boolean;\n  canFilter: boolean;\n  wrapText: boolean;\n  handleGridKeyDown: (e: React.KeyboardEvent, rowIdx: number, colIdx: number) => void;\n}) {\n  return (\n    <td\n      key={cell.id}\n      tabIndex={0}\n      data-grid-cell-row={rowIdx}\n      data-grid-cell-col={colIdx}\n      className={clsx(!canSort && !canFilter && 'text-center')}\n      style={{\n        display: 'flex',\n        width: cell.column.getSize(),\n        minWidth: 0,\n        maxWidth: cell.column.getSize(),\n        flexShrink: 0,\n        position: cell.column.getIsPinned() === 'left' ? 'sticky' : undefined,\n        left: cell.column.getIsPinned() === 'left' ? cell.column.getStart() : undefined,\n        verticalAlign: 'middle',\n      }}\n      onKeyDown={(e) => handleGridKeyDown(e, rowIdx, colIdx)}\n    >\n      <div\n        style={{\n          display: 'block',\n          minWidth: 0,\n          maxWidth: '100%',\n          overflow: wrapText ? 'visible' : 'hidden',\n          textOverflow: wrapText ? undefined : 'ellipsis',\n          whiteSpace: wrapText ? 'normal' : 'nowrap',\n          flex: '1 1 0%',\n          width: 0, // Allow flex to control width, but start from 0\n        }}\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </div>\n    </td>\n  );\n}\n\nconst DefaultNoResultsState = (\n  <TanstackTableEmptyState iconName=\"bi-search\">\n    No results found matching your search criteria.\n  </TanstackTableEmptyState>\n);\n\nconst DefaultEmptyState = (\n  <TanstackTableEmptyState iconName=\"bi-eye-slash\">No results found.</TanstackTableEmptyState>\n);\n\ninterface TanstackTableProps<RowDataModel> {\n  table: Table<RowDataModel>;\n  title: string;\n  filters?: Record<string, (props: { header: Header<RowDataModel, unknown> }) => ReactNode>;\n  rowHeight?: number;\n  noResultsState?: ReactNode;\n  emptyState?: ReactNode;\n  scrollRef?: React.RefObject<HTMLDivElement | null> | null;\n}\n\nconst DEFAULT_FILTER_MAP = {};\n\n/**\n * A generic component that renders a full-width, resizeable Tanstack Table.\n * @param params\n * @param params.table - The table model\n * @param params.title - The title of the table\n * @param params.filters - The filters for the table\n * @param params.rowHeight - The height of the rows in the table\n * @param params.noResultsState - The no results state for the table\n * @param params.emptyState - The empty state for the table\n * @param params.scrollRef - Optional ref that will be attached to the scroll container element.\n */\nexport function TanstackTable<RowDataModel>({\n  table,\n  title,\n  filters = DEFAULT_FILTER_MAP,\n  rowHeight = 42,\n  noResultsState = DefaultNoResultsState,\n  emptyState = DefaultEmptyState,\n  scrollRef,\n}: TanstackTableProps<RowDataModel>) {\n  const parentRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLDivElement>(null);\n  const scrollContainerRef = scrollRef ?? parentRef;\n\n  const rows = [...table.getTopRows(), ...table.getCenterRows()];\n  const rowVirtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => rowHeight,\n    overscan: 10,\n    measureElement: (el) => el?.getBoundingClientRect().height ?? rowHeight,\n  });\n\n  const visibleColumns = table.getVisibleLeafColumns();\n  const centerColumns = visibleColumns.filter((col) => !col.getIsPinned());\n\n  const columnVirtualizer = useVirtualizer({\n    count: centerColumns.length,\n    estimateSize: (index) => centerColumns[index]?.getSize(),\n    // `useAutoSizeColumns` solves a different problem (happens once when the column set changes)\n    // and we don't need to measure the cells themselves, so we can use the default estimateSize.\n    getScrollElement: () => scrollContainerRef.current,\n    horizontal: true,\n    overscan: 3,\n  });\n\n  const virtualColumns = columnVirtualizer.getVirtualItems();\n\n  const virtualPaddingLeft = run(() => {\n    if (columnVirtualizer && virtualColumns?.length > 0) {\n      return virtualColumns[0]?.start ?? 0;\n    }\n    return null;\n  });\n\n  const virtualPaddingRight = run(() => {\n    if (columnVirtualizer && virtualColumns?.length > 0) {\n      return (\n        columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)\n      );\n    }\n    return null;\n  });\n\n  // Check if any column has wrapping enabled\n  const hasWrappedColumns = table.getAllLeafColumns().some((col) => col.columnDef.meta?.wrapText);\n\n  // Create callback for remeasuring after resize\n  const handleResizeEnd = useMemo(() => {\n    if (!hasWrappedColumns) return undefined;\n    return () => rowVirtualizer.measure();\n  }, [hasWrappedColumns, rowVirtualizer]);\n\n  const getVisibleCells = (row: Row<RowDataModel>) => [\n    ...row.getLeftVisibleCells(),\n    ...row.getCenterVisibleCells(),\n  ];\n\n  const handleGridKeyDown = (e: React.KeyboardEvent, rowIdx: number, colIdx: number) => {\n    const rowLength = getVisibleCells(rows[rowIdx]).length;\n    const adjacentCells: Record<KeyboardEvent['key'], { row: number; col: number }> = {\n      ArrowDown: {\n        row: Math.min(rows.length - 1, rowIdx + 1),\n        col: colIdx,\n      },\n      ArrowUp: {\n        row: Math.max(0, rowIdx - 1),\n        col: colIdx,\n      },\n      ArrowRight: {\n        row: rowIdx,\n        col: Math.min(rowLength - 1, colIdx + 1),\n      },\n      ArrowLeft: {\n        row: rowIdx,\n        col: Math.max(0, colIdx - 1),\n      },\n    };\n\n    const next = adjacentCells[e.key];\n\n    if (!next) {\n      return;\n    }\n\n    // Only handle arrow keys if we're in the cell itself, not in an interactive element\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'TD') {\n      // If we are on the leftmost column, we should allow left scrolling.\n      if (colIdx === 0 && e.key === 'ArrowLeft') {\n        return;\n      }\n\n      // If we are on the top row, we should allow up scrolling.\n      if (rowIdx === 0 && e.key === 'ArrowUp') {\n        return;\n      }\n\n      // If we are on the rightmost column, we should allow right scrolling.\n      if (colIdx === rowLength - 1 && e.key === 'ArrowRight') {\n        return;\n      }\n\n      e.preventDefault();\n      const selector = `[data-grid-cell-row=\"${next.row}\"][data-grid-cell-col=\"${next.col}\"]`;\n      const nextCell = tableRef.current?.querySelector(selector) as HTMLElement | null;\n      nextCell?.focus();\n    }\n  };\n\n  const virtualRows = rowVirtualizer.getVirtualItems();\n\n  const headerGroups = table.getHeaderGroups();\n\n  const leafHeaderGroup = headerGroups[headerGroups.length - 1];\n\n  const leftPinnedHeaders = leafHeaderGroup.headers.filter(\n    (header) => header.column.getIsPinned() === 'left',\n  );\n  const centerHeaders = leafHeaderGroup.headers.filter((header) => !header.column.getIsPinned());\n\n  const isTableResizing = leafHeaderGroup.headers.some((header) => header.column.getIsResizing());\n\n  // We toggle this here instead of in the parent since this component logically manages all UI for the table.\n  useEffect(() => {\n    document.body.classList.toggle('pl-ui-no-user-select', isTableResizing);\n  }, [isTableResizing]);\n\n  const hasAutoSized = useAutoSizeColumns(table, tableRef, filters);\n\n  // Re-measure the virtualizer when auto-sizing completes\n  useEffect(() => {\n    if (hasAutoSized) {\n      // https://github.com/NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect/issues/58\n      columnVirtualizer.measure();\n    }\n  }, [columnVirtualizer, hasAutoSized]);\n\n  const displayedCount = table.getRowModel().rows.length;\n  const totalCount = table.getCoreRowModel().rows.length;\n\n  return (\n    <div style={{ position: 'relative' }} className=\"d-flex flex-column h-100\">\n      <div\n        ref={scrollContainerRef}\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          overflow: 'auto',\n          overflowAnchor: 'none',\n        }}\n      >\n        <div\n          ref={tableRef}\n          style={{\n            position: 'relative',\n            width: `max(${table.getTotalSize()}px, 100%)`,\n          }}\n        >\n          <table\n            className=\"table table-hover mb-0\"\n            style={{ display: 'grid', tableLayout: 'fixed' }}\n            aria-label={title}\n            role=\"grid\"\n          >\n            <thead\n              className=\"position-sticky top-0 w-100 border-top\"\n              style={{\n                display: 'grid',\n                zIndex: 1,\n                borderBottom: 'var(--bs-border-width) solid black',\n              }}\n            >\n              <tr\n                key={leafHeaderGroup.id}\n                className=\"d-flex w-100\"\n                style={{ minWidth: `${table.getTotalSize()}px` }}\n              >\n                {/* Left pinned columns */}\n                {leftPinnedHeaders.map((header) => {\n                  return (\n                    <TanstackTableHeaderCell\n                      key={header.id}\n                      header={header}\n                      filters={filters}\n                      table={table}\n                      handleResizeEnd={handleResizeEnd}\n                      isPinned=\"left\"\n                    />\n                  );\n                })}\n\n                {/* Virtual padding for left side of center columns */}\n                {virtualPaddingLeft ? (\n                  <th style={{ display: 'flex', width: virtualPaddingLeft }} />\n                ) : null}\n\n                {/* Virtualized center columns */}\n                {virtualColumns.map((virtualColumn) => {\n                  const header = centerHeaders[virtualColumn.index];\n                  if (!header) return null;\n\n                  return (\n                    <TanstackTableHeaderCell\n                      key={header.id}\n                      header={header}\n                      filters={filters}\n                      table={table}\n                      handleResizeEnd={handleResizeEnd}\n                      isPinned={false}\n                    />\n                  );\n                })}\n\n                {/* Virtual padding for right side of center columns */}\n                {virtualPaddingRight ? (\n                  <th style={{ display: 'flex', width: virtualPaddingRight }} />\n                ) : null}\n\n                {/* Filler to span remaining width */}\n                <th\n                  tabIndex={-1}\n                  className=\"d-flex flex-grow-1 p-0\"\n                  style={{ minWidth: 0 }}\n                  aria-hidden=\"true\"\n                />\n              </tr>\n            </thead>\n            <tbody\n              className=\"position-relative w-100\"\n              style={{\n                display: 'grid',\n                height: `${rowVirtualizer.getTotalSize()}px`,\n              }}\n            >\n              {virtualRows.map((virtualRow) => {\n                const row = rows[virtualRow.index];\n                const rowIdx = virtualRow.index;\n                const leftPinnedCells = row.getLeftVisibleCells();\n                const centerCells = row.getCenterVisibleCells();\n\n                let currentColIdx = 0;\n\n                return (\n                  <tr\n                    key={row.id}\n                    ref={(node) => rowVirtualizer.measureElement(node)}\n                    data-index={virtualRow.index}\n                    className=\"d-flex position-absolute w-100\"\n                    style={{\n                      transform: `translateY(${virtualRow.start}px)`,\n                      minWidth: `${table.getTotalSize()}px`,\n                    }}\n                  >\n                    {leftPinnedCells.map((cell) => {\n                      const colIdx = currentColIdx++;\n                      const canSort = cell.column.getCanSort();\n                      const canFilter = cell.column.getCanFilter();\n                      const wrapText = cell.column.columnDef.meta?.wrapText ?? false;\n\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          cell={cell}\n                          rowIdx={rowIdx}\n                          colIdx={colIdx}\n                          canSort={canSort}\n                          canFilter={canFilter}\n                          wrapText={wrapText}\n                          handleGridKeyDown={handleGridKeyDown}\n                        />\n                      );\n                    })}\n\n                    {virtualPaddingLeft ? (\n                      <td style={{ display: 'flex', width: virtualPaddingLeft }} />\n                    ) : null}\n\n                    {virtualColumns.map((virtualColumn) => {\n                      const cell = centerCells[virtualColumn.index];\n                      if (!cell) return null;\n\n                      const colIdx = currentColIdx++;\n                      const canSort = cell.column.getCanSort();\n                      const canFilter = cell.column.getCanFilter();\n                      const wrapText = cell.column.columnDef.meta?.wrapText ?? false;\n\n                      return (\n                        <TableCell\n                          key={cell.id}\n                          cell={cell}\n                          rowIdx={rowIdx}\n                          colIdx={colIdx}\n                          canSort={canSort}\n                          canFilter={canFilter}\n                          wrapText={wrapText}\n                          handleGridKeyDown={handleGridKeyDown}\n                        />\n                      );\n                    })}\n\n                    {virtualPaddingRight ? (\n                      <td style={{ display: 'flex', width: virtualPaddingRight }} />\n                    ) : null}\n\n                    {/* Filler to span remaining width */}\n                    <td\n                      tabIndex={-1}\n                      className=\"d-flex flex-grow-1 p-0\"\n                      style={{ minWidth: 0 }}\n                      aria-hidden=\"true\"\n                    />\n                  </tr>\n                );\n              })}\n            </tbody>\n          </table>\n        </div>\n      </div>\n      {table.getVisibleLeafColumns().length === 0 || displayedCount === 0 ? (\n        <div>\n          <div\n            className=\"d-flex flex-column justify-content-center align-items-center p-4\"\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              // Allow pointer events (e.g. scrolling) to reach the underlying table.\n              pointerEvents: 'none',\n            }}\n            role=\"status\"\n            aria-live=\"polite\"\n          >\n            <div\n              className=\"col-lg-6\"\n              style={{\n                // Allow selecting and interacting with the empty state content.\n                pointerEvents: 'auto',\n              }}\n            >\n              {table.getVisibleLeafColumns().length === 0 ? (\n                <TanstackTableEmptyState iconName=\"bi-eye-slash\">\n                  No columns selected. Use the View menu to show columns.\n                </TanstackTableEmptyState>\n              ) : displayedCount === 0 ? (\n                totalCount > 0 ? (\n                  noResultsState\n                ) : (\n                  emptyState\n                )\n              ) : null}\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A generic component that wraps the TanstackTable component in a card.\n * @param params\n * @param params.table - The table model\n * @param params.title - The title of the card\n * @param params.className - The class name to apply to the card\n * @param params.style - The style to apply to the card\n * @param params.singularLabel - The singular label for a single row in the table, e.g. \"student\"\n * @param params.pluralLabel - The plural label for multiple rows in the table, e.g. \"students\"\n * @param params.headerButtons - The buttons to display in the header\n * @param params.columnManager - Optional configuration for the column manager. See {@link ColumnManager} for more details.\n * @param params.columnManager.buttons - The buttons to display next to the column manager (View button)\n * @param params.columnManager.topContent - Optional content to display at the top of the column manager (View) dropdown menu\n * @param params.globalFilter - Configuration for the global filter\n * @param params.globalFilter.placeholder - Placeholder text for the search input\n * @param params.tableOptions - Specific options for the table. See {@link TanstackTableProps} for more details.\n * @param params.downloadButtonOptions - Specific options for the download button. See {@link TanstackTableDownloadButtonProps} for more details.\n */\nexport function TanstackTableCard<RowDataModel>({\n  table,\n  title,\n  singularLabel,\n  pluralLabel,\n  headerButtons,\n  columnManager,\n  globalFilter,\n  tableOptions,\n  downloadButtonOptions,\n  className,\n  ...divProps\n}: {\n  table: Table<RowDataModel>;\n  title: string;\n  singularLabel: string;\n  pluralLabel: string;\n  headerButtons?: ReactNode;\n  columnManager?: {\n    buttons?: ReactNode;\n    topContent?: ReactNode;\n  };\n  globalFilter: {\n    placeholder: string;\n  };\n  tableOptions: Partial<Omit<TanstackTableProps<RowDataModel>, 'table'>>;\n  downloadButtonOptions?: Omit<\n    TanstackTableDownloadButtonProps<RowDataModel>,\n    'table' | 'singularLabel' | 'pluralLabel'\n  > & { pluralLabel?: string; singularLabel?: string };\n} & Omit<ComponentProps<'div'>, 'class'>) {\n  const searchInputRef = useRef<HTMLInputElement>(null);\n\n  const [inputValue, setInputValue] = useState(\n    () => (table.getState().globalFilter as string) ?? '',\n  );\n\n  // Debounce the filter update\n  const debouncedSetFilter = useDebouncedCallback((value: string) => {\n    table.setGlobalFilter(value);\n  }, 150);\n\n  // Focus the search input when Ctrl+F is pressed\n  useEffect(() => {\n    function onKeyDown(event: KeyboardEvent) {\n      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'f') {\n        if (searchInputRef.current && searchInputRef.current !== document.activeElement) {\n          searchInputRef.current.focus();\n          event.preventDefault();\n        }\n      }\n    }\n    document.addEventListener('keydown', onKeyDown);\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, []);\n\n  const displayedCount = table.getRowModel().rows.length;\n  const totalCount = table.getCoreRowModel().rows.length;\n\n  return (\n    <div className={clsx('card d-flex flex-column', className)} {...divProps}>\n      <div className=\"card-header bg-primary text-white\">\n        <div className=\"d-flex align-items-center justify-content-between gap-2\">\n          <div>{title}</div>\n          <div className=\"d-flex gap-2\">\n            {headerButtons}\n\n            {downloadButtonOptions && (\n              <TanstackTableDownloadButton\n                table={table}\n                pluralLabel={pluralLabel}\n                singularLabel={singularLabel}\n                {...downloadButtonOptions}\n              />\n            )}\n          </div>\n        </div>\n      </div>\n      <div className=\"card-body d-flex flex-row flex-wrap flex-grow-0 align-items-center gap-2\">\n        <div className=\"position-relative w-100\" style={{ maxWidth: 'min(400px, 100%)' }}>\n          <input\n            ref={searchInputRef}\n            type=\"text\"\n            className=\"form-control pl-ui-tanstack-table-search-input pl-ui-tanstack-table-focusable-shadow\"\n            aria-label={globalFilter.placeholder}\n            placeholder={globalFilter.placeholder}\n            value={inputValue}\n            autoComplete=\"off\"\n            onInput={(e) => {\n              const value = e.currentTarget.value;\n              setInputValue(value);\n              debouncedSetFilter(value);\n            }}\n          />\n          {inputValue && (\n            <OverlayTrigger overlay={<Tooltip>Clear search</Tooltip>}>\n              <button\n                type=\"button\"\n                className=\"btn btn-floating-icon\"\n                aria-label=\"Clear search\"\n                onClick={() => {\n                  setInputValue('');\n                  debouncedSetFilter.cancel();\n                  table.setGlobalFilter('');\n                }}\n              >\n                <i className=\"bi bi-x-circle-fill\" aria-hidden=\"true\" />\n              </button>\n            </OverlayTrigger>\n          )}\n        </div>\n        <div className=\"d-flex flex-wrap flex-row align-items-center gap-2\">\n          <ColumnManager table={table} topContent={columnManager?.topContent} />\n          {columnManager?.buttons}\n        </div>\n        <div className=\"ms-auto text-muted text-nowrap\">\n          Showing {displayedCount} of {totalCount} {totalCount === 1 ? singularLabel : pluralLabel}\n        </div>\n      </div>\n      <div className=\"flex-grow-1\">\n        <TanstackTable table={table} title={title} {...tableOptions} />\n      </div>\n    </div>\n  );\n}\n\nexport function TanstackTableEmptyState({\n  iconName,\n  children,\n}: {\n  iconName: `bi-${string}`;\n  children: ReactNode;\n}) {\n  return (\n    <div className=\"d-flex flex-column justify-content-center align-items-center text-muted\">\n      <i className={clsx('bi', iconName, 'display-4 mb-2')} aria-hidden=\"true\" />\n      <div>{children}</div>\n    </div>\n  );\n}\n"]}

package/dist/components/useShiftClickCheckbox.d.ts

@@ -21,6 +21,7 @@ export declare function useShiftClickCheckbox<TData>(): {
         checked: boolean;
         disabled: boolean;
         onClick: (e: MouseEvent<HTMLInputElement, globalThis.MouseEvent>) => void;
+        onChange: () => void;
     };
 };
 //# sourceMappingURL=useShiftClickCheckbox.d.ts.map

package/dist/components/useShiftClickCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useShiftClickCheckbox.d.ts","sourceRoot":"","sources":["../../src/components/useShiftClickCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,KAAK,UAAU,EAAyB,MAAM,OAAO,CAAC;AAE/D;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CAAC,KAAK;;;;;;;;EAiD1C","sourcesContent":["import type { Row, Table } from '@tanstack/react-table';\nimport { type MouseEvent, useCallback, useState } from 'react';\n\n/**\n * A hook that provides shift-click range selection functionality for table checkboxes.\n * Use this hook in the parent component and pass the returned props to individual checkboxes.\n *\n * @example\n * ```tsx\n * const { lastClickedRowIndex, createCheckboxProps } = useShiftClickCheckbox();\n *\n * // In your column definition:\n * cell: ({ row, table }) => {\n *   return <input type=\"checkbox\" {...createCheckboxProps(row, table)} />;\n * }\n * ```\n */\nexport function useShiftClickCheckbox<TData>() {\n  const [lastClickedRowIndex, setLastClickedRowIndex] = useState<number | null>(null);\n\n  /**\n   * Creates props for a checkbox that supports shift-click range selection.\n   * @param row - The TanStack Table row\n   * @param table - The TanStack Table instance\n   * @returns Props to spread on the checkbox input element\n   */\n  const createCheckboxProps = useCallback(\n    (row: Row<TData>, table: Table<TData>) => {\n      const handleClick = (e: MouseEvent<HTMLInputElement>) => {\n        if (e.shiftKey && lastClickedRowIndex !== null) {\n          // Shift-click: select range\n          const currentIndex = row.index;\n          const start = Math.min(lastClickedRowIndex, currentIndex);\n          const end = Math.max(lastClickedRowIndex, currentIndex);\n\n          // Get all rows in the range\n          const rows = table.getRowModel().rows;\n          const shouldSelect = !row.getIsSelected();\n\n          // Select or deselect all rows in the range\n          for (let i = start; i <= end; i++) {\n            if (rows[i]?.getCanSelect()) {\n              rows[i].toggleSelected(shouldSelect);\n            }\n          }\n        } else {\n          // Normal click: toggle this row\n          row.getToggleSelectedHandler()(e);\n        }\n        setLastClickedRowIndex(row.index);\n      };\n\n      return {\n        checked: row.getIsSelected(),\n        disabled: !row.getCanSelect(),\n        onClick: handleClick,\n      };\n    },\n    [lastClickedRowIndex],\n  );\n\n  return {\n    lastClickedRowIndex,\n    setLastClickedRowIndex,\n    createCheckboxProps,\n  };\n}\n"]}
+{"version":3,"file":"useShiftClickCheckbox.d.ts","sourceRoot":"","sources":["../../src/components/useShiftClickCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,KAAK,UAAU,EAAyB,MAAM,OAAO,CAAC;AAE/D;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CAAC,KAAK;;;;;;;;;EAoD1C","sourcesContent":["import type { Row, Table } from '@tanstack/react-table';\nimport { type MouseEvent, useCallback, useState } from 'react';\n\n/**\n * A hook that provides shift-click range selection functionality for table checkboxes.\n * Use this hook in the parent component and pass the returned props to individual checkboxes.\n *\n * @example\n * ```tsx\n * const { lastClickedRowIndex, createCheckboxProps } = useShiftClickCheckbox();\n *\n * // In your column definition:\n * cell: ({ row, table }) => {\n *   return <input type=\"checkbox\" {...createCheckboxProps(row, table)} />;\n * }\n * ```\n */\nexport function useShiftClickCheckbox<TData>() {\n  const [lastClickedRowIndex, setLastClickedRowIndex] = useState<number | null>(null);\n\n  /**\n   * Creates props for a checkbox that supports shift-click range selection.\n   * @param row - The TanStack Table row\n   * @param table - The TanStack Table instance\n   * @returns Props to spread on the checkbox input element\n   */\n  const createCheckboxProps = useCallback(\n    (row: Row<TData>, table: Table<TData>) => {\n      const handleClick = (e: MouseEvent<HTMLInputElement>) => {\n        if (e.shiftKey && lastClickedRowIndex !== null) {\n          // Shift-click: select range\n          const currentIndex = row.index;\n          const start = Math.min(lastClickedRowIndex, currentIndex);\n          const end = Math.max(lastClickedRowIndex, currentIndex);\n\n          // Get all rows in the range\n          const rows = table.getRowModel().rows;\n          const shouldSelect = !row.getIsSelected();\n\n          // Select or deselect all rows in the range\n          for (let i = start; i <= end; i++) {\n            if (rows[i]?.getCanSelect()) {\n              rows[i].toggleSelected(shouldSelect);\n            }\n          }\n        } else {\n          // Normal click: toggle this row\n          row.getToggleSelectedHandler()(e);\n        }\n        setLastClickedRowIndex(row.index);\n      };\n\n      return {\n        checked: row.getIsSelected(),\n        disabled: !row.getCanSelect(),\n        onClick: handleClick,\n        // Empty onChange to satisfy React's controlled input requirement\n        // (actual state changes are handled via onClick for shift-click support)\n        onChange: () => {},\n      };\n    },\n    [lastClickedRowIndex],\n  );\n\n  return {\n    lastClickedRowIndex,\n    setLastClickedRowIndex,\n    createCheckboxProps,\n  };\n}\n"]}

package/dist/components/useShiftClickCheckbox.js

@@ -48,6 +48,9 @@ export function useShiftClickCheckbox() {
             checked: row.getIsSelected(),
             disabled: !row.getCanSelect(),
             onClick: handleClick,
+            // Empty onChange to satisfy React's controlled input requirement
+            // (actual state changes are handled via onClick for shift-click support)
+            onChange: () => { },
         };
     }, [lastClickedRowIndex]);
     return {

package/dist/components/useShiftClickCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useShiftClickCheckbox.js","sourceRoot":"","sources":["../../src/components/useShiftClickCheckbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,qBAAqB,GAAU;IAC7C,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEpF;;;;;OAKG;IACH,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,GAAe,EAAE,KAAmB,EAAE,EAAE,CAAC;QACxC,MAAM,WAAW,GAAG,CAAC,CAA+B,EAAE,EAAE,CAAC;YACvD,IAAI,CAAC,CAAC,QAAQ,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;gBAC/C,4BAA4B;gBAC5B,MAAM,YAAY,GAAG,GAAG,CAAC,KAAK,CAAC;gBAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;gBAC1D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;gBAExD,4BAA4B;gBAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC;gBACtC,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;gBAE1C,2CAA2C;gBAC3C,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;oBAClC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,CAAC;wBAC5B,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;oBACvC,CAAC;gBACH,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,gCAAgC;gBAChC,GAAG,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,CAAC;YACpC,CAAC;YACD,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAAA,CACnC,CAAC;QAEF,OAAO;YACL,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE;YAC5B,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE;YAC7B,OAAO,EAAE,WAAW;SACrB,CAAC;IAAA,CACH,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAC;IAEF,OAAO;QACL,mBAAmB;QACnB,sBAAsB;QACtB,mBAAmB;KACpB,CAAC;AAAA,CACH","sourcesContent":["import type { Row, Table } from '@tanstack/react-table';\nimport { type MouseEvent, useCallback, useState } from 'react';\n\n/**\n * A hook that provides shift-click range selection functionality for table checkboxes.\n * Use this hook in the parent component and pass the returned props to individual checkboxes.\n *\n * @example\n * ```tsx\n * const { lastClickedRowIndex, createCheckboxProps } = useShiftClickCheckbox();\n *\n * // In your column definition:\n * cell: ({ row, table }) => {\n *   return <input type=\"checkbox\" {...createCheckboxProps(row, table)} />;\n * }\n * ```\n */\nexport function useShiftClickCheckbox<TData>() {\n  const [lastClickedRowIndex, setLastClickedRowIndex] = useState<number | null>(null);\n\n  /**\n   * Creates props for a checkbox that supports shift-click range selection.\n   * @param row - The TanStack Table row\n   * @param table - The TanStack Table instance\n   * @returns Props to spread on the checkbox input element\n   */\n  const createCheckboxProps = useCallback(\n    (row: Row<TData>, table: Table<TData>) => {\n      const handleClick = (e: MouseEvent<HTMLInputElement>) => {\n        if (e.shiftKey && lastClickedRowIndex !== null) {\n          // Shift-click: select range\n          const currentIndex = row.index;\n          const start = Math.min(lastClickedRowIndex, currentIndex);\n          const end = Math.max(lastClickedRowIndex, currentIndex);\n\n          // Get all rows in the range\n          const rows = table.getRowModel().rows;\n          const shouldSelect = !row.getIsSelected();\n\n          // Select or deselect all rows in the range\n          for (let i = start; i <= end; i++) {\n            if (rows[i]?.getCanSelect()) {\n              rows[i].toggleSelected(shouldSelect);\n            }\n          }\n        } else {\n          // Normal click: toggle this row\n          row.getToggleSelectedHandler()(e);\n        }\n        setLastClickedRowIndex(row.index);\n      };\n\n      return {\n        checked: row.getIsSelected(),\n        disabled: !row.getCanSelect(),\n        onClick: handleClick,\n      };\n    },\n    [lastClickedRowIndex],\n  );\n\n  return {\n    lastClickedRowIndex,\n    setLastClickedRowIndex,\n    createCheckboxProps,\n  };\n}\n"]}
+{"version":3,"file":"useShiftClickCheckbox.js","sourceRoot":"","sources":["../../src/components/useShiftClickCheckbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,qBAAqB,GAAU;IAC7C,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEpF;;;;;OAKG;IACH,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,GAAe,EAAE,KAAmB,EAAE,EAAE,CAAC;QACxC,MAAM,WAAW,GAAG,CAAC,CAA+B,EAAE,EAAE,CAAC;YACvD,IAAI,CAAC,CAAC,QAAQ,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;gBAC/C,4BAA4B;gBAC5B,MAAM,YAAY,GAAG,GAAG,CAAC,KAAK,CAAC;gBAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;gBAC1D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,mBAAmB,EAAE,YAAY,CAAC,CAAC;gBAExD,4BAA4B;gBAC5B,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC;gBACtC,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;gBAE1C,2CAA2C;gBAC3C,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;oBAClC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,CAAC;wBAC5B,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;oBACvC,CAAC;gBACH,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,gCAAgC;gBAChC,GAAG,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAC,CAAC;YACpC,CAAC;YACD,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAAA,CACnC,CAAC;QAEF,OAAO;YACL,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE;YAC5B,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE;YAC7B,OAAO,EAAE,WAAW;YACpB,iEAAiE;YACjE,yEAAyE;YACzE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAC,CAAC;SACnB,CAAC;IAAA,CACH,EACD,CAAC,mBAAmB,CAAC,CACtB,CAAC;IAEF,OAAO;QACL,mBAAmB;QACnB,sBAAsB;QACtB,mBAAmB;KACpB,CAAC;AAAA,CACH","sourcesContent":["import type { Row, Table } from '@tanstack/react-table';\nimport { type MouseEvent, useCallback, useState } from 'react';\n\n/**\n * A hook that provides shift-click range selection functionality for table checkboxes.\n * Use this hook in the parent component and pass the returned props to individual checkboxes.\n *\n * @example\n * ```tsx\n * const { lastClickedRowIndex, createCheckboxProps } = useShiftClickCheckbox();\n *\n * // In your column definition:\n * cell: ({ row, table }) => {\n *   return <input type=\"checkbox\" {...createCheckboxProps(row, table)} />;\n * }\n * ```\n */\nexport function useShiftClickCheckbox<TData>() {\n  const [lastClickedRowIndex, setLastClickedRowIndex] = useState<number | null>(null);\n\n  /**\n   * Creates props for a checkbox that supports shift-click range selection.\n   * @param row - The TanStack Table row\n   * @param table - The TanStack Table instance\n   * @returns Props to spread on the checkbox input element\n   */\n  const createCheckboxProps = useCallback(\n    (row: Row<TData>, table: Table<TData>) => {\n      const handleClick = (e: MouseEvent<HTMLInputElement>) => {\n        if (e.shiftKey && lastClickedRowIndex !== null) {\n          // Shift-click: select range\n          const currentIndex = row.index;\n          const start = Math.min(lastClickedRowIndex, currentIndex);\n          const end = Math.max(lastClickedRowIndex, currentIndex);\n\n          // Get all rows in the range\n          const rows = table.getRowModel().rows;\n          const shouldSelect = !row.getIsSelected();\n\n          // Select or deselect all rows in the range\n          for (let i = start; i <= end; i++) {\n            if (rows[i]?.getCanSelect()) {\n              rows[i].toggleSelected(shouldSelect);\n            }\n          }\n        } else {\n          // Normal click: toggle this row\n          row.getToggleSelectedHandler()(e);\n        }\n        setLastClickedRowIndex(row.index);\n      };\n\n      return {\n        checked: row.getIsSelected(),\n        disabled: !row.getCanSelect(),\n        onClick: handleClick,\n        // Empty onChange to satisfy React's controlled input requirement\n        // (actual state changes are handled via onClick for shift-click support)\n        onChange: () => {},\n      };\n    },\n    [lastClickedRowIndex],\n  );\n\n  return {\n    lastClickedRowIndex,\n    setLastClickedRowIndex,\n    createCheckboxProps,\n  };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prairielearn/ui",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "type": "module",
   "repository": {
     "type": "git",
@@ -20,26 +20,26 @@
     "test": "vitest run --coverage"
   },
   "dependencies": {
-    "@prairielearn/browser-utils": "^2.7.0",
-    "@prairielearn/run": "^2.0.1",
+    "@prairielearn/browser-utils": "^2.7.1",
+    "@prairielearn/run": "^2.0.2",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.18",
+    "@tanstack/react-virtual": "^3.13.19",
     "@tanstack/table-core": "^8.21.3",
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "clsx": "^2.1.1",
-    "nuqs": "^2.8.8",
+    "nuqs": "^2.8.9",
     "react": "^19.2.4",
-    "react-aria": "^3.45.0",
-    "react-aria-components": "^1.14.0",
+    "react-aria": "^3.46.0",
+    "react-aria-components": "^1.15.1",
     "react-bootstrap": "3.0.0-beta.5",
     "react-dom": "^19.2.4",
     "use-debounce": "^10.1.0"
   },
   "devDependencies": {
     "@prairielearn/tsconfig": "^2.0.0",
-    "@types/node": "^24.10.9",
-    "@typescript/native-preview": "^7.0.0-dev.20260203.1",
+    "@types/node": "^24.11.0",
+    "@typescript/native-preview": "^7.0.0-dev.20260302.1",
     "typescript": "^5.9.3",
     "typescript-cp": "^0.1.9",
     "vitest": "^4.0.18"

package/src/components/TanstackTable.tsx

@@ -247,7 +247,6 @@ export function TanstackTable<RowDataModel>({
   useEffect(() => {
     if (hasAutoSized) {
       // https://github.com/NickvanDyke/eslint-plugin-react-you-might-not-need-an-effect/issues/58
-      // eslint-disable-next-line react-you-might-not-need-an-effect/no-pass-ref-to-parent
       columnVirtualizer.measure();
     }
   }, [columnVirtualizer, hasAutoSized]);

package/src/components/useShiftClickCheckbox.tsx

@@ -54,6 +54,9 @@ export function useShiftClickCheckbox<TData>() {
         checked: row.getIsSelected(),
         disabled: !row.getCanSelect(),
         onClick: handleClick,
+        // Empty onChange to satisfy React's controlled input requirement
+        // (actual state changes are handled via onClick for shift-click support)
+        onChange: () => {},
       };
     },
     [lastClickedRowIndex],