@portnet/ui 6.0.0 → 6.0.2

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

@@ -0,0 +1,820 @@
+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";
+import TableHead from "@mui/material/TableHead";
+import TableBody from "@mui/material/TableBody";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import Checkbox from "@mui/material/Checkbox";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material/styles";
+import { SkeletonRow } from "../components/Skeleton";
+import SortableHeader, { applySort, getAriaSort } from "./SortableHeader";
+import useDelayedFlag from "../hooks/useDelayedFlag";
+import { DEFAULT_MAX_BODY_HEIGHT, mergeLabels, useColumnsStabilityWarn, applyColumnOrder, CONTAINER_SX, TABLE_BY_DENSITY, ROW_CLICKABLE_SX, ROW_STATIC_SX, HEADER_CHECKBOX_CELL_SX, BODY_CHECKBOX_CELL_SX, HOVER_ONLY_CELL_SX, ERROR_CELL_SX, ERROR_INNER_SX, Pagination } from "./_dataGridShared";
+import useColumnResize from "./_useColumnResize";
+import useColumnReorder from "./_useColumnReorder";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataGrid - Portnet UI v2 (pattern)
+ *
+ * Charter §03 · Component "DataGrid · Table". Refactor of legacy PuiTable.
+ *
+ * Column sizing (R2, canonical):
+ *   - tableLayout: "auto" — columns grow proportionally from preferred widths.
+ *   - Table carries computed `min-width` = Σ (clamped) explicit widths
+ *     + (UNSIZED_COL_MIN_DEFAULT × unsized cols) + checkbox if any.
+ *     Each column's contribution is clamped to COL_MINWIDTH_CAP so a wide
+ *     preferred width can't force the whole table to overflow its container.
+ *   - When container >= min-width → table fills to 100%, columns expand
+ *     proportionally toward their preferred widths, no empty trailing strip.
+ *   - When container <  min-width → horizontal scroll on the container.
+ *
+ * Row actions (R2 robust):
+ *   - The actions cell is rendered at width:0 — it contributes nothing
+ *     to the column-width distribution. The actions themselves render
+ *     as an ABSOLUTELY positioned overlay anchored to the row's right
+ *     edge, invisible by default and revealed on hover / focus-within /
+ *     coarse pointer. On hover, the overlay carries a background that
+ *     masks the data column(s) it covers.
+ *   - The actions column header carries a visually-hidden accessible
+ *     name from labels.actionsHeader (default "Actions").
+ *
+ * Mobile card view (R1 mobile, opt-in):
+ *   - When `renderMobileCard` is provided AND viewport is below
+ *     `mobileBreakpoint` (default "sm"), DataGrid swaps the <Table> for
+ *     a vertical stack of cards. Host owns the card layout.
+ *
+ * Accessible name (WCAG 1.3.1 / 4.1.2):
+ *   - Resolution chain: ariaLabel prop → labels.tableAria → mergeLabels()
+ *     default. When both explicit sources are missing, useAriaLabelWarn
+ *     fires a dev console.warn.
+ */
+
+/**
+ * Dev-only hook — warn once on mount when neither `ariaLabel` nor
+ * `labels.tableAria` carries a contextual name for the table. Fires only
+ * in non-production builds; the inline check is dead-code-eliminated by
+ * minifiers when NODE_ENV is set to production at build time. Empty
+ * strings are treated as "not provided". Charter R-DG + WCAG 2.2 AA.
+ */
+function useAriaLabelWarn(ariaLabel, labelsTableAria) {
+  React.useEffect(function () {
+    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;
+    if (hasAriaLabel || hasLabelsAria) return;
+
+    // eslint-disable-next-line no-console
+    console.warn("[v2.DataGrid] No explicit `ariaLabel` prop or `labels.tableAria` — " + "falling back to the lib default. WCAG 1.3.1 + Charter R-DG require " + "a contextual table name. Pass `ariaLabel` describing the data " + "(e.g. 'Marchandises du titre', 'Liste des titres d\\'importation') " + "or set `labels.tableAria` if the same name is reused module-wide.");
+    // fire once on mount — re-renders shouldn't re-warn even if the caller
+    // changes ariaLabel/labels.tableAria later; a first-paint miss is the
+    // signal we care about, not every subsequent render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}
+
+/* R2 — Actions cell is a 0-width anchor for the absolute overlay.
+ * 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({
+  position: "sticky",
+  right: 0,
+  zIndex: 1,
+  width: 0,
+  minWidth: 0,
+  maxWidth: 0,
+  padding: 0,
+  background: "transparent",
+  borderBottom: "1px solid var(--border)",
+  overflow: "visible"
+});
+var ROW_ACTIONS_HEAD_CELL_SX = Object.freeze({
+  position: "sticky",
+  right: 0,
+  top: 0,
+  zIndex: 3,
+  width: 0,
+  minWidth: 0,
+  maxWidth: 0,
+  padding: 0,
+  background: "var(--bg-subtle)",
+  borderBottom: "1px solid var(--border)"
+});
+
+/* a11y — Standard sr-only / visually-hidden recipe. Gives the
+ * 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({
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+});
+
+/* 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({
+  position: "absolute",
+  right: "var(--s-3)",
+  top: "50%",
+  transform: "translateY(-50%)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  gap: "var(--s-1)",
+  whiteSpace: "nowrap",
+  opacity: 0,
+  pointerEvents: "none",
+  transition: "opacity var(--duration-fast, 120ms) ease",
+  // Visible "pill" that masks the data column(s) underneath when revealed
+  background: "var(--bg-hover)",
+  padding: "var(--s-1) var(--s-2)",
+  borderRadius: "var(--r-md)",
+  boxShadow: "var(--shadow-sm)",
+  "tr:hover &, tr:focus-within &": {
+    opacity: 1,
+    pointerEvents: "auto"
+  },
+  "@media (pointer: coarse)": {
+    opacity: 1,
+    pointerEvents: "auto"
+  }
+});
+
+/* 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({
+  padding: 0,
+  width: 0,
+  minWidth: 0,
+  maxWidth: 0,
+  borderBottom: "1px solid var(--border)"
+});
+var FILLER_HEAD_CELL_SX = Object.freeze({
+  padding: 0,
+  width: 0,
+  minWidth: 0,
+  maxWidth: 0,
+  position: "sticky",
+  top: 0,
+  zIndex: 1,
+  background: "var(--bg-subtle)",
+  borderBottom: "1px solid var(--border)"
+});
+
+/* DG-R1 — reorder grip button. Hidden (opacity 0) until the header is hovered /
+ * 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({
+  position: "absolute",
+  insetInlineStart: 2,
+  top: "50%",
+  transform: "translateY(-50%)",
+  zIndex: 2,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 18,
+  height: 18,
+  padding: 0,
+  border: "none",
+  borderRadius: "var(--r-sm)",
+  background: "var(--bg-subtle)",
+  color: "var(--fg-subtle)",
+  cursor: "grab",
+  opacity: 0,
+  pointerEvents: "none",
+  transition: "opacity var(--duration-fast, 120ms) ease",
+  fontFamily: "inherit",
+  "th:hover &, th:focus-within &": {
+    opacity: 1,
+    pointerEvents: "auto"
+  },
+  "@media (pointer: coarse)": {
+    opacity: 1,
+    pointerEvents: "auto"
+  },
+  "&:focus-visible": {
+    outline: "2px solid var(--accent)",
+    outlineOffset: "-1px",
+    opacity: 1,
+    pointerEvents: "auto"
+  }
+});
+
+/* ── Mobile card view SX (R1 mobile) ─────────────────────────────── */
+
+var CARD_STACK_SX = Object.freeze({
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--s-2)",
+  padding: "var(--s-3)"
+});
+var CARD_BASE_SX = Object.freeze({
+  background: "var(--surface)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--r-md)",
+  boxShadow: "var(--shadow-xs)",
+  transition: "background 60ms ease, border-color 60ms ease",
+  minHeight: 44
+});
+var CARD_CLICKABLE_SX = Object.freeze(_objectSpread(_objectSpread({}, CARD_BASE_SX), {}, {
+  cursor: "pointer",
+  "&:hover": {
+    background: "var(--bg-hover)"
+  },
+  "&:focus-visible": {
+    outline: "2px solid var(--accent)",
+    // --pui-outline-offset (2px in base.css :root) — aligns this focus
+    // ring with the rest of the v2 surface.
+    outlineOffset: "var(--pui-outline-offset)"
+  },
+  "&[data-active]": {
+    background: "var(--accent-soft)",
+    borderColor: "var(--accent)"
+  },
+  "&[data-selected]": {
+    background: "var(--accent-soft)",
+    borderColor: "var(--accent)"
+  }
+}));
+var CARD_SKELETON_SX = Object.freeze({
+  height: 90,
+  background: "var(--bg-subtle)",
+  borderRadius: "var(--r-md)",
+  animation: "pui-skeleton-shimmer 1.4s ease-in-out infinite",
+  "@media (prefers-reduced-motion: reduce)": {
+    animation: "none"
+  }
+});
+var 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;
+
+/* 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;
+function widthToNumber(w) {
+  if (typeof w === "number" && Number.isFinite(w)) return w;
+  if (typeof w === "string") {
+    var parsed = parseFloat(w);
+    if (!Number.isNaN(parsed)) return parsed;
+  }
+  return 0;
+}
+
+/* Default value accessor (`row[key]`) for an unconstrained row type. Typed
+ * against `unknown` so the single unknown->record assertion is legal
+ * without a double cast; noUncheckedIndexedAccess makes the result
+ * `unknown`, which the caller narrows / asserts at the render site. */
+function readCellValue(row, key) {
+  return 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;
+  // 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);
+  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, {
+    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;
+    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, "\"]"));
+    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() {
+    if (!onSelectionChange) return;
+    if (allSelected) onSelectionChange(new Set());else onSelectionChange(new Set(rows.map(getRowId)));
+  };
+  var toggleRow = function toggleRow(id) {
+    if (!onSelectionChange) return;
+    var 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);
+      }
+    };
+  };
+  var scrollContainerSx = React.useMemo(function () {
+    return {
+      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();
+    }
+    if (showCheckbox) sum += 48;
+    return sum;
+  }, [columns, showCheckbox]);
+
+  // 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]);
+
+  /* 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
+   * objects each render and forced Emotion to re-serialise them. The cell sx is
+   * a pure function of the column (wrap / mono / numeric / maxWidth / hoverOnly)
+   * and the column's effective width — never of the row — so compute it once per
+   * column and reuse the reference across all rows. Keyed on columns + live
+   * 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 ? {
+          fontFamily: "var(--font-mono)"
+        } : {}), col.numeric || col.mono ? {
+          fontVariantNumeric: "tabular-nums"
+        } : {}), effectiveWidth != null ? {
+          width: effectiveWidth
+        } : {}), col.wrap ? {
+          overflowWrap: "anywhere",
+          wordBreak: "break-word"
+        } : {}), col.maxWidth != null ? {
+          maxWidth: col.maxWidth
+        } : {}), col.hoverOnly ? HOVER_ONLY_CELL_SX : {}));
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return byKey;
+  }, [columns, resize.liveWidths]);
+
+  /* ── 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) {
+    if (showSkeleton) {
+      return /*#__PURE__*/_jsx(Box, {
+        role: "list",
+        "aria-busy": "true",
+        "aria-label": tableAria,
+        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));
+        })
+      });
+    }
+    if (error) {
+      return /*#__PURE__*/_jsx(Box, {
+        sx: CARD_EMPTY_WRAPPER_SX,
+        children: errorState
+      });
+    }
+    if (rows.length === 0) {
+      return /*#__PURE__*/_jsx(Box, {
+        sx: CARD_EMPTY_WRAPPER_SX,
+        children: filtered ? filteredEmptyState : emptyState
+      });
+    }
+    return /*#__PURE__*/_jsx(Box, {
+      role: "list",
+      "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
+        };
+        return /*#__PURE__*/_jsx(Box, {
+          role: clickable ? "button" : "listitem",
+          tabIndex: clickable ? 0 : undefined,
+          "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,
+          onKeyDown: clickable ? handleRowKeyDown(row) : undefined,
+          sx: clickable ? CARD_CLICKABLE_SX : CARD_BASE_SX,
+          children: renderCard(row, ctx)
+        }, id);
+      })
+    });
+  };
+
+  /* ── Table body (desktop / no card opt-in) ─────────────────── */
+  var 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));
+      })
+    });
+  } else if (error) {
+    body = /*#__PURE__*/_jsx(TableBody, {
+      children: /*#__PURE__*/_jsx(TableRow, {
+        children: /*#__PURE__*/_jsx(TableCell, {
+          colSpan: colCount,
+          sx: ERROR_CELL_SX,
+          children: /*#__PURE__*/_jsx(Box, {
+            sx: ERROR_INNER_SX,
+            children: errorState
+          })
+        })
+      })
+    });
+  } else if (rows.length === 0) {
+    body = /*#__PURE__*/_jsx(TableBody, {
+      "aria-busy": loading || undefined,
+      children: /*#__PURE__*/_jsx(TableRow, {
+        children: /*#__PURE__*/_jsx(TableCell, {
+          colSpan: colCount,
+          sx: ERROR_CELL_SX,
+          children: /*#__PURE__*/_jsx(Box, {
+            sx: ERROR_INNER_SX,
+            children: filtered ? filteredEmptyState : emptyState
+          })
+        })
+      })
+    });
+  } 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;
+        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,
+          onKeyDown: clickable ? handleRowKeyDown(row) : undefined,
+          tabIndex: clickable ? 0 : undefined,
+          sx: clickable ? ROW_CLICKABLE_SX : ROW_STATIC_SX,
+          children: [showCheckbox && /*#__PURE__*/_jsx(TableCell, {
+            padding: "checkbox",
+            sx: BODY_CHECKBOX_CELL_SX,
+            children: /*#__PURE__*/_jsx(Checkbox, {
+              size: "small",
+              checked: isSelected,
+              onChange: function onChange(e) {
+                e.stopPropagation();
+                toggleRow(id);
+              },
+              onClick: function onClick(e) {
+                return e.stopPropagation();
+              },
+              onKeyDown: function onKeyDown(e) {
+                return 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);
+            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 : "—"
+            }, col.key);
+          }), /*#__PURE__*/_jsx(TableCell, {
+            sx: FILLER_CELL_SX,
+            "aria-hidden": "true"
+          }), hasRowActions && rowActions && /*#__PURE__*/_jsx(TableCell, {
+            sx: ROW_ACTIONS_CELL_SX,
+            children: /*#__PURE__*/_jsx(Box, {
+              sx: ROW_ACTIONS_OVERLAY_SX,
+              children: rowActions(row)
+            })
+          })]
+        }, id);
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: CONTAINER_SX,
+    children: [useCardView && renderMobileCard ? renderCardBody(renderMobileCard) : /*#__PURE__*/_jsx(Box, {
+      sx: scrollContainerSx,
+      children: /*#__PURE__*/_jsxs(Table, {
+        "aria-label": tableAria,
+        size: density === "compact" ? "small" : "medium",
+        stickyHeader: true,
+        sx: tableSx,
+        children: [/*#__PURE__*/_jsx(TableHead, {
+          children: /*#__PURE__*/_jsxs(TableRow, {
+            children: [showCheckbox && /*#__PURE__*/_jsx(TableCell, {
+              padding: "checkbox",
+              sx: HEADER_CHECKBOX_CELL_SX,
+              children: /*#__PURE__*/_jsx(Checkbox, {
+                size: "small",
+                checked: allSelected,
+                indeterminate: someSelected,
+                onChange: toggleAll,
+                slotProps: {
+                  input: {
+                    "aria-label": L.selectAll
+                  }
+                }
+              })
+            }), 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({
+                align: col.align || (col.numeric ? "right" : "left"),
+                "aria-sort": ariaSort
+              }, reorderHandlers || {}), {}, {
+                sx: _objectSpread(_objectSpread({
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 1
+                }, effectiveWidth != null ? {
+                  width: effectiveWidth
+                } : {}), reorderFeedbackSx ? reorderFeedbackSx : {}),
+                children: [isSortable && onSortChange ? /*#__PURE__*/_jsx(SortableHeader, {
+                  sortKey: col.key,
+                  sort: sort,
+                  setSort: onSortChange,
+                  align: col.align || (col.numeric ? "right" : "left"),
+                  children: col.header
+                }) : col.header, isReorderable && /*#__PURE__*/_jsx(Box, {
+                  component: "button",
+                  type: "button",
+                  "data-reorder-grip": col.key,
+                  "aria-label": "R\xE9organiser la colonne",
+                  "aria-keyshortcuts": "ArrowLeft ArrowRight Home End",
+                  onKeyDown: function onKeyDown(e) {
+                    if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Home" || e.key === "End") {
+                      pendingReorderFocusRef.current = col.key;
+                    }
+                    reorder.handleKeyDown(col.key)(e);
+                  },
+                  sx: REORDER_GRIP_SX,
+                  children: /*#__PURE__*/_jsx(DragIndicatorIcon, {
+                    sx: {
+                      fontSize: 14
+                    }
+                  })
+                }), isResizable && /*#__PURE__*/_jsx(Box, {
+                  role: "separator",
+                  "aria-orientation": "vertical",
+                  "aria-label": "Redimensionner la colonne",
+                  tabIndex: 0,
+                  "aria-valuenow": typeof effectiveWidth === "number" ? Math.round(effectiveWidth) : undefined,
+                  "aria-valuemin": resize.minWidth,
+                  draggable: "false",
+                  onMouseDown: resize.handleMouseDown(col.key),
+                  onKeyDown: resize.handleKeyDown(col.key),
+                  sx: {
+                    position: "absolute",
+                    top: 0,
+                    insetInlineEnd: 0,
+                    width: 8,
+                    height: "100%",
+                    cursor: "col-resize",
+                    userSelect: "none",
+                    touchAction: "none",
+                    zIndex: 2,
+                    "&:hover": {
+                      background: "var(--state-hover-overlay)"
+                    },
+                    "&:active": {
+                      background: "var(--state-pressed-overlay)"
+                    },
+                    "&:focus-visible": {
+                      outline: "2px solid var(--accent)",
+                      outlineOffset: "-1px",
+                      background: "var(--state-hover-overlay)"
+                    }
+                  }
+                })]
+              }), col.key);
+            }), /*#__PURE__*/_jsx(TableCell, {
+              sx: FILLER_HEAD_CELL_SX,
+              "aria-hidden": "true"
+            }), hasRowActions &&
+            /*#__PURE__*/
+            /* WCAG 1.3.1 / axe-core `empty-table-header` — the
+               visually-hidden span names the actions column in the
+               a11y tree. Label from labels.actionsHeader. */
+            _jsx(TableCell, {
+              sx: ROW_ACTIONS_HEAD_CELL_SX,
+              scope: "col",
+              children: /*#__PURE__*/_jsx(Box, {
+                component: "span",
+                sx: VISUALLY_HIDDEN_SX,
+                children: L.actionsHeader
+              })
+            })]
+          })
+        }), body]
+      })
+    }), pagination && /*#__PURE__*/_jsx(Pagination, _objectSpread(_objectSpread({}, pagination), {}, {
+      loading: loading,
+      locale: locale,
+      labels: L.pagination
+    }))]
+  });
+}
+export { applySort };
+export default DataGrid;
+//# sourceMappingURL=DataGrid.js.map