@portnet/ui 2.0.5 → 2.0.7

package/dist/components/inputs/PuiSelect.js

@@ -39,27 +39,22 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
 }))))(() => {
   return {
     "&.MuiFormControl-root": {
-      "& .MuiSelect-select": {
-        minHeight: "auto",
-        height: "1.4375em",
-        display: "flex",
-        alignItems: "center",
-        lineHeight: "1"
-      },
+      marginBottom: "16px",
+      transition: "all 0.2s ease",
       "&.required .MuiInputBase-root": {
-        backgroundColor: _apperance.palette.background.required
+        backgroundColor: "".concat(_apperance.palette.background.required)
       },
       "& .MuiFormLabel-root": {
         zIndex: 0,
         lineSpacing: "-0.03em",
         position: "initial",
         transform: "none",
-        fontSize: "0.8rem",
+        fontSize: "0.85rem",
         fontWeight: "600",
-        marginBottom: "4px",
+        marginBottom: "6px",
         color: _apperance.palette.gray.darker,
-        "&.Mui-focused ": {
-          lineHeight: "1.4375em",
+        transition: "color 0.2s ease",
+        "&.Mui-focused": {
           color: _apperance.palette.primary
         },
         "&.Mui-disabled": {
@@ -71,30 +66,59 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
       },
       "& .MuiInputBase-root": {
         backgroundColor: _apperance.palette.white,
-        border: "2px solid ".concat(_apperance.palette.gray.dark),
-        borderRadius: "5px",
-        "&.Mui-focused ": {
-          border: "2px solid ".concat(_apperance.palette.primary)
+        border: "1px solid ".concat(_apperance.palette.gray.dark),
+        borderRadius: "8px",
+        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
+        transition: "all 0.3s ease",
+        "&:hover:not(.Mui-disabled):not(.Mui-error)": {
+          borderColor: "".concat(_apperance.palette.primary, "80"),
+          boxShadow: "0 3px 6px rgba(0, 0, 0, 0.08)"
+        },
+        "&.Mui-focused": {
+          border: "2px solid ".concat(_apperance.palette.primary),
+          boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20")
         },
-        "&.Mui-error ": {
+        "&.Mui-error": {
           border: "2px solid ".concat(_apperance.palette.error),
-          backgroundColor: _apperance.palette.background.error
+          backgroundColor: _apperance.palette.background.error,
+          boxShadow: "0 0 0 3px ".concat(_apperance.palette.error, "20")
         },
-        "&.Mui-disabled ": {
+        "&.Mui-disabled": {
+          opacity: 0.7,
+          border: "1px solid ".concat(_apperance.palette.gray.main),
           backgroundColor: "".concat(_apperance.palette.secondary)
         },
-        "& .MuiInputBase-input": {
-          padding: "1px 6px",
-          fontSize: "0.7rem"
+        "& .MuiSelect-select": {
+          lineHeight: "1.5",
+          padding: "12px 14px",
+          fontSize: "0.9rem",
+          fontWeight: 400,
+          color: "rgba(0, 0, 0, 0.85)",
+          minHeight: "auto",
+          display: "flex",
+          alignItems: "center"
         },
         "& .MuiSvgIcon-root": {
-          marginRight: "2px"
+          fontSize: "1.2rem",
+          color: _apperance.palette.gray.dark,
+          marginRight: "8px",
+          transition: "transform 0.2s ease"
+        },
+        "&.Mui-focused .MuiSvgIcon-root": {
+          transform: "rotate(180deg)",
+          color: _apperance.palette.primary
         }
       },
       "& .MuiFormHelperText-root": {
-        fontWeight: "bold",
-        fontSize: ".7rem",
-        color: _apperance.palette.gray.darker
+        marginTop: "6px",
+        marginLeft: "4px",
+        fontWeight: "500",
+        fontSize: "0.75rem",
+        color: _apperance.palette.gray.darker,
+        transition: "color 0.2s ease",
+        "&.Mui-error": {
+          color: _apperance.palette.error
+        }
       },
       "& fieldset": {
         display: "none"
@@ -169,17 +193,46 @@ const PuiStandardSelect = _ref => {
       },
       MenuProps: {
         sx: {
+          "& .MuiPaper-root": {
+            marginTop: "4px",
+            borderRadius: "8px",
+            boxShadow: "0 6px 16px rgba(0, 0, 0, 0.1)",
+            border: "1px solid ".concat(_apperance.palette.gray.light),
+            overflow: "hidden"
+          },
           "& .MuiMenu-list": {
-            padding: 0,
-            "& .MuiMenuItem-root:not(:last-child)": {
-              borderBottom: "1px solid ".concat(_apperance.palette.gray.light)
-            },
+            padding: "4px 0",
             "& .MuiMenuItem-root": {
-              fontSize: 13,
-              height: "fit-content",
-              minHeight: "auto"
+              fontSize: "0.9rem",
+              padding: "8px 16px",
+              borderRadius: "0",
+              transition: "all 0.2s ease",
+              height: "auto",
+              minHeight: "40px",
+              "&:hover": {
+                backgroundColor: "rgba(24, 144, 255, 0.05)"
+              },
+              "&.Mui-selected": {
+                backgroundColor: "rgba(24, 144, 255, 0.1)",
+                color: _apperance.palette.primary,
+                fontWeight: 500,
+                "&:hover": {
+                  backgroundColor: "rgba(24, 144, 255, 0.15)"
+                }
+              },
+              "&:not(:last-child)": {
+                borderBottom: "1px solid ".concat(_apperance.palette.gray.light)
+              }
             }
           }
+        },
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
         }
       }
     }, rest), {}, {

package/dist/components/table/PuiTable.js

@@ -6,7 +6,7 @@ require("core-js/modules/esnext.iterator.for-each.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.PuiTableHeader = void 0;
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/es.string.includes.js");
@@ -20,18 +20,19 @@ var _PuiTooltip = _interopRequireDefault(require("../others/PuiTooltip"));
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 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", "stickyColumns", "pinnedColumns"]; // Styles personnalisés pour le tableau
+const _excluded = ["field", "headerName", "width", "renderCell", "sortable", "align"],
+  _excluded2 = ["id", "className", "sx", "elevate", "rows", "rowCount", "columns", "paginationMode", "page", "pageSize", "checkboxSelection", "loading", "stripped", "actions", "oneActionOnly", "onSelect", "onPageChange", "onPageSizeChange", "stickyColumns", "pinnedColumns", "getRowId", "onSelectionModelChange", "selectionModel", "onRowClick", "highlightHoveredRow", "stickyHeader", "hideFooter", "hideFooterPagination", "components", "componentsProps", "getRowClassName", "onActionClick"];
 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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-const tableCustomStyles = "\n  /* Styles g\xE9n\xE9raux am\xE9lior\xE9s */\n  .pui-table {\n    border-radius: 10px;\n    overflow: hidden;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n  \n  .pui-table .ant-table {\n    border-radius: 8px;\n  }\n  \n  .pui-table .ant-table-thead > tr > th {\n    background-color: #f7f9fc;\n    color: #1f2937;\n    font-weight: 600;\n    padding: 12px 16px;\n    border-bottom: 2px solid #e5e7eb;\n    transition: background-color 0.2s;\n  }\n  \n  .pui-table .ant-table-thead > tr > th:hover {\n    background-color: #eef2ff;\n  }\n  \n  .pui-table .ant-table-tbody > tr > td {\n    padding: 12px 16px;\n    transition: all 0.2s ease;\n  }\n  \n  /* Couleurs altern\xE9es plus contrast\xE9es */\n  .pui-table .ant-table-tbody > tr.ant-table-row-light > td {\n    background-color: #ffffff;\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-dark > td {\n    background-color: #f4f6f8;\n  }\n  \n  /* Effet de survol doux */\n  .pui-table .ant-table-tbody > tr:hover > td {\n    background-color: rgba(24, 144, 255, 0.1) !important;\n    transition: background-color 0.3s ease;\n  }\n  \n  /* Indicateur visuel sans d\xE9placement */\n  .pui-table .ant-table-tbody > tr {\n    position: relative;\n  }\n  \n  .pui-table .ant-table-tbody > tr:hover {\n    box-shadow: inset 0 0 0 1px rgba(24, 144, 255, 0.3);\n  }\n  \n  .pui-table .ant-table-tbody > tr > td:first-child {\n    position: relative;\n  }\n  \n  .pui-table .ant-table-tbody > tr:hover > td:first-child::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n    width: 3px;\n    background-color: #1890ff;\n    animation: pulse 1.5s infinite;\n  }\n  \n  /* Styles des lignes s\xE9lectionn\xE9es */\n  .pui-table .ant-table-tbody > tr.ant-table-row-selected > td {\n    background-color: rgba(24, 144, 255, 0.05);\n    border-left: none !important;\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-selected > td:first-child {\n    position: relative;\n  }\n  \n  /* Indicateur anim\xE9 discret pour lignes s\xE9lectionn\xE9es */\n  .pui-table .ant-table-tbody > tr.ant-table-row-selected > td:first-child::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n    width: 3px;\n    background-color: rgba(24, 144, 255, 0.7);\n    animation: pulse 2s infinite;\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-selected:hover > td {\n    background-color: rgba(24, 144, 255, 0.15) !important;\n  }\n  \n  /* Styles des lignes en \xE9dition */\n  .pui-table .ant-table-tbody > tr.ant-table-row-editing {\n    background-color: rgba(24, 144, 255, 0.1) !important;\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-editing > td {\n    border-bottom: 1px solid #1890ff !important;\n    border-top: 1px solid #1890ff !important;\n  }\n  \n  .pui-table .ant-table-tbody > tr:first-child.ant-table-row-editing > td {\n    border-top: 2px solid #1890ff !important;\n  }\n  \n  .pui-table .ant-table-tbody > tr:last-child.ant-table-row-editing > td {\n    border-bottom: 2px solid #1890ff !important;\n  }\n  \n  /* Animation pour l'indicateur de ligne */\n  @keyframes pulse {\n    0% { opacity: 0.5; }\n    50% { opacity: 1; }\n    100% { opacity: 0.5; }\n  }\n  \n  /* Pagination ergonomique */\n  .pui-table-pagination {\n    padding: 14px 24px;\n    gap: 16px;\n  }\n  \n  .pui-table-pagination .ant-pagination-item,\n  .pui-table-pagination .ant-pagination-prev button,\n  .pui-table-pagination .ant-pagination-next button {\n    height: 36px;\n    min-width: 36px;\n  }\n  \n  .pui-table-pagination .ant-pagination-item {\n    border-radius: 6px;\n    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    border: 1px solid #e2e8f0;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  .pui-table-pagination .ant-pagination-item a {\n    padding: 0 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n  }\n  \n  .pui-table-pagination .ant-pagination-prev,\n  .pui-table-pagination .ant-pagination-next {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  .pui-table-pagination .ant-pagination-item:hover,\n  .pui-table-pagination .ant-pagination-prev:hover button,\n  .pui-table-pagination .ant-pagination-next:hover button {\n    transform: translateY(-2px);\n    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);\n    border-color: #bfdbfe;\n    color: #1890ff;\n    z-index: 2;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active {\n    background: linear-gradient(135deg, #1890ff, #0050b3);\n    border-color: transparent !important;\n    font-weight: 600;\n    position: relative;\n    z-index: 1;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active::after {\n    content: '';\n    position: absolute;\n    inset: -1px;\n    background: linear-gradient(135deg, #40a9ff, #1890ff);\n    border-radius: 7px;\n    z-index: -1;\n    opacity: 0;\n    transition: opacity 0.3s;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active:hover::after {\n    opacity: 1;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active a {\n    color: white !important;\n    font-weight: 600;\n    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n  }\n  \n  .pui-table-pagination .ant-pagination-options {\n    margin-left: 16px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  \n  .pui-table-pagination .ant-select-selector {\n    border-radius: 6px !important;\n    height: 32px !important;\n    padding: 0 8px !important;\n    border-color: #e2e8f0 !important;\n    transition: all 0.2s !important;\n  }\n  \n  .pui-table-pagination .ant-select:hover .ant-select-selector {\n    border-color: #bfdbfe !important;\n  }\n  \n  .pui-table-pagination .ant-select-focused .ant-select-selector {\n    border-color: #1890ff !important;\n    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;\n  }\n  \n  .pui-table-pagination .ant-select-selection-item {\n    line-height: 30px !important;\n    font-weight: 500;\n  }\n  \n  .pui-table-pagination .ant-pagination-options-quick-jumper {\n    margin-left: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n    color: #4b5563;\n  }\n  \n  .pui-table-pagination .ant-pagination-options-quick-jumper input {\n    border-radius: 6px;\n    transition: all 0.2s;\n    height: 32px;\n    border-color: #e2e8f0;\n    width: 50px;\n    padding: 4px 8px;\n    text-align: center;\n  }\n  \n  .pui-table-pagination .ant-pagination-options-quick-jumper input:hover {\n    border-color: #bfdbfe;\n  }\n  \n  .pui-table-pagination .ant-pagination-options-quick-jumper input:focus {\n    border-color: #1890ff;\n    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n  }\n  \n  .pui-table-total-items {\n    color: #4b5563;\n    font-size: 14px;\n    font-weight: 500;\n    background-color: rgba(255, 255, 255, 0.7);\n    padding: 6px 12px;\n    border-radius: 6px;\n    border: 1px solid #e2e8f0;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n  \n  .pui-table-total-items strong {\n    color: #1f2937;\n    background-color: #f1f5f9;\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-weight: 600;\n    min-width: 40px;\n    text-align: center;\n  }\n  \n  @media (max-width: 640px) {\n    .pui-table-pagination {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n    \n    .pui-table-pagination .ant-pagination {\n      width: 100%;\n      justify-content: center;\n    }\n    \n    .pui-table-total-items {\n      align-self: center;\n    }\n  }\n";
+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); } // Styles personnalisés pour le tableau
+const tableCustomStyles = "\n  /* Styles g\xE9n\xE9raux du tableau - inspir\xE9 du design de r\xE9f\xE9rence */\n  .pui-table {\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n    background-color: #ffffff;\n  }\n  \n  .pui-table .ant-table {\n    border-radius: 8px;\n  }\n  \n  /* En-t\xEAtes de colonnes */\n  .pui-table .ant-table-thead > tr > th {\n    background-color: #f9fafb;\n    color: #374151;\n    font-weight: 600;\n    font-size: 0.875rem;\n    padding: 12px 16px;\n    border-bottom: 1px solid #e5e7eb;\n    transition: background-color 0.2s;\n  }\n  \n  .pui-table .ant-table-thead > tr > th:hover {\n    background-color: #f3f4f6;\n  }\n  \n  /* Cellules du tableau */\n  .pui-table .ant-table-tbody > tr > td {\n    padding: 12px 16px;\n    border-bottom: 1px solid #f3f4f6;\n    color: #111827;\n    font-size: 0.875rem;\n    transition: background-color 0.2s ease;\n  }\n  \n  /* Lignes altern\xE9es */\n  .pui-table .ant-table-tbody > tr:nth-child(even) > td {\n    background-color: #f9fafb;\n  }\n  \n  .pui-table .ant-table-tbody > tr:nth-child(odd) > td {\n    background-color: #ffffff;\n  }\n  \n  /* Effet de survol */\n  .pui-table .ant-table-tbody > tr:hover > td {\n    background-color: #f3f4f6 !important;\n  }\n  \n  /* Styles des lignes s\xE9lectionn\xE9es */\n  .pui-table .ant-table-tbody > tr.ant-table-row-selected > td {\n    background-color: rgba(59, 130, 246, 0.05);\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-selected:hover > td {\n    background-color: rgba(59, 130, 246, 0.1) !important;\n  }\n  \n  /* Styles des statuts */\n  .pui-table .status-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.5;\n  }\n  \n  .pui-table .status-badge.cancelled {\n    background-color: #fee2e2;\n    color: #b91c1c;\n  }\n  \n  .pui-table .status-badge.delivered {\n    background-color: #dcfce7;\n    color: #15803d;\n  }\n  \n  .pui-table .status-badge.ready {\n    background-color: #e0f2fe;\n    color: #0369a1;\n  }\n  \n  .pui-table .status-badge.on-the-way {\n    background-color: #fef3c7;\n    color: #92400e;\n  }\n  \n  /* Pagination */\n  .pui-table-pagination {\n    padding: 12px 16px;\n    border-top: 1px solid #f3f4f6;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  \n  .pui-table-pagination .ant-pagination {\n    margin: 0;\n  }\n  \n  .pui-table-pagination .ant-pagination-item,\n  .pui-table-pagination .ant-pagination-prev button,\n  .pui-table-pagination .ant-pagination-next button {\n    border-radius: 6px;\n    border: 1px solid #e5e7eb;\n    height: 32px;\n    min-width: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  .pui-table-pagination .ant-pagination-item:hover,\n  .pui-table-pagination .ant-pagination-prev:hover button,\n  .pui-table-pagination .ant-pagination-next:hover button {\n    border-color: #d1d5db;\n    color: #4b5563;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active {\n    background-color: #3b82f6;\n    border-color: #3b82f6;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active a {\n    color: white;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active:hover {\n    background-color: #2563eb;\n    border-color: #2563eb;\n  }\n  \n  /* Styles pour la colonne d'actions */\n  .pui-table .actions-column {\n    white-space: nowrap !important;\n    overflow: visible !important;\n  }\n  \n  .pui-table .action-button {\n    padding: 4px 8px !important;\n    margin: 0 2px !important;\n    min-width: auto !important;\n    height: 28px !important;\n    line-height: 20px !important;\n    transition: all 0.2s !important;\n  }\n  \n  .pui-table .action-button:hover {\n    background-color: rgba(24, 144, 255, 0.1) !important;\n    color: #1890ff !important;\n  }\n  \n  /* Bouton Cr\xE9er */\n  .pui-create-button {\n    background-color: #3b82f6;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    padding: 8px 16px;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s;\n  }\n  \n  .pui-create-button:hover {\n    background-color: #2563eb;\n  }\n  \n  /* Titre de la page */\n  .pui-table-title {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #111827;\n    margin-bottom: 16px;\n  }\n";
 
 // Injection des styles dans le document
 const injectStyles = () => {
@@ -54,29 +55,58 @@ const removeStyles = () => {
   }
 };
 
-// Composant pour les actions du tableau
+// Composant pour les boutons d'action
 const TableActions = _ref => {
   let {
     row,
     actions
   } = _ref;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const handleActionClick = action => {
-    if (typeof action === 'function') {
-      action(row);
-    }
+  // Empêcher la propagation des événements au niveau du conteneur
+  const handleContainerClick = e => {
+    e.preventDefault();
+    e.stopPropagation();
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
     size: "small",
-    children: actions.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
-      title: action.title || '',
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
-        type: "text",
-        icon: action.icon,
-        size: "small",
-        onClick: () => handleActionClick(action.action)
-      })
-    }, index))
+    onClick: handleContainerClick // Arrêter la propagation au niveau du conteneur
+    ,
+    onMouseDown: handleContainerClick // Capturer également les événements mousedown
+    ,
+    style: {
+      display: 'inline-flex'
+    },
+    children: actions.map((action, index) => {
+      // Si l'action a une condition et que la condition n'est pas remplie, ne pas afficher le bouton
+      if (action.condition && !action.condition(row)) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: action.tooltip || action.label,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+          type: "text",
+          icon: action.icon,
+          onClick: e => {
+            // Empêcher la propagation et le comportement par défaut
+            e.preventDefault();
+            e.stopPropagation();
+            // Appeler la fonction onClick de l'action
+            if (typeof action.onClick === 'function') {
+              action.onClick(row);
+            } else if (typeof action.action === 'function') {
+              // Pour la rétrocompatibilité
+              action.action(row);
+            }
+          },
+          onMouseDown: e => {
+            // Empêcher également la propagation des événements mousedown
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          className: "action-button",
+          "aria-label": action.label
+        })
+      }, index);
+    })
   });
 };
 
