@wise/dynamic-flow-client 4.8.7 → 4.9.0-exp-modal-renderer-c6d2baa

package/build/main.js

@@ -1081,7 +1081,7 @@ function findRendererPropsByType(root, type, predicate = () => true) {
   ];
 }
 var isType = (node, type) => node.type === type;
-function getChildren(node) {
+var getChildren = (node) => {
   switch (node.type) {
     case "root":
     case "box":
@@ -1089,12 +1089,12 @@ function getChildren(node) {
     case "form":
     case "form-section":
     case "step":
-    case "modal-content":
+    case "modal":
     case "section":
       return node.childrenProps;
     case "columns":
       return [...node.startChildrenProps, ...node.endChildrenProps];
-    case "modal":
+    case "modal-layout":
       return node.content.childrenProps;
     case "repeatable":
       return node.editableItemProps ? [node.editableItemProps] : [];
@@ -1128,7 +1128,7 @@ function getChildren(node) {
     case "external-confirmation":
       return [];
   }
-}
+};
 
 // src/revamp/renderers/CoreRootRenderer.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -1517,12 +1517,28 @@ var markdownComponentToProps = (control, rendererMapperProps) => __spreadValues(
 
 // src/revamp/renderers/mappers/modalComponentToProps.ts
 var modalComponentToProps = (component, rendererMapperProps) => {
-  const { uid, analyticsId, content, control, margin, trigger } = component;
+  const { uid, analyticsId, open, title, close } = component;
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
   return __spreadValues({
     uid,
     analyticsId,
     type: "modal",
+    open,
+    title,
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps,
+    onClose: close.bind(component)
+  }, rendererMapperProps);
+};
+
+// src/revamp/renderers/mappers/modalLayoutComponentToProps.ts
+var modalLayoutComponentToProps = (component, rendererMapperProps) => {
+  const { uid, analyticsId, content, control, margin, trigger } = component;
+  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
+  return __spreadValues({
+    uid,
+    analyticsId,
+    type: "modal-layout",
     content: {
       children: childrenProps.map(rendererMapperProps.render),
       childrenProps,
@@ -1534,22 +1550,6 @@ var modalComponentToProps = (component, rendererMapperProps) => {
   }, rendererMapperProps);
 };
 
-// src/revamp/renderers/mappers/modalContentComponentToProps.ts
-var modalContentComponentToProps = (component, rendererMapperProps) => {
-  const { uid, analyticsId, open, title, close } = component;
-  const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
-  return __spreadValues({
-    uid,
-    analyticsId,
-    type: "modal-content",
-    open,
-    title,
-    children: childrenProps.map(rendererMapperProps.render),
-    childrenProps,
-    onClose: close.bind(component)
-  }, rendererMapperProps);
-};
-
 // src/revamp/renderers/mappers/multiSelectComponentToProps.ts
 var multiSelectInputComponentToProps = (component, rendererMapperProps) => {
   const { autoComplete, maxItems, minItems, options, selectedIndices, onSelect } = component;
@@ -1800,6 +1800,22 @@ var selectInputComponentToProps = (component, rendererMapperProps) => {
 // src/revamp/renderers/mappers/statusListComponentToProps.ts
 var statusListComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "items", "margin", "title")), rendererMapperProps);
 
+// src/revamp/renderers/mappers/tabsComponentToProps.ts
+var tabsComponentToProps = (component, rendererMapperProps) => {
+  const tabs = component.tabs.map(({ components, tag, title }) => {
+    const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return {
+      title,
+      tag,
+      childrenProps,
+      children: childrenProps.map(rendererMapperProps.render)
+    };
+  });
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin")), rendererMapperProps), {
+    tabs
+  });
+};
+
 // src/revamp/renderers/mappers/textInputComponentToProps.ts
 var textInputComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, inputComponentToProps(component, "input-text")), rendererMapperProps), {
   autoComplete: component.autoComplete,
@@ -1844,27 +1860,15 @@ var uploadInputComponentToProps = (component, rendererMapperProps) => {
   });
 };
 
-// src/revamp/renderers/mappers/tabsComponentToProps.ts
-var tabsComponentToProps = (component, rendererMapperProps) => {
-  const tabs = component.tabs.map(({ components, tag, title }) => {
-    const childrenProps = components.map((c) => componentToRendererProps(c, rendererMapperProps));
-    return {
-      title,
-      tag,
-      childrenProps,
-      children: childrenProps.map(rendererMapperProps.render)
-    };
-  });
-  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin")), rendererMapperProps), {
-    tabs
-  });
-};
-
 // src/revamp/renderers/mappers/componentToRendererProps.ts
