allaw-ui 2.4.7 → 2.4.9

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

@@ -30,20 +30,23 @@ var VerificationCodeInput = function (_a) {
         }
     }, [testError, onError]);
     var handleInputChange = function (index, value) {
+        // console.log(`[VerificationCodeInput] Input ${index} changed to:`, value);
         var _a;
-        console.log("[VerificationCodeInput] Input ".concat(index, " changed to:"), value);
         if (!validateInput(value, allowedChars)) {
-            console.log("[VerificationCodeInput] Invalid input value");
+            // console.log("[VerificationCodeInput] Invalid input value");
             return;
         }
         var newValues = __spreadArray([], values, true);
         newValues[index] = value;
         setValues(newValues);
         var fullValue = newValues.join("");
-        console.log("[VerificationCodeInput] New values:", fullValue);
+        // console.log("[VerificationCodeInput] New values:", fullValue);
         onChange === null || onChange === void 0 ? void 0 : onChange(fullValue);
         if (index === numInputs - 1 && value !== "") {
-            console.log("[VerificationCodeInput] Last input filled, validating with:", fullValue);
+            // console.log(
+            //   "[VerificationCodeInput] Last input filled, validating with:",
+            //   fullValue
+            // );
             if (fullValue.length === numInputs) {
                 setError("");
                 onError === null || onError === void 0 ? void 0 : onError(null);
@@ -70,7 +73,10 @@ var VerificationCodeInput = function (_a) {
             if (!isStillFocused) {
                 if (values.every(function (value) { return value !== ""; })) {
                     var fullValue = values.join("");
-                    console.log("[VerificationCodeInput] All inputs filled, length:", fullValue.length);
+                    // console.log(
+                    //   "[VerificationCodeInput] All inputs filled, length:",
+                    //   fullValue.length
+                    // );
                     setError("");
                     onError === null || onError === void 0 ? void 0 : onError(null);
                     onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);
@@ -97,7 +103,10 @@ var VerificationCodeInput = function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange(newValues_1.join(""));
             if (validChars.length >= numInputs) {
                 var fullValue = newValues_1.join("");
-                console.log("[VerificationCodeInput] All inputs filled, length:", fullValue.length);
+                // console.log(
+                //   "[VerificationCodeInput] All inputs filled, length:",
+                //   fullValue.length
+                // );
                 setError("");
                 onError === null || onError === void 0 ? void 0 : onError(null);
                 onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);

package/dist/components/atoms/selects/Select.d.ts

@@ -12,6 +12,7 @@ export interface SelectProps<T extends string | string[]> {
     isRequired?: boolean;
     showError?: boolean;
     width?: number;
+    maxItems?: number;
     onChange?: (selected: T) => void;
     onError?: (error: string) => void;
 }

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

@@ -14,18 +14,21 @@ import "../../../styles/global.css";
 import TinyInfo from "../typography/TinyInfo";
 function Select(_a, ref) {
     var _b;
-    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Choisir..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, onChange = _a.onChange, onError = _a.onError;
+    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Choisir..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, maxItems = _a.maxItems, onChange = _a.onChange, onError = _a.onError;
     var _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
     var _j = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _j[0], setSelected = _j[1];
     var _k = useState(""), error = _k[0], setError = _k[1];
     var selectRef = useRef(null);
     var listRef = useRef(null);
-    var _l = useState({
+    var tagContainerRef = useRef(null);
+    var _l = useState([]), visibleTags = _l[0], setVisibleTags = _l[1];
+    var _m = useState(0), hiddenCount = _m[0], setHiddenCount = _m[1];
+    var _o = useState({
         top: 0,
         left: 0,
         width: 0,
-    }), listPosition = _l[0], setListPosition = _l[1];
-    var _m = useState("bottom"), placement = _m[0], setPlacement = _m[1];
+    }), listPosition = _o[0], setListPosition = _o[1];
+    var _p = useState("bottom"), placement = _p[0], setPlacement = _p[1];
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
     }, [selectedItem, multiple]);
@@ -40,14 +43,70 @@ function Select(_a, ref) {
             }
         }
     }, [isOpen, multiple, selectedItem]);
+    useEffect(function () {
+        if (tagContainerRef.current &&
+            Array.isArray(selected) &&
+            selected.length > 0) {
+            // 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;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                // Mettre à jour les états
+                if (visibleCount < selected.length) {
+                    setVisibleTags(selected.slice(0, visibleCount));
+                    setHiddenCount(selected.length - visibleCount);
+                }
+            });
+        }
+        else {
+            setVisibleTags([]);
+            setHiddenCount(0);
+        }
+    }, [selected]);
     var handleSelect = function (item) {
         var newSelected;
         if (multiple) {
-            newSelected = (Array.isArray(selected)
-                ? selected.includes(item.value)
-                    ? selected.filter(function (i) { return i !== item.value; })
-                    : __spreadArray(__spreadArray([], selected, true), [item.value], false)
-                : [item.value]);
+            var currentSelected = selected;
+            if (currentSelected.includes(item.value)) {
+                newSelected = currentSelected.filter(function (i) { return i !== item.value; });
+            }
+            else {
+                if (maxItems && currentSelected.length >= maxItems) {
+                    return;
+                }
+                newSelected = __spreadArray(__spreadArray([], currentSelected, true), [item.value], false);
+                if (maxItems && currentSelected.length + 1 >= maxItems) {
+                    setIsOpen(false);
+                }
+            }
         }
         else {
             newSelected = item.value;
@@ -134,15 +193,23 @@ function Select(_a, ref) {
             : "", " ").concat(!multiple && item.value === selectedItem ? styles.highlighted : "", " ").concat(!multiple ? styles.singleSelect : ""), onClick: function () { return handleSelect(item); } },
         multiple && React.createElement("span", { className: styles.selectItemIcon }),
         React.createElement("span", { className: styles.selectItemText }, item.label))); }))); };