@@ -91,65 +121,249 @@ const customRenderEmpty = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
   })
 });
 
-// Convertir les colonnes du format DataGrid au format Ant Design
-const convertColumns = (columns, actions, handleSort) => {
-  const processedColumns = columns.map(column => {
-    const antColumn = {
-      title: column.headerName,
-      dataIndex: column.field,
-      key: column.field,
-      width: column.width,
-      sorter: column.sortable !== false,
-      ellipsis: true,
-      className: column.cellClassName
-    };
+// Fonction pour rendre les badges de statut
+const renderStatusBadge = status => {
+  if (!status) return null;
+  const statusText = status.toString().toLowerCase();
+  let className = 'status-badge';
+  if (statusText.includes('cancel')) {
+    className += ' cancelled';
+  } else if (statusText.includes('deliver')) {
+    className += ' delivered';
+  } else if (statusText.includes('ready')) {
+    className += ' ready';
+  } else if (statusText.includes('way') || statusText.includes('progress')) {
+    className += ' on-the-way';
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: className,
+    children: status
+  });
+};
+
+// Fonction pour transformer les colonnes et ajouter le rendu des badges de statut
+const transformColumns = columns => {
+  return columns.map(column => {
+    var _newColumn$title;
+    const newColumn = _objectSpread({}, column);
+
+    // Si c'est une colonne de statut, ajouter le rendu personnalisé
+    if (newColumn.dataIndex === 'status' || newColumn.key === 'status' || ((_newColumn$title = newColumn.title) === null || _newColumn$title === void 0 ? void 0 : _newColumn$title.toString().toLowerCase()) === 'status') {
+      newColumn.render = text => renderStatusBadge(text);
+    }
+
+    // Ajouter d'autres transformations si nécessaire
+
+    return newColumn;
+  });
+};
 
-    // Gestion du rendu personnalisé
-    if (column.renderCell) {
-      antColumn.render = (text, record) => column.renderCell({
+// Convertir les colonnes du format DataGrid au format Ant Design
+const convertColumns = (columns, onActionClick, actions) => {
+  if (!columns) return [];
+  const antColumns = columns.map(column => {
+    const {
+        field,
+        headerName,
+        width,
+        renderCell,
+        sortable,
+        align
+      } = column,
+      rest = _objectWithoutProperties(column, _excluded);
+    return _objectSpread({
+      title: headerName,
+      dataIndex: field,
+      key: field,
+      width,
+      sorter: sortable,
+      align: align || 'left',
+      render: renderCell ? (text, record) => renderCell({
         row: record,
         value: text
-      });
-    } else if (column.valueGetter) {
-      antColumn.render = (text, record) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
-        title: column.titleGetter ? column.titleGetter(record) : String(column.valueGetter({
-          row: record
-        })),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: column.valueGetter({
-            row: record
-          })
-        })
-      });
-    } else if (column.field) {
-      antColumn.render = (text, record) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
-        title: column.titleGetter ? column.titleGetter(record) : String(record[column.field] || ''),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: record[column.field]
-        })
-      });
-    }
-    return antColumn;
+      }) : undefined
+    }, rest);
   });
 
