@dxos/react-ui-table 0.8.4-main.fd6878d → 0.9.0

package/src/util/dynamic-table.ts

@@ -2,26 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import { type Registry } from '@effect-atom/atom-react';
+import type * as Types from 'effect/Types';
 
-import { Obj } from '@dxos/echo';
-import { getTypename, toJsonSchema } from '@dxos/echo-schema';
-import type { JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
+import { Filter, type JsonSchema, Obj, Order, Query, type QueryAST, Ref, Type, type View } from '@dxos/echo';
 import {
-  type DataType,
   ProjectionModel,
   type SchemaPropertyDefinition,
-  createView,
+  ViewModel,
+  createEchoChangeCallback,
+  getSchemaFromJsonSchema,
   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 = {
   size: number;
   title: string;
-  sort: SortDirectionType;
+  sort: QueryAST.OrderDirection;
 };
 
 export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<PropertyDisplayProps>;
@@ -31,64 +31,72 @@ export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<Propert
  */
 // TODO(burdon): Remove variance.
 export const getBaseSchema = ({
+  type,
   typename,
   properties,
   jsonSchema,
-  schema,
 }: {
+  type?: Type.AnyEntity;
   typename?: string;
   properties?: TablePropertyDefinition[];
-  jsonSchema?: JsonSchemaType;
-  schema?: Schema.Schema.AnyNoContext;
-}): { typename: string; jsonSchema: JsonSchemaType } => {
-  if (typename && properties) {
-    const schema = getSchemaFromPropertyDefinitions(typename, properties);
-    return { typename: schema.typename, jsonSchema: schema.jsonSchema };
-  } else if (schema) {
-    return { typename: getTypename(schema)!, jsonSchema: toJsonSchema(schema) };
-  } else if (typename && jsonSchema) {
-    return { typename, jsonSchema };
-  } else {
+  jsonSchema?: Types.DeepMutable<JsonSchema.JsonSchema>;
+}): { typename: string; type: Type.AnyEntity } => {
+  const resolved =
+    typename && properties
+      ? getSchemaFromPropertyDefinitions(typename, properties)
+      : (type ?? (jsonSchema ? getSchemaFromJsonSchema(jsonSchema, typename) : undefined));
+  if (!resolved) {
     throw new Error('invalid properties');
   }
+
+  return { typename: Type.getTypename(resolved)!, type: resolved };
 };
 
 export const makeDynamicTable = ({
-  typename,
-  jsonSchema,
+  registry,
+  type,
   properties,
 }: {
-  typename: string;
-  jsonSchema: JsonSchemaType;
+  registry: Registry.Registry;
+  type: Type.AnyEntity;
   properties?: TablePropertyDefinition[];
-}): { projection: ProjectionModel; view: DataType.View } => {
-  const table = Obj.make(TableView, { sizes: {} });
-  const view = createView({
-    typename,
+}): { projection: ProjectionModel; object: Table.Table } => {
+  const jsonSchema = type.jsonSchema;
+  const view = ViewModel.make({
+    query: Query.select(Filter.everything()),
     jsonSchema,
-    presentation: table,
+    type,
     ...(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);
-  if (properties && projection.fields) {
-    setProperties(view, projection, table, properties);
+  const projection = new ProjectionModel({
+    registry,
+    view,
+    baseSchema: jsonSchema,
+    change: createEchoChangeCallback(view, type),
+  });
+  projection.normalizeView();
+  if (properties && projection.getFields()) {
+    setProperties(view, projection, object, properties);
   }
 
-  return { projection, view };
+  return { projection, object };
 };
 
 const setProperties = (
-  view: DataType.View,
+  view: View.View,
   projection: ProjectionModel,
-  table: TableView,
+  table: Table.Table,
   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.update(table, (table) => {
+          table.sizes[field.path] = property.size!;
+        });
       }
 
       if (property.title !== undefined) {
@@ -100,8 +108,14 @@ const setProperties = (
       }
 
       if (property.sort) {
-        const fieldId = field.id;
-        view.query.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.update(view, (view) => {
+          // Type assertion needed because Query AST types have some variance issues.
+          view.query.ast = newQuery.ast as typeof view.query.ast;
+        });
       }
     }
   }

package/src/util/index.ts

@@ -3,8 +3,9 @@
 //
 
 export * from './dynamic-table';
+export * from './query-ast';
 export * from './signals';
-export * from './table';
+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/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/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

@@ -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 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 = {
@@ -67,6 +66,7 @@ const columnSettingsButton = {
       icon: columnSettingsButton.icon,
       data: {
         'data-field-id': fieldId,
+        'data-variant': 'ghost',
       },
       testId: 'table-column-settings-button',
     });

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-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"]
-}