arengibook 2.4.585 → 2.4.586

package/dist/index.js

@@ -94,20 +94,20 @@ function classNames() {
   return undefined;
 }
 
-function _arrayWithoutHoles$9(r) {
+function _arrayWithoutHoles$a(r) {
   if (Array.isArray(r)) return _arrayLikeToArray$2$1(r);
 }
 
-function _iterableToArray$9(r) {
+function _iterableToArray$a(r) {
   if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
 
-function _nonIterableSpread$9() {
+function _nonIterableSpread$a() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _toConsumableArray$9(r) {
-  return _arrayWithoutHoles$9(r) || _iterableToArray$9(r) || _unsupportedIterableToArray$2$1(r) || _nonIterableSpread$9();
+function _toConsumableArray$a(r) {
+  return _arrayWithoutHoles$a(r) || _iterableToArray$a(r) || _unsupportedIterableToArray$2$1(r) || _nonIterableSpread$a();
 }
 
 function _classCallCheck$3(a, n) {
@@ -428,7 +428,7 @@ var DomHandler = /*#__PURE__*/function () {
             } else if (key === 'p-bind') {
               _this.setAttributes(element, value);
             } else {
-              value = key === 'class' ? _toConsumableArray$9(new Set(_computedStyles('class', value))).join(' ').trim() : key === 'style' ? _computedStyles('style', value).join(';').trim() : value;
+              value = key === 'class' ? _toConsumableArray$a(new Set(_computedStyles('class', value))).join(' ').trim() : key === 'style' ? _computedStyles('style', value).join(';').trim() : value;
               (element.$attrs = element.$attrs || {}) && (element.$attrs[key] = value);
               element.setAttribute(key, value);
             }
@@ -1874,7 +1874,7 @@ var ObjectUtils = /*#__PURE__*/function () {
         try {
           item = arr.findLast(callback);
         } catch (_unused2) {
-          item = _toConsumableArray$9(arr).reverse().find(callback);
+          item = _toConsumableArray$a(arr).reverse().find(callback);
         }
       }
       return item;
@@ -1892,7 +1892,7 @@ var ObjectUtils = /*#__PURE__*/function () {
         try {
           index = arr.findLastIndex(callback);
         } catch (_unused3) {
-          index = arr.lastIndexOf(_toConsumableArray$9(arr).reverse().find(callback));
+          index = arr.lastIndexOf(_toConsumableArray$a(arr).reverse().find(callback));
         }
       }
       return index;
@@ -2703,7 +2703,7 @@ function handler() {
   };
   var getLastZIndex = function getLastZIndex(key, autoZIndex) {
     var baseZIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    return _toConsumableArray$9(zIndexes).reverse().find(function (obj) {
+    return _toConsumableArray$a(zIndexes).reverse().find(function (obj) {
       return autoZIndex ? true : obj.key === key;
     }) || {
       key: key,
@@ -3495,20 +3495,20 @@ var useDisplayOrder = function useDisplayOrder(group) {
   return displayOrder;
 };
 
-function _arrayWithoutHoles$8(r) {
+function _arrayWithoutHoles$9(r) {
   if (Array.isArray(r)) return _arrayLikeToArray$f(r);
 }
 
-function _iterableToArray$8(r) {
+function _iterableToArray$9(r) {
   if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
 
-function _nonIterableSpread$8() {
+function _nonIterableSpread$9() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _toConsumableArray$8(r) {
-  return _arrayWithoutHoles$8(r) || _iterableToArray$8(r) || _unsupportedIterableToArray$f(r) || _nonIterableSpread$8();
+function _toConsumableArray$9(r) {
+  return _arrayWithoutHoles$9(r) || _iterableToArray$9(r) || _unsupportedIterableToArray$f(r) || _nonIterableSpread$9();
 }
 
 /**
@@ -3548,9 +3548,9 @@ var globalEscKeyHandlingLogic = {
       return;
     }
     var escKeyListeners = globalEscKeyHandlingLogic.escKeyListeners;
-    var maxPrimaryPriority = Math.max.apply(Math, _toConsumableArray$8(escKeyListeners.keys()));
+    var maxPrimaryPriority = Math.max.apply(Math, _toConsumableArray$9(escKeyListeners.keys()));
     var theMostImportantEscHandlersSet = escKeyListeners.get(maxPrimaryPriority);
-    var maxSecondaryPriority = Math.max.apply(Math, _toConsumableArray$8(theMostImportantEscHandlersSet.keys()));
+    var maxSecondaryPriority = Math.max.apply(Math, _toConsumableArray$9(theMostImportantEscHandlersSet.keys()));
     var theMostImportantEscHandler = theMostImportantEscHandlersSet.get(maxSecondaryPriority);
     theMostImportantEscHandler(event);
   },
@@ -3938,11 +3938,11 @@ function _arrayLikeToArray$e(r, a) {
   return n;
 }
 
-function _arrayWithoutHoles$7(r) {
+function _arrayWithoutHoles$8(r) {
   if (Array.isArray(r)) return _arrayLikeToArray$e(r);
 }
 
-function _iterableToArray$7(r) {
+function _iterableToArray$8(r) {
   if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
 
@@ -3954,12 +3954,12 @@ function _unsupportedIterableToArray$e(r, a) {
   }
 }
 
-function _nonIterableSpread$7() {
+function _nonIterableSpread$8() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _toConsumableArray$7(r) {
-  return _arrayWithoutHoles$7(r) || _iterableToArray$7(r) || _unsupportedIterableToArray$e(r) || _nonIterableSpread$7();
+function _toConsumableArray$8(r) {
+  return _arrayWithoutHoles$8(r) || _iterableToArray$8(r) || _unsupportedIterableToArray$e(r) || _nonIterableSpread$8();
 }
 
 function _typeof$d(o) {
@@ -4066,7 +4066,7 @@ var ComponentBase = {
         var value = _getOptionValue.apply(void 0, arguments);
         if (Array.isArray(value)) {
           return {
-            className: classNames.apply(void 0, _toConsumableArray$7(value))
+            className: classNames.apply(void 0, _toConsumableArray$8(value))
           };
         }
         if (ObjectUtils.isString(value)) {
@@ -4076,7 +4076,7 @@ var ComponentBase = {
         }
         if (value !== null && value !== void 0 && value.hasOwnProperty('className') && Array.isArray(value.className)) {
           return {
-            className: classNames.apply(void 0, _toConsumableArray$7(value.className))
+            className: classNames.apply(void 0, _toConsumableArray$8(value.className))
           };
         }
         return value;
@@ -4721,11 +4721,11 @@ function _arrayLikeToArray$b(r, a) {
   return n;
 }
 
-function _arrayWithoutHoles$6(r) {
+function _arrayWithoutHoles$7(r) {
   if (Array.isArray(r)) return _arrayLikeToArray$b(r);
 }
 
-function _iterableToArray$6(r) {
+function _iterableToArray$7(r) {
   if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
 
@@ -4737,12 +4737,12 @@ function _unsupportedIterableToArray$b(r, a) {
   }
 }
 
-function _nonIterableSpread$6() {
+function _nonIterableSpread$7() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _toConsumableArray$6(r) {
-  return _arrayWithoutHoles$6(r) || _iterableToArray$6(r) || _unsupportedIterableToArray$b(r) || _nonIterableSpread$6();
+function _toConsumableArray$7(r) {
+  return _arrayWithoutHoles$7(r) || _iterableToArray$7(r) || _unsupportedIterableToArray$b(r) || _nonIterableSpread$7();
 }
 
 function _arrayWithHoles$9(r) {
@@ -5229,7 +5229,7 @@ var Tooltip = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (in
         return target.parentElement;
       } else if (target.hasWrapper) {
         var _target$parentElement;
-        (_target$parentElement = target.parentElement).replaceWith.apply(_target$parentElement, _toConsumableArray$6(target.parentElement.childNodes));
+        (_target$parentElement = target.parentElement).replaceWith.apply(_target$parentElement, _toConsumableArray$7(target.parentElement.childNodes));
         delete target.hasWrapper;
       }
       return target;
@@ -5745,6 +5745,9 @@ function _arrayLikeToArray$a(r, a) {
 function _arrayWithHoles$8(r) {
   if (Array.isArray(r)) return r;
 }
+function _arrayWithoutHoles$6(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray$a(r);
+}
 function _defineProperty$a(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -5762,6 +5765,9 @@ function _extends$A() {
     return n;
   }, _extends$A.apply(null, arguments);
 }
+function _iterableToArray$6(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
 function _iterableToArrayLimit$8(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -5789,6 +5795,9 @@ function _iterableToArrayLimit$8(r, l) {
 function _nonIterableRest$8() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _nonIterableSpread$6() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function ownKeys$p(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -5833,6 +5842,9 @@ function _objectWithoutPropertiesLoose$2(r, e) {
 function _slicedToArray$8(r, e) {
   return _arrayWithHoles$8(r) || _iterableToArrayLimit$8(r, e) || _unsupportedIterableToArray$a(r, e) || _nonIterableRest$8();
 }
+function _toConsumableArray$6(r) {
+  return _arrayWithoutHoles$6(r) || _iterableToArray$6(r) || _unsupportedIterableToArray$a(r) || _nonIterableSpread$6();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -35801,8 +35813,6 @@ 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,
@@ -35828,163 +35838,200 @@ var Dropdown = function Dropdown(_ref) {
     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,
+    _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,
-      generalImage: null
-    } : _ref$groupedItemTempl;
+      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;
   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 loadLazyTimeout = useRef();
   useEffect(function () {
     setOptionSelected(value !== null && value !== void 0 ? value : null);
   }, [value]);
-  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;
+  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
+        };
       }
-
-      // 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);
+      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);
     return function () {
-      window.removeEventListener('scroll', handleScroll, true);
+      document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  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
-          }));
-        }
-      });
-    }, 50);
-  };
-  var style = {
-    border: invalid ? '1px solid red' : '1px solid #ccc',
-    width: '100%'
-  };
   var optionTemplate = function optionTemplate(option) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      style: _objectSpread2({
-        fontSize: '14px'
-      }, optionStyle)
-    }, option.label);
-  };
-  var valueTemplate = function valueTemplate(option) {
-    return /*#__PURE__*/React__default.createElement("span", {
-      style: _objectSpread2({
-        fontFamily: 'Arial',
-        fontSize: '14px'
-      }, valueStyle)
-    }, (option === null || option === void 0 ? void 0 : option.label) || placeholder);
-  };
-  var groupedItemTemplate = function groupedItemTemplate(option) {
-    var _ref2 = groupedItemTemplateConfig || {},
-      showImage = _ref2.showImage,
-      imageKey = _ref2.imageKey,
-      imageStyle = _ref2.imageStyle,
-      showIcon = _ref2.showIcon,
-      iconKey = _ref2.iconKey,
-      labelStyle = _ref2.labelStyle,
-      generalIcon = _ref2.generalIcon,
-      generalImage = _ref2.generalImage;
-    var icon = option.value && option.value[iconKey];
-    var styleLabel = {};
-    if (generalIcon || generalIcon || showImage && option[imageKey] || showIcon && icon) {
-      styleLabel = {
-        'marginLeft': '10px'
+    if (!isSelectMeta) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: _objectSpread2({
+          fontSize: '14px'
+        }, optionStyle)
+      }, option.label);
+    } else {
+      var _ref2 = selectMetaConfig || {},
+        labelStyle = _ref2.labelStyle,
+        generalIcon = _ref2.generalIcon;
+      var styleLabel = {
+        marginLeft: '10px',
+        color: option === null || option === void 0 ? void 0 : option.color
       };
-    }
-    if (option.group) {
       return /*#__PURE__*/React__default.createElement("div", {
-        className: "flex align-items-center"
+        className: "flex align-items-center",
+        style: {
+          width: '100%'
+        }
       }, /*#__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'
+        style: {
+          color: option === null || option === void 0 ? void 0 : option.color
         },
-        className: "mr-2"
-      }), showIcon && icon && /*#__PURE__*/React__default.createElement("i", {
-        style: _objectSpread2({
-          fontSize: '15px',
-          fontWeight: 'bold'
-        }, labelStyle),
-        className: 'mr-2 ' + icon
+        className: generalIcon
       }), /*#__PURE__*/React__default.createElement("span", {
         style: styleLabel
-      }, option.label)));
+      }, option === null || option === void 0 ? void 0 : option.label)));
     }
   };
+  var valueTemplate = function valueTemplate(option) {
+    if (!option) {
+      return /*#__PURE__*/React__default.createElement("span", {
+        style: valueStyle
+      }, 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: '300px'
+  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-1"
+    className: "flex flex-col gap-1",
+    ref: ref
   }, /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$A({
     value: optionSelected,
     options: options,
-    onChange: function onChange(e) {
-      return setOptionSelected(e.value);
-    },
+    onChange: handleChange,
     placeholder: placeholder,
-    disabled: disabled,
+    disabled: disabled || readOnly,
     filter: filter,
     optionLabel: optionLabel,
     optionValue: optionValue,
     style: style,
     itemTemplate: optionTemplate,
     valueTemplate: valueTemplate,
-    onHide: resetDropdownFilter,
     showClear: showClear,
-    optionGroupTemplate: isGroupedOption ? groupedItemTemplate : null
-  }, isGroupedOption && {
-    optionGroupLabel: 'label',
-    optionGroupChildren: 'items'
+    onShow: onMenuOpen,
+    onHide: onMenuClose,
+    menuIsOpen: menuIsOpen
+  }, isSelectMeta && {
+    virtualScrollerOptions: {
+      lazy: true,
+      onLazyLoad: onLazyLoad,
+      itemSize: 38,
+      showLoader: true,
+      loading: loading,
+      delay: 250
+    }
   })), name && /*#__PURE__*/React__default.createElement("input", {
     type: "hidden",
-    name: name,
-    value: optionSelected !== null && optionSelected !== void 0 ? optionSelected : ''
+    className: classInput,
+    "data-id-onglet": ongletID,
+    name: !readOnly ? name : '',
+    value: optionSelected ? optionSelected.value : '',
+    ref: refValue
   }), invalid && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("small", {
     style: {
       color: 'red',
@@ -36003,6 +36050,76 @@ var optionsExample = [{
   label: 'Option 3',
   value: '3'
 }];
+var optionsGroup = [{
+  label: 'Germany',
+  code: 'DE',
+  items: [{
+    label: 'Berlin',
+    value: 'Berlin'
+  }, {
+    label: 'Frankfurt',
+    value: 'Frankfurt'
+  }, {
+    label: 'Hamburg',
+    value: 'Hamburg'
+  }, {
+    label: 'Munich',
+    value: 'Munich'
+  }]
+}, {
+  label: 'USA',
+  code: 'US',
+  items: [{
+    label: 'Chicago',
+    value: 'Chicago'
+  }, {
+    label: 'Los Angeles',
+    value: 'Los Angeles'
+  }, {
+    label: 'New York',
+    value: 'New York'
+  }, {
+    label: 'San Francisco',
+    value: 'San Francisco'
+  }]
+}, {
+  label: 'Japan',
+  code: 'JP',
+  items: [{
+    label: 'Kyoto',
+    value: 'Kyoto'
+  }, {
+    label: 'Osaka',
+    value: 'Osaka'
+  }, {
+    label: 'Tokyo',
+    value: 'Tokyo'
+  }, {
+    label: 'Yokohama',
+    value: 'Yokohama'
+  }]
+}];
+var optionsWithColors = [{
+  label: 'Rouge',
+  value: 'rouge',
+  color: '#FF0000'
+}, {
+  label: 'Vert',
+  value: 'vert',
+  color: '#00FF00'
+}, {
+  label: 'Bleu',
+  value: 'bleu',
+  color: '#0000FF'
+}, {
+  label: 'Jaune',
+  value: 'jaune',
+  color: '#FFFF00'
+}, {
+  label: 'Cyan',
+  value: 'cyan',
+  color: '#00FFFF'
+}];
 var DropdownPresets = {
   Default: {
     placeholder: 'Sélectionnez une option',
@@ -36016,6 +36133,38 @@ var DropdownPresets = {
       fontFamily: 'Arial'
     }
   },
+  SelectMeta: {
+    placeholder: 'Sélectionnez une couleur',
+    options: optionsWithColors,
+    isSelectMeta: true,
+    selectMetaConfig: {
+      generalIcon: 'pi pi-circle-fill'
+    },
+    valueStyle: {
+      fontSize: '14px',
+      fontFamily: 'Arial'
+    },
+    optionStyle: {
+      fontSize: '14px',
+      fontFamily: 'Arial'
+    }
+  },
+  Group: {
+    placeholder: 'Veuillez choisir une option',
+    options: optionsGroup,
+    disabled: false,
+    isGroupedOption: true,
+    groupedItemTemplateConfig: {
+      showIcon: false,
+      iconKey: 'icon',
+      showImage: false,
+      imageKey: 'image',
+      imageStyle: null,
+      labelStyle: null,
+      generalIcon: null,
+      generalImage: 'https://tse1.mm.bing.net/th/id/OIP.IQHLwUwt5fy7E-ag0W-34gHaHa?w=474&h=474&c=7'
+    }
+  },
   Disabled: {
     placeholder: 'Sélection désactivée',
     options: optionsExample,

package/package.json

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