@wise/dynamic-flow-client 5.20.0 → 5.22.0

package/build/main.js

@@ -883,6 +883,7 @@ var getChildren = (node) => {
       return node.tabs.flatMap((c) => c.childrenProps);
     case "alert":
     case "button":
+    case "collection":
     case "input-checkbox":
     case "input-date":
     case "decision":
@@ -1301,6 +1302,17 @@ var createAlertComponent = (props) => __spreadValues({
   kind: "layout"
 }, props);
 
+// src/domain/handlers/dismissHandler.ts
+var makeDismissHandler = (onDismiss, mapperProps) => () => {
+  const { url, method, body, headers } = onDismiss;
+  void mapperProps.httpClient(url, {
+    method,
+    body: method === "GET" ? void 0 : JSON.stringify(body),
+    headers
+  }).catch(() => {
+  });
+};
+
 // src/domain/mappers/utils/behavior-utils.ts
 var getDomainLayerBehavior = ({ action, behavior: specBehavior }, stepActions, registerSubmissionBehavior) => {
   if (specBehavior) {
@@ -1454,20 +1466,25 @@ var alertLayoutToComponent = (uid, {
   context,
   callToAction,
   analyticsId,
-  tags
-}, mapperProps) => {
-  const cta = callToAction ? getDomainLayerCallToAction(callToAction, mapperProps) : void 0;
-  return createAlertComponent({
-    uid,
-    analyticsId,
-    control,
-    markdown,
-    margin: margin != null ? margin : "md",
-    callToAction: cta,
-    context: mapLegacyContext(context != null ? context : "neutral"),
-    tags
-  });
-};
+  tags,
+  title,
+  media,
+  onDismiss,
+  secondaryCallToAction
+}, mapperProps) => createAlertComponent({
+  uid,
+  analyticsId,
+  control,
+  markdown,
+  margin: margin != null ? margin : "md",
+  callToAction: getDomainLayerCallToAction(callToAction, mapperProps),
+  context: mapLegacyContext(context != null ? context : "neutral"),
+  tags,
+  title,
+  media,
+  dismiss: onDismiss ? makeDismissHandler(onDismiss, mapperProps) : void 0,
+  secondaryCallToAction: getDomainLayerCallToAction(secondaryCallToAction, mapperProps)
+});
 
 // src/domain/components/BoxComponent.ts
 var createBoxComponent = (props) => __spreadProps(__spreadValues({}, props), {
@@ -1500,6 +1517,367 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin,
   )
 });
 
