allaw-ui 4.6.2 → 4.6.4

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

@@ -43,7 +43,38 @@ var VerificationCodeInput = function (_a) {
     }, []);
     var handleInputChange = function (index, value) {
         // console.log(`[VerificationCodeInput] Input ${index} changed to:`, value);
-        var _a;
+        var _a, _b, _c;
+        // Si c'est le premier input et que la valeur est plus longue qu'un caractère
+        // (cas de l'auto-complétion SMS), traiter comme un collage
+        if (index === 0 && value.length > 1) {
+            var validChars = value
+                .split("")
+                .filter(function (char) { return validateInput(char, allowedChars); })
+                .slice(0, numInputs);
+            if (validChars.length > 0) {
+                var newValues_1 = Array(numInputs).fill("");
+                validChars.forEach(function (char, i) {
+                    if (i < numInputs) {
+                        newValues_1[i] = char;
+                    }
+                });
+                setValues(newValues_1);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValues_1.join(""));
+                if (validChars.length >= numInputs) {
+                    var fullValue_1 = newValues_1.join("");
+                    setError("");
+                    onError === null || onError === void 0 ? void 0 : onError(null);
+                    onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue_1);
+                    inputRefs.current.forEach(function (input) { return input === null || input === void 0 ? void 0 : input.blur(); });
+                    (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+                }
+                else {
+                    var nextIndex = validChars.length;
+                    (_b = inputRefs.current[nextIndex]) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+            }
+            return;
+        }
         if (!validateInput(value, allowedChars)) {
             // console.log("[VerificationCodeInput] Invalid input value");
             return;
@@ -66,7 +97,7 @@ var VerificationCodeInput = function (_a) {
             }
         }
         else if (index < numInputs - 1) {
-            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
         }
     };
     var handleKeyDown = function (index, e) {
@@ -105,16 +136,16 @@ var VerificationCodeInput = function (_a) {
             .filter(function (char) { return validateInput(char, allowedChars); })
             .slice(0, numInputs);
         if (validChars.length > 0) {
-            var newValues_1 = Array(numInputs).fill("");
+            var newValues_2 = Array(numInputs).fill("");
             validChars.forEach(function (char, i) {
                 if (i < numInputs) {
-                    newValues_1[i] = char;
+                    newValues_2[i] = char;
                 }
             });
-            setValues(newValues_1);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValues_1.join(""));
+            setValues(newValues_2);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValues_2.join(""));
             if (validChars.length >= numInputs) {
-                var fullValue = newValues_1.join("");
+                var fullValue = newValues_2.join("");
                 // console.log(
                 //   "[VerificationCodeInput] All inputs filled, length:",
                 //   fullValue.length
@@ -140,13 +171,13 @@ var VerificationCodeInput = function (_a) {
         return regex.test(value);
     };
     var renderInputs = function () {
-        return values.map(function (value, index) { return (React.createElement("input", { key: index, className: "".concat(styles.input, " ").concat(styles[size], " ").concat(value ? styles.filledInput : "", " ").concat(isSmallScreen ? styles.responsive : ""), value: value, onChange: function (e) { return handleInputChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onPaste: index === 0 ? handlePaste : undefined, onBlur: handleBlur, maxLength: 1, inputMode: allowedChars === "numeric" ? "numeric" : "text", pattern: allowedChars === "numeric"
+        return values.map(function (value, index) { return (React.createElement("input", { key: index, className: "".concat(styles.input, " ").concat(styles[size], " ").concat(value ? styles.filledInput : "", " ").concat(isSmallScreen ? styles.responsive : ""), value: value, onChange: function (e) { return handleInputChange(index, e.target.value); }, onKeyDown: function (e) { return handleKeyDown(index, e); }, onPaste: index === 0 ? handlePaste : undefined, onBlur: handleBlur, maxLength: index === 0 ? numInputs : 1, inputMode: allowedChars === "numeric" ? "numeric" : "text", pattern: allowedChars === "numeric"
                 ? "[0-9]*"
                 : allowedChars === "alphabetic"
                     ? "[a-zA-Z]*"
                     : "[a-zA-Z0-9]*", ref: function (input) { return (inputRefs.current[index] = input); }, autoFocus: index === 0 && autoFocus, tabIndex: index === 0 ? 0 : undefined, "data-lpignore": "true" // Empêche Dashlane d'intervenir
             , "data-form-type": "other" // Indique que ce n'est pas un champ de mot de passe
-            , disabled: isDisabled })); });
+            , disabled: isDisabled, autoComplete: index === 0 ? "one-time-code" : "off" })); });
     };
     return (React.createElement("div", { className: "".concat(styles.container, " ").concat(isSmallScreen ? styles.responsiveContainer : "") },
         React.createElement("div", { className: "".concat(styles.inputsContainer, " ").concat(isSmallScreen ? styles.responsiveInputsContainer : "") }, renderInputs()),

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

@@ -193,7 +193,7 @@ export var Stepper = function (_a) {
                             React.createElement("div", { style: { minWidth: "20px" } }),
                             React.createElement("div", { className: "stepper-progress-bar", style: { flex: 1, height: 8, minWidth: 0 } },
                                 React.createElement("div", { className: "stepper-progress-inner", style: { width: progress + "%", height: 8 } })),
-                            onClose ? React.createElement(CloseButton, { onClick: function () { return onClose && onClose(); } }) : React.createElement("div", { style: { minWidth: "20px" } })),
+                            onClose ? React.createElement(CloseButton, { onClick: function () { return onClose && onClose(); } }) : React.createElement("div", { style: { minWidth: "20px", minHeight: "20px" } })),
                         React.createElement("div", { style: { marginBottom: "42px" } },
                             React.createElement("div", { className: "stepper-title" }, currentStep.title),
                             currentStep.description && React.createElement("div", { className: "stepper-desc" }, currentStep.description)),

package/dist/components/molecules/caseCard/CaseCard.css

@@ -6,6 +6,7 @@
   max-width: 500px;
   width: auto;
   height: 150px;
+  gap: 1rem;
   padding: 10px 18px 14px 18px;
   justify-content: space-between;
   align-items: flex-start;
@@ -59,10 +60,12 @@
   justify-content: space-between;
   align-items: flex-start;
   align-self: stretch;
-  width: calc(100%);
+  width: max-content;
   overflow: visible;
   position: relative;
   z-index: 2;
+  flex-shrink: 1;
+  min-width: 0;
 }
 
 .case-card-header {
@@ -98,6 +101,8 @@
   padding-top: 4px;
   margin: 0;
   text-shadow: 0 1px 2px rgba(255,255,255,0.4);
+  flex-shrink: 1;
+  min-width: 0;
 }
 
 .case-card-title.closed {
@@ -110,7 +115,8 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  min-width: 100px;
+  min-width: fit-content;
+  width: fit-content;
   flex-shrink: 0;
   position: relative;
   z-index: 2;
@@ -141,6 +147,10 @@
   display: none;
 }
 
+.case-card-archived .case-card-content {
+  width: 100%;
+}
+
 .case-card-progress-bar {
   width: 100%;
   margin-left: -10px;

package/dist/components/molecules/caseCard/CaseCard.stories.js

@@ -91,7 +91,7 @@ var Template = function (args) { return React.createElement(CaseCard, __assign({
 export var Desktop = Template.bind({});
 Desktop.args = {
     clientName: "MME. JANE DOE",
-    title: "Divorce à l'amiable",
+    title: "DDivorce à l'amiable très amiables de de",
     nextAppointment: {
         date: "2024-10-31",
         time: "14:15",
@@ -128,7 +128,7 @@ Mobile.args = {
 export var LongCategories = Template.bind({});
 LongCategories.args = {
     clientName: "MME. JANE DOE",
-    title: "Divorce à l'amiable",
+    title: "Divorce à l'amiable très amiables de de",
     nextAppointment: {
         date: "2024-10-31",
     },

package/package.json

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