allaw-ui 2.4.8 → 2.4.9

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/package.json

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