@wise/dynamic-flow-client 3.14.0 → 3.14.1

package/build/main.mjs

@@ -13207,7 +13207,7 @@ function isReference(block) {
 
 // src/legacy/dynamicFlow/DynamicFlow.tsx
 import { useCallback as useCallback11, useEffect as useEffect26, useMemo as useMemo23, useState as useState34 } from "react";
-import { useIntl as useIntl26 } from "react-intl";
+import { useIntl as useIntl28 } from "react-intl";
 
 // src/legacy/common/contexts/dynamicFlowContexts/DynamicFlowContexts.tsx
 import { createContext as createContext4, useContext as useContext5, useMemo as useMemo8 } from "react";
@@ -14128,11 +14128,11 @@ function useExternalStepPolling(polling, onAction) {
 
 // src/legacy/common/hooks/usePersistAsync/usePersistAsync.ts
 import { useState as useState28 } from "react";
-import { useIntl as useIntl20 } from "react-intl";
+import { useIntl as useIntl22 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBasicSchema/PersistAsyncBasicSchema.tsx
 import { useEffect as useEffect18, useState as useState27 } from "react";
-import { useIntl as useIntl19 } from "react-intl";
+import { useIntl as useIntl21 } from "react-intl";
 
 // src/legacy/common/constants/DateMode.ts
 var DateMode = {
@@ -15703,6 +15703,7 @@ var Help_default2 = Help2;
 
 // src/legacy/jsonSchemaForm/schemaFormControl/SchemaFormControl.tsx
 import { useEffect as useEffect11 } from "react";
+import { useIntl as useIntl16 } from "react-intl";
 
 // src/legacy/formControl/FormControl.tsx
 import {
@@ -15984,6 +15985,7 @@ var _FormControl = class _FormControl extends PureComponent {
       monthFormat,
       // FIXME pass id to all components that accept it
       id,
+      invalid,
       minDate,
       maxDate,
       value,
@@ -16024,6 +16026,12 @@ var _FormControl = class _FormControl extends PureComponent {
           SelectInput4,
           {
             id,
+            UNSAFE_triggerButtonProps: {
+              id,
+              "aria-invalid": invalid,
+              "aria-labelledby": void 0,
+              "aria-describedby": describedBy
+            },
             items: items.map((value2) => ({
               type: "option",
               value: value2,
@@ -16229,25 +16237,21 @@ var _FormControl = class _FormControl extends PureComponent {
       }
       case FormControlType.FILE:
       case FormControlType.UPLOAD: {
-        return (
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-expect-error - TODO: Remove this once Upload is migrated to TypeScript
-          /* @__PURE__ */ jsx89(
-            Upload2,
-            __spreadProps(__spreadValues({}, uploadProps), {
-              usAccept: uploadProps.usAccept || "*",
-              usDisabled: uploadProps.usDisabled || disabled,
-              onSuccess: (base64url, filename) => {
-                this.handleOnChange(base64url, { filename });
-              },
-              onFailure: () => {
-                this.handleOnChange(null);
-              },
-              onCancel: () => {
-                this.handleOnChange(null);
-              }
-            })
-          )
+        return /* @__PURE__ */ jsx89(
+          Upload2,
+          __spreadProps(__spreadValues({}, uploadProps), {
+            usAccept: uploadProps.usAccept || "*",
+            usDisabled: uploadProps.usDisabled || disabled,
+            onSuccess: (base64url, filename) => {
+              this.handleOnChange(base64url, { filename });
+            },
+            onFailure: () => {
+              this.handleOnChange(null);
+            },
+            onCancel: () => {
+              this.handleOnChange(null);
+            }
+          })
         );
       }
       case FormControlType.TEXT:
@@ -16300,6 +16304,7 @@ _FormControl.defaultProps = {
   disabled: false,
   displayPattern: null,
   id: null,
+  invalid: false,
   label: "",
   max: null,
   maxDate: null,
@@ -16394,6 +16399,7 @@ function SchemaFormControl(props) {
     schema,
     value,
     disabled,
+    invalid,
     required,
     onChange,
     onFocus,
@@ -16402,6 +16408,7 @@ function SchemaFormControl(props) {
     describedBy
   } = props;
   const log = useLogger();
+  const intl = useIntl16();
   const getSanitisedValue = (value2) => isNativeInput(schema.type) && (isNull3(value2) || isUndefined3(value2)) ? "" : value2;
   const onModelChange = (value2, type, metadata) => {
     onChange(getValidBasicModelOrNull(value2, schema), type, metadata);
@@ -16423,6 +16430,7 @@ function SchemaFormControl(props) {
     name: id,
     label: schema.title,
     description: schema.description,
+    invalid,
     options: options || [],
     placeholder: schema.placeholder,
     autoComplete: !schema.help,
@@ -16430,7 +16438,9 @@ function SchemaFormControl(props) {
     disabled: disabled || schema.disabled,
     displayPattern: schema.displayFormat,
     // TODO: LOW avoid type assertion below
-    uploadProps: mapSchemaToUploadOptions(schema),
+    uploadProps: __spreadValues({
+      intl
+    }, mapSchemaToUploadOptions(schema)),
     describedBy,
     required
   };
@@ -16551,6 +16561,7 @@ function OneOfSchema(props) {
             schema: schemaForSelect,
             value: schemaIndex,
             disabled: props.disabled,
+            invalid: !isEmpty(props.errors) || validations.length > 0,
             describedBy: feedbackId,
             required: props.required,
             onChange: onChooseNewSchema,
@@ -16639,6 +16650,7 @@ var OneOfSchema_default = OneOfSchema;
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/PersistAsyncBlobSchema.tsx
 var import_classnames12 = __toESM(require_classnames());
 import { useEffect as useEffect13, useState as useState19 } from "react";
+import { useIntl as useIntl17 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
 import { Status as Status2, UploadInput as UploadInput4 } from "@transferwise/components";
@@ -16666,8 +16678,10 @@ function UploadInputAdapter(props) {
       method: httpOptions.method || "POST",
       body: formData
     }).then((response) => {
+      var _a;
       if (response.ok) {
-        onSuccess == null ? void 0 : onSuccess(response.clone());
+        const file = formData.get((_a = httpOptions.fileInputName) != null ? _a : "file");
+        onSuccess == null ? void 0 : onSuccess(response.clone(), file ? file.name : "");
         return response.json().then((responseBody) => ({
           id: responseBody[idProperty]
         }));
@@ -16703,6 +16717,7 @@ function PersistAsyncBlobSchema(props) {
   const [persistAsyncValidations, setPersistAsyncValidations] = useState19(null);
   const [validations, setValidations] = useState19([]);
   const [changed, setChanged] = useState19(false);
+  const intl = useIntl17();
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   useEffect13(() => {
@@ -16719,7 +16734,8 @@ function PersistAsyncBlobSchema(props) {
     setChanged(true);
     onEvent("Dynamic Flow - PersistAsync", { status: "success", schemaId: schema.$id });
   };
-  const onFailure = async (errorResponse) => {
+  const onFailure = async (error) => {
+    const errorResponse = error;
     if (errorResponse.response && isStatus422(errorResponse.response.status)) {
       const jsonResponse = await errorResponse.response.json();
       setPersistAsyncValidationMessages(jsonResponse.validation || {});
@@ -16747,6 +16763,7 @@ function PersistAsyncBlobSchema(props) {
       UploadInputAdapter,
       __spreadValues({
         id,
+        intl,
         fileId: model,
         idProperty: schema.persistAsync.idProperty,
         animationDelay: 0,
@@ -16946,7 +16963,7 @@ var PromotedOneOfSchema_default = PromotedOneOfSchema;
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
 import { DefinitionList as DefinitionList2, Layout } from "@transferwise/components";
-import { useIntl as useIntl16 } from "react-intl";
+import { useIntl as useIntl18 } from "react-intl";
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.messages.ts
 import { defineMessages as defineMessages16 } from "react-intl";
@@ -16967,7 +16984,7 @@ var ReadOnlySchema_messages_default = defineMessages16({
 import { Fragment as Fragment18, jsx as jsx99, jsxs as jsxs35 } from "react/jsx-runtime";
 function ReadOnlySchema({ schema, model }) {
   const { title = "" } = schema;
-  const { formatMessage } = useIntl16();
+  const { formatMessage } = useIntl18();
   const value = getValueForSchema({ schema, model, formatMessage });
   return /* @__PURE__ */ jsx99(DefinitionList2, { layout: Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 }
@@ -17468,7 +17485,7 @@ var DynamicLoadingIndicator_default = DynamicLoadingIndicator;
 
 // src/legacy/layout/paragraph/DynamicParagraph.tsx
 import { Button as Button8 } from "@transferwise/components";
-import { useIntl as useIntl17 } from "react-intl";
+import { useIntl as useIntl19 } from "react-intl";
 
 // src/common/messages/paragraph.messages.ts
 import { defineMessages as defineMessages17 } from "react-intl";
@@ -17508,7 +17525,7 @@ function BasicDynamicParagraph({ component }) {
   ] });
 }
 function CopyableDynamicParagraph({ component }) {
-  const { formatMessage } = useIntl17();
+  const { formatMessage } = useIntl19();
   const createSnackbar = useSnackBarIfAvailable2();
   const { text } = component;
   const copy = () => {
@@ -17623,7 +17640,7 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 
 // src/legacy/layout/search/SearchResults.tsx
 import { NavigationOption as NavigationOption7, NavigationOptionsList as NavigationOptionsList4 } from "@transferwise/components";
-import { useIntl as useIntl18 } from "react-intl";
+import { useIntl as useIntl20 } from "react-intl";
 import { jsx as jsx113, jsxs as jsxs41 } from "react/jsx-runtime";
 function SearchResults2({ results, emptyMessage, onSelect }) {
   if (results.length === 0) {
@@ -17643,7 +17660,7 @@ function SearchResults2({ results, emptyMessage, onSelect }) {
   )) });
 }
 function ErrorResult2({ onRetrySearch }) {
-  const intl = useIntl18();
+  const intl = useIntl20();
   return /* @__PURE__ */ jsxs41("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
@@ -18010,7 +18027,7 @@ var controlTypesWithPersistOnChange = /* @__PURE__ */ new Set([
 ]);
 function PersistAsyncBasicSchema(props) {
   const { schema, required, submitted, errors, onChange, onPersistAsync } = props;
-  const intl = useIntl19();
+  const intl = useIntl21();
   const httpClient = useHttpClient();
   const onEvent = useEventDispatcher();
   const [persistAsyncModel, setPersistAsyncModel] = useState27(null);
@@ -18108,7 +18125,7 @@ var PersistAsyncBasicSchema_default = PersistAsyncBasicSchema;
 var usePersistAsync = (persistAsync) => {
   const [abortController, setAbortController] = useState28(null);
   const httpClient = useHttpClient();
-  const intl = useIntl20();
+  const intl = useIntl22();
   const { schema } = persistAsync;
   async function handlePersistAsync(model) {
     const isInvalidSchema = model instanceof Blob ? !isBlobSchema2(schema) : !isValidSchema(model, schema);
@@ -18339,7 +18356,7 @@ import { useEffect as useEffect25, useState as useState31 } from "react";
 
 // src/common/cameraCapture/CameraCapture.tsx
 import { useCallback as useCallback10, useEffect as useEffect24, useMemo as useMemo21, useRef as useRef8, useState as useState30 } from "react";
-import { useIntl as useIntl23 } from "react-intl";
+import { useIntl as useIntl25 } from "react-intl";
 import Webcam from "react-webcam";
 
 // src/common/cameraCapture/CameraCapture.messages.ts
@@ -18404,14 +18421,14 @@ var CameraCapture_messages_default = defineMessages18({
 
 // src/common/cameraCapture/components/bottomBar/BottomBar.tsx
 import { Button as Button10, ControlType, Priority, Size as Size3 } from "@transferwise/components";
-import { useIntl as useIntl21 } from "react-intl";
+import { useIntl as useIntl23 } from "react-intl";
 import { jsx as jsx119, jsxs as jsxs45 } from "react/jsx-runtime";
 var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ jsx119("div", { className: "bottom-bar", children: /* @__PURE__ */ jsx119(CaptureButton, { onClick: onCapture }) });
 var ReviewBottomBar = ({
   onSubmit,
   onRetry
 }) => {
-  const intl = useIntl21();
+  const intl = useIntl23();
   return /* @__PURE__ */ jsx119("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ jsx119("div", { className: "row", children: /* @__PURE__ */ jsxs45("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ jsx119(
       Button10,
@@ -18450,7 +18467,7 @@ var CaptureButton = ({ onClick }) => /* @__PURE__ */ jsx119(
 );
 
 // src/common/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
-import { useIntl as useIntl22 } from "react-intl";
+import { useIntl as useIntl24 } from "react-intl";
 
 // src/common/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.messages.ts
 import { defineMessages as defineMessages19 } from "react-intl";
@@ -18465,7 +18482,7 @@ var OrientationLockOverlay_messages_default = defineMessages19({
 // src/common/cameraCapture/components/orientationLockOverlay/OrientationLockOverlay.tsx
 import { jsx as jsx120, jsxs as jsxs46 } from "react/jsx-runtime";
 function OrientationLockOverlay() {
-  const intl = useIntl22();
+  const intl = useIntl24();
   return /* @__PURE__ */ jsxs46("div", { className: "orientation-lock-overlay", children: [
     /* @__PURE__ */ jsx120(
       "img",
@@ -18755,7 +18772,7 @@ function CameraCapture({
     shouldLockOrientation,
     onEvent
   );
-  const intl = useIntl23();
+  const intl = useIntl25();
   const handleCapture = useCallback10(async () => {
     var _a, _b, _c, _d, _e, _f;
     if (((_a = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _a.video) && ((_c = (_b = webcamReference == null ? void 0 : webcamReference.current) == null ? void 0 : _b.video) == null ? void 0 : _c.readyState) >= 3) {
@@ -18978,7 +18995,7 @@ function getFirstAction(step) {
 }
 
 // src/legacy/step/externalConfirmationStep/ExternalConfirmationStep.tsx
-import { useIntl as useIntl24 } from "react-intl";
+import { useIntl as useIntl26 } from "react-intl";
 
 // src/common/messages/external-confirmation.messages.ts
 import { defineMessages as defineMessages20 } from "react-intl";
@@ -19010,7 +19027,7 @@ import { jsx as jsx125 } from "react/jsx-runtime";
 var noop6 = () => {
 };
 function ExternalConfirmationStep({ url, onClose }) {
-  const { formatMessage } = useIntl24();
+  const { formatMessage } = useIntl26();
   return /* @__PURE__ */ jsx125(
     DynamicLayout_default,
     {
@@ -19383,9 +19400,9 @@ var assertResponseIsValid2 = (response) => {
 var isResponse2 = (response) => typeof response === "object" && response !== null && "clone" in response && "bodyUsed" in response;
 
 // src/legacy/dynamicFlow/utils/useErrorResponse.tsx
-import { useIntl as useIntl25 } from "react-intl";
+import { useIntl as useIntl27 } from "react-intl";
 var useErrorResponse = () => {
-  const { formatMessage } = useIntl25();
+  const { formatMessage } = useIntl27();
   return async (response, fetchType, isInitialRequest) => {
     try {
       const errorResponse = await parseErrorResponse(response);
@@ -19429,7 +19446,7 @@ var DynamicFlowComponent = ({
     setSchemaModel
   } = useDynamicFlowState(initialStep);
   const [submitted, setSubmitted] = useState34(false);
-  const { locale } = useIntl26();
+  const { locale } = useIntl28();
   const { isLoading, loader, setLoadingState } = useLoader(
     loaderConfig,
     initialStep ? "idle" : "initial"

package/build/types/legacy/formControl/FormControl.d.ts

@@ -62,6 +62,7 @@ export default class FormControl extends PureComponent<FormControlProps, FormCon
         disabled: boolean;
         displayPattern: null;
         id: null;
+        invalid: boolean;
         label: string;
         max: null;
         maxDate: null;
@@ -113,6 +114,7 @@ type FormControlProps = {
     disabled?: boolean;
     displayPattern?: string;
     id: string;
+    invalid?: boolean;
     label?: string;
     description?: string;
     max?: number;

package/build/types/legacy/jsonSchemaForm/schemaFormControl/SchemaFormControl.d.ts

@@ -23,6 +23,7 @@ export type SchemaFormControlProps = {
     onSearchChange?: (searchValue: string) => void;
     disabled?: boolean;
     describedBy?: string | undefined;
+    invalid?: boolean;
     required?: boolean;
 };
 export default SchemaFormControl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -52,17 +52,17 @@
     "@testing-library/react": "14.3.1",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.2",
-    "@transferwise/components": "46.37.0",
+    "@transferwise/components": "46.51.0",
     "@transferwise/formatting": "^2.13.0",
     "@transferwise/icons": "3.13.0",
-    "@transferwise/neptune-css": "14.10.0",
+    "@transferwise/neptune-css": "14.12.1",
     "@types/enzyme": "^3.10.18",
     "@types/jest": "29.5.12",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/react-intl": "3.0.0",
     "@wise/art": "2.7.0",
-    "@wise/components-theming": "^1.3.0",
+    "@wise/components-theming": "^1.5.0",
     "babel-jest": "29.7.0",
     "enzyme": "^3.11.0",
     "esbuild": "0.20.2",
@@ -71,7 +71,7 @@
     "jest-fetch-mock": "^3.0.3",
     "jest-watch-typeahead": "^2.2.2",
     "nanoid": "5.0.7",
-    "npm-run-all2": "5.0.2",
+    "npm-run-all2": "6.2.2",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^15.1.0",
@@ -86,8 +86,8 @@
     "tsx": "4.15.6",
     "typescript": "5.4.5",
     "webpack": "5.92.0",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.31",