@wise/dynamic-flow-client 5.2.0 → 5.3.0

package/build/main.css

@@ -14,7 +14,11 @@
 .df-box-renderer-width-lg {
   width: 100%;
 }
-@media screen and (width >= 768px) {
+@media screen and (width >=768px) {
+  .df-box-renderer-border {
+    padding: var(--size-24);
+  }
+
   .df-box-renderer-width-xs {
     width: 33.33%;
   }
@@ -31,7 +35,7 @@
     width: 83.33%;
   }
 }
-@media screen and (width >= 990px) {
+@media screen and (width >=990px) {
   .df-box-renderer-width-xs {
     width: 25%;
   }
@@ -176,6 +180,10 @@
 .tw-modal-body--scrollable .df-step-fixed__footer {
   bottom: -24px;
 }
+.df-modal .df-back-button {
+  position: fixed;
+  top: 24px;
+}
 .chips-container {
   overflow-x: auto;
 }

package/build/main.js

@@ -57,10 +57,10 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var index_exports = {};
 __export(index_exports, {
   DynamicFlow: () => DynamicFlowCore,
-  DynamicForm: () => DynamicFormCore,
   findRendererPropsByType: () => findRendererPropsByType,
   makeHttpClient: () => makeHttpClient,
-  translations: () => i18n_default
+  translations: () => i18n_default,
+  useDynamicFlow: () => useDynamicFlow
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -778,7 +778,83 @@ var translations = {
 };
 var i18n_default = translations;
 
-// src/DynamicFlowCore.tsx
+// src/utils/type-validators.ts
+var isString = (value) => typeof value === "string";
+var isNumber = (value) => typeof value === "number" && !Number.isNaN(value);
+var isInteger = (value) => isNumber(value) && Math.floor(value) === value;
+var isBoolean = (value) => typeof value === "boolean";
+var isObject = (value) => !isNullish(value) && (value == null ? void 0 : value.constructor) === Object;
+var isArray = (value) => Array.isArray(value);
+var isNull = (value) => value === null;
+var isUndefined = (value) => typeof value === "undefined";
+var isNullish = (v) => isNull(v) || isUndefined(v);
+var isFile = (value) => value instanceof File;
+var isValidDate = (value) => isString(value) && /^\d{4}-\d{2}-\d{2}$/.test(value);
+
+// src/renderers/utils.ts
+function findRendererPropsByType(root, type, predicate = () => true) {
+  if (isArray(root)) {
+    return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
+  }
+  return [
+    ...isType(root, type) && predicate(root) ? [root] : [],
+    ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate))
+  ];
+}
+var isType = (node, type) => node.type === type;
+var getChildren = (node) => {
+  switch (node.type) {
+    case "root":
+    case "box":
+    case "container":
+    case "form":
+    case "form-section":
+    case "step":
+    case "modal":
+    case "section":
+      return node.childrenProps;
+    case "columns":
+      return [...node.startChildrenProps, ...node.endChildrenProps];
+    case "modal-layout":
+      return node.content.childrenProps;
+    case "repeatable":
+      return node.editableItemProps ? [node.editableItemProps] : [];
+    case "input-select":
+      return node.childrenProps ? [node.childrenProps] : [];
+    case "tabs":
+      return node.tabs.flatMap((c) => c.childrenProps);
+    case "alert":
+    case "button":
+    case "input-checkbox":
+    case "input-date":
+    case "decision":
+    case "divider":
+    case "formatted-value":
+    case "heading":
+    case "hidden":
+    case "image":
+    case "instructions":
+    case "input-integer":
+    case "list":
+    case "loading-indicator":
+    case "markdown":
+    case "input-multi-select":
+    case "input-upload-multi":
+    case "input-number":
+    case "money-input":
+    case "paragraph":
+    case "progress":
+    case "review":
+    case "search":
+    case "status-list":
+    case "input-text":
+    case "input-upload":
+    case "external-confirmation":
+      return [];
+  }
+};
+
+// src/useDynamicFlow.tsx
 var import_react4 = require("react");
 
 // src/common/errorBoundary/ErrorBoundary.tsx
@@ -882,81 +958,6 @@ var CoreContainerRenderer = {
   render: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children })
 };
 
