npm - arengibook - Versions diffs - 3.1.313-main → 3.1.315-main - Mend

arengibook 3.1.313-main → 3.1.315-main

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/index.js +790 -107
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -13488,7 +13488,7 @@ var LOCALES = {
 var css_248z$6 = "@charset \"UTF-8\";\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes toastSlideIn {\n  from {\n    opacity: 0;\n    transform: translateX(40px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes toastIconPop {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.2);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes toastTextSlide {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n/* Force une largeur à 100% de l'input Calendar */\n.datepicker-fullwidth {\n  width: 100%;\n}\n\n.datepicker-fullwidth > .dp-input-wrapper {\n  width: 100%;\n}\n.datepicker-fullwidth > .dp-input-wrapper > .p-calendar {\n  width: 100%;\n}\n\n.dp-input-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n.dp-input-wrapper .dp-clear-btn {\n  position: absolute;\n  right: 7px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 2.8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #b0b8c4;\n  z-index: 1;\n  border-radius: 50%;\n  line-height: 1;\n}\n.dp-input-wrapper .dp-clear-btn:hover {\n  color: #1a1e26;\n  background-color: rgba(0, 0, 0, 0.06);\n}\n.dp-input-wrapper .dp-clear-btn .pi {\n  font-size: 9.1px;\n}\n\n/* Application du mixin field sur l'input du Calendar */\n.p-calendar > .p-inputtext {\n  font-family: \"Roboto\", sans-serif;\n  min-height: 40px;\n  padding: 0 12px;\n  background: #ffffff;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 7px;\n  color: #1a1e26;\n  outline: none;\n  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-calendar > .p-inputtext:hover:not(:focus):not(:focus-within):not([disabled]):not(.is-disabled) {\n  border-color: #c8cdd6;\n}\n.p-calendar > .p-inputtext:focus, .p-calendar > .p-inputtext:focus-within, .p-calendar > .p-inputtext.is-open {\n  border-color: #3f3f3f;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n}\n.p-calendar > .p-inputtext[disabled], .p-calendar > .p-inputtext.is-disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.p-calendar > .p-inputtext[readonly], .p-calendar > .p-inputtext.is-readonly {\n  background: #f4f5f6;\n  cursor: default;\n  box-shadow: none;\n}\n.p-calendar > .p-inputtext[readonly]:hover, .p-calendar > .p-inputtext.is-readonly:hover {\n  border-color: #e0e3e8;\n}\n.p-calendar > .p-inputtext.is-error {\n  border-color: #dc2626;\n  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n.p-calendar > .p-inputtext.is-success {\n  border-color: #15803d;\n  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);\n}\n.p-calendar > .p-inputtext:hover {\n  border-color: #c8cdd6 !important;\n}\n.p-calendar > .p-inputtext:focus, .p-calendar > .p-inputtext.p-focus {\n  border-color: #3f3f3f !important;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;\n  outline: none;\n}\n\n/* Panel invisible jusqu'au repositionnement (évite le flash position basse → haute) */\n.datepickerbook:not(.dp-ready) {\n  visibility: hidden !important;\n}\n\n/* Neutralise les styles hérités */\n.datepickerbook table,\n.datepickerbook tbody,\n.datepickerbook tr,\n.datepickerbook td,\n.datepickerbook th {\n  background-color: unset !important;\n  color: inherit !important;\n  border: none;\n}\n\n/* Restaure les couleurs et l'entete du calendrier  */\n.datepickerbook .p-datepicker {\n  background-color: #ffffff !important;\n  color: #1a1e26 !important;\n  border-radius: 7px;\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n}\n\n.datepickerbook .datepicker-custom-header {\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  padding: 7px 10.5px;\n}\n\n.datepickerbook .datepicker-spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: 11.9px;\n}\n\n.datepickerbook .dp-label {\n  margin: 3.5px 0;\n  font-weight: 500;\n}\n\n.p-datepicker .p-datepicker-title,\n.p-datepicker .p-datepicker-prev,\n.p-datepicker .p-datepicker-next {\n  display: none !important;\n}\n\n.datepickerbook .p-datepicker-header {\n  justify-content: center;\n}\n\n.datepickerbook .dp-popup {\n  position: absolute;\n  top: 100%;\n  margin-top: 3.5px;\n  background: #ffffff;\n  border: 1px solid #e0e3e8;\n  border-radius: 4px;\n  padding: 3.5px;\n  z-index: 10;\n}\n\n.datepickerbook .dp-popup-months,\n.datepickerbook .dp-popup-years {\n  display: grid;\n  grid-template-columns: repeat(3, auto);\n  gap: 3.5px;\n}\n\n.datepickerbook .dp-popup-item {\n  border: none;\n  background: transparent;\n  padding: 2.1px 5.6px;\n  cursor: pointer;\n  font-size: 11.2px;\n}\n\n.datepickerbook .dp-popup-item:hover {\n  background: #f4f5f6;\n}\n\n/*.datepickerbook .dp-header-top {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 10.5px;\n}*/\n.datepickerbook .dp-header-part {\n  display: flex;\n  align-items: center;\n  gap: 3.5px;\n}\n\n.datepickerbook .dp-label-button {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-weight: 800;\n  font-size: 16px;\n  margin: 3.5px 0;\n}\n\n.datepickerbook.dp-monthyear-mode .dp-monthyear-header {\n  padding-bottom: 3.5px;\n}\n\n.datepickerbook {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  margin-bottom: 3.5px;\n}\n\n.datepickerbook .dp-back-button {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 12.6px;\n}\n\n.datepickerbook .dp-title {\n  font-weight: 600;\n  font-size: 12.6px;\n}\n\n/* Colonnes mois / années */\n.datepickerbook .dp-header-lists {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 7px;\n}\n\n.datepickerbook .dp-month-list,\n.datepickerbook .dp-year-list {\n  padding-right: 3.5px;\n  display: flex;\n  flex-direction: column;\n  gap: 2.1px;\n}\n\n.datepickerbook .dp-list-item:hover {\n  background: #f4f5f6;\n}\n\n.p-datepicker-header.datepicker-custom-header.dp-monthyear-header {\n  margin: auto;\n}\n\n/*.p-monthpicker*/\n.p-datepicker.dp-monthyear-mode {\n  box-shadow: none !important;\n  border-radius: 0px;\n}\n.p-datepicker.dp-monthyear-mode .dp-header-top-alt {\n  display: none !important;\n}\n\n.p-datepicker-monthpicker.dp-monthyear-mode {\n  box-shadow: none !important;\n  border-radius: 0px;\n}\n.p-datepicker-monthpicker.dp-monthyear-mode .dp-header-top-alt {\n  display: none !important;\n}\n\n.p-datepicker {\n  width: 331px !important;\n  min-width: 331px !important;\n  max-width: 331px !important;\n}\n.p-datepicker .dp-arrow {\n  border: none;\n  background-color: transparent;\n  color: #b0b8c4;\n  cursor: pointer;\n  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-datepicker .dp-arrow:hover {\n  color: #3f3f3f;\n  background-color: rgba(63, 63, 63, 0.08);\n}\n.p-datepicker.dp-year-only {\n  box-shadow: none !important;\n  width: auto !important;\n  min-width: unset !important;\n  max-width: unset !important;\n}\n.p-datepicker.dp-year-only .dp-header-top-alt {\n  display: none !important;\n}\n.p-datepicker.dp-year-only .dp-monthyear-header {\n  width: 205px;\n  min-width: 205px;\n  max-width: 205px;\n}\n.p-datepicker.dp-year-only .dp-monthyear-header .dp-year-container {\n  width: 100%;\n}\n.p-datepicker.dp-year-only .dp-year-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container {\n  width: 100%;\n  border-top: 1px solid #e0e3e8;\n  height: 51px;\n  display: flex;\n  align-items: center;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-up {\n  border-right: 1px solid #e0e3e8;\n  border-radius: 0px 0px 0px 5px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-down {\n  border-radius: 0px 0px 5px 0px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 49%;\n  border-radius: 0px;\n  flex: 1;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year:hover {\n  background-color: rgba(63, 63, 63, 0.08);\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-year-list {\n  width: 100%;\n  gap: 0px;\n  padding: 0px;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item-active {\n  width: 100%;\n  color: #ffffff !important;\n  background-color: #3f3f3f !important;\n  border-bottom: 1px solid #3f3f3f !important;\n  font-weight: 600;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n  background-color: transparent;\n  border: none;\n  color: #1a1e26;\n  transition: 0s !important;\n  height: 25px;\n  font-size: 16px;\n  border-radius: 0px;\n  border-bottom: 1px solid #e0e3e8;\n  width: 100%;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big) {\n  padding: 3px 10px !important;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big):hover {\n  background-color: rgba(63, 63, 63, 0.08) !important;\n  color: #3f3f3f;\n}\n.p-datepicker.dp-year-only .dp-year-container .dp-list-item {\n  padding: 3px 10px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.dp-monthyear-mode .p-datepicker-group, .p-datepicker-monthpicker .p-datepicker-group, .dp-year-only .p-datepicker-group {\n  padding: 0px !important;\n  border: 0px solid transparent !important;\n}\n.dp-monthyear-mode .dp-monthyear-header, .p-datepicker-monthpicker .dp-monthyear-header, .dp-year-only .dp-monthyear-header {\n  justify-content: flex-start;\n  gap: 0;\n  background: #ffffff;\n  border: 1px solid rgba(255, 255, 255, 0.33);\n  border-radius: 8px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  padding: 0px !important;\n  width: 331px;\n  min-width: 331px;\n  max-width: 331px;\n}\n.dp-monthyear-mode .dp-header-top-alt, .p-datepicker-monthpicker .dp-header-top-alt, .dp-year-only .dp-header-top-alt {\n  width: 100%;\n  height: 50px !important;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid #e0e3e8;\n}\n.dp-monthyear-mode .dp-header-top-alt .dp-header-top-alt-part:first-child, .p-datepicker-monthpicker .dp-header-top-alt .dp-header-top-alt-part:first-child, .dp-year-only .dp-header-top-alt .dp-header-top-alt-part:first-child {\n  border-right: 1px solid #e0e3e8;\n}\n.dp-monthyear-mode .dp-header-top-alt .dp-header-top-alt-part, .p-datepicker-monthpicker .dp-header-top-alt .dp-header-top-alt-part, .dp-year-only .dp-header-top-alt .dp-header-top-alt-part {\n  width: 49%;\n  height: 50px;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  color: #1a1e26;\n  font-size: 16px;\n  text-transform: capitalize;\n}\n.dp-monthyear-mode .p-datepicker-calendar-container, .p-datepicker-monthpicker .p-datepicker-calendar-container, .dp-year-only .p-datepicker-calendar-container {\n  display: none;\n}\n.dp-monthyear-mode .dp-actions, .p-datepicker-monthpicker .dp-actions, .dp-year-only .dp-actions {\n  width: 100%;\n  background-color: #ffffff;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 0px 0px 5px 5px;\n  padding: 0px 10px 10px 10px;\n}\n.dp-monthyear-mode .dp-actions .p-button:first-child, .p-datepicker-monthpicker .dp-actions .p-button:first-child, .dp-year-only .dp-actions .p-button:first-child {\n  border: 0px solid transparent;\n  color: #3f3f3f;\n}\n.dp-monthyear-mode .dp-actions .p-button:last-child, .p-datepicker-monthpicker .dp-actions .p-button:last-child, .dp-year-only .dp-actions .p-button:last-child {\n  background-color: #ffffff;\n  border: 1px solid #3f3f3f;\n  color: #3f3f3f;\n}\n.dp-monthyear-mode .dp-actions .p-button:last-child:hover, .p-datepicker-monthpicker .dp-actions .p-button:last-child:hover, .dp-year-only .dp-actions .p-button:last-child:hover {\n  background-color: #3f3f3f;\n  color: #ffffff;\n}\n.dp-monthyear-mode .dp-actions .p-button, .p-datepicker-monthpicker .dp-actions .p-button, .dp-year-only .dp-actions .p-button {\n  padding: 10px 15px;\n}\n.dp-monthyear-mode .dp-actions .p-button .p-button-icon, .p-datepicker-monthpicker .dp-actions .p-button .p-button-icon, .dp-year-only .dp-actions .p-button .p-button-icon {\n  display: none;\n}\n.dp-monthyear-mode .dp-header-lists, .p-datepicker-monthpicker .dp-header-lists, .dp-year-only .dp-header-lists {\n  width: calc(100% - 20px);\n  height: 300px;\n  display: flex;\n  align-items: flex-start;\n  gap: initial;\n  padding: 0px;\n  margin: 10px;\n}\n.dp-monthyear-mode .dp-month-list, .p-datepicker-monthpicker .dp-month-list, .dp-year-only .dp-month-list {\n  transition: none !important;\n  border: 1px solid #e0e3e8;\n  margin: 0px 10px 0px 0px !important;\n  gap: 0px;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item-active, .p-datepicker-monthpicker .dp-month-list .dp-list-item-active, .dp-year-only .dp-month-list .dp-list-item-active {\n  width: 100%;\n  color: #ffffff !important;\n  background-color: #3f3f3f !important;\n  border-bottom: 1px solid #3f3f3f !important;\n  font-weight: 600;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item, .p-datepicker-monthpicker .dp-month-list .dp-list-item, .dp-year-only .dp-month-list .dp-list-item {\n  border: none;\n  height: 25px;\n  background-color: transparent;\n  font-size: 16px;\n  text-transform: capitalize;\n  border-radius: 0px;\n  margin: 0px;\n  padding: 3px;\n  width: calc(100% - 0px);\n  border-bottom: 1px solid #e0e3e8;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:hover, .p-datepicker-monthpicker .dp-month-list .dp-list-item:hover, .dp-year-only .dp-month-list .dp-list-item:hover {\n  background-color: rgba(63, 63, 63, 0.08);\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:last-child, .p-datepicker-monthpicker .dp-month-list .dp-list-item:last-child, .dp-year-only .dp-month-list .dp-list-item:last-child {\n  border: none;\n}\n.dp-monthyear-mode .dp-year-container, .p-datepicker-monthpicker .dp-year-container, .dp-year-only .dp-year-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  border: 1px solid #e0e3e8;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container, .dp-year-only .dp-year-container .dp-arrow-container {\n  width: 100%;\n  border-top: 1px solid #e0e3e8;\n  height: 51px;\n  display: flex;\n  align-items: center;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container .dp-arrow-up, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container .dp-arrow-up, .dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-up {\n  border-right: 1px solid #e0e3e8;\n}\n.dp-monthyear-mode .dp-year-container .dp-arrow-container .dp-arrow-year, .p-datepicker-monthpicker .dp-year-container .dp-arrow-container .dp-arrow-year, .dp-year-only .dp-year-container .dp-arrow-container .dp-arrow-year {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 49%;\n  border-radius: 0px;\n  flex: 1;\n}\n.dp-monthyear-mode .dp-year-container .dp-year-list, .p-datepicker-monthpicker .dp-year-container .dp-year-list, .dp-year-only .dp-year-container .dp-year-list {\n  width: 100%;\n  gap: 0px;\n  padding: 0px;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item-active, .p-datepicker-monthpicker .dp-year-container .dp-list-item-active, .dp-year-only .dp-year-container .dp-list-item-active {\n  width: 100%;\n  color: #ffffff !important;\n  background-color: #3f3f3f !important;\n  border-bottom: 1px solid #3f3f3f !important;\n  font-weight: 600;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item, .p-datepicker-monthpicker .dp-year-container .dp-list-item, .dp-year-only .dp-year-container .dp-list-item {\n  background-color: transparent;\n  border: none;\n  color: #1a1e26;\n  transition: 0s !important;\n  height: 25px;\n  font-size: 16px;\n  border-radius: 0px;\n  border-bottom: 1px solid #e0e3e8;\n  width: 100%;\n  padding: 3px 10px;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item:not(.dp-list-item-big), .p-datepicker-monthpicker .dp-year-container .dp-list-item:not(.dp-list-item-big), .dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big) {\n  padding: 3px 10px !important;\n}\n.dp-monthyear-mode .dp-year-container .dp-list-item:not(.dp-list-item-big):hover, .p-datepicker-monthpicker .dp-year-container .dp-list-item:not(.dp-list-item-big):hover, .dp-year-only .dp-year-container .dp-list-item:not(.dp-list-item-big):hover {\n  background-color: rgba(63, 63, 63, 0.08) !important;\n  color: #3f3f3f;\n}\n.dp-monthyear-mode .dp-month-list, .dp-monthyear-mode .dp-year-container, .p-datepicker-monthpicker .dp-month-list, .p-datepicker-monthpicker .dp-year-container, .dp-year-only .dp-month-list, .dp-year-only .dp-year-container {\n  width: 49%;\n  flex: 1;\n  margin: 0px;\n  background-color: transparent;\n  padding: 0px;\n  height: 100%;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item, .dp-monthyear-mode .dp-year-container .dp-list-item, .p-datepicker-monthpicker .dp-month-list .dp-list-item, .p-datepicker-monthpicker .dp-year-container .dp-list-item, .dp-year-only .dp-month-list .dp-list-item, .dp-year-only .dp-year-container .dp-list-item {\n  cursor: pointer;\n}\n.dp-monthyear-mode .dp-month-list .dp-list-item:hover, .dp-monthyear-mode .dp-year-container .dp-list-item:hover, .p-datepicker-monthpicker .dp-month-list .dp-list-item:hover, .p-datepicker-monthpicker .dp-year-container .dp-list-item:hover, .dp-year-only .dp-month-list .dp-list-item:hover, .dp-year-only .dp-year-container .dp-list-item:hover {\n  color: #3f3f3f;\n  border-bottom: 1px solid rgba(63, 63, 63, 0.08);\n}\n.dp-monthyear-mode .dp-month-list:hover, .dp-monthyear-mode .dp-year-container:hover, .p-datepicker-monthpicker .dp-month-list:hover, .p-datepicker-monthpicker .dp-year-container:hover, .dp-year-only .dp-month-list:hover, .dp-year-only .dp-year-container:hover {\n  background-color: rgba(255, 255, 255, 0.31);\n}\n\n.p-datepicker {\n  padding: 0px;\n  background-color: #ffffff;\n  box-shadow: 1px 2px 26px rgba(0, 0, 0, 0.21);\n  width: 321px;\n}\n.p-datepicker .p-datepicker-group-container {\n  width: 100%;\n}\n.p-datepicker .p-datepicker-group {\n  background: #ffffff;\n  border-radius: 8px;\n  padding-bottom: 1px;\n}\n.p-datepicker .p-datepicker-header {\n  padding: 0px;\n  /*position: fixed;\n  left: 0;*/\n  height: 50px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-bottom: 1px solid #e0e3e8;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month {\n  border-right: 1px solid #e0e3e8;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-month .dp-arrow-left {\n  border-radius: 7px 0px 0px 0px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-year .dp-arrow-right {\n  border-radius: 0px 7px 0px 0px;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part {\n  width: 49%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-arrow {\n  width: 30px;\n  height: 49px;\n  min-width: 30px;\n  min-height: 49px;\n  max-width: 30px;\n  max-height: 49px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-arrow:hover {\n  background-color: rgba(63, 63, 63, 0.08);\n  color: #3f3f3f;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button {\n  width: calc(100% - 60px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 50px;\n  margin: 0px;\n  text-transform: capitalize;\n  color: #3f3f3f;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part .dp-label-button:hover {\n  background-color: rgba(63, 63, 63, 0.08);\n  font-weight: 800;\n}\n.p-datepicker .p-datepicker-header .datepicker-custom-header .dp-header-top .dp-header-part:hover {\n  background-color: rgba(255, 255, 255, 0.31);\n}\n.p-datepicker .p-datepicker-calendar-container {\n  padding: 10px;\n  /* margin-top: 50px;*/\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar {\n  margin: 0px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar thead tr th {\n  padding: 2px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar thead tr th span {\n  color: #1a1e26;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr .p-datepicker-today {\n  background-color: transparent;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr .p-datepicker-today span {\n  background-color: transparent;\n  font-weight: 600;\n  color: #3f3f3f;\n  border: 1px solid #3f3f3f;\n  text-decoration: underline;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td {\n  padding: 0px;\n  border: 1px solid #f4f5f6;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-highlight {\n  color: #ffffff !important;\n  background-color: #3f3f3f !important;\n  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.31);\n  font-weight: 600;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td .p-disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n  background-color: transparent !important;\n  font-size: 12px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span {\n  margin: 0;\n  width: 100%;\n  border-radius: 0px;\n}\n.p-datepicker .p-datepicker-calendar-container .p-datepicker-calendar tbody tr td span:hover {\n  background-color: rgba(63, 63, 63, 0.08) !important;\n  color: #3f3f3f;\n  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.31);\n}\n\n/* WRAPPER GLOBAL */\n.dp-monthyear-header {\n  width: 360px;\n  background: #ffffff;\n  border-radius: 18px;\n  padding: 24px 26px;\n  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1);\n  display: flex;\n  flex-direction: column;\n  font-family: Inter, sans-serif;\n  gap: 22px;\n}\n\n/* TITRE */\n.dp-header-top-alt .dp-title {\n  font-size: 21.7px;\n  font-weight: 700;\n  text-align: center;\n  color: #1a1e26;\n  margin-bottom: 2px;\n}\n\n/* HOVER ANNÉES */\n.datepickerbook .dp-year-list .dp-list-item:hover {\n  background: rgba(63, 63, 63, 0.15);\n}\n\n.dp-month-list .dp-list-item-active {\n  background: #ffffff;\n  font-weight: 600;\n}\n\n/* Centrage parfait */\n.dp-year-list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  padding: 0;\n}\n\n/* Année normale */\n.dp-year-list .dp-list-item {\n  font-size: 16.8px;\n  color: #b0b8c4;\n  padding: 4px 0;\n  cursor: pointer;\n  transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.dp-year-list .dp-list-item:hover {\n  color: #1a1e26;\n}\n\n/* FLECHES */\n.dp-arrow-up,\n.dp-arrow-down {\n  font-size: 21px;\n  color: #1a1e26;\n  padding: 6px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  margin: 4px 0;\n}\n\n/* ACTIONS BAS – GROS BOUTONS */\n.dp-actions {\n  display: flex;\n  justify-content: center;\n  gap: 20px;\n  padding-top: 5px;\n  padding-bottom: 10px;\n}\n\n/* TITRE MOIS ANNEE */\n.dp-header-top {\n  margin: auto;\n}\n\n/*DATEPICKER MENSUEL CUSTOMISE*/\n.p-monthpicker {\n  display: none !important;\n  margin: auto;\n}\n\n.datepickerbook .p-datepicker-header {\n  border: none !important;\n  border-bottom: none !important;\n  box-shadow: none !important;\n  background: transparent !important;\n}\n\n.datepickerbook.p-datepicker {\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n/*DATEPICKER ANNUEL CUSTOMISE*/\n.p-yearpicker {\n  display: none !important;\n}\n\n.datepickerbook .p-datepicker-footer {\n  margin-bottom: 20px;\n}\n\n.dp-error-message {\n  color: red !important;\n  font-style: italic !important;\n  display: block !important;\n  width: 100% !important;\n  max-width: 100% !important;\n  white-space: normal !important;\n  word-break: break-word !important;\n  overflow-wrap: break-word !important;\n  line-height: 1.4 !important;\n  font-size: 12.25px !important;\n  margin-top: 2px !important;\n  float: none !important;\n  position: static !important;\n}";
 styleInject(css_248z$6);
-var _excluded$4 = ["value", "onChange", "placeholder", "dateFormat", "displayMask", "view", "invalid", "errorMessage", "disabled", "locale", "showTime", "showIcon", "icon", "iconBgButton", "iconPos", "name", "id", "fullWidth", "inputProps", "onBlur", "onSelect", "onClick", "showClear", "reopenOnClick", "invalidDateMessage", "onPanelShow", "onPanelHide"];
+var _excluded$5 = ["value", "onChange", "placeholder", "dateFormat", "displayMask", "view", "invalid", "errorMessage", "disabled", "locale", "showTime", "showIcon", "icon", "iconBgButton", "iconPos", "name", "id", "fullWidth", "inputProps", "onBlur", "onSelect", "onClick", "showClear", "reopenOnClick", "invalidDateMessage", "onPanelShow", "onPanelHide"];
 var normalizeDate = function normalizeDate(v) {
   if (!v) return null;
   return v instanceof Date ? v : new Date(v);
@@ -13542,7 +13542,7 @@ var DatePicker = function DatePicker(_ref) {
     _ref.invalidDateMessage;
     var onPanelShow = _ref.onPanelShow,
     onPanelHide = _ref.onPanelHide,
-    rest = _objectWithoutProperties$1(_ref, _excluded$4);
+    rest = _objectWithoutProperties$1(_ref, _excluded$5);
   var _useState = useState(function () {
       return normalizeDate(value);
     }),
@@ -33444,7 +33444,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
 });
 HeaderCell.displayName = 'HeaderCell';
-var _excluded$3 = ["unstyled", "__TYPE", "ptOptions"];
+var _excluded$4 = ["unstyled", "__TYPE", "ptOptions"];
 function ownKeys$1$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1$4(Object(t), true).forEach(function (r) { _defineProperty$7(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TableHeader = /*#__PURE__*/React.memo(function (props) {
@@ -33675,7 +33675,7 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
           unstyled = _RowBase$getProps.unstyled;
           _RowBase$getProps.__TYPE;
           _RowBase$getProps.ptOptions;
-          var rest = _objectWithoutProperties(_RowBase$getProps, _excluded$3);
+          var rest = _objectWithoutProperties(_RowBase$getProps, _excluded$4);
         var headerRowProps = mergeProps({
           role: 'row'
         }, unstyled ? _objectSpread$1$4({
@@ -37016,8 +37016,13 @@ var PopupPresets = {
   }
 };
+var css_248z$5 = "@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes toastSlideIn {\n  from {\n    opacity: 0;\n    transform: translateX(40px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes toastIconPop {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.2);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes toastTextSlide {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.dropdownbook.p-dropdown-panel {\n  z-index: 999999 !important;\n}\n\n.p-tooltip {\n  z-index: 1000000 !important;\n}\n\n.dropdown-tooltip-item {\n  position: relative;\n  width: 100%;\n  cursor: pointer;\n}\n\n/* Application du mixin field sur le wrapper du Dropdown */\n.dropdown-container .p-dropdown {\n  font-family: \"Roboto\", sans-serif;\n  min-height: 40px;\n  padding: 0 12px;\n  background: #ffffff;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 7px;\n  color: #1a1e26;\n  outline: none;\n  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.dropdown-container .p-dropdown:hover:not(:focus):not(:focus-within):not([disabled]):not(.is-disabled) {\n  border-color: #c8cdd6;\n}\n.dropdown-container .p-dropdown:focus, .dropdown-container .p-dropdown:focus-within, .dropdown-container .p-dropdown.is-open {\n  border-color: #3f3f3f;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n}\n.dropdown-container .p-dropdown[disabled], .dropdown-container .p-dropdown.is-disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.dropdown-container .p-dropdown[readonly], .dropdown-container .p-dropdown.is-readonly {\n  background: #f4f5f6;\n  cursor: default;\n  box-shadow: none;\n}\n.dropdown-container .p-dropdown[readonly]:hover, .dropdown-container .p-dropdown.is-readonly:hover {\n  border-color: #e0e3e8;\n}\n.dropdown-container .p-dropdown.is-error {\n  border-color: #dc2626;\n  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n.dropdown-container .p-dropdown.is-success {\n  border-color: #15803d;\n  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);\n}\n.dropdown-container .p-dropdown {\n  padding: 0;\n  display: flex;\n  align-items: center;\n}\n\n.dd-search-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid #e0e3e8;\n}\n.dd-search-row [class*=-filter-container] {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n.dd-search-row [class*=-filter-container] .p-inputtext {\n  width: 100%;\n  height: 32px;\n  padding: 0 24.5px 0 12px;\n  font-size: 14px;\n  box-sizing: border-box;\n}\n.dd-search-row [class*=-filter-container] [class*=-filter-icon] {\n  right: 10.5px;\n  color: #b0b8c4;\n}\n\n.dd-sort-btn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e3e8;\n  border-radius: 7px;\n  background: #ffffff;\n  cursor: pointer;\n  color: #b0b8c4;\n  font-size: 14px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.dd-sort-btn:hover {\n  background: #f4f5f6;\n  color: #1a1e26;\n}\n\n.dropdownbook .p-dropdown-header:has(.dd-search-row) {\n  padding: 0;\n}\n\n/* ===== Badge couleur dans les items ===== */\n.dd-color-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 4px 10px;\n  border-radius: 14px;\n  font-size: 12.25px;\n  font-family: \"Roboto\", sans-serif;\n  white-space: nowrap;\n  cursor: default;\n  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: #f4f5f6;\n  color: #1a1e26;\n  border: 1px solid #e0e3e8;\n  border-color: var(--badge-color, #e0e3e8);\n  background-color: color-mix(in srgb, var(--badge-color, #f4f5f6) 50%, transparent);\n}\n.dd-color-badge.is-selected {\n  background-color: var(--badge-color, #f4f5f6);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.p-dropdown-item:hover .dd-color-badge {\n  background-color: var(--badge-color) !important;\n}\n\n/* ===== Override PrimeReact default item colors ===== */\n.dropdownbook .p-dropdown-items .p-dropdown-item:not(.p-highlight):hover {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-highlight {\n  background: rgba(63, 63, 63, 0.08) !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {\n  background: rgba(63, 63, 63, 0.12) !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-focus {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n\n/* ===== Override PrimeReact filter input focus ===== */\n.dropdownbook .p-dropdown-filter.p-inputtext:hover {\n  border-color: #c8cdd6 !important;\n}\n.dropdownbook .p-dropdown-filter.p-inputtext:focus, .dropdownbook .p-dropdown-filter.p-inputtext.p-focus {\n  border-color: #3f3f3f !important;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;\n  outline: none;\n}";
+styleInject(css_248z$5);
+var _excluded$3 = ["style", "className"],
+  _excluded2$2 = ["class"];
 var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
-  var _window$Translator, _window$Translator2;
+  var _computedOptions$, _window$Translator, _window$Translator2;
   var value = _ref.value,
     options = _ref.options,
     _ref$placeholder = _ref.placeholder,
@@ -37040,7 +37045,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     _ref$editable = _ref.editable,
     editable = _ref$editable === void 0 ? false : _ref$editable,
     _ref$filter = _ref.filter,
-    filter = _ref$filter === void 0 ? filter : _ref$filter,
+    filter = _ref$filter === void 0 ? false : _ref$filter,
     _ref$selectMetaConfig = _ref.selectMetaConfig,
     selectMetaConfig = _ref$selectMetaConfig === void 0 ? {
       labelStyle: null,
@@ -37049,7 +37054,79 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     _ref$objValue = _ref.objValue,
     objValue = _ref$objValue === void 0 ? null : _ref$objValue,
     _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$attr = _ref.attr,
+    attr = _ref$attr === void 0 ? {} : _ref$attr,
+    _ref$choice_attr = _ref.choice_attr,
+    choice_attr = _ref$choice_attr === void 0 ? function () {
+      return {};
+    } : _ref$choice_attr,
+    _ref$optionClassname = _ref.optionClassname,
+    optionClassname = _ref$optionClassname === void 0 ? null : _ref$optionClassname,
+    _ref$valueClassname = _ref.valueClassname,
+    valueClassname = _ref$valueClassname === void 0 ? null : _ref$valueClassname,
+    _ref$isGroupedOption = _ref.isGroupedOption,
+    isGroupedOption = _ref$isGroupedOption === void 0 ? false : _ref$isGroupedOption,
+    _ref$showTooltipGroup = _ref.showTooltipGroup,
+    showTooltipGroup = _ref$showTooltipGroup === void 0 ? false : _ref$showTooltipGroup,
+    _ref$prevTextShowTool = _ref.prevTextShowTooltip,
+    prevTextShowTooltip = _ref$prevTextShowTool === void 0 ? null : _ref$prevTextShowTool,
+    onSearch = _ref.onSearch,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$loading = _ref.loading,
+    externalLoading = _ref$loading === void 0 ? false : _ref$loading,
+    status = _ref.status,
+    _ref$optionStyle = _ref.optionStyle,
+    optionStyle = _ref$optionStyle === void 0 ? {
+      maxWidth: '250px',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    } : _ref$optionStyle,
+    _ref$showClear = _ref.showClear,
+    showClear = _ref$showClear === void 0 ? true : _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;
+    var hasInfoLine = _ref.hasInfoLine,
+    InfoLineValue = _ref.InfoLineValue,
+    _ref$selectConfig = _ref.selectConfig,
+    selectConfig = _ref$selectConfig === void 0 ? {
+      labelStyle: null,
+      generalIcon: null
+    } : _ref$selectConfig,
+    withIcon = _ref.withIcon,
+    withColor = _ref.withColor,
+    _ref$truncateAt = _ref.truncateAt,
+    truncateAt = _ref$truncateAt === void 0 ? null : _ref$truncateAt;
+    _ref.virtualScroll;
+    var virtualScrollerOptions = _ref.virtualScrollerOptions,
+    _ref$enableItemToolti = _ref.enableItemTooltip,
+    enableItemTooltip = _ref$enableItemToolti === void 0 ? false : _ref$enableItemToolti,
+    _ref$enableItemLink = _ref.enableItemLink,
+    enableItemLink = _ref$enableItemLink === void 0 ? false : _ref$enableItemLink,
+    _ref$openOnHover = _ref.openOnHover,
+    openOnHover = _ref$openOnHover === void 0 ? false : _ref$openOnHover,
+    _ref$itemsCheckedToTh = _ref.itemsCheckedToTheTop,
+    itemsCheckedToTheTop = _ref$itemsCheckedToTh === void 0 ? false : _ref$itemsCheckedToTh,
+    _ref$enableSorting = _ref.enableSorting,
+    enableSorting = _ref$enableSorting === void 0 ? false : _ref$enableSorting,
+    _ref$enableSecondaryL = _ref.enableSecondaryLabel,
+    enableSecondaryLabel = _ref$enableSecondaryL === void 0 ? false : _ref$enableSecondaryL,
+    _ref$secondaryLabelKe = _ref.secondaryLabelKey,
+    secondaryLabelKey = _ref$secondaryLabelKe === void 0 ? 'profession' : _ref$secondaryLabelKe,
+    _ref$subItem = _ref.subItem,
+    subItem = _ref$subItem === void 0 ? false : _ref$subItem;
   var _useState = useState(null),
     _useState2 = _slicedToArray$d(_useState, 2),
     optionSelected = _useState2[0],
@@ -37067,6 +37144,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     inputValue = _useState8[0],
     setInputValue = _useState8[1];
   var dropdownRef = useRef(null);
+  var dropdownComposantRef = useRef(null);
   useRef(null);
   var clickedFromList = useRef(false);
   var _useState9 = useState(''),
@@ -37077,15 +37155,50 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     _useState10 = _slicedToArray$d(_useState1, 2),
     showRequiredError = _useState10[0],
     setShowRequiredError = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray$d(_useState11, 2),
+    tooltipKey = _useState12[0],
+    setTooltipKey = _useState12[1];
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray$d(_useState13, 2),
+    sortOrder = _useState14[0],
+    setSortOrder = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray$d(_useState15, 2),
+    isDropdownOpen = _useState16[0],
+    setIsDropdownOpen = _useState16[1];
+  var _useState17 = useState(''),
+    _useState18 = _slicedToArray$d(_useState17, 2),
+    selectedGroupLabel = _useState18[0],
+    setSelectedGroupLabel = _useState18[1];
   // 🔹 Lazy loading
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray$d(_useState11, 2),
-    loading = _useState12[0],
-    setLoading = _useState12[1];
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray$d(_useState19, 2),
+    loading = _useState20[0],
+    setLoading = _useState20[1];
   var loadLazyTimeout = useRef();
-  useRef(1);
-  useRef('');
+  var currentPageRef = useRef(1);
+  var hasMoreRef = useRef(true);
+  var isLoadingRef = useRef(false);
+  var searchTermRef = useRef('');
+  var loadedOptionsRef = useRef([]);
+  var updateLoadedOptions = function updateLoadedOptions(opts) {
+    loadedOptionsRef.current = opts;
+    setLoadedOptions(opts);
+  };
+  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.18 ? '#000000' : '#FFFFFF';
+  };
+  var truncateLabel = function truncateLabel(label) {
+    if (!label || typeof label !== 'string') return label;
+    if (!truncateAt || label.length <= truncateAt) return label;
+    return label.slice(0, truncateAt) + '…';
+  };
   var optionTemplate = function optionTemplate(option) {
     var _ref2 = selectMetaConfig || {},
       labelStyle = _ref2.labelStyle,
@@ -37093,17 +37206,69 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     var styleLabel = {
       marginLeft: '10px'
     };
-    return /*#__PURE__*/React__default.createElement("div", {
+    var tooltipProps = enableItemTooltip ? {
+      'data-pr-tooltip': (option === null || option === void 0 ? void 0 : option.tooltip) || (option === null || option === void 0 ? void 0 : option.description),
+      'data-pr-position': 'right'
+    } : {};
+    var secondaryLabel = enableSecondaryLabel ? option === null || option === void 0 ? void 0 : option[secondaryLabelKey] : null;
+    var isLink = enableItemLink && (option === null || option === void 0 ? void 0 : option.link);
+    var handleLinkClick = function handleLinkClick(e) {
+      if (isLink) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.open(option.link, '_blank', 'noopener,noreferrer');
+      }
+    };
+    var optionAttrs = typeof choice_attr === 'function' ? choice_attr(option) : {};
+    var attrStyle = optionAttrs.style,
+      attrClassName = optionAttrs.className,
+      restAttrs = _objectWithoutProperties$1(optionAttrs, _excluded$3);
+    var className = "flex align-items-center dropdown-tooltip-item ".concat(attrClassName || optionClassname || '').trim();
+    if (withIcon || withColor) {
+      var _ref3 = selectConfig || {},
+        cfgLabelStyle = _ref3.labelStyle,
+        cfgGeneralIcon = _ref3.generalIcon;
+      return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, restAttrs, {
+        onClick: function onClick() {
+          clickedFromList.current = true;
+        },
+        className: className,
+        style: _objectSpread2(_objectSpread2({
+          fontSize: '14px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px'
+        }, optionStyle), attrStyle)
+      }), withIcon && cfgGeneralIcon && /*#__PURE__*/React__default.createElement("i", {
+        style: {
+          color: option === null || option === void 0 ? void 0 : option.color
+        },
+        className: cfgGeneralIcon
+      }), withColor && option !== null && option !== void 0 && option.color ? /*#__PURE__*/React__default.createElement("span", {
+        className: "dd-color-badge".concat(optionSelected === (option === null || option === void 0 ? void 0 : option[optionValue]) ? ' is-selected' : ''),
+        style: {
+          '--badge-color': option.color,
+          color: inverseColor(option.color)
+        }
+      }, option === null || option === void 0 ? void 0 : option[optionLabel]) : /*#__PURE__*/React__default.createElement("span", {
+        style: _objectSpread2(_objectSpread2({}, cfgLabelStyle), subItem ? {
+          flex: 1
+        } : {})
+      }, option === null || option === void 0 ? void 0 : option[optionLabel]));
+    }
+    return /*#__PURE__*/React__default.createElement("div", _extends$J({}, tooltipProps, restAttrs, {
       onClick: function onClick() {
         clickedFromList.current = true;
       },
-      className: "flex align-items-center",
-      style: {
+      className: className,
+      style: _objectSpread2({
         padding: '6px 10px',
         height: 'auto'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: _objectSpread2({
+      }, attrStyle)
+    }), /*#__PURE__*/React__default.createElement("div", {
+      style: _objectSpread2(_objectSpread2({}, subItem ? {
+        flex: 1
+      } : {}), {}, {
         fontSize: '15px',
         fontWeight: 'bold'
       }, labelStyle)
@@ -37114,15 +37279,103 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       className: generalIcon
     }), /*#__PURE__*/React__default.createElement("span", {
       style: styleLabel
-    }, option === null || option === void 0 ? void 0 : option[optionLabel])));
+    }, option === null || option === void 0 ? void 0 : option[optionLabel]), secondaryLabel && /*#__PURE__*/React__default.createElement("div", {
+      onClick: isLink ? handleLinkClick : undefined,
+      onMouseDown: isLink ? function (e) {
+        return e.stopPropagation();
+      } : undefined,
+      style: {
+        cursor: isLink ? 'pointer' : 'default',
+        marginTop: '2px',
+        width: 'fit-content'
+      }
+    }, /*#__PURE__*/React__default.createElement("small", {
+      style: {
+        opacity: 0.75,
+        fontSize: '12px',
+        textDecoration: isLink ? 'underline' : 'none',
+        color: isLink ? '#3b82f6' : 'inherit',
+        fontWeight: 'normal'
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: subItem ? {} : {
+        marginLeft: '10px'
+      }
+    }, secondaryLabel)))));
   };
+  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 icon = option.value && option.value[iconKey];
+    var styleLabel = generalIcon || showImage && option[imageKey] || showIcon && icon ? {
+      marginLeft: '10px'
+    } : {};
+    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", {
+        className: generalIcon,
+        style: _objectSpread2({
+          fontSize: '15px',
+          fontWeight: 'bold'
+        }, labelStyle)
+      }), 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", {
+        className: "mr-2 ".concat(icon),
+        style: _objectSpread2({
+          fontSize: '15px',
+          fontWeight: 'bold'
+        }, labelStyle)
+      }), /*#__PURE__*/React__default.createElement("span", {
+        style: styleLabel
+      }, option.label)));
+    }
+    return null;
+  };
+  var panelFooterTemplate = function panelFooterTemplate() {
+    if (InfoLineValue) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          padding: '8px'
+        }
+      }, /*#__PURE__*/React__default.createElement("b", null, InfoLineValue));
+    }
+  };
+  var isInvalidEffective = invalid || status === 'error' || showRequiredError;
   // 🔹 Chargement des options depuis une URL (même contrat que MultiSelectMetaAsync)
   var fetchOptionsFromUrl = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var search,
