@dxos/react-ui-table 0.8.4-main.2c6827d → 0.8.4-main.3c1ae3b

package/dist/lib/browser/index.mjs

@@ -14,9 +14,10 @@ import {
   tableControls,
   touch,
   useAddRow,
+  useProjectionModel,
   useTableModel
-} from "./chunk-GS2UNGJK.mjs";
-import "./chunk-2PFAPQL4.mjs";
+} from "./chunk-V7A7ZA5E.mjs";
+import "./chunk-CJQ6T4LL.mjs";
 
 // src/translations.ts
 var translationKey = "react-ui-table";
@@ -28,8 +29,8 @@ var translations = [
         "create object label": "Create table",
         "table name placeholder": "Table name",
         "settings title": "Table settings",
-        "table schema label": "Record type",
-        "new schema": "New record type",
+        "table schema label": "Type",
+        "new schema": "New type",
         "continue label": "Continue",
         "create stack section label": "Create table",
         "add row label": "Add row",
@@ -64,7 +65,7 @@ import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking"
 import { EditorView } from "@codemirror/view";
 import React3, { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { debounce } from "@dxos/async";
-import { FormatEnum as FormatEnum2, TypeEnum } from "@dxos/echo/internal";
+import { Format as Format2, TypeEnum } from "@dxos/echo/internal";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { GridCellEditor, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
 
@@ -72,7 +73,7 @@ import { GridCellEditor, editorKeys, parseCellIndex as parseCellIndex2, useGridC
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
 import { useGridContext } from "@dxos/react-ui-grid";
-var CellValidationMessage = ({ validationError, variant = "error", __gridScope }) => {
+var CellValidationMessage = ({ __gridScope, validationError, variant = "error" }) => {
   var _effect = _useSignals();
   try {
     const { editing, editBox: box } = useGridContext("GridSheetCellEditor", __gridScope);
@@ -101,15 +102,14 @@ var CellValidationMessage = ({ validationError, variant = "error", __gridScope }
 
 // src/components/TableCellEditor/FormCellEditor.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import * as Schema from "effect/Schema";
 import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Filter, Obj } from "@dxos/echo";
-import { FormatEnum, Ref, getValue } from "@dxos/echo/internal";
+import { Format, Ref, getValue } from "@dxos/echo/internal";
 import { invariant } from "@dxos/invariant";
 import { getSnapshot } from "@dxos/live-object";
 import { getSpace } from "@dxos/react-client/echo";
 import { Popover } from "@dxos/react-ui";
-import { Form } from "@dxos/react-ui-form";
+import { Form, omitId } from "@dxos/react-ui-form";
 import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
 import { getDeep, isTruthy, setDeep } from "@dxos/util";
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
@@ -119,53 +119,74 @@ var createOptionLabel = [
     ns: translationKey
   }
 ];
-var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals, onCreate, __gridScope, ...formProps }) => {
+var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onCreate, ...formProps }) => {
   var _effect = _useSignals2();
   try {
-    const { editing: contextEditing, setEditing, id: gridId } = useGridContext2("ArrayEditor", __gridScope);
-    const [editing, setLocalEditing] = useState(false);
     const anchorRef = useRef(null);
-    const getSchema = useCallback((typeAnnotation) => {
+    const { id: _gridId, editing: contextEditing, setEditing } = useGridContext2("ArrayEditor", __gridScope);
+    const [editing, setLocalEditing] = useState(false);
+    useEffect(() => {
+      if (contextEditing && contextEditing.cellElement) {
+        anchorRef.current = contextEditing.cellElement.querySelector(".dx-grid__cell__content");
+        setLocalEditing(true);
+      } else {
+        anchorRef.current = null;
+        setLocalEditing(false);
+      }
+    }, [
+      contextEditing
+    ]);
+    const narrowedSchema = useMemo(() => {
+      if (!schema) {
+        return void 0;
+      }
+      return narrowSchema(schema, [
+        fieldProjection.field.path
+      ]);
+    }, [
+      JSON.stringify(schema),
+      fieldProjection.field.path
+    ]);
+    const getSchema = useCallback(({ typename }) => {
       const space = getSpace(model.view);
       invariant(space, void 0, {
         F: __dxlog_file,
-        L: 57,
+        L: 73,
         S: void 0,
         A: [
           "space",
           ""
         ]
       });
-      let schema2;
-      if (client) {
-        schema2 = client.graph.schemaRegistry.getSchema(typeAnnotation.typename);
-      }
-      if (!schema2) {
-        schema2 = space.db.schemaRegistry.getSchema(typeAnnotation.typename);
-      }
+      const schema2 = space.db.schemaRegistry.query({
+        typename,
+        location: [
+          "database",
+          "runtime"
+        ]
+      }).runSync()[0];
       return {
         space,
         schema: schema2
       };
     }, [
-      client,
       model
     ]);
-    const handleQueryRefOptions = useCallback(async (typeAnnotation) => {
-      const { schema: schema2, space } = getSchema(typeAnnotation);
-      if (model && schema2 && space) {
-        const { objects } = await space.db.query(Filter.type(schema2)).run();
-        return objects.map((obj) => {
-          return {
-            dxn: Obj.getDXN(obj),
-            label: getValue(obj, fieldProjection.field.referencePath) || obj.id.toString()
-          };
-        }).filter(isTruthy);
+    const refSchema = useMemo(() => {
+      if (fieldProjection.props.format === Format.TypeFormat.Ref && fieldProjection.props.referenceSchema) {
+        const { schema: schema2 } = getSchema({
+          typename: fieldProjection.props.referenceSchema
+        });
+        return schema2;
       }
-      return [];
+      return null;
     }, [
-      client,
-      model
+      fieldProjection.props.format,
+      fieldProjection.props.referenceSchema,
+      getSchema
+    ]);
+    const createSchema = useMemo(() => refSchema ? omitId(refSchema) : null, [
+      refSchema
     ]);
     const originalRow = useMemo(() => {
       if (model && contextEditing) {
@@ -174,7 +195,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
           const draftRow = model.draftRows.value[cell.row];
           invariant(draftRow, void 0, {
             F: __dxlog_file,
-            L: 98,
+            L: 97,
             S: void 0,
             A: [
               "draftRow",
@@ -186,7 +207,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
           const row = model.getRowAt(cell.row);
           invariant(row, void 0, {
             F: __dxlog_file,
-            L: 102,
+            L: 101,
             S: void 0,
             A: [
               "row",
@@ -201,6 +222,16 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
       model,
       contextEditing
     ]);
+    const formValues = useMemo(() => originalRow ? getSnapshot(originalRow) : {}, [
+      originalRow
+    ]);
+    const handleOpenChange = useCallback((nextOpen) => {
+      if (nextOpen === false) {
+        setEditing(null);
+        onSave?.();
+      }
+      setLocalEditing(nextOpen);
+    }, []);
     const handleSave = useCallback((values) => {
       const path = fieldProjection.field.path;
       const value = getDeep(values, [
@@ -219,56 +250,6 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
       contextEditing,
       originalRow
     ]);
-    useEffect(() => {
-      if (contextEditing && contextEditing.cellElement) {
-        anchorRef.current = contextEditing.cellElement.querySelector(".dx-grid__cell__content");
-        setLocalEditing(true);
-      } else {
-        anchorRef.current = null;
-        setLocalEditing(false);
-      }
-    }, [
-      contextEditing
-    ]);
-    const narrowedSchema = useMemo(() => {
-      if (!schema) {
-        return void 0;
-      }
-      return narrowSchema(schema, [
-        fieldProjection.field.path
-      ]);
-    }, [
-      JSON.stringify(schema),
-      fieldProjection.field.path
-    ]);
-    const formValues = useMemo(() => originalRow ? getSnapshot(originalRow) : {}, [
-      originalRow
-    ]);
-    const handleOpenChange = useCallback((nextOpen) => {
-      if (nextOpen === false) {
-        setEditing(null);
-        onSave?.();
-      }
-      setLocalEditing(nextOpen);
-    }, []);
-    const refSchema = useMemo(() => {
-      if (fieldProjection.props.format === FormatEnum.Ref && fieldProjection.props.referenceSchema) {
-        const { schema: refSchema2 } = getSchema({
-          typename: fieldProjection.props.referenceSchema
-        });
-        return refSchema2;
-      }
-      return null;
-    }, [
-      fieldProjection.props.format,
-      fieldProjection.props.referenceSchema,
-      getSchema
-    ]);
-    const createSchema = useMemo(() => {
-      return refSchema ? Schema.omit("id")(refSchema) : null;
-    }, [
-      refSchema
-    ]);
     const handleCreate = useCallback((values) => {
       if (refSchema && onCreate) {
         const objectWithId = onCreate(refSchema, values);
@@ -292,6 +273,23 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
       refSchema,
       onCreate
     ]);
+    const handleQueryRefOptions = useCallback(async ({ typename }) => {
+      const { schema: schema2, space } = getSchema({
+        typename
+      });
+      if (model && schema2 && space) {
+        const objects = await space.db.query(Filter.type(schema2)).run();
+        return objects.map((obj) => {
+          return {
+            dxn: Obj.getDXN(obj),
+            label: getValue(obj, fieldProjection.field.referencePath) || obj.id.toString()
+          };
+        }).filter(isTruthy);
+      }
+      return [];
+    }, [
+      model
+    ]);
     if (!editing) {
       return null;
     }
@@ -303,21 +301,21 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
     }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
       tabIndex: -1,
       classNames: "popover-card-width density-fine"
-    }, /* @__PURE__ */ React2.createElement(Popover.Arrow, null), /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(Form, {
+    }, /* @__PURE__ */ React2.createElement(Popover.Arrow, null), /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Root, {
+      ...formProps,
       autoFocus: true,
-      values: formValues,
       schema: narrowedSchema,
+      values: formValues,
       onSave: handleSave,
-      ...formProps,
       onQueryRefOptions: handleQueryRefOptions,
       ...createSchema && {
-        onCreate: handleCreate,
         createSchema,
         createInitialValuePath: fieldProjection.field.referencePath,
         createOptionIcon: "ph--plus--regular",
-        createOptionLabel
+        createOptionLabel,
+        onCreate: handleCreate
       }
-    })))));
+    }, /* @__PURE__ */ React2.createElement(Form.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Content, null, /* @__PURE__ */ React2.createElement(Form.FieldSet, null), /* @__PURE__ */ React2.createElement(Form.Actions, null))))))));
   } finally {
     _effect.f();
   }
@@ -325,8 +323,12 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
 
 // src/components/TableCellEditor/TableCellEditor.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
-var adaptValidationMessage = (message) => message ? message.endsWith("is missing") ? "Can\u2019t be blank" : message : null;
-var TableValueEditor = ({ model, modals, schema, onFocus, onSave, onCreate, client, __gridScope }) => {
+var editorSlots = {
+  scroll: {
+    className: "!plb-[--dx-grid-cell-editor-padding-block]"
+  }
+};
+var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, onCreate }) => {
   var _effect = _useSignals3();
   try {
     const { editing } = useGridContext3("TableValueEditor", __gridScope);
@@ -339,7 +341,7 @@ var TableValueEditor = ({ model, modals, schema, onFocus, onSave, onCreate, clie
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
       invariant2(fieldProjection2, void 0, {
         F: __dxlog_file2,
-        L: 71,
+        L: 73,
         S: void 0,
         A: [
           "fieldProjection",
@@ -351,16 +353,15 @@ var TableValueEditor = ({ model, modals, schema, onFocus, onSave, onCreate, clie
       model,
       editing
     ]);
-    if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === FormatEnum2.SingleSelect || fieldProjection?.props.format === FormatEnum2.Ref) {
+    if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === Format2.TypeFormat.SingleSelect || fieldProjection?.props.format === Format2.TypeFormat.Ref) {
       return /* @__PURE__ */ React3.createElement(FormCellEditor, {
-        fieldProjection,
-        model,
-        schema,
         __gridScope,
+        schema,
+        model,
+        fieldProjection,
+        modals,
         onSave,
-        onCreate,
-        client,
-        modals
+        onCreate
       });
     }
     return /* @__PURE__ */ React3.createElement(TableCellEditor, {
@@ -374,12 +375,7 @@ var TableValueEditor = ({ model, modals, schema, onFocus, onSave, onCreate, clie
     _effect.f();
   }
 };
-var editorSlots = {
-  scroll: {
-    className: "!plb-[--dx-grid-cell-editor-padding-block]"
-  }
-};
-var TableCellEditor = ({ model, modals, onFocus, onSave, __gridScope }) => {
+var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
   var _effect = _useSignals3();
   try {
     const { editing, setEditing } = useGridContext3("TableCellEditor", __gridScope);
@@ -395,7 +391,7 @@ var TableCellEditor = ({ model, modals, onFocus, onSave, __gridScope }) => {
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
       invariant2(fieldProjection2, void 0, {
         F: __dxlog_file2,
-        L: 121,
+        L: 120,
         S: void 0,
         A: [
           "fieldProjection",
@@ -420,7 +416,7 @@ var TableCellEditor = ({ model, modals, onFocus, onSave, __gridScope }) => {
         setEditing(null);
         onSave?.();
       } else {
-        setValidationError(adaptValidationMessage(validationResult.error));
+        setValidationError(validationResult.error);
         setValidationVariant("error");
       }
     }, [
@@ -747,19 +743,13 @@ var TableRoot = ({ children, role = "article" }) => {
     _effect.f();
   }
 };
-var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, schema, client, onCreate, onRowClick, testId }, forwardedRef) => {
+var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId }, forwardedRef) => {
   var _effect = _useSignals7();
   try {
     const [dxGrid, setDxGrid] = useState4(null);
     const { hasAttention } = useAttention(model?.id ?? "table");
     const modals = useMemo4(() => new ModalController(), []);
     const draftRowCount = model?.getDraftRowCount() ?? 0;
-    const handleSave = useCallback4(() => {
-      dxGrid?.updateCells(true);
-      dxGrid?.requestUpdate();
-    }, [
-      dxGrid
-    ]);
     const frozen = useMemo4(() => {
       const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
       return {
@@ -776,13 +766,21 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       presentation
     ]);
     useEffect3(() => {
-      if (!presentation || !dxGrid) {
+      const fieldId = model?.projection?.fields?.[0]?.id;
+      if (fieldId) {
+        model.sorting.setSort(fieldId, "asc");
+      }
+    }, [
+      model
+    ]);
+    useEffect3(() => {
+      if (!dxGrid || !presentation) {
         return;
       }
       dxGrid.getCells = getCells;
     }, [
-      presentation,
       dxGrid,
+      presentation,
       getCells
     ]);
     const handleInsertRowResult = useCallback4((insertResult) => {
@@ -809,25 +807,11 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       model,
       dxGrid
     ]);
-    useImperativeHandle(forwardedRef, () => {
-      if (!presentation || !dxGrid) {
-        return {};
-      }
-      return {
-        update: (cell) => {
-          if (cell) {
-            dxGrid.updateIfWithinBounds(cell, true);
-          } else {
-            dxGrid.updateCells(true);
-            dxGrid.requestUpdate();
-          }
-        },
-        handleInsertRowResult
-      };
+    const handleSave = useCallback4(() => {
+      dxGrid?.updateCells(true);
+      dxGrid?.requestUpdate();
     }, [
-      presentation,
-      dxGrid,
-      model
+      dxGrid
     ]);
     const handleSaveDraftRow = useCallback4((rowIndex = 0) => {
       if (model && dxGrid) {
@@ -1034,6 +1018,26 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       model,
       dxGrid
     ]);
+    useImperativeHandle(forwardedRef, () => {
+      if (!dxGrid || !presentation) {
+        return {};
+      }
+      return {
+        update: (cell) => {
+          if (cell) {
+            dxGrid.updateIfWithinBounds(cell, true);
+          } else {
+            dxGrid.updateCells(true);
+            dxGrid.requestUpdate();
+          }
+        },
+        handleInsertRowResult
+      };
+    }, [
+      dxGrid,
+      model,
+      presentation
+    ]);
     if (!model || !modals) {
       return /* @__PURE__ */ React7.createElement("span", {
         role: "none",
@@ -1048,8 +1052,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       schema,
       onFocus: handleFocus,
       onSave: handleSave,
-      onCreate,
-      client
+      onCreate
     }), /* @__PURE__ */ React7.createElement(Grid.Content, {
       className: mx("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
       frozen,
@@ -1081,7 +1084,8 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
   } finally {
     _effect.f();
   }
-});
+};
+var TableMain = /* @__PURE__ */ forwardRef(TableMainInner);
 var Table = {
   Root: TableRoot,
   Main: TableMain
@@ -1092,7 +1096,8 @@ import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking"
 import React8, { useCallback as useCallback5, useMemo as useMemo5, useRef as useRef3 } from "react";
 import { useDefaultValue } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema: _jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
+import { ProjectionModel } from "@dxos/schema";
+var DynamicTable = ({ classNames, schema, name = "example.com/dynamic-table", rows, properties, jsonSchema: _jsonSchema, rowActions, onRowClick, onRowAction, ...props }) => {
   var _effect = _useSignals8();
   try {
     const { jsonSchema } = useMemo5(() => getBaseSchema({
@@ -1106,7 +1111,7 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
       _jsonSchema,
       schema
     ]);
-    const { projection, view } = useMemo5(() => makeDynamicTable({
+    const { object, projection } = useMemo5(() => makeDynamicTable({
       jsonSchema,
       properties
     }), [
@@ -1126,11 +1131,20 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
       },
       dataEditable: false
     }));
+    const projectionModel = useMemo5(() => {
+      if (jsonSchema && projection) {
+        const model2 = new ProjectionModel(jsonSchema, projection);
+        model2.normalizeView();
+        return model2;
+      }
+    }, [
+      jsonSchema,
+      projection
+    ]);
     const model = useTableModel({
       rows,
-      view,
-      schema: jsonSchema,
-      projection,
+      object,
+      projection: projectionModel,
       features,
       rowActions,
       onCellUpdate: handleCellUpdate,
@@ -1176,7 +1190,7 @@ var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Ato
       type: "add-row",
       icon: "ph--plus--regular",
       label: [
-        "add row",
+        "add row label",
         {
           ns: translationKey
         }
@@ -1265,6 +1279,7 @@ export {
   touch,
   translations,
   useAddRow,
+  useProjectionModel,
   useTableModel
 };
 //# sourceMappingURL=index.mjs.map