@skbkontur/react-ui 0.0.0-7b63c63db3 → 0.0.0-7feb61cdde

package/cjs/components/DropdownMenu/DropdownMenu.md

@@ -16,6 +16,33 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </DropdownMenu>;
 ```
 
+В проп `caption` помимо компонента можно передать функцию, возвращающую компонент, с помощью которой можно управлять текущим состоянием меню.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={({ opened, openMenu, closeMenu, toggleMenu }) => {
+    return (
+      <>
+        <p>Сейчас меню { opened ? 'окрыто' : 'закрыто' }</p>
+        <Button onClick={toggleMenu}>Переключить меню</Button>
+        <Button onClick={openMenu}>Открыть меню</Button>
+        <Button onClick={closeMenu}>Закрыть меню</Button>
+      </>
+    )
+  }}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
 Меню с заданной шириной.
 
 ```jsx harmony
@@ -123,8 +150,48 @@ import { MenuItem } from '@skbkontur/react-ui';
 </DropdownMenu>;
 ```
 
+Пример с чекбоксом внутри MenuItem.
+
+```jsx harmony
+import { MenuItem, Checkbox, Button, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+let close;
+
+const renderCaption = ({ openMenu, closeMenu }) => {
+  close = closeMenu;
+  return (
+    <Button onClick={openMenu} use="primary">
+      Открыть меню
+    </Button>
+  );
+};
+
+<DropdownMenu caption={renderCaption}>
+  <MenuItem onClick={(e) => e.preventDefault()}>Просто пункт</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();
+      close();
+    }}
+  >
+    Закрыть
+  </MenuItem>
+</DropdownMenu>
+```
 
-Условный рендер элементов меню (с сохранением поведения [`MenuItem`](#/Components/MenuItem)).
+Условный рендер элементов меню (с сохранением поведения [MenuItem](#/Components/MenuItem)).
 
 ```jsx harmony
 import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';

package/cjs/components/DropdownMenu/getDropdownMenuTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const getDropdownMenuTheme: (theme: Theme) => Theme;

package/cjs/components/DropdownMenu/getDropdownMenuTheme.js

@@ -0,0 +1,11 @@
+"use strict";exports.__esModule = true;exports.getDropdownMenuTheme = void 0;var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+
+var getDropdownMenuTheme = function getDropdownMenuTheme(theme) {
+  return _ThemeFactory.ThemeFactory.create(
+  {
+    popupMargin: theme.dropdownMenuMenuOffsetY },
+
+  theme);
+
+};exports.getDropdownMenuTheme = getDropdownMenuTheme;

package/cjs/components/DropdownMenu/getDropdownMenuTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getDropdownMenuTheme.ts"],"names":["getDropdownMenuTheme","theme","ThemeFactory","create","popupMargin","dropdownMenuMenuOffsetY"],"mappings":"6EAAA;;;AAGO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAyB;AAC3D,SAAOC,2BAAaC,MAAb;AACL;AACEC,IAAAA,WAAW,EAAEH,KAAK,CAACI,uBADrB,EADK;;AAILJ,EAAAA,KAJK,CAAP;;AAMD,CAPM,C","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getDropdownMenuTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      popupMargin: theme.dropdownMenuMenuOffsetY,\n    },\n    theme,\n  );\n};\n"]}

package/cjs/components/FileUploader/FileUploader.d.ts

@@ -1,15 +1,24 @@
 import React from 'react';
 import { FileUploaderAttachedFile } from '../../internal/FileUploaderControl/fileUtils';