-        _ref4,
-        _ref4$page,
+        _ref6,
+        _ref6$page,
         page,
         length,
         start,
@@ -37138,7 +37391,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
         while (1) switch (_context.n) {
           case 0:
             search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
-            _ref4 = _args.length > 2 && _args[2] !== undefined ? _args[2] : {}, _ref4$page = _ref4.page, page = _ref4$page === void 0 ? 1 : _ref4$page;
+            _ref6 = _args.length > 2 && _args[2] !== undefined ? _args[2] : {}, _ref6$page = _ref6.page, page = _ref6$page === void 0 ? 1 : _ref6$page;
             _context.p = 1;
             length = 25;
             start = (page - 1) * length;
@@ -37158,6 +37411,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
               _context.n = 3;
               break;
             }
+            hasMoreRef.current = false;
             return _context.a(2, {
               options: [],
               hasMore: false
@@ -37200,11 +37454,10 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       }, _callee, null, [[1, 6]]);
     }));
     return function fetchOptionsFromUrl() {
-      return _ref3.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
   var loadOptions = typeof options === 'function' ? options : fetchOptionsFromUrl;
-  var isInvalidEffective = invalid || showRequiredError;
   var style = {
     border: isInvalidEffective ? '1px solid red' : '1px solid #ccc',
     width: '100%',
@@ -37215,9 +37468,12 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
   }, [optionSelected]);
   useEffect(function () {
     setOptionSelected(objValue ? objValue === null || objValue === void 0 ? void 0 : objValue[optionValue] : value !== null && value !== void 0 ? value : null);
+    currentPageRef.current = 1;
+    hasMoreRef.current = true;
+    isLoadingRef.current = false;
     var loadInitialOptions = /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-        var result, _result$options, exists;
+      var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var result, initialOpts, exists;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
@@ -37227,16 +37483,15 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
               });
             case 1:
               result = _context2.v;
