@dxos/react-ui-table 0.6.14-staging.e15392e → 0.7.0

package/src/components/Table/Table.tsx

@@ -1,301 +1,217 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 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,
+  forwardRef,
+  type PropsWithChildren,
   useCallback,
-  useEffect,
+  useImperativeHandle,
   useState,
-  useContext,
+  type WheelEvent,
 } from 'react';
 
-import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
+import { getValue } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { Filter, getSpace, fullyQualifiedId } from '@dxos/react-client/echo';
+import { useAttention } from '@dxos/react-ui-attention';
+import { type DxGridElement, Grid, type GridContentProps, closestCell } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
+import { isNotFalsy } from '@dxos/util';
 
-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';
+import { ColumnActionsMenu } from './ColumnActionsMenu';
+import { ColumnSettings } from './ColumnSettings';
+import { RowActionsMenu } from './RowActionsMenu';
+import { type TableModel } from '../../model';
+import { type GridCell } from '../../util';
+import { TableCellEditor, type TableCellEditorProps } from '../TableCellEditor';
 
-type TableRootProps = { children: ReactNode };
+// NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.
+// These are offset by 1px to avoid double borders in planks.
+const inlineEndLine =
+  '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator';
+const blockEndLine =
+  '[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator';
 
-const TableRoot = ({ children }: TableRootProps) => {
-  const contextValue = useTableRootContext();
-  return <TableRootContext.Provider value={contextValue}>{children}</TableRootContext.Provider>;
-};
+const frozen = { frozenRowsStart: 1, frozenColsStart: 1, frozenColsEnd: 1 };
 
-type TableViewportProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.div>> & {
-  asChild?: boolean;
-};
+//
+// Root
+//
 
-const TableViewport = ({ children, classNames, asChild, ...props }: TableViewportProps) => {
-  const { scrollContextRef } = useContext(TableRootContext);
+export type TableRootProps = PropsWithChildren<{ role?: string }>;
 
-  const classes = mx(classNames, 'overflow-auto');
-  return asChild ? (
-    <Slot ref={scrollContextRef} className={classes} {...props}>
-      {children}
-    </Slot>
-  ) : (
-    <div role='none' className={classes} ref={scrollContextRef} {...props}>
+const TableRoot = ({ children }: TableRootProps) => {
+  return (
+    <div role='none' className='relative flex flex-col'>
       {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,
-  });
+//
+// Main
+//
 
-  const { rowSelection, handleRowSelectionChange } = useRowSelection(props);
+export type TableController = {
+  update?: (cell?: GridCell) => void;
+};
 
-  const [grouping, handleGroupingChange] = useState<GroupingState>(props.grouping ?? []);
-  useEffect(() => handleGroupingChange(props.grouping ?? []), [handleGroupingChange, props.grouping]);
+export type TableMainProps = {
+  model?: TableModel;
+};
 
-  const columnSorting = useColumnSorting();
+const TableMain = forwardRef<TableController, TableMainProps>(({ model }, forwardedRef) => {
+  const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
+
+  const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : 'table');
+
+  /**
+   * Provides an external controller that can be called to repaint the table.
+   */
+  useImperativeHandle<TableController, TableController>(
+    forwardedRef,
+    () => {
+      if (!model || !dxGrid) {
+        return {};
+      }
+
+      dxGrid.getCells = model.getCells.bind(model);
+      return {
+        update: (cell) => {
+          if (cell) {
+            dxGrid.updateIfWithinBounds(cell);
+          } else {
+            dxGrid.updateCells(true);
+          }
+        },
+      };
+    },
+    [model, dxGrid],
+  );
 
-  const table = useReactTable({
-    // Data
-    meta: {},
-    data,
+  const handleFocus: TableCellEditorProps['onFocus'] = (increment, delta) => {
+    dxGrid?.refocus(increment, delta);
+  };
 
-    // Columns
-    columns,
-    defaultColumn: {
-      size: 400, // Required in order remove default width.
-      maxSize: 1024,
+  const handleEnter = useCallback<NonNullable<TableCellEditorProps['onEnter']>>(
+    (cell) => {
+      // TODO(burdon): Insert row only if bottom row isn't completely blank already.
+      if (model && cell.row === model.getRowCount() - 1) {
+        model.insertRow(cell.row);
+      }
     },
+    [model],
+  );
 
-    // State
-    state: {
-      columnVisibility,
-      columnSizing,
-      columnSizingInfo,
-      sorting: columnSorting.sorting,
-      rowSelection,
-      grouping,
+  const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
+    (event) => {
+      const cell = closestCell(event.target);
+      if (!model || !cell) {
+        return;
+      }
+
+      switch (event.key) {
+        case 'Backspace':
+        case 'Delete': {
+          model.setCellData(cell, undefined);
+          break;
+        }
+      }
     },
-
-    // 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>
+    [model],
   );
-};
-
-// 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 handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
+    (event) => {
+      if (event.axis === 'col') {
+        const columnIndex = parseInt(event.index, 10);
+        model?.setColumnWidth(columnIndex, event.size);
+      }
+    },
+    [model],
   );
-};
-
-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,
+  const handleWheel = useCallback(
+    (event: WheelEvent) => {
+      if (!hasAttention) {
+        event.stopPropagation();
+      }
+    },
+    [hasAttention],
   );
 
-  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>
+  // TODO(burdon): Factor out?
+  const handleQuery = useCallback<NonNullable<TableCellEditorProps['onQuery']>>(
+    async ({ field, props }, _text) => {
+      if (model && props.referenceSchema && field.referencePath) {
+        const space = getSpace(model.table);
+        invariant(space);
+        const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
+        if (schema) {
+          // TODO(burdon): Cache/filter.
+          const { objects } = await space.db.query(Filter.schema(schema)).run();
+          return objects
+            .map((obj) => {
+              const value = getValue(obj, field.referencePath!);
+              if (!value || typeof value !== 'string') {
+                return undefined;
+              }
+
+              return {
+                label: value,
+                data: obj,
+              };
+            })
+            .filter(isNotFalsy);
+        }
+      }
+
+      return [];
+    },
+    [model],
   );
-};
-
-export const MemoizedVirtualizedTableContent = memo(VirtualizedTableContent);
 
-const GroupedTableContent = () => {
-  const {
-    table: { getGroupedRowModel, getHeaderGroups, getState },
-    debug,
-  } = useTableContext();
+  if (!model) {
+    return <span role='none' className='attention-surface' />;
+  }
 
   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>
-        );
-      })}
+      <Grid.Root id={model.table.id ?? 'table-grid'}>
+        <TableCellEditor model={model} onEnter={handleEnter} onFocus={handleFocus} onQuery={handleQuery} />
+
+        <Grid.Content
+          onWheelCapture={handleWheel}
+          className={mx(
+            '[--dx-grid-base:var(--surface-bg)] [&_.dx-grid]:grow [&_.dx-grid]:max-is-max [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-max',
+            inlineEndLine,
+            blockEndLine,
+          )}
+          frozen={frozen}
+          columns={model.columnMeta.value}
+          limitRows={model.getRowCount() ?? 0}
+          limitColumns={model.table.view?.fields?.length ?? 0}
+          onAxisResize={handleAxisResize}
+          onClick={model?.handleGridClick}
+          onKeyDown={handleKeyDown}
+          overscroll='trap'
+          ref={setDxGrid}
+        />
+      </Grid.Root>
+
+      <RowActionsMenu model={model} />
+      <ColumnActionsMenu model={model} />
+      <ColumnSettings model={model} />
     </>
   );
