@wise/dynamic-flow-client-internal 4.8.0 → 4.9.0

package/build/main.js

@@ -1168,7 +1168,11 @@ var getImageNode = (image, size) => {
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var mediaSize = 64;
 var badgeMediaSize = 48;
-function OptionMedia({ icon, image }) {
+function OptionMedia({
+  icon,
+  image,
+  preferAvatar
+}) {
   const imageNode = getImageNode(image, mediaSize);
   const iconNode = getIconNode(icon);
   const badge = getBadgedMedia(iconNode, imageNode, badgeMediaSize);
@@ -1176,7 +1180,7 @@ function OptionMedia({ icon, image }) {
     return badge;
   }
   if (imageNode) {
-    return imageNode;
+    return preferAvatar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components8.AvatarView, { children: imageNode }) : imageNode;
   }
   if (iconNode) {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components8.AvatarView, { children: iconNode });
@@ -1187,7 +1191,7 @@ function OptionMedia({ icon, image }) {
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var DecisionRenderer = {
   canRenderType: "decision",
-  render: ({ margin, options, title }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: getMargin(margin), children: [
+  render: ({ control, margin, options, title }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: getMargin(margin), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components9.Header, { as: "h2", title }),
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components9.NavigationOptionsList, { children: options.map((option) => {
       const { description, disabled, icon, image, title: itemTitle, onClick } = option;
@@ -1197,7 +1201,7 @@ var DecisionRenderer = {
           title: itemTitle,
           content: description,
           disabled,
-          media: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(OptionMedia, { icon, image }),
+          media: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(OptionMedia, { icon, image, preferAvatar: control === "with-avatar" }),
           showMediaCircle: false,
           showMediaAtAllSizes: true,
           onClick
@@ -1676,7 +1680,7 @@ function MultiSelectInputRendererComponent(props) {
     const contentProps = {
       title: option.title,
       description: option.description,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OptionMedia, { icon: option.icon, image: option.image })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OptionMedia, { icon: option.icon, image: option.image, preferAvatar: false })
     };
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_components19.SelectInputOptionContent, __spreadValues({}, contentProps));
   };
@@ -2075,7 +2079,7 @@ function ItemSummaryOption({
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     import_components25.NavigationOption,
     {
-      media: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OptionMedia, __spreadValues({}, item)),
+      media: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OptionMedia, __spreadProps(__spreadValues({}, item), { preferAvatar: false })),
       title: item.title,
       content: item.description,
       showMediaAtAllSizes: true,
@@ -2213,7 +2217,7 @@ function SearchResults({
       {
         title: result.title,
         content: result.description,
-        media: OptionMedia({ icon, image }),
+        media: OptionMedia({ icon, image, preferAvatar: false }),
         showMediaCircle: false,
         showMediaAtAllSizes: true,
         onClick: () => {
@@ -2348,7 +2352,7 @@ function RadioInputRendererComponent(props) {
               value: index,
               secondary: option.description,
               disabled: option.disabled || disabled,
-              avatar: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(OptionMedia, { icon: option.icon, image: option.image })
+              avatar: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(OptionMedia, { icon: option.icon, image: option.image, preferAvatar: false })
             })),
             selectedValue: selectedIndex != null ? selectedIndex : void 0,
             onChange: onSelect
@@ -2456,7 +2460,7 @@ function SelectInputRendererComponent(props) {
     } : {
       title: option.title,
       description: option.description,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OptionMedia, { icon: option.icon, image: option.image })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(OptionMedia, { icon: option.icon, image: option.image, preferAvatar: false })
     };
     return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_components31.SelectInputOptionContent, __spreadValues({}, contentProps));
   };
@@ -3032,9 +3036,9 @@ var import_classnames6 = __toESM(require("classnames"));
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var ListRenderer = {
   canRenderType: "list",
-  render: ({ callToAction, margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: getMargin(margin), children: [
+  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: getMargin(margin), children: [
     (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_components41.Header, { as: "h2", title: title != null ? title : "", action: getListAction(callToAction) }),
-    items.map((props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DesignSystemListItem, __spreadValues({}, props), props.title))
+    items.map((props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DesignSystemListItem, __spreadProps(__spreadValues({}, props), { control }), props.title))
   ] })
 };
 var DesignSystemListItem = ({
@@ -3043,7 +3047,8 @@ var DesignSystemListItem = ({
   value,
   subvalue,
   icon,
-  image
+  image,
+  control
 }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
   "label",
   {
@@ -3052,7 +3057,7 @@ var DesignSystemListItem = ({
       "np-option__container-aligned": true
     }),
     children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "media", children: [
-      icon || image ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "media-left", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ListItemMedia, { image, icon }) }) : null,
+      icon || image ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "media-left", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ListItemMedia, { image, icon, preferAvatar: control === "with-avatar" }) }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "media-body", children: [
         /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "d-flex justify-content-between", children: [
           /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h4", { className: "np-text-body-large-bold text-primary np-option__title", children: title }),
@@ -3067,12 +3072,16 @@ var DesignSystemListItem = ({
   },
   title
 );
-var ListItemMedia = ({ icon, image }) => {
+var ListItemMedia = ({
+  icon,
+  image,
+  preferAvatar
+}) => {
   if (icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "circle circle-sm text-primary circle-inverse", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OptionMedia, { icon, image }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "circle circle-sm text-primary circle-inverse", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OptionMedia, { icon, image, preferAvatar }) });
   }
   if (image) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OptionMedia, { icon, image }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OptionMedia, { icon, image, preferAvatar }) });
   }
 };
 var getListAction = (callToAction) => {
@@ -3192,7 +3201,7 @@ var getWiseRenderers = () => [
 ];
 
 // src/dynamicFlow/telemetry/app-version.ts
-var appVersion = "4.8.0";
+var appVersion = "4.9.0";
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
 var getLogEvent = (onLog) => (level, message, extra) => {

package/build/main.mjs

@@ -1134,7 +1134,11 @@ var getImageNode = (image, size) => {
 import { jsx as jsx16 } from "react/jsx-runtime";
 var mediaSize = 64;
 var badgeMediaSize = 48;
-function OptionMedia({ icon, image }) {
+function OptionMedia({
+  icon,
+  image,
+  preferAvatar
+}) {
   const imageNode = getImageNode(image, mediaSize);
   const iconNode = getIconNode(icon);
   const badge = getBadgedMedia(iconNode, imageNode, badgeMediaSize);
@@ -1142,7 +1146,7 @@ function OptionMedia({ icon, image }) {
     return badge;
   }
   if (imageNode) {
-    return imageNode;
+    return preferAvatar ? /* @__PURE__ */ jsx16(AvatarView2, { children: imageNode }) : imageNode;
   }
   if (iconNode) {
     return /* @__PURE__ */ jsx16(AvatarView2, { children: iconNode });
@@ -1153,7 +1157,7 @@ function OptionMedia({ icon, image }) {
 import { jsx as jsx17, jsxs as jsxs3 } from "react/jsx-runtime";
 var DecisionRenderer = {
   canRenderType: "decision",
-  render: ({ margin, options, title }) => /* @__PURE__ */ jsxs3("div", { className: getMargin(margin), children: [
+  render: ({ control, margin, options, title }) => /* @__PURE__ */ jsxs3("div", { className: getMargin(margin), children: [
     title && /* @__PURE__ */ jsx17(Header, { as: "h2", title }),
     /* @__PURE__ */ jsx17(NavigationOptionsList, { children: options.map((option) => {
       const { description, disabled, icon, image, title: itemTitle, onClick } = option;
@@ -1163,7 +1167,7 @@ var DecisionRenderer = {
           title: itemTitle,
           content: description,
           disabled,
-          media: /* @__PURE__ */ jsx17(OptionMedia, { icon, image }),
+          media: /* @__PURE__ */ jsx17(OptionMedia, { icon, image, preferAvatar: control === "with-avatar" }),
           showMediaCircle: false,
           showMediaAtAllSizes: true,
           onClick
@@ -1646,7 +1650,7 @@ function MultiSelectInputRendererComponent(props) {
     const contentProps = {
       title: option.title,
       description: option.description,
-      icon: /* @__PURE__ */ jsx33(OptionMedia, { icon: option.icon, image: option.image })
+      icon: /* @__PURE__ */ jsx33(OptionMedia, { icon: option.icon, image: option.image, preferAvatar: false })
     };
     return /* @__PURE__ */ jsx33(SelectInputOptionContent, __spreadValues({}, contentProps));
   };
@@ -2045,7 +2049,7 @@ function ItemSummaryOption({
   return /* @__PURE__ */ jsx38(
     NavigationOption2,
     {
-      media: /* @__PURE__ */ jsx38(OptionMedia, __spreadValues({}, item)),
+      media: /* @__PURE__ */ jsx38(OptionMedia, __spreadProps(__spreadValues({}, item), { preferAvatar: false })),
       title: item.title,
       content: item.description,
       showMediaAtAllSizes: true,
@@ -2183,7 +2187,7 @@ function SearchResults({
       {
         title: result.title,
         content: result.description,
-        media: OptionMedia({ icon, image }),
+        media: OptionMedia({ icon, image, preferAvatar: false }),
         showMediaCircle: false,
         showMediaAtAllSizes: true,
         onClick: () => {
@@ -2318,7 +2322,7 @@ function RadioInputRendererComponent(props) {
               value: index,
               secondary: option.description,
               disabled: option.disabled || disabled,
-              avatar: /* @__PURE__ */ jsx43(OptionMedia, { icon: option.icon, image: option.image })
+              avatar: /* @__PURE__ */ jsx43(OptionMedia, { icon: option.icon, image: option.image, preferAvatar: false })
             })),
             selectedValue: selectedIndex != null ? selectedIndex : void 0,
             onChange: onSelect
@@ -2426,7 +2430,7 @@ function SelectInputRendererComponent(props) {
     } : {
       title: option.title,
       description: option.description,
-      icon: /* @__PURE__ */ jsx45(OptionMedia, { icon: option.icon, image: option.image })
+      icon: /* @__PURE__ */ jsx45(OptionMedia, { icon: option.icon, image: option.image, preferAvatar: false })
     };
     return /* @__PURE__ */ jsx45(SelectInputOptionContent2, __spreadValues({}, contentProps));
   };
@@ -3008,9 +3012,9 @@ import classNames6 from "classnames";
 import { jsx as jsx56, jsxs as jsxs21 } from "react/jsx-runtime";
 var ListRenderer = {
   canRenderType: "list",
-  render: ({ callToAction, margin, items, title }) => /* @__PURE__ */ jsxs21("div", { className: getMargin(margin), children: [
+  render: ({ callToAction, control, margin, items, title }) => /* @__PURE__ */ jsxs21("div", { className: getMargin(margin), children: [
     (title || callToAction) && /* @__PURE__ */ jsx56(Header7, { as: "h2", title: title != null ? title : "", action: getListAction(callToAction) }),
-    items.map((props) => /* @__PURE__ */ jsx56(DesignSystemListItem, __spreadValues({}, props), props.title))
+    items.map((props) => /* @__PURE__ */ jsx56(DesignSystemListItem, __spreadProps(__spreadValues({}, props), { control }), props.title))
   ] })
 };
 var DesignSystemListItem = ({
@@ -3019,7 +3023,8 @@ var DesignSystemListItem = ({
   value,
   subvalue,
   icon,
-  image
+  image,
+  control
 }) => /* @__PURE__ */ jsx56(
   "label",
   {
@@ -3028,7 +3033,7 @@ var DesignSystemListItem = ({
       "np-option__container-aligned": true
     }),
     children: /* @__PURE__ */ jsxs21("div", { className: "media", children: [
-      icon || image ? /* @__PURE__ */ jsx56("div", { className: "media-left", children: /* @__PURE__ */ jsx56(ListItemMedia, { image, icon }) }) : null,
+      icon || image ? /* @__PURE__ */ jsx56("div", { className: "media-left", children: /* @__PURE__ */ jsx56(ListItemMedia, { image, icon, preferAvatar: control === "with-avatar" }) }) : null,
       /* @__PURE__ */ jsxs21("div", { className: "media-body", children: [
         /* @__PURE__ */ jsxs21("div", { className: "d-flex justify-content-between", children: [
           /* @__PURE__ */ jsx56("h4", { className: "np-text-body-large-bold text-primary np-option__title", children: title }),
@@ -3043,12 +3048,16 @@ var DesignSystemListItem = ({
   },
   title
 );
-var ListItemMedia = ({ icon, image }) => {
+var ListItemMedia = ({
+  icon,
+  image,
+  preferAvatar
+}) => {
   if (icon) {
-    return /* @__PURE__ */ jsx56("div", { className: "circle circle-sm text-primary circle-inverse", children: /* @__PURE__ */ jsx56(OptionMedia, { icon, image }) });
+    return /* @__PURE__ */ jsx56("div", { className: "circle circle-sm text-primary circle-inverse", children: /* @__PURE__ */ jsx56(OptionMedia, { icon, image, preferAvatar }) });
   }
   if (image) {
-    return /* @__PURE__ */ jsx56("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ jsx56(OptionMedia, { icon, image }) });
+    return /* @__PURE__ */ jsx56("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ jsx56(OptionMedia, { icon, image, preferAvatar }) });
   }
 };
 var getListAction = (callToAction) => {
@@ -3168,7 +3177,7 @@ var getWiseRenderers = () => [
 ];
 
 // src/dynamicFlow/telemetry/app-version.ts
-var appVersion = "4.8.0";
+var appVersion = "4.9.0";
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
 var getLogEvent = (onLog) => (level, message, extra) => {

package/build/types/stories/Initialisation.story.d.ts

@@ -0,0 +1,12 @@
+import { DynamicFlowRevamp } from '../dynamicFlow/DynamicFlow';
+declare const _default: {
+    title: string;
+    component: typeof DynamicFlowRevamp;
+};
+export default _default;
+export declare const InitialisationWithSuccessfulStep: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const InitialisationWith404Step: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -99,7 +99,7 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.3.8",
+    "@wise/dynamic-flow-client": "4.3.9",
     "@wise/dynamic-flow-types": "3.1.3"
   },
   "scripts": {