@dxos/react-ui-table 0.7.1 → 0.7.2-main.f1adc9f

package/dist/lib/browser/{chunk-A5W4XWPD.mjs → chunk-EUQZHWXM.mjs}

@@ -2,17 +2,21 @@
 import { ref, S, TypedObject } from "@dxos/echo-schema";
 import { ThreadType } from "@dxos/plugin-space";
 import { ViewType } from "@dxos/schema";
+var TableSchema = S.Struct({
+  id: S.String,
+  name: S.optional(S.String),
+  view: S.optional(ref(ViewType)),
+  // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.
+  threads: S.optional(S.Array(ref(ThreadType)))
+});
 var TableType = class extends TypedObject({
   typename: "dxos.org/type/Table",
   version: "0.1.0"
-})({
-  name: S.optional(S.String),
-  view: S.optional(ref(ViewType)),
-  threads: S.optional(S.mutable(S.Array(ref(ThreadType))))
-}) {
+})(TableSchema.fields) {
 };
 
 export {
+  TableSchema,
   TableType
 };
-//# sourceMappingURL=chunk-A5W4XWPD.mjs.map
+//# sourceMappingURL=chunk-EUQZHWXM.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/types/table.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { ref, S, TypedObject } from '@dxos/echo-schema';\nimport { ThreadType } from '@dxos/plugin-space';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = S.Struct({\n  id: S.String,\n  name: S.optional(S.String),\n  view: S.optional(ref(ViewType)),\n  // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.\n  threads: S.optional(S.Array(ref(ThreadType))),\n});\n\n// type TableType = S.ClassType<typeof TableSchema>;\n\n// TODO(burdon): UX should not depend on ECHO types.\nexport class TableType extends TypedObject({\n  typename: 'dxos.org/type/Table',\n  version: '0.1.0',\n})(TableSchema.fields) {}\n"],
+  "mappings": ";AAIA,SAASA,KAAKC,GAAGC,mBAAmB;AACpC,SAASC,kBAAkB;AAC3B,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,EAAEC,OAAO;EAClCC,IAAIF,EAAEG;EACNC,MAAMJ,EAAEK,SAASL,EAAEG,MAAM;EACzBG,MAAMN,EAAEK,SAASE,IAAIC,QAAAA,CAAAA;;EAErBC,SAAST,EAAEK,SAASL,EAAEU,MAAMH,IAAII,UAAAA,CAAAA,CAAAA;AAClC,CAAA;AAKO,IAAMC,YAAN,cAAwBC,YAAY;EACzCC,UAAU;EACVC,SAAS;AACX,CAAA,EAAGhB,YAAYiB,MAAM,EAAA;AAAG;",
+  "names": ["ref", "S", "TypedObject", "ThreadType", "ViewType", "TableSchema", "S", "Struct", "id", "String", "name", "optional", "view", "ref", "ViewType", "threads", "Array", "ThreadType", "TableType", "TypedObject", "typename", "version", "fields"]
+}

package/dist/lib/browser/index.mjs

@@ -1,6 +1,7 @@
 import {
+  TableSchema,
   TableType
-} from "./chunk-A5W4XWPD.mjs";
+} from "./chunk-EUQZHWXM.mjs";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -60,14 +61,19 @@ var ColumnActionsMenu = ({ model }) => {
   }, /* @__PURE__ */ React.createElement(DropdownMenu.VirtualTrigger, {
     virtualRef: model.modalController.trigger
   }), /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    "data-testid": "column-sort-descending",
     onClick: () => model.setSort(state.fieldId, "desc")
   }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    "data-testid": "column-sort-ascending",
     onClick: () => model.setSort(state.fieldId, "asc")
   }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    "data-testid": "column-clear-sort",
     onClick: () => model.clearSort()
   }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    "data-testid": "column-delete",
     onClick: () => model.deleteColumn(state.fieldId)
   }, t("column action delete")), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    "data-testid": "column-settings",
     onClick: () => model.modalController.openColumnSettings()
   }, t("column action settings"))), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null))));
 };
@@ -104,7 +110,7 @@ var ColumnSettings = ({ model }) => {
     state
   ]);
   const field = existingField ?? newField;
-  const handleClose = useCallback(() => {
+  const handleSave = useCallback(() => {
     model?.modalController.close();
   }, [
     model?.modalController
@@ -133,7 +139,7 @@ var ColumnSettings = ({ model }) => {
     projection: model.projection,
     field,
     registry: space?.db.schemaRegistry,
-    onClose: handleClose,
+    onSave: handleSave,
     onCancel: handleCancel
   })), /* @__PURE__ */ React2.createElement(DropdownMenu2.Arrow, null))));
 };
