allaw-ui 5.2.2 → 5.2.3

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

@@ -193,6 +193,13 @@ var ProSwitchModal = function (_a) {
         var newSelected;
         if (mode === "single") {
             newSelected = [pro.proUserId];
+            var selectedPros_1 = pros.filter(function (p) {
+                return newSelected.includes(p.proUserId);
+            });
+            onSelect(selectedPros_1);
+            // Fermer la modal automatiquement en mode single
+            onClosePortal();
+            return;
         }
         else {
             if (selected.includes(pro.proUserId)) {
@@ -210,6 +217,10 @@ var ProSwitchModal = function (_a) {
         var selectedPros = pros.filter(function (p) { return newSelected.includes(p.proUserId); });
         onSelect(selectedPros);
     };
+    // Validation en mode multiple
+    var handleValidateSelection = function () {
+        onClosePortal();
+    };
     // Détermination dynamique du max-width selon le nombre de profils
     var modalMaxWidth = 580;
     if (pros.length <= 2)
@@ -282,10 +293,15 @@ var ProSwitchModal = function (_a) {
                             activeDragPro.firstName,
                             " ",
                             activeDragPro.name)) : ("".concat(activeDragPro.firstName, " ").concat(activeDragPro.name))))) : null)),
-                isReorder ? (React.createElement(TinyInfo, { variant: "medium14", text: "D\u00E9placez les profils pour modifier leur ordre", startIcon: "allaw-icon-info", color: "mid-grey", className: styles.reorderInfo })) : (React.createElement("div", { className: styles.selectionInfo },
-                    "S\u00E9lection : ",
-                    selected.length,
-                    "/",
-                    pros.length))))), document.body);
+                isReorder ? (React.createElement(TinyInfo, { variant: "medium14", text: "D\u00E9placez les profils pour modifier leur ordre", startIcon: "allaw-icon-info", color: "mid-grey", className: styles.reorderInfo })) : (React.createElement("div", { className: styles.selectionFooter },
+                    React.createElement("div", { className: styles.selectionInfo },
+                        React.createElement("div", { className: styles.selectionMode }, mode === "single"
+                            ? "Sélection unique"
+                            : "Sélection multiple"),
+                        React.createElement("div", { className: styles.selectionCount },
+                            pros.length,
+                            " \u00E9l\u00E9ment",
+                            pros.length > 1 ? "s" : "")),
+                    mode === "multiple" && (React.createElement("button", { className: styles.validateBtn, onClick: handleValidateSelection, type: "button" }, "Valider"))))))), document.body);
 };
 export default ProSwitchModal;

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

@@ -290,17 +290,37 @@
   }
 }
 
+.selectionFooter {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28px 24px 29px 16px;
+  position: sticky;
+  bottom: 0;
+  background: #f8fafc;
+  z-index: 1;
+}
+
 .selectionInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   text-align: left;
   color: #728ea7;
-  font-size: 15px;
-  padding: 28px 0 29px 16px;
   font-family: var(--font-open-sans, "Open Sans");
+}
+
+.selectionMode {
+  font-size: 15px;
+  font-weight: 600;
+  color: #171e25;
+}
+
+.selectionCount {
+  font-size: 14px;
   font-weight: 500;
-  position: sticky;
-  bottom: 0;
-  background: #f8fafc;
-  z-index: 1;
+  color: #728ea7;
 }
 
 .reorderInfo {

package/package.json

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