allaw-ui 4.5.6 → 4.5.8

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

@@ -17,6 +17,7 @@ export interface SelectProps<T extends string | string[]> {
     disabledItems?: string[];
     onChange?: (selected: T) => void;
     onError?: (error: string) => void;
+    maxLines?: false | number;
 }
 export interface SelectRef {
     validate: () => boolean;

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

@@ -14,21 +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, maxItems = _a.maxItems, _h = _a.requireAttention, requireAttention = _h === void 0 ? false : _h, _j = _a.disabledItems, disabledItems = _j === void 0 ? [] : _j, onChange = _a.onChange, onError = _a.onError;
-    var _k = useState(false), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _l[0], setSelected = _l[1];
-    var _m = useState(""), error = _m[0], setError = _m[1];
+    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, _h = _a.requireAttention, requireAttention = _h === void 0 ? false : _h, _j = _a.disabledItems, disabledItems = _j === void 0 ? [] : _j, onChange = _a.onChange, onError = _a.onError, _k = _a.maxLines, maxLines = _k === void 0 ? false : _k;
+    var _l = useState(false), isOpen = _l[0], setIsOpen = _l[1];
+    var _m = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _m[0], setSelected = _m[1];
+    var _o = useState(""), error = _o[0], setError = _o[1];
     var selectRef = useRef(null);
     var listRef = useRef(null);
     var tagContainerRef = useRef(null);
-    var _o = useState([]), visibleTags = _o[0], setVisibleTags = _o[1];
-    var _p = useState(0), hiddenCount = _p[0], setHiddenCount = _p[1];
-    var _q = useState({
+    var _p = useState([]), visibleTags = _p[0], setVisibleTags = _p[1];
+    var _q = useState(0), hiddenCount = _q[0], setHiddenCount = _q[1];
+    var _r = useState({
         top: 0,
         left: 0,
         width: 0,
-    }), listPosition = _q[0], setListPosition = _q[1];
-    var _r = useState("bottom"), placement = _r[0], setPlacement = _r[1];
+    }), listPosition = _r[0], setListPosition = _r[1];
+    var _s = useState("bottom"), placement = _s[0], setPlacement = _s[1];
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
     }, [selectedItem, multiple]);
@@ -215,7 +215,9 @@ function Select(_a, ref) {
         var isHighlighted = !multiple && item.value === selectedItem;
         return (React.createElement("div", { key: item.value, "data-value": item.value, className: "".concat(styles.selectItem, " ").concat(isSelected ? styles.selected : "", " ").concat(isHighlighted ? styles.highlighted : "", " ").concat(!multiple ? styles.singleSelect : "", " ").concat(isDisabled ? styles.disabledItem : ""), onClick: function () { return !isDisabled && handleSelect(item); }, "aria-disabled": isDisabled },
             multiple && React.createElement("span", { className: styles.selectItemIcon }),
-            React.createElement("span", { className: styles.selectItemText }, item.label)));
+            React.createElement("span", { className: "".concat(styles.selectItemText, " ").concat(maxLines !== false ? styles.selectItemTextClamp : ""), style: maxLines !== false
+                    ? { WebkitLineClamp: maxLines }
+                    : undefined }, item.label)));
     }))); };
     var renderTags = function (selectedValues) {
         if (!selectedValues.length)
@@ -232,7 +234,9 @@ function Select(_a, ref) {
     }); });
     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, " ").concat(multiple ? styles.selectMultiple : styles.selectSingle, " ").concat(requireAttention ? styles.selectRequireAttention : ""), onClick: toggleOpen, style: { width: "100%" } },
-            React.createElement("span", { className: styles.selectText }, Array.isArray(selected) && selected.length > 0
+            React.createElement("span", { className: "".concat(styles.selectText, " ").concat(maxLines !== false ? styles.selectTextClamp : ""), style: maxLines !== false
+                    ? { WebkitLineClamp: maxLines }
+                    : undefined }, Array.isArray(selected) && selected.length > 0
                 ? renderTags(selected)
                 : !Array.isArray(selected) && selected
                     ? (_b = items.find(function (item) { return item.value === selected; })) === null || _b === void 0 ? void 0 : _b.label

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

@@ -46,6 +46,16 @@
   padding: 2px 0;
 }
 
+/* Enable multi-line clamping when requested */
+.selectTextClamp {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+
 .selectIcon {
   width: 24px;
   height: 24px;
@@ -134,6 +144,15 @@
   width: 100%;
 }
 
+.selectItemTextClamp {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+
 .errorMessage {
   padding-top: 4px;
   padding-left: 14px;

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

@@ -76,6 +76,18 @@ declare namespace _default {
             }
             export { control_8 as control };
         }
+        namespace maxLines {
+            export namespace control_9 {
+                let type_9: string;
+                export { type_9 as type };
+                let min_2: number;
+                export { min_2 as min };
+                let max_1: number;
+                export { max_1 as max };
+            }
+            export { control_9 as control };
+            export let description: string;
+        }
     }
     export namespace parameters {
         namespace backgrounds {
@@ -107,6 +119,7 @@ export const Multiple: any;
 export const Required: any;
 export const CustomWidth: any;
 export const RequireAttention: any;
+export const TwoLines: any;
 export const WithDisabledItems: any;
 export const MultipleWithDisabledItems: any;
 import Select from "./Select";

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

@@ -73,6 +73,14 @@ export default {
                 max: 100,
             },
         },
+        maxLines: {
+            control: {
+                type: "number",
+                min: 1,
+                max: 5,
+            },
+            description: "Nombre de lignes max affichées (laisser vide pour 1 ligne)",
+        },
     },
     parameters: {
         backgrounds: {
@@ -121,6 +129,7 @@ Default.args = {
     isRequired: false,
     requireAttention: false,
     width: 100,
+    maxLines: undefined,
 };
 export var Pressed = Template.bind({});
 Pressed.args = {
@@ -190,6 +199,26 @@ RequireAttention.args = {
     requireAttention: true,
     width: 100,
 };
+export var TwoLines = Template.bind({});
+TwoLines.args = {
+    items: [
+        {
+            label: "40 Impasse de l’enclume, Saint-Julien-De-Concelles 44450 avec une adresse très longue",
+            value: "addr-1",
+        },
+        {
+            label: "12 Rue de la Paix, Paris 75002",
+            value: "addr-2",
+        },
+    ],
+    selectedItem: "addr-1",
+    placeholder: "Choisir une localisation",
+    multiple: false,
+    isRequired: false,
+    requireAttention: false,
+    width: 100,
+    maxLines: 2,
+};
 export var WithDisabledItems = Template.bind({});
 WithDisabledItems.args = {
     items: [

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

@@ -61,6 +61,7 @@
 
 .content {
   flex-grow: 1;
+  width: 100%;
 }
 
 .label {

package/package.json

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