-var componentToRendererProps = (component, rendererMapperProps) => {
+var componentToRendererProps = (component, mapperProps) => {
   if (isHiddenComponent(component)) {
     return hiddenComponentToProps(component);
   }
+  const trackEventWithLayoutId = (eventName, properties) => mapperProps.trackEvent(eventName, __spreadValues({
+    layoutId: component.analyticsId
+  }, properties));
+  const rendererMapperProps = component.kind === "layout" ? __spreadProps(__spreadValues({}, mapperProps), { trackEvent: trackEventWithLayoutId }) : mapperProps;
   const componentProps = getComponentProps(component, rendererMapperProps);
   const alertProps = getComponentAlertProps(component, rendererMapperProps);
   if (alertProps) {
@@ -1924,10 +1928,10 @@ var getComponentProps = (component, rendererMapperProps) => {
       return loadingIndicatorComponentToProps(component, rendererMapperProps);
     case "markdown":
       return markdownComponentToProps(component, rendererMapperProps);
+    case "modal-layout":
+      return modalLayoutComponentToProps(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":
@@ -1989,6 +1993,7 @@ var createRootDomainComponent = (updateComponent) => {
   const update = getInputUpdateFunction(updateComponent);
   const rootComponent = {
     type: "root",
+    kind: "step",
     uid: "root",
     stepComponent: null,
     _update(updateFn) {
@@ -2051,11 +2056,12 @@ var createRootDomainComponent = (updateComponent) => {
   return rootComponent;
 };
 
-// src/revamp/domain/components/ModalContentComponent.ts
+// src/revamp/domain/components/ModalComponent.ts
 var createModalContentComponent = (modalProps, updateComponent) => {
   const update = getInputUpdateFunction(updateComponent);
   const modalContentComponent = __spreadProps(__spreadValues({
-    type: "modal-content",
+    type: "modal",
+    kind: "layout",
     open: true
   }, modalProps), {
     _update(updateFn) {
@@ -2078,7 +2084,8 @@ var getRandomId = () => Math.random().toString(36).substring(2);
 
 // src/revamp/domain/components/AlertComponent.ts
 var createAlertComponent = (alertProps) => __spreadValues({
-  type: "alert"
+  type: "alert",
+  kind: "layout"
 }, alertProps);
 
 // src/revamp/domain/mappers/utils/behavior-utils.ts
@@ -2230,6 +2237,7 @@ var alertLayoutToComponent = (uid, { control, markdown, margin = "md", context =
 // src/revamp/domain/components/BoxComponent.ts
 var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps), {
   type: "box",
+  kind: "layout",
   getChildren() {
     return this.components;
   }
@@ -2250,7 +2258,8 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin =
 
 // src/revamp/domain/components/ButtonComponent.ts
 var createButtonComponent = (buttonProps) => __spreadValues({
-  type: "button"
+  type: "button",
+  kind: "layout"
 }, buttonProps);
 
 // src/revamp/domain/mappers/layout/buttonLayoutToComponent.ts
@@ -2333,6 +2342,7 @@ var getButtonContext = ({ context, action }) => {
 // src/revamp/domain/components/ColumnsComponent.ts
 var createColumnsComponent = (columnsProps) => __spreadProps(__spreadValues({}, columnsProps), {
   type: "columns",
+  kind: "layout",
   getChildren() {
     return [...this.startComponents, ...this.endComponents];
   }
@@ -2360,7 +2370,8 @@ var columnsLayoutToComponent = (uid, { control, left, right, bias = "none", marg
 
 // src/revamp/domain/components/DecisionComponent.ts
 var createDecisionComponent = (decisionProps) => __spreadValues({
-  type: "decision"
+  type: "decision",
+  kind: "layout"
 }, decisionProps);
 
 // src/revamp/domain/mappers/utils/utils.ts
@@ -2421,7 +2432,8 @@ var mapOption = (option, onBehavior, stepActions = []) => {
 
 // src/revamp/domain/components/StatusListComponent.ts
 var createStatusListComponent = (statusListProps) => __spreadValues({
-  type: "status-list"
+  type: "status-list",
+  kind: "layout"
 }, statusListProps);
 
 // src/revamp/domain/mappers/layout/deprecatedListLayoutToComponent.ts
@@ -2459,7 +2471,8 @@ var mapLegacyStatus = (status) => {
 
 // src/revamp/domain/components/DividerComponent.ts
 var createDividerComponent = (props) => __spreadValues({
-  type: "divider"
+  type: "divider",
+  kind: "layout"
 }, props);
 
 // src/revamp/domain/mappers/layout/dividerLayoutToComponent.ts
@@ -2468,6 +2481,7 @@ var dividerLayoutToComponent = (uid, { control, margin = "md", analyticsId }) =>
 // src/revamp/domain/components/FormComponent.ts
 var createFormComponent = (formProps) => __spreadProps(__spreadValues({}, formProps), {
   type: "form",
+  kind: "layout",
   getChildren() {
     return [this.schemaComponent];
   }
@@ -2498,7 +2512,8 @@ var formLayoutToComponent = (uid, { analyticsId, schemaId, schema: schemaRef, co
 
 // src/revamp/domain/components/HeadingComponent.ts
 var createHeadingComponent = (headingProps) => __spreadValues({
-  type: "heading"
+  type: "heading",
+  kind: "layout"
 }, headingProps);
 
 // src/revamp/domain/mappers/layout/headingLayoutToComponent.ts
@@ -2514,7 +2529,8 @@ var headingLayoutToComponent = (uid, { analyticsId, align = "left", margin = "md
 
 // src/revamp/domain/components/ImageComponent.ts
 var createImageComponent = (imageProps) => __spreadValues({
-  type: "image"
+  type: "image",
+  kind: "layout"
 }, imageProps);
 
 // src/revamp/domain/mappers/layout/imageLayoutToComponent.ts
@@ -2546,7 +2562,8 @@ var imageLayoutToComponent = (uid, {
 
 // src/revamp/domain/components/MarkdownComponent.ts
 var createMarkdownComponent = (markdownProps) => __spreadValues({
-  type: "markdown"
+  type: "markdown",
+  kind: "layout"
 }, markdownProps);
 
 // src/revamp/domain/mappers/layout/infoLayoutToComponent.ts
@@ -2561,7 +2578,8 @@ var infoLayoutToComponent = (uid, { analyticsId, align = "left", control, margin
 
 // src/revamp/domain/components/InstructionsComponent.ts
 var createInstructionsComponent = (instructionsProps) => __spreadValues({
-  type: "instructions"
+  type: "instructions",
+  kind: "layout"
 }, instructionsProps);
 
 // src/revamp/domain/mappers/layout/instructionsLayoutToComponent.ts
@@ -2578,7 +2596,8 @@ var instructionsLayoutToComponent = (uid, { analyticsId, control, items, margin
 
 // src/revamp/domain/components/ListComponent.ts
 var createListComponent = (listProps) => __spreadValues({
-  type: "list"
+  type: "list",
+  kind: "layout"
 }, listProps);
 
 // src/revamp/domain/mappers/layout/listLayoutToComponent.ts
@@ -2616,7 +2635,8 @@ var mapSupportingValues = (item) => {
 
 // src/revamp/domain/components/LoadingIndicatorComponent.ts
 var createLoadingIndicatorComponent = (loadingIndicatorProps) => __spreadValues({
-  type: "loading-indicator"
+  type: "loading-indicator",
+  kind: "layout"
 }, loadingIndicatorProps);
 
 // src/revamp/domain/mappers/layout/loadingIndicatorLayoutToComponent.ts
@@ -2632,9 +2652,10 @@ var markdownLayoutToComponent = (uid, { analyticsId, align = "left", margin = "m
   margin
 });
 
-// src/revamp/domain/components/ModalComponent.ts
+// src/revamp/domain/components/ModalLayoutComponent.ts
 var createModalComponent = (modalProps) => __spreadProps(__spreadValues({
-  type: "modal"
+  type: "modal-layout",
+  kind: "layout"
 }, modalProps), {
   getChildren() {
     return this.content.components;
@@ -2661,7 +2682,8 @@ var modalLayoutToComponent = (uid, { analyticsId, content, control, margin = "md
 
 // src/revamp/domain/components/ParagraphComponent.ts
 var createParagraphComponent = (paragraphProps) => __spreadValues({
-  type: "paragraph"
+  type: "paragraph",
+  kind: "layout"
 }, paragraphProps);
 
 // src/revamp/domain/mappers/layout/paragraphLayoutToComponent.ts
@@ -2676,7 +2698,8 @@ var paragraphLayoutToComponent = (uid, { analyticsId, align = "left", control, m
 
 // src/revamp/domain/components/ReviewComponent.ts
 var createReviewComponent = (reviewProps) => __spreadValues({
-  type: "review"
+  type: "review",
+  kind: "layout"
 }, reviewProps);
 
 // src/revamp/domain/mappers/layout/reviewLayoutToComponent.ts
@@ -2816,6 +2839,7 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, updateCompo
   const debouncedSearch = debounce(search, DEBOUNCE_TIME);
   const component = {
     type: "search",
+    kind: "layout",
     uid,
     analyticsId,
     control,
@@ -2954,6 +2978,7 @@ var statusListLayoutToComponent = (uid, { analyticsId, control, items, margin =
 var createSectionComponent = (props) => {
   return __spreadProps(__spreadValues({}, props), {
     type: "section",
+    kind: "layout",
     getChildren() {
       return this.components;
     }
@@ -2982,7 +3007,8 @@ var sectionLayoutToComponent = (uid, { analyticsId, control, title, components,
 
 // src/revamp/domain/components/TabsComponent.ts
 var createTabsComponent = (tabsProps) => __spreadProps(__spreadValues({}, tabsProps), {
-  type: "tabs"
+  type: "tabs",
+  kind: "layout"
 });
 
 // src/revamp/domain/mappers/layout/tabsLayoutToComponent.ts
@@ -3072,6 +3098,7 @@ var createExternalConfirmation = (uid, url, updateComponent) => {
   const update = getInputUpdateFunction(updateComponent);
   return {
     type: "external-confirmation",
+    kind: "layout",
     uid,
     url,
     status: "initial",
@@ -3134,6 +3161,7 @@ var createStepComponent = (stepProps) => {
     uid
   }, rest), {
     type: "step",
+    kind: "step",
     modals: [],
     dismissModal() {
       var _a2;
@@ -3372,6 +3400,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
   const numberComponent = __spreadValues({
     type: "number",
+    kind: "input",
     uid,
     id,
     _update(updateFn) {
@@ -3921,6 +3950,7 @@ var createAllOfComponent = (allOfProps) => {
   } = allOfProps;
   return {
     type: "all-of",
+    kind: "input",
     uid,
     schemaId,
     analyticsId,
@@ -4006,6 +4036,7 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
     schemaId,
     analyticsId,
     type: "repeatable",
+    kind: "input",
     components,
     editableComponent: null,
     editableIndex: null,
@@ -4264,6 +4295,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
   const getFileValidationErrors = getLocalValueValidator(fileChecks);
   const uploadComponent = __spreadValues({
     type: "multi-upload",
+    kind: "input",
     uid,
     id,
     format: "base64",
@@ -4522,6 +4554,7 @@ var createMultiSelectComponent = (multiSelectProps, updateComponent) => {
   const component = __spreadProps(__spreadValues({
     uid,
     type: "multi-select",
+    kind: "input",
     children,
     options,
     selectedIndices,
@@ -4674,6 +4707,7 @@ var createTupleComponent = (tupleProps) => {
   } = tupleProps;
   return {
     type: "tuple",
+    kind: "input",
     uid,
     schemaId,
     analyticsId,
@@ -4787,6 +4821,7 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const uploadComponent = __spreadValues({
     type: "upload",
+    kind: "input",
     uid,
     id,
     format,
@@ -4892,6 +4927,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
   const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
   const booleanComponent = __spreadValues({
     type: "boolean",
+    kind: "input",
     uid,
     id,
     autoComplete: "",
@@ -4973,6 +5009,7 @@ var createConstComponent = (hiddenProps) => {
   const { uid, schemaId, analyticsId, value, summary } = hiddenProps;
   return {
     type: "const",
+    kind: "input",
     uid,
     schemaId,
     analyticsId,
@@ -5029,6 +5066,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
   const integerComponent = __spreadValues({
     type: "integer",
+    kind: "input",
     uid,
     id,
     value,
@@ -5139,6 +5177,7 @@ var createObjectComponent = (objectProps) => {
   } = objectProps;
   return {
     type: "object",
+    kind: "input",
     uid,
     schemaId,
     analyticsId,
@@ -5277,6 +5316,7 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
   const component = __spreadProps(__spreadValues({
     uid,
     type: "select",
+    kind: "input",
     children,
     options,
     selectedIndex,
@@ -5440,6 +5480,7 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
   const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
   const dateInputComponent = __spreadValues({
     type: "date",
+    kind: "input",
     uid,
     id,
     value,
@@ -5601,6 +5642,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
   const inputComponent = __spreadValues({
     type: "text",
+    kind: "input",
     uid,
     id,
     value,
@@ -5755,6 +5797,7 @@ var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, u
   const update = getInputUpdateFunction(updateComponent);
   const paComponent = {
     type: "persist-async",
+    kind: "input",
     uid,
     analyticsId,
     schemaId,