@dxos/react-ui-table 0.8.2-staging.7ac8446 → 0.8.2

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -7,12 +7,12 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { ImmutableSchema, type EchoSchema } from '@dxos/echo-schema';
+import { type EchoSchema, isMutable } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Filter, useQuery, create } from '@dxos/react-client/echo';
+import { Filter, useQuery, live } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { defaultSizeRow, Grid, type GridEditing } from '@dxos/react-ui-grid';
+import { defaultRowSize, Grid, type GridEditing } from '@dxos/react-ui-grid';
 import { ViewProjection, ViewType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -31,7 +31,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
   const { space } = useClientProvider();
   invariant(space);
 
-  const tables = useQuery(space, Filter.schema(TableType));
+  const tables = useQuery(space, Filter.type(TableType));
   const [table, setTable] = useState<TableType>();
   const [schema, setSchema] = useState<EchoSchema>();
   useEffect(() => {
@@ -53,15 +53,16 @@ const DefaultStory = ({ editing }: StoryProps) => {
     () => ({
       selection: { enabled: true, mode: 'multiple' },
       dataEditable: true,
-      schemaEditable: !(schema instanceof ImmutableSchema),
+      schemaEditable: schema && isMutable(schema),
     }),
-    [],
+    [schema],
   );
 
   const model = useTableModel({ table, projection, features });
 
   const handleQuery: TableCellEditorProps['onQuery'] = async ({ field }) => {
-    const { objects } = await space.db.query(schema).run();
+    // TODO(dmaretskyi): If no schema query nothing
+    const { objects } = await space.db.query(schema ? Filter.type(schema) : Filter.everything()).run();
     return objects.map((obj) => {
       const label = obj[field.referencePath ?? 'id'];
       return {
@@ -76,7 +77,7 @@ const DefaultStory = ({ editing }: StoryProps) => {
   }
 
   return (
-    <div className='flex w-[300px] border border-separator' style={{ height: defaultSizeRow }}>
+    <div className='flex w-[300px] border border-separator' style={{ height: defaultRowSize }}>
       <Grid.Root id='test' editing={editing}>
         <TableCellEditor model={model} onQuery={handleQuery} />
       </Grid.Root>
@@ -95,11 +96,11 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(create(TableType, {}));
+        const table = space.db.add(live(TableType, {}));
         const schema = await initializeTable({ client, space, table });
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            create(schema, {
+            live(schema, {
               name: faker.person.fullName(),
             }),
           );
@@ -107,7 +108,7 @@ const meta: Meta<StoryProps> = {
       },
     }),
     withTheme,
-    withLayout({ tooltips: true }),
+    withLayout(),
   ],
 };
 
@@ -120,6 +121,7 @@ export const Default: Story = {
     editing: {
       index: 'grid,0,3',
       initialContent: 'Test',
+      cellElement: null,
     },
   },
 };

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -1,11 +1,12 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 import { type Completion } from '@codemirror/autocomplete';
+import { type Schema } from 'effect/Schema';
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import { FormatEnum } from '@dxos/echo-schema';
+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';
@@ -26,6 +27,7 @@ import {
 import { tagPickerExtension, createLinks } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
+import { FormCellEditor } from './FormCellEditor';
 import { completion } from './extension';
 import { type TableModel, type ModalController } from '../../model';
 
@@ -43,11 +45,52 @@ 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[]>;
 };
 
+export const TableValueEditor = ({
+  model,
+  modals,
+  schema,
+  onEnter,
+  onFocus,
+  onQuery,
+  __gridScope,
+}: GridScopedProps<TableCellEditorProps>) => {
+  const { editing } = useGridContext('TableValueEditor', __gridScope);
+
+  const fieldProjection = useMemo<FieldProjection | undefined>(() => {
+    if (!model || !editing) {
+      return;
+    }
+
+    const { col } = parseCellIndex(editing.index);
+    const field = model.projection.view.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} />;
+  }
+
+  // For all other types, use the existing cell editor
+  return (
+    <TableCellEditor
+      model={model}
+      modals={modals}
+      onEnter={onEnter}
+      onFocus={onFocus}
+      onQuery={onQuery}
+      __gridScope={__gridScope}
+    />
+  );
+};
+
 export const TableCellEditor = ({
   model,
   modals,
@@ -261,11 +304,9 @@ export const TableCellEditor = ({
           }
         }
 
-        // Return empty string if no value
         return '';
       }
 
-      // Default behavior for other formats
       const value = model.getCellData(cell);
       return value !== undefined ? String(value) : '';
     }

package/src/components/TableToolbar/TableToolbar.tsx

@@ -2,19 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import { Rx } from '@effect-rx/rx-react';
+import React, { useMemo } from 'react';
 
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
+  type ActionGraphEdges,
+  type ActionGraphNodes,
+  type ActionGraphProps,
   createGapSeparator,
   createMenuAction,
   type MenuAction,
-  type MenuActionHandler,
   MenuProvider,
   ToolbarMenu,
   useMenuActions,
 } from '@dxos/react-ui-menu';
+import { rxFromSignal } from '@dxos/react-ui-menu';
 
 import { translationKey } from '../../translations';
 
@@ -27,45 +31,71 @@ export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
 type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
 export type TableToolbarProps = ThemedClassName<
-  TableToolbarState & { onAction?: MenuActionHandler<TableToolbarAction>; attendableId?: string }
+  TableToolbarState & {
+    onAdd: () => void;
+    onSave: () => void;
+    attendableId?: string;
+    customActions?: Rx.Rx<ActionGraphProps>;
+  }
 >;
 
-const createTableToolbarActions = (state: TableToolbarState) => {
-  const add = createMenuAction<TableToolbarActionProperties>('add-row', {
-    type: 'add-row',
-    icon: 'ph--plus--regular',
-    label: ['add row', { ns: translationKey }],
-    testId: 'table.toolbar.add-row',
+const createTableToolbarActions = ({
+  state,
+  onAdd,
+  onSave,
+  customActions,
+}: {
+  state: TableToolbarState;
+  onAdd: () => void;
+  onSave: () => void;
+  customActions?: Rx.Rx<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)),
+    });
+    const gap = createGapSeparator();
+    const nodes: ActionGraphNodes = [add, save, ...gap.nodes];
+    const edges: ActionGraphEdges = nodes.map(({ id: target }) => ({ source: 'root', target }));
+    if (customActions) {
+      const custom = get(customActions);
+      nodes.push(...custom.nodes);
+      edges.push(...custom.edges);
+    }
+    return {
+      nodes,
+      edges,
+    };
   });
-  const save = createMenuAction<TableToolbarActionProperties>('save-view', {
-    type: 'save-view',
-    icon: 'ph--floppy-disk--regular',
-    label: ['save view label', { ns: translationKey }],
-    testId: 'table.toolbar.save-view',
-    iconOnly: false,
-    hidden: !state.viewDirty,
-  });
-  const gap = createGapSeparator();
-  const comment = createMenuAction('comment', {
-    type: 'comment',
-    icon: 'ph--chat-text--regular',
-    label: ['create comment', { ns: translationKey }],
-    testId: 'table.toolbar.comment',
-  });
-  const nodes = [add, save, ...gap.nodes, comment];
-  return {
-    nodes,
-    edges: nodes.map(({ id: target }) => ({ source: 'root', target })),
-  };
-};
 
-export const TableToolbar = ({ classNames, viewDirty, attendableId, onAction }: TableToolbarProps) => {
-  const state = useMemo(() => create<TableToolbarState>({ viewDirty }), []);
-  const actionsCreator = useCallback(() => createTableToolbarActions(state), [state]);
+export const TableToolbar = ({
+  classNames,
+  viewDirty,
+  attendableId,
+  onAdd,
+  onSave,
+  customActions,
+}: TableToolbarProps) => {
+  const state = useMemo(() => live<TableToolbarState>({ viewDirty }), []);
+  const actionsCreator = useMemo(
+    () => createTableToolbarActions({ state, onAdd, onSave, customActions }),
+    [state, onAdd, onSave, customActions],
+  );
   const menu = useMenuActions(actionsCreator);
 
   return (
-    <MenuProvider {...menu} attendableId={attendableId} onAction={onAction as MenuActionHandler}>
+    <MenuProvider {...menu} attendableId={attendableId}>
       <ToolbarMenu classNames={classNames} />
     </MenuProvider>
   );

package/src/components/testing.ts

@@ -2,25 +2,26 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { setValue, toJsonSchema, S, TypeEnum, TypedObject, FormatEnum } from '@dxos/echo-schema';
+import { setValue, toJsonSchema, TypeEnum, TypedObject, FormatEnum, ObjectId } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
-import { create, makeRef } from '@dxos/react-client/echo';
+import { live, makeRef } from '@dxos/react-client/echo';
 import { createView, type ViewProjection } from '@dxos/schema';
 
 import { TableType } from '../types';
 
 export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  id: S.String,
-  name: S.optional(S.String),
-  age: S.optional(S.Number),
-  active: S.optional(S.Boolean),
-  netWorth: S.optional(S.Number),
+  id: ObjectId,
+  name: Schema.optional(Schema.String),
+  age: Schema.optional(Schema.Number),
+  active: Schema.optional(Schema.Boolean),
+  netWorth: Schema.optional(Schema.Number),
 });
 
 export const createTable = (schema = TestSchema) => {
-  return create(TableType, {
+  return live(TableType, {
     view: makeRef(
       createView({
         name: 'Test',
@@ -32,7 +33,7 @@ export const createTable = (schema = TestSchema) => {
 };
 
 export const createItems = (n: number) => {
-  const { data } = create({
+  const { data } = live({
     data: Array.from({ length: n }, () => ({
       name: faker.person.fullName(),
       age: faker.number.int({ min: 20, max: 70 }),

package/src/hooks/useTableModel.ts

@@ -5,7 +5,7 @@
 import { effect } from '@preact/signals-core';
 import { useEffect, useState } from 'react';
 
-import { fullyQualifiedId, getSpace, type ReactiveObject } from '@dxos/react-client/echo';
+import { fullyQualifiedId, getSpace, type Live } from '@dxos/react-client/echo';
 import { useSelectionActions } from '@dxos/react-ui-attention';
 import { type ViewProjection } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
@@ -16,7 +16,7 @@ import { type TableType } from '../types';
 export type UseTableModelParams<T extends TableRow = TableRow> = {
   table?: TableType;
   projection?: ViewProjection;
-  rows?: ReactiveObject<T>[];
+  rows?: Live<T>[];
   rowActions?: TableRowAction[];
   onSelectionChanged?: (selection: string[]) => void;
   onRowAction?: (actionId: string, data: T) => void;
@@ -70,7 +70,9 @@ export const useTableModel = <T extends TableRow = TableRow>({
     }
   }, [model, rows]);
 
-  const { select, clear } = useSelectionActions([table?.id, table?.view?.target?.query.typename].filter(isNonNullable));
+  const { multiSelect, clear } = useSelectionActions(
+    [table?.id, table?.view?.target?.query.typename].filter(isNonNullable),
+  );
 
   useEffect(() => {
     if (!model) {
@@ -79,7 +81,7 @@ export const useTableModel = <T extends TableRow = TableRow>({
 
     const unsubscribe = effect(() => {
       const selectedItems = [...model.selection.selection.value];
-      select(selectedItems);
+      multiSelect(selectedItems);
       onSelectionChanged?.(selectedItems);
     });
 

package/src/model/modal-controller.ts

@@ -5,7 +5,7 @@
 import { signal } from '@preact/signals-core';
 import { type RefObject, type MutableRefObject } from 'react';
 
-import { type ReactiveObject } from '@dxos/live-object';
+import { type Live } from '@dxos/live-object';
 import { log } from '@dxos/log';
 
 export type ColumnSettingsMode = { type: 'create' } | { type: 'edit'; fieldId: string };
@@ -18,7 +18,7 @@ export type ModalState =
       type: 'createRefPanel';
       typename: string;
       initialValues?: Record<string, string>;
-      onCreate?: (obj: ReactiveObject<any>) => void;
+      onCreate?: (obj: Live<any>) => void;
     }
   | { type: 'columnSettings'; mode: ColumnSettingsMode }
   | { type: 'closed' };
@@ -72,7 +72,7 @@ export class ModalController {
     typename: string,
     anchorCell: Element | null,
     initialValues?: Record<string, string>,
-    onCreate?: (obj: ReactiveObject<any>) => void,
+    onCreate?: (obj: Live<any>) => void,
   ) => {
     if (anchorCell) {
       this._triggerRef.current = anchorCell as HTMLElement;

package/src/model/selection-model.ts

@@ -43,7 +43,7 @@ export class SelectionModel<T extends TableRow> extends Resource {
     super();
   }
 
-  protected override async _open() {
+  protected override async _open(): Promise<void> {
     const selectionWatcher = effect(() => {
       touch(this._selection.value);
       this._onSelectionChanged?.();

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

@@ -3,13 +3,14 @@
 //
 
 import { computed } from '@preact/signals-core';
+import { Schema } from 'effect';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { S, TypedObject } from '@dxos/echo-schema';
+import { TypedObject } from '@dxos/echo-schema';
 import { updateCounter } from '@dxos/echo-schema/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
 import { createEchoSchema } from '@dxos/live-object/testing';
-import { create, makeRef } from '@dxos/react-client/echo';
+import { live, makeRef } from '@dxos/react-client/echo';
 import { createView, ViewProjection } from '@dxos/schema';
 
 import { TableModel, type TableModelProps } from './table-model';
@@ -69,7 +70,7 @@ describe('TableModel', () => {
 
   describe('reactivity', () => {
     it('pure signals should nest', () => {
-      const signal$ = create({ arr: [{ thingInside: 1 }, { thingInside: 2 }] });
+      const signal$ = live({ arr: [{ thingInside: 1 }, { thingInside: 2 }] });
 
       const computed$ = computed(() => {
         return signal$.arr.map((row) =>
@@ -99,14 +100,14 @@ describe('TableModel', () => {
 });
 
 class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  title: S.String,
-  completed: S.Boolean,
+  title: Schema.String,
+  completed: Schema.Boolean,
 }) {}
 
 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 = create(TableType, { view: makeRef(view) });
+  const table = live(TableType, { view: makeRef(view) });
   return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
 };

package/src/model/table-model.ts

@@ -8,7 +8,7 @@ import { type Space } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
 import { type FieldSortType, FormatEnum, getValue, setValue, type JsonProp } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { isReactiveObject, makeRef } from '@dxos/live-object';
+import { isLiveObject, makeRef } from '@dxos/live-object';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
@@ -21,6 +21,7 @@ import { type ViewType, type ViewProjection } from '@dxos/schema';
 import { type SelectionMode, SelectionModel } from './selection-model';
 import { TableSorting } from './table-sorting';
 import { touch } from '../util';
+import { extractTagIds } from '../util/tag';
 
 // TODO(burdon): Use schema types.
 export type TableRow = Record<JsonProp, any> & { id: string };
@@ -201,7 +202,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
   // Initialisation
   //
 
-  protected override async _open() {
+  protected override async _open(): Promise<void> {
     this.initializeColumnMeta();
     this.initializeEffects();
     this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? 'multiple', () =>
@@ -342,12 +343,28 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       case FormatEnum.Ref: {
         // TODO(ZaymonFC): This get's called an additional time by the cell editor onBlur, but with the cell editors
         //   plain string value. Maybe onBlur should be called with the actual value?
-        if (isReactiveObject(value)) {
+        if (isLiveObject(value)) {
           setValue(this._rows.value[rowIdx], field.path, makeRef(value));
         }
         break;
       }
 
+      case FormatEnum.SingleSelect: {
+        const ids = extractTagIds(value);
+        if (ids && ids.length > 0) {
+          setValue(this._rows.value[rowIdx], field.path, ids[0]);
+        }
+        break;
+      }
+
+      case FormatEnum.MultiSelect: {
+        const ids = extractTagIds(value);
+        if (ids) {
+          setValue(this._rows.value[rowIdx], field.path, ids);
+        }
+        break;
+      }
+
       default: {
         setValue(
           this._rows.value[rowIdx],

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

@@ -2,10 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import { describe, expect, it, beforeEach } from 'vitest';
 
-import { S, TypedObject } from '@dxos/echo-schema';
-import { create, makeRef } from '@dxos/live-object';
+import { TypedObject } from '@dxos/echo-schema';
+import { live, makeRef } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView, ViewProjection } from '@dxos/schema';
 
@@ -22,7 +23,7 @@ describe('TablePresentation', () => {
 
     beforeEach(async () => {
       updateCount = 0;
-      ({ data } = create({
+      ({ data } = live({
         data: [
           { col1: 'A', col2: 1, col3: true },
           { col1: 'B', col2: 2, col3: false },
@@ -89,14 +90,14 @@ describe('TablePresentation', () => {
 });
 
 class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  title: S.String,
-  completed: S.Boolean,
+  title: Schema.String,
+  completed: Schema.Boolean,
 }) {}
 
 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 = create(TableType, { view: makeRef(view) });
+  const table = live(TableType, { view: makeRef(view) });
   return new TableModel({ id: table.id, view, projection, ...props });
 };