@mxenabled/connect-widget 0.19.3 → 0.19.5

package/dist/index.es.js

@@ -70116,7 +70116,14 @@ const buildFormSchema = (loginFields) => {
 const CREDENTIAL_FIELD_TYPES = {
   PASSWORD: 1};
 
+const preventDefaultAndStopAllPropagation = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+  event.nativeEvent.stopImmediatePropagation();
+};
+
 const usePasswordInputValidation = () => {
+  const showHideButtonRef = React__default.useRef(null);
   const [isCapsLockOn, setIsCapsLockOn] = useState(false);
   const handleKeyPress = (event) => "getModifierState" in event && setIsCapsLockOn(event.getModifierState("CapsLock"));
   const handleFocus = (event) => event.target?.addEventListener("keydown", handleKeyPress);
@@ -70125,7 +70132,11 @@ const usePasswordInputValidation = () => {
     setIsCapsLockOn(false);
   };
   const [showPassword, setShowPassword] = useState(false);
-  const handleTogglePassword = () => setShowPassword((show) => !show);
+  const handleTogglePassword = (e) => {
+    preventDefaultAndStopAllPropagation(e);
+    setShowPassword((show) => !show);
+    setTimeout(() => showHideButtonRef.current && showHideButtonRef.current.focus(), 0);
+  };
   const [validateSpaceState, setValidateSpaceState] = useState(DEFAULT_VALIDATION_STATE);
   const [validateSpaceMessage, setValidateSpaceMessage] = useState("");
   const handleSpaceValidation = (e) => {
@@ -70182,6 +70193,7 @@ const usePasswordInputValidation = () => {
           "aria-label": showPassword ? __("Hide password") : __("Show password"),
           edge: "end",
           onClick: handleTogglePassword,
+          ref: showHideButtonRef,
           children: showPassword ? /* @__PURE__ */ jsxRuntimeExports.jsx(M, { className: "material-symbols-rounded", name: "visibility_off" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(M, { className: "material-symbols-rounded", name: "visibility" })
         }
       ) })
@@ -73684,7 +73696,7 @@ const RoutingNumber = (props) => {
       }
     ) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: (e) => e.preventDefault(), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.inputStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         ProtectedTextField,
         {
           autoComplete: "off",
@@ -73701,9 +73713,15 @@ const RoutingNumber = (props) => {
           label: __("Routing number"),
           name: "routingNumber",
           onChange: handleTextInputChange,
+          required: true,
           value: values.routingNumber
         }
       ) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 16, marginBottom: 32 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { color: "#666", fontSize: 13 }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#E32727", fontSize: 13 }, children: "*" }),
+        " ",
+        __("Required")
+      ] }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button$2,
         {
@@ -73739,9 +73757,6 @@ const getStyles$r = (tokens) => ({
   title: {
     marginBottom: tokens.Spacing.Large
   },
-  inputStyle: {
-    marginBottom: tokens.Spacing.XLarge
-  },
   button: {
     marginBottom: "12px"
   }