@skbkontur/react-ui 3.10.0-fileuploader.2 → 3.10.0

package/lib/withClassWrapper.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { ReactUIComponentWithRef } from './forwardRefAndName';
+/**
+ * HOC for moving from Class to Functional components.
+ *
+ * Used to remove distinctions between Class and Functional refs.
+ *
+ * @param RFC Functional component wrapped in forwardRefAndName.
+ * @returns Class component that wraps Functional component.
+ */
+export declare function withClassWrapper<T, P>(RFC: ReactUIComponentWithRef<T, P>): {
+    new (props: P | Readonly<P>): {
+        instancePropertiesRef: React.RefObject<T>;
+        componentDidMount(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: P, context: any): {
+        instancePropertiesRef: React.RefObject<T>;
+        componentDidMount(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    __KONTUR_REACT_UI__: string;
+    displayName: string;
+    FC: ReactUIComponentWithRef<T, P>;
+    contextType?: React.Context<any> | undefined;
+};
+export interface InstanceRefType<T> {
+    instanceRef: React.MutableRefObject<T>;
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "3.10.0-fileuploader.2",
+  "version": "3.10.0",
   "description": "UI Components",
   "main": "cjs/index.js",
   "module": "index.js",
   "sideEffects": false,
-  "homepage": "https://tech.skbkontur.ru/react-ui",
+  "homepage": "https://tech.skbkontur.ru/react-ui/3.10.0/",
   "repository": {
     "type": "git",
     "url": "git@github.com:skbkontur/retail-ui.git"
@@ -58,6 +58,7 @@
     "raf": "^3.4.1",
     "react-focus-lock": "^2.2.1",
     "react-input-mask": "2.0.4",
+    "react-is": "^17.0.2",
     "react-transition-group": "^4.3.0",
     "shallowequal": "^1.1.0",
     "stylis-plugin-extra-scope": "^0.3.0",
@@ -76,9 +77,13 @@
     "@skbkontur/react-icons": "4.4.0",
     "@skbkontur/react-props2attrs": "0.1.2",
     "@skbkontur/react-sorge": "0.1.0",
+    "@storybook/addon-a11y": "6.3.2",
     "@storybook/addon-essentials": "6.3.2",
     "@storybook/addon-links": "6.3.2",
     "@storybook/react": "6.3.2",
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/user-event": "13.5.0",
     "@types/enzyme": "^3.10.8",
     "@types/invariant": "^2.2.33",
     "@types/jest": "^26.0.22",
@@ -91,9 +96,11 @@
     "@types/react": "16.14.4",
     "@types/react-dom": "16.9.11",
     "@types/react-input-mask": "2.0.5",
+    "@types/react-is": "^17.0.3",
     "@types/react-transition-group": "^4.2.3",
     "@types/shallowequal": "^1.1.1",
     "@types/warning": "^3.0.0",
+    "axios": "^0.24.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "chalk": "4.1.0",
@@ -102,6 +109,7 @@
     "creevey": "0.7.31",
     "cross-env": "^7.0.3",
     "css-loader": "5.2.0",
+    "dotenv": "^10.0.0",
     "dts-css-modules-loader": "1.2.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
@@ -148,5 +156,8 @@
     "setupFilesAfterEnv": [
       "<rootDir>/test-setup.js"
     ]
+  },
+  "publishConfig": {
+    "tag": "latest"
   }
 }

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import { FileUploaderAttachedFile } from '../../internal/FileUploaderControl/fileUtils';
-import { Nullable } from '../../typings/utility-types';
-import { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';
-import { CommonProps } from '../../internal/CommonWrapper';
-interface _FileUploaderProps extends CommonProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onSelect'> {
-    /** Состояние ошибки всего контрола */
-    error?: boolean;
-    /** Состояние предупреждения всего контрола */
-    warning?: boolean;
-    /** Свойство ширины. */
-    width?: React.CSSProperties['width'];
-    /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */
-    request?: (file: FileUploaderAttachedFile) => Promise<void>;
-    /** Срабатывает при удачной попытке отправки через request */
-    onRequestSuccess?: (fileId: string) => void;
-    /** Срабатывает при неудачной попытке отправки через request */
-    onRequestError?: (fileId: string) => void;
-    /** Функция валидации каждого файла. Срабатывает после выбора файлов и перед попыткой отправить в request. */
-    getFileValidationText?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;
-}
-export interface FileUploaderRef {
-    focus: () => void;
-    blur: () => void;
-    /** Сбрасывает выбранные файлы */
-    reset: () => void;
-}
-export interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {
-}
-export declare const FileUploader: React.ForwardRefExoticComponent<FileUploaderProps & FileUploaderControlProviderProps & React.RefAttributes<FileUploaderRef>>;
-export {};

package/cjs/components/FileUploader/FileUploader.js

@@ -1,265 +0,0 @@
-"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 _FileUploaderFileValidationResult = require("../../internal/FileUploaderControl/FileUploaderFileValidationResult");
-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 _FileUploader2 = require("./FileUploader.styles");
-
-var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-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,onBlur = props.onBlur,onFocus = props.onFocus,_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,request = props.request,getFileValidationText = props.getFileValidationText,onRequestSuccess = props.onRequestSuccess,onRequestError = props.onRequestError,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["disabled", "error", "warning", "onBlur", "onFocus", "multiple", "width", "request", "getFileValidationText", "onRequestSuccess", "onRequestError"]);var _useContext =
-
-  (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files,setFiles = _useContext.setFiles,removeFile = _useContext.removeFile,setFileValidationResult = _useContext.setFileValidationResult,reset = _useContext.reset;
-
-  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 =
-                getFileValidationText;if (!_context.t0) {_context.next = 5;break;}_context.next = 4;return getFileValidationText(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, error, getFileValidationText, 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 = (0, _react.useCallback)(
-  function (event) {
-    handleChange(event.target.files);
-  },
-  [handleChange]);
-
-
-  var handleFocus = (0, _react.useCallback)(
-  function (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);
-    }
-  },
-  [disabled, onFocus]);
-
-
-  var handleBlur = (0, _react.useCallback)(
-  function (e) {
-    setFocusedByTab(false);
-    if (!disabled) {
-      onBlur == null ? void 0 : onBlur(e);
-    }
-  },
-  [disabled, onBlur]);
-
-
-  var uploadButtonClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.uploadButton(theme), (_cx = {}, _cx[
-  _FileUploader2.jsStyles.uploadButtonFocus(theme)] = focusedByTab, _cx[
-  _FileUploader2.jsStyles.dragOver()] = isDraggable && !disabled, _cx[
-  _FileUploader2.jsStyles.disabled(theme)] = disabled, _cx[
-  _FileUploader2.jsStyles.warning(theme)] = !!warning, _cx[
-  _FileUploader2.jsStyles.error(theme)] = !!error, _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;
-
-  var linkClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.link(theme), (_cx4 = {}, _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 }) },
-    !isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList, null), /*#__PURE__*/
-    _react.default.createElement("div", { className: uploadButtonWrapperClassNames }, /*#__PURE__*/
-    _react.default.createElement("label", { ref: labelRef, className: uploadButtonClassNames }, /*#__PURE__*/
-    _react.default.createElement("div", { 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(_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)(_FileUploader);exports.FileUploader = FileUploader;
-FileUploader.displayName = 'FileUploader';

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

@@ -1 +0,0 @@
-{"version":3,"sources":["FileUploader.tsx"],"names":["stopPropagation","e","_FileUploader","React","forwardRef","props","ref","theme","ThemeContext","disabled","error","warning","onBlur","onFocus","multiple","width","fileUploaderWidth","request","getFileValidationText","onRequestSuccess","onRequestError","inputProps","FileUploaderControlContext","files","setFiles","removeFile","setFileValidationResult","reset","locale","inputRef","isAsync","isSingleMode","upload","tryValidateAndUpload","forEach","file","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","linkClassNames","link","linkDisabled","root","content","choosedFile","chooseFile","afterLinkText","orDragHere","fileInput","FileUploader","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 { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\nimport { useControlLocale } from '../../internal/FileUploaderControl/hooks/useControlLocale';\nimport { useUpload } from '../../internal/FileUploaderControl/hooks/useUpload';\nimport { useDrop } from '../../hooks/useDrop';\nimport { Nullable } from '../../typings/utility-types';\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';\n\nimport { jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\ninterface _FileUploaderProps\n  extends CommonProps,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onSelect'> {\n  /** Состояние ошибки всего контрола */\n  error?: boolean;\n  /** Состояние предупреждения всего контрола */\n  warning?: boolean;\n\n  /** Свойство ширины. */\n  width?: React.CSSProperties['width'];\n\n  /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */\n  request?: (file: FileUploaderAttachedFile) => Promise<void>;\n  /** Срабатывает при удачной попытке отправки через request */\n  onRequestSuccess?: (fileId: string) => void;\n  /** Срабатывает при неудачной попытке отправки через request */\n  onRequestError?: (fileId: string) => void;\n\n  /** Функция валидации каждого файла. Срабатывает после выбора файлов и перед попыткой отправить в request. */\n  getFileValidationText?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;\n}\n\nexport interface FileUploaderRef {\n  focus: () => void;\n  blur: () => void;\n  /** Сбрасывает выбранные файлы */\n  reset: () => void;\n}\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    onBlur,\n    onFocus,\n    multiple = false,\n    width = theme.fileUploaderWidth,\n    request,\n    getFileValidationText,\n    onRequestSuccess,\n    onRequestError,\n    ...inputProps\n  } = props;\n\n  const { files, setFiles, removeFile, setFileValidationResult, reset } = 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 = getFileValidationText && (await getFileValidationText(file));\n\n        if (!validationMessage) {\n          isAsync && upload(file);\n        } else {\n          setFileValidationResult(file.id, FileUploaderFileValidationResult.error(validationMessage));\n        }\n      });\n    },\n    [upload, error, getFileValidationText, 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 = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      handleChange(event.target.files);\n    },\n    [handleChange],\n  );\n\n  const handleFocus = useCallback(\n    (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    [disabled, onFocus],\n  );\n\n  const handleBlur = useCallback(\n    (e: React.FocusEvent<HTMLInputElement>) => {\n      setFocusedByTab(false);\n      if (!disabled) {\n        onBlur?.(e);\n      }\n    },\n    [disabled, onBlur],\n  );\n\n  const uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n    [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n    [jsStyles.dragOver()]: isDraggable && !disabled,\n    [jsStyles.disabled(theme)]: disabled,\n    [jsStyles.warning(theme)]: !!warning,\n    [jsStyles.error(theme)]: !!error,\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;\n\n  const linkClassNames = cx(jsStyles.link(theme), {\n    [jsStyles.linkDisabled(theme)]: disabled,\n  });\n\n  return (\n    <CommonWrapper {...props}>\n      <div className={jsStyles.root(theme)} style={useMemoObject({ width })}>\n        {!isSingleMode && !!files.length && <FileUploaderFileList />}\n        <div className={uploadButtonWrapperClassNames}>\n          <label ref={labelRef} className={uploadButtonClassNames}>\n            <div 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                  <FileUploaderFile file={files[0]} />\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>(_FileUploader);\nFileUploader.displayName = 'FileUploader';\n"]}

package/cjs/components/FileUploader/FileUploader.md

@@ -1,67 +0,0 @@
-Контрол загрузки файлов.
-Можно использовать для синхронной отправки данных, например, в форме.
-Или же можно использовать в асинхронном режиме.
-
-Синхронный контрол
-```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

@@ -1,19 +0,0 @@
-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;
-    linkDisabled(t: Theme): string;
-};