@eifi1/ui-kit 0.8.1 → 0.9.0

package/dist/components/data-table.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
 import { Fragment as Fragment2, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -34,6 +35,23 @@ import { resolveDataTableLabels } from "./data-table-labels.js";
 import { useKitLabelOverrides, useKitLocale } from "../i18n/kit-labels.js";
 import { Tooltip } from "./tooltip.js";
 import { dirOf, isRtl } from "../lib/direction.js";
+function splitCellProps(props) {
+  if (!props) return { attrs: {} };
+  const {
+    className,
+    style,
+    role: _role,
+    "data-col": _col,
+    ...attrs
+  } = props;
+  return { attrs, className, style };
+}
+function dataAttrsOf(props) {
+  if (!props) return void 0;
+  const out = {};
+  for (const [k, v] of Object.entries(props)) if (k.startsWith("data-") && k !== "data-col") out[k] = v;
+  return out;
+}
 function physicalSwipe(actions, dir) {
   const rtl = dir === "rtl";
   return {
@@ -495,7 +513,7 @@ function DataTable({
     );
     const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1 flex-col", compact ? "gap-1" : "gap-2"), children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        mobilePrimaryCol && /* @__PURE__ */ jsx("div", { className: "font-medium", children: mobilePrimaryCol.cell(row) }),
+        mobilePrimaryCol && /* @__PURE__ */ jsx("div", { ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)), className: "font-medium", children: mobilePrimaryCol.cell(row) }),
         mobileSecondaryColumns.length > 0 && /* @__PURE__ */ jsx(
           "dl",
           {
@@ -505,7 +523,14 @@ function DataTable({
             ),
             children: mobileSecondaryColumns.map((col) => /* @__PURE__ */ jsxs(Fragment2, { children: [
               /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-[var(--text-muted)] self-center", children: col.header }),
-              /* @__PURE__ */ jsx("dd", { className: "min-w-0 text-[var(--text-secondary)] self-center", children: col.cell(row) })
+              /* @__PURE__ */ jsx(
+                "dd",
+                {
+                  ...dataAttrsOf(col.cellProps?.(row)),
+                  className: "min-w-0 text-[var(--text-secondary)] self-center",
+                  children: col.cell(row)
+                }
+              )
             ] }, col.key))
           }
         )
@@ -729,16 +754,20 @@ function DataTable({
                           const headClass = logicalAlign(col.headClassName);
                           const isEndAligned = !!headClass && END_ALIGN.test(headClass);
                           const width = widths[col.key];
-                          return /* @__PURE__ */ jsxs(
+                          const ownHead = splitCellProps(col.headProps);
+                          const pinnedHead = width ? { width, minWidth: width, maxWidth: width } : void 0;
+                          return /* @__PURE__ */ createElement(
                             "th",
                             {
+                              ...ownHead.attrs,
+                              key: col.key,
                               ref: (el) => {
                                 if (el) headRefs.set(col.key, el);
                                 else headRefs.delete(col.key);
                               },
                               scope: "col",
                               "aria-sort": sortable ? sortIdx === 0 ? sorts[0].dir === "asc" ? "ascending" : "descending" : "none" : void 0,
-                              style: width ? { width, minWidth: width, maxWidth: width } : void 0,
+                              style: ownHead.style || pinnedHead ? { ...ownHead.style, ...pinnedHead } : void 0,
                               className: cn(
                                 "relative font-medium align-middle whitespace-nowrap",
                                 compact ? "px-2 py-1" : "px-3 py-2",
@@ -746,93 +775,91 @@ function DataTable({
                                 // Each <th> carries its own bg so the row doesn't render
                                 // transparent over the data rows underneath.
                                 "sticky top-0 z-10 bg-[var(--bg-surface-2)] backdrop-blur-sm",
+                                logicalAlign(ownHead.className),
                                 headClass
-                              ),
-                              children: [
-                                /* @__PURE__ */ jsxs(
-                                  "div",
-                                  {
-                                    className: cn(
-                                      "flex items-center gap-1",
-                                      isEndAligned && "flex-row-reverse"
-                                    ),
-                                    children: [
-                                      /* @__PURE__ */ jsx(Tooltip, { label: sortable && multiSort ? labels.sortHint : void 0, portal: true, children: /* @__PURE__ */ jsxs(
+                              )
+                            },
+                            /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                className: cn(
+                                  "flex items-center gap-1",
+                                  isEndAligned && "flex-row-reverse"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsx(Tooltip, { label: sortable && multiSort ? labels.sortHint : void 0, portal: true, children: /* @__PURE__ */ jsxs(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      onClick: (e) => sortable && toggleSort(col.key, e.shiftKey),
+                                      disabled: !sortable,
+                                      className: cn(
+                                        "flex items-center gap-1 text-start",
+                                        sortable && "hover:text-[var(--text-primary)]"
+                                      ),
+                                      children: [
+                                        /* @__PURE__ */ jsx("span", { children: col.header }),
+                                        sortable && /* @__PURE__ */ jsx(Icon, { className: cn("size-3", active ? "opacity-100" : "opacity-40") }),
+                                        active && sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold leading-none text-brand", children: sortIdx + 1 })
+                                      ]
+                                    }
+                                  ) }),
+                                  filter && /* @__PURE__ */ jsx(
+                                    Popover,
+                                    {
+                                      width: filter.type === "date" ? 420 : void 0,
+                                      labels: { panel: labels.filter },
+                                      trigger: ({ toggle, ref }) => /* @__PURE__ */ jsx(
                                         "button",
                                         {
                                           type: "button",
-                                          onClick: (e) => sortable && toggleSort(col.key, e.shiftKey),
-                                          disabled: !sortable,
+                                          ref,
+                                          onClick: toggle,
+                                          "aria-label": labels.filter,
                                           className: cn(
-                                            "flex items-center gap-1 text-start",
-                                            sortable && "hover:text-[var(--text-primary)]"
+                                            "rounded p-1 transition-colors",
+                                            filterActive ? "bg-[var(--brand-bg)] text-[var(--brand-muted)]" : "text-[var(--text-placeholder)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
                                           ),
-                                          children: [
-                                            /* @__PURE__ */ jsx("span", { children: col.header }),
-                                            sortable && /* @__PURE__ */ jsx(Icon, { className: cn("size-3", active ? "opacity-100" : "opacity-40") }),
-                                            active && sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold leading-none text-brand", children: sortIdx + 1 })
-                                          ]
+                                          children: /* @__PURE__ */ jsx(Filter, { className: "size-3" })
                                         }
-                                      ) }),
-                                      filter && /* @__PURE__ */ jsx(
-                                        Popover,
+                                      ),
+                                      children: () => /* @__PURE__ */ jsx(
+                                        FilterPopover,
                                         {
-                                          width: filter.type === "date" ? 420 : void 0,
-                                          labels: { panel: labels.filter },
-                                          trigger: ({ toggle, ref }) => /* @__PURE__ */ jsx(
-                                            "button",
-                                            {
-                                              type: "button",
-                                              ref,
-                                              onClick: toggle,
-                                              "aria-label": labels.filter,
-                                              className: cn(
-                                                "rounded p-1 transition-colors",
-                                                filterActive ? "bg-[var(--brand-bg)] text-[var(--brand-muted)]" : "text-[var(--text-placeholder)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
-                                              ),
-                                              children: /* @__PURE__ */ jsx(Filter, { className: "size-3" })
-                                            }
-                                          ),
-                                          children: () => /* @__PURE__ */ jsx(
-                                            FilterPopover,
-                                            {
-                                              column: col,
-                                              state: filterState ?? defaultFilterState(filter),
-                                              onChange: (next) => setFilterValue(col.key, next),
-                                              onClear: () => clearFilter(col.key),
-                                              selectOptions: selectOptionsByKey[col.key] ?? [],
-                                              labels,
-                                              locale
-                                            }
-                                          )
+                                          column: col,
+                                          state: filterState ?? defaultFilterState(filter),
+                                          onChange: (next) => setFilterValue(col.key, next),
+                                          onClear: () => clearFilter(col.key),
+                                          selectOptions: selectOptionsByKey[col.key] ?? [],
+                                          labels,
+                                          locale
                                         }
                                       )
-                                    ]
-                                  }
-                                ),
-                                resizable && /* @__PURE__ */ jsx(
-                                  "span",
-                                  {
-                                    role: "separator",
-                                    "aria-orientation": "vertical",
-                                    onPointerDown: (e) => startResize(e, col.key),
-                                    onPointerMove: moveResize,
-                                    onPointerUp: (e) => finishResize(e, true),
-                                    onPointerCancel: (e) => finishResize(e, false),
-                                    onDoubleClick: (e) => {
-                                      e.preventDefault();
-                                      setWidths((w) => {
-                                        const next = { ...w };
-                                        delete next[col.key];
-                                        return next;
-                                      });
-                                    },
-                                    className: "absolute end-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 rtl:translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-[var(--brand-bg-hover)]"
-                                  }
-                                )
-                              ]
-                            },
-                            col.key
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            resizable && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                role: "separator",
+                                "aria-orientation": "vertical",
+                                onPointerDown: (e) => startResize(e, col.key),
+                                onPointerMove: moveResize,
+                                onPointerUp: (e) => finishResize(e, true),
+                                onPointerCancel: (e) => finishResize(e, false),
+                                onDoubleClick: (e) => {
+                                  e.preventDefault();
+                                  setWidths((w) => {
+                                    const next = { ...w };
+                                    delete next[col.key];
+                                    return next;
+                                  });
+                                },
+                                className: "absolute end-0 top-0 z-10 h-full w-1.5 -translate-x-1/2 rtl:translate-x-1/2 cursor-col-resize select-none touch-none hover:bg-[var(--brand-bg-hover)]"
+                              }
+                            )
                           );
                         })
                       ] }) }),
