arengibook 3.0.6-main → 3.0.7-main

package/dist/index.js

@@ -41019,7 +41019,7 @@ var css_248z$4 = "@charset \"UTF-8\";\n@keyframes fadeIn {\n  from {\n    opacit
 styleInject(css_248z$4);
 
 var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
-  var _BADGE_SIZES$badgeSiz, _window$Translator, _window$Translator2;
+  var _window$Translator, _window$Translator2;
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? [] : _ref$value,
     options = _ref.options,
@@ -41037,7 +41037,12 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     _ref$valueStyle = _ref.valueStyle,
     valueStyle = _ref$valueStyle === void 0 ? {} : _ref$valueStyle,
     _ref$optionStyle = _ref.optionStyle,
-    optionStyle = _ref$optionStyle === void 0 ? {} : _ref$optionStyle,
+    optionStyle = _ref$optionStyle === void 0 ? {
+      maxWidth: '250px',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    } : _ref$optionStyle,
     _ref$filter = _ref.filter,
     filter = _ref$filter === void 0 ? false : _ref$filter,
     _ref$invalid = _ref.invalid,
@@ -41051,22 +41056,77 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       labelStyle: null,
       generalIcon: null
     } : _ref$selectMetaConfig,
+    _ref$selectConfig = _ref.selectConfig,
+    selectConfig = _ref$selectConfig === void 0 ? {
+      labelStyle: null,
+      generalIcon: null
+    } : _ref$selectConfig,
     _ref$objValue = _ref.objValue,
     objValue = _ref$objValue === void 0 ? null : _ref$objValue,
     _ref$useCheckbox = _ref.useCheckbox,
     useCheckbox = _ref$useCheckbox === void 0 ? false : _ref$useCheckbox,
     _ref$showSelectAll = _ref.showSelectAll,
-    showSelectAll = _ref$showSelectAll === void 0 ? true : _ref$showSelectAll,
+    showSelectAll = _ref$showSelectAll === void 0 ? true : _ref$showSelectAll;
+    _ref.selectAll;
+    var onSelectAll = _ref.onSelectAll,
     _ref$ongletID = _ref.ongletID,
     ongletID = _ref$ongletID === void 0 ? null : _ref$ongletID,
     _ref$classInput = _ref.classInput,
     classInput = _ref$classInput === void 0 ? null : _ref$classInput,
-    _ref$displayNbOption = _ref.displayNbOption,
-    displayNbOption = _ref$displayNbOption === void 0 ? false : _ref$displayNbOption,
+    _ref$displayCounter = _ref.displayCounter,
+    displayCounter = _ref$displayCounter === void 0 ? false : _ref$displayCounter,
+    maxVisibleCounter = _ref.maxVisibleCounter,
     badgeSize = _ref.badgeSize,
     virtualScroll = _ref.virtualScroll,
     _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
+    required = _ref$required === void 0 ? false : _ref$required,
+    maxSelectedLabels = _ref.maxSelectedLabels,
+    hasInfoLine = _ref.hasInfoLine,
+    _ref$displayBadge = _ref.displayBadge,
+    displayBadge = _ref$displayBadge === void 0 ? false : _ref$displayBadge,
+    _ref$withColor = _ref.withColor,
+    withColor = _ref$withColor === void 0 ? false : _ref$withColor,
+    _ref$withIcon = _ref.withIcon,
+    withIcon = _ref$withIcon === void 0 ? true : _ref$withIcon,
+    _ref$isSelectMeta = _ref.isSelectMeta,
+    isSelectMeta = _ref$isSelectMeta === void 0 ? false : _ref$isSelectMeta,
+    _ref$enableItemToolti = _ref.enableItemTooltip,
+    enableItemTooltip = _ref$enableItemToolti === void 0 ? false : _ref$enableItemToolti,
+    _ref$enableItemLink = _ref.enableItemLink,
+    enableItemLink = _ref$enableItemLink === void 0 ? false : _ref$enableItemLink,
+    _ref$enableSecondaryL = _ref.enableSecondaryLabel,
+    enableSecondaryLabel = _ref$enableSecondaryL === void 0 ? false : _ref$enableSecondaryL,
+    _ref$secondaryLabelKe = _ref.secondaryLabelKey,
+    secondaryLabelKey = _ref$secondaryLabelKe === void 0 ? 'profession' : _ref$secondaryLabelKe,
+    _ref$subItem = _ref.subItem,
+    subItem = _ref$subItem === void 0 ? false : _ref$subItem,
+    truncateAt = _ref.truncateAt,
+    _ref$itemsCheckedToTh = _ref.itemsCheckedToTheTop,
+    itemsCheckedToTheTop = _ref$itemsCheckedToTh === void 0 ? false : _ref$itemsCheckedToTh,
+    _ref$enableSorting = _ref.enableSorting,
+    enableSorting = _ref$enableSorting === void 0 ? false : _ref$enableSorting,
+    _ref$openOnHover = _ref.openOnHover,
+    openOnHover = _ref$openOnHover === void 0 ? false : _ref$openOnHover,
+    readOnly = _ref.readOnly,
+    status = _ref.status,
+    maxSelected = _ref.maxSelected,
+    onClearAll = _ref.onClearAll,
+    onApply = _ref.onApply,
+    valueToapply = _ref.valueToapply,
+    _ref$closeIcon = _ref.closeIcon,
+    closeIcon = _ref$closeIcon === void 0 ? null : _ref$closeIcon,
+    onHide = _ref.onHide;
+    _ref.withSearch;
+    _ref.renderValue;
+    _ref.onModeChange;
+    var _ref$isGroupedOption = _ref.isGroupedOption,
+    isGroupedOption = _ref$isGroupedOption === void 0 ? false : _ref$isGroupedOption,
+    optionGroupChildren = _ref.optionGroupChildren,
+    optionGroupLabel = _ref.optionGroupLabel,
+    _ref$enableGroupSelec = _ref.enableGroupSelect,
+    enableGroupSelect = _ref$enableGroupSelec === void 0 ? false : _ref$enableGroupSelec;
+    _ref.groupedItemTemplateConfig;
+    _ref.maxVisibleChips;
   var _useState = useState(null),
     _useState2 = _slicedToArray$d(_useState, 2),
     selectedOptions = _useState2[0],
@@ -41075,24 +41135,56 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     _useState4 = _slicedToArray$d(_useState3, 2),
     loadedOptions = _useState4[0],
     setLoadedOptions = _useState4[1];
+  var loadedOptionsRef = useRef([]);
   var multiSelectRef = useRef(null);
+  var containerRef = useRef(null);
   var _useState5 = useState(false),
     _useState6 = _slicedToArray$d(_useState5, 2),
     loading = _useState6[0],
     setLoading = _useState6[1];
+  var isLoadingRef = useRef(false);
   var loadLazyTimeout = useRef();
   var currentPageRef = useRef(1);
-  var isOptionsArray = Array.isArray(options);
-  var clickedFromList = useRef(false);
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray$d(_useState7, 2);
-    _useState8[0];
-    var setHovered = _useState8[1];
-  var _useState9 = useState(false),
+  var searchTermRef = useRef('');
+  var searchTimeout = useRef(null);
+  var updateLoadedOptions = function updateLoadedOptions(opts) {
+    loadedOptionsRef.current = opts;
+    setLoadedOptions(opts);
+  };
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray$d(_useState7, 2),
+    tooltipKey = _useState8[0],
+    setTooltipKey = _useState8[1];
+  var _useState9 = useState(null),
     _useState0 = _slicedToArray$d(_useState9, 2),
-    showRequiredError = _useState0[0],
-    setShowRequiredError = _useState0[1];
+    sortOrder = _useState0[0],
+    setSortOrder = _useState0[1];
+  var _useState1 = useState([]),
+    _useState10 = _slicedToArray$d(_useState1, 2),
+    collapsedGroups = _useState10[0],
+    setCollapsedGroups = _useState10[1];
+  var _useState11 = useState(value !== null && value !== void 0 ? value : []),
+    _useState12 = _slicedToArray$d(_useState11, 2);
+    _useState12[0];
+    _useState12[1];
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray$d(_useState13, 2),
+    displayValue = _useState14[0],
+    setDisplayValue = _useState14[1];
+  var isOptionsArray = Array.isArray(options) && !optionsUrl;
+  var hasMoreRef = useRef(true);
+  var effectiveReadOnly = Boolean(readOnly);
+  var applyEnabled = typeof onApply === 'function';
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray$d(_useState15, 2),
+    showRequiredError = _useState16[0],
+    setShowRequiredError = _useState16[1];
   var hasSelection = Array.isArray(selectedOptions) && selectedOptions.length > 0;
