@wise/dynamic-flow-client-internal 5.20.0-exp-box-cq-2-e95523a → 5.20.0

package/build/main.mjs

@@ -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.19.3" : "0.0.0"
+  typeof process !== "undefined" ? "5.20.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -377,30 +377,25 @@ var AlertRenderer_default = AlertRenderer;
 // ../renderers/src/BoxRenderer.tsx
 var import_classnames = __toESM(require_classnames());
 import { jsx as jsx3 } from "react/jsx-runtime";
-var getBoxRenderer = (className) => {
-  const renderer = {
-    canRenderType: "box",
-    render: ({ children, control, margin, width }) => {
-      const hasFixedWidth = width !== "xl";
-      const hasBorder = control === "bordered" || control === "bordered-web";
-      const contents = /* @__PURE__ */ jsx3(
-        "div",
-        {
-          className: (0, import_classnames.default)({
-            [className]: !!className,
-            "df-box-renderer-border": hasBorder,
-            [`df-box-renderer-width-${width}`]: hasFixedWidth,
-            [getMargin(margin)]: !hasFixedWidth
-          }),
-          children
-        }
-      );
-      return hasFixedWidth ? /* @__PURE__ */ jsx3("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
-    }
-  };
-  return renderer;
+var BoxRenderer = {
+  canRenderType: "box",
+  render: ({ children, control, margin, width }) => {
+    const hasFixedWidth = width !== "xl";
+    const hasBorder = control === "bordered" || control === "bordered-web";
+    const contents = /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: (0, import_classnames.default)({
+          "df-box-renderer-border": hasBorder,
+          [`df-box-renderer-width-${width}`]: hasFixedWidth,
+          [getMargin(margin)]: !hasFixedWidth
+        }),
+        children
+      }
+    );
+    return hasFixedWidth ? /* @__PURE__ */ jsx3("div", { className: (0, import_classnames.default)("df-box-renderer-fixed-width", getMargin(margin)), children: contents }) : contents;
+  }
 };
-var BoxRenderer = getBoxRenderer("df-box-renderer");
 var BoxRenderer_default = BoxRenderer;
 
 // ../renderers/src/ButtonRenderer/AddressValidationButtonRenderer.tsx
