@wise/dynamic-flow-client 5.29.0 → 5.30.0-experimental-7a76ef5

package/build/main.js

@@ -861,6 +861,7 @@ 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":
@@ -882,9 +883,16 @@ 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":
@@ -1577,101 +1585,78 @@ var boxLayoutToComponent = (uid, { border = false, components, control, margin,
   )
 });
 
-// src/domain/mappers/utils/image.ts
-var mapSpecImage = (image) => {
-  var _a, _b, _c;
-  return image ? {
-    uri: (_b = (_a = image.uri) != null ? _a : image.url) != null ? _b : "",
-    accessibilityDescription: (_c = image.accessibilityDescription) != null ? _c : image.text
-  } : void 0;
+// src/domain/components/collectionComponent/CollectionState.ts
+var createCollectionState = (id, _a, searchQuery) => {
+  var _b = _a, { search } = _b, response = __objRest(_b, ["search"]);
+  return __spreadProps(__spreadValues({}, response), {
+    id,
+    status: { type: "idle" },
+    search: search ? __spreadProps(__spreadValues({}, search), { query: searchQuery }) : void 0
+  });
 };
-
-// src/domain/mappers/utils/media-utils.ts
-var getDomainLayerMedia = ({ icon, image, media }) => {
-  if (media) {
-    return media;
-  }
-  if (icon || image) {
-    return {
-      type: "legacy",
-      icon,
-      image: mapSpecImage(image)
-    };
-  }
-  return void 0;
+var forkCollectionState = (_a, forkedId) => {
+  var _b = _a, { id, status } = _b, state = __objRest(_b, ["id", "status"]);
+  var _a2, _b2;
+  return createCollectionState(forkedId, state, (_b2 = (_a2 = state.search) == null ? void 0 : _a2.query) != null ? _b2 : "");
 };
-
-// src/domain/mappers/utils/utils.ts
-var mapInlineAlert = (alert) => {
-  return alert ? {
-    content: alert.content,
-    context: alert.context ? mapLegacyContext(alert.context) : "neutral",
-    media: getDomainLayerMedia({ media: alert.media })
-  } : void 0;
+var getCollectionStateChildren = (state) => {
+  var _a, _b, _c, _d;
+  return [
+    // TODO We should be calling the lifecycle stop/start methods on new layouts
+    ...(_a = state.beforeSections) != null ? _a : [],
+    ...getSectionsChildren(state.sections),
+    ...getSectionsChildren((_c = (_b = state.search) == null ? void 0 : _b.initialSections) != null ? _c : []),
+    ...(_d = state.afterSections) != null ? _d : []
+  ];
 };
-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);
+var setLoading = (state, reason) => __spreadProps(__spreadValues({}, state), { status: { type: "loading", reason } });
+var setError = (state, reason) => __spreadProps(__spreadValues({}, state), {
+  sections: reason === "pagination" ? state.sections : [],
+  status: { type: "error", reason }
+});
+var setQuery = (state, value) => state.search ? __spreadProps(__spreadValues({}, state), {
+  search: __spreadProps(__spreadValues({}, state.search), { query: value })
+}) : state;
+var getSectionsChildren = (sections) => sections.filter((section) => section.type === "layout").flatMap((section) => section.components);
+
+// src/domain/components/collectionComponent/CollectionStack.ts
+var createCollectionStack = (uid, initialState, onChange) => {
+  let states = [createCollectionState(`${uid}-state-0`, initialState, "")];
+  let forkCount = 0;
+  return {
+    getStates: () => states,
+    getState: (id) => states.find((state) => state.id === id),
+    getActiveState: () => states[states.length - 1],
+    update(id, transform) {
+      const state = states.find((current) => current.id === id);
+      if (!state) {
+        return;
       }
-    };
-  }
-  return void 0;
-};
-var mapSchemaAlert = (alert) => {
-  return alert ? {
-    content: alert.markdown,
-    context: alert.context ? mapLegacyContext(alert.context) : "neutral",
-    media: getDomainLayerMedia({ media: alert.media })
-  } : 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();
+      const updated = transform(state);
+      if (updated === state) {
+        return;
+      }
+      const replace = (current) => current.id === id ? updated : current;
+      const [root, ...forks] = states;
+      states = [replace(root), ...forks.map(replace)];
+      onChange();
+    },
+    fork() {
+      forkCount += 1;
+      const state = forkCollectionState(states[states.length - 1], `${uid}-state-${forkCount}`);
+      states = [...states, state];
+      onChange();
+    },
+    pop() {
+      const [root, ...forks] = states;
+      const popped = forks.at(-1);
+      if (popped) {
+        states = [root, ...forks.slice(0, -1)];
+        onChange();
+      }
+      return popped;
     }
   };
-  return debouncedFn;
 };
 
 // src/utils/recursiveMerge.ts
