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

package/build/i18n/uk.json

@@ -1,6 +1,6 @@
 {
   "dynamicFlows.ArraySchema.addItem": "Зберегти",
-  "dynamicFlows.ArraySchema.addItemTitle": "Додати позицію",
+  "dynamicFlows.ArraySchema.addItemTitle": "Add Item",
   "dynamicFlows.ArraySchema.editItem": "Зберегти",
   "dynamicFlows.ArraySchema.maxItemsError": "Додайте {maxItems} або менше.",
   "dynamicFlows.ArraySchema.minItemsError": "Додайте принаймні {minItems}.",
@@ -24,7 +24,7 @@
   "dynamicFlows.ExternalConfirmation.open": "Відкрити в новій вкладці",
   "dynamicFlows.ExternalConfirmation.title": "Підтвердьте",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "Вибачте, але цей файл завеликий. Завантажте менший файл.",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Цей формат файлу не підтримується. Завантажте інший файл.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Sorry, that file format is not supported. Please upload a different file.",
   "dynamicFlows.Help.ariaLabel": "Натисніть тут, щоб дізнатися більше.",
   "dynamicFlows.MultiSelect.summary": "{first} і ще {count}",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Вибачте, але цей файл завеликий. Завантажте менший файл.",

package/build/main.css

@@ -176,6 +176,10 @@
 .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

@@ -57,10 +57,10 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var index_exports = {};
 __export(index_exports, {
   DynamicFlow: () => DynamicFlowCore,
-  DynamicForm: () => DynamicFormCore,
   findRendererPropsByType: () => findRendererPropsByType,
   makeHttpClient: () => makeHttpClient,
-  translations: () => i18n_default
+  translations: () => i18n_default,
+  useDynamicFlow: () => useDynamicFlow
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -778,7 +778,81 @@ var translations = {
 };
 var i18n_default = translations;
 
-// src/DynamicFlowCore.tsx
+// src/utils/type-validators.ts
+var isString = (value) => typeof value === "string";
+var isNumber = (value) => typeof value === "number" && !Number.isNaN(value);
+var isInteger = (value) => isNumber(value) && Math.floor(value) === value;
+var isBoolean = (value) => typeof value === "boolean";
+var isObject = (value) => !isNullish(value) && (value == null ? void 0 : value.constructor) === Object;
+var isArray = (value) => Array.isArray(value);
+var isNull = (value) => value === null;
+var isUndefined = (value) => typeof value === "undefined";
+var isNullish = (v) => isNull(v) || isUndefined(v);
+var isFile = (value) => value instanceof File;
+
+// src/renderers/utils.ts
+function findRendererPropsByType(root, type, predicate = () => true) {
+  if (isArray(root)) {
+    return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
+  }
+  return [
+    ...isType(root, type) && predicate(root) ? [root] : [],
+    ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate))
+  ];
+}
+var isType = (node, type) => node.type === type;
+var getChildren = (node) => {
+  switch (node.type) {
+    case "root":
+    case "box":
+    case "container":
+    case "form":
+    case "form-section":
+    case "step":
+    case "modal":
+    case "section":
+      return node.childrenProps;
+    case "columns":
+      return [...node.startChildrenProps, ...node.endChildrenProps];
+    case "modal-layout":
+      return node.content.childrenProps;
+    case "repeatable":
+      return node.editableItemProps ? [node.editableItemProps] : [];
+    case "input-select":
+      return node.childrenProps ? [node.childrenProps] : [];
+    case "tabs":
+      return node.tabs.flatMap((c) => c.childrenProps);
+    case "alert":
+    case "button":
+    case "input-checkbox":
+    case "input-date":
+    case "decision":
+    case "divider":
+    case "heading":
+    case "hidden":
+    case "image":
+    case "instructions":
+    case "input-integer":
+    case "list":
+    case "loading-indicator":
+    case "markdown":
+    case "input-multi-select":
+    case "input-upload-multi":
+    case "input-number":
+    case "money-input":
+    case "paragraph":
+    case "progress":
+    case "review":
+    case "search":
+    case "status-list":
+    case "input-text":
+    case "input-upload":
+    case "external-confirmation":
+      return [];
+  }
+};
+
+// src/useDynamicFlow.tsx
 var import_react4 = require("react");
 
 // src/common/errorBoundary/ErrorBoundary.tsx
@@ -882,80 +956,6 @@ var CoreContainerRenderer = {
   render: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children })
 };
 