+import { InstanceWithRootNode } from '../../lib/rootNode';
 import { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { Nullable } from '../../typings/utility-types';
-interface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+export declare type FileUploaderSize = 'small' | 'medium' | 'large';
+declare type FileUploaderOverriddenProps = 'size';
+interface _FileUploaderProps extends CommonProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, FileUploaderOverriddenProps> {
     /** Состояние ошибки всего контрола */
     error?: boolean;
     /** Состояние предупреждения всего контрола */
     warning?: boolean;
     /** Свойство ширины. */
     width?: React.CSSProperties['width'];
+    /**
+     * Задаёт размер контрола.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
+     */
+    size?: FileUploaderSize;
     /** Свойство, скрывающее отображение файлов.  */
     hideFiles?: boolean;
     /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */
@@ -30,7 +39,7 @@ interface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTML
      * */
     renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
 }
-export interface FileUploaderRef {
+export interface FileUploaderRef extends InstanceWithRootNode {
     focus: () => void;
     blur: () => void;
     /** Сбрасывает выбранные файлы */
@@ -40,6 +49,7 @@ export declare const FileUploaderDataTids: {
     readonly root: "FileUploader__root";
     readonly content: "FileUploader__content";
     readonly link: "FileUploader__link";
+    readonly input: "FileUploader__input";
 };
 export interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {
 }

package/cjs/components/FileUploader/FileUploader.js

@@ -2,6 +2,7 @@
 
 var _fileUtils = require("../../internal/FileUploaderControl/fileUtils");
 var _Emotion = require("../../lib/theming/Emotion");
+
 var _useMemoObject = require("../../hooks/useMemoObject");
 var _FileUploaderControlContext = require("../../internal/FileUploaderControl/FileUploaderControlContext");
 var _useControlLocale = require("../../internal/FileUploaderControl/hooks/useControlLocale");
@@ -18,8 +19,11 @@ var _client = require("../../lib/client");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 
 var _FileUploaderFileValidationResult = require("../../internal/FileUploaderControl/FileUploaderFileValidationResult");
+var _useFileUploaderSize = require("../../internal/FileUploaderControl/hooks/useFileUploaderSize");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
-var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "renderFile"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+var _UploadIcon = require("./UploadIcon");
+var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "size", "renderFile"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
 var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
 
@@ -48,6 +52,18 @@ var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -64,13 +80,15 @@ var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
 var FileUploaderDataTids = {
   root: 'FileUploader__root',
   content: 'FileUploader__content',
-  link: 'FileUploader__link' };exports.FileUploaderDataTids = FileUploaderDataTids;
+  link: 'FileUploader__link',
+  input: 'FileUploader__input' };exports.FileUploaderDataTids = FileUploaderDataTids;
 
 
 var defaultRenderFile = function defaultRenderFile(file, fileNode) {return fileNode;};
 
-var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {var _cx, _cx2, _cx3, _cx4;
+var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {var _cx;
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(theme);
 
   var
   disabled =
@@ -88,17 +106,21 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
 
 
-  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$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;
+  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);
+
+  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 locale = (0, _useControlLocale.useControlLocale)();
 
   var inputRef = (0, _react.useRef)(null);
+  var fileDivRef = (0, _react.useRef)(null);
 
   var isAsync = !!request;
   var isSingleMode = !multiple;
 
+  var _useState = (0, _react.useState)(true),isLinkVisible = _useState[0],setIsLinkVisible = _useState[1];
   var upload = (0, _useUpload.useUpload)(request, onRequestSuccess, onRequestError);
 
   var tryValidateAndUpload = (0, _react.useCallback)(
@@ -113,7 +135,25 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
                 }case 7:case "end":return _context.stop();}}}, _callee);}));return function (_x) {return _ref.apply(this, arguments);};}());
 
   },
-  [upload, validateBeforeUpload, isAsync]);
+  [validateBeforeUpload, isAsync, upload, setFileValidationResult]);
+
+
+  var sizeClassName = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
+    small: _FileUploader2.jsStyles.sizeSmall(theme),
+    medium: _FileUploader2.jsStyles.sizeMedium(theme),
+    large: _FileUploader2.jsStyles.sizeLarge(theme) });
+
+
+  var sizeIconClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
+    small: _FileUploader2.jsStyles.iconSmall(theme),
+    medium: _FileUploader2.jsStyles.iconMedium(theme),
+    large: _FileUploader2.jsStyles.iconLarge(theme) });
+
+
+  var contentInnerClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
+    small: _FileUploader2.jsStyles.contentInnerSmall(theme),
+    medium: _FileUploader2.jsStyles.contentInnerMedium(theme),
+    large: _FileUploader2.jsStyles.contentInnerLarge(theme) });
 
 
   /** common part **/
@@ -176,9 +216,14 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
   }, []);
 
-  (0, _react.useImperativeHandle)(ref, function () {return { focus: focus, blur: blur, reset: reset };}, [ref]);
+  (0, _react.useImperativeHandle)(ref, function () {return { focus: focus, blur: blur, reset: reset, getRootNode: function getRootNode() {return rootNodeRef.current;} };}, [
+  ref,
+  blur,
+  focus,
+  reset]);
 
-  var _useState = (0, _react.useState)(false),focusedByTab = _useState[0],setFocusedByTab = _useState[1];
+
+  var _useState2 = (0, _react.useState)(false),focusedByTab = _useState2[0],setFocusedByTab = _useState2[1];
   var handleInputChange = function handleInputChange(event) {
     onChange == null ? void 0 : onChange(event);
     handleChange(event.target.files);
@@ -204,37 +249,60 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
   };
 
-  var _useState2 = (0, _react.useState)(false),hovered = _useState2[0],setHovered = _useState2[1];
-
-  var uploadButtonClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.uploadButton(theme), (_cx = {}, _cx[
-  _FileUploader2.jsStyles.uploadButtonFocus(theme)] = focusedByTab, _cx[
-  _FileUploader2.jsStyles.disabled(theme)] = disabled, _cx[
-  _FileUploader2.jsStyles.hovered(theme)] = !disabled && hovered, _cx[
-  _FileUploader2.jsStyles.warning(theme)] = !!warning, _cx[
-  _FileUploader2.jsStyles.error(theme)] = !!error, _cx[
-  _FileUploader2.jsStyles.dragOver(theme)] = isDraggable && !disabled, _cx));
+  var _useState3 = (0, _react.useState)(false),hovered = _useState3[0],setHovered = _useState3[1];
 
+  var uploadButtonClassNames = (0, _Emotion.cx)(
+  _FileUploader2.jsStyles.uploadButton(theme),
+  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));
 
