@wise/dynamic-flow-client 5.29.0-experimental-f7c2300 → 5.29.0

package/build/main.css

@@ -104,30 +104,6 @@
   flex-wrap: wrap;
 }
 
-.df-filter-loader .np-chip {
-  background: linear-gradient(
-    -45deg,
-    var(--color-background-neutral) 40%,
-    var(--color-background-elevated) 50%,
-    var(--color-background-neutral) 60%
-  );
-  background-size: 300%;
-  background-position-x: 100%;
-  animation: shimmer 1s infinite linear;
-  transition: background 200ms;
-  border-color: var(--color-border-neutral);
-}
-
-.df-filter-loader .np-chip > * {
-  visibility: hidden;
-}
-
-@keyframes shimmer {
-  to {
-    background-position-x: 0%;
-  }
-}
-
 .df-columns-renderer-container {
   display: flex;
   gap: var(--size-4);

package/build/main.js

@@ -861,7 +861,6 @@ function findRendererPropsByType(root, type, predicate = () => true) {
 }
 var isType = (node, type) => node.type === type;
 var getChildren = (node) => {
-  var _a;
   switch (node.type) {
     case "root":
     case "box":
@@ -883,16 +882,9 @@ var getChildren = (node) => {
       return node.childrenProps ? [node.childrenProps] : [];
     case "tabs":
       return node.tabs.flatMap((c) => c.childrenProps);
-    case "collection": {
-      const { beforeSectionsProps, afterSectionsProps, sections, search } = node.state;
-      return [
-        ...beforeSectionsProps,
-        ...afterSectionsProps,
-        ...[...sections, ...(_a = search == null ? void 0 : search.initialSections) != null ? _a : []].filter((section) => section.type === "layout").flatMap((section) => section.childrenProps)
-      ];
-    }
     case "alert":
     case "button":
+    case "collection":
     case "input-checkbox":
     case "input-date":
     case "decision":
@@ -1721,121 +1713,89 @@ function mergeArrays(valueA, valueB) {
   );
 }
 
-// src/domain/components/collectionComponent/mergeSections.ts
-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) => {
-    var _a, _b, _c, _d;
-    const match = incoming.find((s) => s.id === section.id);
-    if (!match) return section;
-    if (section.type !== match.type) return section;
-    const baseProps = {
-      type: section.type,
-      id: match.id,
-      title: (_a = match.title) != null ? _a : section.title,
-      callToAction: (_b = match.callToAction) != null ? _b : section.callToAction,
-      help: (_c = match.help) != null ? _c : section.help,
-      inlineAlert: (_d = match.inlineAlert) != null ? _d : section.inlineAlert
-    };
-    if (section.type === "layout" && match.type === "layout") {
-      return __spreadProps(__spreadValues({}, baseProps), {
-        type: "layout",
-        components: [...section.components, ...match.components]
-      });
-    }
-    if (section.type === "items" && match.type === "items") {
-      return __spreadProps(__spreadValues({}, baseProps), {
-        type: "items",
-        items: [...section.items, ...match.items]
-      });
-    }
-    return section;
-  });
-  return [...merged, ...newSections];
-};
-
-// src/domain/components/collectionComponent/CollectionState.ts
+// src/domain/components/collectionComponent/CollectionComponent.ts
 var DEBOUNCE_TIME = 800;
