arengibook 2.4.588 → 2.4.590

package/dist/index.js

@@ -35813,6 +35813,8 @@ var PopupPresets = {
 var Dropdown = function Dropdown(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$isGroupedOption = _ref.isGroupedOption,
+    isGroupedOption = _ref$isGroupedOption === void 0 ? false : _ref$isGroupedOption,
     value = _ref.value,
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? 'Sélectionnez une option' : _ref$placeholder,
@@ -35833,184 +35835,90 @@ var Dropdown = function Dropdown(_ref) {
       paddingTop: '1rem',
       paddingBottom: '1rem'
     } : _ref$valueStyle,
+    onChange = _ref.onChange,
     _ref$optionStyle = _ref.optionStyle,
     optionStyle = _ref$optionStyle === void 0 ? {} : _ref$optionStyle,
     name = _ref.name,
     _ref$showClear = _ref.showClear,
     showClear = _ref$showClear === void 0 ? false : _ref$showClear,
+    _ref$groupedItemTempl = _ref.groupedItemTemplateConfig,
+    groupedItemTemplateConfig = _ref$groupedItemTempl === void 0 ? {
+      showIcon: false,
+      iconKey: 'icon',
+      showImage: false,
+      imageKey: 'image',
+      imageStyle: null,
+      labelStyle: null,
+      generalIcon: null,
+      generalImage: null
+    } : _ref$groupedItemTempl,
     _ref$isSelectMeta = _ref.isSelectMeta,
     isSelectMeta = _ref$isSelectMeta === void 0 ? false : _ref$isSelectMeta,
     _ref$selectMetaConfig = _ref.selectMetaConfig,
     selectMetaConfig = _ref$selectMetaConfig === void 0 ? {
       labelStyle: null,
       generalIcon: null
-    } : _ref$selectMetaConfig,
-    onChangeFunction = _ref.onChangeFunction,
-    classInput = _ref.classInput,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$multiple = _ref.multiple,
-    multiple = _ref$multiple === void 0 ? false : _ref$multiple;
-    _ref.async;
-    _ref.url;
-    _ref.filterIds;
-    _ref.filterContent;
-    _ref.formid;
-    var ongletID = _ref.ongletID;
-    _ref.node;
-    var _ref$defaultMenuIsOpe = _ref.defaultMenuIsOpen,
-    defaultMenuIsOpen = _ref$defaultMenuIsOpe === void 0 ? false : _ref$defaultMenuIsOpe;
+    } : _ref$selectMetaConfig;
   var _useState = useState(value !== null && value !== void 0 ? value : null),
     _useState2 = _slicedToArray$8(_useState, 2),
     optionSelected = _useState2[0],
     setOptionSelected = _useState2[1];
-  var _useState3 = useState(defaultMenuIsOpen),
-    _useState4 = _slicedToArray$8(_useState3, 2);
-    _useState4[0];
-    var setIsOpen = _useState4[1];
-  var _useState5 = useState(defaultMenuIsOpen),
-    _useState6 = _slicedToArray$8(_useState5, 2),
-    menuIsOpen = _useState6[0],
-    setMenuIsOpen = _useState6[1];
-  var ref = useRef();
-  var refValue = useRef();
   var items = useRef(Array.from({
     length: 100000
   }));
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray$8(_useState7, 2),
-    loading = _useState8[0],
-    setLoading = _useState8[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray$8(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
   var loadLazyTimeout = useRef();
   useEffect(function () {
     setOptionSelected(value !== null && value !== void 0 ? value : null);
   }, [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.5 ? '#000000' : '#FFFFFF';
-  };
-  var onLazyLoad = function onLazyLoad(event) {
-    setLoading(true);
-    if (loadLazyTimeout.current) {
-      clearTimeout(loadLazyTimeout.current);
-    }
-    loadLazyTimeout.current = setTimeout(function () {
-      var first = event.first,
-        last = event.last;
-      var _items = _toConsumableArray$6(items.current);
-      for (var i = first; i < last; i++) {
-        _items[i] = {
-          label: "Item #".concat(i),
-          value: i
-        };
-      }
-      items.current = _items;
-      setLoading(false);
-    }, Math.random() * 1000 + 250);
-  };
-  var handleChange = function handleChange(e) {
-    var newValue = e.value;
-    setOptionSelected(newValue);
-    if (onChangeFunction) {
-      onChangeFunction(newValue);
-    }
-    if (!multiple) {
-      setIsOpen(false);
-    }
-  };
-  var onMenuOpen = function onMenuOpen() {
-    setMenuIsOpen(true);
-    setIsOpen(true);
-  };
-  var onMenuClose = function onMenuClose() {
-    setMenuIsOpen(false);
-    setIsOpen(false);
-  };
-  var handleClickOutside = function handleClickOutside(e) {
-    if (ref.current && !ref.current.contains(e.target)) {
-      setMenuIsOpen(false);
-      setIsOpen(false);
-    }
-  };
   useEffect(function () {
-    document.addEventListener('mousedown', handleClickOutside);
+    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, le zone de liste est fermée
+      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"
+        }
+      });
+    };
+    window.addEventListener('scroll', handleScroll, true);
     return function () {
-      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
     };
   }, []);