@@ -921,16 +916,18 @@ function FieldInput({
   description,
   help,
   loadingState = "idle",
-  inlineAlert
+  inlineAlert,
+  features
 }) {
   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) {
+    if (message && shouldScrollToError) {
       scrollToIfNotVisible(ref.current);
     }
-  }, [message]);
+  }, [message, shouldScrollToError]);
   return /* @__PURE__ */ jsx19("div", { ref, children: /* @__PURE__ */ jsx19(
     Field,
     {
@@ -1031,6 +1028,7 @@ var CheckboxComponent = (props) => {
       help,
       inlineAlert: rest.inlineAlert,
       loadingState: rest.fieldLoadingState,
+      features: rest.features,
       children: /* @__PURE__ */ jsx23(Checkbox, __spreadValues({ id }, checkboxProps))
     }
   );
@@ -1228,6 +1226,7 @@ var DateInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ jsx26(VariableDateInput_default, { control, inputProps })
       }
     );
@@ -1920,6 +1919,7 @@ var IntegerInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ jsx43(InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx43(
           Input,
           __spreadValues({
@@ -2183,6 +2183,7 @@ function MoneyInputRendererComponent(props) {
       description,
       validation: validationState,
       help,
+      features: props.features,
       children: /* @__PURE__ */ jsx52(
         MoneyInput,
         {
@@ -2252,6 +2253,7 @@ function InlineComponent(props) {
     id,
     description,
     disabled,
+    features,
     help,
     options,
     selectedIndices,
@@ -2267,6 +2269,7 @@ function InlineComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: options.map((option, index) => {
         var _a;
         const {
@@ -2334,6 +2337,7 @@ function DefaultComponent(props) {
     autoComplete,
     description,
     disabled,
+    features,
     help,
     options,
     placeholder,
@@ -2379,6 +2383,7 @@ function DefaultComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: /* @__PURE__ */ jsx54(
         SelectInput,
         __spreadValues({
@@ -2425,6 +2430,7 @@ function InlineCheckboxComponent(props) {
     id,
     description,
     disabled,
+    features,
     help,
     options,
     selectedIndices,
@@ -2440,6 +2446,7 @@ function InlineCheckboxComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: options.map((option, index) => {
         var _a;
         const {
@@ -2487,8 +2494,8 @@ import { Status, UploadInput } from "@transferwise/components";
 
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_classnames4 = __toESM(require_classnames());
-import { useEffect as useEffect8, useRef as useRef2 } from "react";
 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,
@@ -2496,17 +2503,19 @@ function UploadFieldInput({
   label,
   description,
   help,
-  validation
+  validation,
+  features
 }) {
   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) {
+    if (message && shouldScrollToError) {
       scrollToIfNotVisible(ref.current);
     }
-  }, [message]);
+  }, [message, shouldScrollToError]);
   return /* @__PURE__ */ jsxs12(
     "div",
     {
@@ -2563,6 +2572,7 @@ var MultiUploadInputRenderer = {
       title,
       description,
       disabled,
+      features,
       maxSize,
       maxItems,
       uploadLabel,
@@ -2585,6 +2595,7 @@ var MultiUploadInputRenderer = {
         description,
         validation: validationState,
         help,
+        features,
         children: /* @__PURE__ */ jsx58(
           UploadInput,
           {
@@ -2638,6 +2649,7 @@ var NumberInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ jsx59(InputGroup2, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx59(
           Input2,
           __spreadValues({
@@ -3082,6 +3094,7 @@ function BlockSearchRendererComponent({
   id,
   hint,
   isLoading,
+  features,
   margin,
   query,
   state,
@@ -3092,23 +3105,34 @@ function BlockSearchRendererComponent({
   const [hasSearched, setHasSearched] = useState10(false);
   const { formatMessage } = useIntl12();
   return /* @__PURE__ */ jsxs18("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ jsx66(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx66(InputGroup3, { addonStart: { content: /* @__PURE__ */ jsx66(Search, { size: 24 }) }, children: /* @__PURE__ */ jsx66(
-      Input4,
+    /* @__PURE__ */ jsx66(
+      FieldInput_default,
       {
         id,
-        name: id,
-        placeholder: hint,
-        type: "text",
-        value: query,
-        onChange: ({ currentTarget: { value } }) => {
-          if (!hasSearched) {
-            setHasSearched(true);
-            trackEvent("Search Started");
+        description: "",
+        validation: void 0,
+        help: "",
+        label: title,
+        features,
+        children: /* @__PURE__ */ jsx66(InputGroup3, { addonStart: { content: /* @__PURE__ */ jsx66(Search, { size: 24 }) }, children: /* @__PURE__ */ jsx66(
+          Input4,
+          {
+            id,
+            name: id,
+            placeholder: hint,
+            type: "text",
+            value: query,
+            onChange: ({ currentTarget: { value } }) => {
+              if (!hasSearched) {
+                setHasSearched(true);
+                trackEvent("Search Started");
+              }
+              onChange(value);
+            }
           }
-          onChange(value);
-        }
+        ) })
       }
-    ) }) }),
+    ),
     isLoading ? /* @__PURE__ */ jsx66("span", { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ jsx66(SearchResultContent, { state, trackEvent })
   ] });
 }
@@ -3177,50 +3201,62 @@ function InlineSearchRenderer({
   id,
   hint,
   isLoading,
+  features,
   margin,
-  onChange,
   state,
   title,
+  onChange,
   trackEvent
 }) {
   const [hasSearched, setHasSearched] = useState11(false);
   const intl = useIntl13();
-  return /* @__PURE__ */ jsx67("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx67(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ jsx67(
-    Typeahead,
+  return /* @__PURE__ */ jsx67("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx67(
+    FieldInput_default,
     {
-      id: "typeahead-input-id",
-      intl,
-      name: "typeahead-input-name",
-      size: "md",
-      placeholder: hint,
-      maxHeight: 100,
-      footer: /* @__PURE__ */ jsx67(TypeaheadFooter, { state, isLoading }),
-      multiple: false,
-      clearable: false,
-      addon: /* @__PURE__ */ jsx67(Search2, { size: 24 }),
-      options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
-      minQueryLength: 1,
-      onChange: (values) => {
-        if (values.length > 0) {
-          const [updatedValue] = values;
-          const { value: result } = updatedValue;
-          if (result) {
-            trackEvent("Search Result Selected", __spreadValues({
-              type: result.type
-            }, result.type === "action" ? { actionId: result.id } : {}));
-            result.onClick();
+      id,
+      description: "",
+      validation: void 0,
+      help: "",
+      label: title,
+      features,
+      children: /* @__PURE__ */ jsx67(
+        Typeahead,
+        {
+          id: "typeahead-input-id",
+          intl,
+          name: "typeahead-input-name",
+          size: "md",
+          placeholder: hint,
+          maxHeight: 100,
+          footer: /* @__PURE__ */ jsx67(TypeaheadFooter, { state, isLoading }),
+          multiple: false,
+          clearable: false,
+          addon: /* @__PURE__ */ jsx67(Search2, { size: 24 }),
+          options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
+          minQueryLength: 1,
+          onChange: (values) => {
+            if (values.length > 0) {
+              const [updatedValue] = values;
+              const { value: result } = updatedValue;
+              if (result) {
+                trackEvent("Search Result Selected", __spreadValues({
+                  type: result.type
+                }, result.type === "action" ? { actionId: result.id } : {}));
+                result.onClick();
+              }
+            }
+          },
+          onInputChange: (query) => {
+            if (!hasSearched) {
+              setHasSearched(true);
+              trackEvent("Search Started");
+            }
+            onChange(query);
           }
         }
-      },
-      onInputChange: (query) => {
-        if (!hasSearched) {
-          setHasSearched(true);
-          trackEvent("Search Started");
-        }
-        onChange(query);
-      }
+      )
     }
-  ) }) });
+  ) });
 }
 function mapResultToTypeaheadOption(result) {
   return {
@@ -3303,6 +3339,7 @@ function RadioInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3319,6 +3356,7 @@ function RadioInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ jsx70("span", { children: /* @__PURE__ */ jsx70(
           RadioGroup,
           {
@@ -3351,6 +3389,7 @@ function TabInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3372,6 +3411,7 @@ function TabInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ jsx71(
           Tabs,
           {
@@ -3404,6 +3444,7 @@ function SelectInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3450,6 +3491,7 @@ function SelectInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ jsx72(
           SelectInput2,
           __spreadValues({
@@ -3479,6 +3521,7 @@ function SegmentedInputRendererComponent(props) {
     id,
     children,
     description,
+    features,
     help,
     title,
     options,
@@ -3500,6 +3543,7 @@ function SegmentedInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ jsx73(
           SegmentedControl,
           {
@@ -4090,6 +4134,7 @@ var TextInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ jsx87(InputGroup4, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ jsx87(VariableTextInput, __spreadValues({}, inputProps)) })
       }
     );
@@ -4108,7 +4153,18 @@ import { jsx as jsx88 } from "react/jsx-runtime";
 var UploadInputRenderer = {
   canRenderType: "input-upload",
   render: (props) => {
-    const { id, accepts, title, description, disabled, maxSize, validationState, value, onUpload } = props;
+    const {
+      id,
+      accepts,
+      title,
+      description,
+      disabled,
+      features,
+      maxSize,
+      validationState,
+      value,
+      onUpload
+    } = props;
     const onUploadFile = async (formData) => {
       const file = formData.get("file");
       return onUpload(file).then(() => ({
@@ -4127,6 +4183,7 @@ var UploadInputRenderer = {
           label: void 0,
           description: void 0,
           validation: validationState,
+          features,
           children: /* @__PURE__ */ jsx88(
             UploadInput2,
             {
@@ -4167,6 +4224,7 @@ var LargeUploadRenderer = {
       type,
       validationState,
       maxSize = null,
+      features,
       onUpload
     } = _a, rest = __objRest(_a, [
       "id",
@@ -4179,6 +4237,7 @@ var LargeUploadRenderer = {
       "type",
       "validationState",
       "maxSize",
+      "features",
       "onUpload"
     ]);
     const uploadProps = __spreadProps(__spreadValues({}, rest), { id, name: id, maxSize });
@@ -4201,6 +4260,7 @@ var LargeUploadRenderer = {
         description,
         validation: validationState,
         help,
+        features,
         children: /* @__PURE__ */ jsx88(
           Upload,
           __spreadProps(__spreadValues({}, uploadProps), {