@dxos/react-ui-table 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/components/Table/relations.stories.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useEffect, useMemo } from 'react';
+
+import { AST, type BaseObject, ImmutableSchema, type BaseSchema, type HasId } from '@dxos/echo-schema';
+import { getAnnotation } from '@dxos/effect';
+import { faker } from '@dxos/random';
+import { create, makeRef, type ReactiveObject } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { createView, ViewProjection, ViewType } from '@dxos/schema';
+import { createGenerator, Testing, type ValueGenerator } from '@dxos/schema/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { Table } from './Table';
+import { useTableModel } from '../../hooks';
+import { TablePresentation } from '../../model';
+import translations from '../../translations';
+import { TableType } from '../../types';
+
+faker.seed(1);
+const generator: ValueGenerator = faker as any;
+
+// TODO(burdon): Many-to-many relations.
+// TODO(burdon): Mutable and immutable views.
+// TODO(burdon): Reconcile schemas types and utils (see API PR).
+// TODO(burdon): Base type for T (with id); see ECHO API PR?
+const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count: number) => {
+  const table = useMemo(() => {
+    // const { typename } = pipe(schema.ast, AST.getAnnotation<TypeAnnotation>(TypeAnnotationId), Option.getOrThrow);
+    const typename = schema.typename;
+    const name = getAnnotation<string>(AST.TitleAnnotationId)(schema.ast) ?? typename;
+    const view = createView({ name, typename, jsonSchema: schema.jsonSchema });
+    return create(TableType, { view: makeRef(view) });
+  }, [schema]);
+
+  const projection = useMemo(() => {
+    if (!table.view?.target) {
+      return undefined;
+    }
+
+    // TODO(burdon): Just pass in view? Reuse same jsonSchema instance? View determines if mutable, etc.
+    return new ViewProjection(schema.jsonSchema, table.view.target);
+  }, [schema, table]);
+
+  const model = useTableModel({ table, projection, rows: [] });
+  useEffect(() => {
+    if (!model) {
+      return;
+    }
+
+    const objectGenerator = createGenerator(generator, schema, { optional: true });
+    const objects: ReactiveObject<T>[] = Array.from({ length: count }).map(() => objectGenerator.createObject());
+    model.setRows(objects);
+  }, [model]);
+
+  const presentation = useMemo(() => {
+    if (!model) {
+      return;
+    }
+
+    return new TablePresentation(model);
+  }, [model]);
+
+  return { model, presentation };
+};
+
+const DefaultStory = () => {
+  // TODO(burdon): Remove need for ImmutableSchema wrapper at API-level.
+  const orgSchema = useMemo(() => new ImmutableSchema(Testing.Org), []);
+  const { model: orgModel, presentation: orgPresentation } = useTestModel<Testing.Org>(orgSchema, 50);
+
+  // TODO(burdon): Generate links with references.
+  const contactSchema = useMemo(() => new ImmutableSchema(Testing.Contact), []);
+  const { model: contactModel, presentation: contactPresentation } = useTestModel<Testing.Contact>(contactSchema, 50);
+
+  // TODO(burdon): Scrolling isn't working.
+  return (
+    <div className='grow grid grid-cols-2 divide-x divide-separator'>
+      <Table.Root>
+        <Table.Main model={orgModel} presentation={orgPresentation} />
+      </Table.Root>
+      <Table.Root>
+        <Table.Main model={contactModel} presentation={contactPresentation} />
+      </Table.Root>
+    </div>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-table/relations',
+  render: DefaultStory,
+  parameters: { translations },
+  decorators: [
+    withClientProvider({
+      types: [TableType, ViewType, Testing.Org, Testing.Contact],
+      createIdentity: true,
+      createSpace: true,
+    }),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DefaultStory>;
+
+export const Default: Story = {};

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { type EchoSchema } from '@dxos/echo-schema';
+import { ImmutableSchema, type EchoSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { Filter, useQuery, create } from '@dxos/react-client/echo';
@@ -18,6 +18,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { TableCellEditor, type TableCellEditorProps } from './TableCellEditor';
 import { useTableModel } from '../../hooks';
+import { type TableFeatures } from '../../model';
 import translations from '../../translations';
 import { TableType } from '../../types';
 import { initializeTable } from '../../util';
@@ -44,11 +45,20 @@ const DefaultStory = ({ editing }: StoryProps) => {
 
   const projection = useMemo(() => {
     if (schema && table?.view) {
-      return new ViewProjection(schema, table.view.target!);
+      return new ViewProjection(schema.jsonSchema, table.view.target!);
     }
   }, [schema, table?.view]);
 
-  const model = useTableModel({ table, projection });
+  const features: Partial<TableFeatures> = useMemo(
+    () => ({
+      selection: { enabled: true, mode: 'multiple' },
+      dataEditable: true,
+      schemaEditable: !(schema instanceof ImmutableSchema),
+    }),
+    [],
+  );
+
+  const model = useTableModel({ table, projection, features });
 
   const handleQuery: TableCellEditorProps['onQuery'] = async ({ field }) => {
     const { objects } = await space.db.query(schema).run();
@@ -84,9 +94,9 @@ const meta: Meta<StoryProps> = {
       types: [TableType, ViewType],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ space }) => {
+      onSpaceCreated: async ({ client, space }) => {
         const table = space.db.add(create(TableType, {}));
-        const schema = await initializeTable({ space, table });
+        const schema = await initializeTable({ client, space, table });
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
             create(schema, {

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -8,6 +8,8 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { FormatEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { type DxGrid } from '@dxos/lit-grid';
+import { useThemeContext } from '@dxos/react-ui';
+import { createMarkdownExtensions } from '@dxos/react-ui-editor';
 import {
   cellQuery,
   editorKeys,
@@ -21,6 +23,7 @@ import {
   type GridCellEditorProps,
   type GridScopedProps,
 } from '@dxos/react-ui-grid';
+import { tagPickerExtension, createLinks } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
 import { completion } from './extension';
@@ -55,6 +58,7 @@ export const TableCellEditor = ({
 }: GridScopedProps<TableCellEditorProps>) => {
   const { id: gridId, editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
+  const { themeMode } = useThemeContext();
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -80,7 +84,7 @@ export const TableCellEditor = ({
       onFocus?.();
       setEditing(null);
     },
-    [model, editing],
+    [model, editing, onEnter, onFocus, setEditing],
   );
 
   const handleBlur = useCallback<EditorBlurHandler>(
@@ -113,7 +117,7 @@ export const TableCellEditor = ({
         onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
       }
     },
-    [model, editing, onFocus, onEnter, fieldProjection, determineNavigationAxis, determineNavigationDelta],
+    [model, editing, onFocus, onEnter, fieldProjection],
   );
 
   const extension = useMemo(() => {
@@ -128,6 +132,50 @@ export const TableCellEditor = ({
       }),
     ];
 
+    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(
+        tagPickerExtension({
+          mode,
+          inGrid: true,
+          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') {
+                handleEnter(ids[0]);
+              } else {
+                handleEnter(ids);
+              }
+            }
+          },
+        }),
+      );
+    }
+
     if (onQuery) {
       switch (fieldProjection.props.format) {
         case FormatEnum.Ref: {
@@ -164,11 +212,61 @@ export const TableCellEditor = ({
     }
 
     return extension;
-  }, [model, modals, editing, fieldProjection, handleClose]);
+  }, [model, modals, editing, fieldProjection, handleClose, themeMode]);
 
   const getCellContent = useCallback<GridCellEditorProps['getCellContent']>(() => {
     if (model && editing) {
-      const value = model.getCellData(parseCellIndex(editing.index));
+      const cell = parseCellIndex(editing.index);
+      const { col } = cell;
+      const field = model.projection.view.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 && Array.isArray(value)) {
+            const tagItems = value
+              .map((id) => {
+                const option = options.find((o) => o.id === id);
+                if (option) {
+                  return {
+                    id,
+                    label: option.title,
+                    hue: option.color as any,
+                  };
+                }
+                return undefined;
+              })
+              .filter((item): 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 empty string if no value
+        return '';
+      }
+
+      // Default behavior for other formats
+      const value = model.getCellData(cell);
       return value !== undefined ? String(value) : '';
     }
   }, [model, editing]);

package/src/components/testing.ts

@@ -8,7 +8,6 @@ import { setValue, toJsonSchema, S, TypeEnum, TypedObject, FormatEnum } from '@d
 import { faker } from '@dxos/random';
 import { create, makeRef } from '@dxos/react-client/echo';
 import { createView, type ViewProjection } from '@dxos/schema';
-import {} from '@dxos/schema';
 
 import { TableType } from '../types';
 

package/src/hooks/useTableModel.ts

@@ -5,24 +5,34 @@
 import { effect } from '@preact/signals-core';
 import { useEffect, useState } from 'react';
 
-import { type ReactiveObject } from '@dxos/react-client/echo';
+import { fullyQualifiedId, getSpace, type ReactiveObject } from '@dxos/react-client/echo';
 import { useSelectionActions } from '@dxos/react-ui-attention';
 import { type ViewProjection } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { type BaseTableRow, TableModel, type TableModelProps } from '../model';
+import { type TableRow, TableModel, type TableModelProps, type TableRowAction } from '../model';
 import { type TableType } from '../types';
 
-export type UseTableModelParams<T extends BaseTableRow = { id: string }> = {
+export type UseTableModelParams<T extends TableRow = TableRow> = {
   table?: TableType;
   projection?: ViewProjection;
-  objects?: ReactiveObject<T>[];
-} & Pick<TableModelProps<T>, 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChanged'>;
+  rows?: ReactiveObject<T>[];
+  rowActions?: TableRowAction[];
+  onSelectionChanged?: (selection: string[]) => void;
+  onRowAction?: (actionId: string, data: T) => void;
+} & Pick<
+  TableModelProps<T>,
+  'features' | 'onInsertRow' | 'onDeleteRows' | 'onDeleteColumn' | 'onCellUpdate' | 'onRowOrderChange'
+>;
 
-export const useTableModel = <T extends BaseTableRow = { id: string }>({
-  objects,
+export const useTableModel = <T extends TableRow = TableRow>({
   table,
   projection,
+  rows,
+  rowActions,
+  features,
+  onSelectionChanged,
+  onRowAction,
   ...props
 }: UseTableModelParams<T>): TableModel<T> | undefined => {
   const [model, setModel] = useState<TableModel<T>>();
@@ -33,7 +43,16 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
 
     let model: TableModel<T> | undefined;
     const t = setTimeout(async () => {
-      model = new TableModel<T>({ table, projection, ...props });
+      model = new TableModel<T>({
+        id: fullyQualifiedId(table),
+        space: getSpace(table),
+        view: table.view?.target,
+        projection,
+        features,
+        rowActions,
+        onRowAction,
+        ...props,
+      });
       await model.open();
       setModel(model);
     });
@@ -42,14 +61,14 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
       clearTimeout(t);
       void model?.close();
     };
-  }, [table, projection]); // TODO(burdon): Trigger if callbacks change?
+  }, [table, projection, table?.view?.target, features, rowActions]); // TODO(burdon): Trigger if callbacks change?
 
   // Update data.
   useEffect(() => {
-    if (objects) {
-      model?.setRows(objects);
+    if (rows) {
+      model?.setRows(rows);
     }
-  }, [model, objects]);
+  }, [model, rows]);
 
   const { select, clear } = useSelectionActions([table?.id, table?.view?.target?.query.typename].filter(isNonNullable));
 
@@ -59,7 +78,9 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
     }
 
     const unsubscribe = effect(() => {
-      select([...model.selection.selection.value]);
+      const selectedItems = [...model.selection.selection.value];
+      select(selectedItems);
+      onSelectionChanged?.(selectedItems);
     });
 
     // Maybe clear the selection here?
@@ -67,7 +88,7 @@ export const useTableModel = <T extends BaseTableRow = { id: string }>({
       clear();
       unsubscribe();
     };
-  }, [model]);
+  }, [model, onSelectionChanged]);
 
   return model;
 };

package/src/model/index.ts

@@ -5,3 +5,4 @@
 export * from './table-model';
 export * from './modal-controller';
 export * from './table-presentation';
+export type { SelectionMode } from './selection-model';

package/src/model/selection-model.ts

@@ -6,10 +6,12 @@ import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-c
 
 import { Resource } from '@dxos/context';
 
-import { type BaseTableRow } from './table-model';
+import { type TableRow } from './table-model';
 import { touch } from '../util';
 
-export class SelectionModel<T extends BaseTableRow> extends Resource {
+export type SelectionMode = 'single' | 'multiple';
+
+export class SelectionModel<T extends TableRow> extends Resource {
   private readonly _selection = signal<Set<string>>(new Set());
 
   private readonly _validSelectedIds = computed<Set<string>>(() => {
@@ -35,6 +37,7 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
 
   constructor(
     private readonly _rows: ReadonlySignal<T[]>,
+    private readonly _selectionMode: SelectionMode,
     private readonly _onSelectionChanged?: () => void,
   ) {
     super();
@@ -64,6 +67,10 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
     return 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));
@@ -89,6 +96,9 @@ export class SelectionModel<T extends BaseTableRow> extends Resource {
     if (newSelection.has(row.id)) {
       newSelection.delete(row.id);
     } else {
+      if (this._selectionMode === 'single') {
+        newSelection.clear();
+      }
       newSelection.add(row.id);
     }
 

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

@@ -106,7 +106,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, view);
+  const projection = new ViewProjection(schema.jsonSchema, view);
   const table = create(TableType, { view: makeRef(view) });
-  return new TableModel({ table, projection, ...props });
+  return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
 };