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

package/build/main.css

@@ -52,44 +52,6 @@
     width: 66.66%;
   }
 }
-/* NEW box renderer styles */
-@media screen and (width >=1px) {
-  /* container queries (when .df-prefer-container-queries is set on a parent) */
-  /* In container-query mode, ignore viewport-based width overrides by resetting to narrow defaults. */
-  .df-prefer-container-queries .df-box-renderer.df-box-renderer-border {
-    padding: var(--size-16);
-  }
-
-  .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-xs,
-  .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-sm,
-  .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-md,
-  .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-lg {
-    width: 100%;
-  }
-
-  /* @container (min-width: 576px) { */
-  @container (min-width: 480px) {
-    .df-prefer-container-queries .df-box-renderer.df-box-renderer-border {
-      padding: var(--size-24);
-    }
-
-    .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-xs {
-      width: 33.33%;
-    }
-
-    .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-sm {
-      width: 50%;
-    }
-
-    .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-md {
-      width: 66.66%;
-    }
-
-    .df-prefer-container-queries .df-box-renderer.df-box-renderer-width-lg {
-      width: 83.33%;
-    }
-  }
-}
 .df-columns-renderer-container {
   display: flex;
   gap: var(--size-4);
@@ -175,6 +137,13 @@
     width: 300px;
   }
 }
+/**
+  * This speficies the container for container queries about width.
+  * We don't use it by default, but integrations can specify it using the className prop in the DF component.
+ */
+.df-prefer-container-queries {
+  container-type: inline-size;
+}
 /* narrow container */
 @container (max-width: 576px) {
   .df-image.xs img.df-reserve-space {
@@ -261,13 +230,6 @@
   margin-left: auto;
   margin-right: auto;
 }
-/**
-  * This specifies the container for container queries about width.
-  * We don't use it by default, but integrations can specify it using the className prop in the DF component.
- */
-.df-prefer-container-queries {
-  container-type: inline-size;
-}
 .df-context-menu {
   position: fixed;
   z-index: 10;

package/build/main.js

@@ -145,7 +145,7 @@ var import_dynamic_flow_client4 = require("@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
@@ -395,30 +395,25 @@ var AlertRenderer_default = AlertRenderer;
 // ../renderers/src/BoxRenderer.tsx
 var import_classnames = __toESM(require_classnames());
 var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)(
-        "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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: (0, import_classnames.default)({
+          "df-box-renderer-border": hasBorder,
+          [`df-box-renderer-width-${width}`]: hasFixedWidth,
+          [getMargin(margin)]: !hasFixedWidth
+        }),
+        children
+      }
+    );
+    return hasFixedWidth ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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
@@ -939,16 +934,18 @@ function FieldInput({
   description,
   help,
   loadingState = "idle",
-  inlineAlert
+  inlineAlert,
+  features
 }) {
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LabelContentWithHelp, { text: label, help }) : label;
   const message = validation == null ? void 0 : validation.message;
   const ref = (0, import_react4.useRef)(null);
+  const shouldScrollToError = features.scrollToError !== false;
   (0, import_react4.useEffect)(() => {
-    if (message) {
+    if (message && shouldScrollToError) {
       scrollToIfNotVisible(ref.current);
     }
-  }, [message]);
+  }, [message, shouldScrollToError]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_components8.Field,
     {
@@ -1049,6 +1046,7 @@ var CheckboxComponent = (props) => {
       help,
       inlineAlert: rest.inlineAlert,
       loadingState: rest.fieldLoadingState,
+      features: rest.features,
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components11.Checkbox, __spreadValues({ id }, checkboxProps))
     }
   );
@@ -1246,6 +1244,7 @@ var DateInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VariableDateInput_default, { control, inputProps })
       }
     );
