@dxos/react-ui-table 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/_deprecated/components/Table/Table.tsx

@@ -1,301 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
-import {
-  type GroupingState,
-  type Row,
-  type RowData,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getGroupedRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import React, {
-  type ComponentPropsWithoutRef,
-  type ReactNode,
-  Fragment,
-  memo,
-  useCallback,
-  useEffect,
-  useState,
-  useContext,
-} from 'react';
-
-import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { TableBody } from './TableBody';
-import { type TypedTableProvider, TableProvider as UntypedTableProvider, useTableContext } from './TableContext';
-import { TableHead } from './TableHead';
-import { TableRootContext, useTableRootContext } from './TableRootContext';
-import { type TableProps } from './props';
-import { useColumnResizing, useColumnSorting, usePinLastRow, useRowSelection } from '../../hooks';
-import { groupTh, tableRoot } from '../../theme';
-
-type TableRootProps = { children: ReactNode };
-
-const TableRoot = ({ children }: TableRootProps) => {
-  const contextValue = useTableRootContext();
-  return <TableRootContext.Provider value={contextValue}>{children}</TableRootContext.Provider>;
-};
-
-type TableViewportProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.div>> & {
-  asChild?: boolean;
-};
-
-const TableViewport = ({ children, classNames, asChild, ...props }: TableViewportProps) => {
-  const { scrollContextRef } = useContext(TableRootContext);
-
-  const classes = mx(classNames, 'overflow-auto');
-  return asChild ? (
-    <Slot ref={scrollContextRef} className={classes} {...props}>
-      {children}
-    </Slot>
-  ) : (
-    <div role='none' className={classes} ref={scrollContextRef} {...props}>
-      {children}
-    </div>
-  );
-};
-
-export const TablePrimitive = <TData extends RowData>(props: TableProps<TData>) => {
-  const {
-    role,
-    header = true,
-    rowsSelectable,
-    debug,
-    pinLastRow,
-    columnVisibility,
-    onColumnResize,
-    onDataSelectionChange,
-  } = props;
-
-  const columns = useDefaultValue(props.columns, () => []);
-  const incomingData = useDefaultValue(props.data, () => []);
-
-  const [data, setData] = useState([...incomingData]);
-
-  // Reactivity workaround: https://github.com/dxos/dxos/issues/6376.
-  const forceUpdate = useCallback(() => setData([...incomingData]), [incomingData]);
-  useEffect(() => forceUpdate(), [JSON.stringify(incomingData), forceUpdate]);
-
-  const TableProvider = UntypedTableProvider as TypedTableProvider<TData>;
-
-  const { columnSizing, setColumnSizing, columnSizingInfo, setColumnSizingInfo } = useColumnResizing({
-    columns,
-    onColumnResize,
-  });
-
-  const { rowSelection, handleRowSelectionChange } = useRowSelection(props);
-
-  const [grouping, handleGroupingChange] = useState<GroupingState>(props.grouping ?? []);
-  useEffect(() => handleGroupingChange(props.grouping ?? []), [handleGroupingChange, props.grouping]);
-
-  const columnSorting = useColumnSorting();
-
-  const table = useReactTable({
-    // Data
-    meta: {},
-    data,
-
-    // Columns
-    columns,
-    defaultColumn: {
-      size: 400, // Required in order remove default width.
-      maxSize: 1024,
-    },
-
-    // State
-    state: {
-      columnVisibility,
-      columnSizing,
-      columnSizingInfo,
-      sorting: columnSorting.sorting,
-      rowSelection,
-      grouping,
-    },
-
-    // Resize columns
-    columnResizeMode: 'onChange',
-    enableColumnResizing: true,
-    onColumnSizingChange: setColumnSizing,
-    onColumnSizingInfoChange: setColumnSizingInfo,
-
-    // Rows
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-
-    // Grouping
-    getGroupedRowModel: grouping.length > 1 ? getGroupedRowModel() : undefined,
-    onGroupingChange: handleGroupingChange,
-
-    enableMultiRowSelection: rowsSelectable === 'multi' ? true : undefined,
-    enableRowSelection: rowsSelectable === true ? true : undefined,
-
-    onRowSelectionChange: handleRowSelectionChange,
-
-    enableSorting: true,
-    enableColumnPinning: true,
-
-    // Debug
-    debugTable: debug,
-  });
-
-  useEffect(() => {
-    onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
-  }, [onDataSelectionChange, rowSelection, table]);
-
-  usePinLastRow(pinLastRow, table, data);
-
-  // Create additional expansion column if all columns have fixed width.
-  const expand = false; // columns.map((column) => column.size).filter(Boolean).length === columns?.length;
-
-  return (
-    <TableProvider
-      {...{ ...props, ...columnSorting }}
-      table={table}
-      header={header}
-      expand={expand}
-      isGrid={role === 'grid' || role === 'treegrid'}
-    >
-      <TableImpl<TData> debug={false} {...props} />
-    </TableProvider>
-  );
-};
-
-// TODO(zan): Smush this into the Table component.
-/**
- * Pure implementation of table outside of context set-up.
- */
-const TableImpl = <TData extends RowData>(props: TableProps<TData>) => {
-  const { debug, classNames, role, grouping, fullWidth } = props;
-  const { table } = useTableContext<TData>();
-
-  if (debug) {
-    return (
-      <pre className='font-mono text-xs text-neutral-500 m-1 p-2 ring'>
-        <code>{JSON.stringify(table.getState(), undefined, 2)}</code>
-      </pre>
-    );
-  }
-
-  const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
-
-  const TableComponent = isResizingColumn ? MemoizedVirtualizedTableContent : VirtualizedTableContent;
-
-  return (
-    <table
-      role={role}
-      className={tableRoot(props, classNames)}
-      style={{
-        // borderCollapse: 'separate',
-        borderSpacing: 0,
-        ...(!fullWidth && { width: table.getTotalSize() }),
-      }}
-    >
-      <TableHead />
-
-      {grouping?.length !== 0 ? <TableComponent /> : <GroupedTableContent />}
-    </table>
-  );
-};
-
-const VirtualizedTableContent = () => {
-  const { table } = useTableContext();
-  const { virtualizer, dispatch } = useContext(TableRootContext);
-
-  const centerRows = table.getCenterRows();
-  let pinnedRows = [] as Row<unknown>[];
-
-  useEffect(() => {
-    dispatch({ type: 'updateTableCount', count: centerRows.length });
-  }, [centerRows.length]);
-
-  try {
-    // TODO(zan): Work out how to sync the row pinning with rendering
-    // This is a hack because the first call to this function after a row is deleted will throw an error
-    // because the row index is no longer in the table
-    // The pin last row hook updates the pinned row key after the row is deleted
-    pinnedRows = table.getBottomRows();
-  } catch (_) {} // Ignore error
-
-  const { getTotalSize, getVirtualItems } = virtualizer;
-
-  const virtualRows = getVirtualItems();
-  const totalSize = getTotalSize();
-
-  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
-  const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
-
-  const rowsToRender = [...virtualRows.map((virtualRow) => centerRows[virtualRow.index]), ...pinnedRows].filter(
-    (r) => !!r,
-  );
-
-  return (
-    <Fragment>
-      {paddingTop > 0 && (
-        <tbody role='none'>
-          <tr role='none'>
-            <td style={{ height: `${paddingTop}px` }} role='none' />
-          </tr>
-        </tbody>
-      )}
-      <TableBody rows={rowsToRender} />
-      {paddingBottom > 0 && (
-        <tbody role='none'>
-          <tr role='none'>
-            <td style={{ height: `${paddingBottom}px` }} role='none' />
-          </tr>
-        </tbody>
-      )}
-    </Fragment>
-  );
-};
-
-export const MemoizedVirtualizedTableContent = memo(VirtualizedTableContent);
-
-const GroupedTableContent = () => {
-  const {
-    table: { getGroupedRowModel, getHeaderGroups, getState },
-    debug,
-  } = useTableContext();
-
-  return (
-    <>
-      {getGroupedRowModel().rows.map((row, i) => {
-        return (
-          <Fragment key={i}>
-            {/* TODO(burdon): Customize group header renderer. */}
-            <thead>
-              <tr>
-                {debug && <th />}
-                <th
-                  // TODO(burdon): Calculate row span.
-                  colSpan={getHeaderGroups()[0].headers.length}
-                  className={groupTh({})}
-                >
-                  {getState().grouping[0]}[{String(row.getGroupingValue(getState().grouping[0]))}]
-                </th>
-              </tr>
-            </thead>
-            <TableBody rows={row.subRows} />
-          </Fragment>
-        );
-      })}
-    </>
-  );
-};
-
-// TODO(burdon): Floating "add row" jumps by 1 pixel on scroll.
-// TODO(burdon): Blue focus highlight is clipped by 1px on the left.
-// TODO(burdon): Focused row and focus ring passes over the sticky header.
-export const Table = {
-  Root: TableRoot,
-  Viewport: TableViewport,
-  Main: TablePrimitive,
-};

package/src/_deprecated/components/Table/TableBody.tsx

@@ -1,82 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { flexRender, type Row, type RowData } from '@tanstack/react-table';
-import React, { useContext } from 'react';
-
-import { useTableContext } from './TableContext';
-import { TableRootContext } from './TableRootContext';
-import { tbodyTr } from '../../theme';
-import { Cell } from '../Cell/Cell';
-
-const TABLE_BODY_NAME = 'TableBody';
-
-type TableBodyProps = {
-  rows: Row<RowData>[];
-};
-
-const TableBody = ({ rows }: TableBodyProps) => {
-  const { table, keyAccessor, currentDatum, debug, expand, isGrid, onDatumClick } = useTableContext();
-
-  const rowSelection = table.getState().rowSelection;
-  const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'grid' });
-  const canBeCurrent = !isGrid && !!onDatumClick;
-
-  const { virtualizer } = useContext(TableRootContext);
-
-  return (
-    <tbody {...(isGrid && arrowNavigationAttrs)}>
-      {rows.map((row) => {
-        const isCurrent = currentDatum === row.original;
-        const isSelected = rowSelection?.[row.id];
-
-        const isPinned = row.getIsPinned();
-
-        const classNames = tbodyTr({ canBeCurrent, isPinned: isPinned !== false });
-
-        return (
-          <tr
-            key={keyAccessor ? keyAccessor(row.original) : row.id}
-            className={classNames}
-            data-index={row.index}
-            data-testid={'table.data-row'}
-            ref={virtualizer.measureElement}
-            {...(isCurrent && { 'aria-current': 'location' })}
-            {...(isSelected && { 'aria-selected': 'true' })}
-            {...(canBeCurrent && {
-              tabIndex: 0,
-              onClick: () => {
-                onDatumClick(row.original);
-              },
-              onKeyUp: ({ key }) => {
-                if (key === 'Enter' || key === ' ') {
-                  onDatumClick(row.original);
-                }
-              },
-            })}
-          >
-            {debug && <td>{row.id}</td>}
-
-            {row.getVisibleCells().map((cell) => {
-              return (
-                <Cell key={cell.id} cell={cell}>
-                  {flexRender(cell.column.columnDef.cell, { ...cell.getContext() })}
-                </Cell>
-              );
-            })}
-
-            {expand && <td />}
-          </tr>
-        );
-      })}
-    </tbody>
-  );
-};
-
-TableBody.displayName = TABLE_BODY_NAME;
-
-export { TableBody };
-
-export type { TableBodyProps };