-  var renderSelectedItems = function renderSelectedItems() {
-    if (!optionSelected) return null;
-    if (multiple && Array.isArray(optionSelected)) {
-      if (optionSelected.length <= 5) {
-        return optionSelected.map(function (opt, index) {
-          return opt && opt.color && opt.nom ? /*#__PURE__*/React__default.createElement("span", {
-            key: index,
-            className: "badge badge-primary select-badge",
-            style: {
-              backgroundColor: opt.color
-            }
-          }, opt.nom) : null;
-        });
-      } else {
-        return /*#__PURE__*/React__default.createElement("div", {
-          onClick: function onClick(e) {
-            e.stopPropagation();
-            setIsOpen(false);
-            var event = new CustomEvent('openInfoSelect', {
-              detail: {
-                value: optionSelected
-              }
-            });
-            document.dispatchEvent(event);
-          }
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: "selectMetaCounter"
-        }, /*#__PURE__*/React__default.createElement("span", {
-          className: "badge trigger_popup_fricc"
-        }, optionSelected.length), /*#__PURE__*/React__default.createElement("div", {
-          className: "test-title-ON"
-        }, "Toggle")));
-      }
-    } else if (optionSelected && optionSelected.color && optionSelected.nom) {
-      return /*#__PURE__*/React__default.createElement("span", {
-        className: "badge badge-primary select-badge",
-        style: {
-          backgroundColor: optionSelected.color,
-          color: inverseColor(optionSelected.color)
+  var resetDropdownFilter = function resetDropdownFilter() {
+    setTimeout(function () {
+      var dropdownPanels = document.querySelectorAll('.p-dropdown-panel');
+      dropdownPanels.forEach(function (panel) {
+        var input = panel.querySelector('.p-dropdown-filter');
+        if (input) {
+          input.value = '';
+          input.dispatchEvent(new Event('input', {
+            bubbles: true
+          }));
         }
-      }, optionSelected.nom);
-    }
-    return null;
-  };
-  var renderHiddenInputs = function renderHiddenInputs() {
-    if (multiple && Array.isArray(optionSelected)) {
-      return optionSelected.map(function (opt, index) {
-        return opt && opt.id ? /*#__PURE__*/React__default.createElement("input", {
-          type: "hidden",
-          key: index,
-          name: !readOnly ? name : '',
-          className: classInput,
-          "data-id-onglet": ongletID,
-          value: opt.id,
-          "data-name": opt.nom,
-          ref: index === 0 ? refValue : null
-        }) : null;
-      });
-    } else if (optionSelected && optionSelected.id) {
-      return /*#__PURE__*/React__default.createElement("input", {
-        type: "hidden",
-        name: !readOnly ? name : '',
-        className: classInput,
-        "data-id-onglet": ongletID,
-        value: optionSelected.id,
-        "data-name": optionSelected.nom,
-        ref: refValue
       });
-    }
-    return null;
+    }, 50);
+  };
+  var style = {
+    border: invalid ? '1px solid red' : '1px solid #ccc',
+    width: '100%'
+  };
+  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.5 ? '#000000' : '#FFFFFF';
   };
   var optionTemplate = function optionTemplate(option) {
     if (!isSelectMeta) {
@@ -36018,14 +35926,13 @@ var Dropdown = function Dropdown(_ref) {
         style: _objectSpread2({
           fontSize: '14px'
         }, optionStyle)
-      }, option.label);
+      }, option === null || option === void 0 ? void 0 : option[optionLabel]);
     } else {
       var _ref2 = selectMetaConfig || {},
         labelStyle = _ref2.labelStyle,
         generalIcon = _ref2.generalIcon;
       var styleLabel = {
-        marginLeft: '10px',
-        color: option === null || option === void 0 ? void 0 : option.color
+        marginLeft: '10px'
       };
       return /*#__PURE__*/React__default.createElement("div", {
         className: "flex align-items-center",
@@ -36044,56 +35951,142 @@ var Dropdown = function Dropdown(_ref) {
         className: generalIcon
       }), /*#__PURE__*/React__default.createElement("span", {
         style: styleLabel
-      }, option === null || option === void 0 ? void 0 : option.label)));
+      }, option === null || option === void 0 ? void 0 : option[optionLabel])));
     }
   };
   var valueTemplate = function valueTemplate(option) {
-    if (!option) {
+    if (isSelectMeta) {
+      var iconColor = option !== null && option !== void 0 && option.color ? inverseColor(option === null || option === void 0 ? void 0 : option.color) : '#FFFFFF';
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: _objectSpread2({
+          backgroundColor: option === null || option === void 0 ? void 0 : option.color,
+          color: 'white',
+          padding: '0.5rem',
+          borderRadius: '1rem',
+          display: 'inline-block'
+        }, valueStyle)
+      }, option !== null && option !== void 0 && option[optionLabel] ? /*#__PURE__*/React__default.createElement("span", {
+        style: {
+          color: iconColor
+        }
+      }, option === null || option === void 0 ? void 0 : option[optionLabel]) : /*#__PURE__*/React__default.createElement("span", {
+        style: {
+          color: '#000000'
+        }
+      }, placeholder));
+    } else {
       return /*#__PURE__*/React__default.createElement("span", {
-        style: valueStyle
-      }, placeholder);
+        style: _objectSpread2({
+          fontFamily: 'Arial',
+          fontSize: '14px'
+        }, valueStyle)
+      }, (option === null || option === void 0 ? void 0 : option[optionLabel]) || placeholder);
     }
