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

package/dist/lib/node/index.cjs

@@ -77,7 +77,6 @@ var import_react_ui_form3 = require("@dxos/react-ui-form");
 var import_react6 = __toESM(require("react"));
 var import_react_ui6 = require("@dxos/react-ui");
 var import_signals_core = require("@preact/signals-core");
-var import_lodash = __toESM(require("lodash.orderby"));
 var import_context = require("@dxos/context");
 var import_echo_schema3 = require("@dxos/echo-schema");
 var import_invariant2 = require("@dxos/invariant");
@@ -92,15 +91,19 @@ var import_react_client2 = require("@dxos/react-client");
 var import_echo5 = require("@dxos/react-client/echo");
 var import_schema = require("@dxos/schema");
 var import_signals_core3 = require("@preact/signals-core");
-var import_log2 = require("@dxos/log");
-var import_signals_core4 = require("@preact/signals-core");
+var import_lodash = __toESM(require("lodash.orderby"));
 var import_echo_schema5 = require("@dxos/echo-schema");
 var import_react_ui_form5 = require("@dxos/react-ui-form");
+var import_signals_core4 = require("@preact/signals-core");
+var import_log2 = require("@dxos/log");
+var import_signals_core5 = require("@preact/signals-core");
+var import_echo_schema6 = require("@dxos/echo-schema");
+var import_react_ui_form6 = require("@dxos/react-ui-form");
 var import_react_ui_grid3 = require("@dxos/react-ui-grid");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_schema2 = require("@dxos/schema");
 var import_react7 = __toESM(require("react"));
-var import_echo_schema6 = require("@dxos/echo-schema");
+var import_echo_schema7 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
 var import_react_ui_grid4 = require("@dxos/react-ui-grid");
 var import_autocomplete = require("@codemirror/autocomplete");
@@ -242,7 +245,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 = import_echo_schema2.S.omit("id");
       return omit(schema2);
@@ -255,7 +260,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((0, import_echo3.create)(schema2, values));
       state.onCreate?.(obj);
@@ -630,6 +637,93 @@ var SelectionModel = class extends import_context2.Resource {
     return this._allSelected;
   }
 };
