arengibook 2.4.591 → 2.4.593

package/dist/index.js

@@ -35948,8 +35948,6 @@ var PopupPresets = {
 var Dropdown = function Dropdown(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
-    _ref$optionLoad = _ref.optionLoad,
-    optionLoad = _ref$optionLoad === void 0 ? null : _ref$optionLoad,
     _ref$isGroupedOption = _ref.isGroupedOption,
     isGroupedOption = _ref$isGroupedOption === void 0 ? false : _ref$isGroupedOption,
     value = _ref.value,
@@ -36000,22 +35998,90 @@ var Dropdown = function Dropdown(_ref) {
     _useState2 = _slicedToArray$8(_useState, 2),
     optionSelected = _useState2[0],
     setOptionSelected = _useState2[1];
-  var items = useRef([]);
+  useRef([]);
   var _useState3 = useState(false),
     _useState4 = _slicedToArray$8(_useState3, 2),
     loading = _useState4[0],
     setLoading = _useState4[1];
-  var loadedOptionsRef = useRef([]);
+  useRef([]);
   var currentPageRef = useRef(1);
-  var isLazy = typeof optionLoad === 'function';
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray$8(_useState5, 2),
+    loadedOptions = _useState6[0],
+    setLoadedOptions = _useState6[1];
+  var isOptionLoadFunction = typeof options === 'function';
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray$8(_useState7, 2);
+    _useState8[0];
+    _useState8[1];
+  var filterRef = useRef('');
+  useEffect(function () {
+    var handleScroll = function handleScroll(e) {
+      var target = e.target;
+
+      // Si on scroll dans la liste elle-même (aucun effet de suppression de liste)
+      if (target.closest && target.closest('.p-dropdown-panel')) {
+        return;
+      }
+
+      // Sinon, on ferme la zone de liste
+      var dropdownPanels = document.querySelectorAll('.p-dropdown-panel');
+      dropdownPanels.forEach(function (panel) {
+        if (panel && panel.style.display !== 'none') {
+          document.body.click(); // Déclenche un "click outside"
+        }
+      });
+    };
+    var loadOptions = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var result, _t;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              if (!isOptionLoadFunction) {
+                _context.n = 6;
+                break;
+              }
+              setLoading(true);
+              _context.p = 1;
+              _context.n = 2;
+              return options();
+            case 2:
+              result = _context.v;
+              setLoadedOptions(Array.isArray(result.options) ? result.options : []);
+              _context.n = 4;
+              break;
+            case 3:
+              _context.p = 3;
+              _t = _context.v;
+              console.error('Erreur lors du chargement des options:', _t);
+            case 4:
+              _context.p = 4;
+              setLoading(false);
+              return _context.f(4);
+            case 5:
+              _context.n = 7;
+              break;
+            case 6:
+              setLoadedOptions(options);
+            case 7:
+              return _context.a(2);
+          }
+        }, _callee, null, [[1, 3, 4, 5]]);
+      }));
+      return function loadOptions() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    loadOptions();
+    window.addEventListener('scroll', handleScroll, true);
+    return function () {
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [options, isOptionLoadFunction]);
   useEffect(function () {
     setOptionSelected(value !== null && value !== void 0 ? value : null);
   }, [value]);