-              setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
+              hasMoreRef.current = (result === null || result === void 0 ? void 0 : result.hasMore) !== false;
+              initialOpts = (result === null || result === void 0 ? void 0 : result.options) || [];
               if (objValue) {
-                exists = result === null || result === void 0 || (_result$options = result.options) === null || _result$options === void 0 ? void 0 : _result$options.some(function (opt) {
+                exists = initialOpts.some(function (opt) {
                   return opt[optionValue] === objValue[optionValue];
                 });
-                if (!exists) {
-                  setLoadedOptions(function (prev) {
-                    return [].concat(_toConsumableArray$a(prev), [objValue]);
-                  });
-                }
+                updateLoadedOptions(exists ? initialOpts : [].concat(_toConsumableArray$a(initialOpts), [objValue]));
+              } else {
+                updateLoadedOptions(initialOpts);
               }
             case 2:
               return _context2.a(2);
@@ -37244,7 +37499,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
         }, _callee2);
       }));
       return function loadInitialOptions() {
-        return _ref5.apply(this, arguments);
+        return _ref7.apply(this, arguments);
       };
     }();
     loadInitialOptions();
@@ -37270,7 +37525,39 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       }
     };
   }, [dropdownRef.current]);
+  useEffect(function () {
+    if (enableItemTooltip) {
+      setTooltipKey(function (prevKey) {
+        return prevKey + 1;
+      });
+    }
+  }, [loadedOptions, enableItemTooltip]);
+  var getSelectedGroupLabel = function getSelectedGroupLabel(selectedValue) {
+    if (!isGroupedOption || !selectedValue) return '';
+    var _iterator = _createForOfIteratorHelper$7(loadedOptions),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var group = _step.value;
+        if (showTooltipGroup && group.items && group.items.some(function (item) {
+          return item.value === selectedValue;
+        })) {
+          if (prevTextShowTooltip) return prevTextShowTooltip + ' ' + group.label;
+          return group.label;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return '';
+  };
+  useEffect(function () {
+    if (optionSelected) setSelectedGroupLabel(getSelectedGroupLabel(optionSelected));
+  }, [optionSelected, loadedOptions]);
   var handleChange = function handleChange(e) {
+    if (readOnly) return;
     setOptionSelected(e.value);
     if (clickedFromList.current) {
       var _selected$optionLabel;
@@ -37281,26 +37568,44 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       setInputValue((_selected$optionLabel = selected === null || selected === void 0 ? void 0 : selected[optionLabel]) !== null && _selected$optionLabel !== void 0 ? _selected$optionLabel : '');
     }
     clickedFromList.current = false;
-    if (onChange) onChange(e.value);
+    if (typeof onChange === 'function') {
+      onChange(e.value);
+    } else if (typeof onChange === 'string' && typeof window[onChange] === 'function') {
+      window[onChange](e.value);
+    }
   };
   var handleClear = function handleClear() {
     setOptionSelected(null);
     setInputValue('');
-    if (onChange) onChange(null);
+    if (typeof onChange === 'function') {
+      onChange(null);
+    } else if (typeof onChange === 'string' && typeof window[onChange] === 'function') {
+      window[onChange](null);
+    }
+    searchTermRef.current = '';
+    currentPageRef.current = 1;
+    hasMoreRef.current = true;
+    isLoadingRef.current = false;
     loadOptions('', [], {
       page: 1
     }).then(function (result) {
-      setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
+      hasMoreRef.current = (result === null || result === void 0 ? void 0 : result.hasMore) !== false;
+      updateLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
     });
   };
   var handleInputChange = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(e) {
-      var search, result, _result$options2, _result, filteredOptions;
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(e) {
+      var search, result, _result$options, _result, filteredOptions;
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.n) {
           case 0:
             search = e.target.value;
             setInputValue(search);
+            if (typeof onSearch === 'function') onSearch(search);
+            searchTermRef.current = search;
+            currentPageRef.current = 1;
+            hasMoreRef.current = true;
+            isLoadingRef.current = false;
             if (search) {
               _context3.n = 2;
               break;
@@ -37311,7 +37616,8 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
             });
           case 1:
             result = _context3.v;
-            setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
+            hasMoreRef.current = (result === null || result === void 0 ? void 0 : result.hasMore) !== false;
+            updateLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
             _context3.n = 4;
             break;
           case 2:
@@ -37321,29 +37627,33 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
             });
           case 3:
             _result = _context3.v;
