@dxos/react-ui-table 0.8.4-main.c1de068 → 0.8.4-main.f5c0578

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.f5c0578",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,21 +10,25 @@
   "type": "module",
   "exports": {
     "./deprecated": {
+      "source": "./src/deprecated/index.ts",
       "types": "./dist/types/src/deprecated/index.d.ts",
       "browser": "./dist/lib/browser/deprecated/index.mjs",
       "node": "./dist/lib/node-esm/deprecated/index.mjs"
     },
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
     "./testing": {
+      "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
     },
     "./types": {
+      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs"
@@ -61,51 +65,51 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/context": "0.8.4-main.c1de068",
-    "@dxos/debug": "0.8.4-main.c1de068",
-    "@dxos/echo": "0.8.4-main.c1de068",
-    "@dxos/effect": "0.8.4-main.c1de068",
-    "@dxos/echo-schema": "0.8.4-main.c1de068",
-    "@dxos/echo-db": "0.8.4-main.c1de068",
-    "@dxos/invariant": "0.8.4-main.c1de068",
-    "@dxos/lit-grid": "0.8.4-main.c1de068",
-    "@dxos/keys": "0.8.4-main.c1de068",
-    "@dxos/live-object": "0.8.4-main.c1de068",
-    "@dxos/plugin-search": "0.8.4-main.c1de068",
-    "@dxos/log": "0.8.4-main.c1de068",
-    "@dxos/react-client": "0.8.4-main.c1de068",
-    "@dxos/react-ui-attention": "0.8.4-main.c1de068",
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/react-ui-form": "0.8.4-main.c1de068",
-    "@dxos/react-ui-grid": "0.8.4-main.c1de068",
-    "@dxos/react-ui-editor": "0.8.4-main.c1de068",
-    "@dxos/react-ui-menu": "0.8.4-main.c1de068",
-    "@dxos/react-ui-searchlist": "0.8.4-main.c1de068",
-    "@dxos/react-ui-stack": "0.8.4-main.c1de068",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c1de068",
-    "@dxos/react-ui-tag-picker": "0.8.4-main.c1de068",
-    "@dxos/react-ui-types": "0.8.4-main.c1de068",
-    "@dxos/schema": "0.8.4-main.c1de068",
-    "@dxos/util": "0.8.4-main.c1de068"
+    "@dxos/debug": "0.8.4-main.f5c0578",
+    "@dxos/context": "0.8.4-main.f5c0578",
+    "@dxos/echo": "0.8.4-main.f5c0578",
+    "@dxos/echo-db": "0.8.4-main.f5c0578",
+    "@dxos/echo-schema": "0.8.4-main.f5c0578",
+    "@dxos/effect": "0.8.4-main.f5c0578",
+    "@dxos/invariant": "0.8.4-main.f5c0578",
+    "@dxos/keys": "0.8.4-main.f5c0578",
+    "@dxos/lit-grid": "0.8.4-main.f5c0578",
+    "@dxos/live-object": "0.8.4-main.f5c0578",
+    "@dxos/log": "0.8.4-main.f5c0578",
+    "@dxos/plugin-search": "0.8.4-main.f5c0578",
+    "@dxos/random": "0.8.4-main.f5c0578",
+    "@dxos/react-client": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-editor": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-attention": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-form": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-grid": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-menu": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-searchlist": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-tag-picker": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-types": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-stack": "0.8.4-main.f5c0578",
+    "@dxos/schema": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.f5c0578",
+    "@dxos/util": "0.8.4-main.f5c0578"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
+    "@effect/platform": "0.90.2",
     "@types/lodash.orderby": "^4.6.9",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.17.0",
+    "effect": "3.17.7",
     "fast-check": "^3.19.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.4-main.c1de068",
-    "@dxos/plugin-search": "0.8.4-main.c1de068",
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068",
-    "@dxos/test-utils": "0.8.4-main.c1de068"
+    "@dxos/plugin-search": "0.8.4-main.f5c0578",
+    "@dxos/random": "0.8.4-main.f5c0578",
+    "@dxos/react-ui": "0.8.4-main.f5c0578",
+    "@dxos/echo-signals": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-theme": "0.8.4-main.f5c0578",
+    "@dxos/test-utils": "0.8.4-main.f5c0578",
+    "@dxos/storybook-utils": "0.8.4-main.f5c0578"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -113,8 +117,8 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
+    "@dxos/react-ui": "0.8.4-main.f5c0578",
+    "@dxos/react-ui-theme": "0.8.4-main.f5c0578"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/ColumnActionsMenu.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { DropdownMenu, useTranslation } from '@dxos/react-ui';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 import { translationKey } from '../../translations';
 
 type ColumnActionsMenuProps = { model: TableModel; modals: ModalController };

package/src/components/Table/ColumnSettings.tsx

@@ -10,7 +10,7 @@ import { Popover } from '@dxos/react-ui';
 import { FieldEditor } from '@dxos/react-ui-form';
 import { type FieldType } from '@dxos/schema';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 
 type ColumnSettingsProps = {
   registry?: SchemaRegistry;

package/src/components/Table/CreateRefPanel.tsx

@@ -12,7 +12,7 @@ import { Popover } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { type GridScopedProps, useGridContext } from '@dxos/react-ui-grid';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 
 export type CreateRefPanelProps = { model?: TableModel; modals: ModalController };
 

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
@@ -17,10 +17,11 @@ import { type SchemaPropertyDefinition } from '@dxos/schema';
 import { Testing } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { DynamicTable } from './DynamicTable';
 import { type TableFeatures } from '../../model';
 import { translations } from '../../translations';
 
+import { DynamicTable } from './DynamicTable';
+
 faker.seed(0);
 
 const useTestPropertiesAndObjects = () => {

package/src/components/Table/DynamicTable.tsx

@@ -3,16 +3,17 @@
 //
 
 import { type Schema } from 'effect';
-import React, { useRef, useMemo, useCallback } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 
 import { type JsonSchemaType } from '@dxos/echo-schema';
 import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { Table, type TableController } from './Table';
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRowAction } from '../../model';
-import { getBaseSchema, makeDynamicTable, type TablePropertyDefinition } from '../../util';
+import { type TablePropertyDefinition, getBaseSchema, makeDynamicTable } from '../../util';
+
+import { Table, type TableController } from './Table';
 
 type DynamicTableProps = ThemedClassName<{
   name?: string; // TODO(burdon): Remove?

package/src/components/Table/{relations.stories.tsx → Relations.stories.tsx}

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Type } from '@dxos/echo';
@@ -13,16 +13,17 @@ import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { DataType } from '@dxos/schema';
-import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Table } from './Table';
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
 import { translations } from '../../translations';
 import { TableView } from '../../types';
 import { createTable } from '../../util';
 
+import { Table } from './Table';
+
 faker.seed(1);
 const generator: ValueGenerator = faker as any;
 
@@ -47,14 +48,21 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
     }
 
     const timeout = setTimeout(async () => {
-      const { jsonSchema, view } = await createTable({ client, space, typename: Type.getTypename(schema) });
+      const {
+        jsonSchema,
+        schema: effectSchema,
+        view,
+      } = await createTable({ client, space, typename: Type.getTypename(schema) });
       setJsonSchema(jsonSchema);
       setView(view);
+      space.db.add(view);
+      await space.db.schemaRegistry.register([effectSchema]);
     });
     return () => clearTimeout(timeout);
   }, [client, space, schema]);
 
   const model = useTableModel<TableRow>({ view, schema: jsonSchema, rows: [], features });