@@ -143,8 +149,8 @@ import React3 from "react";
 import { DropdownMenu as DropdownMenu3, useTranslation as useTranslation2 } from "@dxos/react-ui";
 var RowActionsMenu = ({ model }) => {
   const { t } = useTranslation2(translationKey);
-  const state = model.modalController.state.value;
   const hasSelection = model.selection.hasSelection.value;
+  const state = model.modalController.state.value;
   if (state?.type !== "row") {
     return null;
   }
@@ -155,6 +161,7 @@ var RowActionsMenu = ({ model }) => {
   }, /* @__PURE__ */ React3.createElement(DropdownMenu3.VirtualTrigger, {
     virtualRef: model.modalController.trigger
   }), /* @__PURE__ */ React3.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React3.createElement(DropdownMenu3.Viewport, null, /* @__PURE__ */ React3.createElement(DropdownMenu3.Item, {
+    "data-testid": "row-menu-delete",
     onClick: () => model.deleteRow(state.rowIndex)
   }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React3.createElement(DropdownMenu3.Arrow, null)));
 };
@@ -225,12 +232,12 @@ import { PublicKey } from "@dxos/react-client";
 import { create } from "@dxos/react-client/echo";
 import { createFieldId, createView, ViewProjection } from "@dxos/schema";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
-var initializeTable = ({ space, table }) => {
+var initializeTable = ({ space, table, initialRow = true }) => {
   log.info("initializeTable", {
     table
   }, {
     F: __dxlog_file,
-    L: 26,
+    L: 32,
     S: void 0,
     C: (f, a) => f(...a)
   });
@@ -279,7 +286,9 @@ var initializeTable = ({ space, table }) => {
       title: "Manager"
     }
   });
-  space.db.add(create(contactSchema, {}));
+  if (initialRow) {
+    space.db.add(create(contactSchema, {}));
+  }
   return contactSchema;
 };
 
@@ -294,9 +303,9 @@ var ICONS = {
   rowMenu: "ph--dots-three--regular",
   newColumn: "ph--plus--regular"
 };
-var createButtonHtml = ({ button, value = "", disabled = false }) => {
+var createButtonHtml = ({ button, value = "", disabled = false, testId }) => {
   const buttonClasses = "ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2";
-  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
+  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" data-testid="${testId}" ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
 };
 var tableButtons = {
   columnSettings: {
@@ -304,7 +313,8 @@ var tableButtons = {
     icon: ICONS.columnSettings,
     render: ({ fieldId }) => createButtonHtml({
       button: "columnSettings",
-      value: fieldId
+      value: fieldId,
+      testId: "table-column-settings-button"
     })
   },
   rowMenu: {
@@ -312,7 +322,8 @@ var tableButtons = {
     icon: ICONS.rowMenu,
     render: ({ rowIndex }) => createButtonHtml({
       button: "rowMenu",
-      value: rowIndex.toString()
+      value: rowIndex.toString(),
+      testId: "table-row-menu-button"
     })
   },
   addColumn: {
@@ -320,7 +331,8 @@ var tableButtons = {
     icon: ICONS.newColumn,
     render: ({ disabled } = {}) => createButtonHtml({
       button: "newColumn",
-      disabled
+      disabled,
+      testId: "table-new-column-button"
     })
   }
 };
@@ -471,7 +483,7 @@ var frozen = {
 var TableRoot = ({ children, role }) => {
   return /* @__PURE__ */ React5.createElement("div", {
     role: "none",
-    className: mx("relative border-bs !border-separator", role === "section" ? "attention-surface overflow-hidden [&_.dx-grid]:max-is-max" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-max [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-max")
+    className: mx("relative border-bs !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);
 };
 var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwardedRef) => {
@@ -541,7 +553,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwarde
       const space = getSpace2(model.table);
       invariant2(space, void 0, {
         F: __dxlog_file3,
-        L: 158,
+        L: 157,
         S: void 0,
         A: [
           "space",
@@ -847,7 +859,7 @@ var checkboxAttributes = {
 var renderCheckbox = ({ rowIndex, header = false, checked = false, disabled = false }) => {
   const baseClasses = "absolute inset-block-[6px] inline-end-[6px] ch-checkbox";
   const { attributes } = tableControls.checkbox;
-  return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ""} ${checked ? "checked" : ""} ${disabled ? "disabled" : ""}/>`;
+  return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ""} ${checked ? "checked" : ""} ${disabled ? "disabled" : ""} data-testid="table-selection"/>`;
 };
 var tableControls = {
   checkbox: {
@@ -982,6 +994,7 @@ var TableModel = class extends Resource2 {
           col,
           row: 0
         })] = {
+          // TODO(burdon): Use same logic as form for fallback title.
           value: props.title ?? field.path,
           readonly: true,
           resizeHandle: "col",
@@ -1384,6 +1397,7 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
 };
 export {
   Table,
+  TableSchema,
   TableType,
   Toolbar,
   fromGridCell,