@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-b08da15166

package/components/DropdownMenu/DropdownMenu.md

@@ -1,73 +1,154 @@
-Простой пример
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-С указанием ширины меню
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<DropdownMenu caption={<Button use="primary">Открыть меню</Button>} menuWidth={350}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-С указанием максимальной высоты меню
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<DropdownMenu caption={<Button use="primary">Открыть меню</Button>} menuMaxHeight={150}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-В `caption` можно передать любой элемент
-
-```jsx harmony
-import MenuIcon from '@skbkontur/react-icons/Menu';
-import { MenuItem } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  caption={
-    <span style={{ display: 'inline-block' }} tabIndex="0">
-      <MenuIcon size={32} />
-    </span>
-  }
-  menuWidth="300px"
->
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
+Базовый пример меню.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+Меню с заданной шириной.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню c заданной шириной</Button>} menuWidth={350}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+Меню с заданной максимальной высотой.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню c заданной высотой</Button>} menuMaxHeight={150}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+Меню с выпадашкой слева по центру.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu positions={["left middle"]} caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+Меню c шапкой и подвалом.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  header={<p>Это шапка в виде обычного текста</p>}
+  footer={<Button>А это подвал в виде кнопки</Button>}
+  caption={<Button use="primary">Открыть меню</Button>}
+  >
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+Меню с отключенной анимацией.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  disableAnimations
+  caption={<Button use="primary">Открыть меню без анимации</Button>}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+В `caption` можно передать любой элемент.
+
+```jsx harmony
+import MenuIcon from '@skbkontur/react-icons/Menu';
+import { MenuItem } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <MenuIcon size={32} />
+    </span>
+  }
+  menuWidth="300px"
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
+
+Условный рендер элементов меню (с сохранением поведения [`MenuItem`](#/Components/MenuItem)).
+
+```jsx harmony
+import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
+
+const [showItems, setShowItems] = React.useState(false);
+
+const hiddenItems = [
+  <MenuSeparator />,
+  <MenuItem>А я скрываюсь</MenuItem>,
+  <MenuItem>И я</MenuItem>,
+  <MenuItem>Я с вами</MenuItem>,
+];
+
+
+<Gapped>
+  <Button onClick={() => setShowItems(!showItems)}>
+    {showItems ? 'Спрятать' : 'Показать'} элементы
+  </Button>
+
+  <DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
+    <MenuItem>Меня видно всегда</MenuItem>
+    <MenuItem>Меня тоже</MenuItem>
+    <MenuItem>Ага, и меня!</MenuItem>
+    {showItems && hiddenItems}
+  </DropdownMenu>
+</Gapped>
+```

package/components/DropdownMenu/index/index.js

@@ -1 +1 @@
-export * from "..\\DropdownMenu";
+export * from "../DropdownMenu";

package/components/DropdownMenu/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAd","sourcesContent":["export * from './DropdownMenu';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAd","sourcesContent":["export * from './DropdownMenu';\n"]}

package/components/DropdownMenu/index/package.json

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

package/components/DropdownMenu/package.json

@@ -1,5 +1,5 @@
 {
-  "main": "..\\..\\cjs\\components\\DropdownMenu\\index.js",
+  "main": "../../cjs/components/DropdownMenu/index.js",
   "module": "index",
   "types": "index.d.ts",
   "sideEffects": false

package/components/FileUploader/FileUploader/FileUploader.js

@@ -0,0 +1,273 @@
+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", "renderFile"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useContext, 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 { jsStyles } from "../FileUploader.styles";
+
+var stopPropagation = function stopPropagation(e) {
+  return e.stopPropagation();
+};
+
+var defaultRenderFile = function defaultRenderFile(file, fileNode) {
+  return fileNode;
+};
+
+var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _cx, _cx2, _cx3, _cx4;
+
+  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$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;
+
+  var locale = useControlLocale();
+  var inputRef = useRef(null);
+  var isAsync = !!request;
+  var isSingleMode = !multiple;
+  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);
+      };
+    }());
+  }, [upload, validateBeforeUpload, isAsync]);
+  /** 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
+    };
+  }, [ref]);
+
+  var _useState = 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.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 _useState2 = useState(false),
+      hovered = _useState2[0],
+      setHovered = _useState2[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));
+  var uploadButtonWrapperClassNames = cx((_cx2 = {}, _cx2[jsStyles.windowDragOver(theme)] = isWindowDraggable && !disabled, _cx2));
+  var uploadButtonIconClassNames = cx(jsStyles.icon(theme), (_cx3 = {}, _cx3[jsStyles.iconDisabled(theme)] = disabled, _cx3));
+  var hasOneFile = files.length === 1;
+  var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
+  var linkClassNames = cx(jsStyles.link(theme), (_cx4 = {}, _cx4[jsStyles.linkHovered(theme)] = !disabled && hovered, _cx4[jsStyles.linkDisabled(theme)] = disabled, _cx4));
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("div", {
+    className: jsStyles.root(theme),
+    style: useMemoObject({
+      width: width
+    })
+  }, !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/React.createElement(FileUploaderFileList, {
+    renderFile: renderFile
+  }), /*#__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": 'FileUploader__content',
+    className: jsStyles.content()
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-tid": 'FileUploader__link',
+    className: linkClassNames
+  }, hasOneFileForSingle ? locale.choosedFile : locale.chooseFile), "\xA0", /*#__PURE__*/React.createElement("div", {
+    className: jsStyles.afterLinkText()
+  }, hasOneFileForSingle ? /*#__PURE__*/React.createElement("div", {
+    className: jsStyles.singleFile()
+  }, renderFile(files[0], /*#__PURE__*/React.createElement(FileUploaderFile, {
+    file: files[0]
+  }))) : /*#__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","useImperativeHandle","useRef","useState","getAttachedFile","cx","useMemoObject","FileUploaderControlContext","useControlLocale","useUpload","useDrop","ThemeContext","UploadIcon","withFileUploaderControlProvider","keyListener","FileUploaderFile","FileUploaderFileList","isBrowser","CommonWrapper","FileUploaderFileValidationResult","jsStyles","stopPropagation","e","defaultRenderFile","file","fileNode","_FileUploader","forwardRef","props","ref","theme","disabled","error","warning","multiple","width","fileUploaderWidth","hideFiles","onBlur","onFocus","onChange","request","validateBeforeUpload","onRequestSuccess","onRequestError","renderFile","inputProps","files","setFiles","removeFile","reset","setFileValidationResult","locale","inputRef","isAsync","isSingleMode","upload","tryValidateAndUpload","forEach","validationMessage","id","handleChange","newFiles","filesArray","Array","from","attachedFiles","map","length","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","current","window","document","focus","isTabPressed","blur","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","hovered","setHovered","uploadButtonClassNames","uploadButton","uploadButtonFocus","dragOver","uploadButtonWrapperClassNames","windowDragOver","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","linkClassNames","link","linkHovered","linkDisabled","root","content","choosedFile","chooseFile","afterLinkText","singleFile","orDragHere","fileInput","FileUploader","memo","displayName"],"mappings":"kfAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,UAA7B,EAAyCC,mBAAzC,EAA8DC,MAA9D,EAAsEC,QAAtE,QAAsF,OAAtF;;AAEA,SAAmCC,eAAnC,QAA0D,8CAA1D;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,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;;AAEA,SAASC,QAAT,QAAyB,uBAAzB;;AAEA,IAAMC,eAAwC,GAAG,SAA3CA,eAA2C,CAACC,CAAD,UAAOA,CAAC,CAACD,eAAF,EAAP,EAAjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,IAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,EAAiCC,QAAjC,UAAkEA,QAAlE,EAA1B;;AAEA,IAAMC,aAAa,gBAAG5B,KAAK,CAAC6B,UAAN,CAAsD,UAACC,KAAD,EAA4BC,GAA5B,EAAoC;AAC9G,MAAMC,KAAK,GAAG9B,UAAU,CAACW,YAAD,CAAxB;;AAEA;AACEoB,EAAAA,QADF;;;;;;;;;;;;;;;AAgBIH,EAAAA,KAhBJ,CACEG,QADF,CAEEC,KAFF,GAgBIJ,KAhBJ,CAEEI,KAFF,CAGEC,OAHF,GAgBIL,KAhBJ,CAGEK,OAHF,mBAgBIL,KAhBJ,CAIEM,QAJF,CAIEA,QAJF,gCAIa,KAJb,kCAgBIN,KAhBJ,CAKEO,KALF,CAKEA,KALF,6BAKUL,KAAK,CAACM,iBALhB,mCAgBIR,KAhBJ,CAMES,SANF,CAMEA,SANF,iCAMc,KANd,oBAOEC,MAPF,GAgBIV,KAhBJ,CAOEU,MAPF,CAQEC,OARF,GAgBIX,KAhBJ,CAQEW,OARF,CASEC,QATF,GAgBIZ,KAhBJ,CASEY,QATF,CAUEC,OAVF,GAgBIb,KAhBJ,CAUEa,OAVF,CAWEC,oBAXF,GAgBId,KAhBJ,CAWEc,oBAXF,CAYEC,gBAZF,GAgBIf,KAhBJ,CAYEe,gBAZF,CAaEC,cAbF,GAgBIhB,KAhBJ,CAaEgB,cAbF,qBAgBIhB,KAhBJ,CAcEiB,UAdF,CAcEA,UAdF,kCAcetB,iBAdf,qBAeKuB,UAfL,iCAgBIlB,KAhBJ;;AAkBA,oBAAwE5B,UAAU,CAACO,0BAAD,CAAlF,CAAQwC,KAAR,eAAQA,KAAR,CAAeC,QAAf,eAAeA,QAAf,CAAyBC,UAAzB,eAAyBA,UAAzB,CAAqCC,KAArC,eAAqCA,KAArC,CAA4CC,uBAA5C,eAA4CA,uBAA5C;;AAEA,MAAMC,MAAM,GAAG5C,gBAAgB,EAA/B;;AAEA,MAAM6C,QAAQ,GAAGnD,MAAM,CAAmB,IAAnB,CAAvB;;AAEA,MAAMoD,OAAO,GAAG,CAAC,CAACb,OAAlB;AACA,MAAMc,YAAY,GAAG,CAACrB,QAAtB;;AAEA,MAAMsB,MAAM,GAAG/C,SAAS,CAACgC,OAAD,EAAUE,gBAAV,EAA4BC,cAA5B,CAAxB;;AAEA,MAAMa,oBAAoB,GAAG1D,WAAW;AACtC,YAACgD,KAAD,EAAuC;AACrCA,IAAAA,KAAK,CAACW,OAAN,gGAAc,iBAAOlC,IAAP;AACckB,gBAAAA,oBADd,sEAC6CA,oBAAoB,CAAClB,IAAD,CADjE,2CACNmC,iBADM;;AAGZ,oBAAI,CAACA,iBAAL,EAAwB;AACtBL,kBAAAA,OAAO,IAAIE,MAAM,CAAChC,IAAD,CAAjB;AACD,iBAFD,MAEO;AACL2B,kBAAAA,uBAAuB,CAAC3B,IAAI,CAACoC,EAAN,EAAUzC,gCAAgC,CAACa,KAAjC,CAAuC2B,iBAAvC,CAAV,CAAvB;AACD,iBAPW,wDAAd;;AASD,GAXqC;AAYtC,GAACH,MAAD,EAASd,oBAAT,EAA+BY,OAA/B,CAZsC,CAAxC;;;AAeA;AACA,MAAMO,YAAY,GAAG9D,WAAW;AAC9B,YAAC+D,QAAD,EAA+B;AAC7B,QAAI,CAACA,QAAL,EAAe;AACb;AACD;;AAED,QAAIC,UAAU,GAAGC,KAAK,CAACC,IAAN,CAAWH,QAAX,CAAjB;;AAEA,QAAIP,YAAJ,EAAkB;AAChBQ,MAAAA,UAAU,GAAG,CAACA,UAAU,CAAC,CAAD,CAAX,CAAb;AACD;;AAED,QAAMG,aAAa,GAAGH,UAAU,CAACI,GAAX,CAAe/D,eAAf,CAAtB;;AAEA,QAAImD,YAAY,IAAIW,aAAa,CAACE,MAA9B,IAAwCrB,KAAK,CAACqB,MAAlD,EAA0D;AACxDnB,MAAAA,UAAU,CAACF,KAAK,CAAC,CAAD,CAAL,CAASa,EAAV,CAAV;AACD;;AAED,QAAIM,aAAa,CAACE,MAAlB,EAA0B;AACxBpB,MAAAA,QAAQ,CAACkB,aAAD,CAAR;AACAT,MAAAA,oBAAoB,CAACS,aAAD,CAApB;AACD;AACF,GAtB6B;AAuB9B,GAACT,oBAAD,EAAuBT,QAAvB,EAAiCO,YAAjC,EAA+CR,KAA/C,EAAsDE,UAAtD,CAvB8B,CAAhC;;;AA0BA,MAAMoB,UAAU,GAAGtE,WAAW;AAC5B,YAACuE,KAAD,EAAW;AACT,QAAIvC,QAAJ,EAAc;AACZ;AACD;;AAED,QAAQwC,YAAR,GAAyBD,KAAzB,CAAQC,YAAR;AACA,QAAQxB,KAAR,GAAkBwB,YAAlB,CAAQxB,KAAR;;AAEA,QAAI,CAAAA,KAAK,QAAL,YAAAA,KAAK,CAAEqB,MAAP,IAAgB,CAApB,EAAuB;AACrBP,MAAAA,YAAY,CAACd,KAAD,CAAZ;AACAwB,MAAAA,YAAY,CAACC,SAAb;AACD;AACF,GAb2B;AAc5B,GAACX,YAAD,EAAe9B,QAAf,CAd4B,CAA9B;;;AAiBA,iBAAuCrB,OAAO,CAAmB,EAAE+D,MAAM,EAAEJ,UAAV,EAAnB,CAA9C,CAAQK,WAAR,YAAQA,WAAR,CAA0BC,QAA1B,YAAqB9C,GAArB;AACA,kBAA2DnB,OAAO,EAAlE,CAAqBkE,iBAArB,aAAQF,WAAR,CAA6CG,SAA7C,aAAwChD,GAAxC;;AAEA,MAAIZ,SAAJ,EAAe;AACb4D,IAAAA,SAAS,CAACC,OAAV,GAAoBC,MAAM,CAACC,QAA3B;AACD;;AAED,MAAMC,KAAK,GAAGlF,WAAW,CAAC,YAAM;AAC9Be,IAAAA,WAAW,CAACoE,YAAZ,GAA2B,IAA3B;AACA,yBAAA7B,QAAQ,CAACyB,OAAT,uCAAkBG,KAAlB;AACD,GAHwB,EAGtB,EAHsB,CAAzB;;AAKA,MAAME,IAAI,GAAGpF,WAAW,CAAC,YAAM;AAC7B,0BAAAsD,QAAQ,CAACyB,OAAT,wCAAkBK,IAAlB;AACD,GAFuB,EAErB,EAFqB,CAAxB;;AAIAlF,EAAAA,mBAAmB,CAAC4B,GAAD,EAAM,oBAAO,EAAEoD,KAAK,EAALA,KAAF,EAASE,IAAI,EAAJA,IAAT,EAAejC,KAAK,EAALA,KAAf,EAAP,EAAN,EAAsC,CAACrB,GAAD,CAAtC,CAAnB;;AAEA,kBAAwC1B,QAAQ,CAAC,KAAD,CAAhD,CAAOiF,YAAP,gBAAqBC,eAArB;AACA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAAChB,KAAD,EAAgD;AACxE9B,IAAAA,QAAQ,QAAR,YAAAA,QAAQ,CAAG8B,KAAH,CAAR;AACAT,IAAAA,YAAY,CAACS,KAAK,CAACiB,MAAN,CAAaxC,KAAd,CAAZ;AACD,GAHD;;AAKA,MAAMyC,WAAW,GAAG,SAAdA,WAAc,CAAClE,CAAD,EAA2C;AAC7D,QAAI,CAACS,QAAL,EAAe;AACb;AACA;AACA0D,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAI3E,WAAW,CAACoE,YAAhB,EAA8B;AAC5BG,UAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,OAJoB,CAArB;AAKA9C,MAAAA,OAAO,QAAP,YAAAA,OAAO,CAAGjB,CAAH,CAAP;AACD;AACF,GAXD;;AAaA,MAAMoE,UAAU,GAAG,SAAbA,UAAa,CAACpE,CAAD,EAA2C;AAC5D+D,IAAAA,eAAe,CAAC,KAAD,CAAf;AACA,QAAI,CAACtD,QAAL,EAAe;AACbO,MAAAA,MAAM,QAAN,YAAAA,MAAM,CAAGhB,CAAH,CAAN;AACD;AACF,GALD;;AAOA,mBAA8BnB,QAAQ,CAAC,KAAD,CAAtC,CAAOwF,OAAP,iBAAgBC,UAAhB;;AAEA,MAAMC,sBAAsB,GAAGxF,EAAE,CAACe,QAAQ,CAAC0E,YAAT,CAAsBhE,KAAtB,CAAD;AAC9BV,EAAAA,QAAQ,CAAC2E,iBAAT,CAA2BjE,KAA3B,CAD8B,IACMsD,YADN;AAE9BhE,EAAAA,QAAQ,CAACW,QAAT,CAAkBD,KAAlB,CAF8B,IAEHC,QAFG;AAG9BX,EAAAA,QAAQ,CAACuE,OAAT,CAAiB7D,KAAjB,CAH8B,IAGJ,CAACC,QAAD,IAAa4D,OAHT;AAI9BvE,EAAAA,QAAQ,CAACa,OAAT,CAAiBH,KAAjB,CAJ8B,IAIJ,CAAC,CAACG,OAJE;AAK9Bb,EAAAA,QAAQ,CAACY,KAAT,CAAeF,KAAf,CAL8B,IAKN,CAAC,CAACE,KALI;AAM9BZ,EAAAA,QAAQ,CAAC4E,QAAT,CAAkBlE,KAAlB,CAN8B,IAMH4C,WAAW,IAAI,CAAC3C,QANb,OAAjC;;;AASA,MAAMkE,6BAA6B,GAAG5F,EAAE;AACrCe,EAAAA,QAAQ,CAAC8E,cAAT,CAAwBpE,KAAxB,CADqC,IACJ8C,iBAAiB,IAAI,CAAC7C,QADlB,QAAxC;;;AAIA,MAAMoE,0BAA0B,GAAG9F,EAAE,CAACe,QAAQ,CAACgF,IAAT,CAActE,KAAd,CAAD;AAClCV,EAAAA,QAAQ,CAACiF,YAAT,CAAsBvE,KAAtB,CADkC,IACHC,QADG,QAArC;;;AAIA,MAAMuE,UAAU,GAAGvD,KAAK,CAACqB,MAAN,KAAiB,CAApC;AACA,MAAMmC,mBAAmB,GAAGhD,YAAY,IAAI+C,UAAhB,IAA8B,CAACjE,SAA3D;;AAEA,MAAMmE,cAAc,GAAGnG,EAAE,CAACe,QAAQ,CAACqF,IAAT,CAAc3E,KAAd,CAAD;AACtBV,EAAAA,QAAQ,CAACsF,WAAT,CAAqB5E,KAArB,CADsB,IACQ,CAACC,QAAD,IAAa4D,OADrB;AAEtBvE,EAAAA,QAAQ,CAACuF,YAAT,CAAsB7E,KAAtB,CAFsB,IAESC,QAFT,QAAzB;;;AAKA;AACE,wBAAC,aAAD,EAAmBH,KAAnB;AACE,iCAAK,SAAS,EAAER,QAAQ,CAACwF,IAAT,CAAc9E,KAAd,CAAhB,EAAsC,KAAK,EAAExB,aAAa,CAAC,EAAE6B,KAAK,EAALA,KAAF,EAAD,CAA1D;AACG,KAACE,SAAD,IAAc,CAACkB,YAAf,IAA+B,CAAC,CAACR,KAAK,CAACqB,MAAvC,iBAAiD,oBAAC,oBAAD,IAAsB,UAAU,EAAEvB,UAAlC,GADpD;AAEE,iCAAK,SAAS,EAAEoD,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,EAAEjB,QAHP;AAIE,MAAA,SAAS,EAAEkB,sBAJb;;AAME,iCAAK,YAAU,uBAAf,EAAwC,SAAS,EAAEzE,QAAQ,CAACyF,OAAT,EAAnD;AACE,kCAAM,YAAU,oBAAhB,EAAsC,SAAS,EAAEL,cAAjD;AACGD,IAAAA,mBAAmB,GAAGnD,MAAM,CAAC0D,WAAV,GAAwB1D,MAAM,CAAC2D,UADrD,CADF;;;AAKE,iCAAK,SAAS,EAAE3F,QAAQ,CAAC4F,aAAT,EAAhB;AACGT,IAAAA,mBAAmB;AAClB,iCAAK,SAAS,EAAEnF,QAAQ,CAAC6F,UAAT,EAAhB;AACGpE,IAAAA,UAAU,CAACE,KAAK,CAAC,CAAD,CAAN,eAAW,oBAAC,gBAAD,IAAkB,IAAI,EAAEA,KAAK,CAAC,CAAD,CAA7B,GAAX,CADb,CADkB;;;AAKlB;AACGK,IAAAA,MAAM,CAAC8D,UADV;AAEE,iCAAK,SAAS,EAAEf,0BAAhB;AACE,wBAAC,UAAD,OADF,CAFF,CANJ,CALF,CANF;;;;;;AA0BE;AACMrD,IAAAA,UADN;AAEE,MAAA,GAAG,EAAEO,QAFP;AAGE,MAAA,QAAQ,EAAEtB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAH5B;AAIE,MAAA,IAAI,EAAC,MAJP;AAKE,MAAA,QAAQ,EAAEA,QALZ;AAME,MAAA,QAAQ,EAAEG,QANZ;AAOE,MAAA,SAAS,EAAEd,QAAQ,CAAC+F,SAAT,EAPb;AAQE,MAAA,OAAO,EAAE9F,eARX;AASE,MAAA,QAAQ,EAAEiE,iBATZ;AAUE,MAAA,OAAO,EAAEE,WAVX;AAWE,MAAA,MAAM,EAAEE;AACR;AAZF,QAaE,KAAK,EAAE,EAbT,IA1BF,CADF,CAFF,CADF,CADF;;;;;;;AAmDD,CArNqB,CAAtB;;;;AAyNA,OAAO,IAAM0B,YAAY,GAAGvG,+BAA+B;AACzDf,KAAK,CAACuH,IAAN,CAAW3F,aAAX,CADyD,CAApD;;AAGP0F,YAAY,CAACE,WAAb,GAA2B,cAA3B","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) {\n        return;\n      }\n\n      let filesArray = Array.from(newFiles);\n\n      if (isSingleMode) {\n        filesArray = [filesArray[0]];\n      }\n\n      const attachedFiles = filesArray.map(getAttachedFile);\n\n      if (isSingleMode && attachedFiles.length && files.length) {\n        removeFile(files[0].id);\n      }\n\n      if (attachedFiles.length) {\n        setFiles(attachedFiles);\n        tryValidateAndUpload(attachedFiles);\n      }\n    },\n    [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile],\n  );\n\n  const handleDrop = useCallback(\n    (event) => {\n      if (disabled) {\n        return;\n      }\n\n      const { dataTransfer } = event;\n      const { files } = dataTransfer;\n\n      if (files?.length > 0) {\n        handleChange(files);\n        dataTransfer.clearData();\n      }\n    },\n    [handleChange, disabled],\n  );\n\n  const { isDraggable, ref: labelRef } = useDrop<HTMLLabelElement>({ onDrop: handleDrop });\n  const { isDraggable: isWindowDraggable, ref: windowRef } = useDrop<Document>();\n\n  if (isBrowser) {\n    windowRef.current = window.document;\n  }\n\n  const focus = useCallback(() => {\n    keyListener.isTabPressed = true;\n    inputRef.current?.focus();\n  }, []);\n\n  const blur = useCallback(() => {\n    inputRef.current?.blur();\n  }, []);\n\n  useImperativeHandle(ref, () => ({ focus, blur, reset }), [ref]);\n\n  const [focusedByTab, setFocusedByTab] = useState(false);\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event);\n    handleChange(event.target.files);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          setFocusedByTab(true);\n        }\n      });\n      onFocus?.(e);\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedByTab(false);\n    if (!disabled) {\n      onBlur?.(e);\n    }\n  };\n\n  const [hovered, setHovered] = useState(false);\n\n  const uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n    [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n    [jsStyles.disabled(theme)]: disabled,\n    [jsStyles.hovered(theme)]: !disabled && hovered,\n    [jsStyles.warning(theme)]: !!warning,\n    [jsStyles.error(theme)]: !!error,\n    [jsStyles.dragOver(theme)]: isDraggable && !disabled,\n  });\n\n  const uploadButtonWrapperClassNames = cx({\n    [jsStyles.windowDragOver(theme)]: isWindowDraggable && !disabled,\n  });\n\n  const uploadButtonIconClassNames = cx(jsStyles.icon(theme), {\n    [jsStyles.iconDisabled(theme)]: disabled,\n  });\n\n  const hasOneFile = files.length === 1;\n  const hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;\n\n  const linkClassNames = cx(jsStyles.link(theme), {\n    [jsStyles.linkHovered(theme)]: !disabled && hovered,\n    [jsStyles.linkDisabled(theme)]: disabled,\n  });\n\n  return (\n    <CommonWrapper {...props}>\n      <div 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/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,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 {};