-            filteredOptions = (_result === null || _result === void 0 || (_result$options2 = _result.options) === null || _result$options2 === void 0 ? void 0 : _result$options2.filter(function (opt) {
+            hasMoreRef.current = (_result === null || _result === void 0 ? void 0 : _result.hasMore) !== false;
+            filteredOptions = (_result === null || _result === void 0 || (_result$options = _result.options) === null || _result$options === void 0 ? void 0 : _result$options.filter(function (opt) {
               return opt[optionLabel].toLowerCase().includes(search.toLowerCase());
             })) || [];
-            setLoadedOptions(filteredOptions);
+            updateLoadedOptions(filteredOptions);
           case 4:
             return _context3.a(2);
         }
       }, _callee3);
     }));
     return function handleInputChange(_x) {
-      return _ref6.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
+  var handleMouseEnter = function handleMouseEnter() {
+    var _dropdownComposantRef;
+    if (!openOnHover || disabled || readOnly) return;
+    (_dropdownComposantRef = dropdownComposantRef.current) === null || _dropdownComposantRef === void 0 || _dropdownComposantRef.show();
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    var _dropdownComposantRef2;
+    if (!openOnHover) return;
+    (_dropdownComposantRef2 = dropdownComposantRef.current) === null || _dropdownComposantRef2 === void 0 || _dropdownComposantRef2.hide();
+  };
   var selectedOption = loadedOptions.find(function (opt) {
     return opt[optionValue] === optionSelected;
   });
-  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.18 ? '#000000' : '#FFFFFF';
-  };
   var valueTemplate = function valueTemplate() {
     if (isEditing) return null;
     if (!selectedOption) return /*#__PURE__*/React__default.createElement("span", {
@@ -37351,7 +37661,37 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
         color: '#aaa'
       }
     }, placeholder);
