@dxos/react-ui-table 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/components/TableToolbar/TableToolbar.tsx

@@ -2,23 +2,20 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import React, { useMemo } from 'react';
+import { Atom, RegistryContext } from '@effect-atom/atom-react';
+import React, { useContext, useEffect, useMemo } from 'react';
 
-import { live } from '@dxos/live-object';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
   type ActionGraphEdges,
   type ActionGraphNodes,
   type ActionGraphProps,
+  Menu,
   type MenuAction,
-  MenuProvider,
-  ToolbarMenu,
   createGapSeparator,
   createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
-import { rxFromSignal } from '@dxos/react-ui-menu';
 
 import { translationKey } from '../../translations';
 
@@ -30,49 +27,60 @@ 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;
+    onAdd?: () => void;
+    onSave?: () => void;
     attendableId?: string;
-    customActions?: Rx.Rx<ActionGraphProps>;
+    customActions?: Atom.Atom<ActionGraphProps>;
   }
 >;
 
 const createTableToolbarActions = ({
-  state,
+  stateAtom,
   onAdd,
   onSave,
   customActions,
 }: {
-  state: TableToolbarState;
-  onAdd: () => void;
-  onSave: () => void;
-  customActions?: Rx.Rx<ActionGraphProps>;
+  stateAtom: Atom.Atom<TableToolbarState>;
+  onAdd?: () => void;
+  onSave?: () => void;
+  customActions?: Atom.Atom<ActionGraphProps>;
 }) =>
-  Rx.make((get) => {
-    const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
-      type: 'add-row' as const,
-      icon: 'ph--plus--regular',
-      label: ['add row', { ns: translationKey }],
-      testId: 'table.toolbar.add-row',
-    });
-    const save = createMenuAction<TableToolbarActionProperties>('save-view', onSave, {
-      type: 'save-view' as const,
-      icon: 'ph--floppy-disk--regular',
-      label: ['save view label', { ns: translationKey }],
-      testId: 'table.toolbar.save-view',
-      iconOnly: false,
-      hidden: get(rxFromSignal(() => !state.viewDirty)),
-    });
+  Atom.make((get) => {
+    const nodes: ActionGraphNodes = [];
+    if (onAdd) {
+      const add = createMenuAction<TableToolbarActionProperties>('add-row', onAdd, {
+        type: 'add-row' as const,
+        icon: 'ph--plus--regular',
+        label: ['add row label', { ns: translationKey }],
+        testId: 'table.toolbar.add-row',
+      });
+      nodes.push(add);
+    }
+    if (onSave) {
+      const state = get(stateAtom);
+      const save = createMenuAction<TableToolbarActionProperties>('save-view', onSave, {
+        type: 'save-view' as const,
+        icon: 'ph--floppy-disk--regular',
+        label: ['save view label', { ns: translationKey }],
+        testId: 'table.toolbar.save-view',
+        iconOnly: false,
+        hidden: !state.viewDirty,
+      });
+      nodes.push(save);
+    }
     const gap = createGapSeparator();
-    const nodes: ActionGraphNodes = [add, save, ...gap.nodes];
-    const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target }));
+    nodes.push(...gap.nodes);
+    const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target, relation: 'child' }));
     if (customActions) {
       const custom = get(customActions);
       nodes.push(...custom.nodes);
       edges.push(...custom.edges);
     }
+
     return {
       nodes,
       edges,
@@ -86,17 +94,25 @@ export const TableToolbar = ({
   onAdd,
   onSave,
   customActions,
+  ...props
 }: TableToolbarProps) => {
-  const state = useMemo(() => live<TableToolbarState>({ viewDirty }), []);
+  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]);
+
   const actionsCreator = useMemo(
-    () => createTableToolbarActions({ state, onAdd, onSave, customActions }),
-    [state, onAdd, onSave, customActions],
+    () => createTableToolbarActions({ stateAtom, onAdd, onSave, customActions }),
+    [stateAtom, onAdd, onSave, customActions],
   );
   const menu = useMenuActions(actionsCreator);
 
   return (
-    <MenuProvider {...menu} attendableId={attendableId}>
-      <ToolbarMenu classNames={classNames} />
-    </MenuProvider>
+    <Menu.Root {...menu} attendableId={attendableId}>
+      <Menu.Toolbar {...props} classNames={classNames} />
+    </Menu.Root>
   );
 };

