react-science 21.0.0 → 22.0.0

package/src/components/table/reorder_rows/item_order_provider.tsx

@@ -1,18 +1,23 @@
-import type { Row } from '@tanstack/react-table';
+import type { Row, RowData } from '@tanstack/react-table';
 import { getReorderDestinationIndex, reorder } from '@zakodium/pdnd-esm';
 import type { ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
-import type { ReorderItemCallback } from './item_order_context.js';
+import type { ReactScienceTableFeatures } from '../table_features.js';
+
+import type {
+  ItemOrderContextValue,
+  ReorderItemCallback,
+} from './item_order_context.js';
 import { itemOrderContext } from './item_order_context.js';
 
-interface ItemOrderProviderProps<T> {
-  items: Array<Row<T>>;
-  onOrderChanged: (items: Array<Row<T>>) => void;
+interface ItemOrderProviderProps<T extends RowData> {
+  items: Array<Row<ReactScienceTableFeatures, T>>;
+  onOrderChanged: (items: Array<Row<ReactScienceTableFeatures, T>>) => void;
   children: ReactNode;
 }
 
-export function ItemOrderProvider<T = unknown>(
+export function ItemOrderProvider<T extends RowData = RowData>(
   props: ItemOrderProviderProps<T>,
 ) {
   // Isolated instances of this component from one another
@@ -43,13 +48,10 @@ export function ItemOrderProvider<T = unknown>(
     [items, onOrderChanged],
   );
 
-  const value = useMemo(() => {
-    // This assertion is necessary because the provider cannot contain the
-    // T type instantiated by this component.
-    const contextItems = items as Array<Row<unknown>>;
+  const value = useMemo<ItemOrderContextValue>(() => {
     return {
       reorderItem,
-      items: contextItems,
+      items,
       instanceId,
     };
   }, [reorderItem, items, instanceId]);

package/src/components/table/table_body.tsx

@@ -7,6 +7,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import { Fragment } from 'react';
 
 import { TableDraggableRowTr } from './reorder_rows/index.js';
+import type { ReactScienceTableFeatures } from './table_features.js';
 import { TableRowTr } from './table_row.js';
 import { TableRowCell } from './table_row_cell.js';
 import type {
@@ -17,7 +18,7 @@ import type {
 } from './table_utils.js';
 
 interface TableBodyProps<TData extends RowData> {
-  rows: Array<Row<TData>>;
+  rows: Array<Row<ReactScienceTableFeatures, TData>>;
   tdStyle?: CSSProperties;
   getTdProps?: GetTdProps<TData>;
   renderRowTr: TableRowTrRenderer<TData> | undefined;
@@ -42,10 +43,7 @@ export function TableBody<TData extends RowData>(props: TableBodyProps<TData>) {
     getTdProps,
     isReorderingEnabled,
     renderRowPreview,
-    renderRowTr = getDefaultRenderRowTr(
-      isReorderingEnabled,
-      renderRowPreview as TableRowPreviewRenderer<unknown>,
-    ) as TableRowTrRenderer<TData>,
+    renderRowTr = getDefaultRenderRowTr(isReorderingEnabled, renderRowPreview),
     virtualizer,
     virtualizeRows,
     emptyContent,
@@ -157,13 +155,15 @@ const EmptyState = styled.div`
   gap: 0.5em;
 `;
 
-type TableRowRenderer<TData extends RowData> = (row: Row<TData>) => ReactNode;
+type TableRowRenderer<TData extends RowData> = (
+  row: Row<ReactScienceTableFeatures, TData>,
+) => ReactNode;
 
-function TableRow<TData>({
+function TableRow<TData extends RowData>({
   row,
   renderRowTr,
 }: {
-  row: Row<TData>;
+  row: Row<ReactScienceTableFeatures, TData>;
   renderRowTr: TableRowRenderer<TData>;
 }) {
   return <Fragment>{renderRowTr(row)}</Fragment>;
@@ -177,7 +177,7 @@ type RenderRowVirtualItem = VirtualItem & {
 };
 
 function getTrRenderProps<TData extends RowData>(
-  row: Row<TData>,
+  row: Row<ReactScienceTableFeatures, TData>,
   tdStyle: CSSProperties | undefined,
   getTdProps: GetTdProps<TData> | undefined,
   virtualItem?: RenderRowVirtualItem,
@@ -202,24 +202,20 @@ function getTrRenderProps<TData extends RowData>(
   };
 }
 
-function getDefaultRenderRowTr(
+function getDefaultRenderRowTr<TData extends RowData>(
   isReorderingEnabled: boolean,
-  renderRowPreview: TableRowPreviewRenderer<unknown> | undefined,
-): TableRowTrRenderer<unknown> {
+  renderRowPreview: TableRowPreviewRenderer<TData> | undefined,
+): TableRowTrRenderer<TData> {
   if (isReorderingEnabled) {
     return getDefaultRenderDraggableRowTr(renderRowPreview);
   } else {
-    return defaultRenderRowTr;
+    return (trProps, row) => <TableRowTr trProps={{ ...trProps }} row={row} />;
   }
 }
 
-const defaultRenderRowTr: TableRowTrRenderer<unknown> = (trProps, row) => (
-  <TableRowTr trProps={{ ...trProps }} row={row} />
-);
-
-function getDefaultRenderDraggableRowTr(
-  renderRowPreview: TableRowPreviewRenderer<unknown> | undefined,
-): TableRowTrRenderer<unknown> {
+function getDefaultRenderDraggableRowTr<TData extends RowData>(
+  renderRowPreview: TableRowPreviewRenderer<TData> | undefined,
+): TableRowTrRenderer<TData> {
   return (trProps, row) => (
     <TableDraggableRowTr
       trProps={trProps}

package/src/components/table/table_features.ts

@@ -0,0 +1,28 @@
+import {
+  columnVisibilityFeature,
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFn_alphanumeric as sortFnAlphanumeric,
+  sortFn_alphanumericCaseSensitive as sortFnAlphanumericCaseSensitive,
+  sortFn_basic as sortFnBasic,
+  sortFn_datetime as sortFnDatetime,
+  sortFn_text as sortFnText,
+  sortFn_textCaseSensitive as sortFnTextCaseSensitive,
+  tableFeatures,
+} from '@tanstack/react-table';
+
+export const reactScienceTableFeatures = tableFeatures({
+  columnVisibilityFeature,
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFnAlphanumeric,
+    alphanumericCaseSensitive: sortFnAlphanumericCaseSensitive,
+    basic: sortFnBasic,
+    datetime: sortFnDatetime,
+    text: sortFnText,
+    textCaseSensitive: sortFnTextCaseSensitive,
+  },
+});
+
+export type ReactScienceTableFeatures = typeof reactScienceTableFeatures;

package/src/components/table/table_header.tsx

@@ -1,6 +1,7 @@
 import type { Header, RowData } from '@tanstack/react-table';
 import type { CSSProperties } from 'react';
 
+import type { ReactScienceTableFeatures } from './table_features.js';
 import type { HeaderCellRenderer } from './table_header_cell.js';
 import { TableHeaderCell } from './table_header_cell.js';
 
@@ -12,7 +13,7 @@ const headerStyle: CSSProperties = {
 };
 
 interface TableHeaderProps<TData extends RowData> {
-  headers: Array<Header<TData, unknown>>;
+  headers: Array<Header<ReactScienceTableFeatures, TData, unknown>>;
   sticky: boolean;
   renderHeaderCell?: HeaderCellRenderer<TData>;
 }

package/src/components/table/table_header_cell.tsx

@@ -1,10 +1,12 @@
 import { Icon } from '@blueprintjs/core';
 import type { IconName } from '@blueprintjs/icons';
-import type { Header, RowData, SortingFnOption } from '@tanstack/react-table';
+import type { Header, RowData, SortFnOption } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { match } from 'ts-pattern';
 
+import type { ReactScienceTableFeatures } from './table_features.js';
+
 type ThProps = Pick<
   HTMLAttributes<HTMLTableCellElement>,
   'style' | 'onClick' | 'children'
@@ -12,11 +14,11 @@ type ThProps = Pick<
 
 export type HeaderCellRenderer<TData extends RowData> = (
   thProps: ThProps,
-  header: Header<TData, unknown>,
+  header: Header<ReactScienceTableFeatures, TData, unknown>,
 ) => ReactNode;
 
 interface TableHeaderCellProps<TData extends RowData> {
-  header: Header<TData, unknown>;
+  header: Header<ReactScienceTableFeatures, TData, unknown>;
   renderHeaderCell?: HeaderCellRenderer<TData>;
 }
 
@@ -33,15 +35,13 @@ export function TableHeaderCell<TData extends RowData>(
 }
 
 function getThProps<TData extends RowData>(
-  header: Header<TData, unknown>,
+  header: Header<ReactScienceTableFeatures, TData, unknown>,
 ): ThProps {
   const { column } = header;
 
   const sorted = column.getIsSorted();
   const canSort = column.getCanSort();
-  const sortingIcon = getSortingIcon(column.columnDef.sortingFn)[
-    sorted || 'asc'
-  ];
+  const sortingIcon = getSortingIcon(column.columnDef.sortFn)[sorted || 'asc'];
 
   return {
     onClick: canSort ? column.getToggleSortingHandler() : undefined,
@@ -60,10 +60,10 @@ function getThProps<TData extends RowData>(
 }
 
 function getSortingIcon<TData extends RowData>(
-  type: SortingFnOption<TData> | undefined,
+  type: SortFnOption<ReactScienceTableFeatures, TData> | undefined,
 ): { asc: IconName; desc: IconName } {
   return match<
-    SortingFnOption<TData> | undefined,
+    SortFnOption<ReactScienceTableFeatures, TData> | undefined,
     { asc: IconName; desc: IconName }
   >(type)
     .with(

package/src/components/table/table_root.tsx

@@ -1,16 +1,7 @@
 import { HTMLTable } from '@blueprintjs/core';
 import styled from '@emotion/styled';
-import type {
-  Header,
-  RowData,
-  Table as TanstackTable,
-  TableOptions,
-} from '@tanstack/react-table';
-import {
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
+import type { Header, RowData, TableOptions } from '@tanstack/react-table';
+import { useTable } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import type {
   CSSProperties,
@@ -28,6 +19,8 @@ import type { PreviewTablePropsContextValue } from './preview_table_context.js';
 import { PreviewTablePropsContextProvider } from './preview_table_context.js';
 import { ItemOrderProvider } from './reorder_rows/item_order_provider.js';
 import { TableBody } from './table_body.js';
+import type { ReactScienceTableFeatures } from './table_features.js';
+import { reactScienceTableFeatures } from './table_features.js';
 import { TableHeader } from './table_header.js';
 import type { HeaderCellRenderer } from './table_header_cell.js';
 import { ScrollContainer } from './table_scroll_container.js';
@@ -124,8 +117,8 @@ interface TableBaseProps<TData extends RowData> {
   virtualizeRows?: boolean;
 
   reactTable?: Omit<
-    TableOptions<TData>,
-    'data' | 'columns' | 'getCoreRowModel' | 'getSortedRowModel'
+    TableOptions<ReactScienceTableFeatures, TData>,
+    'features' | 'data' | 'columns'
   >;
   /**
    * Props which are forwarded to the underlying HTML table element.
@@ -170,7 +163,7 @@ interface TableBaseProps<TData extends RowData> {
   /**
    * An accessor which should return a unique identifier for the row.
    */
-  getRowId?: TableOptions<TData>['getRowId'];
+  getRowId?: TableOptions<ReactScienceTableFeatures, TData>['getRowId'];
 
   /**
    * Called when the user changed the order of the rows.
@@ -267,12 +260,11 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
   const isReorderingEnabled = !!onRowOrderChanged;
   const virtualScrollElementRef = useRef<HTMLDivElement>(null);
   const columnDefs = useTableColumns(columns);
-  const table = useReactTable<TData>({
+  const table = useTable({
     ...reactTable,
+    features: reactScienceTableFeatures,
     data,
     columns: columnDefs,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId,
   });
 
@@ -299,10 +291,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
   }
 
   const tableHeaders = table.getFlatHeaders();
-  useCheckProps(
-    props as TableProps<unknown>,
-    tableHeaders as Array<Header<unknown, unknown>>,
-  );
+  useCheckProps(props, tableHeaders);
 
   const tablePreviewProps = useMemo<PreviewTablePropsContextValue<TData>>(
     () => ({
@@ -320,7 +309,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
   return (
     <FlashedRowProvider>
       <PreviewTablePropsContextProvider
-        value={tablePreviewProps as PreviewTablePropsContextValue<unknown>}
+        value={tablePreviewProps as PreviewTablePropsContextValue<RowData>}
       >
         <ItemOrderProvider
           items={rows}
@@ -331,7 +320,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
           <ScrollContainer
             virtualizeRows={virtualizeRows}
             virtualizer={tanstackVirtualizer}
-            table={table as TanstackTable<unknown>}
+            table={table}
             scrollRef={
               virtualizeRows
                 ? // When virtualized, ScrollContainer will render a scrollable element associated to this ref.
@@ -385,9 +374,9 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
   );
 }
 
-function useCheckProps(
-  props: TableProps<unknown>,
-  headers: Array<Header<unknown, unknown>>,
+function useCheckProps<TData extends RowData>(
+  props: TableProps<TData>,
+  headers: Array<Header<ReactScienceTableFeatures, TData, unknown>>,
 ) {
   const { onRowOrderChanged, getRowId } = props;
   useEffect(() => {

package/src/components/table/table_row.tsx

@@ -1,15 +1,18 @@
-import type { Row } from '@tanstack/react-table';
+import type { Row, RowData } from '@tanstack/react-table';
 import type { JSX } from 'react';
 import { useRef } from 'react';
 
 import { useFlashRowEffect } from './flash_row/use_flash_row_effect.js';
+import type { ReactScienceTableFeatures } from './table_features.js';
 
-export interface TableRowTrProps<RowType> {
-  row: Row<RowType>;
+export interface TableRowTrProps<RowType extends RowData> {
+  row: Row<ReactScienceTableFeatures, RowType>;
   trProps: JSX.IntrinsicElements['tr'];
 }
 
-export function TableRowTr<RowType>(props: TableRowTrProps<RowType>) {
+export function TableRowTr<RowType extends RowData>(
+  props: TableRowTrProps<RowType>,
+) {
   const { row, trProps } = props;
   const tableRowRef = useRef<HTMLTableRowElement>(null);
   useFlashRowEffect(row.id, tableRowRef);

package/src/components/table/table_row_cell.tsx

@@ -2,10 +2,11 @@ import type { Cell, RowData } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
 import type { CSSProperties } from 'react';
 
+import type { ReactScienceTableFeatures } from './table_features.js';
 import type { GetTdProps } from './table_utils.js';
 
 interface TableRowCellProps<TData extends RowData> {
-  cell: Cell<TData, unknown>;
+  cell: Cell<ReactScienceTableFeatures, TData, unknown>;
   tdStyle: CSSProperties | undefined;
   getTdProps: GetTdProps<TData> | undefined;
 }

package/src/components/table/table_scroll_container.tsx

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
+import type { RowData, Table as TanstackTable } from '@tanstack/react-table';
 import type { Virtualizer } from '@tanstack/react-virtual';
-import type { Table as TanstackTable } from '@tanstack/table-core';
 import type { ReactNode, RefObject } from 'react';
 
 import { useDropMonitor } from './reorder_rows/use_drop_monitor.js';
+import type { ReactScienceTableFeatures } from './table_features.js';
 import type { TableProps } from './table_root.js';
 import { useTableScroll } from './use_table_scroll.js';
 
@@ -12,7 +13,7 @@ const ScrollRefDiv = styled.div`
   overflow: auto;
 `;
 
-interface ScrollContainerProps {
+interface ScrollContainerProps<TData extends RowData> {
   /**
    * Whether the table rows are virtualized.
    */
@@ -24,7 +25,7 @@ interface ScrollContainerProps {
   /**
    * The tanstack table.
    */
-  table: TanstackTable<unknown>;
+  table: TanstackTable<ReactScienceTableFeatures, TData>;
   /**
    * A ref to the effective scroll container.
    */
@@ -34,12 +35,14 @@ interface ScrollContainerProps {
    * It is set by the ScrollContainer component if the table is virtualized.
    * It is an external ref when the table is not virtualized.
    */
-  scrollToRowRef?: TableProps<unknown>['scrollToRowRef'];
+  scrollToRowRef?: TableProps<TData>['scrollToRowRef'];
   isReorderingEnabled: boolean;
   children: ReactNode;
 }
 
-export function ScrollContainer(props: ScrollContainerProps) {
+export function ScrollContainer<TData extends RowData>(
+  props: ScrollContainerProps<TData>,
+) {
   const {
     virtualizeRows,
     table,

package/src/components/table/table_utils.ts

@@ -3,7 +3,10 @@ import { createColumnHelper } from '@tanstack/react-table';
 import type { ScrollToOptions } from '@tanstack/react-virtual';
 import type { CSSProperties, ReactNode, TdHTMLAttributes } from 'react';
 
+import type { ReactScienceTableFeatures } from './table_features.js';
+
 export type TableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<
+  ReactScienceTableFeatures,
   TData,
   TValue
 >;
@@ -11,11 +14,11 @@ export type TableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<
 type TableTdProps = TdHTMLAttributes<HTMLTableCellElement>;
 
 export type GetTdProps<TData extends RowData> = (
-  cell: Cell<TData, unknown>,
+  cell: Cell<ReactScienceTableFeatures, TData, unknown>,
 ) => TableTdProps;
 
 export function createTableColumnHelper<TData extends RowData>() {
-  return createColumnHelper<TData>();
+  return createColumnHelper<ReactScienceTableFeatures, TData>();
 }
 
 export interface TableRowTrRenderProps {
@@ -28,14 +31,14 @@ export interface TableRowTrRenderProps {
 
 export type TableRowTrRenderer<TData extends RowData> = (
   trProps: TableRowTrRenderProps,
-  row: Row<TData>,
+  row: Row<ReactScienceTableFeatures, TData>,
 ) => ReactNode;
 
 export type TableRowPreviewRenderer<TData extends RowData> = (
   /**
    * The row being dragged, for which to render a preview.
    */
-  row: Row<TData>,
+  row: Row<ReactScienceTableFeatures, TData>,
 ) => ReactNode;
 
 interface FlashRowOptions {

package/src/components/table/use_table_columns.ts

@@ -1,13 +1,13 @@
-import type { ColumnDef, RowData } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { useMemo } from 'react';
 
 import { defaultTableCell } from './default_table_cell.js';
 import type { TableColumnDef } from './table_utils.js';
 
-export function useTableColumns<TData extends RowData>(
-  columnDefs: Array<TableColumnDef<TData>>,
+export function useTableColumns<TData extends RowData, TValue>(
+  columnDefs: Array<TableColumnDef<TData, TValue>>,
 ) {
-  return useMemo<Array<ColumnDef<TData>>>(() => {
+  return useMemo<Array<TableColumnDef<TData, TValue>>>(() => {
     return columnDefs.map((columnDef) => {
       return {
         ...columnDef,

package/src/components/table/use_table_scroll.ts

@@ -6,6 +6,7 @@ import { useImperativeHandle } from 'react';
 import { selector } from '../utils/selector.ts';
 
 import { useFlashedRowContext } from './flash_row/flashed_row_context.js';
+import type { ReactScienceTableFeatures } from './table_features.js';
 import type { TableProps } from './table_root.js';
 import type { TableVirtualScrollIntoViewOptions } from './table_utils.js';
 
@@ -25,7 +26,7 @@ export function useTableScroll<TData extends RowData>(options: {
   /*
   Tanstack table instance.
    */
-  table: Table<TData>;
+  table: Table<ReactScienceTableFeatures, TData>;
   /**
    * Tanstack virtualizer instance.
    */