+    if (withIcon || withColor) {
+      var _ref9 = selectConfig || {},
+        labelStyle = _ref9.labelStyle,
+        generalIcon = _ref9.generalIcon;
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: _objectSpread2({
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          fontFamily: 'Arial',
+          fontSize: '14px'
+        }, valueStyle)
+      }, withIcon && generalIcon && /*#__PURE__*/React__default.createElement("i", {
+        style: {
+          color: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.color
+        },
+        className: generalIcon
+      }), withColor && selectedOption !== null && selectedOption !== void 0 && selectedOption.color ? /*#__PURE__*/React__default.createElement("span", {
+        className: "dd-color-badge is-selected",
+        style: {
+          '--badge-color': selectedOption.color,
+          color: inverseColor(selectedOption.color)
+        }
+      }, truncateLabel(selectedOption[optionLabel])) : /*#__PURE__*/React__default.createElement("span", {
+        className: valueClassname,
+        style: labelStyle
+      }, truncateLabel(selectedOption[optionLabel])));
+    }
     return /*#__PURE__*/React__default.createElement("span", {
+      className: valueClassname,
+      title: selectedOption[optionLabel],
       style: _objectSpread2({
         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',
@@ -37362,41 +37702,53 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
         display: 'inline-block',
         fontFamily: 'Arial'
       }, valueStyle)
-    }, selectedOption[optionLabel]);
+    }, truncateLabel(selectedOption[optionLabel]));
   };