+  var isError = Boolean(invalid || status === 'error' || showRequiredError);
+  var isInvalidEffective = Boolean(isError && !hasSelection);
+
+  // ─── Async loading ────────────────────────────────────────────────────────
+
   var fetchOptionsFromUrl = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var search,
@@ -41106,6 +41198,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
         responseJSON,
         dataAjax,
         mappedOptions,
+        hasMore,
         _args = arguments,
         _t;
       return _regenerator().w(function (_context) {
@@ -41114,7 +41207,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
             search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
             _ref3 = _args.length > 2 ? _args[2] : undefined, _ref3$page = _ref3.page, page = _ref3$page === void 0 ? 1 : _ref3$page;
             _context.p = 1;
-            length = 25; // Même valeur que dans loadOptions
+            length = 25;
             start = (page - 1) * length;
             queryParams = new URLSearchParams();
             if (search) queryParams.append('search[value]', search);
@@ -41125,36 +41218,46 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
           case 2:
             response = _context.v;
             if (response.ok) {
+              _context.n = 4;
+              break;
+            }
+            if (!(response.status === 404)) {
               _context.n = 3;
               break;
             }
-            throw new Error("Erreur HTTP: ".concat(response.status));
+            hasMoreRef.current = false;
+            return _context.a(2, {
+              options: [],
+              hasMore: false
+            });
           case 3:
-            _context.n = 4;
-            return response.json();
+            throw new Error("Erreur HTTP: ".concat(response.status));
           case 4:
+            _context.n = 5;
+            return response.json();
+          case 5:
             responseJSON = _context.v;
-            dataAjax = responseJSON.data.filter(function (data) {
-              return true;
-            });
+            dataAjax = responseJSON.data || [];
             mappedOptions = dataAjax.map(function (opt) {
-              if (!opt.hasOwnProperty('color') || opt.color === null || opt.color.length === 0) {
-                opt.color = '#ccc';
+              if (opt.hasOwnProperty('color') && opt.color !== null && opt.color.length > 0) {
+                opt.color = opt.color.toLowerCase();
+              } else {
+                delete opt.color;
               }
-              opt.color = opt.color.toLowerCase();
-              opt.label = opt.nom;
+              opt.label = opt.nom !== undefined && opt.nom !== null ? opt.nom : opt.label;
               opt.value = opt.id;
               return opt;
             });
+            hasMore = start + dataAjax.length < responseJSON.recordsTotal;
             return _context.a(2, {
               options: mappedOptions,
-              hasMore: start + responseJSON.data.length < responseJSON.recordsTotal,
+              hasMore: hasMore,
               additional: {
                 page: page + 1
               }
             });
-          case 5:
-            _context.p = 5;
+          case 6:
+            _context.p = 6;
             _t = _context.v;
             console.error("Erreur lors de la récupération des options :", _t);
             return _context.a(2, {
@@ -41162,7 +41265,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
               hasMore: false
             });
         }
-      }, _callee, null, [[1, 5]]);
+      }, _callee, null, [[1, 6]]);
     }));
     return function fetchOptionsFromUrl() {
       return _ref2.apply(this, arguments);
@@ -41172,15 +41275,11 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     return _objectSpread2(_objectSpread2({}, opt), {}, _defineProperty$g({}, optionValue, typeof opt[optionValue] === 'string' ? parseInt(opt[optionValue], 10) : opt[optionValue]));
   }) : [];
   var numValue = function numValue() {
-    if (value && Array.isArray(value) && value.length) {
-      return value;
-    } else if (objValue && Array.isArray(objValue) && objValue.length) {
-      return objValue.map(function (opt) {
-        return parseInt(opt.value);
-      });
-    } else {
-      return [];
-    }
+    if (value && Array.isArray(value) && value.length) return value;
+    if (objValue && Array.isArray(objValue) && objValue.length) return objValue.map(function (opt) {
+      return parseInt(opt.value);
+    });
+    return [];
   };
   useEffect(function () {
     if (hasSelection) setShowRequiredError(false);
@@ -41190,10 +41289,12 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     setSelectedOptions(numObjValue && Array.isArray(numObjValue) && numObjValue.length ? numObjValue.map(function (opt) {
       return opt[optionValue];
     }) : (_numValue = numValue()) !== null && _numValue !== void 0 ? _numValue : []);
+    currentPageRef.current = 1;
+    hasMoreRef.current = true;
     var loadInitialOptions = /*#__PURE__*/function () {
       var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-        var _result;
-        var result, _result2, exists;
+        var _result, _result2;
+        var result, initialOpts, existingValues, missingSelected;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
@@ -41227,17 +41328,20 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
                 options: []
               };
             case 5:
-              setLoadedOptions(_flattenOptions(((_result = result) === null || _result === void 0 ? void 0 : _result.options) || []));
-              if (objValue) {
-                exists = (_result2 = result) === null || _result2 === void 0 || (_result2 = _result2.options) === null || _result2 === void 0 ? void 0 : _result2.some(function (opt) {
-                  return opt[optionValue] === objValue[optionValue];
+              hasMoreRef.current = ((_result = result) === null || _result === void 0 ? void 0 : _result.hasMore) !== false;
+              initialOpts = _flattenOptions(((_result2 = result) === null || _result2 === void 0 ? void 0 : _result2.options) || []);
+              if (Array.isArray(numObjValue) && numObjValue.length > 0) {
+                existingValues = new Set(initialOpts.map(function (o) {
+                  return String(o[optionValue]);
+                }));
+                missingSelected = numObjValue.filter(function (o) {
+                  return !existingValues.has(String(o[optionValue]));
                 });
-                if (!exists) {
-                  setLoadedOptions(function (prev) {
-                    return [].concat(_toConsumableArray$a(prev), [objValue]);
-                  });
-                }
+                updateLoadedOptions([].concat(_toConsumableArray$a(initialOpts), _toConsumableArray$a(missingSelected)));
+              } else {
+                updateLoadedOptions(initialOpts);
               }
+              // ─────────────────────────────────────────────────────────────────
             case 6:
               return _context2.a(2);
           }
@@ -41252,157 +41356,71 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
   useEffect(function () {
     var observer = new MutationObserver(function () {
       var panel = document.querySelector('.p-multiselect-panel.p-component');
-      if (panel) {
-        panel.style.zIndex = '10000';
-      }
+      if (panel) panel.style.zIndex = '10000';
     });
     observer.observe(document.body, {
       childList: true,
       subtree: true
     });
     return function () {
-      observer.disconnect();
+      return observer.disconnect();
     };
   }, []);
-  var handleChange = function handleChange(e) {
-    setSelectedOptions(e.value);
-    if (onChange) onChange(e.value);
-  };
-  var inverseColor = function inverseColor(hexColor) {
-    var r = parseInt(hexColor.substr(1, 2), 16);
-    var g = parseInt(hexColor.substr(3, 2), 16);
-    var b = parseInt(hexColor.substr(5, 2), 16);
-    var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-    return luminance > 0.18 ? '#000000' : '#FFFFFF';
-  };
-  var isInvalidEffective = invalid || showRequiredError && !hasSelection;
-  var style = {
-    border: isInvalidEffective ? '1px solid red' : '1px solid #ccc',
-    width: '100%'
-  };
-  var optionTemplate = function optionTemplate(option) {
-    if (!option) return null;
-    var _ref5 = selectMetaConfig || {};
-      _ref5.labelStyle;
-      var generalIcon = _ref5.generalIcon;
-    var styleLabel = {
-      marginLeft: '10px'
-    };
-    return /*#__PURE__*/React__default.createElement("div", {
-      onClick: function onClick() {
-        clickedFromList.current = true;
-      },
-      style: _objectSpread2({
-        fontFamily: 'Arial',
-        fontSize: '14px',
-        display: 'flex',
-        alignItems: 'center'
-      }, optionStyle)
-    }, !useCheckbox && /*#__PURE__*/React__default.createElement("style", null, "\n                    .p-multiselect-items .p-multiselect-item .p-checkbox {\n                        display: none !important;\n                    }\n                    .p-multiselect-items .p-multiselect-item {\n                        padding-left: 1rem !important;\n                        align-items: center;\n                    }\n                "), !filter && !showSelectAll && /*#__PURE__*/React__default.createElement("style", null, "\n                    .p-multiselect-header {\n                        display: none !important;\n                    }\n                "), generalIcon && /*#__PURE__*/React__default.createElement("i", {
-      style: {
-        color: option === null || option === void 0 ? void 0 : option.color,
-        marginRight: '8px'
-      },
-      className: generalIcon
-    }), /*#__PURE__*/React__default.createElement("span", {
-      style: styleLabel
-    }, option[optionLabel]));
-  };
-  var _flattenOptions = function flattenOptions(options) {
-    if (!Array.isArray(options)) return [];
-    return options.reduce(function (acc, item) {
-      if (Array.isArray(item)) {
-        acc.push.apply(acc, _toConsumableArray$a(_flattenOptions(item))); // récursion
-      } else {
-        acc.push(item);
-      }
-      return acc;
-    }, []);
-  };
-  var getKey = function getKey(v) {
-    return v && _typeof$g(v) === 'object' ? v[optionValue] : v;
-  };
-  var selectedItemTemplate = function selectedItemTemplate(paramValue, index) {
-    var _selectedOption$color, _selectedOption$color2;
-    var key = String(getKey(paramValue)); // normalise pour éviter 1 vs "1"
-
-    var selectedOption = _flattenOptions(loadedOptions).find(function (opt) {
-      return String(opt[optionValue]) === key;
-    });
-    if (!selectedOption) return null;
-    var objMatch = Array.isArray(objValue) ? objValue.find(function (o) {
-      return String(o[optionValue]) === key;
-    }) : null;
-    if (objMatch) {
-      var _objMatch$color;
-      selectedOption = _objectSpread2(_objectSpread2({}, selectedOption), {}, {
-        color: (_objMatch$color = objMatch.color) !== null && _objMatch$color !== void 0 ? _objMatch$color : selectedOption.color
-        // A ajouter d'autres props visuelles si besoin:
-        // exempl: backgroundColor: objMatch.backgroundColor ?? selectedOption.backgroundColor,
-      });
+  useEffect(function () {
+    if (!displayBadge || !withColor) return;
+    var styleId = 'multiselect-async-chip-colors';
+    var styleEl = document.getElementById(styleId);
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = styleId;
+      document.head.appendChild(styleEl);
     }
-    var handleRemove = function handleRemove(e) {
-      e.stopPropagation();
-      var newSelected = (selectedOptions || []).filter(function (opt) {
-        return String(getKey(opt)) !== key;
-      });
-      setSelectedOptions(newSelected);
-      if (onChange) onChange(newSelected);
-    };
-    return /*#__PURE__*/React__default.createElement("span", {
-      onClick: handleRemove,
-      style: _objectSpread2({
-        backgroundColor: (_selectedOption$color = selectedOption.color) !== null && _selectedOption$color !== void 0 ? _selectedOption$color : '#f8e6ec',
-        color: inverseColor((_selectedOption$color2 = selectedOption.color) !== null && _selectedOption$color2 !== void 0 ? _selectedOption$color2 : '#f8e6ec'),
-        padding: '6px 12px',
-        fontSize: '14px',
-        borderRadius: '8px',
-        boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.15)',
-        display: 'inline-block',
-        marginBottom: '5px',
-        fontFamily: 'Arial',
-        cursor: 'pointer',
-        marginRight: '15px'
-      }, valueStyle)
-    }, selectedOption[optionLabel], /*#__PURE__*/React__default.createElement("span", {
-      style: {
-        marginLeft: '5px'
-      }
-    }, "\xD7"));
-  };
-  var getSelectedOptionsTooltipText = function getSelectedOptionsTooltipText() {
-    if (!selectedOptions || selectedOptions.length === 0) return "Aucune option sélectionnée";
-    return selectedOptions.map(function (opt) {
-      var key = String(_typeof$g(opt) === 'object' ? opt[optionValue] : opt);
-      var selectedOption = _flattenOptions(loadedOptions).find(function (o) {
-        return String(o[optionValue]) === key;
+    var flat = _flattenOptions(loadedOptions);
+    var cssRules = (selectedOptions || []).map(function (optValue) {
+      var opt = flat.find(function (o) {
+        return o[optionValue] === optValue;
       });
-      return selectedOption ? selectedOption[optionLabel] : key;
+      if (!(opt !== null && opt !== void 0 && opt.color)) return '';
+      var textColor = inverseColor(opt.color);
+      return "\n                .p-multiselect-token[data-value=\"".concat(optValue, "\"] {\n                    background-color: ").concat(opt.color, " !important;\n                    color: ").concat(textColor, " !important;\n                }\n                .p-multiselect-token[data-value=\"").concat(optValue, "\"] .p-multiselect-token-icon {\n                    color: ").concat(textColor, " !important;\n                }");
     }).join('\n');
-  };
-
-  // Fonction de lazy loading
+    styleEl.textContent = cssRules;
+    return function () {
+      var _styleEl;
+      (_styleEl = styleEl) === null || _styleEl === void 0 || _styleEl.remove();
+    };
+  }, [selectedOptions, loadedOptions, displayBadge, withColor]);
+  useEffect(function () {
+    if (enableItemTooltip) setTooltipKey(function (k) {
+      return k + 1;
+    });
+  }, [loadedOptions, enableItemTooltip]);
   var onLazyLoad = function onLazyLoad(event) {
     if (isOptionsArray) return;
     setLoading(true);
-    if (loadLazyTimeout.current) {
-      clearTimeout(loadLazyTimeout.current);
+    if (event.last < loadedOptionsRef.current.length - 1 || !hasMoreRef.current) {
+      setTimeout(function () {
+        return setLoading(false);
+      }, 0);
+      return;
     }
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
+    if (loadLazyTimeout.current) clearTimeout(loadLazyTimeout.current);
     loadLazyTimeout.current = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-      var _result3;
-      var first, last, _items, result, newOptions, i, virtualscroll;
+      var _result3, _result4;
+      var nextPage, result, newOptions;
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.n) {
           case 0:
-            first = event.first, last = event.last;
-            _items = _toConsumableArray$a(loadedOptions);
+            nextPage = currentPageRef.current + 1;
             if (!(typeof options === 'function')) {
               _context3.n = 2;
               break;
             }
             _context3.n = 1;
-            return options("", [], {
-              page: currentPageRef.current + 1
+            return options(searchTermRef.current, [], {
+              page: nextPage
             });
           case 1:
             result = _context3.v;
@@ -41414,8 +41432,8 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
               break;
             }
             _context3.n = 3;
-            return fetchOptionsFromUrl("", [], {
-              page: currentPageRef.current + 1
+            return fetchOptionsFromUrl(searchTermRef.current, [], {
+              page: nextPage
             });
           case 3:
             result = _context3.v;
@@ -41423,95 +41441,831 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
             break;
           case 4:
             result = {
-              options: []
+              options: [],
+              hasMore: false
             };
           case 5:
             newOptions = ((_result3 = result) === null || _result3 === void 0 ? void 0 : _result3.options) || [];
-            for (i = first; i < last; i++) {
-              if (!_items[i] && newOptions[i - first]) {
-                _items[i] = newOptions[i - first];
-              }
+            if (!(newOptions.length === 0)) {
+              _context3.n = 6;
+              break;
             }
-            // setLoadedOptions(_items);
-            setLoadedOptions(_flattenOptions(_items));
+            hasMoreRef.current = false;
+            isLoadingRef.current = false;
             setLoading(false);
-            currentPageRef.current += 1;
-            // Redimensionnement du conteneur
-            virtualscroll = document.querySelector('.p-virtualscroller.p-dropdown-items-wrapper');
-            if (virtualscroll) {
-              virtualscroll.style.height = "auto";
-            }
+            return _context3.a(2);
           case 6:
+            updateLoadedOptions([].concat(_toConsumableArray$a(loadedOptionsRef.current), _toConsumableArray$a(newOptions)));
+            hasMoreRef.current = ((_result4 = result) === null || _result4 === void 0 ? void 0 : _result4.hasMore) !== false;
+            currentPageRef.current = nextPage;
+            isLoadingRef.current = false;
+            setLoading(false);
+          case 7:
             return _context3.a(2);
         }
       }, _callee3);
     })), 500);
   };
-  var selectedOptionsCount = selectedOptions ? selectedOptions.length : 0;
-  var BADGE_SIZES = {
-    small: {
-      fontSize: '10px',
-      size: '18px'
-    },
-    medium: {
-      fontSize: '12px',
-      size: '22px'
-    },
-    large: {
-      fontSize: '14px',
-      size: '26px'
-    },
-    xlarge: {
-      fontSize: '16px',
-      size: '32px'
-    },
-    xxlarge: {
-      fontSize: '18px',
-      size: '38px'
+
+  // ─── Helpers ──────────────────────────────────────────────────────────────
+
+  var _flattenOptions = function flattenOptions(opts) {
+    if (!Array.isArray(opts)) return [];
+    return opts.reduce(function (acc, item) {
+      if (Array.isArray(item)) acc.push.apply(acc, _toConsumableArray$a(_flattenOptions(item)));else acc.push(item);
+      return acc;
+    }, []);
+  };
+  var getKey = function getKey(v) {
+    return v && _typeof$g(v) === 'object' ? v[optionValue] : v;
+  };
+  var inverseColor = function inverseColor(hexColor) {
+    if (!hexColor || !hexColor.startsWith('#')) return '#000000';
+    var hex = hexColor;
+    if (hex.length === 4) {
+      hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+    }
+    var r = parseInt(hex.substr(1, 2), 16);
+    var g = parseInt(hex.substr(3, 2), 16);
+    var b = parseInt(hex.substr(5, 2), 16);
+    if (isNaN(r) || isNaN(g) || isNaN(b)) return '#000000';
+    var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.18 ? '#000000' : '#FFFFFF';
+  };
+  var safeEmitOnChange = function safeEmitOnChange(ids) {
+    if (typeof onChange === 'function') {
+      onChange(ids);
+      return;
     }
+    if (typeof onChange === 'string' && typeof window[onChange] === 'function') window[onChange](ids);
   };
-  var badgeStyle = (_BADGE_SIZES$badgeSiz = BADGE_SIZES[badgeSize]) !== null && _BADGE_SIZES$badgeSiz !== void 0 ? _BADGE_SIZES$badgeSiz : BADGE_SIZES.medium;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-1",
+
+  // ─── Options computed ─────────────────────────────────────────────────────
+
+  var flatOptions = useMemo(function () {
+    return _flattenOptions(loadedOptions);
+  }, [loadedOptions]);
+  var smartSort = function smartSort(opts, order) {
+    if (!order) return opts;
+    return _toConsumableArray$a(opts).sort(function (a, b) {
+      var _a$optionLabel, _b$optionLabel;
+      var aRaw = String((_a$optionLabel = a === null || a === void 0 ? void 0 : a[optionLabel]) !== null && _a$optionLabel !== void 0 ? _a$optionLabel : '').trim();
+      var bRaw = String((_b$optionLabel = b === null || b === void 0 ? void 0 : b[optionLabel]) !== null && _b$optionLabel !== void 0 ? _b$optionLabel : '').trim();
+      var aNum = parseFloat(aRaw.replace(',', '.'));
+      var bNum = parseFloat(bRaw.replace(',', '.'));
+      var aIsNum = !isNaN(aNum) && /^[0-9]/.test(aRaw);
+      var bIsNum = !isNaN(bNum) && /^[0-9]/.test(bRaw);
+      if (aIsNum && bIsNum) return order === 'asc' ? aNum - bNum : bNum - aNum;
+      return order === 'asc' ? aRaw.localeCompare(bRaw, 'fr', {
+        sensitivity: 'base'
+      }) : bRaw.localeCompare(aRaw, 'fr', {
+        sensitivity: 'base'
+      });
+    });
+  };
+  var reorderedOptions = useMemo(function () {
+    if (!itemsCheckedToTheTop || !Array.isArray(selectedOptions) || selectedOptions.length === 0) return flatOptions;
+    var selectedSet = new Set(selectedOptions);
+    return [].concat(_toConsumableArray$a(flatOptions.filter(function (o) {
+      return selectedSet.has(o === null || o === void 0 ? void 0 : o[optionValue]);
+    })), _toConsumableArray$a(flatOptions.filter(function (o) {
+      return !selectedSet.has(o === null || o === void 0 ? void 0 : o[optionValue]);
+    })));
+  }, [itemsCheckedToTheTop, selectedOptions, flatOptions, optionValue]);
+  var computedOptions = useMemo(function () {
+    var base = itemsCheckedToTheTop ? reorderedOptions : flatOptions;
+    return enableSorting ? smartSort(base, sortOrder) : base;
+  }, [enableSorting, sortOrder, flatOptions, reorderedOptions, itemsCheckedToTheTop]);
+  var toggleSortOrder = function toggleSortOrder() {
+    setSortOrder(function (prev) {
+      return prev === 'asc' ? 'desc' : 'asc';
+    });
+    requestAnimationFrame(function () {
+      var _multiSelectRef$curre;
+      return (_multiSelectRef$curre = multiSelectRef.current) === null || _multiSelectRef$curre === void 0 ? void 0 : _multiSelectRef$curre.show();
+    });
+  };
+  var toggleGroupCollapse = function toggleGroupCollapse(groupLabel) {
+    setCollapsedGroups(function (prev) {
+      return prev.includes(groupLabel) ? prev.filter(function (l) {
+        return l !== groupLabel;
+      }) : [].concat(_toConsumableArray$a(prev), [groupLabel]);
+    });
+  };
+
+  // ─── Handlers ─────────────────────────────────────────────────────────────
+
+  var handleChange = function handleChange(e) {
+    if (disabled || effectiveReadOnly) return;
+    var ids = Array.isArray(e.value) ? e.value : [e.value];
+    if (typeof maxSelected === 'number' && maxSelected >= 0 && ids.length > maxSelected) return;
+    setSelectedOptions(ids);
+    setDisplayValue(null);
+    safeEmitOnChange(ids);
+  };
+  var handleClearAll = function handleClearAll() {
+    if (disabled || effectiveReadOnly) return;
+    setSelectedOptions([]);
+    safeEmitOnChange([]);
+    if (typeof onClearAll === 'function') onClearAll();
+  };
+  var handleApply = function handleApply() {
+    setDisplayValue(valueToapply ? valueToapply : selectedOptions);
+    if (typeof onApply === 'function') onApply(displayValue);
+  };
+  var handleSelectAllCustom = function handleSelectAllCustom(ids) {
+    setSelectedOptions(ids);
+    safeEmitOnChange(ids);
+    if (typeof onSelectAll === 'function') onSelectAll(ids);
+  };
+  var handleMouseEnter = function handleMouseEnter() {
+    var _multiSelectRef$curre2;
+    if (!openOnHover || disabled || effectiveReadOnly) return;
+    (_multiSelectRef$curre2 = multiSelectRef.current) === null || _multiSelectRef$curre2 === void 0 || _multiSelectRef$curre2.show();
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    var _multiSelectRef$curre3;
+    if (!openOnHover) return;
+    (_multiSelectRef$curre3 = multiSelectRef.current) === null || _multiSelectRef$curre3 === void 0 || _multiSelectRef$curre3.hide();
+  };
+  var handleFilter = function handleFilter(e) {
+    var _e$filter;
+    if (isOptionsArray) return;
+    var search = (_e$filter = e.filter) !== null && _e$filter !== void 0 ? _e$filter : '';
+    searchTermRef.current = search;
+    if (searchTimeout.current) clearTimeout(searchTimeout.current);
+    searchTimeout.current = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var _result5, _result6;
+      var result, searchOpts, existingValues, missingSelected;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.n) {
+          case 0:
+            currentPageRef.current = 1;
+            hasMoreRef.current = true;
+            isLoadingRef.current = false;
+            setLoading(true);
+            if (!(typeof options === 'function')) {
+              _context4.n = 2;
+              break;
+            }
+            _context4.n = 1;
+            return options(search, [], {
+              page: 1
+            });
+          case 1:
+            result = _context4.v;
+            _context4.n = 5;
+            break;
+          case 2:
+            if (!optionsUrl) {
+              _context4.n = 4;
+              break;
+            }
+            _context4.n = 3;
+            return fetchOptionsFromUrl(search, [], {
+              page: 1
+            });
+          case 3:
+            result = _context4.v;
+            _context4.n = 5;
+            break;
+          case 4:
+            result = {
+              options: [],
+              hasMore: false
+            };
+          case 5:
+            hasMoreRef.current = ((_result5 = result) === null || _result5 === void 0 ? void 0 : _result5.hasMore) !== false;
+
+            // ─── On réinjecte les sélectionnés absents des résultats de recherche ──
+            searchOpts = _flattenOptions(((_result6 = result) === null || _result6 === void 0 ? void 0 : _result6.options) || []);
+            if (Array.isArray(numObjValue) && numObjValue.length > 0) {
+              existingValues = new Set(searchOpts.map(function (o) {
+                return String(o[optionValue]);
+              }));
+              missingSelected = numObjValue.filter(function (o) {
+                return !existingValues.has(String(o[optionValue]));
+              });
+              updateLoadedOptions([].concat(_toConsumableArray$a(searchOpts), _toConsumableArray$a(missingSelected)));
+            } else {
+              updateLoadedOptions(searchOpts);
+            }
+            // ────────────────────────────────────────────────────────────────────────
+
+            setLoading(false);
+          case 6:
+            return _context4.a(2);
+        }
+      }, _callee4);
+    })), 300);
+  };
+
+  // ─── Templates ────────────────────────────────────────────────────────────
+
+  var optionTemplate = function optionTemplate(option) {
+    if (!option) return null;
+    var tooltipProps = enableItemTooltip ? {
+      className: 'multiselect-tooltip-item',
+      'data-pr-tooltip': option.tooltip || option.description,
+      'data-pr-position': 'right'
+    } : {
+      className: 'multiselect-tooltip-item'
+    };
+    var secondaryLabel = enableSecondaryLabel ? option === null || option === void 0 ? void 0 : option[secondaryLabelKey] : null;
+    var isLink = enableItemLink && option.link;
+    var handleLinkClick = function handleLinkClick(e) {
+      if (isLink) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.open(option.link, '_blank', 'noopener,noreferrer');
+      }
+    };
+    var secondaryLabelNode = secondaryLabel && /*#__PURE__*/React__default.createElement("div", {
+      className: "secondary-link-zone",
+      onClick: isLink ? handleLinkClick : undefined,
+      onMouseDown: isLink ? function (e) {
+        return e.stopPropagation();
+      } : undefined,
+      style: {
+        cursor: isLink ? 'pointer' : 'default',
+        marginTop: '2px',
+        width: 'fit-content'
+      }
+    }, /*#__PURE__*/React__default.createElement("small", {
+      style: {
+        opacity: 0.75,
+        fontSize: '12px',
+        textDecoration: isLink ? 'underline' : 'none',
+        color: isLink ? '#3b82f6' : 'inherit',
+        transition: 'opacity 0.2s, color 0.2s'
+      },
+      onMouseEnter: function onMouseEnter(e) {
+        if (isLink) {
+          e.target.style.opacity = '1';
+          e.target.style.color = '#2563eb';
+        }
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        if (isLink) {
+          e.target.style.opacity = '0.75';
+          e.target.style.color = '#3b82f6';
+        }
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: subItem ? {} : {
+        marginLeft: '10px'
+      }
+    }, secondaryLabel)));
+    if (isSelectMeta) {
+      var _ref7 = selectMetaConfig || {},
+        labelStyle = _ref7.labelStyle,
+        generalIcon = _ref7.generalIcon;
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: _objectSpread2({
+          fontFamily: 'Arial',
+          fontSize: '14px',
+          display: 'flex',
+          alignItems: 'center'
+        }, optionStyle)
+      }, generalIcon && /*#__PURE__*/React__default.createElement("i", {
+        style: {
+          color: option === null || option === void 0 ? void 0 : option.color,
+          marginRight: '8px'
+        },
+        className: generalIcon
+      }), /*#__PURE__*/React__default.createElement("span", {
+        style: _objectSpread2(_objectSpread2({
+          marginLeft: '10px'
+        }, labelStyle), {}, {
+          flex: 1
+        })
+      }, /*#__PURE__*/React__default.createElement("div", tooltipProps, option[optionLabel]), option[optionLabel], secondaryLabelNode));
+    }
+    if (withColor || withIcon) {
+      var _ref8 = selectConfig || {},
+        _labelStyle = _ref8.labelStyle,
+        _generalIcon = _ref8.generalIcon;
+      return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, {
+        style: _objectSpread2({
+          fontSize: '14px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px'
+        }, optionStyle)
+      }), withIcon && _generalIcon && /*#__PURE__*/React__default.createElement("i", {
+        style: {
+          color: option === null || option === void 0 ? void 0 : option.color
+        },
+        className: _generalIcon
+      }), withColor && (option === null || option === void 0 ? void 0 : option.color) && /*#__PURE__*/React__default.createElement("span", {
+        className: "ms-color-badge".concat((selectedOptions || []).includes(option[optionValue]) ? ' is-selected' : ''),
+        style: {
+          '--badge-color': option.color,
+          color: inverseColor(option.color)
+        }
+      }, option[optionLabel]), (!withColor || !(option !== null && option !== void 0 && option.color)) && /*#__PURE__*/React__default.createElement("span", {
+        style: _objectSpread2(_objectSpread2({}, _labelStyle), subItem ? {
+          flex: 1
+        } : {})
+      }, option[optionLabel]), secondaryLabelNode);
+    }
+    return /*#__PURE__*/React__default.createElement("div", {
+      style: _objectSpread2({
+        fontFamily: 'Arial',
+        fontSize: '14px',
+        display: 'flex',
+        flexDirection: 'column'
+      }, optionStyle)
+    }, /*#__PURE__*/React__default.createElement("div", tooltipProps, option[optionLabel]), secondaryLabelNode);
+  };
+  var selectedItemTemplate = function selectedItemTemplate(paramValue) {
+    if (paramValue == null) return null;
+    if (truncateAt) {
+      var index = (selectedOptions || []).indexOf(paramValue);
+      if (index === -1) return null;
+      if (index < truncateAt) {
+        var opt = flatOptions.find(function (o) {
+          return o[optionValue] === paramValue;
+        }) || flatOptions.find(function (o) {
+          return o.value === paramValue;
+        }) || numObjValue.find(function (o) {
+          return o[optionValue] === paramValue;
+        });
+        if (!opt) return null;
+        return /*#__PURE__*/React__default.createElement("span", {
+          style: _objectSpread2({
+            marginRight: '6px'
+          }, valueStyle)
+        }, opt[optionLabel]);
+      }
+      if (index === truncateAt) return /*#__PURE__*/React__default.createElement("span", {
+        style: {
+          opacity: 0.7,
+          marginRight: '6px'
+        }
+      }, "\u2026");
+      return null;
+    }
+    if (isSelectMeta) {
+      var _selectedOption2;
+      var _key = String(getKey(paramValue));
+      var _selectedOption = flatOptions.find(function (o) {
+        return String(o[optionValue]) === _key;
+      }) || numObjValue.find(function (o) {
+        return String(o[optionValue]) === _key;
+      });
+      // ─────────────────────────────────────────────────────────────────
+      if (!_selectedOption) return null;
+      var _objMatch = Array.isArray(objValue) ? objValue.find(function (o) {
+        return String(o[optionValue]) === _key;
+      }) : null;
+      if (_objMatch) _selectedOption = _objectSpread2(_objectSpread2({}, _selectedOption), {}, {
+        color: _objMatch.color !== undefined ? _objMatch.color : _selectedOption.color
+      });
+      var _handleRemove = function _handleRemove(e) {
+        e.stopPropagation();
+        if (disabled || effectiveReadOnly) return;
+        var newSelected = (selectedOptions || []).filter(function (o) {
+          return String(getKey(o)) !== _key;
+        });
+        setSelectedOptions(newSelected);
+        safeEmitOnChange(newSelected);
+      };
+      return /*#__PURE__*/React__default.createElement("span", {
+        onClick: effectiveReadOnly ? undefined : _handleRemove,
+        style: _objectSpread2(_objectSpread2({}, (_selectedOption2 = _selectedOption) !== null && _selectedOption2 !== void 0 && _selectedOption2.color ? {
+          backgroundColor: _selectedOption.color,
+          color: inverseColor(_selectedOption.color)
+        } : {}), {}, {
+          padding: '6px 12px',
+          fontSize: '14px',
+          borderRadius: '8px',
+          boxShadow: '2px 2px 4px rgba(0,0,0,0.15)',
+          display: 'inline-block',
+          marginBottom: '5px',
+          fontFamily: 'Arial',
+          cursor: effectiveReadOnly ? 'default' : 'pointer',
+          marginRight: '15px'
+        }, valueStyle)
+      }, _selectedOption[optionLabel], !effectiveReadOnly && /*#__PURE__*/React__default.createElement("span", {
+        style: {
+          marginLeft: '5px'
+        }
+      }, "\xD7"));
+    }
+    var key = String(getKey(paramValue));
+    var selectedOption = flatOptions.find(function (o) {
+      return String(o[optionValue]) === key;
+    }) || numObjValue.find(function (o) {
+      return String(o[optionValue]) === key;
+    });
+    if (!selectedOption) return null;
+    var objMatch = Array.isArray(objValue) ? objValue.find(function (o) {
+      return String(o[optionValue]) === key;
+    }) : null;
+    if (objMatch) selectedOption = _objectSpread2(_objectSpread2({}, selectedOption), {}, {
+      color: objMatch.color !== undefined ? objMatch.color : selectedOption.color
+    });
+    var isLast = (selectedOptions || [])[(selectedOptions || []).length - 1] === paramValue;
+    return /*#__PURE__*/React__default.createElement("span", {
+      style: _objectSpread2({
+        marginRight: '4px'
+      }, valueStyle)
+    }, selectedOption[optionLabel], !isLast && /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        opacity: 0.8
+      }
+    }, ", "));
+  };
+  var getSelectedOptionsTooltipText = function getSelectedOptionsTooltipText() {
+    if (!selectedOptions || selectedOptions.length === 0) return "Aucune option sélectionnée";
+    return selectedOptions.map(function (opt) {
+      var key = String(_typeof$g(opt) === 'object' ? opt[optionValue] : opt);
+      var found = flatOptions.find(function (o) {
+        return String(o[optionValue]) === key;
+      }) || numObjValue.find(function (o) {
+        return String(o[optionValue]) === key;
+      });
+      return found ? found[optionLabel] : key;
+    }).join('\n');
+  };
+  var selectedOptionsCount = selectedOptions ? selectedOptions.length : 0;
+  var totalItemCount = computedOptions.length;
+  var customPanelHeader = function customPanelHeader(opts) {
+    var checkboxElement = opts.checkboxElement,
+      filterElement = opts.filterElement;
+    var hasSearchRow = filter || enableSorting;
+    var hasSelectAllRow = showSelectAll;
+    if (!hasSearchRow && !hasSelectAllRow) return null;
+    var allSelected = totalItemCount > 0 && selectedOptionsCount >= totalItemCount;
+    var partialSelected = selectedOptionsCount > 0 && !allSelected;
+    var checkboxClass = "ms-group-checkbox".concat(allSelected ? ' checked' : partialSelected ? ' partial' : '');
+    var handleSelectAllLabel = function handleSelectAllLabel() {
+      if (disabled || effectiveReadOnly) return;
+      if (selectedOptionsCount > 0) {
+        handleSelectAllCustom([]);
+      } else {
+        handleSelectAllCustom(computedOptions.map(function (o) {
+          return o[optionValue];
+        }));
+      }
+    };
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "ms-panel-header"
+    }, hasSearchRow && /*#__PURE__*/React__default.createElement("div", {
+      className: "ms-search-row"
+    }, filter && filterElement, enableSorting && /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "ms-sort-btn",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        toggleSortOrder();
+      }
+    }, /*#__PURE__*/React__default.createElement("i", {
+      className: "pi pi-sort-alt"
+    }))), hasSelectAllRow && /*#__PURE__*/React__default.createElement("div", {
+      className: "ms-selectall-row"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        position: 'relative',
+        width: '24px',
+        height: '24px',
+        flexShrink: 0,
+        marginRight: '0.5rem'
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: checkboxClass,
+      style: {
+        margin: 0,
+        pointerEvents: 'none'
+      }
+    }, allSelected && /*#__PURE__*/React__default.createElement("i", {
+      className: "pi pi-check",
+      style: {
+        fontSize: '10px'
+      }
+    })), /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        position: 'absolute',
+        inset: 0,
+        opacity: 0,
+        cursor: 'pointer'
+      }
+    }, checkboxElement)), /*#__PURE__*/React__default.createElement("span", {
+      className: "ms-selectall-label",
+      style: {
+        cursor: 'pointer'
+      },
+      onClick: handleSelectAllLabel
+    }, selectedOptionsCount > 0 ? 'Désélectionner tout' : 'Sélectionner tout'), /*#__PURE__*/React__default.createElement("span", {
+      className: "ms-counter"
+    }, selectedOptionsCount, " sur ", totalItemCount)));
+  };
+  var customPanelFooter = function customPanelFooter() {
+    if (applyEnabled) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "ms-panel-footer"
+      }, /*#__PURE__*/React__default.createElement("button", {
+        type: "button",
+        className: "ms-cancel-btn",
+        onClick: function onClick() {
+          var _multiSelectRef$curre4;
+          return (_multiSelectRef$curre4 = multiSelectRef.current) === null || _multiSelectRef$curre4 === void 0 ? void 0 : _multiSelectRef$curre4.hide();
+        }
+      }, "Annuler"), /*#__PURE__*/React__default.createElement("button", {
+        type: "button",
+        className: "ms-apply-btn",
+        onClick: function onClick() {
+          var _multiSelectRef$curre5;
+          handleApply();
+          (_multiSelectRef$curre5 = multiSelectRef.current) === null || _multiSelectRef$curre5 === void 0 || _multiSelectRef$curre5.hide();
+        }
+      }, "Appliquer"));
+    }
+    if (hasInfoLine) {
+      var length = selectedOptions ? selectedOptions.length : 0;
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "py-2 px-3"
+      }, /*#__PURE__*/React__default.createElement("b", null, length), " option", length > 1 ? 's' : '', " s\xE9lectionn\xE9e", length > 1 ? 's' : '', ".");
+    }
+    return null;
+  };
+
+  // ─── Grouped items template ───────────────────────────────────────────────
+
+  var getGroupValues = function getGroupValues(group) {
+    if (!group || !Array.isArray(group.items)) return [];
+    return group.items.map(function (item) {
+      return item[optionValue];
+    });
+  };
+  var isGroupFullySelected = function isGroupFullySelected(group) {
+    var groupValues = getGroupValues(group);
+    return groupValues.length > 0 && groupValues.every(function (v) {
+      return (selectedOptions || []).includes(v);
+    });
+  };
+  var handleGroupToggle = function handleGroupToggle(group) {
+    if (!enableGroupSelect || disabled || effectiveReadOnly) return;
+    var labelKey = optionGroupLabel || 'label';
+    var originalGroup = loadedOptions.find(function (g) {
+      return g[labelKey] === group[labelKey];
+    }) || group;
+    var groupValues = getGroupValues(originalGroup);
+    if (!groupValues.length) return;
+    var allSelected = isGroupFullySelected(originalGroup);
+    var nextValues = allSelected ? (selectedOptions || []).filter(function (v) {
+      return !groupValues.includes(v);
+    }) : Array.from(new Set([].concat(_toConsumableArray$a(selectedOptions || []), _toConsumableArray$a(groupValues))));
+    setSelectedOptions(nextValues);
+    safeEmitOnChange(nextValues);
+  };
+  var groupedItemTemplate = function groupedItemTemplate(option) {
+    var labelKey = optionGroupLabel || 'label';
+    var groupLabel = option[labelKey];
+    var originalGroup = loadedOptions.find(function (g) {
+      return g[labelKey] === groupLabel;
+    });
+    var groupValues = getGroupValues(originalGroup || option);
+    var totalItems = groupValues.length;
+    var selectedCount = groupValues.filter(function (v) {
+      return (selectedOptions || []).includes(v);
+    }).length;
+    var fullySelected = totalItems > 0 && selectedCount === totalItems;
+    var partiallySelected = selectedCount > 0 && !fullySelected;
+    var isCollapsed = collapsedGroups.includes(groupLabel);
+    var checkboxClass = "ms-group-checkbox".concat(fullySelected ? ' checked' : '').concat(partiallySelected ? ' partial' : '');
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "ms-group-header",
+      style: {
+        cursor: enableGroupSelect ? 'pointer' : 'default'
+      },
+      onClick: function onClick() {
+        if (enableGroupSelect) handleGroupToggle(option);
+      }
+    }, useCheckbox && /*#__PURE__*/React__default.createElement("div", {
+      className: checkboxClass
+    }, fullySelected && /*#__PURE__*/React__default.createElement("i", {
+      className: "pi pi-check",
+      style: {
+        fontSize: '10px'
+      }
+    })), /*#__PURE__*/React__default.createElement("span", {
+      className: "ms-group-label"
+    }, groupLabel, " : ", selectedCount, "/", totalItems), enableGroupSelect && /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "ms-group-collapse-btn",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        toggleGroupCollapse(groupLabel);
+      }
+    }, isCollapsed ? '+' : '−'));
+  };
+
+  // ─── Misc ─────────────────────────────────────────────────────────────────
+
+  var BADGE_SIZES = {
+    small: {
+      fontSize: '10px',
+      size: '18px'
+    },
+    medium: {
+      fontSize: '12px',
+      size: '22px'
+    },
+    large: {
+      fontSize: '14px',
+      size: '26px'
+    },
+    xlarge: {
+      fontSize: '16px',
+      size: '32px'
+    },
+    xxlarge: {
+      fontSize: '18px',
+      size: '38px'
+    }
+  };
+  var badgeStyle = BADGE_SIZES[badgeSize] || BADGE_SIZES.medium;
+  var style = {
+    border: isInvalidEffective ? '1px solid red' : '1px solid #ccc',
+    width: '100%'
+  };
+  var effectiveShowClear = Boolean(showClear || typeof onClearAll === 'function');
+  return /*#__PURE__*/React__default.createElement("div", {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    style: {
+      width: '100%'
+    }
+  }, enableItemTooltip && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    key: tooltipKey,
+    target: ".multiselect-tooltip-item",
+    appendTo: document.body,
+    position: "top",
+    style: {
+      zIndex: '9999999'
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, displayCounter && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    target: ".custom-target-icon"
+  }), /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    target: ".ms-counter-label",
+    appendTo: document.body,
+    position: "top",
+    showDelay: 0,
+    style: {
+      zIndex: 9999999
+    }
+  }), /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    target: ".p-multiselect-token",
+    appendTo: document.body,
+    position: "top",
+    showDelay: 200,
     style: {
-      width: '100%'
+      zIndex: 9999999
     }
