@skbkontur/react-ui 4.6.0 → 4.7.0-revert-datatids

package/components/Dropdown/Dropdown.d.ts

@@ -1,128 +1,125 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MenuHeader } from '../MenuHeader';
-import { MenuItem } from '../MenuItem';
-import { MenuSeparator } from '../MenuSeparator';
-import { ButtonSize, ButtonUse } from '../Button';
-import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
-export interface DropdownProps extends CommonProps {
-    /**
-     * Подпись на кнопке.
-     */
-    caption: React.ReactNode;
-    /**
-     * Иконка слева от текста кнопки
-     */
-    icon?: React.ReactElement<any>;
-    width?: React.CSSProperties['width'];
-    /** @ignore */
-    _renderButton?: (params: any) => JSX.Element;
-    /**
-     * Отключает использование портала
-     */
-    disablePortal?: boolean;
-    /**
-     * Визуально отключает Dropdown
-     */
-    disabled?: boolean;
-    /**
-     * Состояние валидации при ошибке.
-     */
-    error?: boolean;
-    /**
-     * Состояние валидации при предупреждении.
-     */
-    warning?: boolean;
-    maxMenuHeight?: number;
-    menuAlign?: 'left' | 'right';
-    menuWidth?: number | string;
-    size?: ButtonSize;
-    /**
-     * Смотри Button.
-     */
-    use?: ButtonUse;
-    /**
-     * Вызывается при закрытии меню.
-     */
-    onClose?: () => void;
-    /**
-     * Вызывается при открытии меню.
-     */
-    onOpen?: () => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
-    onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
-}
-export declare const DropdownDataTids: {
-    readonly root: "Dropdown__root";
-};
-/**
- * Выпадающее меню.
- *
- */
-export declare class Dropdown extends React.Component<DropdownProps> {
-    static __KONTUR_REACT_UI__: string;
-    static Header: typeof MenuHeader;
-    static MenuItem: typeof MenuItem;
-    static Separator: typeof MenuSeparator;
-    static propTypes: {
-        /**
-         * Подпись на кнопке.
-         */
-        caption: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        /**
-         * Отключает использование портала
-         */
-        disablePortal: PropTypes.Requireable<boolean>;
-        /**
-         * Визуально отключает Dropdown
-         */
-        disabled: PropTypes.Requireable<boolean>;
-        /**
-         * Визуально показать наличие ошибки.
-         */
-        error: PropTypes.Requireable<boolean>;
-        /**
-         * Иконка слева от текста кнопки
-         */
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        maxMenuHeight: PropTypes.Requireable<number>;
-        menuAlign: PropTypes.Requireable<string>;
-        menuWidth: PropTypes.Requireable<string | number>;
-        size: PropTypes.Requireable<string>;
-        /**
-         * Смотри Button.
-         */
-        use: PropTypes.Requireable<any>;
-        /**
-         * Визуально показать наличие предупреждения.
-         */
-        warning: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<string | number>;
-        /**
-         * Вызывается при закрытии меню.
-         */
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * Вызывается при открытии меню.
-         */
-        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    private _select;
-    private setRootNode;
-    private theme;
-    render(): JSX.Element;
-    renderMain: ({ caption, icon, ...props }: CommonWrapperRestProps<DropdownProps>) => JSX.Element;
-    /**
-     * @public
-     */
-    open(): void;
-    /**
-     * @public
-     */
-    close(): void;
-    private _refSelect;
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MenuHeader } from '../MenuHeader';
+import { MenuItem } from '../MenuItem';
+import { MenuSeparator } from '../MenuSeparator';
+import { ButtonSize, ButtonUse } from '../Button';
+import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
+export interface DropdownProps extends CommonProps {
+    /**
+     * Подпись на кнопке.
+     */
+    caption: React.ReactNode;
+    /**
+     * Иконка слева от текста кнопки
+     */
+    icon?: React.ReactElement<any>;
+    width?: React.CSSProperties['width'];
+    /** @ignore */
+    _renderButton?: (params: any) => JSX.Element;
+    /**
+     * Отключает использование портала
+     */
+    disablePortal?: boolean;
+    /**
+     * Визуально отключает Dropdown
+     */
+    disabled?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     */
+    error?: boolean;
+    /**
+     * Состояние валидации при предупреждении.
+     */
+    warning?: boolean;
+    maxMenuHeight?: number;
+    menuAlign?: 'left' | 'right';
+    menuWidth?: number | string;
+    size?: ButtonSize;
+    /**
+     * Смотри Button.
+     */
+    use?: ButtonUse;
+    /**
+     * Вызывается при закрытии меню.
+     */
+    onClose?: () => void;
+    /**
+     * Вызывается при открытии меню.
+     */
+    onOpen?: () => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+/**
+ * Выпадающее меню.
+ *
+ */
+export declare class Dropdown extends React.Component<DropdownProps> {
+    static __KONTUR_REACT_UI__: string;
+    static Header: typeof MenuHeader;
+    static MenuItem: typeof MenuItem;
+    static Separator: typeof MenuSeparator;
+    static propTypes: {
+        /**
+         * Подпись на кнопке.
+         */
+        caption: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /**
+         * Отключает использование портала
+         */
+        disablePortal: PropTypes.Requireable<boolean>;
+        /**
+         * Визуально отключает Dropdown
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Визуально показать наличие ошибки.
+         */
+        error: PropTypes.Requireable<boolean>;
+        /**
+         * Иконка слева от текста кнопки
+         */
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        maxMenuHeight: PropTypes.Requireable<number>;
+        menuAlign: PropTypes.Requireable<string>;
+        menuWidth: PropTypes.Requireable<string | number>;
+        size: PropTypes.Requireable<string>;
+        /**
+         * Смотри Button.
+         */
+        use: PropTypes.Requireable<any>;
+        /**
+         * Визуально показать наличие предупреждения.
+         */
+        warning: PropTypes.Requireable<boolean>;
+        width: PropTypes.Requireable<string | number>;
+        /**
+         * Вызывается при закрытии меню.
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Вызывается при открытии меню.
+         */
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    private _select;
+    private setRootNode;
+    private theme;
+    render(): JSX.Element;
+    renderMain: ({ caption, icon, ...props }: CommonWrapperRestProps<DropdownProps>) => JSX.Element;
+    /**
+     * @public
+     */
+    open(): void;
+    /**
+     * @public
+     */
+    close(): void;
+    private _refSelect;
+}

package/components/Dropdown/index.d.ts

@@ -1 +1 @@
-export * from './Dropdown';
+export * from './Dropdown';

package/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,62 +1,62 @@
-import React from 'react';
-import { PopupMenuProps } from '../../internal/PopupMenu';
-import { PopupPositionsType } from '../../internal/Popup';
-import { CommonProps } from '../../internal/CommonWrapper';
-export interface DropdownMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
-    /** Максимальная высота меню */
-    menuMaxHeight?: React.CSSProperties['maxWidth'];
-    /** Ширина меню */
-    menuWidth?: React.CSSProperties['width'];
-    /** Ширина caption */
-    width?: React.CSSProperties['width'];
-    /**
-     * Элемент или функция возвращающая элемент,
-     * если передана, используется вместо `caption`,
-     * в таком случае управлять открытием и закрытием меню
-     * придется в этой функции
-     */
-    caption: PopupMenuProps['caption'];
-    /**
-     * Произвольный элемент, который будет отрендерен в шапке меню.
-     *
-     * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
-     */
-    header?: React.ReactNode;
-    /**
-     * Произвольный элемент, который будет отрендерен в подвале меню.
-     *
-     * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
-     */
-    footer?: React.ReactNode;
-    /**
-     *  Список позиций доступных для расположения выпадашки относительно `caption`.
-     *
-     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
-     *
-     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
-     * @default ['bottom left', 'bottom right', 'top left', 'top right']
-     */
-    positions?: PopupPositionsType[];
-    /**
-     * Не показывать анимацию
-     */
-    disableAnimations?: boolean;
-}
-declare type DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;
-/**
- * Меню, раскрывающееся по клику на переданный в `caption` элемент
- */
-export declare class DropdownMenu extends React.Component<DropdownMenuProps> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: DefaultProps;
-    private getProps;
-    private popupMenu;
-    private setRootNode;
-    constructor(props: DropdownMenuProps);
-    render(): JSX.Element;
-    renderMain(): JSX.Element | null;
-    open: () => void;
-    close: () => void;
-    private refPopupMenu;
-}
-export {};
+import React from 'react';
+import { PopupMenuProps } from '../../internal/PopupMenu';
+import { PopupPositionsType } from '../../internal/Popup';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface DropdownMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
+    /** Максимальная высота меню */
+    menuMaxHeight?: React.CSSProperties['maxWidth'];
+    /** Ширина меню */
+    menuWidth?: React.CSSProperties['width'];
+    /** Ширина caption */
+    width?: React.CSSProperties['width'];
+    /**
+     * Элемент или функция возвращающая элемент,
+     * если передана, используется вместо `caption`,
+     * в таком случае управлять открытием и закрытием меню
+     * придется в этой функции
+     */
+    caption: PopupMenuProps['caption'];
+    /**
+     * Произвольный элемент, который будет отрендерен в шапке меню.
+     *
+     * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
+     */
+    header?: React.ReactNode;
+    /**
+     * Произвольный элемент, который будет отрендерен в подвале меню.
+     *
+     * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
+     */
+    footer?: React.ReactNode;
+    /**
+     *  Список позиций доступных для расположения выпадашки относительно `caption`.
+     *
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
+     *
+     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
+     * @default ['bottom left', 'bottom right', 'top left', 'top right']
+     */
+    positions?: PopupPositionsType[];
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
+}
+declare type DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;
+/**
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент
+ */
+export declare class DropdownMenu extends React.Component<DropdownMenuProps> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    private popupMenu;
+    private setRootNode;
+    constructor(props: DropdownMenuProps);
+    render(): JSX.Element;
+    renderMain(): JSX.Element | null;
+    open: () => void;
+    close: () => void;
+    private refPopupMenu;
+}
+export {};

