@wise/dynamic-flow-client 4.11.3 → 4.12.0-experimental-5de9758

package/build/main.js

@@ -1354,24 +1354,24 @@ var alertComponentToProps = (component, rendererMapperProps) => __spreadValues(_
   "markdown"
 )), rendererMapperProps);
 
+// src/revamp/renderers/mappers/utils/mapMediaToLegacyProps.ts
+var mapMediaToLegacyProps = (media) => {
+  const { icon, image } = (media == null ? void 0 : media.type) === "legacy" ? media : {};
+  return {
+    icon,
+    image,
+    media
+  };
+};
+
 // src/revamp/renderers/mappers/allOfComponentToProps.ts
 var allOfComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.components.map(
     (c) => componentToRendererProps(c, rendererMapperProps)
   );
-  return __spreadProps(__spreadValues(__spreadValues({
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
     type: "form-section"
-  }, pick(
-    component,
-    "uid",
-    "analyticsId",
-    "control",
-    "description",
-    "help",
-    "icon",
-    "image",
-    "title"
-  )), rendererMapperProps), {
+  }, pick(component, "uid", "analyticsId", "control", "description", "help", "media", "title")), mapMediaToLegacyProps(component.media)), rendererMapperProps), {
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps
   });
@@ -1399,9 +1399,8 @@ var inputComponentToProps = (component, type) => {
     disabled,
     errors,
     help,
-    icon,
     id,
-    image,
+    media,
     placeholder,
     required,
     title,
@@ -1410,7 +1409,7 @@ var inputComponentToProps = (component, type) => {
     onFocus
   } = component;
   const { messages } = validationAsyncState != null ? validationAsyncState : {};
-  return {
+  return __spreadValues({
     uid,
     analyticsId,
     type,
@@ -1419,9 +1418,7 @@ var inputComponentToProps = (component, type) => {
     disabled,
     error: (_a = messages == null ? void 0 : messages.error) != null ? _a : errors == null ? void 0 : errors[0],
     help,
-    icon,
     id,
-    image,
     placeholder,
     required,
     title,
@@ -1429,7 +1426,7 @@ var inputComponentToProps = (component, type) => {
     value: component.getLocalValue(),
     onBlur: onBlur.bind(component),
     onFocus: onFocus.bind(component)
-  };
+  }, mapMediaToLegacyProps(media));
 };
 var getValidationState = (errors, validationAsyncState) => {
   if (validationAsyncState) {
@@ -1532,15 +1529,17 @@ var dateInputComponentToProps = (component, rendererMapperProps) => __spreadProp
   autoComplete: component.autoComplete,
   minimumDate: component.minimumDate,
   maximumDate: component.maximumDate,
-  suggestions: component.suggestions,
+  suggestions: component.suggestions ? {
+    values: component.suggestions.values.map((suggestion) => __spreadValues(__spreadValues({}, suggestion), mapMediaToLegacyProps(suggestion.media)))
+  } : void 0,
   onChange: component.onChange.bind(component)
 });
 
 // src/revamp/renderers/mappers/decisionComponentToProps.ts
 var decisionComponentToProps = (component, rendererMapperProps) => __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "title")), rendererMapperProps), {
   options: component.options.map((_a) => {
-    var _b = _a, { disabled } = _b, rest = __objRest(_b, ["disabled"]);
-    return __spreadProps(__spreadValues({}, rest), {
+    var _b = _a, { disabled, media } = _b, rest = __objRest(_b, ["disabled", "media"]);
+    return __spreadProps(__spreadValues(__spreadValues({}, rest), mapMediaToLegacyProps(media)), {
       disabled: disabled || rendererMapperProps.stepLoadingState !== "idle"
     });
   })
@@ -1609,12 +1608,12 @@ var listComponentToProps = (component, rendererMapperProps) => __spreadProps(__s
 });
 var mapItem = (item) => {
   var _a, _b;
-  return __spreadProps(__spreadValues({}, item), {
+  return __spreadValues(__spreadProps(__spreadValues({}, item), {
     // populate deprecated fields
     subtitle: item.description,
     value: (_a = item.supportingValues) == null ? void 0 : _a.value,
     subvalue: (_b = item.supportingValues) == null ? void 0 : _b.subvalue
-  });
+  }), mapMediaToLegacyProps(item.media));
 };
 
 // src/revamp/renderers/mappers/loadingIndicatorComponentToProps.ts
@@ -1701,19 +1700,9 @@ var numberInputComponentToProps = (component, rendererMapperProps) => __spreadPr
 // src/revamp/renderers/mappers/objectComponentToProps.ts
 var objectComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
-  return __spreadProps(__spreadValues(__spreadValues({
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
     type: "form-section"
-  }, pick(
-    component,
-    "uid",
-    "analyticsId",
-    "control",
-    "description",
-    "help",
-    "icon",
-    "image",
-    "title"
-  )), rendererMapperProps), {
+  }, pick(component, "uid", "analyticsId", "control", "description", "help", "media", "title")), mapMediaToLegacyProps(component.media)), rendererMapperProps), {
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps
   });