-  }, displayNbOption && /*#__PURE__*/React__default.createElement(Tooltip$1, {
-    target: ".custom-target-icon"
   }), /*#__PURE__*/React__default.createElement("div", {
-    ref: multiSelectRef,
-    "data-pr-tooltip": getSelectedOptionsTooltipText(),
+    "data-pr-tooltip": enableItemTooltip ? getSelectedOptionsTooltipText() : null,
     "data-pr-position": "right",
     "data-pr-at": "right+5 top",
     "data-pr-my": "left center-2",
+    ref: containerRef,
     className: "multiselect-container custom-target-icon",
     style: {
       width: '100%',
       position: 'relative',
       top: '0px',
       right: '0px'
-    },
-    onMouseEnter: function onMouseEnter() {
-      return setHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHovered(false);
     }
   }, /*#__PURE__*/React__default.createElement(MultiSelect$1, _extends$J({
-    options: _flattenOptions(loadedOptions),
-    onChange: handleChange,
-    style: style,
-    showSelectAll: showSelectAll,
-    disabled: disabled,
-    filter: filter,
+    ref: multiSelectRef,
+    panelClassName: !useCheckbox ? 'ms-no-checkbox' : ''
+  }, displayBadge && selectedOptionsCount <= maxSelectedLabels ? {
+    display: 'chip',
+    pt: {
+      token: function token(_ref9) {
+        var context = _ref9.context;
+        var valStr = String(context.value);
+        var opt = flatOptions.find(function (o) {
+          return String(o[optionValue]) === valStr;
+        }) || numObjValue.find(function (o) {
+          return String(o[optionValue]) === valStr;
+        });
+        return {
+          style: displayBadge && opt !== null && opt !== void 0 && opt.color ? {
+            '--badge-color': opt.color,
+            backgroundColor: opt.color,
+            color: inverseColor(opt.color)
+          } : {},
+          'data-pr-tooltip': (opt === null || opt === void 0 ? void 0 : opt[optionLabel]) || context.value,
+          'data-pr-position': 'top'
+        };
+      },
+      removeTokenIcon: function removeTokenIcon(_ref0) {
+        var context = _ref0.context;
+        return {
+          style: function () {
+            var valStr = String(context.value);
+            var opt = flatOptions.find(function (o) {
+              return String(o[optionValue]) === valStr;
+            }) || numObjValue.find(function (o) {
+              return String(o[optionValue]) === valStr;
+            });
+            return displayBadge && withColor && opt !== null && opt !== void 0 && opt.color ? {
+              color: inverseColor(opt.color)
+            } : {};
+          }()
+        };
+      }
+    }
+  } : _objectSpread2({}, displayBadge && {
+    display: 'chip',
+    selectedItemsLabel: /*#__PURE__*/React__default.createElement("span", {
+      className: "ms-counter-badge"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "ms-counter-dots"
+    }, (selectedOptions || []).map(function (val) {
+      var opt = flatOptions.find(function (o) {
+        return o[optionValue] === val;
+      });
+      return /*#__PURE__*/React__default.createElement("span", {
+        key: val,
+        className: "ms-counter-dot",
+        style: {
+          backgroundColor: (opt === null || opt === void 0 ? void 0 : opt.color) || undefined
+        }
+      });
+    })), /*#__PURE__*/React__default.createElement("span", {
+      className: "ms-counter-label",
+      "data-pr-tooltip": (selectedOptions || []).map(function (val) {
+        var valStr = String(val);
+        var opt = flatOptions.find(function (o) {
+          return String(o[optionValue]) === valStr;
+        }) || numObjValue.find(function (o) {
+          return String(o[optionValue]) === valStr;
+        });
+        return (opt === null || opt === void 0 ? void 0 : opt[optionLabel]) || val;
+      }).join('\n'),
+      "data-pr-position": "top"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "ms-counter-end"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "ms-counter-count"
+    }, selectedOptionsCount), /*#__PURE__*/React__default.createElement("i", {
+      className: "pi pi-times ms-counter-clear-icon",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setSelectedOptions([]);
+        if (onChange) onChange([]);
+      }
+    }))))
+  }), !displayBadge && {
+    selectedItemsLabel: '{0} éléments sélectionnés'
+  }, {
+    onShow: function onShow() {
+      if (enableItemTooltip) setTooltipKey(function (k) {
+        return k + 1;
+      });
+    },
+    onHide: onHide,
+    onMouseDown: function onMouseDown() {
+      if (enableItemTooltip) setTooltipKey(function (k) {
+        return k + 1;
+      });
+    },
+    options: computedOptions,
+    value: displayValue ? displayValue : selectedOptions,
     placeholder: placeholder,
+    disabled: disabled || readOnly,
+    filter: filter || !isOptionsArray && !!optionsUrl,
+    onFilter: !isOptionsArray ? handleFilter : undefined,
     optionLabel: optionLabel,
     optionValue: optionValue,
-    showClear: showClear,
-    value: selectedOptions,
+    style: style,
+    loading: false,
+    maxSelectedLabels: maxSelectedLabels,
+    emptyMessage: loading ? 'Chargement…' : 'Aucune option disponible',
+    onChange: handleChange,
     itemTemplate: optionTemplate,
-    selectedItemTemplate: selectedItemTemplate,
-    className: "w-full md:w-14rem"
+    selectedItemTemplate: displayBadge ? undefined : selectedItemTemplate,
+    showClear: effectiveShowClear,
+    closeIcon: closeIcon,
+    showSelectAll: showSelectAll,
+    panelStyle: {
+      width: containerRef.current ? containerRef.current.offsetWidth + 'px' : undefined
+    },
+    panelHeaderTemplate: customPanelHeader,
+    panelFooterTemplate: customPanelFooter
+  }, isGroupedOption && {
+    optionGroupChildren: optionGroupChildren,
+    optionGroupLabel: optionGroupLabel,
+    optionValue: optionValue
+  }, {
+    optionGroupTemplate: isGroupedOption ? groupedItemTemplate : null
   }, virtualScroll && {
     virtualScrollerOptions: {
       lazy: true,
@@ -41521,7 +42275,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       loading: loading,
       delay: 25
     }
-  })), displayNbOption && selectedOptionsCount > 1 && /*#__PURE__*/React__default.createElement(Badge, {
+  })), displayCounter && selectedOptionsCount > (maxVisibleCounter !== null && maxVisibleCounter !== void 0 ? maxVisibleCounter : 1) && /*#__PURE__*/React__default.createElement(Badge, {
     value: selectedOptionsCount,
     className: "custom-badge",
     style: {
@@ -41537,10 +42291,21 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       textAlign: "center",
       padding: 0
     }
-  }), name && /*#__PURE__*/React__default.createElement("div", null, (Array.isArray(selectedOptions) ? selectedOptions : []).filter(function (opt) {
+  })), typeof onClearAll === 'function' && selectedOptionsCount > 0 && !disabled && !effectiveReadOnly && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginTop: '6px'
+    }
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    label: "Tout effacer",
+    size: "small",
+    onClick: handleClearAll
+  })), name && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '0px'
+    }
+  }, (Array.isArray(selectedOptions) ? selectedOptions : []).filter(function (opt) {
     return opt && (_typeof$g(opt) === 'object' || typeof opt === 'number' || typeof opt === 'string');
   }).map(function (opt, index) {
-    // normalisation
     var id = _typeof$g(opt) === 'object' && opt !== null ? opt[optionValue] : opt;
     var nameAttr = _typeof$g(opt) === 'object' && opt !== null ? opt[optionLabel] || opt.nom || '' : '';
     return /*#__PURE__*/React__default.createElement("input", {
@@ -41571,15 +42336,12 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       display: 'block',
       pointerEvents: 'none'
     }
-  })), isInvalidEffective && /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement("small", {
+  })), isInvalidEffective && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
     style: {
       color: 'red',
       fontStyle: 'italic',
-      display: 'block'
+      display: 'block',
+      width: '156px'
     }
   }, errorMessage || (showRequiredError ? ((_window$Translator = window.Translator) === null || _window$Translator === void 0 ? void 0 : _window$Translator.trans('error.required')) || 'Veuillez renseigner ce champ' : ((_window$Translator2 = window.Translator) === null || _window$Translator2 === void 0 ? void 0 : _window$Translator2.trans('error.invalid_selection')) || 'Sélection invalide')))));
 };