-// src/utils/type-validators.ts
-var isString = (value) => typeof value === "string";
-var isNumber = (value) => typeof value === "number" && !Number.isNaN(value);
-var isInteger = (value) => isNumber(value) && Math.floor(value) === value;
-var isBoolean = (value) => typeof value === "boolean";
-var isObject = (value) => !isNullish(value) && (value == null ? void 0 : value.constructor) === Object;
-var isArray = (value) => Array.isArray(value);
-var isNull = (value) => value === null;
-var isUndefined = (value) => typeof value === "undefined";
-var isNullish = (v) => isNull(v) || isUndefined(v);
-var isFile = (value) => value instanceof File;
-
-// src/renderers/utils.ts
-function findRendererPropsByType(root, type, predicate = () => true) {
-  if (isArray(root)) {
-    return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
-  }
-  return [
-    ...isType(root, type) && predicate(root) ? [root] : [],
-    ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate))
-  ];
-}
-var isType = (node, type) => node.type === type;
-var getChildren = (node) => {
-  switch (node.type) {
-    case "root":
-    case "box":
-    case "container":
-    case "form":
-    case "form-section":
-    case "step":
-    case "modal":
-    case "section":
-      return node.childrenProps;
-    case "columns":
-      return [...node.startChildrenProps, ...node.endChildrenProps];
-    case "modal-layout":
-      return node.content.childrenProps;
-    case "repeatable":
-      return node.editableItemProps ? [node.editableItemProps] : [];
-    case "input-select":
-      return node.childrenProps ? [node.childrenProps] : [];
-    case "tabs":
-      return node.tabs.flatMap((c) => c.childrenProps);
-    case "alert":
-    case "button":
-    case "input-checkbox":
-    case "input-date":
-    case "decision":
-    case "divider":
-    case "heading":
-    case "hidden":
-    case "image":
-    case "instructions":
-    case "input-integer":
-    case "list":
-    case "loading-indicator":
-    case "markdown":
-    case "input-multi-select":
-    case "input-upload-multi":
-    case "input-number":
-    case "money-input":
-    case "paragraph":
-    case "progress":
-    case "review":
-    case "search":
-    case "status-list":
-    case "input-text":
-    case "input-upload":
-    case "external-confirmation":
-      return [];
-  }
-};
-
 // src/renderers/CoreRootRenderer.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CoreRootRenderer = {
@@ -1979,7 +1979,7 @@ var getComponentAlertProps = (component, rendererMapperProps) => "alert" in comp
   markdown: component.alert.content
 }, rendererMapperProps) : null;
 
-// src/useDynamicFlowCore.tsx
+// src/useDynamicFlowController.tsx
 var import_react3 = require("react");
 var import_react_intl7 = require("react-intl");
 
@@ -2000,8 +2000,7 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
     uid: "root",
     stepComponent: null,
     stepStack: [],
-    isNativeBackEnabled: backConfig.isNativeBackEnabled,
-    isFlowCancellable: backConfig.isFlowCancellable,
+    backConfig,
     _update(updateFn) {
       update(this, updateFn);
     },
@@ -2135,7 +2134,7 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
       var _a, _b;
       const navigation = (_a = this.getStep()) == null ? void 0 : _a.step.navigation;
       const stepHasBehavior = Boolean((_b = navigation == null ? void 0 : navigation.back) != null ? _b : navigation == null ? void 0 : navigation.backButton);
-      return this.isFlowCancellable || this.stepStack.length > 1 && this.isNativeBackEnabled || stepHasBehavior;
+      return this.backConfig.isFlowCancellable || this.stepStack.length > 1 && this.backConfig.isNativeBackEnabled || stepHasBehavior;
     }
   };
   return rootComponent;
@@ -7325,8 +7324,8 @@ function useStableCallback(handler) {
   return (0, import_react2.useCallback)((...args) => ref.current ? ref.current(...args) : null, []);
 }
 
