@dxos/react-ui-table 0.8.2-main.36232bc → 0.8.2-main.5ca3450

package/dist/lib/browser/chunk-UGGYKLOH.mjs

@@ -0,0 +1,28 @@
+// packages/ui/react-ui-table/src/types/table.ts
+import { Schema } from "effect";
+import { Type } from "@dxos/echo";
+import { LabelAnnotationId } from "@dxos/echo-schema";
+import { ViewType } from "@dxos/schema";
+var TableSchema = Schema.Struct({
+  id: Type.ObjectId,
+  name: Schema.optional(Schema.String),
+  view: Schema.optional(Type.Ref(ViewType)),
+  // TODO(burdon): Document why threads is included here?
+  threads: Schema.optional(Schema.Array(Type.Ref(
+    Type.Expando
+    /* ThreadType */
+  )))
+}).annotations({
+  // TODO(burdon): Move annotation to property.
+  [LabelAnnotationId]: "name"
+});
+var TableType = TableSchema.pipe(Type.def({
+  typename: "dxos.org/type/Table",
+  version: "0.1.0"
+}));
+
+export {
+  TableSchema,
+  TableType
+};
+//# sourceMappingURL=chunk-UGGYKLOH.mjs.map

package/dist/lib/browser/chunk-UGGYKLOH.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/types/table.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\nimport { Type } from '@dxos/echo';\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { LabelAnnotationId } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: Type.ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Type.Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Type.Ref(Type.Expando /* ThreadType */))),\n}).annotations({\n  // TODO(burdon): Move annotation to property.\n  [LabelAnnotationId]: 'name',\n});\n\nexport const TableType = TableSchema.pipe(\n  Type.def({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
+  "mappings": ";AAIA,SAASA,cAAc;AAEvB,SAASC,YAAY;AAErB,SAASC,yBAAyB;AAClC,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,OAAOC,OAAO;EACvCC,IAAIC,KAAKC;EACTC,MAAML,OAAOM,SAASN,OAAOO,MAAM;EACnCC,MAAMR,OAAOM,SAASH,KAAKM,IAAIC,QAAAA,CAAAA;;EAE/BC,SAASX,OAAOM,SAASN,OAAOY,MAAMT,KAAKM;IAAIN,KAAKU;;EAAsB,CAAA,CAAA;AAC5E,CAAA,EAAGC,YAAY;;EAEb,CAACC,iBAAAA,GAAoB;AACvB,CAAA;AAEO,IAAMC,YAAYjB,YAAYkB,KACnCd,KAAKe,IAAI;EACPC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
+  "names": ["Schema", "Type", "LabelAnnotationId", "ViewType", "TableSchema", "Schema", "Struct", "id", "Type", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "annotations", "LabelAnnotationId", "TableType", "pipe", "def", "typename", "version"]
+}

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 import {
   TableSchema,
   TableType
-} from "./chunk-YWNRUF4J.mjs";
+} from "./chunk-UGGYKLOH.mjs";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -36,7 +36,7 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-import React7, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2, useMemo as useMemo4, useEffect as useEffect2 } from "react";
+import React6, { 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";
@@ -150,8 +150,8 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
 };
 
 // packages/ui/react-ui-table/src/components/Table/CreateRefPanel.tsx
+import { Schema } from "effect";
 import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import { S } from "@dxos/echo-schema";
 import { live } from "@dxos/react-client/echo";
 import { Popover } from "@dxos/react-ui";
 import { Form } from "@dxos/react-ui-form";
@@ -168,7 +168,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
       typename: state.typename
     }).runSync();
     if (schema2) {
-      const omit = S.omit("id");
+      const omit = Schema.omit("id");
       return omit(schema2);
     }
   }, [
@@ -223,46 +223,8 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
   }), /* @__PURE__ */ React3.createElement(Popover.Arrow, null))));
 };
 