+var TableSorting = class {
+  constructor(rows, _table, _projection) {
+    this._table = _table;
+    this._projection = _projection;
+    this._displayToDataIndex = /* @__PURE__ */ new Map();
+    this._sorting = (0, import_signals_core3.signal)(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 (0, import_signals_core3.computed)(() => {
+      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 === import_echo_schema5.TypeEnum.Boolean) && (sortValue == null || sortValue === "");
+        return {
+          item,
+          index,
+          value: sortValue,
+          isEmpty
+        };
+      });
+      const ordered = (0, import_lodash.default)(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 = (0, import_echo_schema5.getValue)(item, field.path);
+    if (type === import_echo_schema5.TypeEnum.Boolean) {
+      return !!value;
+    }
+    if (type === import_echo_schema5.TypeEnum.Number) {
+      return value;
+    }
+    if (value == null) {
+      return value;
+    }
+    if (format === import_echo_schema5.FormatEnum.Ref && field.referencePath) {
+      const refValue = (0, import_echo_schema5.getValue)(value.target, field.referencePath);
+      return refValue;
+    }
+    return (0, import_react_ui_form5.formatForDisplay)({
+      type,
+      format,
+      value
+    });
+  }
+};
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var TableModel = class extends import_context.Resource {
   constructor({ table, projection, sorting = [], pinnedRows = {
@@ -648,8 +742,6 @@ var TableModel = class extends import_context.Resource {
         col: 0
       }
     });
-    this._displayToDataIndex = /* @__PURE__ */ new Map();
-    this._sorting = (0, import_signals_core.signal)(void 0);
     this._rows = (0, import_signals_core.signal)([]);
     this.setRows = (obj) => {
       this._rows.value = obj;
@@ -657,11 +749,11 @@ var TableModel = class extends import_context.Resource {
     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) {
@@ -678,7 +770,7 @@ var TableModel = class extends import_context.Resource {
         return void 0;
       }
       const field = fields[col];
-      const dataIndex = this._displayToDataIndex.get(row) ?? row;
+      const dataIndex = this._sorting.getDataIndex(row);
       const value = (0, import_echo_schema3.getValue)(this._rows.value[dataIndex], field.path);
       if (value == null) {
         return "";
@@ -701,7 +793,7 @@ var TableModel = class extends import_context.Resource {
       }
     };
     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;
@@ -727,7 +819,11 @@ var TableModel = class extends import_context.Resource {
     };
     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;
@@ -742,7 +838,13 @@ var TableModel = class extends import_context.Resource {
     return this._projection;
   }
   get rows() {
-    return this._sortedRows;
+    return this._sorting.sortedRows;
+  }
+  /**
+  * @reactive
+  */
+  get sorting() {
+    return this._sorting.sorting;
   }
   get pinnedRows() {
     return this._pinnedRows;
@@ -759,9 +861,6 @@ var TableModel = class extends import_context.Resource {
     });
     return this._columnMeta;
   }
-  get sorting() {
-    return this._sorting.value;
-  }
   get selection() {
     return this._selection;
   }
@@ -770,9 +869,8 @@ var TableModel = class extends import_context.Resource {
   //
   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() {
@@ -802,60 +900,9 @@ var TableModel = class extends import_context.Resource {
       };
     });
   }
-  initializeSorting() {
-    this._sortedRows = (0, import_signals_core.computed)(() => {
-      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 = (0, import_echo_schema3.getValue)(item, field.path);
-        let sortValue = rawValue;
-        if (props.type.startsWith("boolean")) {
-          sortValue = !!rawValue;
-        } else if (rawValue != null) {
-          if (props.format === import_echo_schema3.FormatEnum.Ref && field.referencePath) {
-            sortValue = (0, import_echo_schema3.getValue)(rawValue, field.referencePath);
-          } else {
-            sortValue = (0, import_react_ui_form4.formatForDisplay)({
-              type: props.type,
-              format: props.format,
-              value: rawValue
-            });
-          }
-        }
-        return {
-          item,
-          index,
-          value: sortValue,
-          isEmpty: !props.type.startsWith("boolean") && (sortValue == null || sortValue === "")
-        };
-      });
-      const sorted = (0, import_lodash.default)(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 = (0, import_signals_core.effect)(() => {
-      touch(this._sortedRows.value);
+      touch(this._sorting.sortedRows.value);
       this._onRowOrderChanged?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
@@ -864,7 +911,7 @@ var TableModel = class extends import_context.Resource {
       const rowEffects = [];
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push((0, import_signals_core.effect)(() => {
-          const obj = this._sortedRows.value[row];
+          const obj = this._sorting.sortedRows.value[row];
           this?._table?.view?.target?.fields.forEach((field) => touch((0, import_echo_schema3.getValue)(obj, field.path)));
           this._onCellUpdate?.({
             row,
@@ -883,7 +930,7 @@ var TableModel = class extends import_context.Resource {
   * @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 = (0, import_echo_schema3.getValue)(this._rows.value[dataRow], field.path);
@@ -899,9 +946,6 @@ var TableModel = class extends import_context.Resource {
     }
     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);
     }
   }
@@ -922,13 +966,10 @@ var TableModel = class extends import_context.Resource {
   // 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
@@ -945,7 +986,7 @@ var TableModel = class extends import_context.Resource {
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
 var ModalController = class {
   constructor() {
-    this._state = (0, import_signals_core3.signal)({
+    this._state = (0, import_signals_core4.signal)({
       type: "closed"
     });
     this._triggerRef = {
@@ -1027,7 +1068,7 @@ var ModalController = class {
   }
 };
 var TablePresentation = class {
-  constructor(model, _visibleRange = (0, import_signals_core4.signal)({
+  constructor(model, _visibleRange = (0, import_signals_core5.signal)({
     start: {
       row: 0,
       col: 0
@@ -1066,22 +1107,22 @@ var TablePresentation = class {
       const { props } = this.model.projection.getFieldProjection(field.id);
       const cell = {
         get value() {
-          const value = (0, import_echo_schema5.getValue)(obj, field.path);
+          const value = (0, import_echo_schema6.getValue)(obj, field.path);
           if (value == null) {
             return "";
           }
           switch (props.format) {
-            case import_echo_schema5.FormatEnum.Boolean: {
+            case import_echo_schema6.FormatEnum.Boolean: {
               return "";
             }
-            case import_echo_schema5.FormatEnum.Ref: {
+            case import_echo_schema6.FormatEnum.Ref: {
               if (!field.referencePath) {
                 return "";
               }
-              return (0, import_echo_schema5.getValue)(value.target, field.referencePath);
+              return (0, import_echo_schema6.getValue)(value.target, field.referencePath);
             }
             default: {
-              return (0, import_react_ui_form5.formatForDisplay)({
+              return (0, import_react_ui_form6.formatForDisplay)({
                 type: props.type,
                 format: props.format,
                 value
@@ -1091,22 +1132,22 @@ var TablePresentation = class {
         }
       };
       const classes = [];
-      const formatClasses = (0, import_react_ui_form5.cellClassesForFieldType)({
+      const formatClasses = (0, import_react_ui_form6.cellClassesForFieldType)({
         type: props.type,
         format: props.format
       });
       if (formatClasses) {
         classes.push(formatClasses);
       }
-      const rowSelectionClasses = (0, import_react_ui_form5.cellClassesForRowSelection)(this.model.selection.isObjectSelected(obj));
+      const rowSelectionClasses = (0, import_react_ui_form6.cellClassesForRowSelection)(this.model.selection.isObjectSelected(obj));
       if (rowSelectionClasses) {
         classes.push(rowSelectionClasses);
       }
       if (classes.length > 0) {
         cell.className = (0, import_react_ui_theme2.mx)(classes.flat());
       }
-      if (props.format === import_echo_schema5.FormatEnum.Ref && props.referenceSchema) {
-        const targetObj = (0, import_echo_schema5.getValue)(obj, field.path)?.target;
+      if (props.format === import_echo_schema6.FormatEnum.Ref && props.referenceSchema) {
+        const targetObj = (0, import_echo_schema6.getValue)(obj, field.path)?.target;
         if (targetObj) {
           cell.accessoryHtml = tableButtons.referencedCell.render({
             targetId: targetObj.id,
@@ -1114,8 +1155,8 @@ var TablePresentation = class {
           });
         }
       }
-      if (props.format === import_echo_schema5.FormatEnum.Boolean) {
-        const value = (0, import_echo_schema5.getValue)(obj, field.path);
+      if (props.format === import_echo_schema6.FormatEnum.Boolean) {
+        const value = (0, import_echo_schema6.getValue)(obj, field.path);
         cell.accessoryHtml = tableControls.switch.render({
           colIndex,
           rowIndex: displayIndex,
@@ -1155,7 +1196,8 @@ var TablePresentation = class {
         resizeHandle: "col",
         accessoryHtml: tableButtons.columnSettings.render({
           fieldId: field.id
-        })
+        }),
+        className: "!bg-gridHeader"
       };
     }
     return cells;
@@ -1164,7 +1206,7 @@ var TablePresentation = class {
     const cells = {};
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       const isSelected = this.model.selection.isRowIndexSelected(row);
-      const classes = (0, import_react_ui_form5.cellClassesForRowSelection)(isSelected);
+      const classes = (0, import_react_ui_form6.cellClassesForRowSelection)(isSelected);
       cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
         col: 0,
         row
@@ -1184,7 +1226,7 @@ var TablePresentation = class {
     const cells = {};
     for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
       const isSelected = this.model.selection.isRowIndexSelected(row);
-      const classes = (0, import_react_ui_form5.cellClassesForRowSelection)(isSelected);
+      const classes = (0, import_react_ui_form6.cellClassesForRowSelection)(isSelected);
       cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
         col: 0,
         row
@@ -1205,13 +1247,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: ""
       }
     };
   }
@@ -1221,11 +1264,12 @@ var TablePresentation = class {
         col: 0,
         row: 0
       })]: {
-        value: "",
         accessoryHtml: tableButtons.addColumn.render({
           disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= import_schema2.VIEW_FIELD_LIMIT
         }),
-        readonly: true
+        className: "!bg-gridHeader",
+        readonly: true,
+        value: ""
       }
     };
   }
@@ -1357,7 +1401,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     ];
     if (onQuery) {
       switch (fieldProjection.props.format) {
-        case import_echo_schema6.FormatEnum.Ref: {
+        case import_echo_schema7.FormatEnum.Ref: {
           extension2.push([
             completion({
               onQuery: (text) => onQuery(fieldProjection, text),