@dxos/react-ui-table 0.8.4-main.72ec0f3 → 0.8.4-main.7ace549

package/dist/lib/node-esm/{chunk-TRR3C5NX.mjs → chunk-CWSGS3Y2.mjs}

@@ -1,11 +1,10 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
-  schema_exports
-} from "./chunk-6POOFFYF.mjs";
+  Table_exports
+} from "./chunk-MKTMOY46.mjs";
 
 // src/util/dynamic-table.ts
-import { Filter, Obj, Query } from "@dxos/echo";
-import { getTypename, toJsonSchema } from "@dxos/echo/internal";
+import { Filter, Obj, Query, Ref, Type } from "@dxos/echo";
 import { ProjectionModel, View, getSchemaFromPropertyDefinitions } from "@dxos/schema";
 var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
@@ -16,8 +15,8 @@ var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
     };
   } else if (schema) {
     return {
-      typename: getTypename(schema),
-      jsonSchema: toJsonSchema(schema)
+      typename: Type.getTypename(schema),
+      jsonSchema: Type.toJsonSchema(schema)
     };
   } else if (typename && jsonSchema) {
     return {
@@ -29,25 +28,25 @@ var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   }
 };
 var makeDynamicTable = ({ jsonSchema, properties }) => {
-  const table = Obj.make(schema_exports.Table, {
-    sizes: {}
-  });
   const view = View.make({
     query: Query.select(Filter.everything()),
     jsonSchema,
-    presentation: table,
     ...properties && {
       fields: properties.map((property) => property.name)
     }
   });
+  const object = Obj.make(Table_exports.Table, {
+    view: Ref.make(view),
+    sizes: {}
+  });
   const projection = new ProjectionModel(jsonSchema, view.projection);
   projection.normalizeView();
   if (properties && projection.fields) {
-    setProperties(view, projection, table, properties);
+    setProperties(view, projection, object, properties);
   }
   return {
     projection,
-    view
+    object
   };
 };
 var setProperties = (view, projection, table, properties) => {
@@ -274,13 +273,13 @@ var narrowSchema = (schema, paths) => {
 // src/model/table-model.ts
 import { computed as computed3, effect as effect2, signal as signal3 } from "@preact/signals-core";
 import { Resource as Resource2 } from "@dxos/context";
-import { Obj as Obj2, Ref } from "@dxos/echo";
-import { FormatEnum as FormatEnum2, getSchema, getValue as getValue2, setValue, toEffectSchema } from "@dxos/echo/internal";
+import { Format as Format2, Obj as Obj2, Ref as Ref2 } from "@dxos/echo";
+import { getValue as getValue2, setValue, toEffectSchema } from "@dxos/echo/internal";
 import { invariant } from "@dxos/invariant";
 import { ObjectId } from "@dxos/keys";
 import { getSnapshot, isLiveObject } from "@dxos/live-object";
 import { formatForEditing, parseValue } from "@dxos/react-ui-form";
-import { ProjectionModel as ProjectionModel2, validateSchema } from "@dxos/schema";
+import { validateSchema } from "@dxos/schema";
 
 // src/util/tag.ts
 var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
@@ -395,23 +394,23 @@ var SelectionModel = class extends Resource {
 // src/model/table-sorting.ts
 import { computed as computed2, signal as signal2 } from "@preact/signals-core";
 import orderBy from "lodash.orderby";
-import { FormatEnum, TypeEnum, getValue } from "@dxos/echo/internal";
+import { Format, TypeEnum, getValue } from "@dxos/echo/internal";
 import { formatForDisplay } from "@dxos/react-ui-form";
 var TableSorting = class {
-  _view;
-  _projection;
   _displayToDataIndex = /* @__PURE__ */ new Map();
   _rows;
+  _getView;
+  _projection;
   _localSort = signal2(void 0);
   _isDirty;
   sortedRows;
-  constructor(rows, _view, _projection) {
-    this._view = _view;
-    this._projection = _projection;
+  constructor({ rows, projection, getView }) {
     this._rows = rows;
+    this._getView = getView;
+    this._projection = projection;
     this._isDirty = computed2(() => {
       const local = this._localSort.value;
-      const viewSort = this._view.sort?.[0];
+      const viewSort = this._getView().sort?.[0];
       if (local?.type === "cleared") {
         return viewSort !== void 0;
       }
@@ -437,7 +436,7 @@ var TableSorting = class {
     if (local?.type === "active") {
       return local.sort;
     }
-    return this._view.sort?.[0];
+    return this._getView().sort?.[0];
   }
   /**
   * @reactive
@@ -480,12 +479,13 @@ var TableSorting = class {
   }
   save() {
     if (this._localSort.value !== void 0) {
+      const view = this._getView();
       if (this._localSort.value.type === "active") {
-        this._view.sort = [
+        view.sort = [
           this._localSort.value.sort
         ];
       } else {
-        this._view.sort = [];
+        view.sort = [];
       }
       this._localSort.value = void 0;
     }
@@ -542,7 +542,7 @@ var TableSorting = class {
     if (value == null) {
       return value;
     }
-    if (format === FormatEnum.SingleSelect) {
+    if (format === Format.TypeFormat.SingleSelect) {
       const options = props.options;
       if (!options) {
         return void 0;
@@ -550,7 +550,7 @@ var TableSorting = class {
       const option = options.find((option2) => option2.id === value);
       return option ? options.indexOf(option) : void 0;
     }
-    if (format === FormatEnum.Ref && field.referencePath) {
+    if (format === Format.TypeFormat.Ref && field.referencePath) {
       const refValue = getValue(value.target, field.referencePath);
       return refValue;
     }
@@ -573,9 +573,8 @@ var defaultFeatures = {
   schemaEditable: false
 };
 var TableModel = class extends Resource2 {
-  _view;
+  _object;
   _projection;
-  _table;
   _visibleRange = signal3({
     start: {
       row: 0,
@@ -600,13 +599,13 @@ var TableModel = class extends Resource2 {
   _pinnedRows;
   _selection;
   _columnMeta;
-  constructor({ view, schema, projection, features = {}, sorting = [], initialSelection = [], pinnedRows = {
+  constructor({ object, projection, features = {}, sorting = [], initialSelection = [], pinnedRows = {
     top: [],
     bottom: []
   }, rowActions = [], onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
     super();
-    this._view = view;
-    this._projection = projection ?? new ProjectionModel2(schema, view.projection);
+    this._object = object;
+    this._projection = projection;
     this._projection.normalizeView();
     this._features = {
       ...defaultFeatures,
@@ -614,14 +613,18 @@ var TableModel = class extends Resource2 {
     };
     invariant(!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === "single"), "Single selection is not compatible with editable tables.", {
       F: __dxlog_file,
-      L: 148,
+      L: 137,
       S: this,
       A: [
         "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
         "'Single selection is not compatible with editable tables.'"
       ]
     });
-    this._sorting = new TableSorting(this._rows, this._view, this._projection);
+    this._sorting = new TableSorting({
+      rows: this._rows,
+      getView: () => this.view,
+      projection: this._projection
+    });
     if (sorting.length > 0) {
       const [sort] = sorting;
       this._sorting.setSort(sort.fieldId, sort.direction);
@@ -637,22 +640,23 @@ var TableModel = class extends Resource2 {
     this._onRowAction = onRowAction;
   }
   get id() {
-    return Obj2.getDXN(this._view).toString();
+    return Obj2.getDXN(this._object).toString();
   }
   get view() {
-    return this._view;
-  }
-  get table() {
-    invariant(this._table, "Model not initialized", {
+    const view = this._object.view.target;
+    invariant(view, "Table model not initialized", {
       F: __dxlog_file,
-      L: 186,
+      L: 176,
       S: this,
       A: [
-        "this._table",
-        "'Model not initialized'"
+        "view",
+        "'Table model not initialized'"
       ]
     });
-    return this._table;
+    return view;
+  }
+  get table() {
+    return this._object;
   }
   get projection() {
     return this._projection;
@@ -684,7 +688,7 @@ var TableModel = class extends Resource2 {
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 225,
+      L: 219,
       S: this,
       A: [
         "this._columnMeta",
@@ -707,17 +711,7 @@ var TableModel = class extends Resource2 {
   // Initialisation
   //
   async _open() {
-    const presentation = this._view.presentation.target ?? await this._view.presentation.load();
-    invariant(Obj2.instanceOf(schema_exports.Table, presentation), void 0, {
-      F: __dxlog_file,
-      L: 248,
-      S: this,
-      A: [
-        "Obj.instanceOf(Table.Table, presentation)",
-        ""
-      ]
-    });
-    this._table = presentation;
+    await this._object.view.load();
     this.initializeColumnMeta();
     this.initializeEffects();
     await this._selection.open(this._ctx);
@@ -914,7 +908,7 @@ var TableModel = class extends Resource2 {
     }
     const { props } = this._projection.getFieldProjection(field.id);
     switch (props.format) {
-      case FormatEnum2.Ref: {
+      case Format2.TypeFormat.Ref: {
         if (!field.referencePath) {
           return "";
         }
@@ -972,7 +966,7 @@ var TableModel = class extends Resource2 {
       const currentRow = this._rows.value[rowIdx];
       invariant(currentRow, "Invalid row index", {
         F: __dxlog_file,
-        L: 525,
+        L: 516,
         S: this,
         A: [
           "currentRow",
@@ -981,10 +975,10 @@ var TableModel = class extends Resource2 {
       });
       const snapshot = getSnapshot(currentRow);
       setValue(snapshot, field.path, transformedValue);
-      const schema = getSchema(currentRow);
+      const schema = Obj2.getSchema(currentRow);
       invariant(schema, void 0, {
         F: __dxlog_file,
-        L: 531,
+        L: 522,
         S: this,
         A: [
           "schema",
@@ -996,7 +990,7 @@ var TableModel = class extends Resource2 {
         const error = validationResult[0];
         invariant(error.path === field.path, void 0, {
           F: __dxlog_file,
-          L: 536,
+          L: 527,
           S: this,
           A: [
             "error.path === field.path",
@@ -1022,7 +1016,7 @@ var TableModel = class extends Resource2 {
     const field = fields[col];
     const { props } = this._projection.getFieldProjection(field.id);
     const transformedValue = editorTextToCellValue(props, value);
-    if (props.format === FormatEnum2.Ref && !isLiveObject(value)) {
+    if (props.format === Format2.TypeFormat.Ref && !isLiveObject(value)) {
       return;
     }
     if (plane === "frozenRowsEnd") {
@@ -1118,14 +1112,14 @@ var TableModel = class extends Resource2 {
 };
 var editorTextToCellValue = (props, value) => {
   switch (props.format) {
-    case FormatEnum2.Ref: {
+    case Format2.TypeFormat.Ref: {
       if (isLiveObject(value)) {
-        return Ref.make(value);
+        return Ref2.make(value);
       } else {
         return value;
       }
     }
-    case FormatEnum2.SingleSelect: {
+    case Format2.TypeFormat.SingleSelect: {
       const ids = extractTagIds(value);
       if (ids && ids.length > 0) {
         return ids[0];
@@ -1133,7 +1127,7 @@ var editorTextToCellValue = (props, value) => {
         return value;
       }
     }
-    case FormatEnum2.MultiSelect: {
+    case Format2.TypeFormat.MultiSelect: {
       const ids = extractTagIds(value);
       return ids || value;
     }
@@ -1217,7 +1211,7 @@ var ModalController = class {
 import { signal as signal5 } from "@preact/signals-core";
 import * as Predicate from "effect/Predicate";
 import { Obj as Obj3 } from "@dxos/echo";
-import { FormatEnum as FormatEnum3, TypeEnum as TypeEnum2, getValue as getValue3 } from "@dxos/echo/internal";
+import { Format as Format3, TypeEnum as TypeEnum2, getValue as getValue3 } from "@dxos/echo/internal";
 import { cellClassesForFieldType, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
 import { toPlaneCellIndex } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
@@ -1304,12 +1298,12 @@ var TablePresentation = class {
           return "";
         }
         switch (props.format) {
-          case FormatEnum3.Boolean:
-          case FormatEnum3.SingleSelect:
-          case FormatEnum3.MultiSelect: {
+          case Format3.TypeFormat.Boolean:
+          case Format3.TypeFormat.SingleSelect:
+          case Format3.TypeFormat.MultiSelect: {
             return "";
           }
-          case FormatEnum3.Ref: {
+          case Format3.TypeFormat.Ref: {
             if (!field.referencePath) {
               return "";
             }
@@ -1362,14 +1356,14 @@ var TablePresentation = class {
         cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
       }
     }
-    if (props.format === FormatEnum3.Ref && props.referenceSchema) {
+    if (props.format === Format3.TypeFormat.Ref && props.referenceSchema) {
       const targetObj = getValue3(obj, field.path)?.target;
       if (targetObj) {
         const dxn = Obj3.getDXN(targetObj)?.toString();
         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>`;
       }
     }
-    if (props.format === FormatEnum3.Boolean) {
+    if (props.format === Format3.TypeFormat.Boolean) {
       const value = getValue3(obj, field.path);
       cell.accessoryHtml = tableControls.switch.render({
         colIndex,
@@ -1378,7 +1372,7 @@ var TablePresentation = class {
       });
       cell.readonly = "no-text-select";
     }
-    if (props.format === FormatEnum3.SingleSelect) {
+    if (props.format === Format3.TypeFormat.SingleSelect) {
       const value = getValue3(obj, field.path);
       const options = this.model.projection.getFieldProjection(field.id).props.options;
       if (options) {
@@ -1388,7 +1382,7 @@ var TablePresentation = class {
         }
       }
     }
-    if (props.format === FormatEnum3.MultiSelect) {
+    if (props.format === Format3.TypeFormat.MultiSelect) {
       const values = getValue3(obj, field.path);
       const options = this.model.projection.getFieldProjection(field.id).props.options;
       if (options && values && values.length > 0) {
@@ -1647,31 +1641,65 @@ var cellClassesForRowSelection = (selected, selectionMode) => {
   }
 };
 
+// src/hooks/useAddRow.ts
+import { useCallback } from "react";
+import { Obj as Obj4 } from "@dxos/echo";
+var useAddRow = ({ space, schema }) => {
+  return useCallback((data) => {
+    if (space && schema) {
+      try {
+        space.db.add(Obj4.make(schema, data ?? {}));
+        return "final";
+      } catch (error) {
+        return "draft";
+      }
+    }
+    return "final";
+  }, [
+    space,
+    schema
+  ]);
+};
+
+// src/hooks/useProjectionModel.ts
+import { useMemo } from "react";
+import { Type as Type2 } from "@dxos/echo";
+import { ProjectionModel as ProjectionModel2 } from "@dxos/schema";
+var useProjectionModel = (schema, table) => useMemo(() => {
+  if (schema && table?.view.target?.projection) {
+    const projection = new ProjectionModel2(Type2.toJsonSchema(schema), table.view.target.projection);
+    projection.normalizeView();
+    return projection;
+  }
+}, [
+  schema,
+  table?.view.target?.projection
+]);
+
 // src/hooks/useTableModel.ts
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { effect as effect3 } from "@preact/signals-core";
 import orderBy2 from "lodash.orderby";
-import { useEffect, useMemo, useState } from "react";
-import { Obj as Obj4 } from "@dxos/echo";
+import { useEffect, useMemo as useMemo2, useState } from "react";
+import { Obj as Obj5 } from "@dxos/echo";
 import { useSelected, useSelectionActions } from "@dxos/react-ui-attention";
 import { isNonNullable } from "@dxos/util";
-var useTableModel = ({ view, schema, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
+var useTableModel = ({ object, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
   var _effect = _useSignals();
   try {
-    const selected = useSelected(view && Obj4.getDXN(view).toString(), "multi");
-    const initialSelection = useMemo(() => selected, [
-      view
+    const selected = useSelected(object && Obj5.getDXN(object).toString(), "multi");
+    const initialSelection = useMemo2(() => selected, [
+      object
     ]);
     const [model, setModel] = useState();
     useEffect(() => {
-      if (!view || !schema) {
+      if (!object || !projection) {
         return;
       }
       let model2;
       const t = setTimeout(async () => {
         model2 = new TableModel({
-          view,
-          schema,
+          object,
           projection,
           features,
           rowActions,
@@ -1687,8 +1715,7 @@ var useTableModel = ({ view, schema, projection, rows, rowActions, features, onS
         void model2?.close();
       };
     }, [
-      view,
-      schema,
+      object,
       projection,
       features,
       rowActions,
@@ -1735,26 +1762,6 @@ var useTableModel = ({ view, schema, projection, rows, rowActions, features, onS
   }
 };
 
-// src/hooks/useAddRow.ts
-import { useCallback } from "react";
-import { Obj as Obj5 } from "@dxos/echo";
-var useAddRow = ({ space, schema }) => {
-  return useCallback((data) => {
-    if (space && schema) {
-      try {
-        space.db.add(Obj5.make(schema, data ?? {}));
-        return "final";
-      } catch (error) {
-        return "draft";
-      }
-    }
-    return "final";
-  }, [
-    space,
-    schema
-  ]);
-};
-
 export {
   getBaseSchema,
   makeDynamicTable,
@@ -1770,7 +1777,8 @@ export {
   ModalController,
   TablePresentation,
   cellClassesForRowSelection,
-  useTableModel,
-  useAddRow
+  useAddRow,
+  useProjectionModel,
+  useTableModel
 };
-//# sourceMappingURL=chunk-TRR3C5NX.mjs.map
+//# sourceMappingURL=chunk-CWSGS3Y2.mjs.map