-  // 🔹 Fonction de lazy loading (simulation d’un backend)
+  // 🔹 Lazy loading paginé au scroll (même logique que MultiSelectMetaAsync)
   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$a(loadedOptions);
-      for (var i = first; i < last; i++) {
-        if (!_items[i]) {
-          _items[i] = _defineProperty$g(_defineProperty$g({}, optionLabel, "Option #".concat(i)), optionValue, i);
-        }
-      }
-      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;
-        if (nextEl && nextEl.tagName === 'INPUT' && nextEl.value && nextEl.value.trim() !== '') {
-          var virtualscroll = document.querySelector('.p-virtualscroller.p-dropdown-items-wrapper');
-          if (virtualscroll) {
-            virtualscroll.style.height = 'auto';
-          }
+    if (event.last < loadedOptionsRef.current.length - 1 || !hasMoreRef.current) {
+      setTimeout(function () {
+        return setLoading(false);
+      }, 0);
+      return;
+    }
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
+    if (loadLazyTimeout.current) clearTimeout(loadLazyTimeout.current);
+    loadLazyTimeout.current = setTimeout(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var nextPage, result, newOptions;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.n) {
+          case 0:
+            nextPage = currentPageRef.current + 1;
+            _context4.n = 1;
+            return loadOptions(searchTermRef.current, [], {
+              page: nextPage
+            });
+          case 1:
+            result = _context4.v;
+            newOptions = (result === null || result === void 0 ? void 0 : result.options) || [];
+            if (!(newOptions.length === 0)) {
+              _context4.n = 2;
+              break;
+            }
+            hasMoreRef.current = false;
+            isLoadingRef.current = false;
+            setLoading(false);
+            return _context4.a(2);
+          case 2:
+            updateLoadedOptions([].concat(_toConsumableArray$a(loadedOptionsRef.current), _toConsumableArray$a(newOptions)));
+            hasMoreRef.current = (result === null || result === void 0 ? void 0 : result.hasMore) !== false;
+            currentPageRef.current = nextPage;
+            isLoadingRef.current = false;
+            setLoading(false);
+          case 3:
+            return _context4.a(2);
         }
-      }
-    }, Math.random() * 1000 + 250);
+      }, _callee4);
+    })), 500);
   };
   useEffect(function () {
     var handleAnyClick = function handleAnyClick(e) {
@@ -37423,20 +37775,103 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       return document.removeEventListener('click', handleAnyClick);
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement("div", {
-    ref: dropdownRef,
-    className: "flex flex-col gap-1",
-    onClick: isInvalidEffective || disabled ? null : function () {
+  // 🔹 Options calculées (réordonnancement + tri, comme Dropdown)
+  var smartSort = function smartSort(opts, order, labelKey) {
+    if (!order) return opts;
+    var dir = order === 'desc' ? 1 : -1;
+    return _toConsumableArray$a(opts).sort(function (a, b) {
+      var _a$labelKey, _b$labelKey;
+      var aLabel = String((_a$labelKey = a === null || a === void 0 ? void 0 : a[labelKey]) !== null && _a$labelKey !== void 0 ? _a$labelKey : '').trim();
+      var bLabel = String((_b$labelKey = b === null || b === void 0 ? void 0 : b[labelKey]) !== null && _b$labelKey !== void 0 ? _b$labelKey : '').trim();
+      return dir * aLabel.localeCompare(bLabel, 'fr', {
+        sensitivity: 'base',
+        numeric: true
+      });
+    });
+  };
+  var computedOptions = useMemo(function () {
+    var opts = loadedOptions;
+    if (itemsCheckedToTheTop && optionSelected) {
+      var selected = opts.find(function (opt) {
+        return (opt === null || opt === void 0 ? void 0 : opt[optionValue]) === optionSelected;
+      });
+      if (selected) {
+        opts = [selected].concat(_toConsumableArray$a(opts.filter(function (opt) {
+          return (opt === null || opt === void 0 ? void 0 : opt[optionValue]) !== optionSelected;
+        })));
+      }
+    }
+    if (enableSorting) {
+      opts = smartSort(opts, sortOrder, optionLabel);
+    }
+    return opts;
+  }, [loadedOptions, itemsCheckedToTheTop, optionSelected, enableSorting, sortOrder, optionValue, optionLabel]);
+  var toggleSortOrder = function toggleSortOrder() {
+    setSortOrder(function (prev) {
+      if (prev === null) return 'desc';
+      if (prev === 'desc') return 'asc';
+      return null;
+    });
+    requestAnimationFrame(function () {
+      var _dropdownComposantRef3;
+      (_dropdownComposantRef3 = dropdownComposantRef.current) === null || _dropdownComposantRef3 === void 0 || _dropdownComposantRef3.show();
+    });
+  };
+  var customFilterTemplate = function customFilterTemplate(opts) {
+    if (!enableSorting) return opts.element;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "dd-search-row"
+    }, opts.element, /*#__PURE__*/React__default.createElement("button", {
+      type: "button",
+      className: "dd-sort-btn",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        toggleSortOrder();
+      }
+    }, /*#__PURE__*/React__default.createElement("i", {
+      className: sortOrder === 'desc' ? 'pi pi-sort-amount-down' : sortOrder === 'asc' ? 'pi pi-sort-amount-up-alt' : 'pi pi-sort-alt'
+    })));
+  };
+  var mergedClassName = "flex flex-col gap-1 ".concat(attr["class"] || '').trim();
+  attr["class"];
+    var cleanAttr = _objectWithoutProperties$1(attr, _excluded2$2);
+  return /*#__PURE__*/React__default.createElement("div", _extends$J({
+    ref: dropdownRef
+  }, cleanAttr, {
+    className: mergedClassName,
+    style: {
+      width: '100%'
+    },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: isInvalidEffective || disabled || readOnly ? null : function () {
       return setIsEditing(editable);
     }
-  }, /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    options: loadedOptions,
+  }), enableItemTooltip && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    key: tooltipKey,
+    target: ".dropdown-tooltip-item",
+    appendTo: document.body,
+    position: "right",
+    style: {
+      zIndex: 9999999
+    }
+  }), /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$J({
+    ref: dropdownComposantRef,
+    options: computedOptions,
     onChange: handleChange,
+    onClick: function onClick(e) {
+      if (readOnly) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
     filter: filter,
+    filterTemplate: filter ? customFilterTemplate : undefined,
     placeholder: placeholder === "" || placeholder === null ? ' ' : placeholder,
     optionLabel: optionLabel,
     optionValue: optionValue,
-    showClear: true,
+    showClear: showClear,
     disabled: disabled,
     editable: isEditing,
     onFocus: function onFocus() {
@@ -37454,16 +37889,38 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     },
     dropdownMode: "current",
     itemTemplate: optionTemplate,
-    valueTemplate: valueTemplate,
-    virtualScrollerOptions: {
+    valueTemplate: valueTemplate
+  }, hasInfoLine && {
+    panelFooterTemplate: panelFooterTemplate
+  }, {
+    optionGroupTemplate: isGroupedOption ? groupedItemTemplate : null
+  }, isGroupedOption && computedOptions.length > 0 && Array.isArray((_computedOptions$ = computedOptions[0]) === null || _computedOptions$ === void 0 ? void 0 : _computedOptions$.items) && {
+    optionGroupLabel: 'label',
+    optionGroupChildren: 'items'
+  }, {
+    onShow: function onShow() {
+      if (isGroupedOption && showTooltipGroup) setIsDropdownOpen(true);
+      if (enableItemTooltip) setTooltipKey(function (k) {
+        return k + 1;
+      });
+    },
+    onHide: function onHide() {
+      if (isGroupedOption && showTooltipGroup) setIsDropdownOpen(false);
+    },
+    emptyMessage: externalLoading ? 'Chargement…' : 'Aucune option disponible',
+    virtualScrollerOptions: _objectSpread2({
       lazy: true,
       onLazyLoad: onLazyLoad,
       itemSize: 38,
       showLoader: true,
-      loading: loading,
+      loading: loading || externalLoading,
       delay: 25
-    },
-    className: "w-full md:w-14rem"
+    }, virtualScrollerOptions),
+    className: "w-full"
+  })), !isDropdownOpen && selectedGroupLabel && isGroupedOption && /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    target: ".p-dropdown-label.p-inputtext",
+    content: selectedGroupLabel,
+    position: "top"
   }), name && /*#__PURE__*/React__default.createElement("input", {
     type: "hidden",
     name: name,
@@ -37500,9 +37957,6 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
   }, errorMessage || (showRequiredError ? ((_window$Translator = window.Translator) === null || _window$Translator === void 0 ? void 0 : _window$Translator.trans('error.required')) || 'Veuillez renseigner ce champ' : ((_window$Translator2 = window.Translator) === null || _window$Translator2 === void 0 ? void 0 : _window$Translator2.trans('error.invalid_selection')) || 'Sélection invalide'))));
 };