-// src/useDynamicFlowCore.tsx
-function useDynamicFlowCore(props) {
+// src/useDynamicFlowController.tsx
+function useDynamicFlowController(props) {
   const _a = props, { flowId, initialAction, initialStep, features } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "features"]);
   const httpClient = useStableCallback(rest.httpClient);
   const onCancellation = useStableCallback(rest.onCancellation);
@@ -7725,20 +7724,29 @@ function useDynamicFlowCore(props) {
     trackCoreEvent("Step Shown", { isFirstStep: true });
     hasMappedInitialStep.current = true;
   }
-  return { rootComponent: rootComponentRef.current };
+  return {
+    rootComponent: rootComponentRef.current,
+    cancelFlow: closeWithCancellation,
+    navigateBack: () => {
+      var _a2;
+      if (((_a2 = rootComponentRef.current.stepStack) == null ? void 0 : _a2.length) > 1) {
+        rootComponentRef.current.navigateBack();
+      } else {
+        closeWithCancellation();
+      }
+      rootComponentRef.current.setLoadingState("idle");
+    }
+  };
 }
 var useRerender = () => {
   const [, setState] = (0, import_react3.useState)({});
   return (0, import_react3.useCallback)(() => setState({}), []);
 };
 
-// src/utils/normalise-flow-id.ts
-var normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, "-");
-
-// src/utils/scrollToTop.ts
-var getScrollToTop = (normalisedFlowId, className3) => (behavior) => {
+// src/utils/getScrollToTop.ts
+var getScrollToTop = (normalisedFlowId, className2) => (behavior) => {
   var _a;
-  const element = document.querySelector(`div#${normalisedFlowId}.${className3}`);
+  const element = document.querySelector(`div#${normalisedFlowId}.${className2}`);
   if (!element || !window) {
     return;
   }
@@ -7749,11 +7757,14 @@ var getScrollToTop = (normalisedFlowId, className3) => (behavior) => {
   }
 };
 
-// src/DynamicFlowCore.tsx
+// src/utils/normalise-flow-id.ts
+var normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, "-");
+
+// src/useDynamicFlow.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var className = "dynamic-flow";
-function DynamicFlowCore(props) {
-  var _a;
+function useDynamicFlow(props) {
+  var _a, _b, _c;
   const { flowId, renderers, httpClient, onEvent, onError, onLog } = props;
   const normalisedFlowId = normaliseFlowId(flowId);
   const scrollToTop = (0, import_react4.useMemo)(
@@ -7764,7 +7775,10 @@ function DynamicFlowCore(props) {
     var _a2;
     return new FeatureFlags((_a2 = props.features) != null ? _a2 : {});
   }, []);
-  const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({}, props), { features, scrollToTop }));
+  const { rootComponent, cancelFlow, navigateBack } = useDynamicFlowController(__spreadProps(__spreadValues({}, props), {
+    features,
+    scrollToTop
+  }));
   const render = (0, import_react4.useMemo)(
     () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
     [renderers]
@@ -7777,95 +7791,31 @@ function DynamicFlowCore(props) {
     }),
     stepLoadingState: rootComponent.getLoadingState()
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    ErrorBoundary_default,
-    {
-      onError: (error) => {
-        onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
-        onError == null ? void 0 : onError(error);
-        onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", { errorMessage: getErrorMessage(error) });
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
-    }
-  );
+  return {
+    title: (_c = (_b = rootComponent.getStep()) == null ? void 0 : _b.title) != null ? _c : "",
+    getSubmittableValue: async () => rootComponent.getSubmittableValue(),
+    validate: () => rootComponent.validate(),
+    rootComponent,
+    cancelFlow,
+    navigateBack,
+    component: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ErrorBoundary_default,
+      {
+        onError: (error) => {
+          onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
+          onError == null ? void 0 : onError(error);
+          onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", {
+            errorMessage: getErrorMessage(error)
+          });
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
+      }
+    )
+  };
 }
 