-var createCollectionState = ({
-  id,
-  initialState,
-  searchQuery,
-  onComponentUpdate,
-  queryFunction,
-  trackEvent
-}) => {
-  const _a = initialState, { search, filters } = _a, response = __objRest(_a, ["search", "filters"]);
+var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackEvent) => {
+  const { uid, analyticsId, control, margin, tags, state } = props;
+  const update = getInputUpdateFunction(onComponentUpdate);
   let abortController = new AbortController();
-  const update = (updateFn) => {
-    updateFn(state);
-    onComponentUpdate();
-  };
-  const getIdleStatus = (nextCursor) => ({
-    type: "idle",
-    loadMore: nextCursor ? () => query("pagination") : void 0
-  });
-  const query = (mode) => {
-    var _a2, _b;
+  const trackCollectionEvent = (source, status) => trackEvent(getEventName(source, status), component.state.analytics);
+  const query = (mode, source) => {
+    var _a, _b;
     abortController.abort();
     abortController = new AbortController();
     const { signal } = abortController;
-    trackEvent(getEventName(mode, "Triggered"), state.analytics);
+    trackCollectionEvent(source != null ? source : mode, "Triggered");
     queryFunction({
-      searchParam: (_a2 = state.search) == null ? void 0 : _a2.param,
-      query: (_b = state.search) == null ? void 0 : _b.query,
-      cursor: mode === "pagination" ? state.nextCursor : void 0,
+      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: state.filters
-    }).then((incoming) => {
-      if (!incoming || signal.aborted) {
+      filters: component.state.filters
+    }).then((response) => {
+      if (!response) {
         return;
       }
-      update((draft) => mergeResponse(draft, mode, incoming));
-      trackEvent(getEventName(mode, "Succeeded"), state.analytics);
+      update(component, (draft) => {
+        draft.state = mergeState(mode, component.state, response);
+        draft.status = {
+          type: "idle",
+          loadMore: response.nextCursor ? paginate : void 0
+        };
+      });
+      trackCollectionEvent(source != null ? source : mode, "Succeeded");
     }).catch(() => {
       if (!signal.aborted) {
         const retry = () => {
-          update((draft) => {
+          update(component, (draft) => {
             draft.status = { type: "loading", reason: mode };
           });
-          query(mode);
+          query(mode, source);
         };
-        update((draft) => {
-          if (mode === "search" || mode === "filter") {
-            draft.sections = [];
+        update(component, (draft) => {
+          if (mode === "search") {
+            draft.state.sections = [];
           }
           draft.status = { type: "error", reason: mode, retry };
         });
-        trackEvent(getEventName(mode, "Failed"), state.analytics);
+        trackCollectionEvent(source != null ? source : mode, "Failed");
       }
     });
   };
   const debouncedQuery = debounce(query, DEBOUNCE_TIME);
-  const mergeResponse = (draft, mode, incoming) => {
-    var _a2, _b, _c, _d;
-    draft.sections = mode === "pagination" ? mergeSections(draft.sections, incoming.sections) : incoming.sections;
-    draft.nextCursor = incoming.nextCursor;
-    draft.analytics = mode === "pagination" ? recursiveMerge(draft.analytics, incoming.analytics) : incoming.analytics;
-    draft.filters = incoming.filters ? mapFilters(incoming.filters) : draft.filters;
-    draft.search = incoming.search ? mapSearch2(incoming.search, (_b = (_a2 = draft.search) == null ? void 0 : _a2.query) != null ? _b : "") : draft.search;
-    draft.beforeSections = (_c = incoming.beforeSections) != null ? _c : draft.beforeSections;
-    draft.afterSections = (_d = incoming.afterSections) != null ? _d : draft.afterSections;
-    draft.status = getIdleStatus(incoming.nextCursor);
+  const search = () => {
+    abortController.abort();
+    debouncedQuery("search");
+  };
+  const filter = () => {
+    debouncedQuery("search", "filter");
+    debouncedQuery.flush();
+  };
+  const paginate = () => query("pagination");
+  const mergeState = (mode, original, incoming) => {
+    var _a, _b;
+    return {
+      sections: mode === "pagination" ? mergeSections(original.sections, incoming.sections) : incoming.sections,
+      nextCursor: incoming.nextCursor,
+      filters: incoming.filters ? mapFilters(incoming.filters) : original.filters,
+      search: incoming.search ? mapSearch(incoming.search) : original.search,
+      beforeSections: (_a = incoming.beforeSections) != null ? _a : original.beforeSections,
+      afterSections: (_b = incoming.afterSections) != null ? _b : original.afterSections,
+      analytics: mode === "pagination" ? recursiveMerge(original.analytics, incoming.analytics) : incoming.analytics
+    };
   };
   const selectFilter = (filterIndex, optionIndex) => {
-    var _a2;
-    const selected = (_a2 = state.filters) == null ? void 0 : _a2[filterIndex];
+    var _a;
+    const selected = (_a = component.state.filters) == null ? void 0 : _a[filterIndex];
     if (!selected) {
       return;
     }
     const currentValue = selected.options[optionIndex].selected;
-    update((draft) => {
-      var _a3;
-      const draftFilter = (_a3 = draft.filters) == null ? void 0 : _a3[filterIndex];
-      if (!draftFilter) {
+    update(component, (draft) => {
+      if (!draft.state.filters) {
         return;
       }
+      const draftFilter = draft.state.filters[filterIndex];
       if (selected.multiSelect) {
         draftFilter.options[optionIndex].selected = !currentValue;
       } else {
@@ -1843,86 +1803,35 @@ var createCollectionState = ({
           draftOption.selected = index === optionIndex ? !currentValue : false;
         });
       }
-      draft.status = { type: "loading", reason: "filter" };
+      draft.status = { type: "loading", reason: "search" };
     });
-    debouncedQuery("filter");
-    debouncedQuery.flush();
-  };
-  const changeQuery = (value) => {
-    update((draft) => {
-      if (draft.search) {
-        draft.search.query = value;
-        draft.status = { type: "loading", reason: "search" };
-      }
-    });
-    abortController.abort();
-    debouncedQuery("search");
+    filter();
   };
-  const mapFilters = (filtersToMap) => filtersToMap == null ? void 0 : filtersToMap.map((f, filterIndex) => {
-    var _a2;
+  const mapFilters = (filters) => filters == null ? void 0 : filters.map((f, filterIndex) => {
+    var _a;
     return __spreadProps(__spreadValues({}, f), {
-      options: (_a2 = f.options) == null ? void 0 : _a2.map((option, optionIndex) => {
-        var _a3;
+      options: (_a = f.options) == null ? void 0 : _a.map((option, optionIndex) => {
+        var _a2;
         return __spreadProps(__spreadValues({}, option), {
-          selected: (_a3 = option.selected) != null ? _a3 : false,
+          selected: (_a2 = option.selected) != null ? _a2 : false,
           onSelect: () => selectFilter(filterIndex, optionIndex)
         });
       })
     });
   });
-  const mapSearch2 = (searchConfig, value) => searchConfig ? __spreadProps(__spreadValues({}, searchConfig), { query: value, onChange: changeQuery }) : void 0;
-  const state = __spreadProps(__spreadValues({}, response), {
-    id,
-    status: getIdleStatus(response.nextCursor),
-    filters: mapFilters(filters),
-    search: mapSearch2(search, searchQuery),
-    fork(forkedId) {
-      var _a2, _b;
-      return createCollectionState({
-        id: forkedId,
-        initialState: state,
-        searchQuery: (_b = (_a2 = state.search) == null ? void 0 : _a2.query) != null ? _b : "",
-        onComponentUpdate,
-        queryFunction,
-        trackEvent
+  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" };
+        }
       });
-    },
-    cancel() {
-      debouncedQuery.cancel();
-      abortController.abort();
-    },
-    getChildren() {
-      var _a2, _b, _c, _d;
-      return [
-        ...(_a2 = state.beforeSections) != null ? _a2 : [],
-        ...getSectionsChildren(state.sections),
-        ...getSectionsChildren((_c = (_b = state.search) == null ? void 0 : _b.initialSections) != null ? _c : []),
-        ...(_d = state.afterSections) != null ? _d : []
-      ];
-    }
-  });
-  return state;
-};
-var getSectionsChildren = (sections) => sections.filter((section) => section.type === "layout").flatMap((section) => section.components);
-var getEventName = (mode, state) => {
-  const getMode = () => {
-    switch (mode) {
-      case "pagination":
-        return "Pagination";
-      case "search":
-        return "Search";
-      case "filter":
-        return "Filter";
+      search();
     }
-  };
-  return `Collection ${getMode()} ${state}`;
-};
-
-// src/domain/components/collectionComponent/CollectionComponent.ts
-var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackEvent) => {
-  const { uid, analyticsId, control, margin, tags, state } = props;
-  const update = getInputUpdateFunction(onComponentUpdate);
-  let forkCount = 0;
+  }) : void 0;
   const component = {
     type: "collection",
     kind: "layout",
@@ -1931,38 +1840,21 @@ var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackE
     control,
     margin,
     tags,
-    stack: [
-      createCollectionState({
-        id: `${uid}-state-0`,
-        initialState: state,
-        searchQuery: "",
-        onComponentUpdate,
-        queryFunction,
-        trackEvent
-      })
-    ],
-    fork() {
-      const { stack } = component;
-      forkCount += 1;
-      const forkedState = stack[stack.length - 1].fork(`${uid}-state-${forkCount}`);
-      update(component, (draft) => {
-        draft.stack = [...draft.stack, forkedState];
-      });
-    },
-    pop() {
-      const [rootState, ...forkedStates] = component.stack;
-      const poppedState = forkedStates.at(-1);
-      if (!poppedState) {
-        return;
-      }
-      poppedState.cancel();
-      update(component, (draft) => {
-        draft.stack = [rootState, ...forkedStates.slice(0, -1)];
-      });
-    },
     getChildren() {
-      return component.stack[component.stack.length - 1].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
     },
+    state: __spreadProps(__spreadValues({}, state), {
+      filters: mapFilters(state.filters),
+      search: mapSearch(props.search)
+    }),
     start() {
       component.getChildren().forEach((child) => child.start());
     },
@@ -1972,6 +1864,37 @@ var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackE
   };
   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) => {
+    var _a, _b, _c, _d;
+    const match = incoming.find((s) => s.id === section.id);
+    if (!match) return section;
+    return {
+      id: match.id,
+      title: (_a = match.title) != null ? _a : section.title,
+      callToAction: (_b = match.callToAction) != null ? _b : section.callToAction,
+      help: (_c = match.help) != null ? _c : section.help,
+      inlineAlert: (_d = match.inlineAlert) != null ? _d : section.inlineAlert,
+      items: [...section.items, ...match.items]
+    };
+  });
+  return [...merged, ...newSections];
+};
+var getEventName = (mode, state) => {
+  const getMode = () => {
+    switch (mode) {
+      case "pagination":
+        return "Pagination";
+      case "search":
+        return "Search";
+      case "filter":
+        return "Filter";
+    }
+  };
+  return `Collection ${getMode()} ${state}`;
+};
 
 // src/domain/features/collection/getPerformCollectionQuery.ts
 var getPerformCollectionQuery = (httpClient, baseRequest, mapState) => {
@@ -2064,19 +1987,9 @@ var hashRequest = ({
 }) => 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, schemaComponents) => {
-  var _a;
+var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, margin, search, tags, baseRequest }, mapperProps) => {
   const { httpClient, onComponentUpdate, trackEvent } = mapperProps;
-  let layoutIndex = 0;
-  const mapLayout = (layout) => {
-    layoutIndex += 1;
-    return mapLayoutToComponent(
-      `${uid}-collection-response-${layoutIndex}`,
-      layout,
-      mapperProps,
-      schemaComponents
-    );
-  };
+  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(
@@ -2086,9 +1999,8 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
       control,
       margin: margin != null ? margin : "md",
       tags,
-      state: mapState(__spreadProps(__spreadValues({}, initialState), {
-        search: (_a = initialState.search) != null ? _a : search
-      }))
+      state: mapState(initialState),
+      search
     },
     onComponentUpdate,
     queryFunction,
@@ -2098,7 +2010,6 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
 };
 var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
   const {
-    search,
     sections,
     filters,
     beforeSections,
@@ -2107,8 +2018,29 @@ var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
     analytics = {}
   } = specState;
   return {
-    search: search ? mapSearch(search, mapperProps, mapLayout) : void 0,
-    sections: sections.map((section) => mapSection(section, mapperProps, mapLayout)),
+    sections: sections.map((section) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, section), {
+        callToAction: getDomainLayerCallToAction(section.callToAction, mapperProps),
+        help: (_a = section.help) == null ? void 0 : _a.markdown,
+        inlineAlert: mapInlineAlert(section.inlineAlert),
+        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: filters == null ? void 0 : filters.map(mapFilter),
     beforeSections: beforeSections == null ? void 0 : beforeSections.map(mapLayout),
     afterSections: afterSections == null ? void 0 : afterSections.map(mapLayout),
@@ -2116,49 +2048,6 @@ var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
     analytics
   };
 };
-var mapSearch = (search, mapperProps, mapLayout) => {
-  var _a, _b, _c;
-  return search ? __spreadProps(__spreadValues({}, search), {
-    help: (_a = search.help) == null ? void 0 : _a.markdown,
-    hints: (_b = search.hints) != null ? _b : search.hint ? [search.hint] : void 0,
-    initialSections: (_c = search.initialSections) == null ? void 0 : _c.map(
-      (section) => mapSection(section, mapperProps, mapLayout)
-    )
-  }) : void 0;
-};
-var mapSection = (section, mapperProps, mapLayout) => {
-  var _a;
-  const baseProps = __spreadProps(__spreadValues({}, section), {
-    callToAction: getDomainLayerCallToAction(section.callToAction, mapperProps),
-    help: (_a = section.help) == null ? void 0 : _a.markdown,
-    inlineAlert: mapInlineAlert(section.inlineAlert)
-  });
-  if (section.type === "layout") {
-    return __spreadProps(__spreadValues({}, baseProps), {
-      type: "layout",
-      components: section.components.map(mapLayout)
-    });
-  }
-  return __spreadProps(__spreadValues({}, baseProps), {
-    type: "items",
-    items: section.items.map((item) => mapResultItem(item, mapperProps))
-  });
-};
-var mapResultItem = (item, mapperProps) => {
-  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)
-  });
-};
 var mapFilter = (filter) => {
   const anySelected = filter.options.some((option) => option.selected);
   return __spreadProps(__spreadValues({}, filter), {
@@ -3421,7 +3310,7 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
     case "button":
       return buttonLayoutToComponent(uid, layout, mapperProps);
     case "collection":
-      return collectionLayoutToComponent(uid, layout, mapperProps, schemaComponents);
+      return collectionLayoutToComponent(uid, layout, mapperProps);
     case "columns":
       return columnsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "decision":
@@ -9082,52 +8971,31 @@ var mapBoxControl = ({
 
 // src/renderers/mappers/collectionComponentToProps.ts
 var collectionComponentToProps = (component, rendererMapperProps) => {
-  const { stack } = component;
-  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags", "fork", "pop")), rendererMapperProps), {
-    state: mapCollectionState(stack[stack.length - 1], rendererMapperProps),
-    depth: stack.length - 1
-  });
-};
-var mapCollectionState = (state, rendererMapperProps) => {
   var _a, _b, _c, _d, _e;
   const { render } = rendererMapperProps;
-  const { search } = state;
-  const beforeSectionsProps = (_b = (_a = state.beforeSections) == null ? void 0 : _a.map((child) => componentToRendererProps(child, rendererMapperProps))) != null ? _b : [];
-  const afterSectionsProps = (_d = (_c = state.afterSections) == null ? void 0 : _c.map((child) => componentToRendererProps(child, rendererMapperProps))) != null ? _d : [];
-  return __spreadProps(__spreadValues({}, pick(state, "id", "status")), {
-    sections: mapSections(state.sections, rendererMapperProps),
-    filters: (_e = state.filters) != null ? _e : [],
-    beforeSectionsProps,
-    beforeSections: beforeSectionsProps.map(render),
-    afterSectionsProps,
-    afterSections: afterSectionsProps.map(render),
-    search: search ? __spreadProps(__spreadValues({}, pick(search, "title", "hint", "hints", "query", "onChange")), {
-      initialSections: search.initialSections ? mapSections(search.initialSections, rendererMapperProps) : void 0
-    }) : void 0
-  });
-};
-var mapSections = (sections, rendererMapperProps) => sections.map((section) => mapSection2(section, rendererMapperProps));
-var mapSection2 = (section, rendererMapperProps) => {
-  const baseProps = __spreadProps(__spreadValues({}, section), {
-    callToAction: mapCallToActionOptional(section.callToAction)
-  });
-  if (section.type === "layout") {
-    const childrenProps = section.components.map(
-      (child) => componentToRendererProps(child, rendererMapperProps)
-    );
-    return __spreadProps(__spreadValues({}, baseProps), {
-      type: "layout",
-      childrenProps,
-      children: childrenProps.map(rendererMapperProps.render)
-    });
-  }
-  return __spreadProps(__spreadValues({}, baseProps), {
-    type: "items",
-    items: section.items.map((item) => __spreadProps(__spreadValues({}, item), {
-      callToAction: mapCallToActionOptional(item.callToAction),
-      additionalInfo: mapAdditionalInfo2(item.additionalInfo),
-      disabled: rendererMapperProps.stepLoadingState !== "idle" || item.disabled
-    }))
+  const beforeSectionsProps = (_b = (_a = component.state.beforeSections) == null ? void 0 : _a.map(
+    (child) => componentToRendererProps(child, rendererMapperProps)
+  )) != null ? _b : [];
+  const afterSectionsProps = (_d = (_c = component.state.afterSections) == null ? void 0 : _c.map(
+    (child) => componentToRendererProps(child, rendererMapperProps)
+  )) != null ? _d : [];
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags")), rendererMapperProps), {
+    status: component.status,
+    state: __spreadProps(__spreadValues({}, component.state), {
+      filters: (_e = component.state.filters) != null ? _e : [],
+      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.map(render),
+      afterSectionsProps,
+      afterSections: afterSectionsProps.map(render)
+    })
   });
 };