@skbkontur/react-ui 3.9.4 → 3.10.0-fileuploader.3

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FileUploaderAttachedFile } from '../../internal/FileUploaderControl/fileUtils';
+import { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { Nullable } from '../../typings/utility-types';
+interface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+    /** Состояние ошибки всего контрола */
+    error?: boolean;
+    /** Состояние предупреждения всего контрола */
+    warning?: boolean;
+    /** Свойство ширины. */
+    width?: React.CSSProperties['width'];
+    /** Свойство, скрывающее отображение файлов.  */
+    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 {
+    focus: () => void;
+    blur: () => void;
+    /** Сбрасывает выбранные файлы */
+    reset: () => void;
+}
+export interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {
+}
+export declare const FileUploader: React.MemoExoticComponent<React.ForwardRefExoticComponent<FileUploaderProps & FileUploaderControlProviderProps & React.RefAttributes<FileUploaderRef>>>;
+export {};

package/cjs/components/FileUploader/FileUploader.js

@@ -0,0 +1,283 @@
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.FileUploader = void 0;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _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");
+var _useUpload = require("../../internal/FileUploaderControl/hooks/useUpload");
+var _useDrop3 = require("../../hooks/useDrop");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _px = require("../../internal/icons/16px");
+
+var _withFileUploaderControlProvider = require("../../internal/FileUploaderControl/withFileUploaderControlProvider");
+var _keyListener = require("../../lib/events/keyListener");
+var _FileUploaderFile = require("../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile");
+var _FileUploaderFileList = require("../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList");
+var _client = require("../../lib/client");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+
+var _FileUploaderFileValidationResult = require("../../internal/FileUploaderControl/FileUploaderFileValidationResult");
+
+var _FileUploader2 = require("./FileUploader.styles");
+
+var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var defaultRenderFile = function defaultRenderFile(file, fileNode) {return fileNode;};
+
+var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {var _cx, _cx2, _cx3, _cx4;
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);var
+
+
+  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$renderFile = props.renderFile,renderFile = _props$renderFile === void 0 ? defaultRenderFile : _props$renderFile,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "renderFile"]);var _useContext =
+
+  (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files,setFiles = _useContext.setFiles,removeFile = _useContext.removeFile,reset = _useContext.reset,setFileValidationResult = _useContext.setFileValidationResult;
+
+  var locale = (0, _useControlLocale.useControlLocale)();
+
+  var inputRef = (0, _react.useRef)(null);
+
+  var isAsync = !!request;
+  var isSingleMode = !multiple;
+
+  var upload = (0, _useUpload.useUpload)(request, onRequestSuccess, onRequestError);
+
+  var tryValidateAndUpload = (0, _react.useCallback)(
+  function (files) {
+    files.forEach( /*#__PURE__*/function () {var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file) {var validationMessage;return _regenerator.default.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.FileUploaderFileValidationResult.error(validationMessage));
+                }case 7:case "end":return _context.stop();}}}, _callee);}));return function (_x) {return _ref.apply(this, arguments);};}());
+
+  },
+  [upload, validateBeforeUpload, isAsync]);
+
+
+  /** common part **/
+  var handleChange = (0, _react.useCallback)(
+  function (newFiles) {
+    if (!newFiles) return;
+
+    var filesArray = Array.from(newFiles);
+
+    if (isSingleMode) {
+      filesArray = [filesArray[0]];
+    }
+
+    var attachedFiles = filesArray.map(_fileUtils.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 = (0, _react.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 =
+
+
+  (0, _useDrop3.useDrop)({ onDrop: handleDrop }),isDraggable = _useDrop.isDraggable,labelRef = _useDrop.ref;var _useDrop2 =
+  (0, _useDrop3.useDrop)(),isWindowDraggable = _useDrop2.isDraggable,windowRef = _useDrop2.ref;
+
+  if (_client.isBrowser) {
+    windowRef.current = window.document;
+  }
+
+  var focus = (0, _react.useCallback)(function () {var _inputRef$current;
+    _keyListener.keyListener.isTabPressed = true;
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+  }, []);
+
+  var blur = (0, _react.useCallback)(function () {var _inputRef$current2;
+    (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
+  }, []);
+
+  (0, _react.useImperativeHandle)(ref, function () {return { focus: focus, blur: blur, reset: reset };}, [ref]);var _useState =
+
+  (0, _react.useState)(false),focusedByTab = _useState[0],setFocusedByTab = _useState[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
+      requestAnimationFrame(function () {
+        if (_keyListener.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 uploadButtonClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.uploadButton(theme), (_cx = {}, _cx[
+  _FileUploader2.jsStyles.uploadButtonFocus(theme)] = focusedByTab, _cx[
+  _FileUploader2.jsStyles.disabled(theme)] = disabled, _cx[
+  _FileUploader2.jsStyles.warning(theme)] = !!warning, _cx[
+  _FileUploader2.jsStyles.error(theme)] = !!error, _cx[
+  _FileUploader2.jsStyles.dragOver()] = isDraggable && !disabled, _cx));
+
+
+  var uploadButtonWrapperClassNames = (0, _Emotion.cx)((_cx2 = {}, _cx2[
+  _FileUploader2.jsStyles.windowDragOver()] = isWindowDraggable && !disabled, _cx2));
+
+
+  var uploadButtonIconClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.icon(theme), (_cx3 = {}, _cx3[
+  _FileUploader2.jsStyles.iconDisabled(theme)] = disabled, _cx3));
+
+
+  var hasOneFile = files.length === 1;
+  var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;var _useState2 =
+
+  (0, _react.useState)(false),hovered = _useState2[0],setHovered = _useState2[1];
+
+  var linkClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.link(theme), (_cx4 = {}, _cx4[
+  _FileUploader2.jsStyles.linkHovered(theme)] = !disabled && hovered, _cx4[
+  _FileUploader2.jsStyles.linkDisabled(theme)] = disabled, _cx4));
+
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
+    _react.default.createElement("div", { 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", { className: uploadButtonWrapperClassNames }, /*#__PURE__*/
+    _react.default.createElement("label", {
+      onMouseEnter: function onMouseEnter() {return setHovered(true);},
+      onMouseLeave: function onMouseLeave() {return setHovered(false);},
+      ref: labelRef,
+      className: uploadButtonClassNames }, /*#__PURE__*/
+
+    _react.default.createElement("div", { "data-tid": 'FileUploader__content', className: _FileUploader2.jsStyles.content() }, /*#__PURE__*/
+    _react.default.createElement("span", { "data-tid": 'FileUploader__link', className: linkClassNames },
+    hasOneFileForSingle ? locale.choosedFile : locale.chooseFile), "\xA0", /*#__PURE__*/
+
+
+    _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(_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("input", (0, _extends2.default)({},
+    inputProps, {
+      ref: inputRef,
+      tabIndex: disabled ? -1 : 0,
+      type: "file",
+      disabled: disabled,
+      multiple: multiple,
+      className: _FileUploader2.jsStyles.fileInput(),
+      onClick: stopPropagation,
+      onChange: handleInputChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+      // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд
+      , value: '' })))))));
+
+
+
+
+
+
+});
+
+
+
+var FileUploader = (0, _withFileUploaderControlProvider.withFileUploaderControlProvider)( /*#__PURE__*/
+_react.default.memo(_FileUploader));exports.FileUploader = FileUploader;
+
+FileUploader.displayName = 'FileUploader';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FileUploader.tsx"],"names":["stopPropagation","e","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","uploadButtonClassNames","jsStyles","uploadButton","uploadButtonFocus","dragOver","uploadButtonWrapperClassNames","windowDragOver","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","hovered","setHovered","linkClassNames","link","linkHovered","linkDisabled","root","content","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\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) return;\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 uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n    [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n    [jsStyles.disabled(theme)]: disabled,\n    [jsStyles.warning(theme)]: !!warning,\n    [jsStyles.error(theme)]: !!error,\n    [jsStyles.dragOver()]: isDraggable && !disabled,\n  });\n\n  const uploadButtonWrapperClassNames = cx({\n    [jsStyles.windowDragOver()]: 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 [hovered, setHovered] = useState(false);\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 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={'FileUploader__content'} className={jsStyles.content()}>\n              <span data-tid={'FileUploader__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"]}

package/cjs/components/FileUploader/FileUploader.md

@@ -0,0 +1,67 @@
+Контрол загрузки файлов.
+Можно использовать для синхронной отправки данных, например, в форме.
+Или же можно использовать в асинхронном режиме.
+
+Синхронный контрол
+```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';
+
+<FileUploader multiple getFileValidationText={({originalFile}) => `У файла ${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/cjs/components/FileUploader/FileUploader.styles.d.ts

@@ -0,0 +1,21 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const jsStyles: {
+    pulse(): string;
+    root(t: Theme): string;
+    uploadButton(t: Theme): string;
+    uploadButtonFocus(t: Theme): string;
+    dragOver(): string;
+    windowDragOver(): string;
+    content(): string;
+    fileInput(): string;
+    afterLinkText(): string;
+    warning(t: Theme): string;
+    error(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;
+};

package/cjs/components/FileUploader/FileUploader.styles.js

@@ -0,0 +1,167 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+
+
+var styles = {
+  pulse: function pulse() {
+    return (0, _Emotion.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        0% {\n          box-shadow:\n            0px 0px 0px 0px #2DA4F9,\n            0px 0px 0px 1px rgba(45,164,249,0.7);\n        }\n        95% {\n          box-shadow:\n            0px 0px 0px 0px #2DA4F9,\n            0px 0px 0px 10px rgba(45,164,249,0);\n        }\n        100% {\n          box-shadow:\n            0px 0px 0px 0px #2DA4F9,\n            0px 0px 0px 1px rgba(45,164,249,0);\n        }\n      "])));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  },
+
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      min-width: 285px;\n      position: relative;\n      background-color: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n    "])),
+
+
+
+    t.fileUploaderBg,
+    t.fileUploaderLineHeight,
+    t.fileUploaderFontSize,
+    t.fileUploaderTextColorDefault);
+
+  },
+
+  uploadButton: function uploadButton(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 100%;\n      display: inline-flex;\n      align-items: center;\n      justify-content: space-between;\n      border: ", " ", " ", ";\n      box-sizing: border-box;\n      border-radius: ", ";\n      outline: none;\n      cursor: pointer;\n      padding: ", " ", ";\n      transition: box-shadow 0.3s ease;\n    "])),
+
+
+
+
+    t.fileUploaderBorderWidth, t.fileUploaderBorderStyle, t.fileUploaderBorderColor,
+
+    t.fileUploaderBorderRadius,
+
+
+    t.fileUploaderPaddingY, t.fileUploaderPaddingX);
+
+
+  },
+
+  uploadButtonFocus: function uploadButtonFocus(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: ", " solid ", ";\n      box-shadow: 0px 0px 0px 1px ", ";\n    "])),
+    t.fileUploaderBorderWidth, t.fileUploaderBorderColorFocus,
+    t.fileUploaderBorderColorFocus);
+
+  },
+
+  dragOver: function dragOver() {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: 1px solid #2da4f9;\n      border-radius: 2px;\n      box-shadow: 0px 0px 0px 3px #2da4f9, 0px 0px 0px 8px rgba(45, 164, 249, 0.35);\n    "])));
+
+
+
+
+  },
+
+  windowDragOver: function windowDragOver() {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 2px;\n      animation: ", " 1.5s infinite;\n    "])),
+
+    styles.pulse());
+
+  },
+
+  content: function content() {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      width: 100%;\n      align-items: center;\n      height: 100%;\n    "])));
+
+
+
+
+
+  },
+
+  fileInput: function fileInput() {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 0;\n      height: 0;\n    "])));
+
+
+
+  },
+
+  afterLinkText: function afterLinkText() {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      justify-content: space-between;\n      flex: 1 1 auto;\n    "])));
+
+
+
+
+  },
+
+  warning: function warning(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: ", " solid ", ";\n      box-shadow: 0px 0px 0px 1px ", ";\n    "])),
+    t.fileUploaderBorderWidth, t.fileUploaderBorderColorWarning,
+    t.fileUploaderBorderColorWarning);
+
+  },
+
+  error: function error(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: ", " solid ", ";\n      box-shadow: 0px 0px 0px 1px ", ";\n    "])),
+    t.fileUploaderBorderWidth, t.fileUploaderBorderColorError,
+    t.fileUploaderBorderColorError);
+
+  },
+
+  disabled: function disabled(t) {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n      background: ", ";\n      border: ", " solid ", ";\n      color: ", ";\n      box-shadow: none;\n    "])),
+
+    t.fileUploaderDisabledBg,
+    t.fileUploaderBorderWidth, t.fileUploaderDisabledBorderColor,
+    t.fileUploaderDisabledTextColor);
+
+
+  },
+
+  icon: function icon(t) {
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      font-size: ", ";\n      color: ", ";\n    "])),
+
+    t.fileUploaderIconSize,
+    t.fileUploaderIconColor);
+
+  },
+
+  iconDisabled: function iconDisabled(t) {
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.fileUploaderDisabledIconColor);
+
+  },
+
+  link: function link(t) {
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      outline: none;\n      text-decoration: none;\n      color: ", ";\n    "])),
+
+
+    t.fileUploaderLinkColor);
+
+  },
+
+  linkHovered: function linkHovered(t) {
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-decoration: ", ";\n    "])),
+    t.linkHoverTextDecoration);
+
+  },
+
+  linkDisabled: function linkDisabled(t) {
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      &:hover {\n        text-decoration: none;\n      }\n    "])),
+    t.fileUploaderDisabledLinkColor);
+
+
+
+
+  },
+
+  singleFile: function singleFile() {
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 100%;\n    "])));
+
+
+  } };
+
+
+var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["FileUploader.styles.ts"],"names":["styles","pulse","keyframes","root","t","css","fileUploaderBg","fileUploaderLineHeight","fileUploaderFontSize","fileUploaderTextColorDefault","uploadButton","fileUploaderBorderWidth","fileUploaderBorderStyle","fileUploaderBorderColor","fileUploaderBorderRadius","fileUploaderPaddingY","fileUploaderPaddingX","uploadButtonFocus","fileUploaderBorderColorFocus","dragOver","windowDragOver","content","fileInput","afterLinkText","warning","fileUploaderBorderColorWarning","error","fileUploaderBorderColorError","disabled","fileUploaderDisabledBg","fileUploaderDisabledBorderColor","fileUploaderDisabledTextColor","icon","fileUploaderIconSize","fileUploaderIconColor","iconDisabled","fileUploaderDisabledIconColor","link","fileUploaderLinkColor","linkHovered","linkHoverTextDecoration","linkDisabled","fileUploaderDisabledLinkColor","singleFile","jsStyles"],"mappings":"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","sourcesContent":["import { css, keyframes, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst styles = {\n  pulse() {\n    return keyframes`\n        0% {\n          box-shadow:\n            0px 0px 0px 0px #2DA4F9,\n            0px 0px 0px 1px rgba(45,164,249,0.7);\n        }\n        95% {\n          box-shadow:\n            0px 0px 0px 0px #2DA4F9,\n            0px 0px 0px 10px rgba(45,164,249,0);\n        }\n        100% {\n          box-shadow:\n            0px 0px 0px 0px #2DA4F9,\n            0px 0px 0px 1px rgba(45,164,249,0);\n        }\n      `;\n  },\n\n  root(t: Theme) {\n    return css`\n      display: inline-block;\n      min-width: 285px;\n      position: relative;\n      background-color: ${t.fileUploaderBg};\n      line-height: ${t.fileUploaderLineHeight};\n      font-size: ${t.fileUploaderFontSize};\n      color: ${t.fileUploaderTextColorDefault};\n    `;\n  },\n\n  uploadButton(t: Theme) {\n    return css`\n      width: 100%;\n      display: inline-flex;\n      align-items: center;\n      justify-content: space-between;\n      border: ${t.fileUploaderBorderWidth} ${t.fileUploaderBorderStyle} ${t.fileUploaderBorderColor};\n      box-sizing: border-box;\n      border-radius: ${t.fileUploaderBorderRadius};\n      outline: none;\n      cursor: pointer;\n      padding: ${t.fileUploaderPaddingY} ${t.fileUploaderPaddingX};\n      transition: box-shadow 0.3s ease;\n    `;\n  },\n\n  uploadButtonFocus(t: Theme) {\n    return css`\n      border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorFocus};\n      box-shadow: 0px 0px 0px 1px ${t.fileUploaderBorderColorFocus};\n    `;\n  },\n\n  dragOver() {\n    return css`\n      border: 1px solid #2da4f9;\n      border-radius: 2px;\n      box-shadow: 0px 0px 0px 3px #2da4f9, 0px 0px 0px 8px rgba(45, 164, 249, 0.35);\n    `;\n  },\n\n  windowDragOver() {\n    return css`\n      border-radius: 2px;\n      animation: ${styles.pulse()} 1.5s infinite;\n    `;\n  },\n\n  content() {\n    return css`\n      display: flex;\n      width: 100%;\n      align-items: center;\n      height: 100%;\n    `;\n  },\n\n  fileInput() {\n    return css`\n      width: 0;\n      height: 0;\n    `;\n  },\n\n  afterLinkText() {\n    return css`\n      display: flex;\n      justify-content: space-between;\n      flex: 1 1 auto;\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorWarning};\n      box-shadow: 0px 0px 0px 1px ${t.fileUploaderBorderColorWarning};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorError};\n      box-shadow: 0px 0px 0px 1px ${t.fileUploaderBorderColorError};\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      cursor: default;\n      background: ${t.fileUploaderDisabledBg};\n      border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderDisabledBorderColor};\n      color: ${t.fileUploaderDisabledTextColor};\n      box-shadow: none;\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      display: inline-block;\n      font-size: ${t.fileUploaderIconSize};\n      color: ${t.fileUploaderIconColor};\n    `;\n  },\n\n  iconDisabled(t: Theme) {\n    return css`\n      color: ${t.fileUploaderDisabledIconColor};\n    `;\n  },\n\n  link(t: Theme) {\n    return css`\n      outline: none;\n      text-decoration: none;\n      color: ${t.fileUploaderLinkColor};\n    `;\n  },\n\n  linkHovered(t: Theme) {\n    return css`\n      text-decoration: ${t.linkHoverTextDecoration};\n    `;\n  },\n\n  linkDisabled(t: Theme) {\n    return css`\n      color: ${t.fileUploaderDisabledLinkColor};\n      &:hover {\n        text-decoration: none;\n      }\n    `;\n  },\n\n  singleFile() {\n    return css`\n      width: 100%;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}

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

@@ -0,0 +1,4 @@
+export { FileUploaderFileStatus } from '../../internal/FileUploaderControl/fileUtils';
+export type { FileUploaderAttachedFile } from '../../internal/FileUploaderControl/fileUtils';
+export { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';
+export * from './FileUploader';

package/cjs/components/FileUploader/index.js

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;var _exportNames = { FileUploaderFileStatus: true, FileUploaderFileValidationResult: true };exports.FileUploaderFileValidationResult = exports.FileUploaderFileStatus = void 0;var _fileUtils = require("../../internal/FileUploaderControl/fileUtils");exports.FileUploaderFileStatus = _fileUtils.FileUploaderFileStatus;
+
+var _FileUploaderFileValidationResult = require("../../internal/FileUploaderControl/FileUploaderFileValidationResult");exports.FileUploaderFileValidationResult = _FileUploaderFileValidationResult.FileUploaderFileValidationResult;
+var _FileUploader = require("./FileUploader");Object.keys(_FileUploader).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _FileUploader[key]) return;exports[key] = _FileUploader[key];});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"sNAAA,yE;;AAEA,uH;AACA","sourcesContent":["export { FileUploaderFileStatus } from '../../internal/FileUploaderControl/fileUtils';\nexport type { FileUploaderAttachedFile } from '../../internal/FileUploaderControl/fileUtils';\nexport { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\nexport * from './FileUploader';\n"]}