@@ -1713,176 +1698,251 @@ function mergeArrays(valueA, valueB) {
   );
 }
 
-// src/domain/components/collectionComponent/CollectionComponent.ts
-var DEBOUNCE_TIME = 800;
-var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackEvent) => {
-  const { uid, analyticsId, control, margin, tags, state } = props;
-  const update = getInputUpdateFunction(onComponentUpdate);
-  let abortController = new AbortController();
-  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;
-    trackCollectionEvent(source != null ? source : mode, "Triggered");
-    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) => {
-        draft.state = mergeState(mode, component.state, response);
-        draft.status = {
-          type: "idle",
-          loadMore: response.nextCursor ? paginate : void 0
-        };
+// 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]
       });
-      trackCollectionEvent(source != null ? source : mode, "Succeeded");
-    }).catch(() => {
-      if (!signal.aborted) {
-        const retry = () => {
-          update(component, (draft) => {
-            draft.status = { type: "loading", reason: mode };
-          });
-          query(mode, source);
-        };
-        update(component, (draft) => {
-          if (mode === "search") {
-            draft.state.sections = [];
-          }
-          draft.status = { type: "error", reason: mode, retry };
-        });
-        trackCollectionEvent(source != null ? source : mode, "Failed");
-      }
-    });
+    }
+    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/applyCollectionResponse.ts
+var applyCollectionResponse = (state, mode, incoming) => {
+  var _a, _b, _c, _d, _e;
+  return __spreadProps(__spreadValues({}, state), {
+    sections: mode === "pagination" ? mergeSections(state.sections, incoming.sections) : incoming.sections,
+    nextCursor: incoming.nextCursor,
+    analytics: mode === "pagination" ? recursiveMerge(state.analytics, incoming.analytics) : incoming.analytics,
+    filters: (_a = incoming.filters) != null ? _a : state.filters,
+    search: incoming.search ? __spreadProps(__spreadValues({}, incoming.search), { query: (_c = (_b = state.search) == null ? void 0 : _b.query) != null ? _c : "" }) : state.search,
+    beforeSections: (_d = incoming.beforeSections) != null ? _d : state.beforeSections,
+    afterSections: (_e = incoming.afterSections) != null ? _e : state.afterSections,
+    status: { type: "idle" }
+  });
+};
+
+// src/controller/getRequestAbortController.ts
+var getRequestAbortController = () => {
+  let abortController = new AbortController();
+  return {
+    refresh() {
+      abortController.abort();
+      abortController = new AbortController();
+      return abortController.signal;
+    },
+    abort() {
+      abortController.abort();
+    }
   };
-  const debouncedQuery = debounce(query, DEBOUNCE_TIME);
-  const search = () => {
-    abortController.abort();
-    debouncedQuery("search");
+};
+
+// 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 filter = () => {
-    debouncedQuery("search", "filter");
-    debouncedQuery.flush();
+  const debouncedFn = (...args) => {
+    lastArgs = args;
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      callback(...lastArgs);
+      timeoutId = null;
+      lastArgs = null;
+    }, waitMs);
   };
-  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
-    };
+  debouncedFn.cancel = () => {
+    if (timeoutId !== null) {
+      clearTimer();
+    }
   };
