@dxos/react-ui-table 0.7.5-main.499c70c → 0.7.5-main.937ce75

package/dist/lib/node-esm/index.mjs

@@ -37,7 +37,7 @@ var translations_default = [
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 import React7, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2, useMemo as useMemo4 } from "react";
-import { getValue as getValue3 } from "@dxos/echo-schema";
+import { getValue as getValue4 } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { Filter, getSpace as getSpace4, fullyQualifiedId } from "@dxos/react-client/echo";
 import { useTranslation as useTranslation3 } from "@dxos/react-ui";
@@ -165,7 +165,9 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
     if (!space || state?.type !== "createRefPanel") {
       return;
     }
-    const schema2 = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+    const [schema2] = space.db.schemaRegistry.query({
+      typename: state.typename
+    }).runSync();
     if (schema2) {
       const omit = S.omit("id");
       return omit(schema2);
@@ -178,7 +180,9 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
     if (!model || !space || state?.type !== "createRefPanel") {
       return;
     }
-    const schema2 = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+    const [schema2] = space.db.schemaRegistry.query({
+      typename: state.typename
+    }).runSync();
     if (schema2) {
       const obj = space.db.add(create(schema2, values));
       state.onCreate?.(obj);
@@ -282,14 +286,13 @@ var RowActionsMenu = ({ model, modals }) => {
 };
 
 // packages/ui/react-ui-table/src/model/table-model.ts
-import { computed as computed2, effect as effect2, signal as signal2 } from "@preact/signals-core";
-import orderBy from "lodash.orderby";
+import { computed as computed3, effect as effect2, signal as signal3 } from "@preact/signals-core";
 import { Resource as Resource2 } from "@dxos/context";
-import { getValue, setValue, FormatEnum as FormatEnum2 } from "@dxos/echo-schema";
+import { getValue as getValue2, setValue, FormatEnum as FormatEnum3 } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
 import { isReactiveObject, makeRef as makeRef2 } from "@dxos/live-object";
 import { PublicKey as PublicKey2 } from "@dxos/react-client";
-import { formatForDisplay, formatForEditing, parseValue } from "@dxos/react-ui-form";
+import { formatForEditing, parseValue } from "@dxos/react-ui-form";
 
 // packages/ui/react-ui-table/src/model/selection-model.ts
 import { computed, effect, signal } from "@preact/signals-core";
@@ -593,6 +596,99 @@ var SelectionModel = class extends Resource {
   }
 };
 
+// packages/ui/react-ui-table/src/model/table-sorting.ts
+import { computed as computed2, signal as signal2 } from "@preact/signals-core";
+import orderBy from "lodash.orderby";
+import { getValue, FormatEnum as FormatEnum2, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
+import { formatForDisplay } from "@dxos/react-ui-form";
+var TableSorting = class {
+  constructor(rows, _table, _projection) {
+    this._table = _table;
+    this._projection = _projection;
+    this._displayToDataIndex = /* @__PURE__ */ new Map();
+    this._sorting = signal2(void 0);
+    this._rows = rows;
+    this.sortedRows = this.initialiseSortedRows();
+  }
+  /**
+  * @reactive
+  */
+  get sorting() {
+    return this._sorting.value;
+  }
+  getDataIndex(displayIndex) {
+    return this._displayToDataIndex.get(displayIndex) ?? displayIndex;
+  }
+  setSort(fieldId, direction) {
+    this._sorting.value = {
+      fieldId,
+      direction
+    };
+  }
+  //
+  // Initialisation.
+  //
+  initialiseSortedRows() {
+    return computed2(() => {
+      this._displayToDataIndex.clear();
+      const sort = this._sorting.value;
+      if (!sort) {
+        return this._rows.value;
+      }
+      const field = this._table.view?.target?.fields.find((f) => f.id === sort.fieldId);
+      if (!field) {
+        return this._rows.value;
+      }
+      const { props } = this._projection.getFieldProjection(field.id);
+      const dataWithIndices = this._rows.value.map((item, index) => {
+        const sortValue = this.getSortValue(props, field, item);
+        const isEmpty = !(props.type === TypeEnum2.Boolean) && (sortValue == null || sortValue === "");
+        return {
+          item,
+          index,
+          value: sortValue,
+          isEmpty
+        };
+      });
+      const ordered = orderBy(dataWithIndices, [
+        "isEmpty",
+        "value"
+      ], [
+        "asc",
+        sort.direction
+      ]);
+      ordered.forEach(({ index: dataIndex }, displayIndex) => {
+        if (displayIndex !== dataIndex) {
+          this._displayToDataIndex.set(displayIndex, dataIndex);
+        }
+      });
+      return ordered.map(({ item }) => item);
+    });
+  }
+  getSortValue(props, field, item) {
+    const { type, format } = props;
+    const value = getValue(item, field.path);
+    if (type === TypeEnum2.Boolean) {
+      return !!value;
+    }
+    if (type === TypeEnum2.Number) {
+      return value;
+    }
+    if (value == null) {
+      return value;
+    }
+    if (format === FormatEnum2.Ref && field.referencePath) {
+      const refValue = getValue(value.target, field.referencePath);
+      return refValue;
+    }
+    return formatForDisplay({
+      type,
+      format,
+      value
+    });
+  }
+};
+
 // packages/ui/react-ui-table/src/model/table-model.ts
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var TableModel = class extends Resource2 {
@@ -602,7 +698,7 @@ var TableModel = class extends Resource2 {
   }, onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChanged }) {
     super();
     this.id = `table-model-${PublicKey2.random().truncate()}`;
-    this._visibleRange = signal2({
+    this._visibleRange = signal3({
       start: {
         row: 0,
         col: 0
@@ -612,14 +708,7 @@ var TableModel = class extends Resource2 {
         col: 0
       }
     });
-    /**
-    * Maps display indices to data indices.
-    * Used for translating between sorted/displayed order and original data order.
-    * Keys are display indices, values are corresponding data indices.
-    */
-    this._displayToDataIndex = /* @__PURE__ */ new Map();
-    this._sorting = signal2(void 0);
-    this._rows = signal2([]);
+    this._rows = signal3([]);
     //
     // Data
     //
@@ -629,11 +718,11 @@ var TableModel = class extends Resource2 {
     this.getRowCount = () => this._rows.value.length;
     this.getColumnCount = () => this.table.view?.target?.fields.length ?? 0;
     this.insertRow = (rowIndex) => {
-      const row = rowIndex !== void 0 ? this._displayToDataIndex.get(rowIndex) ?? rowIndex : this._rows.value.length;
+      const row = rowIndex !== void 0 ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
       this._onInsertRow?.(row);
     };
     this.deleteRow = (rowIndex) => {
-      const row = this._displayToDataIndex.get(rowIndex) ?? rowIndex;
+      const row = this._sorting.getDataIndex(rowIndex);
       const obj = this._rows.value[row];
       const objectsToDelete = [];
       if (this._selection.hasSelection.value) {
@@ -650,18 +739,18 @@ var TableModel = class extends Resource2 {
         return void 0;
       }
       const field = fields[col];
-      const dataIndex = this._displayToDataIndex.get(row) ?? row;
-      const value = getValue(this._rows.value[dataIndex], field.path);
+      const dataIndex = this._sorting.getDataIndex(row);
+      const value = getValue2(this._rows.value[dataIndex], field.path);
       if (value == null) {
         return "";
       }
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
-        case FormatEnum2.Ref: {
+        case FormatEnum3.Ref: {
           if (!field.referencePath) {
             return "";
           }
-          return getValue(value.target, field.referencePath);
+          return getValue2(value.target, field.referencePath);
         }
         default: {
           return formatForEditing({
@@ -673,7 +762,7 @@ var TableModel = class extends Resource2 {
       }
     };
     this.setCellData = ({ col, row }, value) => {
-      const rowIdx = this._displayToDataIndex.get(row) ?? row;
+      const rowIdx = this._sorting.getDataIndex(row);
       const fields = this.table.view?.target?.fields ?? [];
       if (col < 0 || col >= fields.length) {
         return;
@@ -681,7 +770,7 @@ var TableModel = class extends Resource2 {
       const field = fields[col];
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
-        case FormatEnum2.Ref: {
+        case FormatEnum3.Ref: {
           if (isReactiveObject(value)) {
             setValue(this._rows.value[rowIdx], field.path, makeRef2(value));
           }
@@ -699,7 +788,11 @@ var TableModel = class extends Resource2 {
     };
     this._table = table;
     this._projection = projection;
-    this._sorting.value = sorting.at(0);
+    this._sorting = new TableSorting(this._rows, table, projection);
+    if (sorting.length > 0) {
+      const [sort] = sorting;
+      this._sorting.setSort(sort.fieldId, sort.direction);
+    }
     this._pinnedRows = pinnedRows;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
@@ -714,7 +807,13 @@ var TableModel = class extends Resource2 {
     return this._projection;
   }
   get rows() {
-    return this._sortedRows;
+    return this._sorting.sortedRows;
+  }
+  /**
+  * @reactive
+  */
+  get sorting() {
+    return this._sorting.sorting;
   }
   get pinnedRows() {
     return this._pinnedRows;
@@ -731,9 +830,6 @@ var TableModel = class extends Resource2 {
     });
     return this._columnMeta;
   }
-  get sorting() {
-    return this._sorting.value;
-  }
   get selection() {
     return this._selection;
   }
@@ -742,13 +838,12 @@ var TableModel = class extends Resource2 {
   //
   async _open() {
     this.initializeColumnMeta();
-    this.initializeSorting();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sortedRows, () => this._onRowOrderChanged?.());
+    this._selection = new SelectionModel(this._sorting.sortedRows, () => this._onRowOrderChanged?.());
     await this._selection.open(this._ctx);
   }
   initializeColumnMeta() {
-    this._columnMeta = computed2(() => {
+    this._columnMeta = computed3(() => {
       const fields = this._table.view?.target?.fields ?? [];
       const meta = Object.fromEntries(fields.map((field, index) => [
         index,
@@ -774,60 +869,9 @@ var TableModel = class extends Resource2 {
       };
     });
   }
-  initializeSorting() {
-    this._sortedRows = computed2(() => {
-      this._displayToDataIndex.clear();
-      const sort = this._sorting.value;
-      if (!sort) {
-        return this._rows.value;
-      }
-      const field = this._table.view?.target?.fields.find((field2) => field2.id === sort.fieldId);
-      if (!field) {
-        return this._rows.value;
-      }
-      const { props } = this._projection.getFieldProjection(field.id);
-      const dataWithIndices = this._rows.value.map((item, index) => {
-        const rawValue = getValue(item, field.path);
-        let sortValue = rawValue;
-        if (props.type.startsWith("boolean")) {
-          sortValue = !!rawValue;
-        } else if (rawValue != null) {
-          if (props.format === FormatEnum2.Ref && field.referencePath) {
-            sortValue = getValue(rawValue, field.referencePath);
-          } else {
-            sortValue = formatForDisplay({
-              type: props.type,
-              format: props.format,
-              value: rawValue
-            });
-          }
-        }
-        return {
-          item,
-          index,
-          value: sortValue,
-          isEmpty: !props.type.startsWith("boolean") && (sortValue == null || sortValue === "")
-        };
-      });
-      const sorted = orderBy(dataWithIndices, [
-        "isEmpty",
-        "value"
-      ], [
-        "asc",
-        sort.direction
-      ]);
-      for (let displayIndex = 0; displayIndex < sorted.length; displayIndex++) {
-        const { index: dataIndex } = sorted[displayIndex];
-        if (displayIndex !== dataIndex) {
-          this._displayToDataIndex.set(displayIndex, dataIndex);
-        }
-      }
-      return sorted.map(({ item }) => item);
-    });
-  }
   initializeEffects() {
     const rowOrderWatcher = effect2(() => {
-      touch(this._sortedRows.value);
+      touch(this._sorting.sortedRows.value);
       this._onRowOrderChanged?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
@@ -836,8 +880,8 @@ var TableModel = class extends Resource2 {
       const rowEffects = [];
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push(effect2(() => {
-          const obj = this._sortedRows.value[row];
-          this?._table?.view?.target?.fields.forEach((field) => touch(getValue(obj, field.path)));
+          const obj = this._sorting.sortedRows.value[row];
+          this?._table?.view?.target?.fields.forEach((field) => touch(getValue2(obj, field.path)));
           this._onCellUpdate?.({
             row,
             col: start.col,
@@ -855,10 +899,10 @@ var TableModel = class extends Resource2 {
   * @param {(value: any) => any} update - A function that takes the current value and returns the updated value.
   */
   updateCellData({ col, row }, update) {
-    const dataRow = this._displayToDataIndex.get(row) ?? row;
+    const dataRow = this._sorting.getDataIndex(row);
     const fields = this.table.view?.target?.fields ?? [];
     const field = fields[col];
-    const value = getValue(this._rows.value[dataRow], field.path);
+    const value = getValue2(this._rows.value[dataRow], field.path);
     const updatedValue = update(value);
     setValue(this._rows.value[dataRow], field.path, updatedValue);
   }
@@ -871,9 +915,6 @@ var TableModel = class extends Resource2 {
     }
     const field = this.table.view.target?.fields.find((field2) => field2.id === fieldId);
     if (field && this._onDeleteColumn) {
-      if (this._sorting.value?.fieldId === fieldId) {
-        this.clearSort();
-      }
       this._onDeleteColumn(field.id);
     }
   }
@@ -894,13 +935,10 @@ var TableModel = class extends Resource2 {
   // Sorting
   //
   setSort(fieldId, direction) {
-    this._sorting.value = {
-      fieldId,
-      direction
-    };
+    this._sorting.setSort(fieldId, direction);
   }
   clearSort() {
-    this._sorting.value = void 0;
+    this._sorting.setSort("", "asc");
   }
   //
   // Pinning
@@ -916,12 +954,12 @@ var TableModel = class extends Resource2 {
 };
 
 // packages/ui/react-ui-table/src/model/modal-controller.ts
-import { signal as signal3 } from "@preact/signals-core";
+import { signal as signal4 } from "@preact/signals-core";
 import { log as log2 } from "@dxos/log";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
 var ModalController = class {
   constructor() {
-    this._state = signal3({
+    this._state = signal4({
       type: "closed"
     });
     this._triggerRef = {
@@ -1004,14 +1042,14 @@ var ModalController = class {
 };
 
 // packages/ui/react-ui-table/src/model/table-presentation.ts
-import { signal as signal4 } from "@preact/signals-core";
-import { FormatEnum as FormatEnum3, getValue as getValue2 } from "@dxos/echo-schema";
+import { signal as signal5 } from "@preact/signals-core";
+import { FormatEnum as FormatEnum4, getValue as getValue3 } from "@dxos/echo-schema";
 import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
 import { toPlaneCellIndex } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
 import { VIEW_FIELD_LIMIT } from "@dxos/schema";
 var TablePresentation = class {
-  constructor(model, _visibleRange = signal4({
+  constructor(model, _visibleRange = signal5({
     start: {
       row: 0,
       col: 0
@@ -1050,19 +1088,19 @@ var TablePresentation = class {
       const { props } = this.model.projection.getFieldProjection(field.id);
       const cell = {
         get value() {
-          const value = getValue2(obj, field.path);
+          const value = getValue3(obj, field.path);
           if (value == null) {
             return "";
           }
           switch (props.format) {
-            case FormatEnum3.Boolean: {
+            case FormatEnum4.Boolean: {
               return "";
             }
-            case FormatEnum3.Ref: {
+            case FormatEnum4.Ref: {
               if (!field.referencePath) {
                 return "";
               }
-              return getValue2(value.target, field.referencePath);
+              return getValue3(value.target, field.referencePath);
             }
             default: {
               return formatForDisplay2({
@@ -1089,8 +1127,8 @@ var TablePresentation = class {
       if (classes.length > 0) {
         cell.className = mx(classes.flat());
       }
-      if (props.format === FormatEnum3.Ref && props.referenceSchema) {
-        const targetObj = getValue2(obj, field.path)?.target;
+      if (props.format === FormatEnum4.Ref && props.referenceSchema) {
+        const targetObj = getValue3(obj, field.path)?.target;
         if (targetObj) {
           cell.accessoryHtml = tableButtons.referencedCell.render({
             targetId: targetObj.id,
@@ -1098,8 +1136,8 @@ var TablePresentation = class {
           });
         }
       }
-      if (props.format === FormatEnum3.Boolean) {
-        const value = getValue2(obj, field.path);
+      if (props.format === FormatEnum4.Boolean) {
+        const value = getValue3(obj, field.path);
         cell.accessoryHtml = tableControls.switch.render({
           colIndex,
           rowIndex: displayIndex,
@@ -1139,7 +1177,8 @@ var TablePresentation = class {
         resizeHandle: "col",
         accessoryHtml: tableButtons.columnSettings.render({
           fieldId: field.id
-        })
+        }),
+        className: "!bg-gridHeader"
       };
     }
     return cells;
@@ -1189,13 +1228,14 @@ var TablePresentation = class {
         col: 0,
         row: 0
       })]: {
-        value: "",
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: 0,
           header: true,
           checked: this.model.selection.allRowsSeleted.value
         }),
-        readonly: true
+        className: "!bg-gridHeader",
+        readonly: true,
+        value: ""
       }
     };
   }
@@ -1205,11 +1245,12 @@ var TablePresentation = class {
         col: 0,
         row: 0
       })]: {
-        value: "",
         accessoryHtml: tableButtons.addColumn.render({
           disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT
         }),
-        readonly: true
+        className: "!bg-gridHeader",
+        readonly: true,
+        value: ""
       }
     };
   }
@@ -1217,7 +1258,7 @@ var TablePresentation = class {
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
 import React6, { useCallback as useCallback3, useMemo as useMemo3, useRef } from "react";
-import { FormatEnum as FormatEnum4 } from "@dxos/echo-schema";
+import { FormatEnum as FormatEnum5 } from "@dxos/echo-schema";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { cellQuery, editorKeys, parseCellIndex, useGridContext as useGridContext2, GridCellEditor } from "@dxos/react-ui-grid";
 
@@ -1353,7 +1394,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     ];
     if (onQuery) {
       switch (fieldProjection.props.format) {
-        case FormatEnum4.Ref: {
+        case FormatEnum5.Ref: {
           extension2.push([
             completion({
               onQuery: (text) => onQuery(fieldProjection, text),
@@ -1609,7 +1650,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       if (schema) {
         const { objects } = await space.db.query(Filter.schema(schema)).run();
         const options = objects.map((obj) => {
-          const value = getValue3(obj, field.referencePath);
+          const value = getValue4(obj, field.referencePath);
           if (!value || typeof value !== "string") {
             return void 0;
           }