@wise/dynamic-flow-client 5.25.1 → 5.25.2-experimental-a8a898e

package/build/main.mjs

@@ -1263,9 +1263,16 @@ var createModalContentComponent = (props, onComponentUpdate) => {
       return component.components;
     },
     close() {
+      component.stop();
       update(component, (draft) => {
         draft.open = false;
       });
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   });
   return component;
@@ -1275,10 +1282,15 @@ var createModalContentComponent = (props, onComponentUpdate) => {
 var getRandomId = () => Math.random().toString(36).substring(2);
 
 // src/domain/components/AlertComponent.ts
-var createAlertComponent = (props) => __spreadValues({
+var createAlertComponent = (props) => __spreadProps(__spreadValues({
   type: "alert",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/handlers/dismissHandler.ts
 var makeDismissHandler = (onDismiss, mapperProps) => () => {
@@ -1493,13 +1505,22 @@ var alertLayoutToComponent = (uid, {
 });
 
 // src/domain/components/BoxComponent.ts
-var createBoxComponent = (props) => __spreadProps(__spreadValues({}, props), {
-  type: "box",
-  kind: "layout",
-  getChildren() {
-    return props.components;
-  }
-});
+var createBoxComponent = (props) => {
+  const component = __spreadProps(__spreadValues({}, props), {
+    type: "box",
+    kind: "layout",
+    getChildren() {
+      return props.components;
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
+  });
+  return component;
+};
 
 // src/domain/mappers/utils/layout-utils.ts
 var normaliseMarginInLastComponent = (container) => {
@@ -1786,6 +1807,13 @@ var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackE
     control,
     margin,
     tags,
+    getChildren() {
+      var _a, _b, _c, _d;
+      return [
+        ...(_b = (_a = component.state) == null ? void 0 : _a.beforeSections) != null ? _b : [],
+        ...(_d = (_c = component.state) == null ? void 0 : _c.afterSections) != null ? _d : []
+      ];
+    },
     status: {
       type: "idle",
       loadMore: state.nextCursor ? () => query("pagination") : void 0
@@ -1793,7 +1821,13 @@ var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackE
     state: __spreadProps(__spreadValues({}, state), {
       filters: mapFilters(state.filters),
       search: mapSearch(props.search)
-    })
+    }),
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
   };
   return component;
 };
@@ -1998,10 +2032,15 @@ var mapFilter = (filter) => {
 };
 
 // src/domain/components/ButtonComponent.ts
-var createButtonComponent = (props) => __spreadValues({
+var createButtonComponent = (props) => __spreadProps(__spreadValues({
   type: "button",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/buttonLayoutToComponent.ts
 var buttonLayoutToComponent = (uid, button, mapperProps) => {
@@ -2103,13 +2142,22 @@ var getButtonContext = ({ context, action }) => {
 };
 
 // src/domain/components/ColumnsComponent.ts
-var createColumnsComponent = (props) => __spreadProps(__spreadValues({}, props), {
-  type: "columns",
-  kind: "layout",
-  getChildren() {
-    return [...props.startComponents, ...props.endComponents];
-  }
-});
+var createColumnsComponent = (props) => {
+  const component = __spreadProps(__spreadValues({}, props), {
+    type: "columns",
+    kind: "layout",
+    getChildren() {
+      return [...props.startComponents, ...props.endComponents];
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
+  });
+  return component;
+};
 
 // src/domain/mappers/layout/columnsLayoutToComponent.ts
 var columnsLayoutToComponent = (uid, { control, left, right, bias, margin, analyticsId, tags }, mapperProps, schemaComponents) => createColumnsComponent({
@@ -2133,10 +2181,15 @@ var columnsLayoutToComponent = (uid, { control, left, right, bias, margin, analy
 });
 
 // src/domain/components/DecisionComponent.ts
-var createDecisionComponent = (props) => __spreadValues({
+var createDecisionComponent = (props) => __spreadProps(__spreadValues({
   type: "decision",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/utils/tags-utils.ts
 var mapTags = ({ tag, tags }) => tags != null ? tags : tag != null ? [tag] : void 0;
@@ -2177,10 +2230,15 @@ var mapOption = (option, mapperProps) => {
 };
 
 // src/domain/components/StatusListComponent.ts
-var createStatusListComponent = (props) => __spreadValues({
+var createStatusListComponent = (props) => __spreadProps(__spreadValues({
   type: "status-list",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/deprecatedListLayoutToComponent.ts
 var isDeprecatedListLayout = (layout) => {
@@ -2214,22 +2272,36 @@ var mapLegacyStatus = (status) => {
 };
 
 // src/domain/components/DividerComponent.ts
-var createDividerComponent = (props) => __spreadValues({
+var createDividerComponent = (props) => __spreadProps(__spreadValues({
   type: "divider",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/dividerLayoutToComponent.ts
 var dividerLayoutToComponent = (uid, { control, margin, analyticsId, tags }) => createDividerComponent({ uid, analyticsId, control, margin: margin != null ? margin : "md", tags });
 
 // src/domain/components/FormComponent.ts
-var createFormComponent = (props) => __spreadProps(__spreadValues({}, props), {
-  type: "form",
-  kind: "layout",
-  getChildren() {
-    return [props.schemaComponent];
-  }
-});
+var createFormComponent = (props) => {
+  const component = __spreadProps(__spreadValues({}, props), {
+    type: "form",
+    kind: "layout",
+    getChildren() {
+      return [props.schemaComponent];
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
+  });
+  return component;
+};
 
 // src/domain/mappers/layout/formLayoutToComponent.ts
 var formLayoutToComponent = (uid, { analyticsId, schemaId, schema: schemaRef, control, margin, tags }, schemaComponents) => {
@@ -2256,10 +2328,15 @@ var formLayoutToComponent = (uid, { analyticsId, schemaId, schema: schemaRef, co
 };
 
 // src/domain/components/HeadingComponent.ts
-var createHeadingComponent = (props) => __spreadValues({
+var createHeadingComponent = (props) => __spreadProps(__spreadValues({
   type: "heading",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/headingLayoutToComponent.ts
 var headingLayoutToComponent = (uid, { analyticsId, align, margin, size, control, tags, text }) => createHeadingComponent({
@@ -2274,10 +2351,15 @@ var headingLayoutToComponent = (uid, { analyticsId, align, margin, size, control
 });
 
 // src/domain/components/ImageComponent.ts
-var createImageComponent = (props) => __spreadValues({
+var createImageComponent = (props) => __spreadProps(__spreadValues({
   type: "image",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/imageLayoutToComponent.ts
 var imageLayoutToComponent = (uid, {
@@ -2309,10 +2391,15 @@ var imageLayoutToComponent = (uid, {
 };
 
 // src/domain/components/MarkdownComponent.ts
-var createMarkdownComponent = (props) => __spreadValues({
+var createMarkdownComponent = (props) => __spreadProps(__spreadValues({
   type: "markdown",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/infoLayoutToComponent.ts
 var infoLayoutToComponent = (uid, { analyticsId, align, control, margin, markdown: content, tags }) => createMarkdownComponent({
@@ -2327,10 +2414,15 @@ var infoLayoutToComponent = (uid, { analyticsId, align, control, margin, markdow
 });
 
 // src/domain/components/InstructionsComponent.ts
-var createInstructionsComponent = (props) => __spreadValues({
+var createInstructionsComponent = (props) => __spreadProps(__spreadValues({
   type: "instructions",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/instructionsLayoutToComponent.ts
 var instructionsLayoutToComponent = (uid, { analyticsId, control, items, margin, tags, title }) => createInstructionsComponent({
@@ -2347,10 +2439,15 @@ var instructionsLayoutToComponent = (uid, { analyticsId, control, items, margin,
 });
 
 // src/domain/components/ListComponent.ts
-var createListComponent = (props) => __spreadValues({
+var createListComponent = (props) => __spreadProps(__spreadValues({
   type: "list",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/listLayoutToComponent.ts
 var listLayoutToComponent = (uid, { analyticsId, callToAction, control, items, margin, tags, title }, mapperProps) => {
@@ -2408,10 +2505,15 @@ var mapSupportingValues = (item) => {
 };
 
 // src/domain/components/LoadingIndicatorComponent.ts
-var createLoadingIndicatorComponent = (props) => __spreadValues({
+var createLoadingIndicatorComponent = (props) => __spreadProps(__spreadValues({
   type: "loading-indicator",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/loadingIndicatorLayoutToComponent.ts
 var loadingIndicatorLayoutToComponent = (uid, { analyticsId, control, margin, size, tags }) => createLoadingIndicatorComponent({
@@ -2444,10 +2546,15 @@ var markdownLayoutToComponent = (uid, {
 });
 
 // src/domain/components/MediaComponent.ts
-var createMediaComponent = (props) => __spreadValues({
+var createMediaComponent = (props) => __spreadProps(__spreadValues({
   type: "media",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/mediaLayoutToComponent.ts
 var mediaLayoutToComponent = (uid, { analyticsId, align, control, margin, media, size, tags }) => createMediaComponent({
@@ -2462,14 +2569,23 @@ var mediaLayoutToComponent = (uid, { analyticsId, align, control, margin, media,
 });
 
 // src/domain/components/ModalLayoutComponent.ts
-var createModalComponent = (props) => __spreadProps(__spreadValues({
-  type: "modal-layout",
-  kind: "layout"
-}, props), {
-  getChildren() {
-    return props.content.components;
-  }
-});
+var createModalComponent = (props) => {
+  const component = __spreadProps(__spreadValues({
+    type: "modal-layout",
+    kind: "layout"
+  }, props), {
+    getChildren() {
+      return props.content.components;
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
+  });
+  return component;
+};
 
 // src/domain/mappers/layout/modalLayoutToComponent.ts
 var modalLayoutToComponent = (uid, { analyticsId, content, control, margin, tags, trigger }, mapperProps, schemaComponents) => {
@@ -2491,10 +2607,15 @@ var modalLayoutToComponent = (uid, { analyticsId, content, control, margin, tags
 };
 
 // src/domain/components/ParagraphComponent.ts
-var createParagraphComponent = (props) => __spreadValues({
+var createParagraphComponent = (props) => __spreadProps(__spreadValues({
   type: "paragraph",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/paragraphLayoutToComponent.ts
 var paragraphLayoutToComponent = (uid, { analyticsId, align, control, margin, size, tags, text }) => createParagraphComponent({
@@ -2509,10 +2630,15 @@ var paragraphLayoutToComponent = (uid, { analyticsId, align, control, margin, si
 });
 
 // src/domain/components/ProgressComponent.ts
-var createProgressComponent = (props) => __spreadValues({
+var createProgressComponent = (props) => __spreadProps(__spreadValues({
   type: "progress",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/progressLayoutToComponent.ts
 var progressLayoutToComponent = (uid, {
@@ -2541,10 +2667,15 @@ var progressLayoutToComponent = (uid, {
 });
 
 // src/domain/components/ReviewComponent.ts
-var createReviewComponent = (props) => __spreadValues({
+var createReviewComponent = (props) => __spreadProps(__spreadValues({
   type: "review",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/reviewLayoutToComponent.ts
 var reviewLayoutToComponent = (uid, {
@@ -2695,6 +2826,10 @@ var createSearchComponent = (props, performSearch, onBehavior, onComponentUpdate
           url: value.url
         });
       }
+    },
+    start() {
+    },
+    stop() {
     }
   };
   return component;
@@ -2840,13 +2975,22 @@ var emptyInitialState = {
 };
 
 // src/domain/components/SectionComponent.ts
-var createSectionComponent = (props) => __spreadProps(__spreadValues({}, props), {
-  type: "section",
-  kind: "layout",
-  getChildren() {
-    return props.components;
-  }
-});
+var createSectionComponent = (props) => {
+  const component = __spreadProps(__spreadValues({}, props), {
+    type: "section",
+    kind: "layout",
+    getChildren() {
+      return props.components;
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
+  });
+  return component;
+};
 
 // src/domain/mappers/layout/sectionLayoutToComponent.ts
 var sectionLayoutToComponent = (uid, {
@@ -2891,7 +3035,11 @@ var statusListLayoutToComponent = (uid, { analyticsId, control, items, margin, t
 // src/domain/components/TabsComponent.ts
 var createTabsComponent = (props) => __spreadProps(__spreadValues({}, props), {
   type: "tabs",
-  kind: "layout"
+  kind: "layout",
+  start() {
+  },
+  stop() {
+  }
 });
 
 // src/domain/mappers/layout/tabsLayoutToComponent.ts
@@ -2930,7 +3078,11 @@ var createUpsellComponent = (props, onComponentUpdate) => {
         draft.visible = false;
       });
       dismiss();
-    } : void 0
+    } : void 0,
+    start() {
+    },
+    stop() {
+    }
   });
   return component;
 };
@@ -3045,6 +3197,10 @@ var createExternalConfirmation = (uid, url, onLink, onComponentUpdate) => {
       update(component, (draft) => {
         draft.status = "dismissed";
       });
+    },
+    start() {
+    },
+    stop() {
     }
   };
   return component;
@@ -3145,6 +3301,9 @@ var createStepComponent = (props) => {
       });
     },
     showModal(modal) {
+      if (component.state === "started") {
+        modal.start();
+      }
       update(component, (draft) => {
         draft.modals = [...draft.modals, modal];
       });
@@ -3180,6 +3339,9 @@ var createStepComponent = (props) => {
       return stepDelays.start(delay);
     },
     addSubflow(subflow) {
+      if (component.state === "started") {
+        subflow.start();
+      }
       update(component, (draft) => {
         draft.subflow = subflow;
       });
@@ -3188,6 +3350,7 @@ var createStepComponent = (props) => {
       if (!component.subflow) {
         return;
       }
+      component.subflow.stop();
       update(component, (draft) => {
         draft.subflow = null;
       });
@@ -3202,12 +3365,14 @@ var createStepComponent = (props) => {
       stepPolling == null ? void 0 : stepPolling.start();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.start();
       stepPrefetch.start(component.getSubmittableValueSync());
+      getAllSubcomponents(component).forEach((child) => child.start());
     },
     stop() {
       stepPolling == null ? void 0 : stepPolling.stop();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
       stepDelays.stop();
       stepPrefetch.stop();
+      getAllSubcomponents(component).forEach((child) => child.stop());
       update(component, (draft) => {
         draft.state = "stopped";
         draft.modals = [];
@@ -3221,6 +3386,14 @@ var createStepComponent = (props) => {
   });
   return component;
 };
+var getAllSubcomponents = (component) => [
+  ...component.layoutComponents,
+  ...component.schemaComponents,
+  ...component.footerComponents,
+  ...component.externalConfirmation ? [component.externalConfirmation] : [],
+  ...component.modals,
+  ...component.subflow ? [component.subflow] : []
+];
 var validateInputComponent = (component, inputComponent, isStrict, logEvent) => {
   var _a;
   const isSchemaReferenced = component.referencedSchemaIds.includes((_a = inputComponent.schemaId) != null ? _a : "");
@@ -3837,7 +4010,7 @@ var createNumberInputComponent = (props, onComponentUpdate) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "number",
     kind: "input",
     uid,
@@ -3889,7 +4062,12 @@ var createNumberInputComponent = (props, onComponentUpdate) => {
       });
       return errors.length === 0;
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -4500,6 +4678,12 @@ var createAllOfComponent = (props) => {
     },
     validate() {
       return hidden ? true : validateComponents(component.getChildren());
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   };
   return component;
@@ -4642,6 +4826,12 @@ var createRepeatableComponent = (props, onComponentUpdate) => {
         draft.errors = messages;
       });
       return messages.length === 0 && childComponentsValid;
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   });
   return component;
@@ -4820,7 +5010,7 @@ var createMultiUploadInputComponent = (props, onComponentUpdate) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const getFileValidationErrors = getLocalValueValidator(fileChecks);
   const persist = performPersistAsync ? getComponentMultiPersistAsync(update, performPersistAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "multi-upload",
     kind: "input",
     uid,
@@ -4886,7 +5076,12 @@ var createMultiUploadInputComponent = (props, onComponentUpdate) => {
       });
       return errorMsgs.length === 0 && component.files.every(({ errors }) => errors.length === 0);
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -5122,6 +5317,12 @@ var createMultiSelectComponent = (props, onComponentUpdate) => {
     },
     getSelectedChildren() {
       return component.selectedIndices.map((i) => component.children[i]);
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   });
   return component;
@@ -5255,6 +5456,12 @@ var createTupleComponent = (props) => {
     },
     validate() {
       return hidden ? true : validateComponents(component.getChildren());
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   };
   return component;
@@ -5338,7 +5545,7 @@ var createUploadInputComponent = (props, onComponentUpdate) => {
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
   const getValidationErrors = getLocalValueValidator(checks);
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "upload",
     kind: "input",
     uid,
@@ -5392,7 +5599,12 @@ var createUploadInputComponent = (props, onComponentUpdate) => {
       });
       return errors.length === 0;
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   if (format === "base64" && value && !onPersistAsync) {
     void toBase64(value).then((base64Value) => {
       if (base64Value) {
@@ -5460,7 +5672,7 @@ var createBooleanInputComponent = (props, onComponentUpdate) => {
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
   const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "boolean",
     kind: "input",
     uid,
@@ -5498,7 +5710,12 @@ var createBooleanInputComponent = (props, onComponentUpdate) => {
       return component.value;
     },
     validate: () => true
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -5555,7 +5772,11 @@ var createConstComponent = (props) => {
     getSubmittableValue: async () => value,
     getSubmittableValueSync: () => value,
     getSummary: () => summary,
-    validate: () => true
+    validate: () => true,
+    start() {
+    },
+    stop() {
+    }
   };
 };
 
@@ -5609,7 +5830,7 @@ var createDateInputComponent = (props, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
   const getValidationErrors = getLocalValueValidator(checks);
   const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "date",
     kind: "input",
     uid,
@@ -5663,7 +5884,12 @@ var createDateInputComponent = (props, onComponentUpdate) => {
       });
       return errors.length === 0;
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -5782,7 +6008,7 @@ var createIntegerInputComponent = (props, onComponentUpdate) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "integer",
     kind: "input",
     uid,
@@ -5835,7 +6061,12 @@ var createIntegerInputComponent = (props, onComponentUpdate) => {
       });
       return errors.length === 0;
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -5938,6 +6169,10 @@ var createFormattedValueComponent = (props, onComponentUpdate) => {
         draft.value = newValue;
       });
       void (schemaOnChange == null ? void 0 : schemaOnChange());
+    },
+    start() {
+    },
+    stop() {
     }
   };
   return component;
@@ -6001,7 +6236,7 @@ var createMoneyInputComponent = (props, onComponentUpdate) => {
   ]);
   const getValidationErrors = getLocalValueValidator(checks);
   const update = getInputUpdateFunction(onComponentUpdate);
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "money-input",
     kind: "input",
     id,
@@ -6057,7 +6292,12 @@ var createMoneyInputComponent = (props, onComponentUpdate) => {
     // noop
     onFocus() {
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -6128,6 +6368,12 @@ var createObjectComponent = (props) => {
     },
     validate() {
       return hidden ? true : validateComponents(component.getChildren());
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   };
   return component;
@@ -6394,6 +6640,12 @@ var createSelectInputComponent = (props, onComponentUpdate) => {
         draft.errors = errors;
       });
       return errors.length === 0 && validChild;
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   });
   return component;
@@ -6581,6 +6833,10 @@ var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, o
         draft.status = "persisting";
       });
       return newSubmission;
+    },
+    start() {
+    },
+    stop() {
     }
   };
   return component;
@@ -6681,7 +6937,7 @@ var createTextInputComponent = (props, onComponentUpdate) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "text",
     kind: "input",
     uid,
@@ -6736,7 +6992,12 @@ var createTextInputComponent = (props, onComponentUpdate) => {
       });
       return errors.length === 0;
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -7408,20 +7669,30 @@ var createSubflowComponent = (props, onComponentUpdate) => {
 };
 var createDynamicSubflowComponent = (props, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
-  return __spreadValues({
+  return __spreadProps(__spreadValues({
     uid: `subflow-dynamic-${getRandomId()}`,
     type: "subflow",
     subflowType: "dynamic",
     kind: "layout"
-  }, props);
+  }, props), {
+    start() {
+    },
+    stop() {
+    }
+  });
 };
 var createNativeSubflowComponent = (props) => {
-  return __spreadValues({
+  return __spreadProps(__spreadValues({
     uid: `subflow-native-${getRandomId()}`,
     type: "subflow",
     subflowType: "native",
     kind: "layout"
-  }, props);
+  }, props), {
+    start() {
+    },
+    stop() {
+    }
+  });
 };
 
 // src/controller/executeSubflow.ts