@dxos/react-ui-table 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/src/components/Table/CreateRefPanel.tsx

@@ -71,9 +71,11 @@ export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<C
       <Popover.VirtualTrigger virtualRef={modals.trigger} />
       <Popover.Portal>
         <Popover.Content classNames='md:is-64' data-grid={gridId}>
-          {state?.type === 'createRefPanel' && schema && (
-            <Form schema={schema} values={state.initialValues ?? {}} onSave={handleSave} onCancel={handleCancel} />
-          )}
+          <Popover.Viewport>
+            {state?.type === 'createRefPanel' && schema && (
+              <Form schema={schema} values={state.initialValues ?? {}} onSave={handleSave} onCancel={handleCancel} />
+            )}
+          </Popover.Viewport>
           <Popover.Arrow />
         </Popover.Content>
       </Popover.Portal>

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

@@ -7,10 +7,11 @@ import '@dxos-theme';
 import { type StoryObj, type Meta } from '@storybook/react';
 import React, { useMemo, useState } from 'react';
 
+import { Obj } from '@dxos/echo';
 import { FormatEnum, type JsonSchemaType } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { Filter, useQuery, useSchema, live } from '@dxos/react-client/echo';
+import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { type SchemaPropertyDefinition } from '@dxos/schema';
 import { Testing } from '@dxos/schema/testing';
