@dxos/react-ui-table 0.8.4-main.f9ba587 → 0.8.4-main.fcfe5033a5

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,55 +2,68 @@
 // Copyright 2024 DXOS.org
 //
 
-import { effect } from '@preact/signals-core';
-import orderBy from 'lodash.orderby';
-import { useEffect, useState } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+import { useContext, 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 Database, Obj } from '@dxos/echo';
+import { useSelected, useSelectionActions } from '@dxos/react-ui-attention';
+import { 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,
+  createEchoChangeCallback,
+} from '../model';
+import { type Table } from '../types';
 
-export type UseTableModelParams<T extends TableRow = TableRow> = {
-  table?: TableType;
-  projection?: ViewProjection;
-  rows?: Live<T>[];
+export type UseTableModelProps<T extends TableRow = TableRow> = {
+  object?: Table.Table;
+  projection?: ProjectionModel;
+  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>({
-  table,
+  object,
   projection,
+  db,
   rows,
   rowActions,
   features,
   onSelectionChanged,
   onRowAction,
   ...props
-}: UseTableModelParams<T>): TableModel<T> | undefined => {
+}: 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 (!table || !projection) {
+    if (!object || !projection) {
       return;
     }
 
     let model: TableModel<T> | undefined;
     const t = setTimeout(async () => {
       model = new TableModel<T>({
-        id: fullyQualifiedId(table),
-        space: getSpace(table),
-        view: table.view?.target,
+        registry,
+        object,
         projection,
+        db,
+        change: createEchoChangeCallback<T>(object),
         features,
         rowActions,
+        initialSelection,
         onRowAction,
         ...props,
       });
@@ -62,32 +75,25 @@ 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?
+    // 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]);
 
-  const { multiSelect, clear } = useSelectionActions(
-    [table?.id, table?.view?.target?.query.typename].filter(isNonNullable),
-  );
+  const { multiSelect, clear } = useSelectionActions([model?.id].filter(isNonNullable));
 
   useEffect(() => {
     if (!model) {
       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);
     });
@@ -97,7 +103,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
       clear();
       unsubscribe();
     };
-  }, [model, onSelectionChanged]);
+  }, [registry, model, onSelectionChanged]);
 
   return model;
 };

package/src/index.ts

@@ -7,7 +7,6 @@ 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

@@ -2,11 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { signal } from '@preact/signals-core';
-import { type RefObject, type MutableRefObject } from 'react';
-
-import { type Live } from '@dxos/live-object';
-import { log } from '@dxos/log';
+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 };
 
@@ -14,23 +11,27 @@ export type ModalState =
   | { type: 'row'; rowIndex: number }
   | { type: 'column'; fieldId: string }
   | { type: 'refPanel'; targetId: string; typename: string }
-  | {
-      type: 'createRefPanel';
-      typename: string;
-      initialValues?: Record<string, string>;
-      onCreate?: (obj: Live<any>) => void;
-    }
   | { type: 'columnSettings'; mode: ColumnSettingsMode }
   | { 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>;
   }
@@ -40,54 +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 openCreateRef = (
-    typename: string,
-    anchorCell: Element | null,
-    initialValues?: Record<string, string>,
-    onCreate?: (obj: Live<any>) => void,
-  ) => {
-    if (anchorCell) {
-      this._triggerRef.current = anchorCell as HTMLElement;
-      this._state.value = {
-        type: 'createRefPanel',
-        typename,
-        initialValues,
-        onCreate,
-      };
-    } else {
-      log.warn('anchor cell not found while creating new ref');
-    }
-  };
-
   public close = () => {
-    this._state.value = { type: 'closed' };
+    this._registry.set(this._state, { type: 'closed' });
   };
 }

package/src/model/selection-model.ts

@@ -2,87 +2,120 @@
 // Copyright 2024 DXOS.org
 //
 
-import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
+import { Atom, type Registry } from '@effect-atom/atom-react';
 
 import { Resource } from '@dxos/context';
 
 import { type TableRow } from './table-model';
-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 _registry: Registry.Registry;
+  private readonly _rows: Atom.Atom<T[]>;
+  private readonly _selection: Atom.Writable<Set<string>>;
+  private readonly _validSelectedIds: Atom.Atom<Set<string>>;
+  private readonly _hasSelection: Atom.Atom<boolean>;
+  private readonly _allSelected: Atom.Atom<boolean>;
+  private readonly _selectionMode: SelectionMode;
+  private readonly _onSelectionChanged?: () => void;
 