@@ -1935,6 +1934,7 @@ var IntegerInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components23.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           import_components23.Input,
           __spreadValues({
@@ -2198,6 +2198,7 @@ function MoneyInputRendererComponent(props) {
       description,
       validation: validationState,
       help,
+      features: props.features,
       children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         import_components31.MoneyInput,
         {
@@ -2267,6 +2268,7 @@ function InlineComponent(props) {
     id,
     description,
     disabled,
+    features,
     help,
     options,
     selectedIndices,
@@ -2282,6 +2284,7 @@ function InlineComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: options.map((option, index) => {
         var _a;
         const {
@@ -2349,6 +2352,7 @@ function DefaultComponent(props) {
     autoComplete,
     description,
     disabled,
+    features,
     help,
     options,
     placeholder,
@@ -2394,6 +2398,7 @@ function DefaultComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         import_components33.SelectInput,
         __spreadValues({
@@ -2440,6 +2445,7 @@ function InlineCheckboxComponent(props) {
     id,
     description,
     disabled,
+    features,
     help,
     options,
     selectedIndices,
@@ -2455,6 +2461,7 @@ function InlineCheckboxComponent(props) {
       help,
       description,
       validation: validationState,
+      features,
       children: options.map((option, index) => {
         var _a;
         const {
@@ -2501,9 +2508,9 @@ var MultiSelectInputRenderer = {
 var import_components36 = require("@transferwise/components");
 
 // ../renderers/src/components/UploadFieldInput.tsx
-var import_react13 = require("react");
 var import_components35 = require("@transferwise/components");
 var import_classnames4 = __toESM(require_classnames());
+var import_react13 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function UploadFieldInput({
   id,
@@ -2511,17 +2518,19 @@ function UploadFieldInput({
   label,
   description,
   help,
-  validation
+  validation,
+  features
 }) {
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
   const message = validation == null ? void 0 : validation.message;
   const ref = (0, import_react13.useRef)(null);
+  const shouldScrollToError = features.scrollToError !== false;
   (0, import_react13.useEffect)(() => {
-    if (message) {
+    if (message && shouldScrollToError) {
       scrollToIfNotVisible(ref.current);
     }
-  }, [message]);
+  }, [message, shouldScrollToError]);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
@@ -2578,6 +2587,7 @@ var MultiUploadInputRenderer = {
       title,
       description,
       disabled,
+      features,
       maxSize,
       maxItems,
       uploadLabel,
@@ -2600,6 +2610,7 @@ var MultiUploadInputRenderer = {
         description,
         validation: validationState,
         help,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           import_components36.UploadInput,
           {
@@ -2653,6 +2664,7 @@ var NumberInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_components37.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           import_components37.Input,
           __spreadValues({
@@ -3097,6 +3109,7 @@ function BlockSearchRendererComponent({
   id,
   hint,
   isLoading,
+  features,
   margin,
   query,
   state,
@@ -3107,23 +3120,34 @@ function BlockSearchRendererComponent({
   const [hasSearched, setHasSearched] = (0, import_react16.useState)(false);
   const { formatMessage } = (0, import_react_intl22.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_components45.InputGroup, { addonStart: { content: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_icons3.Search, { size: 24 }) }, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-      import_components45.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      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__ */ (0, import_jsx_runtime66.jsx)(import_components45.InputGroup, { addonStart: { content: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_icons3.Search, { size: 24 }) }, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+          import_components45.Input,
+          {
+            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__ */ (0, import_jsx_runtime66.jsx)("span", { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SearchResultContent, { state, trackEvent })
   ] });
 }
@@ -3192,50 +3216,62 @@ function InlineSearchRenderer({
   id,
   hint,
   isLoading,
+  features,
   margin,
-  onChange,
   state,
   title,
+  onChange,
   trackEvent
 }) {
   const [hasSearched, setHasSearched] = (0, import_react17.useState)(false);
   const intl = (0, import_react_intl23.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-    import_components46.Typeahead,
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    FieldInput_default,
     {
-      id: "typeahead-input-id",
-      intl,
-      name: "typeahead-input-name",
-      size: "md",
-      placeholder: hint,
-      maxHeight: 100,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TypeaheadFooter, { state, isLoading }),
-      multiple: false,
-      clearable: false,
-      addon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_icons4.Search, { 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__ */ (0, import_jsx_runtime67.jsx)(
+        import_components46.Typeahead,
+        {
+          id: "typeahead-input-id",
+          intl,
+          name: "typeahead-input-name",
+          size: "md",
+          placeholder: hint,
+          maxHeight: 100,
+          footer: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TypeaheadFooter, { state, isLoading }),
+          multiple: false,
+          clearable: false,
+          addon: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_icons4.Search, { 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 {
@@ -3318,6 +3354,7 @@ function RadioInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3334,6 +3371,7 @@ function RadioInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           import_components48.RadioGroup,
           {
@@ -3366,6 +3404,7 @@ function TabInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3387,6 +3426,7 @@ function TabInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           import_components49.Tabs,
           {
@@ -3419,6 +3459,7 @@ function SelectInputRendererComponent(props) {
     children,
     description,
     disabled,
+    features,
     help,
     title,
     options,
@@ -3465,6 +3506,7 @@ function SelectInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           import_components50.SelectInput,
           __spreadValues({
@@ -3494,6 +3536,7 @@ function SegmentedInputRendererComponent(props) {
     id,
     children,
     description,
+    features,
     help,
     title,
     options,
@@ -3515,6 +3558,7 @@ function SegmentedInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           import_components51.SegmentedControl,
           {
@@ -4099,6 +4143,7 @@ var TextInputRenderer = {
         inlineAlert: props.inlineAlert,
         loadingState: props.fieldLoadingState,
         help,
+        features: props.features,
         children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_components61.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(VariableTextInput, __spreadValues({}, inputProps)) })
       }
     );
@@ -4117,7 +4162,18 @@ var import_jsx_runtime88 = require("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(() => ({
@@ -4136,6 +4192,7 @@ var UploadInputRenderer = {
           label: void 0,
           description: void 0,
           validation: validationState,
+          features,
           children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             import_components62.UploadInput,
             {
@@ -4176,6 +4233,7 @@ var LargeUploadRenderer = {
       type,
       validationState,
       maxSize = null,
+      features,
       onUpload
     } = _a, rest = __objRest(_a, [
       "id",
@@ -4188,6 +4246,7 @@ var LargeUploadRenderer = {
       "type",
       "validationState",
       "maxSize",
+      "features",
       "onUpload"
     ]);
     const uploadProps = __spreadProps(__spreadValues({}, rest), { id, name: id, maxSize });
@@ -4210,6 +4269,7 @@ var LargeUploadRenderer = {
         description,
         validation: validationState,
         help,
+        features,
         children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           import_components62.Upload,
           __spreadProps(__spreadValues({}, uploadProps), {