allaw-ui 2.4.8 → 2.5.0

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,89 @@ 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);
+            requestAnimationFrame(function () {
+                var container = tagContainerRef.current;
+                if (!container)
+                    return;
+                var containerWidth = container.offsetWidth - 40; // Espace pour l'icône et les marges
+                // 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; // On sort dès qu'on dépasse la largeur disponible
+                    }
+                }
+                // 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);
+                }
+            });
+        }
+        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 +212,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/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.8",
+  "version": "2.5.0",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",