@wise/dynamic-flow-client 4.3.14 → 4.4.0

package/build/main.js

@@ -1084,6 +1084,7 @@ function getChildren(node) {
     case "form":
     case "section":
     case "step":
+    case "modal-content":
       return node.childrenProps;
     case "columns":
       return [...node.startChildrenProps, ...node.endChildrenProps];
@@ -1681,20 +1682,20 @@ var listComponentToProps = (component, rendererMapperProps) => __spreadProps(__s
 });
 
 // src/revamp/renderers/stepComponentToProps.ts
-var stepComponentToProps = ({
-  uid,
-  back,
-  control,
-  description,
-  error,
-  external,
-  loadingState,
-  step,
-  title,
-  components,
-  onBehavior
-}, rendererMapperProps) => {
-  const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+var stepComponentToProps = (component, rendererMapperProps) => {
+  const {
+    uid,
+    back,
+    control,
+    description,
+    error,
+    external,
+    loadingState,
+    step,
+    title,
+    onBehavior
+  } = component;
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
   return __spreadValues({
     type: "step",
     id: step.id,
@@ -1726,6 +1727,21 @@ var rootComponentToProps = (rootComponent, rendererMapperProps) => {
   };
 };
 
+// src/revamp/renderers/mappers/modalContentComponentToProps.ts
+var modalContentComponentToProps = (component, rendererMapperProps) => {
+  const { uid, open, title, close } = component;
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
+  return __spreadValues({
+    uid,
+    type: "modal-content",
+    open,
+    title,
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps,
+    onClose: close.bind(component)
+  }, rendererMapperProps);
+};
+
 // src/revamp/renderers/mappers/componentToRendererProps.ts
 var componentToRendererProps = (component, rendererMapperProps) => {
   if (isHiddenComponent(component)) {
@@ -1776,6 +1792,8 @@ var componentToRendererProps = (component, rendererMapperProps) => {
       return markdownComponentToProps(component, rendererMapperProps);
     case "modal":
       return modalComponentToProps(component, rendererMapperProps);
+    case "modal-content":
+      return modalContentComponentToProps(component, rendererMapperProps);
     case "multi-select":
       return multiSelectInputComponentToProps(component, rendererMapperProps);
     case "multi-upload":
@@ -1820,6 +1838,37 @@ var getInputUpdateFunction = (updateComponent) => {
   };
 };
 
+// src/revamp/utils/component-utils.ts
+var getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then(
+  (values) => values.reduce((acc, value) => mergeModels(acc, value), null)
+);
+var getSubmittableDataSync = (components) => components.map((component) => component.getSubmittableValueSync()).reduce((acc, value) => mergeModels(acc, value), null);
+var getLocalValues = (components) => components.map((component) => component.getLocalValue()).reduce((acc, value) => mergeLocalValues(acc, value), null);
+var mergeLocalValues = (valueA, valueB) => {
+  if (valueA === null) {
+    return valueB;
+  }
+  if (valueB === null) {
+    return valueA;
+  }
+  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
+    return __spreadValues(__spreadValues({}, valueA), valueB);
+  }
+  return valueB;
+};
+var mergeModels = (valueA, valueB) => {
+  if (valueA === null) {
+    return valueB;
+  }
+  if (valueB === null) {
+    return valueA;
+  }
+  if (isObjectModel(valueA) && isObjectModel(valueB)) {
+    return __spreadValues(__spreadValues({}, valueA), valueB);
+  }
+  return valueB;
+};
+
 // src/revamp/domain/components/RootDomainComponent.ts
 var createRootDomainComponent = (updateComponent) => {
   const update = getInputUpdateFunction(updateComponent);
@@ -1830,17 +1879,29 @@ var createRootDomainComponent = (updateComponent) => {
     _update(updateFn) {
       update(this, updateFn);
     },
+    dismissAllModals() {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.dismissAllModals();
+    },
+    dismissModal() {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.dismissModal();
+    },
+    showModal(modal) {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.showModal(modal);
+    },
     getChildren() {
-      return this.stepComponent ? [this.stepComponent] : [];
+      return this.stepComponent ? [this.stepComponent, ...this.stepComponent.getModals()] : [];
     },
     getLocalValue() {
       return this.stepComponent ? this.stepComponent.getLocalValue() : null;
     },
     async getSubmittableValue() {
-      return this.stepComponent ? this.stepComponent.getSubmittableValue() : null;
+      return this.stepComponent ? getSubmittableData([this.stepComponent, ...this.stepComponent.getModals()]) : null;
     },
     getSubmittableValueSync() {
-      return this.stepComponent ? this.stepComponent.getSubmittableValueSync() : null;
+      return this.stepComponent ? getSubmittableDataSync([this.stepComponent, ...this.stepComponent.getModals()]) : null;
     },
     getSummary() {
       return this.stepComponent ? this.stepComponent.getSummary() : {};
@@ -1874,37 +1935,6 @@ var createRootDomainComponent = (updateComponent) => {
   return rootComponent;
 };
 
-// src/revamp/utils/component-utils.ts
-var getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then(
-  (values) => values.reduce((acc, value) => mergeModels(acc, value), null)
-);
-var getSubmittableDataSync = (components) => components.map((component) => component.getSubmittableValueSync()).reduce((acc, value) => mergeModels(acc, value), null);
-var getLocalValues = (components) => components.map((component) => component.getLocalValue()).reduce((acc, value) => mergeLocalValues(acc, value), null);
-var mergeLocalValues = (valueA, valueB) => {
-  if (valueA === null) {
-    return valueB;
-  }
-  if (valueB === null) {
-    return valueA;
-  }
-  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
-    return __spreadValues(__spreadValues({}, valueA), valueB);
-  }
-  return valueB;
-};
-var mergeModels = (valueA, valueB) => {
-  if (valueA === null) {
-    return valueB;
-  }
-  if (valueB === null) {
-    return valueA;
-  }
-  if (isObjectModel(valueA) && isObjectModel(valueB)) {
-    return __spreadValues(__spreadValues({}, valueA), valueB);
-  }
-  return valueB;
-};
-
 // src/revamp/domain/features/summary/summary-utils.ts
 var getSummariser = (schema) => (value) => {
   const { summary, icon, image } = schema;
@@ -1953,12 +1983,30 @@ var createStepComponent = (stepProps) => {
     uid
   }, rest), {
     type: "step",
+    modals: [],
+    dismissModal() {
+      var _a2;
+      (_a2 = this.modals.at(-1)) == null ? void 0 : _a2.close();
+    },
+    dismissAllModals() {
+      this._update((draft) => {
+        draft.modals = draft.modals.map((m) => __spreadProps(__spreadValues({}, m), { open: false }));
+      });
+    },
+    showModal(modal) {
+      this._update((draft) => {
+        draft.modals = [...draft.modals, modal];
+      });
+    },
     _update(updateFn) {
       update(this, updateFn);
     },
     getChildren() {
       return this.components;
     },
+    getModals() {
+      return this.modals;
+    },
     async getSubmittableValue() {
       return getSubmittableData(this.components);
     },
@@ -1982,6 +2030,9 @@ var createStepComponent = (stepProps) => {
     stop() {
       stepPolling == null ? void 0 : stepPolling.stop();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
+      this._update((draft) => {
+        draft.modals = [];
+      });
     }
   });
   return component;
@@ -2110,9 +2161,11 @@ var getCallToAction = ({ title, accessibilityDescription }, behavior, onBehavior
     void onBehavior(behavior);
   };
   switch (behavior.type) {
-    case "action": {
+    case "action":
+    case "modal":
+    case "dismiss": {
       return {
-        type: "action",
+        type: behavior.type,
         title: title != null ? title : "",
         accessibilityDescription,
         onClick
@@ -3000,6 +3053,16 @@ function assertActionResponseBody(body) {
     );
   }
 }
+function assertModalResponseBody(body) {
+  if (isObject(body)) {
+    if ("content" in body && isArray(body.content)) {
+      return;
+    }
+  }
+  throw new Error(
+    "Incorrect response body in modal response. Expected an object satisfying the type { title?: string, components: Layout[] }."
+  );
+}
 function isErrorResponseBody(body) {
   return Boolean(
     isObject(body) && (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics)
@@ -3678,6 +3741,9 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     },
     // noop
     onSelect(updatedIndex) {
+      if (updatedIndex === this.selectedIndex) {
+        return;
+      }
       if (updatedIndex !== null && this.analyticsId) {
         selectProps.trackEvent("OneOf Selected", {
           oneOfId: this.analyticsId,
@@ -5867,7 +5933,7 @@ var mapStepToComponent = (_a) => {
 };
 
 // src/revamp/flow/getResponseType.ts
-var responseTypes = ["step", "action", "exit"];
+var responseTypes = ["step", "action", "exit", "modal"];
 var getResponseType = async (response) => {
   assertResponseIsValid(response);
   const headerResponseType = getResponseTypeFromHeader(response);
@@ -5895,7 +5961,7 @@ var getResponseTypeFromHeader = (response) => {
 function assertDFResponseType(type) {
   if (!responseTypes.includes(type)) {
     throw new Error(
-      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error'."
+      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error', 'modal'."
     );
   }
 }
@@ -6050,6 +6116,10 @@ var executeSubmission = async (props) => {
           trackSubmissionEvent("Action Succeeded", { actionId });
           return await triggerAction(body.action, null, false);
         }
+        case "modal": {
+          assertModalResponseBody(body);
+          return { type: "behavior", behavior: __spreadProps(__spreadValues({}, body), { type: "modal" }) };
+        }
         default: {
           throw new Error(`Unsupported response type: ${String(responseType)}`);
         }
@@ -6294,6 +6364,55 @@ function useStableCallback(handler) {
   return (0, import_react2.useCallback)((...args) => ref.current ? ref.current(...args) : null, []);
 }
 
+// src/revamp/domain/components/ModalContentComponent.ts
+var createModalContentComponent = (modalProps, updateComponent) => {
+  const update = getInputUpdateFunction(updateComponent);
+  const modalContentComponent = __spreadProps(__spreadValues({
+    type: "modal-content",
+    open: true
+  }, modalProps), {
+    _update(updateFn) {
+      update(this, updateFn);
+    },
+    getChildren() {
+      return this.components;
+    },
+    getLocalValue() {
+      return getLocalValues(this.getChildren());
+    },
+    async getSubmittableValue() {
+      return getSubmittableData(this.getChildren());
+    },
+    getSubmittableValueSync() {
+      return getSubmittableDataSync(this.getChildren());
+    },
+    getSummary() {
+      return summariseFromChildren(this.getChildren());
+    },
+    validate() {
+      return validateComponents(this.getChildren());
+    },
+    close() {
+      update(this, (draft) => {
+        draft.open = false;
+      });
+    }
+  });
+  return modalContentComponent;
+};
+
+// src/revamp/domain/mappers/layout/modalToContent.ts
+var modalToContent = (uid, { content, title }, mapperProps) => createModalContentComponent(
+  {
+    uid: `${uid}-modal-${getRandomId()}`,
+    title,
+    components: content.map(
+      (component, index) => mapLayoutToComponent(`${uid}.modal-${index}`, component, mapperProps)
+    )
+  },
+  mapperProps.updateComponent
+);
+
 // src/revamp/useDynamicFlowCore.tsx
 function useDynamicFlowCore(props) {
   const _a = props, { flowId, initialAction, initialStep, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "displayStepTitle"]);
@@ -6343,6 +6462,20 @@ function useDynamicFlowCore(props) {
     var _a2;
     initialiseWithStep(newStep, etag, (_a2 = rootComponentRef.current.getLocalValue()) != null ? _a2 : null);
   }, []);
+  const getMapperProps = () => ({
+    uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
+    displayStepTitle,
+    loadingState: "idle",
+    updateComponent: () => rerender(),
+    getErrorMessageFunctions,
+    trackEvent,
+    logEvent,
+    httpClient,
+    onBehavior,
+    onRefresh,
+    onPoll,
+    onValueChange
+  });
   const initialiseWithStep = (0, import_react3.useCallback)(
     (newStep, etag, localValue) => {
       rootComponentRef.current.stop();
@@ -6355,24 +6488,11 @@ function useDynamicFlowCore(props) {
         });
       }
       try {
-        rootComponentRef.current.setStep(
-          mapStepToComponent({
-            uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
-            stepLocalValue: localValue,
-            step: newStep,
-            displayStepTitle,
-            loadingState: "idle",
-            updateComponent: () => rerender(),
-            getErrorMessageFunctions,
-            trackEvent,
-            logEvent,
-            httpClient,
-            onBehavior,
-            onRefresh,
-            onPoll,
-            onValueChange
-          })
-        );
+        const newStepComponent = mapStepToComponent(__spreadValues({
+          stepLocalValue: localValue,
+          step: newStep
+        }, getMapperProps()));
+        rootComponentRef.current.setStep(newStepComponent);
       } catch (error) {
         closeWithError(error);
       }
@@ -6424,6 +6544,7 @@ function useDynamicFlowCore(props) {
   const onBehavior = (0, import_react3.useCallback)(async (behavior) => {
     switch (behavior.type) {
       case "action": {
+        rootComponentRef.current.dismissAllModals();
         try {
           const { action } = behavior;
           await rootComponentRef.current.getSubmittableValue();
@@ -6443,10 +6564,20 @@ function useDynamicFlowCore(props) {
         onLink(behavior.url);
         break;
       }
-      // case 'modal':
-      //   return undefined;
-      // case 'dismiss':
-      //   return undefined;
+      case "modal":
+        if (stepRef.current) {
+          rootComponentRef.current.showModal(
+            modalToContent(rootComponentRef.current.uid, behavior, __spreadValues({
+              step: stepRef.current,
+              stepLocalValue: rootComponentRef.current.getLocalValue()
+            }, getMapperProps()))
+          );
+        }
+        rootComponentRef.current.setLoadingState("idle");
+        break;
+      case "dismiss":
+        rootComponentRef.current.dismissModal();
+        break;
       case "none":
         break;
     }
@@ -6511,6 +6642,11 @@ function useDynamicFlowCore(props) {
           void onRefresh(void 0, refreshUrl, errors);
           break;
         }
+        case "behavior": {
+          void onBehavior(command.behavior);
+          rootComponentRef.current.setLoadingState("idle");
+          break;
+        }
       }
     } catch (error) {
       closeWithError(error);

package/build/main.mjs

@@ -1041,6 +1041,7 @@ function getChildren(node) {
     case "form":
     case "section":
     case "step":
+    case "modal-content":
       return node.childrenProps;
     case "columns":
       return [...node.startChildrenProps, ...node.endChildrenProps];
@@ -1638,20 +1639,20 @@ var listComponentToProps = (component, rendererMapperProps) => __spreadProps(__s
 });
 
 // src/revamp/renderers/stepComponentToProps.ts
-var stepComponentToProps = ({
-  uid,
-  back,
-  control,
-  description,
-  error,
-  external,
-  loadingState,
-  step,
-  title,
-  components,
-  onBehavior
-}, rendererMapperProps) => {
-  const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+var stepComponentToProps = (component, rendererMapperProps) => {
+  const {
+    uid,
+    back,
+    control,
+    description,
+    error,
+    external,
+    loadingState,
+    step,
+    title,
+    onBehavior
+  } = component;
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
   return __spreadValues({
     type: "step",
     id: step.id,
@@ -1683,6 +1684,21 @@ var rootComponentToProps = (rootComponent, rendererMapperProps) => {
   };
 };
 
+// src/revamp/renderers/mappers/modalContentComponentToProps.ts
+var modalContentComponentToProps = (component, rendererMapperProps) => {
+  const { uid, open, title, close } = component;
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
+  return __spreadValues({
+    uid,
+    type: "modal-content",
+    open,
+    title,
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps,
+    onClose: close.bind(component)
+  }, rendererMapperProps);
+};
+
 // src/revamp/renderers/mappers/componentToRendererProps.ts
 var componentToRendererProps = (component, rendererMapperProps) => {
   if (isHiddenComponent(component)) {
@@ -1733,6 +1749,8 @@ var componentToRendererProps = (component, rendererMapperProps) => {
       return markdownComponentToProps(component, rendererMapperProps);
     case "modal":
       return modalComponentToProps(component, rendererMapperProps);
+    case "modal-content":
+      return modalContentComponentToProps(component, rendererMapperProps);
     case "multi-select":
       return multiSelectInputComponentToProps(component, rendererMapperProps);
     case "multi-upload":
@@ -1777,6 +1795,37 @@ var getInputUpdateFunction = (updateComponent) => {
   };
 };
 
+// src/revamp/utils/component-utils.ts
+var getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then(
+  (values) => values.reduce((acc, value) => mergeModels(acc, value), null)
+);
+var getSubmittableDataSync = (components) => components.map((component) => component.getSubmittableValueSync()).reduce((acc, value) => mergeModels(acc, value), null);
+var getLocalValues = (components) => components.map((component) => component.getLocalValue()).reduce((acc, value) => mergeLocalValues(acc, value), null);
+var mergeLocalValues = (valueA, valueB) => {
+  if (valueA === null) {
+    return valueB;
+  }
+  if (valueB === null) {
+    return valueA;
+  }
+  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
+    return __spreadValues(__spreadValues({}, valueA), valueB);
+  }
+  return valueB;
+};
+var mergeModels = (valueA, valueB) => {
+  if (valueA === null) {
+    return valueB;
+  }
+  if (valueB === null) {
+    return valueA;
+  }
+  if (isObjectModel(valueA) && isObjectModel(valueB)) {
+    return __spreadValues(__spreadValues({}, valueA), valueB);
+  }
+  return valueB;
+};
+
 // src/revamp/domain/components/RootDomainComponent.ts
 var createRootDomainComponent = (updateComponent) => {
   const update = getInputUpdateFunction(updateComponent);
@@ -1787,17 +1836,29 @@ var createRootDomainComponent = (updateComponent) => {
     _update(updateFn) {
       update(this, updateFn);
     },
+    dismissAllModals() {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.dismissAllModals();
+    },
+    dismissModal() {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.dismissModal();
+    },
+    showModal(modal) {
+      var _a;
+      (_a = this.stepComponent) == null ? void 0 : _a.showModal(modal);
+    },
     getChildren() {
-      return this.stepComponent ? [this.stepComponent] : [];
+      return this.stepComponent ? [this.stepComponent, ...this.stepComponent.getModals()] : [];
     },
     getLocalValue() {
       return this.stepComponent ? this.stepComponent.getLocalValue() : null;
     },
     async getSubmittableValue() {
-      return this.stepComponent ? this.stepComponent.getSubmittableValue() : null;
+      return this.stepComponent ? getSubmittableData([this.stepComponent, ...this.stepComponent.getModals()]) : null;
     },
     getSubmittableValueSync() {
-      return this.stepComponent ? this.stepComponent.getSubmittableValueSync() : null;
+      return this.stepComponent ? getSubmittableDataSync([this.stepComponent, ...this.stepComponent.getModals()]) : null;
     },
     getSummary() {
       return this.stepComponent ? this.stepComponent.getSummary() : {};
@@ -1831,37 +1892,6 @@ var createRootDomainComponent = (updateComponent) => {
   return rootComponent;
 };
 
-// src/revamp/utils/component-utils.ts
-var getSubmittableData = async (components) => Promise.all(components.map(async (component) => component.getSubmittableValue())).then(
-  (values) => values.reduce((acc, value) => mergeModels(acc, value), null)
-);
-var getSubmittableDataSync = (components) => components.map((component) => component.getSubmittableValueSync()).reduce((acc, value) => mergeModels(acc, value), null);
-var getLocalValues = (components) => components.map((component) => component.getLocalValue()).reduce((acc, value) => mergeLocalValues(acc, value), null);
-var mergeLocalValues = (valueA, valueB) => {
-  if (valueA === null) {
-    return valueB;
-  }
-  if (valueB === null) {
-    return valueA;
-  }
-  if (isObjectLocalValue(valueA) && isObjectLocalValue(valueB)) {
-    return __spreadValues(__spreadValues({}, valueA), valueB);
-  }
-  return valueB;
-};
-var mergeModels = (valueA, valueB) => {
-  if (valueA === null) {
-    return valueB;
-  }
-  if (valueB === null) {
-    return valueA;
-  }
-  if (isObjectModel(valueA) && isObjectModel(valueB)) {
-    return __spreadValues(__spreadValues({}, valueA), valueB);
-  }
-  return valueB;
-};
-
 // src/revamp/domain/features/summary/summary-utils.ts
 var getSummariser = (schema) => (value) => {
   const { summary, icon, image } = schema;
@@ -1910,12 +1940,30 @@ var createStepComponent = (stepProps) => {
     uid
   }, rest), {
     type: "step",
+    modals: [],
+    dismissModal() {
+      var _a2;
+      (_a2 = this.modals.at(-1)) == null ? void 0 : _a2.close();
+    },
+    dismissAllModals() {
+      this._update((draft) => {
+        draft.modals = draft.modals.map((m) => __spreadProps(__spreadValues({}, m), { open: false }));
+      });
+    },
+    showModal(modal) {
+      this._update((draft) => {
+        draft.modals = [...draft.modals, modal];
+      });
+    },
     _update(updateFn) {
       update(this, updateFn);
     },
     getChildren() {
       return this.components;
     },
+    getModals() {
+      return this.modals;
+    },
     async getSubmittableValue() {
       return getSubmittableData(this.components);
     },
@@ -1939,6 +1987,9 @@ var createStepComponent = (stepProps) => {
     stop() {
       stepPolling == null ? void 0 : stepPolling.stop();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
+      this._update((draft) => {
+        draft.modals = [];
+      });
     }
   });
   return component;
@@ -2067,9 +2118,11 @@ var getCallToAction = ({ title, accessibilityDescription }, behavior, onBehavior
     void onBehavior(behavior);
   };
   switch (behavior.type) {
-    case "action": {
+    case "action":
+    case "modal":
+    case "dismiss": {
       return {
-        type: "action",
+        type: behavior.type,
         title: title != null ? title : "",
         accessibilityDescription,
         onClick
@@ -2957,6 +3010,16 @@ function assertActionResponseBody(body) {
     );
   }
 }
+function assertModalResponseBody(body) {
+  if (isObject(body)) {
+    if ("content" in body && isArray(body.content)) {
+      return;
+    }
+  }
+  throw new Error(
+    "Incorrect response body in modal response. Expected an object satisfying the type { title?: string, components: Layout[] }."
+  );
+}
 function isErrorResponseBody(body) {
   return Boolean(
     isObject(body) && (body.refreshFormUrl || body.refreshUrl || body.validation || body.error || body.analytics)
@@ -3635,6 +3698,9 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     },
     // noop
     onSelect(updatedIndex) {
+      if (updatedIndex === this.selectedIndex) {
+        return;
+      }
       if (updatedIndex !== null && this.analyticsId) {
         selectProps.trackEvent("OneOf Selected", {
           oneOfId: this.analyticsId,
@@ -5824,7 +5890,7 @@ var mapStepToComponent = (_a) => {
 };
 
 // src/revamp/flow/getResponseType.ts
-var responseTypes = ["step", "action", "exit"];
+var responseTypes = ["step", "action", "exit", "modal"];
 var getResponseType = async (response) => {
   assertResponseIsValid(response);
   const headerResponseType = getResponseTypeFromHeader(response);
@@ -5852,7 +5918,7 @@ var getResponseTypeFromHeader = (response) => {
 function assertDFResponseType(type) {
   if (!responseTypes.includes(type)) {
     throw new Error(
-      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error'."
+      "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit', 'error', 'modal'."
     );
   }
 }
@@ -6007,6 +6073,10 @@ var executeSubmission = async (props) => {
           trackSubmissionEvent("Action Succeeded", { actionId });
           return await triggerAction(body.action, null, false);
         }
+        case "modal": {
+          assertModalResponseBody(body);
+          return { type: "behavior", behavior: __spreadProps(__spreadValues({}, body), { type: "modal" }) };
+        }
         default: {
           throw new Error(`Unsupported response type: ${String(responseType)}`);
         }
@@ -6251,6 +6321,55 @@ function useStableCallback(handler) {
   return useCallback((...args) => ref.current ? ref.current(...args) : null, []);
 }
 
+// src/revamp/domain/components/ModalContentComponent.ts
+var createModalContentComponent = (modalProps, updateComponent) => {
+  const update = getInputUpdateFunction(updateComponent);
+  const modalContentComponent = __spreadProps(__spreadValues({
+    type: "modal-content",
+    open: true
+  }, modalProps), {
+    _update(updateFn) {
+      update(this, updateFn);
+    },
+    getChildren() {
+      return this.components;
+    },
+    getLocalValue() {
+      return getLocalValues(this.getChildren());
+    },
+    async getSubmittableValue() {
+      return getSubmittableData(this.getChildren());
+    },
+    getSubmittableValueSync() {
+      return getSubmittableDataSync(this.getChildren());
+    },
+    getSummary() {
+      return summariseFromChildren(this.getChildren());
+    },
+    validate() {
+      return validateComponents(this.getChildren());
+    },
+    close() {
+      update(this, (draft) => {
+        draft.open = false;
+      });
+    }
+  });
+  return modalContentComponent;
+};
+
+// src/revamp/domain/mappers/layout/modalToContent.ts
+var modalToContent = (uid, { content, title }, mapperProps) => createModalContentComponent(
+  {
+    uid: `${uid}-modal-${getRandomId()}`,
+    title,
+    components: content.map(
+      (component, index) => mapLayoutToComponent(`${uid}.modal-${index}`, component, mapperProps)
+    )
+  },
+  mapperProps.updateComponent
+);
+
 // src/revamp/useDynamicFlowCore.tsx
 function useDynamicFlowCore(props) {
   const _a = props, { flowId, initialAction, initialStep, displayStepTitle = true } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "displayStepTitle"]);
@@ -6300,6 +6419,20 @@ function useDynamicFlowCore(props) {
     var _a2;
     initialiseWithStep(newStep, etag, (_a2 = rootComponentRef.current.getLocalValue()) != null ? _a2 : null);
   }, []);
+  const getMapperProps = () => ({
+    uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
+    displayStepTitle,
+    loadingState: "idle",
+    updateComponent: () => rerender(),
+    getErrorMessageFunctions,
+    trackEvent,
+    logEvent,
+    httpClient,
+    onBehavior,
+    onRefresh,
+    onPoll,
+    onValueChange
+  });
   const initialiseWithStep = useCallback2(
     (newStep, etag, localValue) => {
       rootComponentRef.current.stop();
@@ -6312,24 +6445,11 @@ function useDynamicFlowCore(props) {
         });
       }
       try {
-        rootComponentRef.current.setStep(
-          mapStepToComponent({
-            uid: `${rootComponentRef.current.uid}:${stepCount.current}`,
-            stepLocalValue: localValue,
-            step: newStep,
-            displayStepTitle,
-            loadingState: "idle",
-            updateComponent: () => rerender(),
-            getErrorMessageFunctions,
-            trackEvent,
-            logEvent,
-            httpClient,
-            onBehavior,
-            onRefresh,
-            onPoll,
-            onValueChange
-          })
-        );
+        const newStepComponent = mapStepToComponent(__spreadValues({
+          stepLocalValue: localValue,
+          step: newStep
+        }, getMapperProps()));
+        rootComponentRef.current.setStep(newStepComponent);
       } catch (error) {
         closeWithError(error);
       }
@@ -6381,6 +6501,7 @@ function useDynamicFlowCore(props) {
   const onBehavior = useCallback2(async (behavior) => {
     switch (behavior.type) {
       case "action": {
+        rootComponentRef.current.dismissAllModals();
         try {
           const { action } = behavior;
           await rootComponentRef.current.getSubmittableValue();
@@ -6400,10 +6521,20 @@ function useDynamicFlowCore(props) {
         onLink(behavior.url);
         break;
       }
-      // case 'modal':
-      //   return undefined;
-      // case 'dismiss':
-      //   return undefined;
+      case "modal":
+        if (stepRef.current) {
+          rootComponentRef.current.showModal(
+            modalToContent(rootComponentRef.current.uid, behavior, __spreadValues({
+              step: stepRef.current,
+              stepLocalValue: rootComponentRef.current.getLocalValue()
+            }, getMapperProps()))
+          );
+        }
+        rootComponentRef.current.setLoadingState("idle");
+        break;
+      case "dismiss":
+        rootComponentRef.current.dismissModal();
+        break;
       case "none":
         break;
     }
@@ -6468,6 +6599,11 @@ function useDynamicFlowCore(props) {
           void onRefresh(void 0, refreshUrl, errors);
           break;
         }
+        case "behavior": {
+          void onBehavior(command.behavior);
+          rootComponentRef.current.setLoadingState("idle");
+          break;
+        }
       }
     } catch (error) {
       closeWithError(error);

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

@@ -1,20 +1,8 @@
-import type { Context, LayoutComponent } from '../types';
+import type { CallToAction, Context, LayoutComponent } from '../types';
 export type AlertComponent = LayoutComponent & {
     type: 'alert';
     markdown: string;
     context: Context;
-    callToAction?: AlertCallToActionLink | AlertCallToAction;
-};
-export type AlertCallToActionLink = {
-    type: 'link';
-    accessibilityDescription?: string;
-    href: string;
-    title: string;
-};
-export type AlertCallToAction = {
-    type: 'action';
-    accessibilityDescription?: string;
-    title: string;
-    onClick: () => void;
+    callToAction?: CallToAction;
 };
 export declare const createAlertComponent: (alertProps: Pick<AlertComponent, "uid" | "callToAction" | "context" | "control" | "margin" | "markdown">) => AlertComponent;

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

@@ -1,23 +1,10 @@
-import { Icon } from "@wise/dynamic-flow-types/build/next";
-import { Image, LayoutComponent } from "../types";
+import { Icon } from '@wise/dynamic-flow-types/build/next';
+import { CallToAction, Image, LayoutComponent } from '../types';
 export type ListComponent = LayoutComponent & {
     type: 'list';
     items: ListItem[];
     title?: string;
-    callToAction?: ListCallToActionAction | ListCallToActionLink;
-};
-export type ListCallToActionLink = {
-    type: 'link';
-    accessibilityDescription?: string;
-    href: string;
-    title: string;
-    onClick: () => void;
-};
-export type ListCallToActionAction = {
-    type: 'action';
-    accessibilityDescription?: string;
-    title: string;
-    onClick: () => void;
+    callToAction?: CallToAction;
 };
 export type ListItem = {
     icon?: Icon;

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

@@ -0,0 +1,11 @@
+import type { DomainComponent, BaseComponent, LocalValue, UpdateComponent } from '../types';
+export type ModalContentComponent = BaseComponent & {
+    type: 'modal-content';
+    components: DomainComponent[];
+    open: boolean;
+    title?: string;
+    getChildren: () => DomainComponent[];
+    getLocalValue: () => LocalValue;
+    close: () => void;
+};
+export declare const createModalContentComponent: (modalProps: Pick<ModalContentComponent, "uid" | "components" | "title">, updateComponent: UpdateComponent) => ModalContentComponent;

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

@@ -1,9 +1,13 @@
 import { AnalyticsEventDispatcher } from '../features/events';
 import { BaseComponent, DomainComponent, LoadingState, LocalValue, UpdateComponent } from '../types';
 import { StepDomainComponent } from './StepDomainComponent';
+import { ModalContentComponent } from './ModalContentComponent';
 export type RootDomainComponent = BaseComponent & {
     type: 'root';
     stepComponent: StepDomainComponent | null;
+    dismissAllModals: () => void;
+    dismissModal: () => void;
+    showModal: (modal: ModalContentComponent) => void;
     getChildren: () => DomainComponent[];
     getLocalValue: () => LocalValue;
     getLoadingState: () => LoadingState;

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

@@ -3,6 +3,7 @@ import type { Step } from '@wise/dynamic-flow-types/build/next';
 import type { AnalyticsEventDispatcher } from '../features/events';
 import type { StepPolling } from '../features/polling/getStepPolling';
 import { StepRefreshAfter } from '../features/refreshAfter/getStepRefreshAfter';
+import { ModalContentComponent } from './ModalContentComponent';
 export type StepDomainComponent = BaseComponent & {
     type: 'step';
     back?: BackNavigation;
@@ -14,7 +15,12 @@ export type StepDomainComponent = BaseComponent & {
     loadingState: LoadingState;
     step: Step;
     title?: string;
+    modals: ModalContentComponent[];
+    dismissModal: () => void;
+    dismissAllModals: () => void;
+    showModal: (modal: ModalContentComponent) => void;
     getChildren: () => DomainComponent[];
+    getModals: () => ModalContentComponent[];
     getLocalValue: () => LocalValue;
     setLoadingState: (loadingState: LoadingState) => void;
     onBehavior: OnBehavior;

package/build/types/revamp/domain/mappers/layout/modalToContent.d.ts

@@ -0,0 +1,4 @@
+import { ModalBehavior } from '@wise/dynamic-flow-types/build/next';
+import { MapperProps } from '../schema/types';
+import { ModalContentComponent } from '../../components/ModalContentComponent';
+export declare const modalToContent: (uid: string, { content, title }: ModalBehavior, mapperProps: MapperProps) => ModalContentComponent;

package/build/types/revamp/domain/mappers/utils/call-to-action-utils.d.ts

@@ -1,17 +1,5 @@
 import { Action, Behavior as SpecBehavior } from '@wise/dynamic-flow-types/build/next';
-import { OnBehavior } from '../../types';
-type CallToAction = {
-    type: 'action';
-    title: string;
-    accessibilityDescription?: string;
-    onClick: () => void;
-} | {
-    type: 'link';
-    title: string;
-    accessibilityDescription?: string;
-    href: string;
-    onClick: () => void;
-};
+import { CallToAction, OnBehavior } from '../../types';
 type SpecCallToAction = {
     title?: string;
     accessibilityDescription?: string;

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

@@ -1,6 +1,4 @@
-import type { Action, Icon, JsonElement, Margin, Model } from '@wise/dynamic-flow-types/build/next';
-import type { ActionBehavior } from '@wise/dynamic-flow-types/build/next/feature/ActionBehavior';
-import type { LinkBehavior } from '@wise/dynamic-flow-types/build/next/feature/LinkBehavior';
+import type { Action, Icon, JsonElement, Margin, Model, ActionBehavior, LinkBehavior, DismissBehavior, ModalBehavior } from '@wise/dynamic-flow-types/build/next';
 import type { AlertComponent } from './components/AlertComponent';
 import type { AllOfComponent } from './components/AllOfComponent';
 import type { BooleanInputComponent } from './components/BooleanInputComponent';
@@ -36,14 +34,27 @@ import type { StepDomainComponent } from './components/StepDomainComponent';
 import type { TextInputComponent } from './components/TextInputComponent';
 import type { TupleComponent } from './components/TupleComponent';
 import type { UploadInputComponent } from './components/UploadInputComponent';
-export type DomainComponent = RootDomainComponent | StepDomainComponent | AlertComponent | AllOfComponent | BooleanInputComponent | BoxComponent | ButtonComponent | ColumnsComponent | ConstComponent | ContainerComponent | DateInputComponent | DecisionComponent | DividerComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | IntegerInputComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | ParagraphComponent | RepeatableComponent | ReviewComponent | SearchComponent | SelectInputComponent | StatusListComponent | TextInputComponent | TupleComponent | UploadInputComponent;
+import { ModalContentComponent } from './components/ModalContentComponent';
+export type DomainComponent = RootDomainComponent | StepDomainComponent | AlertComponent | AllOfComponent | BooleanInputComponent | BoxComponent | ButtonComponent | ColumnsComponent | ConstComponent | ContainerComponent | DateInputComponent | DecisionComponent | DividerComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | IntegerInputComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | ModalContentComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | ParagraphComponent | RepeatableComponent | ReviewComponent | SearchComponent | SelectInputComponent | StatusListComponent | TextInputComponent | TupleComponent | UploadInputComponent;
 export type LocalValue = LocalValuePrimitive | LocalValueObject | LocalValueArray;
 export type LocalValuePrimitive = string | number | boolean | File | null;
 export interface LocalValueObject extends Record<string, LocalValuePrimitive | LocalValueObject | LocalValueArray> {
 }
 export interface LocalValueArray extends Array<LocalValuePrimitive | LocalValueObject | LocalValueArray> {
 }
-export type Behavior = ActionBehavior | LinkBehavior | {
+export type CallToAction = {
+    type: 'action' | 'modal' | 'dismiss';
+    title: string;
+    accessibilityDescription?: string;
+    onClick: () => void;
+} | {
+    type: 'link';
+    title: string;
+    accessibilityDescription?: string;
+    href: string;
+    onClick: () => void;
+};
+export type Behavior = ActionBehavior | LinkBehavior | ModalBehavior | DismissBehavior | {
     type: 'none';
 };
 export type BaseComponent = {

package/build/types/revamp/flow/executeSubmission.d.ts

@@ -1,5 +1,6 @@
 import type { Action, ErrorResponseBody, Model, Step } from '@wise/dynamic-flow-types/build/next';
 import type { AnalyticsEventDispatcher, LoggingEventDispatcher } from '../domain/features/events';
+import type { Behavior } from '../domain/types';
 type Command = {
     type: 'complete';
     result: Model;
@@ -20,6 +21,9 @@ type Command = {
         refreshUrl: string;
         errors?: Step['errors'];
     };
+} | {
+    type: 'behavior';
+    behavior: Behavior;
 };
 export declare const executeSubmission: (props: {
     action: Action;

package/build/types/revamp/flow/getResponseType.d.ts

@@ -1,4 +1,4 @@
-declare const responseTypes: readonly ["step", "action", "exit"];
+declare const responseTypes: readonly ["step", "action", "exit", "modal"];
 export type ResponseType = (typeof responseTypes)[number];
 /**
  * Returns either 'step', 'action', or 'exit' based on the response headers and body.

package/build/types/revamp/flow/response-utils.d.ts

@@ -1,8 +1,9 @@
-import type { ActionResponseBody, ErrorResponseBody, JsonElement, Step } from '@wise/dynamic-flow-types/build/next';
+import type { ActionResponseBody, ErrorResponseBody, JsonElement, ModalBehavior, Step } from '@wise/dynamic-flow-types/build/next';
 export declare const assertResponseIsValid: (response: unknown) => void;
 export declare const parseResponseBodyAsJsonElement: (response: Response) => Promise<JsonElement>;
 export declare function isActionResponseBody(body: unknown): body is ActionResponseBody;
 export declare function assertActionResponseBody(body: unknown): asserts body is ActionResponseBody;
+export declare function assertModalResponseBody(body: unknown): asserts body is Omit<ModalBehavior, 'type'>;
 export declare function isErrorResponseBody(body: unknown): body is ErrorResponseBody;
 export declare function assertErrorResponseBody(body: unknown): asserts body is ErrorResponseBody;
 export declare function assertStepResponseBody(body: unknown): asserts body is Step;

package/build/types/revamp/renderers/mappers/modalContentComponentToProps.d.ts

@@ -0,0 +1,4 @@
+import type { ModalContentRendererProps } from '@wise/dynamic-flow-types/build/renderers';
+import { ModalContentComponent } from '../../domain/components/ModalContentComponent';
+import { RendererMapperProps } from './componentToRendererProps';
+export declare const modalContentComponentToProps: (component: ModalContentComponent, rendererMapperProps: RendererMapperProps) => ModalContentRendererProps;

package/build/types/revamp/renderers/stepComponentToProps.d.ts

@@ -1,4 +1,4 @@
 import type { StepRendererProps } from '@wise/dynamic-flow-types/build/renderers';
 import type { StepDomainComponent } from '../domain/components/StepDomainComponent';
 import { type RendererMapperProps } from './mappers/componentToRendererProps';
-export declare const stepComponentToProps: ({ uid, back, control, description, error, external, loadingState, step, title, components, onBehavior, }: StepDomainComponent, rendererMapperProps: RendererMapperProps) => StepRendererProps;
+export declare const stepComponentToProps: (component: StepDomainComponent, rendererMapperProps: RendererMapperProps) => StepRendererProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.3.14",
+  "version": "4.4.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -53,11 +53,11 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.95.1",
+    "@transferwise/components": "46.96.0",
     "@transferwise/formatting": "^2.13.1",
-    "@transferwise/icons": "3.19.1",
-    "@transferwise/neptune-css": "14.24.0",
-    "@types/node": "22.14.1",
+    "@transferwise/icons": "3.20.0",
+    "@transferwise/neptune-css": "14.24.2",
+    "@types/node": "22.15.3",
     "@types/jest": "29.5.14",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
@@ -65,7 +65,7 @@
     "@wise/art": "2.20.0",
     "@wise/components-theming": "^1.6.2",
     "babel-jest": "29.7.0",
-    "esbuild": "0.25.2",
+    "esbuild": "0.25.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
@@ -78,15 +78,15 @@
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
     "storybook": "^8.6.12",
-    "stylelint": "16.18.0",
+    "stylelint": "16.19.1",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.19.3",
     "typescript": "5.8.3",
-    "webpack": "5.99.6",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "webpack": "5.99.7",
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -102,7 +102,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "3.1.4"
+    "@wise/dynamic-flow-types": "3.2.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",