@wise/dynamic-flow-client-internal 4.0.0-experimental-dde19b5 → 4.0.0

package/build/main.js

@@ -278,8 +278,7 @@ __export(index_exports, {
   DynamicFlowRevamp: () => DynamicFlowRevamp,
   DynamicForm: () => DynamicForm,
   JsonSchemaForm: () => import_dynamic_flow_client4.JsonSchemaForm,
-  find: () => import_dynamic_flow_client4.find,
-  findType: () => import_dynamic_flow_client4.findType,
+  findRendererPropsByType: () => import_dynamic_flow_client4.findRendererPropsByType,
   isValidSchema: () => import_dynamic_flow_client4.isValidSchema,
   makeCustomFetch: () => import_dynamic_flow_client3.makeHttpClient,
   translations: () => i18n_default
@@ -1088,36 +1087,24 @@ var import_components5 = require("@transferwise/components");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ButtonRenderer = {
   canRenderType: "button",
-  render: ButtonRendererComponent
+  render: ({ control, context, disabled, margin, title, size: size2, onClick }) => {
+    const priority = mapControl(control);
+    const type = priority === "tertiary" ? void 0 : mapContext(context);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_components5.Button,
+      {
+        block: true,
+        className: getMargin(margin),
+        disabled,
+        priority,
+        size: mapSize(size2),
+        type,
+        onClick,
+        children: title
+      }
+    );
+  }
 };
-function ButtonRendererComponent({
-  control,
-  context,
-  disabled,
-  margin,
-  title,
-  size: size2,
-  stepLoadingState,
-  onClick
-}) {
-  const className = getMargin(margin);
-  const priority = mapControl(control);
-  const type = priority === "tertiary" ? void 0 : mapContext(context);
-  const isLoading = stepLoadingState !== "idle";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_components5.Button,
-    {
-      block: true,
-      className,
-      disabled: isLoading || disabled,
-      priority,
-      size: mapSize(size2),
-      type,
-      onClick,
-      children: title
-    }
-  );
-}
 var mapContext = (context) => {
   switch (context) {
     case "neutral":
@@ -1360,13 +1347,10 @@ function NavigationOptionMedia({ icon, image }) {
     }
   }
   if (image) {
-    const { accessibilityDescription, uri, url } = image;
-    if (uri && !uri.startsWith("urn:")) {
+    const { accessibilityDescription, uri } = image;
+    if (!uri.startsWith("urn:")) {
       return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: uri, alt: accessibilityDescription });
     }
-    if (url) {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("img", { src: url, alt: accessibilityDescription });
-    }
   }
   return null;
 }
@@ -1375,24 +1359,14 @@ function NavigationOptionMedia({ icon, image }) {
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var DecisionRenderer = {
   canRenderType: "decision",
-  render: DecisionRendererComponent
-};
-var DecisionRenderer_default = DecisionRenderer;
-function DecisionRendererComponent({
-  margin,
-  options,
-  title,
-  stepLoadingState
-}) {
-  const isLoading = stepLoadingState !== "idle";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: getMargin(margin), children: [
+  render: ({ margin, options, title }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: getMargin(margin), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components8.Header, { as: "h2", title }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components8.NavigationOptionsList, { children: options.map(({ description, disabled, icon, image, title: itemTitle, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       import_components8.NavigationOption,
       {
         title: itemTitle,
         content: description,
-        disabled: isLoading || disabled,
+        disabled,
         media: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NavigationOptionMedia, { icon, image }),
         showMediaCircle: false,
         showMediaAtAllSizes: true,
@@ -1400,8 +1374,9 @@ function DecisionRendererComponent({
       },
       JSON.stringify(itemTitle)
     )) })
-  ] });
-}
+  ] })
+};
+var DecisionRenderer_default = DecisionRenderer;
 
 // ../renderers/src/DividerRenderer.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -1506,19 +1481,14 @@ function ImageRendererComponent({
   margin,
   size: size2,
   uri,