-    var iconColor = option !== null && option !== void 0 && option.color ? inverseColor(option.color) : '#FFFFFF';
-    return /*#__PURE__*/React__default.createElement("div", {
-      style: _objectSpread2({
-        backgroundColor: option.color,
-        color: iconColor,
-        padding: '0.5rem',
-        borderRadius: '1rem',
-        display: 'inline-block'
-      }, valueStyle)
-    }, option.label);
   };
-  var style = {
-    border: invalid ? '1px solid red' : '1px solid #ccc',
-    width: '100%'
+  var onLazyLoad = function onLazyLoad(event) {
+    setLoading(true);
+    if (loadLazyTimeout.current) {
+      clearTimeout(loadLazyTimeout.current);
+    }
+    loadLazyTimeout.current = setTimeout(function () {
+      var first = event.first,
+        last = event.last;
+      var _items = _toConsumableArray$6(items.current);
+      for (var i = first; i < last; i++) {
+        _items[i] = {
+          label: "Item #".concat(i),
+          value: i
+        };
+      }
+      items.current = _items;
+      setLoading(false);
+    }, Math.random() * 1000 + 250);
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-1 ".concat(readOnly ? 'select-form-event-container-readonly' : ''),
-    ref: ref
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "select-badges-container",
-    onClick: function onClick() {
-      return !readOnly && setIsOpen(true);
+  var handleChange = function handleChange(e) {
+    var newValue = e.value;
+    setOptionSelected(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  var groupedItemTemplate = function groupedItemTemplate(option) {
+    var _ref3 = groupedItemTemplateConfig || {},
+      showImage = _ref3.showImage,
+      imageKey = _ref3.imageKey,
+      imageStyle = _ref3.imageStyle,
+      showIcon = _ref3.showIcon,
+      iconKey = _ref3.iconKey,
+      labelStyle = _ref3.labelStyle,
+      generalIcon = _ref3.generalIcon,
+      generalImage = _ref3.generalImage;
+    var icon = option.value && option.value[iconKey];
+    var styleLabel = {};
+    if (generalIcon || generalIcon || showImage && option[imageKey] || showIcon && icon) {
+      styleLabel = {
+        'marginLeft': '10px'
+      };
     }
-  }, renderSelectedItems()), !readOnly && /*#__PURE__*/React__default.createElement("span", {
-    className: "caret"
-  }), /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$A({
+    if (option.group) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex align-items-center"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        style: _objectSpread2({
+          fontSize: '15px',
+          fontWeight: 'bold'
+        }, labelStyle)
+      }, generalIcon && /*#__PURE__*/React__default.createElement("i", {
+        style: _objectSpread2({
+          fontSize: '15px',
+          fontWeight: 'bold'
+        }, labelStyle),
+        className: generalIcon
+      }), generalImage && /*#__PURE__*/React__default.createElement("img", {
+        alt: "General",
+        src: generalImage,
+        style: imageStyle || {
+          width: '18px',
+          marginRight: '0.5rem'
+        },
+        className: "mr-2"
+      }), showImage && option[imageKey] && /*#__PURE__*/React__default.createElement("img", {
+        alt: option.label,
+        src: option[imageKey],
+        style: imageStyle || {
+          width: '18px',
+          marginRight: '0.5rem'
+        },
+        className: "mr-2"
+      }), showIcon && icon && /*#__PURE__*/React__default.createElement("i", {
+        style: _objectSpread2({
+          fontSize: '15px',
+          fontWeight: 'bold'
+        }, labelStyle),
+        className: 'mr-2 ' + icon
+      }), /*#__PURE__*/React__default.createElement("span", {
+        style: styleLabel
+      }, option.label)));
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-1"
+  }, /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$A({
     value: optionSelected,
     options: options,
     onChange: handleChange,
     placeholder: placeholder,
-    disabled: disabled || readOnly,
+    disabled: disabled,
     filter: filter,
     optionLabel: optionLabel,
     optionValue: optionValue,
     style: style,
     itemTemplate: optionTemplate,
     valueTemplate: valueTemplate,
+    onHide: resetDropdownFilter,
     showClear: showClear,
-    onShow: onMenuOpen,
-    onHide: onMenuClose,
-    menuIsOpen: menuIsOpen
+    optionGroupTemplate: isGroupedOption ? groupedItemTemplate : null
+  }, isGroupedOption && {
+    optionGroupLabel: 'label',
+    optionGroupChildren: 'items'
   }, isSelectMeta && {
     virtualScrollerOptions: {
       lazy: true,
@@ -36103,7 +36096,11 @@ var Dropdown = function Dropdown(_ref) {
       loading: loading,
       delay: 250
     }
-  })), /*#__PURE__*/React__default.createElement("div", null, renderHiddenInputs()), invalid && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
+  })), name && /*#__PURE__*/React__default.createElement("input", {
+    type: "hidden",
+    name: name,
+    value: optionSelected !== null && optionSelected !== void 0 ? optionSelected : ''
+  }), invalid && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
     style: {
       color: 'red',
       fontStyle: 'italic'

package/package.json

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