allaw-ui 3.2.1 → 3.2.3

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

@@ -28,9 +28,15 @@
   width: 100%;
   padding-left: 4px;
   resize: vertical;
-  min-height: 100px;
+  min-height: 100px; /* Hauteur minimale par défaut, peut être remplacée via props */
   max-height: 400px; /* Hauteur maximale par défaut */
   overflow-y: auto; /* Ajoute une barre de défilement verticale si nécessaire */
+  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 */
@@ -82,8 +88,14 @@
   font-size: 16px;
   line-height: 24px;
   padding: 8px;
+  min-height: 100px; /* Hauteur minimale par défaut, peut être remplacée via props */
   max-height: 400px; /* Hauteur maximale par défaut */
   overflow-y: auto; /* Ajoute une barre de défilement verticale si nécessaire */
+  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 {
@@ -120,8 +132,14 @@
   border: none;
   outline: none;
   color: var(--noir);
+  min-height: 100px; /* Hauteur minimale par défaut, peut être remplacée via props */
   max-height: 400px; /* Hauteur maximale par défaut */
   overflow-y: auto; /* Ajoute une barre de défilement verticale si nécessaire */
+  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 {

package/dist/components/atoms/inputs/TextArea.d.ts

@@ -13,6 +13,7 @@ export interface TextAreaProps {
     value?: string;
     error?: string;
     maxHeight?: number;
+    minHeight?: number;
     variant?: "bold" | "semiBold" | "medium";
     color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "grey-venom" | "venom-grey-dark";
     dataCy?: string;

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

@@ -6,7 +6,7 @@ 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.variant, variant = _e === void 0 ? "medium" : _e, _f = _a.color, color = _f === void 0 ? "noir" : _f, dataCy = _a.dataCy;
+    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];
@@ -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,7 +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") } })),
+                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/atoms/inputs/TextArea.stories.d.ts

@@ -33,23 +33,47 @@ declare namespace _default {
             }
             export { control_3 as control };
         }
-        namespace variant {
+        namespace minHeight {
             export namespace control_4 {
                 let type_3: string;
                 export { type_3 as type };
+                let min_1: number;
+                export { min_1 as min };
+                let max_1: number;
+                export { max_1 as max };
+                let step_1: number;
+                export { step_1 as step };
+            }
+            export { control_4 as control };
+            export let description: string;
+            export namespace table {
+                export namespace type_4 {
+                    let summary: string;
+                }
+                export { type_4 as type };
+                export namespace defaultValue {
+                    let summary_1: number;
+                    export { summary_1 as summary };
+                }
+            }
+        }
+        namespace variant {
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
                 let options_1: string[];
                 export { options_1 as options };
             }
-            export { control_4 as control };
+            export { control_5 as control };
         }
         namespace color {
-            export namespace control_5 {
-                let type_4: string;
-                export { type_4 as type };
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
                 let options_2: string[];
                 export { options_2 as options };
             }
-            export { control_5 as control };
+            export { control_6 as control };
         }
     }
     export namespace parameters {
@@ -67,4 +91,5 @@ export default _default;
 export const Default: any;
 export const Variation: any;
 export const WithValidation: any;
+export const LargeMinHeight: any;
 import TextArea from "./TextArea";

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

@@ -43,6 +43,19 @@ export default {
                 step: 50,
             },
         },
+        minHeight: {
+            control: {
+                type: "number",
+                min: 50,
+                max: 500,
+                step: 10,
+            },
+            description: "Hauteur minimale du TextArea en pixels",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: 100 },
+            },
+        },
         variant: {
             control: {
                 type: "select",
@@ -89,6 +102,7 @@ Default.args = {
     style: "default",
     isRequired: false,
     maxHeight: 400,
+    minHeight: 100,
     variant: "medium",
     color: "noir",
 };
@@ -100,6 +114,7 @@ Variation.args = {
     style: "variation",
     isRequired: true,
     maxHeight: 400,
+    minHeight: 100,
 };
 export var WithValidation = Template.bind({});
 WithValidation.args = {
@@ -110,4 +125,17 @@ WithValidation.args = {
     isRequired: true,
     validate: "email",
     maxHeight: 400,
+    minHeight: 100,
+};
+export var LargeMinHeight = Template.bind({});
+LargeMinHeight.args = {
+    name: "largeTextArea",
+    title: "Description détaillée",
+    placeholder: "Entrez une description détaillée",
+    style: "default",
+    isRequired: false,
+    maxHeight: 400,
+    minHeight: 200,
+    variant: "medium",
+    color: "noir",
 };

package/package.json

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