-// src/utils/type-validators.ts
-var isString = (value) => typeof value === "string";
-var isNumber = (value) => typeof value === "number" && !Number.isNaN(value);
-var isInteger = (value) => isNumber(value) && Math.floor(value) === value;
-var isBoolean = (value) => typeof value === "boolean";
-var isObject = (value) => !isNullish(value) && (value == null ? void 0 : value.constructor) === Object;
-var isArray = (value) => Array.isArray(value);
-var isNull = (value) => value === null;
-var isUndefined = (value) => typeof value === "undefined";
-var isNullish = (v) => isNull(v) || isUndefined(v);
-var isFile = (value) => value instanceof File;
-var isValidDate = (value) => isString(value) && /^\d{4}-\d{2}-\d{2}$/.test(value);
-
-// src/renderers/utils.ts
-function findRendererPropsByType(root, type, predicate = () => true) {
-  if (isArray(root)) {
-    return root.flatMap((child) => findRendererPropsByType(child, type, predicate));
-  }
-  return [
-    ...isType(root, type) && predicate(root) ? [root] : [],
-    ...getChildren(root).flatMap((child) => findRendererPropsByType(child, type, predicate))
-  ];
-}
-var isType = (node, type) => node.type === type;
-var getChildren = (node) => {
-  switch (node.type) {
-    case "root":
-    case "box":
-    case "container":
-    case "form":
-    case "form-section":
-    case "step":
-    case "modal":
-    case "section":
-      return node.childrenProps;
-    case "columns":
-      return [...node.startChildrenProps, ...node.endChildrenProps];
-    case "modal-layout":
-      return node.content.childrenProps;
-    case "repeatable":
-      return node.editableItemProps ? [node.editableItemProps] : [];
-    case "input-select":
-      return node.childrenProps ? [node.childrenProps] : [];
-    case "tabs":
-      return node.tabs.flatMap((c) => c.childrenProps);
-    case "alert":
-    case "button":
-    case "input-checkbox":
-    case "input-date":
-    case "decision":
-    case "divider":
-    case "heading":
-    case "hidden":
-    case "image":
-    case "instructions":
-    case "input-integer":
-    case "list":
-    case "loading-indicator":
-    case "markdown":
-    case "input-multi-select":
-    case "input-upload-multi":
-    case "input-number":
-    case "money-input":
-    case "paragraph":
-    case "progress":
-    case "review":
-    case "search":
-    case "status-list":
-    case "input-text":
-    case "input-upload":
-    case "external-confirmation":
-      return [];
-  }
-};
-
 // src/renderers/CoreRootRenderer.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CoreRootRenderer = {
@@ -1276,6 +1277,29 @@ var externalComponentToProps = (component, rendererMapperProps) => {
   }, rendererMapperProps);
 };
 
+// src/renderers/mappers/formattedValueComponentToProps.ts
+var formattedValueComponentToProps = (component, rendererMapperProps) => {
+  return __spreadValues(__spreadProps(__spreadValues({
+    type: "formatted-value"
+  }, pick(
+    component,
+    "format",
+    "uid",
+    "analyticsId",
+    "control",
+    "description",
+    "help",
+    "media",
+    "tags",
+    "title"
+    // for now, we don't want to pass `value` down to the renderer to avoid the "WhateverComponent".
+    // 'value',
+  )), {
+    validationState: getValidationState(component.errors, void 0),
+    onChange: component.onChange.bind(component)
+  }), rendererMapperProps);
+};
+
 // src/renderers/mappers/formComponentToProps.ts
 var formComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
@@ -1931,6 +1955,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return dividerComponentToProps(component, rendererMapperProps);
     case "external-confirmation":
       return externalComponentToProps(component, rendererMapperProps);
+    case "formatted-value":
+      return formattedValueComponentToProps(component, rendererMapperProps);
     case "form":
       return formComponentToProps(component, rendererMapperProps);
     case "heading":
@@ -2003,7 +2029,7 @@ var getComponentAlertProps = (component, rendererMapperProps) => "alert" in comp
   markdown: component.alert.content
 }, rendererMapperProps) : null;
 
-// src/useDynamicFlowCore.tsx
+// src/useDynamicFlowController.tsx
 var import_react3 = require("react");
 var import_react_intl7 = require("react-intl");
 
@@ -2024,8 +2050,7 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
     uid: "root",
     stepComponent: null,
     stepStack: [],
-    isNativeBackEnabled: backConfig.isNativeBackEnabled,
-    isFlowCancellable: backConfig.isFlowCancellable,
+    backConfig,
     _update(updateFn) {
       update(this, updateFn);
     },
@@ -2159,7 +2184,7 @@ var createRootDomainComponent = (updateComponent, scrollToTop, backConfig) => {
       var _a, _b;
       const navigation = (_a = this.getStep()) == null ? void 0 : _a.step.navigation;
       const stepHasBehavior = Boolean((_b = navigation == null ? void 0 : navigation.back) != null ? _b : navigation == null ? void 0 : navigation.backButton);
-      return this.isFlowCancellable || this.stepStack.length > 1 && this.isNativeBackEnabled || stepHasBehavior;
+      return this.backConfig.isFlowCancellable || this.stepStack.length > 1 && this.backConfig.isNativeBackEnabled || stepHasBehavior;
     }
   };
   return rootComponent;
