allaw-ui 0.1.55 → 0.1.58

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

@@ -2,9 +2,10 @@ import React from "react";
 import "./TertiaryButton.css";
 import "../../../styles/global.css";
 export interface TertiaryButtonProps {
-    startIcon?: React.ReactNode;
+    startIcon?: string;
     label: string;
     variant?: boolean;
+    onClick?: () => void;
 }
 declare const TertiaryButton: React.FC<TertiaryButtonProps>;
 export default TertiaryButton;

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

@@ -2,8 +2,8 @@ import React from "react";
 import "./TertiaryButton.css";
 import "../../../styles/global.css";
 var TertiaryButton = function (_a) {
-    var startIcon = _a.startIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b;
-    return (React.createElement("button", { className: "tertiary-button ".concat(variant ? "tertiary-button-variant" : "tertiary-button-default") },
+    var startIcon = _a.startIcon, label = _a.label, _b = _a.variant, variant = _b === void 0 ? false : _b, onClick = _a.onClick;
+    return (React.createElement("button", { className: "tertiary-button ".concat(variant ? "tertiary-button-variant" : "tertiary-button-default"), onClick: onClick },
         startIcon && React.createElement("span", { className: "tertiary-button-icon ".concat(startIcon) }),
         React.createElement("span", { className: "tertiary-button-label" }, label)));
 };

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

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  field-sizing: content;
+  /* field-sizing: content; */
 }
 
 .text-area-title-container {
@@ -29,6 +29,8 @@
   padding-left: 4px;
   resize: vertical;
   min-height: 100px;
+  max-height: 400px; /* Hauteur maximale par défaut */
+  overflow-y: auto; /* Ajoute une barre de défilement verticale si nécessaire */
 }
 
 /* Style default */
@@ -39,7 +41,7 @@
   justify-content: center;
   align-items: flex-start;
   gap: 11px;
-  field-sizing: content;
+  /* field-sizing: content; */
 }
 
 .text-area-default .text-area-container {
@@ -80,6 +82,8 @@
   font-size: 16px;
   line-height: 24px;
   padding: 8px;
+  max-height: 400px; /* Hauteur maximale par défaut */
+  overflow-y: auto; /* Ajoute une barre de défilement verticale si nécessaire */
 }
 
 .text-area-variation {
@@ -116,6 +120,8 @@
   border: none;
   outline: none;
   color: var(--noir);
+  max-height: 400px; /* Hauteur maximale par défaut */
+  overflow-y: auto; /* Ajoute une barre de défilement verticale si nécessaire */
 }
 
 .text-area-variation .text-area-icon-button {
@@ -144,54 +150,6 @@
   padding-left: 2px;
 }
 
