arengibook 2.4.656 → 2.4.658

package/dist/index.js

@@ -39278,9 +39278,9 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
   var isOptionsArray = Array.isArray(options);
   var clickedFromList = useRef(false);
   var _useState7 = useState(false),
-    _useState8 = _slicedToArray$9(_useState7, 2),
-    hovered = _useState8[0],
-    setHovered = _useState8[1];
+    _useState8 = _slicedToArray$9(_useState7, 2);
+    _useState8[0];
+    var setHovered = _useState8[1];
   var fetchOptionsFromUrl = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var search,
@@ -39554,6 +39554,16 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       }
     }, "\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$c(opt) === 'object' ? opt[optionValue] : opt);
+      var selectedOption = _flattenOptions(loadedOptions).find(function (o) {
+        return String(o[optionValue]) === key;
+      });
+      return selectedOption ? selectedOption[optionLabel] : key;
+    }).join('\n');
+  };
 
   // Fonction de lazy loading
   var onLazyLoad = function onLazyLoad(event) {
@@ -39621,11 +39631,21 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       }, _callee3);
     })), 500);
   };
-  var selectedOptionsCount = selectedOptions ? selectedOptions.length : 0;
-  var selectedOptionsText = selectedOptionsCount > 0 ? "".concat(selectedOptionsCount, " option").concat(selectedOptionsCount > 1 ? 's' : '', " s\xE9lectionn\xE9e").concat(selectedOptionsCount > 1 ? 's' : '') : placeholder;
+  selectedOptions ? selectedOptions.length : 0;
   return /*#__PURE__*/React__default.createElement("div", {
-    ref: multiSelectRef,
     className: "flex flex-col gap-1",
+    style: {
+      width: '100%'
+    }
+  }, displayNbOption && /*#__PURE__*/React__default.createElement(Tooltip, {
+    target: ".custom-target-icon"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    ref: multiSelectRef,
+    "data-pr-tooltip": getSelectedOptionsTooltipText(),
+    "data-pr-position": "right",
+    "data-pr-at": "right+5 top",
+    "data-pr-my": "left center-2",
+    className: "multiselect-container custom-target-icon",
     style: {
       width: '100%',
       position: 'relative',
@@ -39669,30 +39689,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       top: '-10px',
       right: '-10px'
     }
-  }), displayNbOption && hovered && selectedOptionsCount > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: "selected-options-tooltip",
-    style: {
-      position: 'relative',
-      top: '0px',
-      right: '0px'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      borderBottom: '3px solid black',
-      padding: '8px'
-    }
-  }, selectedOptionsText), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      paddingTop: '8px'
-    }
-  }, selectedOptions.map(function (optionValue, index) {
-    var option = _flattenOptions(loadedOptions).find(function (opt) {
-      return opt.value === optionValue;
-    });
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: index
-    }, option ? option.label : optionValue);
-  }))), name && /*#__PURE__*/React__default.createElement("div", null, (Array.isArray(selectedOptions) ? selectedOptions : []).filter(function (opt) {
+  }), name && /*#__PURE__*/React__default.createElement("div", null, (Array.isArray(selectedOptions) ? selectedOptions : []).filter(function (opt) {
     return opt && (_typeof$c(opt) === 'object' || typeof opt === 'number' || typeof opt === 'string');
   }).map(function (opt, index) {
     // normalisation
@@ -39712,7 +39709,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       color: 'red',
       fontStyle: 'italic'
     }
-  }, errorMessage || 'Sélection invalide')));
+  }, errorMessage || 'Sélection invalide'))));
 };
 
 var MultiSelect = function MultiSelect(props) {
@@ -39783,9 +39780,9 @@ var MultiSelect = function MultiSelect(props) {
     selectedOptions = _useState2[0],
     setSelectedOptions = _useState2[1];
   var _useState3 = useState(false),
-    _useState4 = _slicedToArray$9(_useState3, 2),
-    hovered = _useState4[0],
-    setHovered = _useState4[1];
+    _useState4 = _slicedToArray$9(_useState3, 2);
+    _useState4[0];
+    var setHovered = _useState4[1];
   var style = {
     border: invalid ? '1px solid red' : '1px solid #ccc',
     width: '100%'
@@ -39821,7 +39818,7 @@ var MultiSelect = function MultiSelect(props) {
           display: 'flex',
           alignItems: 'center'
         }, valueStyle)
-      }, !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", {
+      }, !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'
@@ -39836,11 +39833,10 @@ var MultiSelect = function MultiSelect(props) {
           fontFamily: 'Arial',
           fontSize: '14px'
         }, valueStyle)
