allaw-ui 3.2.2 → 3.2.4

package/dist/components/atoms/buttons/ActionButton.js

@@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/ActionButton.stories.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/PrimaryButton.js

@@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/PrimaryButton.stories.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/SecondaryButton.js

@@ -20,8 +20,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/SecondaryButton.stories.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/atoms/buttons/TabNavigation.css

@@ -153,6 +153,8 @@
   font-weight: 500;
   line-height: 1;
   text-align: center;
+  transition: 0.2s ease-in-out;
+  min-width: 12px; /* Assure un minimum de largeur pour les labels très courts */
 }
 
 .tab-notification-dot {
@@ -182,3 +184,19 @@
 .tab-navigation.tab-navigation--round.small .tab-notification-dot {
   top: 10px;
 }
+
+/* Styles pour assurer une transition fluide entre les différentes tailles de labels */
+.tab-item {
+  transition: width 0.2s ease-in-out;
+}
+
+/* Style pour assurer un meilleur affichage des labels très courts */
+.tab-navigation.small .tab-item {
+  min-width: 32px; /* Largeur minimale pour les tabs très courts sur mobile */
+}
+
+/* Assurer que le label reste centré pendant la transition */
+.tab-item {
+  justify-content: center;
+  white-space: nowrap;
+}

package/dist/components/atoms/buttons/TabNavigation.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import "./TabNavigation.css";
 import "../../../styles/global.css";
+export type ResponsiveLabels = Record<number, string>;
 export interface TabNavigationProps {
     tabs: {
         label: string;
         isActive: boolean;
         hasNotification: boolean;
+        responsiveLabels?: ResponsiveLabels;
     }[];
     onTabClick: (index: number) => void;
     size?: "small" | "normal";

package/dist/components/atoms/buttons/TabNavigation.js

@@ -5,6 +5,7 @@ var TabNavigation = function (_a) {
     var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b, _c = _a.variant, variant = _c === void 0 ? "normal" : _c;
     var navRef = useRef(null);
     var _d = useState(null), activeTabElement = _d[0], setActiveTabElement = _d[1];
+    var _e = useState(tabs.map(function (tab) { return tab.label; })), currentLabels = _e[0], setCurrentLabels = _e[1];
     // Scroll to active tab when it changes
     useEffect(function () {
         if (size === "small" && navRef.current && activeTabElement) {
@@ -21,8 +22,47 @@ var TabNavigation = function (_a) {
             setActiveTabElement(element);
         }
     };
+    // Effect for responsive labels
+    useEffect(function () {
+        // Skip if no tabs have responsive labels
+        if (!tabs.some(function (tab) { return tab.responsiveLabels; })) {
+            return;
+        }
+        var handleResize = function () {
+            var width = window.innerWidth;
+            var newLabels = tabs.map(function (tab) {
+                if (!tab.responsiveLabels) {
+                    return tab.label;
+                }
+                var breakpoints = Object.keys(tab.responsiveLabels)
+                    .map(Number)
+                    .sort(function (a, b) { return a - b; });
+                // Find the appropriate label for the current width
+                var selectedLabel = tab.label; // Default to the prop label
+                for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
+                    var breakpoint = breakpoints_1[_i];
+                    if (width >= breakpoint) {
+                        selectedLabel = tab.responsiveLabels[breakpoint];
+                    }
+                    else {
+                        break;
+                    }
+                }
+                return selectedLabel;
+            });
+            setCurrentLabels(newLabels);
+        };
+        // Initial check
+        handleResize();
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Cleanup
+        return function () {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, [tabs]);
     return (React.createElement("div", { ref: navRef, className: "tab-navigation ".concat(size, " ").concat(variant === "round" ? "tab-navigation--round" : "") }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, ref: function (el) { return setTabRef(el, tab.isActive); }, className: "tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
-        React.createElement("span", { className: "tab-label" }, tab.label),
+        React.createElement("span", { className: "tab-label" }, currentLabels[index]),
         tab.hasNotification && React.createElement("span", { className: "tab-notification-dot" }))); })));
 };
 export default TabNavigation;

package/dist/components/atoms/buttons/TabNavigation.stories.d.ts

@@ -76,4 +76,6 @@ export const Small: any;
 export const Round: any;
 export const SmallRound: any;
 export const ManyTabsSmall: any;
+export const ResponsiveLabels: any;
+export const ResponsiveLabelsRound: any;
 import TabNavigation from "./TabNavigation";

package/dist/components/atoms/buttons/TabNavigation.stories.js

@@ -122,3 +122,57 @@ ManyTabsSmall.parameters = {
         defaultViewport: "mobile",
     },
 };
