@dxos/react-ui-table 0.8.2-main.f11618f → 0.8.2-staging.7ac8446

package/dist/lib/browser/index.mjs

@@ -36,13 +36,13 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-import React6, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2, useMemo as useMemo4, useEffect as useEffect2 } from "react";
+import React7, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2, useMemo as useMemo4, useEffect as useEffect2 } from "react";
 import { getValue as getValue4 } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { Filter } from "@dxos/react-client/echo";
 import { useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
-import { closestCell, Grid, gridSeparatorInlineEnd, gridSeparatorBlockEnd } from "@dxos/react-ui-grid";
+import { closestCell, Grid } from "@dxos/react-ui-grid";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 import { isNotFalsy, safeParseInt } from "@dxos/util";
 
@@ -152,7 +152,7 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
 // packages/ui/react-ui-table/src/components/Table/CreateRefPanel.tsx
 import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
 import { S } from "@dxos/echo-schema";
-import { live } from "@dxos/react-client/echo";
+import { create } from "@dxos/react-client/echo";
 import { Popover } from "@dxos/react-ui";
 import { Form } from "@dxos/react-ui-form";
 import { useGridContext } from "@dxos/react-ui-grid";
@@ -183,7 +183,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
       typename: state.typename
     }).runSync();
     if (schema2) {
-      const obj = space.db.add(live(schema2, values));
+      const obj = space.db.add(create(schema2, values));
       state.onCreate?.(obj);
     }
     void modals.close();
@@ -223,8 +223,46 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
   }), /* @__PURE__ */ React3.createElement(Popover.Arrow, null))));
 };
 
-// packages/ui/react-ui-table/src/components/Table/RowActionsMenu.tsx
+// packages/ui/react-ui-table/src/components/Table/RefPanel.tsx
 import React4 from "react";
+import { Popover as Popover2 } from "@dxos/react-ui";
+import { Form as Form2 } from "@dxos/react-ui-form";
+var getRefTargetObj = (space, id) => {
+  if (space && id) {
+    return space?.db.getObjectById(id);
+  } else {
+    return void 0;
+  }
+};
+var RefPanel = ({ model, modals }) => {
+  const state = modals.state.value;
+  const space = model?.space;
+  const targetObj = getRefTargetObj(space, state?.type === "refPanel" ? state.targetId : void 0);
+  const schema = space && state?.type === "refPanel" ? space.db.schemaRegistry.getSchema(state.typename) : void 0;
+  if (!model.view || !model.projection) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement(Popover2.Root, {
+    modal: false,
+    open: state?.type === "refPanel" && !!targetObj && !!schema,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) {
+        return modals.close();
+      }
+    }
+  }, /* @__PURE__ */ React4.createElement(Popover2.VirtualTrigger, {
+    virtualRef: modals.trigger
+  }), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, {
+    classNames: "md:is-64"
+  }, targetObj && schema && /* @__PURE__ */ React4.createElement(Form2, {
+    readonly: true,
+    values: targetObj,
+    schema
+  }), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null))));
+};
+
+// packages/ui/react-ui-table/src/components/Table/RowActionsMenu.tsx
+import React5 from "react";
 import { DropdownMenu as DropdownMenu3, useTranslation as useTranslation2 } from "@dxos/react-ui";
 var RowActionsMenu = ({ model, modals }) => {
   const { t } = useTranslation2(translationKey);
@@ -233,23 +271,23 @@ var RowActionsMenu = ({ model, modals }) => {
   if (state?.type !== "row") {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(DropdownMenu3.Root, {
+  return /* @__PURE__ */ React5.createElement(DropdownMenu3.Root, {
     modal: false,
     open: true,
     onOpenChange: modals.close
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu3.VirtualTrigger, {
+  }, /* @__PURE__ */ React5.createElement(DropdownMenu3.VirtualTrigger, {
     virtualRef: modals.trigger
-  }), /* @__PURE__ */ React4.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu3.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React4.createElement(DropdownMenu3.Item, {
+  }), /* @__PURE__ */ React5.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React5.createElement(DropdownMenu3.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React5.createElement(DropdownMenu3.Item, {
     "data-testid": "row-menu-delete",
     onClick: () => model.deleteRow(state.rowIndex)
-  }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React4.createElement(DropdownMenu3.Item, {
+  }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React5.createElement(DropdownMenu3.Item, {
     key: action.id,
     "data-testid": `row-action-${action.id}`,
     onClick: () => {
       modals.close();
       model.handleRowAction(action.id, state.rowIndex);
     }
-  }, t(action.translationKey)))), /* @__PURE__ */ React4.createElement(DropdownMenu3.Arrow, null)));
+  }, t(action.translationKey)))), /* @__PURE__ */ React5.createElement(DropdownMenu3.Arrow, null)));
 };
 
 // packages/ui/react-ui-table/src/model/table-model.ts