package/src/_deprecated/components/Table/TableContext.tsx

@@ -1,34 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type RowData } from '@tanstack/react-table';
-import React, {
-  useContext,
-  createContext,
-  type Context,
-  type JSX,
-  type PropsWithChildren,
-  type ReactNode,
-} from 'react';
-
-import { raise } from '@dxos/debug';
-
-import { type TableContextValue } from './props';
-
-export const TABLE_NAME = 'Table';
-
-const TableContext = createContext<TableContextValue<RowData> | undefined>(undefined);
-
-export type TypedTableProvider<TData extends RowData> = {
-  (props: TableContextValue<TData> & { children: ReactNode }): JSX.Element;
-  displayName: string;
-};
-
-export const TableProvider = ({ children, ...value }: PropsWithChildren<TableContextValue<RowData>>) => {
-  return <TableContext.Provider value={value}>{children}</TableContext.Provider>;
-};
-
-export const useTableContext = <TData extends RowData>(): TableContextValue<TData> => {
-  return useContext(TableContext as Context<TableContextValue<TData>>) ?? raise(new Error('Missing TableContext'));
-};

package/src/_deprecated/components/Table/TableHead.tsx

@@ -1,78 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { flexRender } from '@tanstack/react-table';
-import React from 'react';
-
-import { defaultSizeCol } from '@dxos/react-ui-grid';
-
-import { useTableContext } from './TableContext';
-import { theadResizeRoot, theadRoot, theadTh, theadTr } from '../../theme';
-
-const TABLE_HEAD_NAME = 'TableHeader';
-
-type TableHeadProps = {};
-
-const TableHead = (_props: TableHeadProps) => {
-  const tableContext = useTableContext();
-  const headerGroups = tableContext.table.getHeaderGroups();
-
-  return (
-    <thead className={theadRoot(tableContext)}>
-      {headerGroups.map((headerGroup) => {
-        return (
-          // Group element to hover resize handles.
-          <tr key={headerGroup.id} className={theadTr(tableContext)}>
-            {/* TODO(burdon): Calc. width. */}
-            {tableContext.debug && (
-              <th className='font-mono' style={{ width: defaultSizeCol }}>
-                #
-              </th>
-            )}
-
-            {headerGroup.headers.map((header) => {
-              const isResizing = header.column.getIsResizing();
-              const onResize = header.getResizeHandler();
-              const resizable = header.column.columnDef.meta?.resizable;
-
-              return (
-                <th
-                  key={header.id}
-                  style={{ width: header.getSize() }}
-                  className={theadTh(tableContext, header.column.columnDef.meta?.header?.classNames)}
-                  data-testid='table.header-cell'
-                >
-                  {!header || header.isPlaceholder
-                    ? null
-                    : flexRender(header.column.columnDef.header, header.getContext())}
-
-                  {/*
-                   * Resize handle.
-                   * https://codesandbox.io/p/sandbox/github/tanstack/table/tree/main/examples/react/column-sizing
-                   */}
-                  {resizable && (
-                    <div
-                      className={theadResizeRoot({ isResizing })}
-                      onDoubleClick={header.column.resetSize} // TODO(zan): How should non-pointer users reset column sizing?
-                      onMouseDown={onResize}
-                      onTouchStart={onResize}
-                    />
-                  )}
-                </th>
-              );
-            })}
-
-            {tableContext.expand && <th />}
-          </tr>
-        );
-      })}
-    </thead>
-  );
-};
-
-TableHead.displayName = TABLE_HEAD_NAME;
-
-export { TableHead };
-
-export type { TableHeadProps };

