@skbkontur/react-ui 0.0.0-d09e1235b2 → 0.0.0-d1bb8f344a

package/components/FileUploader/FileUploader/FileUploader.js

@@ -0,0 +1,366 @@
+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 = ["initialFiles", "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, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
+import { getAttachedFile } from "../../../internal/FileUploaderControl/fileUtils";
+import { cx } from "../../../lib/theming/Emotion";
+import { useMemoObject } from "../../../hooks/useMemoObject";
+import { FileUploaderControlContext } from "../../../internal/FileUploaderControl/FileUploaderControlContext";
+import { useControlLocale } from "../../../internal/FileUploaderControl/hooks/useControlLocale";
+import { useUpload } from "../../../internal/FileUploaderControl/hooks/useUpload";
+import { useDrop } from "../../../hooks/useDrop";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { UploadIcon } from "../../../internal/icons/16px";
+import { withFileUploaderControlProvider } from "../../../internal/FileUploaderControl/withFileUploaderControlProvider";
+import { keyListener } from "../../../lib/events/keyListener";
+import { FileUploaderFile } from "../../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile";
+import { FileUploaderFileList } from "../../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { FileUploaderFileValidationResult } from "../../../internal/FileUploaderControl/FileUploaderFileValidationResult";
+import { useFileUploaderSize } from "../../../internal/FileUploaderControl/hooks/useFileUploaderSize";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { FocusControlWrapper } from "../../../internal/FocusControlWrapper";
+import { UploadIcon as UploadIcon2022 } from "../UploadIcon";
+import { globalClasses, jsStyles } from "../FileUploader.styles";
+
+var stopPropagation = function stopPropagation(e) {
+  return e.stopPropagation();
+};
+/**
+ * @deprecated use SizeProp
+ */
+
+
+export var FileUploaderDataTids = {
+  root: 'FileUploader__root',
+  content: 'FileUploader__content',
+  link: 'FileUploader__link',
+  input: 'FileUploader__input'
+};
+
+var defaultRenderFile = function defaultRenderFile(file, fileNode) {
+  return fileNode;
+};
+
+var _FileUploader = forwardRefAndName('FileUploader', function (props, ref) {
+  var _cx;
+
+  var theme = useContext(ThemeContext);
+
+  var _isTheme2022 = isTheme2022(theme);
+
+  var initialFiles = 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 = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useContext = useContext(FileUploaderControlContext),
+      files = _useContext.files,
+      setFiles = _useContext.setFiles,
+      removeFile = _useContext.removeFile,
+      reset = _useContext.reset,
+      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 () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
+        var validationMessage;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.t0 = validateBeforeUpload;
+
+                if (!_context.t0) {
+                  _context.next = 5;
+                  break;
+                }
+
+                _context.next = 4;
+                return validateBeforeUpload(file);
+
+              case 4:
+                _context.t0 = _context.sent;
+
+              case 5:
+                validationMessage = _context.t0;
+
+                if (!validationMessage) {
+                  isAsync && upload(file);
+                } else {
+                  setFileValidationResult(file.id, FileUploaderFileValidationResult.error(validationMessage));
+                }
+
+              case 7:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  }, [validateBeforeUpload, isAsync, upload, setFileValidationResult]);
+  var sizeClassName = useFileUploaderSize(size, {
+    small: jsStyles.sizeSmall(theme),
+    medium: jsStyles.sizeMedium(theme),
+    large: 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) {
+    if (!newFiles || !newFiles.length) {
+      return;
+    }
+
+    var filesArray = Array.from(newFiles);
+
+    if (isSingleMode) {
+      filesArray = [filesArray[0]];
+    }
+
+    var attachedFiles = filesArray.map(getAttachedFile);
+
+    if (isSingleMode && attachedFiles.length && files.length) {
+      removeFile(files[0].id);
+    }
+
+    if (attachedFiles.length) {
+      setFiles(attachedFiles);
+      tryValidateAndUpload(attachedFiles);
+    }
+  }, [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile]);
+  var handleDrop = useCallback(function (event) {
+    if (disabled) {
+      return;
+    }
+
+    var dataTransfer = event.dataTransfer;
+    var files = dataTransfer.files;
+
+    if ((files == null ? void 0 : files.length) > 0) {
+      handleChange(files);
+      dataTransfer.clearData();
+    }
+  }, [handleChange, disabled]);
+
+  var _useDrop = useDrop({
+    onDrop: handleDrop
+  }),
+      isDraggable = _useDrop.isDraggable,
+      labelRef = _useDrop.ref;
+
+  var _useDrop2 = useDrop(),
+      isWindowDraggable = _useDrop2.isDraggable,
+      windowRef = _useDrop2.ref;
+
+  if (isBrowser(globalObject)) {
+    windowRef.current = globalObject.document;
+  }
+
+  var focus = useCallback(function () {
+    var _inputRef$current;
+
+    keyListener.isTabPressed = true;
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+  }, []);
+  var blur = useCallback(function () {
+    var _inputRef$current2;
+
+    (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: focus,
+      blur: blur,
+      reset: reset,
+      getRootNode: function getRootNode() {
+        return rootNodeRef.current;
+      }
+    };
+  }, [ref, blur, focus, reset]);
+
+  var _useState2 = useState(false),
+      focusedByTab = _useState2[0],
+      setFocusedByTab = _useState2[1];
+
+  var handleInputChange = function handleInputChange(event) {
+    onChange == null ? void 0 : onChange(event);
+    handleChange(event.target.files);
+  };
+
+  var handleFocus = function handleFocus(e) {
+    if (!disabled) {
+      // focus event fires before keyDown eventlistener
+      // so we should check tabPressed in async way
+      globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
+        if (keyListener.isTabPressed) {
+          setFocusedByTab(true);
+        }
+      });
+      onFocus == null ? void 0 : onFocus(e);
+    }
+  };
+
+  var handleBlur = function handleBlur(e) {
+    setFocusedByTab(false);
+
+    if (!disabled) {
+      onBlur == null ? void 0 : onBlur(e);
+    }
+  };
+
+  var handleRemoveFile = useCallback(function (fileId) {
+    var dataTransfer = new DataTransfer();
+    files.filter(function (f) {
+      return f.id !== fileId;
+    }).forEach(function (file) {
+      dataTransfer.items.add(file.originalFile);
+    });
+    inputRef.current && (inputRef.current.files = dataTransfer.files);
+  }, []);
+
+  var _useState3 = useState(false),
+      hovered = _useState3[0],
+      setHovered = _useState3[1];
+
+  var uploadButtonClassNames = cx(jsStyles.uploadButton(theme), sizeClassName, focusedByTab && jsStyles.uploadButtonFocus(theme), disabled && jsStyles.disabled(theme), !disabled && hovered && jsStyles.hovered(theme), !!warning && jsStyles.warning(theme), !!error && jsStyles.error(theme), isDraggable && !disabled && jsStyles.dragOver(theme));
+  var canDrop = isWindowDraggable && !disabled;
+  var uploadButtonWrapperClassNames = cx(!_isTheme2022 && canDrop && jsStyles.windowDragOver(theme), _isTheme2022 && canDrop && jsStyles.windowDragOver2022(theme));
+  var uploadButtonIconClassNames = cx(jsStyles.icon(theme), sizeIconClass, disabled && jsStyles.iconDisabled(theme));
+  var hasOneFile = files.length === 1;
+  var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
+  var contentClassNames = cx(jsStyles.content(), hasOneFileForSingle && jsStyles.contentWithFiles());
+  var linkClassNames = cx(jsStyles.link(theme), !disabled && hovered && jsStyles.linkHovered(theme), disabled && jsStyles.linkDisabled(theme));
+  useEffect(function () {
+    setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);
+  }, [isMinLengthReached, hasOneFileForSingle]);
+  useEffect(function () {
+    if (!files || !files.length || !inputRef.current) {
+      return;
+    }
+
+    var dataTransfer = new DataTransfer();
+    files.forEach(function (file) {
+      return dataTransfer.items.add(file.originalFile);
+    });
+    inputRef.current.files = dataTransfer.files;
+  }, []);
+  var rootNodeRef = useRef(null);
+  var iconSizes = {
+    small: parseInt(theme.btnIconSizeSmall),
+    medium: parseInt(theme.btnIconSizeMedium),
+    large: parseInt(theme.btnIconSizeLarge)
+  };
+  var icon = _isTheme2022 ? /*#__PURE__*/React.createElement(UploadIcon2022, {
+    size: iconSizes[size]
+  }) : /*#__PURE__*/React.createElement(UploadIcon, 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,
+    size: size,
+    onRemove: handleRemoveFile
+  }), /*#__PURE__*/React.createElement("div", {
+    className: uploadButtonWrapperClassNames
+  }, /*#__PURE__*/React.createElement("label", {
+    onMouseEnter: function onMouseEnter() {
+      return setHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    },
+    ref: labelRef,
+    className: uploadButtonClassNames
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-tid": FileUploaderDataTids.content,
+    className: cx(contentClassNames, (_cx = {}, _cx[contentInnerClass] = !files.length || !isSingleMode, _cx))
+  }, isLinkVisible && /*#__PURE__*/React.createElement("span", {
+    "data-tid": FileUploaderDataTids.link,
+    className: linkClassNames
+  }, hasOneFileForSingle ? locale.choosedFile : locale.chooseFile), isLinkVisible && String.fromCharCode(0xa0)
+  /*   */
+  , /*#__PURE__*/React.createElement("div", {
+    className: cx(globalClasses.afterLinkText, hasOneFileForSingle ? jsStyles.afterLinkText_HasFiles(theme) : jsStyles.afterLinkText(theme))
+  }, hasOneFileForSingle ? /*#__PURE__*/React.createElement("div", {
+    ref: fileDivRef,
+    className: jsStyles.singleFile()
+  }, renderFile(files[0], /*#__PURE__*/React.createElement(FileUploaderFile, {
+    file: files[0],
+    size: size,
+    onRemove: handleRemoveFile
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, locale.orDragHere, "\xA0", /*#__PURE__*/React.createElement("div", {
+    className: uploadButtonIconClassNames
+  }, icon)))), /*#__PURE__*/React.createElement(FocusControlWrapper, {
+    onBlurWhenDisabled: function onBlurWhenDisabled() {
+      return setFocusedByTab(false);
+    }
+  }, /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
+    "data-tid": FileUploaderDataTids.input,
+    ref: inputRef,
+    tabIndex: disabled ? -1 : 0,
+    type: "file",
+    disabled: disabled,
+    multiple: multiple,
+    className: jsStyles.visuallyHidden(),
+    onClick: stopPropagation,
+    onChange: handleInputChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  })))))));
+});
+
+export var FileUploader = withFileUploaderControlProvider( /*#__PURE__*/React.memo(_FileUploader));
+FileUploader.displayName = 'FileUploader';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FileUploader.tsx"],"names":["React","useCallback","useContext","useEffect","useImperativeHandle","useRef","useState","globalObject","isBrowser","getAttachedFile","cx","useMemoObject","FileUploaderControlContext","useControlLocale","useUpload","useDrop","ThemeContext","UploadIcon","withFileUploaderControlProvider","keyListener","FileUploaderFile","FileUploaderFileList","CommonWrapper","FileUploaderFileValidationResult","useFileUploaderSize","isTheme2022","forwardRefAndName","FocusControlWrapper","UploadIcon2022","globalClasses","jsStyles","stopPropagation","e","FileUploaderDataTids","root","content","link","input","defaultRenderFile","file","fileNode","_FileUploader","props","ref","theme","_isTheme2022","initialFiles","disabled","error","warning","multiple","width","fileUploaderWidth","hideFiles","onBlur","onFocus","onChange","request","validateBeforeUpload","onRequestSuccess","onRequestError","size","renderFile","inputProps","files","setFiles","removeFile","reset","setFileValidationResult","isMinLengthReached","locale","inputRef","fileDivRef","isAsync","isSingleMode","isLinkVisible","setIsLinkVisible","upload","tryValidateAndUpload","forEach","validationMessage","id","sizeClassName","small","sizeSmall","medium","sizeMedium","large","sizeLarge","sizeIconClass","iconSmall","iconMedium","iconLarge","contentInnerClass","contentInnerSmall","contentInnerMedium","contentInnerLarge","handleChange","newFiles","length","filesArray","Array","from","attachedFiles","map","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","current","document","focus","isTabPressed","blur","getRootNode","rootNodeRef","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","handleRemoveFile","fileId","DataTransfer","filter","f","items","add","originalFile","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","afterLinkText","afterLinkText_HasFiles","singleFile","orDragHere","visuallyHidden","FileUploader","memo","displayName"],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\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 { 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';\nimport { SizeProp } from '../../lib/types/props';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper';\n\nimport { UploadIcon as UploadIcon2022 } from './UploadIcon';\nimport { globalClasses, jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\n/**\n * @deprecated use SizeProp\n */\nexport type FileUploaderSize = SizeProp;\n\ntype FileUploaderOverriddenProps = 'size';\n\ninterface _FileUploaderProps\n  extends CommonProps,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, FileUploaderOverriddenProps> {\n  /** Начальное состояние загруженных файлов */\n  initialFiles?: File[];\n  /** Состояние ошибки всего контрола */\n  error?: boolean;\n  /** Состояние предупреждения всего контрола */\n  warning?: boolean;\n  /** Свойство ширины. */\n  width?: React.CSSProperties['width'];\n  /**\n   * Задаёт размер контрола.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: SizeProp;\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 = forwardRefAndName<FileUploaderRef, _FileUploaderProps>('FileUploader', (props, ref) => {\n  const theme = useContext(ThemeContext);\n  const _isTheme2022 = isTheme2022(theme);\n\n  const {\n    initialFiles,\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 || !newFiles.length) {\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(globalObject)) {\n    windowRef.current = globalObject.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      globalObject.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 handleRemoveFile = useCallback((fileId: string) => {\n    const dataTransfer = new DataTransfer();\n    files\n      .filter((f) => f.id !== fileId)\n      .forEach((file) => {\n        dataTransfer.items.add(file.originalFile);\n      });\n    inputRef.current && (inputRef.current.files = dataTransfer.files);\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  useEffect(() => {\n    if (!files || !files.length || !inputRef.current) {\n      return;\n    }\n\n    const dataTransfer = new DataTransfer();\n    files.forEach((file) => dataTransfer.items.add(file.originalFile));\n    inputRef.current.files = dataTransfer.files;\n  }, []);\n\n  const rootNodeRef = useRef(null);\n\n  const iconSizes: Record<SizeProp, 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 && (\n          <FileUploaderFileList renderFile={renderFile} size={size} onRemove={handleRemoveFile} />\n        )}\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} onRemove={handleRemoveFile} />)}\n                  </div>\n                ) : (\n                  <>\n                    {locale.orDragHere}&nbsp;\n                    <div className={uploadButtonIconClassNames}>{icon}</div>\n                  </>\n                )}\n              </div>\n            </div>\n            <FocusControlWrapper onBlurWhenDisabled={() => setFocusedByTab(false)}>\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.visuallyHidden()}\n                onClick={stopPropagation}\n                onChange={handleInputChange}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n              />\n            </FocusControlWrapper>\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/components/FileUploader/FileUploader/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/FileUploader/FileUploader.js",
+  "module": "FileUploader",
+  "types": "../FileUploader.d.ts",
+  "sideEffects": false
+}