-};
+});
+
+//
+// CellEditor
+//
 
-// 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,
+  Main: TableMain,
 };

package/src/components/Table/index.ts

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

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { type MutableSchema } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { faker } from '@dxos/random';
+import { Filter, useSpaces, useQuery, create } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { defaultSizeRow, Grid, type GridEditing } from '@dxos/react-ui-grid';
+import { ViewProjection, ViewType } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { TableCellEditor, type TableCellEditorProps } from './TableCellEditor';
+import { useTableModel } from '../../hooks';
+import translations from '../../translations';
+import { TableType } from '../../types';
+import { initializeTable } from '../../util';
+
+type StoryProps = {
+  editing: GridEditing;
+};
+
+const DefaultStory = ({ editing }: StoryProps) => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  const tables = useQuery(space, Filter.schema(TableType));
+  const [table, setTable] = useState<TableType>();
+  const [schema, setSchema] = useState<MutableSchema>();
+  useEffect(() => {
+    if (tables.length && !table) {
+      const table = tables[0];
+      invariant(table.view);
+      setTable(table);
+      setSchema(space.db.schemaRegistry.getSchema(table.view.query.type));
+    }
+  }, [tables]);
+
+  const projection = useMemo(() => {
+    if (schema && table?.view) {
+      return new ViewProjection(schema, table.view);
+    }
+  }, [schema, table?.view]);
+
+  const model = useTableModel({ table, projection });
+
+  const handleQuery: TableCellEditorProps['onQuery'] = async ({ field }) => {
+    const { objects } = await space.db.query(schema).run();
+    return objects.map((obj) => {
+      const label = obj[field.referencePath ?? 'id'];
+      return {
+        label,
+        data: obj,
+      };
+    });
+  };
+
+  if (!model || !schema || !table) {
+    return <div />;
+  }
+
+  return (
+    <div className='flex w-[300px] border border-separator' style={{ height: defaultSizeRow }}>
+      <Grid.Root id='test' editing={editing}>
+        <TableCellEditor model={model} onQuery={handleQuery} />
+      </Grid.Root>
+    </div>
+  );
+};
+
+const meta: Meta<StoryProps> = {
+  title: 'plugins/plugin-table/TableCellEditor',
+  component: DefaultStory,
+  render: DefaultStory,
+  parameters: { translations, layout: 'centered' },
+  decorators: [
+    withClientProvider({
+      types: [TableType, ViewType],
+      createIdentity: true,
+      createSpace: true,
+      onSpaceCreated: ({ space }) => {
+        const table = space.db.add(create(TableType, {}));
+        const schema = initializeTable({ space, table });
+        Array.from({ length: 10 }).forEach(() => {
+          space.db.add(
+            create(schema, {
+              name: faker.person.fullName(),
+            }),
+          );
+        });
+      },
+    }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<StoryProps>;
+
+export const Default: Story = {
+  args: {
+    editing: {
+      index: '0,3',
+      initialContent: 'Test',
+    },
+  },
+};