@@ -257,7 +295,7 @@ import { computed as computed3, effect as effect2, signal as signal3 } from "@pr
 import { Resource as Resource2 } from "@dxos/context";
 import { FormatEnum as FormatEnum3, getValue as getValue2, setValue } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
-import { isLiveObject, makeRef as makeRef3 } from "@dxos/live-object";
+import { isReactiveObject, makeRef as makeRef3 } from "@dxos/live-object";
 import { formatForEditing, parseValue } from "@dxos/react-ui-form";
 
 // packages/ui/react-ui-table/src/model/selection-model.ts
@@ -265,7 +303,7 @@ import { computed, effect, signal } from "@preact/signals-core";
 import { Resource } from "@dxos/context";
 
 // packages/ui/react-ui-table/src/util/dynamic-table.ts
-import { live as live2, makeRef } from "@dxos/live-object";
+import { create as create2, makeRef } from "@dxos/live-object";
 import { createView, getSchemaFromPropertyDefinitions, ViewProjection } from "@dxos/schema";
 var getBaseSchems = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
@@ -297,7 +335,7 @@ var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
       fields: properties.map((property) => property.name)
     }
   });
-  const table = live2(TableType, {
+  const table = create2(TableType, {
     name: "dynamic-table",
     view: makeRef(view)
   });
@@ -346,7 +384,7 @@ var touch = (value) => value;
 // packages/ui/react-ui-table/src/util/table.ts
 import { AST, Format, FormatEnum, S as S2, TypedObject, TypeEnum } from "@dxos/echo-schema";
 import { PublicKey } from "@dxos/react-client";
-import { live as live3, makeRef as makeRef2 } from "@dxos/react-client/echo";
+import { create as create3, makeRef as makeRef2 } from "@dxos/react-client/echo";
 import { createFieldId, createView as createView2, getSchemaProperties, ViewProjection as ViewProjection2 } from "@dxos/schema";
 var initializeTable = async ({ client, space, table, typename, initialRow = true }) => {
   if (typename) {
@@ -354,7 +392,7 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     if (!schema) {
       throw new Error(`Schema not found: ${typename}`);
     }
-    const fields = getSchemaProperties(schema.ast).map((prop) => prop.name);
+    const fields = getSchemaProperties(schema.ast).filter((prop) => prop.format !== FormatEnum.Ref).map((prop) => prop.name);
     table.view = makeRef2(createView2({
       // TODO(ZaymonFC): Don't hardcode name?
       name: "View",
@@ -376,7 +414,7 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     }));
     createProjection(schema, table.view.target);
     if (initialRow) {
-      space.db.add(live3(schema, {}));
+      space.db.add(create3(schema, {}));
     }
     return schema;
   }
@@ -480,6 +518,26 @@ var columnSettingsButton = {
     fieldId: el.getAttribute("data-field-id")
   })
 };
+var referencedCellButton = {
+  attr: BUTTON_IDENTIFIERS.referencedCell,
+  icon: "ph--link-simple-horizontal--regular",
+  render: ({ targetId, schemaId }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.referencedCell,
+      icon: referencedCellButton.icon,
+      data: {
+        "data-target-id": targetId,
+        "data-schema-id": schemaId
+      },
+      testId: "table-ref-cell-button"
+    });
+  },
+  getData: (el) => ({
+    type: "referencedCell",
+    targetId: el.getAttribute("data-target-id"),
+    schemaId: el.getAttribute("data-schema-id")
+  })
+};
 var rowMenuButton = {
   attr: BUTTON_IDENTIFIERS.rowMenu,
   icon: "ph--dots-three--regular",
@@ -524,6 +582,7 @@ var sortButton = {
 var tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
+  referencedCell: referencedCellButton,
   rowMenu: rowMenuButton,
   sort: sortButton
 };
@@ -834,22 +893,6 @@ var TableSorting = class {
   }
 };
 