+
   useEffect(() => {
     if (!model || !space) {
       return;

package/src/components/Table/RowActionsMenu.tsx

@@ -4,9 +4,9 @@
 
 import React from 'react';
 
-import { DropdownMenu, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { type TableModel, type ModalController } from '../../model';
+import { type ModalController, type TableModel } from '../../model';
 import { translationKey } from '../../translations';
 
 type RowActionsMenuProps = { model: TableModel; modals: ModalController };
@@ -38,7 +38,7 @@ export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
                 model.handleRowAction(action.id, state.rowIndex);
               }}
             >
-              {t(action.translationKey)}
+              {toLocalizedString(action.label, t)}
             </DropdownMenu.Item>
           ))}
         </DropdownMenu.Viewport>

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

@@ -4,36 +4,38 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React, { useCallback } from 'react';
 
 import { Obj, Type } from '@dxos/echo';
 import {
-  FormatEnum,
   EchoObject,
-  GeneratorAnnotation,
   FormatAnnotation,
+  FormatEnum,
+  GeneratorAnnotation,
+  LabelAnnotation,
   PropertyMetaAnnotationId,
 } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
-import { live, type Space } from '@dxos/react-client/echo';
+import { type Space, live } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { getSchemaFromPropertyDefinitions, DataType } from '@dxos/schema';
+import { DataType, getSchemaFromPropertyDefinitions } from '@dxos/schema';
 import { Testing, createObjectFactory } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Table } from './Table';
 import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
 import { TableView } from '../../types';
 import { createTable } from '../../util';
 import { TableToolbar } from '../TableToolbar';
 
