allaw-ui 4.2.8 → 4.3.0

package/dist/components/molecules/phoneNumberField/PhoneInput.d.ts

@@ -8,6 +8,7 @@ export interface PhoneInputProps {
     onChange?: (value: string) => void;
     onError?: (msg: string) => void;
     disableAutofill?: boolean;
+    onBlur?: () => void;
 }
 declare const PhoneInput: React.FC<PhoneInputProps>;
 export default PhoneInput;

package/dist/components/molecules/phoneNumberField/PhoneInput.js

@@ -12,22 +12,40 @@ var __assign = (this && this.__assign) || function () {
 import React, { useState, useRef, useEffect } from "react";
 import styles from "./PhoneInput.module.css";
 var formatPhone = function (value) {
-    // Garde uniquement les chiffres, espace tous les 2 chiffres
+    // Garde uniquement les chiffres, espace tous les 2 chiffres (début)
     var digits = value.replace(/\D/g, "");
     return digits.replace(/(\d{2})(?=\d)/g, "$1 ").trim();
 };
+var formatPhoneEnd = function (value) {
+    // Espace tous les 2 chiffres à partir de la fin, gère aussi les cas impairs
+    var digits = value.replace(/\D/g, "");
+    if (digits.length <= 2)
+        return digits;
+    var res = "";
+    var i = digits.length;
+    while (i > 2) {
+        res = " " + digits.slice(i - 2, i) + res;
+        i -= 2;
+    }
+    res = digits.slice(0, i) + res;
+    return res.trim();
+};
 var PhoneInput = function (_a) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, placeholder = _a.placeholder, isRequired = _a.isRequired, disabled = _a.disabled, validationPattern = _a.validationPattern, onChange = _a.onChange, onError = _a.onError, _c = _a.disableAutofill, disableAutofill = _c === void 0 ? true : _c;
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, placeholder = _a.placeholder, isRequired = _a.isRequired, disabled = _a.disabled, validationPattern = _a.validationPattern, onChange = _a.onChange, onError = _a.onError, _c = _a.disableAutofill, disableAutofill = _c === void 0 ? true : _c, onBlur = _a.onBlur;
     var _d = useState(formatPhone(defaultValue)), value = _d[0], setValue = _d[1];
     var _e = useState(""), error = _e[0], setError = _e[1];
+    var _f = useState(false), isTouched = _f[0], setIsTouched = _f[1];
+    var _g = useState(false), isValid = _g[0], setIsValid = _g[1];
     var inputRef = useRef(null);
     useEffect(function () {
         setValue(formatPhone(defaultValue));
     }, [defaultValue]);
     var validate = function (val) {
+        var valid = true;
         if (isRequired && !val.replace(/\s/g, "")) {
             setError("Ce champ est requis");
             onError === null || onError === void 0 ? void 0 : onError("Ce champ est requis");
+            setIsValid(false);
             return false;
         }
         if (validationPattern) {
@@ -37,12 +55,21 @@ var PhoneInput = function (_a) {
             if (!regex.test(val.replace(/\s/g, ""))) {
                 setError("Veuillez vérifier votre numéro de téléphone");
                 onError === null || onError === void 0 ? void 0 : onError("Veuillez vérifier votre numéro de téléphone");
-                return false;
+                setIsValid(false);
+                valid = false;
             }
+            else {
+                setIsValid(true);
+            }
+        }
+        else {
+            setIsValid(true);
         }
-        setError("");
-        onError === null || onError === void 0 ? void 0 : onError("");
-        return true;
+        if (valid) {
+            setError("");
+            onError === null || onError === void 0 ? void 0 : onError("");
+        }
+        return valid;
     };
     var handleChange = function (e) {
         var raw = e.target.value;
@@ -53,15 +80,29 @@ var PhoneInput = function (_a) {
             validate(formatted);
     };
     var handleBlur = function () {
-        validate(value);
+        setIsTouched(true);
+        var raw = value.replace(/\s/g, "");
+        // Supprime le 0 initial si présent
+        if (raw.startsWith("0")) {
+            raw = raw.slice(1);
+            setValue(formatPhoneEnd(raw));
+            onChange === null || onChange === void 0 ? void 0 : onChange(raw);
+        }
+        else {
+            setValue(formatPhoneEnd(raw));
+        }
+        validate(raw);
+        if (typeof onBlur === "function")
+            onBlur();
     };
     return (React.createElement("div", { className: styles.wrapper },
-        React.createElement("input", __assign({ ref: inputRef, className: styles.input, type: "tel", inputMode: "numeric", pattern: "[0-9 ]*", placeholder: placeholder, value: value, onChange: handleChange, onBlur: handleBlur, "aria-required": isRequired, "aria-invalid": !!error, disabled: disabled }, (disableAutofill && {
-            autoComplete: "off",
-            "data-form-type": "other",
-            "data-lpignore": "true",
-            "data-1p-ignore": true,
-        }))),
-        error && React.createElement("div", { className: styles.error }, error)));
+        React.createElement("div", { className: styles.inputContainer },
+            React.createElement("input", __assign({ ref: inputRef, className: styles.input + (error && isTouched ? " " + styles.errorBorder : ""), type: "tel", inputMode: "numeric", pattern: "[0-9 ]*", placeholder: placeholder, value: value, onChange: handleChange, onBlur: handleBlur, "aria-required": isRequired, "aria-invalid": !!error, disabled: disabled }, (disableAutofill && {
+                autoComplete: "off",
+                "data-form-type": "other",
+                "data-lpignore": "true",
+                "data-1p-ignore": true,
+            }))),
+            isValid && isTouched && !error && (React.createElement("i", { className: styles.validIcon + " allaw-icon-check-circle" })))));
 };
 export default PhoneInput;

