@dxos/react-ui-table 0.3.7-main.e08407b → 0.3.7-main.ec7f1fc

package/dist/lib/browser/index.mjs

@@ -520,6 +520,89 @@ var TableFoot = ({ footers, expand, slots, debug, border }) => {
   }))));
 };
 
+// packages/ui/react-ui-table/src/components/ComboboxCell.tsx
+import { CaretDown as CaretDown2 } from "@phosphor-icons/react";
+import React3, { useCallback, useState as useState3 } from "react";
+import { Popover as Popover2, useTranslation } from "@dxos/react-ui";
+import { PopoverCombobox } from "@dxos/react-ui-searchlist";
+import { descriptionText, getSize as getSize2, mx as mx3, staticPlaceholderText } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-table/src/translations.ts
+var translationKey = "table";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "no selection label": "\xA0"
+      }
+    }
+  }
+];
+
+// packages/ui/react-ui-table/src/components/ComboboxCell.tsx
+var initialItems = (model, value) => value ? {
+  [model.getId(value)]: {
+    label: model.getText(value),
+    data: value
+  }
+} : {};
+var ComboboxCell = ({ model, value, onValueChange }) => {
+  const { t } = useTranslation(translationKey);
+  const [items, setItems] = useState3(initialItems(model, value));
+  const [loading, setLoading] = useState3(false);
+  const [searchInputValue, setSearchInputValue] = useState3("");
+  const handleSearchInputValueChange = async (text) => {
+    setSearchInputValue(text ?? "");
+    setLoading(true);
+    const items2 = await model.query(text);
+    setItems(items2.reduce((acc, item) => {
+      acc[model.getId(item)] = {
+        label: model.getText(item),
+        data: item
+      };
+      return acc;
+    }, initialItems(model, value)));
+    setLoading(false);
+  };
+  const handleValueChange = useCallback((id) => {
+    onValueChange(items[id]?.data);
+  }, [
+    items,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React3.createElement(PopoverCombobox.Root, {
+    placeholder: t("no selection label")
+  }, /* @__PURE__ */ React3.createElement(PopoverCombobox.Trigger, {
+    variant: "ghost",
+    classNames: "is-full"
+  }, value ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", {
+    className: mx3("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
+  }, model.getText(value)), /* @__PURE__ */ React3.createElement(CaretDown2, {
+    weight: "bold",
+    className: getSize2(3)
+  })) : null), /* @__PURE__ */ React3.createElement(PopoverCombobox.Content, {
+    shouldFilter: false,
+    classNames: "is-[--radix-popover-trigger-width]"
+  }, /* @__PURE__ */ React3.createElement(PopoverCombobox.Input, {
+    value: searchInputValue,
+    onValueChange: handleSearchInputValueChange
+  }), /* @__PURE__ */ React3.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React3.createElement("p", {
+    className: mx3("text-center", descriptionText)
+  }, "Start typing to search") : loading ? /* @__PURE__ */ React3.createElement("p", {
+    className: mx3("text-center", descriptionText)
+  }, "Searching\u2026") : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(PopoverCombobox.Empty, {
+    classNames: [
+      "text-center",
+      descriptionText
+    ]
+  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ React3.createElement(PopoverCombobox.Item, {
+    key: id,
+    value: id,
+    onSelect: handleValueChange,
+    classNames: "truncate"
+  }, label)))), /* @__PURE__ */ React3.createElement(Popover2.Arrow, null)));
+};
+
 // packages/ui/react-ui-table/src/helpers.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
 import { Check as Check2, ClipboardText, X as X2 } from "@phosphor-icons/react";
@@ -527,9 +610,9 @@ import { createColumnHelper } from "@tanstack/react-table";
 import format from "date-fns/format";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import defaultsDeep from "lodash.defaultsdeep";