+// src/domain/mappers/utils/utils.ts
+var mapInlineAlert = (alert) => {
+  return alert ? {
+    content: alert.content,
+    context: alert.context ? mapLegacyContext(alert.context) : "neutral"
+  } : void 0;
+};
+var mapAdditionalInfo = (info, mapperProps) => {
+  const { onBehavior, trackEvent, registerSubmissionBehavior } = mapperProps;
+  if (info) {
+    const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
+    const isLink = behavior.type === "link";
+    return {
+      text: info.text,
+      href: isLink ? behavior.url : void 0,
+      hrefWithTracking: getHrefWithTracking({
+        behavior,
+        onBehavior,
+        trackEvent
+      }),
+      accessibilityDescription: info.accessibilityDescription,
+      onClick: behavior.type === "none" ? void 0 : () => {
+        void onBehavior(behavior);
+      }
+    };
+  }
+  return void 0;
+};
+var mapSchemaAlert = (alert) => {
+  return alert ? {
+    content: alert.markdown,
+    context: alert.context ? mapLegacyContext(alert.context) : "neutral"
+  } : void 0;
+};
+
+// src/domain/components/utils/debounce.ts
+var debounce = (callback, waitMs) => {
+  let timeoutId = null;
+  let lastArgs = null;
+  const clearTimer = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    lastArgs = null;
+  };
+  const debouncedFn = (...args) => {
+    lastArgs = args;
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      callback(...lastArgs);
+      timeoutId = null;
+      lastArgs = null;
+    }, waitMs);
+  };
+  debouncedFn.cancel = () => {
+    if (timeoutId !== null) {
+      clearTimer();
+    }
+  };
+  debouncedFn.flush = () => {
+    if (timeoutId !== null) {
+      callback(...lastArgs);
+      clearTimer();
+    }
+  };
+  return debouncedFn;
+};
+
+// src/domain/components/collectionComponent/CollectionComponent.ts
+var DEBOUNCE_TIME = 800;
+var createCollectionComponent = (props, onComponentUpdate, queryFunction) => {
+  const { uid, analyticsId, control, margin, tags, state } = props;
+  const update = getInputUpdateFunction(onComponentUpdate);
+  let abortController = new AbortController();
+  const query = (mode) => {
+    var _a, _b;
+    abortController.abort();
+    abortController = new AbortController();
+    const { signal } = abortController;
+    queryFunction({
+      searchParam: (_a = component.state.search) == null ? void 0 : _a.param,
+      query: (_b = component.state.search) == null ? void 0 : _b.query,
+      cursor: mode === "pagination" ? component.state.nextCursor : void 0,
+      signal,
+      filters: component.state.filters
+    }).then((response) => {
+      if (!response) {
+        return;
+      }
+      update(component, (draft) => {
+        var _a2, _b2;
+        draft.state = {
+          sections: mode === "pagination" ? mergeSections(component.state.sections, response.sections) : response.sections,
+          nextCursor: response.nextCursor,
+          filters: response.filters ? mapFilters(response.filters) : component.state.filters,
+          search: response.search ? mapSearch(response.search) : component.state.search,
+          beforeSections: (_a2 = response.beforeSections) != null ? _a2 : component.state.beforeSections,
+          afterSections: (_b2 = response.afterSections) != null ? _b2 : component.state.afterSections
+        };
+        draft.status = {
+          type: "idle",
+          loadMore: response.nextCursor ? paginate : void 0
+        };
+      });
+    }).catch(() => {
+      if (!signal.aborted) {
+        update(component, (draft) => {
+          draft.state = {
+            filters: component.state.filters,
+            search: component.state.search,
+            sections: []
+          };
+          draft.status = { type: "error", reason: mode, retry: () => query(mode) };
+        });
+      }
+    });
+  };
+  const debouncedQuery = debounce(query, DEBOUNCE_TIME);
+  const search = () => {
+    abortController.abort();
+    debouncedQuery("search");
+  };
+  const filter = () => {
+    debouncedQuery("search");
+    debouncedQuery.flush();
+  };
+  const paginate = () => query("pagination");
+  const selectFilter = (filterIndex, optionIndex) => {
+    var _a;
+    const selected = (_a = component.state.filters) == null ? void 0 : _a[filterIndex];
+    if (!selected) {
+      return;
+    }
+    const currentValue = selected.options[optionIndex].selected;
+    update(component, (draft) => {
+      if (!draft.state.filters) {
+        return;
+      }
+      const draftFilter = draft.state.filters[filterIndex];
+      if (selected.multiSelect) {
+        draftFilter.options[optionIndex].selected = !currentValue;
+      } else {
+        draftFilter.options.forEach((draftOption, index) => {
+          draftOption.selected = index === optionIndex ? !currentValue : false;
+        });
+      }
+      draft.status = { type: "loading", reason: "search" };
+    });
+    filter();
+  };
+  const mapFilters = (filters) => filters == null ? void 0 : filters.map((f, filterIndex) => {
+    var _a;
+    return __spreadProps(__spreadValues({}, f), {
+      options: (_a = f.options) == null ? void 0 : _a.map((option, optionIndex) => {
+        var _a2;
+        return __spreadProps(__spreadValues({}, option), {
+          selected: (_a2 = option.selected) != null ? _a2 : false,
+          onSelect: () => selectFilter(filterIndex, optionIndex)
+        });
+      })
+    });
+  });
+  const mapSearch = (searchConfig) => searchConfig ? __spreadProps(__spreadValues({
+    query: ""
+  }, searchConfig), {
+    onChange(value) {
+      update(component, (draft) => {
+        if (draft.state.search) {
+          draft.state.search.query = value;
+          draft.status = { type: "loading", reason: "search" };
+        }
+      });
+      search();
+    }
+  }) : void 0;
+  const component = {
+    type: "collection",
+    kind: "layout",
+    uid,
+    analyticsId,
+    control,
+    margin,
+    tags,
+    status: {
+      type: "idle",
+      loadMore: state.nextCursor ? () => query("pagination") : void 0
+    },
+    state: __spreadProps(__spreadValues({}, state), {
+      filters: mapFilters(state.filters),
+      search: mapSearch(props.search)
+    })
+  };
+  return component;
+};
+var mergeSections = (existing, incoming) => {
+  const knownIds = new Set(existing.map((section) => section.id));
+  const newSections = incoming.filter((section) => !knownIds.has(section.id));
+  const merged = existing.map((section) => {
+    const match = incoming.find((s) => s.id === section.id);
+    if (!match) return section;
+    return __spreadProps(__spreadValues({}, match), { items: [...section.items, ...match.items] });
+  });
+  return [...merged, ...newSections];
+};
+
+// src/domain/features/collection/getPerformCollectionQuery.ts
+var getPerformCollectionQuery = (httpClient, baseRequest, mapState) => {
+  let latestSuccessfulRequestHash = null;
+  let latestSuccessfulResults = null;
+  return async (props) => {
+    const requestHash = hashRequest(props);
+    if (requestHash !== latestSuccessfulRequestHash) {
+      const response = await performRequest(baseRequest, props, httpClient);
+      const results = await parseResponse(response);
+      latestSuccessfulRequestHash = requestHash;
+      const mappedState = mapState(results);
+      latestSuccessfulResults = mappedState;
+      return mappedState;
+    }
+    return latestSuccessfulResults;
+  };
+};
+var performRequest = (request, queryProps, httpClient) => {
+  const { url, method, body, headers } = request;
+  if (method === "GET") {
+    return httpClient(buildQueryURL(url, queryProps), {
+      method,
+      headers: __spreadProps(__spreadValues({}, headers), {
+        "Content-Type": "application/json"
+      }),
+      signal: queryProps.signal
+    });
+  }
+  return httpClient(url, {
+    method,
+    headers: __spreadProps(__spreadValues({}, headers), {
+      "Content-Type": "application/json"
+    }),
+    signal: queryProps.signal,
+    body: JSON.stringify(__spreadValues(__spreadValues({}, body && typeof body === "object" && !isArray(body) ? body : {}), buildRequestBody(queryProps)))
+  });
+};
+var buildQueryURL = (url, { searchParam, query, cursor, filters = [] }) => {
+  const [baseUrl, queryParams] = splitUrlAndParams(url);
+  const params = new URLSearchParams(queryParams);
+  if (searchParam && query) {
+    params.append(searchParam, query);
+  }
+  if (cursor) {
+    params.append("cursor", cursor);
+  }
+  getFilterValues(filters).forEach(([key, value]) => {
+    if (typeof value === "string") {
+      params.append(key, value);
+    } else {
+      value.forEach((v) => params.append(key, v));
+    }
+  });
+  return `${baseUrl}?${params.toString()}`;
+};
+var splitUrlAndParams = (url) => {
+  const [baseUrl, ...rest] = url.split("?");
+  return [baseUrl, rest.join("")];
+};
+var buildRequestBody = ({
+  searchParam,
+  query,
+  cursor,
+  filters = []
+}) => __spreadProps(__spreadValues(__spreadValues({}, searchParam && query ? { [searchParam]: query } : {}), Object.fromEntries(getFilterValues(filters))), {
+  cursor
+});
+var getFilterValues = (filters) => {
+  return filters.map((filter) => {
+    const { multiSelect, param } = filter;
+    const values = filter.options.filter((option) => option.selected).map((option) => option.value);
+    if (values.length === 0) {
+      return void 0;
+    }
+    return [param, multiSelect ? values : values[0]];
+  }).filter((value) => value !== void 0);
+};
+var parseResponse = async (response) => {
+  if (response.ok) {
+    const body = await response.json().catch(() => null);
+    return body;
+  }
+  throw Error("error response");
+};
+var hashRequest = ({
+  query,
+  cursor,
+  filters
+}) => JSON.stringify({ query, cursor, filters: getFilterValues(filters != null ? filters : []) });
+
+// src/domain/mappers/layout/collectionLayoutToComponent.ts
+var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, margin, search, tags, baseRequest }, mapperProps) => {
+  const { httpClient, onComponentUpdate } = mapperProps;
+  const mapLayout = (layout, index) => mapLayoutToComponent(`${uid}-collection-response-${index}`, layout, mapperProps, []);
+  const mapState = (state) => mapCollectionSpecToDomainState(state, mapperProps, mapLayout);
+  const queryFunction = getPerformCollectionQuery(httpClient, baseRequest, mapState);
+  const component = createCollectionComponent(
+    {
+      uid,
+      analyticsId,
+      control,
+      margin: margin != null ? margin : "md",
+      tags,
+      state: mapState(initialState),
+      search
+    },
+    onComponentUpdate,
+    queryFunction
+  );
+  return component;
+};
+var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
+  var _a, _b, _c;
+  return {
+    sections: specState.sections.map((section) => {
+      return {
+        id: section.id,
+        title: section.title,
+        callToAction: getDomainLayerCallToAction(section.callToAction, mapperProps),
+        items: section.items.map((item) => {
+          const behavior = getDomainLayerBehavior(
+            { behavior: item.primaryBehavior },
+            [],
+            mapperProps.registerSubmissionBehavior
+          );
+          return __spreadProps(__spreadValues({}, item), {
+            id: item.entityId,
+            onClick: item.primaryBehavior ? () => {
+              void mapperProps.onBehavior(behavior);
+            } : void 0,
+            callToAction: getDomainLayerCallToAction(item.callToAction, mapperProps),
+            inlineAlert: mapInlineAlert(item.inlineAlert)
+          });
+        })
+      };
+    }),
+    filters: (_a = specState.filters) == null ? void 0 : _a.map((filter) => __spreadProps(__spreadValues({}, filter), {
+      options: filter.options.map((option) => {
+        var _a2;
+        return __spreadProps(__spreadValues({}, option), {
+          selected: (_a2 = option.selected) != null ? _a2 : false,
+          onSelect: () => {
+          }
+          // noop - this gets added during mapping
+        });
+      })
+    })),
+    beforeSections: (_b = specState.beforeSections) == null ? void 0 : _b.map(mapLayout),
+    afterSections: (_c = specState.afterSections) == null ? void 0 : _c.map(mapLayout),
+    nextCursor: specState.nextCursor
+  };
+};
+
 // src/domain/components/ButtonComponent.ts
 var createButtonComponent = (props) => __spreadValues({
   type: "button",
@@ -1668,41 +2046,6 @@ var createDecisionComponent = (props) => __spreadValues({
 // src/domain/mappers/utils/tags-utils.ts
 var mapTags = ({ tag, tags }) => tags != null ? tags : tag != null ? [tag] : void 0;
 
-// src/domain/mappers/utils/utils.ts
-var mapInlineAlert = (alert) => {
-  return alert ? {
-    content: alert.content,
-    context: alert.context ? mapLegacyContext(alert.context) : "neutral"
-  } : void 0;
-};
-var mapAdditionalInfo = (info, mapperProps) => {
-  const { onBehavior, trackEvent, registerSubmissionBehavior } = mapperProps;
-  if (info) {
-    const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
-    const isLink = behavior.type === "link";
-    return {
-      text: info.text,
-      href: isLink ? behavior.url : void 0,
-      hrefWithTracking: getHrefWithTracking({
-        behavior,
-        onBehavior,
-        trackEvent
-      }),
-      accessibilityDescription: info.accessibilityDescription,
-      onClick: behavior.type === "none" ? void 0 : () => {
-        void onBehavior(behavior);
-      }
-    };
-  }
-  return void 0;
-};
-var mapSchemaAlert = (alert) => {
-  return alert ? {
-    content: alert.markdown,
-    context: alert.context ? mapLegacyContext(alert.context) : "neutral"
-  } : void 0;
-};
-
 // src/domain/mappers/layout/decisionLayoutToComponent.ts
 var decisionLayoutToComponent = (uid, {
   analyticsId,
@@ -2178,44 +2521,8 @@ var mapReviewField = (field, mapperProps) => {
   });
 };
 
-// src/domain/components/utils/debounce.ts
-var debounce = (callback, waitMs) => {
-  let timeoutId = null;
-  let lastArgs = null;
-  const clearTimer = () => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-      timeoutId = null;
-    }
-    lastArgs = null;
-  };
-  const debouncedFn = (...args) => {
-    lastArgs = args;
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      callback(...lastArgs);
-      timeoutId = null;
-      lastArgs = null;
-    }, waitMs);
-  };
-  debouncedFn.cancel = () => {
-    if (timeoutId !== null) {
-      clearTimer();
-    }
-  };
-  debouncedFn.flush = () => {
-    if (timeoutId !== null) {
-      callback(...lastArgs);
-      clearTimer();
-    }
-  };
-  return debouncedFn;
-};
-
 // src/domain/components/searchComponent/SearchComponent.ts