-  useEffect(function () {
-    if (!isLazy) {
-      items.current = options;
-    }
-  }, [options, isLazy]);
   var style = {
     border: invalid ? '1px solid red' : '1px solid #ccc',
     width: '100%'
@@ -36035,16 +36101,17 @@ var Dropdown = function Dropdown(_ref) {
         }, optionStyle)
       }, option === null || option === void 0 ? void 0 : option[optionLabel]);
     } else {
-      var _ref2 = selectMetaConfig || {},
-        labelStyle = _ref2.labelStyle,
-        generalIcon = _ref2.generalIcon;
+      var _ref3 = selectMetaConfig || {},
+        labelStyle = _ref3.labelStyle,
+        generalIcon = _ref3.generalIcon;
       var styleLabel = {
         marginLeft: '10px'
       };
       return /*#__PURE__*/React__default.createElement("div", {
         className: "flex align-items-center",
         style: {
-          width: '100%'
+          padding: '6px 10px',
+          height: 'auto'
         }
       }, /*#__PURE__*/React__default.createElement("div", {
         style: _objectSpread2({
@@ -36061,6 +36128,8 @@ var Dropdown = function Dropdown(_ref) {
       }, option === null || option === void 0 ? void 0 : option[optionLabel])));
     }
   };
+  ({
+    maxHeight: loadedOptions.length <= 6 ? "".concat(loadedOptions.length * 42, "px") : '240px'});
   var valueTemplate = function valueTemplate(option) {
     if (isSelectMeta) {
       var iconColor = option !== null && option !== void 0 && option.color ? inverseColor(option === null || option === void 0 ? void 0 : option.color) : '#FFFFFF';
@@ -36091,50 +36160,64 @@ var Dropdown = function Dropdown(_ref) {
     }
   };
   var onLazyLoad = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(event) {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(event) {
       var _event$filter;
-      var search, _res$options, _res$additional$page, _res$additional, res, newOptions, _t;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.n) {
+      var search, currentPage, _res$options, _res$additional$page, _res$additional, res, newOptions, _t2;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.n) {
           case 0:
-            if (!(!isLazy || !optionLoad)) {
-              _context.n = 1;
+            if (isOptionLoadFunction) {
+              _context2.n = 1;
               break;
             }
-            return _context.a(2);
+            return _context2.a(2);
           case 1:
+            search = (_event$filter = event === null || event === void 0 ? void 0 : event.filter) !== null && _event$filter !== void 0 ? _event$filter : filterRef.current;
+            currentPage = currentPageRef.current;
             setLoading(true);
-            search = (_event$filter = event === null || event === void 0 ? void 0 : event.filter) !== null && _event$filter !== void 0 ? _event$filter : '';
-            _context.p = 2;
-            _context.n = 3;
-            return optionLoad(search, loadedOptionsRef.current, {
-              page: currentPageRef.current
+            _context2.p = 2;
+            _context2.n = 3;
+            return options(search, loadedOptions, {
+              page: currentPage
             });
           case 3:
-            res = _context.v;
+            res = _context2.v;
             newOptions = (_res$options = res === null || res === void 0 ? void 0 : res.options) !== null && _res$options !== void 0 ? _res$options : [];
-            loadedOptionsRef.current = [].concat(_toConsumableArray$6(loadedOptionsRef.current), _toConsumableArray$6(newOptions));
-            items.current = loadedOptionsRef.current;
-            currentPageRef.current = (_res$additional$page = res === null || res === void 0 || (_res$additional = res.additional) === null || _res$additional === void 0 ? void 0 : _res$additional.page) !== null && _res$additional$page !== void 0 ? _res$additional$page : currentPageRef.current + 1;
-            _context.n = 5;
+            setLoadedOptions(function (prevOptions) {
+              return currentPage === 1 ? newOptions : [].concat(_toConsumableArray$6(prevOptions), _toConsumableArray$6(newOptions));
+            });
+            currentPageRef.current = (_res$additional$page = res === null || res === void 0 || (_res$additional = res.additional) === null || _res$additional === void 0 ? void 0 : _res$additional.page) !== null && _res$additional$page !== void 0 ? _res$additional$page : currentPage + 1;
+            _context2.n = 5;
             break;
           case 4:
-            _context.p = 4;
-            _t = _context.v;
-            console.error('Erreur optionLoad:', _t);
+            _context2.p = 4;
+            _t2 = _context2.v;
+            console.error('Erreur lors du chargement des options:', _t2);
           case 5:
-            _context.p = 5;
+            _context2.p = 5;
             setLoading(false);
-            return _context.f(5);
+            return _context2.f(5);
           case 6:
-            return _context.a(2);
+            return _context2.a(2);
         }
-      }, _callee, null, [[2, 4, 5, 6]]);
+      }, _callee2, null, [[2, 4, 5, 6]]);
     }));
     return function onLazyLoad(_x) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
