@skbkontur/react-ui 5.4.7-225d1.0 → 5.4.7-7ccf0.0

package/cjs/components/FileUploader/FileUploader.js

@@ -1,9 +1,14 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.FileUploaderDataTids = exports.FileUploader = void 0;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
-var _globalObject = require("@skbkontur/global-object");
+
+var _renderEnvironment = require("../../lib/renderEnvironment");
+var _globalObject = require("../../lib/globalObject");
+
+
+
+
 
 
 var _fileUtils = require("../../internal/FileUploaderControl/fileUtils");
-var _Emotion = require("../../lib/theming/Emotion");
 
 var _useMemoObject = require("../../hooks/useMemoObject");
 var _FileUploaderControlContext = require("../../internal/FileUploaderControl/FileUploaderControlContext");
@@ -14,6 +19,7 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _withFileUploaderControlProvider = require("../../internal/FileUploaderControl/withFileUploaderControlProvider");
 var _keyListener = require("../../lib/events/keyListener");
+
 var _FileUploaderFile = require("../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile");
 var _FileUploaderFileList = require("../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList");
 
@@ -25,8 +31,9 @@ var _useFileUploaderSize = require("../../internal/FileUploaderControl/hooks/use
 var _forwardRefAndName = require("../../lib/forwardRefAndName");
 var _FocusControlWrapper = require("../../internal/FocusControlWrapper");
 
+
 var _UploadIcon = require("./UploadIcon");
-var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["initialFiles", "disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "size", "renderFile"];
+var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["disabled", "error", "warning", "withValidationTooltip", "validationTooltipPosition", "withWarningIcon", "multiple", "uploaderText", "uploaderIcon", "view", "uploadButtonPosition", "validationSummary", "validationSummaryStart", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "size", "renderFile"];
 
 var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
 
@@ -57,6 +64,64 @@ var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -85,13 +150,31 @@ var FileUploaderDataTids = exports.FileUploaderDataTids = {
   input: 'FileUploader__input'
 };
 
-var defaultRenderFile = function defaultRenderFile(file, fileNode) {return fileNode;};
+var defaultRenderFile = function defaultRenderFile(
+_file,
+_fileNode,
+props) {return /*#__PURE__*/(
+    _react.default.createElement(_FileUploaderFile.FileUploaderFile, props));};
 
-var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', function (props, ref) {var _cx;
+var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', function (props, ref) {var _files$, _files$2, _ref2, _ref3, _ref4, _ref5, _ref6, _cx;
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var globalObject = (0, _renderEnvironment.useGlobal)();
+  var _useEmotion = (0, _renderEnvironment.useEmotion)(),cx = _useEmotion.cx;
+  var jsStyles = (0, _renderEnvironment.useStyles)(_FileUploader2.getJsStyles);
+  var jsRowStyles = (0, _renderEnvironment.useStyles)(_FileUploader2.getJsRowStyles);
+  var jsTileStyles = (0, _renderEnvironment.useStyles)(_FileUploader2.getJsTileStyles);
+  var keyListener = (0, _keyListener.useKeyListener)();
 
   var
-    initialFiles =
+    disabled =
+
+
+
+
+
+
+
+
 
 
 
@@ -108,10 +191,9 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
 
 
-    props.initialFiles,disabled = props.disabled,error = props.error,warning = props.warning,_props$multiple = props.multiple,multiple = _props$multiple === void 0 ? false : _props$multiple,_props$width = props.width,width = _props$width === void 0 ? theme.fileUploaderWidth : _props$width,_props$hideFiles = props.hideFiles,hideFiles = _props$hideFiles === void 0 ? false : _props$hideFiles,onBlur = props.onBlur,onFocus = props.onFocus,onChange = props.onChange,request = props.request,validateBeforeUpload = props.validateBeforeUpload,onRequestSuccess = props.onRequestSuccess,onRequestError = props.onRequestError,_props$size = props.size,size = _props$size === void 0 ? 'small' : _props$size,_props$renderFile = props.renderFile,renderFile = _props$renderFile === void 0 ? defaultRenderFile : _props$renderFile,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    props.disabled,error = props.error,warning = props.warning,_props$withValidation = props.withValidationTooltip,withValidationTooltip = _props$withValidation === void 0 ? false : _props$withValidation,validationTooltipPosition = props.validationTooltipPosition,_props$withWarningIco = props.withWarningIcon,withWarningIcon = _props$withWarningIco === void 0 ? false : _props$withWarningIco,_props$multiple = props.multiple,multiple = _props$multiple === void 0 ? false : _props$multiple,uploaderText = props.uploaderText,uploaderIcon = props.uploaderIcon,_props$view = props.view,view = _props$view === void 0 ? 'row' : _props$view,_props$uploadButtonPo = props.uploadButtonPosition,uploadButtonPosition = _props$uploadButtonPo === void 0 ? 'start' : _props$uploadButtonPo,_props$validationSumm = props.validationSummary,validationSummary = _props$validationSumm === void 0 ? 'auto' : _props$validationSumm,_props$validationSumm2 = props.validationSummaryStart,validationSummaryStart = _props$validationSumm2 === void 0 ? 5 : _props$validationSumm2,_props$width = props.width,width = _props$width === void 0 ? theme.fileUploaderWidth : _props$width,_props$hideFiles = props.hideFiles,hideFiles = _props$hideFiles === void 0 ? false : _props$hideFiles,onBlur = props.onBlur,onFocus = props.onFocus,onChange = props.onChange,request = props.request,validateBeforeUpload = props.validateBeforeUpload,onRequestSuccess = props.onRequestSuccess,onRequestError = props.onRequestError,_props$size = props.size,size = _props$size === void 0 ? 'small' : _props$size,_props$renderFile = props.renderFile,renderFile = _props$renderFile === void 0 ? defaultRenderFile : _props$renderFile,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
-  var _useContext =
-    (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files,setFiles = _useContext.setFiles,removeFile = _useContext.removeFile,reset = _useContext.reset,setFileValidationResult = _useContext.setFileValidationResult,isMinLengthReached = _useContext.isMinLengthReached;
+  var _useContext = (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files,setFiles = _useContext.setFiles,removeFile = _useContext.removeFile,reset = _useContext.reset,setFileValidationResult = _useContext.setFileValidationResult;
 
   var locale = (0, _useControlLocale.useControlLocale)();
 
@@ -121,7 +203,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
   var isAsync = !!request;
   var isSingleMode = !multiple;
 
-  var _useState = (0, _react.useState)(true),isLinkVisible = _useState[0],setIsLinkVisible = _useState[1];
+  var _useState = (0, _react.useState)(false),hovered = _useState[0],setHovered = _useState[1];
   var upload = (0, _useUpload.useUpload)(request, onRequestSuccess, onRequestError);
 
   var tryValidateAndUpload = (0, _react.useCallback)(
@@ -131,30 +213,67 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
                 if (!validationMessage) {
                   isAsync && upload(file);
+                } else if (typeof validationMessage === 'object') {
+                  setFileValidationResult(
+                    file.id,
+                    _FileUploaderFileValidationResult.FileUploaderFileValidationResult.error(validationMessage.message),
+                    validationMessage.status
+                  );
                 } else {
-                  setFileValidationResult(file.id, _FileUploaderFileValidationResult.FileUploaderFileValidationResult.error(validationMessage));
+                  setFileValidationResult(
+                    file.id,
+                    _FileUploaderFileValidationResult.FileUploaderFileValidationResult.error(validationMessage),
+                    _fileUtils.FileUploaderFileStatus.Error
+                  );
                 }case 7:case "end":return _context.stop();}}, _callee);}));return function (_x) {return _ref.apply(this, arguments);};}()
       );
     },
     [validateBeforeUpload, isAsync, upload, setFileValidationResult]
   );
 
