@wise/dynamic-flow-client 3.31.1 → 3.32.0

package/build/main.mjs

@@ -1611,7 +1611,14 @@ var hiddenComponentToProps = () => ({
 });
 
 // src/revamp/renderers/mappers/imageComponentToProps.ts
-var imageComponentToProps = (component) => pick(component, "type", "accessibilityDescription", "control", "margin", "size", "url");
+var imageComponentToProps = (component) => {
+  var _a;
+  return __spreadProps(__spreadValues({}, pick(component, "type", "control", "margin", "size")), {
+    accessibilityDescription: component.content.accessibilityDescription,
+    url: (_a = component.content.url) != null ? _a : "",
+    uri: component.content.uri
+  });
+};
 
 // src/revamp/renderers/mappers/instructionsComponentToProps.ts
 var instructionsComponentToProps = (component) => pick(component, "type", "control", "items", "margin", "title");
@@ -6931,12 +6938,12 @@ var getStepPolling = ({
     }).catch(() => {
     });
   };
-  poll();
   const intervalRef = setInterval(poll, delay * 1e3);
   const stop = () => {
     clearTimeout(intervalRef);
     abortController.abort();
   };
+  poll();
   return { stop };
 };
 
@@ -10107,13 +10114,12 @@ var createImageComponent = (imageProps) => __spreadProps(__spreadValues({
 });
 
 // src/revamp/domain/mappers/layout/imageLayoutToComponent.ts
-var imageLayoutToComponent = (uid, { accessibilityDescription, control, margin = "md", size: size2 = "md", text, url }) => createImageComponent({
+var imageLayoutToComponent = (uid, { accessibilityDescription, content, control, margin = "md", size: size2 = "md", text, url }) => createImageComponent({
   uid,
-  accessibilityDescription: accessibilityDescription != null ? accessibilityDescription : text,
+  content: content != null ? content : { accessibilityDescription: accessibilityDescription != null ? accessibilityDescription : text, url },
   control,
   margin,
-  size: size2,
-  url
+  size: size2
 });
 
 // src/revamp/domain/components/MarkdownComponent.ts
@@ -12114,12 +12120,20 @@ function ImageRendererComponent({
   accessibilityDescription,
   margin,
   size: size2,
-  url
+  url,
+  uri
 }) {
   const [imageSource, setImageSource] = useState3("");
   const httpClient = useRendererHttpClient();
   useEffect3(() => {
-    void getImageSource(httpClient, url).then(setImageSource);
+    if (!uri) {
+      void getImageSource(httpClient, url).then(setImageSource);
+      return;
+    }
+    if (!uri.startsWith("urn:")) {
+      void getImageSource(httpClient, uri).then(setImageSource);
+      return;
+    }
   }, [url, httpClient]);
   return /* @__PURE__ */ jsx27("div", { className: `df-image ${size2 || "md"}`, children: /* @__PURE__ */ jsx27(
     Image,

package/build/types/revamp/domain/components/ImageComponent.d.ts

@@ -2,8 +2,14 @@ import type { Size } from '@wise/dynamic-flow-types/build/next';
 import type { LayoutComponent } from '../types';
 export type ImageComponent = LayoutComponent & {
     type: 'image';
-    accessibilityDescription?: string;
+    content: ImageContent;
     size: Size;
-    url: string;
 };
-export declare const createImageComponent: (imageProps: Pick<ImageComponent, "uid" | "accessibilityDescription" | "control" | "margin" | "size" | "url">) => ImageComponent;
+type ImageContent = {
+    accessibilityDescription?: string;
+    text?: string;
+    url?: string;
+    uri?: string;
+};
+export declare const createImageComponent: (imageProps: Pick<ImageComponent, "uid" | "content" | "control" | "margin" | "size">) => ImageComponent;
+export {};

package/build/types/revamp/domain/mappers/layout/imageLayoutToComponent.d.ts

@@ -1,2 +1,11 @@
 import type { ImageLayout } from '@wise/dynamic-flow-types/build/next';
-export declare const imageLayoutToComponent: (uid: string, { accessibilityDescription, control, margin, size, text, url }: ImageLayout) => import("../../components/ImageComponent").ImageComponent;
+type ImageContent = {
+    accessibilityDescription?: string;
+    text?: string;
+    url?: string;
+    uri?: string;
+};
+export declare const imageLayoutToComponent: (uid: string, { accessibilityDescription, content, control, margin, size, text, url }: ImageLayout & {
+    content?: ImageContent;
+}) => import("../../components/ImageComponent").ImageComponent;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.31.1",
+  "version": "3.32.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -30,34 +30,34 @@
     "url": "git+https://github.com/transferwise/dynamic-flow.git"
   },
   "devDependencies": {
-    "@babel/core": "7.26.0",
+    "@babel/core": "7.26.7",
     "@babel/plugin-syntax-flow": "7.26.0",
     "@babel/plugin-transform-react-jsx": "7.25.9",
-    "@babel/preset-env": "7.26.0",
+    "@babel/preset-env": "7.26.7",
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
-    "@chromatic-com/storybook": "3.2.3",
-    "@formatjs/cli": "^6.3.15",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
+    "@chromatic-com/storybook": "3.2.4",
+    "@formatjs/cli": "^6.5.1",
+    "@storybook/addon-a11y": "^8.5.1",
+    "@storybook/addon-actions": "^8.5.1",
+    "@storybook/addon-essentials": "^8.5.1",
+    "@storybook/addon-interactions": "^8.5.1",
+    "@storybook/addon-links": "^8.5.1",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/manager-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-webpack5": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/types": "^8.4.7",
+    "@storybook/manager-api": "^8.5.1",
+    "@storybook/react": "^8.5.1",
+    "@storybook/react-webpack5": "^8.5.1",
+    "@storybook/test": "^8.5.1",
+    "@storybook/types": "^8.5.1",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
-    "@transferwise/components": "46.86.1",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.1",
+    "@transferwise/components": "46.87.0",
     "@transferwise/formatting": "^2.13.0",
     "@transferwise/icons": "3.18.0",
     "@transferwise/neptune-css": "14.20.1",
-    "@types/node": "22.10.6",
+    "@types/node": "22.10.10",
     "@types/jest": "29.5.14",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
@@ -65,7 +65,7 @@
     "@wise/art": "2.19.0",
     "@wise/components-theming": "^1.6.1",
     "babel-jest": "29.7.0",
-    "esbuild": "0.24.0",
+    "esbuild": "0.24.2",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
@@ -73,20 +73,20 @@
     "npm-run-all2": "7.0.2",
     "postcss": "^8.5.1",
     "postcss-cli": "^11.0.0",
-    "postcss-import": "^15.1.0",
+    "postcss-import": "^16.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^8.4.7",
-    "stylelint": "16.13.1",
+    "storybook": "^8.5.1",
+    "stylelint": "16.14.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.2",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.19.2",
     "typescript": "5.7.3",
     "webpack": "5.97.1",
-    "@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.31",
@@ -102,7 +102,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "2.30.0"
+    "@wise/dynamic-flow-types": "2.31.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",