allaw-ui 2.4.9 → 2.5.1

package/dist/components/atoms/inputs/VerificationCodeInput.js

@@ -132,7 +132,9 @@ var VerificationCodeInput = function (_a) {
                 ? "[0-9]*"
                 : allowedChars === "alphabetic"
                     ? "[a-zA-Z]*"
-                    : "[a-zA-Z0-9]*", ref: function (input) { return (inputRefs.current[index] = input); }, autoFocus: index === 0 && autoFocus, tabIndex: index === 0 ? 0 : undefined })); });
+                    : "[a-zA-Z0-9]*", ref: function (input) { return (inputRefs.current[index] = input); }, autoFocus: index === 0 && autoFocus, tabIndex: index === 0 ? 0 : undefined, "data-lpignore": "true" // Empêche Dashlane d'intervenir
+            , "data-form-type": "other" // Indique que ce n'est pas un champ de mot de passe
+         })); });
     };
     return (React.createElement("div", { className: styles.container },
         React.createElement("div", { className: styles.inputsContainer }, renderInputs()),

package/dist/components/atoms/selects/Select.js

@@ -50,39 +50,58 @@ function Select(_a, ref) {
             // Initialiser avec tous les tags visibles
             setVisibleTags(selected);
             setHiddenCount(0);
-            // Attendre le prochain rendu pour mesurer les dimensions
             requestAnimationFrame(function () {
                 var container = tagContainerRef.current;
                 if (!container)
                     return;
                 var containerWidth = container.offsetWidth - 40; // Espace pour l'icône et les marges
-                var totalWidth = 0;
-                var visibleCount = selected.length;
-                // Première passe : mesurer la taille réelle de chaque tag
-                var tagWidths = Array.from(container.children)
-                    .filter(function (child) { return !child.classList.contains("hiddenTagCount"); })
-                    .map(function (tag) { return tag.offsetWidth + 6; }); // 6px pour le gap
-                // Deuxième passe : calculer combien de tags peuvent tenir
-                var counterWidth = 60; // Espace estimé pour "+ x autres"
-                for (var i = 0; i < tagWidths.length; i++) {
-                    var currentTagWidth = tagWidths[i];
-                    var nextWidth = totalWidth + currentTagWidth;
-                    // Si on ajoute ce tag, aurons-nous assez d'espace pour le compteur ?
-                    var remainingTags = selected.length - (i + 1);
-                    var needsCounter = remainingTags > 0;
-                    var spaceNeeded = needsCounter ? counterWidth : 0;
-                    if (nextWidth + spaceNeeded <= containerWidth) {
-                        totalWidth = nextWidth;
-                        visibleCount = i + 1;
+                // Fonction pour calculer la largeur totale des tags
+                var calculateTagsWidth = function (tags) {
+                    return tags.reduce(function (total, tag) { return total + tag.offsetWidth + 6; }, 0); // 6px pour le gap
+                };
+                // Fonction pour créer et mesurer le compteur
+                var measureCounter = function (count) {
+                    var counter = document.createElement("span");
+                    counter.className = styles.hiddenTagCount;
+                    counter.textContent = "+ ".concat(count, " autre").concat(count > 1 ? "s" : "");
+                    container.appendChild(counter);
+                    var width = counter.offsetWidth;
+                    container.removeChild(counter);
+                    return width;
+                };
+                // Obtenir tous les tags (sans le compteur)
+                var allTags = Array.from(container.children).filter(function (child) { return !child.classList.contains("hiddenTagCount"); });
+                // Si tous les tags tiennent, on les affiche tous
+                var totalWidth = calculateTagsWidth(allTags);
+                if (totalWidth <= containerWidth) {
+                    setVisibleTags(selected);
+                    setHiddenCount(0);
+                    return;
+                }
+                // Sinon, on cherche le nombre optimal de tags à afficher
+                var bestVisibleCount = 0;
+                // On teste chaque combinaison possible
+                for (var i = 1; i <= allTags.length; i++) {
+                    var visibleTags_1 = allTags.slice(0, i);
+                    var hiddenCount_1 = selected.length - i;
+                    var counterWidth = hiddenCount_1 > 0 ? measureCounter(hiddenCount_1) + 6 : 0;
+                    var totalWidth_1 = calculateTagsWidth(visibleTags_1) + counterWidth;
+                    if (totalWidth_1 <= containerWidth) {
+                        bestVisibleCount = i;
                     }
                     else {
-                        break;
+                        break; // On sort dès qu'on dépasse la largeur disponible
                     }
                 }
-                // Mettre à jour les états
-                if (visibleCount < selected.length) {
-                    setVisibleTags(selected.slice(0, visibleCount));
-                    setHiddenCount(selected.length - visibleCount);
+                // Mettre à jour avec la meilleure combinaison trouvée
+                if (bestVisibleCount > 0) {
+                    setVisibleTags(selected.slice(0, bestVisibleCount));
+                    setHiddenCount(selected.length - bestVisibleCount);
+                }
+                else {
+                    // Fallback : afficher au moins un tag
+                    setVisibleTags(selected.slice(0, 1));
+                    setHiddenCount(selected.length - 1);
                 }
             });
         }

package/dist/components/atoms/typography/TinyInfo.css

@@ -16,6 +16,12 @@
   letter-spacing: 0.5px;
 }
 
+.tiny-info.semiBold14 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--Primary-Blanc, #fff);
+}
+
 .tiny-info.medium14 {
   font-size: 14px;
   font-weight: 400;

package/dist/components/atoms/typography/TinyInfo.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import "./TinyInfo.css";
 export interface TinyInfoProps {
-    variant: "bold14" | "medium14" | "semiBold12" | "medium12";
+    variant: "bold14" | "medium14" | "semiBold14" | "semiBold12" | "medium12";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error" | "actions-valid";
     text: string;
     href?: string;

package/dist/components/molecules/selectForm/SelectForm.d.ts

@@ -10,6 +10,7 @@ export interface SelectFormProps {
     placeHolder?: string;
     width?: number;
     selectedItem?: string | string[];
+    maxItems?: number;
     onChange?: (selected: string | string[]) => void;
     variant?: "bold" | "semiBold" | "medium";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";

package/dist/components/molecules/selectForm/SelectForm.js

@@ -4,12 +4,12 @@ import "../../../styles/global.css";
 import Paragraph from "../../atoms/typography/Paragraph";
 import Select from "../../atoms/selects/Select";
 var SelectForm = function (_a) {
-    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.placeHolder, placeHolder = _b === void 0 ? "Sélectionner une valeur" : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, selectedItem = _a.selectedItem, onChange = _a.onChange, _d = _a.variant, variant = _d === void 0 ? "medium" : _d, _e = _a.color, color = _e === void 0 ? "noir" : _e;
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.placeHolder, placeHolder = _b === void 0 ? "Sélectionner une valeur" : _b, _c = _a.width, width = _c === void 0 ? 100 : _c, selectedItem = _a.selectedItem, maxItems = _a.maxItems, onChange = _a.onChange, _d = _a.variant, variant = _d === void 0 ? "medium" : _d, _e = _a.color, color = _e === void 0 ? "noir" : _e;
     return (React.createElement("div", { className: "select-form" },
         React.createElement(Paragraph, { variant: variant, color: color, text: React.createElement(React.Fragment, null,
                 label,
                 " ",
                 isRequired && React.createElement("span", { className: "select-form-required" }, "*")), size: "default" }),
-        React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, placeholder: placeHolder, selectedItem: selectedItem, onChange: onChange })));
+        React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, placeholder: placeHolder, selectedItem: selectedItem, maxItems: maxItems, onChange: onChange })));
 };
 export default SelectForm;