-  const selectFilter = (filterIndex, optionIndex) => {
-    var _a;
-    const selected = (_a = component.state.filters) == null ? void 0 : _a[filterIndex];
-    if (!selected) {
-      return;
+  debouncedFn.flush = () => {
+    if (timeoutId !== null) {
+      callback(...lastArgs);
+      clearTimer();
     }
-    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)
-        });
-      })
-    });
+  return debouncedFn;
+};
+
+// src/domain/components/collectionComponent/toggleFilterOption.ts
+var toggleFilterOption = (state, filterIndex, optionIndex) => {
+  var _a;
+  const filter = (_a = state.filters) == null ? void 0 : _a[filterIndex];
+  if (!state.filters || !filter) {
+    return state;
+  }
+  const currentValue = filter.options[optionIndex].selected;
+  const options = filter.options.map((option, index) => {
+    if (index === optionIndex) {
+      return __spreadProps(__spreadValues({}, option), { selected: !currentValue });
+    }
+    return filter.multiSelect ? option : __spreadProps(__spreadValues({}, option), { selected: false });
   });
-  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" };
-        }
+  return __spreadProps(__spreadValues({}, state), {
+    filters: state.filters.map(
+      (current, index) => index === filterIndex ? __spreadProps(__spreadValues({}, current), { options }) : current
+    )
+  });
+};
+
+// src/domain/components/collectionComponent/CollectionController.ts
+var createCollectionController = ({
+  stack,
+  collectionClient,
+  trackEvent
+}) => {
+  let requests = /* @__PURE__ */ new Map();
+  const getRequest = (id) => {
+    const existing = requests.get(id);
+    if (existing) {
+      return existing;
+    }
+    const request = createSchedulableRequest((mode, signal) => executeRequest2(id, mode, signal));
+    requests = new Map([...requests, [id, request]]);
+    return request;
+  };
+  const queueRequest = (id, mode, transform) => {
+    if (!stack.getState(id)) {
+      return;
+    }
+    stack.update(id, (state) => setLoading(transform(state), mode));
+    getRequest(id).queue(mode);
+  };
+  const runRequest = (id, mode, transform = (state) => state) => {
+    if (!stack.getState(id)) {
+      return;
+    }
+    stack.update(id, (state) => setLoading(transform(state), mode));
+    getRequest(id).run(mode);
+  };
+  const handleSuccess = (state, mode, response) => {
+    trackEvent(
+      getEventName(mode, "Succeeded"),
+      mode === "pagination" ? recursiveMerge(state.analytics, response.analytics) : response.analytics
+    );
+    stack.update(state.id, (current) => applyCollectionResponse(current, mode, response));
+  };
+  const handleFailure = (state, mode) => {
+    trackEvent(getEventName(mode, "Failed"), state.analytics);
+    stack.update(state.id, (current) => setError(current, mode));
+  };
+  const executeRequest2 = async (id, mode, signal) => {
+    const state = stack.getState(id);
+    if (!state) {
+      return;
+    }
+    const { analytics, filters, search } = state;
+    trackEvent(getEventName(mode, "Triggered"), analytics);
+    try {
+      const response = await collectionClient({
+        searchParam: search == null ? void 0 : search.param,
+        query: search == null ? void 0 : search.query,
+        cursor: mode === "pagination" ? state.nextCursor : void 0,
+        signal,
+        filters
       });
-      search();
+      if (response && !signal.aborted) {
+        handleSuccess(state, mode, response);
+      }
+    } catch (e) {
+      if (!signal.aborted) {
+        handleFailure(state, mode);
+      }
     }
-  }) : void 0;
-  const component = {
-    type: "collection",
-    kind: "layout",
-    uid,
-    analyticsId,
-    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 : []
-      ];
+  };
+  return {
+    search(id, value) {
+      queueRequest(id, "search", (state) => setQuery(state, value));
     },
-    status: {
-      type: "idle",
-      loadMore: state.nextCursor ? () => query("pagination") : void 0
+    selectFilter(id, filterIndex, optionIndex) {
+      var _a, _b;
+      if (!((_b = (_a = stack.getState(id)) == null ? void 0 : _a.filters) == null ? void 0 : _b[filterIndex])) {
+        return;
+      }
+      runRequest(id, "filter", (state) => toggleFilterOption(state, filterIndex, optionIndex));
     },
-    state: __spreadProps(__spreadValues({}, state), {
-      filters: mapFilters(state.filters),
-      search: mapSearch(props.search)
-    }),
-    start() {
-      component.getChildren().forEach((child) => child.start());
+    loadMore(id) {
+      runRequest(id, "pagination");
     },
-    stop() {
-      component.getChildren().forEach((child) => child.stop());
+    retry(id) {
+      var _a;
+      const status = (_a = stack.getState(id)) == null ? void 0 : _a.status;
+      if ((status == null ? void 0 : status.type) !== "error") {
+        return;
+      }
+      runRequest(id, status.reason);
+    },
+    fork: stack.fork,
+    pop() {
+      var _a;
+      const states = stack.getStates();
+      if (states.length === 1) {
+        return;
+      }
+      const { id } = stack.getActiveState();
+      (_a = requests.get(id)) == null ? void 0 : _a.abort();
+      requests = new Map([...requests].filter(([stateId]) => stateId !== id));
+      stack.pop();
     }
   };
-  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 DEBOUNCE_TIME = 800;
+var createSchedulableRequest = (execute) => {
+  const { abort, refresh } = getRequestAbortController();
+  const run = (mode) => {
+    void execute(mode, refresh());
+  };
+  const debouncedRun = debounce(run, DEBOUNCE_TIME);
+  return {
+    run(mode) {
+      debouncedRun.cancel();
+      run(mode);
+    },
+    queue(mode) {
+      abort();
+      debouncedRun(mode);
+    },
+    abort() {
+      debouncedRun.cancel();
+      abort();
+    }
+  };
 };
-var getEventName = (mode, state) => {
+var getEventName = (mode, status) => {
   const getMode = () => {
     switch (mode) {
       case "pagination":
@@ -1893,7 +1953,94 @@ var getEventName = (mode, state) => {
         return "Filter";
     }
   };
-  return `Collection ${getMode()} ${state}`;
+  return `Collection ${getMode()} ${status}`;
+};
+
+// src/domain/mappers/utils/image.ts
+var mapSpecImage = (image) => {
+  var _a, _b, _c;
+  return image ? {
+    uri: (_b = (_a = image.uri) != null ? _a : image.url) != null ? _b : "",
+    accessibilityDescription: (_c = image.accessibilityDescription) != null ? _c : image.text
+  } : void 0;
+};
+
+// src/domain/mappers/utils/media-utils.ts
+var getDomainLayerMedia = ({ icon, image, media }) => {
+  if (media) {
+    return media;
+  }
+  if (icon || image) {
+    return {
+      type: "legacy",
+      icon,
+      image: mapSpecImage(image)
+    };
+  }
+  return void 0;
+};
+
+// src/domain/mappers/utils/utils.ts
+var mapInlineAlert = (alert) => {
+  return alert ? {
+    content: alert.content,
+    context: alert.context ? mapLegacyContext(alert.context) : "neutral",
+    media: getDomainLayerMedia({ media: alert.media })
+  } : 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",
+    media: getDomainLayerMedia({ media: alert.media })
+  } : void 0;
+};
+
+// src/domain/components/collectionComponent/CollectionComponent.ts
+var createCollectionComponent = (props, stack, controller) => {
+  const getChildren2 = () => getCollectionStateChildren(stack.getActiveState());
+  return __spreadProps(__spreadValues({}, props), {
+    type: "collection",
+    kind: "layout",
+    get stack() {
+      return stack.getStates();
+    },
+    getActiveState: stack.getActiveState,
+    fork: controller.fork,
+    pop: controller.pop,
+    search: ({ id }, value) => controller.search(id, value),
+    selectFilter: ({ id }, filterIndex, optionIndex) => controller.selectFilter(id, filterIndex, optionIndex),
+    loadMore: ({ id }) => controller.loadMore(id),
+    retry: ({ id }) => controller.retry(id),
+    getChildren: getChildren2,
+    start() {
+      getChildren2().forEach((child) => child.start());
+    },
+    stop() {
+      getChildren2().forEach((child) => child.stop());
+    }
+  });
 };
 
 // src/domain/features/collection/getPerformCollectionQuery.ts
@@ -1987,29 +2134,45 @@ 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) => {
+var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, margin, search, tags, baseRequest }, mapperProps, schemaComponents) => {
+  var _a;
   const { httpClient, onComponentUpdate, trackEvent } = mapperProps;
-  const mapLayout = (layout, index) => mapLayoutToComponent(`${uid}-collection-response-${index}`, layout, mapperProps, []);
+  let layoutIndex = 0;
+  const mapLayout = (layout) => {
+    layoutIndex += 1;
+    return mapLayoutToComponent(
+      `${uid}-collection-response-${layoutIndex}`,
+      layout,
+      mapperProps,
+      schemaComponents
+    );
+  };
   const mapState = (state) => mapCollectionSpecToDomainState(state, mapperProps, mapLayout);
-  const queryFunction = getPerformCollectionQuery(httpClient, baseRequest, mapState);
+  const collectionClient = getPerformCollectionQuery(httpClient, baseRequest, mapState);
+  const stack = createCollectionStack(
+    uid,
+    mapState(__spreadProps(__spreadValues({}, initialState), {
+      search: (_a = initialState.search) != null ? _a : search
+    })),
+    onComponentUpdate
+  );
+  const controller = createCollectionController({ stack, collectionClient, trackEvent });
   const component = createCollectionComponent(
     {
       uid,
       analyticsId,
       control,
       margin: margin != null ? margin : "md",
-      tags,
-      state: mapState(initialState),
-      search
+      tags
     },
-    onComponentUpdate,
-    queryFunction,
-    trackEvent
+    stack,
+    controller
   );
   return component;
 };
 var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
   const {
+    search,
     sections,
     filters,
     beforeSections,
@@ -2018,29 +2181,8 @@ var mapCollectionSpecToDomainState = (specState, mapperProps, mapLayout) => {
     analytics = {}
   } = specState;
   return {
-    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)
-          });
-        })
-      });
-    }),
+    search: search ? mapSearch(search, mapperProps, mapLayout) : void 0,
+    sections: sections.map((section) => mapSection(section, mapperProps, mapLayout)),
     filters: filters == null ? void 0 : filters.map(mapFilter),
     beforeSections: beforeSections == null ? void 0 : beforeSections.map(mapLayout),
     afterSections: afterSections == null ? void 0 : afterSections.map(mapLayout),
