@transferwise/components 46.38.0 → 46.40.0

package/build/index.mjs

@@ -16,8 +16,8 @@ import mergeProps from 'merge-props';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
 import { usePreventScroll } from '@react-aria/overlays';
 import { usePopper } from 'react-popper';
-import PropTypes from 'prop-types';
 import { Flag, Illustration } from '@wise/art';
+import PropTypes from 'prop-types';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
 import { Spring, animated } from '@react-spring/web';
@@ -5301,33 +5301,25 @@ const AnimatedLabel = ({
   });
 };
 
-const BackButton = ({
+function BackButton({
   className,
   onClick,
   'aria-label': ariaLabel
-}) => /*#__PURE__*/jsx(Avatar, {
-  type: AvatarType.ICON,
-  size: 40,
-  children: /*#__PURE__*/jsx("button", {
-    type: "button",
-    "aria-label": ariaLabel,
-    className: classNames('np-back-button', 'btn-unstyled', className),
-    onClick: onClick,
-    children: /*#__PURE__*/jsx(ArrowLeft, {
-      size: 24
+}) {
+  return /*#__PURE__*/jsx(Avatar, {
+    type: AvatarType.ICON,
+    size: 40,
+    children: /*#__PURE__*/jsx("button", {
+      type: "button",
+      "aria-label": ariaLabel,
+      className: classNames('np-back-button', 'btn-unstyled', className),
+      onClick: onClick,
+      children: /*#__PURE__*/jsx(ArrowLeft, {
+        size: 24
+      })
     })
-  })
-});
-BackButton.propTypes = {
-  'aria-label': PropTypes.string.isRequired,
-  className: PropTypes.string,
-  label: PropTypes.element,
-  onClick: PropTypes.func
-};
-BackButton.defaultProps = {
-  className: undefined,
-  label: undefined
-};
+  });
+}
 
 const FlowNavigation = ({
   activeStep = 0,
@@ -7734,11 +7726,12 @@ const Nudge = ({
   });
 };
 
-const OverlayHeader = ({
+const defaultLogo = /*#__PURE__*/jsx(Logo, {});
+function OverlayHeader({
   avatar,
   onClose,
-  logo
-}) => {
+  logo = defaultLogo
+}) {
   const closeButton = onClose && /*#__PURE__*/jsx(CloseButton, {
     size: Size.LARGE,
     onClick: onClose
@@ -7756,20 +7749,7 @@ const OverlayHeader = ({
       })
     })
   });
-};
-OverlayHeader.defaultProps = {
-  avatar: null,
-  logo: /*#__PURE__*/jsx(Logo, {}),
-  onClose: null
-};
-OverlayHeader.propTypes = {
-  /** An Avatar */
-  avatar: PropTypes.element,
-  logo: PropTypes.node,
-  /** Function called when the close is clicked */
-  onClose: PropTypes.func
-};
-var OverlayHeader$1 = OverlayHeader;
+}
 
 var messages$3 = defineMessages({
   selectInputPlaceholder: {
@@ -12079,13 +12059,6 @@ var Typeahead$1 = withInputAttributes(Typeahead, {
   nonLabelable: true
 });
 
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-var UploadStep;
-(function (UploadStep) {
-  UploadStep["UPLOAD_IMAGE_STEP"] = "uploadImageStep";
-  UploadStep["MEDIA_UPLOAD_STEP"] = "mediaUploadStep";
-})(UploadStep || (UploadStep = {}));
-
 var messages = defineMessages({
   csButtonText: {
     id: "neptune.Upload.csButtonText"
@@ -12120,16 +12093,13 @@ var messages = defineMessages({
 });
 
 class UploadImageStep extends PureComponent {
-  constructor() {
-    super();
-    this.uploadInputRef = /*#__PURE__*/createRef();
-  }
+  uploadInputRef = /*#__PURE__*/createRef();
   onManualUpload = () => {
     const {
       fileDropped
     } = this.props;
-    if (this.uploadInputRef && this.uploadInputRef.current) {
-      const file = this.uploadInputRef.current.files[0];
+    const file = this.uploadInputRef.current?.files?.[0];
+    if (file != null) {
       fileDropped(file);
     }
   };
@@ -12178,7 +12148,7 @@ class UploadImageStep extends PureComponent {
             children: usLabel
           }), usPlaceholder && /*#__PURE__*/jsx("p", {
             className: "np-text-body-large m-b-3",
-            children: `${usPlaceholder}`
+            children: String(usPlaceholder)
           }), /*#__PURE__*/jsxs("label", {
             className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
             children: [usButtonText ? /*#__PURE__*/jsx("span", {
@@ -12189,7 +12159,7 @@ class UploadImageStep extends PureComponent {
             }), /*#__PURE__*/jsx("input", {
               ref: this.uploadInputRef,
               type: "file",
-              accept: usAccept === '*' ? null : usAccept,
+              accept: usAccept === '*' ? undefined : usAccept,
               className: "tw-droppable-input hidden",
               disabled: usDisabled,
               name: "file-upload",
@@ -12201,213 +12171,17 @@ class UploadImageStep extends PureComponent {
     });
   }
 }
-UploadImageStep.propTypes = {
-  fileDropped: PropTypes.func.isRequired,
-  isComplete: PropTypes.bool.isRequired,
-  usAccept: PropTypes.string.isRequired,
-  usButtonText: PropTypes.string.isRequired,
-  usDisabled: PropTypes.bool.isRequired,
-  usHelpImage: PropTypes.node.isRequired,
-  usLabel: PropTypes.string.isRequired,
-  usPlaceholder: PropTypes.string.isRequired
-};
-
-const postData = (httpOptions, data = {}, fetcher = fetch) => fetcher(`${httpOptions.url}`, {
-  method: 'POST',
-  body: data,
-  ...httpOptions
-}).then(response => {
-  if (!response.ok) {
-    const error = new Error(response.statusText);
-    error.status = response.status;
-    error.response = response;
-    throw error;
-  }
-  return response;
-}).catch(error => {
-  throw error;
-});
-
-const asyncFileRead = file => new Promise((resolve, reject) => {
-  const reader = new FileReader();
-  reader.readAsDataURL(file);
-  reader.addEventListener('load', event => {
-    resolve(event.target.result);
-  });
-  reader.addEventListener('error', event => {
-    reject(event);
-  });
-});
-
-const isSizeValid = (file, maxSize) => Number.isInteger(maxSize) && file.size <= maxSize;
-
-const getFileType = (file, file64) => {
-  if (!file && !file64) {
-    return '';
-  }
-  if (file && file.type && file.type !== '') {
-    return file.type ?? '';
-  }
-  if (file64) {
-    const regex = /^data:([a-z]+\/[a-z]+);/;
-    const typeFromEncoded = file64.match(regex);
-    if (typeFromEncoded && typeFromEncoded[1]) {
-      return typeFromEncoded[1] ?? '';
-    }
-  }
-  return '';
-};
 
-const isTypeValid = (file, rule, file64) => {
-  if (!file || !rule) {
-    return false;
-  }
-  const allowedTypes = rule.replace(/\s/g, '').split(',');
-  const fileType = getFileType(file, file64);
-  if (rule === '*' || allowedTypes.includes(fileType)) {
-    return true;
-  }
-  return allowedTypes.some(type => {
-    const splittedRule = type.split('/');
-    const typeAllowed = splittedRule[0];
-    const extensionAllowed = splittedRule[1];
-    if (extensionAllowed !== '*') {
-      return false;
-    }
-    return fileType.includes(typeAllowed);
-  });
-};
-
-// Spot Platform's Media API only support these MIME types
-const SUPPORTED_MIME_TYPES = ['image/jpeg', 'video/*', 'application/pdf'];
-const getSupportedSpotMimeTypes = mimeTypes => {
-  if (mimeTypes === '*') {
-    return SUPPORTED_MIME_TYPES;
-  }
-  const mimeTypesArray = mimeTypes.split(',');
-  const mimeMapping = {
-    'image/*': 'image/jpeg',
-    'application/*': 'application/pdf'
-  };
-  const mapSupportedMimeTypes = mimeTypesArray.map(type => mimeMapping[type] || type);
-  return mapSupportedMimeTypes.filter(type => SUPPORTED_MIME_TYPES.includes(type));
-};
-
-const requestMedia = mediaRequest => new Promise((resolve, reject) => {
-  if (typeof window === 'undefined' || typeof window.microapps === 'undefined') {
-    reject(`microapps must be available in window to use Spot Platform's Media API`);
-  }
-  window.microapps.requestMedia(mediaRequest).then(response => {
-    const fileByteArray = base64ToByteArray(response.bytes);
-    const blob = new Blob([fileByteArray], {
-      type: response.mimeType
-    });
-    resolve(blob);
-  }).catch(error => reject(error));
-});
-const base64ToByteArray = base64String => {
-  const byteCharacters = atob(base64String);
-  const byteCharactersLength = byteCharacters.length;
-  const byteArray = new Array(byteCharactersLength);
-  for (let i = 0; i < byteCharactersLength; i += 1) {
-    byteArray[i] = byteCharacters.charCodeAt(i);
-  }
-  return new Uint8Array(byteArray);
-};
-
-const MediaUploadStep = ({
+function ProcessingStep({
   isComplete,
-  usAccept,
-  usButtonText,
-  usDisabled,
-  usHelpImage,
-  usLabel,
-  usPlaceholder,
-  fileDropped
-}) => {
-  const getMediaFile = () => {
-    const allowedMimeTypes = getSupportedSpotMimeTypes(usAccept);
-    if (allowedMimeTypes.length === 0) {
-      throw new Error('provided mimeTypes not supported');
-    }
-    const mediaRequest = {
-      allowedMimeTypes
-    };
-    requestMedia(mediaRequest).then(file => fileDropped(file));
-  };
-  const getImage = () => {
-    if (!usHelpImage) {
-      return /*#__PURE__*/jsx("div", {
-        className: "circle circle-sm circle-inverse p-t-1",
-        children: /*#__PURE__*/jsx(Upload$2, {
-          size: 24
-        })
-      });
-    }
-    if (typeof usHelpImage === 'string') {
-      return /*#__PURE__*/jsx("img", {
-        src: usHelpImage,
-        alt: usLabel,
-        className: "thumbnail text-xs-center"
-      });
-    }
-    return usHelpImage;
-  };
-  return /*#__PURE__*/jsx("div", {
-    children: /*#__PURE__*/jsx("div", {
-      className: "droppable-default-card",
-      "aria-hidden": isComplete,
-      children: /*#__PURE__*/jsxs("div", {
-        className: "droppable-card-content",
-        children: [/*#__PURE__*/jsx("div", {
-          className: "m-b-3",
-          children: getImage()
-        }), usLabel && /*#__PURE__*/jsx(Title, {
-          type: Typography.TITLE_BODY,
-          className: "m-b-1",
-          children: usLabel
-        }), usPlaceholder && /*#__PURE__*/jsx(Body, {
-          as: "p",
-          type: Typography.BODY_LARGE,
-          className: "m-b-3",
-          children: `${usPlaceholder}`
-        }), /*#__PURE__*/jsx(Button, {
-          disabled: usDisabled,
-          onClick: getMediaFile,
-          children: usButtonText || /*#__PURE__*/jsx(Upload$2, {
-            size: 24,
-            className: "m-r-0"
-          })
-        })]
-      })
-    })
-  });
-};
-MediaUploadStep.propTypes = {
-  fileDropped: PropTypes.func.isRequired,
-  isComplete: PropTypes.bool.isRequired,
-  usAccept: PropTypes.string.isRequired,
-  usButtonText: PropTypes.string.isRequired,
-  usDisabled: PropTypes.bool.isRequired,
-  usHelpImage: PropTypes.node.isRequired,
-  usLabel: PropTypes.string.isRequired,
-  usPlaceholder: PropTypes.string.isRequired
-};
-
-const ProcessingStep = props => {
-  const {
-    isComplete,
-    isError,
-    isSuccess,
-    onAnimationCompleted,
-    onClear,
-    psButtonText,
-    psProcessingText,
-    psButtonDisabled
-  } = props;
-  const {
-    isModern
-  } = useTheme();
+  isError,
+  isSuccess,
+  onAnimationCompleted,
+  onClear,
+  psButtonText,
+  psProcessingText,
+  psButtonDisabled
+}) {
   let processStatus = Status.PROCESSING;
   if (isError) {
     processStatus = Status.FAILED;
@@ -12421,53 +12195,33 @@ const ProcessingStep = props => {
     children: /*#__PURE__*/jsxs("div", {
       className: "droppable-card-content",
       children: [/*#__PURE__*/jsx(ProcessIndicator, {
-        size: Size.Small,
         status: processStatus,
         onAnimationCompleted: status => onAnimationCompleted(status)
       }), /*#__PURE__*/jsx(Title, {
-        className: classNames({
-          'm-t-3': !isModern,
-          'm-b-3': !isModern,
-          'm-t-2': isModern,
-          'm-b-2': isModern
-        }),
+        className: "m-y-2",
         type: Typography.TITLE_BODY,
         "aria-live": "polite",
         children: psProcessingText
       }), psButtonText && /*#__PURE__*/jsx(Button, {
         disabled: psButtonDisabled,
-        onClick: event => onClear(event),
+        onClick: onClear,
         children: psButtonText
       })]
     })
   });
-};
-ProcessingStep.propTypes = {
-  isComplete: PropTypes.bool.isRequired,
-  isError: PropTypes.bool.isRequired,
-  isSuccess: PropTypes.bool.isRequired,
-  onAnimationCompleted: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  psButtonText: PropTypes.string.isRequired,
-  psProcessingText: PropTypes.string.isRequired,
-  psButtonDisabled: PropTypes.bool.isRequired
-};
+}
 
-const CompleteStep = props => {
-  const {
-    isModern
-  } = useTheme();
-  const {
-    csButtonText,
-    csFailureText,
-    csSuccessText,
-    fileName,
-    isComplete,
-    isError,
-    isImage,
-    onClear,
-    uploadedImage
-  } = props;
+function CompleteStep({
+  csButtonText,
+  csFailureText,
+  csSuccessText,
+  fileName,
+  isComplete,
+  isError,
+  isImage,
+  onClear,
+  uploadedImage
+}) {
   return /*#__PURE__*/jsx("div", {
     className: "droppable-complete-card droppable-card",
     "aria-hidden": !isComplete,
@@ -12477,16 +12231,11 @@ const CompleteStep = props => {
         className: "droppable-card-content d-flex flex-column align-items-center",
         "aria-live": "polite",
         children: isError ? /*#__PURE__*/jsxs(Fragment, {
-          children: [isModern ? /*#__PURE__*/jsx(StatusIcon, {
+          children: [/*#__PURE__*/jsx(StatusIcon, {
             size: Size.LARGE,
             sentiment: Sentiment.NEGATIVE
-          }) : /*#__PURE__*/jsx(AlertCircle, {
-            size: 24,
-            className: "text-negative"
           }), csFailureText && /*#__PURE__*/jsx("p", {
-            className: classNames('m-t-2', {
-              'm-b-0': isModern
-            }),
+            className: "m-t-2 m-b-0",
             children: csFailureText
           })]
         }) : /*#__PURE__*/jsxs(Fragment, {
@@ -12505,71 +12254,135 @@ const CompleteStep = props => {
           })]
         })
       }), csButtonText && /*#__PURE__*/jsx(Button, {
-        priority: isModern ? Priority.PRIMARY : Priority.SECONDARY,
-        className: classNames({
-          'm-t-1': isModern && !isError,
-          'm-t-2': isModern && isError,
-          'm-t-3': !isModern
-        }),
-        onClick: event => onClear(event),
+        className: isError ? 'm-t-2' : 'm-t-1',
+        onClick: onClear,
         children: csButtonText
       })]
     })
   });
-};
-CompleteStep.propTypes = {
-  csButtonText: PropTypes.string.isRequired,
-  csSuccessText: PropTypes.string.isRequired,
-  csFailureText: PropTypes.string.isRequired,
-  fileName: PropTypes.string.isRequired,
-  isComplete: PropTypes.bool.isRequired,
-  isError: PropTypes.bool.isRequired,
-  isImage: PropTypes.bool.isRequired,
-  onClear: PropTypes.func.isRequired,
-  uploadedImage: PropTypes.string
-};
-CompleteStep.defaultProps = {
-  uploadedImage: null
-};
+}
+
+class ResponseError extends Error {
+  response;
+  status;
+  constructor(response, message) {
+    super(message);
+    this.name = 'ResponseError';
+    this.response = response;
+    this.status = response.status;
+  }
+}
+async function postData({
+  url,
+  method = 'POST',
+  ...httpOptions
+}, data, fetcher = fetch) {
+  const response = await fetcher(url, {
+    method,
+    body: data,
+    ...httpOptions
+  });
+  if (!response.ok) {
+    throw new ResponseError(response, response.statusText);
+  }
+  return response;
+}
 
-const PROCESS_STATE = ['error', 'success'];
+async function asyncFileRead(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => {
+      resolve(reader.result);
+    });
+    reader.addEventListener('error', () => {
+      reject(reader.error ?? new Error('Cannot read file'));
+    });
+    reader.readAsDataURL(file);
+  });
+}
+
+function isSizeValid(file, maxSize) {
+  return Number.isInteger(maxSize) && file.size <= maxSize;
+}
+
+function getFileType(file, file64) {
+  if (file.type) {
+    return file.type;
+  }
+  if (file64) {
+    const regex = /^data:([a-z]+\/[a-z]+);/;
+    const typeFromEncoded = regex.exec(file64);
+    if (typeFromEncoded?.[1]) {
+      return typeFromEncoded[1];
+    }
+  }
+  return '';
+}
+
+function isTypeValid(file, rule, file64) {
+  if (!rule) {
+    return false;
+  }
+  const allowedTypes = rule.replace(/\s/g, '').split(',');
+  const fileType = getFileType(file, file64);
+  if (rule === '*' || allowedTypes.includes(fileType)) {
+    return true;
+  }
+  return allowedTypes.some(type => {
+    const [typeAllowed, extensionAllowed] = type.split('/');
+    return extensionAllowed === '*' && fileType.includes(typeAllowed);
+  });
+}
 
-/*
- * This delay is required for the isError/isSuccess to be fired after isProcessing so the processIndicator, will be
- * rendered first and then updated with the right status.
- */
 const ANIMATION_FIX = 10;
 const MAX_SIZE_DEFAULT = 5000000;
-const UPLOAD_STEP_COMPONENTS = {
-  [UploadStep.UPLOAD_IMAGE_STEP]: UploadImageStep,
-  [UploadStep.MEDIA_UPLOAD_STEP]: MediaUploadStep
-};
+var UploadStep;
+(function (UploadStep) {
+  UploadStep["UPLOAD_IMAGE_STEP"] = "uploadImageStep";
+})(UploadStep || (UploadStep = {}));
 class Upload extends Component {
+  static defaultProps = {
+    animationDelay: 700,
+    maxSize: MAX_SIZE_DEFAULT,
+    psButtonDisabled: false,
+    size: 'md',
+    usAccept: 'image/*',
+    usDisabled: false,
+    usLabel: ''
+  };
+  dragCounter = 0;
+  timeouts = 0;
   constructor(props) {
     super(props);
-    this.dragCounter = 0;
-    this.timeouts = null;
     this.state = {
       fileName: '',
+      isDroppable: false,
       isComplete: false,
       isError: false,
       isImage: false,
       isProcessing: false,
       isSuccess: false,
-      response: null,
-      uploadedImage: null
+      response: undefined,
+      uploadedImage: undefined
     };
   }
   getErrorMessage(status) {
+    const {
+      csFailureText,
+      csTooLargeMessage,
+      csWrongTypeMessage,
+      maxSize,
+      intl
+    } = this.props;
     switch (status) {
       case 413:
-        return this.props.csTooLargeMessage || this.props.intl.formatMessage(messages.csTooLargeMessage, {
-          maxSize: this.props.maxSize / 1000000
+        return csTooLargeMessage || intl.formatMessage(messages.csTooLargeMessage, {
+          maxSize: maxSize / 1000000
         });
       case 415:
-        return this.props.csWrongTypeMessage || this.props.intl.formatMessage(messages.csWrongTypeMessage);
+        return csWrongTypeMessage || intl.formatMessage(messages.csWrongTypeMessage);
       default:
-        return this.props.csFailureText || this.props.intl.formatMessage(messages.csFailureText);
+        return csFailureText || intl.formatMessage(messages.csFailureText);
     }
   }
   onDragLeave(event) {
@@ -12596,7 +12409,7 @@ class Upload extends Component {
       });
     }
   }
-  onDrop(event) {
+  async onDrop(event) {
     const {
       isProcessing
     } = this.state;
@@ -12604,8 +12417,8 @@ class Upload extends Component {
     if (!isProcessing) {
       this.reset();
     }
-    if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
-      this.fileDropped(event.dataTransfer.files[0]);
+    if (event.dataTransfer?.files?.[0]) {
+      await this.fileDropped(event.dataTransfer.files[0]);
     }
   }
   onAnimationCompleted = async status => {
@@ -12614,77 +12427,70 @@ class Upload extends Component {
       isProcessing,
       fileName
     } = this.state;
-    // Success.
     const {
       animationDelay
     } = this.props;
-    if (isProcessing && status === Status.SUCCEEDED) {
+    if (isProcessing && status === 'succeeded') {
       const {
         onSuccess
       } = this.props;
-      this.timeouts = setTimeout(() => {
+      this.timeouts = window.setTimeout(() => {
         this.setState({
           isProcessing: false,
           isComplete: true
-        }, () => onSuccess ? onSuccess(response, fileName) : {});
+        }, onSuccess ? () => onSuccess(response, fileName) : undefined);
       }, animationDelay);
     }
-    // Failure.
-    if (isProcessing && status === Status.FAILED) {
+    if (isProcessing && status === 'failed') {
       const {
         onFailure
       } = this.props;
-      this.timeouts = setTimeout(() => {
+      this.timeouts = window.setTimeout(() => {
         this.setState({
           isProcessing: false,
           isComplete: true
-        }, () => onFailure ? onFailure(response) : {});
+        }, onFailure ? () => onFailure(response) : undefined);
       }, animationDelay);
     }
   };
-  asyncPost = file => {
+  asyncPost = async file => {
     const {
       httpOptions,
       fetcher
     } = this.props;
+    if (httpOptions == null) {
+      throw new Error('Cannot find HTTP options');
+    }
     const {
       fileInputName = file.name,
       data = {}
-    } = httpOptions || {};
+    } = httpOptions;
     const formData = new FormData();
     formData.append(fileInputName, file);
     Object.keys(data).forEach(key => formData.append(key, data[key]));
-    return postData(this.prepareHttpOptions(httpOptions), formData, fetcher);
+    return postData(httpOptions, formData, fetcher);
   };
   asyncResponse = (response, type) => {
     // Gives time to the animation callback to fire.
-    this.timeouts = setTimeout(() => {
+    this.timeouts = window.setTimeout(() => {
       this.setState({
         response,
-        isError: type === PROCESS_STATE[0],
-        isSuccess: type === PROCESS_STATE[1]
+        isError: type === 'error',
+        isSuccess: type === 'success'
       });
     }, ANIMATION_FIX);
   };
-  prepareHttpOptions = httpOptions => {
-    if (!httpOptions.url) {
-      throw new Error('You must supply a URL to post image data asynchronously');
-    }
-    return httpOptions;
-  };
   handleOnClear = event => {
     event.preventDefault();
     const {
       onCancel
     } = this.props;
-    if (onCancel) {
-      onCancel();
-    }
+    onCancel?.();
     this.reset();
   };
   reset = () => {
     this.dragCounter = 0;
-    clearTimeout(this.timeouts);
+    window.clearTimeout(this.timeouts);
     this.setState({
       isComplete: false,
       isError: false,
@@ -12724,14 +12530,12 @@ class Upload extends Component {
       isDroppable: false,
       isProcessing: true
     });
-    if (onStart) {
-      onStart(file);
-    }
+    onStart?.(file);
     let file64 = null;
     try {
       file64 = await asyncFileRead(file);
     } catch (error) {
-      this.asyncResponse(error, PROCESS_STATE[0]);
+      this.asyncResponse(error, 'error');
     }
     if (!file64) {
       return false;
@@ -12740,30 +12544,31 @@ class Upload extends Component {
       isImage: getFileType(file, file64).includes('image')
     });
     if (!isTypeValid(file, usAccept, file64)) {
-      const response = {
+      this.asyncResponse(new ResponseError(new Response(null, {
         status: 415,
         statusText: 'Unsupported Media Type'
-      };
-      this.asyncResponse(response, PROCESS_STATE[0]);
+      })), 'error');
       return false;
     }
     if (!isSizeValid(file, maxSize)) {
-      const response = {
+      this.asyncResponse(new ResponseError(new Response(null, {
         status: 413,
         statusText: 'Request Entity Too Large'
-      };
-      this.asyncResponse(response, PROCESS_STATE[0]);
+      })), 'error');
       return false;
     }
     if (httpOptions) {
       // Post the file to provided endpoint
-      return await this.asyncPost(file).then(response => this.asyncResponse(response, 'success')).then(() => {
-        this.showDataImage(file64);
-        return true;
-      }).catch(error => {
-        this.asyncResponse(error, PROCESS_STATE[0]);
+      let response;
+      try {
+        response = await this.asyncPost(file);
+      } catch (error) {
+        this.asyncResponse(error, 'error');
         return false;
-      });
+      }
+      this.asyncResponse(response, 'success');
+      this.showDataImage(file64);
+      return true;
     }
     // Post on form submit. And return the encoded image.
     this.showDataImage(file64);
@@ -12772,6 +12577,7 @@ class Upload extends Component {
   };
   render() {
     const {
+      maxSize,
       usDropMessage,
       usAccept,
       usButtonText,
@@ -12785,7 +12591,6 @@ class Upload extends Component {
       csButtonText,
       csSuccessText,
       size,
-      uploadStep,
       intl
     } = this.props;
     const {
@@ -12799,7 +12604,6 @@ class Upload extends Component {
       isSuccess,
       uploadedImage
     } = this.state;
-    const UploadStepComponent = UPLOAD_STEP_COMPONENTS[uploadStep] || UploadImageStep;
     return /*#__PURE__*/jsxs("div", {
       className: classNames('droppable-area', {
         droppable: true,
@@ -12813,10 +12617,10 @@ class Upload extends Component {
       }),
       onDragEnter: event => this.onDragEnter(event),
       onDragLeave: event => this.onDragLeave(event),
-      onDrop: event => this.onDrop(event),
+      onDrop: async event => this.onDrop(event),
       onDragOver: event => event.preventDefault(),
-      children: [!isProcessing && !isComplete && /*#__PURE__*/jsx(UploadStepComponent, {
-        fileDropped: file => this.fileDropped(file),
+      children: [!isProcessing && !isComplete && /*#__PURE__*/jsx(UploadImageStep, {
+        fileDropped: async file => this.fileDropped(file),
         isComplete: isComplete,
         usAccept: usAccept,
         usButtonText: usButtonText || intl.formatMessage(messages.usButtonText),
@@ -12824,7 +12628,7 @@ class Upload extends Component {
         usHelpImage: usHelpImage,
         usLabel: usLabel,
         usPlaceholder: usPlaceholder || intl.formatMessage(messages.usPlaceholder, {
-          maxSize: this.props.maxSize / 1000000
+          maxSize: maxSize / 1000000
         })
       }), isProcessing && /*#__PURE__*/jsx(ProcessingStep, {
         isComplete: isComplete,
@@ -12833,7 +12637,7 @@ class Upload extends Component {
         psButtonText: psButtonText || intl.formatMessage(messages.psButtonText),
         psProcessingText: psProcessingText || intl.formatMessage(messages.psProcessingText),
         psButtonDisabled: psButtonDisabled,
-        onAnimationCompleted: status => this.onAnimationCompleted(status),
+        onAnimationCompleted: async status => this.onAnimationCompleted(status),
         onClear: event => this.handleOnClear(event)
       }), (isSuccess || isError || isComplete) && /*#__PURE__*/jsx(CompleteStep, {
         fileName: fileName,
@@ -12841,7 +12645,7 @@ class Upload extends Component {
         isError: isError,
         isImage: isImage,
         csButtonText: csButtonText || intl.formatMessage(messages.csButtonText),
-        csFailureText: this.getErrorMessage(response?.status),
+        csFailureText: this.getErrorMessage(response != null && typeof response === 'object' && 'status' in response && typeof response.status === 'number' ? response.status : undefined),
         csSuccessText: csSuccessText || intl.formatMessage(messages.csSuccessText),
         uploadedImage: uploadedImage,
         onClear: event => this.handleOnClear(event)
@@ -12865,73 +12669,6 @@ class Upload extends Component {
     });
   }
 }
-Upload.propTypes = {
-  animationDelay: PropTypes.number,
-  csButtonText: PropTypes.string,
-  csFailureText: PropTypes.string,
-  csSuccessText: PropTypes.string,
-  csTooLargeMessage: PropTypes.string,
-  csWrongTypeMessage: PropTypes.string,
-  httpOptions: PropTypes.shape({
-    url: PropTypes.string.isRequired,
-    method: PropTypes.oneOf(['POST', 'PUT', 'PATCH']),
-    fileInputName: PropTypes.string,
-    data: PropTypes.object,
-    headers: PropTypes.object
-  }),
-  /**
-   * You can provide a fetcher function with the same interface as the global fetch function, which is used by default.
-   * function fetcher(input: RequestInfo, init?: RequestInit): Promise<Response>
-   */
-  fetcher: PropTypes.func,
-  maxSize: PropTypes.number,
-  onCancel: PropTypes.func,
-  onFailure: PropTypes.func,
-  onStart: PropTypes.func,
-  onSuccess: PropTypes.func,
-  psButtonText: PropTypes.string,
-  psButtonDisabled: PropTypes.bool,
-  psProcessingText: PropTypes.string,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /**
-   * You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".
-   * Using "*" will allow every file type to be uploaded.
-   */
-  usAccept: PropTypes.string,
-  usButtonText: PropTypes.string,
-  usDisabled: PropTypes.bool,
-  usDropMessage: PropTypes.string,
-  usHelpImage: PropTypes.node,
-  usLabel: PropTypes.string,
-  usPlaceholder: PropTypes.string,
-  uploadStep: PropTypes.oneOf(['uploadImageStep', 'mediaUploadStep'])
-};
-Upload.defaultProps = {
-  animationDelay: 700,
-  csButtonText: undefined,
-  csFailureText: undefined,
-  csSuccessText: undefined,
-  csTooLargeMessage: undefined,
-  csWrongTypeMessage: undefined,
-  httpOptions: null,
-  maxSize: MAX_SIZE_DEFAULT,
-  onCancel: null,
-  onFailure: null,
-  onStart: null,
-  onSuccess: null,
-  psButtonText: undefined,
-  psButtonDisabled: false,
-  psProcessingText: undefined,
-  size: 'md',
-  usAccept: 'image/*',
-  usButtonText: undefined,
-  usDisabled: false,
-  usDropMessage: undefined,
-  usHelpImage: '',
-  usLabel: '',
-  usPlaceholder: undefined,
-  uploadStep: UploadStep.UPLOAD_IMAGE_STEP
-};
 var Upload$1 = injectIntl(Upload);
 
 var MESSAGES$2 = defineMessages({
@@ -13462,7 +13199,7 @@ const UploadInput = ({
           name
         } = file;
         const id = generateFileId(file);
-        const allowedFileTypes = Array.isArray(fileTypes) ? fileTypes.join(',') : fileTypes;
+        const allowedFileTypes = typeof fileTypes === 'string' ? fileTypes : fileTypes.join(',');
         // Check if file type is valid
         if (!isTypeValid(file, allowedFileTypes)) {
           handleFileUploadFailure(file, formatMessage(MESSAGES$2.fileTypeNotSupported));
@@ -14589,5 +14326,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$1 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card, Carousel, Checkbox, CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead$1 as Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert, AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card$1 as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card, Carousel, Checkbox, CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer, DropFade, Emphasis, Field, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, Label, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCardGroup$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead$1 as Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.mjs.map