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

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -4,16 +4,13 @@
 
 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 { type Type } from '@dxos/echo';
+import { Format, TypeEnum } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
-import { useThemeContext } from '@dxos/react-ui';
-import { createMarkdownExtensions } from '@dxos/react-ui-editor';
 import {
   type EditorBlurHandler,
   type EditorKeyEvent,
@@ -25,40 +22,37 @@ import {
   parseCellIndex,
   useGridContext,
 } from '@dxos/react-ui-grid';
-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 { FormCellEditor, type OnCreateHandler } from './FormCellEditor';
 
 /**
  * Option to create new object/value.
  */
-export type QueryResult = Pick<Completion, 'label'> & { data: any };
+export type QueryResult = Pick<Completion, 'label'> & {
+  data: any;
+};
 
-export type TableCellEditorProps = {
+export type TableCellEditorProps<T extends Type.AnyEntity = Type.AnyEntity> = {
+  schema?: T;
   model?: TableModel;
   modals?: ModalController;
-  schema?: Schema.AnyNoContext;
   onFocus?: (axis?: DxGridAxis, delta?: -1 | 0 | 1, cell?: DxGridPosition) => void;
+  onCreate?: OnCreateHandler;
   onSave?: () => void;
-  client?: Client;
 };
 
-const adaptValidationMessage = (message: string | null) =>
-  message ? (message.endsWith('is missing') ? 'Can’t be blank' : message) : null;
-
-export const TableValueEditor = ({
+export const TableValueEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
+  __gridScope,
+  schema,
   model,
   modals,
-  schema,
   onFocus,
   onSave,
-  client,
-  __gridScope,
-}: GridScopedProps<TableCellEditorProps>) => {
+  onCreate,
+}: GridScopedProps<TableCellEditorProps<T>>) => {
   const { editing } = useGridContext('TableValueEditor', __gridScope);
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
@@ -67,7 +61,7 @@ export const TableValueEditor = ({
     }
 
     const { col } = parseCellIndex(editing.index);
-    const field = model.projection.fields[col];
+    const field = model.projection.getFields()[col];
     const fieldProjection = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection);
     return fieldProjection;
@@ -75,39 +69,36 @@ export const TableValueEditor = ({
 
   if (
     fieldProjection?.props.type === TypeEnum.Array ||
-    fieldProjection?.props.format === FormatEnum.SingleSelect ||
-    fieldProjection?.props.format === FormatEnum.Ref
-    // TODO(thure): Support `FormatEnum.MultiSelect`
+    fieldProjection?.props.format === Format.TypeFormat.SingleSelect ||
+    fieldProjection?.props.format === Format.TypeFormat.Ref
+    // TODO(thure): Support `Format.TypeFormat.MultiSelect`
   ) {
     return (
-      <FormCellEditor
-        fieldProjection={fieldProjection}
-        model={model}
-        schema={schema}
+      <FormCellEditor<T>
         __gridScope={__gridScope}
-        onSave={onSave}
-        client={client}
+        schema={schema}
+        model={model}
+        fieldProjection={fieldProjection}
         modals={modals}
+        onSave={onSave}
+        onCreate={onCreate}
       />
     );
   }
 
-  // For all other types, use the existing cell editor
+  // For all other types, use the existing cell editor.
   return <TableCellEditor model={model} modals={modals} onFocus={onFocus} onSave={onSave} __gridScope={__gridScope} />;
 };
 
-const editorSlots = { scroller: { className: '!plb-[--dx-grid-cell-editor-padding-block]' } };
-
 export const TableCellEditor = ({
+  __gridScope,
   model,
   modals,
   onFocus,
   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 [validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
@@ -117,12 +108,13 @@ export const TableCellEditor = ({
     }
 
     const { col } = parseCellIndex(editing.index);
-    const field = model.projection.fields[col];
+    const field = model.projection.getFields()[col];
     const fieldProjection = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection);
     return fieldProjection;
   }, [model, editing]);
 
+  // TOOD(burdon): Attach to event handler?
   const handleEnter = useCallback(
     async (value: any) => {
       if (!model || !editing) {
@@ -139,7 +131,7 @@ export const TableCellEditor = ({
         setEditing(null);
         onSave?.();
       } else {
-        setValidationError(adaptValidationMessage(validationResult.error));
+        setValidationError(validationResult.error);
         setValidationVariant('error');
       }
     },
@@ -174,7 +166,6 @@ export const TableCellEditor = ({
       }
 
       const cell = parseCellIndex(editing.index);
-
       if (value !== undefined) {
         // Pre-commit validation check.
         const result = await model.validateCellData(cell, value);
@@ -205,71 +196,26 @@ export const TableCellEditor = ({
     [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 }),
       }),
     ];
-
-    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(
-        tagPicker({
-          mode,
-          keymap: false,
-          onSearch: (text, selectedIds) => {
-            return options
-              .filter(
-                (option) =>
-                  selectedIds.indexOf(option.id) === -1 &&
-                  (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase())),
-              )
-              .map((option) => ({
-                id: option.id,
-                label: option.title,
-                hue: option.color as any,
-              }));
-          },
-          onUpdate: (ids) => {
-            if (model && editing) {
-              if (ids.length === 0) {
-                return;
-              }
-              if (mode === 'single-select') {
-                void handleEnter(ids[0]);
-              } else {
-                void handleEnter(ids);
-              }
-            }
-          },
-        }),
-      );
-    }
-
-    // Add validation extension to handle content changes
+    // Add validation extension to handle content changes.
     if (model && editing) {
-      extension.push(
+      extensions.push(
         EditorView.updateListener.of(
           debounce((update) => {
             const content = update.state.doc.toString();
             const cell = parseCellIndex(editing.index);
 
-            // Perform validation on content change
+            // Perform validation on content change.
             void model.validateCellData(cell, content).then((result) => {
               if (result.valid) {
                 setValidationError(null);
@@ -283,60 +229,12 @@ export const TableCellEditor = ({
       );
     }
 
-    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.fields[col];
-      const fieldProjection = model.projection.getFieldProjection(field.id);
-
-      if (
-        fieldProjection?.props.format === FormatEnum.SingleSelect ||
-        fieldProjection?.props.format === FormatEnum.MultiSelect
-      ) {
-        const value = model.getCellData(cell);
-
-        if (value !== undefined) {
-          const options = fieldProjection.props.options || [];
-
-          if (fieldProjection.props.format === FormatEnum.MultiSelect) {
-            const tagItems = value
-              .split(',')
-              .map((id: string) => {
-                const option = options.find((o) => o.id === id);
-                if (option) {
-                  return {
-                    id,
-                    label: option.title,
-                    hue: option.color as any,
-                  };
-                }
-                return undefined;
-              })
-              .filter((item: any): item is { id: any; label: string; hue: any } => item !== undefined);
-
-            return createLinks(tagItems);
-          } else {
-            const option = options.find((o) => o.id === value);
-
-            if (option) {
-              const tagItem = {
-                id: value,
-                label: option.title,
-                hue: option.color as any,
-              };
-
-              return createLinks([tagItem]);
-            }
-          }
-        }
-
-        return '';
-      }
-
       const value = model.getCellData(cell);
       return value !== undefined ? String(value) : '';
     }
@@ -345,7 +243,16 @@ export const TableCellEditor = ({
   return (
     <>
       <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
-      <GridCellEditor extension={extension} 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/TableCellEditor/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './TableCellEditor';
+export { type OnCreateHandler } from './FormCellEditor';

package/src/components/index.ts

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

package/src/components/testing.ts

@@ -2,33 +2,59 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import { Atom } from '@effect-atom/atom-react';
+import * as Schema from 'effect/Schema';
 import { useEffect } from 'react';
 
-import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo-schema';
-import { live } from '@dxos/live-object';
-import { faker } from '@dxos/random';
+import { Format, Type } from '@dxos/echo';
+import { TypeEnum } from '@dxos/echo/internal';
+import { setValue } from '@dxos/effect';
+import { random } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';
 
-export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  id: ObjectId,
+export const TestSchema = Schema.Struct({
   name: Schema.optional(Schema.String),
   age: Schema.optional(Schema.Number),
   active: Schema.optional(Schema.Boolean),
   netWorth: Schema.optional(Schema.Number),
-});
+}).pipe(
+  Type.object({
+    typename: 'com.example.type.test',
+    version: '0.1.0',
+  }),
+);
 
-export const createItems = (n: number) => {
-  const { data } = live({
+export type TestItem = {
+  name: string;
+  age: number;
+  active: boolean;
+  netWorth: number;
+};
+
+/**
+ * Creates an Atom containing test items data.
+ */
+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);
+};
 
-  return data;
+/**
+ * Creates plain test items (non-reactive).
+ */
+export const createItems = (n: number): TestItem[] => {
+  return Array.from({ length: n }, () => ({
+    name: random.person.fullName(),
+    age: random.number.int({ min: 20, max: 70 }),
+    active: random.datatype.boolean(),
+    netWorth: random.number.int(),
+  }));
 };
 
 export type SimulatorProps = {
@@ -59,7 +85,7 @@ export const useSimulator = ({ items, projection, insertInterval, updateInterval
 
     const i = setInterval(() => {
       const rowIdx = Math.floor(Math.random() * items.length);
-      const fields = projection.fields ?? [];
+      const fields = projection.getFields() ?? [];
       const columnIdx = Math.floor(Math.random() * fields.length);
       const field = fields[columnIdx];
       const item = items[rowIdx];
@@ -88,7 +114,7 @@ export const useSimulator = ({ items, projection, insertInterval, updateInterval
 
         if (format) {
           switch (format) {
-            case FormatEnum.Currency: {
+            case Format.TypeFormat.Currency: {
               item[path] = Math.floor(Math.random() * 1000);
               break;
             }
@@ -98,5 +124,5 @@ export const useSimulator = ({ items, projection, insertInterval, updateInterval
     }, updateInterval);
 
     return () => clearInterval(i);
-  }, [items, projection.fields, updateInterval]);
+  }, [items, projection.getFields(), updateInterval]);
 };

package/src/hooks/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './useTableModel';
 export * from './useAddRow';
+export * from './useProjectionModel';
+export * from './useTableModel';

package/src/hooks/useAddRow.ts

@@ -2,17 +2,15 @@
 // 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 Database, Obj, type Type } from '@dxos/echo';
 
 import { type InsertRowResult } from '../model';
 
-export type UseAddRowParams = {
-  space?: Space;
-  schema?: Schema.Schema.AnyNoContext;
+export type UseAddRowProps = {
+  db?: Database.Database;
+  schema?: Type.AnyObj;
 };
 
 /**
@@ -20,12 +18,12 @@ export type UseAddRowParams = {
  * 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) => {
+export const useAddRow = ({ db, schema }: UseAddRowProps) => {
   return useCallback(
     (data?: any): InsertRowResult => {
-      if (space && schema) {
+      if (db && schema) {
         try {
-          space.db.add(Obj.make(schema, data ?? {}));
+          db.add(Obj.make(schema, data ?? {}));
           return 'final';
         } catch (error) {
           return 'draft';
@@ -33,6 +31,6 @@ export const useAddRow = ({ space, schema }: UseAddRowParams) => {
       }
       return 'final';
     },
-    [space, schema],
+    [db, schema],
   );
 };

package/src/hooks/useProjectionModel.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Registry } from '@effect-atom/atom-react';
+import { useState } from 'react';
+
+import { JsonSchema, Type } from '@dxos/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
+
+import { type Table } from '../types';
+
+export const useProjectionModel = <S extends Type.AnyEntity>(
+  schema: S | undefined,
+  table: Table.Table | undefined,
+  registry: Registry.Registry,
+) => {
+  const [projection, setProjection] = useState<ProjectionModel | undefined>();
+
+  useAsyncEffect(async () => {
+    if (schema && table) {
+      const view = await table.view.load();
+      // For mutable schemas (EchoSchema), use the live jsonSchema reference for reactivity.
+      // For immutable schemas, create a snapshot.
+      const jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : JsonSchema.toJsonSchema(schema);
+
+      // Always use createEchoChangeCallback since the view is ECHO-backed.
+      // Pass schema only when mutable to allow schema mutations.
+      const change = createEchoChangeCallback(view, Type.isMutable(schema) ? schema : undefined);
+
+      const projection = new ProjectionModel({ registry, view, baseSchema: jsonSchema, change });
+      projection.normalizeView();
+      setProjection(projection);
+    }
+  }, [schema, table, registry]);
+
+  return projection;
+};

package/src/hooks/useTableModel.ts

@@ -2,58 +2,65 @@
 // Copyright 2024 DXOS.org
 //
 
-import { effect } from '@preact/signals-core';
-import orderBy from 'lodash.orderby';
-import { useEffect, useMemo, useState } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 
-import { type JsonSchemaType } from '@dxos/echo-schema';
-import { type Live } from '@dxos/live-object';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { type Database, Obj } from '@dxos/echo';
 import { useSelected, useSelectionActions } from '@dxos/react-ui-attention';
-import { type DataType, type ProjectionModel } from '@dxos/schema';
+import { type ProjectionModel } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { TableModel, type TableModelProps, type TableRow, type TableRowAction } from '../model';
+import {
+  TableModel,
+  type TableModelProps,
+  type TableRow,
+  type TableRowAction,
+  createEchoChangeCallback,
+} from '../model';
+import { type Table } from '../types';
 
-export type UseTableModelParams<T extends TableRow = TableRow> = {
-  view?: DataType.View;
-  schema?: JsonSchemaType;
+export type UseTableModelProps<T extends TableRow = TableRow> = {
+  object?: Table.Table;
   projection?: ProjectionModel;
-  rows?: Live<T>[];
+  db?: Database.Database;
+  rows?: T[];
   rowActions?: TableRowAction[];
   onSelectionChanged?: (selection: string[]) => void;
   onRowAction?: (actionId: string, data: T) => void;
 } & Pick<
   TableModelProps<T>,
-  'features' | 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChange'
+  'features' | 'onInsertRow' | 'onDeleteRows' | 'onColumnDelete' | 'onCellUpdate' | 'onRowOrderChange'
 >;
 
 export const useTableModel = <T extends TableRow = TableRow>({
-  view,
-  schema,
+  object,
   projection,
+  db,
   rows,
   rowActions,
   features,
   onSelectionChanged,
   onRowAction,
   ...props
-}: UseTableModelParams<T>): TableModel<T> | undefined => {
-  const selected = useSelected(view && fullyQualifiedId(view), 'multi');
-  const initialSelection = useMemo(() => selected, [view]);
+}: UseTableModelProps<T>): TableModel<T> | undefined => {
+  const registry = useContext(RegistryContext);
+  const selected = useSelected(object && Obj.getDXN(object).toString(), 'multi');
+  const initialSelection = useMemo(() => selected, [object]);
 
   const [model, setModel] = useState<TableModel<T>>();
   useEffect(() => {
-    if (!view || !schema) {
+    if (!object || !projection) {
       return;
     }
 
     let model: TableModel<T> | undefined;
     const t = setTimeout(async () => {
       model = new TableModel<T>({
-        view,
-        schema,
+        registry,
+        object,
         projection,
+        db,
+        change: createEchoChangeCallback<T>(object),
         features,
         rowActions,
         initialSelection,
@@ -68,18 +75,13 @@ export const useTableModel = <T extends TableRow = TableRow>({
       clearTimeout(t);
       void model?.close();
     };
-  }, [view, schema, projection, features, rowActions, initialSelection]); // TODO(burdon): Trigger if callbacks change?
+    // TODO(burdon): Trigger if callbacks change?
+  }, [registry, object, projection, features, rowActions, initialSelection]);
 
-  // Update data.
+  // Update data when rows change.
   useEffect(() => {
-    if (rows) {
-      // TODO(ZaymonFC): Remove this workaround once unstable query ordering issue is resolved
-      /*
-       * Sort all objects by string id field as a temporary workaround for query ordering issues
-       * Reference: https://github.com/dxos/dxos/pull/9409
-       */
-      const sortedRows = orderBy(rows, [(row) => String(row.id)], ['asc']);
-      model?.setRows(sortedRows);
+    if (rows && model) {
+      model.setRows(rows);
     }
   }, [model, rows]);
 
@@ -90,8 +92,8 @@ export const useTableModel = <T extends TableRow = TableRow>({
       return;
     }
 
-    const unsubscribe = effect(() => {
-      const selectedItems = [...model.selection.selection.value];
+    const unsubscribe = registry.subscribe(model.selection.selectionAtom, () => {
+      const selectedItems = [...model.selection.selection];
       multiSelect(selectedItems);
       onSelectionChanged?.(selectedItems);
     });
@@ -101,7 +103,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
       clear();
       unsubscribe();
     };
-  }, [model, onSelectionChanged]);
+  }, [registry, model, onSelectionChanged]);
 
   return model;
 };

package/src/index.ts

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