@portnet/ui 6.0.2 → 6.0.3

package/dist/esm/v2/patterns/DataGrid.js

@@ -1,12 +1,3 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import * as React from "react";
 import Box from "@mui/material/Box";
 import Table from "@mui/material/Table";
@@ -49,6 +40,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *     masks the data column(s) it covers.
  *   - The actions column header carries a visually-hidden accessible
  *     name from labels.actionsHeader (default "Actions").
+ *   - The cell CONTAINS its own click and keydown: an action must not also
+ *     fire `onRowClick`. See the note at ROW_ACTIONS_CELL_SX.
  *
  * Mobile card view (R1 mobile, opt-in):
  *   - When `renderMobileCard` is provided AND viewport is below
@@ -69,10 +62,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * strings are treated as "not provided". Charter R-DG + WCAG 2.2 AA.
  */
 function useAriaLabelWarn(ariaLabel, labelsTableAria) {
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (process.env["NODE_ENV"] === "production") return;
-    var hasAriaLabel = typeof ariaLabel === "string" && ariaLabel.trim().length > 0;
-    var hasLabelsAria = typeof labelsTableAria === "string" && labelsTableAria.trim().length > 0;
+    const hasAriaLabel = typeof ariaLabel === "string" && ariaLabel.trim().length > 0;
+    const hasLabelsAria = typeof labelsTableAria === "string" && labelsTableAria.trim().length > 0;
     if (hasAriaLabel || hasLabelsAria) return;
 
     // eslint-disable-next-line no-console
@@ -88,8 +81,36 @@ function useAriaLabelWarn(ariaLabel, labelsTableAria) {
  * position:sticky right:0 glues the overlay's positioned ancestor to the
  * visible right edge during horizontal scroll and provides a focus
  * container. The strict 0 width makes the cell contribute nothing to
- * layout; overflow:visible lets the absolute overlay render outside it. */
-var ROW_ACTIONS_CELL_SX = Object.freeze({
+ * layout; overflow:visible lets the absolute overlay render outside it.
+ *
+ * ─── THE CELL CONTAINS ITS OWN EVENTS, AND IT MUST ───────────────────
+ *
+ * The row carries `onClick={() => onRowClick(row)}` and a keydown handler,
+ * and this cell is INSIDE it. Without containment, activating a row action
+ * also triggers the row click — on a listing that is §Row Interaction's
+ * preview drawer, so the user gets the action AND a drawer opening over it.
+ *
+ * It cannot be fixed at the action level. `buildRowActions` /
+ * `buildRowActionMenu` (./rowActions) describe an action as
+ * `onClick: (row: T) => void` — the DOM event is deliberately not exposed,
+ * because a business descriptor has no business knowing about propagation.
+ * `OverflowMenu`'s trigger is in the same position. So the only place that
+ * can hold this invariant for EVERY shape — the kebab, the icon row, and any
+ * host-written `rowActions` renderer — is the cell.
+ *
+ * Same treatment as the selection checkbox cell in the body below, which has
+ * always stopped both events for exactly this reason. Containing them here
+ * makes the two consistent instead of leaving one of the two interactive
+ * cells of a row unguarded.
+ *
+ * `stopPropagation` and NOT `preventDefault`: the buttons' own activation,
+ * including Enter/Space on a focused action, is untouched — only the bubble
+ * to the row is cut.
+ *
+ * Surfaced by addm-fe's Area 3 audit: both of its listings had hand-written
+ * their icon row specifically to call `e.stopPropagation()` per button, which
+ * is what made adopting `buildRowActions` look like a regression. */
+const ROW_ACTIONS_CELL_SX = Object.freeze({
   position: "sticky",
   right: 0,
   zIndex: 1,
@@ -101,7 +122,7 @@ var ROW_ACTIONS_CELL_SX = Object.freeze({
   borderBottom: "1px solid var(--border)",
   overflow: "visible"
 });
-var ROW_ACTIONS_HEAD_CELL_SX = Object.freeze({
+const ROW_ACTIONS_HEAD_CELL_SX = Object.freeze({
   position: "sticky",
   right: 0,
   top: 0,
@@ -118,7 +139,7 @@ var ROW_ACTIONS_HEAD_CELL_SX = Object.freeze({
  * auto-generated actions column header an accessible name without adding
  * visible text. clip-rect keeps it painted into the a11y tree while
  * removing it from visual layout. */
-var VISUALLY_HIDDEN_SX = Object.freeze({
+const VISUALLY_HIDDEN_SX = Object.freeze({
   position: "absolute",
   width: "1px",
   height: "1px",
@@ -133,7 +154,7 @@ var VISUALLY_HIDDEN_SX = Object.freeze({
 /* R2 — Overlay floats over the row's right edge. Invisible by default,
  * visible on hover / focus-within / coarse pointer. The parent
  * ROW_ACTIONS_CELL_SX (position:sticky) is the containing block. */
-var ROW_ACTIONS_OVERLAY_SX = Object.freeze({
+const ROW_ACTIONS_OVERLAY_SX = Object.freeze({
   position: "absolute",
   right: "var(--s-3)",
   top: "50%",
@@ -164,14 +185,14 @@ var ROW_ACTIONS_OVERLAY_SX = Object.freeze({
 /* R2 — Filler cells stay at width:0 so they don't take any proportional
  * residual under tableLayout:auto. (Local width:0 variants — distinct
  * from _dataGridShared's exports, which are not imported here.) */
-var FILLER_CELL_SX = Object.freeze({
+const FILLER_CELL_SX = Object.freeze({
   padding: 0,
   width: 0,
   minWidth: 0,
   maxWidth: 0,
   borderBottom: "1px solid var(--border)"
 });
-var FILLER_HEAD_CELL_SX = Object.freeze({
+const FILLER_HEAD_CELL_SX = Object.freeze({
   padding: 0,
   width: 0,
   minWidth: 0,
@@ -187,7 +208,7 @@ var FILLER_HEAD_CELL_SX = Object.freeze({
  * focus-within, and always revealed while itself focus-visible so it stays
  * Tab-reachable. Absolutely positioned in the header cell's inline-start
  * padding; background matches the header so it masks the sliver it overlaps. */
-var REORDER_GRIP_SX = Object.freeze({
+const REORDER_GRIP_SX = Object.freeze({
   position: "absolute",
   insetInlineStart: 2,
   top: "50%",
@@ -226,13 +247,13 @@ var REORDER_GRIP_SX = Object.freeze({
 
 /* ── Mobile card view SX (R1 mobile) ─────────────────────────────── */
 
-var CARD_STACK_SX = Object.freeze({
+const CARD_STACK_SX = Object.freeze({
   display: "flex",
   flexDirection: "column",
   gap: "var(--s-2)",
   padding: "var(--s-3)"
 });
-var CARD_BASE_SX = Object.freeze({
+const CARD_BASE_SX = Object.freeze({
   background: "var(--surface)",
   border: "1px solid var(--border)",
   borderRadius: "var(--r-md)",
@@ -240,7 +261,8 @@ var CARD_BASE_SX = Object.freeze({
   transition: "background 60ms ease, border-color 60ms ease",
   minHeight: 44
 });
-var CARD_CLICKABLE_SX = Object.freeze(_objectSpread(_objectSpread({}, CARD_BASE_SX), {}, {
+const CARD_CLICKABLE_SX = Object.freeze({
+  ...CARD_BASE_SX,
   cursor: "pointer",
   "&:hover": {
     background: "var(--bg-hover)"
@@ -259,8 +281,8 @@ var CARD_CLICKABLE_SX = Object.freeze(_objectSpread(_objectSpread({}, CARD_BASE_
     background: "var(--accent-soft)",
     borderColor: "var(--accent)"
   }
-}));
-var CARD_SKELETON_SX = Object.freeze({
+});
+const CARD_SKELETON_SX = Object.freeze({
   height: 90,
   background: "var(--bg-subtle)",
   borderRadius: "var(--r-md)",
@@ -269,24 +291,24 @@ var CARD_SKELETON_SX = Object.freeze({
     animation: "none"
   }
 });
-var CARD_EMPTY_WRAPPER_SX = Object.freeze({
+const CARD_EMPTY_WRAPPER_SX = Object.freeze({
   padding: "var(--s-6) var(--s-4)"
 });
 
 /* R2 — Default min-width contribution for a column without an explicit
  * `width`. 120 px is a sensible floor for a typical data cell. */
-var UNSIZED_COL_MIN_DEFAULT = 120;
+const UNSIZED_COL_MIN_DEFAULT = 120;
 
 /* R2 — Upper bound on how much ANY single column may contribute to the
  * table's hard min-width. A column may DECLARE a large preferred width and
  * tableLayout:auto grows it toward that when the container has room, but
  * its preferred width must not drag the table's min-width past this cap
  * (below which horizontal scroll kicks in). */
-var COL_MINWIDTH_CAP = 220;
+const COL_MINWIDTH_CAP = 220;
 function widthToNumber(w) {
   if (typeof w === "number" && Number.isFinite(w)) return w;
   if (typeof w === "string") {
-    var parsed = parseFloat(w);
+    const parsed = parseFloat(w);
     if (!Number.isNaN(parsed)) return parsed;
   }
   return 0;
@@ -303,158 +325,113 @@ function readCellValue(row, key) {
 /* Default getRowId (`(r) => r.id`). Typed against `unknown` so the single
  * assertion is legal; `(unknown) => RowId` is assignable to the declared
  * `(row: T) => RowId` by parameter contravariance. */
-var defaultGetRowId = function defaultGetRowId(row) {
-  return row.id;
-};
-function DataGrid(_ref) {
-  var _ref$rows = _ref.rows,
-    rows = _ref$rows === void 0 ? [] : _ref$rows,
-    _ref$columns = _ref.columns,
-    rawColumns = _ref$columns === void 0 ? [] : _ref$columns,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    _ref$error = _ref.error,
-    error = _ref$error === void 0 ? null : _ref$error,
-    _ref$sort = _ref.sort,
-    sort = _ref$sort === void 0 ? [] : _ref$sort,
-    onSortChange = _ref.onSortChange,
-    selection = _ref.selection,
-    onSelectionChange = _ref.onSelectionChange,
-    pagination = _ref.pagination,
-    emptyState = _ref.emptyState,
-    filteredEmptyState = _ref.filteredEmptyState,
-    errorState = _ref.errorState,
-    _ref$getRowId = _ref.getRowId,
-    getRowId = _ref$getRowId === void 0 ? defaultGetRowId : _ref$getRowId,
-    onRowClick = _ref.onRowClick,
-    rowFlashId = _ref.rowFlashId,
-    activeRowId = _ref.activeRowId,
-    rowActions = _ref.rowActions,
-    hiddenColumns = _ref.hiddenColumns,
-    _ref$filtered = _ref.filtered,
-    filtered = _ref$filtered === void 0 ? false : _ref$filtered,
-    _ref$density = _ref.density,
-    density = _ref$density === void 0 ? "comfortable" : _ref$density,
-    ariaLabel = _ref.ariaLabel,
-    _ref$locale = _ref.locale,
-    locale = _ref$locale === void 0 ? "fr-FR" : _ref$locale,
-    labels = _ref.labels,
-    _ref$maxBodyHeight = _ref.maxBodyHeight,
-    maxBodyHeight = _ref$maxBodyHeight === void 0 ? DEFAULT_MAX_BODY_HEIGHT : _ref$maxBodyHeight,
-    _ref$resizable = _ref.resizable,
-    resizable = _ref$resizable === void 0 ? false : _ref$resizable,
-    columnWidths = _ref.columnWidths,
-    onColumnWidthsChange = _ref.onColumnWidthsChange,
-    _ref$reorderable = _ref.reorderable,
-    reorderable = _ref$reorderable === void 0 ? false : _ref$reorderable,
-    columnOrder = _ref.columnOrder,
-    onColumnOrderChange = _ref.onColumnOrderChange,
-    renderMobileCard = _ref.renderMobileCard,
-    _ref$mobileBreakpoint = _ref.mobileBreakpoint,
-    mobileBreakpoint = _ref$mobileBreakpoint === void 0 ? "sm" : _ref$mobileBreakpoint;
+const defaultGetRowId = row => row.id;
+function DataGrid({
+  rows = [],
+  columns: rawColumns = [],
+  loading = false,
+  error = null,
+  sort = [],
+  onSortChange,
+  selection,
+  onSelectionChange,
+  pagination,
+  emptyState,
+  filteredEmptyState,
+  errorState,
+  getRowId = defaultGetRowId,
+  onRowClick,
+  rowFlashId,
+  activeRowId,
+  rowActions,
+  hiddenColumns,
+  filtered = false,
+  density = "comfortable",
+  ariaLabel,
+  locale = "fr-FR",
+  labels,
+  maxBodyHeight = DEFAULT_MAX_BODY_HEIGHT,
+  resizable = false,
+  columnWidths,
+  onColumnWidthsChange,
+  reorderable = false,
+  columnOrder,
+  onColumnOrderChange,
+  renderMobileCard,
+  mobileBreakpoint = "sm"
+}) {
   // WCAG 1.3.1 / 4.1.2 — dev guard: warn once on mount when no contextual
   // table name has been provided by the caller.
-  useAriaLabelWarn(ariaLabel, labels === null || labels === void 0 ? void 0 : labels.tableAria);
-  var L = React.useMemo(function () {
-    return mergeLabels(labels);
-  }, [labels]);
-  var tableAria = ariaLabel != null ? ariaLabel : L.tableAria;
-  var showSkeleton = useDelayedFlag(loading);
+  useAriaLabelWarn(ariaLabel, labels?.tableAria);
+  const L = React.useMemo(() => mergeLabels(labels), [labels]);
+  const tableAria = ariaLabel != null ? ariaLabel : L.tableAria;
+  const showSkeleton = useDelayedFlag(loading);
   useColumnsStabilityWarn(rawColumns);
 
   // R1 mobile — detect xs viewport. Switch to card view only when the host
   // opted in by passing renderMobileCard.
-  var theme = useTheme();
-  var isBelowBreakpoint = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
-  var useCardView = isBelowBreakpoint && typeof renderMobileCard === "function";
-  var orderedColumns = React.useMemo(function () {
-    return applyColumnOrder(rawColumns, columnOrder);
-  }, [rawColumns, columnOrder]);
-  var hiddenSet = React.useMemo(function () {
-    return hiddenColumns instanceof Set ? hiddenColumns : new Set(hiddenColumns || []);
-  }, [hiddenColumns]);
-  var columns = React.useMemo(function () {
-    return orderedColumns.filter(function (c) {
-      return !hiddenSet.has(c.key);
-    });
-  }, [orderedColumns, hiddenSet]);
-  var resize = useColumnResize(columnWidths, onColumnWidthsChange);
-  var reorder = useColumnReorder(columns, columnOrder, onColumnOrderChange, {
+  const theme = useTheme();
+  const isBelowBreakpoint = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
+  const useCardView = isBelowBreakpoint && typeof renderMobileCard === "function";
+  const orderedColumns = React.useMemo(() => applyColumnOrder(rawColumns, columnOrder), [rawColumns, columnOrder]);
+  const hiddenSet = React.useMemo(() => hiddenColumns instanceof Set ? hiddenColumns : new Set(hiddenColumns || []), [hiddenColumns]);
+  const columns = React.useMemo(() => orderedColumns.filter(c => !hiddenSet.has(c.key)), [orderedColumns, hiddenSet]);
+  const resize = useColumnResize(columnWidths, onColumnWidthsChange);
+  const reorder = useColumnReorder(columns, columnOrder, onColumnOrderChange, {
     resizeIsActive: resize.isResizing
   });
 
   // DG-R1 — after a keyboard reorder the moved column's grip is re-rendered at
   // a new position and the browser drops focus; re-focus it so repeated Arrow
   // presses keep moving the same column. Keyed on the host-controlled order.
-  var pendingReorderFocusRef = React.useRef(null);
-  React.useEffect(function () {
-    var key = pendingReorderFocusRef.current;
+  const pendingReorderFocusRef = React.useRef(null);
+  React.useEffect(() => {
+    const key = pendingReorderFocusRef.current;
     if (!key || typeof document === "undefined") return;
     pendingReorderFocusRef.current = null;
-    var escaped = typeof window !== "undefined" && window.CSS && typeof window.CSS.escape === "function" ? window.CSS.escape(key) : key;
-    var el = document.querySelector("[data-reorder-grip=\"".concat(escaped, "\"]"));
+    const escaped = typeof window !== "undefined" && window.CSS && typeof window.CSS.escape === "function" ? window.CSS.escape(key) : key;
+    const el = document.querySelector(`[data-reorder-grip="${escaped}"]`);
     if (el instanceof HTMLElement) el.focus();
   }, [columnOrder]);
-  var showCheckbox = !!onSelectionChange;
-  var hasRowActions = typeof rowActions === "function";
-  var colCount = columns.length + (showCheckbox ? 1 : 0) + 1 + (hasRowActions ? 1 : 0);
-  var sortable = function sortable(col) {
-    return col.sortable !== false && !!col.key && !!onSortChange;
-  };
-  var selectedSet = React.useMemo(function () {
-    return selection instanceof Set ? selection : new Set(selection || []);
-  }, [selection]);
-  var allSelected = rows.length > 0 && rows.every(function (r) {
-    return selectedSet.has(getRowId(r));
-  });
-  var someSelected = !allSelected && rows.some(function (r) {
-    return selectedSet.has(getRowId(r));
-  });
-  var toggleAll = function toggleAll() {
+  const showCheckbox = !!onSelectionChange;
+  const hasRowActions = typeof rowActions === "function";
+  const colCount = columns.length + (showCheckbox ? 1 : 0) + 1 + (hasRowActions ? 1 : 0);
+  const sortable = col => col.sortable !== false && !!col.key && !!onSortChange;
+  const selectedSet = React.useMemo(() => selection instanceof Set ? selection : new Set(selection || []), [selection]);
+  const allSelected = rows.length > 0 && rows.every(r => selectedSet.has(getRowId(r)));
+  const someSelected = !allSelected && rows.some(r => selectedSet.has(getRowId(r)));
+  const toggleAll = () => {
     if (!onSelectionChange) return;
     if (allSelected) onSelectionChange(new Set());else onSelectionChange(new Set(rows.map(getRowId)));
   };
-  var toggleRow = function toggleRow(id) {
+  const toggleRow = id => {
     if (!onSelectionChange) return;
-    var next = new Set(selectedSet);
-    if (next.has(id)) next["delete"](id);else next.add(id);
+    const next = new Set(selectedSet);
+    if (next.has(id)) next.delete(id);else next.add(id);
     onSelectionChange(next);
   };
-  var handleRowKeyDown = function handleRowKeyDown(row) {
-    return function (e) {
-      if (!onRowClick) return;
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        onRowClick(row);
-      }
-    };
+  const handleRowKeyDown = row => e => {
+    if (!onRowClick) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onRowClick(row);
+    }
   };
-  var scrollContainerSx = React.useMemo(function () {
-    return {
-      overflow: "auto",
-      maxHeight: maxBodyHeight,
-      width: "100%"
-    };
-  }, [maxBodyHeight]);
+  const scrollContainerSx = React.useMemo(() => ({
+    overflow: "auto",
+    maxHeight: maxBodyHeight,
+    width: "100%"
+  }), [maxBodyHeight]);
 
   /* R2 — Computed table min-width. Each column's contribution is clamped
    * to COL_MINWIDTH_CAP; unsized columns contribute UNSIZED_COL_MIN_DEFAULT;
    * the checkbox column adds ~48px. The rowActions cell contributes 0. */
-  var tableMinWidth = React.useMemo(function () {
-    var sum = 0;
-    var _iterator = _createForOfIteratorHelper(columns),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var col = _step.value;
-        var w = widthToNumber(col.width);
-        var contribution = w > 0 ? Math.min(w, COL_MINWIDTH_CAP) : UNSIZED_COL_MIN_DEFAULT;
-        sum += contribution;
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
+  const tableMinWidth = React.useMemo(() => {
+    let sum = 0;
+    for (const col of columns) {
+      const w = widthToNumber(col.width);
+      const contribution = w > 0 ? Math.min(w, COL_MINWIDTH_CAP) : UNSIZED_COL_MIN_DEFAULT;
+      sum += contribution;
     }
     if (showCheckbox) sum += 48;
     return sum;
@@ -463,13 +440,12 @@ function DataGrid(_ref) {
   // R2 — tableLayout:"auto" + computed minWidth. (SxProps-typed so the
   // tableLayout literal stays typed; the density base is narrowed to a
   // SystemStyleObject at the spread to avoid the fn/array arms of SxProps.)
-  var tableSx = React.useMemo(function () {
-    return _objectSpread(_objectSpread({}, TABLE_BY_DENSITY[density] || TABLE_BY_DENSITY.comfortable), {}, {
-      width: "100%",
-      minWidth: tableMinWidth,
-      tableLayout: "auto"
-    });
-  }, [density, tableMinWidth]);
+  const tableSx = React.useMemo(() => ({
+    ...(TABLE_BY_DENSITY[density] || TABLE_BY_DENSITY.comfortable),
+    width: "100%",
+    minWidth: tableMinWidth,
+    tableLayout: "auto"
+  }), [density, tableMinWidth]);
 
   /* DG-1 (perf) — the desktop body renders EVERY row (no virtualization), so
    * building the cell sx inline per row × per column allocated N×M fresh style
@@ -480,37 +456,34 @@ function DataGrid(_ref) {
    * widths (the latter only changes during an active resize drag).
    * --text-body (14px) is the explicit inheritance that replaced a dangling
    * `var(--text-fs)` token typo (no fallback). */
-  var columnCellSx = React.useMemo(function () {
-    var byKey = new Map();
-    var _iterator2 = _createForOfIteratorHelper(columns),
-      _step2;
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var _ref2;
-        var col = _step2.value;
-        var effectiveWidth = (_ref2 = resize.liveWidths && resize.liveWidths[col.key]) !== null && _ref2 !== void 0 ? _ref2 : col.width;
-        byKey.set(col.key, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-          fontSize: "var(--text-body)",
-          whiteSpace: col.wrap ? "normal" : "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis"
-        }, col.mono ? {
+  const columnCellSx = React.useMemo(() => {
+    const byKey = new Map();
+    for (const col of columns) {
+      const effectiveWidth = (resize.liveWidths && resize.liveWidths[col.key]) ?? col.width;
+      byKey.set(col.key, {
+        fontSize: "var(--text-body)",
+        whiteSpace: col.wrap ? "normal" : "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        ...(col.mono ? {
           fontFamily: "var(--font-mono)"
-        } : {}), col.numeric || col.mono ? {
+        } : {}),
+        ...(col.numeric || col.mono ? {
           fontVariantNumeric: "tabular-nums"
-        } : {}), effectiveWidth != null ? {
+        } : {}),
+        ...(effectiveWidth != null ? {
           width: effectiveWidth
-        } : {}), col.wrap ? {
+        } : {}),
+        // When a column wraps, allow long unbroken tokens to break.
+        ...(col.wrap ? {
           overflowWrap: "anywhere",
           wordBreak: "break-word"
-        } : {}), col.maxWidth != null ? {
+        } : {}),
+        ...(col.maxWidth != null ? {
           maxWidth: col.maxWidth
-        } : {}), col.hoverOnly ? HOVER_ONLY_CELL_SX : {}));
-      }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
+        } : {}),
+        ...(col.hoverOnly ? HOVER_ONLY_CELL_SX : {})
+      });
     }
     return byKey;
   }, [columns, resize.liveWidths]);
@@ -518,7 +491,7 @@ function DataGrid(_ref) {
   /* ── Mobile card view body (R1 mobile) ─────────────────────────
    * Built only when useCardView is true. `renderCard` is the narrowed,
    * guaranteed-present renderer passed in from the return site. */
-  var renderCardBody = function renderCardBody(renderCard) {
+  const renderCardBody = renderCard => {
     if (showSkeleton) {
       return /*#__PURE__*/_jsx(Box, {
         role: "list",
@@ -527,12 +500,10 @@ function DataGrid(_ref) {
         sx: CARD_STACK_SX,
         children: Array.from({
           length: 6
-        }, function (_, i) {
-          return /*#__PURE__*/_jsx(Box, {
-            "aria-hidden": "true",
-            sx: CARD_SKELETON_SX
-          }, "sk-".concat(i));
-        })
+        }, (_, i) => /*#__PURE__*/_jsx(Box, {
+          "aria-hidden": "true",
+          sx: CARD_SKELETON_SX
+        }, `sk-${i}`))
       });
     }
     if (error) {
@@ -552,15 +523,15 @@ function DataGrid(_ref) {
       "aria-label": tableAria,
       "aria-busy": loading || undefined,
       sx: CARD_STACK_SX,
-      children: rows.map(function (row) {
-        var id = getRowId(row);
-        var isSelected = selectedSet.has(id);
-        var isActive = activeRowId !== undefined && activeRowId !== null && id === activeRowId;
-        var flash = rowFlashId === id;
-        var clickable = !!onRowClick;
-        var ctx = {
-          isActive: isActive,
-          isSelected: isSelected
+      children: rows.map(row => {
+        const id = getRowId(row);
+        const isSelected = selectedSet.has(id);
+        const isActive = activeRowId !== undefined && activeRowId !== null && id === activeRowId;
+        const flash = rowFlashId === id;
+        const clickable = !!onRowClick;
+        const ctx = {
+          isActive,
+          isSelected
         };
         return /*#__PURE__*/_jsx(Box, {
           role: clickable ? "button" : "listitem",
@@ -568,9 +539,7 @@ function DataGrid(_ref) {
           "data-selected": isSelected || undefined,
           "data-active": isActive || undefined,
           className: flash ? "pui-row-updated" : undefined,
-          onClick: clickable ? function () {
-            return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
-          } : undefined,
+          onClick: clickable ? () => onRowClick?.(row) : undefined,
           onKeyDown: clickable ? handleRowKeyDown(row) : undefined,
           sx: clickable ? CARD_CLICKABLE_SX : CARD_BASE_SX,
           children: renderCard(row, ctx)
@@ -580,19 +549,17 @@ function DataGrid(_ref) {
   };
 
   /* ── Table body (desktop / no card opt-in) ─────────────────── */
-  var body;
+  let body;
   if (showSkeleton) {
     body = /*#__PURE__*/_jsx(TableBody, {
       "aria-busy": "true",
       children: Array.from({
         length: 6
-      }, function (_, i) {
-        return /*#__PURE__*/_jsx(SkeletonRow, {
-          cols: columns.length,
-          withCheckbox: showCheckbox,
-          withActions: hasRowActions
-        }, "sk-".concat(i));
-      })
+      }, (_, i) => /*#__PURE__*/_jsx(SkeletonRow, {
+        cols: columns.length,
+        withCheckbox: showCheckbox,
+        withActions: hasRowActions
+      }, `sk-${i}`))
     });
   } else if (error) {
     body = /*#__PURE__*/_jsx(TableBody, {
@@ -624,20 +591,18 @@ function DataGrid(_ref) {
   } else {
     body = /*#__PURE__*/_jsx(TableBody, {
       "aria-busy": loading || undefined,
-      children: rows.map(function (row) {
-        var id = getRowId(row);
-        var isSelected = selectedSet.has(id);
-        var isActive = activeRowId !== undefined && activeRowId !== null && id === activeRowId;
-        var flash = rowFlashId === id;
-        var clickable = !!onRowClick;
+      children: rows.map(row => {
+        const id = getRowId(row);
+        const isSelected = selectedSet.has(id);
+        const isActive = activeRowId !== undefined && activeRowId !== null && id === activeRowId;
+        const flash = rowFlashId === id;
+        const clickable = !!onRowClick;
         return /*#__PURE__*/_jsxs(TableRow, {
           hover: true,
           "data-selected": isSelected || undefined,
           "data-active": isActive || undefined,
           className: flash ? "pui-row-updated" : undefined,
-          onClick: clickable ? function () {
-            return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
-          } : undefined,
+          onClick: clickable ? () => onRowClick?.(row) : undefined,
           onKeyDown: clickable ? handleRowKeyDown(row) : undefined,
           tabIndex: clickable ? 0 : undefined,
           sx: clickable ? ROW_CLICKABLE_SX : ROW_STATIC_SX,
@@ -647,35 +612,34 @@ function DataGrid(_ref) {
             children: /*#__PURE__*/_jsx(Checkbox, {
               size: "small",
               checked: isSelected,
-              onChange: function onChange(e) {
+              onChange: e => {
                 e.stopPropagation();
                 toggleRow(id);
               },
-              onClick: function onClick(e) {
-                return e.stopPropagation();
-              },
-              onKeyDown: function onKeyDown(e) {
-                return e.stopPropagation();
-              },
+              onClick: e => e.stopPropagation(),
+              onKeyDown: e => e.stopPropagation(),
               slotProps: {
                 input: {
                   "aria-label": L.selectRow(id)
                 }
               }
             })
-          }), columns.map(function (col) {
-            var _ref3;
-            var value = col.getValue ? col.getValue(row) : readCellValue(row, col.key);
+          }), columns.map(col => {
+            const value = col.getValue ? col.getValue(row) : readCellValue(row, col.key);
             return /*#__PURE__*/_jsx(TableCell, {
               align: col.align || (col.numeric ? "right" : "left"),
               sx: columnCellSx.get(col.key),
-              children: col.render ? col.render(row) : (_ref3 = value) !== null && _ref3 !== void 0 ? _ref3 : "—"
+              children: col.render ? col.render(row) : value ?? "—"
             }, col.key);
           }), /*#__PURE__*/_jsx(TableCell, {
             sx: FILLER_CELL_SX,
             "aria-hidden": "true"
           }), hasRowActions && rowActions && /*#__PURE__*/_jsx(TableCell, {
-            sx: ROW_ACTIONS_CELL_SX,
+            sx: ROW_ACTIONS_CELL_SX
+            /* See the note at ROW_ACTIONS_CELL_SX: an action must not
+             * also fire the row click. Mirrors the checkbox cell. */,
+            onClick: e => e.stopPropagation(),
+            onKeyDown: e => e.stopPropagation(),
             children: /*#__PURE__*/_jsx(Box, {
               sx: ROW_ACTIONS_OVERLAY_SX,
               children: rowActions(row)
@@ -710,26 +674,27 @@ function DataGrid(_ref) {
                   }
                 }
               })
-            }), columns.map(function (col) {
-              var _ref4;
-              var isSortable = sortable(col);
-              var isResizable = resizable && col.resizable !== false;
-              var isReorderable = reorderable && col.reorderable !== false;
-              var ariaSort = isSortable ? getAriaSort(sort, col.key) : undefined;
-              var effectiveWidth = (_ref4 = resize.liveWidths && resize.liveWidths[col.key]) !== null && _ref4 !== void 0 ? _ref4 : col.width;
-              var reorderHandlers = isReorderable ? reorder.cellHandlers(col.key) : null;
-              var reorderFeedbackSx = isReorderable ? reorder.cellSx(col.key) : undefined;
-              return /*#__PURE__*/_jsxs(TableCell, _objectSpread(_objectSpread({
+            }), columns.map(col => {
+              const isSortable = sortable(col);
+              const isResizable = resizable && col.resizable !== false;
+              const isReorderable = reorderable && col.reorderable !== false;
+              const ariaSort = isSortable ? getAriaSort(sort, col.key) : undefined;
+              const effectiveWidth = (resize.liveWidths && resize.liveWidths[col.key]) ?? col.width;
+              const reorderHandlers = isReorderable ? reorder.cellHandlers(col.key) : null;
+              const reorderFeedbackSx = isReorderable ? reorder.cellSx(col.key) : undefined;
+              return /*#__PURE__*/_jsxs(TableCell, {
                 align: col.align || (col.numeric ? "right" : "left"),
-                "aria-sort": ariaSort
-              }, reorderHandlers || {}), {}, {
-                sx: _objectSpread(_objectSpread({
+                "aria-sort": ariaSort,
+                ...(reorderHandlers || {}),
+                sx: {
                   position: "sticky",
                   top: 0,
-                  zIndex: 1
-                }, effectiveWidth != null ? {
-                  width: effectiveWidth
-                } : {}), reorderFeedbackSx ? reorderFeedbackSx : {}),
+                  zIndex: 1,
+                  ...(effectiveWidth != null ? {
+                    width: effectiveWidth
+                  } : {}),
+                  ...(reorderFeedbackSx ? reorderFeedbackSx : {})
+                },
                 children: [isSortable && onSortChange ? /*#__PURE__*/_jsx(SortableHeader, {
                   sortKey: col.key,
                   sort: sort,
@@ -742,7 +707,7 @@ function DataGrid(_ref) {
                   "data-reorder-grip": col.key,
                   "aria-label": "R\xE9organiser la colonne",
                   "aria-keyshortcuts": "ArrowLeft ArrowRight Home End",
-                  onKeyDown: function onKeyDown(e) {
+                  onKeyDown: e => {
                     if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End") {
                       pendingReorderFocusRef.current = col.key;
                     }
@@ -787,7 +752,7 @@ function DataGrid(_ref) {
                     }
                   }
                 })]
-              }), col.key);
+              }, col.key);
             }), /*#__PURE__*/_jsx(TableCell, {
               sx: FILLER_HEAD_CELL_SX,
               "aria-hidden": "true"
@@ -808,11 +773,12 @@ function DataGrid(_ref) {
           })
         }), body]
       })
-    }), pagination && /*#__PURE__*/_jsx(Pagination, _objectSpread(_objectSpread({}, pagination), {}, {
+    }), pagination && /*#__PURE__*/_jsx(Pagination, {
+      ...pagination,
       loading: loading,
       locale: locale,
       labels: L.pagination
-    }))]
+    })]
   });
 }
 export { applySort };