allaw-ui 5.1.9 → 5.2.1

package/dist/components/molecules/caseCard/CaseCard.css

@@ -157,3 +157,7 @@
   margin-bottom: 2px;
   z-index: 2;
 }
+
+.case-card-content-no-progress {
+  justify-content: center;
+}

package/dist/components/molecules/caseCard/CaseCard.d.ts

@@ -18,6 +18,7 @@ export interface CaseCardProps {
     showYear?: boolean;
     steps?: number;
     currentStep?: number;
+    hideProgressBar?: boolean;
 }
 declare const CaseCard: React.FC<CaseCardProps>;
 export default CaseCard;

package/dist/components/molecules/caseCard/CaseCard.js

@@ -4,14 +4,14 @@ import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
 import CardDate from "../../atoms/typography/CardDate";
 import ProgressBar from "../../atoms/progressBars/ProgressBar";
 var CaseCard = function (_a) {
-    var clientName = _a.clientName, title = _a.title, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant, _b = _a.categoryLabelLimit, categoryLabelLimit = _b === void 0 ? 20 : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.dateStyle, dateStyle = _d === void 0 ? "hybride" : _d, dateLabel = _a.dateLabel, _e = _a.barColor, barColor = _e === void 0 ? "blue" : _e, _f = _a.showYear, showYear = _f === void 0 ? true : _f, _g = _a.steps, steps = _g === void 0 ? 100 : _g, _h = _a.currentStep, currentStep = _h === void 0 ? 50 : _h;
+    var clientName = _a.clientName, title = _a.title, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant, _b = _a.categoryLabelLimit, categoryLabelLimit = _b === void 0 ? 20 : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.dateStyle, dateStyle = _d === void 0 ? "hybride" : _d, dateLabel = _a.dateLabel, _e = _a.barColor, barColor = _e === void 0 ? "blue" : _e, _f = _a.showYear, showYear = _f === void 0 ? true : _f, _g = _a.steps, steps = _g === void 0 ? 100 : _g, _h = _a.currentStep, currentStep = _h === void 0 ? 50 : _h, _j = _a.hideProgressBar, hideProgressBar = _j === void 0 ? false : _j;
     return (React.createElement("div", { className: "case-card-wrapper case-card-".concat(variant) },
-        React.createElement("div", { className: "case-card-content" },
+        React.createElement("div", { className: "case-card-content ".concat(hideProgressBar ? "case-card-content-no-progress" : "") },
             React.createElement("div", { className: "case-card-header" },
                 React.createElement("h2", { className: "case-card-title ".concat(isDisabled ? "closed" : ""), title: title }, title),
                 React.createElement("span", { className: "case-card-client-name" }, clientName)),
-            React.createElement("div", { className: "case-card-progress-bar" },
-                React.createElement(ProgressBar, { startIcon: false, endIcon: false, steps: steps, isWrapperProgressBar: false, currentStep: currentStep, barColor: barColor })),
+            !hideProgressBar && (React.createElement("div", { className: "case-card-progress-bar" },
+                React.createElement(ProgressBar, { startIcon: false, endIcon: false, steps: steps, isWrapperProgressBar: false, currentStep: currentStep, barColor: barColor }))),
             React.createElement("div", { className: "case-card-categories" }, categories.map(function (category, index) { return (React.createElement(OtherStatusTag, { key: index, label: category, type: "readonly", labelLimit: categoryLabelLimit })); }))),
         nextAppointment && variant !== "archived" && (React.createElement("div", { className: "case-card-next-appointment" },
             React.createElement(CardDate, { date: nextAppointment.date, showYear: showYear, variant: dateStyle, label: dateLabel, isDisabled: isDisabled })))));

package/dist/components/molecules/proSwitch/AvatarToggleGroup.js

@@ -138,27 +138,52 @@ var AvatarToggleGroup = function (_a) {
         document.addEventListener("keydown", handleGlobalKeyDown);
         return function () { return document.removeEventListener("keydown", handleGlobalKeyDown); };
     }, [disabled, calculatedMaxVisible]);
-    var visiblePros = pros.slice(0, calculatedMaxVisible);
-    var hiddenCount = pros.length - calculatedMaxVisible;
-    var hasHiddenPros = hiddenCount > 0;
+    // Réorganiser pour afficher les sélectionnés en priorité si nécessaire
+    var hasHiddenPros = pros.length > calculatedMaxVisible;
+    var maxVisibleSlots = hasHiddenPros
+        ? calculatedMaxVisible - 1
+        : calculatedMaxVisible;
+    // Déterminer si tous les sélectionnés sont visibles avec l'ordre actuel
+    var selectedPros = pros.filter(function (p) { return selected.includes(p.proUserId); });
+    var unselectedPros = pros.filter(function (p) { return !selected.includes(p.proUserId); });
+    var initialVisiblePros = pros.slice(0, maxVisibleSlots);
+    var allSelectedAreVisible = selectedPros.length === 0 ||
+        selectedPros.every(function (sp) {
+            return initialVisiblePros.some(function (vp) { return vp.proUserId === sp.proUserId; });
+        });
+    // Si certains sélectionnés ne sont pas visibles, réorganiser
+    var orderedPros = allSelectedAreVisible
+        ? pros
+        : __spreadArray(__spreadArray([], selectedPros, true), unselectedPros, true);
+    var visiblePros = orderedPros.slice(0, maxVisibleSlots);
+    var hiddenCount = pros.length - visiblePros.length;
     return (React.createElement("div", { ref: containerRef, className: "".concat(styles.proSwitch, " ").concat(className), role: "group", "aria-label": "S\u00E9lection de professionnels", "data-disabled": disabled },
-        React.createElement("div", { className: styles.avatarStack }, visiblePros.map(function (pro, index) {
-            var isSelected = selected.includes(pro.proUserId);
-            return (React.createElement("div", { key: pro.proUserId, className: styles.avatarWrapper, style: {
-                    zIndex: isSelected ? 100 : visiblePros.length - index,
-                    marginLeft: index === 0 ? 0 : -8,
+        React.createElement("div", { className: styles.avatarStack },
+            visiblePros.map(function (pro, index) {
+                var isSelected = selected.includes(pro.proUserId);
+                return (React.createElement("div", { key: pro.proUserId, className: styles.avatarWrapper, style: {
+                        zIndex: isSelected ? 100 : visiblePros.length - index,
+                        marginLeft: index === 0 ? 0 : -8,
+                    }, onMouseEnter: function (e) {
+                        e.currentTarget.style.zIndex = "200";
+                    }, onMouseLeave: function (e) {
+                        e.currentTarget.style.zIndex = isSelected
+                            ? "100"
+                            : String(visiblePros.length - index);
+                    } },
+                    React.createElement(AvatarBubble, { firstName: pro.firstName, name: pro.name, src: pro.profilePictureLink, size: 46, isSelected: isSelected, disabled: disabled, onClick: function () { return handleAvatarClick(pro); }, alt: "".concat(pro.firstName, " ").concat(pro.name), className: focusedIndex === index ? styles.focused : "", showTooltip: showTooltips, tooltipId: tooltipId })));
+            }),
+            hasHiddenPros && (React.createElement("div", { className: styles.avatarWrapper, style: {
+                    zIndex: 1,
+                    marginLeft: visiblePros.length === 0 ? 0 : -8,
                 }, onMouseEnter: function (e) {
                     e.currentTarget.style.zIndex = "200";
                 }, onMouseLeave: function (e) {
-                    e.currentTarget.style.zIndex = isSelected
-                        ? "100"
-                        : String(visiblePros.length - index);
+                    e.currentTarget.style.zIndex = "1";
                 } },
-                React.createElement(AvatarBubble, { firstName: pro.firstName, name: pro.name, src: pro.profilePictureLink, size: 46, isSelected: isSelected, disabled: disabled, onClick: function () { return handleAvatarClick(pro); }, alt: "".concat(pro.firstName, " ").concat(pro.name), className: focusedIndex === index ? styles.focused : "", showTooltip: showTooltips, tooltipId: tooltipId })));
-        })),
-        hasHiddenPros && (React.createElement("button", { className: styles.moreButton, onClick: onOpenPortal, onKeyDown: handleKeyDown, disabled: disabled, "aria-label": "Voir ".concat(pros.length, " professionnels"), tabIndex: disabled ? -1 : 0 },
-            "+",
-            hiddenCount)),
+                React.createElement("button", { className: styles.moreButton, onClick: onOpenPortal, onKeyDown: handleKeyDown, disabled: disabled, "aria-label": "Voir ".concat(pros.length, " professionnels"), tabIndex: disabled ? -1 : 0 },
+                    "+",
+                    hiddenCount)))),
         showTooltips && (React.createElement(Tooltip, { id: tooltipId, place: "top", style: {
                 fontSize: "12px",
                 color: "#FFF",

package/dist/components/molecules/proSwitch/avatarToggleGroup.module.css

@@ -55,8 +55,8 @@
 
 /* Bouton +X pour les pros cachés */
 .moreButton {
-  width: 42.5px;
-  height: 42.5px;
+  width: 46px;
+  height: 46px;
   border-radius: 50%;
   background-color: var(--dark-grey, #456073);
   color: white;
@@ -70,14 +70,11 @@
   font-size: 14px;
   transition: all 0.2s ease;
   flex-shrink: 0;
-  margin-left: -8px;
-  z-index: 5;
 }
 
 .moreButton:hover {
   background-color: var(--mid-grey, #728ea7);
   transform: translateY(-2px);
-  z-index: 15;
 }
 
 .moreButton:focus-visible {
@@ -109,12 +106,12 @@
     padding-left: 8px;
   }
 
-  .moreButton {
+  /* .moreButton {
     width: 32px;
     height: 32px;
     font-size: 12px;
     margin-left: -6px;
-  }
+  } */
 
   /* Ajuster la taille des avatars en mobile */
   .avatarWrapper .avatarBubble {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "5.1.9",
+  "version": "5.2.1",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",