@@ -5600,6 +5625,83 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
   );
 };
 
+// src/domain/components/FormattedValueComponent.ts
+var createFormattedValueComponent = (props, updateComponent) => {
+  const {
+    uid,
+    schemaId,
+    analyticsId,
+    alert,
+    control,
+    description,
+    errors,
+    format,
+    help,
+    hidden,
+    media,
+    summariser,
+    title,
+    tags,
+    value,
+    schemaOnChange
+  } = props;
+  const update = getInputUpdateFunction(updateComponent);
+  return {
+    type: "formatted-value",
+    kind: "input",
+    uid,
+    schemaId,
+    analyticsId,
+    alert,
+    control,
+    description,
+    errors,
+    format,
+    help,
+    hidden,
+    media,
+    title,
+    tags,
+    value,
+    async getSubmittableValue() {
+      return this.getSubmittableValueSync();
+    },
+    getSubmittableValueSync() {
+      return this.getLocalValue();
+    },
+    getSummary() {
+      return summariser(this.getLocalValue());
+    },
+    getLocalValue() {
+      return this.value;
+    },
+    validate() {
+      return true;
+    },
+    onChange(newValue) {
+      update(this, (draft) => {
+        draft.value = newValue;
+      });
+      void (schemaOnChange == null ? void 0 : schemaOnChange());
+    }
+  };
+};
+
+// src/domain/mappers/schema/objectSchemaToComponent/objectSchemaToFormattedValueComponent.ts
+var objectSchemaToFormattedValueComponent = (schemaMapperProps, mapperProps) => {
+  const { onBehavior } = mapperProps;
+  const { schema } = schemaMapperProps;
+  const { format } = schema;
+  return createFormattedValueComponent(
+    __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
+      format,
+      value: schemaMapperProps.model,
+      schemaOnChange: getSchemaOnChange(schema, onBehavior)
+    }),
+    mapperProps.updateComponent
+  );
+};
+
 // src/domain/components/MoneyInputComponent.ts
 var createMoneyInputComponent = (moneyInputProps, updateComponent) => {
   const _a = moneyInputProps, {
@@ -6622,9 +6724,16 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
     return booleanSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
   if (isObjectSchema(schema)) {
-    if (schema.format === "money") {
+    const { format } = schema;
+    if (format === "money") {
       return objectSchemaToMoneyInputComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
     }
+    if (format != null && Object.keys(schema.properties).length === 0) {
+      return objectSchemaToFormattedValueComponent(
+        __spreadProps(__spreadValues({}, schemaMapperProps), { schema: __spreadProps(__spreadValues({}, schema), { format }) }),
+        mapperProps
+      );
+    }
     return objectSchemaToObjectComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
   if (isIntegerSchema(schema)) {
@@ -7358,8 +7467,8 @@ function useStableCallback(handler) {
   return (0, import_react2.useCallback)((...args) => ref.current ? ref.current(...args) : null, []);
 }
 
-// src/useDynamicFlowCore.tsx
-function useDynamicFlowCore(props) {
+// src/useDynamicFlowController.tsx
+function useDynamicFlowController(props) {
   const _a = props, { flowId, initialAction, initialStep, features } = _a, rest = __objRest(_a, ["flowId", "initialAction", "initialStep", "features"]);
   const httpClient = useStableCallback(rest.httpClient);
   const onCancellation = useStableCallback(rest.onCancellation);
@@ -7758,20 +7867,20 @@ function useDynamicFlowCore(props) {
     trackCoreEvent("Step Shown", { isFirstStep: true });
     hasMappedInitialStep.current = true;
   }
-  return { rootComponent: rootComponentRef.current };
+  return {
+    rootComponent: rootComponentRef.current,
+    cancel: closeWithCancellation
+  };
 }
 var useRerender = () => {
   const [, setState] = (0, import_react3.useState)({});
   return (0, import_react3.useCallback)(() => setState({}), []);
 };
 
-// src/utils/normalise-flow-id.ts
-var normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, "-");
-
-// src/utils/scrollToTop.ts
-var getScrollToTop = (normalisedFlowId, className3) => (behavior) => {
+// src/utils/getScrollToTop.ts
+var getScrollToTop = (normalisedFlowId, className2) => (behavior) => {
   var _a;
-  const element = document.querySelector(`div#${normalisedFlowId}.${className3}`);
+  const element = document.querySelector(`div#${normalisedFlowId}.${className2}`);
   if (!element || !window) {
     return;
   }
@@ -7782,10 +7891,13 @@ var getScrollToTop = (normalisedFlowId, className3) => (behavior) => {
   }
 };
 
-// src/DynamicFlowCore.tsx
+// src/utils/normalise-flow-id.ts
+var normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, "-");
+
+// src/useDynamicFlow.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var className = "dynamic-flow";
-function DynamicFlowCore(props) {
+function useDynamicFlow(props) {
   var _a;
   const { flowId, renderers, httpClient, onEvent, onError, onLog } = props;
   const normalisedFlowId = normaliseFlowId(flowId);
@@ -7797,7 +7909,10 @@ function DynamicFlowCore(props) {
     var _a2;
     return new FeatureFlags((_a2 = props.features) != null ? _a2 : {});
   }, []);
-  const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({}, props), { features, scrollToTop }));
+  const { rootComponent, cancel } = useDynamicFlowController(__spreadProps(__spreadValues({}, props), {
+    features,
+    scrollToTop
+  }));
   const render = (0, import_react4.useMemo)(
     () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
     [renderers]
@@ -7810,95 +7925,30 @@ function DynamicFlowCore(props) {
     }),
     stepLoadingState: rootComponent.getLoadingState()
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    ErrorBoundary_default,
-    {
-      onError: (error) => {
-        onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
-        onError == null ? void 0 : onError(error);
-        onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", { errorMessage: getErrorMessage(error) });
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
-    }
-  );
+  return {
+    controller: {
+      getSubmittableValue: async () => rootComponent.getSubmittableValue(),
+      validate: () => rootComponent.validate(),
+      cancel
+    },
+    view: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ErrorBoundary_default,
+      {
+        onError: (error) => {
+          onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed", { error });
+          onError == null ? void 0 : onError(error);
+          onLog == null ? void 0 : onLog("error", "Dynamic Flow - ErrorBoundary", {
+            errorMessage: getErrorMessage(error)
+          });
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: normalisedFlowId, className, children: render(tree) })
+      }
+    )
+  };
 }
 
-// src/DynamicFormCore.tsx
-var import_react5 = require("react");
-
-// src/utils/openLinkInNewTab.tsx
-var openLinkInNewTab = (url) => {
-  var _a;
-  try {
-    const w = (_a = window == null ? void 0 : window.open) == null ? void 0 : _a.call(window, url, "_blank");
-    return Boolean(w);
-  } catch (e) {
-    return false;
-  }
-};
-
-// src/DynamicFormCore.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var className2 = "dynamic-flow";
-var DynamicFormCore = (0, import_react5.forwardRef)(function DynamicFormCore2(props, ref) {
-  var _a;
-  const {
-    onCompletion = () => {
-    },
-    httpClient,
-    onEvent,
-    onError,
-    onLink = openLinkInNewTab,
-    renderers
-  } = props;
-  const normalisedFlowId = normaliseFlowId(props.flowId);
-  const scrollToTop = (0, import_react5.useMemo)(
-    () => getScrollToTop(normalisedFlowId, className2),
-    [normalisedFlowId]
-  );
-  const features = (0, import_react5.useMemo)(() => {
-    var _a2;
-    return new FeatureFlags((_a2 = props.features) != null ? _a2 : {});
-  }, []);
-  const { rootComponent } = useDynamicFlowCore(__spreadProps(__spreadValues({
-    onCompletion
-  }, props), {
-    features,
-    scrollToTop,
-    onLink
-  }));
-  (0, import_react5.useImperativeHandle)(
-    ref,
-    () => ({
-      getValue: async () => {
-        var _a2;
-        return (_a2 = await rootComponent.getSubmittableValue()) != null ? _a2 : null;
-      },
-      validate: () => rootComponent.validate()
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const render = (0, import_react5.useMemo)(
-    () => getRenderFunction([CoreRootRenderer, CoreContainerRenderer, ...renderers]),
-    [renderers]
-  );
-  const tree = componentToRendererProps(rootComponent, {
-    features,
-    render,
-    httpClient,
-    trackEvent: (_a = rootComponent.getTrackEvent()) != null ? _a : (() => {
-    }),
-    stepLoadingState: rootComponent.getLoadingState()
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    ErrorBoundary_default,
-    {
-      onError: (error) => {
-        onEvent == null ? void 0 : onEvent("Dynamic Flow - Failed");
-        onError(error);
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: normalisedFlowId, className: className2, children: render(tree) })
-    }
-  );
-});
+// src/DynamicFlowCore.tsx
+function DynamicFlowCore(props) {
+  const df = useDynamicFlow(props);
+  return df.view;
+}