package/components/DropdownMenu/DropdownMenu.md

@@ -126,7 +126,7 @@ import { MenuItem } from '@skbkontur/react-ui';
 Пример с чекбоксом внутри MenuItem.
 
 ```jsx harmony
-import { MenuItem, Checkbox, Button } from '@skbkontur/react-ui';
+import { MenuItem, Checkbox, Button, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
 
 const [checked, setChecked] = React.useState(false);
 
@@ -143,14 +143,16 @@ const renderCaption = ({ openMenu, closeMenu }) => {
 
 <DropdownMenu caption={renderCaption}>
   <MenuItem onClick={(e) => e.preventDefault()}>Просто пункт</MenuItem>
-  <MenuItem
-    onClick={(e) => {
-      e.preventDefault();
-      setChecked(!checked);
-    }}
-  >
-    <Checkbox checked={checked}>с чекбоксом</Checkbox>
-  </MenuItem>
+  <ThemeContext.Provider value={ThemeFactory.create({ menuItemHoverBg: 'initial' })}>
+    <MenuItem
+      onClick={(e) => {
+        e.preventDefault();
+        setChecked(!checked);
+      }}
+    >
+      <Checkbox checked={checked}>с чекбоксом</Checkbox>
+    </MenuItem>
+  </ThemeContext.Provider>
   <MenuItem
     onClick={(e) => {
       e.preventDefault();

package/components/DropdownMenu/index.d.ts

@@ -1 +1 @@
-export * from './DropdownMenu';
+export * from './DropdownMenu';

package/components/FileUploader/FileUploader/FileUploader.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "renderFile"];
+var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "size", "renderFile"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useContext, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { getAttachedFile } from "../../../internal/FileUploaderControl/fileUtils";
 import { cx } from "../../../lib/theming/Emotion";
 import { useMemoObject } from "../../../hooks/useMemoObject";
@@ -20,24 +20,19 @@ import { FileUploaderFileList } from "../../../internal/FileUploaderControl/File
 import { isBrowser } from "../../../lib/client";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { FileUploaderFileValidationResult } from "../../../internal/FileUploaderControl/FileUploaderFileValidationResult";
+import { useFileUploaderSize } from "../../../internal/FileUploaderControl/hooks/useFileUploaderSize";
 import { jsStyles } from "../FileUploader.styles";
 
 var stopPropagation = function stopPropagation(e) {
   return e.stopPropagation();
 };
 
-export var FileUploaderDataTids = {
-  root: 'FileUploader__root',
-  content: 'FileUploader__content',
-  link: 'FileUploader__link'
-};
-
 var defaultRenderFile = function defaultRenderFile(file, fileNode) {
   return fileNode;
 };
 
 var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _cx, _cx2, _cx3, _cx4;
+  var _cx, _cx2, _cx3, _cx4, _cx5;
 
   var theme = useContext(ThemeContext);
 
@@ -57,6 +52,8 @@ var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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 = _objectWithoutPropertiesLoose(props, _excluded);
@@ -66,12 +63,19 @@ var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setFiles = _useContext.setFiles,
       removeFile = _useContext.removeFile,
       reset = _useContext.reset,
-      setFileValidationResult = _useContext.setFileValidationResult;
+      setFileValidationResult = _useContext.setFileValidationResult,
+      isMinLengthReached = _useContext.isMinLengthReached;
 
   var locale = useControlLocale();
   var inputRef = useRef(null);
+  var fileDivRef = useRef(null);
   var isAsync = !!request;
   var isSingleMode = !multiple;
+
+  var _useState = useState(true),
+      isLinkVisible = _useState[0],
+      setIsLinkVisible = _useState[1];
+
   var upload = useUpload(request, onRequestSuccess, onRequestError);
   var tryValidateAndUpload = useCallback(function (files) {
     files.forEach( /*#__PURE__*/function () {
@@ -116,6 +120,21 @@ var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       };
     }());
   }, [validateBeforeUpload, isAsync, upload, setFileValidationResult]);
+  var sizeClassName = useFileUploaderSize(size, {
+    small: cx(jsStyles.sizeSmall(theme)),
+    medium: cx(jsStyles.sizeMedium(theme)),
+    large: cx(jsStyles.sizeLarge(theme))
+  });
+  var sizeIconClass = useFileUploaderSize(size, {
+    small: jsStyles.iconSmall(theme),
+    medium: jsStyles.iconMedium(theme),
+    large: jsStyles.iconLarge(theme)
+  });
+  var contentInnerClass = useFileUploaderSize(size, {
+    small: jsStyles.contentInnerSmall(theme),
+    medium: jsStyles.contentInnerMedium(theme),
+    large: jsStyles.contentInnerLarge(theme)
+  });
   /** common part **/
 
   var handleChange = useCallback(function (newFiles) {
@@ -190,9 +209,9 @@ var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   }, [ref, blur, focus, reset]);
 
-  var _useState = useState(false),
-      focusedByTab = _useState[0],
-      setFocusedByTab = _useState[1];
+  var _useState2 = useState(false),
+      focusedByTab = _useState2[0],
+      setFocusedByTab = _useState2[1];
 
   var handleInputChange = function handleInputChange(event) {
     onChange == null ? void 0 : onChange(event);
@@ -220,26 +239,30 @@ var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
 
-  var _useState2 = useState(false),
-      hovered = _useState2[0],
-      setHovered = _useState2[1];
+  var _useState3 = useState(false),
+      hovered = _useState3[0],
+      setHovered = _useState3[1];
 
-  var uploadButtonClassNames = cx(jsStyles.uploadButton(theme), (_cx = {}, _cx[jsStyles.uploadButtonFocus(theme)] = focusedByTab, _cx[jsStyles.disabled(theme)] = disabled, _cx[jsStyles.hovered(theme)] = !disabled && hovered, _cx[jsStyles.warning(theme)] = !!warning, _cx[jsStyles.error(theme)] = !!error, _cx[jsStyles.dragOver(theme)] = isDraggable && !disabled, _cx));
+  var uploadButtonClassNames = cx(jsStyles.uploadButton(theme), (_cx = {}, _cx[jsStyles.uploadButtonFocus(theme)] = focusedByTab, _cx[jsStyles.disabled(theme)] = disabled, _cx[jsStyles.hovered(theme)] = !disabled && hovered, _cx[jsStyles.warning(theme)] = !!warning, _cx[jsStyles.error(theme)] = !!error, _cx[jsStyles.dragOver(theme)] = isDraggable && !disabled, _cx[sizeClassName] = true, _cx));
   var uploadButtonWrapperClassNames = cx((_cx2 = {}, _cx2[jsStyles.windowDragOver(theme)] = isWindowDraggable && !disabled, _cx2));
-  var uploadButtonIconClassNames = cx(jsStyles.icon(theme), (_cx3 = {}, _cx3[jsStyles.iconDisabled(theme)] = disabled, _cx3));
+  var uploadButtonIconClassNames = cx(jsStyles.icon(theme), (_cx3 = {}, _cx3[jsStyles.iconDisabled(theme)] = disabled, _cx3[sizeIconClass] = true, _cx3));
   var hasOneFile = files.length === 1;
   var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
-  var linkClassNames = cx(jsStyles.link(theme), (_cx4 = {}, _cx4[jsStyles.linkHovered(theme)] = !disabled && hovered, _cx4[jsStyles.linkDisabled(theme)] = disabled, _cx4));
+  var contentClassNames = cx(jsStyles.content(), (_cx4 = {}, _cx4[jsStyles.contentWithFiles()] = hasOneFileForSingle, _cx4));
+  var linkClassNames = cx(jsStyles.link(theme), (_cx5 = {}, _cx5[jsStyles.linkHovered(theme)] = !disabled && hovered, _cx5[jsStyles.linkDisabled(theme)] = disabled, _cx5));
+  useEffect(function () {
+    setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);
+  }, [isMinLengthReached, hasOneFileForSingle]);
   var rootNodeRef = useRef(null);
   return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("div", {
-    "data-tid": FileUploaderDataTids.root,
     className: jsStyles.root(theme),
     style: useMemoObject({
       width: width
     }),
     ref: rootNodeRef
   }, !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/React.createElement(FileUploaderFileList, {
-    renderFile: renderFile
+    renderFile: renderFile,
+    size: size
   }), /*#__PURE__*/React.createElement("div", {
     className: uploadButtonWrapperClassNames
   }, /*#__PURE__*/React.createElement("label", {
@@ -252,20 +275,26 @@ var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: labelRef,
     className: uploadButtonClassNames
   }, /*#__PURE__*/React.createElement("div", {
-    "data-tid": FileUploaderDataTids.content,
-    className: jsStyles.content()
-  }, /*#__PURE__*/React.createElement("span", {
-    "data-tid": FileUploaderDataTids.link,
+    className: contentInnerClass
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-tid": 'FileUploader__content',
+    className: contentClassNames
+  }, isLinkVisible && /*#__PURE__*/React.createElement("span", {
+    "data-tid": 'FileUploader__link',
     className: linkClassNames
-  }, hasOneFileForSingle ? locale.choosedFile : locale.chooseFile), "\xA0", /*#__PURE__*/React.createElement("div", {
-    className: jsStyles.afterLinkText()
+  }, hasOneFileForSingle ? locale.choosedFile : locale.chooseFile), isLinkVisible && String.fromCharCode(0xa0)
+  /*   */
+  , /*#__PURE__*/React.createElement("div", {
+    className: hasOneFileForSingle ? jsStyles.afterLinkText_HasFiles() : jsStyles.afterLinkText()
   }, hasOneFileForSingle ? /*#__PURE__*/React.createElement("div", {
+    ref: fileDivRef,
     className: jsStyles.singleFile()
   }, renderFile(files[0], /*#__PURE__*/React.createElement(FileUploaderFile, {
-    file: files[0]
+    file: files[0],
+    size: size
   }))) : /*#__PURE__*/React.createElement(React.Fragment, null, locale.orDragHere, "\xA0", /*#__PURE__*/React.createElement("div", {
     className: uploadButtonIconClassNames
-  }, /*#__PURE__*/React.createElement(UploadIcon, null))))), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(UploadIcon, null)))))), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
     ref: inputRef,
     tabIndex: disabled ? -1 : 0,
     type: "file",