-var css_248z$5 = "@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes toastSlideIn {\n  from {\n    opacity: 0;\n    transform: translateX(40px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n@keyframes toastIconPop {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.2);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n@keyframes toastTextSlide {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.dropdownbook.p-dropdown-panel {\n  z-index: 999999 !important;\n}\n\n.p-tooltip {\n  z-index: 1000000 !important;\n}\n\n.dropdown-tooltip-item {\n  position: relative;\n  width: 100%;\n  cursor: pointer;\n}\n\n/* Application du mixin field sur le wrapper du Dropdown */\n.dropdown-container .p-dropdown {\n  font-family: \"Roboto\", sans-serif;\n  min-height: 40px;\n  padding: 0 12px;\n  background: #ffffff;\n  border: 1.5px solid #e0e3e8;\n  border-radius: 7px;\n  color: #1a1e26;\n  outline: none;\n  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.dropdown-container .p-dropdown:hover:not(:focus):not(:focus-within):not([disabled]):not(.is-disabled) {\n  border-color: #c8cdd6;\n}\n.dropdown-container .p-dropdown:focus, .dropdown-container .p-dropdown:focus-within, .dropdown-container .p-dropdown.is-open {\n  border-color: #3f3f3f;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n}\n.dropdown-container .p-dropdown[disabled], .dropdown-container .p-dropdown.is-disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.dropdown-container .p-dropdown[readonly], .dropdown-container .p-dropdown.is-readonly {\n  background: #f4f5f6;\n  cursor: default;\n  box-shadow: none;\n}\n.dropdown-container .p-dropdown[readonly]:hover, .dropdown-container .p-dropdown.is-readonly:hover {\n  border-color: #e0e3e8;\n}\n.dropdown-container .p-dropdown.is-error {\n  border-color: #dc2626;\n  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n.dropdown-container .p-dropdown.is-success {\n  border-color: #15803d;\n  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);\n}\n.dropdown-container .p-dropdown {\n  padding: 0;\n  display: flex;\n  align-items: center;\n}\n\n.dd-search-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-bottom: 1px solid #e0e3e8;\n}\n.dd-search-row [class*=-filter-container] {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n.dd-search-row [class*=-filter-container] .p-inputtext {\n  width: 100%;\n  height: 32px;\n  padding: 0 24.5px 0 12px;\n  font-size: 14px;\n  box-sizing: border-box;\n}\n.dd-search-row [class*=-filter-container] [class*=-filter-icon] {\n  right: 10.5px;\n  color: #b0b8c4;\n}\n\n.dd-sort-btn {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: 1px solid #e0e3e8;\n  border-radius: 7px;\n  background: #ffffff;\n  cursor: pointer;\n  color: #b0b8c4;\n  font-size: 14px;\n  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.dd-sort-btn:hover {\n  background: #f4f5f6;\n  color: #1a1e26;\n}\n\n.dropdownbook .p-dropdown-header:has(.dd-search-row) {\n  padding: 0;\n}\n\n/* ===== Badge couleur dans les items ===== */\n.dd-color-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 4px 10px;\n  border-radius: 14px;\n  font-size: 12.25px;\n  font-family: \"Roboto\", sans-serif;\n  white-space: nowrap;\n  cursor: default;\n  transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: #f4f5f6;\n  color: #1a1e26;\n  border: 1px solid #e0e3e8;\n  border-color: var(--badge-color, #e0e3e8);\n  background-color: color-mix(in srgb, var(--badge-color, #f4f5f6) 50%, transparent);\n}\n.dd-color-badge.is-selected {\n  background-color: var(--badge-color, #f4f5f6);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.p-dropdown-item:hover .dd-color-badge {\n  background-color: var(--badge-color) !important;\n}\n\n/* ===== Override PrimeReact default item colors ===== */\n.dropdownbook .p-dropdown-items .p-dropdown-item:not(.p-highlight):hover {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-highlight {\n  background: rgba(63, 63, 63, 0.08) !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {\n  background: rgba(63, 63, 63, 0.12) !important;\n  color: #1a1e26 !important;\n}\n.dropdownbook .p-dropdown-items .p-dropdown-item.p-focus {\n  background: #f4f5f6 !important;\n  color: #1a1e26 !important;\n}\n\n/* ===== Override PrimeReact filter input focus ===== */\n.dropdownbook .p-dropdown-filter.p-inputtext:hover {\n  border-color: #c8cdd6 !important;\n}\n.dropdownbook .p-dropdown-filter.p-inputtext:focus, .dropdownbook .p-dropdown-filter.p-inputtext.p-focus {\n  border-color: #3f3f3f !important;\n  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;\n  outline: none;\n}";
-styleInject(css_248z$5);
 var _excluded$2 = ["class"],
   _excluded2$1 = ["style", "className"];
 var Dropdown = function Dropdown(props) {
@@ -44526,24 +44980,118 @@ var createFakeOptions = function createFakeOptions(start, length) {
   }
   return options;
 };
