arengibook 3.1.312-main → 3.1.314-main

package/dist/index.js

@@ -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,
@@ -37028,6 +37033,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     optionLabel = _ref$optionLabel === void 0 ? 'label' : _ref$optionLabel,
     _ref$optionValue = _ref.optionValue,
     optionValue = _ref$optionValue === void 0 ? 'value' : _ref$optionValue,
+    optionsUrl = _ref.optionsUrl,
     _ref$invalid = _ref.invalid,
     invalid = _ref$invalid === void 0 ? false : _ref$invalid,
     _ref$errorMessage = _ref.errorMessage,
@@ -37039,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,
@@ -37048,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],
@@ -37066,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(''),
@@ -37076,15 +37155,43 @@ 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 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,
@@ -37092,17 +37199,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)
@@ -37113,9 +37272,184 @@ 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 isInvalidEffective = invalid || showRequiredError;
+  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 _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var search,
+        _ref6,
+        _ref6$page,
+        page,
+        length,
+        start,
+        queryParams,
+        response,
+        responseJSON,
+        dataAjax,
+        mappedOptions,
+        hasMore,
+        _args = arguments,
+        _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            search = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
+            _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;
+            queryParams = new URLSearchParams();
+            if (search) queryParams.append('search[value]', search);
+            queryParams.append('start', start);
+            queryParams.append('length', length);
+            _context.n = 2;
+            return fetch("".concat(optionsUrl, "?").concat(queryParams.toString()));
+          case 2:
+            response = _context.v;
+            if (response.ok) {
+              _context.n = 4;
+              break;
+            }
+            if (!(response.status === 404)) {
+              _context.n = 3;
+              break;
+            }
+            return _context.a(2, {
+              options: [],
+              hasMore: false
+            });
+          case 3:
+            throw new Error("Erreur HTTP: ".concat(response.status));
+          case 4:
+            _context.n = 5;
+            return response.json();
+          case 5:
+            responseJSON = _context.v;
+            dataAjax = responseJSON.data || [];
+            mappedOptions = dataAjax.map(function (opt) {
+              if (opt.hasOwnProperty('color') && opt.color !== null && opt.color.length > 0) {
+                opt.color = opt.color.toLowerCase();
+              } else {
+                delete opt.color;
+              }
+              opt.label = opt.nom !== undefined && opt.nom !== null ? opt.nom : opt.label;
+              opt.value = opt.id;
+              return opt;
+            });
+            hasMore = start + dataAjax.length < responseJSON.recordsTotal;
+            return _context.a(2, {
+              options: mappedOptions,
+              hasMore: hasMore,
+              additional: {
+                page: page + 1
+              }
+            });
+          case 6:
+            _context.p = 6;
+            _t = _context.v;
+            console.error("Erreur lors de la récupération des options :", _t);
+            return _context.a(2, {
+              options: [],
+              hasMore: false
+            });
+        }
+      }, _callee, null, [[1, 6]]);
+    }));
+    return function fetchOptionsFromUrl() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var loadOptions = typeof options === 'function' ? options : fetchOptionsFromUrl;
   var style = {
     border: isInvalidEffective ? '1px solid red' : '1px solid #ccc',
     width: '100%',
@@ -37127,17 +37461,17 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
   useEffect(function () {
     setOptionSelected(objValue ? objValue === null || objValue === void 0 ? void 0 : objValue[optionValue] : value !== null && value !== void 0 ? value : null);
     var loadInitialOptions = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
         var result, _result$options, exists;
-        return _regenerator().w(function (_context) {
-          while (1) switch (_context.n) {
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
             case 0:
-              _context.n = 1;
-              return options('', [], {
+              _context2.n = 1;
+              return loadOptions('', [], {
                 page: 1
               });
             case 1:
-              result = _context.v;
+              result = _context2.v;
               setLoadedOptions((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) {
@@ -37150,12 +37484,12 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
                 }
               }
             case 2:
-              return _context.a(2);
+              return _context2.a(2);
           }
-        }, _callee);
+        }, _callee2);
       }));
       return function loadInitialOptions() {
-        return _ref3.apply(this, arguments);
+        return _ref7.apply(this, arguments);
       };
     }();
     loadInitialOptions();
@@ -37163,7 +37497,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     return function () {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [options, objValue, value]);
+  }, [options, optionsUrl, objValue, value]);
   var handleClickOutside = function handleClickOutside(event) {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsEditing(false);
@@ -37181,7 +37515,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;
@@ -37192,69 +37558,81 @@ 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);
-    options('', [], {
+    if (typeof onChange === 'function') {
+      onChange(null);
+    } else if (typeof onChange === 'string' && typeof window[onChange] === 'function') {
+      window[onChange](null);
+    }
+    loadOptions('', [], {
       page: 1
     }).then(function (result) {
       setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
     });
   };
   var handleInputChange = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(e) {
       var search, result, _result$options2, _result, filteredOptions;
-      return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.n) {
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
           case 0:
             search = e.target.value;
             setInputValue(search);
+            if (typeof onSearch === 'function') onSearch(search);
             if (search) {
-              _context2.n = 2;
+              _context3.n = 2;
               break;
             }
-            _context2.n = 1;
-            return options('', [], {
+            _context3.n = 1;
+            return loadOptions('', [], {
               page: 1
             });
           case 1:
-            result = _context2.v;
+            result = _context3.v;
             setLoadedOptions((result === null || result === void 0 ? void 0 : result.options) || []);
-            _context2.n = 4;
+            _context3.n = 4;
             break;
           case 2:
-            _context2.n = 3;
-            return options(search, [], {
+            _context3.n = 3;
+            return loadOptions(search, [], {
               page: 1
             });
           case 3:
-            _result = _context2.v;
+            _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) {
               return opt[optionLabel].toLowerCase().includes(search.toLowerCase());
             })) || [];
             setLoadedOptions(filteredOptions);
           case 4:
-            return _context2.a(2);
+            return _context3.a(2);
         }
-      }, _callee2);
+      }, _callee3);
     }));
     return function handleInputChange(_x) {
-      return _ref4.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", {
@@ -37262,7 +37640,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',
@@ -37273,7 +37681,7 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
         display: 'inline-block',
         fontFamily: 'Arial'
       }, valueStyle)