-// src/DynamicFormCore.tsx
-var import_react5 = require("react");
-
-// src/utils/openLinkInNewTab.tsx
-var openLinkInNewTab = (url) => {
-  var _a;
-  try {
-    const w = (_a = window == null ? void 0 : window.open) == null ? void 0 : _a.call(window, url, "_blank");
-    return Boolean(w);
-  } catch (e) {
-    return false;
-  }
-};
-
-// src/DynamicFormCore.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var className2 = "dynamic-flow";
-var DynamicFormCore = (0, import_react5.forwardRef)(function DynamicFormCore2(props, ref) {
-  var _a;
-  const {
-    onCompletion = () => {
-    },
-    httpClient,
-    onEvent,
-    onError,
-    onLink = openLinkInNewTab,
-    renderers
-  } = props;
-  const normalisedFlowId = normaliseFlowId(props.flowId);
-  const scrollToTop = (0, import_react5.useMemo)(
-    () => getScrollToTop(normalisedFlowId, className2),
-    [normalisedFlowId]
-  );
-  const features = (0, import_react5.useMemo)(() => {
-    var _a2;
-    return new FeatureFlags((_a2 = props.features) != null ? _a2 : {});
-  }, []);
-  const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({
-    onCompletion
-  }, props), {
-    features,
-    scrollToTop,
-    onLink
-  }));
-  (0, import_react5.useImperativeHandle)(
-    ref,
-    () => ({
-      getValue: async () => {
-        var _a2;
-        return (_a2 = await rootComponent.getSubmittableValue()) != null ? _a2 : null;
-      },
-      validate: () => rootComponent.validate()
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const render = (0, import_react5.useMemo)(
-    () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
-    [renderers]
-  );
-  const tree = componentToRendererProps(rootComponent, {
-    features,
-    render,
-    httpClient,
-    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : (() => {
-    }),
-    stepLoadingState: rootComponent.getLoadingState()
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    ErrorBoundary_default,
-    {
-      onError: (error) => {
-        onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed");
-        onError(error);
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: normalisedFlowId, className: className2, children: render(tree) })
-    }
-  );
-});
+// src/DynamicFlowCore.tsx
+function DynamicFlowCore(props) {
+  const df = useDynamicFlow(props);
+  return df.component;
+}

package/build/main.mjs

@@ -751,7 +751,81 @@ var translations = {
 };
 var i18n_default = translations;
 
-// src/DynamicFlowCore.tsx
+// src/utils/type-validators.ts
+var isString = (value) => typeof value === "string";
+var isNumber = (value) => typeof value === "number" && !Number.isNaN(value);
+var isInteger = (value) => isNumber(value) && Math.floor(value) === value;
+var isBoolean = (value) => typeof value === "boolean";
+var isObject = (value) => !isNullish(value) && (value == null ? void 0 : value.constructor) === Object;
+var isArray = (value) => Array.isArray(value);
+var isNull = (value) => value === null;
+var isUndefined = (value) => typeof value === "undefined";
+var isNullish = (v) => isNull(v) || isUndefined(v);
+var isFile = (value) => value instanceof File;
+
+// src/renderers/utils.ts
+function findRendererPropsByType(root, type, predicate = () => true) {
+  if (isArray(root)) {
+    return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
+  }
+  return [
+    ...isType(root, type) && predicate(root) ? [root] : [],
+    ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate))
+  ];
+}
+var isType = (node, type) => node.type === type;
+var getChildren = (node) => {
+  switch (node.type) {
+    case "root":
+    case "box":
+    case "container":
+    case "form":
+    case "form-section":
+    case "step":
+    case "modal":
+    case "section":
+      return node.childrenProps;
+    case "columns":
+      return [...node.startChildrenProps, ...node.endChildrenProps];
+    case "modal-layout":
+      return node.content.childrenProps;
+    case "repeatable":
+      return node.editableItemProps ? [node.editableItemProps] : [];
+    case "input-select":
+      return node.childrenProps ? [node.childrenProps] : [];
+    case "tabs":
+      return node.tabs.flatMap((c) => c.childrenProps);
+    case "alert":
+    case "button":
+    case "input-checkbox":
+    case "input-date":
+    case "decision":
+    case "divider":
+    case "heading":
+    case "hidden":
+    case "image":
+    case "instructions":
+    case "input-integer":
+    case "list":
+    case "loading-indicator":
+    case "markdown":
+    case "input-multi-select":
+    case "input-upload-multi":
+    case "input-number":
+    case "money-input":
+    case "paragraph":
+    case "progress":
+    case "review":
+    case "search":
+    case "status-list":
+    case "input-text":
+    case "input-upload":
+    case "external-confirmation":
+      return [];
+  }
+};
+
+// src/useDynamicFlow.tsx
 import { useMemo as useMemo2 } from "react";
 
 // src/common/errorBoundary/ErrorBoundary.tsx