+  var isTileView = view === 'tile';
+  var jsViewStyles = isTileView ? jsTileStyles : jsRowStyles;
+
   var sizeClassName = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
-    small: _FileUploader2.jsStyles.sizeSmall(theme),
-    medium: _FileUploader2.jsStyles.sizeMedium(theme),
-    large: _FileUploader2.jsStyles.sizeLarge(theme)
+    small: jsViewStyles.sizeSmall(theme),
+    medium: jsViewStyles.sizeMedium(theme),
+    large: jsViewStyles.sizeLarge(theme)
+  });
+
+  var uploadButtonTileWithFileClassName = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
+    small: jsTileStyles.uploadButtonTileWithFileSmall(theme),
+    medium: jsTileStyles.uploadButtonTileWithFileMedium(theme),
+    large: jsTileStyles.uploadButtonTileWithFileLarge(theme)
+  });
+
+  var uploadButtonIconGapClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
+    small: jsViewStyles.uploadButtonIconGapSmall(theme),
+    medium: jsViewStyles.uploadButtonIconGapMedium(theme),
+    large: jsViewStyles.uploadButtonIconGapLarge(theme)
   });
 
   var sizeIconClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
-    small: _FileUploader2.jsStyles.iconSmall(theme),
-    medium: _FileUploader2.jsStyles.iconMedium(theme),
-    large: _FileUploader2.jsStyles.iconLarge(theme)
+    small: jsStyles.iconSmall(theme),
+    medium: jsStyles.iconMedium(theme),
+    large: jsStyles.iconLarge(theme)
+  });
+
+  var sizeWrapperClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
+    small: jsTileStyles.uploadButtonWrapperSmall(theme),
+    medium: jsTileStyles.uploadButtonWrapperMedium(theme),
+    large: jsTileStyles.uploadButtonWrapperLarge(theme)
+  });
+
+  var sizeWrapperEmptyFileClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
+    small: jsTileStyles.uploadButtonWrapperEmptyFileSmall(theme),
+    medium: jsTileStyles.uploadButtonWrapperEmptyFileMedium(theme),
+    large: jsTileStyles.uploadButtonWrapperEmptyFileLarge(theme)
   });
 
   var contentInnerClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
