@portnet/ui 2.0.0 → 2.0.2

package/dist/components/table/PuiTable.js

@@ -7,6 +7,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.sort.js");
+require("core-js/modules/es.string.includes.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
@@ -24,7 +27,7 @@ var _PuiTableAction = _interopRequireDefault(require("./PuiTableAction"));
 var _ActionPopover = _interopRequireDefault(require("./ActionPopover"));
 var _system = require("@mui/system");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "className", "sx", "elevate", "rows", "rowCount", "columns", "paginationMode", "page", "pageSize", "checkboxSelection", "loading", "stripped", "actions", "oneActionOnly", "onSelect", "onPageChange", "onPageSizeChange", "rowDetailPanel"];
+const _excluded = ["id", "className", "sx", "elevate", "rows", "rowCount", "columns", "paginationMode", "page", "pageSize", "checkboxSelection", "loading", "stripped", "actions", "oneActionOnly", "onSelect", "onPageChange", "onPageSizeChange", "rowDetailPanel", "stickyColumns"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -101,6 +104,27 @@ const StyledMuiTable = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
           },
           "&:last-of-type .MuiDataGrid-columnSeparator": {
             display: "none"
+          },
+          // Colonne sticky - styles améliorés
+          "&.sticky-column": {
+            position: "sticky",
+            zIndex: 3,
+            // Valeur supérieure pour s'assurer qu'elle reste au-dessus lors du défilement
+            "&.sticky-column-left": {
+              left: 0
+            },
+            "&.sticky-column-right": {
+              right: 0
+            },
+            // S'assurer que le contenu est visible
+            "& .MuiDataGrid-columnHeaderTitleContainer": {
+              visibility: "visible",
+              overflow: "visible"
+            },
+            "& .MuiDataGrid-columnHeaderTitle": {
+              visibility: "visible",
+              overflow: "visible"
+            }
           }
         },
         "& .MuiDataGrid-columnSeparator": {
@@ -123,6 +147,17 @@ const StyledMuiTable = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
         },
         "&:focus-within": {
           outline: "none"
+        },
+        // Cellules sticky - styles améliorés
+        "&.sticky-column": {
+          position: "sticky",
+          zIndex: 2,
+          "&.sticky-column-left": {
+            left: 0
+          },
+          "&.sticky-column-right": {
+            right: 0
+          }
         }
       },
       "& .MuiDataGrid-row": {
@@ -278,6 +313,14 @@ const autosizeOptions = {
   includeHeaders: true,
   includeOutliers: true
 };
+
+// Ordre de priorité pour les colonnes sticky: -1 = début (à gauche), 0 = ne pas figer, 1 = fin (à droite)
+const calculateStickyOrder = (field, stickyColumns) => {
+  if (!stickyColumns.includes(field)) return 0;
+  const idx = stickyColumns.indexOf(field);
+  if (idx === -1) return 0;
+  return idx;
+};
 const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
       id,
@@ -298,12 +341,72 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       onSelect,
       onPageChange,
       onPageSizeChange,
-      rowDetailPanel
+      rowDetailPanel,
+      stickyColumns = []
     } = _ref3,
     rest = _objectWithoutProperties(_ref3, _excluded);
   const [appColumns, setAppColumns] = React.useState(columns);