-// packages/ui/react-ui-table/src/util/tag.ts
-var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
-var extractTagIds = (value) => {
-  if (typeof value !== "string") {
-    return void 0;
-  }
-  const ids = [];
-  let match;
-  while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) {
-    if (match[2]) {
-      ids.push(match[2]);
-    }
-  }
-  return ids.length > 0 ? ids : void 0;
-};
-
 // packages/ui/react-ui-table/src/model/table-model.ts
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var defaultFeatures = {
@@ -949,25 +992,11 @@ var TableModel = class extends Resource2 {
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
         case FormatEnum3.Ref: {
-          if (isLiveObject(value)) {
+          if (isReactiveObject(value)) {
             setValue(this._rows.value[rowIdx], field.path, makeRef3(value));
           }
           break;
         }
-        case FormatEnum3.SingleSelect: {
-          const ids = extractTagIds(value);
-          if (ids && ids.length > 0) {
-            setValue(this._rows.value[rowIdx], field.path, ids[0]);
-          }
-          break;
-        }
-        case FormatEnum3.MultiSelect: {
-          const ids = extractTagIds(value);
-          if (ids) {
-            setValue(this._rows.value[rowIdx], field.path, ids);
-          }
-          break;
-        }
         default: {
           setValue(this._rows.value[rowIdx], field.path, parseValue({
             type: props.type,
@@ -988,7 +1017,7 @@ 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: 115,
+      L: 114,
       S: this,
       A: [
         "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
@@ -1048,7 +1077,7 @@ var TableModel = class extends Resource2 {
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 184,
+      L: 183,
       S: this,
       A: [
         "this._columnMeta",
@@ -1274,7 +1303,7 @@ var ModalController = class {
 
 // packages/ui/react-ui-table/src/model/table-presentation.ts
 import { signal as signal5 } from "@preact/signals-core";
-import { FormatEnum as FormatEnum4, getDXN, getValue as getValue3 } from "@dxos/echo-schema";
+import { FormatEnum as FormatEnum4, getValue as getValue3 } from "@dxos/echo-schema";
 import { cellClassesForFieldType, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
 import { toPlaneCellIndex } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
@@ -1376,8 +1405,10 @@ var TablePresentation = class {
       if (props.format === FormatEnum4.Ref && props.referenceSchema) {
         const targetObj = getValue3(obj, field.path)?.target;
         if (targetObj) {
-          const dxn = getDXN(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag ref=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id,
+            schemaId: props.referenceSchema
+          });
         }
       }
       if (props.format === FormatEnum4.Boolean) {
@@ -1569,7 +1600,7 @@ var cellClassesForRowSelection = (selected, selectionMode) => {
 };
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-import React5, { useCallback as useCallback3, useMemo as useMemo3, useRef } from "react";
+import React6, { useCallback as useCallback3, useMemo as useMemo3, useRef } from "react";
 import { FormatEnum as FormatEnum5 } from "@dxos/echo-schema";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { useThemeContext } from "@dxos/react-ui";
@@ -1824,7 +1855,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     model,
     editing
   ]);
-  return /* @__PURE__ */ React5.createElement(GridCellEditor, {
+  return /* @__PURE__ */ React6.createElement(GridCellEditor, {
     extension,
     getCellContent,
     onBlur: handleBlur
@@ -1857,8 +1888,10 @@ var determineNavigationDelta = ({ key, shift }) => {
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+var inlineEndLine = "[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator";
+var blockEndLine = "[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator";
 var TableRoot = ({ children, role }) => {
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: mx2("relative !border-separator", role === "section" ? "attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]")
   }, children);
@@ -1878,18 +1911,14 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
   }, [
     model
   ]);
-  const getCells = useCallback4((range, plane) => presentation?.getCells(range, plane) ?? {}, [
-    presentation
-  ]);
   useEffect2(() => {
     if (!presentation || !dxGrid) {
       return;
     }
-    dxGrid.getCells = getCells;
+    dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
   }, [
     presentation,
-    dxGrid,
-    getCells
+    dxGrid
   ]);
   useImperativeHandle(forwardedRef, () => {
     if (!presentation || !dxGrid) {
@@ -1945,6 +1974,10 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
           modals.showColumnCreator();
           break;
         }
+        case "referencedCell": {
+          modals.showReferencePanel(data.targetId, data.schemaId);
+          break;
+        }
         case "sort": {
           model?.sorting?.toggleSort(data.fieldId);
           break;
@@ -2056,7 +2089,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       const space = model.space;
       invariant3(space, void 0, {
         F: __dxlog_file4,
-        L: 307,
+        L: 312,
         S: void 0,
         A: [
           "space",
@@ -2093,21 +2126,21 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     t
   ]);
   if (!model || !modals) {
-    return /* @__PURE__ */ React6.createElement("span", {
+    return /* @__PURE__ */ React7.createElement("span", {
       role: "none",
       className: "attention-surface"
     });
   }
-  return /* @__PURE__ */ React6.createElement(Grid.Root, {
+  return /* @__PURE__ */ React7.createElement(Grid.Root, {
     id: model.id ?? "table-grid"
-  }, /* @__PURE__ */ React6.createElement(TableCellEditor, {
+  }, /* @__PURE__ */ React7.createElement(TableCellEditor, {
     model,
     modals,
     onEnter: handleEnter,
     onFocus: handleFocus,
     onQuery: handleQuery
-  }), /* @__PURE__ */ React6.createElement(Grid.Content, {
-    className: mx2("[--dx-grid-base:var(--surface-bg)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
+  }), /* @__PURE__ */ React7.createElement(Grid.Content, {
+    className: mx2("[--dx-grid-base:var(--surface-bg)]", inlineEndLine, blockEndLine),
     frozen,
     // getCells={getCells}
     columns: model.columnMeta.value,
@@ -2119,17 +2152,20 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     onKeyDown: handleKeyDown,
     onWheelCapture: handleWheel,
     ref: setDxGrid
-  }), /* @__PURE__ */ React6.createElement(RowActionsMenu, {
+  }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
     model,
     modals
-  }), /* @__PURE__ */ React6.createElement(ColumnActionsMenu, {
+  }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
     model,
     modals
-  }), /* @__PURE__ */ React6.createElement(ColumnSettings, {
+  }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
     model,
     modals,
     onNewColumn: handleNewColumn
-  }), /* @__PURE__ */ React6.createElement(CreateRefPanel, {
+  }), /* @__PURE__ */ React7.createElement(CreateRefPanel, {
+    model,
+    modals
+  }), /* @__PURE__ */ React7.createElement(RefPanel, {
     model,
     modals
   }));
@@ -2140,7 +2176,7 @@ var Table = {
 };
 
 // packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
-import React7, { useRef as useRef2, useMemo as useMemo5, useCallback as useCallback5 } from "react";
+import React8, { useRef as useRef2, useMemo as useMemo5, useCallback as useCallback5 } from "react";
 import { useDefaultValue } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 
@@ -2265,13 +2301,13 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
   }, [
     model
   ]);
-  return /* @__PURE__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: mx3("is-full bs-full grow grid", classNames)
-  }, /* @__PURE__ */ React7.createElement("div", {
+  }, /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: "grid min-bs-0 overflow-hidden"
-  }, /* @__PURE__ */ React7.createElement(Table.Root, null, /* @__PURE__ */ React7.createElement(Table.Main, {
+  }, /* @__PURE__ */ React8.createElement(Table.Root, null, /* @__PURE__ */ React8.createElement(Table.Main, {
     ref: tableRef,
     model,
     presentation,
@@ -2281,8 +2317,8 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
 };
 
 // packages/ui/react-ui-table/src/components/TableToolbar/TableToolbar.tsx
-import React8, { useCallback as useCallback6, useMemo as useMemo6 } from "react";
-import { live as live4 } from "@dxos/live-object";
+import React9, { useCallback as useCallback6, useMemo as useMemo6 } from "react";
+import { create as create4 } from "@dxos/live-object";
 import { createGapSeparator, createMenuAction, MenuProvider, ToolbarMenu, useMenuActions } from "@dxos/react-ui-menu";
 var createTableToolbarActions = (state) => {
   const add = createMenuAction("add-row", {
@@ -2336,18 +2372,18 @@ var createTableToolbarActions = (state) => {
   };
 };
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
-  const state = useMemo6(() => live4({
+  const state = useMemo6(() => create4({
     viewDirty
   }), []);
   const actionsCreator = useCallback6(() => createTableToolbarActions(state), [
     state
   ]);
   const menu = useMenuActions(actionsCreator);
-  return /* @__PURE__ */ React8.createElement(MenuProvider, {
+  return /* @__PURE__ */ React9.createElement(MenuProvider, {
     ...menu,
     attendableId,
     onAction
-  }, /* @__PURE__ */ React8.createElement(ToolbarMenu, {
+  }, /* @__PURE__ */ React9.createElement(ToolbarMenu, {
     classNames
   }));
 };