@@ -2048,6 +2190,49 @@ 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), {
@@ -2055,10 +2240,7 @@ var mapFilter = (filter) => {
       var _a;
       return __spreadProps(__spreadValues({}, option), {
         // if a single select with no selection, we should default to selecting the first item
-        selected: filter.multiSelect || anySelected ? (_a = option.selected) != null ? _a : false : index === 0,
-        onSelect: () => {
-        }
-        // noop - this gets added during mapping in the component itself
+        selected: filter.multiSelect || anySelected ? (_a = option.selected) != null ? _a : false : index === 0
       });
     })
   });
@@ -3310,7 +3492,7 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
     case "button":
       return buttonLayoutToComponent(uid, layout, mapperProps);
     case "collection":
-      return collectionLayoutToComponent(uid, layout, mapperProps);
+      return collectionLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "columns":
       return columnsLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "decision":
@@ -8020,21 +8202,6 @@ var executeSubflow = async ({
   });
 };
 
-// src/controller/getRequestAbortController.ts
-var getRequestAbortController = () => {
-  let abortController = new AbortController();
-  return {
-    abortAndGetNewSignal() {
-      abortController.abort();
-      abortController = new AbortController();
-      return abortController.signal;
-    },
-    abort() {
-      abortController.abort();
-    }
-  };
-};
-
 // src/controller/getStepCounter.ts
 var getStepCounter = () => {
   let count = 0;
@@ -8413,7 +8580,7 @@ var createFlowController = (props) => {
       rootComponent.setLoadingState("refreshing");
       const model = rootComponent.getSubmittableValueSync();
       const command = await executeRefresh({
-        abortSignal: refreshAbortController.abortAndGetNewSignal(),
+        abortSignal: refreshAbortController.refresh(),
         url: (_a = refreshUrl != null ? refreshUrl : rootComponent.getRefreshUrl()) != null ? _a : "",
         model,
         etag: (_c = (_b = rootComponent.getStep()) == null ? void 0 : _b.etag) != null ? _c : null,
@@ -8971,31 +9138,77 @@ var mapBoxControl = ({
 
 // src/renderers/mappers/collectionComponentToProps.ts
 var collectionComponentToProps = (component, rendererMapperProps) => {
-  var _a, _b, _c, _d, _e;
+  const { stack } = component;
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags", "fork", "pop")), rendererMapperProps), {
+    state: mapCollectionState(component, component.getActiveState(), rendererMapperProps),
+    onSearchChange: (query) => component.search(component.getActiveState(), query),
+    depth: stack.length - 1
+  });
+};
+var mapCollectionState = (component, state, rendererMapperProps) => {
+  var _a, _b, _c, _d;
   const { render } = rendererMapperProps;
-  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)
-    })
+  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 {
+    id: state.id,
+    status: mapStatus(component, state),
+    sections: mapSections(state.sections, rendererMapperProps),
+    filters: mapFilters(component, state),
+    beforeSectionsProps,
+    beforeSections: beforeSectionsProps.map(render),
+    afterSectionsProps,
+    afterSections: afterSectionsProps.map(render),
+    search: search ? __spreadProps(__spreadValues({}, pick(search, "title", "hint", "hints", "query")), {
+      initialSections: search.initialSections ? mapSections(search.initialSections, rendererMapperProps) : void 0
+    }) : void 0
+  };
+};
+var mapStatus = (component, state) => {
+  const { status } = state;
+  switch (status.type) {
+    case "idle":
+      return {
+        type: "idle",
+        loadMore: state.nextCursor ? () => component.loadMore(state) : void 0
+      };
+    case "loading":
+      return status;
+    case "error":
+      return __spreadProps(__spreadValues({}, status), { retry: () => component.retry(state) });
+  }
+};
+var mapFilters = (component, state) => {
+  var _a;
+  return ((_a = state.filters) != null ? _a : []).map((filter, filterIndex) => __spreadProps(__spreadValues({}, filter), {
+    options: filter.options.map((option, optionIndex) => __spreadProps(__spreadValues({}, option), {
+      onSelect: () => component.selectFilter(state, filterIndex, optionIndex)
+    }))
+  }));
+};
+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
+    }))
   });
 };
 