+
+  // Calcule les positions sticky pour les colonnes figées - logique améliorée
+  const calculateStickyPositions = columns => {
+    let leftOffset = 0;
+
+    // Trier les colonnes sticky par ordre d'apparition dans le tableau stickyColumns
+    const sortedColumns = [...columns].sort((a, b) => {
+      const aOrder = calculateStickyOrder(a.field, stickyColumns);
+      const bOrder = calculateStickyOrder(b.field, stickyColumns);
+      if (aOrder === 0 && bOrder === 0) return 0;
+      if (aOrder === 0) return 1;
+      if (bOrder === 0) return -1;
+      return aOrder - bOrder;
+    });
+
+    // Pour chaque colonne, calculer sa position sticky si nécessaire
+    return sortedColumns.map(column => {
+      // Si la colonne n'est pas figée, retournez-la telle quelle
+      if (!stickyColumns.includes(column.field)) {
+        return column;
+      }
+
+      // Toutes les colonnes sticky sont alignées à gauche pour plus de clarté
+      const headerClassName = "".concat(column.headerClassName || '', " sticky-column sticky-column-left");
+      const cellClassName = "".concat(column.cellClassName || '', " sticky-column sticky-column-left");
+
+      // Définir le style pour positionner la colonne
+      const headerStyle = _objectSpread(_objectSpread({}, column.headerStyle || {}), {}, {
+        left: "".concat(leftOffset, "px"),
+        // Assurer que le fond correspond à celui de la ligne
+        backgroundColor: 'inherit',
+        // Appliquer un léger effet d'ombre pour indiquer la position sticky
+        boxShadow: '2px 0 4px -2px rgba(0, 0, 0, 0.15)'
+      });
+      const cellStyle = _objectSpread(_objectSpread({}, column.cellStyle || {}), {}, {
+        left: "".concat(leftOffset, "px"),
+        // Assurer que le fond correspond à celui de la ligne
+        backgroundColor: 'inherit',
+        // Appliquer un léger effet d'ombre pour indiquer la position sticky
+        boxShadow: '2px 0 4px -2px rgba(0, 0, 0, 0.15)'
+      });
+
+      // Mettre à jour l'offset pour la prochaine colonne figée
+      leftOffset += column.width || 100;
+      return _objectSpread(_objectSpread({}, column), {}, {
+        headerClassName,
+        cellClassName,
+        headerStyle,
+        cellStyle
+      });
+    });
+  };
   React.useEffect(() => {
-    const newColumns = Boolean(actions.length) ? [...columns, {
+    // Assurez-vous que les colonnes d'action sont ajoutées après le calcul des positions sticky
+    let columnsToProcess = columns;
+
+    // Appliquer les positions sticky
+    const columnsWithSticky = stickyColumns.length > 0 ? calculateStickyPositions(columnsToProcess) : columnsToProcess;
+
+    // Ajouter la colonne d'actions après avoir calculé les positions sticky
+    const finalColumns = Boolean(actions.length) ? [...columnsWithSticky, {
       field: "action",
       headerName: "Actions",
       sortable: false,
@@ -317,23 +420,18 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
           sx: {
             display: 'flex',
             gap: '8px',
-            // Adjust the space between icons as needed
             flexWrap: 'wrap',
-            // Keep icons on the same line; remove if you want them to wrap
             justifyContent: 'center',
-            // Center the icons horizontally
             alignItems: 'center',
-            // Align icons vertically
-            minWidth: 0 // Prevent the flex container from stretching past its content width
+            minWidth: 0
           },
           children: actions.map((action, index) => /*#__PURE__*/React.cloneElement(action, {
             row,
             key: index,
             sx: _objectSpread(_objectSpread({}, action.props.sx), {}, {
               marginRight: 0,
-              // Remove any outer margins
               '&:last-child': {
-                marginRight: 0 // Ensure the last item doesn't push the container width
+                marginRight: 0
               }
             })
           }))
@@ -341,8 +439,8 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       },
       cellClassName: "tableAction",
       headerClassName: "tableActionColumn"
-    }] : columns;
-    setAppColumns(newColumns.map(column => {
+    }] : columnsWithSticky;
+    setAppColumns(finalColumns.map(column => {
       const renderCell = Boolean(column.renderCell) ? column.renderCell : Boolean(column.valueGetter) ? columnData => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTooltip.default, {
         title: Boolean(column.titleGetter) ? column.titleGetter(columnData.row) : String(column.valueGetter(columnData)),
         children: column.valueGetter(columnData)
@@ -360,7 +458,7 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       });
     }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [actions, columns]);
+  }, [actions, columns, stickyColumns]);
   const renderRowDetailPanel = params => {
     const {
       data
@@ -372,7 +470,8 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
-      width: '100%'
+      width: '100%',
+      position: 'relative'
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTable, _objectSpread({
       ref: ref,
@@ -386,6 +485,35 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       sx: {
         ["& .".concat(_xDataGrid.gridClasses.cell)]: {
           py: 0.5
+        },
+        // Assurer la cohérence visuelle pour les cellules sticky
+        ["& .".concat(_xDataGrid.gridClasses.cell, ".sticky-column")]: {
+          backgroundColor: 'inherit !important'
+        },
+        ["& .".concat(_xDataGrid.gridClasses.columnHeader, ".sticky-column")]: {
+          backgroundColor: 'inherit !important'
+        },
+        // S'assurer que les titres des colonnes sont visibles
+        ["& .".concat(_xDataGrid.gridClasses.columnHeaderTitle)]: {
+          overflow: 'visible',
+          whiteSpace: 'normal'
+        },
+        // Ajuster les styles pour éviter le défilement horizontal
+        '& .MuiDataGrid-main': {
+          width: '100%',
+          overflow: 'visible'
+        },
+        '& .MuiDataGrid-virtualScroller': {
+          overflow: 'visible'
+        },
+        '& .MuiDataGrid-virtualScrollerRenderZone': {
+          width: '100%'
+        },
+        '& .MuiDataGrid-virtualScrollerContent': {
+          width: '100% !important' // Empêcher le contenu de dépasser la largeur
+        },
+        '& .MuiDataGrid-row': {
+          width: '100% !important'
         }
       },
       autoHeight: true,
@@ -436,7 +564,8 @@ PuiTable.propTypes = {
   onPageChange: _propTypes.default.func,
   onPageSizeChange: _propTypes.default.func,
   onSelectionModelChange: _propTypes.default.func,
-  rowDetailPanel: _propTypes.default.element
+  rowDetailPanel: _propTypes.default.element,
+  stickyColumns: _propTypes.default.arrayOf(_propTypes.default.string)
 };
 PuiTable.defaultProps = {
   oneActionOnly: false,
@@ -444,6 +573,7 @@ PuiTable.defaultProps = {
   pageSize: 5,
   paginationMode: "client",
   stripped: false,
-  actions: []
+  actions: [],
+  stickyColumns: []
 };
 var _default = exports.default = PuiTable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portnet/ui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Portnet UI",
   "keywords": [
     "react",