@transferwise/components 0.0.0-experimental-5ac3a46 → 0.0.0-experimental-215a547

package/build/index.mjs

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { forwardRef, useId, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useSyncExternalStore, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, Bin } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import commonmark from 'commonmark';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
@@ -13001,8 +13001,13 @@ const UploadButton = ({
   maxFiles,
   onChange,
   id = DEFAULT_FILE_INPUT_ID,
-  uploadButtonTitle
+  uploadButtonTitle,
+  multipleFileInputWithFilesAdded
 }) => {
+  const {
+    isModern
+  } = useTheme();
+  useDirection();
   const {
     formatMessage
   } = useIntl();
@@ -13065,7 +13070,7 @@ const UploadButton = ({
   function getAcceptedTypes() {
     const areAllFilesAllowed = getFileTypesDescription() === '*';
     if (areAllFilesAllowed) {
-      return {}; // file input by default allows all files
+      return {}; //file input by default allows all files
     }
     if (Array.isArray(fileTypes)) {
       return {
@@ -13077,13 +13082,17 @@ const UploadButton = ({
     };
   }
   function renderDescription() {
-    return /*#__PURE__*/jsxs(Body, {
-      className: classNames({
-        'text-primary': !disabled
-      }),
-      children: [getDescription(), maxFiles && /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx("br", {}), `Maximum ${maxFiles} files.`]
-      })]
+    return /*#__PURE__*/jsx(Fragment, {
+      children: /*#__PURE__*/jsxs(Body, {
+        className: classNames({
+          'text-primary': !disabled,
+          small: !isModern,
+          'font-weight-normal': !isModern
+        }),
+        children: [getDescription(), maxFiles && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("br", {}), `Maximum ${maxFiles} files.`]
+        })]
+      })
     });
   }
   function renderButtonTitle() {
@@ -13117,11 +13126,14 @@ const UploadButton = ({
       onChange: filesSelected
     }), /*#__PURE__*/jsx("label", {
       htmlFor: id,
-      className: classNames('btn', 'np-upload-button'),
+      className: classNames('btn', 'np-upload-accent', 'np-upload-button', {
+        disabled,
+        'np-upload-input--square-top': multipleFileInputWithFilesAdded
+      }),
       children: /*#__PURE__*/jsxs("div", {
         className: "media",
         children: [/*#__PURE__*/jsx("div", {
-          className: "np-upload-icon media-middle media-left",
+          className: "np-upload-icon media-left",
           children: /*#__PURE__*/jsx(Upload$2, {
             size: 24,
             className: "text-link"
@@ -13137,7 +13149,9 @@ const UploadButton = ({
         })]
       })
     }), isDropping && /*#__PURE__*/jsxs("div", {
-      className: classNames('droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
+      className: classNames('droppable-card', 'droppable-dropping-card', 'droppable-card-content', {
+        'np-upload-input--square-top': multipleFileInputWithFilesAdded
+      }),
       children: [/*#__PURE__*/jsx(PlusCircle, {
         className: "m-x-1",
         size: 24
@@ -13184,7 +13198,7 @@ const UploadItemBody = ({
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link',
+    className: singleFileUpload ? 'np-upload-item--single-file' : '',
     onClick: onDownload,
     children: children
   });
@@ -13209,15 +13223,20 @@ const UploadItem = ({
     status,
     filename,
     error,
-    errors,
     url
   } = file;
+  const {
+    isModern
+  } = useTheme();
   const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
   const getIcon = () => {
-    if (error || errors?.length || status === Status.FAILED) {
-      return /*#__PURE__*/jsx(StatusIcon, {
+    if (error || status === Status.FAILED) {
+      return isModern ? /*#__PURE__*/jsx(StatusIcon, {
         size: Size.SMALL,
         sentiment: Sentiment.NEGATIVE
+      }) : /*#__PURE__*/jsx(AlertCircle, {
+        size: 24,
+        className: "text-negative"
       });
     }
     let processIndicator;
@@ -13232,37 +13251,31 @@ const UploadItem = ({
       case Status.SUCCEEDED:
       case Status.DONE:
       default:
-        processIndicator = /*#__PURE__*/jsx(StatusIcon, {
+        processIndicator = isModern ? /*#__PURE__*/jsx(StatusIcon, {
           size: Size.SMALL,
           sentiment: Sentiment.POSITIVE
+        }) : /*#__PURE__*/jsx(ProcessIndicator, {
+          size: Size.EXTRA_SMALL,
+          status: Status.SUCCEEDED
         });
     }
-    return processIndicator;
-  };
-  const getErrorMessage = error => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
-  const getMultipleErrors = errors => {
-    if (!errors?.length) {
-      return null;
-    }
-    if (errors?.length === 1) {
-      return getErrorMessage(errors[0]);
+    if (isModern) {
+      return processIndicator;
     }
-    return /*#__PURE__*/jsx("ul", {
-      className: "np-upload-input-errors m-b-0",
-      children: errors.map((error, index) => {
-        // eslint-disable-next-line react/no-array-index-key
-        return /*#__PURE__*/jsx("li", {
-          children: getErrorMessage(error)
-        }, index);
-      })
-    });
+    return /*#__PURE__*/jsx("span", {
+      style: {
+        transform: 'scale(0.8335)'
+      },
+      children: processIndicator
+    }); // Scale down ProcessIndicator to be 20px*20px to match `icons`
   };
+  const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
-    if (error || errors?.length || status === Status.FAILED) {
+    if (error || status === Status.FAILED) {
       return /*#__PURE__*/jsx(Body, {
         type: Typography.BODY_DEFAULT_BOLD,
         className: "text-negative",
-        children: errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)
+        children: getErrorMessage()
       });
     }
     switch (status) {
@@ -13332,7 +13345,7 @@ const UploadItem = ({
         }),
         type: "button",
         onClick: () => onDelete(),
-        children: /*#__PURE__*/jsx(Bin, {
+        children: /*#__PURE__*/jsx(CrossCircleFill, {
           size: 16
         })
       })]
@@ -13369,6 +13382,9 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle
 }) => {
+  const {
+    isModern
+  } = useTheme();
   const [markedFileForDelete, setMarkedFileForDelete] = useState(null);
   const [mounted, setMounted] = useState(false);
   const {
@@ -13526,7 +13542,7 @@ const UploadInput = ({
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("div", {
       className: classNames('np-upload-input', className, {
-        disabled
+        disabled: isModern && disabled
       }),
       children: [uploadedFiles.map(file => /*#__PURE__*/jsx(UploadItem, {
         file: file,
@@ -13543,6 +13559,7 @@ const UploadInput = ({
         sizeLimit: sizeLimit,
         description: description,
         maxFiles: maxFiles,
+        multipleFileInputWithFilesAdded: multiple && uploadedFiles.length > 0,
         onChange: addFiles
       })]
     }), /*#__PURE__*/jsx(Modal, {