package/src/_deprecated/components/Table/TableRootContext.ts

@@ -1,39 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { createContext, useRef, useState } from 'react';
-
-type TableRootContextActions = { type: 'updateTableCount'; count: number };
-
-export const useTableRootContext = () => {
-  const scrollContextRef = useRef<HTMLDivElement>(null);
-  const [tableCount, setTableCount] = useState(0);
-
-  const virtualizer = useVirtualizer({
-    getScrollElement: () => scrollContextRef?.current ?? null,
-    count: tableCount,
-    overscan: 8,
-    estimateSize: () => 40,
-  });
-
-  const dispatch = (action: TableRootContextActions) => {
-    switch (action.type) {
-      case 'updateTableCount':
-        setTableCount(action.count);
-        break;
-
-      default:
-        break;
-    }
-  };
-
-  return { scrollContextRef, virtualizer, dispatch };
-};
-
-export type TableRootContextValue = ReturnType<typeof useTableRootContext>;
-
-// Create the context without a default value.
-// The expectation is that the provider will always supply a value, so no need to define a default here.
-export const TableRootContext = createContext<TableRootContextValue>({} as TableRootContextValue);

package/src/_deprecated/components/Table/index.ts

@@ -1,8 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './props';
-export * from './Table';
-export * from './TableContext';
-export * from './TableRootContext';

