@dxos/react-ui-table 0.3.9-main.5d43cb5 → 0.3.9-main.604ae36

package/dist/lib/browser/index.mjs

@@ -1,45 +1,42 @@
 // packages/ui/react-ui-table/src/components/ColumnMenu.tsx
 import { Check, CaretDown, Trash, X } from "@phosphor-icons/react";
 import React, { useRef, useState } from "react";
-import { Button, DensityProvider, Input, Popover, Select, Separator } from "@dxos/react-ui";
+import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } from "@dxos/react-ui";
 import { getSize, mx } from "@dxos/react-ui-theme";
 import { safeParseInt } from "@dxos/util";
 
-// packages/ui/react-ui-table/src/schema.ts
-var columnTypes = /* @__PURE__ */ new Map([
-  [
-    "string",
-    "Text"
-  ],
-  [
-    "boolean",
-    "Checkbox"
-  ],
-  [
-    "number",
-    "Number"
-  ],
-  [
-    "date",
-    "Date"
-  ],
-  [
-    "ref",
-    "Reference"
-  ]
-]);
+// packages/ui/react-ui-table/src/translations.ts
+var translationKey = "table";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "no selection label": "\xA0",
+        "number column type label": "Number",
+        "boolean column type label": "Toggle",
+        "date column type label": "Date",
+        "string column type label": "Text",
+        "ref column type label": "Reference",
+        "digits label": "Decimal places",
+        "save label": "Save",
+        "delete label": "Delete",
+        "column label label": "Label",
+        "property key label": "Property",
+        "column type label": "Type"
+      }
+    }
+  }
+];
 
 // packages/ui/react-ui-table/src/components/ColumnMenu.tsx
 var ColumnMenu = ({ column, ...props }) => {
   const title = column.label?.length ? column.label : column.id;
   return /* @__PURE__ */ React.createElement("div", {
-    className: "flex grow items-center overflow-hidden"
+    className: "flex items-center gap-2"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "truncate",
+    className: "flex-1 min-is-0 truncate",
     title
   }, title), /* @__PURE__ */ React.createElement("div", {
-    className: "grow"
-  }), /* @__PURE__ */ React.createElement("div", {
     className: "flex shrink-0"
   }, /* @__PURE__ */ React.createElement(ColumnPanel, {
     ...props,
@@ -59,6 +56,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
   const [label, setLabel] = useState(column.label);
   const [digits, setDigits] = useState(String(column.digits ?? "0"));
   const propRef = useRef(null);
+  const { t } = useTranslation(translationKey);
   const handleCancel = () => {
     setProp(column.id);
     setOpen(false);
@@ -93,7 +91,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     asChild: true
   }, /* @__PURE__ */ React.createElement(Button, {
     variant: "ghost",
-    classNames: "p-0"
+    classNames: "p-1"
   }, /* @__PURE__ */ React.createElement(CaretDown, {
     className: getSize(4)
   }))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, null, /* @__PURE__ */ React.createElement(Popover.Viewport, {
@@ -104,14 +102,14 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     className: "flex flex-col gap-1"
   }, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1"
-  }, "Label"), /* @__PURE__ */ React.createElement(Input.TextInput, {
+  }, t("column label label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
     placeholder: "Column label",
     value: label ?? "",
     onChange: (event) => setLabel(event.target.value),
     autoFocus: true
   })), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, "Property"), /* @__PURE__ */ React.createElement(Input.TextInput, {
+  }, t("property key label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
     ref: propRef,
     placeholder: "Property key",
     // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
@@ -119,18 +117,23 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     onChange: (event) => setProp(event.target.value.replace(/[^\w_]/g, ""))
   })), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, "Type"), /* @__PURE__ */ React.createElement(Select.Root, {
+  }, t("column type label")), /* @__PURE__ */ React.createElement(Select.Root, {
     value: type,
     onValueChange: setType
   }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
     placeholder: "Type",
     classNames: "is-full"
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, Array.from(columnTypes.entries()).map(([type2, label2]) => /* @__PURE__ */ React.createElement(Select.Option, {
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, [
+    "number",
+    "boolean",
+    "string",
+    "ref"
+  ].map((type2) => /* @__PURE__ */ React.createElement(Select.Option, {
     key: type2,
     value: type2
-  }, label2)))))))), type === "number" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+  }, t(`${type2} column type label`))))))))), type === "number" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, "Decimal places"), /* @__PURE__ */ React.createElement(Input.TextInput, {
+  }, t("digits label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
     value: digits ?? "",
     onChange: (event) => setDigits(event.target.value)
   })))), type === "ref" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