package/dist/components/molecules/selectForm/SelectForm.stories.d.ts

@@ -18,35 +18,49 @@ declare namespace _default {
             let control_3: string;
             export { control_3 as control };
         }
-        namespace width {
+        namespace maxItems {
             export namespace control_4 {
                 let type: string;
                 let min: number;
-                let max: number;
             }
             export { control_4 as control };
+            export namespace _if {
+                let arg: string;
+                let truthy: boolean;
+            }
+            export { _if as if };
         }
-        namespace selectedItem {
-            let control_5: string;
-            export { control_5 as control };
-        }
-        namespace variant {
-            export namespace control_6 {
+        namespace width {
+            export namespace control_5 {
                 let type_1: string;
                 export { type_1 as type };
-                let options_1: string[];
-                export { options_1 as options };
+                let min_1: number;
+                export { min_1 as min };
+                export let max: number;
             }
+            export { control_5 as control };
+        }
+        namespace selectedItem {
+            let control_6: string;
             export { control_6 as control };
         }
-        namespace color {
+        namespace variant {
             export namespace control_7 {
                 let type_2: string;
                 export { type_2 as type };
+                let options_1: string[];
+                export { options_1 as options };
+            }
+            export { control_7 as control };
+        }
+        namespace color {
+            export namespace control_8 {
+                let type_3: string;
+                export { type_3 as type };
                 let options_2: string[];
                 export { options_2 as options };
             }
-            export { control_7 as control };
+            export { control_8 as control };
         }
     }
 }

package/dist/components/molecules/selectForm/SelectForm.stories.js

@@ -21,6 +21,13 @@ export default {
         isRequired: { control: "boolean" },
         options: { control: "object" },
         isMultiple: { control: "boolean" },
+        maxItems: {
+            control: {
+                type: "number",
+                min: 1,
+            },
+            if: { arg: "isMultiple", truthy: true },
+        },
         width: {
             control: {
                 type: "number",
@@ -89,6 +96,7 @@ Multiple.args = {
     isMultiple: true,
     width: 100,
     selectedItem: [],
+    maxItems: 3,
 };
 export var CustomWidth = Template.bind({});
 CustomWidth.args = __assign(__assign({}, Default.args), { width: 50 });

package/package.json

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