-  // Ajouter la colonne d'actions si nécessaire
+  // Ajouter une colonne d'actions si des actions sont fournies
   if (actions && actions.length > 0) {
-    processedColumns.push({
+    antColumns.push({
       title: 'Actions',
-      key: 'action',
+      key: 'actions',
       width: 100,
       align: 'center',
       render: (_, record) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TableActions, {
         row: record,
         actions: actions
-      })
+      }),
+      // Empêcher le tri sur la colonne d'actions
+      sorter: false,
+      // Empêcher le filtrage sur la colonne d'actions
+      filterable: false
     });
   }
-  return processedColumns;
+
+  // Appliquer les transformations pour les badges de statut et autres styles
+  return transformColumns(antColumns);
+};
+
+// Composant de pagination ergonomique personnalisé
+const PuiTablePagination = _ref2 => {
+  let {
+    current,
+    pageSize,
+    total,
+    onChange
+  } = _ref2;
+  // Calculer le nombre total de pages
+  const totalPages = Math.ceil(total / pageSize);
+
+  // Calculer la plage d'éléments affichés
+  const startItem = (current - 1) * pageSize + 1;
+  const endItem = Math.min(current * pageSize, total);
+
+  // Fonction pour aller à la page précédente
+  const goToPrevPage = () => {
+    if (current > 1) {
+      onChange(current - 1, pageSize);
+    }
+  };
+
+  // Fonction pour aller à la page suivante
+  const goToNextPage = () => {
+    if (current < totalPages) {
+      onChange(current + 1, pageSize);
+    }
+  };
+
+  // Fonction pour générer les numéros de page à afficher
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 5; // Nombre maximum de pages visibles
+
+    // Toujours afficher la première page
+    pages.push(1);
+
+    // Calculer la plage de pages à afficher
+    let startPage = Math.max(2, current - Math.floor(maxVisiblePages / 2));
+    let endPage = Math.min(totalPages - 1, startPage + maxVisiblePages - 3);
+
+    // Ajuster la plage si nécessaire
+    if (endPage < startPage) {
+      endPage = startPage;
+    }
+
+    // Ajouter des ellipses si nécessaire
+    if (startPage > 2) {
+      pages.push('ellipsis1');
+    }
+
+    // Ajouter les pages intermédiaires
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+
+    // Ajouter des ellipses si nécessaire
+    if (endPage < totalPages - 1) {
+      pages.push('ellipsis2');
+    }
+
+    // Toujours afficher la dernière page si elle existe
+    if (totalPages > 1) {
+      pages.push(totalPages);
+    }
+    return pages;
+  };
+
+  // Style pour les boutons de pagination
+  const buttonStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '32px',
+    height: '32px',
+    margin: '0 4px',
+    borderRadius: '4px',
+    border: '1px solid #d9d9d9',
+    backgroundColor: '#fff',
+    cursor: 'pointer',
+    transition: 'all 0.2s',
+    color: '#666',
+    fontWeight: 'normal',
+    fontSize: '14px',
+    lineHeight: '32px',
+    userSelect: 'none'
+  };
+
+  // Style pour le bouton de page active
+  const activeButtonStyle = _objectSpread(_objectSpread({}, buttonStyle), {}, {
+    backgroundColor: '#1890ff',
+    borderColor: '#1890ff',
+    color: '#fff',
+    fontWeight: 'bold'
+  });
+
+  // Style pour les boutons désactivés
+  const disabledButtonStyle = _objectSpread(_objectSpread({}, buttonStyle), {}, {
+    cursor: 'not-allowed',
+    color: '#d9d9d9',
+    backgroundColor: '#f5f5f5'
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        fontSize: '14px',
+        color: '#666'
+      },
+      children: ["Affichage de ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+        children: startItem
+      }), " \xE0 ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+        children: endItem
+      }), " sur ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+        children: total
+      }), " \xE9l\xE9ments"]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: current === 1 ? disabledButtonStyle : buttonStyle,
+        onClick: current === 1 ? undefined : goToPrevPage,
+        title: "Page pr\xE9c\xE9dente",
+        children: "<"
+      }), getPageNumbers().map((page, index) => {
+        if (page === 'ellipsis1' || page === 'ellipsis2') {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: _objectSpread(_objectSpread({}, buttonStyle), {}, {
+              border: 'none',
+              cursor: 'default'
+            }),
+            children: "..."
+          }, page);
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: page === current ? activeButtonStyle : buttonStyle,
+          onClick: () => page !== current && onChange(page, pageSize),
+          children: page
+        }, page);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: current === totalPages ? disabledButtonStyle : buttonStyle,
+        onClick: current === totalPages ? undefined : goToNextPage,
+        title: "Page suivante",
+        children: ">"
+      })]
+    })]
+  });
 };
 
 // Composant principal PuiTable avec Ant Design
