@dxos/react-ui-table 0.8.3-staging.0fa589b → 0.8.4-main.28f8d3d

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');
+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', () => {
@@ -28,12 +30,12 @@ test.describe('Table', () => {
 
     await table.grid.ready();
     await table.sortColumn(0, 'descending');
-    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Uwe Øvergård');
-    await expect(table.grid.cell(0, 9, 'grid')).toContainText('Anita');
+    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Sit.');
+    await expect(table.grid.cell(0, 9, 'grid')).toContainText('Aut.');
 
     await table.sortColumn(0, 'ascending');
-    await expect(table.grid.cell(0, 0, 'grid')).toContainText('Anita');
-    await expect(table.grid.cell(0, 9, 'grid')).toHaveText('Uwe Øvergård');
+    await expect(table.grid.cell(0, 0, 'grid')).toContainText('Aut.');
+    await expect(table.grid.cell(0, 9, 'grid')).toHaveText('Sit.');
     await page.close();
   });
 
@@ -65,7 +67,7 @@ test.describe('Table', () => {
 
     await table.grid.ready();
     await table.deleteRow(0);
-    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' })).toHaveCount(0);
+    await expect(page.getByRole('gridcell', { name: 'Sapiente.' })).toHaveCount(0);
     await page.close();
   });
 
@@ -80,8 +82,8 @@ test.describe('Table', () => {
     // Delete action affects all selected rows.
     await table.deleteRow(0);
 
-    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' })).toHaveCount(0);
-    await expect(page.getByRole('gridcell', { name: 'Phonthip Sigurjónsson' })).toHaveCount(0);
+    await expect(page.getByRole('gridcell', { name: 'Sapiente.' })).toHaveCount(0);
+    await expect(page.getByRole('gridcell', { name: 'Beatae.' })).toHaveCount(0);
     await expect(table.grid.cellsWithinPlane('grid')).toHaveCount(0);
     await page.close();
   });
@@ -112,7 +114,6 @@ test.describe('Table', () => {
   });
 
   // Rest of add column test remains the same as it's a more complex flow.