-  var uploadButtonWrapperClassNames = (0, _Emotion.cx)((_cx2 = {}, _cx2[
-  _FileUploader2.jsStyles.windowDragOver(theme)] = isWindowDraggable && !disabled, _cx2));
 
+  var canDrop = isWindowDraggable && !disabled;
+  var uploadButtonWrapperClassNames = (0, _Emotion.cx)(
+  !_isTheme2022 && canDrop && _FileUploader2.jsStyles.windowDragOver(theme),
+  _isTheme2022 && canDrop && _FileUploader2.jsStyles.windowDragOver2022(theme));
 
-  var uploadButtonIconClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.icon(theme), (_cx3 = {}, _cx3[
-  _FileUploader2.jsStyles.iconDisabled(theme)] = disabled, _cx3));
 
+  var uploadButtonIconClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.icon(theme), sizeIconClass, disabled && _FileUploader2.jsStyles.iconDisabled(theme));
 
   var hasOneFile = files.length === 1;
   var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
 
-  var linkClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.link(theme), (_cx4 = {}, _cx4[
-  _FileUploader2.jsStyles.linkHovered(theme)] = !disabled && hovered, _cx4[
-  _FileUploader2.jsStyles.linkDisabled(theme)] = disabled, _cx4));
+  var contentClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.content(), hasOneFileForSingle && _FileUploader2.jsStyles.contentWithFiles());
+
+  var linkClassNames = (0, _Emotion.cx)(
+  _FileUploader2.jsStyles.link(theme),
+  !disabled && hovered && _FileUploader2.jsStyles.linkHovered(theme),
+  disabled && _FileUploader2.jsStyles.linkDisabled(theme));
+
 
+  (0, _react.useEffect)(function () {
+    setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);
+  }, [isMinLengthReached, hasOneFileForSingle]);
+
+  var rootNodeRef = (0, _react.useRef)(null);
+
+  var iconSizes = {
+    small: parseInt(theme.btnIconSizeSmall),
+    medium: parseInt(theme.btnIconSizeMedium),
+    large: parseInt(theme.btnIconSizeLarge) };
+
+  var icon = _isTheme2022 ? /*#__PURE__*/_react.default.createElement(_UploadIcon.UploadIcon, { size: iconSizes[size] }) : /*#__PURE__*/_react.default.createElement(_px.UploadIcon, null);
 
   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 }) },
