@dxos/react-ui-table 0.8.4-main.5acf9ea → 0.8.4-main.5ea62a8

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -3,64 +3,60 @@
 //
 
 import { type Completion } from '@codemirror/autocomplete';
+import { EditorView } from '@codemirror/view';
 import { type Schema } from 'effect/Schema';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
+import { debounce } from '@dxos/async';
+import type { Client } from '@dxos/client';
 import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { type DxGrid } from '@dxos/lit-grid';
+import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
 import { useThemeContext } from '@dxos/react-ui';
 import { createMarkdownExtensions } from '@dxos/react-ui-editor';
 import {
-  cellQuery,
-  editorKeys,
-  parseCellIndex,
-  useGridContext,
-  type DxGridPlanePosition,
+  type EditorBlurHandler,
   type EditorKeyEvent,
   type EditorKeyOrBlurHandler,
-  type EditorBlurHandler,
   GridCellEditor,
   type GridCellEditorProps,
   type GridScopedProps,
+  editorKeys,
+  parseCellIndex,
+  useGridContext,
 } from '@dxos/react-ui-grid';
-import { tagPicker, createLinks } from '@dxos/react-ui-tag-picker';
+import { createLinks, tagPicker } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
+import { type ModalController, type TableModel } from '../../model';
+
 import { CellValidationMessage } from './CellValidationMessage';
 import { FormCellEditor } from './FormCellEditor';
-import { completion } from './extension';
-import { type TableModel, type ModalController } from '../../model';
-
-const newValue = Symbol.for('newValue');
 
 /**
  * Option to create new object/value.
  */
-export const createOption = (text: string) => ({ [newValue]: true, text });
-
-const isCreateOption = (data: any) => typeof data === 'object' && data[newValue];
-
 export type QueryResult = Pick<Completion, 'label'> & { data: any };
 
 export type TableCellEditorProps = {
   model?: TableModel;
   modals?: ModalController;
   schema?: Schema.AnyNoContext;
-  onEnter?: (cell: DxGridPlanePosition) => void;
-  onFocus?: DxGrid['refocus'];
+  onFocus?: (axis?: DxGridAxis, delta?: -1 | 0 | 1, cell?: DxGridPosition) => void;
   onSave?: () => void;
-  onQuery?: (field: FieldProjection, text: string) => Promise<QueryResult[]>;
+  client?: Client;
 };
 
+const adaptValidationMessage = (message: string | null) =>
+  message ? (message.endsWith('is missing') ? 'Can’t be blank' : message) : null;
+
 export const TableValueEditor = ({
   model,
   modals,
   schema,
-  onEnter,
   onFocus,
   onSave,
-  onQuery,
+  client,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
   const { editing } = useGridContext('TableValueEditor', __gridScope);
@@ -79,7 +75,8 @@ export const TableValueEditor = ({
 
   if (
     fieldProjection?.props.type === TypeEnum.Array ||
-    fieldProjection?.props.format === FormatEnum.SingleSelect
+    fieldProjection?.props.format === FormatEnum.SingleSelect ||
+    fieldProjection?.props.format === FormatEnum.Ref
     // TODO(thure): Support `FormatEnum.MultiSelect`
   ) {
     return (
@@ -89,22 +86,14 @@ export const TableValueEditor = ({
         schema={schema}
         __gridScope={__gridScope}
         onSave={onSave}
+        client={client}
+        modals={modals}
       />
     );
   }
 
   // For all other types, use the existing cell editor
-  return (
-    <TableCellEditor
-      model={model}
-      modals={modals}
-      onEnter={onEnter}
-      onFocus={onFocus}
-      onQuery={onQuery}
-      onSave={onSave}
-      __gridScope={__gridScope}
-    />
-  );
+  return <TableCellEditor model={model} modals={modals} onFocus={onFocus} onSave={onSave} __gridScope={__gridScope} />;
 };
 
 const editorSlots = { scroller: { className: '!plb-[--dx-grid-cell-editor-padding-block]' } };
@@ -112,17 +101,15 @@ const editorSlots = { scroller: { className: '!plb-[--dx-grid-cell-editor-paddin
 export const TableCellEditor = ({
   model,
   modals,
-  onEnter,
   onFocus,
-  onQuery,
   onSave,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
   const { id: gridId, editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
   const { themeMode } = useThemeContext();
-  const [_validationError, setValidationError] = useState<string | null>(null);
-  const [_validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -136,38 +123,6 @@ export const TableCellEditor = ({
     return fieldProjection;
   }, [model, editing]);
 
-  useEffect(() => {
-    // Check for existing validation errors when editing starts (for draft rows).
-    if (!model || !editing || !fieldProjection) {
-      setValidationError(null);
-      return;
-    }
-
-    const cell = parseCellIndex(editing.index);
-    const { row, col } = cell;
-
-    if (model.isDraftCell(cell)) {
-      const field = model.projection.fields[col];
-      const hasValidationError = model.hasDraftRowValidationError(row, field.path);
-
-      if (hasValidationError) {
-        const draftRows = model.draftRows.value;
-        if (row >= 0 && row < draftRows.length) {
-          const draftRow = draftRows[row];
-          const validationError = draftRow.validationErrors?.find((error) => error.path === field.path);
-          if (validationError) {
-            setValidationError(validationError.message);
-            setValidationVariant('warning');
-          }
-        }
-      } else {
-        setValidationError(null);
-      }
-    } else {
-      setValidationError(null);
-    }
-  }, [model, editing, fieldProjection]);
-
   const handleEnter = useCallback(
     async (value: any) => {
       if (!model || !editing) {
@@ -180,28 +135,34 @@ export const TableCellEditor = ({
       if (validationResult.valid) {
         setValidationError(null);
         model.setCellData(cell, value);
-        onEnter?.(cell);
         onFocus?.();
         setEditing(null);
         onSave?.();
       } else {
-        setValidationError(validationResult.error);
+        setValidationError(adaptValidationMessage(validationResult.error));
         setValidationVariant('error');
       }
     },
-    [model, editing, onEnter, onFocus, setEditing],
+    [model, editing, onFocus, setEditing],
   );
 
   const handleBlur = useCallback<EditorBlurHandler>(
     async (value) => {
-      if (!model || !editing) {
-        return;
-      }
       if (suppressNextBlur.current) {
         suppressNextBlur.current = false;
+      } else if (model && editing) {
+        // Save silently if validation passes
+        const cell = parseCellIndex(editing.index);
+        if (value !== undefined) {
+          const result = await model.validateCellData(cell, value);
+          if (result.valid) {
+            setValidationError(null);
+            model.setCellData(cell, value);
+            setEditing(null);
+            onSave?.();
+          }
+        }
       }
-
-      // Don't save on blur - let handleClose handle validation and saving
     },
     [model, editing],
   );
@@ -219,19 +180,20 @@ export const TableCellEditor = ({
         const result = await model.validateCellData(cell, value);
 
         if (result.valid) {
+          suppressNextBlur.current = true;
           setValidationError(null);
           model.setCellData(cell, value);
           setEditing(null);
           onSave?.();
-          onEnter?.(cell);
           if (event && onFocus) {
-            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
           }
         } else {
           setValidationError(result.error);
           setValidationVariant('error');
         }
       } else {
+        suppressNextBlur.current = true;
         setValidationError(null);
         setEditing(null);
         onSave?.();
@@ -240,7 +202,7 @@ export const TableCellEditor = ({
         }
       }
     },
-    [model, editing, onFocus, onEnter, fieldProjection, setEditing, onSave],
+    [model, editing, onFocus, fieldProjection, setEditing, onSave],
   );
 
   const extension = useMemo(() => {
@@ -299,39 +261,26 @@ export const TableCellEditor = ({
       );
     }
 
-    if (onQuery) {
-      switch (fieldProjection.props.format) {
-        case FormatEnum.Ref: {
-          extension.push([
-            completion({
-              onQuery: (text) => onQuery(fieldProjection, text),
-              onMatch: (data) => {
-                if (model && editing && modals) {
-                  if (isCreateOption(data)) {
-                    const { field, props } = fieldProjection;
-                    if (props.referenceSchema) {
-                      suppressNextBlur.current = true;
-                      modals.openCreateRef(
-                        props.referenceSchema,
-                        document.querySelector(cellQuery(editing.index, gridId)),
-                        {
-                          [field.referencePath!]: data.text,
-                        },
-                        (data) => {
-                          void handleEnter(data);
-                        },
-                      );
-                    }
-                  } else {
-                    void handleEnter(data);
-                  }
-                }
-              },
-            }),
-          ]);
-          break;
-        }
-      }
+    // Add validation extension to handle content changes
+    if (model && editing) {
+      extension.push(
+        EditorView.updateListener.of(
+          debounce((update) => {
+            const content = update.state.doc.toString();
+            const cell = parseCellIndex(editing.index);
+
+            // Perform validation on content change
+            void model.validateCellData(cell, content).then((result) => {
+              if (result.valid) {
+                setValidationError(null);
+              } else {
+                setValidationError(result.error);
+                setValidationVariant('error');
+              }
+            });
+          }, 10),
+        ),
+      );
     }
 
     return extension;
@@ -395,11 +344,7 @@ export const TableCellEditor = ({
 
   return (
     <>
-      <CellValidationMessage
-        validationError={_validationError}
-        variant={_validationVariant}
-        __gridScope={__gridScope}
-      />
+      <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
       <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
     </>
   );

package/src/components/TableToolbar/TableToolbar.tsx

@@ -11,11 +11,11 @@ import {
   type ActionGraphEdges,
   type ActionGraphNodes,
   type ActionGraphProps,
-  createGapSeparator,
-  createMenuAction,
   type MenuAction,
   MenuProvider,
   ToolbarMenu,
+  createGapSeparator,
+  createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
 import { rxFromSignal } from '@dxos/react-ui-menu';

package/src/components/testing.ts

@@ -5,7 +5,7 @@
 import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { FormatEnum, ObjectId, setValue, TypedObject, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo-schema';
 import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';

package/src/hooks/useAddRow.ts

@@ -8,6 +8,8 @@ import { useCallback } from 'react';
 import { type Space } from '@dxos/client/echo';
 import { Obj } from '@dxos/echo';
 
+import { type InsertRowResult } from '../model';
+
 export type UseAddRowParams = {
   space?: Space;
   schema?: Schema.Schema.AnyNoContext;
@@ -20,16 +22,16 @@ export type UseAddRowParams = {
  */
 export const useAddRow = ({ space, schema }: UseAddRowParams) => {
   return useCallback(
-    (data?: any) => {
+    (data?: any): InsertRowResult => {
       if (space && schema) {
         try {
           space.db.add(Obj.make(schema, data ?? {}));
-          return true;
+          return 'final';
         } catch (error) {
-          return false;
+          return 'draft';
         }
       }
-      return false;
+      return 'final';
     },
     [space, schema],
   );

package/src/hooks/useTableModel.ts

@@ -13,7 +13,7 @@ import { useSelected, useSelectionActions } from '@dxos/react-ui-attention';
 import { type DataType, type ProjectionModel } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { type TableRow, TableModel, type TableModelProps, type TableRowAction } from '../model';
+import { TableModel, type TableModelProps, type TableRow, type TableRowAction } from '../model';
 
 export type UseTableModelParams<T extends TableRow = TableRow> = {
   view?: DataType.View;

package/src/model/modal-controller.ts

@@ -3,7 +3,7 @@
 //
 
 import { signal } from '@preact/signals-core';
-import { type RefObject, type MutableRefObject } from 'react';
+import { type MutableRefObject, type RefObject } from 'react';
 
 import { type Live } from '@dxos/live-object';
 import { log } from '@dxos/log';

package/src/model/selection-model.ts

@@ -2,13 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { computed, effect, type Signal, signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, type Signal, computed, effect, signal } from '@preact/signals-core';
 
 import { Resource } from '@dxos/context';
 
-import { type TableRow } from './table-model';
 import { touch } from '../util';
 
+import { type TableRow } from './table-model';
+
 export type SelectionMode = 'single' | 'multiple';
 
 export class SelectionModel<T extends TableRow> extends Resource {

package/src/model/table-model.test.ts

@@ -6,7 +6,6 @@ import { computed } from '@preact/signals-core';
 import { Schema } from 'effect';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { Obj } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
 import { updateCounter } from '@dxos/echo-schema/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
@@ -14,8 +13,9 @@ import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView } from '@dxos/schema';
 
+import { Table } from '../types';
+
 import { TableModel, type TableModelProps } from './table-model';
-import { TableView } from '../types';
 
 // TODO(burdon): Tests are disabled in project.json since they bring in plugin deps.
 //  Restore once factored out into react-ui-table.
@@ -72,7 +72,6 @@ describe('TableModel', () => {
   describe('reactivity', () => {
     it('pure signals should nest', () => {
       const signal$ = live({ arr: [{ thingInside: 1 }, { thingInside: 2 }] });
-
       const computed$ = computed(() => {
         return signal$.arr.map((row) =>
           computed(() => {
@@ -107,7 +106,7 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const table = Obj.make(TableView, { sizes: {} });
+  const table = Table.make();
   const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
   return new TableModel({ view, schema: schema.jsonSchema, ...props });
 };

package/src/model/table-model.ts

@@ -2,40 +2,41 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, computed, effect, signal } from '@preact/signals-core';
 
 import { Resource } from '@dxos/context';
 import { Obj, Ref } from '@dxos/echo';
 import {
   type FieldSortType,
   FormatEnum,
-  getValue,
-  setValue,
   type JsonProp,
-  getSnapshot,
+  type JsonSchemaType,
   getSchema,
+  getValue,
+  setValue,
   toEffectSchema,
-  type JsonSchemaType,
 } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { ObjectId } from '@dxos/keys';
-import { isLiveObject } from '@dxos/live-object';
+import { getSnapshot, isLiveObject } from '@dxos/live-object';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { type Label } from '@dxos/react-ui';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
-  type DxGridPlaneRange,
   type DxGridPlanePosition,
+  type DxGridPlaneRange,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type DataType, ProjectionModel, type PropertyType, validateSchema, type ValidationError } from '@dxos/schema';
+import { type DataType, ProjectionModel, type PropertyType, type ValidationError, validateSchema } from '@dxos/schema';
 
-import { type SelectionMode, SelectionModel } from './selection-model';
-import { TableSorting } from './table-sorting';
-import { TableView } from '../types';
+import { Table } from '../types';
 import { touch } from '../util';
 import { extractTagIds } from '../util/tag';
 
+import { type SelectionMode, SelectionModel } from './selection-model';
+import { TableSorting } from './table-sorting';
+
 // Domain types for cell classification
 export type TableCellType = 'standard' | 'draft' | 'header';
 
@@ -53,7 +54,7 @@ export type TableRow = Record<JsonProp, any> & { id: string };
 
 export type TableRowAction = {
   id: string;
-  translationKey: string;
+  label: Label;
 };
 
 export type TableFeatures = {
@@ -68,6 +69,8 @@ const defaultFeatures: TableFeatures = {
   schemaEditable: false,
 };
 
+export type InsertRowResult = 'draft' | 'final';
+
 export type TableModelProps<T extends TableRow = TableRow> = {
   view: DataType.View;
   schema: JsonSchemaType;
@@ -78,7 +81,7 @@ export type TableModelProps<T extends TableRow = TableRow> = {
   pinnedRows?: { top: number[]; bottom: number[] };
   rowActions?: TableRowAction[];
   onResolveSchema?: (typename: string) => Promise<JsonSchemaType>;
-  onInsertRow?: (data?: any) => boolean;
+  onInsertRow?: (data?: any) => InsertRowResult;
   onDeleteRows?: (index: number, obj: T[]) => void;
   onDeleteColumn?: (fieldId: string) => void;
   onCellUpdate?: (cell: DxGridPosition) => void;
@@ -89,14 +92,14 @@ export type TableModelProps<T extends TableRow = TableRow> = {
 export class TableModel<T extends TableRow = TableRow> extends Resource {
   private readonly _view: DataType.View;
   private readonly _projection: ProjectionModel;
-  private _table?: TableView;
+  private _table?: Table.Table;
 
   private readonly _visibleRange = signal<DxGridPlaneRange>({
     start: { row: 0, col: 0 },
     end: { row: 0, col: 0 },
   });
 
-  private readonly _onInsertRow?: (data?: any) => boolean;
+  private readonly _onInsertRow?: (data?: any) => InsertRowResult;
   private readonly _onDeleteRows?: TableModelProps<T>['onDeleteRows'];
   private readonly _onDeleteColumn?: TableModelProps<T>['onDeleteColumn'];
   private readonly _onCellUpdate?: TableModelProps<T>['onCellUpdate'];
@@ -173,7 +176,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
     return this._view;
   }
 
-  public get table(): TableView {
+  public get table(): Table.Table {
     invariant(this._table, 'Model not initialized');
     return this._table;
   }
@@ -236,7 +239,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   protected override async _open(): Promise<void> {
     const presentation = this._view.presentation.target ?? (await this._view.presentation.load());
-    invariant(Obj.instanceOf(TableView, presentation));
+    invariant(Obj.instanceOf(Table.Table, presentation));
     this._table = presentation;
 
     this.initializeColumnMeta();
@@ -254,7 +257,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       return {
         grid: meta,
         frozenColsStart: { 0: { size: 30, resizeable: false } },
-        frozenColsEnd: { 0: { size: 40, resizeable: false } },
+        frozenColsEnd: { 0: { size: 32, resizeable: false } },
       };
     });
   }
@@ -334,11 +337,12 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
 
   public getColumnCount = (): number => this._projection?.fields.length ?? 0;
 
-  public insertRow = (): void => {
+  public insertRow = (): InsertRowResult => {
     const result = this._onInsertRow?.();
-    if (result === false && this._draftRows.value.length === 0) {
+    if (result === 'draft' && this._draftRows.value.length === 0) {
       this.createDraftRow();
     }
+    return result ?? 'final';
   };
 
   private createDraftRow(): void {
@@ -393,14 +397,14 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       return false;
     }
 
-    const success = this._onInsertRow?.(draftRow.data);
+    const insertRowResult = this._onInsertRow?.(draftRow.data);
 
-    if (success) {
+    if (insertRowResult === 'final') {
       const newDraftRows = this._draftRows.value.filter((_, index) => index !== draftRowIndex);
       this._draftRows.value = newDraftRows;
     }
 
-    return success ?? false;
+    return insertRowResult === 'final';
   };
 
   public deleteRow = (rowIndex: number): void => {
@@ -497,6 +501,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       setValue(snapshot, field.path, transformedValue);
 
       const validationErrors = this.validateDraftRowData(snapshot);
+      // TODO(thure): These errors sometimes result in a useless message like “is missing” (what is missing?)
       if (validationErrors.length > 0) {
         const error = validationErrors.find((err) => err.path === field.path);
         if (error) {

package/src/model/table-presentation.test.ts

@@ -3,17 +3,17 @@
 //
 
 import { Schema } from 'effect';
-import { describe, expect, it, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { Obj } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
 import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView } from '@dxos/schema';
 
+import { Table } from '../types';
+
 import { TableModel, type TableModelProps } from './table-model';
 import { TablePresentation } from './table-presentation';
-import { TableView } from '../types';
 
 describe('TablePresentation', () => {
   describe('row reactivity', () => {
@@ -97,7 +97,7 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const table = Obj.make(TableView, { sizes: {} });
+  const table = Table.make();
   const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
   return new TableModel({ view, schema: schema.jsonSchema, ...props });
 };