@wise/dynamic-flow-client 2.1.4 → 2.1.5

package/build/main.js

@@ -2550,7 +2550,7 @@ var ControlFeedback = (props) => {
   const isValidationVisible = !isErrorVisible && (props.submitted || props.changed && props.blurred) && !!((_a = props.validations) == null ? void 0 : _a.length);
   const isDescriptionVisible = props.focused && props.schema.description && !isValidationVisible;
   const hasInfoMessage = !!props.infoMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { id: props.id, children: [
     isErrorVisible ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components6.InlineAlert, { type: "error", children: props.errors }) : null,
     isValidationVisible ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components6.InlineAlert, { type: "error", children: props.validations.map((validation) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: validationMessages[validation] }, validation)) }) : null,
     (isDescriptionVisible || hasInfoMessage) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_components6.InlineAlert, { type: "info", children: [
@@ -2758,12 +2758,14 @@ var MultipleFileUploadSchema = (props) => {
     onFilesChange,
     onDeleteFile: () => Promise.resolve()
   });
+  const feedbackId = `${uid}-feedback`;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: (0, import_classnames2.default)("form-group", { "has-error": showError }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "d-block control-label", htmlFor: uid, children: props.schema.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components7.UploadInput, __spreadValues({}, uploadInputProps)),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components7.UploadInput, __spreadValues({}, uploadInputProps)) }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ControlFeedback_default,
       {
+        id: feedbackId,
         changed: inputChanged,
         submitted: props.submitted,
         errors: props.errors,
@@ -3552,7 +3554,8 @@ var _FormControl = class extends import_react14.PureComponent {
       minDate,
       maxDate,
       value,
-      mode
+      mode,
+      describedBy
     } = this.props;
     switch (type) {
       case FormControlType.RADIO:
@@ -3649,7 +3652,8 @@ var _FormControl = class extends import_react14.PureComponent {
               if (event.target instanceof HTMLElement) {
                 event.target.blur();
               }
-            }
+            },
+            "aria-describedby": describedBy
           }
         );
       case FormControlType.HIDDEN:
@@ -3677,7 +3681,8 @@ var _FormControl = class extends import_react14.PureComponent {
             value: getSafeStringValue(value, { coerceValue: true }),
             onBlur: this.handleOnBlur,
             onChange: this.handleInputOnChange,
-            onFocus: this.handleOnFocus
+            onFocus: this.handleOnFocus,
+            "aria-describedby": describedBy
           }
         );
       case FormControlType.DATE:
@@ -3755,7 +3760,13 @@ var _FormControl = class extends import_react14.PureComponent {
             })
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("textarea", __spreadProps(__spreadValues({}, textareaProps), { onChange: this.handleInputOnChange }));
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "textarea",
+          __spreadProps(__spreadValues({}, textareaProps), {
+            onChange: this.handleInputOnChange,
+            "aria-describedby": describedBy
+          })
+        );
       }
       case FormControlType.FILE:
       case FormControlType.UPLOAD: {
@@ -3808,7 +3819,13 @@ var _FormControl = class extends import_react14.PureComponent {
             })
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", __spreadProps(__spreadValues({}, inputProps), { onChange: this.handleInputOnChange }));
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "input",
+          __spreadProps(__spreadValues({}, inputProps), {
+            onChange: this.handleInputOnChange,
+            "aria-describedby": describedBy
+          })
+        );
       }
     }
   }
