@dxos/react-ui-table 0.8.3-staging.0fa589b → 0.8.4-main.1da679c

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -3,62 +3,59 @@
 //
 
 import { type Completion } from '@codemirror/autocomplete';
+import { EditorView } from '@codemirror/view';
 import { type Schema } from 'effect/Schema';
 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 { useThemeContext } from '@dxos/react-ui';
+import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
 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 { tagPickerExtension, 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'];
-  onQuery?: (field: FieldProjection, text: string) => Promise<QueryResult[]>;
+  onFocus?: (axis?: DxGridAxis, delta?: -1 | 0 | 1, cell?: DxGridPosition) => void;
+  onSave?: () => void;
+  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,
-  onQuery,
+  onSave,
+  client,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
   const { editing } = useGridContext('TableValueEditor', __gridScope);
@@ -69,41 +66,48 @@ export const TableValueEditor = ({
     }
 
     const { col } = parseCellIndex(editing.index);
-    const field = model.projection.view.fields[col];
+    const field = model.projection.fields[col];
     const fieldProjection = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection);
     return fieldProjection;
   }, [model, editing]);
 
-  if (fieldProjection?.props.type === TypeEnum.Array) {
-    return <FormCellEditor fieldProjection={fieldProjection} model={model} schema={schema} __gridScope={__gridScope} />;
+  if (
+    fieldProjection?.props.type === TypeEnum.Array ||
+    fieldProjection?.props.format === FormatEnum.SingleSelect ||
+    fieldProjection?.props.format === FormatEnum.Ref
+    // TODO(thure): Support `FormatEnum.MultiSelect`
+  ) {
+    return (
+      <FormCellEditor
+        fieldProjection={fieldProjection}
+        model={model}
+        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}
-      __gridScope={__gridScope}
-    />
-  );
+  return <TableCellEditor model={model} modals={modals} onFocus={onFocus} onSave={onSave} __gridScope={__gridScope} />;
 };
 