-const PuiTable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
       id,
       className,
@@ -170,11 +384,23 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       onPageChange,
       onPageSizeChange,
       stickyColumns = [],
-      pinnedColumns
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+      pinnedColumns,
+      getRowId,
+      onSelectionModelChange,
+      selectionModel,
+      onRowClick,
+      highlightHoveredRow,
+      stickyHeader,
+      hideFooter,
+      hideFooterPagination,
+      components,
+      componentsProps,
+      getRowClassName,
+      onActionClick
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
   // Convertir les colonnes au format Ant Design
-  const antColumns = React.useMemo(() => convertColumns(columns, actions), [columns, actions]);
+  const antColumns = React.useMemo(() => convertColumns(columns, onActionClick, actions), [columns, onActionClick, actions]);
 
   // Gérer la sélection
   const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
@@ -227,8 +453,60 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     injectStyles();
     return () => removeStyles();
   }, []);
+
+  // Mettre à jour les lignes sélectionnées lorsque selectionModel change
+  React.useEffect(() => {
+    if (selectionModel) {
+      setSelectedRowKeys(selectionModel);
+    }
+  }, [selectionModel]);
+
+  // Gérer le changement de sélection
+  const handleSelectionChange = newSelectedRowKeys => {
+    setSelectedRowKeys(newSelectedRowKeys);
+    if (onSelectionModelChange) {
+      onSelectionModelChange(newSelectedRowKeys);
+    }
+  };
+
+  // Gérer le clic sur une ligne
+  const handleRowClick = record => {
+    if (onRowClick) {
+      onRowClick(record);
+    }
+  };
+
+  // Obtenir les propriétés de ligne (pour les événements et les classes)
+  const getRowProps = record => {
+    const rowId = getRowId ? getRowId(record) : record.id;
+    const isSelected = selectedRowKeys.includes(rowId);
+    return {
+      onClick: e => {
+        // Ne déclencher le clic sur la ligne que si l'événement n'a pas été arrêté par un enfant
+        if (!e.isPropagationStopped() && onRowClick) {
+          onRowClick(record);
+        }
+      },
+      className: "".concat(getRowClassName ? getRowClassName(record) : '', " ").concat(isSelected ? 'ant-table-row-selected' : ''),
+      style: {
+        cursor: onRowClick ? 'pointer' : 'default'
+      }
+    };
+  };
+
+  // Calculer le nombre total de pages
+  const totalPages = Math.ceil(rowCount / pageSize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
-    renderEmpty: customRenderEmpty,
+    theme: {
+      components: {
+        Table: {
+          headerBg: '#f9fafb',
+          headerColor: '#374151',
+          borderColor: '#f3f4f6',
+          rowHoverBg: '#f3f4f6'
+        }
+      }
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Spin, {
       spinning: loading,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Table, _objectSpread({
@@ -251,29 +529,22 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           let className = index % 2 === 0 ? 'ant-table-row-light' : 'ant-table-row-dark';
           if (record.isEditing) className += ' ant-table-row-editing';
           return className;
-        }
-      }, rest)), paginationMode !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        },
+        onRow: getRowProps
+      }, rest)), !hideFooter && !hideFooterPagination && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "pui-table-pagination",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "pui-table-total-items",
-          children: ["Total : ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
-            children: rowCount || rows.length
-          }), " \xE9l\xE9ments"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Pagination, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiTablePagination, {
           current: page + 1,
           pageSize: pageSize,
-          total: rowCount || rows.length,
-          onChange: handlePageChange,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          showTotal: total => "".concat(total, " \xE9l\xE9ments"),
-          size: "default",
-          onShowSizeChange: (current, size) => {
-            if (onPageSizeChange) {
-              onPageSizeChange(size);
+          total: rowCount,
+          onChange: (newPage, newPageSize) => {
+            if (newPageSize !== pageSize) {
+              onPageSizeChange && onPageSizeChange(newPageSize);
+            } else {
+              onPageChange && onPageChange(newPage - 1);
             }
           }
-        })]
+        })
       })]
     })
   });