-// 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 React4 from "react";
 import { DropdownMenu as DropdownMenu3, useTranslation as useTranslation2 } from "@dxos/react-ui";
 var RowActionsMenu = ({ model, modals }) => {
   const { t } = useTranslation2(translationKey);
@@ -271,23 +233,23 @@ var RowActionsMenu = ({ model, modals }) => {
   if (state?.type !== "row") {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(DropdownMenu3.Root, {
+  return /* @__PURE__ */ React4.createElement(DropdownMenu3.Root, {
     modal: false,
     open: true,
     onOpenChange: modals.close
-  }, /* @__PURE__ */ React5.createElement(DropdownMenu3.VirtualTrigger, {
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu3.VirtualTrigger, {
     virtualRef: modals.trigger
-  }), /* @__PURE__ */ React5.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React5.createElement(DropdownMenu3.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React5.createElement(DropdownMenu3.Item, {
+  }), /* @__PURE__ */ React4.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu3.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React4.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__ */ React5.createElement(DropdownMenu3.Item, {
+  }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React4.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__ */ React5.createElement(DropdownMenu3.Arrow, null)));
+  }, t(action.translationKey)))), /* @__PURE__ */ React4.createElement(DropdownMenu3.Arrow, null)));
 };
 
 // packages/ui/react-ui-table/src/model/table-model.ts
