@portnet/ui 1.1.9 → 2.0.1

package/dist/components/table/ActionPopover.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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");
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
+var _system = require("@mui/system");
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ActionPopover = _ref => {
+  let {
+    row,
+    actions
+  } = _ref;
+  const [anchorEl, setAnchorEl] = _react.default.useState(null);
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      "aria-describedby": id,
+      onClick: handleClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+      id: id,
+      open: open,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
+        p: 2,
+        children: actions.map((action, index) => /*#__PURE__*/_react.default.cloneElement(action, {
+          row,
+          key: index,
+          onClick: handleClose // Assuming you want to close the popover when an action is clicked
+        }))
+      })
+    })]
+  });
+};
+var _default = exports.default = ActionPopover;

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");
@@ -21,9 +24,10 @@ var _PuiCheckbox = _interopRequireDefault(require("../inputs/PuiCheckbox"));
 var _PuiIcon = _interopRequireDefault(require("../others/PuiIcon"));
 var _PuiTooltip = _interopRequireDefault(require("../others/PuiTooltip"));
 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 }; }
@@ -100,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": {
@@ -113,7 +138,7 @@ const StyledMuiTable = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props,
         textOverflow: "ellipsis",
         overflow: "hidden",
         maxHeight: "none",
-        minWidth: "maxWidth",
+        minWidth: 'maxWidth',
         wordBreak: "break-word",
         "&.tableAction": {
           justifyContent: "center",
@@ -122,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": {
@@ -277,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,
@@ -297,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,
@@ -314,25 +418,20 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         } = _ref4;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
           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
+            display: 'flex',
+            gap: '8px',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignItems: 'center',
+            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
+              '&:last-child': {
+                marginRight: 0
               }
             })
           }))
@@ -340,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)
@@ -359,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
@@ -371,7 +470,9 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: {
-      width: "100%"
+      width: '100%',
+      overflow: 'auto',
+      position: 'relative'
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTable, _objectSpread({
       ref: ref,
@@ -385,6 +486,18 @@ 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'
         }
       },
       autoHeight: true,
@@ -406,7 +519,7 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       loading: loading,
       paginationMode: paginationMode,
       localeText: localeText,
-      getRowHeight: () => "auto",
+      getRowHeight: () => 'auto',
       onPageChange: onPageChange,
       onPageSizeChange: onPageSizeChange,
       onSelectionModelChange: onSelect,
@@ -435,7 +548,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,
@@ -443,6 +557,7 @@ PuiTable.defaultProps = {
   pageSize: 5,
   paginationMode: "client",
   stripped: false,
-  actions: []
+  actions: [],
+  stickyColumns: []
 };
 var _default = exports.default = PuiTable;

package/dist/components/ui/pages/general/PuiSearchPage.js

@@ -3,16 +3,16 @@
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
-var _formik = require("formik");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var React = _interopRequireWildcard(require("react"));
+var _formik = require("formik");
 var _PuiButton = _interopRequireDefault(require("../../../buttons/PuiButton"));
 var _PuiFormikForm = _interopRequireDefault(require("../../../others/PuiFormikForm"));
 var _PuiGrid = _interopRequireDefault(require("../../../others/PuiGrid"));
@@ -20,15 +20,17 @@ var _PuiIcon = _interopRequireDefault(require("../../../others/PuiIcon"));
 var _PuiSection = _interopRequireDefault(require("../../../others/PuiSection"));
 var _PuiTable = _interopRequireDefault(require("../../../table/PuiTable"));
 var _PuiDefaultPage = _interopRequireDefault(require("./PuiDefaultPage"));
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // Container for search form and actions
 const PuiStandardSearchPageContainer = _ref => {
   let {
     actions,
@@ -63,9 +65,77 @@ const PuiSearchPage = _ref2 => {
     onRetour,
     onReset,
     onSubmit,
-    children: _children,
-    additionalActions
+    children,
+    additionalActions,
+    collapsibleSearchSection = true,
+    // Collapsible by default
+    alwaysVisibleFields = null,
+    // Champs toujours visibles
+    collapsibleFields = null // Champs collapsibles
   } = _ref2;
+  const [isSearchSectionExpanded, setSearchSectionExpanded] = (0, _react.useState)(false);
+
+  // Si des champs spécifiques sont définis comme collapsibles
+  const hasCollapsibleFields = collapsibleFields !== null;
+  // Si des champs sont toujours visibles
+  const hasAlwaysVisibleFields = alwaysVisibleFields !== null;
+
+  // Fonction qui détermine si la section de recherche a des champs à afficher même si collapsée
+  const shouldRenderSearchContent = () => {
+    if (!collapsibleSearchSection) return true; // Si non collapsible, toujours afficher
+    if (hasAlwaysVisibleFields) return true; // Si des champs sont toujours visibles, les afficher
+    return isSearchSectionExpanded; // Sinon, afficher seulement si la section est étendue
+  };
+  const toggleSearchSection = () => {
+    setSearchSectionExpanded(prev => !prev);
+  };
+
+  // Fonction pour rendre le contenu des champs en fonction de leur visibilité
+  const renderSearchFields = () => {
+    // Si pas de champs collapsibles ou toujours visibles spécifiés, on affiche tous les enfants
+    if (!hasCollapsibleFields && !hasAlwaysVisibleFields) {
+      return children;
+    }
+
+    // Si la section est étendue ou pas de champs collapsibles, on affiche tous les champs
+    if (isSearchSectionExpanded && hasCollapsibleFields) {
+      return collapsibleFields;
+    }
+
+    // Si la section est collapsée et qu'on a des champs toujours visibles, on les affiche
+    if (hasAlwaysVisibleFields) {
+      return alwaysVisibleFields;
+    }
+
+    // Par défaut, afficher les enfants
+    return children;
+  };
+
+  // Bouton pour étendre/réduire les champs additionnels
+  const renderToggleButton = () => {
+    if (!hasCollapsibleFields) return null;
+    if (isSearchSectionExpanded) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+        item: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}),
+          onClick: toggleSearchSection,
+          color: "tertiary",
+          children: "Moins d'options"
+        })
+      });
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+        item: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+          startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+          onClick: toggleSearchSection,
+          color: "tertiary",
+          children: "Plus d'options"
+        })
+      });
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiDefaultPage.default, {
     title: title,
     titleIcon: titleIcon,
@@ -77,11 +147,24 @@ const PuiSearchPage = _ref2 => {
     retour: retour,
     onRetour: onRetour,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiSection.default, {
-      title: "Param\xE8tres de recherche",
+      title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        onClick: collapsibleSearchSection ? toggleSearchSection : undefined,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          cursor: collapsibleSearchSection ? "pointer" : "default"
+        },
+        children: [collapsibleSearchSection && (isSearchSectionExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandLess.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {})), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            marginLeft: collapsibleSearchSection ? "8px" : "0px"
+          },
+          children: "Param\xE8tres de recherche"
+        })]
+      }),
       sx: {
         marginBottom: 2
       },