-import React3, { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
-import { ComboBox, Input as Input2, Tooltip } from "@dxos/react-ui";
-import { getSize as getSize2, mx as mx3 } from "@dxos/react-ui-theme";
+import React4, { useRef as useRef3, useState as useState4 } from "react";
+import { Input as Input2, Tooltip } from "@dxos/react-ui";
+import { getSize as getSize3, mx as mx4 } from "@dxos/react-ui-theme";
 import { stripUndefinedValues } from "@dxos/util";
 var findNextFocusable = (findFirstFocusable, container) => {
   const next = findFirstFocusable(container);
@@ -549,44 +632,6 @@ var createColumnBuilder = () => ({
 var defaults = (options, ...sources) => {
   return stripUndefinedValues(defaultsDeep({}, options, ...sources));
 };
-var CellSelector = ({ model, value: _value, onUpdate }) => {
-  const [edit, setEdit] = useState3(false);
-  const [value, setValue] = useState3();
-  useEffect2(() => setValue(_value ? {
-    id: model.getId(_value),
-    label: model.getText(_value)
-  } : void 0), [
-    _value
-  ]);
-  const [items, setItems] = useState3([]);
-  const handleUpdate = async (text) => {
-    const items2 = await model.query(text);
-    setItems(items2.map((item) => ({
-      id: model.getId(item),
-      label: model.getText(item),
-      data: item
-    })));
-  };
-  if (!edit) {
-    const text = _value ? model.getText(_value) : void 0;
-    return (
-      // TODO(burdon): Hack to prevent div from collapsing.
-      /* @__PURE__ */ React3.createElement("div", {
-        className: mx3("w-full px-2", !text && "opacity-0"),
-        onClick: () => setEdit(true)
-      }, text ?? "-")
-    );
-  }
-  return /* @__PURE__ */ React3.createElement(ComboBox.Root, {
-    items,
-    value,
-    onChange: (value2) => onUpdate(value2?.data),
-    onInputChange: handleUpdate
-  }, /* @__PURE__ */ React3.createElement(ComboBox.Input, null), /* @__PURE__ */ React3.createElement(ComboBox.Content, null, items.map((item) => /* @__PURE__ */ React3.createElement(ComboBox.Item, {
-    key: item.id,
-    item
-  }, item.label))));
-};
 var ColumnBuilder = class {
   /**
   * Select value
@@ -595,18 +640,18 @@ var ColumnBuilder = class {
     return defaults(props, {
       minSize: 100,
       header: (column) => {
-        return /* @__PURE__ */ React3.createElement("div", {
+        return /* @__PURE__ */ React4.createElement("div", {
           className: "truncate"
         }, label ?? column.header.id);
       },
-      cell: model && onUpdate ? (cell) => /* @__PURE__ */ React3.createElement(CellSelector, {
+      cell: model && onUpdate ? (cell) => /* @__PURE__ */ React4.createElement(ComboboxCell, {
         model,
         value: cell.getValue(),
-        onUpdate: (value) => onUpdate?.(cell.row.original, cell.column.id, value)
+        onValueChange: (value) => onUpdate?.(cell.row.original, cell.column.id, value)
       }) : (cell) => {
         const value = cell.getValue();
-        return /* @__PURE__ */ React3.createElement("div", {
-          className: mx3("truncate", className)
+        return /* @__PURE__ */ React4.createElement("div", {
+          className: mx4("truncate", className)
         }, value ? model.getText(value) : "");
       }
     });
@@ -619,13 +664,13 @@ var ColumnBuilder = class {
       minSize: 100,
       // TODO(burdon): Default.
       header: (column) => {
-        return /* @__PURE__ */ React3.createElement("div", {
+        return /* @__PURE__ */ React4.createElement("div", {
           className: "truncate"
         }, label ?? column.header.id);
       },
       cell: onUpdate ? (cell) => {
         const initialValue = cell.getValue();
-        const [value, setValue] = useState3(initialValue);
+        const [value, setValue] = useState4(initialValue);
         const inputRef = useRef3(null);
         const { findFirstFocusable } = useFocusFinders();
         const handleSave = (focusNext = false) => {
@@ -647,7 +692,7 @@ var ColumnBuilder = class {
         const rows = cell.table.getRowModel().flatRows;
         const columns = cell.table.getVisibleFlatColumns();
         const placeholder = cell.row.index === rows.length - 1 && columns[0].id === cell.column.id;
-        return /* @__PURE__ */ React3.createElement(Input2.Root, null, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+        return /* @__PURE__ */ React4.createElement(Input2.Root, null, /* @__PURE__ */ React4.createElement(Input2.TextInput, {
           ref: inputRef,
           variant: "subdued",
           placeholder: placeholder ? "Add row..." : void 0,
@@ -659,8 +704,8 @@ var ColumnBuilder = class {
         }));
       } : (cell) => {
         const value = cell.getValue();
-        return /* @__PURE__ */ React3.createElement("div", {
-          className: mx3("truncate", className)
+        return /* @__PURE__ */ React4.createElement("div", {
+          className: mx4("truncate", className)
         }, value);
       }
     });
@@ -672,12 +717,12 @@ var ColumnBuilder = class {
     return defaults(props, {
       size: 100,
       minSize: 100,
-      header: (cell) => /* @__PURE__ */ React3.createElement("div", {
+      header: (cell) => /* @__PURE__ */ React4.createElement("div", {
         className: "w-full truncate text-right"
       }, label ?? cell.header.id),
       cell: (cell) => {
         const value = cell.getValue();
-        const [text, setText] = useState3();
+        const [text, setText] = useState4();
         const handleEdit = () => {
           if (onUpdate) {
             setText(value !== void 0 ? String(value) : "");
@@ -692,9 +737,9 @@ var ColumnBuilder = class {
           setText(void 0);
         };
         if (text !== void 0) {
-          return /* @__PURE__ */ React3.createElement("div", {
-            className: mx3("grow text-right font-mono", className)
-          }, /* @__PURE__ */ React3.createElement(Input2.Root, null, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+          return /* @__PURE__ */ React4.createElement("div", {
+            className: mx4("grow text-right font-mono", className)
+          }, /* @__PURE__ */ React4.createElement(Input2.Root, null, /* @__PURE__ */ React4.createElement(Input2.TextInput, {
             autoFocus: true,
             value: text,
             classNames: "px-2",
@@ -703,8 +748,8 @@ var ColumnBuilder = class {
             onKeyDown: (event) => event.key === "Escape" && handleCancel() || event.key === "Enter" && handleSave()
           })));
         }
-        return /* @__PURE__ */ React3.createElement("div", {
-          className: mx3('grow w-full text-right font-mono empty:after:content-["\xA0"]', className),
+        return /* @__PURE__ */ React4.createElement("div", {
+          className: mx4('grow w-full text-right font-mono empty:after:content-["\xA0"]', className),
           onClick: handleEdit
         }, value?.toLocaleString(void 0, {
           minimumFractionDigits: digits ?? 0,
@@ -721,15 +766,15 @@ var ColumnBuilder = class {
     return defaults(props, {
       size: 220,
       minSize: 100,
-      header: (cell) => /* @__PURE__ */ React3.createElement("div", null, label ?? cell.header.id),
+      header: (cell) => /* @__PURE__ */ React4.createElement("div", null, label ?? cell.header.id),
       cell: (cell) => {
         const value = cell.getValue();
         try {
           const str = value ? formatSpec ? format(value, formatSpec) : relative ? formatDistanceToNow(value, {
             addSuffix: true
           }) : value.toISOString() : void 0;
-          return /* @__PURE__ */ React3.createElement("div", {
-            className: mx3("font-mono", className)
+          return /* @__PURE__ */ React4.createElement("div", {
+            className: mx4("font-mono", className)
           }, str);
         } catch (err) {
           console.log(value);
@@ -745,25 +790,25 @@ var ColumnBuilder = class {
     return defaults(props, {
       size: 86,
       minSize: 86,
-      header: (cell) => /* @__PURE__ */ React3.createElement("div", null, label ?? cell.header.id),
+      header: (cell) => /* @__PURE__ */ React4.createElement("div", null, label ?? cell.header.id),
       cell: (cell) => {
         const value = cell.getValue();
         if (!value) {
           return;
         }
-        const element = /* @__PURE__ */ React3.createElement("div", {
+        const element = /* @__PURE__ */ React4.createElement("div", {
           className: "font-mono font-thin text-green-500 dark:text-green-300"
         }, value.truncate());
         if (!tooltip) {
           return element;
         }
-        return /* @__PURE__ */ React3.createElement("div", {
+        return /* @__PURE__ */ React4.createElement("div", {
           className: "group inline-flex gap-2 items-center"
-        }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+        }, /* @__PURE__ */ React4.createElement(Tooltip.Provider, null, /* @__PURE__ */ React4.createElement(Tooltip.Root, null, /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
           asChild: true
-        }, element), /* @__PURE__ */ React3.createElement(Tooltip.Content, {
+        }, element), /* @__PURE__ */ React4.createElement(Tooltip.Content, {
           side: "right"
-        }, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React3.createElement(ClipboardText, {
+        }, /* @__PURE__ */ React4.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React4.createElement(ClipboardText, {
           onClick: (ev) => {
             ev.stopPropagation();
             void navigator.clipboard.writeText(value.toHex());
@@ -779,14 +824,14 @@ var ColumnBuilder = class {
     return defaults(props, {
       size: 40,
       minSize: 40,
-      header: (column) => /* @__PURE__ */ React3.createElement("div", {
+      header: (column) => /* @__PURE__ */ React4.createElement("div", {
         className: "flex grow justify-center"
       }, label ?? column.header.id),
       cell: (cell) => {
         const value = cell.getValue();
-        return /* @__PURE__ */ React3.createElement("div", {
+        return /* @__PURE__ */ React4.createElement("div", {
           className: "flex grow justify-center"
-        }, /* @__PURE__ */ React3.createElement(Input2.Root, null, /* @__PURE__ */ React3.createElement(Input2.Checkbox, {
+        }, /* @__PURE__ */ React4.createElement(Input2.Root, null, /* @__PURE__ */ React4.createElement(Input2.Checkbox, {
           onClick: (event) => event.stopPropagation(),
           classNames: className,
           disabled: !onUpdate,
@@ -806,22 +851,22 @@ var ColumnBuilder = class {
     const IconOff = off?.Icon ?? X2;
     return defaults(props, {
       size: size ?? 32,
-      header: (column) => /* @__PURE__ */ React3.createElement("div", {
+      header: (column) => /* @__PURE__ */ React4.createElement("div", {
         className: "justify-center"
       }, label ?? column.header.id),
       cell: (cell) => {
         const value = cell.getValue();
         if (value) {
-          return /* @__PURE__ */ React3.createElement("div", {
+          return /* @__PURE__ */ React4.createElement("div", {
             className: "flex grow justify-center"
-          }, /* @__PURE__ */ React3.createElement(IconOn, {
-            className: mx3(getSize2(6), on?.className ?? "text-green-700")
+          }, /* @__PURE__ */ React4.createElement(IconOn, {
+            className: mx4(getSize3(6), on?.className ?? "text-green-700")
           }));
         } else if (value === false) {
-          return /* @__PURE__ */ React3.createElement("div", {
+          return /* @__PURE__ */ React4.createElement("div", {
             className: "flex grow justify-center"
-          }, /* @__PURE__ */ React3.createElement(IconOff, {
-            className: mx3(getSize2(6), off?.className ?? "text-red-700")
+          }, /* @__PURE__ */ React4.createElement(IconOff, {
+            className: mx4(getSize3(6), off?.className ?? "text-red-700")
           }));
         } else {
           return null;
@@ -834,6 +879,7 @@ export {
   ColumnBuilder,
   ColumnMenu,
   ColumnPanel,
+  ComboboxCell,
   Table,
   columnTypes,
   createColumnBuilder,