-    !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile }), /*#__PURE__*/
+    _react.default.createElement("div", {
+      "data-tid": FileUploaderDataTids.root,
+      className: _FileUploader2.jsStyles.root(theme),
+      style: (0, _useMemoObject.useMemoObject)({ width: width }),
+      ref: rootNodeRef },
+
+    !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile, size: size }), /*#__PURE__*/
     _react.default.createElement("div", { className: uploadButtonWrapperClassNames }, /*#__PURE__*/
     _react.default.createElement("label", {
       onMouseEnter: function onMouseEnter() {return setHovered(true);},
@@ -242,28 +310,37 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       ref: labelRef,
       className: uploadButtonClassNames }, /*#__PURE__*/
 
-    _react.default.createElement("div", { "data-tid": FileUploaderDataTids.content, className: _FileUploader2.jsStyles.content() }, /*#__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), "\xA0", /*#__PURE__*/
+    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)) },
 
 
-    _react.default.createElement("div", { className: _FileUploader2.jsStyles.afterLinkText() },
     hasOneFileForSingle ? /*#__PURE__*/
-    _react.default.createElement("div", { className: _FileUploader2.jsStyles.singleFile() },
-    renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0] }))) : /*#__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 }))) : /*#__PURE__*/
 
 
     _react.default.createElement(_react.default.Fragment, null,
     locale.orDragHere, "\xA0", /*#__PURE__*/
-    _react.default.createElement("div", { className: uploadButtonIconClassNames }, /*#__PURE__*/
-    _react.default.createElement(_px.UploadIcon, null))))), /*#__PURE__*/
-
+    _react.default.createElement("div", { className: uploadButtonIconClassNames }, icon)))), /*#__PURE__*/
 
 
 
 
     _react.default.createElement("input", (0, _extends2.default)({},
     inputProps, {
+      "data-tid": FileUploaderDataTids.input,
       ref: inputRef,
       tabIndex: disabled ? -1 : 0,
       type: "file",

package/cjs/components/FileUploader/FileUploader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FileUploader.tsx"],"names":["stopPropagation","e","FileUploaderDataTids","root","content","link","defaultRenderFile","file","fileNode","_FileUploader","React","forwardRef","props","ref","theme","ThemeContext","disabled","error","warning","multiple","width","fileUploaderWidth","hideFiles","onBlur","onFocus","onChange","request","validateBeforeUpload","onRequestSuccess","onRequestError","renderFile","inputProps","FileUploaderControlContext","files","setFiles","removeFile","reset","setFileValidationResult","locale","inputRef","isAsync","isSingleMode","upload","tryValidateAndUpload","forEach","validationMessage","id","FileUploaderFileValidationResult","handleChange","newFiles","filesArray","Array","from","attachedFiles","map","getAttachedFile","length","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","isBrowser","current","window","document","focus","keyListener","isTabPressed","blur","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","hovered","setHovered","uploadButtonClassNames","jsStyles","uploadButton","uploadButtonFocus","dragOver","uploadButtonWrapperClassNames","windowDragOver","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","linkClassNames","linkHovered","linkDisabled","choosedFile","chooseFile","afterLinkText","singleFile","orDragHere","fileInput","FileUploader","memo","displayName"],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, getAttachedFile } from '../../internal/FileUploaderControl/fileUtils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useMemoObject } from '../../hooks/useMemoObject';\nimport { FileUploaderControlContext } from '../../internal/FileUploaderControl/FileUploaderControlContext';\nimport { useControlLocale } from '../../internal/FileUploaderControl/hooks/useControlLocale';\nimport { useUpload } from '../../internal/FileUploaderControl/hooks/useUpload';\nimport { useDrop } from '../../hooks/useDrop';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { UploadIcon } from '../../internal/icons/16px';\nimport { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';\nimport { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';\nimport { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';\nimport { isBrowser } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\n\nimport { jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\ninterface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {\n  /** Состояние ошибки всего контрола */\n  error?: boolean;\n  /** Состояние предупреждения всего контрола */\n  warning?: boolean;\n  /** Свойство ширины. */\n  width?: React.CSSProperties['width'];\n  /** Свойство, скрывающее отображение файлов.  */\n  hideFiles?: boolean;\n\n  /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */\n  request?: (file: FileUploaderAttachedFile) => Promise<void>;\n  /** Срабатывает при удачной попытке отправки через request */\n  onRequestSuccess?: (fileId: string) => void;\n  /** Срабатывает при неудачной попытке отправки через request */\n  onRequestError?: (fileId: string) => void;\n\n  /**\n   * Функция валидации каждого файла.\n   * Срабатывает после выбора файлов и перед попыткой отправить в request.\n   * Чтобы вывести валидацию ошибки, промис должен вернуть строку.\n   * */\n  validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;\n\n  /**\n   * Функция, позволяющая кастомизировать файлы.\n   * Через нее можно вешать кастомные валидации на каждый файл.\n   * */\n  renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;\n}\n\nexport interface FileUploaderRef {\n  focus: () => void;\n  blur: () => void;\n  /** Сбрасывает выбранные файлы */\n  reset: () => void;\n}\n\nexport const FileUploaderDataTids = {\n  root: 'FileUploader__root',\n  content: 'FileUploader__content',\n  link: 'FileUploader__link',\n} as const;\n\nconst defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;\n\nconst _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {\n  const theme = useContext(ThemeContext);\n\n  const {\n    disabled,\n    error,\n    warning,\n    multiple = false,\n    width = theme.fileUploaderWidth,\n    hideFiles = false,\n    onBlur,\n    onFocus,\n    onChange,\n    request,\n    validateBeforeUpload,\n    onRequestSuccess,\n    onRequestError,\n    renderFile = defaultRenderFile,\n    ...inputProps\n  } = props;\n\n  const { files, setFiles, removeFile, reset, setFileValidationResult } = useContext(FileUploaderControlContext);\n\n  const locale = useControlLocale();\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const isAsync = !!request;\n  const isSingleMode = !multiple;\n\n  const upload = useUpload(request, onRequestSuccess, onRequestError);\n\n  const tryValidateAndUpload = useCallback(\n    (files: FileUploaderAttachedFile[]) => {\n      files.forEach(async (file) => {\n        const validationMessage = validateBeforeUpload && (await validateBeforeUpload(file));\n\n        if (!validationMessage) {\n          isAsync && upload(file);\n        } else {\n          setFileValidationResult(file.id, FileUploaderFileValidationResult.error(validationMessage));\n        }\n      });\n    },\n    [upload, validateBeforeUpload, isAsync],\n  );\n\n  /** common part **/\n  const handleChange = useCallback(\n    (newFiles: FileList | null) => {\n      if (!newFiles) {\n        return;\n      }\n\n      let filesArray = Array.from(newFiles);\n\n      if (isSingleMode) {\n        filesArray = [filesArray[0]];\n      }\n\n      const attachedFiles = filesArray.map(getAttachedFile);\n\n      if (isSingleMode && attachedFiles.length && files.length) {\n        removeFile(files[0].id);\n      }\n\n      if (attachedFiles.length) {\n        setFiles(attachedFiles);\n        tryValidateAndUpload(attachedFiles);\n      }\n    },\n    [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile],\n  );\n\n  const handleDrop = useCallback(\n    (event) => {\n      if (disabled) {\n        return;\n      }\n\n      const { dataTransfer } = event;\n      const { files } = dataTransfer;\n\n      if (files?.length > 0) {\n        handleChange(files);\n        dataTransfer.clearData();\n      }\n    },\n    [handleChange, disabled],\n  );\n\n  const { isDraggable, ref: labelRef } = useDrop<HTMLLabelElement>({ onDrop: handleDrop });\n  const { isDraggable: isWindowDraggable, ref: windowRef } = useDrop<Document>();\n\n  if (isBrowser) {\n    windowRef.current = window.document;\n  }\n\n  const focus = useCallback(() => {\n    keyListener.isTabPressed = true;\n    inputRef.current?.focus();\n  }, []);\n\n  const blur = useCallback(() => {\n    inputRef.current?.blur();\n  }, []);\n\n  useImperativeHandle(ref, () => ({ focus, blur, reset }), [ref]);\n\n  const [focusedByTab, setFocusedByTab] = useState(false);\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    handleChange(event.target.files);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          setFocusedByTab(true);\n        }\n      });\n      onFocus?.(e);\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedByTab(false);\n    if (!disabled) {\n      onBlur?.(e);\n    }\n  };\n\n  const [hovered, setHovered] = useState(false);\n\n  const uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n    [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n    [jsStyles.disabled(theme)]: disabled,\n    [jsStyles.hovered(theme)]: !disabled && hovered,\n    [jsStyles.warning(theme)]: !!warning,\n    [jsStyles.error(theme)]: !!error,\n    [jsStyles.dragOver(theme)]: isDraggable && !disabled,\n  });\n\n  const uploadButtonWrapperClassNames = cx({\n    [jsStyles.windowDragOver(theme)]: isWindowDraggable && !disabled,\n  });\n\n  const uploadButtonIconClassNames = cx(jsStyles.icon(theme), {\n    [jsStyles.iconDisabled(theme)]: disabled,\n  });\n\n  const hasOneFile = files.length === 1;\n  const hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;\n\n  const linkClassNames = cx(jsStyles.link(theme), {\n    [jsStyles.linkHovered(theme)]: !disabled && hovered,\n    [jsStyles.linkDisabled(theme)]: disabled,\n  });\n\n  return (\n    <CommonWrapper {...props}>\n      <div data-tid={FileUploaderDataTids.root} className={jsStyles.root(theme)} style={useMemoObject({ width })}>\n        {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} />}\n        <div className={uploadButtonWrapperClassNames}>\n          <label\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            ref={labelRef}\n            className={uploadButtonClassNames}\n          >\n            <div data-tid={FileUploaderDataTids.content} className={jsStyles.content()}>\n              <span data-tid={FileUploaderDataTids.link} className={linkClassNames}>\n                {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}\n              </span>\n              &nbsp;\n              <div className={jsStyles.afterLinkText()}>\n                {hasOneFileForSingle ? (\n                  <div className={jsStyles.singleFile()}>\n                    {renderFile(files[0], <FileUploaderFile file={files[0]} />)}\n                  </div>\n                ) : (\n                  <>\n                    {locale.orDragHere}&nbsp;\n                    <div className={uploadButtonIconClassNames}>\n                      <UploadIcon />\n                    </div>\n                  </>\n                )}\n              </div>\n            </div>\n            <input\n              {...inputProps}\n              ref={inputRef}\n              tabIndex={disabled ? -1 : 0}\n              type=\"file\"\n              disabled={disabled}\n              multiple={multiple}\n              className={jsStyles.fileInput()}\n              onClick={stopPropagation}\n              onChange={handleInputChange}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд\n              value={''}\n            />\n          </label>\n        </div>\n      </div>\n    </CommonWrapper>\n  );\n});\n\nexport interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {}\n\nexport const FileUploader = withFileUploaderControlProvider<FileUploaderProps, FileUploaderRef>(\n  React.memo(_FileUploader),\n);\nFileUploader.displayName = 'FileUploader';\n"]}
+{"version":3,"sources":["FileUploader.tsx"],"names":["stopPropagation","e","FileUploaderDataTids","root","content","link","input","defaultRenderFile","file","fileNode","_FileUploader","React","forwardRef","props","ref","theme","ThemeContext","_isTheme2022","disabled","error","warning","multiple","width","fileUploaderWidth","hideFiles","onBlur","onFocus","onChange","request","validateBeforeUpload","onRequestSuccess","onRequestError","size","renderFile","inputProps","FileUploaderControlContext","files","setFiles","removeFile","reset","setFileValidationResult","isMinLengthReached","locale","inputRef","fileDivRef","isAsync","isSingleMode","isLinkVisible","setIsLinkVisible","upload","tryValidateAndUpload","forEach","validationMessage","id","FileUploaderFileValidationResult","sizeClassName","small","jsStyles","sizeSmall","medium","sizeMedium","large","sizeLarge","sizeIconClass","iconSmall","iconMedium","iconLarge","contentInnerClass","contentInnerSmall","contentInnerMedium","contentInnerLarge","handleChange","newFiles","filesArray","Array","from","attachedFiles","map","getAttachedFile","length","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","isBrowser","current","window","document","focus","keyListener","isTabPressed","blur","getRootNode","rootNodeRef","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","hovered","setHovered","uploadButtonClassNames","uploadButton","uploadButtonFocus","dragOver","canDrop","uploadButtonWrapperClassNames","windowDragOver","windowDragOver2022","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","contentClassNames","contentWithFiles","linkClassNames","linkHovered","linkDisabled","iconSizes","parseInt","btnIconSizeSmall","btnIconSizeMedium","btnIconSizeLarge","choosedFile","chooseFile","String","fromCharCode","globalClasses","afterLinkText","afterLinkText_HasFiles","singleFile","orDragHere","fileInput","FileUploader","memo","displayName"],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, getAttachedFile } from '../../internal/FileUploaderControl/fileUtils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { InstanceWithRootNode } from '../../lib/rootNode';\nimport { useMemoObject } from '../../hooks/useMemoObject';\nimport { FileUploaderControlContext } from '../../internal/FileUploaderControl/FileUploaderControlContext';\nimport { useControlLocale } from '../../internal/FileUploaderControl/hooks/useControlLocale';\nimport { useUpload } from '../../internal/FileUploaderControl/hooks/useUpload';\nimport { useDrop } from '../../hooks/useDrop';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { UploadIcon } from '../../internal/icons/16px';\nimport { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';\nimport { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';\nimport { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';\nimport { isBrowser } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\nimport { useFileUploaderSize } from '../../internal/FileUploaderControl/hooks/useFileUploaderSize';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { UploadIcon as UploadIcon2022 } from './UploadIcon';\nimport { globalClasses, jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\nexport type FileUploaderSize = 'small' | 'medium' | 'large';\n\ntype FileUploaderOverriddenProps = 'size';\n\ninterface _FileUploaderProps\n  extends CommonProps,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, FileUploaderOverriddenProps> {\n  /** Состояние ошибки всего контрола */\n  error?: boolean;\n  /** Состояние предупреждения всего контрола */\n  warning?: boolean;\n  /** Свойство ширины. */\n  width?: React.CSSProperties['width'];\n  /**\n   * Задаёт размер контрола.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: FileUploaderSize;\n  /** Свойство, скрывающее отображение файлов.  */\n  hideFiles?: boolean;\n\n  /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */\n  request?: (file: FileUploaderAttachedFile) => Promise<void>;\n  /** Срабатывает при удачной попытке отправки через request */\n  onRequestSuccess?: (fileId: string) => void;\n  /** Срабатывает при неудачной попытке отправки через request */\n  onRequestError?: (fileId: string) => void;\n\n  /**\n   * Функция валидации каждого файла.\n   * Срабатывает после выбора файлов и перед попыткой отправить в request.\n   * Чтобы вывести валидацию ошибки, промис должен вернуть строку.\n   * */\n  validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;\n\n  /**\n   * Функция, позволяющая кастомизировать файлы.\n   * Через нее можно вешать кастомные валидации на каждый файл.\n   * */\n  renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;\n}\n\nexport interface FileUploaderRef extends InstanceWithRootNode {\n  focus: () => void;\n  blur: () => void;\n  /** Сбрасывает выбранные файлы */\n  reset: () => void;\n}\n\nexport const FileUploaderDataTids = {\n  root: 'FileUploader__root',\n  content: 'FileUploader__content',\n  link: 'FileUploader__link',\n  input: 'FileUploader__input',\n} as const;\n\nconst defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;\n\nconst _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {\n  const theme = useContext(ThemeContext);\n  const _isTheme2022 = isTheme2022(theme);\n\n  const {\n    disabled,\n    error,\n    warning,\n    multiple = false,\n    width = theme.fileUploaderWidth,\n    hideFiles = false,\n    onBlur,\n    onFocus,\n    onChange,\n    request,\n    validateBeforeUpload,\n    onRequestSuccess,\n    onRequestError,\n    size = 'small',\n    renderFile = defaultRenderFile,\n    ...inputProps\n  } = props;\n\n  const { files, setFiles, removeFile, reset, setFileValidationResult, isMinLengthReached } =\n    useContext(FileUploaderControlContext);\n\n  const locale = useControlLocale();\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const fileDivRef = useRef<HTMLDivElement>(null);\n\n  const isAsync = !!request;\n  const isSingleMode = !multiple;\n\n  const [isLinkVisible, setIsLinkVisible] = useState(true);\n  const upload = useUpload(request, onRequestSuccess, onRequestError);\n\n  const tryValidateAndUpload = useCallback(\n    (files: FileUploaderAttachedFile[]) => {\n      files.forEach(async (file) => {\n        const validationMessage = validateBeforeUpload && (await validateBeforeUpload(file));\n\n        if (!validationMessage) {\n          isAsync && upload(file);\n        } else {\n          setFileValidationResult(file.id, FileUploaderFileValidationResult.error(validationMessage));\n        }\n      });\n    },\n    [validateBeforeUpload, isAsync, upload, setFileValidationResult],\n  );\n\n  const sizeClassName = useFileUploaderSize(size, {\n    small: jsStyles.sizeSmall(theme),\n    medium: jsStyles.sizeMedium(theme),\n    large: jsStyles.sizeLarge(theme),\n  });\n\n  const sizeIconClass = useFileUploaderSize(size, {\n    small: jsStyles.iconSmall(theme),\n    medium: jsStyles.iconMedium(theme),\n    large: jsStyles.iconLarge(theme),\n  });\n\n  const contentInnerClass = useFileUploaderSize(size, {\n    small: jsStyles.contentInnerSmall(theme),\n    medium: jsStyles.contentInnerMedium(theme),\n    large: jsStyles.contentInnerLarge(theme),\n  });\n\n  /** common part **/\n  const handleChange = useCallback(\n    (newFiles: FileList | null) => {\n      if (!newFiles) {\n        return;\n      }\n\n      let filesArray = Array.from(newFiles);\n\n      if (isSingleMode) {\n        filesArray = [filesArray[0]];\n      }\n\n      const attachedFiles = filesArray.map(getAttachedFile);\n\n      if (isSingleMode && attachedFiles.length && files.length) {\n        removeFile(files[0].id);\n      }\n\n      if (attachedFiles.length) {\n        setFiles(attachedFiles);\n        tryValidateAndUpload(attachedFiles);\n      }\n    },\n    [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile],\n  );\n\n  const handleDrop = useCallback(\n    (event) => {\n      if (disabled) {\n        return;\n      }\n\n      const { dataTransfer } = event;\n      const { files } = dataTransfer;\n\n      if (files?.length > 0) {\n        handleChange(files);\n        dataTransfer.clearData();\n      }\n    },\n    [handleChange, disabled],\n  );\n\n  const { isDraggable, ref: labelRef } = useDrop<HTMLLabelElement>({ onDrop: handleDrop });\n  const { isDraggable: isWindowDraggable, ref: windowRef } = useDrop<Document>();\n\n  if (isBrowser) {\n    windowRef.current = window.document;\n  }\n\n  const focus = useCallback(() => {\n    keyListener.isTabPressed = true;\n    inputRef.current?.focus();\n  }, []);\n\n  const blur = useCallback(() => {\n    inputRef.current?.blur();\n  }, []);\n\n  useImperativeHandle(ref, () => ({ focus, blur, reset, getRootNode: () => rootNodeRef.current }), [\n    ref,\n    blur,\n    focus,\n    reset,\n  ]);\n\n  const [focusedByTab, setFocusedByTab] = useState(false);\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    handleChange(event.target.files);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          setFocusedByTab(true);\n        }\n      });\n      onFocus?.(e);\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedByTab(false);\n    if (!disabled) {\n      onBlur?.(e);\n    }\n  };\n\n  const [hovered, setHovered] = useState(false);\n\n  const uploadButtonClassNames = cx(\n    jsStyles.uploadButton(theme),\n    sizeClassName,\n    focusedByTab && jsStyles.uploadButtonFocus(theme),\n    disabled && jsStyles.disabled(theme),\n    !disabled && hovered && jsStyles.hovered(theme),\n    !!warning && jsStyles.warning(theme),\n    !!error && jsStyles.error(theme),\n    isDraggable && !disabled && jsStyles.dragOver(theme),\n  );\n\n  const canDrop = isWindowDraggable && !disabled;\n  const uploadButtonWrapperClassNames = cx(\n    !_isTheme2022 && canDrop && jsStyles.windowDragOver(theme),\n    _isTheme2022 && canDrop && jsStyles.windowDragOver2022(theme),\n  );\n\n  const uploadButtonIconClassNames = cx(jsStyles.icon(theme), sizeIconClass, disabled && jsStyles.iconDisabled(theme));\n\n  const hasOneFile = files.length === 1;\n  const hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;\n\n  const contentClassNames = cx(jsStyles.content(), hasOneFileForSingle && jsStyles.contentWithFiles());\n\n  const linkClassNames = cx(\n    jsStyles.link(theme),\n    !disabled && hovered && jsStyles.linkHovered(theme),\n    disabled && jsStyles.linkDisabled(theme),\n  );\n\n  useEffect(() => {\n    setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);\n  }, [isMinLengthReached, hasOneFileForSingle]);\n\n  const rootNodeRef = useRef(null);\n\n  const iconSizes: Record<FileUploaderSize, number> = {\n    small: parseInt(theme.btnIconSizeSmall),\n    medium: parseInt(theme.btnIconSizeMedium),\n    large: parseInt(theme.btnIconSizeLarge),\n  };\n  const icon = _isTheme2022 ? <UploadIcon2022 size={iconSizes[size]} /> : <UploadIcon />;\n\n  return (\n    <CommonWrapper {...props}>\n      <div\n        data-tid={FileUploaderDataTids.root}\n        className={jsStyles.root(theme)}\n        style={useMemoObject({ width })}\n        ref={rootNodeRef}\n      >\n        {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} size={size} />}\n        <div className={uploadButtonWrapperClassNames}>\n          <label\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            ref={labelRef}\n            className={uploadButtonClassNames}\n          >\n            <div\n              data-tid={FileUploaderDataTids.content}\n              className={cx(contentClassNames, { [contentInnerClass]: !files.length || !isSingleMode })}\n            >\n              {isLinkVisible && (\n                <span data-tid={FileUploaderDataTids.link} className={linkClassNames}>\n                  {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}\n                </span>\n              )}\n              {isLinkVisible && String.fromCharCode(0xa0) /* &nbsp; */}\n              <div\n                className={cx(\n                  globalClasses.afterLinkText,\n                  hasOneFileForSingle ? jsStyles.afterLinkText_HasFiles(theme) : jsStyles.afterLinkText(theme),\n                )}\n              >\n                {hasOneFileForSingle ? (\n                  <div ref={fileDivRef} className={jsStyles.singleFile()}>\n                    {renderFile(files[0], <FileUploaderFile file={files[0]} size={size} />)}\n                  </div>\n                ) : (\n                  <>\n                    {locale.orDragHere}&nbsp;\n                    <div className={uploadButtonIconClassNames}>{icon}</div>\n                  </>\n                )}\n              </div>\n            </div>\n            <input\n              {...inputProps}\n              data-tid={FileUploaderDataTids.input}\n              ref={inputRef}\n              tabIndex={disabled ? -1 : 0}\n              type=\"file\"\n              disabled={disabled}\n              multiple={multiple}\n              className={jsStyles.fileInput()}\n              onClick={stopPropagation}\n              onChange={handleInputChange}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n              // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд\n              value={''}\n            />\n          </label>\n        </div>\n      </div>\n    </CommonWrapper>\n  );\n});\n\nexport interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {}\n\nexport const FileUploader = withFileUploaderControlProvider<FileUploaderProps, FileUploaderRef>(\n  React.memo(_FileUploader),\n);\nFileUploader.displayName = 'FileUploader';\n"]}