-    small: _FileUploader2.jsStyles.contentInnerSmall(theme),
-    medium: _FileUploader2.jsStyles.contentInnerMedium(theme),
-    large: _FileUploader2.jsStyles.contentInnerLarge(theme)
+    small: jsStyles.contentInnerSmall(theme),
+    medium: jsStyles.contentInnerMedium(theme),
+    large: jsStyles.contentInnerLarge(theme)
   });
 
   /** common part **/
@@ -192,6 +311,10 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
       var dataTransfer = event.dataTransfer;
       if (dataTransfer) {var _dataTransfer$files;
+        if (isSingleMode && dataTransfer.files.length > 1) {
+          dataTransfer.dropEffect = 'none';
+          return;
+        }
         if (((_dataTransfer$files = dataTransfer.files) == null ? void 0 : _dataTransfer$files.length) > 0) {
           inputRef.current && (inputRef.current.files = dataTransfer.files);
           handleChange(dataTransfer.files);
@@ -204,12 +327,12 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
   var _useDrop = (0, _useDrop3.useDrop)({ onDrop: handleDrop }),isDraggable = _useDrop.isDraggable,labelRef = _useDrop.ref;
   var _useDrop2 = (0, _useDrop3.useDrop)(),isWindowDraggable = _useDrop2.isDraggable,windowRef = _useDrop2.ref;
 
-  if ((0, _globalObject.isBrowser)(_globalObject.globalObject)) {
-    windowRef.current = _globalObject.globalObject.document;
+  if ((0, _globalObject.isBrowser)(globalObject)) {
+    windowRef.current = globalObject.document;
   }
 
   var focus = (0, _react.useCallback)(function () {var _inputRef$current;
-    _keyListener.keyListener.isTabPressed = true;
+    keyListener.isTabPressed = true;
     (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
   }, []);
 
@@ -217,7 +340,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.blur();
   }, []);
 
-  var handleRemoveFile = (0, _react.useCallback)(
+  var removeFileFromNativeInput = (0, _react.useCallback)(
     function (fileId) {
       var dataTransfer = new DataTransfer();
       files.
@@ -230,12 +353,12 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     [files]
   );
 
-  var handleExternalFileDeletion = (0, _react.useCallback)(
+  var handleRemoveFile = (0, _react.useCallback)(
     function (fileId) {
       removeFile(fileId);
-      handleRemoveFile(fileId);
+      removeFileFromNativeInput(fileId);
     },
-    [handleRemoveFile, removeFile]
+    [removeFileFromNativeInput, removeFile]
   );
 
   var handleReset = (0, _react.useCallback)(function () {
@@ -250,24 +373,25 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
         focus: focus,
         blur: blur,
         reset: handleReset,
-        removeFile: handleExternalFileDeletion,
+        removeFile: handleRemoveFile,
         getRootNode: function getRootNode() {return rootNodeRef.current;}
       };},
-    [ref, blur, focus, handleReset, handleExternalFileDeletion]
+    [ref, blur, focus, handleReset, handleRemoveFile]
   );
 
   var _useState2 = (0, _react.useState)(false),focusedByTab = _useState2[0],setFocusedByTab = _useState2[1];
   var handleInputChange = function handleInputChange(event) {
     onChange == null || onChange(event);
     handleChange(event.target.files);
+    setHovered(false);
   };
 
   var handleFocus = function handleFocus(e) {
     if (!disabled) {
       // focus event fires before keyDown eventlistener
       // so we should check tabPressed in async way
-      _globalObject.globalObject.requestAnimationFrame == null || _globalObject.globalObject.requestAnimationFrame(function () {
-        if (_keyListener.keyListener.isTabPressed) {
+      globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
+        if (keyListener.isTabPressed) {
           setFocusedByTab(true);
         }
       });
@@ -282,38 +406,74 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     }
   };
 
-  var _useState3 = (0, _react.useState)(false),hovered = _useState3[0],setHovered = _useState3[1];
+  var hasFiles = files.length > 0;
+  var hasOneFile = files.length === 1;
+  var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
 
-  var uploadButtonClassNames = (0, _Emotion.cx)(
-    _FileUploader2.jsStyles.uploadButton(theme),
+  var hasError = !!error || ((_files$ = files[0]) == null ? void 0 : _files$.status) === _fileUtils.FileUploaderFileStatus.Error;
+  var hasWarning = !!warning || ((_files$2 = files[0]) == null ? void 0 : _files$2.status) === _fileUtils.FileUploaderFileStatus.Warning;
+
+  var uploadButtonClassNames = cx(
+    jsStyles.uploadButton(theme),
+    jsViewStyles.uploadButton(),
     sizeClassName,
-    focusedByTab && _FileUploader2.jsStyles.uploadButtonFocus(theme),
-    disabled && _FileUploader2.jsStyles.disabled(theme),
-    !disabled && hovered && _FileUploader2.jsStyles.hovered(theme),
-    !!warning && _FileUploader2.jsStyles.warning(theme),
-    !!error && _FileUploader2.jsStyles.error(theme),
-    isDraggable && !disabled && _FileUploader2.jsStyles.dragOver(theme)
+    hasOneFileForSingle && jsViewStyles.uploadButtonWithFile(theme),
+    focusedByTab && jsStyles.uploadButtonFocus(theme),
+    disabled && (_ref2 = {}, _ref2[
+    jsStyles.disabled(theme)] = true, _ref2[
+    jsStyles.disabledBackground(theme)] = !hasFiles, _ref2),
+
+    (focusedByTab || !hasOneFileForSingle) && (_ref3 = {}, _ref3[
+    jsStyles.warningButton(theme)] = hasWarning, _ref3[
+    jsStyles.errorButton(theme)] = hasError, _ref3),
+
+
+    hasOneFileForSingle && (_ref4 = {}, _ref4[
+    uploadButtonTileWithFileClassName] = isTileView, _ref4[
+    jsStyles.warningFile(theme)] = (!isTileView || hovered) && hasWarning, _ref4[
+    jsStyles.errorFile(theme)] = (!isTileView || hovered) && hasError, _ref4),
+
+    !disabled &&
+    hovered && (_ref5 = {}, _ref5[
+    jsStyles.hovered(theme)] = true, _ref5),
+
+    isDraggable && !disabled && jsStyles.dragOver(theme)
   );
 
   var canDrop = isWindowDraggable && !disabled;
-  var uploadButtonWrapperClassNames = (0, _Emotion.cx)(canDrop && _FileUploader2.jsStyles.windowDragOver(theme));
+  var uploadButtonWrapperClassNames = cx(
+    isTileView && (_ref6 = {}, _ref6[
+    sizeWrapperClass] = true, _ref6[
+    sizeWrapperEmptyFileClass] = !hasOneFileForSingle, _ref6),
+
+    jsViewStyles.uploadButtonWrapper(),
+    canDrop && jsStyles.windowDragOver(theme)
+  );
 
-  var uploadButtonIconClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.icon(theme), sizeIconClass, disabled && _FileUploader2.jsStyles.iconDisabled(theme));
+  var uploadButtonIconClassNames = cx(
+    jsStyles.icon(theme),
+    sizeIconClass,
+    disabled && jsStyles.iconDisabled(theme),
+    uploadButtonIconGapClass
+  );
 
-  var hasOneFile = files.length === 1;
-  var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
+  var rootClassNames = cx(jsStyles.root(theme), !isTileView && jsRowStyles.root());
 
-  var contentClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.content(), hasOneFileForSingle && _FileUploader2.jsStyles.contentWithFiles());
+  var contentClassNames = cx(jsViewStyles.content(), (_cx = {}, _cx[
+  jsViewStyles.contentWithFiles()] = hasOneFileForSingle, _cx[
+  contentInnerClass] = !isTileView && (!files.length || !isSingleMode), _cx)
+  );
 
-  var linkClassNames = (0, _Emotion.cx)(
-    _FileUploader2.jsStyles.link(theme),
-    !disabled && hovered && _FileUploader2.jsStyles.linkHovered(theme),
-    disabled && _FileUploader2.jsStyles.linkDisabled(theme)
+  var afterLinkTextClassNames = cx(
+    _FileUploader2.globalClasses.afterLinkText,
+    hasOneFileForSingle ? jsStyles.afterLinkText_HasFiles() : jsStyles.afterLinkText()
   );
 
-  (0, _react.useEffect)(function () {
-    setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);
-  }, [isMinLengthReached, hasOneFileForSingle]);
+  var linkClassNames = cx(
+    jsStyles.link(theme),
+    !disabled && hovered && jsStyles.linkHovered(theme),
+    disabled && jsStyles.linkDisabled(theme)
+  );
 
   (0, _react.useEffect)(function () {
     if (!files || !files.length || !inputRef.current) {
@@ -327,55 +487,77 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
   var rootNodeRef = (0, _react.useRef)(null);
 
-  var iconSizes = {
-    small: parseInt(theme.btnIconSizeSmall),
-    medium: parseInt(theme.btnIconSizeMedium),
-    large: parseInt(theme.btnIconSizeLarge)
+  var icon = uploaderIcon != null ? uploaderIcon : /*#__PURE__*/_react.default.createElement(_UploadIcon.UploadIcon, { size: size, view: view });
+  var chooseFileText = uploaderText != null ? uploaderText : locale.chooseFile;
+  var chooseFileLocale = "" + chooseFileText + String.fromCharCode(0xa0); /*   */
+  var hideUploaderText = isTileView && uploaderText === '';
+  var renderChooseFileText = function renderChooseFileText() {return (
+      !hideUploaderText && /*#__PURE__*/
+      _react.default.createElement("span", { "data-tid": FileUploaderDataTids.link, className: linkClassNames },
+      !hasOneFileForSingle && chooseFileLocale
+      ));};
+
+
+  var renderFileList = function renderFileList() {
+    return (
+      !hideFiles &&
+      !isSingleMode &&
+      !!files.length && /*#__PURE__*/
+      _react.default.createElement(_FileUploaderFileList.FileUploaderFileList, {
+        renderFile: renderFile,
+        size: size,
+        view: view,
+        onRemove: handleRemoveFile,
+        validationTooltipPosition: validationTooltipPosition,
+        withValidationTooltip: withValidationTooltip,
+        validationSummary: validationSummary,
+        validationSummaryStart: validationSummaryStart,
+        withWarningIcon: withWarningIcon,
+        disabled: disabled }
+      ));
+
+
+  };
+
+  var fileProps = {
+    file: files[0],
+    size: size,
+    view: view,
+    onRemove: handleRemoveFile,
+    error: error,
+    warning: warning,
+    withValidationTooltip: withValidationTooltip,
+    validationTooltipPosition: validationTooltipPosition,
+    withWarningIcon: withWarningIcon,
+    hovered: hovered,
+    disabled: disabled
   };
-  var icon = /*#__PURE__*/_react.default.createElement(_UploadIcon.UploadIcon, { size: iconSizes[size] });
+
+  var fileElement = renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, fileProps), fileProps);
 
   return /*#__PURE__*/(
     _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
     _react.default.createElement("div", {
       "data-tid": FileUploaderDataTids.root,
-      className: _FileUploader2.jsStyles.root(theme),
-      style: (0, _useMemoObject.useMemoObject)({ width: width }),
+      className: rootClassNames,
+      style: (0, _useMemoObject.useMemoObject)({ width: isTileView && !multiple ? theme.fileUploaderTileWidth : width }),
       ref: rootNodeRef },
 
-    !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/
-    _react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile, size: size, onRemove: handleRemoveFile }), /*#__PURE__*/
-
+    uploadButtonPosition === 'end' && renderFileList(), /*#__PURE__*/
     _react.default.createElement("div", { className: uploadButtonWrapperClassNames }, /*#__PURE__*/
     _react.default.createElement("label", {
       onMouseEnter: function onMouseEnter() {return setHovered(true);},
       onMouseLeave: function onMouseLeave() {return setHovered(false);},
       ref: labelRef,
-      className: uploadButtonClassNames }, /*#__PURE__*/
-
-    _react.default.createElement("div", {
-      "data-tid": FileUploaderDataTids.content,
-      className: (0, _Emotion.cx)(contentClassNames, (_cx = {}, _cx[contentInnerClass] = !files.length || !isSingleMode, _cx)) },
-
-    isLinkVisible && /*#__PURE__*/
-    _react.default.createElement("span", { "data-tid": FileUploaderDataTids.link, className: linkClassNames },
-    hasOneFileForSingle ? locale.choosedFile : locale.chooseFile
-    ),
-
-    isLinkVisible && String.fromCharCode(0xa0) /*   */, /*#__PURE__*/
-    _react.default.createElement("div", {
-      className: (0, _Emotion.cx)(
-        _FileUploader2.globalClasses.afterLinkText,
-        hasOneFileForSingle ? _FileUploader2.jsStyles.afterLinkText_HasFiles(theme) : _FileUploader2.jsStyles.afterLinkText(theme)
-      ) },
-
-    hasOneFileForSingle ? /*#__PURE__*/
-    _react.default.createElement("div", { ref: fileDivRef, className: _FileUploader2.jsStyles.singleFile() },
-    renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0], size: size, onRemove: handleRemoveFile }))
-    ) : /*#__PURE__*/
-
-    _react.default.createElement(_react.default.Fragment, null,
-    locale.orDragHere, "\xA0", /*#__PURE__*/
-    _react.default.createElement("div", { className: uploadButtonIconClassNames }, icon)
+      className: uploadButtonClassNames },
+
+    !hasOneFileForSingle && /*#__PURE__*/_react.default.createElement("div", { className: uploadButtonIconClassNames }, icon), /*#__PURE__*/
+    _react.default.createElement("div", { "data-tid": FileUploaderDataTids.content, className: contentClassNames },
+    renderChooseFileText(), /*#__PURE__*/
+    _react.default.createElement("div", { className: afterLinkTextClassNames },
+    hasOneFileForSingle && /*#__PURE__*/
+    _react.default.createElement("div", { ref: fileDivRef, className: jsStyles.singleFile() },
+    fileElement
     )
 
     )
@@ -389,7 +571,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
       type: "file",
       disabled: disabled,
       multiple: multiple,
-      className: _FileUploader2.jsStyles.visuallyHidden(),
+      className: jsStyles.visuallyHidden(),
       onClick: stopPropagation,
       onChange: handleInputChange,
       onFocus: handleFocus,
@@ -397,7 +579,8 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     )
     )
     )
-    )
+    ),
+    uploadButtonPosition === 'start' && renderFileList()
     )
     ));