@@ -1745,9 +1734,8 @@ var repeatableComponentToProps = (component, rendererMapperProps) => {
     editableComponent,
     editItemTitle,
     errors,
-    icon,
-    image,
     maxItems,
+    media,
     minItems,
     summaryDefaults,
     title = "",
@@ -1759,18 +1747,23 @@ var repeatableComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
   const editableItemProps = editableComponent ? componentToRendererProps(editableComponent, rendererMapperProps) : null;
   const getSummary = (componentSummary) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
+    const { icon: componentIcon, image: componentImage } = mapMediaToLegacyProps(
+      componentSummary.media
+    );
+    const { icon: defaultIcon, image: defaultImage } = mapMediaToLegacyProps(summaryDefaults.media);
     return {
       title: (_a = componentSummary.title) != null ? _a : summaryDefaults.title,
       description: (_b = componentSummary.description) != null ? _b : summaryDefaults.description,
-      icon: (_c = componentSummary.icon) != null ? _c : summaryDefaults.icon,
-      image: (_d = componentSummary.image) != null ? _d : summaryDefaults.image
+      icon: componentIcon != null ? componentIcon : defaultIcon,
+      image: componentImage != null ? componentImage : defaultImage,
+      media: (_c = componentSummary.media) != null ? _c : summaryDefaults.media
     };
   };
   const itemProps = components.map((childComponent) => __spreadProps(__spreadValues({}, getSummary(childComponent.getSummary())), {
     id: `${childComponent.uid}-summary`
   }));
-  return __spreadValues({
+  return __spreadValues(__spreadValues({
     uid,
     analyticsId,
     type: "repeatable",
@@ -1782,8 +1775,6 @@ var repeatableComponentToProps = (component, rendererMapperProps) => {
     editableItem: rendererMapperProps.render(editableItemProps),
     editableItemProps,
     editItemTitle,
-    icon,
-    image,
     items: itemProps,
     maxItems,
     minItems,
@@ -1793,14 +1784,21 @@ var repeatableComponentToProps = (component, rendererMapperProps) => {
     onEdit: onEdit.bind(component),
     onSave: onSave.bind(component),
     onRemove: onRemove.bind(component)
-  }, rendererMapperProps);
+  }, mapMediaToLegacyProps(media)), rendererMapperProps);
 };
 
 // src/revamp/renderers/mappers/reviewComponentToProps.ts
 var reviewComponentToProps = (component, rendererMapperProps) => __spreadValues(__spreadProps(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "callToAction", "control", "margin", "title")), {
   fields: component.fields.map(mapField)
 }), rendererMapperProps);
-var mapField = (field) => __spreadValues({}, field);
+var mapField = (_a) => {
+  var _b = _a, {
+    media
+  } = _b, rest = __objRest(_b, [
+    "media"
+  ]);
+  return __spreadValues(__spreadValues({}, rest), mapMediaToLegacyProps(media));
+};
 
 // src/revamp/renderers/mappers/rootComponentToProps.ts
 var rootComponentToProps = (rootComponent, rendererMapperProps) => {
@@ -1822,6 +1820,21 @@ var mapSpecImage = (image) => {
   } : void 0;
 };
 