-      }, !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                "), option[optionLabel]);
+      }, !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                        "), option[optionLabel]);
     }
   };
-  var selectedOptionsCount = selectedOptions ? selectedOptions.length : 0;
-  var selectedOptionsText = selectedOptionsCount > 0 ? "".concat(selectedOptionsCount, " option").concat(selectedOptionsCount > 1 ? 's' : '', " s\xE9lectionn\xE9e").concat(selectedOptionsCount > 1 ? 's' : '') : placeholder;
+  selectedOptions ? selectedOptions.length : 0;
   var inverseColor = function inverseColor(hexColor) {
     var r = parseInt(hexColor.substr(1, 2), 16);
     var g = parseInt(hexColor.substr(3, 2), 16);
@@ -39858,7 +39854,6 @@ var MultiSelect = function MultiSelect(props) {
         return opt.value === option;
       });
       if (!selectedOption) return null;
-      // const isLastItem = index === selectedOptions.length - 1;
       var handleRemove = function handleRemove(e) {
         e.stopPropagation();
         var newSelectedOptions = selectedOptions.filter(function (opt) {
@@ -39889,8 +39884,6 @@ var MultiSelect = function MultiSelect(props) {
       }, "\xD7"));
     } else {
       if (option == null) return null;
-
-      // Si `option` est une chaîne (la valeur), trouver l'objet correspondant dans `options`
       if (typeof option === 'string') {
         var _selectedOption = options.find(function (opt) {
           return opt.value === option;
@@ -39961,13 +39954,35 @@ var MultiSelect = function MultiSelect(props) {
       }, option.label)));
     }
   };
+
+  // Génération du texte pour le tooltip
+  var getSelectedOptionsTooltipText = function getSelectedOptionsTooltipText() {
+    if (selectedOptions.length === 0) return "Aucune option sélectionnée";
+    return selectedOptions.map(function (opt) {
+      if (typeof opt === 'string') {
+        var selectedOption = options.find(function (o) {
+          return o.value === opt;
+        });
+        return selectedOption ? selectedOption[optionLabel] : opt;
+      } else if (_typeof$c(opt) === 'object') {
+        return opt[optionLabel];
+      }
+      return opt;
+    }).join('\n');
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-col gap-1",
     style: {
       width: '100%'
     }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "multiselect-container",
+  }, displayNbOption && /*#__PURE__*/React__default.createElement(Tooltip, {
+    target: ".custom-target-icon"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    "data-pr-tooltip": getSelectedOptionsTooltipText(),
+    "data-pr-position": "right",
+    "data-pr-at": "right+5 top",
+    "data-pr-my": "left center-2",
+    className: "multiselect-container custom-target-icon",
     style: {
       width: '100%',
       position: 'relative',
@@ -40012,33 +40027,9 @@ var MultiSelect = function MultiSelect(props) {
       top: '-10px',
       right: '-10px'
     }
-  }), displayNbOption && hovered && selectedOptionsCount > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: "selected-options-tooltip",
-    style: {
-      position: 'relative',
-      top: '0px',
-      right: '0px'
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      borderBottom: '3px solid black',
-      padding: '8px'
-    }
-  }, selectedOptionsText), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      paddingTop: '8px'
-    }
-  }, selectedOptions.map(function (optionValue, index) {
-    var option = options.find(function (opt) {
-      return opt.value === optionValue;
-    });
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: index
-    }, option ? option.label : optionValue);
-  })))), name && /*#__PURE__*/React__default.createElement("div", null, (Array.isArray(selectedOptions) ? selectedOptions : []).filter(function (opt) {
+  })), name && /*#__PURE__*/React__default.createElement("div", null, (Array.isArray(selectedOptions) ? selectedOptions : []).filter(function (opt) {
     return opt && (_typeof$c(opt) === 'object' || typeof opt === 'number' || typeof opt === 'string');
   }).map(function (opt, index) {
-    // normalisation
     var id = _typeof$c(opt) === 'object' && opt !== null ? opt[optionValue] : opt;
     var nameAttr = _typeof$c(opt) === 'object' && opt !== null ? opt[optionLabel] || opt.nom || '' : '';
     return /*#__PURE__*/React__default.createElement("input", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "arengibook",
   "private": false,
-  "version": "2.4.656",
+  "version": "2.4.658",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {