@dxos/react-ui-table 0.8.4-main.9735255 → 0.8.4-main.abd8ff62ef

package/src/playwright/smoke.spec.ts

@@ -5,7 +5,7 @@
 import { expect, test } from '@playwright/test';
 
 import { type DxGrid } from '@dxos/lit-grid';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 import { TableManager } from './TableManager';
@@ -13,7 +13,7 @@ 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.
+// NOTE(ZaymonFC): This test suite relies on the random seed being set to 0 in the story.
 test.describe('Table', () => {
   test('Loads', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
@@ -121,8 +121,22 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  // Rest of add column test remains the same as it's a more complex flow.
-  test('add column', async ({ browser, browserName }) => {
+  test('add column without changing format', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+    const newColumnLabel = 'DEFAULT FORMAT COL';
+
+    await table.addColumn({ label: newColumnLabel });
+
+    await expect(page.getByRole('gridcell', { name: newColumnLabel })).toBeVisible();
+    await page.close();
+  });
+
+  test('add column with format', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
     test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
@@ -160,6 +174,35 @@ test.describe('Table', () => {
     await page.close();
   });
 
+  test('add row and edit cell', async ({ browser, browserName }) => {
+    test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
+    const { page } = await setupPage(browser, { url: storyUrl });
+    const table = new TableManager(page);
+
+    await table.grid.ready();
+
+    // Click the CTA row at the bottom to add a new row.
+    await table.grid.cell(0, 0, 'frozenRowsEnd').click();
+
+    // All schema fields are optional so the row is added directly to the grid (not as a draft).
+    const newCell = table.grid.cell(0, 10, 'grid');
+    await newCell.waitFor({ state: 'visible' });
+
+    // Focus should already be on the new row; engage edit mode.
+    await page.keyboard.press('Enter');
+    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+
+    // Type text and confirm.
+    const cellContent = 'New row content';
+    await page.keyboard.type(cellContent);
+    await page.keyboard.press('Enter');
+
+    // Assert the cell content is saved.
+    await expect(newCell).toHaveText(cellContent);
+    await page.close();
+  });
+
   // TODO(wittjosiah): Remove? Conflicts with story play function which is run as a unit test anyways.
   test.skip('extant relations work as expected', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
@@ -267,7 +310,7 @@ test.describe('Table', () => {
       dxGridElement.scrollToColumn(6);
     });
 
-    const nonRefContent = faker.lorem.words(3);
+    const nonRefContent = random.lorem.words(3);
     const nonRefCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="6"]');
     await nonRefCell.click();
     await page.keyboard.press('Enter');

package/src/testing/useTestTableModel.ts

@@ -7,10 +7,10 @@ import { type RefObject, useCallback, useContext, useMemo, useRef } from 'react'
 
 import { type Database, type Type } from '@dxos/echo';
 import { isMutable } from '@dxos/echo/internal';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
 import { useClientStory } from '@dxos/react-client/testing';
-import { useGlobalFilteredObjects } from '@dxos/react-ui-searchlist';
+import { useGlobalFilteredObjects } from '@dxos/react-ui-search';
 import { type ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
 
 import { type TableController } from '../components';
@@ -18,9 +18,9 @@ import { useAddRow, useProjectionModel, useTableModel } from '../hooks';
 import { type TableModel, TablePresentation } from '../model';
 import { Table } from '../types';
 
-faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
+random.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
 
-export type TestTableModel<T extends Type.Obj.Any = Type.Obj.Any> = {
+export type TestTableModel<T extends Type.AnyObj = Type.AnyObj> = {
   schema: T | undefined;
   table: Table.Table | undefined;
   projection: ProjectionModel | undefined;
@@ -38,7 +38,7 @@ export type TestTableModel<T extends Type.Obj.Any = Type.Obj.Any> = {
  * 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 = <T extends Type.Obj.Any = Type.Obj.Any>(): TestTableModel<T> => {
+export const useTestTableModel = <T extends Type.AnyObj = Type.AnyObj>(): TestTableModel<T> => {
   const registry = useContext(RegistryContext);
   const { space } = useClientStory();
   const db = space?.db;
@@ -97,7 +97,7 @@ export const useTestTableModel = <T extends Type.Obj.Any = Type.Obj.Any>(): Test
     rows: filteredObjects,
     onInsertRow: addRow,
     onDeleteRows: handleDeleteRows,
-    onDeleteColumn: handleDeleteColumn,
+    onColumnDelete: handleDeleteColumn,
     onCellUpdate: handleCellUpdate,
     onRowOrderChange: handleRowOrderChange,
   });

package/src/translations.ts

@@ -10,27 +10,25 @@ export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'object placeholder': 'New table',
-        'create object label': 'Create table',
-        'table name placeholder': 'Table name',
-        'settings title': 'Table settings',
-        'table schema label': 'Type',
-        'new schema': 'New type',
-        'continue label': 'Continue',
-        'create stack section label': 'Create table',
-        'add row label': 'Add row',
-        'create comment': 'Create thread',
-        'column action sort descending': 'Sort Descending',
-        'column action sort ascending': 'Sort Ascending',
-        'column action clear sorting': 'Clear Sorting',
-        'column action settings': 'Column Settings',
-        'column action delete': 'Delete Column',
-        'delete row label': 'Delete row',
-        'bulk delete row label': 'Delete selected rows',
-        'column deleted label': 'Column deleted',
-        'new column button label': 'Create column',
-        'create new object label': 'Create new object “{{text}}”',
-        'save view label': 'Save changes to view',
+        'object.placeholder': 'New table',
+        'create-object.label': 'Create table',
+        'table-name.placeholder': 'Table name',
+        'settings.title': 'Table settings',
+        'table-schema.label': 'Type',
+        'continue.label': 'Continue',
+        'create-stack-section.label': 'Create table',
+        'add-row.label': 'Add row',
+        'column-action-sort-descending.menu': 'Sort Descending',
+        'column-action-sort-ascending.menu': 'Sort Ascending',
+        'column-action-clear-sorting.menu': 'Clear Sorting',
+        'column-action-settings.menu': 'Column Settings',
+        'column-action-delete.menu': 'Delete Column',
+        'delete-row.label': 'Delete row',
+        'bulk-delete-row.label': 'Delete selected rows',
+        'column-deleted.label': 'Column deleted',
+        'new-column-button.label': 'Create column',
+        'create-new-object.label': 'Create new object “{{text}}”',
+        'save-view.label': 'Save changes to view',
       },
     },
   },

package/src/types/Table.ts

@@ -6,14 +6,15 @@ import * as Match from 'effect/Match';
 import * as Schema from 'effect/Schema';
 import * as SchemaAST from 'effect/SchemaAST';
 
-import { Obj, Ref, Type } from '@dxos/echo';
+import { Annotation, JsonSchema, Obj, Ref, Type } from '@dxos/echo';
+import { View } from '@dxos/echo';
 import { FormInputAnnotation, type JsonPath, type JsonSchemaType, LabelAnnotation } from '@dxos/echo/internal';
-import { View, ViewAnnotation } from '@dxos/schema';
+import { ViewAnnotation } from '@dxos/schema';
 
 export const Table = Schema.Struct({
   name: Schema.String.pipe(Schema.optional),
 
-  view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),
+  view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),
 
   sizes: Schema.Record({
     // TODO(wittjosiah): Should be JsonPath.
@@ -22,11 +23,15 @@ export const Table = Schema.Struct({
   }).pipe(Schema.mutable, FormInputAnnotation.set(false)),
 }).pipe(
   Type.object({
-    typename: 'dxos.org/type/Table',
-    version: '0.2.0',
+    typename: 'org.dxos.type.table',
+    version: '0.1.0',
   }),
   LabelAnnotation.set(['name']),
-  ViewAnnotation.set(true),
+  ViewAnnotation.set(['view']),
+  Annotation.IconAnnotation.set({
+    icon: 'ph--table--regular',
+    hue: 'green',
+  }),
 );
 
 export interface Table extends Schema.Schema.Type<typeof Table> {}
@@ -47,7 +52,7 @@ export const make = ({ name, sizes = {}, view, jsonSchema }: MakeProps): Table =
 
   // Preset sizes.
   if (jsonSchema) {
-    const schema = Type.toEffectSchema(jsonSchema);
+    const schema = JsonSchema.toEffectSchema(jsonSchema);
     const properties = SchemaAST.getPropertySignatures(schema.ast);
     for (const property of properties) {
       const name = property.name.toString() as JsonPath;
@@ -72,19 +77,3 @@ export const make = ({ name, sizes = {}, view, jsonSchema }: MakeProps): Table =
 
   return table;
 };
-
-//
-// V1
-//
-
-export const TableV1 = Schema.Struct({
-  sizes: Schema.Record({
-    key: Schema.String,
-    value: Schema.Number,
-  }).pipe(Schema.mutable),
-}).pipe(
-  Type.object({
-    typename: 'dxos.org/type/Table',
-    version: '0.1.0',
-  }),
-);

package/src/util/dynamic-table.test.ts

@@ -0,0 +1,77 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Registry } from '@effect-atom/atom-react';
+import { describe, expect, test } from 'vitest';
+
+import { Format } from '@dxos/echo';
+
+import { type TablePropertyDefinition, getBaseSchema, makeDynamicTable } from './dynamic-table';
+
+// Quarantined in CI only — flaky under the workflow's `--no-file-parallelism`
+// runner / hoisted node_modules layout. Local runs still cover the suite so
+// regressions surface during development.
+// Trunk.io tracking:
+//   https://app.trunk.io/dxos/flaky-tests/test/fe424f97-f8a1-5f2f-a191-5b3ec4e8f6b7
+//   https://app.trunk.io/dxos/flaky-tests/test/ee00f293-9b9b-55ed-b4cd-48a07edea96c
+const describeOutsideCI = process.env.CI ? describe.skip : describe;
+describeOutsideCI('makeDynamicTable', () => {
+  /**
+   * Base case: plain jsonSchema (not from Echo / JsonSchema.toJsonSchema). Does not exercise the path
+   * where projection or schema are reactive, so this does not reproduce the Obj.update regression.
+   * Confirms makeDynamicTable + setProperties (title) works with plain objects.
+   */
+  test('makeDynamicTable with plain jsonSchema and properties with title does not throw', () => {
+    const registry = Registry.make();
+    const jsonSchema = {
+      type: 'object' as const,
+      properties: {
+        id: { type: 'string' as const },
+        name: { type: 'string' as const },
+      },
+      required: ['id'],
+    };
+    const properties: TablePropertyDefinition[] = [
+      { name: 'id', format: Format.TypeFormat.String },
+      { name: 'name', format: Format.TypeFormat.String, title: 'Name' },
+    ];
+
+    expect(() => {
+      const { projection, object } = makeDynamicTable({
+        registry,
+        jsonSchema,
+        properties,
+      });
+      expect(projection).toBeDefined();
+      expect(object).toBeDefined();
+      expect(projection.getFields().length).toBeGreaterThan(0);
+    }).not.toThrow();
+  });
+
+  /**
+   * Regression test for the path where jsonSchema comes from getBaseSchema(typename, properties).
+   * That path uses Echo (ViewModel.make, JsonSchema.toJsonSchema); mutations must run inside Obj.update and on a
+   * cloned schema. This test ensures that flow does not throw.
+   */
+  test('makeDynamicTable with jsonSchema from getBaseSchema(typename, properties) and properties with title does not throw', () => {
+    const registry = Registry.make();
+    const typename = 'com.example.type.dynamicTableTest';
+    const properties: TablePropertyDefinition[] = [
+      { name: 'id', format: Format.TypeFormat.String },
+      { name: 'name', format: Format.TypeFormat.String, title: 'Name' },
+    ];
+    const { jsonSchema } = getBaseSchema({ typename, properties });
+
+    expect(() => {
+      const { projection, object } = makeDynamicTable({
+        registry,
+        jsonSchema,
+        properties,
+      });
+      expect(projection).toBeDefined();
+      expect(object).toBeDefined();
+      expect(projection.getFields().length).toBeGreaterThan(0);
+    }).not.toThrow();
+  });
+});

package/src/util/dynamic-table.ts

@@ -3,13 +3,15 @@
 //
 
 import { type Registry } from '@effect-atom/atom-react';
+import type * as Types from 'effect/Types';
 
-import { Filter, type JsonSchema, Obj, Order, Query, type QueryAST, Ref, Type } from '@dxos/echo';
+import { Filter, JsonSchema, Obj, Order, Query, type QueryAST, Ref, Type } from '@dxos/echo';
+import { type View } from '@dxos/echo';
 import {
   ProjectionModel,
   type SchemaPropertyDefinition,
-  View,
-  createDirectChangeCallback,
+  ViewModel,
+  createEchoChangeCallback,
   getSchemaFromPropertyDefinitions,
 } from '@dxos/schema';
 
@@ -34,16 +36,16 @@ export const getBaseSchema = ({
   properties,
   jsonSchema,
 }: {
-  schema?: Type.Entity.Any;
+  schema?: Type.AnyEntity;
   typename?: string;
   properties?: TablePropertyDefinition[];
-  jsonSchema?: JsonSchema.JsonSchema;
-}): { typename: string; jsonSchema: JsonSchema.JsonSchema } => {
+  jsonSchema?: Types.DeepMutable<JsonSchema.JsonSchema>;
+}): { typename: string; jsonSchema: Types.DeepMutable<JsonSchema.JsonSchema> } => {
   if (typename && properties) {
     const schema = getSchemaFromPropertyDefinitions(typename, properties);
-    return { typename: schema.typename, jsonSchema: schema.jsonSchema };
+    return { typename: schema.typename, jsonSchema: JsonSchema.toJsonSchema(schema) };
   } else if (schema) {
-    return { typename: Type.getTypename(schema)!, jsonSchema: Type.toJsonSchema(schema) };
+    return { typename: Type.getTypename(schema)!, jsonSchema: JsonSchema.toJsonSchema(schema) };
   } else if (typename && jsonSchema) {
     return { typename, jsonSchema };
   } else {
@@ -57,22 +59,21 @@ export const makeDynamicTable = ({
   properties,
 }: {
   registry: Registry.Registry;
-  jsonSchema: JsonSchema.JsonSchema;
+  jsonSchema: Types.DeepMutable<JsonSchema.JsonSchema>;
   properties?: TablePropertyDefinition[];
 }): { projection: ProjectionModel; object: Table.Table } => {
-  const view = View.make({
+  const view = ViewModel.make({
     query: Query.select(Filter.everything()),
     jsonSchema,
     ...(properties && { fields: properties.map((property) => property.name) }),
   });
   const object = Obj.make(Table.Table, { view: Ref.make(view), sizes: {} });
 
-  // Use direct change callback for in-memory objects (non-ECHO backed).
   const projection = new ProjectionModel({
     registry,
     view,
     baseSchema: jsonSchema,
-    change: createDirectChangeCallback(view.projection, jsonSchema),
+    change: createEchoChangeCallback(view, jsonSchema),
   });
   projection.normalizeView();
   if (properties && projection.getFields()) {
@@ -92,8 +93,8 @@ const setProperties = (
     const field = projection.getFields().find((field) => field.path === property.name);
     if (field) {
       if (property.size !== undefined) {
-        Obj.change(table, (t) => {
-          t.sizes[field.path] = property.size!;
+        Obj.update(table, (table) => {
+          table.sizes[field.path] = property.size!;
         });
       }
 
@@ -110,9 +111,9 @@ const setProperties = (
         const currentQuery = Query.fromAst(Obj.getSnapshot(view).query.ast);
         // Use any type parameter since we're working with dynamic field paths
         const newQuery = currentQuery.orderBy(Order.property<any>(field.path as string, property.sort));
-        Obj.change(view, (v) => {
+        Obj.update(view, (view) => {
           // Type assertion needed because Query AST types have some variance issues.
-          v.query.ast = newQuery.ast as typeof v.query.ast;
+          view.query.ast = newQuery.ast as typeof view.query.ast;
         });
       }
     }

package/src/util/query-ast.ts

@@ -15,5 +15,8 @@ export const extractOrder = (queryAst: QueryAST.Query): readonly QueryAST.Order[
   if (queryAst.type === 'options') {
     return extractOrder(queryAst.query);
   }
+  if (queryAst.type === 'from') {
+    return extractOrder(queryAst.query);
+  }
   return undefined;
 };

package/src/util/table-buttons.ts

@@ -39,7 +39,7 @@ const createButton = ({
     .map(([k, v]) => `${k}="${v}"`)
     .join(' ');
 
-  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 aspect-square pli-0.5 min-bs-0" ${dataAttrs} ${disabled ? 'disabled' : ''} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button w-6 aspect-square px-0.5 min-h-0" ${dataAttrs} ${disabled ? 'disabled' : ''} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 
 const addColumnButton = {

package/src/util/table-controls.ts

@@ -25,8 +25,8 @@ export const CONTROL_IDENTIFIERS = {
 } as const;
 
 const BASE_CLASSES = {
-  checkbox: 'absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox',
-  switch: 'absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch',
+  checkbox: 'absolute inset-y-[.375rem] end-[.375rem] dx-checkbox',
+  switch: 'absolute inset-y-[.25rem] end-[.25rem] dx-checkbox--switch',
 } as const;
 
 const renderAttributes = (data: Record<string, string>) => {