-  url,
   httpClient
 }) {
   const [imageSource, setImageSource] = (0, import_react3.useState)("");
   (0, import_react3.useEffect)(() => {
-    if (!uri) {
-      void getImageSource(httpClient, url).then(setImageSource);
-      return;
-    }
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
-  }, [uri, url, httpClient]);
+  }, [uri, httpClient]);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `df-image ${size2 || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_components11.Image,
     {
@@ -1595,16 +1565,11 @@ var import_components13 = require("@transferwise/components");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var size = 24;
 function getIconAvatar({ icon, image }) {
-  if (image == null ? void 0 : image.url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      "img",
-      {
-        src: image.url,
-        alt: image.accessibilityDescription,
-        width: `${size}px`,
-        height: `${size}px`
-      }
-    );
+  if (image) {
+    const { accessibilityDescription, uri } = image;
+    if (!uri.startsWith("urn:")) {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("img", { src: uri, alt: accessibilityDescription, width: `${size}px`, height: `${size}px` });
+    }
   }
   if (isFlagIcon2(icon)) {
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.ICON, size, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DynamicIcon_default, { name: icon.name }) });
@@ -1741,8 +1706,8 @@ var import_components19 = require("@transferwise/components");
 var import_components18 = require("@transferwise/components");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function OptionMedia({ icon, image }) {
-  if (image == null ? void 0 : image.url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src: image.url, alt: image.accessibilityDescription || "", width: "64px" });
+  if (image && !image.uri.startsWith("urn:")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src: image.uri, alt: image.accessibilityDescription || "", width: "64px" });
   }
   if (icon && "name" in icon) {
     return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components18.Avatar, { type: import_components18.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DynamicIcon_default, { name: icon.name }) });

package/build/main.mjs

@@ -267,7 +267,7 @@ var init_index_8Fxev6OI_esm = __esm({
 
 // src/index.ts
 import { makeHttpClient } from "@wise/dynamic-flow-client";
-import { JsonSchemaForm, isValidSchema, findType, find } from "@wise/dynamic-flow-client";
+import { JsonSchemaForm, isValidSchema, findRendererPropsByType } from "@wise/dynamic-flow-client";
 
 // src/i18n/index.ts
 import { translations as coreTranslations } from "@wise/dynamic-flow-client";
@@ -1073,36 +1073,24 @@ import { Button } from "@transferwise/components";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var ButtonRenderer = {
   canRenderType: "button",
-  render: ButtonRendererComponent
+  render: ({ control, context, disabled, margin, title, size: size2, onClick }) => {
+    const priority = mapControl(control);
+    const type = priority === "tertiary" ? void 0 : mapContext(context);
+    return /* @__PURE__ */ jsx7(
+      Button,
+      {
+        block: true,
+        className: getMargin(margin),
+        disabled,
+        priority,
+        size: mapSize(size2),
+        type,
+        onClick,
+        children: title
+      }
+    );
+  }
 };
-function ButtonRendererComponent({
-  control,
-  context,
-  disabled,
-  margin,
-  title,
-  size: size2,
-  stepLoadingState,
-  onClick
-}) {
-  const className = getMargin(margin);
-  const priority = mapControl(control);
-  const type = priority === "tertiary" ? void 0 : mapContext(context);
-  const isLoading = stepLoadingState !== "idle";
-  return /* @__PURE__ */ jsx7(
-    Button,
-    {
-      block: true,
-      className,
-      disabled: isLoading || disabled,
-      priority,
-      size: mapSize(size2),
-      type,
-      onClick,
-      children: title
-    }
-  );
-}
 var mapContext = (context) => {
   switch (context) {
     case "neutral":
@@ -1345,13 +1333,10 @@ function NavigationOptionMedia({ icon, image }) {
     }
   }
   if (image) {
-    const { accessibilityDescription, uri, url } = image;
-    if (uri && !uri.startsWith("urn:")) {
+    const { accessibilityDescription, uri } = image;
+    if (!uri.startsWith("urn:")) {
       return /* @__PURE__ */ jsx15("img", { src: uri, alt: accessibilityDescription });
     }
-    if (url) {
-      return /* @__PURE__ */ jsx15("img", { src: url, alt: accessibilityDescription });
-    }
   }
   return null;
 }
@@ -1360,24 +1345,14 @@ function NavigationOptionMedia({ icon, image }) {
 import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 var DecisionRenderer = {
   canRenderType: "decision",
-  render: DecisionRendererComponent
-};
-var DecisionRenderer_default = DecisionRenderer;
-function DecisionRendererComponent({
-  margin,
-  options,
-  title,
-  stepLoadingState
-}) {
-  const isLoading = stepLoadingState !== "idle";
-  return /* @__PURE__ */ jsxs4("div", { className: getMargin(margin), children: [
+  render: ({ margin, options, title }) => /* @__PURE__ */ jsxs4("div", { className: getMargin(margin), children: [
     title && /* @__PURE__ */ jsx16(Header, { as: "h2", title }),
     /* @__PURE__ */ jsx16(NavigationOptionsList, { children: options.map(({ description, disabled, icon, image, title: itemTitle, onClick }) => /* @__PURE__ */ jsx16(
       NavigationOption,
       {
         title: itemTitle,
         content: description,
-        disabled: isLoading || disabled,
+        disabled,
         media: /* @__PURE__ */ jsx16(NavigationOptionMedia, { icon, image }),
         showMediaCircle: false,
         showMediaAtAllSizes: true,
@@ -1385,8 +1360,9 @@ function DecisionRendererComponent({
       },
       JSON.stringify(itemTitle)
     )) })
-  ] });
-}
+  ] })
+};
+var DecisionRenderer_default = DecisionRenderer;
 
 // ../renderers/src/DividerRenderer.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
@@ -1491,19 +1467,14 @@ function ImageRendererComponent({
   margin,
   size: size2,
   uri,
-  url,
   httpClient
 }) {
   const [imageSource, setImageSource] = useState2("");
   useEffect2(() => {
-    if (!uri) {
-      void getImageSource(httpClient, url).then(setImageSource);
-      return;
-    }
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
-  }, [uri, url, httpClient]);
+  }, [uri, httpClient]);
   return /* @__PURE__ */ jsx21("div", { className: `df-image ${size2 || "md"}`, children: /* @__PURE__ */ jsx21(
     Image,
     {
@@ -1580,16 +1551,11 @@ import { Avatar as Avatar2, AvatarType as AvatarType2 } from "@transferwise/comp
 import { jsx as jsx23 } from "react/jsx-runtime";
 var size = 24;
 function getIconAvatar({ icon, image }) {
-  if (image == null ? void 0 : image.url) {
-    return /* @__PURE__ */ jsx23(
-      "img",
-      {
-        src: image.url,
-        alt: image.accessibilityDescription,
-        width: `${size}px`,
-        height: `${size}px`
-      }
-    );
+  if (image) {
+    const { accessibilityDescription, uri } = image;
+    if (!uri.startsWith("urn:")) {
+      return /* @__PURE__ */ jsx23("img", { src: uri, alt: accessibilityDescription, width: `${size}px`, height: `${size}px` });
+    }
   }
   if (isFlagIcon2(icon)) {
     return /* @__PURE__ */ jsx23(Avatar2, { type: AvatarType2.ICON, size, children: /* @__PURE__ */ jsx23(DynamicIcon_default, { name: icon.name }) });
@@ -1726,8 +1692,8 @@ import { SelectInput, SelectInputOptionContent } from "@transferwise/components"
 import { Avatar as Avatar3, AvatarType as AvatarType3 } from "@transferwise/components";
 import { jsx as jsx28 } from "react/jsx-runtime";
 function OptionMedia({ icon, image }) {
-  if (image == null ? void 0 : image.url) {
-    return /* @__PURE__ */ jsx28("img", { src: image.url, alt: image.accessibilityDescription || "", width: "64px" });
+  if (image && !image.uri.startsWith("urn:")) {
+    return /* @__PURE__ */ jsx28("img", { src: image.uri, alt: image.accessibilityDescription || "", width: "64px" });
   }
   if (icon && "name" in icon) {
     return /* @__PURE__ */ jsx28(Avatar3, { type: AvatarType3.ICON, children: /* @__PURE__ */ jsx28(DynamicIcon_default, { name: icon.name }) });
@@ -3321,8 +3287,7 @@ export {
   DynamicFlowRevamp,
   DynamicForm,
   JsonSchemaForm,
-  find,
-  findType,
+  findRendererPropsByType,
   isValidSchema,
   makeHttpClient as makeCustomFetch,
   i18n_default as translations

package/build/types/index.d.ts

@@ -1,7 +1,7 @@
 export { makeHttpClient as makeCustomFetch } from '@wise/dynamic-flow-client';
 export type { DynamicFlowProps, DynamicFormController, Step, InitialAction, } from '@wise/dynamic-flow-client';
 export type { Renderer, Renderers, AlertRendererProps, CheckboxInputRendererProps, BoxRendererProps, ButtonRendererProps, ColumnsRendererProps, DateInputRendererProps, DecisionRendererProps, DividerRendererProps, FormRendererProps, SectionRendererProps, HeadingRendererProps, HiddenRendererProps, ImageRendererProps, InstructionsRendererProps, IntegerInputRendererProps, LoadingIndicatorRendererProps, MarkdownRendererProps, ModalRendererProps, MultiSelectInputRendererProps, MultiUploadInputRendererProps, NumberInputRendererProps, ParagraphRendererProps, RepeatableRendererProps, ReviewRendererProps, SearchRendererProps, SelectInputRendererProps, StatusListRendererProps, StepRendererProps, TextInputRendererProps, UploadInputRendererProps, } from '@wise/dynamic-flow-types/build/renderers';
-export { JsonSchemaForm, isValidSchema, findType, find } from '@wise/dynamic-flow-client';
+export { JsonSchemaForm, isValidSchema, findRendererPropsByType } from '@wise/dynamic-flow-client';
 export { default as translations } from './i18n';
 export type { DynamicFlowLegacyProps, DynamicFlowRevampProps } from './dynamicFlow/DynamicFlow';
 export { DynamicFlowLegacy, DynamicFlowRevamp, DynamicForm } from './dynamicFlow/DynamicFlow';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.0.0-experimental-dde19b5",
+  "version": "4.0.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -83,8 +83,8 @@
     "typescript": "5.7.3",
     "webpack": "5.97.1",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-types": "3.0.0-experimental-dde19b5",
-    "@wise/dynamic-flow-renderers": "0.0.0"
+    "@wise/dynamic-flow-renderers": "0.0.0",
+    "@wise/dynamic-flow-types": "3.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -98,8 +98,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-types": "3.0.0-experimental-dde19b5",
-    "@wise/dynamic-flow-client": "4.0.0-experimental-dde19b5"
+    "@wise/dynamic-flow-types": "3.0.0",
+    "@wise/dynamic-flow-client": "4.0.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",