@dxos/react-ui-table 0.8.3-main.7f5a14c → 0.8.3

package/dist/lib/node/index.cjs

@@ -37,9 +37,9 @@ __export(node_exports, {
   Table: () => Table,
   TableModel: () => TableModel,
   TablePresentation: () => TablePresentation,
-  TableSchema: () => import_chunk_CXDGXPM6.TableSchema,
+  TableSchema: () => import_chunk_O2VPBNS5.TableSchema,
   TableToolbar: () => TableToolbar,
-  TableType: () => import_chunk_CXDGXPM6.TableType,
+  TableType: () => import_chunk_O2VPBNS5.TableType,
   cellClassesForRowSelection: () => cellClassesForRowSelection,
   getBaseSchema: () => getBaseSchema,
   initializeTable: () => initializeTable,
@@ -52,7 +52,7 @@ __export(node_exports, {
   useTableModel: () => useTableModel
 });
 module.exports = __toCommonJS(node_exports);
-var import_chunk_CXDGXPM6 = require("./chunk-CXDGXPM6.cjs");
+var import_chunk_O2VPBNS5 = require("./chunk-O2VPBNS5.cjs");
 var import_tracking = require("@preact-signals/safe-react/tracking");
 var import_react = __toESM(require("react"));
 var import_echo_schema = require("@dxos/echo-schema");
@@ -86,16 +86,17 @@ var import_echo_schema2 = require("@dxos/echo-schema");
 var import_invariant2 = require("@dxos/invariant");
 var import_live_object = require("@dxos/live-object");
 var import_react_ui_form3 = require("@dxos/react-ui-form");
+var import_schema = require("@dxos/schema");
 var import_signals_core2 = require("@preact/signals-core");
 var import_context2 = require("@dxos/context");
+var import_echo3 = require("@dxos/echo");
 var import_echo_schema3 = require("@dxos/echo-schema");
-var import_live_object2 = require("@dxos/live-object");
-var import_schema = require("@dxos/schema");
+var import_schema2 = require("@dxos/schema");
 var import_effect2 = require("effect");
 var import_echo_schema4 = require("@dxos/echo-schema");
 var import_react_client = require("@dxos/react-client");
-var import_echo3 = require("@dxos/react-client/echo");
-var import_schema2 = require("@dxos/schema");
+var import_echo4 = require("@dxos/react-client/echo");
+var import_schema3 = require("@dxos/schema");
 var import_effect3 = require("effect");
 var import_SchemaAST = require("effect/SchemaAST");
 var import_signals_core3 = require("@preact/signals-core");
@@ -110,7 +111,7 @@ var import_echo_schema6 = require("@dxos/echo-schema");
 var import_react_ui_form5 = require("@dxos/react-ui-form");
 var import_react_ui_grid3 = require("@dxos/react-ui-grid");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_schema3 = require("@dxos/schema");
+var import_schema4 = require("@dxos/schema");
 var import_tracking6 = require("@preact-signals/safe-react/tracking");
 var import_react6 = __toESM(require("react"));
 var import_echo_schema7 = require("@dxos/echo-schema");
@@ -121,28 +122,32 @@ var import_react_ui_grid4 = require("@dxos/react-ui-grid");
 var import_react_ui_tag_picker = require("@dxos/react-ui-tag-picker");
 var import_tracking7 = require("@preact-signals/safe-react/tracking");
 var import_react7 = __toESM(require("react"));
+var import_react_ui_grid5 = require("@dxos/react-ui-grid");
+var import_tracking8 = require("@preact-signals/safe-react/tracking");
+var import_react8 = __toESM(require("react"));
 var import_echo_schema8 = require("@dxos/echo-schema");
 var import_invariant4 = require("@dxos/invariant");
 var import_react_ui7 = require("@dxos/react-ui");
 var import_react_ui_form6 = require("@dxos/react-ui-form");
-var import_react_ui_grid5 = require("@dxos/react-ui-grid");
+var import_react_ui_grid6 = require("@dxos/react-ui-grid");
 var import_util2 = require("@dxos/util");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_view = require("@codemirror/view");
-var import_tracking8 = require("@preact-signals/safe-react/tracking");
-var import_react8 = __toESM(require("react"));
+var import_tracking9 = require("@preact-signals/safe-react/tracking");
+var import_react9 = __toESM(require("react"));
 var import_react_ui8 = require("@dxos/react-ui");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_tracking9 = require("@preact-signals/safe-react/tracking");
+var import_tracking10 = require("@preact-signals/safe-react/tracking");
 var import_signals_core6 = require("@preact/signals-core");
-var import_react9 = require("react");
-var import_echo4 = require("@dxos/react-client/echo");
+var import_lodash2 = __toESM(require("lodash.orderby"));
+var import_react10 = require("react");
+var import_echo5 = require("@dxos/react-client/echo");
 var import_react_ui_attention2 = require("@dxos/react-ui-attention");
 var import_util3 = require("@dxos/util");
-var import_tracking10 = require("@preact-signals/safe-react/tracking");
+var import_tracking11 = require("@preact-signals/safe-react/tracking");
 var import_rx_react = require("@effect-rx/rx-react");
-var import_react10 = __toESM(require("react"));
-var import_live_object3 = require("@dxos/live-object");
+var import_react11 = __toESM(require("react"));
+var import_live_object2 = require("@dxos/live-object");
 var import_react_ui_menu = require("@dxos/react-ui-menu");
 var import_react_ui_menu2 = require("@dxos/react-ui-menu");
 var translationKey = "table";
@@ -382,7 +387,7 @@ var RowActionsMenu = ({ model, modals }) => {
 };
 var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
-    const schema2 = (0, import_schema.getSchemaFromPropertyDefinitions)(typename, properties);
+    const schema2 = (0, import_schema2.getSchemaFromPropertyDefinitions)(typename, properties);
     return {
       typename: schema2.typename,
       jsonSchema: schema2.jsonSchema
@@ -402,7 +407,7 @@ var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   }
 };
 var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
-  const view = (0, import_schema.createView)({
+  const view = (0, import_schema2.createView)({
     name: "dynamic-table",
     typename,
     jsonSchema,
@@ -410,11 +415,11 @@ var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
       fields: properties.map((property) => property.name)
     }
   });
-  const table = (0, import_live_object2.live)(import_chunk_CXDGXPM6.TableType, {
+  const table = import_echo3.Obj.make(import_chunk_O2VPBNS5.TableType, {
     name: "dynamic-table",
-    view: (0, import_live_object2.makeRef)(view)
+    view: import_echo3.Ref.make(view)
   });
-  const projection = new import_schema.ViewProjection(jsonSchema, view);
+  const projection = new import_schema2.ViewProjection(jsonSchema, view);
   if (properties && view.fields) {
     setProperties(view, projection, properties);
   }
@@ -459,8 +464,8 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     if (!schema) {
       throw new Error(`Schema not found: ${typename}`);
     }
-    const fields = (0, import_schema2.getSchemaProperties)(schema.ast).map((prop) => prop.name);
-    table.view = import_echo_schema4.Ref.make((0, import_schema2.createView)({
+    const fields = (0, import_schema3.getSchemaProperties)(schema.ast).map((prop) => prop.name);
+    table.view = import_echo_schema4.Ref.make((0, import_schema3.createView)({
       // TODO(ZaymonFC): Don't hardcode name?
       name: "View",
       typename: schema.typename,
@@ -470,10 +475,10 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     return schema;
   } else {
     const [schema] = await space.db.schemaRegistry.register([
-      ContactSchema
+      createContactSchema()
     ]);
     const fields = ContactFields;
-    table.view = import_echo_schema4.Ref.make((0, import_schema2.createView)({
+    table.view = import_echo_schema4.Ref.make((0, import_schema3.createView)({
       name: "View",
       typename: schema.typename,
       jsonSchema: schema.jsonSchema,
@@ -481,19 +486,21 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     }));
     createProjection(schema, table.view.target);
     if (initialRow) {
-      space.db.add((0, import_echo3.live)(schema, {}));
+      space.db.add((0, import_echo4.live)(schema, {}));
     }
     return schema;
   }
 };
-var ContactSchema = (0, import_echo_schema4.TypedObject)({
+var createContactSchema = () => (0, import_echo_schema4.TypedObject)({
   typename: `example.com/type/${import_react_client.PublicKey.random().truncate()}`,
   version: "0.1.0"
 })({
   name: import_effect2.Schema.optional(import_effect2.Schema.String).annotations({
     title: "Name"
   }),
-  active: import_effect2.Schema.optional(import_effect2.Schema.Boolean),
+  active: import_effect2.Schema.optional(import_effect2.Schema.Boolean).annotations({
+    title: "Active"
+  }),
   email: import_effect2.Schema.optional(import_echo_schema4.Format.Email),
   salary: import_effect2.Schema.optional(import_echo_schema4.Format.Currency()).annotations({
     title: "Salary"
@@ -506,7 +513,7 @@ var ContactFields = [
   "active"
 ];
 var createProjection = (schema, view) => {
-  const projection = new import_schema2.ViewProjection(schema.jsonSchema, view);
+  const projection = new import_schema3.ViewProjection(schema.jsonSchema, view);
   projection.setFieldProjection({
     field: {
       id: view.fields.find((f) => f.path === "salary").id,
@@ -523,7 +530,7 @@ var createProjection = (schema, view) => {
   });
   projection.setFieldProjection({
     field: {
-      id: (0, import_schema2.createFieldId)(),
+      id: (0, import_schema3.createFieldId)(),
       path: "manager",
       referencePath: "name"
     },
@@ -1024,6 +1031,61 @@ var TableModel = class extends import_context.Resource {
         }
       }
     };
+    this.validateCellData = async ({ col, row }, value) => {
+      const rowIdx = this._sorting.getDataIndex(row);
+      const fields = this._view?.fields ?? [];
+      if (col < 0 || col >= fields.length) {
+        return {
+          valid: false,
+          error: "Invalid column index"
+        };
+      }
+      const field = fields[col];
+      const { props } = this._projection.getFieldProjection(field.id);
+      const currentRow = this._rows.value[rowIdx];
+      (0, import_invariant2.invariant)(currentRow, "Invalid row index", {
+        F: __dxlog_file,
+        L: 355,
+        S: this,
+        A: [
+          "currentRow",
+          "'Invalid row index'"
+        ]
+      });
+      const snapshot = (0, import_echo_schema2.getSnapshot)(currentRow);
+      const transformedValue = editorTextToCellValue(props, value);
+      (0, import_echo_schema2.setValue)(snapshot, field.path, transformedValue);
+      const schema = (0, import_echo_schema2.getSchema)(currentRow);
+      (0, import_invariant2.invariant)(schema, void 0, {
+        F: __dxlog_file,
+        L: 365,
+        S: this,
+        A: [
+          "schema",
+          ""
+        ]
+      });
+      const validationResult = (0, import_schema.validateSchema)(schema, snapshot);
+      if (validationResult && validationResult.length > 0) {
+        const error = validationResult[0];
+        (0, import_invariant2.invariant)(error.path === field.path, void 0, {
+          F: __dxlog_file,
+          L: 370,
+          S: this,
+          A: [
+            "error.path === field.path",
+            ""
+          ]
+        });
+        return {
+          valid: false,
+          error: error.message
+        };
+      }
+      return {
+        valid: true
+      };
+    };
     this.setCellData = ({ col, row }, value) => {
       const rowIdx = this._sorting.getDataIndex(row);
       const fields = this._view?.fields ?? [];
@@ -1032,36 +1094,11 @@ var TableModel = class extends import_context.Resource {
       }
       const field = fields[col];
       const { props } = this._projection.getFieldProjection(field.id);
-      switch (props.format) {
-        case import_echo_schema2.FormatEnum.Ref: {
-          if ((0, import_live_object.isLiveObject)(value)) {
-            (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, (0, import_live_object.makeRef)(value));
-          }
-          break;
-        }
-        case import_echo_schema2.FormatEnum.SingleSelect: {
-          const ids = extractTagIds(value);
-          if (ids && ids.length > 0) {
-            (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, ids[0]);
-          }
-          break;
-        }
-        case import_echo_schema2.FormatEnum.MultiSelect: {
-          const ids = extractTagIds(value);
-          if (ids) {
-            (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, ids);
-          }
-          break;
-        }
-        default: {
-          (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, (0, import_react_ui_form3.parseValue)({
-            type: props.type,
-            format: props.format,
-            value
-          }));
-          break;
-        }
+      const transformedValue = editorTextToCellValue(props, value);
+      if (props.format === import_echo_schema2.FormatEnum.Ref && !(0, import_live_object.isLiveObject)(value)) {
+        return;
       }
+      (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, transformedValue);
     };
     this._id = id;
     this._space = space;
@@ -1073,7 +1110,7 @@ var TableModel = class extends import_context.Resource {
     };
     (0, import_invariant2.invariant)(!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === "single"), "Single selection is not compatible with editable tables.", {
       F: __dxlog_file,
-      L: 115,
+      L: 126,
       S: this,
       A: [
         "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
@@ -1133,7 +1170,7 @@ var TableModel = class extends import_context.Resource {
   get columnMeta() {
     (0, import_invariant2.invariant)(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 184,
+      L: 195,
       S: this,
       A: [
         "this._columnMeta",
@@ -1268,6 +1305,36 @@ var TableModel = class extends import_context.Resource {
     this._sorting.save();
   }
 };
+var editorTextToCellValue = (props, value) => {
+  switch (props.format) {
+    case import_echo_schema2.FormatEnum.Ref: {
+      if ((0, import_live_object.isLiveObject)(value)) {
+        return (0, import_live_object.makeRef)(value);
+      } else {
+        return value;
+      }
+    }
+    case import_echo_schema2.FormatEnum.SingleSelect: {
+      const ids = extractTagIds(value);
+      if (ids && ids.length > 0) {
+        return ids[0];
+      } else {
+        return value;
+      }
+    }
+    case import_echo_schema2.FormatEnum.MultiSelect: {
+      const ids = extractTagIds(value);
+      return ids || value;
+    }
+    default: {
+      return (0, import_react_ui_form3.parseValue)({
+        type: props.type,
+        format: props.format,
+        value
+      });
+    }
+  }
+};
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
 var ModalController = class {
   constructor() {
@@ -1480,7 +1547,7 @@ var TablePresentation = class {
         const targetObj = (0, import_echo_schema6.getValue)(obj, field.path)?.target;
         if (targetObj) {
           const dxn = (0, import_echo_schema6.getObjectDXN)(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
         }
       }
       if (props.format === import_echo_schema6.FormatEnum.Boolean) {
@@ -1639,7 +1706,7 @@ var TablePresentation = class {
         row: 0
       })]: {
         accessoryHtml: this.model.features.schemaEditable ? tableButtons.addColumn.render({
-          disabled: (this.model.view?.fields?.length ?? 0) >= import_schema3.VIEW_FIELD_LIMIT
+          disabled: (this.model.view?.fields?.length ?? 0) >= import_schema4.VIEW_FIELD_LIMIT
         }) : void 0,
         className: "!bg-toolbarSurface",
         readonly: true,
@@ -1670,20 +1737,44 @@ var cellClassesForRowSelection = (selected, selectionMode) => {
       ];
   }
 };
+var CellValidationMessage = ({ validationError, __gridScope }) => {
+  var _effect = (0, import_tracking7.useSignals)();
+  try {
+    const { editing, editBox: box } = (0, import_react_ui_grid5.useGridContext)("GridSheetCellEditor", __gridScope);
+    if (!editing || !validationError) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react7.default.createElement("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);
+  } finally {
+    _effect.f();
+  }
+};
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
 var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
-  var _effect = (0, import_tracking7.useSignals)();
+  var _effect = (0, import_tracking8.useSignals)();
   try {
-    const { editing, setEditing } = (0, import_react_ui_grid5.useGridContext)("ArrayEditor", __gridScope);
-    const cellRef = (0, import_react7.useRef)(null);
-    (0, import_react7.useEffect)(() => {
+    const { editing, setEditing } = (0, import_react_ui_grid6.useGridContext)("ArrayEditor", __gridScope);
+    const cellRef = (0, import_react8.useRef)(null);
+    (0, import_react8.useEffect)(() => {
       if (editing && editing.cellElement) {
         cellRef.current = editing.cellElement;
       }
     }, [
       editing?.cellElement
     ]);
-    const narrowedSchema = (0, import_react7.useMemo)(() => {
+    const narrowedSchema = (0, import_react8.useMemo)(() => {
       if (!schema) {
         return void 0;
       }
@@ -1694,9 +1785,9 @@ var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
       JSON.stringify(schema),
       fieldProjection.field.path
     ]);
-    const originalRow = (0, import_react7.useMemo)(() => {
+    const originalRow = (0, import_react8.useMemo)(() => {
       if (model && editing) {
-        const cell = (0, import_react_ui_grid5.parseCellIndex)(editing.index);
+        const cell = (0, import_react_ui_grid6.parseCellIndex)(editing.index);
         const row = model.getRowAt(cell.row);
         (0, import_invariant4.invariant)(row, void 0, {
           F: __dxlog_file3,
@@ -1714,14 +1805,14 @@ var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
       model,
       editing
     ]);
-    const formValues = (0, import_react7.useMemo)(() => {
+    const formValues = (0, import_react8.useMemo)(() => {
       if (originalRow) {
         return (0, import_echo_schema8.getSnapshot)(originalRow);
       }
     }, [
       originalRow
     ]);
-    const handleSave = (0, import_react7.useCallback)((values) => {
+    const handleSave = (0, import_react8.useCallback)((values) => {
       const path = fieldProjection.field.path;
       const value = (0, import_util2.getDeep)(values, [
         path
@@ -1734,7 +1825,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
       fieldProjection.field.path,
       originalRow
     ]);
-    const handleOpenChange = (0, import_react7.useCallback)((nextOpen) => {
+    const handleOpenChange = (0, import_react8.useCallback)((nextOpen) => {
       if (nextOpen === false) {
         setEditing(null);
       }
@@ -1744,15 +1835,15 @@ var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
     if (!editing) {
       return null;
     }
-    return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Popover.Root, {
+    return /* @__PURE__ */ import_react8.default.createElement(import_react_ui7.Popover.Root, {
       open: editing !== null,
       onOpenChange: handleOpenChange
-    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Popover.VirtualTrigger, {
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui7.Popover.VirtualTrigger, {
       virtualRef: cellRef
-    }), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Popover.Content, {
+    }), /* @__PURE__ */ import_react8.default.createElement(import_react_ui7.Popover.Content, {
       tabIndex: -1,
       classNames: "popover-card-width"
-    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Popover.Arrow, null), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Popover.Viewport, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui_form6.Form, {
+    }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui7.Popover.Arrow, null), /* @__PURE__ */ import_react8.default.createElement(import_react_ui7.Popover.Viewport, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_form6.Form, {
       values: formValues,
       schema: narrowedSchema,
       onSave: handleSave
@@ -1816,7 +1907,7 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onQuery, __gr
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
       (0, import_invariant3.invariant)(fieldProjection2, void 0, {
         F: __dxlog_file4,
-        L: 73,
+        L: 74,
         S: void 0,
         A: [
           "fieldProjection",
@@ -1854,6 +1945,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     const { id: gridId, editing, setEditing } = (0, import_react_ui_grid4.useGridContext)("TableCellEditor", __gridScope);
     const suppressNextBlur = (0, import_react6.useRef)(false);
     const { themeMode } = (0, import_react_ui6.useThemeContext)();
+    const [_validationError, setValidationError] = (0, import_react6.useState)(null);
     const fieldProjection = (0, import_react6.useMemo)(() => {
       if (!model || !editing) {
         return;
@@ -1863,7 +1955,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
       (0, import_invariant3.invariant)(fieldProjection2, void 0, {
         F: __dxlog_file4,
-        L: 114,
+        L: 116,
         S: void 0,
         A: [
           "fieldProjection",
@@ -1875,15 +1967,21 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       model,
       editing
     ]);
-    const handleEnter = (0, import_react6.useCallback)((value) => {
+    const handleEnter = (0, import_react6.useCallback)(async (value) => {
       if (!model || !editing) {
         return;
       }
       const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
-      model.setCellData(cell, value);
-      onEnter?.(cell);
-      onFocus?.();
-      setEditing(null);
+      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);
+      }
     }, [
       model,
       editing,
@@ -1891,37 +1989,49 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       onFocus,
       setEditing
     ]);
-    const handleBlur = (0, import_react6.useCallback)((value) => {
+    const handleBlur = (0, import_react6.useCallback)(async (value) => {
       if (!model || !editing) {
         return;
       }
       if (suppressNextBlur.current) {
         suppressNextBlur.current = false;
-        return;
-      }
-      const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
-      if (value !== void 0) {
-        model.setCellData(cell, value);
       }
     }, [
       model,
       editing
     ]);
-    const handleClose = (0, import_react6.useCallback)((value, event) => {
+    const handleClose = (0, import_react6.useCallback)(async (value, event) => {
       if (!model || !editing || !fieldProjection) {
         return;
       }
       const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
-      onEnter?.(cell);
-      if (event && onFocus) {
-        onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+      if (value !== void 0) {
+        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
+      fieldProjection,
+      setEditing
     ]);
     const extension = (0, import_react6.useMemo)(() => {
       if (!fieldProjection) {
@@ -1958,9 +2068,9 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
                 return;
               }
               if (mode === "single-select") {
-                handleEnter(ids[0]);
+                void handleEnter(ids[0]);
               } else {
-                handleEnter(ids);
+                void handleEnter(ids);
               }
             }
           }
@@ -1981,11 +2091,11 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
                         modals.openCreateRef(props.referenceSchema, document.querySelector((0, import_react_ui_grid4.cellQuery)(editing.index, gridId)), {
                           [field.referencePath]: data.text
                         }, (data2) => {
-                          handleEnter(data2);
+                          void handleEnter(data2);
                         });
                       }
                     } else {
-                      handleEnter(data);
+                      void handleEnter(data);
                     }
                   }
                 }
@@ -2050,11 +2160,14 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       model,
       editing
     ]);
-    return /* @__PURE__ */ import_react6.default.createElement(import_react_ui_grid4.GridCellEditor, {
+    return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(CellValidationMessage, {
+      validationError: _validationError,
+      __gridScope
+    }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui_grid4.GridCellEditor, {
       extension,
       getCellContent,
       onBlur: handleBlur
-    });
+    }));
   } finally {
     _effect.f();
   }
@@ -2095,7 +2208,7 @@ var TableRoot = ({ children, role }) => {
     _effect.f();
   }
 };
-var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention, schema, onRowClick }, forwardedRef) => {
+var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
   var _effect = (0, import_tracking.useSignals)();
   try {
     const [dxGrid, setDxGrid] = (0, import_react.useState)(null);
@@ -2290,14 +2403,20 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
         const space = model.space;
         (0, import_invariant.invariant)(space, void 0, {
           F: __dxlog_file5,
-          L: 309,
+          L: 311,
           S: void 0,
           A: [
             "space",
             ""
           ]
         });
-        const schema2 = space.db.schemaRegistry.getSchema(props.referenceSchema);
+        let schema2;
+        if (client) {
+          schema2 = client.graph.schemaRegistry.getSchema(props.referenceSchema);
+        }
+        if (!schema2) {
+          schema2 = space.db.schemaRegistry.getSchema(props.referenceSchema);
+        }
         if (schema2) {
           const { objects } = await space.db.query(import_echo.Filter.type(schema2)).run();
           const options = objects.map((obj) => {
@@ -2324,6 +2443,7 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
       return [];
     }, [
       model,
+      client,
       t
     ]);
     if (!model || !modals) {
@@ -2377,18 +2497,18 @@ var Table = {
   Main: TableMain
 };
 var useTableModel = ({ table, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
-  var _effect = (0, import_tracking9.useSignals)();
+  var _effect = (0, import_tracking10.useSignals)();
   try {
-    const [model, setModel] = (0, import_react9.useState)();
-    (0, import_react9.useEffect)(() => {
+    const [model, setModel] = (0, import_react10.useState)();
+    (0, import_react10.useEffect)(() => {
       if (!table || !projection) {
         return;
       }
       let model2;
       const t = setTimeout(async () => {
         model2 = new TableModel({
-          id: (0, import_echo4.fullyQualifiedId)(table),
-          space: (0, import_echo4.getSpace)(table),
+          id: (0, import_echo5.fullyQualifiedId)(table),
+          space: (0, import_echo5.getSpace)(table),
           view: table.view?.target,
           projection,
           features,
@@ -2410,9 +2530,14 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
       features,
       rowActions
     ]);
-    (0, import_react9.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       if (rows) {
-        model?.setRows(rows);
+        const sortedRows = (0, import_lodash2.default)(rows, [
+          (row) => String(row.id)
+        ], [
+          "asc"
+        ]);
+        model?.setRows(sortedRows);
       }
     }, [
       model,
@@ -2422,7 +2547,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
       table?.id,
       table?.view?.target?.query.typename
     ].filter(import_util3.isNonNullable));
-    (0, import_react9.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       if (!model) {
         return;
       }
@@ -2447,9 +2572,9 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
   }
 };
 var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
-  var _effect = (0, import_tracking8.useSignals)();
+  var _effect = (0, import_tracking9.useSignals)();
   try {
-    const { table, projection } = (0, import_react8.useMemo)(() => {
+    const { table, projection } = (0, import_react9.useMemo)(() => {
       const props2 = getBaseSchema({
         typename: name,
         properties,
@@ -2466,11 +2591,11 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
       schema,
       jsonSchema
     ]);
-    const tableRef = (0, import_react8.useRef)(null);
-    const handleCellUpdate = (0, import_react8.useCallback)((cell) => {
+    const tableRef = (0, import_react9.useRef)(null);
+    const handleCellUpdate = (0, import_react9.useCallback)((cell) => {
       tableRef.current?.update?.(cell);
     }, []);
-    const handleRowOrderChange = (0, import_react8.useCallback)(() => {
+    const handleRowOrderChange = (0, import_react9.useCallback)(() => {
       tableRef.current?.update?.();
     }, []);
     const features = (0, import_react_ui8.useDefaultValue)(props.features, () => ({
@@ -2489,20 +2614,20 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
       onRowOrderChange: handleRowOrderChange,
       onRowAction
     });
-    const presentation = (0, import_react8.useMemo)(() => {
+    const presentation = (0, import_react9.useMemo)(() => {
       if (model) {
         return new TablePresentation(model);
       }
     }, [
       model
     ]);
-    return /* @__PURE__ */ import_react8.default.createElement("div", {
+    return /* @__PURE__ */ import_react9.default.createElement("div", {
       role: "none",
       className: (0, import_react_ui_theme3.mx)("is-full bs-full grow grid", classNames)
-    }, /* @__PURE__ */ import_react8.default.createElement("div", {
+    }, /* @__PURE__ */ import_react9.default.createElement("div", {
       role: "none",
       className: "grid min-bs-0 overflow-hidden"
-    }, /* @__PURE__ */ import_react8.default.createElement(Table.Root, null, /* @__PURE__ */ import_react8.default.createElement(Table.Main, {
+    }, /* @__PURE__ */ import_react9.default.createElement(Table.Root, null, /* @__PURE__ */ import_react9.default.createElement(Table.Main, {
       ref: tableRef,
       model,
       presentation,
@@ -2559,12 +2684,12 @@ var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => imp
   };
 });
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, customActions }) => {
-  var _effect = (0, import_tracking10.useSignals)();
+  var _effect = (0, import_tracking11.useSignals)();
   try {
-    const state = (0, import_react10.useMemo)(() => (0, import_live_object3.live)({
+    const state = (0, import_react11.useMemo)(() => (0, import_live_object2.live)({
       viewDirty
     }), []);
-    const actionsCreator = (0, import_react10.useMemo)(() => createTableToolbarActions({
+    const actionsCreator = (0, import_react11.useMemo)(() => createTableToolbarActions({
       state,
       onAdd,
       onSave,
@@ -2576,10 +2701,10 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, custom
       customActions
     ]);
     const menu = (0, import_react_ui_menu.useMenuActions)(actionsCreator);
-    return /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.MenuProvider, {
+    return /* @__PURE__ */ import_react11.default.createElement(import_react_ui_menu.MenuProvider, {
       ...menu,
       attendableId
-    }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.ToolbarMenu, {
+    }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui_menu.ToolbarMenu, {
       classNames
     }));
   } finally {