@wise/dynamic-flow-client-internal 4.20.0-experimental-1c8f72d → 4.20.0-experimental-189acbd

package/build/main.js

@@ -772,27 +772,29 @@ var AddressValidationButtonRenderer = {
 function AddressValidationButtonComponent(props) {
   const { disabled, margin, title, stepLoadingState, onClick } = props;
   const { formatMessage } = (0, import_react_intl2.useIntl)();
-  const [spinny, setSpinny] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
-    if (stepLoadingState === "idle") {
-      setSpinny(false);
-    }
-  }, [stepLoadingState]);
+  const [isActive, setActive] = (0, import_react.useState)(false);
+  const isLoading = isActive && stepLoadingState !== "idle";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `d-flex flex-column ${getMargin(margin)}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_components.Button,
       {
         v2: true,
         block: true,
-        disabled: stepLoadingState !== "idle" || disabled,
+        disabled: isLoading || disabled,
         priority: "primary",
         size: "md",
-        loading: spinny,
-        onClick,
+        loading: isLoading,
+        onBlur: () => {
+          setActive(false);
+        },
+        onClick: () => {
+          setActive(true);
+          onClick();
+        },
         children: title
       }
     ),
-    spinny && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.InlineAlert, { type: "warning", className: "m-x-auto", children: formatMessage(loading_button_messages_default.buttonLoadingMessage) })
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.InlineAlert, { type: "warning", className: "m-x-auto", children: formatMessage(loading_button_messages_default.buttonLoadingMessage) })
   ] });
 }
 var AddressValidationButtonRenderer_default = AddressValidationButtonRenderer;
@@ -857,12 +859,8 @@ var ButtonRenderer = {
 };
 function ButtonComponent(props) {
   const { control, context, disabled, margin, title, size, stepLoadingState, onClick } = props;
-  const [spinny, setSpinny] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => {
-    if (stepLoadingState === "idle") {
-      setSpinny(false);
-    }
-  }, [stepLoadingState]);
+  const [isActive, setActive] = (0, import_react2.useState)(false);
+  const isLoading = isActive && stepLoadingState !== "idle";
   const priority = mapControl(control);
   const type = priority === "tertiary" ? void 0 : mapContext(context);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -870,13 +868,16 @@ function ButtonComponent(props) {
     {
       block: true,
       className: getMargin(margin),
-      disabled: stepLoadingState !== "idle" || disabled,
+      disabled: isLoading ? false : disabled,
       priority,
       size: mapSize(size),
-      loading: spinny,
+      loading: isLoading,
       type,
+      onBlur: () => {
+        setActive(false);
+      },
       onClick: () => {
-        setSpinny(true);
+        setActive(true);
         onClick();
       },
       children: title

package/build/main.mjs

@@ -728,7 +728,7 @@ var loading_button_messages_default = defineMessages({
 });
 
 // ../renderers/src/ButtonRenderer/AddressValidationButtonRenderer.tsx
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AddressValidationButtonRenderer = {
   canRenderType: "button",
@@ -738,27 +738,29 @@ var AddressValidationButtonRenderer = {
 function AddressValidationButtonComponent(props) {
   const { disabled, margin, title, stepLoadingState, onClick } = props;
   const { formatMessage } = useIntl();
-  const [spinny, setSpinny] = useState(false);
-  useEffect(() => {
-    if (stepLoadingState === "idle") {
-      setSpinny(false);
-    }
-  }, [stepLoadingState]);
+  const [isActive, setActive] = useState(false);
+  const isLoading = isActive && stepLoadingState !== "idle";
   return /* @__PURE__ */ jsxs("div", { className: `d-flex flex-column ${getMargin(margin)}`, children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         v2: true,
         block: true,
-        disabled: stepLoadingState !== "idle" || disabled,
+        disabled: isLoading || disabled,
         priority: "primary",
         size: "md",
-        loading: spinny,
-        onClick,
+        loading: isLoading,
+        onBlur: () => {
+          setActive(false);
+        },
+        onClick: () => {
+          setActive(true);
+          onClick();
+        },
         children: title
       }
     ),
-    spinny && /* @__PURE__ */ jsx(InlineAlert, { type: "warning", className: "m-x-auto", children: formatMessage(loading_button_messages_default.buttonLoadingMessage) })
+    isLoading && /* @__PURE__ */ jsx(InlineAlert, { type: "warning", className: "m-x-auto", children: formatMessage(loading_button_messages_default.buttonLoadingMessage) })
   ] });
 }
 var AddressValidationButtonRenderer_default = AddressValidationButtonRenderer;
@@ -815,7 +817,7 @@ var BoxRenderer_default = BoxRenderer;
 
 // ../renderers/src/ButtonRenderer/ButtonRenderer.tsx
 import { Button as Button2 } from "@transferwise/components";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useState as useState2 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var ButtonRenderer = {
   canRenderType: "button",
@@ -823,12 +825,8 @@ var ButtonRenderer = {
 };
 function ButtonComponent(props) {
   const { control, context, disabled, margin, title, size, stepLoadingState, onClick } = props;
-  const [spinny, setSpinny] = useState2(false);
-  useEffect2(() => {
-    if (stepLoadingState === "idle") {
-      setSpinny(false);
-    }
-  }, [stepLoadingState]);
+  const [isActive, setActive] = useState2(false);
+  const isLoading = isActive && stepLoadingState !== "idle";
   const priority = mapControl(control);
   const type = priority === "tertiary" ? void 0 : mapContext(context);
   return /* @__PURE__ */ jsx4(
@@ -836,13 +834,16 @@ function ButtonComponent(props) {
     {
       block: true,
       className: getMargin(margin),
-      disabled: stepLoadingState !== "idle" || disabled,
+      disabled: isLoading ? false : disabled,
       priority,
       size: mapSize(size),
-      loading: spinny,
+      loading: isLoading,
       type,
+      onBlur: () => {
+        setActive(false);
+      },
       onClick: () => {
-        setSpinny(true);
+        setActive(true);
         onClick();
       },
       children: title
@@ -1317,7 +1318,7 @@ var external_confirmation_messages_default = defineMessages3({
 
 // ../renderers/src/ExternalConfirmationRenderer.tsx
 import { useIntl as useIntl3 } from "react-intl";
-import { useEffect as useEffect3 } from "react";
+import { useEffect } from "react";
 import { Fragment, jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
 var ExternalConfirmationRenderer = {
   canRenderType: "external-confirmation",
@@ -1331,7 +1332,7 @@ function ExternalConfirmationRendererComponent({
   onCancel
 }) {
   const { formatMessage } = useIntl3();
-  useEffect3(() => {
+  useEffect(() => {
     if (url) {
       const w = window.open(url, "_blank");
       if (w) {
@@ -1452,7 +1453,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 import { Image } from "@transferwise/components";
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -1472,7 +1473,7 @@ function UrlImage({
   httpClient
 }) {
   const [imageSource, setImageSource] = useState3("");
-  useEffect4(() => {
+  useEffect2(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
@@ -2710,7 +2711,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect3 } from "react";
 import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs18 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
@@ -2725,7 +2726,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect5(() => {
+  useEffect3(() => {
     if (!isValidIndex(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -2838,7 +2839,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect4 } from "react";
 import { SegmentedControl } from "@transferwise/components";
 import { Fragment as Fragment8, jsx as jsx52, jsxs as jsxs20 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
@@ -2853,7 +2854,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect6(() => {
+  useEffect4(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -2958,12 +2959,12 @@ var mapStatus = (status) => {
 
 // ../renderers/src/utils/useCustomTheme.ts
 import { useTheme } from "@wise/components-theming";
-import { useEffect as useEffect7, useMemo } from "react";
+import { useEffect as useEffect5, useMemo } from "react";
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const previousThemeHookValue = useTheme();
   const previousTheme = useMemo(() => previousThemeHookValue.theme, []);
-  useEffect7(() => {
+  useEffect5(() => {
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
       trackEvent(ThemeRequiredEventName, { theme: previousTheme });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.20.0-experimental-1c8f72d",
+  "version": "4.20.0-experimental-189acbd",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -75,8 +75,8 @@
     "tsx": "4.20.3",
     "typescript": "5.8.3",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-types": "3.9.0-experimental-1c8f72d",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-types": "3.9.0-experimental-189acbd"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -91,8 +91,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-types": "3.9.0-experimental-1c8f72d",
-    "@wise/dynamic-flow-client": "4.11.0-experimental-1c8f72d"
+    "@wise/dynamic-flow-client": "4.11.0-experimental-189acbd",
+    "@wise/dynamic-flow-types": "3.9.0-experimental-189acbd"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",