+// src/revamp/domain/mappers/utils/media-utils.ts
+var getDomainLayerMedia = ({ icon, image, media }) => {
+  if (media) {
+    return media;
+  }
+  if (icon || image) {
+    return {
+      type: "legacy",
+      icon,
+      image: mapSpecImage(image)
+    };
+  }
+  return void 0;
+};
+
 // src/revamp/renderers/mappers/searchComponentToProps.ts
 var searchComponentToProps = (component, rendererMapperProps) => {
   const { uid, control, emptyMessage, error, isLoading, margin, query, results, title } = component;
@@ -1872,6 +1885,7 @@ var getSearchState = ({
     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)
     });
   });
@@ -1931,26 +1945,18 @@ var textInputComponentToProps = (component, rendererMapperProps) => __spreadProp
   displayFormat: component.displayFormat,
   maxLength: component.maxLength,
   minLength: component.minLength,
-  suggestions: component.suggestions,
+  suggestions: component.suggestions ? {
+    values: component.suggestions.values.map((suggestion) => __spreadValues(__spreadValues({}, suggestion), mapMediaToLegacyProps(suggestion.media)))
+  } : void 0,
   onChange: component.onChange.bind(component)
 });
 
 // src/revamp/renderers/mappers/tupleComponentToProps.ts
 var tupleComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
-  return __spreadProps(__spreadValues(__spreadValues({
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
     type: "form-section"
-  }, pick(
-    component,
-    "uid",
-    "analyticsId",
-    "control",
-    "description",
-    "help",
-    "icon",
-    "image",
-    "title"
-  )), rendererMapperProps), {
+  }, pick(component, "uid", "analyticsId", "control", "description", "help", "media", "title")), mapMediaToLegacyProps(component.media)), rendererMapperProps), {
     children: childrenProps.map(rendererMapperProps.render),
     childrenProps
   });
@@ -2498,9 +2504,9 @@ var mapAdditionalInfo = (info, onBehavior) => {
     return {
       text: info.text,
       accessibilityDescription: info.accessibilityDescription,
-      onClick: () => {
+      onClick: behavior.type !== "none" ? () => {
         void onBehavior(behavior);
-      }
+      } : void 0
     };
   }
   return void 0;
