@wise/dynamic-flow-client-internal 5.20.0 → 5.21.1

package/build/main.mjs

@@ -64,7 +64,7 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      function classNames7() {
+      function classNames8() {
         var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -82,7 +82,7 @@ var require_classnames = __commonJS({
           return "";
         }
         if (Array.isArray(arg)) {
-          return classNames7.apply(null, arg);
+          return classNames8.apply(null, arg);
         }
         if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
           return arg.toString();
@@ -105,14 +105,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module !== "undefined" && module.exports) {
-        classNames7.default = classNames7;
-        module.exports = classNames7;
+        classNames8.default = classNames8;
+        module.exports = classNames8;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames7;
+          return classNames8;
         });
       } else {
-        window.classNames = classNames7;
+        window.classNames = classNames8;
       }
     })();
   }
@@ -127,7 +127,7 @@ import { useDynamicFlow } from "@wise/dynamic-flow-client";
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.20.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.21.1" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -385,7 +385,7 @@ var BoxRenderer = {
     const contents = /* @__PURE__ */ jsx3(
       "div",
       {
-        className: (0, import_classnames.default)({
+        className: (0, import_classnames.default)("df-box-renderer", {
           "df-box-renderer-border": hasBorder,
           [`df-box-renderer-width-${width}`]: hasFixedWidth,
           [getMargin(margin)]: !hasFixedWidth
@@ -851,11 +851,24 @@ var getPriority = (control, tags) => {
   return control && isButtonPriority(control) ? control : "secondary";
 };
 
+// ../renderers/src/CheckboxInputRenderer.tsx
+import { Checkbox, ListItem as ListItem3 } from "@transferwise/components";
+
 // ../renderers/src/components/FieldInput.tsx
 import { Field } from "@transferwise/components";
-import { useEffect as useEffect4, useRef } from "react";
 
-// ../renderers/src/utils/scroll-to-if-not-visible.ts
+// ../renderers/src/utils/useScrollToError.ts
+import { useEffect as useEffect4, useRef } from "react";
+var useScrollToError = (validationState, features) => {
+  const ref = useRef(null);
+  const enabled = (features == null ? void 0 : features.scrollToError) !== false;
+  useEffect4(() => {
+    if ((validationState == null ? void 0 : validationState.status) === "invalid" && (validationState == null ? void 0 : validationState.message) && enabled) {
+      scrollToIfNotVisible(ref.current);
+    }
+  }, [validationState == null ? void 0 : validationState.status, validationState == null ? void 0 : validationState.message, enabled]);
+  return { ref };
+};
 var scrollToIfNotVisible = (ref) => {
   const rect = ref == null ? void 0 : ref.getBoundingClientRect();
   if (!ref || !rect) {
@@ -919,22 +932,16 @@ function FieldInput({
   inlineAlert,
   features
 }) {
+  var _a;
   const labelContent = label && help ? /* @__PURE__ */ jsx19(LabelContentWithHelp, { text: label, help }) : label;
-  const message = validation == null ? void 0 : validation.message;
-  const ref = useRef(null);
-  const shouldScrollToError = features.scrollToError !== false;
-  useEffect4(() => {
-    if (message && shouldScrollToError) {
-      scrollToIfNotVisible(ref.current);
-    }
-  }, [message, shouldScrollToError]);
+  const { ref } = useScrollToError(validation, features);
   return /* @__PURE__ */ jsx19("div", { ref, children: /* @__PURE__ */ jsx19(
     Field,
     {
       id,
       label: labelContent,
       description,
-      message: message != null ? message : inlineAlert == null ? void 0 : inlineAlert.content,
+      message: (_a = validation == null ? void 0 : validation.message) != null ? _a : inlineAlert == null ? void 0 : inlineAlert.content,
       messageLoading: loadingState !== "idle",
       sentiment: mapStatusToSentiment(validation, inlineAlert == null ? void 0 : inlineAlert.context),
       children
@@ -954,33 +961,30 @@ var mapStatusToSentiment = (validation, defaultContext) => {
 };
 var FieldInput_default = FieldInput;
 
-// ../renderers/src/CheckboxInputRenderer.tsx
-import { Checkbox, ListItem as ListItem3 } from "@transferwise/components";
-
-// ../renderers/src/utils/listItem/getMedia.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var getMedia = (media, preferAvatar) => media ? /* @__PURE__ */ jsx20(OptionMedia, { media, preferAvatar }) : void 0;
-
 // ../renderers/src/utils/listItem/getAdditionalText.tsx
 import { ListItem } from "@transferwise/components";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var getAdditionalText = (additionalText) => {
   if (!additionalText) {
     return void 0;
   }
-  return /* @__PURE__ */ jsx21(ListItem.AdditionalInfo, { children: additionalText });
+  return /* @__PURE__ */ jsx20(ListItem.AdditionalInfo, { children: additionalText });
 };
 
+// ../renderers/src/utils/listItem/getInlineAlert.tsx
+import { ListItem as ListItem2 } from "@transferwise/components";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ jsx21(ListItem2.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
+
+// ../renderers/src/utils/listItem/getMedia.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var getMedia = (media, preferAvatar) => media ? /* @__PURE__ */ jsx22(OptionMedia, { media, preferAvatar }) : void 0;
+
 // ../renderers/src/utils/listItem/getSupportingValues.ts
 var getSupportingValues = (supportingValues) => {
   return __spreadValues(__spreadValues({}, (supportingValues == null ? void 0 : supportingValues.value) ? { valueTitle: supportingValues.value } : {}), (supportingValues == null ? void 0 : supportingValues.subvalue) ? { valueSubtitle: supportingValues.subvalue } : {});
 };
 
-// ../renderers/src/utils/listItem/getInlineAlert.tsx
-import { ListItem as ListItem2 } from "@transferwise/components";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var getInlineAlert = (inlineAlert) => inlineAlert ? /* @__PURE__ */ jsx22(ListItem2.Prompt, { sentiment: inlineAlert == null ? void 0 : inlineAlert.context, children: inlineAlert.content }) : void 0;
-
 // ../renderers/src/CheckboxInputRenderer.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
 var CheckboxInputRenderer = {
@@ -1044,9 +1048,11 @@ var CheckboxItemComponent = (props) => {
     title,
     validationState,
     value,
+    features,
     onChange
   } = props;
-  return /* @__PURE__ */ jsx23(
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ jsx23("div", { ref, children: /* @__PURE__ */ jsx23(
     ListItem3,
     __spreadValues({
       title,
@@ -1057,7 +1063,7 @@ var CheckboxItemComponent = (props) => {
       prompt: getInlineAlertOrValidation(validationState, inlineAlert),
       control: /* @__PURE__ */ jsx23(ListItem3.Checkbox, { checked: value, onChange: () => onChange(!value) })
     }, getSupportingValues(supportingValues))
-  );
+  ) });
 };
 var SwitchItemComponent = (props) => {
   const {
@@ -1070,9 +1076,11 @@ var SwitchItemComponent = (props) => {
     title,
     validationState,
     value,
+    features,
     onChange
   } = props;
-  return /* @__PURE__ */ jsx23(
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ jsx23("div", { ref, children: /* @__PURE__ */ jsx23(
     ListItem3,
     __spreadValues({
       title,
@@ -1083,7 +1091,7 @@ var SwitchItemComponent = (props) => {
       prompt: getInlineAlertOrValidation(validationState, inlineAlert),
       control: /* @__PURE__ */ jsx23(ListItem3.Switch, { checked: value, onClick: () => onChange(!value) })
     }, getSupportingValues(supportingValues))
-  );
+  ) });
 };
 var getInlineAlertOrValidation = (validationState, inlineAlert) => {
   if ((validationState == null ? void 0 : validationState.status) === "invalid") {
@@ -2045,13 +2053,17 @@ var LoadingIndicatorRenderer_default = LoadingIndicatorRenderer;
 
 // ../renderers/src/MarkdownRenderer.tsx
 import { Markdown as Markdown3 } from "@transferwise/components";
+var import_classnames4 = __toESM(require_classnames());
 import { jsx as jsx48 } from "react/jsx-runtime";
 var MarkdownRenderer = {
   canRenderType: "markdown",
   render: ({ content, align, margin, size }) => /* @__PURE__ */ jsx48("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ jsx48(
     Markdown3,
     {
-      className: ["xs", "sm"].includes(size) ? "np-text-body-default" : "np-text-body-large",
+      className: (0, import_classnames4.default)(
+        "df-markdown",
+        ["xs", "sm"].includes(size) ? "np-text-body-default" : "np-text-body-large"
+      ),
       config: { link: { target: "_blank" } },
       children: content
     }
@@ -2493,9 +2505,8 @@ var MultiSelectInputRenderer = {
 import { Status, UploadInput } from "@transferwise/components";
 
 // ../renderers/src/components/UploadFieldInput.tsx
-var import_classnames4 = __toESM(require_classnames());
+var import_classnames5 = __toESM(require_classnames());
 import { InlineAlert as InlineAlert2 } from "@transferwise/components";
-import { useEffect as useEffect8, useRef as useRef2 } from "react";
 import { jsx as jsx57, jsxs as jsxs12 } from "react/jsx-runtime";
 function UploadFieldInput({
   id,
@@ -2508,19 +2519,12 @@ function UploadFieldInput({
 }) {
   const labelContent = label && help ? /* @__PURE__ */ jsx57(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
-  const message = validation == null ? void 0 : validation.message;
-  const ref = useRef2(null);
-  const shouldScrollToError = features.scrollToError !== false;
-  useEffect8(() => {
-    if (message && shouldScrollToError) {
-      scrollToIfNotVisible(ref.current);
-    }
-  }, [message, shouldScrollToError]);
+  const { ref } = useScrollToError(validation, features);
   return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref,
-      className: (0, import_classnames4.default)("form-group d-block", {
+      className: (0, import_classnames5.default)("form-group d-block", {
         "has-error": (validation == null ? void 0 : validation.status) === "invalid"
       }),
       children: [
@@ -2683,7 +2687,7 @@ function useSnackBarIfAvailable() {
 }
 
 // ../renderers/src/ParagraphRenderer.tsx
-var import_classnames5 = __toESM(require_classnames());
+var import_classnames6 = __toESM(require_classnames());
 import { Button as Button5, Input as Input3 } from "@transferwise/components";
 
 // ../renderers/src/messages/paragraph.messages.ts
@@ -2736,7 +2740,7 @@ function CopyableParagraph({
         type: "text",
         value: text,
         readOnly: true,
-        className: (0, import_classnames5.default)("text-ellipsis", inputAlignmentClasses)
+        className: (0, import_classnames6.default)("text-ellipsis", inputAlignmentClasses)
       }
     ),
     /* @__PURE__ */ jsx60(Button5, { v2: true, block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
@@ -2768,7 +2772,7 @@ var ProgressRenderer = {
 };
 
 // ../renderers/src/RepeatableRenderer.tsx
-var import_classnames6 = __toESM(require_classnames());
+var import_classnames7 = __toESM(require_classnames());
 import { Button as Button6, Header as Header6, InlineAlert as InlineAlert3, Modal as Modal4, NavigationOption } from "@transferwise/components";
 import { Plus } from "@transferwise/icons";
 import { useState as useState9 } from "react";
@@ -2811,6 +2815,7 @@ function Repeatable(props) {
     description,
     editableItem,
     editItemTitle,
+    features,
     items,
     title,
     validationState,
@@ -2821,6 +2826,7 @@ function Repeatable(props) {
   } = props;
   const { formatMessage } = useIntl9();
   const [openModalType, setOpenModalType] = useState9(null);
+  const { ref } = useScrollToError(validationState, features);
   const onAddItem = () => {
     onAdd();
     setOpenModalType("add");
@@ -2843,29 +2849,31 @@ function Repeatable(props) {
     setOpenModalType(null);
   };
   return /* @__PURE__ */ jsxs14(Fragment5, { children: [
-    title && /* @__PURE__ */ jsx62(Header6, { title }),
-    description && /* @__PURE__ */ jsx62("p", { children: description }),
-    /* @__PURE__ */ jsxs14(
-      "div",
-      {
-        className: (0, import_classnames6.default)("form-group", {
-          "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
-        }),
-        children: [
-          items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx62(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
-          /* @__PURE__ */ jsx62(
-            NavigationOption,
-            {
-              media: /* @__PURE__ */ jsx62(Plus, {}),
-              title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
-              showMediaAtAllSizes: true,
-              onClick: () => onAddItem()
-            }
-          ),
-          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ jsx62(InlineAlert3, { type: "negative", children: validationState.message })
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxs14("div", { ref, children: [
+      title && /* @__PURE__ */ jsx62(Header6, { title }),
+      description && /* @__PURE__ */ jsx62("p", { children: description }),
+      /* @__PURE__ */ jsxs14(
+        "div",
+        {
+          className: (0, import_classnames7.default)("form-group", {
+            "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
+          }),
+          children: [
+            items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsx62(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
+            /* @__PURE__ */ jsx62(
+              NavigationOption,
+              {
+                media: /* @__PURE__ */ jsx62(Plus, {}),
+                title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
+                showMediaAtAllSizes: true,
+                onClick: () => onAddItem()
+              }
+            ),
+            (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ jsx62(InlineAlert3, { type: "negative", children: validationState.message })
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx62(
       Modal4,
       {
@@ -3381,7 +3389,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 import { Tabs } from "@transferwise/components";
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { Fragment as Fragment9, jsx as jsx71, jsxs as jsxs21 } from "react/jsx-runtime";
 function TabInputRendererComponent(props) {
   const {
@@ -3397,7 +3405,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect9(() => {
+  useEffect8(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3513,7 +3521,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { SegmentedControl } from "@transferwise/components";
 import { Fragment as Fragment11, jsx as jsx73, jsxs as jsxs23 } from "react/jsx-runtime";
 function SegmentedInputRendererComponent(props) {
@@ -3529,7 +3537,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  useEffect10(() => {
+  useEffect9(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3568,13 +3576,14 @@ var isValidIndex3 = (index, options) => index !== null && index >= 0 && index <
 
 // ../renderers/src/SelectInputRenderer/RadioItemRendererComponent.tsx
 import { Header as Header8, InlineAlert as InlineAlert4, List as List2, ListItem as ListItem11 } from "@transferwise/components";
-import { Fragment as Fragment12, jsx as jsx74, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs24 } from "react/jsx-runtime";
 function RadioItemRendererComponent(props) {
   const {
     id,
     children,
     description: rootDescription,
     disabled: rootDisabled,
+    features,
     help,
     title: rootTitle,
     options,
@@ -3582,7 +3591,8 @@ function RadioItemRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ jsxs24(Fragment12, { children: [
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ jsxs24("div", { ref, children: [
     rootTitle && /* @__PURE__ */ jsx74(
       Header8,
       {
@@ -3695,12 +3705,12 @@ var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/utils/useCustomTheme.ts
 import { useTheme } from "@wise/components-theming";
-import { useEffect as useEffect11, useMemo } from "react";
+import { useEffect as useEffect10, useMemo } from "react";
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const theming = useTheme();
   const previousTheme = useMemo(() => theming.theme, []);
-  useEffect11(() => {
+  useEffect10(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -3713,7 +3723,7 @@ var useCustomTheme = (theme, trackEvent) => {
 
 // ../renderers/src/step/StepFooter.tsx
 import { Button as Button7 } from "@transferwise/components";
-import { useEffect as useEffect12, useRef as useRef3, useState as useState12 } from "react";
+import { useEffect as useEffect11, useRef as useRef2, useState as useState12 } from "react";
 import { useIntl as useIntl14 } from "react-intl";
 
 // ../renderers/src/messages/step.messages.ts
@@ -3727,7 +3737,7 @@ var step_messages_default = defineMessages11({
 });
 
 // ../renderers/src/step/StepFooter.tsx
-import { Fragment as Fragment13, jsx as jsx77, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx77, jsxs as jsxs26 } from "react/jsx-runtime";
 var SCROLL_TO_BOTTOM = "scroll-to-bottom";
 var StepFooter = ({ footer, tags }) => {
   if (tags == null ? void 0 : tags.includes(SCROLL_TO_BOTTOM)) {
@@ -3741,7 +3751,7 @@ var DefaultFooter = ({ footer }) => {
 };
 var FooterWithScrollButton = ({ footer }) => {
   const { formatMessage } = useIntl14();
-  const endOfLayoutRef = useRef3(null);
+  const endOfLayoutRef = useRef2(null);
   const isElementVisible = useIsElementVisible(endOfLayoutRef);
   const scrollButton = /* @__PURE__ */ jsx77(
     Button7,
@@ -3761,7 +3771,7 @@ var FooterWithScrollButton = ({ footer }) => {
   if (isElementVisible && !hasStepFooterContent) {
     return /* @__PURE__ */ jsx77("div", { ref: endOfLayoutRef, "aria-hidden": "true" });
   }
-  return /* @__PURE__ */ jsxs26(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs26(Fragment12, { children: [
     /* @__PURE__ */ jsx77("div", { ref: endOfLayoutRef, "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs26("div", { className: "df-step-fixed__footer", children: [
       !isElementVisible && scrollButton,
@@ -3771,7 +3781,7 @@ var FooterWithScrollButton = ({ footer }) => {
 };
 var useIsElementVisible = (elementRef) => {
   const [isVisible, setIsVisible] = useState12(false);
-  useEffect12(() => {
+  useEffect11(() => {
     const element = elementRef.current;
     if (!element) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -3785,10 +3795,10 @@ var useIsElementVisible = (elementRef) => {
 
 // ../renderers/src/step/StepHeader.tsx
 import { Title as Title2 } from "@transferwise/components";
-import { Fragment as Fragment14, jsx as jsx78, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx78, jsxs as jsxs27 } from "react/jsx-runtime";
 var StepHeader = ({ title, description, tags }) => {
   const { titleType, alignmentClassName } = getHeaderStyle(tags);
-  return /* @__PURE__ */ jsxs27(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment13, { children: [
     title ? /* @__PURE__ */ jsx78(Title2, { as: "h1", type: titleType, className: `${alignmentClassName} m-b-2`, children: title }) : void 0,
     description ? /* @__PURE__ */ jsx78("p", { className: `${alignmentClassName} np-text-body-large`, children: description }) : void 0
   ] });
@@ -4335,7 +4345,7 @@ var supportedMediaNames = [
 
 // ../renderers/src/ButtonRenderer/CircularButtonRenderer.tsx
 import { CircularButton } from "@transferwise/components";
-var import_classnames7 = __toESM(require_classnames());
+var import_classnames8 = __toESM(require_classnames());
 import { jsx as jsx90 } from "react/jsx-runtime";
 var CircularButtonRenderer = {
   canRenderType: "button",
@@ -4346,7 +4356,7 @@ function CircularButtonComponent(props) {
   var _a;
   const { context, disabled, margin, media, tags, title, onClick } = props;
   const priority = tags == null ? void 0 : tags.find((tag) => tag === "primary" || tag === "secondary");
-  return /* @__PURE__ */ jsx90("div", { className: (0, import_classnames7.default)(getMargin(margin), "df-button", "circular"), children: /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx90("div", { className: (0, import_classnames8.default)(getMargin(margin), "df-button", "circular"), children: /* @__PURE__ */ jsx90(
     CircularButton,
     {
       disabled,