@transferwise/components 0.0.0-experimental-bb41164 → 0.0.0-experimental-f7a4236

package/build/index.js

@@ -11,13 +11,13 @@ var reactTransitionGroup = require('react-transition-group');
 var focus = require('@react-aria/focus');
 var reactDom = require('react-dom');
 var neptuneValidation = require('@transferwise/neptune-validation');
-var PropTypes = require('prop-types');
 var formatting = require('@transferwise/formatting');
 var react$1 = require('@headlessui/react');
 var mergeProps = require('merge-props');
 var react = require('@floating-ui/react');
 var overlays = require('@react-aria/overlays');
 var reactPopper = require('react-popper');
+var PropTypes = require('prop-types');
 var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
@@ -46,8 +46,8 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 
@@ -2744,15 +2744,15 @@ const SlidingPanel = /*#__PURE__*/React.forwardRef(({
   }));
 });
 
-const Drawer = ({
+function Drawer({
   children,
   className,
   footerContent,
   headerTitle,
   onClose,
-  open,
-  position
-}) => {
+  open = false,
+  position = 'right'
+}) {
   logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
   const {
     isMobile
@@ -2790,32 +2790,7 @@ const Drawer = ({
       })
     })
   });
-};
-Drawer.propTypes = {
-  /** The content to appear in the drawer body. */
-  children: PropTypes__default.default.node,
-  className: PropTypes__default.default.string,
-  /** The content to appear in the drawer footer. */
-  footerContent: PropTypes__default.default.node,
-  /** The content to appear in the drawer header. */
-  headerTitle: PropTypes__default.default.node,
-  /** The status of Drawer either open or not. */
-  open: PropTypes__default.default.bool,
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes__default.default.oneOf(['left', 'right', 'bottom']),
-  /** The action to perform on close click. */
-  onClose: PropTypes__default.default.func
-};
-Drawer.defaultProps = {
-  children: null,
-  className: undefined,
-  footerContent: null,
-  headerTitle: null,
-  onClose: null,
-  open: false,
-  position: exports.Position.RIGHT
-};
-var Drawer$1 = Drawer;
+}
 
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
@@ -2945,7 +2920,7 @@ const BottomSheet$1 = props => {
     };
   }
   const is400Zoom = useMedia(`(max-width: ${exports.Breakpoint.ZOOM_400}px)`);
-  return is400Zoom ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+  return is400Zoom ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
     open: props.open,
     className: props.className,
     onClose: close,