-    }, selectedOption[optionLabel]);
+    }, truncateLabel(selectedOption[optionLabel]));
   };
 
   // 🔹 Fonction de lazy loading (simulation d’un backend)
@@ -37334,20 +37742,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() {
@@ -37365,16 +37856,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,
@@ -37411,9 +37924,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) {
@@ -37519,10 +38029,11 @@ var Dropdown = function Dropdown(props) {
     _props$subItem = props.subItem,
     subItem = _props$subItem === void 0 ? false : _props$subItem,
     _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required;
+    required = _props$required === void 0 ? false : _props$required,
+    optionsUrl = props.optionsUrl;
 
   // --- Async delegation ---
-  var isAsyncOptions = typeof options === 'function';
+  var isAsyncOptions = typeof options === 'function' || optionsUrl;
   if (isAsyncOptions) {
     return /*#__PURE__*/React__default.createElement(DropdownSelectMetaAsync, props);
   }
@@ -44436,24 +44947,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);
@@ -44462,7 +45067,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: {
@@ -44470,7 +45075,7 @@ var DropdownSelectMetaAsyncPresets = {
                 }
               });
           }
-        }, _callee);
+        }, _callee2);
       }));
       function options() {
         return _options.apply(this, arguments);
@@ -44492,6 +45097,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'
   }
 };
 
@@ -55744,41 +56484,12 @@ var Table$1 = function Table(_ref13) {
     locked = _useState32[0],
     setLocked = _useState32[1];
   var effectiveEditable = lockable ? editable && !locked : editable;
-
-  // Construit l'attributeData complet d'une ligne : une entrée par colonne
-  // qui déclare attributeData, disponible dès le chargement (avant toute édition).
-  var buildAttributeData = useCallback(function () {
-    var result = {};
-    columns.forEach(function (col) {
-      if (col.attributeData !== undefined) result[col.field] = col.attributeData;
-    });
-    return result;
-  }, [columns]);
-
-  // Enrichit chaque ligne avec l'attributeData de toutes les colonnes.
-  // Comme les mises à jour font toujours { ...row, [field]: newVal },
-  // l'attributeData posé ici est préservé à travers toutes les éditions.
-  var enrichRows = useCallback(function (rows) {
-    var attributeData = buildAttributeData();
-    if (!Object.keys(attributeData).length) return rows;
-    return rows.map(function (row) {
-      return _objectSpread2(_objectSpread2({}, row), {}, {
-        attributeData: attributeData
-      });
-    });
-  }, [buildAttributeData]);
-  var _useState33 = useState(function () {
-      return enrichRows(value);
-    }),
+  var _useState33 = useState(value),
     _useState34 = _slicedToArray$d(_useState33, 2),
     data = _useState34[0],
     setData = _useState34[1];
-  // Dépendre uniquement de `value` : enrichRows change de référence si `columns`
-  // est recréé par le parent à chaque rendu, ce qui re-synchroniserait la data
-  // et écraserait les éditions en cours.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(function () {
-    setData(enrichRows(value));
+    setData(value);
   }, [value]);
   var onCellChangeRef = useRef(onCellChange);
   useEffect(function () {
@@ -55822,8 +56533,7 @@ var Table$1 = function Table(_ref13) {
   var handleAddRow = useCallback(function () {
     // id temporaire négatif pour éviter les collisions avec les id BDD positifs
     var newRow = {
-      id: -Date.now(),
-      attributeData: buildAttributeData()
+      id: -Date.now()
     };
     columns.forEach(function (col) {
       switch (col.type) {
@@ -55842,7 +56552,7 @@ var Table$1 = function Table(_ref13) {
       onAdd === null || onAdd === void 0 || onAdd(newRow, updated);
       return updated;
     });
-  }, [columns, onChange, onAdd, buildAttributeData]);
+  }, [columns, onChange, onAdd]);
   var _useState37 = useState({}),
     _useState38 = _slicedToArray$d(_useState37, 2),
     editingRows = _useState38[0],
@@ -56966,6 +57676,7 @@ var Table$1 = function Table(_ref13) {
           rowData: rowData,
           col: col,
           editable: colEditable,
+          isRowEditing: !!editingRows[rowData.id],
           onSave: function onSave(v) {
             var _onCellChangeRef$curr2;
             var enrichedFields = _defineProperty$g({}, col.field, v);
@@ -56996,7 +57707,6 @@ var Table$1 = function Table(_ref13) {
               newValue: v
             });
           },
-          isRowEditing: !!editingRows[rowData.id],
           renderDisplay: displayFn !== null && displayFn !== void 0 ? displayFn : function (rd) {
             var _rd$col$field;
             return (_rd$col$field = rd[col.field]) !== null && _rd$col$field !== void 0 ? _rd$col$field : '';
@@ -58160,12 +58870,7 @@ var columnsTyped = [
   header: 'Inscription',
   type: 'date',
   editable: true,
-  dbDateFormat: 'MMMM/y',
-  attributeData: {
-    'data-value': 'bonjour',
-    'data-tata': 'hello',
-    'data-tab': []
-  }
+  dbDateFormat: 'MMMM/y'
 }, {
   field: 'dateNaissance',
   header: 'Naissance',

package/package.json

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