package/cjs/components/FileUploader/FileUploader.md

@@ -27,11 +27,23 @@ const request = () => Promise.reject();
 <FileUploader request={request} multiple />
 ```
 
+Использование `accept`
+```jsx harmony
+import { FileUploader } from '@skbkontur/react-ui';
+
+<FileUploader multiple accept="image/*" />
+```
+
 Валидация файла в списке
 ```jsx harmony
 import { FileUploader } from '@skbkontur/react-ui';
 
-<FileUploader multiple getFileValidationText={({originalFile}) => `У файла ${originalFile.name} неверный формат`} />
+<FileUploader
+  multiple
+  validateBeforeUpload={({ originalFile }) => {
+    return Promise.resolve(`У файла ${originalFile.name} неверный формат`);
+  }}
+/>;
 ```
 
 Валидация контрола

package/cjs/components/FileUploader/FileUploader.mixins.d.ts

@@ -0,0 +1 @@
+export declare const fileUploaderSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => string;

package/cjs/components/FileUploader/FileUploader.mixins.js

@@ -0,0 +1,10 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.fileUploaderSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+
+var fileUploaderSizeMixin = function fileUploaderSizeMixin(fontSize, lineHeight, paddingX, paddingY) {
+  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", " ", ";\n    line-height: ", ";\n  "])),
+  fontSize,
+
+  paddingY, paddingX,
+  lineHeight);
+
+};exports.fileUploaderSizeMixin = fileUploaderSizeMixin;

package/cjs/components/FileUploader/FileUploader.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FileUploader.mixins.ts"],"names":["fileUploaderSizeMixin","fontSize","lineHeight","paddingX","paddingY","css"],"mappings":"2RAAA,oD;;AAEO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,QAAD,EAAmBC,UAAnB,EAAuCC,QAAvC,EAAyDC,QAAzD,EAA8E;AACjH,aAAOC,YAAP;AACeJ,EAAAA,QADf;;AAGaG,EAAAA,QAHb,EAGyBD,QAHzB;AAIiBD,EAAAA,UAJjB;;AAMD,CAPM,C","sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nexport const fileUploaderSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${paddingY} ${paddingX};\n    line-height: ${lineHeight};\n  `;\n};\n"]}