@@ -855,80 +929,6 @@ var CoreContainerRenderer = {
   render: ({ children }) => /* @__PURE__ */ jsx3(Fragment2, { children })
 };
 
-// src/utils/type-validators.ts
-var isString = (value) => typeof value === "string";
-var isNumber = (value) => typeof value === "number" && !Number.isNaN(value);
-var isInteger = (value) => isNumber(value) && Math.floor(value) === value;
-var isBoolean = (value) => typeof value === "boolean";
-var isObject = (value) => !isNullish(value) && (value == null ? void 0 : value.constructor) === Object;
-var isArray = (value) => Array.isArray(value);
-var isNull = (value) => value === null;
-var isUndefined = (value) => typeof value === "undefined";
-var isNullish = (v) => isNull(v) || isUndefined(v);
-var isFile = (value) => value instanceof File;
-
-// src/renderers/utils.ts
-function findRendererPropsByType(root, type, predicate = () => true) {
-  if (isArray(root)) {
-    return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
-  }
-  return [
-    ...isType(root, type) && predicate(root) ? [root] : [],
-    ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate))
-  ];
-}
-var isType = (node, type) => node.type === type;
-var getChildren = (node) => {
-  switch (node.type) {
-    case "root":
-    case "box":
-    case "container":
-    case "form":
-    case "form-section":
-    case "step":
-    case "modal":
-    case "section":
-      return node.childrenProps;
-    case "columns":
-      return [...node.startChildrenProps, ...node.endChildrenProps];
-    case "modal-layout":
-      return node.content.childrenProps;
-    case "repeatable":
-      return node.editableItemProps ? [node.editableItemProps] : [];
-    case "input-select":
-      return node.childrenProps ? [node.childrenProps] : [];
-    case "tabs":
-      return node.tabs.flatMap((c) => c.childrenProps);
-    case "alert":
-    case "button":
-    case "input-checkbox":
-    case "input-date":
-    case "decision":
-    case "divider":
-    case "heading":
-    case "hidden":
-    case "image":
-    case "instructions":
-    case "input-integer":
-    case "list":
-    case "loading-indicator":
-    case "markdown":
-    case "input-multi-select":
-    case "input-upload-multi":
-    case "input-number":
-    case "money-input":
-    case "paragraph":
-    case "progress":
-    case "review":
-    case "search":
-    case "status-list":
-    case "input-text":
-    case "input-upload":
-    case "external-confirmation":
-      return [];
-  }
-};
-
 // src/renderers/CoreRootRenderer.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var CoreRootRenderer = {
@@ -1952,7 +1952,7 @@ var getComponentAlertProps = (component, rendererMapperProps) => "alert" in comp
   markdown: component.alert.content
 }, rendererMapperProps) : null;
 
-// src/useDynamicFlowCore.tsx
+// src/useDynamicFlowController.tsx
 import { useCallback as useCallback2, useEffect, useMemo, useRef as useRef2, useState } from "react";
 import { useIntl as useIntl2 } from "react-intl";
 
@@ -1973,8 +1973,7 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
     uid: "root",
     stepComponent: null,
     stepStack: [],
-    isNativeBackEnabled: backConfig.isNativeBackEnabled,
-    isFlowCancellable: backConfig.isFlowCancellable,
+    backConfig,
     _update(updateFn) {
       update(this, updateFn);
     },
@@ -2108,7 +2107,7 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
       var _a, _b;
       const navigation = (_a = this.getStep()) == null ? void 0 : _a.step.navigation;
       const stepHasBehavior = Boolean((_b = navigation == null ? void 0 : navigation.back) != null ? _b : navigation == null ? void 0 : navigation.backButton);
-      return this.isFlowCancellable || this.stepStack.length > 1 && this.isNativeBackEnabled || stepHasBehavior;
+      return this.backConfig.isFlowCancellable || this.stepStack.length > 1 && this.backConfig.isNativeBackEnabled || stepHasBehavior;
     }
   };
   return rootComponent;