@@ -9416,7 +9629,7 @@ var reviewComponentToProps = (component, rendererMapperProps) => __spreadValues(
 
 // src/renderers/mappers/searchComponentToProps.ts
 var searchComponentToProps = (component, rendererMapperProps) => {
-  const { uid, emptyMessage, error, query, setQuery, selectResult } = component;
+  const { uid, emptyMessage, error, query, setQuery: setQuery2, selectResult } = component;
   const state = getSearchState({
     emptyMessage,
     error,
@@ -9424,11 +9637,11 @@ var searchComponentToProps = (component, rendererMapperProps) => {
     query,
     state: component.state,
     rendererMapperProps,
-    setQuery,
+    setQuery: setQuery2,
     selectResult
   });
   return __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "control", "hint", "isLoading", "margin", "query", "title", "tags")), {
-    onChange: setQuery,
+    onChange: setQuery2,
     type: "search",
     id: uid,
     state
@@ -9441,14 +9654,14 @@ var getSearchState = ({
   query,
   state,
   rendererMapperProps,
-  setQuery,
+  setQuery: setQuery2,
   selectResult
 }) => {
   if (isLoading) {
     return { type: "pending" };
   }
   if (error) {
-    return { type: "error", onRetry: () => setQuery(query) };
+    return { type: "error", onRetry: () => setQuery2(query) };
   }
   if (!state) {
     return { type: "noResults", message: emptyMessage };