@dxos/react-ui-table 0.7.5-labs.a279d8c → 0.7.5-labs.c0e040f

package/dist/lib/browser/index.mjs

@@ -398,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,
@@ -509,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(" ");
@@ -782,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;
@@ -1199,7 +1207,8 @@ var TablePresentation = class {
             return "";
           }
           switch (props.format) {
-            case FormatEnum4.Boolean: {
+            case FormatEnum4.Boolean:
+            case FormatEnum4.SingleSelect: {
               return "";
             }
             case FormatEnum4.Ref: {
@@ -1251,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
@@ -1914,7 +1933,9 @@ 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";
 var useTableModel = ({ objects, table, projection, ...props }) => {
   const [model, setModel] = useState3();
   useEffect2(() => {
@@ -1947,6 +1968,23 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
     model,
     objects
   ]);
+  const { select, clear } = useSelectionActions(table?.id);
+  useEffect2(() => {
+    if (!model) {
+      return;
+    }
+    const unsubscribe = effect3(() => {
+      select([
+        ...model.selection.selection.value
+      ]);
+    });
+    return () => {
+      clear();
+      unsubscribe();
+    };
+  }, [
+    model
+  ]);
   return model;
 };
 export {