@@ -382,7 +344,8 @@ var setProperties = (view, projection, properties) => {
 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 { Schema as Schema2, SchemaAST } from "effect";
+import { Format, FormatEnum, 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 { createFieldId, createView as createView2, getSchemaProperties, ViewProjection as ViewProjection2 } from "@dxos/schema";
@@ -423,13 +386,13 @@ var ContactSchema = TypedObject({
   typename: `example.com/type/${PublicKey.random().truncate()}`,
   version: "0.1.0"
 })({
-  name: S2.optional(S2.String).annotations({
-    [AST.TitleAnnotationId]: "Name"
+  name: Schema2.optional(Schema2.String).annotations({
+    [SchemaAST.TitleAnnotationId]: "Name"
   }),
-  active: S2.optional(S2.Boolean),
-  email: S2.optional(Format.Email),
-  salary: S2.optional(Format.Currency()).annotations({
-    [AST.TitleAnnotationId]: "Salary"
+  active: Schema2.optional(Schema2.Boolean),
+  email: Schema2.optional(Format.Email),
+  salary: Schema2.optional(Format.Currency()).annotations({
+    [SchemaAST.TitleAnnotationId]: "Salary"
   })
 });
 var ContactFields = [
@@ -518,26 +481,6 @@ 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",
@@ -582,7 +525,6 @@ var sortButton = {
 var tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
-  referencedCell: referencedCellButton,
   rowMenu: rowMenuButton,
   sort: sortButton
 };
@@ -1333,7 +1275,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, getValue as getValue3 } from "@dxos/echo-schema";
+import { FormatEnum as FormatEnum4, getDXN, 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";
@@ -1435,10 +1377,8 @@ var TablePresentation = class {
       if (props.format === FormatEnum4.Ref && props.referenceSchema) {
         const targetObj = getValue3(obj, field.path)?.target;
         if (targetObj) {
-          cell.accessoryHtml = tableButtons.referencedCell.render({
-            targetId: targetObj.id,
-            schemaId: props.referenceSchema
-          });
+          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>`;
         }
       }
       if (props.format === FormatEnum4.Boolean) {
@@ -1630,7 +1570,7 @@ var cellClassesForRowSelection = (selected, selectionMode) => {
 };
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-import React6, { useCallback as useCallback3, useMemo as useMemo3, useRef } from "react";
+import React5, { 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";
@@ -1885,7 +1825,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     model,
     editing
   ]);
-  return /* @__PURE__ */ React6.createElement(GridCellEditor, {
+  return /* @__PURE__ */ React5.createElement(GridCellEditor, {
     extension,
     getCellContent,
     onBlur: handleBlur
@@ -1919,7 +1859,7 @@ 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 TableRoot = ({ children, role }) => {
-  return /* @__PURE__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React6.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);
@@ -2006,10 +1946,6 @@ 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;
@@ -2121,7 +2057,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       const space = model.space;
       invariant3(space, void 0, {
         F: __dxlog_file4,
-        L: 312,
+        L: 307,
         S: void 0,
         A: [
           "space",
@@ -2158,20 +2094,20 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     t
   ]);
   if (!model || !modals) {
-    return /* @__PURE__ */ React7.createElement("span", {
+    return /* @__PURE__ */ React6.createElement("span", {
       role: "none",
       className: "attention-surface"
     });
   }
-  return /* @__PURE__ */ React7.createElement(Grid.Root, {
+  return /* @__PURE__ */ React6.createElement(Grid.Root, {
     id: model.id ?? "table-grid"
-  }, /* @__PURE__ */ React7.createElement(TableCellEditor, {
+  }, /* @__PURE__ */ React6.createElement(TableCellEditor, {
     model,
     modals,
     onEnter: handleEnter,
     onFocus: handleFocus,
     onQuery: handleQuery
-  }), /* @__PURE__ */ React7.createElement(Grid.Content, {
+  }), /* @__PURE__ */ React6.createElement(Grid.Content, {
     className: mx2("[--dx-grid-base:var(--surface-bg)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
     frozen,
     // getCells={getCells}
@@ -2184,20 +2120,17 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     onKeyDown: handleKeyDown,
     onWheelCapture: handleWheel,
     ref: setDxGrid
-  }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
+  }), /* @__PURE__ */ React6.createElement(RowActionsMenu, {
     model,
     modals
-  }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
+  }), /* @__PURE__ */ React6.createElement(ColumnActionsMenu, {
     model,
     modals
-  }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
+  }), /* @__PURE__ */ React6.createElement(ColumnSettings, {
     model,
     modals,
     onNewColumn: handleNewColumn
-  }), /* @__PURE__ */ React7.createElement(CreateRefPanel, {
-    model,
-    modals
-  }), /* @__PURE__ */ React7.createElement(RefPanel, {
+  }), /* @__PURE__ */ React6.createElement(CreateRefPanel, {
     model,
     modals
   }));
@@ -2208,7 +2141,7 @@ var Table = {
 };
 
 // packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
-import React8, { useRef as useRef2, useMemo as useMemo5, useCallback as useCallback5 } from "react";
+import React7, { 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";
 
@@ -2333,13 +2266,13 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
   }, [
     model
   ]);
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: mx3("is-full bs-full grow grid", classNames)
-  }, /* @__PURE__ */ React8.createElement("div", {
+  }, /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "grid min-bs-0 overflow-hidden"
-  }, /* @__PURE__ */ React8.createElement(Table.Root, null, /* @__PURE__ */ React8.createElement(Table.Main, {
+  }, /* @__PURE__ */ React7.createElement(Table.Root, null, /* @__PURE__ */ React7.createElement(Table.Main, {
     ref: tableRef,
     model,
     presentation,
@@ -2349,7 +2282,7 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
 };
 
 // packages/ui/react-ui-table/src/components/TableToolbar/TableToolbar.tsx
-import React9, { useCallback as useCallback6, useMemo as useMemo6 } from "react";
+import React8, { useCallback as useCallback6, useMemo as useMemo6 } from "react";
 import { live as live4 } from "@dxos/live-object";
 import { createGapSeparator, createMenuAction, MenuProvider, ToolbarMenu, useMenuActions } from "@dxos/react-ui-menu";
 var createTableToolbarActions = (state) => {
@@ -2411,11 +2344,11 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
     state
   ]);
   const menu = useMenuActions(actionsCreator);
-  return /* @__PURE__ */ React9.createElement(MenuProvider, {
+  return /* @__PURE__ */ React8.createElement(MenuProvider, {
     ...menu,
     attendableId,
     onAction
-  }, /* @__PURE__ */ React9.createElement(ToolbarMenu, {
+  }, /* @__PURE__ */ React8.createElement(ToolbarMenu, {
     classNames
   }));
 };