-      children: formik ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.Formik, _objectSpread(_objectSpread({
+      children: shouldRenderSearchContent() && (formik ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_formik.Formik, _objectSpread(_objectSpread({
         initialValues: {}
       }, formikProps), {}, {
         children: _ref3 => {
@@ -116,18 +199,16 @@ const PuiSearchPage = _ref2 => {
                     loadingPosition: "start",
                     children: "Rechercher"
                   })
-                }), additionalActions && additionalActions.map((actionItem, index) => {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-                    item: true,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-                      startIcon: actionItem.icon,
-                      onClick: actionItem.action,
-                      children: actionItem.name
-                    })
-                  }, index);
-                })]
+                }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+                  item: true,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+                    startIcon: actionItem.icon,
+                    onClick: actionItem.action,
+                    children: actionItem.name
+                  })
+                }, index)), hasCollapsibleFields && renderToggleButton()]
               }),
-              children: _children
+              children: renderSearchFields()
             })
           });
         }
@@ -157,22 +238,22 @@ const PuiSearchPage = _ref2 => {
               loadingPosition: "start",
               children: "Rechercher"
             })
-          }), additionalActions && additionalActions.map((actionItem, index) => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
-              item: true,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
-                startIcon: actionItem.icon,
-                onClick: actionItem.action,
-                children: actionItem.name
-              })
-            }, index);
-          })]
+          }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiGrid.default, {
+            item: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiButton.default, {
+              startIcon: actionItem.icon,
+              onClick: actionItem.action,
+              children: actionItem.name
+            })
+          }, index)), hasCollapsibleFields && renderToggleButton()]
         }),
-        children: _children
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTable.default, _objectSpread({
+        children: renderSearchFields()
+      }))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTable.default, _objectSpread(_objectSpread({
       paginationMode: "server"
-    }, tableProps))]
+    }, tableProps), {}, {
+      pinnedColumns: tableProps.pinnedColumns // Added pinnedColumns
+    }))]
   });
 };
 PuiSearchPage.propTypes = {
@@ -185,7 +266,9 @@ PuiSearchPage.propTypes = {
   topNav: _propTypes.default.bool,
   bottomNav: _propTypes.default.bool,
   loading: _propTypes.default.bool,
-  tableProps: _propTypes.default.object,
+  tableProps: _propTypes.default.shape({
+    pinnedColumns: _propTypes.default.object // Added pinnedColumns prop type
+  }),
   retour: _propTypes.default.bool,
   onRetour: _propTypes.default.func,
   onReset: _propTypes.default.func,
@@ -194,11 +277,17 @@ PuiSearchPage.propTypes = {
     name: _propTypes.default.string.isRequired,
     action: _propTypes.default.func.isRequired,
     icon: _propTypes.default.element
-  }))
+  })),
+  collapsibleSearchSection: _propTypes.default.bool,
+  alwaysVisibleFields: _propTypes.default.node,
+  collapsibleFields: _propTypes.default.node
 };
 PuiSearchPage.defaultProps = {
   formik: true,
   loading: false,
-  additionalActions: []
+  additionalActions: [],
+  collapsibleSearchSection: true,
+  alwaysVisibleFields: null,
+  collapsibleFields: null
 };
 var _default = exports.default = PuiSearchPage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portnet/ui",
-  "version": "1.1.9",
+  "version": "2.0.1",
   "description": "Portnet UI",
   "keywords": [
     "react",
@@ -21,13 +21,13 @@
     "@mui/material": "^5.10.16",
     "@mui/x-data-grid": "^5.17.26",
     "@mui/x-data-grid-pro": "^5.17.26",
-    "@mui/x-date-pickers": "^7.26.0",
+    "@mui/x-date-pickers": "^5.0.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "ajv": "^8.17.1",
+    "ajv": "^6.12.6",
+    "ajv-keywords": "^3.5.2",
     "axios": "^0.27.2",
-    "dayjs": "^1.11.13",
     "formik": "^2.2.9",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",