@dxos/react-ui-table 0.8.4-main.fcfe5033a5 → 0.8.4-staging.60fe92afc8

package/dist/lib/browser/index.mjs

@@ -16,40 +16,11 @@ import {
   useAddRow,
   useProjectionModel,
   useTableModel
-} from "./chunk-F7Y374KL.mjs";
+} from "./chunk-4KOQTPFC.mjs";
 import {
   Table_exports
-} from "./chunk-BF54SSNL.mjs";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui-table";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "object.placeholder": "New table",
-        "create-object.label": "Create table",
-        "table-name.placeholder": "Table name",
-        "settings.title": "Table settings",
-        "table-schema.label": "Type",
-        "continue.label": "Continue",
-        "create-stack-section.label": "Create table",
-        "add-row.label": "Add row",
-        "column-action-sort-descending.menu": "Sort Descending",
-        "column-action-sort-ascending.menu": "Sort Ascending",
-        "column-action-clear-sorting.menu": "Clear Sorting",
-        "column-action-settings.menu": "Column Settings",
-        "column-action-delete.menu": "Delete Column",
-        "delete-row.label": "Delete row",
-        "bulk-delete-row.label": "Delete selected rows",
-        "column-deleted.label": "Column deleted",
-        "new-column-button.label": "Create column",
-        "create-new-object.label": "Create new object \u201C{{text}}\u201D",
-        "save-view.label": "Save changes to view"
-      }
-    }
-  }
-];
+} from "./chunk-62PYOJPY.mjs";
+import "./chunk-J5LGTIGS.mjs";
 
 // src/components/Table/Table.tsx
 import { Atom as Atom4 } from "@effect-atom/atom-react";
@@ -61,39 +32,31 @@ import { Atom as Atom2, RegistryContext, useAtomValue as useAtomValue4 } from "@
 import * as String2 from "effect/String";
 import React7, { useCallback as useCallback4, useContext, useEffect as useEffect3, useMemo as useMemo4, useState as useState4 } from "react";
 import { log } from "@dxos/log";
+import { composable, composableProps } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
 import { Grid, closestCell, gridSeparatorBlockEnd, gridSeparatorInlineEnd } from "@dxos/react-ui-grid";
 import { DxEditRequest } from "@dxos/react-ui-grid";
-import { composable, composableProps, mx } from "@dxos/ui-theme";
+import { mx } from "@dxos/ui-theme";
 
 // src/util/dynamic-table.ts