@@ -2533,7 +2539,7 @@ var mapOption = (option, onBehavior, stepActions = []) => {
   return __spreadProps(__spreadValues({}, option), {
     disabled: (_a = option.disabled) != null ? _a : false,
     href: behavior.type === "link" ? behavior.url : void 0,
-    image: mapSpecImage(option.image),
+    media: getDomainLayerMedia(option),
     inlineAlert: mapInlineAlert(option.inlineAlert),
     onClick: () => {
       void onBehavior(behavior);
@@ -2549,11 +2555,7 @@ var createStatusListComponent = (statusListProps) => __spreadValues({
 
 // src/revamp/domain/mappers/layout/deprecatedListLayoutToComponent.ts
 var isDeprecatedListLayout = (layout) => {
-  const usesCallToAction = layout.callToAction != null;
-  const usesNewProperties = layout.items.some(
-    (item) => item.additionalInfo != null || item.inlineAlert != null || item.supportingValues != null || item.subtitle != null || item.value != null || item.subvalue != null
-  );
-  return !usesCallToAction && !usesNewProperties;
+  return layout.items.some((item) => item.status);
 };
 var deprecatedListLayoutToComponent = (uid, { analyticsId, control, items, margin = "md", title }) => createStatusListComponent({
   uid,
@@ -2727,10 +2729,10 @@ var listLayoutToComponent = (uid, { analyticsId, callToAction, control, items, m
 };
 var mapItem2 = (item, mapperProps) => {
   var _b;
-  const _a = item, { value, subvalue, subtitle } = _a, rest = __objRest(_a, ["value", "subvalue", "subtitle"]);
+  const _a = item, { value, subvalue, subtitle, icon, image, media } = _a, rest = __objRest(_a, ["value", "subvalue", "subtitle", "icon", "image", "media"]);
   return __spreadProps(__spreadValues({}, rest), {
     description: (_b = item.description) != null ? _b : subtitle,
-    image: mapSpecImage(item.image),
+    media: getDomainLayerMedia({ icon, image, media }),
     supportingValues: mapSupportingValues(item),
     additionalInfo: mapAdditionalInfo(item.additionalInfo, mapperProps.onBehavior),
     inlineAlert: mapInlineAlert(item.inlineAlert)
@@ -2867,7 +2869,7 @@ var getOrientationControl = ({
 var mapReviewField = (field, { onBehavior, step }) => {
   var _a, _b;
   return __spreadProps(__spreadValues({}, field), {
-    image: mapSpecImage(field.image),
+    media: getDomainLayerMedia(field),
     help: (_a = field.help) == null ? void 0 : _a.markdown,
     inlineAlert: mapInlineAlert(field.inlineAlert),
     additionalInfo: mapAdditionalInfo(field.additionalInfo, onBehavior),
@@ -3971,32 +3973,42 @@ var getSummariser = (schema) => (value) => {
   return summaryIfProvides(summary, { value: stringValueOrNull, icon, image });
 };
 var getConstSummary = (schema, model) => {
-  const { summary, icon, image } = schema;
+  const { summary, icon, image, media } = schema;
   const value = isString(model) ? model : null;
-  return summaryIfProvides(summary, { value, icon, image });
+  return summaryIfProvides(summary, { value, icon, image, media });
 };
 var summariseFromChildren = (components) => components.reduce(
   (acc, component) => mergeSummaries(acc, component.getSummary()),
   {}
 );
 var mergeSummaries = (summaryA, summaryB) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   return {
     title: (_a = summaryA.title) != null ? _a : summaryB.title,
     description: (_b = summaryA.description) != null ? _b : summaryB.description,
-    icon: (_c = summaryA.icon) != null ? _c : summaryB.icon,
-    image: (_d = summaryA.image) != null ? _d : summaryB.image
+    media: (_c = summaryA.media) != null ? _c : summaryB.media
   };
 };
-var summaryIfProvides = (summary, { value, icon, image }) => {
+var summaryIfProvides = (summary, {
+  value = null,
+  icon,
+  image,
+  media
+}) => {
+  var _a;
   if (!summary) {
     return {};
   }
+  const providesMedia = (_a = summary.providesMedia) != null ? _a : Boolean(summary.providesIcon) || Boolean(summary.providesImage);
+  const providedMedia = getDomainLayerMedia({
+    icon: summary.providesIcon ? icon : void 0,
+    image: summary.providesImage ? image : void 0,
+    media
+  });
   return {
     title: summary.providesTitle && value || void 0,
     description: summary.providesDescription && value || void 0,
-    icon: summary.providesIcon && icon || void 0,
-    image: summary.providesImage && mapSpecImage(image != null ? image : void 0) || void 0
+    media: providesMedia ? providedMedia : void 0
   };
 };
 
@@ -4004,7 +4016,7 @@ var summaryIfProvides = (summary, { value, icon, image }) => {
 var mapCommonSchemaProps = (schemaMapperProps) => {
   var _a;
   const { uid, schemaId, schema, required, validationErrors, onPersistAsync } = schemaMapperProps;
-  const { $id, analyticsId, control, description, icon, image, keywords, title, hidden } = schema;
+  const { $id, analyticsId, control, description, icon, image, keywords, media, title, hidden } = schema;
   return __spreadValues(__spreadValues(__spreadValues({
     uid,
     id: $id != null ? $id : uid,
@@ -4015,9 +4027,8 @@ var mapCommonSchemaProps = (schemaMapperProps) => {
     disabled: schemaHasDisabled(schema) ? schema.disabled : false,
     errors: isString(validationErrors) ? [validationErrors] : void 0,
     hidden: Boolean(hidden),
-    icon,
-    image: mapSpecImage(image),
     keywords,
+    media: getDomainLayerMedia({ icon, image, media }),
     required: Boolean(required),
     title,
     onPersistAsync,
@@ -4073,8 +4084,7 @@ var createAllOfComponent = (allOfProps) => {
     description,
     help,
     hidden,
-    icon,
-    image,
+    media,
     title
   } = allOfProps;
   return {
@@ -4089,8 +4099,7 @@ var createAllOfComponent = (allOfProps) => {
     description,
     help,
     hidden,
-    icon,
-    image,
+    media,
     title,
     getChildren() {
       return this.components;
@@ -4172,8 +4181,7 @@ var createRepeatableComponent = (repeatableProps, updateComponent) => {
     summaryDefaults: {
       title: summary == null ? void 0 : summary.defaultTitle,
       description: summary == null ? void 0 : summary.defaultDescription,
-      icon: summary == null ? void 0 : summary.defaultIcon,
-      image: summary == null ? void 0 : summary.defaultImage
+      media: summary == null ? void 0 : summary.defaultMedia
     }
   }, componentProps), {
     _update(updateFn) {
@@ -4308,7 +4316,11 @@ var arraySchemaToRepeatableComponent = (schemaMapperProps, mapperProps) => {
       maxItems,
       minItems,
       summary: __spreadProps(__spreadValues({}, summary), {
-        defaultImage: mapSpecImage(summary == null ? void 0 : summary.defaultImage)
+        defaultMedia: getDomainLayerMedia({
+          icon: summary == null ? void 0 : summary.defaultIcon,
+          image: summary == null ? void 0 : summary.defaultImage,
+          media: summary == null ? void 0 : summary.defaultMedia
+        })
       }),
       createEditableComponent,
       onValueChange
@@ -4755,12 +4767,11 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
   } = schemaMapperProps;
   const initialModel = model != null ? model : null;
   const options = schema.items.oneOf.map((childSchema, index) => {
-    const { title: title2 = "", description, image, icon, keywords = [] } = childSchema;
+    const { title: title2 = "", description, image, icon, media, keywords = [] } = childSchema;
     return {
       title: title2,
       description,
-      image: mapSpecImage(image),
-      icon,
+      media: getDomainLayerMedia({ icon, image, media }),
       keywords,
       disabled: "disabled" in childSchema ? Boolean(childSchema.disabled) : false,
       component: mapSchemaToComponent(
@@ -4819,8 +4830,7 @@ var createTupleComponent = (tupleProps) => {
     description,
     help,
     hidden,
-    icon,
-    image,
+    media,
     summariser,
     title
   } = tupleProps;
@@ -4836,8 +4846,7 @@ var createTupleComponent = (tupleProps) => {
     description,
     help,
     hidden,
-    icon,
-    image,
+    media,
     title,
     getChildren() {
       return this.components;
@@ -5304,8 +5313,7 @@ var createObjectComponent = (objectProps) => {
     displayOrder,
     help,
     hidden,
-    icon,
-    image,
+    media,
     summariser,
     title
   } = objectProps;
@@ -5321,8 +5329,7 @@ var createObjectComponent = (objectProps) => {
     description,
     help,
     hidden,
-    icon,
-    image,
+    media,
     title,
     getChildren() {
       return displayOrder.map((propName) => this.componentMap[propName]);
@@ -5543,12 +5550,11 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
     );
   }
   const options = schema.oneOf.map((childSchema, index) => {
-    const { title = "", description, image, icon, keywords = [] } = childSchema;
+    const { title = "", description, image, icon, media, keywords = [] } = childSchema;
     return {
       title,
       description,
-      image: mapSpecImage(image),
-      icon,
+      media: getDomainLayerMedia({ icon, image, media }),
       keywords,
       disabled: "disabled" in childSchema ? Boolean(childSchema.disabled) : false,
       component: mapSchemaToComponent(
@@ -5701,9 +5707,12 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
       minimumDate,
       maximumDate,
       suggestions: suggestions ? {
-        values: suggestions.values.map((suggestion) => __spreadProps(__spreadValues({}, suggestion), {
-          image: mapSpecImage(suggestion.image)
-        }))
+        values: suggestions.values.map((_a) => {
+          var _b = _a, { icon, image, media } = _b, rest = __objRest(_b, ["icon", "image", "media"]);
+          return __spreadProps(__spreadValues({}, rest), {
+            media: getDomainLayerMedia({ icon, image, media })
+          });
+        })
       } : void 0,
       value,
       validationAsyncState,
@@ -5875,9 +5884,12 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
       maxLength,
       minLength,
       suggestions: suggestions ? {
-        values: suggestions.values.map((suggestion) => __spreadProps(__spreadValues({}, suggestion), {
-          image: mapSpecImage(suggestion.image)
-        }))
+        values: suggestions.values.map((_a) => {
+          var _b = _a, { icon, image, media } = _b, rest = __objRest(_b, ["icon", "image", "media"]);
+          return __spreadProps(__spreadValues({}, rest), {
+            media: getDomainLayerMedia({ icon, image, media })
+          });
+        })
       } : void 0,
       value,
       validationAsyncState,