@wise/dynamic-flow-client 5.8.0 → 5.9.0-experimental-rendererprops-9c9a4b8

package/build/main.js

@@ -836,6 +836,7 @@ var getChildren = (node) => {
     case "heading":
     case "hidden":
     case "image":
+    case "loading-state":
     case "instructions":
     case "input-integer":
     case "list":
@@ -2091,7 +2092,7 @@ var debounce = (callback, waitMs) => {
 // src/domain/components/searchComponent/SearchComponent.ts
 var DEBOUNCE_TIME = 400;
 var createSearchComponent = (searchProps, performSearch, onBehavior, onComponentUpdate) => {
-  const { uid, analyticsId, control, emptyMessage, hint, margin, tags, title } = searchProps;
+  const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = searchProps;
   const update = getInputUpdateFunction(onComponentUpdate);
   let abortController = new AbortController();
   const search = (component2, query, searchConfig) => {
@@ -2102,10 +2103,10 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
       signal,
       query,
       config: searchConfig
-    }).then((results) => {
+    }).then((state) => {
       if (!signal.aborted) {
         update(component2, (draft) => {
-          draft.results = results;
+          draft.state = state != null ? state : initialState;
           draft.isLoading = false;
           draft.error = void 0;
         });
@@ -2127,22 +2128,34 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
     analyticsId,
     control,
     emptyMessage,
+    initialState,
     hint,
     margin,
+    state: initialState,
     tags,
     title,
     isLoading: false,
     query: "",
-    results: [],
     _update(updateFn) {
       update(this, updateFn);
     },
     onChange(query) {
-      this._update((draft) => {
-        draft.query = query;
-        draft.isLoading = true;
-      });
-      debouncedSearch(this, query.trim());
+      if (query.trim()) {
+        this._update((draft) => {
+          draft.query = query;
+          draft.isLoading = true;
+        });
+        debouncedSearch(this, query.trim());
+      } else {
+        abortController.abort();
+        debouncedSearch.cancel();
+        update(component, (draft) => {
+          draft.query = query;
+          draft.state = initialState;
+          draft.isLoading = false;
+          draft.error = void 0;
+        });
+      }
     },
     onSelect({ type, value }) {
       if (type === "action") {
@@ -2164,9 +2177,9 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
 };
 
 // src/domain/features/search/getPerformSearchFunction.ts
-var getPerformSearchFunction = (httpClient, defaultConfig) => {
+var getPerformSearchFunction = (httpClient, mapLayoutToDomainComponent, defaultConfig) => {
   let latestSuccessfulRequestHash = hashRequest("", defaultConfig);
-  let latestSuccessfulResults = [];
+  let latestSuccessfulResults = null;
   return async ({ config = defaultConfig, query, signal }) => {
     const requestHash = hashRequest(query, config);
     if (requestHash !== latestSuccessfulRequestHash) {
@@ -2184,6 +2197,14 @@ var getPerformSearchFunction = (httpClient, defaultConfig) => {
       }));
       const results = await parseResponse(response);
       latestSuccessfulRequestHash = requestHash;
+      if (results.type === "layout") {
+        const mappedLayoutResult = {
+          type: "layout",
+          content: results.content.map(mapLayoutToDomainComponent)
+        };
+        latestSuccessfulResults = mappedLayoutResult;
+        return mappedLayoutResult;
+      }
       latestSuccessfulResults = results;
       return results;
     }
@@ -2194,10 +2215,15 @@ var parseResponse = async (response) => {
   if (response.ok) {
     const body = await response.json().catch(() => null);
     if (isValidResponseBody(body)) {
-      if (body.results.length === 0) {
-        return [];
+      if (body.type === "layout") {
+        return body;
+      }
+      if (body.results) {
+        return {
+          type: "results",
+          results: body.results
+        };
       }
-      return body.results;
     }
   }
   throw Error("error response");
@@ -2208,21 +2234,49 @@ var addQueryParameter = (url, key, value) => {
   urlQueryParams.set(key, value);
   return `${urlBase}?${urlQueryParams.toString()}`;
 };
-var isValidResponseBody = (body) => isObject(body) && "results" in body && isArray(body.results) && body.results.every(
-  (result) => isObject(result) && "title" in result && "type" in result && "value" in result
-);
+var isValidResponseBody = (body) => {
+  if (!isObject(body)) {
+    return false;
+  }
+  if ("results" in body) {
+    return isArray(body.results) && body.results.every(
+      (result) => isObject(result) && "title" in result && "type" in result && "value" in result
+    );
+  }
+  if ("type" in body && body.type === "layout" && "content" in body) {
+    return isArray(body.content);
+  }
+  return false;
+};
 var hashRequest = (query, config) => JSON.stringify({ query, config });
 
 // src/domain/mappers/layout/searchLayoutToComponent.ts
-var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint, method, param, title, url, margin, tags }, mapperProps) => {
+var searchLayoutToComponent = (uid, {
+  analyticsId,
+  control,
+  emptyMessage = "",
+  initialState,
+  hint,
+  method,
+  param,
+  title,
+  url,
+  margin,
+  tags
+}, mapperProps) => {
   const { httpClient, onBehavior, onComponentUpdate } = mapperProps;
-  const search = getPerformSearchFunction(httpClient, { method, param, url });
+  const search = getPerformSearchFunction(
+    httpClient,
+    (layout, index) => mapLayoutToComponent(`${uid}-search-response-${index}`, layout, mapperProps, []),
+    { method, param, url }
+  );
   return createSearchComponent(
     {
       uid,
       analyticsId,
       control,
-      emptyMessage: emptyMessage != null ? emptyMessage : "",
+      emptyMessage,
+      initialState: getInitialState(uid, initialState, mapperProps),
       hint,
       margin: margin != null ? margin : "md",
       tags,
@@ -2233,6 +2287,33 @@ var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint,
     onComponentUpdate
   );
 };
+var getInitialState = (uid, initialState, mapperProps) => {
+  if (!initialState) {
+    return emptyInitialState;
+  }
+  switch (initialState.type) {
+    case "layout":
+      return {
+        type: "layout",
+        content: initialState.content.map(
+          (layout, index) => mapLayoutToComponent(`${uid}-initial-${index}`, layout, mapperProps, [])
+        )
+      };
+    case "results":
+      return {
+        type: "results",
+        results: initialState.results
+      };
+    default: {
+      const exhaustiveCheck = initialState;
+      return emptyInitialState;
+    }
+  }
+};
+var emptyInitialState = {
+  type: "layout",
+  content: []
+};
 
 // src/domain/components/SectionComponent.ts
 var createSectionComponent = (props) => {
@@ -6971,8 +7052,15 @@ var CoreRootRenderer = {
   }
 };
 
-// src/renderers/getRenderFunction.tsx
+// src/renderers/EmptyLoadingStateRenderer.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var EmptyLoadingStateRenderer = {
+  canRenderType: "loading-state",
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {})
+};
+
+// src/renderers/getRenderFunction.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var getRenderFunction = (renderers) => {
   function ComponentRenderer(props) {
     const { type } = props;
@@ -6992,9 +7080,9 @@ var getRenderFunction = (renderers) => {
   }
   const render = (props) => {
     if (!props) {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComponentRenderer, __spreadValues({}, props), props.uid);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComponentRenderer, __spreadValues({}, props), props.uid);
   };
   return render;
 };
@@ -7891,14 +7979,17 @@ var getToolbarProps = (toolbar, rendererMapperProps) => {
 
 // src/renderers/mappers/rootComponentToProps.ts
 var rootComponentToProps = (rootComponent, rendererMapperProps) => {
-  const childrenProps = rootComponent.getChildren().map((child) => {
-    if (child.type === "step") {
-      return stepComponentToProps(child, __spreadProps(__spreadValues({}, rendererMapperProps), {
-        showBack: rootComponent.canPerformBack()
-      }));
-    }
-    return componentToRendererProps(child, rendererMapperProps);
-  });
+  const childrenProps = [
+    __spreadValues({ type: "loading-state", uid: "loading-state" }, rendererMapperProps),
+    ...rootComponent.getChildren().map((child) => {
+      if (child.type === "step") {
+        return stepComponentToProps(child, __spreadProps(__spreadValues({}, rendererMapperProps), {
+          showBack: rootComponent.canPerformBack()
+        }));
+      }
+      return componentToRendererProps(child, rendererMapperProps);
+    })
+  ];
   const subflow = rootComponent.subflow ? {
     presentation: rootComponent.subflow.presentation,
     children: rendererMapperProps.render(
@@ -7916,19 +8007,7 @@ var rootComponentToProps = (rootComponent, rendererMapperProps) => {
 
 // src/renderers/mappers/searchComponentToProps.ts
 var searchComponentToProps = (component, rendererMapperProps) => {
-  const {
-    uid,
-    control,
-    emptyMessage,
-    error,
-    hint,
-    isLoading,
-    margin,
-    query,
-    results,
-    title,
-    tags
-  } = component;
+  const { uid, control, emptyMessage, error, hint, isLoading, margin, query, title, tags } = component;
   const onChange = component.onChange.bind(component);
   const onSelect = component.onSelect.bind(component);
   const state = getSearchState({
@@ -7936,7 +8015,8 @@ var searchComponentToProps = (component, rendererMapperProps) => {
     error,
     isLoading,
     query,
-    results,
+    state: component.state,
+    rendererMapperProps,
     onChange,
     onSelect
   });
@@ -7960,29 +8040,46 @@ var getSearchState = ({
   error,
   isLoading,
   query,
-  results,
+  state,
+  rendererMapperProps,
   onChange,
   onSelect
 }) => {
-  if (!query || isLoading) {
+  if (isLoading) {
     return { type: "pending" };
   }
   if (error) {
     return { type: "error", onRetry: () => onChange(query) };
   }
-  if (results.length === 0) {
+  if (!state) {
     return { type: "noResults", message: emptyMessage };
   }
-  const rendererResults = results.map((result) => {
-    var _a;
-    return __spreadProps(__spreadValues({}, result), {
-      id: result.type === "action" ? (_a = result.value.id) != null ? _a : result.value.$id : void 0,
-      image: mapSpecImage(result.image),
-      media: getDomainLayerMedia(result),
-      onClick: () => onSelect(result)
-    });
-  });
-  return { type: "results", results: rendererResults };
+  if (state.type === "layout") {
+    const { content } = state;
+    const layoutProps = content.map(
+      (component) => componentToRendererProps(component, rendererMapperProps)
+    );
+    return {
+      type: "layout",
+      layout: layoutProps.map((props) => rendererMapperProps.render(props)),
+      layoutProps
+    };
+  }
+  if (query && state.results.length === 0) {
+    return { type: "noResults", message: emptyMessage };
+  }
+  return {
+    type: "results",
+    results: state.results.map((result) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, result), {
+        id: result.type === "action" ? (_a = result.value.id) != null ? _a : result.value.$id : void 0,
+        image: mapSpecImage(result.image),
+        media: getDomainLayerMedia(result),
+        onClick: () => onSelect(result)
+      });
+    })
+  };
 };
 
 // src/renderers/mappers/sectionComponentToProps.ts
@@ -8276,7 +8373,7 @@ function useStableCallback(handler) {
 }
 
 // src/useDynamicFlow.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var className = "dynamic-flow";
 var noop3 = () => {
 };
@@ -8327,10 +8424,15 @@ function useDynamicFlow(props) {
     scrollToTop
   }));
   const render = (0, import_react3.useMemo)(
-    () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
+    () => getRenderFunction([
+      CoreRootRenderer,
+      CoreContainerRenderer,
+      ...renderers,
+      EmptyLoadingStateRenderer
+    ]),
     [renderers]
   );
-  const tree = componentToRendererProps(rootComponent, {
+  const rendererProps = componentToRendererProps(rootComponent, {
     features,
     render,
     httpClient,
@@ -8342,9 +8444,13 @@ function useDynamicFlow(props) {
     controller: {
       getSubmittableValue: async () => rootComponent.getSubmittableValue(),
       validate: () => rootComponent.validate(),
+      /**
+       * @experimental This is not a public API and may be removed in the future without notice
+       */
+      rendererProps,
       cancel
     },
-    view: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    view: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ErrorBoundary_default,
       {
         onError: (error) => {
@@ -8354,7 +8460,7 @@ function useDynamicFlow(props) {
             errorMessage: getErrorMessage(error)
           });
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: normalisedFlowId, className, children: render(rendererProps) })
       }
     )
   };

package/build/main.mjs

@@ -806,6 +806,7 @@ var getChildren = (node) => {
     case "heading":
     case "hidden":
     case "image":
+    case "loading-state":
     case "instructions":
     case "input-integer":
     case "list":
@@ -2061,7 +2062,7 @@ var debounce = (callback, waitMs) => {
 // src/domain/components/searchComponent/SearchComponent.ts
 var DEBOUNCE_TIME = 400;
 var createSearchComponent = (searchProps, performSearch, onBehavior, onComponentUpdate) => {
-  const { uid, analyticsId, control, emptyMessage, hint, margin, tags, title } = searchProps;
+  const { uid, analyticsId, control, emptyMessage, initialState, hint, margin, tags, title } = searchProps;
   const update = getInputUpdateFunction(onComponentUpdate);
   let abortController = new AbortController();
   const search = (component2, query, searchConfig) => {
@@ -2072,10 +2073,10 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
       signal,
       query,
       config: searchConfig
-    }).then((results) => {
+    }).then((state) => {
       if (!signal.aborted) {
         update(component2, (draft) => {
-          draft.results = results;
+          draft.state = state != null ? state : initialState;
           draft.isLoading = false;
           draft.error = void 0;
         });
@@ -2097,22 +2098,34 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
     analyticsId,
     control,
     emptyMessage,
+    initialState,
     hint,
     margin,
+    state: initialState,
     tags,
     title,
     isLoading: false,
     query: "",
-    results: [],
     _update(updateFn) {
       update(this, updateFn);
     },
     onChange(query) {
-      this._update((draft) => {
-        draft.query = query;
-        draft.isLoading = true;
-      });
-      debouncedSearch(this, query.trim());
+      if (query.trim()) {
+        this._update((draft) => {
+          draft.query = query;
+          draft.isLoading = true;
+        });
+        debouncedSearch(this, query.trim());
+      } else {
+        abortController.abort();
+        debouncedSearch.cancel();
+        update(component, (draft) => {
+          draft.query = query;
+          draft.state = initialState;
+          draft.isLoading = false;
+          draft.error = void 0;
+        });
+      }
     },
     onSelect({ type, value }) {
       if (type === "action") {
@@ -2134,9 +2147,9 @@ var createSearchComponent = (searchProps, performSearch, onBehavior, onComponent
 };
 
 // src/domain/features/search/getPerformSearchFunction.ts
-var getPerformSearchFunction = (httpClient, defaultConfig) => {
+var getPerformSearchFunction = (httpClient, mapLayoutToDomainComponent, defaultConfig) => {
   let latestSuccessfulRequestHash = hashRequest("", defaultConfig);
-  let latestSuccessfulResults = [];
+  let latestSuccessfulResults = null;
   return async ({ config = defaultConfig, query, signal }) => {
     const requestHash = hashRequest(query, config);
     if (requestHash !== latestSuccessfulRequestHash) {
@@ -2154,6 +2167,14 @@ var getPerformSearchFunction = (httpClient, defaultConfig) => {
       }));
       const results = await parseResponse(response);
       latestSuccessfulRequestHash = requestHash;
+      if (results.type === "layout") {
+        const mappedLayoutResult = {
+          type: "layout",
+          content: results.content.map(mapLayoutToDomainComponent)
+        };
+        latestSuccessfulResults = mappedLayoutResult;
+        return mappedLayoutResult;
+      }
       latestSuccessfulResults = results;
       return results;
     }
@@ -2164,10 +2185,15 @@ var parseResponse = async (response) => {
   if (response.ok) {
     const body = await response.json().catch(() => null);
     if (isValidResponseBody(body)) {
-      if (body.results.length === 0) {
-        return [];
+      if (body.type === "layout") {
+        return body;
+      }
+      if (body.results) {
+        return {
+          type: "results",
+          results: body.results
+        };
       }
-      return body.results;
     }
   }
   throw Error("error response");
@@ -2178,21 +2204,49 @@ var addQueryParameter = (url, key, value) => {
   urlQueryParams.set(key, value);
   return `${urlBase}?${urlQueryParams.toString()}`;
 };
-var isValidResponseBody = (body) => isObject(body) && "results" in body && isArray(body.results) && body.results.every(
-  (result) => isObject(result) && "title" in result && "type" in result && "value" in result
-);
+var isValidResponseBody = (body) => {
+  if (!isObject(body)) {
+    return false;
+  }
+  if ("results" in body) {
+    return isArray(body.results) && body.results.every(
+      (result) => isObject(result) && "title" in result && "type" in result && "value" in result
+    );
+  }
+  if ("type" in body && body.type === "layout" && "content" in body) {
+    return isArray(body.content);
+  }
+  return false;
+};
 var hashRequest = (query, config) => JSON.stringify({ query, config });
 
 // src/domain/mappers/layout/searchLayoutToComponent.ts
-var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint, method, param, title, url, margin, tags }, mapperProps) => {
+var searchLayoutToComponent = (uid, {
+  analyticsId,
+  control,
+  emptyMessage = "",
+  initialState,
+  hint,
+  method,
+  param,
+  title,
+  url,
+  margin,
+  tags
+}, mapperProps) => {
   const { httpClient, onBehavior, onComponentUpdate } = mapperProps;
-  const search = getPerformSearchFunction(httpClient, { method, param, url });
+  const search = getPerformSearchFunction(
+    httpClient,
+    (layout, index) => mapLayoutToComponent(`${uid}-search-response-${index}`, layout, mapperProps, []),
+    { method, param, url }
+  );
   return createSearchComponent(
     {
       uid,
       analyticsId,
       control,
-      emptyMessage: emptyMessage != null ? emptyMessage : "",
+      emptyMessage,
+      initialState: getInitialState(uid, initialState, mapperProps),
       hint,
       margin: margin != null ? margin : "md",
       tags,
@@ -2203,6 +2257,33 @@ var searchLayoutToComponent = (uid, { analyticsId, control, emptyMessage, hint,
     onComponentUpdate
   );
 };
+var getInitialState = (uid, initialState, mapperProps) => {
+  if (!initialState) {
+    return emptyInitialState;
+  }
+  switch (initialState.type) {
+    case "layout":
+      return {
+        type: "layout",
+        content: initialState.content.map(
+          (layout, index) => mapLayoutToComponent(`${uid}-initial-${index}`, layout, mapperProps, [])
+        )
+      };
+    case "results":
+      return {
+        type: "results",
+        results: initialState.results
+      };
+    default: {
+      const exhaustiveCheck = initialState;
+      return emptyInitialState;
+    }
+  }
+};
+var emptyInitialState = {
+  type: "layout",
+  content: []
+};
 
 // src/domain/components/SectionComponent.ts
 var createSectionComponent = (props) => {
@@ -6941,8 +7022,15 @@ var CoreRootRenderer = {
   }
 };
 
-// src/renderers/getRenderFunction.tsx
+// src/renderers/EmptyLoadingStateRenderer.tsx
 import { Fragment as Fragment4, jsx as jsx5 } from "react/jsx-runtime";
+var EmptyLoadingStateRenderer = {
+  canRenderType: "loading-state",
+  render: () => /* @__PURE__ */ jsx5(Fragment4, {})
+};
+
+// src/renderers/getRenderFunction.tsx
+import { Fragment as Fragment5, jsx as jsx6 } from "react/jsx-runtime";
 var getRenderFunction = (renderers) => {
   function ComponentRenderer(props) {
     const { type } = props;
@@ -6962,9 +7050,9 @@ var getRenderFunction = (renderers) => {
   }
   const render = (props) => {
     if (!props) {
-      return /* @__PURE__ */ jsx5(Fragment4, {});
+      return /* @__PURE__ */ jsx6(Fragment5, {});
     }
-    return /* @__PURE__ */ jsx5(ComponentRenderer, __spreadValues({}, props), props.uid);
+    return /* @__PURE__ */ jsx6(ComponentRenderer, __spreadValues({}, props), props.uid);
   };
   return render;
 };
@@ -7861,14 +7949,17 @@ var getToolbarProps = (toolbar, rendererMapperProps) => {
 
 // src/renderers/mappers/rootComponentToProps.ts
 var rootComponentToProps = (rootComponent, rendererMapperProps) => {
-  const childrenProps = rootComponent.getChildren().map((child) => {
-    if (child.type === "step") {
-      return stepComponentToProps(child, __spreadProps(__spreadValues({}, rendererMapperProps), {
-        showBack: rootComponent.canPerformBack()
-      }));
-    }
-    return componentToRendererProps(child, rendererMapperProps);
-  });
+  const childrenProps = [
+    __spreadValues({ type: "loading-state", uid: "loading-state" }, rendererMapperProps),
+    ...rootComponent.getChildren().map((child) => {
+      if (child.type === "step") {
+        return stepComponentToProps(child, __spreadProps(__spreadValues({}, rendererMapperProps), {
+          showBack: rootComponent.canPerformBack()
+        }));
+      }
+      return componentToRendererProps(child, rendererMapperProps);
+    })
+  ];
   const subflow = rootComponent.subflow ? {
     presentation: rootComponent.subflow.presentation,
     children: rendererMapperProps.render(
@@ -7886,19 +7977,7 @@ var rootComponentToProps = (rootComponent, rendererMapperProps) => {
 
 // src/renderers/mappers/searchComponentToProps.ts
 var searchComponentToProps = (component, rendererMapperProps) => {
-  const {
-    uid,
-    control,
-    emptyMessage,
-    error,
-    hint,
-    isLoading,
-    margin,
-    query,
-    results,
-    title,
-    tags
-  } = component;
+  const { uid, control, emptyMessage, error, hint, isLoading, margin, query, title, tags } = component;
   const onChange = component.onChange.bind(component);
   const onSelect = component.onSelect.bind(component);
   const state = getSearchState({
@@ -7906,7 +7985,8 @@ var searchComponentToProps = (component, rendererMapperProps) => {
     error,
     isLoading,
     query,
-    results,
+    state: component.state,
+    rendererMapperProps,
     onChange,
     onSelect
   });
@@ -7930,29 +8010,46 @@ var getSearchState = ({
   error,
   isLoading,
   query,
-  results,
+  state,
+  rendererMapperProps,
   onChange,
   onSelect
 }) => {
-  if (!query || isLoading) {
+  if (isLoading) {
     return { type: "pending" };
   }
   if (error) {
     return { type: "error", onRetry: () => onChange(query) };
   }
-  if (results.length === 0) {
+  if (!state) {
     return { type: "noResults", message: emptyMessage };
   }
-  const rendererResults = results.map((result) => {
-    var _a;
-    return __spreadProps(__spreadValues({}, result), {
-      id: result.type === "action" ? (_a = result.value.id) != null ? _a : result.value.$id : void 0,
-      image: mapSpecImage(result.image),
-      media: getDomainLayerMedia(result),
-      onClick: () => onSelect(result)
-    });
-  });
-  return { type: "results", results: rendererResults };
+  if (state.type === "layout") {
+    const { content } = state;
+    const layoutProps = content.map(
+      (component) => componentToRendererProps(component, rendererMapperProps)
+    );
+    return {
+      type: "layout",
+      layout: layoutProps.map((props) => rendererMapperProps.render(props)),
+      layoutProps
+    };
+  }
+  if (query && state.results.length === 0) {
+    return { type: "noResults", message: emptyMessage };
+  }
+  return {
+    type: "results",
+    results: state.results.map((result) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, result), {
+        id: result.type === "action" ? (_a = result.value.id) != null ? _a : result.value.$id : void 0,
+        image: mapSpecImage(result.image),
+        media: getDomainLayerMedia(result),
+        onClick: () => onSelect(result)
+      });
+    })
+  };
 };
 
 // src/renderers/mappers/sectionComponentToProps.ts
@@ -8246,7 +8343,7 @@ function useStableCallback(handler) {
 }
 
 // src/useDynamicFlow.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var className = "dynamic-flow";
 var noop3 = () => {
 };
@@ -8297,10 +8394,15 @@ function useDynamicFlow(props) {
     scrollToTop
   }));
   const render = useMemo(
-    () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
+    () => getRenderFunction([
+      CoreRootRenderer,
+      CoreContainerRenderer,
+      ...renderers,
+      EmptyLoadingStateRenderer
+    ]),
     [renderers]
   );
-  const tree = componentToRendererProps(rootComponent, {
+  const rendererProps = componentToRendererProps(rootComponent, {
     features,
     render,
     httpClient,
@@ -8312,9 +8414,13 @@ function useDynamicFlow(props) {
     controller: {
       getSubmittableValue: async () => rootComponent.getSubmittableValue(),
       validate: () => rootComponent.validate(),
+      /**
+       * @experimental This is not a public API and may be removed in the future without notice
+       */
+      rendererProps,
       cancel
     },
-    view: /* @__PURE__ */ jsx6(
+    view: /* @__PURE__ */ jsx7(
       ErrorBoundary_default,
       {
         onError: (error) => {
@@ -8324,7 +8430,7 @@ function useDynamicFlow(props) {
             errorMessage: getErrorMessage(error)
           });
         },
-        children: /* @__PURE__ */ jsx6("div", { id: normalisedFlowId, className, children: render(tree) })
+        children: /* @__PURE__ */ jsx7("div", { id: normalisedFlowId, className, children: render(rendererProps) })
       }
     )
   };

package/build/types/domain/components/searchComponent/SearchComponent.d.ts

@@ -1,5 +1,5 @@
 import type { SearchResult } from '@wise/dynamic-flow-types/spec';
-import type { BaseLayoutComponent, OnBehavior, OnComponentUpdate } from '../../types';
+import type { BaseLayoutComponent, LayoutComponent, OnBehavior, OnComponentUpdate } from '../../types';
 export type SearchConfig = {
     method: string;
     param: string;
@@ -10,19 +10,27 @@ export type SearchProps = {
     query: string;
     signal: AbortSignal;
 };
-export type PerformSearch = (props: SearchProps) => Promise<SearchResult[]>;
+export type SearchResultsState = {
+    type: 'layout';
+    content: LayoutComponent[];
+} | {
+    type: 'results';
+    results: SearchResult[];
+};
+export type PerformSearch = (props: SearchProps) => Promise<SearchResultsState | null>;
 export type SearchComponent = BaseLayoutComponent & {
     type: 'search';
     kind: 'layout';
     emptyMessage: string;
+    initialState: SearchResultsState;
     hint?: string;
     isLoading: boolean;
     query: string;
     title: string;
-    results: SearchResult[];
+    state: SearchResultsState;
     error?: string;
     onChange: (query: string) => void;
     onSelect: (result: SearchResult) => void;
 };
-export declare const createSearchComponent: (searchProps: Pick<SearchComponent, "uid" | "analyticsId" | "control" | "emptyMessage" | "hint" | "margin" | "tags" | "title">, performSearch: PerformSearch, onBehavior: OnBehavior, onComponentUpdate: OnComponentUpdate) => SearchComponent;
+export declare const createSearchComponent: (searchProps: Pick<SearchComponent, "uid" | "analyticsId" | "control" | "emptyMessage" | "initialState" | "hint" | "margin" | "tags" | "title">, performSearch: PerformSearch, onBehavior: OnBehavior, onComponentUpdate: OnComponentUpdate) => SearchComponent;
 //# sourceMappingURL=SearchComponent.d.ts.map

package/build/types/domain/components/searchComponent/SearchComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchComponent.d.ts","sourceRoot":"","sources":["../../../../../src/domain/components/searchComponent/SearchComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAKtF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;AAE5E,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG;IAClD,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC1C,CAAC;AAIF,eAAO,MAAM,qBAAqB,GAChC,aAAa,IAAI,CACf,eAAe,EACf,KAAK,GAAG,aAAa,GAAG,SAAS,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAC1F,EACD,eAAe,aAAa,EAC5B,YAAY,UAAU,EACtB,mBAAmB,iBAAiB,KACnC,eA+EF,CAAC"}
+{"version":3,"file":"SearchComponent.d.ts","sourceRoot":"","sources":["../../../../../src/domain/components/searchComponent/SearchComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,KAAK,EACV,mBAAmB,EACnB,eAAe,EACf,UAAU,EACV,iBAAiB,EAClB,MAAM,aAAa,CAAC;AAKrB,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B,GACD;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,EAAE,CAAC;CACzB,CAAC;AAEN,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;AAEvF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG;IAClD,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,kBAAkB,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC1C,CAAC;AAIF,eAAO,MAAM,qBAAqB,GAChC,aAAa,IAAI,CACf,eAAe,EACb,KAAK,GACL,aAAa,GACb,SAAS,GACT,cAAc,GACd,cAAc,GACd,MAAM,GACN,QAAQ,GACR,MAAM,GACN,OAAO,CACV,EACD,eAAe,aAAa,EAC5B,YAAY,UAAU,EACtB,mBAAmB,iBAAiB,KACnC,eA6FF,CAAC"}

package/build/types/domain/features/search/getPerformSearchFunction.d.ts

@@ -1,4 +1,6 @@
 import type { SearchConfig, PerformSearch } from '../../components/searchComponent/SearchComponent';
 import type { HttpClient } from '../../../types';
-export declare const getPerformSearchFunction: (httpClient: HttpClient, defaultConfig: SearchConfig) => PerformSearch;
+import type { Layout } from '@wise/dynamic-flow-types/spec';
+import { LayoutComponent } from '../../types';
+export declare const getPerformSearchFunction: (httpClient: HttpClient, mapLayoutToDomainComponent: (layout: Layout, index: number) => LayoutComponent, defaultConfig: SearchConfig) => PerformSearch;
 //# sourceMappingURL=getPerformSearchFunction.d.ts.map

package/build/types/domain/features/search/getPerformSearchFunction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getPerformSearchFunction.d.ts","sourceRoot":"","sources":["../../../../../src/domain/features/search/getPerformSearchFunction.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAC;AAEpG,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,eAAO,MAAM,wBAAwB,GACnC,YAAY,UAAU,EACtB,eAAe,YAAY,KAC1B,aA+BF,CAAC"}
+{"version":3,"file":"getPerformSearchFunction.d.ts","sourceRoot":"","sources":["../../../../../src/domain/features/search/getPerformSearchFunction.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EAEd,MAAM,kDAAkD,CAAC;AAE1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,MAAM,EAAwC,MAAM,+BAA+B,CAAC;AAClG,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,eAAO,MAAM,wBAAwB,GACnC,YAAY,UAAU,EACtB,4BAA4B,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,eAAe,EAC9E,eAAe,YAAY,KAC1B,aAyCF,CAAC"}

package/build/types/domain/mappers/layout/searchLayoutToComponent.d.ts

@@ -1,4 +1,5 @@
 import type { SearchLayout } from '@wise/dynamic-flow-types/spec';
+import { SearchComponent } from '../../components/searchComponent/SearchComponent';
 import type { MapperProps } from '../schema/types';
-export declare const searchLayoutToComponent: (uid: string, { analyticsId, control, emptyMessage, hint, method, param, title, url, margin, tags }: SearchLayout, mapperProps: MapperProps) => import("../../components/searchComponent/SearchComponent").SearchComponent;
+export declare const searchLayoutToComponent: (uid: string, { analyticsId, control, emptyMessage, initialState, hint, method, param, title, url, margin, tags, }: SearchLayout, mapperProps: MapperProps) => SearchComponent;
 //# sourceMappingURL=searchLayoutToComponent.d.ts.map

package/build/types/domain/mappers/layout/searchLayoutToComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchLayoutToComponent.d.ts","sourceRoot":"","sources":["../../../../../src/domain/mappers/layout/searchLayoutToComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAGlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,eAAO,MAAM,uBAAuB,GAClC,KAAK,MAAM,EACX,uFAAuF,YAAY,EACnG,aAAa,WAAW,+EAoBzB,CAAC"}
+{"version":3,"file":"searchLayoutToComponent.d.ts","sourceRoot":"","sources":["../../../../../src/domain/mappers/layout/searchLayoutToComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAEL,eAAe,EAEhB,MAAM,kDAAkD,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,eAAO,MAAM,uBAAuB,GAClC,KAAK,MAAM,EACX,sGAYG,YAAY,EACf,aAAa,WAAW,oBA0BzB,CAAC"}

package/build/types/renderers/EmptyLoadingStateRenderer.d.ts

@@ -0,0 +1,3 @@
+import type { LoadingStateRendererProps, Renderer } from '@wise/dynamic-flow-types/renderers';
+export declare const EmptyLoadingStateRenderer: Renderer<LoadingStateRendererProps>;
+//# sourceMappingURL=EmptyLoadingStateRenderer.d.ts.map

package/build/types/renderers/EmptyLoadingStateRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyLoadingStateRenderer.d.ts","sourceRoot":"","sources":["../../../src/renderers/EmptyLoadingStateRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9F,eAAO,MAAM,yBAAyB,EAAE,QAAQ,CAAC,yBAAyB,CAGzE,CAAC"}

package/build/types/renderers/mappers/rootComponentToProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rootComponentToProps.d.ts","sourceRoot":"","sources":["../../../../src/renderers/mappers/rootComponentToProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAA4B,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAG3F,eAAO,MAAM,oBAAoB,GAC/B,eAAe,mBAAmB,EAClC,qBAAqB,mBAAmB,KACvC,iBA6BF,CAAC"}
+{"version":3,"file":"rootComponentToProps.d.ts","sourceRoot":"","sources":["../../../../src/renderers/mappers/rootComponentToProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAA4B,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAG3F,eAAO,MAAM,oBAAoB,GAC/B,eAAe,mBAAmB,EAClC,qBAAqB,mBAAmB,KACvC,iBA+BF,CAAC"}

package/build/types/renderers/mappers/searchComponentToProps.d.ts

@@ -1,5 +1,5 @@
-import type { SearchComponent } from '../../domain/components/searchComponent/SearchComponent';
 import type { SearchRendererProps } from '@wise/dynamic-flow-types/renderers';
+import type { SearchComponent } from '../../domain/components/searchComponent/SearchComponent';
 import { RendererMapperProps } from './componentToRendererProps';
 export declare const searchComponentToProps: (component: SearchComponent, rendererMapperProps: RendererMapperProps) => SearchRendererProps;
 //# sourceMappingURL=searchComponentToProps.d.ts.map

package/build/types/renderers/mappers/searchComponentToProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchComponentToProps.d.ts","sourceRoot":"","sources":["../../../../src/renderers/mappers/searchComponentToProps.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yDAAyD,CAAC;AAC/F,OAAO,KAAK,EAAE,mBAAmB,EAAe,MAAM,oCAAoC,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAIjE,eAAO,MAAM,sBAAsB,GACjC,WAAW,eAAe,EAC1B,qBAAqB,mBAAmB,KACvC,mBA0CF,CAAC"}
+{"version":3,"file":"searchComponentToProps.d.ts","sourceRoot":"","sources":["../../../../src/renderers/mappers/searchComponentToProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAe,MAAM,oCAAoC,CAAC;AAE3F,OAAO,KAAK,EACV,eAAe,EAEhB,MAAM,yDAAyD,CAAC;AAGjE,OAAO,EAA4B,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAE3F,eAAO,MAAM,sBAAsB,GACjC,WAAW,eAAe,EAC1B,qBAAqB,mBAAmB,KACvC,mBAgCF,CAAC"}

package/build/types/test-utils/getMergedTestRenderers.d.ts

@@ -1,3 +1,3 @@
 import { DynamicFlowWiseProps } from './DynamicFlowWise';
-export declare const getMergedTestRenderers: (props: DynamicFlowWiseProps) => (import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").CoreContainerRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").RootRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").StepRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").AlertRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").BoxRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ColumnsRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").DecisionRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").DividerRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ExternalConfirmationRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").FormattedValueRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").FormRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").HeadingRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").InstructionsRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ListRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").LoadingIndicatorRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").MarkdownRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ImageRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").MediaRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ModalLayoutRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ModalRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ParagraphRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ProgressRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ReviewRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").SearchRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").StatusListRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").CheckboxInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ButtonRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").DateInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").HiddenRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").IntegerInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").MoneyInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").NumberInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").RepeatableRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").FormSectionRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").SelectInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").SectionRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").SubflowRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").MultiSelectInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").TabsRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").TextInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").UploadInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").MultiUploadInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").UpsellRendererProps>)[];
+export declare const getMergedTestRenderers: (props: DynamicFlowWiseProps) => (import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").CoreContainerRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").RootRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").LoadingStateRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").StepRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").AlertRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").BoxRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ColumnsRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").DecisionRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").DividerRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ExternalConfirmationRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").FormattedValueRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").FormRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").HeadingRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").InstructionsRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ListRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").LoadingIndicatorRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").MarkdownRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ImageRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").MediaRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ModalLayoutRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ModalRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ParagraphRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ProgressRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ReviewRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").SearchRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").StatusListRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").CheckboxInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").ButtonRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").DateInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").HiddenRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").IntegerInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").MoneyInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").NumberInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").RepeatableRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").FormSectionRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").SelectInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").SectionRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").SubflowRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").MultiSelectInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").TabsRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").TextInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").UploadInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").MultiUploadInputRendererProps> | import("@wise/dynamic-flow-types/renderers").Renderer<import("@wise/dynamic-flow-types/renderers").UpsellRendererProps>)[];
 //# sourceMappingURL=getMergedTestRenderers.d.ts.map

package/build/types/test-utils/getMergedTestRenderers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getMergedTestRenderers.d.ts","sourceRoot":"","sources":["../../../src/test-utils/getMergedTestRenderers.tsx"],"names":[],"mappings":"AACA,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,eAAO,MAAM,sBAAsB,GAAI,OAAO,oBAAoB,0vKA8BjE,CAAC"}
+{"version":3,"file":"getMergedTestRenderers.d.ts","sourceRoot":"","sources":["../../../src/test-utils/getMergedTestRenderers.tsx"],"names":[],"mappings":"AAKA,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,eAAO,MAAM,sBAAsB,GAAI,OAAO,oBAAoB,03KAgCjE,CAAC"}

package/build/types/useDynamicFlow.d.ts

@@ -6,6 +6,10 @@ export declare function useDynamicFlow(props: DynamicFlowCoreProps): {
     controller: {
         getSubmittableValue: () => Promise<import("@wise/dynamic-flow-types/spec").JsonElement>;
         validate: () => boolean;
+        /**
+         * @experimental This is not a public API and may be removed in the future without notice
+         */
+        rendererProps: import("@wise/dynamic-flow-types/renderers").RendererProps;
         cancel: () => void;
     };
     view: import("react/jsx-runtime").JSX.Element;

package/build/types/useDynamicFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDynamicFlow.d.ts","sourceRoot":"","sources":["../../src/useDynamicFlow.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AASpD;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,oBAAoB;;;;;;;EAyFzD"}
+{"version":3,"file":"useDynamicFlow.d.ts","sourceRoot":"","sources":["../../src/useDynamicFlow.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AASpD;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,oBAAoB;;;;QA6EpD;;WAEG;;;;;EAoBR"}

package/build/types/useDynamicFlowModal.d.ts

@@ -10,6 +10,7 @@ export declare const useDynamicFlowModal: (props: DynamicFlowProps) => {
     controller: {
         getSubmittableValue: () => Promise<JsonElement>;
         validate: () => boolean;
+        rendererProps: import("@wise/dynamic-flow-types/renderers").RendererProps;
         cancel: () => void;
     };
     view: import("react/jsx-runtime").JSX.Element;

package/build/types/useDynamicFlowModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDynamicFlowModal.d.ts","sourceRoot":"","sources":["../../src/useDynamicFlowModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAkB,MAAM,GAAG,CAAC;AAuBrD,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB;;;;;;;;;;;;;CA2D1D,CAAC"}
+{"version":3,"file":"useDynamicFlowModal.d.ts","sourceRoot":"","sources":["../../src/useDynamicFlowModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAkB,MAAM,GAAG,CAAC;AAuBrD,eAAO,MAAM,mBAAmB,GAAI,OAAO,gBAAgB;;;;;;;;;;;;;;CA2D1D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "5.8.0",
+  "version": "5.9.0-experimental-rendererprops-9c9a4b8",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -72,8 +72,8 @@
     "typescript": "5.9.3",
     "vitest": "4.0.18",
     "vitest-fetch-mock": "0.4.5",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -86,7 +86,7 @@
     "react-intl": "^6 || ^7"
   },
   "dependencies": {
-    "@wise/dynamic-flow-types": "4.8.0"
+    "@wise/dynamic-flow-types": "4.9.0-experimental-rendererprops-9c9a4b8"
   },
   "scripts": {
     "dev": "EXCLUDE_VISUAL_TESTS=true pnpm storybook dev -p 3003",