package/cjs/components/FileUploader/FileUploader.styles.d.ts

@@ -1,22 +1,38 @@
 import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    afterLinkText: string;
+};
 export declare const jsStyles: {
+    calcPulse(t: Theme): string;
     pulse(): string;
     root(t: Theme): string;
     uploadButton(t: Theme): string;
     uploadButtonFocus(t: Theme): string;
     dragOver(t: Theme): string;
     windowDragOver(t: Theme): string;
+    windowDragOver2022(t: Theme): string;
     content(): string;
+    contentWithFiles(): string;
+    contentInnerSmall(t: Theme): string;
+    contentInnerMedium(t: Theme): string;
+    contentInnerLarge(t: Theme): string;
     fileInput(): string;
-    afterLinkText(): string;
+    afterLinkText(t: Theme): string;
+    afterLinkText_HasFiles(t: Theme): string;
     warning(t: Theme): string;
     error(t: Theme): string;
     hovered(t: Theme): string;
+    linkHovered(t: Theme): string;
     disabled(t: Theme): string;
     icon(t: Theme): string;
     iconDisabled(t: Theme): string;
     link(t: Theme): string;
-    linkHovered(t: Theme): string;
     linkDisabled(t: Theme): string;
     singleFile(): string;
+    sizeSmall(t: Theme): string;
+    sizeMedium(t: Theme): string;
+    sizeLarge(t: Theme): string;
+    iconSmall(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconLarge(t: Theme): string;
 };