@@ -3977,7 +3994,7 @@ var getOptions = (schema, controlType) => {
   return null;
 };
 var SchemaFormControl = (props) => {
-  const { id, schema, value, disabled, onChange, onFocus, onBlur, onSearchChange } = props;
+  const { id, schema, value, disabled, onChange, onFocus, onBlur, onSearchChange, describedBy } = props;
   const log = useLogger();
   const getSanitisedValue = (value2) => isNativeInput(schema.type) && (isNull(value2) || isUndefined(value2)) ? "" : value2;
   const onModelChange = (value2, type) => {
@@ -4005,9 +4022,10 @@ var SchemaFormControl = (props) => {
     disabled: disabled || schema.disabled,
     displayPattern: schema.displayFormat,
     // TODO: LOW avoid type assertion below
-    uploadProps: mapSchemaToUploadOptions(schema)
+    uploadProps: mapSchemaToUploadOptions(schema),
+    describedBy
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormControl, __spreadValues(__spreadValues({ type: controlType, value: safeValue }, events), controlProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-describedby": describedBy, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormControl, __spreadValues(__spreadValues({ type: controlType, value: safeValue }, events), controlProps)) });
 };
 SchemaFormControl.defaultProps = {
   value: null,
@@ -4109,6 +4127,7 @@ var OneOfSchema = (props) => {
     "form-group": true,
     "has-error": !changed && props.errors && !isEmpty(props.errors) || (props.submitted || changed && blurred) && validations.length
   };
+  const feedbackId = `${id}-feedback`;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
     (props.schema.oneOf.length > 1 || isConstSchema(props.schema.oneOf[0])) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: (0, import_classnames4.default)(formGroupClasses), children: [
@@ -4123,12 +4142,14 @@ var OneOfSchema = (props) => {
             onChange: onChooseNewSchema,
             onFocus,
             onBlur,
-            onSearchChange
+            onSearchChange,
+            describedBy: feedbackId
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           ControlFeedback_default,
           {
+            id: feedbackId,
             changed,
             focused,
             blurred,
@@ -4279,8 +4300,8 @@ var PersistAsyncBlobSchema = (props) => {
   (0, import_react18.useEffect)(refreshValidations, [props.model, props.submitted]);
   const onSuccess = async (httpResponse, _fileName) => {
     const jsonResponse = await httpResponse.json();
-    const id = getIdFromResponse(props.schema.persistAsync.idProperty, jsonResponse);
-    props.onChange({ model: id, triggerSchema: props.schema, triggerModel: id });
+    const id2 = getIdFromResponse(props.schema.persistAsync.idProperty, jsonResponse);
+    props.onChange({ model: id2, triggerSchema: props.schema, triggerModel: id2 });
     setChanged(true);
     onEvent("Dynamic Flow - PersistAsync", { status: "success", schemaId: props.schema.$id });
   };
@@ -4305,11 +4326,13 @@ var PersistAsyncBlobSchema = (props) => {
     "form-group": true,
     "has-error": (props.submitted || changed) && !!combinedValidations.length
   };
+  const id = props.schema.$id || props.schema.persistAsync.schema.$id || props.schema.persistAsync.idProperty;
+  const feedbackId = `${id}-feedback`;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: (0, import_classnames5.default)(formGroupClasses), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-describedby": feedbackId, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       UploadInputAdapter,
       __spreadValues({
-        id: props.schema.$id || props.schema.persistAsync.schema.$id || props.schema.persistAsync.idProperty,
+        id,
         fileId: props.model,
         idProperty: props.schema.persistAsync.idProperty,
         animationDelay: 0,
@@ -4322,10 +4345,11 @@ var PersistAsyncBlobSchema = (props) => {
         onFailure,
         onCancel
       }, mapSchemaToUploadOptions(props.schema.persistAsync.schema))
-    ),
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       ControlFeedback_default,
       {
+        id: feedbackId,
         blurred: true,
         focused: false,
         changed,
@@ -5071,7 +5095,7 @@ var CopyableDynamicParagraph = ({ component }) => {
     var _a;
     (_a = navigator.clipboard) == null ? void 0 : _a.writeText(text).then(() => createSnackbar({ text: formatMessage(DynamicParagraph_messages_default.copied) })).catch(noop4);
   };
-  const classNames7 = getTextAlignmentAndMargin({ align: component.align, margin: "sm" }) + " form-control";
+  const classNames7 = getTextAlignmentAndMargin({ align: component.align }) + " form-control";
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: getTextAlignmentAndMargin(component), children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "input",
@@ -5083,7 +5107,7 @@ var CopyableDynamicParagraph = ({ component }) => {
         style: { textOverflow: "ellipsis" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components23.Button, { block: true, onClick: copy, children: formatMessage(DynamicParagraph_messages_default.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components23.Button, { block: true, onClick: copy, className: getMargin("sm"), children: formatMessage(DynamicParagraph_messages_default.copy) })
   ] });
 };
 function noop4() {
@@ -5142,11 +5166,11 @@ var DynamicReview = (props) => {
   };
   const orientation = getReviewLayout(review);
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-    review.title && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("h6", { className: "m-b-2", children: [
+    review.title && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("h6", { className: `m-b-2 ${margin}`, children: [
       review.title,
       review.action && getReviewAction(review.action)
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components24.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: review.title ? "" : margin, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components24.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
   ] });
 };
 var DynamicReview_default = DynamicReview;
@@ -5404,6 +5428,7 @@ var BasicTypeSchema = (props) => {
   };
   const showLabel = props.schema.format !== "file" && props.schema.type !== "boolean";
   const schemaHelp = props.schema.help;
+  const feedbackId = `${id}-feedback`;
   return !isHidden ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
     props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DynamicAlert_default, { component: props.schema.alert }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: (0, import_classnames6.default)(formGroupClasses), children: [
@@ -5421,12 +5446,14 @@ var BasicTypeSchema = (props) => {
           disabled: !!props.disabled,
           onChange,
           onFocus,
-          onBlur
+          onBlur,
+          describedBy: feedbackId
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         ControlFeedback_default,
         {
+          id: feedbackId,
           changed,
           focused,
           blurred,
@@ -6423,10 +6450,10 @@ var BackButton_default = BackButton;
 // src/dynamicFlow/DynamicFlowStep.tsx
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var DynamicFlowStep = (props) => {
-  var _a, _b;
+  var _a, _b, _c;
   const { step, globalError, onAction } = props;
   const externalUrl = (_a = step == null ? void 0 : step.external) == null ? void 0 : _a.url;
-  const backButton = (_b = step == null ? void 0 : step.navigation) == null ? void 0 : _b.backButton;
+  const backButton = ((_b = step == null ? void 0 : step.navigation) == null ? void 0 : _b.back) || ((_c = step == null ? void 0 : step.navigation) == null ? void 0 : _c.backButton);
   const { requiresManualTrigger, dismissConfirmation } = useExternal(externalUrl);
   if (step === void 0) {
     return null;
@@ -6661,8 +6688,7 @@ var ErrorBoundary = class extends import_react40.Component {
 var ErrorBoundary_default = ErrorBoundary;
 
 // src/dynamicFlow/utils/responseParsers/response-parsers.ts
-var parseFetchResponseByResponseType = async (response) => {
-  const type = response.headers.get("X-Df-ResponseType");
+var parseFetchResponseByResponseType = async (response, type) => {
   switch (type) {
     case "step":
       return parseStepResponse(response);
@@ -6672,7 +6698,7 @@ var parseFetchResponseByResponseType = async (response) => {
       return parseActionResponse(response);
     default:
       throw new Error(
-        "Unsupported X-Df-ResponseType. Allowed values are 'step', 'action', 'exit'."
+        "Unsupported X-Df-Response-Type. Allowed values are 'step', 'action', 'exit'."
       );
   }
 };
@@ -6704,12 +6730,17 @@ var parseExitResponse = async (response) => {
   return { type: "exit", result: await getJsonObjectOrNull(response) };
 };
 var parseFetchResponse = async (response) => {
-  var _a, _b;
+  var _a, _b, _c;
   assertResponseIsValid(response);
-  if ((_a = response.headers) == null ? void 0 : _a.has("X-Df-ResponseType")) {
-    return parseFetchResponseByResponseType(response);
+  if ((_a = response.headers) == null ? void 0 : _a.has("X-Df-Response-Type")) {
+    const type = response.headers.get("X-Df-Response-Type");
+    return parseFetchResponseByResponseType(response, type);
+  }
+  if ((_b = response.headers) == null ? void 0 : _b.has("X-Df-ResponseType")) {
+    const type = response.headers.get("X-Df-ResponseType");
+    return parseFetchResponseByResponseType(response, type);
   }
-  if ((_b = response.headers) == null ? void 0 : _b.has("X-Df-Exit")) {
+  if ((_c = response.headers) == null ? void 0 : _c.has("X-Df-Exit")) {
     return parseExitResponse(response);
   }
   const jsonBody = await parseResponseJson(response.clone());