@@ -43383,7 +44145,6 @@ var MultiSelectPresets = {
   }
 };
 
-// Options synchrones (tableau)
 var syncOptions = [{
   label: 'Option 1',
   value: '1',
@@ -43405,8 +44166,6 @@ var syncOptions = [{
   value: '5',
   color: '#ec4899'
 }];
-
-// Fonction pour simuler des options asynchrones
 var asyncOptions = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(search, _, _ref) {
     var page, mockOptions, startIndex, paginatedOptions;
@@ -43454,7 +44213,7 @@ var asyncOptions = /*#__PURE__*/function () {
             label: 'Option 10',
             value: '10',
             color: '#8b5cf6'
-          }]; // Simulation de pagination
+          }];
           startIndex = (page - 1) * 5;
           paginatedOptions = mockOptions.slice(startIndex, startIndex + 5);
           return _context.a(2, {
@@ -43470,7 +44229,6 @@ var asyncOptions = /*#__PURE__*/function () {
   };
 }();
 var MultiSelectMetaAsyncPresets = {
-  // Configuration pour les options synchrones
   SyncOptions: {
     value: ['2', '9'],
     options: syncOptions,
@@ -43492,9 +44250,8 @@ var MultiSelectMetaAsyncPresets = {
     useCheckbox: false,
     showSelectAll: false
   },
-  // Configuration pour les options asynchrones
   AsyncOptions: {
-    value: ['1', '12'],
+    value: ['1', '9'],
     options: asyncOptions,
     placeholder: 'Sélectionnez une ou plusieurs options',
     optionLabel: 'label',
@@ -43513,6 +44270,153 @@ var MultiSelectMetaAsyncPresets = {
     showClear: false,
     useCheckbox: false,
     showSelectAll: false
+  },
+  Base: {
+    value: [],
+    placeholder: 'Sélection multiple',
+    options: syncOptions,
+    filter: true,
+    showSelectAll: true,
+    useCheckbox: true,
+    displayBadge: true,
+    withColor: true,
+    maxSelectedLabels: 4,
+    selectMetaConfig: {
+      labelStyle: {
+        fontWeight: '400'
+      },
+      generalIcon: 'pi pi-tag'
+    }
+  },
+  Badge: {
+    displayBadge: true,
+    maxSelectedLabels: 3,
+    options: syncOptions,
+    placeholder: 'Sélectionnez des options'
+  },
+  DefaultValue: {
+    value: ['1', '3'],
+    placeholder: 'Valeurs par défaut',
+    options: syncOptions,
+    filter: true,
+    showSelectAll: true,
+    useCheckbox: true
+  },
+  Placeholder: {
+    placeholder: 'Veuillez sélectionner vos options',
+    options: syncOptions,
+    displayCounter: true
+  },
+  UnselectSelectAll: {
+    showSelectAll: true,
+    placeholder: 'Tout sélectionner',
+    options: syncOptions,
+    useCheckbox: true
+  },
+  Disabled: {
+    disabled: true,
+    value: [],
+    placeholder: 'Désactivé',
+    options: syncOptions
+  },
+  DeleteDeleteAll: {
+    value: ['2', '4'],
+    placeholder: 'Tout effacer',
+    options: syncOptions,
+    showClear: true
+  },
+  EmptyOptions: {
+    placeholder: ' ',
+    options: function () {
+      var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              return _context2.a(2, {
+                options: [],
+                hasMore: false
+              });
+          }
+        }, _callee2);
+      }));
+      function options() {
+        return _options.apply(this, arguments);
+      }
+      return options;
+    }()
+  },
+  Search: {
+    options: syncOptions,
+    filter: true
+  },
+  Required: {
+    value: [],
+    placeholder: 'Sélection obligatoire',
+    options: syncOptions,
+    invalid: true,
+    errorMessage: 'Au moins une option doit être sélectionnée'
+  },
+  Checkbox: {
+    options: syncOptions,
+    useCheckbox: true
+  },
+  XItemsSelected: {
+    maxSelectedLabels: 3,
+    options: syncOptions,
+    hasInfoLine: true
+  },
+  Counter: {
+    placeholder: 'Options avec counter',
+    options: syncOptions,
+    displayCounter: true,
+    maxVisibleCounter: 1
+  },
+  SearchAjaxLoading: {
+    placeholder: 'Rechercher (Ajax)…',
+    filter: true,
+    showClear: true,
+    virtualScroll: false,
+    options: function () {
+      var _options2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+        var _ref3,
+          _ref3$page,
+          page,
+          _args3 = arguments;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              _ref3 = _args3.length > 2 ? _args3[2] : undefined, _ref3$page = _ref3.page, page = _ref3$page === void 0 ? 1 : _ref3$page;
+              return _context3.a(2, new Promise(function (resolve) {
+                setTimeout(function () {
+                  var PAGE_SIZE = 10;
+                  var allOptions = Array.from({
+                    length: 50
+                  }).map(function (_, i) {
+                    return {
+                      label: "Option Ajax ".concat(i + 1),
+                      value: i + 1
+                    };
+                  });
+                  var start = (page - 1) * PAGE_SIZE;
+                  var end = start + PAGE_SIZE;
+                  var pageOptions = allOptions.slice(start, end);
+                  resolve({
+                    options: pageOptions,
+                    hasMore: end < allOptions.length,
+                    additional: {
+                      page: page + 1
+                    }
+                  });
+                }, 1200);
+              }));
+          }
+        }, _callee3);
+      }));
+      function options() {
+        return _options2.apply(this, arguments);
+      }
+      return options;
+    }()
   }
 };