arengibook 2.4.620 → 2.4.622

package/dist/index.js

@@ -39348,13 +39348,14 @@ var MultiSelect = function MultiSelect(props) {
     _props$optionValue = props.optionValue,
     optionValue = _props$optionValue === void 0 ? 'value' : _props$optionValue,
     _props$invalid = props.invalid,
-    invalid = _props$invalid === void 0 ? false : _props$invalid;
-    props.errorMessage;
-    var _props$valueStyle = props.valueStyle,
+    invalid = _props$invalid === void 0 ? false : _props$invalid,
+    _props$errorMessage = props.errorMessage,
+    errorMessage = _props$errorMessage === void 0 ? '' : _props$errorMessage,
+    _props$valueStyle = props.valueStyle,
     valueStyle = _props$valueStyle === void 0 ? {} : _props$valueStyle;
     props.optionStyle;
-    props.name;
-    var _props$showSelectAll = props.showSelectAll,
+    var name = props.name,
+    _props$showSelectAll = props.showSelectAll,
     showSelectAll = _props$showSelectAll === void 0 ? false : _props$showSelectAll,
     _props$useCheckbox = props.useCheckbox,
     useCheckbox = _props$useCheckbox === void 0 ? false : _props$useCheckbox,
@@ -39391,9 +39392,9 @@ var MultiSelect = function MultiSelect(props) {
     selectedOptions = _useState2[0],
     setSelectedOptions = _useState2[1];
   var _useState3 = useState(false),
-    _useState4 = _slicedToArray$9(_useState3, 2);
-    _useState4[0];
-    _useState4[1];
+    _useState4 = _slicedToArray$9(_useState3, 2),
+    hovered = _useState4[0],
+    setHovered = _useState4[1];
   var style = {
     border: invalid ? '1px solid red' : '1px solid #ccc',
     width: '100%'
@@ -39432,7 +39433,8 @@ var MultiSelect = function MultiSelect(props) {
       }, !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]);
     }
   };
-  selectedOptions ? selectedOptions.length : 0;
+  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;
   var inverseColor = function inverseColor(hexColor) {
     var r = parseInt(hexColor.substr(1, 2), 16);
     var g = parseInt(hexColor.substr(3, 2), 16);
@@ -39553,7 +39555,17 @@ var MultiSelect = function MultiSelect(props) {
       }, option.label)));
     }
   };
-  return /*#__PURE__*/React__default.createElement(MultiSelect$1, _extends$C({
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-1"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "multiselect-container",
+    onMouseEnter: function onMouseEnter() {
+      return setHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(MultiSelect$1, _extends$C({
     value: selectedOptions,
     options: options,
     placeholder: placeholder,
@@ -39577,7 +39589,36 @@ var MultiSelect = function MultiSelect(props) {
   }, isGroupedOption && {
     optionGroupLabel: 'label',
     optionGroupChildren: 'items'
-  }));
+  })), displayNbOption && hovered && selectedOptionsCount > 0 && /*#__PURE__*/React__default.createElement("div", {
+    className: "selected-options-tooltip"
+  }, /*#__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("input", {
+    type: "hidden",
+    name: name,
+    value: selectedOptions.map(function (opt) {
+      return opt[optionValue];
+    }).join(',')
+  }), invalid && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
+    style: {
+      color: 'red',
+      fontStyle: 'italic'
+    }
+  }, errorMessage || 'Sélection invalide')));
 };
 
 var optionsExample = [{
@@ -39789,6 +39830,7 @@ var MultiSelectPresets = {
       value: '2',
       color: '#ff9900'
     }],
+    displayNbOption: false,
     options: syncOptions$1,
     placeholder: 'Sélectionnez une ou plusieurs options',
     optionLabel: 'label',

package/package.json

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