+const editorSlots = { scroll: { className: '!plb-[--dx-grid-cell-editor-padding-block]' } };
+
 export const TableCellEditor = ({
   model,
   modals,
-  onEnter,
   onFocus,
-  onQuery,
+  onSave,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
-  const { id: gridId, editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
+  const { editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
-  const { themeMode } = useThemeContext();
-  const [_validationError, setValidationError] = useState<string | null>(null);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -111,7 +115,7 @@ export const TableCellEditor = ({
     }
 
     const { col } = parseCellIndex(editing.index);
-    const field = model.projection.view.fields[col];
+    const field = model.projection.fields[col];
     const fieldProjection = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection);
     return fieldProjection;
@@ -124,34 +128,39 @@ export const TableCellEditor = ({
       }
 
       const cell = parseCellIndex(editing.index);
+      const validationResult = await model.validateCellData(cell, value);
 
-      // Validate the value
-      const result = await model.validateCellData(cell, value);
-
-      if (result.valid) {
+      if (validationResult.valid) {
         setValidationError(null);
         model.setCellData(cell, value);
-        onEnter?.(cell);
         onFocus?.();
         setEditing(null);
+        onSave?.();
       } else {
-        setValidationError(result.error);
-        // Editor stays open on validation failure
+        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],
   );
@@ -163,39 +172,42 @@ export const TableCellEditor = ({
       }
 
       const cell = parseCellIndex(editing.index);
-
       if (value !== undefined) {
         // Pre-commit validation check.
         const result = await model.validateCellData(cell, value);
 
         if (result.valid) {
+          suppressNextBlur.current = true;
           setValidationError(null);
           model.setCellData(cell, value);
           setEditing(null);
-          onEnter?.(cell);
+          onSave?.();
           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?.();
         if (event && onFocus) {
           onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
         }
       }
     },
-    [model, editing, onFocus, onEnter, fieldProjection, setEditing],
+    [model, editing, onFocus, fieldProjection, setEditing, onSave],
   );
 
-  const extension = useMemo(() => {
+  const extensions = useMemo(() => {
     if (!fieldProjection) {
       return [];
     }
 
-    const extension = [
+    const extensions = [
       editorKeys({
         onClose: handleClose,
         ...(editing?.initialContent && { onNav: handleClose }),
@@ -203,20 +215,17 @@ export const TableCellEditor = ({
     ];
 
     const format = fieldProjection.props.format;
-
     if (format === FormatEnum.SingleSelect || format === FormatEnum.MultiSelect) {
       // TODO(ZaymonFC): Reconcile this with the TagPicker component?
-      // Add markdown extensions needed by tag picker.
-      extension.push(createMarkdownExtensions({ themeMode }));
-
       const options = fieldProjection.props.options || [];
-
       const mode = format === FormatEnum.SingleSelect ? ('single-select' as const) : ('multi-select' as const);
 
-      extension.push(
-        tagPickerExtension({
+      // Add markdown extensions needed by tag picker.
+      extensions.push(createMarkdownExtensions());
+      extensions.push(
+        tagPicker({
           mode,
-          inGrid: true,
+          keymap: false,
           onSearch: (text, selectedIds) => {
             return options
               .filter(
@@ -246,49 +255,36 @@ 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) {
+      extensions.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;
-  }, [model, modals, editing, fieldProjection, handleClose, themeMode]);
+    return extensions;
+  }, [model, modals, editing, fieldProjection, handleClose]);
 
   const getCellContent = useCallback<GridCellEditorProps['getCellContent']>(() => {
     if (model && editing) {
       const cell = parseCellIndex(editing.index);
       const { col } = cell;
-      const field = model.projection.view.fields[col];
+      const field = model.projection.fields[col];
       const fieldProjection = model.projection.getFieldProjection(field.id);
 
       if (
@@ -296,13 +292,12 @@ export const TableCellEditor = ({
         fieldProjection?.props.format === FormatEnum.MultiSelect
       ) {
         const value = model.getCellData(cell);
-
         if (value !== undefined) {
           const options = fieldProjection.props.options || [];
-
-          if (fieldProjection.props.format === FormatEnum.MultiSelect && Array.isArray(value)) {
+          if (fieldProjection.props.format === FormatEnum.MultiSelect) {
             const tagItems = value
-              .map((id) => {
+              .split(',')
+              .map((id: string) => {
                 const option = options.find((o) => o.id === id);
                 if (option) {
                   return {
@@ -313,7 +308,7 @@ export const TableCellEditor = ({
                 }
                 return undefined;
               })
-              .filter((item): item is { id: any; label: string; hue: any } => item !== undefined);
+              .filter((item: any): item is { id: any; label: string; hue: any } => item !== undefined);
 
             return createLinks(tagItems);
           } else {
@@ -341,8 +336,8 @@ export const TableCellEditor = ({
 
   return (
     <>
-      <CellValidationMessage validationError={_validationError} __gridScope={__gridScope} />
-      <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} />
+      <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
+      <GridCellEditor extensions={extensions} 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,13 +5,10 @@
 import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { Obj, Ref } from '@dxos/echo';
-import { FormatEnum, ObjectId, setValue, toJsonSchema, 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 { live } from '@dxos/react-client/echo';
-import { createView, type ViewProjection } from '@dxos/schema';
-
-import { TableType } from '../types';
+import { type ProjectionModel } from '@dxos/schema';
 
 export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
   id: ObjectId,
@@ -21,18 +18,6 @@ export const TestSchema = TypedObject({ typename: 'example.com/type/Test', versi
   netWorth: Schema.optional(Schema.Number),
 });
 
-export const createTable = (schema = TestSchema) => {
-  return Obj.make(TableType, {
-    view: Ref.make(
-      createView({
-        name: 'Test',
-        typename: schema.typename,
-        jsonSchema: toJsonSchema(schema),
-      }),
-    ),
-  });
-};
-
 export const createItems = (n: number) => {
   const { data } = live({
     data: Array.from({ length: n }, () => ({
@@ -47,13 +32,13 @@ export const createItems = (n: number) => {
 };
 
 export type SimulatorProps = {
-  table: TableType;
+  projection: ProjectionModel;
   items: any[];
   insertInterval?: number;
   updateInterval?: number;
 };
 
-export const useSimulator = ({ items, table, insertInterval, updateInterval }: SimulatorProps) => {
+export const useSimulator = ({ items, projection, insertInterval, updateInterval }: SimulatorProps) => {
   useEffect(() => {
     if (!insertInterval) {
       return;
@@ -74,10 +59,8 @@ export const useSimulator = ({ items, table, insertInterval, updateInterval }: S
 
     const i = setInterval(() => {
       const rowIdx = Math.floor(Math.random() * items.length);
-      const fields = table.view?.target?.fields ?? [];
+      const fields = projection.fields ?? [];
       const columnIdx = Math.floor(Math.random() * fields.length);
-      // TODO(ZaymonFC): ... This is borked.
-      const projection: ViewProjection = (table as any)._projection;
       const field = fields[columnIdx];
       const item = items[rowIdx];
 
@@ -115,5 +98,5 @@ export const useSimulator = ({ items, table, insertInterval, updateInterval }: S
     }, updateInterval);
 
     return () => clearInterval(i);
-  }, [items, table.view?.target?.fields, updateInterval]);
+  }, [items, projection.fields, updateInterval]);
 };

package/src/hooks/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './useTableModel';
+export * from './useAddRow';

package/src/hooks/useAddRow.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Schema } from 'effect';
+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;
+};
+
+/**
+ * Hook that provides a safe row creation function that handles schema validation failures.
+ * Returns a callback that attempts to create an object and returns boolean success/failure.
+ * Can accept optional data to create objects with specific content (used for committing draft rows).
+ */
+export const useAddRow = ({ space, schema }: UseAddRowParams) => {
+  return useCallback(
+    (data?: any): InsertRowResult => {
+      if (space && schema) {
+        try {
+          space.db.add(Obj.make(schema, data ?? {}));
+          return 'final';
+        } catch (error) {
+          return 'draft';
+        }
+      }
+      return 'final';
+    },
+    [space, schema],
+  );
+};

package/src/hooks/useTableModel.ts

@@ -4,19 +4,21 @@
 
 import { effect } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
-import { fullyQualifiedId, getSpace, type Live } from '@dxos/react-client/echo';
-import { useSelectionActions } from '@dxos/react-ui-attention';
-import { type ViewProjection } from '@dxos/schema';
+import { type JsonSchemaType } from '@dxos/echo-schema';
+import { type Live } from '@dxos/live-object';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+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 { type TableType } from '../types';
+import { TableModel, type TableModelProps, type TableRow, type TableRowAction } from '../model';
 
 export type UseTableModelParams<T extends TableRow = TableRow> = {
-  table?: TableType;
-  projection?: ViewProjection;
+  view?: DataType.View;
+  schema?: JsonSchemaType;
+  projection?: ProjectionModel;
   rows?: Live<T>[];
   rowActions?: TableRowAction[];
   onSelectionChanged?: (selection: string[]) => void;
@@ -27,7 +29,8 @@ export type UseTableModelParams<T extends TableRow = TableRow> = {
 >;
 
 export const useTableModel = <T extends TableRow = TableRow>({
-  table,
+  view,
+  schema,
   projection,
   rows,
   rowActions,
@@ -36,21 +39,24 @@ export const useTableModel = <T extends TableRow = TableRow>({
   onRowAction,
   ...props
 }: UseTableModelParams<T>): TableModel<T> | undefined => {
+  const selected = useSelected(view && fullyQualifiedId(view), 'multi');
+  const initialSelection = useMemo(() => selected, [view]);
+
   const [model, setModel] = useState<TableModel<T>>();
   useEffect(() => {
-    if (!table || !projection) {
+    if (!view || !schema) {
       return;
     }
 
     let model: TableModel<T> | undefined;
     const t = setTimeout(async () => {
       model = new TableModel<T>({
-        id: fullyQualifiedId(table),
-        space: getSpace(table),
-        view: table.view?.target,
+        view,
+        schema,
         projection,
         features,
         rowActions,
+        initialSelection,
         onRowAction,
         ...props,
       });
@@ -62,7 +68,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
       clearTimeout(t);
       void model?.close();
     };
-  }, [table, projection, table?.view?.target, features, rowActions]); // TODO(burdon): Trigger if callbacks change?
+  }, [view, schema, projection, features, rowActions, initialSelection]); // TODO(burdon): Trigger if callbacks change?
 
   // Update data.
   useEffect(() => {
@@ -77,9 +83,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
     }
   }, [model, rows]);
 
-  const { multiSelect, clear } = useSelectionActions(
-    [table?.id, table?.view?.target?.query.typename].filter(isNonNullable),
-  );
+  const { multiSelect, clear } = useSelectionActions([model?.id].filter(isNonNullable));
 
   useEffect(() => {
     if (!model) {

package/src/index.ts

@@ -2,12 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import translations from './translations';
+import { translations } from './translations';
 
 export * from './components';
 export * from './hooks';
 export * from './model';
-export * from './types';
 export * from './util';
 
 export { translations };

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,17 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import { computed, effect, 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 {
-  private readonly _selection = signal<Set<string>>(new Set());
+  private readonly _selection: Signal<Set<string>>;
 
   private readonly _validSelectedIds = computed<Set<string>>(() => {
     const rows = this._rows.value;
@@ -38,9 +39,11 @@ export class SelectionModel<T extends TableRow> extends Resource {
   constructor(
     private readonly _rows: ReadonlySignal<T[]>,
     private readonly _selectionMode: SelectionMode,
+    private readonly _initialSelection: string[],
     private readonly _onSelectionChanged?: () => void,
   ) {
     super();
+    this._selection = signal(new Set(this._initialSelection));
   }
 
   protected override async _open(): Promise<void> {