+import { Table } from './Table';
+
 const TestSchema = Schema.Struct({
   // TODO(wittjosiah): Should be title. Currently name to work with default label.
   name: Schema.optional(Schema.String).annotations({ title: 'Title' }),
@@ -58,7 +60,10 @@ const TestSchema = Schema.Struct({
   parent: Schema.optional(Schema.suspend((): Type.Ref<TestSchema> => Type.Ref(TestSchema))).annotations({
     title: 'Parent',
   }),
-}).pipe(Type.Obj({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }));
+}).pipe(
+  Type.Obj({ typename: `example.com/type/${PublicKey.random().truncate()}`, version: '0.1.0' }),
+  LabelAnnotation.set(['name']),
+);
 interface TestSchema extends Schema.Schema.Type<typeof TestSchema> {}
 
 const StoryViewEditor = ({

package/src/components/Table/Table.tsx

@@ -9,10 +9,10 @@ import React, {
   type WheelEvent,
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
-  useState,
   useMemo,
-  useEffect,
+  useState,
 } from 'react';
 
 import { type Client } from '@dxos/client';
@@ -24,27 +24,28 @@ import { getSpace } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
-  closestCell,
   type DxGridElement,
-  type DxGridPosition,
-  type GridContentProps,
-  Grid,
   type DxGridPlane,
   type DxGridPlaneRange,
-  gridSeparatorInlineEnd,
+  type DxGridPosition,
+  Grid,
+  type GridContentProps,
+  closestCell,
   gridSeparatorBlockEnd,
+  gridSeparatorInlineEnd,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 import { isNotFalsy, safeParseInt } from '@dxos/util';
 
+import { ModalController, type TableModel, type TablePresentation } from '../../model';
+import { translationKey } from '../../translations';
+import { tableButtons, tableControls } from '../../util';
+import { type TableCellEditorProps, TableValueEditor, createOption } from '../TableCellEditor';
+
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
 import { CreateRefPanel } from './CreateRefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
-import { ModalController, type TableModel, type TablePresentation } from '../../model';
-import { translationKey } from '../../translations';
-import { tableButtons, tableControls } from '../../util';
-import { createOption, TableValueEditor, type TableCellEditorProps } from '../TableCellEditor';
 
 //
 // Table.Root
@@ -76,6 +77,7 @@ const TableRoot = ({ children, role = 'article' }: TableRootProps) => {
 
 export type TableController = {
   update?: (cell?: DxGridPosition) => void;
+  focusDraft?: () => void;
 };
 
 export type TableMainProps = {
@@ -140,9 +142,29 @@ const TableMain = forwardRef<TableController, TableMainProps>(
             dxGrid.requestUpdate();
           }
         },
+        focusDraft: () => {
+          requestAnimationFrame(() => {
+            dxGrid.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
+            dxGrid.refocus();
+          });
+        },
       };
     }, [presentation, dxGrid]);
 