-import { Filter, JsonSchema, Obj, Order, Query, Ref, Type } from "@dxos/echo";
-import { ProjectionModel, ViewModel, createEchoChangeCallback as createEchoChangeCallback2, getSchemaFromPropertyDefinitions } from "@dxos/schema";
-var getBaseSchema = ({ schema, typename, properties, jsonSchema }) => {
-  if (typename && properties) {
-    const schema2 = getSchemaFromPropertyDefinitions(typename, properties);
-    return {
-      typename: schema2.typename,
-      jsonSchema: JsonSchema.toJsonSchema(schema2)
-    };
-  } else if (schema) {
-    return {
-      typename: Type.getTypename(schema),
-      jsonSchema: JsonSchema.toJsonSchema(schema)
-    };
-  } else if (typename && jsonSchema) {
-    return {
-      typename,
-      jsonSchema
-    };
-  } else {
+import { Filter, Obj, Order, Query, Ref, Type } from "@dxos/echo";
+import { ProjectionModel, ViewModel, createEchoChangeCallback as createEchoChangeCallback2, getSchemaFromJsonSchema, getSchemaFromPropertyDefinitions } from "@dxos/schema";
+var getBaseSchema = ({ type, typename, properties, jsonSchema }) => {
+  const resolved = typename && properties ? getSchemaFromPropertyDefinitions(typename, properties) : type ?? (jsonSchema ? getSchemaFromJsonSchema(jsonSchema, typename) : void 0);
+  if (!resolved) {
     throw new Error("invalid properties");
   }
+  return {
+    typename: Type.getTypename(resolved),
+    type: resolved
+  };
 };
-var makeDynamicTable = ({ registry, jsonSchema, properties }) => {
+var makeDynamicTable = ({ registry, type, properties }) => {
+  const jsonSchema = type.jsonSchema;
   const view = ViewModel.make({
     query: Query.select(Filter.everything()),
     jsonSchema,
+    type,
     ...properties && {
       fields: properties.map((property) => property.name)
     }
@@ -106,7 +69,7 @@ var makeDynamicTable = ({ registry, jsonSchema, properties }) => {
     registry,
     view,
     baseSchema: jsonSchema,
-    change: createEchoChangeCallback2(view, jsonSchema)
+    change: createEchoChangeCallback2(view, type)
   });
   projection.normalizeView();
   if (properties && projection.getFields()) {
@@ -122,7 +85,7 @@ var setProperties = (view, projection, table, properties) => {
     const field = projection.getFields().find((field2) => field2.path === property.name);
     if (field) {
       if (property.size !== void 0) {
-        Obj.change(table, (table2) => {
+        Obj.update(table, (table2) => {
           table2.sizes[field.path] = property.size;
         });
       }
@@ -139,7 +102,7 @@ var setProperties = (view, projection, table, properties) => {
       if (property.sort) {
         const currentQuery = Query.fromAst(Obj.getSnapshot(view).query.ast);
         const newQuery = currentQuery.orderBy(Order.property(field.path, property.sort));
-        Obj.change(view, (view2) => {
+        Obj.update(view, (view2) => {
           view2.query.ast = newQuery.ast;
         });
       }
@@ -244,7 +207,7 @@ var ModalController = class {
 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 { Format, TypeEnum } from "@dxos/echo/internal";
+import { Format, TypeEnum } from "@dxos/echo/Format";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { GridCellEditor, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
 
@@ -257,9 +220,8 @@ var CellValidationMessage = ({ __gridScope, validationError, variant = "error" }
     return null;
   }
   const bgClass = variant === "error" ? "bg-error-surface" : "bg-warning-surface";
-  const textClass = variant === "error" ? "text-error-surface-text" : "text-warning-surface-text";
+  const textClass = variant === "error" ? "text-error-fg" : "text-warning-fg";
   return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
     className: `absolute ${bgClass} ${textClass} rounded-h-sm text-xs p-1`,
     style: {
       ...{
@@ -275,13 +237,14 @@ var CellValidationMessage = ({ __gridScope, validationError, variant = "error" }
 
 // src/components/TableCellEditor/FormCellEditor.tsx
 import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Entity } from "@dxos/echo";
-import { Ref as Ref2, getValue } from "@dxos/echo/internal";
+import { Entity, Ref as Ref2, Type as Type2 } from "@dxos/echo";
+import { SchemaEx } from "@dxos/effect";
 import { invariant } from "@dxos/invariant";
 import { Popover } from "@dxos/react-ui";
 import { Form } from "@dxos/react-ui-form";
 import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
 import { getDeep, isTruthy, setDeep } from "@dxos/util";
+import { translationKey } from "#translations";
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
 var createOptionLabel = [
   "create-new-object.label",
@@ -308,7 +271,7 @@ var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onC
     if (!schema) {
       return void 0;
     }
-    return narrowSchema(schema, [
+    return narrowSchema(Type2.getSchema(schema), [
       fieldProjection.field.path
     ]);
   }, [
@@ -320,27 +283,11 @@ var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onC
       const cell = parseCellIndex(contextEditing.index);
       if (model.isDraftCell(cell)) {
         const draftRow = model.getDraftRows()[cell.row];
-        invariant(draftRow, void 0, {
-          F: __dxlog_file,
-          L: 74,
-          S: void 0,
-          A: [
-            "draftRow",
-            ""
-          ]
-        });
+        invariant(draftRow, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 52, S: void 0, A: ["draftRow", ""] });
         return draftRow.data;
       } else {
         const row = model.getRowAt(cell.row);
-        invariant(row, void 0, {
-          F: __dxlog_file,
-          L: 78,
-          S: void 0,
-          A: [
-            "row",
-            ""
-          ]
-        });
+        invariant(row, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 56, S: void 0, A: ["row", ""] });
         return row;
       }
     }
@@ -424,8 +371,8 @@ var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onC
   ]);
   const getOptions = useCallback((results) => results.map((obj) => {
     return {
-      id: Entity.getDXN(obj).toString(),
-      label: getValue(obj, fieldProjection.field.referencePath) || obj.id.toString()
+      id: Entity.getURI(obj),
+      label: SchemaEx.getValue(obj, fieldProjection.field.referencePath) || obj.id.toString()
     };
   }).filter(isTruthy), [
     fieldProjection
@@ -440,7 +387,7 @@ var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onC
     virtualRef: anchorRef
   }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
     tabIndex: -1,
-    classNames: "dx-card-popover-width dx-density-fine"
+    classNames: "dx-card-popover-width dx-density-md"
   }, /* @__PURE__ */ React2.createElement(Popover.Arrow, null), /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Root, {
     ...formProps,
     autoFocus: true,
@@ -469,15 +416,7 @@ var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, o
     const { col } = parseCellIndex2(editing.index);
     const field = model.projection.getFields()[col];
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
-    invariant2(fieldProjection2, void 0, {
-      F: __dxlog_file2,
-      L: 66,
-      S: void 0,
-      A: [
-        "fieldProjection",
-        ""
-      ]
-    });
+    invariant2(fieldProjection2, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 21, S: void 0, A: ["fieldProjection", ""] });
     return fieldProjection2;
   }, [
     model,
@@ -502,6 +441,11 @@ var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, o
     __gridScope
   });
 };
+var cellEditorSlots = {
+  content: {
+    className: "!py-(--dx-grid-cell-editor-padding-block)"
+  }
+};
 var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
   const { editing, setEditing } = useGridContext3("TableCellEditor", __gridScope);
   const suppressNextBlur = useRef2(false);
@@ -514,15 +458,7 @@ var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
     const { col } = parseCellIndex2(editing.index);
     const field = model.projection.getFields()[col];
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
-    invariant2(fieldProjection2, void 0, {
-      F: __dxlog_file2,
-      L: 113,
-      S: void 0,
-      A: [
-        "fieldProjection",
-        ""
-      ]
-    });
+    invariant2(fieldProjection2, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 64, S: void 0, A: ["fieldProjection", ""] });
     return fieldProjection2;
   }, [
     model,
@@ -656,11 +592,7 @@ var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
     __gridScope
   }), /* @__PURE__ */ React3.createElement(GridCellEditor, {
     extensions,
-    slots: {
-      content: {
-        className: "!py-(--dx-grid-cell-editor-padding-block)"
-      }
-    },
+    slots: cellEditorSlots,
     getCellContent,
     onBlur: handleBlur
   }));
@@ -694,8 +626,9 @@ var determineNavigationDelta = ({ key, shift }) => {
 import { useAtomValue } from "@effect-atom/atom-react";
 import React4 from "react";
 import { DropdownMenu, useTranslation } from "@dxos/react-ui";
+import { translationKey as translationKey2 } from "#translations";
 var ColumnActionsMenu = ({ model, modals }) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = useTranslation(translationKey2);
   const state = useAtomValue(modals.state);
   if (state?.type !== "column") {
     return null;
@@ -797,8 +730,9 @@ var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
 import { useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
 import React6 from "react";
 import { DropdownMenu as DropdownMenu2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { translationKey as translationKey3 } from "#translations";
 var RowActionsMenu = ({ model, modals }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey3);
   const hasSelection = model.selection.hasSelection;
   const state = useAtomValue3(modals.state);
   if (state?.type !== "row") {
@@ -820,7 +754,7 @@ var RowActionsMenu = ({ model, modals }) => {
   }, toLocalizedString(action.label, t)))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Separator, null)), model.features.dataEditable !== false && /* @__PURE__ */ React6.createElement(DropdownMenu2.Item, {
     "data-testid": "row-menu-delete",
     onClick: () => model.deleteRow(state.rowIndex)
-  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Arrow, null)));
+  }, t(hasSelection ? "bulk-delete-row.label" : "delete-row.label"))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Arrow, null)));
 };
 
 // src/components/Table/TableContent.tsx
@@ -843,10 +777,10 @@ var emptyColumnMeta = Atom2.make({
 var emptyRowsAtom = Atom2.make([]);
 var emptyCellUpdateAtom = Atom2.make(0);
 var TABLE_CONTENT_NAME = "Table.Content";
-var TableContent = composable(({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
+var TableContent = composable(({ schema, model, presentation, ignoreAttention, attendableId, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
   const registry = useContext(RegistryContext);
   const [dxGrid, setDxGrid] = useState4(null);
-  const { hasAttention } = useAttention(model?.id ?? "table");
+  const { hasAttention } = useAttention(attendableId ?? model?.id ?? "table");
   const modals = useMemo4(() => new ModalController(registry), [
     registry
   ]);
@@ -1051,12 +985,7 @@ var TableContent = composable(({ schema, model, presentation, ignoreAttention, o
             void navigator.clipboard.writeText(textContent);
             event.preventDefault();
           } catch (error) {
-            log.catch(error, void 0, {
-              F: __dxlog_file3,
-              L: 278,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
+            log.catch(error, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 263, S: void 0 });
           }
           break;
         }
@@ -1154,7 +1083,6 @@ var TableContent = composable(({ schema, model, presentation, ignoreAttention, o
   ]);
   if (!model || !modals) {
     return /* @__PURE__ */ React7.createElement("span", {
-      role: "none",
       className: "dx-attention-surface"
     });
   }
@@ -1206,8 +1134,9 @@ TableContent.displayName = TABLE_CONTENT_NAME;
 // src/components/Table/TableToolbar.tsx
 import { Atom as Atom3, RegistryContext as RegistryContext2 } from "@effect-atom/atom-react";
 import React8, { useContext as useContext2, useEffect as useEffect4, useMemo as useMemo5 } from "react";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
 import { Menu, createGapSeparator, createMenuAction, useMenuActions } from "@dxos/react-ui-menu";
-import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
+import { translationKey as translationKey4 } from "#translations";
 var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) => Atom3.make((get) => {
   const nodes = [];
   if (onAdd) {
@@ -1217,7 +1146,7 @@ var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) =>
       label: [
         "add-row.label",
         {
-          ns: translationKey
+          ns: translationKey4
         }
       ],
       testId: "table.toolbar.add-row"
@@ -1232,7 +1161,7 @@ var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) =>
       label: [
         "save-view.label",
         {
-          ns: translationKey
+          ns: translationKey4
         }
       ],
       testId: "table.toolbar.save-view",
@@ -1322,29 +1251,29 @@ import { RegistryContext as RegistryContext3 } from "@effect-atom/atom-react";
 import React10, { useCallback as useCallback5, useContext as useContext3, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef4, useState as useState5 } from "react";
 import { useDefaultValue } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/ui-theme";
-var DynamicTable = ({ classNames, schema, name = "com.example.dynamic-table", rows, properties, jsonSchema: jsonSchemaProp, rowActions, onRowClick, onRowAction, ...props }) => {
+var DynamicTable = ({ classNames, type: typeProp, name = "com.example.dynamicTable", rows, properties, jsonSchema: jsonSchemaProp, rowActions, onRowClick, onRowAction, ...props }) => {
   const registry = useContext3(RegistryContext3);
   const [dynamicTable, setDynamicTable] = useState5();
-  const { jsonSchema } = useMemo6(() => getBaseSchema({
+  const { type } = useMemo6(() => getBaseSchema({
     typename: name,
     properties,
     jsonSchema: jsonSchemaProp,
-    schema
+    type: typeProp
   }), [
     name,
     properties,
     jsonSchemaProp,
-    schema
+    typeProp
   ]);
   useEffect5(() => {
     setDynamicTable(makeDynamicTable({
       registry,
-      jsonSchema,
+      type,
       properties
     }));
   }, [
     registry,
-    jsonSchema,
+    type,
     properties
   ]);
   const tableRef = useRef4(null);
@@ -1379,10 +1308,8 @@ var DynamicTable = ({ classNames, schema, name = "com.example.dynamic-table", ro
     model
   ]);
   return /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
     className: mx2("dx-expander grid", classNames)
   }, /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
     className: "grid min-h-0 overflow-hidden"
   }, /* @__PURE__ */ React10.createElement(Table.Root, {
     ref: tableRef
@@ -1415,7 +1342,6 @@ export {
   tableButtons,
   tableControls,
   touch,
-  translations,
   useAddRow,
   useProjectionModel,
   useTableContext,