@wise/dynamic-flow-client 4.19.1 → 4.19.3-experimental-6e22f2a

package/build/main.js

@@ -1245,7 +1245,7 @@ var CoreRootRenderer = {
   canRenderType: "root",
   render: ({ children, childrenProps }) => {
     const [stepProps] = findRendererPropsByType(childrenProps, "step");
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow", children });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow-step", children });
   }
 };
 
@@ -2258,7 +2258,7 @@ var getInputUpdateFunction = (updateComponent) => {
 };
 
 // src/revamp/domain/components/RootDomainComponent.ts
-var createRootDomainComponent = (updateComponent) => {
+var createRootDomainComponent = (updateComponent, scrollToTop) => {
   const update = getInputUpdateFunction(updateComponent);
   const rootComponent = {
     type: "root",
@@ -2319,10 +2319,12 @@ var createRootDomainComponent = (updateComponent) => {
       var _a;
       (_a = this.stepComponent) == null ? void 0 : _a.stop();
     },
-    setStep(stepComponent) {
+    setStep(step) {
+      const scrollAfterUpdate = getScrollAfterUpdate(step, this.stepComponent, scrollToTop);
       this._update((draft) => {
-        draft.stepComponent = stepComponent;
+        draft.stepComponent = step;
       });
+      scrollAfterUpdate == null ? void 0 : scrollAfterUpdate();
     },
     getRefreshUrl() {
       var _a, _b, _c, _d;
@@ -2331,6 +2333,16 @@ var createRootDomainComponent = (updateComponent) => {
   };
   return rootComponent;
 };
+var getScrollAfterUpdate = (newStep, currentStep, scrollToTop) => {
+  if (!currentStep) {
+    return void 0;
+  }
+  const isNewStep = newStep.uid !== currentStep.uid;
+  const hasNewError = newStep.error != null && newStep.error !== currentStep.error;
+  const shouldScroll = isNewStep || hasNewError;
+  const scrollBehavior = hasNewError ? "smooth" : "instant";
+  return shouldScroll ? () => scrollToTop(scrollBehavior) : void 0;
+};
 
 // src/revamp/domain/components/ModalComponent.ts
 var createModalContentComponent = (modalProps, updateComponent) => {
@@ -7168,13 +7180,16 @@ function useDynamicFlowCore(props) {
   const onError = useStableCallback(rest.onError);
   const onEvent = useStableCallback(rest.onEvent);
   const onLog = useStableCallback(rest.onLog);
+  const scrollToTop = useStableCallback(props.scrollToTop);
   const { formatMessage, locale } = (0, import_react_intl7.useIntl)();
   const getErrorMessageFunctions = (0, import_react3.useMemo)(
     () => getSchemaErrorMessageFunction(formatMessage, locale),
     [formatMessage, locale]
   );
   const rerender = useRerender();
-  const rootComponentRef = (0, import_react3.useRef)(createRootDomainComponent(rerender));
+  const rootComponentRef = (0, import_react3.useRef)(
+    createRootDomainComponent(rerender, scrollToTop)
+  );
   const stepCount = (0, import_react3.useRef)(0);
   const stepRef = (0, import_react3.useRef)(initialStep != null ? initialStep : null);
   const etagRef = (0, import_react3.useRef)(null);
@@ -7506,10 +7521,18 @@ var useRerender = () => {
 
 // src/revamp/DynamicFlowCore.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var className = "dynamic-flow";
 function DynamicFlowCore(props) {
   var _a;
-  const { rootComponent } = useDynamicFlowCore(props);
-  const { renderers, httpClient, onEvent, onError, onLog } = props;
+  const { flowId, renderers, httpClient, onEvent, onError, onLog } = props;
+  const normalisedFlowId = flowId.replace(" ", "-");
+  const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({}, props), {
+    scrollToTop: (behavior) => {
+      var _a2;
+      const element = document.querySelector(`div#${normalisedFlowId}.${className}`);
+      (_a2 = element == null ? void 0 : element.scrollIntoView) == null ? void 0 : _a2.call(element, { behavior });
+    }
+  }));
   const render = (0, import_react4.useMemo)(
     () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
     [renderers]
@@ -7529,7 +7552,7 @@ function DynamicFlowCore(props) {
         onError == null ? void 0 : onError(error);
         onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", { errorMessage: getErrorMessage(error) });
       },
-      children: render(tree)
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
     }
   );
 }
@@ -8885,7 +8908,7 @@ function DynamicButtonWithoutBehavior(props) {
   const type = getButtonType(component.context, componentAction);
   const priority = getButtonPriority(component.control, componentAction);
   const { loading } = useDynamicFlow();
-  const className = getMargin(component.margin || "md");
+  const className2 = getMargin(component.margin || "md");
   const disabled = loading || component.disabled || (componentAction == null ? void 0 : componentAction.disabled);
   const title = (_b = (_a = component.title) != null ? _a : componentAction == null ? void 0 : componentAction.title) != null ? _b : "";
   const onClick = () => {
@@ -8900,7 +8923,7 @@ function DynamicButtonWithoutBehavior(props) {
       type: priority === "tertiary" ? void 0 : type,
       priority,
       block: true,
-      className,
+      className: className2,
       disabled,
       onClick,
       children: title
@@ -8913,7 +8936,7 @@ function DynamicButtonWithBehavior(props) {
   const type = getButtonTypeFromContext(component.context);
   const priority = (_a = component.control) != null ? _a : "secondary";
   const { loading } = useDynamicFlow();
-  const className = getMargin(component.margin || "md");
+  const className2 = getMargin(component.margin || "md");
   const disabled = loading || component.disabled;
   const title = (_b = component.title) != null ? _b : "";
   const onClick = () => {
@@ -8952,7 +8975,7 @@ function DynamicButtonWithBehavior(props) {
       type: priority === "tertiary" ? void 0 : type,
       priority,
       block: true,
-      className,
+      className: className2,
       disabled,
       onClick,
       children: title
@@ -9042,8 +9065,8 @@ var DynamicDecision_default = DynamicDecision;
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var DynamicDivider = ({ component }) => {
   const margin = getMargin(component.margin);
-  const className = `m-t-0 ${margin}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("hr", { className });
+  const className2 = `m-t-0 ${margin}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("hr", { className: className2 });
 };
 var DynamicDivider_default = DynamicDivider;
 

package/build/main.mjs

@@ -1202,7 +1202,7 @@ var CoreRootRenderer = {
   canRenderType: "root",
   render: ({ children, childrenProps }) => {
     const [stepProps] = findRendererPropsByType(childrenProps, "step");
-    return /* @__PURE__ */ jsx4("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow", children });
+    return /* @__PURE__ */ jsx4("div", { id: stepProps == null ? void 0 : stepProps.id, className: "dynamic-flow-step", children });
   }
 };
 
@@ -2215,7 +2215,7 @@ var getInputUpdateFunction = (updateComponent) => {
 };
 
 // src/revamp/domain/components/RootDomainComponent.ts
-var createRootDomainComponent = (updateComponent) => {
+var createRootDomainComponent = (updateComponent, scrollToTop) => {
   const update = getInputUpdateFunction(updateComponent);
   const rootComponent = {
     type: "root",
@@ -2276,10 +2276,12 @@ var createRootDomainComponent = (updateComponent) => {
       var _a;
       (_a = this.stepComponent) == null ? void 0 : _a.stop();
     },
-    setStep(stepComponent) {
+    setStep(step) {
+      const scrollAfterUpdate = getScrollAfterUpdate(step, this.stepComponent, scrollToTop);
       this._update((draft) => {
-        draft.stepComponent = stepComponent;
+        draft.stepComponent = step;
       });
+      scrollAfterUpdate == null ? void 0 : scrollAfterUpdate();
     },
     getRefreshUrl() {
       var _a, _b, _c, _d;
@@ -2288,6 +2290,16 @@ var createRootDomainComponent = (updateComponent) => {
   };
   return rootComponent;
 };
+var getScrollAfterUpdate = (newStep, currentStep, scrollToTop) => {
+  if (!currentStep) {
+    return void 0;
+  }
+  const isNewStep = newStep.uid !== currentStep.uid;
+  const hasNewError = newStep.error != null && newStep.error !== currentStep.error;
+  const shouldScroll = isNewStep || hasNewError;
+  const scrollBehavior = hasNewError ? "smooth" : "instant";
+  return shouldScroll ? () => scrollToTop(scrollBehavior) : void 0;
+};
 
 // src/revamp/domain/components/ModalComponent.ts
 var createModalContentComponent = (modalProps, updateComponent) => {
@@ -7125,13 +7137,16 @@ function useDynamicFlowCore(props) {
   const onError = useStableCallback(rest.onError);
   const onEvent = useStableCallback(rest.onEvent);
   const onLog = useStableCallback(rest.onLog);
+  const scrollToTop = useStableCallback(props.scrollToTop);
   const { formatMessage, locale } = useIntl2();
   const getErrorMessageFunctions = useMemo(
     () => getSchemaErrorMessageFunction(formatMessage, locale),
     [formatMessage, locale]
   );
   const rerender = useRerender();
-  const rootComponentRef = useRef2(createRootDomainComponent(rerender));
+  const rootComponentRef = useRef2(
+    createRootDomainComponent(rerender, scrollToTop)
+  );
   const stepCount = useRef2(0);
   const stepRef = useRef2(initialStep != null ? initialStep : null);
   const etagRef = useRef2(null);
@@ -7463,10 +7478,18 @@ var useRerender = () => {
 
 // src/revamp/DynamicFlowCore.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
+var className = "dynamic-flow";
 function DynamicFlowCore(props) {
   var _a;
-  const { rootComponent } = useDynamicFlowCore(props);
-  const { renderers, httpClient, onEvent, onError, onLog } = props;
+  const { flowId, renderers, httpClient, onEvent, onError, onLog } = props;
+  const normalisedFlowId = flowId.replace(" ", "-");
+  const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({}, props), {
+    scrollToTop: (behavior) => {
+      var _a2;
+      const element = document.querySelector(`div#${normalisedFlowId}.${className}`);
+      (_a2 = element == null ? void 0 : element.scrollIntoView) == null ? void 0 : _a2.call(element, { behavior });
+    }
+  }));
   const render = useMemo2(
     () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
     [renderers]
@@ -7486,7 +7509,7 @@ function DynamicFlowCore(props) {
         onError == null ? void 0 : onError(error);
         onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", { errorMessage: getErrorMessage(error) });
       },
-      children: render(tree)
+      children: /* @__PURE__ */ jsx6("div", { id: normalisedFlowId, className, children: render(tree) })
     }
   );
 }
@@ -8842,7 +8865,7 @@ function DynamicButtonWithoutBehavior(props) {
   const type = getButtonType(component.context, componentAction);
   const priority = getButtonPriority(component.control, componentAction);
   const { loading } = useDynamicFlow();
-  const className = getMargin(component.margin || "md");
+  const className2 = getMargin(component.margin || "md");
   const disabled = loading || component.disabled || (componentAction == null ? void 0 : componentAction.disabled);
   const title = (_b = (_a = component.title) != null ? _a : componentAction == null ? void 0 : componentAction.title) != null ? _b : "";
   const onClick = () => {
@@ -8857,7 +8880,7 @@ function DynamicButtonWithoutBehavior(props) {
       type: priority === "tertiary" ? void 0 : type,
       priority,
       block: true,
-      className,
+      className: className2,
       disabled,
       onClick,
       children: title
@@ -8870,7 +8893,7 @@ function DynamicButtonWithBehavior(props) {
   const type = getButtonTypeFromContext(component.context);
   const priority = (_a = component.control) != null ? _a : "secondary";
   const { loading } = useDynamicFlow();
-  const className = getMargin(component.margin || "md");
+  const className2 = getMargin(component.margin || "md");
   const disabled = loading || component.disabled;
   const title = (_b = component.title) != null ? _b : "";
   const onClick = () => {
@@ -8909,7 +8932,7 @@ function DynamicButtonWithBehavior(props) {
       type: priority === "tertiary" ? void 0 : type,
       priority,
       block: true,
-      className,
+      className: className2,
       disabled,
       onClick,
       children: title
@@ -8999,8 +9022,8 @@ var DynamicDecision_default = DynamicDecision;
 import { jsx as jsx21 } from "react/jsx-runtime";
 var DynamicDivider = ({ component }) => {
   const margin = getMargin(component.margin);
-  const className = `m-t-0 ${margin}`;
-  return /* @__PURE__ */ jsx21("hr", { className });
+  const className2 = `m-t-0 ${margin}`;
+  return /* @__PURE__ */ jsx21("hr", { className: className2 });
 };
 var DynamicDivider_default = DynamicDivider;
 

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

@@ -1,6 +1,6 @@
 import { Model } from '@wise/dynamic-flow-types';
 import { AnalyticsEventDispatcher } from '../features/events';
-import { BaseComponent, DomainComponent, LoadingState, LocalValue, SchemaComponent, UpdateComponent } from '../types';
+import { BaseComponent, DomainComponent, LoadingState, LocalValue, SchemaComponent, ScrollToTop, UpdateComponent } from '../types';
 import { ModalComponent } from './ModalComponent';
 import { StepDomainComponent } from './step/StepDomainComponent';
 export type RootDomainComponent = BaseComponent & {
@@ -25,4 +25,4 @@ export type RootDomainComponent = BaseComponent & {
     setStep: (stepComponent: StepDomainComponent) => void;
     getRefreshUrl: () => string | null;
 };
-export declare const createRootDomainComponent: (updateComponent: UpdateComponent) => RootDomainComponent;
+export declare const createRootDomainComponent: (updateComponent: UpdateComponent, scrollToTop: ScrollToTop) => RootDomainComponent;

package/build/types/revamp/domain/types.d.ts

@@ -155,6 +155,7 @@ export type BaseInputComponent<LV extends LocalValue> = BaseSchemaComponent<LV>
     onFocus: () => void;
 };
 export type UpdateComponent = () => void;
+export type ScrollToTop = (behavior: ScrollBehavior) => void;
 export type OnBehavior = (behavior: Behavior) => Promise<BehaviorController>;
 export type BehaviorController = {
     abort: () => void;

package/build/types/revamp/useDynamicFlowCore.d.ts

@@ -1,8 +1,9 @@
 import { RootDomainComponent } from './domain/components/RootDomainComponent';
-import type { OnValueChange } from './domain/types';
+import type { OnValueChange, ScrollToTop } from './domain/types';
 import type { DynamicFlowCoreProps } from './types';
 type UseDynamicFlowCoreProps = Omit<DynamicFlowCoreProps, 'renderers'> & {
     onValueChange?: OnValueChange;
+    scrollToTop?: ScrollToTop;
     onLink: (url: string) => boolean;
 };
 export declare function useDynamicFlowCore(props: UseDynamicFlowCoreProps): {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.19.1",
+  "version": "4.19.3-experimental-6e22f2a",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -37,7 +37,7 @@
     "@babel/preset-react": "7.27.1",
     "@babel/preset-typescript": "7.27.1",
     "@chromatic-com/storybook": "4.1.1",
-    "@formatjs/cli": "^6.7.3",
+    "@formatjs/cli": "^6.7.4",
     "@storybook/addon-a11y": "^9.1.10",
     "@storybook/addon-docs": "^9.1.10",
     "@storybook/addon-links": "^9.1.10",
@@ -46,13 +46,14 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.111.0",
+    "@transferwise/components": "46.112.0",
     "@transferwise/formatting": "^2.13.4",
     "@transferwise/icons": "3.22.4",
+    "@transferwise/navigation-ui": "4.40.0",
     "@transferwise/neptune-css": "14.25.0",
     "@types/jest": "30.0.0",
-    "@types/node": "22.18.8",
-    "@types/react": "18.3.25",
+    "@types/node": "22.18.9",
+    "@types/react": "18.3.26",
     "@types/react-dom": "18.3.7",
     "@types/react-intl": "3.0.0",
     "@wise/art": "2.24.7",

package/build/types/revamp/tests/renderers/StepRenderer.test.d.ts

@@ -1 +0,0 @@
-export {};