@dxos/react-ui-table 0.8.4-main.d05673bc65 → 0.8.4-main.dfabb4ec29

package/src/components/Table/TableContent.tsx

@@ -0,0 +1,421 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import * as String from 'effect/String';
+import React, { type MouseEvent, type WheelEvent, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+import { type Type } from '@dxos/echo';
+import { log } from '@dxos/log';
+import { useAttention } from '@dxos/react-ui-attention';
+import {
+  type DxGridAxisMeta,
+  type DxGridElement,
+  type DxGridPlane,
+  type DxGridPlaneRange,
+  Grid,
+  type GridContentProps,
+  closestCell,
+  gridSeparatorBlockEnd,
+  gridSeparatorInlineEnd,
+} from '@dxos/react-ui-grid';
+import { DxEditRequest } from '@dxos/react-ui-grid';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
+import { tableButtons, tableControls } from '../../util';
+import { type OnCreateHandler, type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
+import { ColumnActionsMenu } from './ColumnActionsMenu';
+import { ColumnSettings } from './ColumnSettings';
+import { RowActionsMenu } from './RowActionsMenu';
+import { TableController, useTableContext } from './Table';
+
+const columnDefault = { grid: { minSize: 80, maxSize: 640 } };
+const rowDefault = { frozenRowsStart: { readonly: true, focusUnfurl: false } };
+const emptyColumnMeta = Atom.make<DxGridAxisMeta>({ grid: {} });
+const emptyRowsAtom = Atom.make<unknown[]>([]);
+const emptyCellUpdateAtom = Atom.make<number>(0);
+
+//
+// Content
+//
+
+const TABLE_CONTENT_NAME = 'Table.Content';
+
+export type TableContentProps = {
+  schema?: Type.AnyEntity;
+  model?: TableModel;
+  presentation?: TablePresentation;
+  // TODO(burdon): Factor out attention.
+  ignoreAttention?: boolean;
+  onCreate?: OnCreateHandler;
+  onRowClick?: (row: any) => void;
+  testId?: string;
+};
+
+export const TableContent = composable<HTMLDivElement, TableContentProps>(
+  ({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
+    const registry = useContext(RegistryContext);
+    const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
+    const { hasAttention } = useAttention(model?.id ?? 'table');
+    const modals = useMemo(() => new ModalController(registry), [registry]);
+    const columnMeta = useAtomValue(model?.columnMeta ?? emptyColumnMeta);
+    // Subscribe to rows atom to trigger re-render when rows change.
+    const rows = useAtomValue(model?.rows ?? emptyRowsAtom);
+    // Subscribe to cell update counter to trigger re-render when individual cells change.
+    const cellUpdateCounter = useAtomValue(model?.cellUpdate ?? emptyCellUpdateAtom);
+    // Derive column count from columnMeta (reactive) with fallback.
+    const columnCount = Object.keys(columnMeta.grid).length || model?.projection.getFields().length || 0;
+
+    const draftRowCount = model?.getDraftRowCount() ?? 0;
+
+    const frozen = useMemo(() => {
+      const noActionColumn =
+        model?.features.dataEditable === false &&
+        model?.features.schemaEditable === false &&
+        model.rowActions.length === 0;
+
+      return {
+        frozenRowsStart: 1,
+        frozenRowsEnd: Math.max(1, draftRowCount),
+        frozenColsStart: model?.features.selection.enabled ? 1 : 0,
+        frozenColsEnd: noActionColumn ? 0 : 1,
+      };
+    }, [model, draftRowCount]);
+
+    const getCells = useCallback<NonNullable<GridContentProps['getCells']>>(
+      (range: DxGridPlaneRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
+      [presentation],
+    );
+
+    useEffect(() => {
+      if (!dxGrid || !presentation) {
+        return;
+      }
+
+      dxGrid.getCells = getCells;
+    }, [dxGrid, presentation, getCells]);
+
+    // Trigger grid update when rows or cell values change.
+    useEffect(() => {
+      if (!dxGrid) {
+        return;
+      }
+
+      dxGrid.updateCells(true);
+      dxGrid.requestUpdate();
+    }, [dxGrid, rows, cellUpdateCounter]);
+
+    const handleInsertRowResult = useCallback(
+      (insertResult?: InsertRowResult) => {
+        if (insertResult === 'draft') {
+          requestAnimationFrame(() => {
+            dxGrid?.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
+            dxGrid?.refocus();
+          });
+        } else {
+          requestAnimationFrame(() => {
+            dxGrid?.setFocus({ plane: 'grid', col: 0, row: model ? model.getRowCount() - 1 : 0 });
+            dxGrid?.refocus();
+          });
+        }
+      },
+      [model, dxGrid],
+    );
+
+    const handleSave = useCallback(() => {
+      dxGrid?.updateCells(true);
+      dxGrid?.requestUpdate();
+    }, [dxGrid]);
+
+    const handleSaveDraftRow = useCallback(
+      (rowIndex = 0) => {
+        if (model && dxGrid) {
+          const didCommitSuccessfully = model.commitDraftRow(rowIndex);
+          if (didCommitSuccessfully) {
+            requestAnimationFrame(() => {
+              dxGrid.scrollToEndRow();
+            });
+          }
+        }
+      },
+      [model, dxGrid],
+    );
+
+    const handleGridClick = useCallback(
+      (event: MouseEvent) => {
+        const cell = closestCell(event.target as HTMLElement);
+        if (cell) {
+          const { row: rowIndex, plane } = cell;
+          if (onRowClick) {
+            if (plane === 'grid') {
+              const row = model?.getRowAt(rowIndex);
+              row && onRowClick(row);
+            } else {
+              onRowClick(cell);
+            }
+          }
+
+          if (model?.features.selection.enabled && model?.selection.selectionMode === 'single') {
+            model.selection.toggleSelectionForRowIndex(rowIndex);
+          }
+        }
+
+        if (!modals) {
+          return;
+        }
+
+        const buttonSelector = Object.values(tableButtons)
+          .map((button) => `button[${button.attr}]`)
+          .join(',');
+
+        const tableButtonElement = (event.target as HTMLElement).closest(buttonSelector) as HTMLElement;
+        if (tableButtonElement) {
+          const button = Object.values(tableButtons).find((btn) => tableButtonElement.hasAttribute(btn.attr));
+          if (!button) {
+            return;
+          }
+
+          modals.setTrigger(tableButtonElement);
+          const data = button.getData(tableButtonElement);
+          switch (data.type) {
+            case 'rowMenu': {
+              modals.showRowMenu(data.rowIndex);
+              break;
+            }
+            case 'columnSettings': {
+              modals.showColumnMenu(data.fieldId);
+              break;
+            }
+            case 'newColumn': {
+              modals.showColumnCreator();
+              break;
+            }
+            case 'sort': {
+              model?.toggleSort(data.fieldId);
+              break;
+            }
+            case 'saveDraftRow': {
+              handleSaveDraftRow();
+              break;
+            }
+          }
+          return;
+        }
+
+        const controlSelector = Object.values(tableControls)
+          .map((control) => `input[${control.attr}]`)
+          .join(',');
+
+        const controlElement = (event.target as HTMLElement).closest(controlSelector) as HTMLElement;
+        if (controlElement) {
+          const control = Object.values(tableControls).find((ctrl) => controlElement.hasAttribute(ctrl.attr));
+          if (!control) {
+            return;
+          }
+
+          const data = control.getData(controlElement);
+          switch (data.type) {
+            case 'checkbox': {
+              if (data.header) {
+                model?.selection.setSelection(model.selection.allRowsSelected ? 'none' : 'all');
+              } else {
+                model?.selection.toggleSelectionForRowIndex(data.rowIndex);
+              }
+              break;
+            }
+            case 'switch': {
+              if (model) {
+                model.updateCellData({ row: data.rowIndex, col: data.colIndex }, (value) => !value);
+              }
+              break;
+            }
+          }
+        }
+      },
+      [model, modals, dxGrid],
+    );
+
+    const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
+      (increment, delta, cell) => {
+        if (dxGrid && model) {
+          if (cell?.plane === 'grid' && cell?.row >= model.getRowCount() - 1 && increment !== 'col') {
+            handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : 'final');
+          } else if (cell?.plane === 'frozenRowsEnd' && increment === 'row') {
+            handleSaveDraftRow(cell.row);
+            handleInsertRowResult(model.insertRow());
+          } else {
+            dxGrid.refocus(increment, delta);
+          }
+        }
+      },
+      [dxGrid, model],
+    );
+
+    const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
+      (event) => {
+        if (!model?.features.dataEditable) {
+          return;
+        }
+
+        const cell = closestCell(event.target);
+        if (!model || !cell) {
+          return;
+        }
+
+        // Handle Meta+C (Copy) and Meta+V (Paste) commands
+        if (event.metaKey || event.ctrlKey) {
+          switch (event.key) {
+            case 'c': {
+              // Copy focused cell's text content to clipboard
+              try {
+                const cellData = model.getCellData(cell);
+                const textContent = cellData?.toString() ?? '';
+                void navigator.clipboard.writeText(textContent);
+                event.preventDefault();
+              } catch (error) {
+                log.catch(error);
+              }
+              break;
+            }
+            case 'v': {
+              // Paste clipboard content to focused cell
+              event.preventDefault();
+              void navigator.clipboard.readText().then((clipboardText) => {
+                try {
+                  // Attempt to set the cell's content to clipboard content
+                  model.setCellData(cell, String.trim(clipboardText).replace(/[\n\r]+/, ' '));
+                  handleSave();
+                } catch {
+                  // If validation fails, emit a DxEditRequest event with initialContent from clipboard
+                  // TODO(thure): Should `dx-grid` expose a method like this?
+                  const cellElement = (event.target as HTMLElement).closest(
+                    '[data-dx-grid-action="cell"]',
+                  ) as HTMLElement;
+                  if (cellElement) {
+                    const rect = cellElement.getBoundingClientRect();
+                    const editRequest = new DxEditRequest({
+                      cellIndex: `${cell.plane},${cell.col},${cell.row}`,
+                      cellBox: {
+                        insetInlineStart: rect.left,
+                        insetBlockStart: rect.top,
+                        inlineSize: rect.width,
+                        blockSize: rect.height,
+                      },
+                      cellElement,
+                      initialContent: clipboardText,
+                    });
+                    cellElement.dispatchEvent(editRequest);
+                  }
+                }
+              });
+              break;
+            }
+          }
+        }
+
+        switch (event.key) {
+          case 'Backspace':
+          case 'Delete': {
+            try {
+              model.setCellData(cell, undefined);
+              event.preventDefault();
+              handleSave();
+            } catch {
+              // Delete results in a validation error; don’t prevent default so dx-grid can emit an edit request.
+            }
+            break;
+          }
+        }
+      },
+      [model, dxGrid, handleSave],
+    );
+
+    const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
+      (event) => {
+        if (event.axis === 'col') {
+          const columnIndex = parseInt(event.index, 10);
+          model?.setColumnWidth(columnIndex, event.size);
+        }
+      },
+      [model],
+    );
+
+    const handleWheel = useCallback(
+      (event: WheelEvent) => {
+        if (!ignoreAttention && !hasAttention) {
+          event.stopPropagation();
+        }
+      },
+      [hasAttention, ignoreAttention],
+    );
+
+    const handleNewColumn = useCallback(() => {
+      const columns = model?.getColumnCount();
+      if (dxGrid && columns) {
+        dxGrid.scrollToColumn(columns - 1);
+      }
+    }, [model, dxGrid]);
+
+    // Publish controller to Root.
+    const { controllerRef } = useTableContext(TABLE_CONTENT_NAME);
+    controllerRef.current = useMemo<TableController>(() => {
+      if (!dxGrid || !presentation) {
+        return {};
+      }
+
+      return {
+        update: (cell) => {
+          if (cell) {
+            dxGrid.updateIfWithinBounds(cell, true);
+          } else {
+            dxGrid.updateCells(true);
+            dxGrid.requestUpdate();
+          }
+        },
+        handleInsertRowResult,
+      };
+    }, [dxGrid, model, presentation]);
+
+    if (!model || !modals) {
+      return <span role='none' className='dx-attention-surface' />;
+    }
+
+    return (
+      <div {...composableProps(props, { classNames: 'dx-container relative' })} ref={forwardedRef}>
+        <Grid.Root id={model.id ?? 'table-grid'}>
+          <TableValueEditor
+            model={model}
+            modals={modals}
+            schema={schema}
+            onFocus={handleFocus}
+            onSave={handleSave}
+            onCreate={onCreate}
+          />
+          <Grid.Content
+            className={mx('[--dx-grid-base:var(--base-surface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
+            frozen={frozen}
+            columns={columnMeta}
+            columnDefault={columnDefault}
+            rowDefault={rowDefault}
+            limitRows={rows.length}
+            limitColumns={columnCount}
+            overscroll='trap'
+            onAxisResize={handleAxisResize}
+            onClick={handleGridClick}
+            onKeyDownCapture={handleKeyDown}
+            onWheelCapture={handleWheel}
+            {...(testId && { 'data-testid': testId })}
+            ref={setDxGrid}
+          />
+          <RowActionsMenu model={model} modals={modals} />
+          <ColumnActionsMenu model={model} modals={modals} />
+          <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
+        </Grid.Root>
+      </div>
+    );
+  },
+);
+
+TableContent.displayName = TABLE_CONTENT_NAME;

package/src/components/{TableToolbar → Table}/TableToolbar.tsx

@@ -5,19 +5,20 @@
 import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import React, { useContext, useEffect, useMemo } from 'react';
 
-import { type ThemedClassName } from '@dxos/react-ui';
 import {
   type ActionGraphEdges,
   type ActionGraphNodes,
   type ActionGraphProps,
   Menu,
   type MenuAction,
+  MenuRootProps,
   createGapSeparator,
   createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
+import { composable, composableProps } from '@dxos/ui-theme';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
 export type TableToolbarActionProperties = { type: TableToolbarActionType };
 
@@ -27,17 +28,6 @@ export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
 
 type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
-// TODO(burdon): Radix style layout.
-
-export type TableToolbarProps = ThemedClassName<
-  TableToolbarState & {
-    onAdd?: () => void;
-    onSave?: () => void;
-    attendableId?: string;
-    customActions?: Atom.Atom<ActionGraphProps>;
-  }
->;
-
 const createTableToolbarActions = ({
   stateAtom,
   onAdd,
@@ -55,7 +45,7 @@ const createTableToolbarActions = ({
       const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
         type: 'add-row' as const,
         icon: 'ph--plus--regular',
-        label: ['add row label', { ns: translationKey }],
+        label: ['add-row.label', { ns: translationKey }],
         testId: 'table.toolbar.add-row',
       });
       nodes.push(add);
@@ -65,7 +55,7 @@ const createTableToolbarActions = ({
       const save = createMenuAction<TableToolbarActionProperties>('save-view', onSave, {
         type: 'save-view' as const,
         icon: 'ph--floppy-disk--regular',
-        label: ['save view label', { ns: translationKey }],
+        label: ['save-view.label', { ns: translationKey }],
         testId: 'table.toolbar.save-view',
         iconOnly: false,
         hidden: !state.viewDirty,
@@ -87,32 +77,35 @@ const createTableToolbarActions = ({
     };
   });
 
-export const TableToolbar = ({
-  classNames,
-  viewDirty,
-  attendableId,
-  onAdd,
-  onSave,
-  customActions,
-  ...props
-}: TableToolbarProps) => {
-  const registry = useContext(RegistryContext);
-  const stateAtom = useMemo(() => Atom.make<TableToolbarState>({ viewDirty }), []);
+export type TableToolbarProps = Pick<MenuRootProps, 'attendableId'> &
+  TableToolbarState & {
+    onAdd?: () => void;
+    onSave?: () => void;
+    customActions?: Atom.Atom<ActionGraphProps>;
+  };
+
+export const TableToolbar = composable<HTMLDivElement, TableToolbarProps>(
+  ({ attendableId, viewDirty, onAdd, onSave, customActions, ...props }, forwardedRef) => {
+    const registry = useContext(RegistryContext);
+    const stateAtom = useMemo(() => Atom.make<TableToolbarState>({ viewDirty }), []);
+
+    // Update state.viewDirty when the prop changes.
+    useEffect(() => {
+      registry.set(stateAtom, { viewDirty });
+    }, [registry, stateAtom, viewDirty]);
 
-  // Update state.viewDirty when the prop changes.
-  useEffect(() => {
-    registry.set(stateAtom, { viewDirty });
-  }, [registry, stateAtom, viewDirty]);
+    const actionsCreator = useMemo(
+      () => createTableToolbarActions({ stateAtom, onAdd, onSave, customActions }),
+      [stateAtom, onAdd, onSave, customActions],
+    );
+    const menuActions = useMenuActions(actionsCreator);
 
-  const actionsCreator = useMemo(
-    () => createTableToolbarActions({ stateAtom, onAdd, onSave, customActions }),
-    [stateAtom, onAdd, onSave, customActions],
-  );
-  const menu = useMenuActions(actionsCreator);
+    return (
+      <Menu.Root {...menuActions} attendableId={attendableId}>
+        <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
+      </Menu.Root>
+    );
+  },
+);
 
-  return (
-    <Menu.Root {...menu} attendableId={attendableId}>
-      <Menu.Toolbar {...props} classNames={classNames} />
-    </Menu.Root>
-  );
-};
+TableToolbar.displayName = 'TableToolbar';

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -27,7 +27,6 @@ export const CellValidationMessage = ({
 
   return (
     <div
-      role='none'
       className={`absolute ${bgClass} ${textClass} rounded-h-sm text-xs p-1`}
       style={{
         ...{ '--dx-grid-cell-width': `${box?.inlineSize ?? 200}px` },

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -14,11 +14,12 @@ import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
 import { type FieldProjection } from '@dxos/schema';
 import { getDeep, isTruthy, setDeep } from '@dxos/util';
 
+import { translationKey } from '#translations';
+
 import { type ModalController, type TableModel, type TableRow } from '../../model';
-import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
-const createOptionLabel: Label = ['create new object label', { ns: translationKey }];
+const createOptionLabel: Label = ['create-new-object.label', { ns: translationKey }];
 
 export type OnCreateHandler = (schema: Type.AnyEntity, values: any) => Parameters<typeof Ref.make>[0];
 

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

@@ -7,25 +7,25 @@ import React from 'react';
 
 import { Obj } from '@dxos/echo';
 import { View } from '@dxos/echo';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { ViewModel } from '@dxos/schema';
 import { Task } from '@dxos/types';
 
+import { translations } from '#translations';
+
 import { useTestTableModel } from '../../testing';
-import { translations } from '../../translations';
 import { Table } from '../../types';
-
 import { TableCellEditor } from './TableCellEditor';
 
-type StoryProps = {
+type DefaultStoryProps = {
   editing: GridEditing;
 };
 
 // TODO(burdon): Broken layout.
-const DefaultStory = ({ editing }: StoryProps) => {
+const DefaultStory = ({ editing }: DefaultStoryProps) => {
   const { model, table } = useTestTableModel();
 
   if (!model || !table) {
@@ -59,9 +59,9 @@ const meta = {
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
             Obj.make(Task.Task, {
-              title: faker.person.fullName(),
-              status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
-              description: faker.lorem.sentence(),
+              title: random.person.fullName(),
+              status: random.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
+              description: random.lorem.sentence(),
             }),
           );
         });

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -25,16 +25,9 @@ import {
 import { type FieldProjection } from '@dxos/schema';
 
 import { type ModalController, type TableModel } from '../../model';
-
 import { CellValidationMessage } from './CellValidationMessage';
 import { FormCellEditor, type OnCreateHandler } from './FormCellEditor';
 
-const editorSlots = {
-  scroll: {
-    className: '!py-(--dx-grid-cell-editor-padding-block)',
-  },
-};
-
 /**
  * Option to create new object/value.
  */
@@ -250,7 +243,16 @@ export const TableCellEditor = ({
   return (
     <>
       <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
-      <GridCellEditor extensions={extensions} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
+      <GridCellEditor
+        extensions={extensions}
+        slots={{
+          content: {
+            className: '!py-(--dx-grid-cell-editor-padding-block)',
+          },
+        }}
+        getCellContent={getCellContent}
+        onBlur={handleBlur}
+      />
     </>
   );
 };

package/src/components/index.ts

@@ -3,4 +3,3 @@
 //
 
 export * from './Table';
-export * from './TableToolbar';

package/src/components/testing.ts

@@ -9,7 +9,7 @@ import { useEffect } from 'react';
 import { Format, Type } from '@dxos/echo';
 import { TypeEnum } from '@dxos/echo/internal';
 import { setValue } from '@dxos/effect';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';
 
 export const TestSchema = Schema.Struct({
@@ -37,10 +37,10 @@ export type TestItem = {
 export const createItemsAtom = (n: number) => {
   return Atom.make<{ data: TestItem[] }>({
     data: Array.from({ length: n }, () => ({
-      name: faker.person.fullName(),
-      age: faker.number.int({ min: 20, max: 70 }),
-      active: faker.datatype.boolean(),
-      netWorth: faker.number.int(),
+      name: random.person.fullName(),
+      age: random.number.int({ min: 20, max: 70 }),
+      active: random.datatype.boolean(),
+      netWorth: random.number.int(),
     })),
   }).pipe(Atom.keepAlive);
 };
@@ -50,10 +50,10 @@ export const createItemsAtom = (n: number) => {
  */
 export const createItems = (n: number): TestItem[] => {
   return Array.from({ length: n }, () => ({
-    name: faker.person.fullName(),
-    age: faker.number.int({ min: 20, max: 70 }),
-    active: faker.datatype.boolean(),
-    netWorth: faker.number.int(),
+    name: random.person.fullName(),
+    age: random.number.int({ min: 20, max: 70 }),
+    active: random.datatype.boolean(),
+    netWorth: random.number.int(),
   }));
 };