@@ -7298,8 +7297,8 @@ function useStableCallback(handler) {
   return useCallback((...args) => ref.current ? ref.current(...args) : null, []);
 }
 
-// src/useDynamicFlowCore.tsx
-function useDynamicFlowCore(props) {
+// src/useDynamicFlowController.tsx
+function useDynamicFlowController(props) {
   const _a = props, { flowId, initialAction, initialStep, features } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "features"]);
   const httpClient = useStableCallback(rest.httpClient);
   const onCancellation = useStableCallback(rest.onCancellation);
@@ -7698,20 +7697,29 @@ function useDynamicFlowCore(props) {
     trackCoreEvent("Step Shown", { isFirstStep: true });
     hasMappedInitialStep.current = true;
   }
-  return { rootComponent: rootComponentRef.current };
+  return {
+    rootComponent: rootComponentRef.current,
+    cancelFlow: closeWithCancellation,
+    navigateBack: () => {
+      var _a2;
+      if (((_a2 = rootComponentRef.current.stepStack) == null ? void 0 : _a2.length) > 1) {
+        rootComponentRef.current.navigateBack();
+      } else {
+        closeWithCancellation();
+      }
+      rootComponentRef.current.setLoadingState("idle");
+    }
+  };
 }
 var useRerender = () => {
   const [, setState] = useState({});
   return useCallback2(() => setState({}), []);
 };
 
-// src/utils/normalise-flow-id.ts
-var normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, "-");
-
-// src/utils/scrollToTop.ts
-var getScrollToTop = (normalisedFlowId, className3) => (behavior) => {
+// src/utils/getScrollToTop.ts
+var getScrollToTop = (normalisedFlowId, className2) => (behavior) => {
   var _a;
-  const element = document.querySelector(`div#${normalisedFlowId}.${className3}`);
+  const element = document.querySelector(`div#${normalisedFlowId}.${className2}`);
   if (!element || !window) {
     return;
   }
@@ -7722,11 +7730,14 @@ var getScrollToTop = (normalisedFlowId, className3) => (behavior) => {
   }
 };
 
-// src/DynamicFlowCore.tsx
+// src/utils/normalise-flow-id.ts
+var normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, "-");
+
+// src/useDynamicFlow.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var className = "dynamic-flow";
-function DynamicFlowCore(props) {
-  var _a;
+function useDynamicFlow(props) {
+  var _a, _b, _c;
   const { flowId, renderers, httpClient, onEvent, onError, onLog } = props;
   const normalisedFlowId = normaliseFlowId(flowId);
   const scrollToTop = useMemo2(
@@ -7737,7 +7748,10 @@ function DynamicFlowCore(props) {
     var _a2;
     return new FeatureFlags((_a2 = props.features) != null ? _a2 : {});
   }, []);
-  const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({}, props), { features, scrollToTop }));
+  const { rootComponent, cancelFlow, navigateBack } = useDynamicFlowController(__spreadProps(__spreadValues({}, props), {
+    features,
+    scrollToTop
+  }));
   const render = useMemo2(
     () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
     [renderers]
@@ -7750,102 +7764,38 @@ function DynamicFlowCore(props) {
     }),
     stepLoadingState: rootComponent.getLoadingState()
   });
-  return /* @__PURE__ */ jsx6(
-    ErrorBoundary_default,
-    {
-      onError: (error) => {
-        onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
-        onError == null ? void 0 : onError(error);
-        onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", { errorMessage: getErrorMessage(error) });
-      },
-      children: /* @__PURE__ */ jsx6("div", { id: normalisedFlowId, className, children: render(tree) })
-    }
-  );
+  return {
+    title: (_c = (_b = rootComponent.getStep()) == null ? void 0 : _b.title) != null ? _c : "",
+    getSubmittableValue: async () => rootComponent.getSubmittableValue(),
+    validate: () => rootComponent.validate(),
+    rootComponent,
+    cancelFlow,
+    navigateBack,
+    component: /* @__PURE__ */ jsx6(
+      ErrorBoundary_default,
+      {
+        onError: (error) => {
+          onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
+          onError == null ? void 0 : onError(error);
+          onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", {
+            errorMessage: getErrorMessage(error)
+          });
+        },
+        children: /* @__PURE__ */ jsx6("div", { id: normalisedFlowId, className, children: render(tree) })
+      }
+    )
+  };
 }
 