+// Exemple avec des labels responsifs
+export var ResponsiveLabels = Template.bind({});
+ResponsiveLabels.args = {
+    tabs: [
+        {
+            label: "Tous les dossiers",
+            isActive: true,
+            hasNotification: false,
+            responsiveLabels: {
+                768: "Tous",
+                375: "Ts",
+            },
+        },
+        {
+            label: "Notes importantes",
+            isActive: false,
+            hasNotification: false,
+            responsiveLabels: {
+                768: "Notes",
+                375: "Nt",
+            },
+        },
+        {
+            label: "Documents clients",
+            isActive: false,
+            hasNotification: true,
+            responsiveLabels: {
+                768: "Docs",
+                375: "Dc",
+            },
+        },
+        {
+            label: "Factures impayées",
+            isActive: false,
+            hasNotification: false,
+            responsiveLabels: {
+                768: "Factures",
+                375: "Fct",
+            },
+        },
+    ],
+    onTabClick: function (index) { return console.log("Tab ".concat(index, " cliqu\u00E9")); },
+    size: "normal",
+    variant: "normal",
+};
+ResponsiveLabels.parameters = {
+    docs: {
+        description: {
+            story: "Ce composant utilise des labels responsifs qui changent en fonction de la taille de l'écran. Essayez de redimensionner la fenêtre pour voir les changements.",
+        },
+    },
+};
+export var ResponsiveLabelsRound = Template.bind({});
+ResponsiveLabelsRound.args = __assign(__assign({}, ResponsiveLabels.args), { variant: "round" });

package/dist/components/atoms/inputs/TextArea.css

@@ -34,6 +34,11 @@
   transition: min-height 0.3s ease-in-out; /* Transition fluide pour les changements de hauteur */
 }
 
+/* Classe pour désactiver la transition */
+.no-transition {
+  transition: none !important;
+}
+
 /* Style default */
 .text-area-default {
   display: flex;
@@ -89,6 +94,10 @@
   transition: min-height 0.3s ease-in-out; /* Transition fluide pour les changements de hauteur */
 }
 
+.text-area-default .text-area-input textarea.no-transition {
+  transition: none !important;
+}
+
 .text-area-variation {
   display: flex;
   width: 100%;
@@ -129,6 +138,10 @@
   transition: min-height 0.3s ease-in-out; /* Transition fluide pour les changements de hauteur */
 }
 
+.text-area-variation .text-area-input textarea.no-transition {
+  transition: none !important;
+}
+
 .text-area-variation .text-area-icon-button {
   display: flex;
   width: 40px;

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

@@ -6,10 +6,10 @@ import { commonRegex } from "../../../utils/regex";
 import TinyInfo from "../typography/TinyInfo";
 import Paragraph from "../typography/Paragraph";
 var TextArea = forwardRef(function (_a, ref) {
-    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, _e = _a.minHeight, minHeight = _e === void 0 ? 100 : _e, _f = _a.variant, variant = _f === void 0 ? "medium" : _f, _g = _a.color, color = _g === void 0 ? "noir" : _g, dataCy = _a.dataCy;
-    var _h = useState(propValue || ""), value = _h[0], setValue = _h[1];
-    var _j = useState(propError || ""), error = _j[0], setError = _j[1];
-    var _k = useState(false), isTouched = _k[0], setIsTouched = _k[1];
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error, _d = _a.maxHeight, maxHeight = _d === void 0 ? 400 : _d, minHeight = _a.minHeight, _e = _a.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataCy = _a.dataCy;
+    var _g = useState(propValue || ""), value = _g[0], setValue = _g[1];
+    var _h = useState(propError || ""), error = _h[0], setError = _h[1];
+    var _j = useState(false), isTouched = _j[0], setIsTouched = _j[1];
     var textareaRef = useRef(null);
     useEffect(function () {
         setValue(propValue || "");
@@ -50,6 +50,15 @@ var TextArea = forwardRef(function (_a, ref) {
         setIsTouched(true);
         validateTextArea();
     };
+    // Préparer les styles du textarea
+    var textareaStyle = {
+        maxHeight: "".concat(maxHeight, "px"),
+    };
+    // Ajouter minHeight si spécifiée, sans transition
+    if (minHeight !== undefined) {
+        textareaStyle.minHeight = "".concat(minHeight, "px");
+        textareaStyle.transition = "none";
+    }
     return (React.createElement("div", { className: "TextArea text-area-".concat(style) },
         React.createElement("div", { className: "text-area-title-container" },
             React.createElement(Paragraph, { variant: variant, color: color, text: title }),
@@ -58,10 +67,9 @@ var TextArea = forwardRef(function (_a, ref) {
                 "*"))),
         React.createElement("div", { className: "text-area-container" },
             React.createElement("div", { className: "text-area-input", "data-cy": dataCy || "text-area" },
-                React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: {
-                        maxHeight: "".concat(maxHeight, "px"),
-                        minHeight: "".concat(minHeight, "px"),
-                    } })),
+                React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: minHeight !== undefined
+                        ? "text-area-placeholder no-transition"
+                        : "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: textareaStyle })),
             error && isTouched && (React.createElement("div", { className: "error-message" },
                 React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
 });

package/dist/components/molecules/fileUploader/FileUploader.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/molecules/fileUploader/FileUploader.stories.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/molecules/stepper/Stepper.js

@@ -9,8 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/components/molecules/stepper/Stepper.stories.js

@@ -19,8 +19,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/dist/stories/Page.stories.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");

package/package.json

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