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

package/src/components/TableToolbar/TableToolbar.tsx

@@ -11,11 +11,11 @@ import {
   type ActionGraphEdges,
   type ActionGraphNodes,
   type ActionGraphProps,
-  createGapSeparator,
-  createMenuAction,
   type MenuAction,
   MenuProvider,
   ToolbarMenu,
+  createGapSeparator,
+  createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
 import { rxFromSignal } from '@dxos/react-ui-menu';

package/src/components/testing.ts

@@ -5,7 +5,7 @@
 import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { FormatEnum, ObjectId, setValue, TypedObject, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo-schema';
 import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';

package/src/hooks/useTableModel.ts

@@ -13,7 +13,7 @@ import { useSelected, useSelectionActions } from '@dxos/react-ui-attention';
 import { type DataType, type ProjectionModel } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { type TableRow, TableModel, type TableModelProps, type TableRowAction } from '../model';
+import { TableModel, type TableModelProps, type TableRow, type TableRowAction } from '../model';
 
 export type UseTableModelParams<T extends TableRow = TableRow> = {
   view?: DataType.View;

package/src/model/modal-controller.ts

@@ -3,7 +3,7 @@
 //
 
 import { signal } from '@preact/signals-core';
-import { type RefObject, type MutableRefObject } from 'react';
+import { type MutableRefObject, type RefObject } from 'react';
 
 import { type Live } from '@dxos/live-object';
 import { log } from '@dxos/log';

package/src/model/selection-model.ts

@@ -2,13 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import { computed, effect, type Signal, signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, type Signal, computed, effect, signal } from '@preact/signals-core';
 
 import { Resource } from '@dxos/context';
 
-import { type TableRow } from './table-model';
 import { touch } from '../util';
 
+import { type TableRow } from './table-model';
+
 export type SelectionMode = 'single' | 'multiple';
 
 export class SelectionModel<T extends TableRow> extends Resource {

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

@@ -14,9 +14,10 @@ import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView } from '@dxos/schema';
 
-import { TableModel, type TableModelProps } from './table-model';
 import { TableView } from '../types';
 
+import { TableModel, type TableModelProps } from './table-model';
+
 // TODO(burdon): Tests are disabled in project.json since they bring in plugin deps.
 //  Restore once factored out into react-ui-table.
 

package/src/model/table-model.ts

@@ -2,40 +2,42 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, effect, signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, computed, effect, signal } from '@preact/signals-core';
 
 import { Resource } from '@dxos/context';
 import { Obj, Ref } from '@dxos/echo';
 import {
   type FieldSortType,
   FormatEnum,
-  getValue,
-  setValue,
   type JsonProp,
-  getSnapshot,
+  type JsonSchemaType,
   getSchema,
+  getSnapshot,
+  getValue,
+  setValue,
   toEffectSchema,
-  type JsonSchemaType,
 } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { ObjectId } from '@dxos/keys';
 import { isLiveObject } from '@dxos/live-object';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { type Label } from '@dxos/react-ui';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
-  type DxGridPlaneRange,
   type DxGridPlanePosition,
+  type DxGridPlaneRange,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
-import { type DataType, ProjectionModel, type PropertyType, validateSchema, type ValidationError } from '@dxos/schema';
+import { type DataType, ProjectionModel, type PropertyType, type ValidationError, validateSchema } from '@dxos/schema';
 
-import { type SelectionMode, SelectionModel } from './selection-model';
-import { TableSorting } from './table-sorting';
 import { TableView } from '../types';
 import { touch } from '../util';
 import { extractTagIds } from '../util/tag';
 
+import { type SelectionMode, SelectionModel } from './selection-model';
+import { TableSorting } from './table-sorting';
+
 // Domain types for cell classification
 export type TableCellType = 'standard' | 'draft' | 'header';
 
@@ -53,7 +55,7 @@ export type TableRow = Record<JsonProp, any> & { id: string };
 
 export type TableRowAction = {
   id: string;
-  translationKey: string;
+  label: Label;
 };
 
 export type TableFeatures = {
@@ -497,6 +499,7 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       setValue(snapshot, field.path, transformedValue);
 
       const validationErrors = this.validateDraftRowData(snapshot);
+      // TODO(thure): These errors sometimes result in a useless message like “is missing” (what is missing?)
       if (validationErrors.length > 0) {
         const error = validationErrors.find((err) => err.path === field.path);
         if (error) {

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

@@ -3,7 +3,7 @@
 //
 
 import { Schema } from 'effect';
-import { describe, expect, it, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { Obj } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
@@ -11,9 +11,10 @@ import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView } from '@dxos/schema';
 
+import { TableView } from '../types';
+
 import { TableModel, type TableModelProps } from './table-model';
 import { TablePresentation } from './table-presentation';
-import { TableView } from '../types';
 
 describe('TablePresentation', () => {
   describe('row reactivity', () => {

package/src/model/table-presentation.ts

@@ -6,7 +6,7 @@ import { signal } from '@preact/signals-core';
 import { isNotNullable } from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
-import { FormatEnum, getValue, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridCellValue,
@@ -16,12 +16,13 @@ import {
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
-import { VIEW_FIELD_LIMIT, type FieldType } from '@dxos/schema';
+import { type FieldType, VIEW_FIELD_LIMIT } from '@dxos/schema';
 
-import { type SelectionMode } from './selection-model';
-import { type TableRow, type TableModel } from './table-model';
 import { tableButtons, tableControls } from '../util';
 
+import { type SelectionMode } from './selection-model';
+import { type TableModel, type TableRow } from './table-model';
+
 /**
  * Presentation layer for a table component, handling cell rendering and grid display logic.
  * Manages rendering of table cells, headers, selection columns, and action columns across
@@ -67,6 +68,9 @@ export class TablePresentation<T extends TableRow = TableRow> {
       case 'frozenRowsEnd':
         cells = this.getDraftRowCells(range);
         break;
+      case 'fixedEndStart':
+        cells = this.getDraftSelectCells(range);
+        break;
       case 'fixedEndEnd':
         cells = this.getDraftActionCells(range);
         break;
@@ -199,7 +203,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       const targetObj = getValue(obj, field.path)?.target;
       if (targetObj) {
         const dxn = Obj.getDXN(targetObj)?.toString();
-        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>`;
+        cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
       }
     }
 
@@ -278,6 +282,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
       const draftRow = draftRows[row];
       for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+        const cellIndex = toPlaneCellIndex({ col, row });
         const field = fields[col];
         if (!field) {
           continue;
@@ -286,7 +291,6 @@ export class TablePresentation<T extends TableRow = TableRow> {
         this.createDataCell(cells, draftRow.data, field, col, row);
 
         if (this.model.hasDraftRowValidationError(row, field.path)) {
-          const cellIndex = toPlaneCellIndex({ col, row });
           const cellValue = cells[cellIndex];
           if (cellValue) {
             const existingClasses = cellValue.className || '';
@@ -294,6 +298,8 @@ export class TablePresentation<T extends TableRow = TableRow> {
             cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
           }
         }
+
+        cells[cellIndex].className += ' !bg-toolbarSurface';
       }
     }
 
@@ -408,6 +414,22 @@ export class TablePresentation<T extends TableRow = TableRow> {
         value: '',
         readonly: true,
         accessoryHtml: tableButtons.saveDraftRow.render({ rowIndex: row, disabled }),
+        className: '!bg-toolbarSurface',
+      };
+    }
+
+    return cells;
+  }
+
+  private getDraftSelectCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const draftRows = this.model.draftRows.value;
+
+    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+      cells[toPlaneCellIndex({ col: 0, row })] = {
+        value: '',
+        readonly: true,
+        className: '!bg-toolbarSurface',
       };
     }
 

package/src/model/table-sorting.ts

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, signal, type Signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 
-import { getValue, FormatEnum, TypeEnum, type SortDirectionType, type FieldSortType } from '@dxos/echo-schema';
+import { type FieldSortType, FormatEnum, type SortDirectionType, TypeEnum, getValue } from '@dxos/echo-schema';
 import { formatForDisplay } from '@dxos/react-ui-form';
-import type { PropertyType, FieldType, DataType, ProjectionModel } from '@dxos/schema';
+import type { DataType, FieldType, ProjectionModel, PropertyType } from '@dxos/schema';
 
 import { type TableRow } from './table-model';
 

package/src/playwright/smoke.spec.ts

@@ -4,11 +4,13 @@
 
 import { expect, test } from '@playwright/test';
 
+import { type DxGrid } from '@dxos/lit-grid';
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 import { TableManager } from './TableManager';
 
 const storyUrl = storybookUrl('ui-react-ui-table-table--default', 9004);
+const relationsStoryUrl = storybookUrl('ui-react-ui-table-relations--default', 9004);
 
 // NOTE(ZaymonFC): This test suite relies on the faker seed being set to 0 in the story.
 test.describe('Table', () => {
@@ -183,4 +185,94 @@ test.describe('Table', () => {
 
     await page.close();
   });
+
+  test('extant relations work as expected', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    const { page } = await setupPage(browser, { url: relationsStoryUrl });
+
+    // Wait for the page to load
+    await page.locator('dx-grid > .dx-grid').nth(1).waitFor({ state: 'visible' });
+
+    // Find the dx-grid element for the contactModel (second table)
+    // The contactModel is used in the second Table.Main component in the story
+    const dxGrid = page.locator('dx-grid').nth(1);
+    await dxGrid.waitFor({ state: 'visible' });
+
+    // Scroll to the last column (column 8)
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(8);
+    });
+
+    // Click on the cell at aria-rowindex=0 aria-colindex=8 to focus it
+    const targetCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="8"]');
+    await targetCell.click();
+
+    // Click again to engage edit mode
+    await page.keyboard.press('Enter');
+    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+
+    // Type the first few letters of an org name.
+    const orgName =
+      (await page
+        .locator('dx-grid')
+        .nth(0)
+        .locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="0"] .dx-grid__cell__content')
+        .textContent()) ?? 'never';
+    await page.keyboard.type(orgName.substring(0, 4), { delay: 500 });
+
+    // Assert that there is an element with aria-selected on the page
+    await expect(page.locator('[role="option"][aria-selected]')).toBeVisible();
+
+    // Type the enter key
+    await page.keyboard.press('Enter');
+
+    // Assert that the cell element has the org name
+    await expect(targetCell).toHaveText(orgName);
+
+    await page.close();
+  });
+
+  test('new relations work as expected', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    const { page } = await setupPage(browser, { url: relationsStoryUrl });
+
+    // Wait for the page to load
+    await page.locator('dx-grid > .dx-grid').nth(1).waitFor({ state: 'visible' });
+
+    // Find the dx-grid element for the contactModel (second table)
+    // The contactModel is used in the second Table.Main component in the story
+    const dxGrid = page.locator('dx-grid').nth(1);
+    await dxGrid.waitFor({ state: 'visible' });
+
+    // Scroll to the last column (column 8)
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(8);
+    });
+
+    // Click on the cell at aria-rowindex=0 aria-colindex=8 to focus it
+    const targetCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="8"]');
+    await targetCell.click();
+
+    // Click again to engage edit mode
+    await page.keyboard.press('Enter');
+    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+
+    // Type the first few letters of an org name.
+    const orgName = 'Sally';
+    await page.keyboard.type(orgName, { delay: 500 });
+
+    // Assert that there is an element with aria-selected on the page
+    await expect(page.locator('[role="option"][aria-selected]')).toBeVisible();
+
+    // Type the enter key
+    await page.keyboard.press('Enter');
+
+    // Click the save button in the popover
+    await page.getByTestId('save-button').click();
+
+    // Assert that the cell element has the org name
+    await expect(targetCell).toHaveText(orgName);
+
+    await page.close();
+  });
 });

package/src/testing/useTestTableModel.ts

@@ -13,7 +13,7 @@ import { useClientProvider } from '@dxos/react-client/testing';
 import { DataType, ProjectionModel } from '@dxos/schema';
 
 import { type TableController } from '../components';
-import { useTableModel, useAddRow } from '../hooks';
+import { useAddRow, useTableModel } from '../hooks';
 import { TablePresentation } from '../model';
 
 faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
@@ -93,7 +93,8 @@ export const useTestTableModel = () => {
 
   const handleInsertRow = useCallback(() => {
     model?.insertRow();
-  }, [model]);
+    tableRef.current?.focusDraft?.();
+  }, [model, tableRef.current]);
 
   const handleSaveView = useCallback(() => {
     model?.saveView();

package/src/translations.ts

@@ -14,8 +14,8 @@ export const translations = [
         'create object label': 'Create table',
         'table name placeholder': 'Table name',
         'settings title': 'Table settings',
-        'table schema label': 'Schema',
-        'new schema': 'New schema',
+        'table schema label': 'Record type',
+        'new schema': 'New record type',
         'continue label': 'Continue',
         'create stack section label': 'Create table',
         'add row label': 'Add row',

package/src/util/dynamic-table.ts

@@ -8,11 +8,11 @@ import { Obj } from '@dxos/echo';
 import { getTypename, toJsonSchema } from '@dxos/echo-schema';
 import type { JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
 import {
-  createView,
   type DataType,
-  getSchemaFromPropertyDefinitions,
   ProjectionModel,
   type SchemaPropertyDefinition,
+  createView,
+  getSchemaFromPropertyDefinitions,
 } from '@dxos/schema';
 
 import { TableView } from '../types';

package/src/util/schema.ts

@@ -3,7 +3,7 @@
 //
 
 import { Schema } from 'effect';
-import { isTypeLiteral, TypeLiteral } from 'effect/SchemaAST';
+import { TypeLiteral, isTypeLiteral } from 'effect/SchemaAST';
 
 /**
  * Creates a narrowed schema from an original schema that only includes

package/src/util/table-buttons.ts

@@ -40,7 +40,7 @@ const createButton = ({
     .join(' ');
 
   const positionClass = type === 'primary' ? 'inline-end-2' : 'inline-end-9';
-  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? 'disabled' : ''} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 
 const addColumnButton = {
@@ -130,6 +130,7 @@ const saveDraftRowButton = {
       disabled,
       data: {
         'data-row-index': rowIndex.toString(),
+        'data-variant': 'primary',
       },
       testId: 'table-save-draft-row-button',
     });

package/src/util/table-controls.ts

@@ -3,6 +3,8 @@
 //
 
 // Core types.
+import { accessoryHandlesPointerdownAttrs } from '@dxos/lit-grid';
+
 export type TableControl = 'checkbox' | 'switch';
 
 export type ControlData =
@@ -41,7 +43,7 @@ const renderInput = (
   preventToggle = false,
   testId: string,
 ) => {
-  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}"/>`;
+  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? 'checked' : ''} ${preventToggle ? 'onclick="return false"' : ''} ${disabled ? 'disabled' : ''} data-testid="${testId}" data-dx-grid-action="accessory"/>`;
 };
 
 export const CheckboxStory = ({
@@ -64,6 +66,7 @@ export const SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = fa
     [CONTROL_IDENTIFIERS.switch]: '',
     'data-row-index': rowIndex.toString(),
     'data-col-index': colIndex.toString(),
+    ...accessoryHandlesPointerdownAttrs,
   };
 
   return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, 'table-switch');

package/src/util/table.ts

@@ -5,7 +5,7 @@
 import { Match } from 'effect';
 
 import { Obj } from '@dxos/echo';
-import { type JsonPath, toEffectSchema, type JsonSchemaType } from '@dxos/echo-schema';
+import { type JsonPath, type JsonSchemaType, toEffectSchema } from '@dxos/echo-schema';
 import { type SimpleType } from '@dxos/effect';
 import { type CreateViewFromSpaceProps, type DataType, createViewFromSpace, getSchemaProperties } from '@dxos/schema';
 
@@ -18,7 +18,11 @@ type CreateTableProps = Omit<CreateViewFromSpaceProps, 'presentation'> & {
 export const createTable = async ({
   sizes,
   ...props
-}: CreateTableProps): Promise<{ jsonSchema: JsonSchemaType; view: DataType.View }> => {
+}: CreateTableProps): Promise<{
+  jsonSchema: JsonSchemaType;
+  view: DataType.View;
+  schema: ReturnType<typeof toEffectSchema>;
+}> => {
   const table = Obj.make(TableView, { sizes: {} });
   const { jsonSchema, view } = await createViewFromSpace({ ...props, presentation: table });
 
@@ -45,5 +49,5 @@ export const createTable = async ({
     )(property.type);
   }
 
-  return { jsonSchema, view };
+  return { jsonSchema, schema, view };
 };