-// src/DynamicFormCore.tsx
-import { forwardRef, useImperativeHandle, useMemo as useMemo3 } from "react";
-
-// src/utils/openLinkInNewTab.tsx
-var openLinkInNewTab = (url) => {
-  var _a;
-  try {
-    const w = (_a = window == null ? void 0 : window.open) == null ? void 0 : _a.call(window, url, "_blank");
-    return Boolean(w);
-  } catch (e) {
-    return false;
-  }
-};
-
-// src/DynamicFormCore.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var className2 = "dynamic-flow";
-var DynamicFormCore = forwardRef(function DynamicFormCore2(props, ref) {
-  var _a;
-  const {
-    onCompletion = () => {
-    },
-    httpClient,
-    onEvent,
-    onError,
-    onLink = openLinkInNewTab,
-    renderers
-  } = props;
-  const normalisedFlowId = normaliseFlowId(props.flowId);
-  const scrollToTop = useMemo3(
-    () => getScrollToTop(normalisedFlowId, className2),
-    [normalisedFlowId]
-  );
-  const features = useMemo3(() => {
-    var _a2;
-    return new FeatureFlags((_a2 = props.features) != null ? _a2 : {});
-  }, []);
-  const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({
-    onCompletion
-  }, props), {
-    features,
-    scrollToTop,
-    onLink
-  }));
-  useImperativeHandle(
-    ref,
-    () => ({
-      getValue: async () => {
-        var _a2;
-        return (_a2 = await rootComponent.getSubmittableValue()) != null ? _a2 : null;
-      },
-      validate: () => rootComponent.validate()
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const render = useMemo3(
-    () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
-    [renderers]
-  );
-  const tree = componentToRendererProps(rootComponent, {
-    features,
-    render,
-    httpClient,
-    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : (() => {
-    }),
-    stepLoadingState: rootComponent.getLoadingState()
-  });
-  return /* @__PURE__ */ jsx7(
-    ErrorBoundary_default,
-    {
-      onError: (error) => {
-        onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed");
-        onError(error);
-      },
-      children: /* @__PURE__ */ jsx7("div", { id: normalisedFlowId, className: className2, children: render(tree) })
-    }
-  );
-});
+// src/DynamicFlowCore.tsx
+function DynamicFlowCore(props) {
+  const df = useDynamicFlow(props);
+  return df.component;
+}
 export {
   DynamicFlowCore as DynamicFlow,
-  DynamicFormCore as DynamicForm,
   findRendererPropsByType,
   makeHttpClient,
-  i18n_default as translations
+  i18n_default as translations,
+  useDynamicFlow
 };

package/build/types/DynamicFlowCore.d.ts

@@ -1,2 +1,5 @@
 import type { DynamicFlowCoreProps } from './types';
+/**
+ * @deprecated Use `useDynamicFlow` hook instead.
+ */
 export declare function DynamicFlowCore(props: DynamicFlowCoreProps): import("react/jsx-runtime").JSX.Element;

package/build/types/domain/components/RootDomainComponent.d.ts

@@ -8,8 +8,10 @@ export type RootDomainComponent = BaseComponent & {
     kind: 'step';
     stepComponent: StepDomainComponent | null;
     stepStack: StepDomainComponent[];
-    isNativeBackEnabled: boolean;
-    isFlowCancellable: boolean;
+    backConfig: {
+        isNativeBackEnabled: boolean;
+        isFlowCancellable: boolean;
+    };
     canPerformBack: () => boolean;
     dismissAllModals: () => void;
     dismissModal: () => void;

package/build/types/index.d.ts

@@ -1,6 +1,6 @@
 export { makeHttpClient } from './common/makeHttpClient';
 export { default as translations } from './i18n';
-export type { DynamicFlowCoreProps as DynamicFlowProps, DynamicFormController } from './types';
-export { DynamicFlowCore as DynamicFlow } from './DynamicFlowCore';
-export { DynamicFormCore as DynamicForm } from './DynamicFormCore';
+export type { DynamicFlowCoreProps as DynamicFlowProps } from './types';
 export { findRendererPropsByType } from './renderers/utils';
+export { useDynamicFlow } from './useDynamicFlow';
+export { DynamicFlowCore as DynamicFlow } from './DynamicFlowCore';

package/build/types/types.d.ts

@@ -1,5 +1,5 @@
 import type { Renderers } from '@wise/dynamic-flow-types/renderers';
-import type { JsonElement, Model, Step } from '@wise/dynamic-flow-types/spec';
+import type { Model, Step } from '@wise/dynamic-flow-types/spec';
 import type { AnalyticsEventHandler, LoggingEventHandler } from './domain/features/events';
 export type DynamicFlowCoreProps = {
     flowId: string;
@@ -16,16 +16,6 @@ export type DynamicFlowCoreProps = {
     onLog?: LoggingEventHandler;
     onLink: (url: string) => boolean;
 };
-export type DynamicFormController = {
-    /**
-     * 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;
-};
 export type InitialAction = {
     id?: string;
     url: string;

package/build/types/useDynamicFlow.d.ts

@@ -0,0 +1,13 @@
+import type { DynamicFlowCoreProps } from './types';
+/**
+ * @experimental This hook may be changed or removed in the future without notice.
+ */
+export declare function useDynamicFlow(props: DynamicFlowCoreProps): {
+    title: string;
+    getSubmittableValue: () => Promise<import("@wise/dynamic-flow-types/spec").JsonElement>;
+    validate: () => boolean;
+    rootComponent: import("./domain/components/RootDomainComponent").RootDomainComponent;
+    cancelFlow: () => void;
+    navigateBack: () => void;
+    component: import("react/jsx-runtime").JSX.Element;
+};

package/build/types/{useDynamicFlowCore.d.ts → useDynamicFlowController.d.ts}

@@ -8,7 +8,9 @@ type UseDynamicFlowCoreProps = Omit<DynamicFlowCoreProps, 'renderers' | 'feature
     scrollToTop?: ScrollToTop;
     onLink: (url: string) => boolean;
 };
-export declare function useDynamicFlowCore(props: UseDynamicFlowCoreProps): {
+export declare function useDynamicFlowController(props: UseDynamicFlowCoreProps): {
     rootComponent: RootDomainComponent;
+    cancelFlow: () => void;
+    navigateBack: () => void;
 };
 export {};

package/build/types/utils/{scrollToTop.d.ts → getScrollToTop.d.ts}

@@ -1,2 +1,2 @@
-import { ScrollToTop } from '../domain/types';
+import type { ScrollToTop } from '../domain/types';
 export declare const getScrollToTop: (normalisedFlowId: string, className: string) => ScrollToTop;

package/build/types/utils/useFeatureFlags.d.ts

@@ -0,0 +1,2 @@
+import { FeatureFlags } from '../domain/mappers/utils/FeatureFlags';
+export declare const useFeatureFlags: (features: Record<string, unknown> | undefined) => FeatureFlags;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "5.1.4",
+  "version": "5.2.0-exp-bits-29346f3",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -72,8 +72,8 @@
     "typescript": "5.9.3",
     "vitest": "4.0.16",
     "vitest-fetch-mock": "0.4.5",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -86,7 +86,7 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-types": "4.2.0"
+    "@wise/dynamic-flow-types": "4.2.0-exp-bits-29346f3"
   },
   "scripts": {
     "dev": "EXCLUDE_VISUAL_TESTS=true pnpm storybook dev -p 3003",

package/build/types/DynamicFormCore.d.ts

@@ -1,11 +0,0 @@
-import type { DynamicFlowCoreProps, DynamicFormController } from './types';
-import type { OnValueChange } from './domain/types';
-/**
- * DynamicFormCore is like DynamicFlowCore, 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 DynamicFormCore: import("react").ForwardRefExoticComponent<Omit<DynamicFlowCoreProps, "onCompletion"> & {
-    onValueChange?: OnValueChange;
-    onCompletion?: DynamicFlowCoreProps["onCompletion"];
-} & import("react").RefAttributes<DynamicFormController>>;