@dxos/react-ui-table 0.8.4-main.5ea62a8 → 0.8.4-main.72ec0f3

package/src/model/table-presentation.ts

@@ -3,10 +3,10 @@
 //
 
 import { signal } from '@preact/signals-core';
-import { isNotNullable } from 'effect/Predicate';
+import * as Predicate from 'effect/Predicate';
 
 import { Obj } from '@dxos/echo';
-import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo/internal';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridCellValue,
@@ -190,7 +190,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
         const tags = targetArray
           .map(getLabel)
-          .filter(isNotNullable)
+          .filter(Predicate.isNotNullable)
           .map((title) => {
             return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
           })
@@ -205,7 +205,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-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+        cell.accessoryHtml = `<div role="none" class="absolute inline-end-0 inset-block-0 p-[--dx-grid-cell-content-padding-block]"><dx-anchor refId=${dxn} class="dx-button is-6 aspect-square min-bs-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
       }
     }
 
@@ -468,7 +468,6 @@ export const cellClassesForRowSelection = (selected: boolean, selectionMode: Sel
 
   switch (selectionMode) {
     case 'single':
-      // TODO(ZaymonFC): @thure, do we need a grid version of 'currentRelated'?
       return ['!bg-currentRelated dx-grid__cell--no-focus-unfurl hover:bg-hoverSurface !cursor-pointer'];
     case 'multiple':
       return ['!bg-gridCellSelected'];

package/src/model/table-sorting.ts

@@ -5,12 +5,21 @@
 import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 
-import { type FieldSortType, FormatEnum, type SortDirectionType, TypeEnum, getValue } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo/internal';
 import { formatForDisplay } from '@dxos/react-ui-form';
-import type { DataType, FieldType, ProjectionModel, PropertyType } from '@dxos/schema';
+import {
+  type FieldSortType,
+  type FieldType,
+  type ProjectionModel,
+  type PropertyType,
+  type SortDirectionType,
+  type View,
+} from '@dxos/schema';
 
 import { type TableRow } from './table-model';
 
+// TODO(wittjosiah): Remove. Use ordering in queries instead.
+
 /**
  * Represents the local sort state.
  * - undefined: No local sort set, fallback to view sort.
@@ -49,13 +58,13 @@ export class TableSorting<T extends TableRow> {
 
   constructor(
     rows: Signal<T[]>,
-    private readonly _view: DataType.View,
+    private readonly _view: View.View,
     private readonly _projection: ProjectionModel,
   ) {
     this._rows = rows;
     this._isDirty = computed(() => {
       const local = this._localSort.value;
-      const viewSort = this._view.query.sort?.[0];
+      const viewSort = this._view.sort?.[0];
       if (local?.type === 'cleared') {
         return viewSort !== undefined;
       }
@@ -83,7 +92,7 @@ export class TableSorting<T extends TableRow> {
       return local.sort;
     }
 
-    return this._view.query.sort?.[0];
+    return this._view.sort?.[0];
   }
 
   /**
@@ -129,9 +138,9 @@ export class TableSorting<T extends TableRow> {
   public save(): void {
     if (this._localSort.value !== undefined) {
       if (this._localSort.value.type === 'active') {
-        this._view.query.sort = [this._localSort.value.sort];
+        this._view.sort = [this._localSort.value.sort];
       } else {
-        this._view.query.sort = [];
+        this._view.sort = [];
       }
       this._localSort.value = undefined;
     }

package/src/playwright/TableManager.ts

@@ -59,6 +59,6 @@ export class TableManager {
     await this.page.getByLabel(`format ${format}`).click();
     await this.page.getByPlaceholder('Property label.').click();
     await this.page.getByPlaceholder('Property label.').fill(label);
-    await this.page.getByRole('button', { name: 'button save' }).click();
+    await this.page.getByRole('button', { name: 'save button' }).click();
   }
 }

package/src/playwright/smoke.spec.ts

@@ -159,7 +159,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('extant relations work as expected', async ({ browser, browserName }) => {
+  // 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');
     test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: relationsStoryUrl });
@@ -187,7 +188,7 @@ test.describe('Table', () => {
     // Click on the combobox to open options
     await page.getByRole('combobox').click();
     await page.pause();
-    await page.getByPlaceholder('Search...').focus();
+    await page.getByPlaceholder('Search…').focus();
 
     // Type the first few letters of an org name.
     const orgName =
@@ -213,7 +214,8 @@ test.describe('Table', () => {
     await page.close();
   });
 
-  test('new relations work as expected', async ({ browser, browserName }) => {
+  // TODO(wittjosiah): Remove? Conflicts with story play function which is run as a unit test anyways.
+  test.skip('new relations work as expected', async ({ browser, browserName }) => {
     test.skip(browserName === 'webkit');
     test.skip(browserName === 'firefox');
     const { page } = await setupPage(browser, { url: relationsStoryUrl });
@@ -240,7 +242,7 @@ test.describe('Table', () => {
 
     // Click on the combobox to open options
     await page.getByRole('combobox').click();
-    await page.getByPlaceholder('Search...').focus();
+    await page.getByPlaceholder('Search…').focus();
 
     // Type the first few letters of an org name.
     const orgName = 'Sally';
@@ -254,7 +256,7 @@ test.describe('Table', () => {
     await page.pause();
 
     // Click the save button in the popover
-    await page.getByTestId('save-button').click();
+    await page.getByTestId('create-referenced-object-form').getByTestId('save-button').click();
 
     // Assert that the cell element has the org name
     await expect(targetCell).toHaveText(orgName);

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 { ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
 
 import { type TableController } from '../components';
 import { useAddRow, useTableModel } from '../hooks';
@@ -26,14 +26,17 @@ export const useTestTableModel = () => {
   const client = useClient();
   const { space } = useClientProvider();
 
-  const views = useQuery(space, Filter.type(DataType.View));
+  const views = useQuery(space, Filter.type(View.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]);
 

package/src/types/schema.ts

@@ -2,14 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
-import { Match } from 'effect';
+import * as Match from 'effect/Match';
+import * as Schema from 'effect/Schema';
 
 import { Obj, Type } from '@dxos/echo';
-import { JsonPath, type JsonSchemaType, toEffectSchema } from '@dxos/echo-schema';
-import { ViewAnnotation } from '@dxos/echo-schema';
+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';
+import { View, getSchemaProperties } from '@dxos/schema';
 
 export const Table = Schema.Struct({
   sizes: Schema.Record({
@@ -31,7 +31,7 @@ export type Table = Schema.Schema.Type<typeof Table>;
  */
 export const make = (props: Partial<Obj.MakeProps<typeof Table>> = {}) => Obj.make(Table, { sizes: {}, ...props });
 
-type MakeViewProps = Omit<CreateViewFromSpaceProps, 'presentation'> & {
+type MakeViewProps = Omit<View.MakeFromSpaceProps, 'presentation'> & {
   sizes?: Record<string, number>;
 };
 
@@ -40,11 +40,11 @@ export const makeView = async ({
   ...props
 }: MakeViewProps): Promise<{
   jsonSchema: JsonSchemaType;
-  view: DataType.View;
+  view: View.View;
   schema: ReturnType<typeof toEffectSchema>;
 }> => {
   const table = Obj.make(Table, { sizes: {} });
-  const { jsonSchema, view } = await createViewFromSpace({ ...props, presentation: table });
+  const { jsonSchema, view } = await View.makeFromSpace({ ...props, presentation: table });
 
   // Preset sizes.
   const schema = toEffectSchema(jsonSchema);

package/src/util/dynamic-table.ts

@@ -2,16 +2,16 @@
 // 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,
-  createView,
+  type SortDirectionType,
+  View,
   getSchemaFromPropertyDefinitions,
 } from '@dxos/schema';
 
@@ -54,23 +54,22 @@ export const getBaseSchema = ({
 };
 
 export const makeDynamicTable = ({
-  typename,
   jsonSchema,
   properties,
 }: {
-  typename: string;
   jsonSchema: JsonSchemaType;
   properties?: TablePropertyDefinition[];
-}): { projection: ProjectionModel; view: DataType.View } => {
+}): { projection: ProjectionModel; view: View.View } => {
   const table = Obj.make(Table.Table, { sizes: {} });
-  const view = createView({
-    typename,
+  const view = View.make({
+    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);
   }
@@ -79,7 +78,7 @@ export const makeDynamicTable = ({
 };
 
 const setProperties = (
-  view: DataType.View,
+  view: View.View,
   projection: ProjectionModel,
   table: Table.Table,
   properties: TablePropertyDefinition[],
@@ -101,7 +100,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/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/dist/lib/browser/chunk-63UUF4IG.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';\nimport { Match } from 'effect';\n\nimport { Obj, Type } from '@dxos/echo';\nimport { JsonPath, type JsonSchemaType, toEffectSchema } from '@dxos/echo-schema';\nimport { ViewAnnotation } from '@dxos/echo-schema';\nimport { type SimpleType } from '@dxos/effect';\nimport { type CreateViewFromSpaceProps, type DataType, createViewFromSpace, getSchemaProperties } from '@dxos/schema';\n\nexport const Table = Schema.Struct({\n  sizes: Schema.Record({\n    key: JsonPath,\n    value: Schema.Number,\n  }).pipe(Schema.mutable),\n}).pipe(\n  Type.Obj({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n  ViewAnnotation.set(true),\n);\n\nexport type Table = Schema.Schema.Type<typeof Table>;\n\n/**\n * Make a table view.\n */\nexport const make = (props: Partial<Obj.MakeProps<typeof Table>> = {}) => Obj.make(Table, { sizes: {}, ...props });\n\ntype MakeViewProps = Omit<CreateViewFromSpaceProps, 'presentation'> & {\n  sizes?: Record<string, number>;\n};\n\nexport const makeView = async ({\n  sizes,\n  ...props\n}: MakeViewProps): Promise<{\n  jsonSchema: JsonSchemaType;\n  view: DataType.View;\n  schema: ReturnType<typeof toEffectSchema>;\n}> => {\n  const table = Obj.make(Table, { sizes: {} });\n  const { jsonSchema, view } = await createViewFromSpace({ ...props, presentation: table });\n\n  // Preset sizes.\n  const schema = toEffectSchema(jsonSchema);\n  const shouldIncludeId = props.fields?.find((field) => field === 'id') !== undefined;\n  const properties = getSchemaProperties(schema.ast, {}, shouldIncludeId);\n  for (const property of properties) {\n    if (sizes?.[property.name]) {\n      table.sizes[property.name as JsonPath] = sizes[property.name];\n      continue;\n    }\n\n    Match.type<SimpleType>().pipe(\n      Match.when('boolean', () => {\n        table.sizes[property.name as JsonPath] = 100;\n      }),\n      Match.when('number', () => {\n        table.sizes[property.name as JsonPath] = 100;\n      }),\n      Match.orElse(() => {\n        // Noop.\n      }),\n    )(property.type);\n  }\n\n  return { jsonSchema, schema, view };\n};\n"],
-  "mappings": ";;;;;;;AAAA;;;;;;AAIA,SAASA,cAAc;AACvB,SAASC,aAAa;AAEtB,SAASC,KAAKC,YAAY;AAC1B,SAASC,UAA+BC,sBAAsB;AAC9D,SAASC,sBAAsB;AAE/B,SAAuDC,qBAAqBC,2BAA2B;AAEhG,IAAMC,QAAQC,OAAOC,OAAO;EACjCC,OAAOF,OAAOG,OAAO;IACnBC,KAAKC;IACLC,OAAON,OAAOO;EAChB,CAAA,EAAGC,KAAKR,OAAOS,OAAO;AACxB,CAAA,EAAGD,KACDE,KAAKC,IAAI;EACPC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,eAAeC,IAAI,IAAA,CAAA;AAQd,IAAMC,OAAO,CAACC,QAA8C,CAAC,MAAMN,IAAIK,KAAKjB,OAAO;EAAEG,OAAO,CAAC;EAAG,GAAGe;AAAM,CAAA;AAMzG,IAAMC,WAAW,OAAO,EAC7BhB,OACA,GAAGe,MAAAA,MACW;AAKd,QAAME,QAAQR,IAAIK,KAAKjB,OAAO;IAAEG,OAAO,CAAC;EAAE,CAAA;AAC1C,QAAM,EAAEkB,YAAYC,KAAI,IAAK,MAAMC,oBAAoB;IAAE,GAAGL;IAAOM,cAAcJ;EAAM,CAAA;AAGvF,QAAMK,SAASC,eAAeL,UAAAA;AAC9B,QAAMM,kBAAkBT,MAAMU,QAAQC,KAAK,CAACC,UAAUA,UAAU,IAAA,MAAUC;AAC1E,QAAMC,aAAaC,oBAAoBR,OAAOS,KAAK,CAAC,GAAGP,eAAAA;AACvD,aAAWQ,YAAYH,YAAY;AACjC,QAAI7B,QAAQgC,SAASC,IAAI,GAAG;AAC1BhB,YAAMjB,MAAMgC,SAASC,IAAI,IAAgBjC,MAAMgC,SAASC,IAAI;AAC5D;IACF;AAEAC,UAAMC,KAAI,EAAe7B,KACvB4B,MAAME,KAAK,WAAW,MAAA;AACpBnB,YAAMjB,MAAMgC,SAASC,IAAI,IAAgB;IAC3C,CAAA,GACAC,MAAME,KAAK,UAAU,MAAA;AACnBnB,YAAMjB,MAAMgC,SAASC,IAAI,IAAgB;IAC3C,CAAA,GACAC,MAAMG,OAAO,MAAA;IAEb,CAAA,CAAA,EACAL,SAASG,IAAI;EACjB;AAEA,SAAO;IAAEjB;IAAYI;IAAQH;EAAK;AACpC;",
-  "names": ["Schema", "Match", "Obj", "Type", "JsonPath", "toEffectSchema", "ViewAnnotation", "createViewFromSpace", "getSchemaProperties", "Table", "Schema", "Struct", "sizes", "Record", "key", "JsonPath", "value", "Number", "pipe", "mutable", "Type", "Obj", "typename", "version", "ViewAnnotation", "set", "make", "props", "makeView", "table", "jsonSchema", "view", "createViewFromSpace", "presentation", "schema", "toEffectSchema", "shouldIncludeId", "fields", "find", "field", "undefined", "properties", "getSchemaProperties", "ast", "property", "name", "Match", "type", "when", "orElse"]
-}