@portnet/ui 6.0.2 → 6.0.3

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

@@ -1,9 +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 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";
@@ -60,7 +54,7 @@ import useColumnReorder from "./_useColumnReorder";
  *  the canonical 2-tier Density (which governs table cell padding). */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Default row height by density tier. */
-var DEFAULT_ROW_HEIGHT_BY_DENSITY = Object.freeze({
+const DEFAULT_ROW_HEIGHT_BY_DENSITY = Object.freeze({
   spacious: density.spacious.row,
   // 56
   comfortable: density.comfortable.row,
@@ -69,7 +63,7 @@ var DEFAULT_ROW_HEIGHT_BY_DENSITY = Object.freeze({
   // 36
   ultraCompact: density.ultraCompact.row // 28
 });
-var PADDING_CELL_SX = Object.freeze({
+const PADDING_CELL_SX = Object.freeze({
   padding: 0,
   border: 0
 });
@@ -78,7 +72,7 @@ var PADDING_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%",
@@ -123,161 +117,127 @@ function readCellValue(row, key) {
 
 /* Default getRowId (`(r) => r.id`); `(unknown) => RowId` is assignable to
  * the declared `(row: T) => RowId` by parameter contravariance. */
-var defaultGetRowId = function defaultGetRowId(row) {
-  return row.id;
-};
-function DataGridVirtualized(_ref) {
-  var _ref2;
-  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,
-    _ref$filtered = _ref.filtered,
-    filtered = _ref$filtered === void 0 ? false : _ref$filtered,
-    _ref$density = _ref.density,
-    densityProp = _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,
-    rowHeight = _ref.rowHeight,
-    _ref$overscan = _ref.overscan,
-    overscan = _ref$overscan === void 0 ? 10 : _ref$overscan,
-    _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;
-  var L = React.useMemo(function () {
-    return mergeLabels(labels);
-  }, [labels]);
-  var tableAria = ariaLabel != null ? ariaLabel : L.tableAria;
-  var showSkeleton = useDelayedFlag(loading);
+const defaultGetRowId = row => row.id;
+function DataGridVirtualized({
+  rows = [],
+  columns: rawColumns = [],
+  loading = false,
+  error = null,
+  sort = [],
+  onSortChange,
+  selection,
+  onSelectionChange,
+  pagination,
+  emptyState,
+  filteredEmptyState,
+  errorState,
+  getRowId = defaultGetRowId,
+  onRowClick,
+  rowFlashId,
+  filtered = false,
+  density: densityProp = "comfortable",
+  ariaLabel,
+  locale = "fr-FR",
+  labels,
+  maxBodyHeight = DEFAULT_MAX_BODY_HEIGHT,
+  // Virtualization
+  rowHeight,
+  overscan = 10,
+  // Resize
+  resizable = false,
+  columnWidths,
+  onColumnWidthsChange,
+  // Reorder
+  reorderable = false,
+  columnOrder,
+  onColumnOrderChange
+}) {
+  const L = React.useMemo(() => mergeLabels(labels), [labels]);
+  const tableAria = ariaLabel != null ? ariaLabel : L.tableAria;
+  const showSkeleton = useDelayedFlag(loading);
   useColumnsStabilityWarn(rawColumns);
 
   // Apply host-supplied column order (defensive, see _dataGridShared).
-  var columns = React.useMemo(function () {
-    return applyColumnOrder(rawColumns, columnOrder);
-  }, [rawColumns, columnOrder]);
+  const columns = React.useMemo(() => applyColumnOrder(rawColumns, columnOrder), [rawColumns, columnOrder]);
 
   // Resize + reorder hooks. Cross-coupled via resizeIsActive.
-  var resize = useColumnResize(columnWidths, onColumnWidthsChange);
-  var reorder = useColumnReorder(columns, columnOrder, onColumnOrderChange, {
+  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]);
 
   // Effective row height: prop wins, otherwise density default.
-  var effectiveRowHeight = (_ref2 = rowHeight !== null && rowHeight !== void 0 ? rowHeight : DEFAULT_ROW_HEIGHT_BY_DENSITY[densityProp]) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_ROW_HEIGHT_BY_DENSITY.comfortable;
-  var showCheckbox = !!onSelectionChange;
-  var colCount = columns.length + (showCheckbox ? 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 effectiveRowHeight = rowHeight ?? DEFAULT_ROW_HEIGHT_BY_DENSITY[densityProp] ?? DEFAULT_ROW_HEIGHT_BY_DENSITY.comfortable;
+  const showCheckbox = !!onSelectionChange;
+  const colCount = columns.length + (showCheckbox ? 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 scrollRef = React.useRef(null);
-  var virtualizer = useVirtualizer({
+  const scrollRef = React.useRef(null);
+  const virtualizer = useVirtualizer({
     count: rows.length,
-    getScrollElement: function getScrollElement() {
-      return scrollRef.current;
-    },
-    estimateSize: function estimateSize() {
-      return effectiveRowHeight;
-    },
-    overscan: overscan
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => effectiveRowHeight,
+    overscan
   });
-  var virtualItems = virtualizer.getVirtualItems();
-  var totalSize = virtualizer.getTotalSize();
-  var firstItem = virtualItems[0];
-  var lastItem = virtualItems[virtualItems.length - 1];
-  var paddingTop = firstItem ? firstItem.start : 0;
-  var paddingBottom = lastItem ? totalSize - lastItem.end : 0;
-  var scrollContainerSx = React.useMemo(function () {
-    return {
-      overflow: "auto",
-      maxHeight: maxBodyHeight
-    };
-  }, [maxBodyHeight]);
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const firstItem = virtualItems[0];
+  const lastItem = virtualItems[virtualItems.length - 1];
+  const paddingTop = firstItem ? firstItem.start : 0;
+  const paddingBottom = lastItem ? totalSize - lastItem.end : 0;
+  const scrollContainerSx = React.useMemo(() => ({
+    overflow: "auto",
+    maxHeight: maxBodyHeight
+  }), [maxBodyHeight]);
   // TABLE_BY_DENSITY is keyed by the 2-tier Density; map the wider tier down
   // (matches the JS `TABLE_BY_DENSITY[dp] || .comfortable` fallback).
-  var tableDensityKey = densityProp === "compact" ? "compact" : "comfortable";
-  var tableSx = TABLE_BY_DENSITY[tableDensityKey];
+  const tableDensityKey = densityProp === "compact" ? "compact" : "comfortable";
+  const tableSx = TABLE_BY_DENSITY[tableDensityKey];
 
   // ── Body branches ──────────────────────────────────────────────
-  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: false
-        }, "sk-".concat(i));
-      })
+      }, (_, i) => /*#__PURE__*/_jsx(SkeletonRow, {
+        cols: columns.length,
+        withCheckbox: showCheckbox,
+        withActions: false
+      }, `sk-${i}`))
     });
   } else if (error) {
     body = /*#__PURE__*/_jsx(TableBody, {
@@ -318,22 +278,20 @@ function DataGridVirtualized(_ref) {
           colSpan: colCount,
           sx: PADDING_CELL_SX
         })
-      }), virtualItems.map(function (virtualItem) {
-        var row = rows[virtualItem.index];
+      }), virtualItems.map(virtualItem => {
+        const row = rows[virtualItem.index];
         if (!row) return null;
-        var id = getRowId(row);
-        var isSelected = selectedSet.has(id);
-        var flash = rowFlashId === id;
-        var clickable = !!onRowClick;
+        const id = getRowId(row);
+        const isSelected = selectedSet.has(id);
+        const flash = rowFlashId === id;
+        const clickable = !!onRowClick;
         return /*#__PURE__*/_jsxs(TableRow, {
           "data-index": virtualItem.index,
           "aria-rowindex": virtualItem.index + 2,
           hover: true,
           "data-selected": isSelected || 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,
           style: {
@@ -346,47 +304,46 @@ function DataGridVirtualized(_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, _ref4;
-            var value = col.getValue ? col.getValue(row) : readCellValue(row, col.key);
-            var effectiveWidth = (_ref3 = resize.liveWidths && resize.liveWidths[col.key]) !== null && _ref3 !== void 0 ? _ref3 : col.width;
+          }), columns.map(col => {
+            const value = col.getValue ? col.getValue(row) : readCellValue(row, col.key);
+            const effectiveWidth = (resize.liveWidths && resize.liveWidths[col.key]) ?? col.width;
             // --text-body (14px) — was `var(--text-fs)`, a token typo
             // with no fallback; making the inheritance explicit preserves
             // the rendering while removing the dangling reference.
-            var cellSx = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+            const cellSx = {
               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.maxWidth != null ? {
-              maxWidth: col.maxWidth
-            } : {});
+              textOverflow: "ellipsis",
+              ...(col.mono ? {
+                fontFamily: "var(--font-mono)"
+              } : {}),
+              ...(col.numeric || col.mono ? {
+                fontVariantNumeric: "tabular-nums"
+              } : {}),
+              ...(effectiveWidth != null ? {
+                width: effectiveWidth
+              } : {}),
+              ...(col.maxWidth != null ? {
+                maxWidth: col.maxWidth
+              } : {})
+            };
             return /*#__PURE__*/_jsx(TableCell, {
               align: col.align || (col.numeric ? "right" : "left"),
               sx: cellSx,
-              children: col.render ? col.render(row) : (_ref4 = value) !== null && _ref4 !== void 0 ? _ref4 : "—"
+              children: col.render ? col.render(row) : value ?? "—"
             }, col.key);
           })]
         }, virtualItem.key);
@@ -430,26 +387,27 @@ function DataGridVirtualized(_ref) {
                   }
                 }
               })
-            }), columns.map(function (col) {
-              var _ref5;
-              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 = (_ref5 = resize.liveWidths && resize.liveWidths[col.key]) !== null && _ref5 !== void 0 ? _ref5 : 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,
@@ -462,7 +420,7 @@ function DataGridVirtualized(_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;
                     }
@@ -507,16 +465,17 @@ function DataGridVirtualized(_ref) {
                     }
                   }
                 })]
-              }), col.key);
+              }, col.key);
             })]
           })
         }), body]
       })
-    }), pagination && /*#__PURE__*/_jsx(Pagination, _objectSpread(_objectSpread({}, pagination), {}, {
+    }), pagination && /*#__PURE__*/_jsx(Pagination, {
+      ...pagination,
       loading: loading,
       locale: locale,
       labels: L.pagination
-    }))]
+    })]
   });
 }
 export default DataGridVirtualized;