package/components/FileUploader/FileUploader.d.ts

@@ -0,0 +1,63 @@
+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';
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type FileUploaderSize = SizeProp;
+declare type FileUploaderOverriddenProps = 'size';
+interface _FileUploaderProps extends CommonProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, FileUploaderOverriddenProps> {
+    /** Начальное состояние загруженных файлов */
+    initialFiles?: File[];
+    /** Состояние ошибки всего контрола */
+    error?: boolean;
+    /** Состояние предупреждения всего контрола */
+    warning?: boolean;
+    /** Свойство ширины. */
+    width?: React.CSSProperties['width'];
+    /**
+     * Задаёт размер контрола.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
+     */
+    size?: SizeProp;
+    /** Свойство, скрывающее отображение файлов.  */
+    hideFiles?: boolean;
+    /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */
+    request?: (file: FileUploaderAttachedFile) => Promise<void>;
+    /** Срабатывает при удачной попытке отправки через request */
+    onRequestSuccess?: (fileId: string) => void;
+    /** Срабатывает при неудачной попытке отправки через request */
+    onRequestError?: (fileId: string) => void;
+    /**
+     * Функция валидации каждого файла.
+     * Срабатывает после выбора файлов и перед попыткой отправить в request.
+     * Чтобы вывести валидацию ошибки, промис должен вернуть строку.
+     * */
+    validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;
+    /**
+     * Функция, позволяющая кастомизировать файлы.
+     * Через нее можно вешать кастомные валидации на каждый файл.
+     * */
+    renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
+}
+export interface FileUploaderRef extends InstanceWithRootNode {
+    focus: () => void;
+    blur: () => void;
+    /** Сбрасывает выбранные файлы */
+    reset: () => void;
+}
+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 {
+}
+export declare const FileUploader: React.MemoExoticComponent<React.ForwardRefExoticComponent<FileUploaderProps & FileUploaderControlProviderProps & React.RefAttributes<FileUploaderRef>>>;
+export {};