@@ -5538,7 +5513,7 @@ const Modal = ({
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
   const titleId = React.useId();
-  return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+  return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
     open: open,
     headerTitle: title,
     footerContent: footer,
@@ -10366,7 +10341,7 @@ function Select({
       , {
         className: classNames__default.default(s('tw-icon'), s('tw-chevron-up-icon'), s('tw-chevron'), s('bottom'), s('np-select-chevron'))
       })]
-    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
       open: open,
       headerTitle: searchPlaceholder || formatMessage(messages$2.searchPlaceholder),
       onClose: handleCloseOptions,
@@ -13055,13 +13030,8 @@ const UploadButton = ({
   maxFiles,
   onChange,
   id = DEFAULT_FILE_INPUT_ID,
-  uploadButtonTitle,
-  multipleFileInputWithFilesAdded
+  uploadButtonTitle
 }) => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
-  useDirection();
   const {
     formatMessage
   } = reactIntl.useIntl();
@@ -13124,7 +13094,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 {
@@ -13136,17 +13106,13 @@ const UploadButton = ({
     };
   }
   function renderDescription() {
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: /*#__PURE__*/jsxRuntime.jsxs(Body, {
-        className: classNames__default.default({
-          'text-primary': !disabled,
-          small: !isModern,
-          'font-weight-normal': !isModern
-        }),
-        children: [getDescription(), maxFiles && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/jsxRuntime.jsx("br", {}), `Maximum ${maxFiles} files.`]
-        })]
-      })
+    return /*#__PURE__*/jsxRuntime.jsxs(Body, {
+      className: classNames__default.default({
+        'text-primary': !disabled
+      }),
+      children: [getDescription(), maxFiles && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("br", {}), `Maximum ${maxFiles} files.`]
+      })]
     });
   }
   function renderButtonTitle() {
@@ -13180,14 +13146,11 @@ const UploadButton = ({
       onChange: filesSelected
     }), /*#__PURE__*/jsxRuntime.jsx("label", {
       htmlFor: id,
-      className: classNames__default.default('btn', 'np-upload-accent', 'np-upload-button', {
-        disabled,
-        'np-upload-input--square-top': multipleFileInputWithFilesAdded
-      }),
+      className: classNames__default.default('btn', 'np-upload-button'),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "media",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "np-upload-icon media-left",
+          className: "np-upload-icon media-middle media-left",
           children: /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {
             size: 24,
             className: "text-link"
@@ -13203,9 +13166,7 @@ const UploadButton = ({
         })]
       })
     }), isDropping && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames__default.default('droppable-card', 'droppable-dropping-card', 'droppable-card-content', {
-        'np-upload-input--square-top': multipleFileInputWithFilesAdded
-      }),
+      className: classNames__default.default('droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
       children: [/*#__PURE__*/jsxRuntime.jsx(icons.PlusCircle, {
         className: "m-x-1",
         size: 24
@@ -13252,7 +13213,7 @@ const UploadItemBody = ({
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: singleFileUpload ? 'np-upload-item--single-file' : '',
+    className: singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link',
     onClick: onDownload,
     children: children
   });
@@ -13277,20 +13238,15 @@ const UploadItem = ({
     status,
     filename,
     error,
+    errors,
     url
   } = file;
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const isSucceeded = [exports.Status.SUCCEEDED, undefined].includes(status) && !!url;
   const getIcon = () => {
-    if (error || status === exports.Status.FAILED) {
-      return isModern ? /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+    if (error || errors?.length || status === exports.Status.FAILED) {
+      return /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
         size: exports.Size.SMALL,
         sentiment: exports.Sentiment.NEGATIVE
-      }) : /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {
-        size: 24,
-        className: "text-negative"
       });
     }
     let processIndicator;
@@ -13305,31 +13261,37 @@ const UploadItem = ({
       case exports.Status.SUCCEEDED:
       case exports.Status.DONE:
       default:
-        processIndicator = isModern ? /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+        processIndicator = /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
           size: exports.Size.SMALL,
           sentiment: exports.Sentiment.POSITIVE
-        }) : /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
-          size: exports.Size.EXTRA_SMALL,
-          status: exports.Status.SUCCEEDED
         });
     }
-    if (isModern) {
-      return processIndicator;
+    return processIndicator;
+  };
+  const getErrorMessage = error => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
+  const getMultipleErrors = errors => {
+    if (!errors?.length) {
+      return null;
     }
-    return /*#__PURE__*/jsxRuntime.jsx("span", {
-      style: {
-        transform: 'scale(0.8335)'
-      },
-      children: processIndicator
-    }); // Scale down ProcessIndicator to be 20px*20px to match `icons`
+    if (errors?.length === 1) {
+      return getErrorMessage(errors[0]);
+    }
+    return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("li", {
+          children: getErrorMessage(error)
+        }, index);
+      })
+    });
   };
-  const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
-    if (error || status === exports.Status.FAILED) {
+    if (error || errors?.length || status === exports.Status.FAILED) {
       return /*#__PURE__*/jsxRuntime.jsx(Body, {
         type: exports.Typography.BODY_DEFAULT_BOLD,
         className: "text-negative",
-        children: getErrorMessage()
+        children: errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)
       });
     }
     switch (status) {
@@ -13399,7 +13361,7 @@ const UploadItem = ({
         }),
         type: "button",
         onClick: () => onDelete(),
-        children: /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.Bin, {
           size: 16
         })
       })]
@@ -13436,9 +13398,6 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle
 }) => {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   const [markedFileForDelete, setMarkedFileForDelete] = React.useState(null);
   const [mounted, setMounted] = React.useState(false);
   const {
@@ -13596,7 +13555,7 @@ const UploadInput = ({
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames__default.default('np-upload-input', className, {
-        disabled: isModern && disabled
+        disabled
       }),
       children: [uploadedFiles.map(file => /*#__PURE__*/jsxRuntime.jsx(UploadItem, {
         file: file,
@@ -13613,7 +13572,6 @@ const UploadInput = ({
         sizeLimit: sizeLimit,
         description: description,
         maxFiles: maxFiles,
-        multipleFileInputWithFilesAdded: multiple && uploadedFiles.length > 0,
         onChange: addFiles
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Modal, {
@@ -14690,7 +14648,7 @@ exports.DefinitionList = DefinitionList;
 exports.Dimmer = Dimmer$1;
 exports.DirectionProvider = DirectionProvider;
 exports.Display = Display;
-exports.Drawer = Drawer$1;
+exports.Drawer = Drawer;
 exports.DropFade = DropFade;
 exports.Emphasis = Emphasis;
 exports.Field = Field;