+var mockPeople = [{
+  label: 'Alice Martin',
+  value: 1,
+  color: '#ff9900',
+  profession: 'Développeuse',
+  tooltip: 'Alice Martin — Développeuse',
+  link: 'https://example.com'
+}, {
+  label: 'Bruno Lefèvre',
+  value: 2,
+  color: '#3b82f6',
+  profession: 'Chef de projet',
+  tooltip: 'Bruno Lefèvre — Chef de projet',
+  link: 'https://example.com'
+}, {
+  label: 'Chloé Dubois',
+  value: 3,
+  color: '#10b981',
+  profession: 'Designer',
+  tooltip: 'Chloé Dubois — Designer',
+  link: 'https://example.com'
+}, {
+  label: 'David Morel',
+  value: 4,
+  color: '#8b5cf6',
+  profession: 'Data analyst',
+  tooltip: 'David Morel — Data analyst',
+  link: 'https://example.com'
+}, {
+  label: 'Emma Roux',
+  value: 5,
+  color: '#ec4899',
+  profession: 'Product owner',
+  tooltip: 'Emma Roux — Product owner',
+  link: 'https://example.com'
+}, {
+  label: 'Farid Benali',
+  value: 6,
+  color: '#f59e0b',
+  profession: 'DevOps',
+  tooltip: 'Farid Benali — DevOps',
+  link: 'https://example.com'
+}, {
+  label: 'Gaëlle Simon',
+  value: 7,
+  color: '#ef4444',
+  profession: 'QA engineer',
+  tooltip: 'Gaëlle Simon — QA engineer',
+  link: 'https://example.com'
+}, {
+  label: 'Hugo Bernard',
+  value: 8,
+  color: '#10b981',
+  profession: 'Développeur',
+  tooltip: 'Hugo Bernard — Développeur',
+  link: 'https://example.com'
+}];
+var asyncPeople = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var search,
+      _ref2,
+      _ref2$page,
+      page,
+      filtered,
+      pageSize,
+      start,
+      _args = arguments;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
+          _ref2 = _args.length > 2 && _args[2] !== undefined ? _args[2] : {}, _ref2$page = _ref2.page, page = _ref2$page === void 0 ? 1 : _ref2$page;
+          _context.n = 1;
+          return simulateNetworkDelay();
+        case 1:
+          filtered = search ? mockPeople.filter(function (opt) {
+            return opt.label.toLowerCase().includes(search.toLowerCase());
+          }) : mockPeople;
+          pageSize = 30;
+          start = (page - 1) * pageSize;
+          return _context.a(2, {
+            options: filtered.slice(start, start + pageSize),
+            hasMore: start + pageSize < filtered.length,
+            additional: {
+              page: page + 1
+            }
+          });
+      }
+    }, _callee);
+  }));
+  return function asyncPeople() {
+    return _ref.apply(this, arguments);
+  };
+}();
 var DropdownSelectMetaAsyncPresets = {
   SelectMetaAsync: {
     options: function () {
-      var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var _options = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
         var search,
-          _ref,
+          _ref3,
           page,
           allOptions,
           filtered,
           pageSize,
           start,
-          _args = arguments;
-        return _regenerator().w(function (_context) {
-          while (1) switch (_context.n) {
+          _args2 = arguments;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
             case 0:
-              search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
-              _ref = _args.length > 2 ? _args[2] : undefined, page = _ref.page;
-              _context.n = 1;
+              search = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : '';
+              _ref3 = _args2.length > 2 ? _args2[2] : undefined, page = _ref3.page;
+              _context2.n = 1;
               return simulateNetworkDelay();
             case 1:
               allOptions = createFakeOptions(0, 100);
@@ -44552,7 +45100,7 @@ var DropdownSelectMetaAsyncPresets = {
               });
               pageSize = 30;
               start = (page - 1) * pageSize;
-              return _context.a(2, {
+              return _context2.a(2, {
                 options: filtered.slice(start, start + pageSize),
                 hasMore: start + pageSize < filtered.length,
                 additional: {
@@ -44560,7 +45108,7 @@ var DropdownSelectMetaAsyncPresets = {
                 }
               });
           }
-        }, _callee);
+        }, _callee2);
       }));
       function options() {
         return _options.apply(this, arguments);
@@ -44582,6 +45130,141 @@ var DropdownSelectMetaAsyncPresets = {
       fontSize: '14px',
       fontFamily: 'Arial'
     }
+  },
+  Base: {
+    options: asyncPeople,
+    value: null,
+    placeholder: 'Sélectionnez une option',
+    editable: true,
+    filter: false,
+    showClear: true,
+    valueStyle: {
+      backgroundColor: 'transparent',
+      color: 'inherit',
+      padding: '0',
+      borderRadius: '0',
+      boxShadow: 'none',
+      fontFamily: 'inherit'
+    }
+  },
+  AsyncOptions: {
+    options: asyncPeople,
+    value: 3,
+    placeholder: 'Sélectionnez une option',
+    editable: true,
+    showClear: true,
+    selectMetaConfig: {
+      labelStyle: {
+        fontWeight: 'bold'
+      },
+      generalIcon: 'pi pi-tag'
+    }
+  },
+  SearchAjaxLoading: {
+    // En prod : optionsUrl: '/api/options' (pagination start/length, recherche search[value])
+    options: asyncPeople,
+    placeholder: 'Rechercher (Ajax)…',
+    filter: true,
+    showClear: true
+  },
+  Sorting: {
+    options: asyncPeople,
+    placeholder: 'Tri A→Z / Z→A',
+    filter: true,
+    enableSorting: true,
+    showClear: true
+  },
+  ItemsCheckedToTheTop: {
+    options: asyncPeople,
+    value: 5,
+    placeholder: 'Sélection remontée en haut',
+    itemsCheckedToTheTop: true,
+    showClear: true
+  },
+  OpenOnHover: {
+    options: asyncPeople,
+    placeholder: 'Ouverture au survol',
+    openOnHover: true
+  },
+  ItemWithTooltip: {
+    options: asyncPeople,
+    placeholder: 'Tooltip sur les options',
+    enableItemTooltip: true
+  },
+  ItemWithSecondaryLabel: {
+    options: asyncPeople,
+    placeholder: 'Label secondaire',
+    enableSecondaryLabel: true,
+    secondaryLabelKey: 'profession'
+  },
+  ItemWithLink: {
+    options: asyncPeople,
+    placeholder: 'Lien sur le label secondaire',
+    enableSecondaryLabel: true,
+    secondaryLabelKey: 'profession',
+    enableItemLink: true
+  },
+  Badge: {
+    options: asyncPeople,
+    value: 2,
+    placeholder: 'Badges colorés',
+    withColor: true,
+    selectConfig: {
+      labelStyle: null,
+      generalIcon: null
+    }
+  },
+  WithIcon: {
+    options: asyncPeople,
+    value: 1,
+    placeholder: 'Icône devant chaque option',
+    withIcon: true,
+    selectConfig: {
+      labelStyle: {
+        fontWeight: '400'
+      },
+      generalIcon: 'pi pi-user'
+    }
+  },
+  Truncate: {
+    options: asyncPeople,
+    value: 2,
+    placeholder: 'Label tronqué',
+    truncateAt: 8,
+    valueStyle: {
+      backgroundColor: 'transparent',
+      color: 'inherit',
+      padding: '0',
+      borderRadius: '0',
+      boxShadow: 'none',
+      fontFamily: 'inherit'
+    }
+  },
+  ReadOnly: {
+    options: asyncPeople,
+    value: 4,
+    readOnly: true,
+    showClear: false
+  },
+  Disabled: {
+    options: asyncPeople,
+    value: 4,
+    disabled: true
+  },
+  Required: {
+    options: asyncPeople,
+    value: null,
+    placeholder: 'Sélection obligatoire',
+    required: true,
+    name: 'monchamp',
+    status: 'error',
+    errorMessage: 'Une option doit être sélectionnée'
+  },
+  InfoLine: {
+    options: asyncPeople,
+    placeholder: 'Avec pied de panel',
+    hasInfoLine: true,
+    InfoLineValue: '8 utilisateurs disponibles'
   }
 };

package/package.json CHANGED Viewed

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