@dxos/react-ui-table 0.8.4-main.7ace549 → 0.8.4-main.8360d9e660

package/src/types/Table.ts

@@ -4,16 +4,17 @@
 
 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 { type SimpleType } from '@dxos/effect';
-import { View, ViewAnnotation, getSchemaProperties } from '@dxos/schema';
+import { ViewAnnotation } from '@dxos/schema';
 
-const TableSchema = Schema.Struct({
+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.
@@ -21,19 +22,23 @@ const TableSchema = Schema.Struct({
     value: Schema.Number,
   }).pipe(Schema.mutable, FormInputAnnotation.set(false)),
 }).pipe(
-  Type.Obj({
-    typename: 'dxos.org/type/Table',
-    version: '0.2.0',
+  Type.object({
+    typename: 'org.dxos.type.table',
+    version: '0.1.0',
   }),
   LabelAnnotation.set(['name']),
   ViewAnnotation.set(true),
+  Annotation.IconAnnotation.set({
+    icon: 'ph--table--regular',
+    hue: 'green',
+  }),
 );
 
-export interface Table extends Schema.Schema.Type<typeof TableSchema> {}
-export interface TableEncoded extends Schema.Schema.Encoded<typeof TableSchema> {}
-export const Table: Schema.Schema<Table, TableEncoded> = TableSchema;
+export interface Table extends Schema.Schema.Type<typeof Table> {}
 
-type MakeProps = Omit<Partial<Obj.MakeProps<typeof Table>>, 'view'> & {
+type MakeProps = {
+  name?: string;
+  sizes?: Record<string, number>;
   view: View.View;
   /** Required to auto-size columns. */
   jsonSchema?: JsonSchemaType;
@@ -43,24 +48,25 @@ type MakeProps = Omit<Partial<Obj.MakeProps<typeof Table>>, 'view'> & {
  * Make a table as a view of a data set.
  */
 export const make = ({ name, sizes = {}, view, jsonSchema }: MakeProps): Table => {
-  const table = Obj.make(Table, { name, view: Ref.make(view), sizes });
+  const table = Obj.make(Table, { name, view: Ref.make(view), sizes } as Obj.MakeProps<typeof Table>);
 
   // Preset sizes.
   if (jsonSchema) {
-    const schema = Type.toEffectSchema(jsonSchema);
-    const properties = getSchemaProperties(schema.ast, {});
+    const schema = JsonSchema.toEffectSchema(jsonSchema);
+    const properties = SchemaAST.getPropertySignatures(schema.ast);
     for (const property of properties) {
-      if (sizes?.[property.name]) {
-        table.sizes[property.name] = sizes[property.name];
+      const name = property.name.toString() as JsonPath;
+      if (sizes?.[name]) {
+        table.sizes[name] = sizes[name];
         continue;
       }
 
-      Match.type<SimpleType>().pipe(
-        Match.when('boolean', () => {
-          table.sizes[property.name as JsonPath] = 100;
+      Match.type<SchemaAST.AST>().pipe(
+        Match.when({ _tag: 'BooleanKeyword' }, () => {
+          table.sizes[name] = 100;
         }),
-        Match.when('number', () => {
-          table.sizes[property.name as JsonPath] = 100;
+        Match.when({ _tag: 'NumberKeyword' }, () => {
+          table.sizes[name] = 100;
         }),
         Match.orElse(() => {
           // Noop.
@@ -71,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.Obj({
-    typename: 'dxos.org/type/Table',
-    version: '0.1.0',
-  }),
-);

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

@@ -0,0 +1,70 @@
+//
+// 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';
+
+describe('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.change 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.change 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.dynamic-table-test';
+    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

@@ -2,14 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
+import { type Registry } from '@effect-atom/atom-react';
+import type * as Types from 'effect/Types';
 
-import { Filter, type JsonSchema, Obj, Query, 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,
-  type SortDirectionType,
-  View,
+  ViewModel,
+  createEchoChangeCallback,
   getSchemaFromPropertyDefinitions,
 } from '@dxos/schema';
 
@@ -19,7 +21,7 @@ import { Table } from '../types';
 type PropertyDisplayProps = {
   size: number;
   title: string;
-  sort: SortDirectionType;
+  sort: QueryAST.OrderDirection;
 };
 
 export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<PropertyDisplayProps>;
@@ -29,21 +31,21 @@ export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<Propert
  */
 // TODO(burdon): Remove variance.
 export const getBaseSchema = ({
+  schema,
   typename,
   properties,
   jsonSchema,
-  schema,
 }: {
+  schema?: Type.AnyEntity;
   typename?: string;
   properties?: TablePropertyDefinition[];
-  jsonSchema?: JsonSchema.JsonSchema;
-  schema?: Schema.Schema.AnyNoContext;
-}): { 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 {
@@ -52,22 +54,29 @@ export const getBaseSchema = ({
 };
 
 export const makeDynamicTable = ({
+  registry,
   jsonSchema,
   properties,
 }: {
-  jsonSchema: JsonSchema.JsonSchema;
+  registry: Registry.Registry;
+  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: {} });
 
-  const projection = new ProjectionModel(jsonSchema, view.projection);
+  const projection = new ProjectionModel({
+    registry,
+    view,
+    baseSchema: jsonSchema,
+    change: createEchoChangeCallback(view, jsonSchema),
+  });
   projection.normalizeView();
-  if (properties && projection.fields) {
+  if (properties && projection.getFields()) {
     setProperties(view, projection, object, properties);
   }
 
@@ -81,10 +90,12 @@ const setProperties = (
   properties: TablePropertyDefinition[],
 ) => {
   for (const property of properties) {
-    const field = projection.fields.find((field) => field.path === property.name);
+    const field = projection.getFields().find((field) => field.path === property.name);
     if (field) {
       if (property.size !== undefined) {
-        table.sizes[field.path] = property.size;
+        Obj.change(table, (t) => {
+          t.sizes[field.path] = property.size!;
+        });
       }
 
       if (property.title !== undefined) {
@@ -96,8 +107,14 @@ const setProperties = (
       }
 
       if (property.sort) {
-        const fieldId = field.id;
-        view.sort = [{ fieldId, direction: property.sort }];
+        // Apply sort to query instead of deprecated view.sort
+        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) => {
+          // Type assertion needed because Query AST types have some variance issues.
+          v.query.ast = newQuery.ast as typeof v.query.ast;
+        });
       }
     }
   }

package/src/util/index.ts

@@ -3,7 +3,9 @@
 //
 
 export * from './dynamic-table';
+export * from './query-ast';
 export * from './signals';
+export * from './sort';
 export * from './table-buttons';
 export * from './table-controls';
 export * from './schema';

package/src/util/query-ast.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type QueryAST } from '@dxos/echo';
+
+/**
+ * Extracts order clauses from a query AST.
+ * Handles nested structures (options, order, etc.).
+ */
+export const extractOrder = (queryAst: QueryAST.Query): readonly QueryAST.Order[] | undefined => {
+  if (queryAst.type === 'order') {
+    return queryAst.order;
+  }
+  if (queryAst.type === 'options') {
+    return extractOrder(queryAst.query);
+  }
+  if (queryAst.type === 'from') {
+    return extractOrder(queryAst.query);
+  }
+  return undefined;
+};

package/src/util/sort.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Format, type QueryAST } from '@dxos/echo';
+
+/**
+ * Gets a normalized sort value for a given value and format.
+ * This ensures consistent sorting behavior across different data types.
+ */
+export const getSortValue = (value: any, format: Format.TypeFormat): any => {
+  // Handle null/undefined
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  // Handle dates chronologically if schema indicates date format
+  const isDateFormat = format === Format.TypeFormat.DateTime || format === Format.TypeFormat.Date;
+  if (isDateFormat) {
+    const date = new Date(value);
+    if (!isNaN(date.getTime())) {
+      return date.getTime();
+    }
+    // Fallback to string if date parsing fails
+    return String(value);
+  }
+
+  // Handle numbers if schema indicates number format
+  if (
+    format === Format.TypeFormat.Number ||
+    format === Format.TypeFormat.Integer ||
+    format === Format.TypeFormat.Currency ||
+    format === Format.TypeFormat.Percent ||
+    format === Format.TypeFormat.Duration
+  ) {
+    const num = typeof value === 'number' ? value : Number(value);
+    if (!isNaN(num)) {
+      return num;
+    }
+    // Fallback to string if number parsing fails
+    return String(value);
+  }
+
+  // Default to string comparison
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  // Fallback to string representation
+  return String(value);
+};
+
+/**
+ * Compares two values for sorting based on the field format.
+ * Handles dates, numbers, and strings appropriately.
+ */
+export const compareValues = (
+  aValue: any,
+  bValue: any,
+  format: Format.TypeFormat,
+  direction: QueryAST.OrderDirection,
+): number => {
+  // Handle null/undefined values - nulls sort to the end
+  if (aValue === undefined || aValue === null) {
+    return bValue === undefined || bValue === null ? 0 : 1;
+  }
+  if (bValue === undefined || bValue === null) {
+    return -1;
+  }
+
+  // Get normalized sort values
+  const aSortValue = getSortValue(aValue, format);
+  const bSortValue = getSortValue(bValue, format);
+
+  // Compare based on type
+  let comparison = 0;
+  if (typeof aSortValue === 'number' && typeof bSortValue === 'number') {
+    comparison = aSortValue - bSortValue;
+  } else if (typeof aSortValue === 'string' && typeof bSortValue === 'string') {
+    comparison = aSortValue.localeCompare(bSortValue);
+  } else {
+    // Mixed types - convert both to strings
+    comparison = String(aSortValue).localeCompare(String(bSortValue));
+  }
+
+  return direction === 'desc' ? -comparison : comparison;
+};

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>) => {

package/dist/lib/browser/chunk-5XWSB3JP.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/Table.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Match from 'effect/Match';\nimport * as Schema from 'effect/Schema';\n\nimport { Obj, Ref, Type } from '@dxos/echo';\nimport { FormInputAnnotation, type JsonPath, type JsonSchemaType, LabelAnnotation } from '@dxos/echo/internal';\nimport { type SimpleType } from '@dxos/effect';\nimport { View, ViewAnnotation, getSchemaProperties } from '@dxos/schema';\n\nconst TableSchema = Schema.Struct({\n  name: Schema.String.pipe(Schema.optional),\n\n  view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),\n\n  sizes: Schema.Record({\n    // TODO(wittjosiah): Should be JsonPath.\n    key: Schema.String,\n    value: Schema.Number,\n  }).pipe(Schema.mutable, FormInputAnnotation.set(false)),\n}).pipe(\n  Type.Obj({\n    typename: 'dxos.org/type/Table',\n    version: '0.2.0',\n  }),\n  LabelAnnotation.set(['name']),\n  ViewAnnotation.set(true),\n);\n\nexport interface Table extends Schema.Schema.Type<typeof TableSchema> {}\nexport interface TableEncoded extends Schema.Schema.Encoded<typeof TableSchema> {}\nexport const Table: Schema.Schema<Table, TableEncoded> = TableSchema;\n\ntype MakeProps = Omit<Partial<Obj.MakeProps<typeof Table>>, 'view'> & {\n  view: View.View;\n  /** Required to auto-size columns. */\n  jsonSchema?: JsonSchemaType;\n};\n\n/**\n * Make a table as a view of a data set.\n */\nexport const make = ({ name, sizes = {}, view, jsonSchema }: MakeProps): Table => {\n  const table = Obj.make(Table, { name, view: Ref.make(view), sizes });\n\n  // Preset sizes.\n  if (jsonSchema) {\n    const schema = Type.toEffectSchema(jsonSchema);\n    const properties = getSchemaProperties(schema.ast, {});\n    for (const property of properties) {\n      if (sizes?.[property.name]) {\n        table.sizes[property.name] = 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\n  return table;\n};\n\n//\n// V1\n//\n\nexport const TableV1 = Schema.Struct({\n  sizes: Schema.Record({\n    key: Schema.String,\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);\n"],
-  "mappings": ";;;;;;;AAAA;;;;;;AAIA,YAAYA,WAAW;AACvB,YAAYC,YAAY;AAExB,SAASC,KAAKC,KAAKC,YAAY;AAC/B,SAASC,qBAAyDC,uBAAuB;AAEzF,SAASC,MAAMC,gBAAgBC,2BAA2B;AAE1D,IAAMC,cAAqBC,cAAO;EAChCC,MAAaC,cAAOC,KAAYC,eAAQ;EAExCC,MAAMC,KAAKC,IAAIC,KAAKA,IAAI,EAAEL,KAAKM,oBAAoBC,IAAI,KAAA,CAAA;EAEvDC,OAAcC,cAAO;;IAEnBC,KAAYX;IACZY,OAAcC;EAChB,CAAA,EAAGZ,KAAYa,gBAASP,oBAAoBC,IAAI,KAAA,CAAA;AAClD,CAAA,EAAGP,KACDG,KAAKW,IAAI;EACPC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBV,IAAI;EAAC;CAAO,GAC5BW,eAAeX,IAAI,IAAA,CAAA;AAKd,IAAMY,QAA4CvB;AAWlD,IAAMwB,OAAO,CAAC,EAAEtB,MAAMU,QAAQ,CAAC,GAAGN,MAAMmB,WAAU,MAAa;AACpE,QAAMC,QAAQR,IAAIM,KAAKD,OAAO;IAAErB;IAAMI,MAAME,IAAIgB,KAAKlB,IAAAA;IAAOM;EAAM,CAAA;AAGlE,MAAIa,YAAY;AACd,UAAME,SAASpB,KAAKqB,eAAeH,UAAAA;AACnC,UAAMI,aAAaC,oBAAoBH,OAAOI,KAAK,CAAC,CAAA;AACpD,eAAWC,YAAYH,YAAY;AACjC,UAAIjB,QAAQoB,SAAS9B,IAAI,GAAG;AAC1BwB,cAAMd,MAAMoB,SAAS9B,IAAI,IAAIU,MAAMoB,SAAS9B,IAAI;AAChD;MACF;AAEA+B,MAAMC,WAAI,EAAe9B,KACjB+B,WAAK,WAAW,MAAA;AACpBT,cAAMd,MAAMoB,SAAS9B,IAAI,IAAgB;MAC3C,CAAA,GACMiC,WAAK,UAAU,MAAA;AACnBT,cAAMd,MAAMoB,SAAS9B,IAAI,IAAgB;MAC3C,CAAA,GACMkC,aAAO,MAAA;MAEb,CAAA,CAAA,EACAJ,SAASE,IAAI;IACjB;EACF;AAEA,SAAOR;AACT;AAMO,IAAMW,UAAiBpC,cAAO;EACnCW,OAAcC,cAAO;IACnBC,KAAYX;IACZY,OAAcC;EAChB,CAAA,EAAGZ,KAAYa,cAAO;AACxB,CAAA,EAAGb,KACDG,KAAKW,IAAI;EACPC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["Match", "Schema", "Obj", "Ref", "Type", "FormInputAnnotation", "LabelAnnotation", "View", "ViewAnnotation", "getSchemaProperties", "TableSchema", "Struct", "name", "String", "pipe", "optional", "view", "Type", "Ref", "View", "FormInputAnnotation", "set", "sizes", "Record", "key", "value", "Number", "mutable", "Obj", "typename", "version", "LabelAnnotation", "ViewAnnotation", "Table", "make", "jsonSchema", "table", "schema", "toEffectSchema", "properties", "getSchemaProperties", "ast", "property", "Match", "type", "when", "orElse", "TableV1"]
-}