+    var renderTags = function (selectedValues) {
+        if (!selectedValues.length)
+            return null;
+        return (React.createElement("div", { ref: tagContainerRef, className: styles.tagContainer },
+            visibleTags.map(function (val) {
+                var _a;
+                return (React.createElement("span", { key: val, className: styles.tag }, (_a = items.find(function (item) { return item.value === val; })) === null || _a === void 0 ? void 0 : _a.label));
+            }),
+            hiddenCount > 0 && (React.createElement("span", { className: "".concat(styles.hiddenTagCount, " hiddenTagCount") }, "+ ".concat(hiddenCount, " autre").concat(hiddenCount > 1 ? "s" : "")))));
+    };
     useImperativeHandle(ref, function () { return ({
         validate: function () { return validateSelect(selected); },
     }); });
     return (React.createElement("div", { ref: selectRef, className: "".concat(styles.selectContainer, " ").concat(isOpen ? styles.selectPressed : ""), style: { width: "".concat(width, "%") } },
-        React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault), onClick: toggleOpen, style: { width: "100%" } },
+        React.createElement("button", { type: "button", className: "".concat(styles.select, " ").concat(isOpen ? styles.selectPressed : styles.selectDefault, " ").concat(multiple ? styles.selectMultiple : styles.selectSingle), onClick: toggleOpen, style: { width: "100%" } },
             React.createElement("span", { className: styles.selectText }, Array.isArray(selected) && selected.length > 0
-                ? selected
-                    .map(function (val) { var _a; return (_a = items.find(function (item) { return item.value === val; })) === null || _a === void 0 ? void 0 : _a.label; })
-                    .join(", ")
+                ? renderTags(selected)
                 : !Array.isArray(selected) && selected
                     ? (_b = items.find(function (item) { return item.value === selected; })) === null || _b === void 0 ? void 0 : _b.label
                     : placeholder),

package/dist/components/atoms/selects/Select.module.css

@@ -1,12 +1,12 @@
 .selectContainer {
   position: relative;
+  min-height: 40px;
 }
 
 .select {
   display: flex;
-  padding: 8px 16px;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   gap: 11px;
   border-radius: 8px;
   background: var(--secondary-light-grey, #f4f7fb);
@@ -31,6 +31,10 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: flex;
+  flex: 1;
+  min-height: 24px;
+  padding: 2px 0;
 }
 
 .selectIcon {
@@ -40,7 +44,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top: 4px;
+  padding-top: 2px;
 }
 
 .selectList {
@@ -113,3 +117,44 @@
 .selectItem.highlighted {
   background-color: var(--venom-grey-dark, #d1dce8);
 }
+
+.tagContainer {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 6px;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+}
+
+.tag {
+  background: var(--grey-venom, #e6edf5);
+  border-radius: 4px;
+  padding: 8px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.hiddenTagCount {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  white-space: nowrap;
+  flex-shrink: 0;
+  padding: 2px 0;
+}
+
+.select:hover .tag {
+  background-color: var(--venom-grey-dark, #d1dce8);
+}
+
+.selectMultiple {
+  padding: 6px 8px;
+}
+
+.selectSingle {
+  padding: 8px 16px;
+}

package/dist/components/atoms/selects/Select.stories.d.ts

@@ -39,19 +39,28 @@ declare namespace _default {
             }
             export { control_4 as control };
         }
+        namespace maxItems {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+                export let min: number;
+            }
+            export { control_5 as control };
+        }
         namespace onChange {
             namespace table {
                 let disable: boolean;
             }
         }
         namespace width {
-            export namespace control_5 {
-                let type_5: string;
-                export { type_5 as type };
-                export let min: number;
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+                let min_1: number;
+                export { min_1 as min };
                 export let max: number;
             }
-            export { control_5 as control };
+            export { control_6 as control };
         }
     }
     export namespace parameters {

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

@@ -45,6 +45,12 @@ export default {
                 type: "text",
             },
         },
+        maxItems: {
+            control: {
+                type: "number",
+                min: 1,
+            },
+        },
         onChange: {
             table: {
                 disable: true,
@@ -134,6 +140,7 @@ Multiple.args = {
     placeholder: "Select...",
     multiple: true,
     isRequired: false,
+    maxItems: 3,
 };
 export var Required = Template.bind({});
 Required.args = {

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

@@ -4,6 +4,9 @@
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   line-height: normal;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .tiny-info.bold14 {
@@ -57,3 +60,8 @@
 .tiny-info.color-actions-valid {
   color: var(--actions-valid);
 }
+
+.tiny-info-icon {
+  font-size: inherit;
+  line-height: 1;
+}

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

@@ -8,6 +8,7 @@ export interface TinyInfoProps {
     className?: string;
     align?: "left" | "center" | "right";
     uppercase?: boolean;
+    startIcon?: string;
 }
 declare const TinyInfo: React.FC<TinyInfoProps>;
 export default TinyInfo;

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

@@ -6,10 +6,13 @@ var toUpperCaseWithAccents = function (str) {
     });
 };
 var TinyInfo = function (_a) {
-    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text, href = _a.href, className = _a.className, _c = _a.uppercase, uppercase = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? "center" : _d;
+    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "noir" : _b, text = _a.text, href = _a.href, customClassName = _a.className, _c = _a.uppercase, uppercase = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? "center" : _d, startIcon = _a.startIcon;
     var processedText = uppercase ? toUpperCaseWithAccents(text) : text;
-    var content = (React.createElement("span", { className: "tiny-info ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(className || ""), dangerouslySetInnerHTML: { __html: processedText }, style: { textAlign: align } }));
-    return href ? (React.createElement("a", { href: href, className: "tiny-info-link ".concat(className || "") }, content)) : (content);
+    var content = (React.createElement(React.Fragment, null,
+        startIcon && React.createElement("i", { className: "".concat(startIcon, " tiny-info-icon") }),
+        processedText));
+    var finalClassName = "tiny-info ".concat(variant, " ").concat(color ? "color-".concat(color) : "", " ").concat(customClassName || "", " ").concat(align);
+    return href ? (React.createElement("a", { href: href, className: "tiny-info-link ".concat(finalClassName) }, content)) : (React.createElement("p", { className: finalClassName }, content));
 };
 export default TinyInfo;
 TinyInfo.displayName = "TinyInfo";

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

@@ -30,6 +30,10 @@ declare namespace _default {
             let control_4: string;
             export { control_4 as control };
         }
+        namespace startIcon {
+            let control_5: string;
+            export { control_5 as control };
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -49,4 +53,6 @@ export const SemiBold12: any;
 export const Medium12: any;
 export const WithLink: any;
 export const Uppercase: any;
+export const WithStartIcon: any;
+export const WithStartIconAndLink: any;
 import TinyInfo from "./TinyInfo";

package/dist/components/atoms/typography/TinyInfo.stories.js

@@ -38,6 +38,9 @@ export default {
         uppercase: {
             control: "boolean",
         },
+        startIcon: {
+            control: "text",
+        },
     },
     parameters: {
         backgrounds: {
@@ -95,3 +98,20 @@ Uppercase.args = {
     text: "Texte avec des accents: éàèùç",
     uppercase: true,
 };
+export var WithStartIcon = Template.bind({});
+WithStartIcon.args = {
+    variant: "medium14",
+    color: "noir",
+    text: "Texte avec une icône",
+    startIcon: "allaw-icon-info",
+    uppercase: false,
+};
+export var WithStartIconAndLink = Template.bind({});
+WithStartIconAndLink.args = {
+    variant: "medium14",
+    color: "bleu-allaw",
+    text: "Lien avec une icône",
+    startIcon: "allaw-icon-external-link",
+    href: "https://example.com",
+    uppercase: false,
+};

package/package.json

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