package/src/components/testing.ts

@@ -2,33 +2,59 @@
 // Copyright 2024 DXOS.org
 //
 
+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/internal';
-import { live } from '@dxos/live-object';
+import { Format, Type } from '@dxos/echo';
+import { TypeEnum } from '@dxos/echo/internal';
+import { setValue } from '@dxos/effect';
 import { faker } 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: 'example.com/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(),
     })),
-  });
+  }).pipe(Atom.keepAlive);
+};
 
-  return data;
+/**
+ * Creates plain test items (non-reactive).
+ */
+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(),
+  }));
 };
 
 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 * as Schema from 'effect/Schema';
 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/internal';
-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/model/modal-controller.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { signal } from '@preact/signals-core';
+import { Atom, type Registry } from '@effect-atom/atom-react';
 import { type MutableRefObject, type RefObject } from 'react';
 
 export type ColumnSettingsMode = { type: 'create' } | { type: 'edit'; fieldId: string };
@@ -15,13 +15,23 @@ export type ModalState =
   | { type: 'closed' };
 
 export class ModalController {
-  private readonly _state = signal<ModalState>({ type: 'closed' });
+  private readonly _registry: Registry.Registry;
+  private readonly _state: Atom.Writable<ModalState>;
   private readonly _triggerRef: MutableRefObject<HTMLElement> = { current: null as unknown as HTMLElement };
 
-  public get state() {
+  constructor(registry: Registry.Registry) {
+    this._registry = registry;
+    this._state = Atom.make<ModalState>({ type: 'closed' });
+  }
+
+  public get state(): Atom.Atom<ModalState> {
     return this._state;
   }
 
+  public get stateValue(): ModalState {
+    return this._registry.get(this._state);
+  }
+
   public get trigger() {
     return this._triggerRef as RefObject<HTMLButtonElement>;
   }
@@ -31,35 +41,36 @@ export class ModalController {
   };
 
   public showRowMenu = (rowIndex: number) => {
-    this._state.value = { type: 'row', rowIndex };
+    this._registry.set(this._state, { type: 'row', rowIndex });
   };
 
   public showColumnMenu = (fieldId: string) => {
-    this._state.value = { type: 'column', fieldId };
+    this._registry.set(this._state, { type: 'column', fieldId });
   };
 
   public showColumnCreator = () => {
-    this._state.value = { type: 'columnSettings', mode: { type: 'create' } };
+    this._registry.set(this._state, { type: 'columnSettings', mode: { type: 'create' } });
   };
 
   public showReferencePanel = (targetId: string, schemaId: string) => {
-    this._state.value = { type: 'refPanel', targetId, typename: schemaId };
+    this._registry.set(this._state, { type: 'refPanel', targetId, typename: schemaId });
   };
 
   public openColumnSettings = () => {
-    if (this._state.value.type === 'column') {
-      const fieldId = this._state.value.fieldId;
+    const currentState = this._registry.get(this._state);
+    if (currentState.type === 'column') {
+      const fieldId = currentState.fieldId;
       // Queue next render to let the column action modal close completely.
       requestAnimationFrame(() => {
-        this._state.value = {
+        this._registry.set(this._state, {
           type: 'columnSettings',
           mode: { type: 'edit', fieldId },
-        };
+        });
       });
     }
   };
 
   public close = () => {
-    this._state.value = { type: 'closed' };
+    this._registry.set(this._state, { type: 'closed' });
   };
 }