-  private readonly _validSelectedIds = computed<Set<string>>(() => {
-    const rows = this._rows.value;
-    if (!rows) {
-      return new Set<string>();
-    }
+  constructor(
+    registry: Registry.Registry,
+    rows: Atom.Atom<T[]>,
+    selectionMode: SelectionMode,
+    initialSelection: string[],
+    onSelectionChanged?: () => void,
+  ) {
+    super();
+    this._registry = registry;
+    this._rows = rows;
+    this._selectionMode = selectionMode;
+    this._onSelectionChanged = onSelectionChanged;
 
-    const validIds = new Set(rows.map((row) => row.id));
-    return new Set([...this._selection.value].filter((id) => validIds.has(id)));
-  });
+    this._selection = Atom.make<Set<string>>(new Set(initialSelection));
 
-  private readonly _hasSelection = computed<boolean>(() => this._validSelectedIds.value.size > 0);
+    this._validSelectedIds = Atom.make((get) => {
+      const rows = get(this._rows);
+      if (!rows) {
+        return new Set<string>();
+      }
 
-  private readonly _allSelected = computed<boolean>(() => {
-    const rows = this._rows.value;
-    if (rows.length === 0) {
-      return false;
-    }
+      const validIds = new Set(rows.map((row) => row.id));
+      const selection = get(this._selection);
+      return new Set([...selection].filter((id) => validIds.has(id)));
+    });
 
-    return rows.every((row) => this._selection.value.has(row.id));
-  });
+    this._hasSelection = Atom.make((get) => get(this._validSelectedIds).size > 0);
 
-  constructor(
-    private readonly _rows: ReadonlySignal<T[]>,
-    private readonly _selectionMode: SelectionMode,
-    private readonly _onSelectionChanged?: () => void,
-  ) {
-    super();
+    this._allSelected = Atom.make((get) => {
+      const rows = get(this._rows);
+      if (rows.length === 0) {
+        return false;
+      }
+
+      const selection = get(this._selection);
+      return rows.every((row) => selection.has(row.id));
+    });
   }
 
   protected override async _open(): Promise<void> {
-    const selectionWatcher = effect(() => {
-      touch(this._selection.value);
+    const selectionUnsubscribe = this._registry.subscribe(this._selection, () => {
       this._onSelectionChanged?.();
     });
-    this._ctx.onDispose(selectionWatcher);
+    this._ctx.onDispose(selectionUnsubscribe);
   }
 
   //
   // Getters
   //
 
-  public get selection(): ReadonlySignal<Set<string>> {
+  /** Get the selection atom for reactive access. */
+  public get selectionAtom(): Atom.Atom<Set<string>> {
     return this._selection;
   }
 
-  public get hasSelection(): ReadonlySignal<boolean> {
+  /** Get the current selection value. */
+  public get selection(): Set<string> {
+    return this._registry.get(this._selection);
+  }
+
+  /** Get the hasSelection atom for reactive access. */
+  public get hasSelectionAtom(): Atom.Atom<boolean> {
     return this._hasSelection;
   }
 
-  public get allRowsSeleted(): ReadonlySignal<boolean> {
+  /** Check if there is any selection. */
+  public get hasSelection(): boolean {
+    return this._registry.get(this._hasSelection);
+  }
+
+  /** Get the allRowsSelected atom for reactive access. */
+  public get allRowsSelectedAtom(): Atom.Atom<boolean> {
     return this._allSelected;
   }
 
+  /** Check if all rows are selected. */
+  public get allRowsSelected(): boolean {
+    return this._registry.get(this._allSelected);
+  }
+
   public get selectionMode(): SelectionMode {
     return this._selectionMode;
   }
 
   public getSelectedRows = (): T[] => {
-    const selectedIds = this._validSelectedIds.value;
-    return this._rows.value.filter((row) => selectedIds.has(row.id));
+    const selectedIds = this._registry.get(this._validSelectedIds);
+    return this._registry.get(this._rows).filter((row) => selectedIds.has(row.id));
   };
 
   public isRowIndexSelected = (rowIndex: number): boolean => {
-    const row = this._rows.value[rowIndex];
-    return this._selection.value.has(row.id);
+    const row = this._registry.get(this._rows)[rowIndex];
+    return this._registry.get(this._selection).has(row.id);
   };
 
   public isObjectSelected = (object: T): boolean => {
-    return this._selection.value.has(object.id);
+    return this._registry.get(this._selection).has(object.id);
   };
 
   //
@@ -90,8 +123,9 @@ export class SelectionModel<T extends TableRow> extends Resource {
   //
 
   public toggleSelectionForRowIndex = (rowIndex: number): void => {
-    const row = this._rows.value[rowIndex];
-    const newSelection = new Set(this._selection.value);
+    const row = this._registry.get(this._rows)[rowIndex];
+    const currentSelection = this._registry.get(this._selection);
+    const newSelection = new Set(currentSelection);
 
     if (newSelection.has(row.id)) {
       newSelection.delete(row.id);
@@ -102,17 +136,17 @@ export class SelectionModel<T extends TableRow> extends Resource {
       newSelection.add(row.id);
     }
 
-    this._selection.value = newSelection;
+    this._registry.set(this._selection, newSelection);
   };
 
   public setSelection = (mode: 'all' | 'none'): void => {
     switch (mode) {
       case 'all': {
-        this._selection.value = new Set(this._rows.value.map((row) => row.id));
+        this._registry.set(this._selection, new Set(this._registry.get(this._rows).map((row) => row.id)));
         break;
       }
       case 'none': {
-        this._selection.value = new Set();
+        this._registry.set(this._selection, new Set());
         break;
       }
     }