@@ -302,7 +573,19 @@ PuiTable.propTypes = {
   onPageChange: _propTypes.default.func,
   onPageSizeChange: _propTypes.default.func,
   stickyColumns: _propTypes.default.arrayOf(_propTypes.default.string),
-  pinnedColumns: _propTypes.default.object
+  pinnedColumns: _propTypes.default.object,
+  getRowId: _propTypes.default.func,
+  onSelectionModelChange: _propTypes.default.func,
+  selectionModel: _propTypes.default.array,
+  onRowClick: _propTypes.default.func,
+  highlightHoveredRow: _propTypes.default.bool,
+  stickyHeader: _propTypes.default.bool,
+  hideFooter: _propTypes.default.bool,
+  hideFooterPagination: _propTypes.default.bool,
+  components: _propTypes.default.object,
+  componentsProps: _propTypes.default.object,
+  getRowClassName: _propTypes.default.func,
+  onActionClick: _propTypes.default.func
 };
 PuiTable.defaultProps = {
   oneActionOnly: false,
@@ -313,6 +596,51 @@ PuiTable.defaultProps = {
   stripped: false,
   actions: [],
   stickyColumns: [],
-  rows: []
+  rows: [],
+  getRowId: null,
+  onSelectionModelChange: null,
+  selectionModel: null,
+  onRowClick: null,
+  highlightHoveredRow: false,
+  stickyHeader: false,
+  hideFooter: false,
+  hideFooterPagination: false,
+  components: null,
+  componentsProps: null,
+  getRowClassName: null,
+  onActionClick: null
+};
+
+// Composant pour l'en-tête de la table avec titre et bouton de création
+const PuiTableHeader = _ref4 => {
+  let {
+    title,
+    onCreateClick,
+    createButtonText = "Create"
+  } = _ref4;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: '16px'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+      className: "pui-table-title",
+      children: title
+    }), onCreateClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+      type: "primary",
+      onClick: onCreateClick,
+      className: "pui-create-button",
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: {
+          marginRight: '4px'
+        },
+        children: "+"
+      }),
+      children: createButtonText
+    })]
+  });
 };