-  // TODO(ZaymonFC): Restore this after fixing format selection.
   test('add column', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
     const { page } = await setupPage(browser, { url: storyUrl });
@@ -139,19 +140,21 @@ test.describe('Table', () => {
     await table.grid.panByWheel(10000, 0);
 
     await table.grid.cell(4, 0, 'grid').click();
-    await page.keyboard.press('A');
-    await page.keyboard.press('N');
-    await page.getByRole('option', { name: 'Anita Mayer' }).click();
+    // TODO(wittjosiah): Surprisingly long delay needed here.
+    await page.keyboard.press('A', { delay: 1_000 });
+    await page.keyboard.press('u', { delay: 1_000 });
+    await page.getByRole('option', { name: 'Aut.' }).click();
 
     // Assert that the value is shown in the cell.
-    await expect(page.getByRole('gridcell', { name: 'Anita Mayer' }).first()).toBeVisible();
+    await expect(page.getByRole('gridcell', { name: 'Aut.' }).first()).toBeVisible();
 
     // Create new object.
     await table.grid.cell(4, 1, 'grid').click();
-    await page.keyboard.type('t');
-    await page.keyboard.type('e');
-    await page.keyboard.type('s');
-    await page.keyboard.type('t');
+    // TODO(wittjosiah): Surprisingly long delay needed here.
+    await page.keyboard.type('t', { delay: 1_000 });
+    await page.keyboard.type('e', { delay: 1_000 });
+    await page.keyboard.type('s', { delay: 1_000 });
+    await page.keyboard.type('t', { delay: 1_000 });
     await page.getByText('Create new object', { exact: false }).click();
     await page.getByTestId('save-button').click();
 
@@ -172,13 +175,103 @@ test.describe('Table', () => {
     await page.getByTestId('table-switch').nth(7).click();
 
     // Test that checks are durable in the data model by sorting.
-    await table.sortColumn(3, 'descending');
+    await table.sortColumn(1, 'descending');
 
     // Assert the first two switch checkboxes are checked.
     await expect(page.getByTestId('table-switch').first()).toBeChecked();
     await expect(page.getByTestId('table-switch').nth(1)).toBeChecked();
-    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Anita Mayer');
-    await expect(table.grid.cell(0, 1, 'grid')).toHaveText('Uwe Øvergård');
+    await expect(table.grid.cell(0, 0, 'grid')).toHaveText('Sapiente.');
+    await expect(table.grid.cell(0, 1, 'grid')).toHaveText('Beatae.');
+
+    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/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './useTestTableModel';

package/src/testing/useTestTableModel.ts

@@ -0,0 +1,123 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useMemo, useRef } from 'react';
+
+import { isMutable, toJsonSchema } from '@dxos/echo-schema';
+import { useGlobalFilteredObjects } from '@dxos/plugin-search';
+import { faker } from '@dxos/random';
+import { useClient } from '@dxos/react-client';
+import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { useClientProvider } from '@dxos/react-client/testing';
+import { DataType, ProjectionModel } from '@dxos/schema';
+
+import { type TableController } from '../components';
+import { useAddRow, useTableModel } from '../hooks';
+import { TablePresentation } from '../model';
+
+faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
+
+/**
+ * Custom hook to create and manage a test table model for storybook demonstrations.
+ * Provides table data, schema, and handlers for table operations.
+ */
+export const useTestTableModel = () => {
+  const client = useClient();
+  const { space } = useClientProvider();
+
+  const views = useQuery(space, Filter.type(DataType.View));
+  const view = useMemo(() => views.at(0), [views]);
+  const schema = useSchema(client, space, view?.query.typename);
+  const jsonSchema = useMemo(() => (schema ? toJsonSchema(schema) : undefined), [schema]);
+
+  const projection = useMemo(() => {
+    if (schema && view?.projection) {
+      return new ProjectionModel(toJsonSchema(schema), view.projection);
+    }
+  }, [schema, view?.projection]);
+
+  const features = useMemo(
+    () => ({
+      selection: { enabled: true, mode: 'multiple' as const },
+      dataEditable: true,
+      schemaEditable: schema && isMutable(schema),
+    }),
+    [schema],
+  );
+
+  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+  const filteredObjects = useGlobalFilteredObjects(objects);
+
+  const tableRef = useRef<TableController>(null);
+  const handleCellUpdate = useCallback((cell: any) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+
+  const handleRowOrderChange = useCallback(() => {
+    tableRef.current?.update?.();
+  }, []);
+
+  const addRow = useAddRow({ space, schema });
+
+  const handleDeleteRows = useCallback(
+    (_: number, objects: any[]) => {
+      for (const object of objects) {
+        space?.db.remove(object);
+      }
+    },
+    [space],
+  );
+
+  const handleDeleteColumn = useCallback(
+    (fieldId: string) => {
+      if (projection) {
+        projection.deleteFieldProjection(fieldId);
+      }
+    },
+    [projection],
+  );
+
+  const model = useTableModel({
+    view,
+    schema: jsonSchema,
+    projection,
+    features,
+    rows: filteredObjects,
+    onInsertRow: addRow,
+    onDeleteRows: handleDeleteRows,
+    onDeleteColumn: handleDeleteColumn,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChange: handleRowOrderChange,
+  });
+
+  const handleInsertRow = useCallback(() => {
+    model?.insertRow();
+    tableRef.current?.focusDraft?.();
+  }, [model, tableRef.current]);
+
+  const handleSaveView = useCallback(() => {
+    model?.saveView();
+  }, [model]);
+
+  const presentation = useMemo(() => {
+    if (model) {
+      return new TablePresentation(model);
+    }
+  }, [model]);
+
+  return {
+    schema,
+    view,
+    projection,
+    tableRef,
+    model,
+    presentation,
+    space,
+    client,
+    handleInsertRow,
+    handleSaveView,
+    handleDeleteRows,
+    handleDeleteColumn,
+  };
+};

package/src/translations.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-export const translationKey = 'table';
+import { type Resource } from '@dxos/react-ui';
 
-export default [
+export const translationKey = 'react-ui-table';
+
+export const translations = [
   {
     'en-US': {
       [translationKey]: {
@@ -12,8 +14,8 @@ export default [
         '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',
@@ -32,4 +34,4 @@ export default [
       },
     },
   },
-] as const;
+] as const satisfies Resource[];

package/src/types/index.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-export * from './table';
+export * from './schema';

package/src/types/schema.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Schema } from 'effect';
+
+import { Type } from '@dxos/echo';
+import { JsonPath } from '@dxos/effect';
+
+export const TableView = Schema.Struct({
+  sizes: Schema.Record({
+    key: JsonPath,
+    value: Schema.Number,
+  }).pipe(Schema.mutable),
+}).pipe(Type.Obj({ typename: 'dxos.org/type/TableView', version: '0.1.0' }));
+export type TableView = Schema.Schema.Type<typeof TableView>;

package/src/util/dynamic-table.ts

@@ -4,18 +4,18 @@
 
 import { type Schema } from 'effect';
 
-import { Obj, Ref } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
 import { getTypename, toJsonSchema } from '@dxos/echo-schema';
 import type { JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
 import {
+  type DataType,
+  ProjectionModel,
+  type SchemaPropertyDefinition,
   createView,
   getSchemaFromPropertyDefinitions,
-  ViewProjection,
-  type ViewType,
-  type SchemaPropertyDefinition,
 } from '@dxos/schema';
 
-import { TableType } from '../types';
+import { TableView } from '../types';
 
 // TODO(ZaymonFC): Upstream these extra fields to SchemaPropertyDefinition to enhance schema-tools schema creation.
 type PropertyDisplayProps = {
@@ -61,32 +61,34 @@ export const makeDynamicTable = ({
   typename: string;
   jsonSchema: JsonSchemaType;
   properties?: TablePropertyDefinition[];
-}): { table: TableType; projection: ViewProjection } => {
+}): { projection: ProjectionModel; view: DataType.View } => {
+  const table = Obj.make(TableView, { sizes: {} });
   const view = createView({
-    name: 'dynamic-table',
     typename,
     jsonSchema,
+    presentation: table,
     ...(properties && { fields: properties.map((property) => property.name) }),
   });
 
-  const table = Obj.make(TableType, { name: 'dynamic-table', view: Ref.make(view) });
-  const projection = new ViewProjection(jsonSchema, view);
-  if (properties && view.fields) {
-    setProperties(view, projection, properties);
+  const projection = new ProjectionModel(jsonSchema, view.projection);
+  if (properties && projection.fields) {
+    setProperties(view, projection, table, properties);
   }
 
-  return {
-    table,
-    projection,
-  };
+  return { projection, view };
 };
 
-const setProperties = (view: ViewType, projection: ViewProjection, properties: TablePropertyDefinition[]) => {
+const setProperties = (
+  view: DataType.View,
+  projection: ProjectionModel,
+  table: TableView,
+  properties: TablePropertyDefinition[],
+) => {
   for (const property of properties) {
-    const field = view.fields.find((field) => field.path === property.name);
+    const field = projection.fields.find((field) => field.path === property.name);
     if (field) {
       if (property.size !== undefined) {
-        field.size = property.size;
+        table.sizes[field.path] = property.size;
       }
 
       if (property.title !== undefined) {

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

@@ -2,13 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell' | 'sort';
+export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell' | 'sort' | 'saveDraftRow';
 
 export const BUTTON_IDENTIFIERS: { [K in TableButton]: string } = {
   columnSettings: 'data-table-column-settings-button',
   newColumn: 'data-table-new-column-button',
   referencedCell: 'data-table-ref-cell-button',
   rowMenu: 'data-table-row-menu-button',
+  saveDraftRow: 'data-table-save-draft-row-button',
   sort: 'data-table-sort-button',
 } as const;
 
@@ -16,6 +17,7 @@ type ButtonData =
   | { type: 'columnSettings'; fieldId: string }
   | { type: 'newColumn'; disabled?: boolean }
   | { type: 'rowMenu'; rowIndex: number }
+  | { type: 'saveDraftRow'; rowIndex: number; disabled?: boolean }
   | { type: 'sort'; fieldId: string; direction?: 'asc' | 'desc' };
 
 const createButton = ({
@@ -38,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 = {
@@ -118,9 +120,31 @@ const sortButton = {
   }),
 } as const;
 
+const saveDraftRowButton = {
+  attr: BUTTON_IDENTIFIERS.saveDraftRow,
+  icon: 'ph--floppy-disk--regular',
+  render: ({ rowIndex, disabled }: Omit<Extract<ButtonData, { type: 'saveDraftRow' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.saveDraftRow,
+      icon: saveDraftRowButton.icon,
+      disabled,
+      data: {
+        'data-row-index': rowIndex.toString(),
+        'data-variant': 'primary',
+      },
+      testId: 'table-save-draft-row-button',
+    });
+  },
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'saveDraftRow' }> => ({
+    type: 'saveDraftRow',
+    rowIndex: Number(el.getAttribute('data-row-index')!),
+  }),
+} as const;
+
 export const tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
   rowMenu: rowMenuButton,
+  saveDraftRow: saveDraftRowButton,
   sort: sortButton,
 } as const;

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');