arengibook 2.4.612 → 2.4.614

package/dist/index.js

@@ -36038,10 +36038,9 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     }, option === null || option === void 0 ? void 0 : option[optionLabel])));
   };
   var style = {
-    minWidth: '15rem',
-    minHeight: '3rem',
-    display: 'inline-flex',
-    alignItems: 'center'
+    border: invalid ? '1px solid red' : '1px solid #ccc',
+    width: '100%',
+    minHeight: '45px'
   };
   useEffect(function () {
     setOptionSelected(objValue ? objValue === null || objValue === void 0 ? void 0 : objValue[optionValue] : value !== null && value !== void 0 ? value : null);
@@ -36088,16 +36087,6 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       setIsEditing(false);
     }
   };
-  var handleClear = function handleClear() {
-    setOptionSelected(null);
-    setInputValue('');
-    if (onChange) onChange(null);
-    options('', [], {
-      page: 1
-    }).then(function (result) {
-      setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
-    });
-  };
   useEffect(function () {
     var _dropdownRef$current;
     var clearButton = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.querySelector('.p-dropdown-clear-icon');
@@ -36114,15 +36103,25 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     setOptionSelected(e.value);
     if (clickedFromList.current) {
       var _selected$optionLabel;
+      setIsEditing(false);
       var selected = loadedOptions.find(function (opt) {
         return opt[optionValue] === e.value;
       });
       setInputValue((_selected$optionLabel = selected === null || selected === void 0 ? void 0 : selected[optionLabel]) !== null && _selected$optionLabel !== void 0 ? _selected$optionLabel : '');
-      setIsEditing(true);
     }
     clickedFromList.current = false;
     if (onChange) onChange(e.value);
   };
+  var handleClear = function handleClear() {
+    setOptionSelected(null);
+    setInputValue('');
+    if (onChange) onChange(null);
+    options('', [], {
+      page: 1
+    }).then(function (result) {
+      setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
+    });
+  };
   var handleInputChange = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
       var search, result, _result$options2, _result, filteredOptions;
@@ -36183,8 +36182,8 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     }, placeholder);
     return /*#__PURE__*/React__default.createElement("span", {
       style: _objectSpread2({
-        backgroundColor: selectedOption !== null && selectedOption !== void 0 && selectedOption.color ? selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.color : '#f8e6ec',
-        color: selectedOption !== null && selectedOption !== void 0 && selectedOption.color ? inverseColor(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.color) : '#333',
+        backgroundColor: selectedOption !== null && selectedOption !== void 0 && selectedOption.color ? selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.color : '#FFFFFF',
+        color: selectedOption !== null && selectedOption !== void 0 && selectedOption.color ? inverseColor(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.color) : '#FFFFFF',
         padding: '6px 12px',
         fontSize: '14px',
         borderRadius: '8px',
@@ -36212,6 +36211,10 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       }
       setLoadedOptions(_items);
       setLoading(false);
+      var virtualscroll1 = document.querySelector('.p-virtualscroller.p-dropdown-items-wrapper');
+      if (virtualscroll1) {
+        virtualscroll1.style.height = "auto";
+      }
       var hiddenSelectDiv = document.querySelector('.p-hidden-accessible.p-dropdown-hidden-select');
       if (hiddenSelectDiv) {
         var nextEl = hiddenSelectDiv.nextElementSibling;
@@ -36252,19 +36255,14 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     ref: dropdownRef,
     className: "flex flex-col gap-1",
-    "data-p-disabled": "false",
-    "data-p-focus": "false",
-    "data-pc-name": "dropdown",
-    "data-pc-section": "root",
     onClick: invalid || disabled ? null : function () {
       return setIsEditing(editable);
     }
   }, /*#__PURE__*/React__default.createElement(Dropdown$1, {
     options: loadedOptions,
     onChange: handleChange,
-    style: style,
     filter: filter,
-    placeholder: placeholder,
+    placeholder: placeholder === "" || placeholder === null ? ' ' : placeholder,
     optionLabel: optionLabel,
     optionValue: optionValue,
     showClear: true,
@@ -36275,14 +36273,15 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     },
     value: inputValue,
     inputValue: inputText,
-    onInput: handleInputChange,
-    dropdown: true,
+    onInput: handleInputChange
+    // dropdown
+    ,
+    style: style,
     panelStyle: {
       maxHeight: 'auto',
       overflowY: 'auto'
-    }
-    // dropdownMode="current"
-    ,
+    },
+    dropdownMode: "current",
     itemTemplate: optionTemplate,
     valueTemplate: valueTemplate,
     virtualScrollerOptions: {
@@ -36313,7 +36312,7 @@ var Dropdown = function Dropdown(props) {
     isGroupedOption = _props$isGroupedOptio === void 0 ? false : _props$isGroupedOptio,
     value = props.value,
     _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? 'Sélectionnez une option' : _props$placeholder,
+    placeholder = _props$placeholder === void 0 ? ' ' : _props$placeholder,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$filter = props.filter,
@@ -36468,7 +36467,7 @@ var Dropdown = function Dropdown(props) {
         }, /*#__PURE__*/React__default.createElement("div", {
           className: 'badge select-badge',
           style: _objectSpread2({
-            backgroundColor: option !== null && option !== void 0 && option.color ? option === null || option === void 0 ? void 0 : option.color : '#f8e6ec',
+            backgroundColor: option !== null && option !== void 0 && option.color ? option === null || option === void 0 ? void 0 : option.color : '#FFFFFF',
             color: iconColor,
             padding: '6px 12px',
             fontSize: '14px',
@@ -36715,12 +36714,12 @@ var DropdownPresets = {
     }
   },
   SelectMetaSync: {
-    placeholder: 'Sélectionnez une couleur',
     options: optionsWithColors,
-    value: 'rouge',
+    value: 'bleu',
     // objValue: { label: 'Bleu', value: 'bleu', color: '#000000' },
     isSelectMeta: true,
-    editable: false,
+    placeholder: "",
+    editable: true,
     selectMetaConfig: {
       generalIcon: 'pi pi-circle-fill'
     },
@@ -36775,6 +36774,7 @@ var DropdownPresets = {
     }(),
     value: 23,
     // objValue: { label: 'Option 24', value: '24', color: '#000000' },
+    placeholder: "",
     editable: true,
     filter: false,
     selectMetaConfig: {
@@ -39133,9 +39133,6 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
   var currentPageRef = useRef(1);
   var isOptionsArray = Array.isArray(options);
   useEffect(function () {
-    if (objValue) {
-      setValueToOptionMap(objValue);
-    }
     if (isOptionsArray) {
       setLoadedOptions(options);
     } else {
@@ -39222,21 +39219,10 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
     return luminance > 0.18 ? '#000000' : '#FFFFFF';
   };
-
-  // Template pour les options dans la liste déroulante
-  // const optionTemplate = (option) => {
-  //     const { labelStyle, generalIcon } = selectMetaConfig || {};
-  //     const styleLabel = { marginLeft: '10px' };
-  //     return (
-  //         <div className="flex align-items-center" style={{ padding: '6px 10px', height: 'auto' }}>
-  //             <div style={{ fontSize: '15px', fontWeight: 'bold', ...labelStyle }}>
-  //                 {generalIcon && <i style={{ color: option?.color }} className={generalIcon} />}
-  //                 <span style={styleLabel}>{option?.[optionLabel]}</span>
-  //             </div>
-  //         </div>
-  //     );
-  // };
-
+  var style = {
+    border: invalid ? '1px solid red' : '1px solid #ccc',
+    width: '100%'
+  };
   var optionTemplate = function optionTemplate(option) {
     if (!option) return null;
     var _ref4 = selectMetaConfig || {};
@@ -39306,7 +39292,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       clearTimeout(loadLazyTimeout.current);
     }
     loadLazyTimeout.current = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-      var first, last, _items, result, newOptions, i;
+      var first, last, _items, result, newOptions, i, virtualscroll;
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.n) {
           case 0:
@@ -39327,6 +39313,12 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
             setLoadedOptions(_items);
             setLoading(false);
             currentPageRef.current += 1;
+
+            // redimensionnement du conteneur
+            virtualscroll = document.querySelector('.p-virtualscroller.p-dropdown-items-wrapper');
+            if (virtualscroll) {
+              virtualscroll.style.height = "auto";
+            }
           case 2:
             return _context3.a(2);
         }
@@ -39343,12 +39335,7 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
   }, /*#__PURE__*/React__default.createElement(MultiSelect$1, {
     options: loadedOptions,
     onChange: handleChange,
-    style: {
-      minWidth: '15rem',
-      minHeight: '3rem',
-      display: 'inline-flex',
-      alignItems: 'center'
-    },
+    style: style,
     showSelectAll: showSelectAll,
     disabled: disabled,
     filter: filter,
@@ -39454,7 +39441,7 @@ var MultiSelect = function MultiSelect(props) {
     setHovered = _useState4[1];
   var style = {
     border: invalid ? '1px solid red' : '1px solid #ccc',
-    width: '400px'
+    width: '100%'
   };
   var optionTemplate = function optionTemplate(option) {
     if (!option) return null;

package/package.json

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