+exports.PuiTableHeader = PuiTableHeader;
 var _default = exports.default = PuiTable;

package/dist/components/ui/dialogs/PuiSearchDialog.js

@@ -4,18 +4,18 @@ require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.iterator.constructor.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/web.dom-collections.iterator.js");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _PuiDialog = _interopRequireDefault(require("../../others/PuiDialog"));
-var _PuiSection = _interopRequireDefault(require("../../others/PuiSection"));
 var _PuiTable = _interopRequireDefault(require("../../table/PuiTable"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "className", "sx", "open", "title", "maxWidth", "fullWidth", "scroll", "loading", "rowCount", "rows", "page", "pageSize", "columns", "actions", "tableProps", "onPageChange", "onClose", "children"];
+const _excluded = ["id", "className", "sx", "open", "title", "maxWidth", "fullWidth", "scroll", "loading", "rowCount", "rows", "page", "pageSize", "columns", "actions", "tableProps", "onPageChange", "onClose", "onSearch", "onReset", "children"]; // Ant Design imports
 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 }; }
@@ -26,6 +26,63 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const {
+  Title,
+  Text
+} = _antd.Typography;
+const {
+  Panel
+} = _antd.Collapse;
+
+// Styles pour le composant
+const styles = {
+  modal: {
+    top: 20
+  },
+  modalBody: {
+    padding: '0',
+    maxHeight: 'calc(100vh - 120px)',
+    overflow: 'auto'
+  },
+  header: {
+    padding: '16px 24px',
+    borderBottom: '1px solid #f0f0f0',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  title: {
+    margin: 0,
+    fontSize: '18px',
+    fontWeight: 600,
+    color: '#111827'
+  },
+  searchSection: {
+    margin: '0 0 16px 0'
+  },
+  searchHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    cursor: 'pointer',
+    userSelect: 'none'
+  },
+  searchContent: {
+    padding: '16px',
+    backgroundColor: '#f9fafb',
+    borderRadius: '0 0 8px 8px'
+  },
+  footer: {
+    padding: '12px 24px',
+    borderTop: '1px solid #f0f0f0',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: '8px'
+  },
+  tableContainer: {
+    padding: '0 24px 16px 24px'
+  }
+};
 const PuiSearchDialog = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       id,
@@ -46,37 +103,126 @@ const PuiSearchDialog = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       tableProps,
       onPageChange,
       onClose,
+      onSearch,
+      onReset,
       children
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PuiDialog.default, _objectSpread(_objectSpread({
+  const [searchExpanded, setSearchExpanded] = React.useState(true);
+
+  // Fonction pour gérer le clic sur l'en-tête de la section de recherche
+  const toggleSearchSection = e => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    setSearchExpanded(prev => !prev);
+  };
+
+  // Fonction pour créer un gestionnaire d'événements sécurisé
+  const createSafeHandler = action => e => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    if (typeof action === 'function') {
+      action();
+    }
+  };
+
+  // Calcul de la largeur modale en fonction de maxWidth
+  const getModalWidth = () => {
+    const widths = {
+      xs: 480,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920
+    };
+    return maxWidth && widths[maxWidth] ? widths[maxWidth] : '80%';
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Modal, _objectSpread(_objectSpread({
     id: id,
     className: className,
-    sx: sx,
-    ref: ref,
+    style: _objectSpread(_objectSpread({}, styles.modal), sx),
     open: open,
-    title: title,
-    maxWidth: maxWidth,
-    fullWidth: fullWidth,
-    scroll: scroll,
-    onClose: onClose
+    width: getModalWidth(),
+    centered: true,
+    footer: null,
+    closable: false,
+    bodyStyle: styles.modalBody,
+    maskClosable: false
   }, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiSection.default, {
-      title: "Param\xE8tres de recherche",
-      sx: {
-        marginBottom: 2
-      },
-      children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTable.default, _objectSpread(_objectSpread({}, tableProps), {}, {
-      loading: loading,
-      rowCount: rowCount,
-      rows: rows,
-      page: page,
-      pageSize: pageSize,
-      actions: actions,
-      columns: columns,
-      onPageChange: onPageChange
-    }))]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: styles.header,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
+        level: 4,
+        style: styles.title,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {}),
+        onClick: onClose,
+        type: "text",
+        "aria-label": "Fermer"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Spin, {
+      spinning: loading || false,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Card, {
+        style: styles.searchSection,
+        bordered: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Collapse, {
+          defaultActiveKey: searchExpanded ? ['search'] : [],
+          ghost: true,
+          onChange: () => setSearchExpanded(prev => !prev),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, {
+            header: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              style: styles.searchHeader,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SettingOutlined, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
+                strong: true,
+                children: "Param\xE8tres de recherche"
+              }), searchExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UpOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {})]
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              style: styles.searchContent,
+              children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Divider, {
+                style: {
+                  margin: '16px 0'
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+                children: [onReset && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+                  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {}),
+                  onClick: createSafeHandler(onReset),
+                  children: "Effacer"
+                }), onSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+                  type: "primary",
+                  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchOutlined, {}),
+                  onClick: createSafeHandler(onSearch),
+                  children: "Rechercher"
+                })]
+              })]
+            })
+          }, "search")
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: styles.tableContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTable.default, _objectSpread(_objectSpread({}, tableProps), {}, {
+          loading: loading,
+          rowCount: rowCount,
+          rows: rows,
+          page: page,
+          pageSize: pageSize,
+          actions: actions,
+          columns: columns,
+          onPageChange: onPageChange
+        }))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: styles.footer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+        onClick: onClose,
+        children: "Fermer"
+      })
+    })]
   }));
 });
 PuiSearchDialog.propTypes = {
@@ -97,7 +243,9 @@ PuiSearchDialog.propTypes = {
   actions: _propTypes.default.arrayOf(_propTypes.default.element),
   tableProps: _propTypes.default.object,
   onPageChange: _propTypes.default.func,
-  onClose: _propTypes.default.func
+  onClose: _propTypes.default.func,
+  onSearch: _propTypes.default.func,
+  onReset: _propTypes.default.func
 };
 PuiSearchDialog.defaultProps = {
   fullWidth: true,

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

@@ -51,6 +51,16 @@ const styles = {
   }
 };
 
+// Styles CSS pour les boutons "Plus d'options" et "Moins d'options"
+const toggleButtonStyle = {
+  color: '#1890ff',
+  fontWeight: 500,
+  padding: '4px 8px',
+  height: 'auto',
+  marginLeft: '8px',
+  pointerEvents: 'auto' // Assure que les événements sont capturés par le bouton
+};
+
 // Container pour le formulaire de recherche avec design Ant
 const PuiStandardSearchPageContainer = _ref => {
   let {
@@ -121,8 +131,46 @@ const PuiSearchPage = _ref2 => {
     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 dédiée pour gérer le clic sur les boutons "Plus d'options" et "Moins d'options"
+  // Utilisation d'une fonction de type mousedown au lieu de click pour éviter les problèmes de propagation
+  const handleToggleMouseDown = e => {
+    // Empêcher explicitement le comportement par défaut et la propagation
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.nativeEvent) {
+        e.nativeEvent.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    }
+
+    // Utiliser setTimeout pour s'assurer que l'action se produit après la gestion de l'événement
+    setTimeout(() => {
+      setSearchSectionExpanded(prev => !prev);
+    }, 0);
+    return false; // Retourner false pour empêcher le comportement par défaut
+  };
+
+  // Fonction pour gérer le clic sur l'en-tête du panneau de recherche
+  const handleHeaderMouseDown = e => {
+    // Ne traiter le clic que s'il provient directement de l'en-tête
+    // et non d'un élément enfant comme un bouton
+    if (e.target === e.currentTarget || e.target.tagName === 'DIV' || e.target.tagName === 'SPAN') {
+      // Empêcher la propagation et le comportement par défaut
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.nativeEvent) {
+        e.nativeEvent.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+      }
+
+      // Utiliser setTimeout pour s'assurer que l'action se produit après la gestion de l'événement
+      setTimeout(() => {
+        setSearchSectionExpanded(prev => !prev);
+      }, 0);
+    }
+    return false; // Retourner false pour empêcher le comportement par défaut
   };
 
   // Fonction pour rendre le contenu des champs en fonction de leur visibilité
@@ -149,29 +197,89 @@ const PuiSearchPage = _ref2 => {
   // Bouton pour étendre/réduire les champs additionnels
   const renderToggleButton = () => {
     if (!hasCollapsibleFields) return null;
+
+    // Utiliser un div au lieu d'un Button pour éviter les problèmes de propagation
     if (isSearchSectionExpanded) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UpOutlined, {}),
-        onClick: toggleSearchSection,
-        type: "link",
-        children: "Moins d'options"
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        role: "button",
+        tabIndex: 0,
+        onMouseDown: handleToggleMouseDown,
+        onClick: e => e.preventDefault(),
+        style: _objectSpread(_objectSpread({}, toggleButtonStyle), {}, {
+          display: 'inline-flex',
+          alignItems: 'center',
+          cursor: 'pointer'
+        }),
+        className: "toggle-options-button",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UpOutlined, {
+          style: {
+            marginRight: '4px'
+          }
+        }), " Moins d'options"]
       });
     } else {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {}),