-var DEBOUNCE_TIME = 400;
+var DEBOUNCE_TIME2 = 400;
 var createSearchComponent = (props, performSearch, onBehavior, onComponentUpdate) => {
   const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = props;
   const update = getInputUpdateFunction(onComponentUpdate);
@@ -2245,7 +2552,7 @@ var createSearchComponent = (props, performSearch, onBehavior, onComponentUpdate
       }
     });
   };
-  const debouncedSearch = debounce(search, DEBOUNCE_TIME);
+  const debouncedSearch = debounce(search, DEBOUNCE_TIME2);
   const component = {
     type: "search",
     kind: "layout",
@@ -2300,10 +2607,10 @@ var createSearchComponent = (props, performSearch, onBehavior, onComponentUpdate
 
 // src/domain/features/search/getPerformSearchFunction.ts
 var getPerformSearchFunction = (httpClient, mapLayoutToDomainComponent, defaultConfig) => {
-  let latestSuccessfulRequestHash = hashRequest("", defaultConfig);
+  let latestSuccessfulRequestHash = hashRequest2("", defaultConfig);
   let latestSuccessfulResults = null;
   return async ({ config = defaultConfig, query, signal }) => {
-    const requestHash = hashRequest(query, config);
+    const requestHash = hashRequest2(query, config);
     if (requestHash !== latestSuccessfulRequestHash) {
       const { method, param, url } = config;
       const headers = { "Content-Type": "application/json" };
@@ -2317,7 +2624,7 @@ var getPerformSearchFunction = (httpClient, mapLayoutToDomainComponent, defaultC
         signal,
         body: JSON.stringify({ [param]: query })
       }));
-      const results = await parseResponse(response);
+      const results = await parseResponse2(response);
       latestSuccessfulRequestHash = requestHash;
       if (results.type === "layout") {
         const mappedLayoutResult = {
@@ -2333,7 +2640,7 @@ var getPerformSearchFunction = (httpClient, mapLayoutToDomainComponent, defaultC
     return latestSuccessfulResults;
   };
 };
-var parseResponse = async (response) => {
+var parseResponse2 = async (response) => {
   if (response.ok) {
     const body = await response.json().catch(() => null);
     if (isValidResponseBody(body)) {
@@ -2370,7 +2677,7 @@ var isValidResponseBody = (body) => {
   }
   return false;
 };
-var hashRequest = (query, config) => JSON.stringify({ query, config });
+var hashRequest2 = (query, config) => JSON.stringify({ query, config });
 
 // src/domain/mappers/layout/searchLayoutToComponent.ts
 var searchLayoutToComponent = (uid, {
@@ -2447,12 +2754,22 @@ var createSectionComponent = (props) => __spreadProps(__spreadValues({}, props),
 });
 
 // src/domain/mappers/layout/sectionLayoutToComponent.ts
-var sectionLayoutToComponent = (uid, { analyticsId, control, title, components, callToAction, margin, tags }, mapperProps, schemaComponents) => {
+var sectionLayoutToComponent = (uid, {
+  analyticsId,
+  control,
+  shortTitle,
+  title,
+  components,
+  callToAction,
+  margin,
+  tags
+}, mapperProps, schemaComponents) => {
   return createSectionComponent({
     uid,
     analyticsId,
     control,
     title,
+    shortTitle,
     components: components.map(
       (component, index) => mapLayoutToComponent(`${uid}.section-${index}`, component, mapperProps, schemaComponents)
     ),
@@ -2536,12 +2853,7 @@ var upsellLayoutToComponent = (uid, { analyticsId, callToAction, control, margin
       media: getDomainLayerMedia({ media }),
       tags,
       text,
-      dismiss: onDismiss ? () => {
-        const { url, method } = onDismiss;
-        const body = method === "GET" ? void 0 : JSON.stringify(onDismiss.body);
-        void mapperProps.httpClient(url, { method, body }).catch(() => {
-        });
-      } : void 0
+      dismiss: onDismiss ? makeDismissHandler(onDismiss, mapperProps) : void 0
     },
     onComponentUpdate
   );
@@ -2556,6 +2868,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return boxLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "button":
       return buttonLayoutToComponent(uid, layout, mapperProps);
+    case "collection":
+      return collectionLayoutToComponent(uid, layout, mapperProps);
     case "columns":
       return columnsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "decision":
@@ -7809,8 +8123,22 @@ function pick(obj, ...keys) {
 }
 
 // src/renderers/mappers/alertComponentToProps.ts
-var alertComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "context", "control", "margin", "markdown", "tags")), {
-  callToAction: mapCallToActionOptional(component.callToAction)
+var alertComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(
+  component,
+  "uid",
+  "analyticsId",
+  "type",
+  "context",
+  "control",
+  "margin",
+  "markdown",
+  "media",
+  "tags",
+  "title"
+)), {
+  callToAction: mapCallToActionOptional(component.callToAction),
+  onDismiss: component.dismiss,
+  secondaryCallToAction: mapCallToActionOptional(component.secondaryCallToAction)
 }), rendererMapperProps);
 
 // src/renderers/mappers/allOfComponentToProps.ts
@@ -7929,6 +8257,35 @@ var mapBoxControl = ({
   return control;
 };
 
+// src/renderers/mappers/collectionComponentToProps.ts
+var collectionComponentToProps = (component, rendererMapperProps) => {
+  var _a, _b, _c;
+  const beforeSectionsProps = (_a = component.state.beforeSections) == null ? void 0 : _a.map(
+    (child) => componentToRendererProps(child, rendererMapperProps)
+  );
+  const afterSectionsProps = (_b = component.state.afterSections) == null ? void 0 : _b.map(
+    (child) => componentToRendererProps(child, rendererMapperProps)
+  );
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags")), rendererMapperProps), {
+    status: component.status,
+    state: __spreadProps(__spreadValues({}, component.state), {
+      filters: (_c = component.state.filters) != null ? _c : [],
+      sections: component.state.sections.map((section) => __spreadProps(__spreadValues({}, section), {
+        callToAction: mapCallToActionOptional(section.callToAction),
+        items: section.items.map((item) => __spreadProps(__spreadValues({}, item), {
+          callToAction: mapCallToActionOptional(item.callToAction),
+          additionalInfo: mapAdditionalInfo2(item.additionalInfo),
+          disabled: rendererMapperProps.stepLoadingState !== "idle" || item.disabled
+        }))
+      })),
+      beforeSectionsProps,
+      beforeSections: beforeSectionsProps == null ? void 0 : beforeSectionsProps.map(rendererMapperProps.render),
+      afterSectionsProps,
+      afterSections: afterSectionsProps == null ? void 0 : afterSectionsProps.map(rendererMapperProps.render)
+    })
+  });
+};
+
 // src/renderers/mappers/buttonComponentToProps.ts
 var buttonComponentToProps = (component, rendererMapperProps) => {
   return __spreadValues(__spreadProps(__spreadValues({
@@ -8416,7 +8773,17 @@ var sectionComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.components.map(
     (c) => componentToRendererProps(c, rendererMapperProps)
   );
-  return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "title", "margin", "control", "tags")), {
+  return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, pick(
+    component,
+    "uid",
+    "analyticsId",
+    "type",
+    "shortTitle",
+    "title",
+    "margin",
+    "control",
+    "tags"
+  )), {
     callToAction: mapCallToActionOptional(component.callToAction)
   }), rendererMapperProps), {
     children: childrenProps.map(rendererMapperProps.render),
@@ -8558,6 +8925,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return boxComponentToProps(component, rendererMapperProps);
     case "button":
       return buttonComponentToProps(component, rendererMapperProps);
+    case "collection":
+      return collectionComponentToProps(component, rendererMapperProps);
     case "columns":
       return columnsComponentToProps(component, rendererMapperProps);
     case "container":
@@ -8900,8 +9269,9 @@ function useDynamicFlow(props) {
   );
   return {
     controller: {
-      getSubmittableValue: async () => rootComponent.getSubmittableValue(),
+      getValue: () => rootComponent.getSubmittableValueSync(),
       validate: () => rootComponent.validate(),
+      /** @experimental This method may be changed or removed in the future without notice. */
       getCurrentStep: () => {
         var _a2, _b2;
         return (_b2 = (_a2 = rootComponent.getStep()) == null ? void 0 : _a2.step) != null ? _b2 : null;