@@ -143,7 +144,7 @@ export const WithEchoSchema: StoryObj = {
       onSpaceCreated: async ({ space }) => {
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            live(Testing.Contact, {
+            Obj.make(Testing.Contact, {
               name: faker.person.fullName(),
               email: faker.internet.email(),
             }),

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

@@ -8,14 +8,8 @@ import { type StoryObj, type Meta } from '@storybook/react';
 import { Schema } from 'effect';
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import {
-  assertEchoSchema,
-  FormatEnum,
-  isMutable,
-  toJsonSchema,
-  EchoObject,
-  GeneratorAnnotation,
-} from '@dxos/echo-schema';
+import { Obj, Type } from '@dxos/echo';
+import { FormatEnum, isMutable, toJsonSchema, EchoObject, GeneratorAnnotation } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
@@ -131,6 +125,7 @@ const useTestTableModel = () => {
     model,
     presentation,
     space,
+    client,
     handleInsertRow,
     handleSaveView,
     handleDeleteRows,
@@ -144,8 +139,9 @@ const StoryViewEditor = () => {
   const handleTypenameChanged = useCallback(
     (typename: string) => {
       invariant(schema);
+      invariant(Type.isMutable(schema));
+      schema.updateTypename(typename);
       invariant(table?.view?.target);
-      assertEchoSchema(schema).updateTypename(typename);
       table.view.target.query.typename = typename;
     },
     [schema, table?.view?.target],
@@ -171,7 +167,7 @@ const StoryViewEditor = () => {
 //
 
 const DefaultStory = () => {
-  const { schema, table, tableRef, model, presentation, handleInsertRow, handleSaveView } = useTestTableModel();
+  const { schema, table, tableRef, model, presentation, client, handleInsertRow, handleSaveView } = useTestTableModel();
 
   if (!schema || !table) {
     return <div />;
@@ -180,9 +176,16 @@ const DefaultStory = () => {
   return (
     <div className='grow grid grid-cols-[1fr_350px]'>
       <div className='grid grid-rows-[min-content_1fr] min-bs-0 overflow-hidden'>
-        <TableToolbar classNames='border-be border-separator' onAdd={handleInsertRow} onSave={handleSaveView} />
+        <TableToolbar classNames='border-be border-subduedSeparator' onAdd={handleInsertRow} onSave={handleSaveView} />
         <Table.Root>
-          <Table.Main ref={tableRef} model={model} presentation={presentation} schema={schema} ignoreAttention />
+          <Table.Main
+            ref={tableRef}
+            model={model}
+            presentation={presentation}
+            schema={schema}
+            client={client}
+            ignoreAttention
+          />
         </Table.Root>
       </div>
       <div className='flex flex-col h-full border-l border-separator overflow-y-auto'>
@@ -213,7 +216,7 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(Obj.make(TableType, {}));
         const schema = await initializeTable({ client, space, table, initialRow: false });
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
@@ -242,7 +245,7 @@ export const StaticSchema: StoryObj = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(Obj.make(TableType, {}));
         await initializeTable({ client, space, table, typename: Testing.Organization.typename });
 
         const factory = createObjectFactory(space.db, faker as any);
@@ -284,7 +287,7 @@ export const ArrayOfObjects: StoryObj = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(Obj.make(TableType, {}));
         await initializeTable({ client, space, table, typename: ContactWithArrayOfEmails.typename });
 
         const factory = createObjectFactory(space.db, faker as any);
@@ -337,7 +340,7 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(Obj.make(TableType, {}));
         await initializeTable({ client, space, table, initialRow: false, typename });
 
         // Populate.

package/src/components/Table/Table.tsx

@@ -15,6 +15,7 @@ import React, {
   useEffect,
 } from 'react';
 
+import { type Client } from '@dxos/client';
 import { getValue } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { Filter } from '@dxos/react-client/echo';
@@ -77,13 +78,14 @@ export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
   schema?: Schema.AnyNoContext;
+  client?: Client;
   // TODO(burdon): Rename since attention isn't a useful concept here? Standardize across other components. Pass property into useAttention.
   ignoreAttention?: boolean;
   onRowClick?: (row: any) => void;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention, schema, onRowClick }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
     const { hasAttention } = useAttention(model?.id ?? 'table');
     const { t } = useTranslation(translationKey);
@@ -307,7 +309,15 @@ const TableMain = forwardRef<TableController, TableMainProps>(
         if (model && props.referenceSchema && field.referencePath) {
           const space = model.space;
           invariant(space);
-          const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
+
+          let schema;
+          if (client) {
+            schema = client.graph.schemaRegistry.getSchema(props.referenceSchema);
+          }
+          if (!schema) {
+            schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
+          }
+
           if (schema) {
             const { objects } = await space.db.query(Filter.type(schema)).run();
             const options = objects
@@ -336,7 +346,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
         return [];
       },
-      [model, t],
+      [model, client, t],
     );
 
     if (!model || !modals) {

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

@@ -5,15 +5,16 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
-import { type Schema } from 'effect';
 import { SchemaAST } from 'effect';
 import React, { useEffect, useMemo } from 'react';
 
-import { type BaseObject, getSchemaTypename, type HasId, toJsonSchema } from '@dxos/echo-schema';
+import { Obj, type Type } from '@dxos/echo';
+import { getSchemaTypename, toJsonSchema } from '@dxos/echo-schema';
 import { getAnnotation } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { live, makeRef } from '@dxos/react-client/echo';
+import { useClient } from '@dxos/react-client';
+import { makeRef } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { DataType, createView, ViewProjection, ViewType } from '@dxos/schema';
 import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
@@ -32,26 +33,29 @@ const generator: ValueGenerator = faker as any;
 // 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: Schema.Schema<T>, count: number) => {
+const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
   const { space } = useClientProvider();
 
   const jsonSchema = useMemo(() => toJsonSchema(schema), [schema]);
   const table = useMemo(() => {
+    if (!space) {
+      return undefined;
+    }
     const typename = getSchemaTypename(schema);
     invariant(typename);
     const name = getAnnotation<string>(SchemaAST.TitleAnnotationId)(schema.ast) ?? typename;
     const view = createView({ name, typename, jsonSchema });
-    return live(TableType, { view: makeRef(view) });
-  }, [schema]);
+    return space.db.add(Obj.make(TableType, { view: makeRef(view) }));
+  }, [schema, space, jsonSchema]);
 
   const projection = useMemo(() => {
-    if (!table.view?.target) {
+    if (!table?.view?.target) {
       return undefined;
     }
 
     // TODO(burdon): Just pass in view? Reuse same jsonSchema instance? View determines if mutable, etc.
     return new ViewProjection(jsonSchema, table.view.target);
-  }, [schema, table]);
+  }, [jsonSchema, table]);
 
   const features = useMemo<TableFeatures>(
     () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
@@ -82,16 +86,17 @@ const useTestModel = <T extends BaseObject & HasId>(schema: Schema.Schema<T>, co
 };
 
 const DefaultStory = () => {
+  const client = useClient();
   const { model: orgModel, presentation: orgPresentation } = useTestModel(DataType.Organization, 50);
   const { model: contactModel, presentation: contactPresentation } = useTestModel(DataType.Person, 50);
 
   return (
     <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
       <Table.Root>
-        <Table.Main model={orgModel} presentation={orgPresentation} ignoreAttention />
+        <Table.Main model={orgModel} presentation={orgPresentation} client={client} ignoreAttention />
       </Table.Root>
       <Table.Root>
-        <Table.Main model={contactModel} presentation={contactPresentation} ignoreAttention />
+        <Table.Main model={contactModel} presentation={contactPresentation} client={client} ignoreAttention />
       </Table.Root>
     </div>
   );

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { useGridContext, type GridScopedProps } from '@dxos/react-ui-grid';
+
+export type CellValidationMessageProps = {
+  validationError: string | null;
+};
+
+export const CellValidationMessage = ({
+  validationError,
+  __gridScope,
+}: GridScopedProps<CellValidationMessageProps>) => {
+  const { editing, editBox: box } = useGridContext('GridSheetCellEditor', __gridScope);
+
+  if (!editing || !validationError) {
+    return null;
+  }
+
+  return (
+    <div
+      role='none'
+      className='absolute bg-errorSurface text-errorSurfaceText rounded-bs-sm text-xs p-1'
+      style={{
+        ...{ '--dx-gridCellWidth': `${box?.inlineSize ?? 200}px` },
+        zIndex: 10,
+        insetBlockEnd: `calc(100% - ${box.insetBlockStart}px)`,
+        insetInlineStart: box.insetInlineStart,
+        inlineSize: box.inlineSize,
+      }}
+    >
+      {validationError}
+    </div>
+  );
+};

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -87,7 +87,9 @@ export const FormCellEditor = ({ fieldProjection, model, schema, __gridScope }:
       <Popover.VirtualTrigger virtualRef={cellRef} />
       <Popover.Content tabIndex={-1} classNames='popover-card-width'>
         <Popover.Arrow />
-        <Form values={formValues} schema={narrowedSchema as any} onSave={handleSave} />
+        <Popover.Viewport>
+          <Form values={formValues} schema={narrowedSchema as any} onSave={handleSave} />
+        </Popover.Viewport>
       </Popover.Content>
     </Popover.Root>
   );

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

@@ -7,6 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { Obj } from '@dxos/echo';
 import { type EchoSchema, isMutable } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
@@ -96,7 +97,7 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(live(TableType, {}));
+        const table = space.db.add(Obj.make(TableType, {}));
         const schema = await initializeTable({ client, space, table });
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -4,7 +4,7 @@
 
 import { type Completion } from '@codemirror/autocomplete';
 import { type Schema } from 'effect/Schema';
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
@@ -27,6 +27,7 @@ import {
 import { tagPickerExtension, createLinks } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
+import { CellValidationMessage } from './CellValidationMessage';
 import { FormCellEditor } from './FormCellEditor';
 import { completion } from './extension';
 import { type TableModel, type ModalController } from '../../model';
@@ -102,6 +103,7 @@ export const TableCellEditor = ({
   const { id: gridId, editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
   const { themeMode } = useThemeContext();
+  const [_validationError, setValidationError] = useState<string | null>(null);
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -116,51 +118,76 @@ export const TableCellEditor = ({
   }, [model, editing]);
 
   const handleEnter = useCallback(
-    (value: any) => {
+    async (value: any) => {
       if (!model || !editing) {
         return;
       }
 
       const cell = parseCellIndex(editing.index);
-      model.setCellData(cell, value);
-      onEnter?.(cell);
-      onFocus?.();
-      setEditing(null);
+
+      // Validate the value
+      const result = await model.validateCellData(cell, value);
+
+      if (result.valid) {
+        setValidationError(null);
+        model.setCellData(cell, value);
+        onEnter?.(cell);
+        onFocus?.();
+        setEditing(null);
+      } else {
+        setValidationError(result.error);
+        // Editor stays open on validation failure
+      }
     },
     [model, editing, onEnter, onFocus, setEditing],
   );
 
   const handleBlur = useCallback<EditorBlurHandler>(
-    (value) => {
+    async (value) => {
       if (!model || !editing) {
         return;
       }
       if (suppressNextBlur.current) {
         suppressNextBlur.current = false;
-        return;
       }
 
-      const cell = parseCellIndex(editing.index);
-      if (value !== undefined) {
-        model.setCellData(cell, value);
-      }
+      // Don't save on blur - let handleClose handle validation and saving
     },
     [model, editing],
   );
 
   const handleClose = useCallback<EditorKeyOrBlurHandler>(
-    (value, event) => {
+    async (value, event) => {
       if (!model || !editing || !fieldProjection) {
         return;
       }
 
       const cell = parseCellIndex(editing.index);
-      onEnter?.(cell);
-      if (event && onFocus) {
-        onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+
+      if (value !== undefined) {
+        // Pre-commit validation check.
+        const result = await model.validateCellData(cell, value);
+
+        if (result.valid) {
+          setValidationError(null);
+          model.setCellData(cell, value);
+          setEditing(null);
+          onEnter?.(cell);
+          if (event && onFocus) {
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+          }
+        } else {
+          setValidationError(result.error);
+        }
+      } else {
+        setValidationError(null);
+        setEditing(null);
+        if (event && onFocus) {
+          onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+        }
       }
     },
-    [model, editing, onFocus, onEnter, fieldProjection],
+    [model, editing, onFocus, onEnter, fieldProjection, setEditing],
   );
 
   const extension = useMemo(() => {
@@ -209,9 +236,9 @@ export const TableCellEditor = ({
                 return;
               }
               if (mode === 'single-select') {
-                handleEnter(ids[0]);
+                void handleEnter(ids[0]);
               } else {
-                handleEnter(ids);
+                void handleEnter(ids);
               }
             }
           },
@@ -238,12 +265,12 @@ export const TableCellEditor = ({
                           [field.referencePath!]: data.text,
                         },
                         (data) => {
-                          handleEnter(data);
+                          void handleEnter(data);
                         },
                       );
                     }
                   } else {
-                    handleEnter(data);
+                    void handleEnter(data);
                   }
                 }
               },
@@ -312,7 +339,12 @@ export const TableCellEditor = ({
     }
   }, [model, editing]);
 
-  return <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} />;
+  return (
+    <>
+      <CellValidationMessage validationError={_validationError} __gridScope={__gridScope} />
+      <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} />
+    </>
+  );
 };
 
 const determineNavigationAxis = ({ key }: EditorKeyEvent): 'col' | 'row' | undefined => {

package/src/components/testing.ts

@@ -5,9 +5,10 @@
 import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { setValue, toJsonSchema, TypeEnum, TypedObject, FormatEnum, ObjectId } from '@dxos/echo-schema';
+import { Obj, Ref } from '@dxos/echo';
+import { FormatEnum, ObjectId, setValue, toJsonSchema, TypedObject, TypeEnum } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
-import { live, makeRef } from '@dxos/react-client/echo';
+import { live } from '@dxos/react-client/echo';
 import { createView, type ViewProjection } from '@dxos/schema';
 
 import { TableType } from '../types';
@@ -21,8 +22,8 @@ export const TestSchema = TypedObject({ typename: 'example.com/type/Test', versi
 });
 
 export const createTable = (schema = TestSchema) => {
-  return live(TableType, {
-    view: makeRef(
+  return Obj.make(TableType, {
+    view: Ref.make(
       createView({
         name: 'Test',
         typename: schema.typename,

package/src/hooks/useTableModel.ts

@@ -3,6 +3,7 @@
 //
 
 import { effect } from '@preact/signals-core';
+import orderBy from 'lodash.orderby';
 import { useEffect, useState } from 'react';
 
 import { fullyQualifiedId, getSpace, type Live } from '@dxos/react-client/echo';
@@ -66,7 +67,13 @@ export const useTableModel = <T extends TableRow = TableRow>({
   // Update data.
   useEffect(() => {
     if (rows) {
-      model?.setRows(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);
     }
   }, [model, rows]);
 

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

@@ -6,11 +6,12 @@ import { computed } from '@preact/signals-core';
 import { Schema } from 'effect';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
+import { Obj, Ref } from '@dxos/echo';
 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 { live, makeRef } from '@dxos/react-client/echo';
+import { live } from '@dxos/react-client/echo';
 import { createView, ViewProjection } from '@dxos/schema';
 
 import { TableModel, type TableModelProps } from './table-model';
@@ -108,6 +109,6 @@ 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 = live(TableType, { view: makeRef(view) });
+  const table = Obj.make(TableType, { view: Ref.make(view) });
   return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
 };