+    const handleSaveDraftRow = useCallback(
+      (rowIndex = 0) => {
+        if (model && dxGrid) {
+          const didCommitSuccessfully = model.commitDraftRow(rowIndex);
+          if (didCommitSuccessfully) {
+            requestAnimationFrame(() => {
+              dxGrid.scrollToEndRow();
+            });
+          }
+        }
+      },
+      [model, dxGrid],
+    );
+
     const handleGridClick = useCallback(
       (event: MouseEvent) => {
         const rowIndex = safeParseInt((event.target as HTMLElement).closest('[aria-rowindex]')?.ariaRowIndex ?? '');
@@ -192,14 +214,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               break;
             }
             case 'saveDraftRow': {
-              if (model) {
-                const didCommitSuccessfully = model.commitDraftRow(data.rowIndex);
-                if (dxGrid && didCommitSuccessfully) {
-                  requestAnimationFrame(() => {
-                    dxGrid.scrollToEndRow();
-                  });
-                }
-              }
+              handleSaveDraftRow();
               break;
             }
           }
@@ -240,32 +255,23 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     );
 
     const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
-      (increment, delta) => {
-        if (dxGrid) {
-          dxGrid.refocus(increment, delta);
-        }
-      },
-      [dxGrid],
-    );
-
-    const handleEnter = useCallback<NonNullable<TableCellEditorProps['onEnter']>>(
-      (cell) => {
-        if (!model?.features.dataEditable) {
-          return;
-        }
-
-        // TODO(burdon): Insert row only if bottom row isn't completely blank already.
-        if (model && cell.row === model.getRowCount() - 1) {
-          model.insertRow();
-          if (dxGrid) {
-            requestAnimationFrame(() => {
-              dxGrid?.scrollToRow(cell.row + 1);
-              dxGrid?.refocus('row', 1);
-            });
+      (increment, delta, cell) => {
+        if (dxGrid && model) {
+          if (cell?.plane === 'grid' && cell?.row >= model.getRowCount() - 1) {
+            if (draftRowCount < 1) {
+              model.insertRow();
+            }
+            dxGrid.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
+          } else if (cell?.plane === 'frozenRowsEnd' && increment === 'row') {
+            handleSaveDraftRow(cell.row);
+            model.insertRow();
+            dxGrid.setFocus({ plane: 'frozenRowsEnd', col: 0, row: 0 });
+          } else {
+            dxGrid.refocus(increment, delta);
           }
         }
       },
-      [model, dxGrid],
+      [dxGrid, model],
     );
 
     const handleKeyDown = useCallback<NonNullable<GridContentProps['onKeyDown']>>(
@@ -282,7 +288,12 @@ const TableMain = forwardRef<TableController, TableMainProps>(
         switch (event.key) {
           case 'Backspace':
           case 'Delete': {
-            model.setCellData(cell, undefined);
+            try {
+              model.setCellData(cell, undefined);
+              event.preventDefault();
+            } catch {
+              // Delete results in a validation error; don’t prevent default so dx-grid can emit an edit request.
+            }
             break;
           }
         }
@@ -365,6 +376,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
 
     const handleSave = useCallback(() => {
       dxGrid?.updateCells(true);
+      dxGrid?.requestUpdate();
     }, [dxGrid]);
 
     if (!model || !modals) {
@@ -377,7 +389,6 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           model={model}
           modals={modals}
           schema={schema}
-          onEnter={handleEnter}
           onFocus={handleFocus}
           onQuery={handleQuery}
           onSave={handleSave}
@@ -391,7 +402,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           overscroll='trap'
           onAxisResize={handleAxisResize}
           onClick={handleGridClick}
-          onKeyDown={handleKeyDown}
+          onKeyDownCapture={handleKeyDown}
           onWheelCapture={handleWheel}
           ref={setDxGrid}
         />

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { useGridContext, type GridScopedProps } from '@dxos/react-ui-grid';
+import { type GridScopedProps, useGridContext } from '@dxos/react-ui-grid';
 
 export type CellValidationMessageProps = {
   validationError: string | null;

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

@@ -13,17 +13,18 @@ import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { Filter, useQuery } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { defaultRowSize, Grid, type GridEditing } from '@dxos/react-ui-grid';
-import { createDefaultSchema, DataType } from '@dxos/schema';
+import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
+import { DataType, createDefaultSchema } from '@dxos/schema';
 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 { TableView } from '../../types';
 import { createTable } from '../../util';
 
+import { TableCellEditor, type TableCellEditorProps } from './TableCellEditor';
+
 type StoryProps = {
   editing: GridEditing;
 };

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -8,29 +8,29 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { type DxGrid } from '@dxos/lit-grid';
+import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
 import { useThemeContext } from '@dxos/react-ui';
 import { createMarkdownExtensions } from '@dxos/react-ui-editor';
 import {
-  cellQuery,
-  editorKeys,
-  parseCellIndex,
-  useGridContext,
-  type DxGridPlanePosition,
+  type EditorBlurHandler,
   type EditorKeyEvent,
   type EditorKeyOrBlurHandler,
-  type EditorBlurHandler,
   GridCellEditor,
   type GridCellEditorProps,
   type GridScopedProps,
+  cellQuery,
+  editorKeys,
+  parseCellIndex,
+  useGridContext,
 } from '@dxos/react-ui-grid';
-import { tagPicker, createLinks } from '@dxos/react-ui-tag-picker';
+import { createLinks, tagPicker } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
+import { type ModalController, type TableModel } from '../../model';
+
 import { CellValidationMessage } from './CellValidationMessage';
-import { FormCellEditor } from './FormCellEditor';
 import { completion } from './extension';
-import { type TableModel, type ModalController } from '../../model';
+import { FormCellEditor } from './FormCellEditor';
 
 const newValue = Symbol.for('newValue');
 
@@ -47,8 +47,8 @@ export type TableCellEditorProps = {
   model?: TableModel;
   modals?: ModalController;
   schema?: Schema.AnyNoContext;
-  onEnter?: (cell: DxGridPlanePosition) => void;
-  onFocus?: DxGrid['refocus'];
+  onEnter?: (cell: DxGridPosition) => void;
+  onFocus?: (axis?: DxGridAxis, delta?: -1 | 0 | 1, cell?: DxGridPosition) => void;
   onSave?: () => void;
   onQuery?: (field: FieldProjection, text: string) => Promise<QueryResult[]>;
 };
@@ -121,8 +121,8 @@ 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 [_validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
   const fieldProjection = useMemo<FieldProjection | undefined>(() => {
     if (!model || !editing) {
@@ -225,7 +225,7 @@ export const TableCellEditor = ({
           onSave?.();
           onEnter?.(cell);
           if (event && onFocus) {
-            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
           }
         } else {
           setValidationError(result.error);
@@ -395,11 +395,7 @@ export const TableCellEditor = ({
 
   return (
     <>
-      <CellValidationMessage
-        validationError={_validationError}
-        variant={_validationVariant}
-        __gridScope={__gridScope}
-      />
+      <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
       <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
     </>
   );

package/src/components/TableCellEditor/extension.ts

@@ -3,10 +3,10 @@
 //
 
 import {
-  autocompletion,
-  pickedCompletion,
   type CompletionContext,
   type CompletionResult,
+  autocompletion,
+  pickedCompletion,
 } from '@codemirror/autocomplete';
 import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';