@dxos/react-ui-table 0.7.5-main.9d2a38b → 0.7.5-main.e94eead

package/dist/lib/browser/{chunk-T7CTRLHA.mjs → chunk-3FR6NHPD.mjs}

@@ -1,13 +1,15 @@
 // packages/ui/react-ui-table/src/types/table.ts
-import { Ref, ObjectId, S, TypedObject } from "@dxos/echo-schema";
-import { ThreadType } from "@dxos/plugin-space/types";
+import { Ref, ObjectId, S, TypedObject, Expando } from "@dxos/echo-schema";
 import { ViewType } from "@dxos/schema";
 var TableSchema = S.Struct({
   id: ObjectId,
   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)))
+  threads: S.optional(S.Array(Ref(
+    Expando
+    /* ThreadType */
+  )))
 });
 var TableType = class extends TypedObject({
   typename: "dxos.org/type/Table",
@@ -19,4 +21,4 @@ export {
   TableSchema,
   TableType
 };
-//# sourceMappingURL=chunk-T7CTRLHA.mjs.map
+//# sourceMappingURL=chunk-3FR6NHPD.mjs.map

package/dist/lib/browser/chunk-3FR6NHPD.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/types/table.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Ref, ObjectId, S, TypedObject, Expando } from '@dxos/echo-schema';\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = S.Struct({\n  id: ObjectId, // TODO(burdon): Where should this be?\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(Expando /* ThreadType */))), // TODO(dmaretskyi): Breaks edge because plugin-space depends on react-client.\n});\n\n// type 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,UAAUC,GAAGC,aAAaC,eAAe;AAEvD,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,EAAEC,OAAO;EAClCC,IAAIC;EACJC,MAAMJ,EAAEK,SAASL,EAAEM,MAAM;EACzBC,MAAMP,EAAEK,SAASG,IAAIC,QAAAA,CAAAA;;EAErBC,SAASV,EAAEK,SAASL,EAAEW,MAAMH;IAAII;;EAAsB,CAAA,CAAA;AACxD,CAAA;AAIO,IAAMC,YAAN,cAAwBC,YAAY;EACzCC,UAAU;EACVC,SAAS;AACX,CAAA,EAAGjB,YAAYkB,MAAM,EAAA;AAAG;",
+  "names": ["Ref", "ObjectId", "S", "TypedObject", "Expando", "ViewType", "TableSchema", "S", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "TableType", "TypedObject", "typename", "version", "fields"]
+}

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 import {
   TableSchema,
   TableType
-} from "./chunk-T7CTRLHA.mjs";
+} from "./chunk-3FR6NHPD.mjs";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -314,7 +314,7 @@ var initializeTable = async ({ space, table, initialRow = true, initialSchema })
     if (!schema) {
       throw new Error(`Schema not found: ${initialSchema}`);
     }
-    const fields = getSchemaProperties(schema.ast).filter((prop) => prop.type !== "object" || prop.format === FormatEnum.Ref).map((prop) => prop.name);
+    const fields = getSchemaProperties(schema.ast).filter((prop) => prop.format !== FormatEnum.Ref).map((prop) => prop.name);
     table.view = makeRef(createView({
       // TODO(ZaymonFC): Don't hardcode name?
       name: "View",
@@ -346,9 +346,9 @@ var initializeTable = async ({ space, table, initialRow = true, initialSchema })
       jsonSchema: contactSchema.jsonSchema,
       fields: [
         "name",
-        "active",
         "email",
-        "salary"
+        "salary",
+        "active"
       ]
     }));
     const projection = new ViewProjection(contactSchema, table.view.target);
@@ -359,6 +359,13 @@ var initializeTable = async ({ space, table, initialRow = true, initialSchema })
         size: 150
       }
     });
+    projection.setFieldProjection({
+      field: {
+        id: table.view.target.fields.find((f) => f.path === "active").id,
+        path: "active",
+        size: 100
+      }
+    });
     projection.setFieldProjection({
       field: {
         id: createFieldId(),
@@ -391,7 +398,7 @@ var BUTTON_IDENTIFIERS = {
 var createButton = ({ attr, data, disabled = false, icon, testId, type = "primary" }) => {
   const dataAttrs = Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
   const positionClass = type === "primary" ? "inline-end-2" : "inline-end-9";
-  return `<button ${attr} data-testid="${testId}" class="ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 var addColumnButton = {
   attr: BUTTON_IDENTIFIERS.newColumn,
@@ -502,8 +509,8 @@ var CONTROL_IDENTIFIERS = {
   switch: "data-table-switch"
 };
 var BASE_CLASSES = {
-  checkbox: "absolute inset-block-[.375rem] inline-end-[.375rem] ch-checkbox",
-  switch: "absolute inset-block-[.25rem] inline-end-[.25rem] ch-checkbox--switch"
+  checkbox: "absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox",
+  switch: "absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch"
 };
 var renderAttributes = (data) => {
   return Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
@@ -775,6 +782,14 @@ var TableSorting = class {
     if (value == null) {
       return value;
     }
+    if (format === FormatEnum2.SingleSelect) {
+      const options = props.options;
+      if (!options) {
+        return void 0;
+      }
+      const option = options.find((option2) => option2.id === value);
+      return option ? options.indexOf(option) : void 0;
+    }
     if (format === FormatEnum2.Ref && field.referencePath) {
       const refValue = getValue(value.target, field.referencePath);
       return refValue;
@@ -1192,7 +1207,8 @@ var TablePresentation = class {
             return "";
           }
           switch (props.format) {
-            case FormatEnum4.Boolean: {
+            case FormatEnum4.Boolean:
+            case FormatEnum4.SingleSelect: {
               return "";
             }
             case FormatEnum4.Ref: {
@@ -1244,6 +1260,16 @@ var TablePresentation = class {
         });
         cell.readonly = true;
       }
+      if (props.format === FormatEnum4.SingleSelect) {
+        const value = getValue3(obj, field.path);
+        const options = this.model.projection.getFieldProjection(field.id).props.options;
+        if (options) {
+          const option = options.find((o) => o.id === value);
+          if (option) {
+            cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+          }
+        }
+      }
       const idx = toPlaneCellIndex({
         col: colIndex,
         row: displayIndex
@@ -1907,7 +1933,10 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
 };
 
 // packages/ui/react-ui-table/src/hooks/useTableModel.ts
+import { effect as effect3 } from "@preact/signals-core";
 import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useSelectionActions } from "@dxos/react-ui-attention";
+import { isNonNullable } from "@dxos/util";
 var useTableModel = ({ objects, table, projection, ...props }) => {
   const [model, setModel] = useState3();
   useEffect2(() => {
@@ -1940,6 +1969,26 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
     model,
     objects
   ]);
+  const { select, clear } = useSelectionActions([
+    table?.id,
+    table?.view?.target?.query.type
+  ].filter(isNonNullable));
+  useEffect2(() => {
+    if (!model) {
+      return;
+    }
+    const unsubscribe = effect3(() => {
+      select([
+        ...model.selection.selection.value
+      ]);
+    });
+    return () => {
+      clear();
+      unsubscribe();
+    };
+  }, [
+    model
+  ]);
   return model;
 };
 export {