@@ -927,25 +954,29 @@ function DataTable({
                                       ),
                                       visibleColumns.map((col) => {
                                         const width = widths[col.key];
-                                        return /* @__PURE__ */ jsx(
+                                        const own = splitCellProps(col.cellProps?.(row));
+                                        const pinned = width ? { width, minWidth: width, maxWidth: width } : void 0;
+                                        return /* @__PURE__ */ createElement(
                                           "td",
                                           {
+                                            ...own.attrs,
+                                            key: col.key,
                                             "data-col": col.key,
-                                            style: width ? { width, minWidth: width, maxWidth: width } : void 0,
+                                            style: own.style || pinned ? { ...own.style, ...pinned } : void 0,
                                             className: cn(
                                               "align-top",
                                               compact ? "px-2 py-1" : "px-3 py-2",
                                               width && "overflow-hidden text-ellipsis",
+                                              logicalAlign(own.className),
                                               logicalAlign(col.className)
-                                            ),
-                                            children: col === linkColumn && href ? (
-                                              // No `onActivate`: the click is left to bubble to the
-                                              // <tr> handler above, which already owns expand-vs-select.
-                                              // Calling it here as well would toggle the row twice.
-                                              /* @__PURE__ */ jsx(RowLink, { href, className: "block", "data-row-link": "", children: col.cell(row) })
-                                            ) : col.cell(row)
+                                            )
                                           },
-                                          col.key
+                                          col === linkColumn && href ? (
+                                            // No `onActivate`: the click is left to bubble to the
+                                            // <tr> handler above, which already owns expand-vs-select.
+                                            // Calling it here as well would toggle the row twice.
+                                            /* @__PURE__ */ jsx(RowLink, { href, className: "block", "data-row-link": "", children: col.cell(row) })
+                                          ) : col.cell(row)
                                         );
                                       })
                                     ]