@dxos/react-ui-table 0.8.4-main.28f8d3d → 0.8.4-main.406dc2a

package/src/playwright/smoke.spec.ts

@@ -5,6 +5,7 @@
 import { expect, test } from '@playwright/test';
 
 import { type DxGrid } from '@dxos/lit-grid';
+import { faker } from '@dxos/random';
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
 import { TableManager } from './TableManager';
@@ -16,6 +17,7 @@ const relationsStoryUrl = storybookUrl('ui-react-ui-table-relations--default', 9
 test.describe('Table', () => {
   test('Loads', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -25,6 +27,7 @@ test.describe('Table', () => {
 
   test('sort', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -41,6 +44,7 @@ test.describe('Table', () => {
 
   test('selection', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -62,6 +66,7 @@ test.describe('Table', () => {
 
   test('delete row', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -73,6 +78,7 @@ test.describe('Table', () => {
 
   test('delete row--select all', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -90,6 +96,7 @@ test.describe('Table', () => {
 
   test('delete column', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -116,6 +123,7 @@ test.describe('Table', () => {
   // Rest of add column test remains the same as it's a more complex flow.
   test('add column', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -128,44 +136,9 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('reference > reference / create new object', async ({ browser, browserName }) => {
-    test.skip(browserName === 'webkit');
-    const { page } = await setupPage(browser, { url: storyUrl });
-    const table = new TableManager(page);
-
-    await table.grid.ready();
-
-    // Reference existing object.
-    // Scroll over to the manager column.
-    await table.grid.panByWheel(10000, 0);
-
-    await table.grid.cell(4, 0, 'grid').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: 'Aut.' }).first()).toBeVisible();
-
-    // Create new object.
-    await table.grid.cell(4, 1, 'grid').click();
-    // 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();
-
-    // Scroll to the left.
-    await page.getByRole('gridcell', { name: 'test' }).first().click();
-
-    await page.close();
-  });
-
-  test('test toggles', async ({ browser, browserName }) => {
+  test.skip('test toggles', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: storyUrl });
     const table = new TableManager(page);
 
@@ -188,6 +161,7 @@ test.describe('Table', () => {
 
   test('extant relations work as expected', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: relationsStoryUrl });
 
     // Wait for the page to load
@@ -198,18 +172,22 @@ test.describe('Table', () => {
     const dxGrid = page.locator('dx-grid').nth(1);
     await dxGrid.waitFor({ state: 'visible' });
 
-    // Scroll to the last column (column 8)
+    // Scroll to the last column (column 4)
     await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
-      dxGridElement.scrollToColumn(8);
+      dxGridElement.scrollToColumn(4);
     });
 
-    // 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"]');
+    // Click on the cell at aria-rowindex=0 aria-colindex=4 to focus it
+    const targetCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
     await targetCell.click();
 
     // Click again to engage edit mode
     await page.keyboard.press('Enter');
-    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+
+    // Click on the combobox to open options
+    await page.getByRole('combobox').click();
+    await page.pause();
+    await page.getByPlaceholder('Search...').focus();
 
     // Type the first few letters of an org name.
     const orgName =
@@ -226,6 +204,9 @@ test.describe('Table', () => {
     // Type the enter key
     await page.keyboard.press('Enter');
 
+    // Save the result
+    await page.getByTestId('save-button').click();
+
     // Assert that the cell element has the org name
     await expect(targetCell).toHaveText(orgName);
 
@@ -234,6 +215,7 @@ test.describe('Table', () => {
 
   test('new relations work as expected', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
+    test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: relationsStoryUrl });
 
     // Wait for the page to load
@@ -244,18 +226,21 @@ test.describe('Table', () => {
     const dxGrid = page.locator('dx-grid').nth(1);
     await dxGrid.waitFor({ state: 'visible' });
 
-    // Scroll to the last column (column 8)
+    // Scroll to the last column (column 4)
     await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
-      dxGridElement.scrollToColumn(8);
+      dxGridElement.scrollToColumn(4);
     });
 
     // 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"]');
+    const targetCell = dxGrid.locator('[data-dx-grid-plane="grid"] [aria-rowindex="0"][aria-colindex="4"]');
     await targetCell.click();
 
     // Click again to engage edit mode
     await page.keyboard.press('Enter');
-    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+
+    // Click on the combobox to open options
+    await page.getByRole('combobox').click();
+    await page.getByPlaceholder('Search...').focus();
 
     // Type the first few letters of an org name.
     const orgName = 'Sally';
@@ -266,6 +251,7 @@ test.describe('Table', () => {
 
     // Type the enter key
     await page.keyboard.press('Enter');
+    await page.pause();
 
     // Click the save button in the popover
     await page.getByTestId('save-button').click();
@@ -273,6 +259,20 @@ test.describe('Table', () => {
     // Assert that the cell element has the org name
     await expect(targetCell).toHaveText(orgName);
 
+    // Make a change to a non-ref cell to check that populated refs don’t cause problems with snapshots or schemas.
+    await dxGrid.evaluate(async (dxGridElement: DxGrid) => {
+      dxGridElement.scrollToColumn(6);
+    });
+
+    const nonRefContent = faker.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');
+    await page.getByTestId('grid.cell-editor').waitFor({ state: 'visible' });
+    await page.keyboard.type(nonRefContent, { delay: 500 });
+    await page.keyboard.press('Enter');
+    await expect(nonRefCell).toHaveText(nonRefContent);
+
     await page.close();
   });
 });

package/src/testing/useTestTableModel.ts

@@ -4,13 +4,13 @@
 
 import { useCallback, useMemo, useRef } from 'react';
 
-import { isMutable, toJsonSchema } from '@dxos/echo-schema';
+import { isMutable, toJsonSchema } from '@dxos/echo/internal';
 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 { DataType, ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
 
 import { type TableController } from '../components';
 import { useAddRow, useTableModel } from '../hooks';
@@ -28,12 +28,15 @@ export const useTestTableModel = () => {
 
   const views = useQuery(space, Filter.type(DataType.View));
   const view = useMemo(() => views.at(0), [views]);
-  const schema = useSchema(client, space, view?.query.typename);
+  const typename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
+  const schema = useSchema(client, space, typename);
   const jsonSchema = useMemo(() => (schema ? toJsonSchema(schema) : undefined), [schema]);
 
   const projection = useMemo(() => {
     if (schema && view?.projection) {
-      return new ProjectionModel(toJsonSchema(schema), view.projection);
+      const projection = new ProjectionModel(toJsonSchema(schema), view.projection);
+      projection.normalizeView();
+      return projection;
     }
   }, [schema, view?.projection]);
 
@@ -92,8 +95,8 @@ export const useTestTableModel = () => {
   });
 
   const handleInsertRow = useCallback(() => {
-    model?.insertRow();
-    tableRef.current?.focusDraft?.();
+    const insertResult = model?.insertRow();
+    tableRef.current?.handleInsertRowResult?.(insertResult);
   }, [model, tableRef.current]);
 
   const handleSaveView = useCallback(() => {

package/src/types/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './schema';
+export * as Table from './schema';

package/src/types/schema.ts

@@ -2,15 +2,72 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Match from 'effect/Match';
+import * as Schema from 'effect/Schema';
 
-import { Type } from '@dxos/echo';
-import { JsonPath } from '@dxos/effect';
+import { Obj, Type } from '@dxos/echo';
+import { JsonPath, type JsonSchemaType, toEffectSchema } from '@dxos/echo/internal';
+import { ViewAnnotation } from '@dxos/echo/internal';
+import { type SimpleType } from '@dxos/effect';
+import { type CreateViewFromSpaceProps, type DataType, createViewFromSpace, getSchemaProperties } from '@dxos/schema';
 
-export const TableView = Schema.Struct({
+export const Table = 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>;
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Table',
+    version: '0.1.0',
+  }),
+  ViewAnnotation.set(true),
+);
+
+export type Table = Schema.Schema.Type<typeof Table>;
+
+/**
+ * Make a table view.
+ */
+export const make = (props: Partial<Obj.MakeProps<typeof Table>> = {}) => Obj.make(Table, { sizes: {}, ...props });
+
+type MakeViewProps = Omit<CreateViewFromSpaceProps, 'presentation'> & {
+  sizes?: Record<string, number>;
+};
+
+export const makeView = async ({
+  sizes,
+  ...props
+}: MakeViewProps): Promise<{
+  jsonSchema: JsonSchemaType;
+  view: DataType.View;
+  schema: ReturnType<typeof toEffectSchema>;
+}> => {
+  const table = Obj.make(Table, { sizes: {} });
+  const { jsonSchema, view } = await createViewFromSpace({ ...props, presentation: table });
+
+  // Preset sizes.
+  const schema = toEffectSchema(jsonSchema);
+  const shouldIncludeId = props.fields?.find((field) => field === 'id') !== undefined;
+  const properties = getSchemaProperties(schema.ast, {}, shouldIncludeId);
+  for (const property of properties) {
+    if (sizes?.[property.name]) {
+      table.sizes[property.name as JsonPath] = sizes[property.name];
+      continue;
+    }
+
+    Match.type<SimpleType>().pipe(
+      Match.when('boolean', () => {
+        table.sizes[property.name as JsonPath] = 100;
+      }),
+      Match.when('number', () => {
+        table.sizes[property.name as JsonPath] = 100;
+      }),
+      Match.orElse(() => {
+        // Noop.
+      }),
+    )(property.type);
+  }
+
+  return { jsonSchema, schema, view };
+};

package/src/util/dynamic-table.ts

@@ -2,20 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 
-import { Obj } from '@dxos/echo';
-import { getTypename, toJsonSchema } from '@dxos/echo-schema';
-import type { JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
+import { Filter, Obj, Query } from '@dxos/echo';
+import { getTypename, toJsonSchema } from '@dxos/echo/internal';
+import type { JsonSchemaType } from '@dxos/echo/internal';
 import {
   type DataType,
   ProjectionModel,
   type SchemaPropertyDefinition,
+  type SortDirectionType,
   createView,
   getSchemaFromPropertyDefinitions,
 } from '@dxos/schema';
 
-import { TableView } from '../types';
+import { Table } from '../types';
 
 // TODO(ZaymonFC): Upstream these extra fields to SchemaPropertyDefinition to enhance schema-tools schema creation.
 type PropertyDisplayProps = {
@@ -54,23 +55,22 @@ export const getBaseSchema = ({
 };
 
 export const makeDynamicTable = ({
-  typename,
   jsonSchema,
   properties,
 }: {
-  typename: string;
   jsonSchema: JsonSchemaType;
   properties?: TablePropertyDefinition[];
 }): { projection: ProjectionModel; view: DataType.View } => {
-  const table = Obj.make(TableView, { sizes: {} });
+  const table = Obj.make(Table.Table, { sizes: {} });
   const view = createView({
-    typename,
+    query: Query.select(Filter.everything()),
     jsonSchema,
     presentation: table,
     ...(properties && { fields: properties.map((property) => property.name) }),
   });
 
   const projection = new ProjectionModel(jsonSchema, view.projection);
+  projection.normalizeView();
   if (properties && projection.fields) {
     setProperties(view, projection, table, properties);
   }
@@ -81,7 +81,7 @@ export const makeDynamicTable = ({
 const setProperties = (
   view: DataType.View,
   projection: ProjectionModel,
-  table: TableView,
+  table: Table.Table,
   properties: TablePropertyDefinition[],
 ) => {
   for (const property of properties) {
@@ -101,7 +101,7 @@ const setProperties = (
 
       if (property.sort) {
         const fieldId = field.id;
-        view.query.sort = [{ fieldId, direction: property.sort }];
+        view.sort = [{ fieldId, direction: property.sort }];
       }
     }
   }

package/src/util/index.ts

@@ -4,7 +4,6 @@
 
 export * from './dynamic-table';
 export * from './signals';
-export * from './table';
 export * from './table-buttons';
 export * from './table-controls';
 export * from './schema';

package/src/util/schema.ts

@@ -2,8 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
-import { TypeLiteral, isTypeLiteral } from 'effect/SchemaAST';
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
 
 /**
  * Creates a narrowed schema from an original schema that only includes
@@ -20,14 +20,14 @@ export const narrowSchema = <S extends Schema.Schema.AnyNoContext>(
 ): Schema.Schema<unknown, unknown> | undefined => {
   const ast = (schema as any)?.ast;
 
-  if (isTypeLiteral(ast)) {
+  if (SchemaAST.isTypeLiteral(ast)) {
     // Filter property signatures that match any of the provided paths
     const propertySignatures = ast.propertySignatures.filter((signature) => paths.includes(signature.name.toString()));
 
     // If we found at least one matching property
     if (propertySignatures.length > 0) {
       // Create a new TypeLiteral with only the matching properties
-      const narrowType = new TypeLiteral(propertySignatures, []);
+      const narrowType = new SchemaAST.TypeLiteral(propertySignatures, []);
       return Schema.make(narrowType);
     }
   }

package/src/util/table-buttons.ts

@@ -26,7 +26,7 @@ const createButton = ({
   disabled = false,
   icon,
   testId,
-  type = 'primary',
+  type: _type = 'primary',
 }: {
   attr: string;
   data: Record<string, string>;
@@ -39,8 +39,7 @@ const createButton = ({
     .map(([k, v]) => `${k}="${v}"`)
     .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' : ''} 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 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>`;
 };
 
 const addColumnButton = {
@@ -67,6 +66,7 @@ const columnSettingsButton = {
       icon: columnSettingsButton.icon,
       data: {
         'data-field-id': fieldId,
+        'data-variant': 'ghost',
       },
       testId: 'table-column-settings-button',
     });

package/dist/lib/browser/chunk-L2LSB6KV.mjs

@@ -1,18 +0,0 @@
-// src/types/schema.ts
-import { Schema } from "effect";
-import { Type } from "@dxos/echo";
-import { JsonPath } from "@dxos/effect";
-var 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 {
-  TableView
-};
-//# sourceMappingURL=chunk-L2LSB6KV.mjs.map

package/dist/lib/browser/chunk-L2LSB6KV.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/schema.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\nimport { Type } from '@dxos/echo';\nimport { JsonPath } from '@dxos/effect';\n\nexport const TableView = Schema.Struct({\n  sizes: Schema.Record({\n    key: JsonPath,\n    value: Schema.Number,\n  }).pipe(Schema.mutable),\n}).pipe(Type.Obj({ typename: 'dxos.org/type/TableView', version: '0.1.0' }));\nexport type TableView = Schema.Schema.Type<typeof TableView>;\n"],
-  "mappings": ";AAIA,SAASA,cAAc;AAEvB,SAASC,YAAY;AACrB,SAASC,gBAAgB;AAElB,IAAMC,YAAYC,OAAOC,OAAO;EACrCC,OAAOF,OAAOG,OAAO;IACnBC,KAAKC;IACLC,OAAON,OAAOO;EAChB,CAAA,EAAGC,KAAKR,OAAOS,OAAO;AACxB,CAAA,EAAGD,KAAKE,KAAKC,IAAI;EAAEC,UAAU;EAA2BC,SAAS;AAAQ,CAAA,CAAA;",
-  "names": ["Schema", "Type", "JsonPath", "TableView", "Schema", "Struct", "sizes", "Record", "key", "JsonPath", "value", "Number", "pipe", "mutable", "Type", "Obj", "typename", "version"]
-}