@dxos/react-ui-table 0.7.1 → 0.7.2-staging.6d26b2a

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

@@ -2,17 +2,19 @@
 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)),
+  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 {
   TableType
 };
-//# sourceMappingURL=chunk-A5W4XWPD.mjs.map
+//# sourceMappingURL=chunk-EWGUNGJC.mjs.map

package/dist/lib/browser/chunk-EWGUNGJC.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\n// TODO(burdon): Factor out echo dependency and define pattern for react-ui-xxx.\nconst TableSchema = S.Struct({\n  id: S.String,\n  name: S.optional(S.String),\n  view: S.optional(ref(ViewType)),\n  threads: S.optional(S.Array(ref(ThreadType))),\n});\n\ntype _TableType = S.Schema.Type<typeof TableSchema>;\n\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;AAGzB,IAAMC,cAAcC,EAAEC,OAAO;EAC3BC,IAAIF,EAAEG;EACNC,MAAMJ,EAAEK,SAASL,EAAEG,MAAM;EACzBG,MAAMN,EAAEK,SAASE,IAAIC,QAAAA,CAAAA;EACrBC,SAAST,EAAEK,SAASL,EAAEU,MAAMH,IAAII,UAAAA,CAAAA,CAAAA;AAClC,CAAA;AAIO,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,6 @@
 import {
   TableType
-} from "./chunk-A5W4XWPD.mjs";
+} from "./chunk-EWGUNGJC.mjs";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -60,14 +60,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))));
 };
@@ -155,6 +160,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 +231,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 +285,9 @@ var initializeTable = ({ space, table }) => {
       title: "Manager"
     }
   });
-  space.db.add(create(contactSchema, {}));
+  if (initialRow) {
+    space.db.add(create(contactSchema, {}));
+  }
   return contactSchema;
 };
 
@@ -294,9 +302,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 +312,8 @@ var tableButtons = {
     icon: ICONS.columnSettings,
     render: ({ fieldId }) => createButtonHtml({
       button: "columnSettings",
-      value: fieldId
+      value: fieldId,
+      testId: "table-column-settings-button"
     })
   },
   rowMenu: {
@@ -312,7 +321,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 +330,8 @@ var tableButtons = {
     icon: ICONS.newColumn,
     render: ({ disabled } = {}) => createButtonHtml({
       button: "newColumn",
-      disabled
+      disabled,
+      testId: "table-new-column-button"
     })
   }
 };
@@ -471,7 +482,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) => {
@@ -847,7 +858,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: {