@@ -141,7 +144,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
   }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
     placeholder: "Table",
     classNames: "is-full"
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.filter((t) => t.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React.createElement(Select.Option, {
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React.createElement(Select.Option, {
     key: id,
     value: id
   }, name ?? id))))))), refTable && /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
@@ -163,21 +166,23 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     variant: "primary",
     classNames: "is-full flex gap-2",
     onClick: handleSave
-  }, /* @__PURE__ */ React.createElement("span", null, "Save"), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("save label")), /* @__PURE__ */ React.createElement("div", {
     className: "grow"
   }), /* @__PURE__ */ React.createElement(Check, {
     className: getSize(5)
   })), /* @__PURE__ */ React.createElement(Button, {
     classNames: "is-full flex gap-2",
     onClick: handleCancel
-  }, /* @__PURE__ */ React.createElement("span", null, "Cancel"), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("cancel label", {
+    ns: "os"
+  })), /* @__PURE__ */ React.createElement("div", {
     className: "grow"
   }), /* @__PURE__ */ React.createElement(X, {
     className: getSize(5)
   })), /* @__PURE__ */ React.createElement(Button, {
     classNames: "is-full flex gap-2",
     onClick: () => onDelete?.(column.id)
-  }, /* @__PURE__ */ React.createElement("span", null, "Delete"), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("delete label")), /* @__PURE__ */ React.createElement("div", {
     className: "grow"
   }), /* @__PURE__ */ React.createElement(Trash, {
     className: getSize(5)
@@ -211,7 +216,7 @@ var headPadding = "pli-2 plb-1.5";
 var gridCellFocusRing = "focus:z-[11] focus:outline outline-2 outline-primary-500 dark:outline-primary-400";
 var tableRoot = ({ fullWidth }, ...etc) => mx2("table-fixed", fullWidth && "is-full", ...etc);
 var groupTh = (_props, ...etc) => mx2("text-start font-medium", flushPadding, ...etc);
-var theadRoot = ({ header }, ...etc) => mx2(header ? "sticky block-start-0 z-10" : "collapse", header && fixedSurface, ...etc);
+var theadRoot = ({ header, stickyHeader }, ...etc) => mx2(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", header && fixedSurface, ...etc);
 var theadTr = (_props, ...etc) => mx2("group", ...etc);
 var theadTh = ({ border }, ...etc) => mx2("relative text-start font-medium select-none truncate", headPadding, border && "border", border && groupBorder, ...etc);
 var theadResizeRoot = (_props, ...etc) => mx2("absolute top-0 pis-1 h-full z-[10] w-[7px] -right-[5px] cursor-col-resize select-none touch-none opacity-20 hover:opacity-100", ...etc);
@@ -488,23 +493,9 @@ var Table = (props) => {
 // packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx
 import { CaretDown as CaretDown2 } from "@phosphor-icons/react";
 import React7, { useCallback as useCallback2, useState as useState3 } from "react";
-import { Popover as Popover2, useTranslation } from "@dxos/react-ui";
+import { Popover as Popover2, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { PopoverCombobox } from "@dxos/react-ui-searchlist";
 import { descriptionText, getSize as getSize2, mx as mx4, 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/Cell/CellCombobox.tsx
 var initialItems = (model, value) => value ? {
   [model.getId(value)]: {
     label: model.getText(value),
@@ -512,7 +503,7 @@ var initialItems = (model, value) => value ? {
   }
 } : {};
 var CellCombobox = ({ model, value, onValueChange }) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = useTranslation2(translationKey);
   const [items, setItems] = useState3(initialItems(model, value));
   const [loading, setLoading] = useState3(false);
   const [searchInputValue, setSearchInputValue] = useState3("");
@@ -541,7 +532,7 @@ var CellCombobox = ({ model, value, onValueChange }) => {
     variant: "ghost",
     classNames: "is-full rounded-none ring-inset"
   }, value ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("span", {
-    className: mx4("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
+    className: mx4("font-normal text-start text-base flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
   }, model.getText(value)), /* @__PURE__ */ React7.createElement(CaretDown2, {
     weight: "bold",
     className: getSize2(3)
@@ -569,11 +560,12 @@ var CellCombobox = ({ model, value, onValueChange }) => {
 };
 
 // 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";
 import { createColumnHelper } from "@tanstack/react-table";
 import format from "date-fns/format";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
-import React8, { useRef as useRef2, useState as useState4 } from "react";
+import React8, { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
 import { getSize as getSize3, mx as mx5 } from "@dxos/react-ui-theme";
 var createColumnBuilder = () => ({
@@ -619,40 +611,55 @@ var StringBuilderCell = (cellContext) => {
     onKeyDown: (event) => event.key === "Enter" && handleSave() || event.key === "Escape" && handleCancel()
   }));
 };
+var parseNumber = (text) => text?.trim().length ? Number(text) : NaN;
+var displayNumber = (value, digits) => value || value === 0 ? value.toLocaleString(void 0, {
+  minimumFractionDigits: digits ?? 0,
+  maximumFractionDigits: digits ?? 2
+}) : "";
 var NumberBuilderCell = (cellContext) => {
-  const { onUpdate, cell, digits } = cellContext.column.columnDef.meta;
+  const { onUpdate, digits } = cellContext.column.columnDef.meta;
   const value = cellContext.getValue();
-  const [text, setText] = useState4();
+  const [text, setText] = useState4(displayNumber(value, digits));
+  const { findPrevFocusable } = useFocusFinders();
+  const ref = useRef2(null);
+  useEffect2(() => {
+    (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
+  }, [
+    digits,
+    value
+  ]);
   const handleEdit = () => {
     if (onUpdate) {
       setText(value !== void 0 ? String(value) : "");
     }
   };
   const handleSave = () => {
-    const value2 = text?.trim().length ? Number(text) : NaN;
-    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(value2) ? void 0 : value2);
-    setText(void 0);
+    const nextValue = parseNumber(text);
+    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(nextValue) ? void 0 : nextValue);
+    setText(displayNumber(nextValue, digits));
+    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
   };
-  const handleCancel = () => {
-    setText(void 0);
+  const _handleCancel = () => {
+    setText(displayNumber(value, digits));
+    ref.current && findPrevFocusable(ref.current)?.focus();
   };
-  if (text !== void 0) {
-    return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.TextInput, {
-      value: text,
-      classNames: [
-        "is-full text-end font-mono"
-      ],
-      onBlur: handleSave,
-      onChange: (event) => setText(event.target.value),
-      onKeyDown: (event) => event.key === "Escape" && handleCancel() || event.key === "Enter" && handleSave()
-    }));
-  }
-  return /* @__PURE__ */ React8.createElement("div", {
-    className: mx5('is-full text-end font-mono empty:after:content-["\xA0"]', textPadding, cell?.classNames),
-    onClick: handleEdit
-  }, value?.toLocaleString(void 0, {
-    minimumFractionDigits: digits ?? 0,
-    maximumFractionDigits: digits ?? 2
+  return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.TextInput, {
+    ref,
+    variant: "subdued",
+    value: text,
+    classNames: [
+      "is-full text-end font-mono",
+      textPadding
+    ],
+    onBlur: handleSave,
+    onFocus: handleEdit,
+    onChange: ({ target: { value: value2 } }) => setText(value2),
+    onKeyDown: (event) => {
+      return (
+        /* (event.key === 'Escape' && handleCancel()) || */
+        event.key === "Enter" && handleSave()
+      );
+    }
   }));
 };
 var RowSelectorBuilderCell = (cellContext) => {
@@ -693,17 +700,7 @@ var ColumnBuilder = class {
   */
   combobox({ label, classNames, model, onUpdate, ...props }) {
     return {
-      ...props,
       minSize: 100,
-      meta: {
-        ...props.meta,
-        model,
-        onUpdate,
-        cell: {
-          classNames,
-          ...props.meta?.cell
-        }
-      },
       header: (column) => {
         return label ?? column.header.id;
       },
@@ -712,6 +709,16 @@ var ColumnBuilder = class {
         return /* @__PURE__ */ React8.createElement("div", {
           className: mx5("truncate", classNames)
         }, cellValue ? model?.getText(cellValue) : "");
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        model,
+        onUpdate,
+        cell: {
+          classNames,
+          ...props.meta?.cell
+        }
       }
     };
   }
@@ -720,16 +727,7 @@ var ColumnBuilder = class {
   */
   string({ label, classNames, onUpdate, ...props } = {}) {
     return {
-      ...props,
       minSize: 100,
-      meta: {
-        ...props.meta,
-        onUpdate,
-        cell: {
-          ...props.meta?.cell,
-          classNames
-        }
-      },
       // TODO(burdon): Default.
       header: (column) => {
         return label ?? column.header.id;
@@ -739,6 +737,15 @@ var ColumnBuilder = class {
         return /* @__PURE__ */ React8.createElement("div", {
           className: mx5("truncate", textPadding, classNames)
         }, value);
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        onUpdate,
+        cell: {
+          ...props.meta?.cell,
+          classNames
+        }
       }
     };
   }
@@ -747,9 +754,11 @@ var ColumnBuilder = class {
   */
   number({ label, minSize, classNames, digits, onUpdate, ...props } = {}) {
     return {
-      ...props,
       size: 100,
       minSize: 100,
+      header: (cell) => label ?? cell.header.id,
+      cell: NumberBuilderCell,
+      ...props,
       meta: {
         ...props.meta,
         onUpdate,
@@ -762,9 +771,7 @@ var ColumnBuilder = class {
           ...props.meta?.cell,
           classNames
         }
-      },
-      header: (cell) => label ?? cell.header.id,
-      cell: NumberBuilderCell
+      }
     };
   }
   /**
@@ -773,16 +780,8 @@ var ColumnBuilder = class {
   // TODO(burdon): Date picker (pluggable renderers?)
   date({ label, format: formatSpec, relative, classNames, ...props } = {}) {
     return {
-      ...props,
       size: 220,
       minSize: 100,
-      meta: {
-        ...props.meta,
-        cell: {
-          ...props.meta?.cell,
-          classNames
-        }
-      },
       header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
@@ -797,6 +796,14 @@ var ColumnBuilder = class {
           console.log(value);
           return null;
         }
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        cell: {
+          ...props.meta?.cell,
+          classNames
+        }
       }
     };
   }
@@ -805,20 +812,8 @@ var ColumnBuilder = class {
   */
   key({ label, tooltip, classNames, ...props } = {}) {
     return {
-      ...props,
       size: 94,
       minSize: 94,
-      meta: {
-        ...props.meta,
-        cell: {
-          ...props.meta?.cell,
-          classNames: [
-            "font-mono",
-            textPadding,
-            classNames
-          ]
-        }
-      },
       header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
@@ -837,6 +832,18 @@ var ColumnBuilder = class {
             void navigator.clipboard.writeText(value.toHex());
           }
         })))));
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        cell: {
+          ...props.meta?.cell,
+          classNames: [
+            "font-mono",
+            textPadding,
+            classNames
+          ]
+        }
       }
     };
   }
@@ -876,9 +883,11 @@ var ColumnBuilder = class {
   */
   switch({ label, classNames, onUpdate, ...props } = {}) {
     return {
-      ...props,
       size: 50,
       minSize: 50,
+      header: (column) => label ?? column.header.id,
+      cell: SwitchBuilderCell,
+      ...props,
       meta: {
         ...props.meta,
         onUpdate,
@@ -889,9 +898,7 @@ var ColumnBuilder = class {
             classNames
           ]
         }
-      },
-      header: (column) => label ?? column.header.id,
-      cell: SwitchBuilderCell
+      }
     };
   }
   /**
@@ -901,7 +908,6 @@ var ColumnBuilder = class {
     const IconOn = on?.Icon ?? Check2;
     const IconOff = off?.Icon ?? X2;
     return {
-      ...props,
       size: size ?? 32,
       header: (column) => /* @__PURE__ */ React8.createElement("div", {
         className: "justify-center"
@@ -919,7 +925,8 @@ var ColumnBuilder = class {
         } else {
           return null;
         }
-      }
+      },
+      ...props
     };
   }
 };
@@ -929,7 +936,6 @@ export {
   ColumnMenu,
   ColumnPanel,
   Table,
-  columnTypes,
   createColumnBuilder,
   currentRow,
   flushPadding,
@@ -950,6 +956,7 @@ export {
   theadResizeThumb,
   theadRoot,
   theadTh,
-  theadTr
+  theadTr,
+  translations_default as translations
 };
 //# sourceMappingURL=index.mjs.map