package/dist/components/molecules/phoneNumberField/PhoneInput.module.css

@@ -3,6 +3,12 @@
   flex-direction: column;
   width: 100%;
 }
+.inputContainer {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
 .input {
   width: 100%;
   height: 44px;
@@ -37,6 +43,19 @@
   line-height: normal;
   opacity: 0.8;
 }
+.errorBorder {
+  border-color: var(--actions-error, #e15151) !important;
+}
+.validIcon {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #29a36a;
+  font-size: 22px;
+  pointer-events: none;
+  z-index: 2;
+}
 .error {
   color: var(--actions-error, #e15151);
   font-size: 13px;

package/dist/components/molecules/phoneNumberField/PhoneNumberField.d.ts

@@ -1,7 +1,14 @@
 import React from "react";
-import { CountrySelectProps } from "./CountrySelect";
+export interface PhoneNumberFieldCountryItem {
+    value: string;
+    label: string;
+    flagEmoji?: string;
+    flagUrl?: string;
+    code: string;
+    regex: string;
+}
 export interface PhoneNumberFieldProps {
-    countryItems: CountrySelectProps["items"];
+    countryItems: PhoneNumberFieldCountryItem[];
     defaultCountry?: string;
     defaultNumber?: string;
     numberPlaceholder?: string;
@@ -12,6 +19,7 @@ export interface PhoneNumberFieldProps {
     selectListWidth?: string | number;
     onChange?: (country: string, number: string) => void;
     onError?: (msg: string) => void;
+    title?: string;
 }
 declare const PhoneNumberField: React.FC<PhoneNumberFieldProps>;
 export default PhoneNumberField;

package/dist/components/molecules/phoneNumberField/PhoneNumberField.js

@@ -2,11 +2,16 @@ import React, { useState } from "react";
 import styles from "./PhoneNumberField.module.css";
 import CountrySelect from "./CountrySelect";
 import PhoneInput from "./PhoneInput";
+import Paragraph from "../../atoms/typography/Paragraph";
+import TinyInfo from "../../atoms/typography/TinyInfo";
 var PhoneNumberField = function (_a) {
-    var countryItems = _a.countryItems, defaultCountry = _a.defaultCountry, defaultNumber = _a.defaultNumber, numberPlaceholder = _a.numberPlaceholder, validationPattern = _a.validationPattern, isRequired = _a.isRequired, disabled = _a.disabled, selectButtonWidth = _a.selectButtonWidth, selectListWidth = _a.selectListWidth, onChange = _a.onChange, onError = _a.onError;
+    var countryItems = _a.countryItems, defaultCountry = _a.defaultCountry, defaultNumber = _a.defaultNumber, numberPlaceholder = _a.numberPlaceholder, validationPattern = _a.validationPattern, isRequired = _a.isRequired, disabled = _a.disabled, selectButtonWidth = _a.selectButtonWidth, selectListWidth = _a.selectListWidth, onChange = _a.onChange, onError = _a.onError, title = _a.title;
     var _b = useState(defaultCountry || ""), country = _b[0], setCountry = _b[1];
     var _c = useState(defaultNumber || ""), number = _c[0], setNumber = _c[1];
     var _d = useState(""), error = _d[0], setError = _d[1];
+    var _e = useState(false), isTouched = _e[0], setIsTouched = _e[1];
+    var selectedCountryObj = countryItems.find(function (c) { return c.value === country; });
+    var effectivePattern = (selectedCountryObj === null || selectedCountryObj === void 0 ? void 0 : selectedCountryObj.regex) || validationPattern;
     var handleCountry = function (c) {
         setCountry(c);
         if (onChange)
@@ -23,11 +28,20 @@ var PhoneNumberField = function (_a) {
         setError(msg);
         onError === null || onError === void 0 ? void 0 : onError(msg);
     };
+    var handleInputBlur = function () {
+        setIsTouched(true);
+    };
     return (React.createElement("div", { className: styles.container },
-        React.createElement("div", { className: styles.selectWrapper },
-            React.createElement(CountrySelect, { items: countryItems, defaultCountry: defaultCountry, buttonWidth: selectButtonWidth, listWidth: selectListWidth, isRequired: isRequired, disabled: disabled, onSelect: handleCountry, onError: setErrorMsg })),
-        React.createElement("div", { className: styles.inputWrapper },
-            React.createElement(PhoneInput, { defaultValue: defaultNumber, placeholder: numberPlaceholder, validationPattern: validationPattern, isRequired: isRequired, disabled: disabled, onChange: handleNumber, onError: setErrorMsg }),
-            error && React.createElement("div", { className: styles.errorMessage }, error))));
+        title && (React.createElement(Paragraph, { variant: "medium", color: "noir", text: React.createElement(React.Fragment, null,
+                title,
+                " ",
+                isRequired && React.createElement("span", { className: styles.required }, "*")) })),
+        React.createElement("div", { className: styles.phoneNumberField },
+            React.createElement("div", { className: styles.selectWrapper },
+                React.createElement(CountrySelect, { items: countryItems, defaultCountry: defaultCountry, buttonWidth: selectButtonWidth, listWidth: selectListWidth, isRequired: isRequired, disabled: disabled, onSelect: handleCountry, onError: setErrorMsg })),
+            React.createElement("div", { className: styles.inputWrapper },
+                React.createElement(PhoneInput, { defaultValue: defaultNumber, placeholder: numberPlaceholder, validationPattern: effectivePattern ? new RegExp(effectivePattern) : undefined, isRequired: isRequired, disabled: disabled, onChange: handleNumber, onError: setErrorMsg, onBlur: handleInputBlur }),
+                error && isTouched && (React.createElement("div", { className: styles.errorMessage },
+                    React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error })))))));
 };
 export default PhoneNumberField;

package/dist/components/molecules/phoneNumberField/PhoneNumberField.module.css

@@ -1,16 +1,27 @@
 .container {
   display: flex;
-  align-items: center;
-  gap: 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 11px;
   width: 100%;
 }
 .selectWrapper {
   flex: 0 0 auto;
+  min-height: 64px;
 }
+
+.phoneNumberField {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
 .inputWrapper {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
+  min-height: 64px;
 }
 .errorMessage {
   color: var(--actions-error, #e15151);
@@ -18,3 +29,7 @@
   margin-top: 4px;
   margin-left: 2px;
 }
+.required {
+  color: #e15151;
+  margin-left: 2px;
+}

package/dist/index.d.ts

@@ -31,6 +31,8 @@ export type { ComboBoxProps, ComboBoxRef, } from "./components/atoms/selects/Com
 export { default as Select } from "./components/atoms/selects/Select";
 export type { SelectItem, SelectProps, SelectRef, } from "./components/atoms/selects/Select";
 export { default as SelectableListItem } from "./components/atoms/selects/SelectableListItem";
+export { default as PhoneNumberField } from "./components/molecules/phoneNumberField/PhoneNumberField";
+export type { PhoneNumberFieldProps } from "./components/molecules/phoneNumberField/PhoneNumberField";
 export { default as Datepicker } from "./components/atoms/datepickers/Datepicker";
 export type { DatepickerProps } from "./components/atoms/datepickers/Datepicker";
 export { default as DatepickerForm } from "./components/molecules/datepickerForm/DatepickerForm";

package/dist/index.js

@@ -31,6 +31,8 @@ export { default as SelectCard } from "./components/atoms/radios/SelectCard";
 export { default as ComboBox } from "./components/atoms/selects/ComboBox";
 export { default as Select } from "./components/atoms/selects/Select";
 export { default as SelectableListItem } from "./components/atoms/selects/SelectableListItem";
+// Phone Number Field
+export { default as PhoneNumberField } from "./components/molecules/phoneNumberField/PhoneNumberField";
 // Datepickers
 export { default as Datepicker } from "./components/atoms/datepickers/Datepicker";
 // DatepickerForm

package/package.json

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