@wise/dynamic-flow-client-internal 5.2.0-exp-bits-29346f3 → 5.2.0

package/README.md

@@ -235,6 +235,51 @@ onLog={(level, message, extra) => {
 }}
 ```
 
+## DynamicForm Component
+
+If you need to get the submittable data outside of a submission, you can use the `DynamicForm` component. This will give you access to two methods: `getValue` and `validate` via a [ref](https://react.dev/reference/react/useRef). For example:
+
+```tsx
+import type { DynamicFormController } from '@wise/dynamic-flow-client-internal';
+import { DynamicForm } from '@wise/dynamic-flow-client-internal';
+import { useRef } from 'react';
+
+function DynamicFlowWithRef() {
+  const ref = useRef<DynamicFormController>(null);
+
+  return (
+    <div>
+      <DynamicForm
+          ref={ref}
+          flowId={"id"}
+          customFetch={fetch}
+          initialStep={myStep}
+          onValueChange={ async () => {
+              const value = (await ref.current?.getValue()) ?? null;
+              console.log('Value changed to', JSON.stringify(value));
+          }}
+          onCompletion={(error) => console.error(error)}
+          onCompletion={() => console.log('Completed')}
+      />
+      <Button
+        onClick={ async () => {
+          // This will get the value, whether or not the form is valid
+          const value = (await ref.current?.getValue()) ?? null;
+
+          // This will trigger validation of the form and show any validation messages to the user.
+          // The response is a boolean indicating whether or not the form is valid.
+          const isValid = ref.current?.validate();
+
+          // Whatever you want to do with value
+        }}
+      >
+        Log value
+      </Button>
+    </div>
+  );
+}
+```
+
 ## Contributing
 
 We love contributions! Check out `CONTRIBUTING.md` for more information.

package/build/i18n/uk.json

@@ -1,11 +1,11 @@
 {
   "df.wise.ArraySchema.addItem": "Зберегти",
-  "df.wise.ArraySchema.addItemTitle": "Add Item",
+  "df.wise.ArraySchema.addItemTitle": "Додати позицію",
   "df.wise.ArraySchema.editItem": "Зберегти",
   "df.wise.ArraySchema.maxItemsError": "Додайте {maxItems} або менше.",
   "df.wise.ArraySchema.minItemsError": "Додайте принаймні {minItems}.",
   "df.wise.ArraySchema.removeItem": "Вилучити",
-  "df.wise.ButtonLayout.buttonLoadingMessage": "This might take a few seconds",
+  "df.wise.ButtonLayout.buttonLoadingMessage": "Це може зайняти кілька секунд",
   "df.wise.ControlFeedback.maxLength": "Максимальна кількість символів: {maxLength}.",
   "df.wise.ControlFeedback.maximum": "Введіть число, що менше або дорівнює {maximum}.",
   "df.wise.ControlFeedback.maximumDate": "Введіть дату, що припадає на {maximum}, або ранішу.",
@@ -35,7 +35,7 @@
   "df.wise.SearchLayout.loading": "Завантаження…",
   "df.wise.back.label": "Назад",
   "df.wise.filter.noResults": "Нічого не знайдено",
-  "df.wise.filter.placeholder": "Start typing to search",
+  "df.wise.filter.placeholder": "Почніть вводити текст для пошуку",
   "df.wise.filter.results": "Результати пошуку",
   "df.wise.group.all": "Усе",
   "df.wise.group.currencies-with-account-details": "Валюти з реквізитами рахунків",

package/build/main.css

@@ -176,10 +176,6 @@
 .tw-modal-body--scrollable .df-step-fixed__footer {
   bottom: -24px;
 }
-.df-modal .df-back-button {
-  position: fixed;
-  top: 24px;
-}
 .chips-container {
   overflow-x: auto;
 }

package/build/main.js

@@ -124,7 +124,7 @@ var require_classnames = __commonJS({
 var index_exports = {};
 __export(index_exports, {
   DynamicFlow: () => DynamicFlow,
-  DynamicFlowWithRef: () => DynamicFlowWithRef,
+  DynamicForm: () => DynamicForm,
   Header: () => Header11,
   Media: () => Media2,
   findRendererPropsByType: () => import_dynamic_flow_client4.findRendererPropsByType,
@@ -135,6 +135,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
 
+// src/dynamicFlow/DynamicFlow.tsx
+var import_react19 = require("react");
+var import_react_intl27 = require("react-intl");
+var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
+
 // ../renderers/src/AlertRenderer.tsx
 var import_components = require("@transferwise/components");
 
@@ -3726,14 +3731,25 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
-// src/dynamicFlow/useDynamicFlowWise.tsx
-var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
-var import_react21 = require("react");
+// src/dynamicFlow/messages.ts
+var import_react_intl26 = require("react-intl");
+var messages_default = (0, import_react_intl26.defineMessages)({
+  copied: {
+    id: "df.wise.CopyFeedback.copy",
+    defaultMessage: "Copied to clipboard",
+    description: "Appears in a snackbar when the copy operation succeeds."
+  },
+  copyFailed: {
+    id: "df.wise.CopyFeedback.copyFailed",
+    defaultMessage: "Failed to copy to clipboard",
+    description: "Appears in a snackbar when the copy operation fails."
+  }
+});
 
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.1.2" : "0.0.0"
+  typeof process !== "undefined" ? "5.2.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -3766,11 +3782,83 @@ var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
   }
 };
 
-// src/dynamicFlow/useWiseHttpClient.tsx
-var import_react19 = require("react");
-var import_react_intl26 = require("react-intl");
+// src/dynamicFlow/DynamicFlow.tsx
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var wiseRenderers = getWiseRenderers();
+function DynamicFlow(props) {
+  const {
+    className = "",
+    customFetch = globalThis.fetch,
+    renderers,
+    displayStepTitle = true,
+    features = {},
+    onAnalytics,
+    onEvent,
+    onLog,
+    onLink = openLinkInNewTab
+  } = props;
+  const { formatMessage } = (0, import_react_intl27.useIntl)();
+  const createSnackBar = useSnackBarIfAvailable();
+  const httpClient = useWiseHttpClient(customFetch);
+  const mergedRenderers = (0, import_react19.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const logEvent = (0, import_react19.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react19.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const onCopy = (copiedContent) => {
+    if (copiedContent) {
+      createSnackBar({ text: formatMessage(messages_default.copied) });
+    } else {
+      createSnackBar({ text: formatMessage(messages_default.copyFailed) });
+    }
+  };
+  const coreProps = __spreadProps(__spreadValues({}, props), {
+    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
+    httpClient,
+    renderers: mergedRenderers,
+    onEvent: trackEvent,
+    onLog: logEvent,
+    onLink,
+    onCopy
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_dynamic_flow_client.DynamicFlow, __spreadValues({}, coreProps)) });
+}
+var DynamicForm = (0, import_react19.forwardRef)(function DynamicForm2(props, ref) {
+  const {
+    className = "",
+    customFetch = globalThis.fetch,
+    renderers,
+    displayStepTitle = true,
+    features = {},
+    onAnalytics,
+    onEvent,
+    onLog,
+    onLink = openLinkInNewTab
+  } = props;
+  const { formatMessage } = (0, import_react_intl27.useIntl)();
+  const createSnackBar = useSnackBarIfAvailable();
+  const httpClient = useWiseHttpClient(customFetch);
+  const mergedRenderers = (0, import_react19.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const logEvent = (0, import_react19.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react19.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const onCopy = (copiedContent) => {
+    if (copiedContent) {
+      createSnackBar({ text: formatMessage(messages_default.copied) });
+    } else {
+      createSnackBar({ text: formatMessage(messages_default.copyFailed) });
+    }
+  };
+  const coreProps = __spreadProps(__spreadValues({}, props), {
+    httpClient,
+    renderers: mergedRenderers,
+    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
+    onEvent: trackEvent,
+    onLog: logEvent,
+    onLink,
+    onCopy
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_dynamic_flow_client.DynamicForm, __spreadProps(__spreadValues({}, coreProps), { ref })) });
+});
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = (0, import_react_intl26.useIntl)();
+  const { locale } = (0, import_react_intl27.useIntl)();
   return (0, import_react19.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
@@ -3791,69 +3879,6 @@ var handleRejection = (error) => {
   }
   throw error;
 };
-
-// src/dynamicFlow/useOnCopy.tsx
-var import_react20 = require("react");
-var import_react_intl28 = require("react-intl");
-
-// src/dynamicFlow/messages.ts
-var import_react_intl27 = require("react-intl");
-var messages_default = (0, import_react_intl27.defineMessages)({
-  copied: {
-    id: "df.wise.CopyFeedback.copy",
-    defaultMessage: "Copied to clipboard",
-    description: "Appears in a snackbar when the copy operation succeeds."
-  },
-  copyFailed: {
-    id: "df.wise.CopyFeedback.copyFailed",
-    defaultMessage: "Failed to copy to clipboard",
-    description: "Appears in a snackbar when the copy operation fails."
-  }
-});
-
-// src/dynamicFlow/useOnCopy.tsx
-var useOnCopy = () => {
-  const { formatMessage } = (0, import_react_intl28.useIntl)();
-  const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react20.useCallback)(
-    (copiedContent) => {
-      if (copiedContent) {
-        createSnackBar({ text: formatMessage(messages_default.copied) });
-      } else {
-        createSnackBar({ text: formatMessage(messages_default.copyFailed) });
-      }
-    },
-    [createSnackBar, formatMessage]
-  );
-};
-
-// src/dynamicFlow/useDynamicFlowWise.tsx
-var useDynamicFlowWise = (props) => {
-  const {
-    customFetch = globalThis.fetch,
-    renderers,
-    displayStepTitle = true,
-    features = {},
-    onAnalytics,
-    onEvent,
-    onLog,
-    onLink = openLinkInNewTab
-  } = props;
-  const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react21.useMemo)(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
-  const logEvent = (0, import_react21.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react21.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
-  const onCopy = useOnCopy();
-  return (0, import_dynamic_flow_client.useDynamicFlow)(__spreadProps(__spreadValues({}, props), {
-    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
-    httpClient,
-    renderers: mergedRenderers,
-    onEvent: trackEvent,
-    onLog: logEvent,
-    onLink,
-    onCopy
-  }));
-};
 var openLinkInNewTab = (url) => {
   var _a;
   try {
@@ -3864,35 +3889,6 @@ var openLinkInNewTab = (url) => {
   }
 };
 
-// src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var wiseRenderers = getWiseRenderers();
-function DynamicFlow(props) {
-  const { className = "" } = props;
-  const df = useDynamicFlowWise(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className, children: df.component });
-}
-
-// src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react22 = require("react");
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var DynamicFlowWithRef = (0, import_react22.forwardRef)(function DynamicFlowWithRef2(props, ref) {
-  const { className = "" } = props;
-  const df = useDynamicFlowWise(props);
-  (0, import_react22.useImperativeHandle)(
-    ref,
-    () => ({
-      getValue: async () => {
-        var _a;
-        return (_a = await df.getSubmittableValue()) != null ? _a : null;
-      },
-      validate: () => df.validate()
-    }),
-    []
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className, children: df.component });
-});
-
 // src/index.ts
 var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
 

package/build/main.mjs

@@ -117,6 +117,14 @@ var require_classnames = __commonJS({
 // src/index.ts
 import { makeHttpClient } from "@wise/dynamic-flow-client";
 
+// src/dynamicFlow/DynamicFlow.tsx
+import { forwardRef, useCallback, useMemo as useMemo2 } from "react";
+import { useIntl as useIntl15 } from "react-intl";
+import {
+  DynamicFlow as DynamicFlowCore,
+  DynamicForm as DynamicFormCore
+} from "@wise/dynamic-flow-client";
+
 // ../renderers/src/AlertRenderer.tsx
 import { Alert } from "@transferwise/components";
 
@@ -3717,14 +3725,25 @@ var getWiseRenderers = () => [
   ReviewLegacyRenderer_default
 ];
 
-// src/dynamicFlow/useDynamicFlowWise.tsx
-import { useDynamicFlow } from "@wise/dynamic-flow-client";
-import { useMemo as useMemo2 } from "react";
+// src/dynamicFlow/messages.ts
+import { defineMessages as defineMessages12 } from "react-intl";
+var messages_default = defineMessages12({
+  copied: {
+    id: "df.wise.CopyFeedback.copy",
+    defaultMessage: "Copied to clipboard",
+    description: "Appears in a snackbar when the copy operation succeeds."
+  },
+  copyFailed: {
+    id: "df.wise.CopyFeedback.copyFailed",
+    defaultMessage: "Failed to copy to clipboard",
+    description: "Appears in a snackbar when the copy operation fails."
+  }
+});
 
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.1.2" : "0.0.0"
+  typeof process !== "undefined" ? "5.2.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -3757,70 +3776,12 @@ var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
   }
 };
 
-// src/dynamicFlow/useWiseHttpClient.tsx
-import { useCallback } from "react";
-import { useIntl as useIntl15 } from "react-intl";
-var useWiseHttpClient = (httpClient) => {
-  const { locale } = useIntl15();
-  return useCallback(
-    async (input, init = {}) => {
-      const headers = new Headers(init.headers);
-      headers.set("accept-language", locale);
-      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || void 0;
-      if (timeZone) {
-        headers.set("time-zone", timeZone);
-      }
-      const requestInit = __spreadProps(__spreadValues({}, init), { credentials: "include", headers });
-      return httpClient(input, requestInit).catch(handleRejection);
-    },
-    [httpClient, locale]
-  );
-};
-var handleRejection = (error) => {
-  if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
-    return new Response(JSON.stringify({ validation: {} }), { status: 400 });
-  }
-  throw error;
-};
-
-// src/dynamicFlow/useOnCopy.tsx
-import { useCallback as useCallback2 } from "react";
-import { useIntl as useIntl16 } from "react-intl";
-
-// src/dynamicFlow/messages.ts
-import { defineMessages as defineMessages12 } from "react-intl";
-var messages_default = defineMessages12({
-  copied: {
-    id: "df.wise.CopyFeedback.copy",
-    defaultMessage: "Copied to clipboard",
-    description: "Appears in a snackbar when the copy operation succeeds."
-  },
-  copyFailed: {
-    id: "df.wise.CopyFeedback.copyFailed",
-    defaultMessage: "Failed to copy to clipboard",
-    description: "Appears in a snackbar when the copy operation fails."
-  }
-});
-
-// src/dynamicFlow/useOnCopy.tsx
-var useOnCopy = () => {
-  const { formatMessage } = useIntl16();
-  const createSnackBar = useSnackBarIfAvailable();
-  return useCallback2(
-    (copiedContent) => {
-      if (copiedContent) {
-        createSnackBar({ text: formatMessage(messages_default.copied) });
-      } else {
-        createSnackBar({ text: formatMessage(messages_default.copyFailed) });
-      }
-    },
-    [createSnackBar, formatMessage]
-  );
-};
-
-// src/dynamicFlow/useDynamicFlowWise.tsx
-var useDynamicFlowWise = (props) => {
+// src/dynamicFlow/DynamicFlow.tsx
+import { jsx as jsx82 } from "react/jsx-runtime";
+var wiseRenderers = getWiseRenderers();
+function DynamicFlow(props) {
   const {
+    className = "",
     customFetch = globalThis.fetch,
     renderers,
     displayStepTitle = true,
@@ -3830,12 +3791,20 @@ var useDynamicFlowWise = (props) => {
     onLog,
     onLink = openLinkInNewTab
   } = props;
+  const { formatMessage } = useIntl15();
+  const createSnackBar = useSnackBarIfAvailable();
   const httpClient = useWiseHttpClient(customFetch);
   const mergedRenderers = useMemo2(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
   const logEvent = useMemo2(() => getLogEvent(onLog), [onLog]);
   const trackEvent = useMemo2(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
-  const onCopy = useOnCopy();
-  return useDynamicFlow(__spreadProps(__spreadValues({}, props), {
+  const onCopy = (copiedContent) => {
+    if (copiedContent) {
+      createSnackBar({ text: formatMessage(messages_default.copied) });
+    } else {
+      createSnackBar({ text: formatMessage(messages_default.copyFailed) });
+    }
+  };
+  const coreProps = __spreadProps(__spreadValues({}, props), {
     features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
     httpClient,
     renderers: mergedRenderers,
@@ -3843,7 +3812,66 @@ var useDynamicFlowWise = (props) => {
     onLog: logEvent,
     onLink,
     onCopy
-  }));
+  });
+  return /* @__PURE__ */ jsx82("div", { className, children: /* @__PURE__ */ jsx82(DynamicFlowCore, __spreadValues({}, coreProps)) });
+}
+var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
+  const {
+    className = "",
+    customFetch = globalThis.fetch,
+    renderers,
+    displayStepTitle = true,
+    features = {},
+    onAnalytics,
+    onEvent,
+    onLog,
+    onLink = openLinkInNewTab
+  } = props;
+  const { formatMessage } = useIntl15();
+  const createSnackBar = useSnackBarIfAvailable();
+  const httpClient = useWiseHttpClient(customFetch);
+  const mergedRenderers = useMemo2(() => [...renderers != null ? renderers : [], ...wiseRenderers], [renderers]);
+  const logEvent = useMemo2(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = useMemo2(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const onCopy = (copiedContent) => {
+    if (copiedContent) {
+      createSnackBar({ text: formatMessage(messages_default.copied) });
+    } else {
+      createSnackBar({ text: formatMessage(messages_default.copyFailed) });
+    }
+  };
+  const coreProps = __spreadProps(__spreadValues({}, props), {
+    httpClient,
+    renderers: mergedRenderers,
+    features: __spreadValues({ hideStepTitle: !displayStepTitle }, features),
+    onEvent: trackEvent,
+    onLog: logEvent,
+    onLink,
+    onCopy
+  });
+  return /* @__PURE__ */ jsx82("div", { className, children: /* @__PURE__ */ jsx82(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
+});
+var useWiseHttpClient = (httpClient) => {
+  const { locale } = useIntl15();
+  return useCallback(
+    async (input, init = {}) => {
+      const headers = new Headers(init.headers);
+      headers.set("accept-language", locale);
+      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || void 0;
+      if (timeZone) {
+        headers.set("time-zone", timeZone);
+      }
+      const requestInit = __spreadProps(__spreadValues({}, init), { credentials: "include", headers });
+      return httpClient(input, requestInit).catch(handleRejection);
+    },
+    [httpClient, locale]
+  );
+};
+var handleRejection = (error) => {
+  if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
+    return new Response(JSON.stringify({ validation: {} }), { status: 400 });
+  }
+  throw error;
 };
 var openLinkInNewTab = (url) => {
   var _a;
@@ -3855,38 +3883,6 @@ var openLinkInNewTab = (url) => {
   }
 };
 
-// src/dynamicFlow/DynamicFlow.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
-var wiseRenderers = getWiseRenderers();
-function DynamicFlow(props) {
-  const { className = "" } = props;
-  const df = useDynamicFlowWise(props);
-  return /* @__PURE__ */ jsx82("div", { className, children: df.component });
-}
-
-// src/dynamicFlow/DynamicFlowWithRef.tsx
-import {
-  forwardRef,
-  useImperativeHandle
-} from "react";
-import { jsx as jsx83 } from "react/jsx-runtime";
-var DynamicFlowWithRef = forwardRef(function DynamicFlowWithRef2(props, ref) {
-  const { className = "" } = props;
-  const df = useDynamicFlowWise(props);
-  useImperativeHandle(
-    ref,
-    () => ({
-      getValue: async () => {
-        var _a;
-        return (_a = await df.getSubmittableValue()) != null ? _a : null;
-      },
-      validate: () => df.validate()
-    }),
-    []
-  );
-  return /* @__PURE__ */ jsx83("div", { className, children: df.component });
-});
-
 // src/index.ts
 import { findRendererPropsByType } from "@wise/dynamic-flow-client";
 
@@ -4758,7 +4754,7 @@ var translations = languages.reduce(
 var i18n_default = translations;
 export {
   DynamicFlow,
-  DynamicFlowWithRef,
+  DynamicForm,
   Header11 as Header,
   Media2 as Media,
   findRendererPropsByType,

package/build/types/dynamicFlow/DynamicFlow.d.ts

@@ -1,7 +1,27 @@
-import type { DynamicFlowProps } from './DynamicFlowProps';
-export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-export type Prettify<T> = {
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { DynamicFlowProps as DynamicFlowCoreProps, DynamicFormController } from '@wise/dynamic-flow-client';
+type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+type Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
-export declare const wiseRenderers: import("@wise/dynamic-flow-types/renderers").Renderers;
+export type DynamicFlowProps = Prettify<MakeOptional<Omit<DynamicFlowCoreProps, 'httpClient'>, 'renderers' | 'onLink'> & {
+    className?: string;
+    /**
+     * @deprecated Use `features` prop with `hideStepTitle` instead.
+     */
+    displayStepTitle?: boolean;
+    customFetch?: DynamicFlowCoreProps['httpClient'];
+    onAnalytics?: DynamicFlowCoreProps['onEvent'];
+}>;
 export declare function DynamicFlow(props: DynamicFlowProps): import("react/jsx-runtime").JSX.Element;
+export type DynamicFormProps = Omit<DynamicFlowProps, 'onCompletion'> & {
+    onValueChange?: () => void;
+    onCompletion?: DynamicFlowProps['onCompletion'];
+};
+/**
+ * DynamicForm is like DynamicFlow, but it also accepts a ForwardedRef.
+ * This ref conforms to the DynamicFormController type, containing two functions: `getValue` and `validate`.
+ * @experimental This component may be changed in the future without notice.
+ */
+export declare const DynamicForm: ForwardRefExoticComponent<DynamicFormProps & RefAttributes<DynamicFormController>>;
+export {};

package/build/types/index.d.ts

@@ -1,7 +1,7 @@
 export { makeHttpClient as makeCustomFetch } from '@wise/dynamic-flow-client';
-export type { DynamicFlowProps } from './dynamicFlow/DynamicFlowProps';
-export { DynamicFlow } from './dynamicFlow/DynamicFlow';
-export { DynamicFlowWithRef, type DynamicFlowRef } from './dynamicFlow/DynamicFlowWithRef';
+export type { DynamicFormController } from '@wise/dynamic-flow-client';
+export type { DynamicFlowProps } from './dynamicFlow/DynamicFlow';
+export { DynamicFlow, DynamicForm } from './dynamicFlow/DynamicFlow';
 export { findRendererPropsByType } from '@wise/dynamic-flow-client';
-export { getMargin, Header, Media } from './dynamicFlow/renderers';
+export { Header, Media, getMargin } from './dynamicFlow/renderers';
 export { default as translations } from './i18n';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "5.2.0-exp-bits-29346f3",
+  "version": "5.2.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -71,7 +71,7 @@
     "vitest-fetch-mock": "0.4.5",
     "@wise/dynamic-flow-fixtures": "0.0.1",
     "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "4.2.0-exp-bits-29346f3"
+    "@wise/dynamic-flow-types": "4.3.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -85,8 +85,8 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "5.2.0-exp-bits-29346f3",
-    "@wise/dynamic-flow-types": "4.2.0-exp-bits-29346f3"
+    "@wise/dynamic-flow-client": "5.2.0",
+    "@wise/dynamic-flow-types": "4.3.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",

package/build/types/dynamicFlow/DynamicFlowProps.d.ts

@@ -1,11 +0,0 @@
-import type { DynamicFlowProps as DynamicFlowCoreProps } from '@wise/dynamic-flow-client';
-import { Prettify, MakeOptional } from './DynamicFlow';
-export type DynamicFlowProps = Prettify<MakeOptional<Omit<DynamicFlowCoreProps, 'httpClient'>, 'renderers' | 'onLink'> & {
-    className?: string;
-    /**
-     * @deprecated Use `features` prop with `hideStepTitle` instead.
-     */
-    displayStepTitle?: boolean;
-    customFetch?: DynamicFlowCoreProps['httpClient'];
-    onAnalytics?: DynamicFlowCoreProps['onEvent'];
-}>;

package/build/types/dynamicFlow/DynamicFlowWithRef.d.ts

@@ -1,22 +0,0 @@
-import { JsonElement } from '@wise/dynamic-flow-types/spec';
-import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
-import type { DynamicFlowProps } from './DynamicFlowProps';
-export type DynamicFlowWithRefProps = DynamicFlowProps & {
-    onValueChange?: () => void;
-};
-export type DynamicFlowRef = {
-    /**
-     * Returns the current value of the form, even if it doesn't pass validation.
-     */
-    getValue: () => Promise<JsonElement>;
-    /**
-     * triggers validation in every UI component and returns whether or not the current value is valid.
-     */
-    validate: () => boolean;
-};
-/**
- * DynamicFlowWithRef is like DynamicFlow, but it also accepts a ForwardedRef.
- * This ref conforms to the DynamicFormController type, containing two functions: `getValue` and `validate`.
- * @experimental This component may be changed in the future without notice.
- */
-export declare const DynamicFlowWithRef: ForwardRefExoticComponent<DynamicFlowWithRefProps & RefAttributes<DynamicFlowRef>>;

package/build/types/dynamicFlow/useDynamicFlowWise.d.ts

@@ -1,3 +0,0 @@
-import { useDynamicFlow } from '@wise/dynamic-flow-client';
-import { DynamicFlowProps } from './DynamicFlowProps';
-export declare const useDynamicFlowWise: (props: DynamicFlowProps) => ReturnType<typeof useDynamicFlow>;

package/build/types/dynamicFlow/useOnCopy.d.ts

@@ -1 +0,0 @@
-export declare const useOnCopy: () => (copiedContent: string | null) => void;

package/build/types/dynamicFlow/useWiseHttpClient.d.ts

@@ -1 +0,0 @@
-export declare const useWiseHttpClient: (httpClient: typeof globalThis.fetch) => typeof globalThis.fetch;