package/src/_deprecated/components/Table/props.ts

@@ -1,60 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type RowData, type RowSelectionState, type Table, type VisibilityState } from '@tanstack/react-table';
-
-import { type ClassNameValue } from '@dxos/react-ui-types';
-
-import { type ColumnSorting } from '../../hooks';
-import { type KeyValue, type TableColumnDef } from '../../types';
-
-export type TableFlags = Partial<{
-  role: 'table' | 'grid' | 'treegrid';
-  grouping: string[];
-  header: boolean;
-  border: boolean;
-  fullWidth: boolean;
-  debug: boolean;
-  expand: boolean;
-  stickyHeader: boolean;
-  rowsSelectable: boolean | 'multi';
-}>;
-
-/**
- * This is ‘current’ in the `aria-current` sense.
- */
-export type TableCurrent<TData extends RowData> = Partial<{
-  // App state.
-  currentDatum: TData;
-  onDatumClick: (datum: TData) => void;
-}>;
-
-export type TableProps<TData extends RowData> = TableFlags &
-  TableCurrent<TData> &
-  Partial<{
-    keyAccessor: KeyValue<TData>;
-    data: TData[];
-    columns: TableColumnDef<TData>[];
-    onColumnResize: (state: Record<string, number>) => void;
-    onColumnReorder: (columnId: string, direction: 'left' | 'right') => void;
-    columnVisibility: VisibilityState;
-    // Controllable row selection.
-    rowSelection: RowSelectionState;
-    defaultRowSelection: RowSelectionState;
-    onRowSelectionChange: (rowSelection: RowSelectionState) => void;
-    // Derived from row selection.
-    onDataSelectionChange: (dataSelection: TData[]) => void;
-    // `table` element props.
-    classNames: ClassNameValue;
-    pinLastRow: boolean;
-  }>;
-
-export type { RowSelectionState, VisibilityState, TableColumnDef, KeyValue };
-
-export type TableContextValue<TData> = TableFlags &
-  TableCurrent<TData> &
-  Pick<TableProps<TData>, 'keyAccessor'> & {
-    table: Table<TData>;
-    isGrid: boolean;
-  } & ColumnSorting;

package/src/_deprecated/components/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './Cell';
-export * from './ColumnMenu';
-export * from './Table';