+  var handleFilter = function handleFilter(event) {
+    var _event$value;
+    var value = (_event$value = event === null || event === void 0 ? void 0 : event.value) !== null && _event$value !== void 0 ? _event$value : '';
+    filterRef.current = value;
+    currentPageRef.current = 1;
+    setLoadedOptions([]);
+    if (isOptionLoadFunction) {
+      onLazyLoad({
+        filter: value
+      });
+    }
+  };
   var handleChange = function handleChange(e) {
     var newValue = e.value;
     setOptionSelected(newValue);
@@ -36143,15 +36226,15 @@ var Dropdown = function Dropdown(_ref) {
     }
   };
   var groupedItemTemplate = function groupedItemTemplate(option) {
-    var _ref4 = groupedItemTemplateConfig || {},
-      showImage = _ref4.showImage,
-      imageKey = _ref4.imageKey,
-      imageStyle = _ref4.imageStyle,
-      showIcon = _ref4.showIcon,
-      iconKey = _ref4.iconKey,
-      labelStyle = _ref4.labelStyle,
-      generalIcon = _ref4.generalIcon,
-      generalImage = _ref4.generalImage;
+    var _ref5 = groupedItemTemplateConfig || {},
+      showImage = _ref5.showImage,
+      imageKey = _ref5.imageKey,
+      imageStyle = _ref5.imageStyle,
+      showIcon = _ref5.showIcon,
+      iconKey = _ref5.iconKey,
+      labelStyle = _ref5.labelStyle,
+      generalIcon = _ref5.generalIcon,
+      generalImage = _ref5.generalImage;
     var icon = option.value && option.value[iconKey];
     var styleLabel = generalIcon || showImage && option[imageKey] || showIcon && icon ? {
       marginLeft: '10px'
@@ -36201,14 +36284,19 @@ var Dropdown = function Dropdown(_ref) {
     className: "flex flex-col gap-1"
   }, /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$A({
     value: optionSelected,
-    options: isLazy ? items.current : options,
+    options: loadedOptions,
     onChange: handleChange,
     placeholder: placeholder,
     disabled: disabled,
     filter: filter,
+    onFilter: handleFilter,
     optionLabel: optionLabel,
     optionValue: optionValue,
     style: style,
+    panelStyle: {
+      maxHeight: 'auto',
+      overflowY: 'auto'
+    },
     itemTemplate: optionTemplate,
     valueTemplate: valueTemplate,
     showClear: showClear,
@@ -36216,7 +36304,7 @@ var Dropdown = function Dropdown(_ref) {
   }, isGroupedOption && {
     optionGroupLabel: 'label',
     optionGroupChildren: 'items'
-  }, (isSelectMeta || isLazy) && {
+  }, (isSelectMeta || isOptionLoadFunction) && {
     virtualScrollerOptions: {
       lazy: true,
       onLazyLoad: onLazyLoad,
@@ -36375,9 +36463,8 @@ var DropdownPresets = {
   },
   AsyncLoad: {
     placeholder: 'Chargement distant simulé',
-    options: [],
-    optionLoad: function () {
-      var _optionLoad = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(search, loadedOptions, _ref) {
+    options: function () {
+      var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(search, loadedOptions, _ref) {
         var page, length, start, data;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.n) {
@@ -36400,7 +36487,6 @@ var DropdownPresets = {
                   });
                 }),
                 hasMore: page * length < 100,
-                // Supposons que nous avons 100 options au total
                 additional: {
                   page: page + 1
                 }
@@ -36408,15 +36494,16 @@ var DropdownPresets = {
           }
         }, _callee);
       }));
-      function optionLoad(_x, _x2, _x3) {
-        return _optionLoad.apply(this, arguments);
+      function options(_x, _x2, _x3) {
+        return _options.apply(this, arguments);
       }
-      return optionLoad;
+      return options;
     }(),
     selectMetaConfig: {
       generalIcon: 'pi pi-circle-fill'
     },
     isSelectMeta: true,
+    showClear: true,
     valueStyle: {
       fontSize: '14px',
       fontFamily: 'Arial'
@@ -36429,9 +36516,8 @@ var DropdownPresets = {
   AsyncSearch: {
     placeholder: 'Recherchez une option...',
     filter: true,
-    options: [],
-    optionLoad: function () {
-      var _optionLoad2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(search, loadedOptions, _ref2) {
+    options: function () {
+      var _options2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(search, loadedOptions, _ref2) {
         var page, length, allOptions, filteredOptions, start, pageSlice;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
@@ -36441,8 +36527,7 @@ var DropdownPresets = {
               _context2.n = 1;
               return simulateNetworkDelay();
             case 1:
-              // Générer toutes les options possibles
-              allOptions = generateOptions(100); // Filtrer les options en fonction de la recherche
+              allOptions = generateOptions(100);
               filteredOptions = allOptions.filter(function (opt) {
                 return opt.nom.toLowerCase().includes(search.toLowerCase());
               }); // Pagination des résultats filtrés
@@ -36464,10 +36549,10 @@ var DropdownPresets = {
           }
         }, _callee2);
       }));
-      function optionLoad(_x4, _x5, _x6) {
-        return _optionLoad2.apply(this, arguments);
+      function options(_x4, _x5, _x6) {
+        return _options2.apply(this, arguments);
       }
-      return optionLoad;
+      return options;
     }(),
     isSelectMeta: true,
     selectMetaConfig: {
@@ -36480,7 +36565,8 @@ var DropdownPresets = {
     optionStyle: {
       fontSize: '14px',
       fontFamily: 'Arial'
-    }
+    },
+    showClear: true
   },
   Group: {
     placeholder: 'Veuillez choisir une option',

package/package.json

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