-        onClick: toggleSearchSection,
-        type: "link",
-        children: "Plus d'options"
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        role: "button",
+        tabIndex: 0,
+        onMouseDown: handleToggleMouseDown,
+        onClick: e => e.preventDefault(),
+        style: _objectSpread(_objectSpread({}, toggleButtonStyle), {}, {
+          display: 'inline-flex',
+          alignItems: 'center',
+          cursor: 'pointer'
+        }),
+        className: "toggle-options-button",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {
+          style: {
+            marginRight: '4px'
+          }
+        }), " Plus d'options"]
       });
     }
   };
 
-  // Fonction sécurisée pour appeler une action
-  const handleAction = (action, row) => {
-    if (typeof action === 'function') {
-      return action(row);
+  // Fonction pour créer un gestionnaire d'événements sécurisé pour les boutons sans paramètre
+  const createSafeHandler = action => e => {
+    // Empêcher la propagation de l'événement et le comportement par défaut
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.nativeEvent) {
+        e.nativeEvent.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+      }
     }
-    console.warn('Action is not a function', action);
+
+    // Utiliser setTimeout pour s'assurer que l'action se produit après la gestion de l'événement
+    setTimeout(() => {
+      if (typeof action === 'function') {
+        action();
+      }
+    }, 0);
+    return false; // Retourner false pour empêcher le comportement par défaut
+  };
+
+  // Fonction pour créer un gestionnaire d'événements sécurisé pour les actions avec paramètre row
+  const createRowActionHandler = (action, row) => e => {
+    // Empêcher la propagation de l'événement et le comportement par défaut
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.nativeEvent) {
+        e.nativeEvent.preventDefault();
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    }
+
+    // Utiliser setTimeout pour s'assurer que l'action se produit après la gestion de l'événement
+    setTimeout(() => {
+      if (typeof action === 'function') {
+        action(row);
+      } else {
+        console.warn('Action is not a function', action);
+      }
+    }, 0);
+    return false; // Retourner false pour empêcher le comportement par défaut
   };
 
   // Vérification de sécurité pour tableProps
@@ -182,7 +290,12 @@ const PuiSearchPage = _ref2 => {
 
   // Calcul du titre du panel de recherche avec l'icône
   const searchPanelHeader = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    onClick: collapsibleSearchSection ? toggleSearchSection : undefined,
+    onMouseDown: collapsibleSearchSection ? handleHeaderMouseDown : undefined,
+    onClick: e => e.preventDefault(),
+    style: {
+      cursor: collapsibleSearchSection ? 'pointer' : 'default',
+      userSelect: 'none' // Empêcher la sélection de texte
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
       align: "center",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SettingOutlined, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
@@ -226,7 +339,7 @@ const PuiSearchPage = _ref2 => {
                       title: "Effacer",
                       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
                         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ClearOutlined, {}),
-                        onClick: resetForm,
+                        onClick: createSafeHandler(resetForm),
                         children: "Effacer"
                       })
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
@@ -234,13 +347,13 @@ const PuiSearchPage = _ref2 => {
                       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
                         type: "primary",
                         icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchOutlined, {}),
-                        onClick: submitForm,
+                        onClick: createSafeHandler(submitForm),
                         loading: loading,
                         children: "Rechercher"
                       })
                     }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
                       icon: actionItem.icon,
-                      onClick: () => handleAction(actionItem.action),
+                      onClick: createSafeHandler(() => actionItem.action()),
                       children: actionItem.name
                     }, index)), hasCollapsibleFields && renderToggleButton()]
                   }),
@@ -254,7 +367,7 @@ const PuiSearchPage = _ref2 => {
                 title: "Effacer",
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
                   icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ClearOutlined, {}),
-                  onClick: onReset,
+                  onClick: createSafeHandler(onReset),
                   children: "Effacer"
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
@@ -262,13 +375,13 @@ const PuiSearchPage = _ref2 => {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
                   type: "primary",
                   icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchOutlined, {}),
-                  onClick: onSubmit,
+                  onClick: createSafeHandler(onSubmit),
                   loading: loading,
                   children: "Rechercher"
                 })
               }), additionalActions && additionalActions.map((actionItem, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
                 icon: actionItem.icon,
-                onClick: () => handleAction(actionItem.action),
+                onClick: createSafeHandler(() => actionItem.action()),
                 children: actionItem.name
               }, index)), hasCollapsibleFields && renderToggleButton()]
             }),

package/package.json

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