@skbkontur/react-ui 0.0.0-4ef0a955cc → 0.0.0-52df310f7c

package/components/FileUploader/FileUploader/FileUploader.js

@@ -0,0 +1,319 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "size", "renderFile"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { getAttachedFile } from "../../../internal/FileUploaderControl/fileUtils";
+import { cx } from "../../../lib/theming/Emotion";
+import { useMemoObject } from "../../../hooks/useMemoObject";
+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 { isBrowser } from "../../../lib/client";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { FileUploaderFileValidationResult } from "../../../internal/FileUploaderControl/FileUploaderFileValidationResult";
+import { useFileUploaderSize } from "../../../internal/FileUploaderControl/hooks/useFileUploaderSize";
+import { jsStyles } from "../FileUploader.styles";
+
+var stopPropagation = function stopPropagation(e) {
+  return e.stopPropagation();
+};
+
+export var FileUploaderDataTids = {
+  root: 'FileUploader__root',
+  content: 'FileUploader__content',
+  link: 'FileUploader__link'
+};
+
+var defaultRenderFile = function defaultRenderFile(file, fileNode) {
+  return fileNode;
+};
+
+var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _cx, _cx2, _cx3, _cx4, _cx5, _cx6;
+
+  var theme = useContext(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$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: cx(jsStyles.sizeSmall(theme)),
+    medium: cx(jsStyles.sizeMedium(theme)),
+    large: cx(jsStyles.sizeLarge(theme))
+  });
+  var sizeIconClass = useFileUploaderSize(size, {
+    small: jsStyles.iconSmall(theme),
+    medium: jsStyles.iconMedium(theme),
+    large: jsStyles.iconLarge(theme)
+  });
+  var contentInnerClass = useFileUploaderSize(size, {
+    small: jsStyles.contentInnerSmall(theme),
+    medium: jsStyles.contentInnerMedium(theme),
+    large: jsStyles.contentInnerLarge(theme)
+  });
+  /** common part **/
+
+  var handleChange = useCallback(function (newFiles) {
+    if (!newFiles) {
+      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) {
+    windowRef.current = window.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
+      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 _useState3 = useState(false),
+      hovered = _useState3[0],
+      setHovered = _useState3[1];
+
+  var uploadButtonClassNames = cx(jsStyles.uploadButton(theme), (_cx = {}, _cx[jsStyles.uploadButtonFocus(theme)] = focusedByTab, _cx[jsStyles.disabled(theme)] = disabled, _cx[jsStyles.hovered(theme)] = !disabled && hovered, _cx[jsStyles.warning(theme)] = !!warning, _cx[jsStyles.error(theme)] = !!error, _cx[jsStyles.dragOver(theme)] = isDraggable && !disabled, _cx[sizeClassName] = true, _cx));
+  var uploadButtonWrapperClassNames = cx((_cx2 = {}, _cx2[jsStyles.windowDragOver(theme)] = isWindowDraggable && !disabled, _cx2));
+  var uploadButtonIconClassNames = cx(jsStyles.icon(theme), (_cx3 = {}, _cx3[jsStyles.iconDisabled(theme)] = disabled, _cx3[sizeIconClass] = true, _cx3));
+  var hasOneFile = files.length === 1;
+  var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
+  var contentClassNames = cx(jsStyles.content(), (_cx4 = {}, _cx4[jsStyles.contentWithFiles()] = hasOneFileForSingle, _cx4));
+  var linkClassNames = cx(jsStyles.link(theme), (_cx5 = {}, _cx5[jsStyles.linkHovered(theme)] = !disabled && hovered, _cx5[jsStyles.linkDisabled(theme)] = disabled, _cx5));
+  useEffect(function () {
+    setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);
+  }, [isMinLengthReached, hasOneFileForSingle]);
+  var rootNodeRef = useRef(null);
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("div", {
+    "data-tid": FileUploaderDataTids.root,
+    className: jsStyles.root(theme),
+    style: useMemoObject({
+      width: width
+    }),
+    ref: rootNodeRef
+  }, !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/React.createElement(FileUploaderFileList, {
+    renderFile: renderFile,
+    size: size
+  }), /*#__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, (_cx6 = {}, _cx6[contentInnerClass] = !files.length || !isSingleMode, _cx6))
+  }, 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: hasOneFileForSingle ? jsStyles.afterLinkText_HasFiles() : jsStyles.afterLinkText()
+  }, hasOneFileForSingle ? /*#__PURE__*/React.createElement("div", {
+    ref: fileDivRef,
+    className: jsStyles.singleFile()
+  }, renderFile(files[0], /*#__PURE__*/React.createElement(FileUploaderFile, {
+    file: files[0],
+    size: size
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, locale.orDragHere, "\xA0", /*#__PURE__*/React.createElement("div", {
+    className: uploadButtonIconClassNames
+  }, /*#__PURE__*/React.createElement(UploadIcon, null))))), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
+    ref: inputRef,
+    tabIndex: disabled ? -1 : 0,
+    type: "file",
+    disabled: disabled,
+    multiple: multiple,
+    className: jsStyles.fileInput(),
+    onClick: stopPropagation,
+    onChange: handleInputChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд
+    ,
+    value: ''
+  }))))));
+});
+
+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","getAttachedFile","cx","useMemoObject","FileUploaderControlContext","useControlLocale","useUpload","useDrop","ThemeContext","UploadIcon","withFileUploaderControlProvider","keyListener","FileUploaderFile","FileUploaderFileList","isBrowser","CommonWrapper","FileUploaderFileValidationResult","useFileUploaderSize","jsStyles","stopPropagation","e","FileUploaderDataTids","root","content","link","defaultRenderFile","file","fileNode","_FileUploader","forwardRef","props","ref","theme","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","filesArray","Array","from","attachedFiles","map","length","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","current","window","document","focus","isTabPressed","blur","getRootNode","rootNodeRef","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","hovered","setHovered","uploadButtonClassNames","uploadButton","uploadButtonFocus","dragOver","uploadButtonWrapperClassNames","windowDragOver","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","contentClassNames","contentWithFiles","linkClassNames","linkHovered","linkDisabled","choosedFile","chooseFile","String","fromCharCode","afterLinkText_HasFiles","afterLinkText","singleFile","orDragHere","fileInput","FileUploader","memo","displayName"],"mappings":"0fAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,UAA7B,EAAyCC,SAAzC,EAAoDC,mBAApD,EAAyEC,MAAzE,EAAiFC,QAAjF,QAAiG,OAAjG;;AAEA,SAAmCC,eAAnC,QAA0D,8CAA1D;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,aAAT,QAA8B,2BAA9B;AACA,SAASC,0BAAT,QAA2C,+DAA3C;AACA,SAASC,gBAAT,QAAiC,2DAAjC;AACA,SAASC,SAAT,QAA0B,oDAA1B;AACA,SAASC,OAAT,QAAwB,qBAAxB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,UAAT,QAA2B,2BAA3B;;AAEA,SAASC,+BAAT,QAAgD,oEAAhD;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,gBAAT,QAAiC,sEAAjC;AACA,SAASC,oBAAT,QAAqC,8EAArC;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,gCAAT,QAAiD,qEAAjD;AACA,SAASC,mBAAT,QAAoC,8DAApC;;AAEA,SAASC,QAAT,QAAyB,uBAAzB;;AAEA,IAAMC,eAAwC,GAAG,SAA3CA,eAA2C,CAACC,CAAD,UAAOA,CAAC,CAACD,eAAF,EAAP,EAAjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,OAAO,IAAME,oBAAoB,GAAG;AAClCC,EAAAA,IAAI,EAAE,oBAD4B;AAElCC,EAAAA,OAAO,EAAE,uBAFyB;AAGlCC,EAAAA,IAAI,EAAE,oBAH4B,EAA7B;;;AAMP,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,EAAiCC,QAAjC,UAAkEA,QAAlE,EAA1B;;AAEA,IAAMC,aAAa,gBAAGlC,KAAK,CAACmC,UAAN,CAAsD,UAACC,KAAD,EAA4BC,GAA5B,EAAoC;AAC9G,MAAMC,KAAK,GAAGpC,UAAU,CAACY,YAAD,CAAxB;;AAEA;AACEyB,EAAAA,QADF;;;;;;;;;;;;;;;;AAiBIH,EAAAA,KAjBJ,CACEG,QADF,CAEEC,KAFF,GAiBIJ,KAjBJ,CAEEI,KAFF,CAGEC,OAHF,GAiBIL,KAjBJ,CAGEK,OAHF,mBAiBIL,KAjBJ,CAIEM,QAJF,CAIEA,QAJF,gCAIa,KAJb,kCAiBIN,KAjBJ,CAKEO,KALF,CAKEA,KALF,6BAKUL,KAAK,CAACM,iBALhB,mCAiBIR,KAjBJ,CAMES,SANF,CAMEA,SANF,iCAMc,KANd,oBAOEC,MAPF,GAiBIV,KAjBJ,CAOEU,MAPF,CAQEC,OARF,GAiBIX,KAjBJ,CAQEW,OARF,CASEC,QATF,GAiBIZ,KAjBJ,CASEY,QATF,CAUEC,OAVF,GAiBIb,KAjBJ,CAUEa,OAVF,CAWEC,oBAXF,GAiBId,KAjBJ,CAWEc,oBAXF,CAYEC,gBAZF,GAiBIf,KAjBJ,CAYEe,gBAZF,CAaEC,cAbF,GAiBIhB,KAjBJ,CAaEgB,cAbF,eAiBIhB,KAjBJ,CAcEiB,IAdF,CAcEA,IAdF,4BAcS,OAdT,mCAiBIjB,KAjBJ,CAeEkB,UAfF,CAeEA,UAfF,kCAeevB,iBAff,qBAgBKwB,UAhBL,iCAiBInB,KAjBJ;;AAmBA;AACElC,EAAAA,UAAU,CAACQ,0BAAD,CADZ,CAAQ8C,KAAR,eAAQA,KAAR,CAAeC,QAAf,eAAeA,QAAf,CAAyBC,UAAzB,eAAyBA,UAAzB,CAAqCC,KAArC,eAAqCA,KAArC,CAA4CC,uBAA5C,eAA4CA,uBAA5C,CAAqEC,kBAArE,eAAqEA,kBAArE;;AAGA,MAAMC,MAAM,GAAGnD,gBAAgB,EAA/B;;AAEA,MAAMoD,QAAQ,GAAG1D,MAAM,CAAmB,IAAnB,CAAvB;AACA,MAAM2D,UAAU,GAAG3D,MAAM,CAAiB,IAAjB,CAAzB;;AAEA,MAAM4D,OAAO,GAAG,CAAC,CAAChB,OAAlB;AACA,MAAMiB,YAAY,GAAG,CAACxB,QAAtB;;AAEA,kBAA0CpC,QAAQ,CAAC,IAAD,CAAlD,CAAO6D,aAAP,gBAAsBC,gBAAtB;AACA,MAAMC,MAAM,GAAGzD,SAAS,CAACqC,OAAD,EAAUE,gBAAV,EAA4BC,cAA5B,CAAxB;;AAEA,MAAMkB,oBAAoB,GAAGrE,WAAW;AACtC,YAACuD,KAAD,EAAuC;AACrCA,IAAAA,KAAK,CAACe,OAAN,gGAAc,iBAAOvC,IAAP;AACckB,gBAAAA,oBADd,sEAC6CA,oBAAoB,CAAClB,IAAD,CADjE,2CACNwC,iBADM;;AAGZ,oBAAI,CAACA,iBAAL,EAAwB;AACtBP,kBAAAA,OAAO,IAAII,MAAM,CAACrC,IAAD,CAAjB;AACD,iBAFD,MAEO;AACL4B,kBAAAA,uBAAuB,CAAC5B,IAAI,CAACyC,EAAN,EAAUnD,gCAAgC,CAACkB,KAAjC,CAAuCgC,iBAAvC,CAAV,CAAvB;AACD,iBAPW,wDAAd;;AASD,GAXqC;AAYtC,GAACtB,oBAAD,EAAuBe,OAAvB,EAAgCI,MAAhC,EAAwCT,uBAAxC,CAZsC,CAAxC;;;AAeA,MAAMc,aAAa,GAAGnD,mBAAmB,CAAC8B,IAAD,EAAO;AAC9CsB,IAAAA,KAAK,EAAEnE,EAAE,CAACgB,QAAQ,CAACoD,SAAT,CAAmBtC,KAAnB,CAAD,CADqC;AAE9CuC,IAAAA,MAAM,EAAErE,EAAE,CAACgB,QAAQ,CAACsD,UAAT,CAAoBxC,KAApB,CAAD,CAFoC;AAG9CyC,IAAAA,KAAK,EAAEvE,EAAE,CAACgB,QAAQ,CAACwD,SAAT,CAAmB1C,KAAnB,CAAD,CAHqC,EAAP,CAAzC;;;AAMA,MAAM2C,aAAa,GAAG1D,mBAAmB,CAAC8B,IAAD,EAAO;AAC9CsB,IAAAA,KAAK,EAAEnD,QAAQ,CAAC0D,SAAT,CAAmB5C,KAAnB,CADuC;AAE9CuC,IAAAA,MAAM,EAAErD,QAAQ,CAAC2D,UAAT,CAAoB7C,KAApB,CAFsC;AAG9CyC,IAAAA,KAAK,EAAEvD,QAAQ,CAAC4D,SAAT,CAAmB9C,KAAnB,CAHuC,EAAP,CAAzC;;;AAMA,MAAM+C,iBAAiB,GAAG9D,mBAAmB,CAAC8B,IAAD,EAAO;AAClDsB,IAAAA,KAAK,EAAEnD,QAAQ,CAAC8D,iBAAT,CAA2BhD,KAA3B,CAD2C;AAElDuC,IAAAA,MAAM,EAAErD,QAAQ,CAAC+D,kBAAT,CAA4BjD,KAA5B,CAF0C;AAGlDyC,IAAAA,KAAK,EAAEvD,QAAQ,CAACgE,iBAAT,CAA2BlD,KAA3B,CAH2C,EAAP,CAA7C;;;AAMA;AACA,MAAMmD,YAAY,GAAGxF,WAAW;AAC9B,YAACyF,QAAD,EAA+B;AAC7B,QAAI,CAACA,QAAL,EAAe;AACb;AACD;;AAED,QAAIC,UAAU,GAAGC,KAAK,CAACC,IAAN,CAAWH,QAAX,CAAjB;;AAEA,QAAIxB,YAAJ,EAAkB;AAChByB,MAAAA,UAAU,GAAG,CAACA,UAAU,CAAC,CAAD,CAAX,CAAb;AACD;;AAED,QAAMG,aAAa,GAAGH,UAAU,CAACI,GAAX,CAAexF,eAAf,CAAtB;;AAEA,QAAI2D,YAAY,IAAI4B,aAAa,CAACE,MAA9B,IAAwCxC,KAAK,CAACwC,MAAlD,EAA0D;AACxDtC,MAAAA,UAAU,CAACF,KAAK,CAAC,CAAD,CAAL,CAASiB,EAAV,CAAV;AACD;;AAED,QAAIqB,aAAa,CAACE,MAAlB,EAA0B;AACxBvC,MAAAA,QAAQ,CAACqC,aAAD,CAAR;AACAxB,MAAAA,oBAAoB,CAACwB,aAAD,CAApB;AACD;AACF,GAtB6B;AAuB9B,GAACxB,oBAAD,EAAuBb,QAAvB,EAAiCS,YAAjC,EAA+CV,KAA/C,EAAsDE,UAAtD,CAvB8B,CAAhC;;;AA0BA,MAAMuC,UAAU,GAAGhG,WAAW;AAC5B,YAACiG,KAAD,EAAW;AACT,QAAI3D,QAAJ,EAAc;AACZ;AACD;;AAED,QAAQ4D,YAAR,GAAyBD,KAAzB,CAAQC,YAAR;AACA,QAAQ3C,KAAR,GAAkB2C,YAAlB,CAAQ3C,KAAR;;AAEA,QAAI,CAAAA,KAAK,QAAL,YAAAA,KAAK,CAAEwC,MAAP,IAAgB,CAApB,EAAuB;AACrBP,MAAAA,YAAY,CAACjC,KAAD,CAAZ;AACA2C,MAAAA,YAAY,CAACC,SAAb;AACD;AACF,GAb2B;AAc5B,GAACX,YAAD,EAAelD,QAAf,CAd4B,CAA9B;;;AAiBA,iBAAuC1B,OAAO,CAAmB,EAAEwF,MAAM,EAAEJ,UAAV,EAAnB,CAA9C,CAAQK,WAAR,YAAQA,WAAR,CAA0BC,QAA1B,YAAqBlE,GAArB;AACA,kBAA2DxB,OAAO,EAAlE,CAAqB2F,iBAArB,aAAQF,WAAR,CAA6CG,SAA7C,aAAwCpE,GAAxC;;AAEA,MAAIjB,SAAJ,EAAe;AACbqF,IAAAA,SAAS,CAACC,OAAV,GAAoBC,MAAM,CAACC,QAA3B;AACD;;AAED,MAAMC,KAAK,GAAG5G,WAAW,CAAC,YAAM;AAC9BgB,IAAAA,WAAW,CAAC6F,YAAZ,GAA2B,IAA3B;AACA,yBAAA/C,QAAQ,CAAC2C,OAAT,uCAAkBG,KAAlB;AACD,GAHwB,EAGtB,EAHsB,CAAzB;;AAKA,MAAME,IAAI,GAAG9G,WAAW,CAAC,YAAM;AAC7B,0BAAA8D,QAAQ,CAAC2C,OAAT,wCAAkBK,IAAlB;AACD,GAFuB,EAErB,EAFqB,CAAxB;;AAIA3G,EAAAA,mBAAmB,CAACiC,GAAD,EAAM,oBAAO,EAAEwE,KAAK,EAALA,KAAF,EAASE,IAAI,EAAJA,IAAT,EAAepD,KAAK,EAALA,KAAf,EAAsBqD,WAAW,EAAE,+BAAMC,WAAW,CAACP,OAAlB,EAAnC,EAAP,EAAN,EAA8E;AAC/FrE,EAAAA,GAD+F;AAE/F0E,EAAAA,IAF+F;AAG/FF,EAAAA,KAH+F;AAI/FlD,EAAAA,KAJ+F,CAA9E,CAAnB;;;AAOA,mBAAwCrD,QAAQ,CAAC,KAAD,CAAhD,CAAO4G,YAAP,iBAAqBC,eAArB;AACA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAAClB,KAAD,EAAgD;AACxElD,IAAAA,QAAQ,QAAR,YAAAA,QAAQ,CAAGkD,KAAH,CAAR;AACAT,IAAAA,YAAY,CAACS,KAAK,CAACmB,MAAN,CAAa7D,KAAd,CAAZ;AACD,GAHD;;AAKA,MAAM8D,WAAW,GAAG,SAAdA,WAAc,CAAC5F,CAAD,EAA2C;AAC7D,QAAI,CAACa,QAAL,EAAe;AACb;AACA;AACAgF,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAItG,WAAW,CAAC6F,YAAhB,EAA8B;AAC5BK,UAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,OAJoB,CAArB;AAKApE,MAAAA,OAAO,QAAP,YAAAA,OAAO,CAAGrB,CAAH,CAAP;AACD;AACF,GAXD;;AAaA,MAAM8F,UAAU,GAAG,SAAbA,UAAa,CAAC9F,CAAD,EAA2C;AAC5DyF,IAAAA,eAAe,CAAC,KAAD,CAAf;AACA,QAAI,CAAC5E,QAAL,EAAe;AACbO,MAAAA,MAAM,QAAN,YAAAA,MAAM,CAAGpB,CAAH,CAAN;AACD;AACF,GALD;;AAOA,mBAA8BpB,QAAQ,CAAC,KAAD,CAAtC,CAAOmH,OAAP,iBAAgBC,UAAhB;;AAEA,MAAMC,sBAAsB,GAAGnH,EAAE,CAACgB,QAAQ,CAACoG,YAAT,CAAsBtF,KAAtB,CAAD;AAC9Bd,EAAAA,QAAQ,CAACqG,iBAAT,CAA2BvF,KAA3B,CAD8B,IACM4E,YADN;AAE9B1F,EAAAA,QAAQ,CAACe,QAAT,CAAkBD,KAAlB,CAF8B,IAEHC,QAFG;AAG9Bf,EAAAA,QAAQ,CAACiG,OAAT,CAAiBnF,KAAjB,CAH8B,IAGJ,CAACC,QAAD,IAAakF,OAHT;AAI9BjG,EAAAA,QAAQ,CAACiB,OAAT,CAAiBH,KAAjB,CAJ8B,IAIJ,CAAC,CAACG,OAJE;AAK9BjB,EAAAA,QAAQ,CAACgB,KAAT,CAAeF,KAAf,CAL8B,IAKN,CAAC,CAACE,KALI;AAM9BhB,EAAAA,QAAQ,CAACsG,QAAT,CAAkBxF,KAAlB,CAN8B,IAMHgE,WAAW,IAAI,CAAC/D,QANb;AAO9BmC,EAAAA,aAP8B,IAOd,IAPc,OAAjC;;;AAUA,MAAMqD,6BAA6B,GAAGvH,EAAE;AACrCgB,EAAAA,QAAQ,CAACwG,cAAT,CAAwB1F,KAAxB,CADqC,IACJkE,iBAAiB,IAAI,CAACjE,QADlB,QAAxC;;;AAIA,MAAM0F,0BAA0B,GAAGzH,EAAE,CAACgB,QAAQ,CAAC0G,IAAT,CAAc5F,KAAd,CAAD;AAClCd,EAAAA,QAAQ,CAAC2G,YAAT,CAAsB7F,KAAtB,CADkC,IACHC,QADG;AAElC0C,EAAAA,aAFkC,IAElB,IAFkB,QAArC;;;AAKA,MAAMmD,UAAU,GAAG5E,KAAK,CAACwC,MAAN,KAAiB,CAApC;AACA,MAAMqC,mBAAmB,GAAGnE,YAAY,IAAIkE,UAAhB,IAA8B,CAACvF,SAA3D;;AAEA,MAAMyF,iBAAiB,GAAG9H,EAAE,CAACgB,QAAQ,CAACK,OAAT,EAAD;AACzBL,EAAAA,QAAQ,CAAC+G,gBAAT,EADyB,IACKF,mBADL,QAA5B;;;AAIA,MAAMG,cAAc,GAAGhI,EAAE,CAACgB,QAAQ,CAACM,IAAT,CAAcQ,KAAd,CAAD;AACtBd,EAAAA,QAAQ,CAACiH,WAAT,CAAqBnG,KAArB,CADsB,IACQ,CAACC,QAAD,IAAakF,OADrB;AAEtBjG,EAAAA,QAAQ,CAACkH,YAAT,CAAsBpG,KAAtB,CAFsB,IAESC,QAFT,QAAzB;;;AAKApC,EAAAA,SAAS,CAAC,YAAM;AACdiE,IAAAA,gBAAgB,CAACiE,mBAAmB,GAAG,CAACxE,kBAAJ,GAAyB,IAA7C,CAAhB;AACD,GAFQ,EAEN,CAACA,kBAAD,EAAqBwE,mBAArB,CAFM,CAAT;;AAIA,MAAMpB,WAAW,GAAG5G,MAAM,CAAC,IAAD,CAA1B;;AAEA;AACE,wBAAC,aAAD,EAAmB+B,KAAnB;AACE;AACE,kBAAUT,oBAAoB,CAACC,IADjC;AAEE,MAAA,SAAS,EAAEJ,QAAQ,CAACI,IAAT,CAAcU,KAAd,CAFb;AAGE,MAAA,KAAK,EAAE7B,aAAa,CAAC,EAAEkC,KAAK,EAALA,KAAF,EAAD,CAHtB;AAIE,MAAA,GAAG,EAAEsE,WAJP;;AAMG,KAACpE,SAAD,IAAc,CAACqB,YAAf,IAA+B,CAAC,CAACV,KAAK,CAACwC,MAAvC,iBAAiD,oBAAC,oBAAD,IAAsB,UAAU,EAAE1C,UAAlC,EAA8C,IAAI,EAAED,IAApD,GANpD;AAOE,iCAAK,SAAS,EAAE0E,6BAAhB;AACE;AACE,MAAA,YAAY,EAAE,gCAAML,UAAU,CAAC,IAAD,CAAhB,EADhB;AAEE,MAAA,YAAY,EAAE,gCAAMA,UAAU,CAAC,KAAD,CAAhB,EAFhB;AAGE,MAAA,GAAG,EAAEnB,QAHP;AAIE,MAAA,SAAS,EAAEoB,sBAJb;;AAME;AACE,kBAAUhG,oBAAoB,CAACE,OADjC;AAEE,MAAA,SAAS,EAAErB,EAAE,CAAC8H,iBAAD,mBAAuBjD,iBAAvB,IAA2C,CAAC7B,KAAK,CAACwC,MAAP,IAAiB,CAAC9B,YAA7D,QAFf;;AAIGC,IAAAA,aAAa;AACZ,kCAAM,YAAUxC,oBAAoB,CAACG,IAArC,EAA2C,SAAS,EAAE0G,cAAtD;AACGH,IAAAA,mBAAmB,GAAGvE,MAAM,CAAC6E,WAAV,GAAwB7E,MAAM,CAAC8E,UADrD,CALJ;;;AASGzE,IAAAA,aAAa,IAAI0E,MAAM,CAACC,YAAP,CAAoB,IAApB,CATpB,CAS8C,YAT9C;AAUE,iCAAK,SAAS,EAAET,mBAAmB,GAAG7G,QAAQ,CAACuH,sBAAT,EAAH,GAAuCvH,QAAQ,CAACwH,aAAT,EAA1E;AACGX,IAAAA,mBAAmB;AAClB,iCAAK,GAAG,EAAErE,UAAV,EAAsB,SAAS,EAAExC,QAAQ,CAACyH,UAAT,EAAjC;AACG3F,IAAAA,UAAU,CAACE,KAAK,CAAC,CAAD,CAAN,eAAW,oBAAC,gBAAD,IAAkB,IAAI,EAAEA,KAAK,CAAC,CAAD,CAA7B,EAAkC,IAAI,EAAEH,IAAxC,GAAX,CADb,CADkB;;;AAKlB;AACGS,IAAAA,MAAM,CAACoF,UADV;AAEE,iCAAK,SAAS,EAAEjB,0BAAhB;AACE,wBAAC,UAAD,OADF,CAFF,CANJ,CAVF,CANF;;;;;;AA+BE;AACM1E,IAAAA,UADN;AAEE,MAAA,GAAG,EAAEQ,QAFP;AAGE,MAAA,QAAQ,EAAExB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAH5B;AAIE,MAAA,IAAI,EAAC,MAJP;AAKE,MAAA,QAAQ,EAAEA,QALZ;AAME,MAAA,QAAQ,EAAEG,QANZ;AAOE,MAAA,SAAS,EAAElB,QAAQ,CAAC2H,SAAT,EAPb;AAQE,MAAA,OAAO,EAAE1H,eARX;AASE,MAAA,QAAQ,EAAE2F,iBATZ;AAUE,MAAA,OAAO,EAAEE,WAVX;AAWE,MAAA,MAAM,EAAEE;AACR;AAZF,QAaE,KAAK,EAAE,EAbT,IA/BF,CADF,CAPF,CADF,CADF;;;;;;;AA6DD,CAtQqB,CAAtB;;;;AA0QA,OAAO,IAAM4B,YAAY,GAAGpI,+BAA+B;AACzDhB,KAAK,CAACqJ,IAAN,CAAWnH,aAAX,CADyD,CAApD;;AAGPkH,YAAY,CAACE,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, getAttachedFile } from '../../internal/FileUploaderControl/fileUtils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { InstanceWithRootNode } from '../../lib/rootNode';\nimport { useMemoObject } from '../../hooks/useMemoObject';\nimport { FileUploaderControlContext } from '../../internal/FileUploaderControl/FileUploaderControlContext';\nimport { useControlLocale } from '../../internal/FileUploaderControl/hooks/useControlLocale';\nimport { useUpload } from '../../internal/FileUploaderControl/hooks/useUpload';\nimport { useDrop } from '../../hooks/useDrop';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { UploadIcon } from '../../internal/icons/16px';\nimport { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';\nimport { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';\nimport { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';\nimport { isBrowser } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\nimport { useFileUploaderSize } from '../../internal/FileUploaderControl/hooks/useFileUploaderSize';\n\nimport { jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\nexport type FileUploaderSize = 'small' | 'medium' | 'large';\n\ntype FileUploaderOverriddenProps = 'size';\n\ninterface _FileUploaderProps\n  extends CommonProps,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, FileUploaderOverriddenProps> {\n  /** Состояние ошибки всего контрола */\n  error?: boolean;\n  /** Состояние предупреждения всего контрола */\n  warning?: boolean;\n  /** Свойство ширины. */\n  width?: React.CSSProperties['width'];\n  /**\n   * Задаёт размер контрола.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: FileUploaderSize;\n  /** Свойство, скрывающее отображение файлов.  */\n  hideFiles?: boolean;\n\n  /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */\n  request?: (file: FileUploaderAttachedFile) => Promise<void>;\n  /** Срабатывает при удачной попытке отправки через request */\n  onRequestSuccess?: (fileId: string) => void;\n  /** Срабатывает при неудачной попытке отправки через request */\n  onRequestError?: (fileId: string) => void;\n\n  /**\n   * Функция валидации каждого файла.\n   * Срабатывает после выбора файлов и перед попыткой отправить в request.\n   * Чтобы вывести валидацию ошибки, промис должен вернуть строку.\n   * */\n  validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;\n\n  /**\n   * Функция, позволяющая кастомизировать файлы.\n   * Через нее можно вешать кастомные валидации на каждый файл.\n   * */\n  renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;\n}\n\nexport interface FileUploaderRef extends InstanceWithRootNode {\n  focus: () => void;\n  blur: () => void;\n  /** Сбрасывает выбранные файлы */\n  reset: () => void;\n}\n\nexport const FileUploaderDataTids = {\n  root: 'FileUploader__root',\n  content: 'FileUploader__content',\n  link: 'FileUploader__link',\n} as const;\n\nconst defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;\n\nconst _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {\n  const theme = useContext(ThemeContext);\n\n  const {\n    disabled,\n    error,\n    warning,\n    multiple = false,\n    width = theme.fileUploaderWidth,\n    hideFiles = false,\n    onBlur,\n    onFocus,\n    onChange,\n    request,\n    validateBeforeUpload,\n    onRequestSuccess,\n    onRequestError,\n    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: cx(jsStyles.sizeSmall(theme)),\n    medium: cx(jsStyles.sizeMedium(theme)),\n    large: cx(jsStyles.sizeLarge(theme)),\n  });\n\n  const sizeIconClass = useFileUploaderSize(size, {\n    small: jsStyles.iconSmall(theme),\n    medium: jsStyles.iconMedium(theme),\n    large: jsStyles.iconLarge(theme),\n  });\n\n  const contentInnerClass = useFileUploaderSize(size, {\n    small: jsStyles.contentInnerSmall(theme),\n    medium: jsStyles.contentInnerMedium(theme),\n    large: jsStyles.contentInnerLarge(theme),\n  });\n\n  /** common part **/\n  const handleChange = useCallback(\n    (newFiles: FileList | null) => {\n      if (!newFiles) {\n        return;\n      }\n\n      let filesArray = Array.from(newFiles);\n\n      if (isSingleMode) {\n        filesArray = [filesArray[0]];\n      }\n\n      const attachedFiles = filesArray.map(getAttachedFile);\n\n      if (isSingleMode && attachedFiles.length && files.length) {\n        removeFile(files[0].id);\n      }\n\n      if (attachedFiles.length) {\n        setFiles(attachedFiles);\n        tryValidateAndUpload(attachedFiles);\n      }\n    },\n    [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile],\n  );\n\n  const handleDrop = useCallback(\n    (event) => {\n      if (disabled) {\n        return;\n      }\n\n      const { dataTransfer } = event;\n      const { files } = dataTransfer;\n\n      if (files?.length > 0) {\n        handleChange(files);\n        dataTransfer.clearData();\n      }\n    },\n    [handleChange, disabled],\n  );\n\n  const { isDraggable, ref: labelRef } = useDrop<HTMLLabelElement>({ onDrop: handleDrop });\n  const { isDraggable: isWindowDraggable, ref: windowRef } = useDrop<Document>();\n\n  if (isBrowser) {\n    windowRef.current = window.document;\n  }\n\n  const focus = useCallback(() => {\n    keyListener.isTabPressed = true;\n    inputRef.current?.focus();\n  }, []);\n\n  const blur = useCallback(() => {\n    inputRef.current?.blur();\n  }, []);\n\n  useImperativeHandle(ref, () => ({ focus, blur, reset, getRootNode: () => rootNodeRef.current }), [\n    ref,\n    blur,\n    focus,\n    reset,\n  ]);\n\n  const [focusedByTab, setFocusedByTab] = useState(false);\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    handleChange(event.target.files);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          setFocusedByTab(true);\n        }\n      });\n      onFocus?.(e);\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedByTab(false);\n    if (!disabled) {\n      onBlur?.(e);\n    }\n  };\n\n  const [hovered, setHovered] = useState(false);\n\n  const uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n    [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n    [jsStyles.disabled(theme)]: disabled,\n    [jsStyles.hovered(theme)]: !disabled && hovered,\n    [jsStyles.warning(theme)]: !!warning,\n    [jsStyles.error(theme)]: !!error,\n    [jsStyles.dragOver(theme)]: isDraggable && !disabled,\n    [sizeClassName]: true,\n  });\n\n  const uploadButtonWrapperClassNames = cx({\n    [jsStyles.windowDragOver(theme)]: isWindowDraggable && !disabled,\n  });\n\n  const uploadButtonIconClassNames = cx(jsStyles.icon(theme), {\n    [jsStyles.iconDisabled(theme)]: disabled,\n    [sizeIconClass]: true,\n  });\n\n  const hasOneFile = files.length === 1;\n  const hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;\n\n  const contentClassNames = cx(jsStyles.content(), {\n    [jsStyles.contentWithFiles()]: hasOneFileForSingle,\n  });\n\n  const linkClassNames = cx(jsStyles.link(theme), {\n    [jsStyles.linkHovered(theme)]: !disabled && hovered,\n    [jsStyles.linkDisabled(theme)]: disabled,\n  });\n\n  useEffect(() => {\n    setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);\n  }, [isMinLengthReached, hasOneFileForSingle]);\n\n  const rootNodeRef = useRef(null);\n\n  return (\n    <CommonWrapper {...props}>\n      <div\n        data-tid={FileUploaderDataTids.root}\n        className={jsStyles.root(theme)}\n        style={useMemoObject({ width })}\n        ref={rootNodeRef}\n      >\n        {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} size={size} />}\n        <div className={uploadButtonWrapperClassNames}>\n          <label\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            ref={labelRef}\n            className={uploadButtonClassNames}\n          >\n            <div\n              data-tid={FileUploaderDataTids.content}\n              className={cx(contentClassNames, { [contentInnerClass]: !files.length || !isSingleMode })}\n            >\n              {isLinkVisible && (\n                <span data-tid={FileUploaderDataTids.link} className={linkClassNames}>\n                  {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}\n                </span>\n              )}\n              {isLinkVisible && String.fromCharCode(0xa0) /* &nbsp; */}\n              <div className={hasOneFileForSingle ? jsStyles.afterLinkText_HasFiles() : jsStyles.afterLinkText()}>\n                {hasOneFileForSingle ? (\n                  <div ref={fileDivRef} className={jsStyles.singleFile()}>\n                    {renderFile(files[0], <FileUploaderFile file={files[0]} size={size} />)}\n                  </div>\n                ) : (\n                  <>\n                    {locale.orDragHere}&nbsp;\n                    <div className={uploadButtonIconClassNames}>\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/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,56 @@
+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';
+export declare type FileUploaderSize = 'small' | 'medium' | 'large';
+declare type FileUploaderOverriddenProps = 'size';
+interface _FileUploaderProps extends CommonProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, FileUploaderOverriddenProps> {
+    /** Состояние ошибки всего контрола */
+    error?: boolean;
+    /** Состояние предупреждения всего контрола */
+    warning?: boolean;
+    /** Свойство ширины. */
+    width?: React.CSSProperties['width'];
+    /**
+     * Задаёт размер контрола.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
+     */
+    size?: FileUploaderSize;
+    /** Свойство, скрывающее отображение файлов.  */
+    hideFiles?: boolean;
+    /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */
+    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";
+};
+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,79 @@
+Контрол загрузки файлов.
+Можно использовать для синхронной отправки данных, например, в форме.
+Или же можно использовать в асинхронном режиме.
+
+Синхронный контрол
+```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 />
+```
+
+Использование `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;

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

@@ -0,0 +1,99 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+
+import { css, keyframes, memoizeStyle } from "../../../lib/theming/Emotion";
+import { fileUploaderSizeMixin } from "../FileUploader.mixins";
+var styles = {
+  pulse: function pulse() {
+    return keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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 css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: relative;\n      background-color: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n      position: relative;\n    "])), t.fileUploaderBg, t.fileUploaderLineHeight, t.fileUploaderFontSize, t.fileUploaderTextColorDefault);
+  },
+  uploadButton: function uploadButton(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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 css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0px 0px 0px 1px ", ";\n    "])), t.fileUploaderBorderWidth, t.fileUploaderBorderColorFocus, t.fileUploaderBorderColorFocus);
+  },
+  dragOver: function dragOver(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #2da4f9;\n      border-radius: ", ";\n      box-shadow: 0px 0px 0px 3px #2da4f9, 0px 0px 0px 8px rgba(45, 164, 249, 0.35);\n    "])), t.fileUploaderBorderRadius);
+  },
+  windowDragOver: function windowDragOver(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      animation: ", " 1.5s infinite;\n    "])), t.fileUploaderBorderRadius, styles.pulse());
+  },
+  content: function content() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: block;\n      width: 100%;\n      height: 100%;\n\n      overflow: hidden;\n      text-overflow: ellipsis;\n    "])));
+  },
+  contentWithFiles: function contentWithFiles() {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      align-items: center;\n    "])));
+  },
+  contentInnerSmall: function contentInnerSmall(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      width: calc(100% - ", " - ", ");\n    "])), t.inputIconSizeSmall, t.fileUploaderIconGapSmall);
+  },
+  contentInnerMedium: function contentInnerMedium(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      width: calc(100% - ", " - ", ");\n    "])), t.inputIconSizeMedium, t.fileUploaderIconGapMedium);
+  },
+  contentInnerLarge: function contentInnerLarge(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      width: calc(100% - ", " - ", ");\n    "])), t.inputIconSizeLarge, t.fileUploaderIconGapLarge);
+  },
+  fileInput: function fileInput() {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      width: 0;\n      height: 0;\n    "])));
+  },
+  afterLinkText: function afterLinkText() {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      display: inline;\n    "])));
+  },
+  afterLinkText_HasFiles: function afterLinkText_HasFiles() {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      justify-content: space-between;\n      flex: 1 1 auto;\n    "])));
+  },
+  warning: function warning(t) {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0px 0px 0px 1px ", ";\n    "])), t.fileUploaderBorderWidth, t.fileUploaderBorderColorWarning, t.fileUploaderBorderColorWarning);
+  },
+  error: function error(t) {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0px 0px 0px 1px ", ";\n    "])), t.fileUploaderBorderWidth, t.fileUploaderBorderColorError, t.fileUploaderBorderColorError);
+  },
+  hovered: function hovered(t) {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.fileUploaderHoveredBg);
+  },
+  linkHovered: function linkHovered(t) {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      text-decoration: ", ";\n    "])), t.fileUploaderLinkHoverTextDecoration);
+  },
+  disabled: function disabled(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\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 css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: absolute;\n      color: ", ";\n      text-align: right;\n    "])), t.fileUploaderIconColor);
+  },
+  iconDisabled: function iconDisabled(t) {
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.fileUploaderDisabledIconColor);
+  },
+  link: function link(t) {
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      outline: none;\n      text-decoration: none;\n      color: ", ";\n    "])), t.fileUploaderLinkColor);
+  },
+  linkDisabled: function linkDisabled(t) {
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      &:hover {\n        text-decoration: none;\n      }\n    "])), t.fileUploaderDisabledLinkColor);
+  },
+  singleFile: function singleFile() {
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n    "])));
+  },
+  sizeSmall: function sizeSmall(t) {
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), fileUploaderSizeMixin(t.fileUploaderFontSizeSmall, t.fileUploaderLineHeightSmall, t.fileUploaderPaddingXSmall, t.fileUploaderPaddingYSmall));
+  },
+  sizeMedium: function sizeMedium(t) {
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), fileUploaderSizeMixin(t.fileUploaderFontSizeMedium, t.fileUploaderLineHeightMedium, t.fileUploaderPaddingXMedium, t.fileUploaderPaddingYMedium));
+  },
+  sizeLarge: function sizeLarge(t) {
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), fileUploaderSizeMixin(t.fileUploaderFontSizeLarge, t.fileUploaderLineHeightLarge, t.fileUploaderPaddingXLarge, t.fileUploaderPaddingYLarge));
+  },
+  iconSmall: function iconSmall(t) {
+    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      width: ", ";\n      bottom: ", ";\n      right: ", ";\n    "])), t.fileUploaderFontSizeSmall, t.fileUploaderLineHeightSmall, t.inputIconSizeSmall, t.fileUploaderPaddingYSmall, t.fileUploaderPaddingXSmall);
+  },
+  iconMedium: function iconMedium(t) {
+    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      width: ", ";\n      bottom: ", ";\n      right: ", ";\n    "])), t.fileUploaderFontSizeMedium, t.fileUploaderLineHeightMedium, t.inputIconSizeMedium, t.fileUploaderPaddingYMedium, t.fileUploaderPaddingXMedium);
+  },
+  iconLarge: function iconLarge(t) {
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      width: ", ";\n      bottom: ", ";\n      right: ", ";\n    "])), t.fileUploaderFontSizeLarge, t.fileUploaderLineHeightLarge, t.inputIconSizeLarge, t.fileUploaderPaddingYLarge, t.fileUploaderPaddingXLarge);
+  }
+};
+export var jsStyles = memoizeStyle(styles);