package/components/FileUploader/FileUploader.md

@@ -0,0 +1,108 @@
+Контрол загрузки файлов.
+Можно использовать для синхронной отправки данных, например, в форме.
+Или же можно использовать в асинхронном режиме.
+
+Синхронный контрол
+```jsx harmony
+import { FileUploader } from '@skbkontur/react-ui';
+
+<FileUploader  />
+```
+
+Асинхронный контрол
+```jsx harmony
+import { FileUploader } from '@skbkontur/react-ui';
+
+const request = () => Promise.resolve();
+
+<FileUploader request={request} />
+```
+
+Multiple контрол
+```jsx harmony
+import { FileUploader } from '@skbkontur/react-ui';
+
+const request = () => Promise.reject();
+
+<FileUploader request={request} multiple />
+```
+
+Файлы по умолчанию
+```jsx harmony
+import { FileUploader } from '@skbkontur/react-ui';
+
+function createFile(filename, content) {
+  return new File(['content'], filename, { type: 'text/plain' });
+};
+
+const initialFiles = [createFile('test1.txt'), createFile('test2.txt')];
+<FileUploader multiple initialFiles={initialFiles} />
+```
+
+Файлы по умолчанию с кастомизацией рендеринга
+```jsx harmony
+import { cloneElement } from 'react';
+import { FileUploader } from '@skbkontur/react-ui';
+
+function createFile(filename, content) {
+  return new File(['content'], filename, { type: 'text/plain' });
+};
+
+const initialFiles = [createFile('test1.txt'), createFile('test2.txt')];
+<FileUploader
+  multiple
+  initialFiles={initialFiles}
+  renderFile={(file, fileNode) => cloneElement(fileNode, { showSize: false })}
+/>
+```
+
+Использование `accept`
+```jsx harmony
+import { FileUploader } from '@skbkontur/react-ui';
+
+<FileUploader multiple accept="image/*" />
+```
+
+Валидация файла в списке
+```jsx harmony
+import { FileUploader } from '@skbkontur/react-ui';
+
+<FileUploader
+  multiple
+  validateBeforeUpload={({ originalFile }) => {
+    return Promise.resolve(`У файла ${originalFile.name} неверный формат`);
+  }}
+/>;
+```
+
+Валидация контрола
+```jsx harmony
+import { FileUploader } from '@skbkontur/react-ui';
+
+<FileUploader multiple error />
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface FileUploaderLocale {
+  chooseFile: string;
+  choosedFile: string;
+  orDragHere: string;
+  requestErrorText: string;
+}
+
+const ru_RU = {
+  chooseFile: 'Выберите файл',
+  choosedFile: 'Выбран файл',
+  orDragHere: 'или перетащите сюда',
+  requestErrorText: 'Файл не удалось загрузить на сервер, повторите попытку позже',
+};
+
+const en_GB = {
+  chooseFile: 'Select a file',
+  choosedFile: 'File selected',
+  orDragHere: 'or drag here',
+  requestErrorText: 'The file could not be uploaded to the server, please try again later',
+};
+```

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

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject;
+
+import { css } from "../../../lib/theming/Emotion";
+export var fileUploaderSizeMixin = function fileUploaderSizeMixin(fontSize, lineHeight, paddingX, paddingY) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", " ", ";\n    line-height: ", ";\n  "])), fontSize, paddingY, paddingX, lineHeight);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FileUploader.mixins.ts"],"names":["css","fileUploaderSizeMixin","fontSize","lineHeight","paddingX","paddingY"],"mappings":"oHAAA,SAASA,GAAT,QAAoB,2BAApB;;AAEA,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,QAAD,EAAmBC,UAAnB,EAAuCC,QAAvC,EAAyDC,QAAzD,EAA8E;AACjH,SAAOL,GAAP;AACeE,EAAAA,QADf;;AAGaG,EAAAA,QAHb,EAGyBD,QAHzB;AAIiBD,EAAAA,UAJjB;;AAMD,CAPM","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/components/FileUploader/FileUploader.mixins/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/FileUploader/FileUploader.mixins.js",
+  "module": "FileUploader.mixins",
+  "types": "../FileUploader.mixins.d.ts",
+  "sideEffects": false
+}

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

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