@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0fe669bb2d

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

@@ -1 +1 @@
-{"version":3,"sources":["DropdownMenu.tsx"],"names":["React","ThemeContext","ThemeFactory","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","DropdownMenu","props","popupMenu","open","close","refPopupMenu","ref","handleChangeMenuState","menuVisible","onOpen","onClose","caption","Error","render","theme","create","popupMargin","renderMain","menuMaxHeight","menuWidth","positions","disableAnimations","header","footer","width","children","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\r\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\r\nimport { PopupPosition } from '../../internal/Popup';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nexport interface DropdownMenuProps extends CommonProps {\r\n  /** Максимальная высота меню */\r\n  menuMaxHeight?: React.CSSProperties['maxWidth'];\r\n  /** Ширина меню */\r\n  menuWidth?: React.CSSProperties['width'];\r\n  /** Ширина caption */\r\n  width?: React.CSSProperties['width'];\r\n\r\n  /**\r\n   * Элемент или функция возвращающая элемент,\r\n   * если передана, используется вместо ```caption```,\r\n   * в таком случае управлять открытием и закрытием меню\r\n   * придется в этой функции\r\n   */\r\n  caption: PopupMenuProps['caption'];\r\n\r\n  header?: React.ReactNode;\r\n  footer?: React.ReactNode;\r\n  /**\r\n   * Массив разрешенных положений меню относительно caption'а.\r\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\r\n   */\r\n  positions?: PopupPosition[];\r\n\r\n  onOpen?: () => void;\r\n  onClose?: () => void;\r\n\r\n  /**\r\n   * Не показывать анимацию\r\n   */\r\n  disableAnimations: boolean;\r\n}\r\n\r\n/**\r\n * Меню, раскрывающееся по клику на переданный в ```caption``` элемент\r\n */\r\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\r\n  public static __KONTUR_REACT_UI__ = 'DropdownMenu';\r\n\r\n  public static defaultProps = {\r\n    disableAnimations: isTestEnv,\r\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\r\n  };\r\n\r\n  private popupMenu: Nullable<PopupMenu> = null;\r\n\r\n  constructor(props: DropdownMenuProps) {\r\n    super(props);\r\n\r\n    if (!props.caption && !isProductionEnv) {\r\n      throw new Error('Prop \"caption\" is required!!!');\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          return (\r\n            <ThemeContext.Provider\r\n              value={ThemeFactory.create(\r\n                {\r\n                  popupMargin: '0px',\r\n                },\r\n                theme,\r\n              )}\r\n            >\r\n              {this.renderMain()}\r\n            </ThemeContext.Provider>\r\n          );\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  public renderMain() {\r\n    if (!this.props.caption) {\r\n      return null;\r\n    }\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <PopupMenu\r\n          ref={this.refPopupMenu}\r\n          caption={this.props.caption}\r\n          menuMaxHeight={this.props.menuMaxHeight}\r\n          menuWidth={this.props.menuWidth}\r\n          onChangeMenuState={this.handleChangeMenuState}\r\n          popupHasPin={false}\r\n          positions={this.props.positions}\r\n          disableAnimations={this.props.disableAnimations}\r\n          header={this.props.header}\r\n          footer={this.props.footer}\r\n          width={this.props.width}\r\n        >\r\n          {this.props.children}\r\n        </PopupMenu>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  public open = (): void => {\r\n    if (this.popupMenu) {\r\n      this.popupMenu.open();\r\n    }\r\n  };\r\n\r\n  public close = (): void => {\r\n    if (this.popupMenu) {\r\n      this.popupMenu.close();\r\n    }\r\n  };\r\n\r\n  private refPopupMenu = (ref: Nullable<PopupMenu>) => (this.popupMenu = ref);\r\n\r\n  private handleChangeMenuState = (menuVisible: boolean) => {\r\n    if (menuVisible && this.props.onOpen) {\r\n      this.props.onOpen();\r\n      return;\r\n    }\r\n\r\n    if (!menuVisible && this.props.onClose) {\r\n      this.props.onClose();\r\n      return;\r\n    }\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["DropdownMenu.tsx"],"names":["React","ThemeContext","ThemeFactory","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","DropdownMenu","props","getProps","defaultProps","popupMenu","open","close","refPopupMenu","ref","caption","Error","render","theme","create","popupMargin","renderMain","positions","disableAnimations","setRootNode","menuMaxHeight","menuWidth","header","footer","width","onClose","onOpen","children","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport interface DropdownMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {\n  /** Максимальная высота меню */\n  menuMaxHeight?: React.CSSProperties['maxWidth'];\n  /** Ширина меню */\n  menuWidth?: React.CSSProperties['width'];\n  /** Ширина caption */\n  width?: React.CSSProperties['width'];\n\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо `caption`,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: PopupMenuProps['caption'];\n\n  /**\n   * Произвольный элемент, который будет отрендерен в шапке меню.\n   *\n   * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Произвольный элемент, который будет отрендерен в подвале меню.\n   *\n   * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).\n   */\n  footer?: React.ReactNode;\n  /**\n   *  Список позиций доступных для расположения выпадашки относительно `caption`.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\n   */\n  positions?: PopupPositionsType[];\n\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\ntype DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент\n */\n@rootNode\nexport class DropdownMenu extends React.Component<DropdownMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'DropdownMenu';\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n  };\n\n  private getProps = createPropsGetter(DropdownMenu.defaultProps);\n\n  private popupMenu: Nullable<PopupMenu> = null;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: DropdownMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupMargin: '0px',\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n    const { positions, disableAnimations } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          ref={this.refPopupMenu}\n          caption={this.props.caption}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          popupHasPin={false}\n          positions={positions}\n          disableAnimations={disableAnimations}\n          header={this.props.header}\n          footer={this.props.footer}\n          width={this.props.width}\n          onClose={this.props.onClose}\n          onOpen={this.props.onOpen}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  public open = (): void => {\n    if (this.popupMenu) {\n      this.popupMenu.open();\n    }\n  };\n\n  public close = (): void => {\n    if (this.popupMenu) {\n      this.popupMenu.close();\n    }\n  };\n\n  private refPopupMenu = (ref: Nullable<PopupMenu>) => (this.popupMenu = ref);\n}\n"]}

package/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { PopupMenuProps } from '../../internal/PopupMenu';
-import { PopupPosition } from '../../internal/Popup';
+import { PopupPositionsType } from '../../internal/Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface DropdownMenuProps extends CommonProps {
+export interface DropdownMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
     /** Максимальная высота меню */
     menuMaxHeight?: React.CSSProperties['maxWidth'];
     /** Ширина меню */
@@ -11,40 +11,52 @@ export interface DropdownMenuProps extends CommonProps {
     width?: React.CSSProperties['width'];
     /**
      * Элемент или функция возвращающая элемент,
-     * если передана, используется вместо ```caption```,
+     * если передана, используется вместо `caption`,
      * в таком случае управлять открытием и закрытием меню
      * придется в этой функции
      */
     caption: PopupMenuProps['caption'];
+    /**
+     * Произвольный элемент, который будет отрендерен в шапке меню.
+     *
+     * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
+     */
     header?: React.ReactNode;
+    /**
+     * Произвольный элемент, который будет отрендерен в подвале меню.
+     *
+     * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
+     */
     footer?: React.ReactNode;
     /**
-     * Массив разрешенных положений меню относительно caption'а.
+     *  Список позиций доступных для расположения выпадашки относительно `caption`.
+     *
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
+     *
+     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
      * @default ['bottom left', 'bottom right', 'top left', 'top right']
      */
-    positions?: PopupPosition[];
-    onOpen?: () => void;
-    onClose?: () => void;
+    positions?: PopupPositionsType[];
     /**
      * Не показывать анимацию
      */
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
 }
+declare type DefaultProps = Required<Pick<DropdownMenuProps, 'disableAnimations' | 'positions'>>;
 /**
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент
  */
 export declare class DropdownMenu extends React.Component<DropdownMenuProps> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        disableAnimations: boolean;
-        positions: string[];
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     private popupMenu;
+    private setRootNode;
     constructor(props: DropdownMenuProps);
     render(): JSX.Element;
     renderMain(): JSX.Element | null;
     open: () => void;
     close: () => void;
     private refPopupMenu;
-    private handleChangeMenuState;
 }
+export {};

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.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/FileUploader/FileUploader/FileUploader.js

@@ -0,0 +1,285 @@
+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();
+};
+
+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;
+
+  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);
+      };
+    }());
+  }, [validateBeforeUpload, isAsync, upload, setFileValidationResult]);
+  /** 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 _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));
+  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
+  }), /*#__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: jsStyles.content()
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-tid": FileUploaderDataTids.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';