@dxos/react-ui-table 0.8.3 → 0.8.4-main.c1de068

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -4,7 +4,7 @@
 
 import { type Completion } from '@codemirror/autocomplete';
 import { type Schema } from 'effect/Schema';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -24,7 +24,7 @@ import {
   type GridCellEditorProps,
   type GridScopedProps,
 } from '@dxos/react-ui-grid';
-import { tagPickerExtension, createLinks } from '@dxos/react-ui-tag-picker';
+import { tagPicker, createLinks } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
 import { CellValidationMessage } from './CellValidationMessage';
@@ -49,6 +49,7 @@ export type TableCellEditorProps = {
   schema?: Schema.AnyNoContext;
   onEnter?: (cell: DxGridPlanePosition) => void;
   onFocus?: DxGrid['refocus'];
+  onSave?: () => void;
   onQuery?: (field: FieldProjection, text: string) => Promise<QueryResult[]>;
 };
 
@@ -58,6 +59,7 @@ export const TableValueEditor = ({
   schema,
   onEnter,
   onFocus,
+  onSave,
   onQuery,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
@@ -69,14 +71,26 @@ 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
+    // TODO(thure): Support `FormatEnum.MultiSelect`
+  ) {
+    return (
+      <FormCellEditor
+        fieldProjection={fieldProjection}
+        model={model}
+        schema={schema}
+        __gridScope={__gridScope}
+        onSave={onSave}
+      />
+    );
   }
 
   // For all other types, use the existing cell editor
@@ -87,23 +101,28 @@ export const TableValueEditor = ({
       onEnter={onEnter}
       onFocus={onFocus}
       onQuery={onQuery}
+      onSave={onSave}
       __gridScope={__gridScope}
     />
   );
 };
 
+const editorSlots = { scroller: { 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 suppressNextBlur = useRef(false);
   const { themeMode } = useThemeContext();
   const [_validationError, setValidationError] = useState<string | null>(null);
+  const [_validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -111,12 +130,44 @@ 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;
   }, [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) {
@@ -124,19 +175,18 @@ 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(validationResult.error);
+        setValidationVariant('error');
       }
     },
     [model, editing, onEnter, onFocus, setEditing],
@@ -172,22 +222,25 @@ export const TableCellEditor = ({
           setValidationError(null);
           model.setCellData(cell, value);
           setEditing(null);
+          onSave?.();
           onEnter?.(cell);
           if (event && onFocus) {
             onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
           }
         } else {
           setValidationError(result.error);
+          setValidationVariant('error');
         }
       } else {
         setValidationError(null);
         setEditing(null);
+        onSave?.();
         if (event && onFocus) {
           onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
         }
       }
     },
-    [model, editing, onFocus, onEnter, fieldProjection, setEditing],
+    [model, editing, onFocus, onEnter, fieldProjection, setEditing, onSave],
   );
 
   const extension = useMemo(() => {
@@ -214,9 +267,9 @@ export const TableCellEditor = ({
       const mode = format === FormatEnum.SingleSelect ? ('single-select' as const) : ('multi-select' as const);
 
       extension.push(
-        tagPickerExtension({
+        tagPicker({
           mode,
-          inGrid: true,
+          keymap: false,
           onSearch: (text, selectedIds) => {
             return options
               .filter(
@@ -288,7 +341,7 @@ export const TableCellEditor = ({
     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 (
@@ -300,9 +353,10 @@ export const TableCellEditor = ({
         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 +367,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 +395,12 @@ export const TableCellEditor = ({
 
   return (
     <>
-      <CellValidationMessage validationError={_validationError} __gridScope={__gridScope} />
-      <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} />
+      <CellValidationMessage
+        validationError={_validationError}
+        variant={_validationVariant}
+        __gridScope={__gridScope}
+      />
+      <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
     </>
   );
 };

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, setValue, TypedObject, TypeEnum } 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,36 @@
+//
+// 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';
+
+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) => {
+      if (space && schema) {
+        try {
+          space.db.add(Obj.make(schema, data ?? {}));
+          return true;
+        } catch (error) {
+          return false;
+        }
+      }
+      return false;
+    },
+    [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';
 
 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/selection-model.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
+import { computed, effect, type Signal, signal, type ReadonlySignal } from '@preact/signals-core';
 
 import { Resource } from '@dxos/context';
 
@@ -12,7 +12,7 @@ import { touch } from '../util';
 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 +38,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> {

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

@@ -6,16 +6,16 @@ import { computed } from '@preact/signals-core';
 import { Schema } from 'effect';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { Obj, Ref } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
 import { updateCounter } from '@dxos/echo-schema/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
+import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
-import { live } from '@dxos/react-client/echo';
-import { createView, ViewProjection } from '@dxos/schema';
+import { createView } from '@dxos/schema';
 
 import { TableModel, type TableModelProps } from './table-model';
-import { TableType } from '../types';
+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.
@@ -107,8 +107,7 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
-  const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = Obj.make(TableType, { view: Ref.make(view) });
-  return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
+  const table = Obj.make(TableView, { sizes: {} });
+  const view = createView({ typename: schema.typename, jsonSchema: schema.jsonSchema, presentation: table });
+  return new TableModel({ view, schema: schema.jsonSchema, ...props });
 };