@dxos/react-ui-table 0.3.8 → 0.3.9-main.14901ff

package/dist/lib/browser/index.mjs

@@ -202,7 +202,7 @@ var [TableProvider, useUntypedTableContext] = createContext(TABLE_NAME);
 var useTableContext = (consumerName) => useUntypedTableContext(consumerName);
 
 // packages/ui/react-ui-table/src/theme.ts
-import { chromeSurface, fixedSurface, focusRing, groupBorder, hoverColors, mx as mx2 } from "@dxos/react-ui-theme";
+import { chromeSurface, fixedSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx2 } from "@dxos/react-ui-theme";
 var currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
 var selectedRow = "!bg-primary-100 dark:!bg-primary-700";
 var flushPadding = "pli-0 plb-0";
@@ -211,13 +211,13 @@ 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 }, ...etc) => mx2(header ? "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);
 var theadResizeThumb = (_props, ...etc) => mx2("flex group-hover:bg-neutral-700 -ml-[2px] w-[1px] h-full", ...etc);
 var tbodyRoot = (_props, ...etc) => mx2(...etc);
-var tbodyTr = ({ isSelected, isCurrent, canBeCurrent }, ...etc) => mx2("group", isSelected ? selectedRow : isCurrent && currentRow, canBeCurrent && focusRing, canBeCurrent && hoverColors, canBeCurrent && "cursor-pointer rounded", ...etc);
+var tbodyTr = ({ canBeCurrent }, ...etc) => mx2("group", canBeCurrent ? ghostSelectedCurrent : ghostSelected, canBeCurrent && focusRing, canBeCurrent && "cursor-pointer rounded", ...etc);
 var tdRoot = ({ border, isGrid }, ...etc) => mx2("relative", flushPadding, border && "border", border && groupBorder, isGrid && gridCellFocusRing, ...etc);
 var tdContent = (_props, ...etc) => mx2(...etc);
 var tfootRoot = (_props, ...etc) => mx2("sticky block-end-0 z-10", chromeSurface, ...etc);
@@ -270,13 +270,14 @@ var TableBody = ({ rows }) => {
     return /* @__PURE__ */ React3.createElement("tr", {
       key: keyAccessor ? keyAccessor(row.original) : row.id,
       className: tbodyTr({
-        isSelected,
-        isCurrent,
         canBeCurrent
       }),
       ...isCurrent && {
         "aria-current": "location"
       },
+      ...isSelected && {
+        "aria-selected": "true"
+      },
       ...canBeCurrent && {
         tabIndex: 0,
         onClick: () => {
@@ -371,7 +372,7 @@ TableHead.displayName = TABLE_HEAD_NAME;
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 var Table = (props) => {
-  const { role, data = [], columns = [], onColumnResize, columnVisibility, header = true, footer, rowsSelectable, fullWidth, debug, onDataSelectionChange } = props;
+  const { role, data = [], columns = [], onColumnResize, columnVisibility, header = true, footer, rowsSelectable, fullWidth, debug, onDataSelectionChange, classNames } = props;
   const TableProvider2 = TableProvider;
   const [rowSelection = {}, directlySetRowSelection] = useControllableState({
     prop: props.rowSelection,
@@ -461,7 +462,7 @@ var Table = (props) => {
     isGrid: role === "grid" || role === "treegrid"
   }, /* @__PURE__ */ React6.createElement("table", {
     role,
-    className: tableRoot(props),
+    className: tableRoot(props, classNames),
     ...!fullWidth && {
       style: {
         width: table.getTotalSize()
@@ -572,25 +573,20 @@ 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 defaultsDeep from "lodash.defaultsdeep";
 import React8, { 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";
-import { stripUndefinedValues } from "@dxos/util";
 var createColumnBuilder = () => ({
   helper: createColumnHelper(),
   builder: new ColumnBuilder()
 });
-var defaults = (options, ...sources) => {
-  return stripUndefinedValues(defaultsDeep({}, options, ...sources));
-};
 var ComboboxBuilderCell = (cellContext) => {
   const { model, onUpdate } = cellContext.column.columnDef.meta;
-  return /* @__PURE__ */ React8.createElement(CellCombobox, {
+  return model ? /* @__PURE__ */ React8.createElement(CellCombobox, {
     model,
     value: cellContext.getValue(),
     onValueChange: (value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)
-  });
+  }) : null;
 };
 var StringBuilderCell = (cellContext) => {
   const { onUpdate } = cellContext.column.columnDef.meta;
@@ -696,13 +692,16 @@ var ColumnBuilder = class {
   * Combobox value
   */
   combobox({ label, classNames, model, onUpdate, ...props }) {
-    return defaults(props, {
+    return {
+      ...props,
       minSize: 100,
       meta: {
+        ...props.meta,
         model,
         onUpdate,
         cell: {
-          classNames
+          classNames,
+          ...props.meta?.cell
         }
       },
       header: (column) => {
@@ -714,17 +713,20 @@ var ColumnBuilder = class {
           className: mx5("truncate", classNames)
         }, cellValue ? model?.getText(cellValue) : "");
       }
-    });
+    };
   }
   /**
   * String formats.
   */
   string({ label, classNames, onUpdate, ...props } = {}) {
-    return defaults(props, {
+    return {
+      ...props,
       minSize: 100,
       meta: {
+        ...props.meta,
         onUpdate,
         cell: {
+          ...props.meta?.cell,
           classNames
         }
       },
@@ -738,39 +740,46 @@ var ColumnBuilder = class {
           className: mx5("truncate", textPadding, classNames)
         }, value);
       }
-    });
+    };
   }
   /**
   * Number formats.
   */
   number({ label, minSize, classNames, digits, onUpdate, ...props } = {}) {
-    return defaults(props, {
+    return {
+      ...props,
       size: 100,
       minSize: 100,
       meta: {
+        ...props.meta,
         onUpdate,
         digits,
         header: {
-          classNames: "text-end"
+          classNames: "text-end",
+          ...props.meta?.header
         },
         cell: {
+          ...props.meta?.cell,
           classNames
         }
       },
       header: (cell) => label ?? cell.header.id,
       cell: NumberBuilderCell
-    });
+    };
   }
   /**
   * Date formats.
   */
   // TODO(burdon): Date picker (pluggable renderers?)
   date({ label, format: formatSpec, relative, classNames, ...props } = {}) {
-    return defaults(props, {
+    return {
+      ...props,
       size: 220,
       minSize: 100,
       meta: {
+        ...props.meta,
         cell: {
+          ...props.meta?.cell,
           classNames
         }
       },
@@ -789,20 +798,24 @@ var ColumnBuilder = class {
           return null;
         }
       }
-    });
+    };
   }
   /**
   * PublicKey with tooltip.
   */
-  key({ label, tooltip, ...props } = {}) {
-    return defaults(props, {
+  key({ label, tooltip, classNames, ...props } = {}) {
+    return {
+      ...props,
       size: 94,
       minSize: 94,
       meta: {
+        ...props.meta,
         cell: {
+          ...props.meta?.cell,
           classNames: [
             "font-mono",
-            textPadding
+            textPadding,
+            classNames
           ]
         }
       },
@@ -816,21 +829,21 @@ var ColumnBuilder = class {
         if (!tooltip) {
           return element;
         }
-        return /* @__PURE__ */ React8.createElement(Tooltip.Provider, null, /* @__PURE__ */ React8.createElement(Tooltip.Root, null, /* @__PURE__ */ React8.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React8.createElement(Tooltip.Content, {
+        return /* @__PURE__ */ React8.createElement(Tooltip.Provider, null, /* @__PURE__ */ React8.createElement(Tooltip.Root, null, /* @__PURE__ */ React8.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React8.createElement(Tooltip.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip.Content, {
           side: "right"
         }, /* @__PURE__ */ React8.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React8.createElement(ClipboardText, {
           onClick: (ev) => {
             ev.stopPropagation();
             void navigator.clipboard.writeText(value.toHex());
           }
-        }))));
+        })))));
       }
-    });
+    };
   }
   /**
   * Row selector
   */
-  selectRow({ label, classNames, onUpdate, id = "selectRow", ...props } = {}) {
+  selectRow({ classNames, onUpdate, id = "selectRow" } = {}) {
     return {
       id,
       size: 32,
@@ -862,12 +875,15 @@ var ColumnBuilder = class {
   * Switch
   */
   switch({ label, classNames, onUpdate, ...props } = {}) {
-    return defaults(props, {
+    return {
+      ...props,
       size: 50,
       minSize: 50,
       meta: {
+        ...props.meta,
         onUpdate,
         cell: {
+          ...props.meta?.cell,
           classNames: [
             textPadding,
             classNames
@@ -876,7 +892,7 @@ var ColumnBuilder = class {
       },
       header: (column) => label ?? column.header.id,
       cell: SwitchBuilderCell
-    });
+    };
   }
   /**
   * Icon based on boolean value.
@@ -884,7 +900,8 @@ var ColumnBuilder = class {
   icon({ label, size, on, off, ...props } = {}) {
     const IconOn = on?.Icon ?? Check2;
     const IconOff = off?.Icon ?? X2;
-    return defaults(props, {
+    return {
+      ...props,
       size: size ?? 32,
       header: (column) => /* @__PURE__ */ React8.createElement("div", {
         className: "justify-center"
@@ -903,7 +920,7 @@ var ColumnBuilder = class {
           return null;
         }
       }
-    });
+    };
   }
 };
 export {
@@ -933,6 +950,7 @@ export {
   theadResizeThumb,
   theadRoot,
   theadTh,
-  theadTr
+  theadTr,
+  translations_default as translations
 };
 //# sourceMappingURL=index.mjs.map