-/* Style password */
-.text-area-password {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 11px;
-}
-
-.text-area-password .text-area-container {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 8px;
-  border: 1px solid rgba(114, 142, 167, 1);
-  background: var(--Primary-Blanc, #fff);
-  padding: 10px;
-}
-
-.text-area-password .text-area-input {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.text-area-password .text-area-input textarea {
-  width: 100%;
-  border: none;
-  outline: none;
-  color: var(--noir);
-}
-
-.text-area-password .text-area-button {
-  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
-  font-family: "Open Sans";
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
 .text-area-error {
   margin-top: 4px;
 }

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

@@ -1,19 +1,18 @@
 import React from "react";
 import "./TextArea.css";
 import "../../../styles/global.css";
-import "../../../styles/icons.css";
 import { commonRegex } from "../../../utils/regex";
 export interface TextAreaProps {
     title: string;
-    style?: "default" | "variation" | "password";
+    style?: "default" | "variation";
     placeholder: string;
-    endIcon?: string;
     isRequired?: boolean;
     validate?: RegExp | keyof typeof commonRegex;
     onError?: (error: string) => void;
     onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     value?: string;
     error?: string;
+    maxHeight?: number;
 }
 export interface TextAreaRef {
     validate: () => boolean;

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

@@ -2,13 +2,11 @@
 import React, { useState, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, } from "react";
 import "./TextArea.css";
 import "../../../styles/global.css";
-import "../../../styles/icons.css";
 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, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error;
-    var _d = useState(false), isPasswordVisible = _d[0], setIsPasswordVisible = _d[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;
     var _e = useState(propValue || ""), value = _e[0], setValue = _e[1];
     var _f = useState(propError || ""), error = _f[0], setError = _f[1];
     var _g = useState(false), isTouched = _g[0], setIsTouched = _g[1];
@@ -52,16 +50,6 @@ var TextArea = forwardRef(function (_a, ref) {
         setIsTouched(true);
         validateTextArea();
     };
-    var renderEndIcon = function () {
-        if (style === "variation" && endIcon) {
-            return (React.createElement("button", { className: "text-area-icon-button" },
-                React.createElement("i", { className: endIcon })));
-        }
-        if (style === "password") {
-            return (React.createElement("button", { className: "text-area-button", onClick: function () { return setIsPasswordVisible(!isPasswordVisible); } }, isPasswordVisible ? "CACHER" : "AFFICHER"));
-        }
-        return null;
-    };
     return (React.createElement("div", { className: "TextArea text-area-".concat(style) },
         React.createElement("div", { className: "text-area-title-container" },
             React.createElement(Paragraph, { variant: "semiBold", color: "noir", text: title }),
@@ -69,9 +57,8 @@ var TextArea = forwardRef(function (_a, ref) {
                 "\u00A0",
                 "*"))),
         React.createElement("div", { className: "text-area-container" },
-            React.createElement("div", { className: "text-area-input ".concat(style === "password" ? "text-area-password-input" : "") },
-                React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur })),
-            renderEndIcon(),
+            React.createElement("div", { className: "text-area-input" },
+                React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur, style: { maxHeight: "".concat(maxHeight, "px") } })),
             error && isTouched && (React.createElement("div", { className: "error-message" },
                 React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
 });

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

@@ -12,7 +12,8 @@ export interface ComboBoxProps {
     isRequired?: boolean;
     showError?: boolean;
     width?: number;
-    onChange?: (selected: string) => void;
+    onSelect?: (selected: string) => void;
+    onChange?: (value: string) => void;
     onError?: (error: string) => void;
     openOnMount?: boolean;
     title?: string;

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

@@ -5,7 +5,7 @@ import TinyInfo from "../typography/TinyInfo";
 import Paragraph from "../typography/Paragraph";
 import { createPortal } from "react-dom";
 function ComboBox(_a, ref) {
-    var items = _a.items, selectedItem = _a.selectedItem, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner..." : _b, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, _d = _a.showError, showError = _d === void 0 ? false : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, onChange = _a.onChange, onError = _a.onError, _f = _a.openOnMount, openOnMount = _f === void 0 ? true : _f, title = _a.title;
+    var items = _a.items, selectedItem = _a.selectedItem, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner..." : _b, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, _d = _a.showError, showError = _d === void 0 ? false : _d, _e = _a.width, width = _e === void 0 ? 100 : _e, onSelect = _a.onSelect, onChange = _a.onChange, onError = _a.onError, _f = _a.openOnMount, openOnMount = _f === void 0 ? true : _f, title = _a.title;
     var _g = useState(openOnMount), isOpen = _g[0], setIsOpen = _g[1];
     var _h = useState(""), inputValue = _h[0], setInputValue = _h[1];
     var _j = useState(items), filteredItems = _j[0], setFilteredItems = _j[1];
@@ -66,6 +66,7 @@ function ComboBox(_a, ref) {
         setFilteredItems(filtered);
         setIsInputValid(filtered.length > 0 || value === "");
         setIsOpen(true);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
     };
     var handleInputFocus = function () {
         setIsOpen(true);
@@ -76,7 +77,7 @@ function ComboBox(_a, ref) {
         setSelectedIndex(index);
         setFilteredItems(items);
         setIsOpen(false);
-        onChange === null || onChange === void 0 ? void 0 : onChange(item.value);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
         validateSelect(item.value);
     };
     var validateSelect = function (value) {

package/package.json

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