@skbkontur/react-ui 0.0.0-8ea1692541 → 0.0.0-9216939ede

package/cjs/components/DropdownMenu/DropdownMenu.js

@@ -1,14 +1,18 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.DropdownMenu = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _ThemeFactory = require("../../lib/theming/ThemeFactory");
 
 var _PopupMenu = require("../../internal/PopupMenu");
 var _currentEnvironment = require("../../lib/currentEnvironment");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _rootNode = require("../../lib/rootNode");
-var _createPropsGetter = require("../../lib/createPropsGetter");var _class, _class2, _temp;
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _getDropdownMenuTheme = require("./getDropdownMenuTheme");var _class, _class2, _temp;
+
+
+
 
 
 
@@ -112,14 +116,6 @@ DropdownMenu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/
 
 
 
-
-
-
-
-
-
-
-
 
 
 
@@ -141,4 +137,4 @@ DropdownMenu = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/
       }
     };_this.
 
-    refPopupMenu = function (ref) {return _this.popupMenu = ref;};if (!props.caption && !_currentEnvironment.isProductionEnv) {throw new Error('Prop "caption" is required!!!');}return _this;}var _proto = DropdownMenu.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupMargin: '0px' }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {if (!this.props.caption) {return null;}var _this$getProps = this.getProps(),positions = _this$getProps.positions,disableAnimations = _this$getProps.disableAnimations;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { ref: this.refPopupMenu, caption: this.props.caption, menuMaxHeight: this.props.menuMaxHeight, menuWidth: this.props.menuWidth, popupHasPin: false, positions: positions, disableAnimations: disableAnimations, header: this.props.header, footer: this.props.footer, width: this.props.width, onClose: this.props.onClose, onOpen: this.props.onOpen }, this.props.children));};return DropdownMenu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'DropdownMenu', _class2.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv, positions: ['bottom left', 'bottom right', 'top left', 'top right'] }, _temp)) || _class;exports.DropdownMenu = DropdownMenu;
+    refPopupMenu = function (ref) {return _this.popupMenu = ref;};if (!props.caption && !_currentEnvironment.isProductionEnv) {throw new Error('Prop "caption" is required!!!');}return _this;}var _proto = DropdownMenu.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _getDropdownMenuTheme.getDropdownMenuTheme)(theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {if (!this.props.caption) {return null;}var _this$getProps = this.getProps(),positions = _this$getProps.positions,disableAnimations = _this$getProps.disableAnimations;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { "aria-label": this.props['aria-label'], ref: this.refPopupMenu, caption: this.props.caption, menuMaxHeight: this.props.menuMaxHeight, menuWidth: this.props.menuWidth, preventIconsOffset: this.props.preventIconsOffset, popupHasPin: false, positions: positions, disableAnimations: disableAnimations, header: this.props.header, footer: this.props.footer, width: this.props.width, onClose: this.props.onClose, onOpen: this.props.onOpen, popupMenuId: this.props.popupMenuId }, this.props.children));};return DropdownMenu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'DropdownMenu', _class2.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv, positions: ['bottom left', 'bottom right', 'top left', 'top right'] }, _temp)) || _class;exports.DropdownMenu = DropdownMenu;

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

@@ -1 +1 @@
-{"version":3,"sources":["DropdownMenu.tsx"],"names":["DropdownMenu","rootNode","props","getProps","defaultProps","popupMenu","open","close","refPopupMenu","ref","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupMargin","renderMain","positions","disableAnimations","setRootNode","menuMaxHeight","menuWidth","header","footer","width","onClose","onOpen","children","React","Component","__KONTUR_REACT_UI__","isTestEnv"],"mappings":"0UAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,gE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA;AACA;AACA,G;;AAEaA,Y,OADZC,kB;;;;;;;;;;;;;AAcC,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAL9BC,QAK8B,GALnB,0CAAkBH,YAAY,CAACI,YAA/B,CAKmB,OAH9BC,SAG8B,GAHG,IAGH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwD/BC,IAAAA,IAxD+B,GAwDxB,YAAY;AACxB,UAAI,MAAKD,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeC,IAAf;AACD;AACF,KA5DqC;;AA8D/BC,IAAAA,KA9D+B,GA8DvB,YAAY;AACzB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,KAAf;AACD;AACF,KAlEqC;;AAoE9BC,IAAAA,YApE8B,GAoEf,UAACC,GAAD,UAA+B,MAAKJ,SAAL,GAAiBI,GAAhD,EApEe,CAGpC,IAAI,CAACP,KAAK,CAACQ,OAAP,IAAkB,CAACC,mCAAvB,EAAwC,CACtC,MAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN,CACD,CALmC,aAMrC,C,2CAEMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,oBACE,6BAAC,0BAAD,CAAc,QAAd,IACE,KAAK,EAAEC,2BAAaC,MAAb,CACL,EACEC,WAAW,EAAE,KADf,EADK,EAILH,KAJK,CADT,IAQG,MAAI,CAACI,UAAL,EARH,CADF,CAYD,CAdH,CADF,CAkBD,C,QAEMA,U,GAAP,sBAAoB,CAClB,IAAI,CAAC,KAAKhB,KAAL,CAAWQ,OAAhB,EAAyB,CACvB,OAAO,IAAP,CACD,CACD,qBAAyC,KAAKP,QAAL,EAAzC,CAAQgB,SAAR,kBAAQA,SAAR,CAAmBC,iBAAnB,kBAAmBA,iBAAnB,CACA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKC,WAAjC,IAAkD,KAAKnB,KAAvD,gBACE,6BAAC,oBAAD,IACE,GAAG,EAAE,KAAKM,YADZ,EAEE,OAAO,EAAE,KAAKN,KAAL,CAAWQ,OAFtB,EAGE,aAAa,EAAE,KAAKR,KAAL,CAAWoB,aAH5B,EAIE,SAAS,EAAE,KAAKpB,KAAL,CAAWqB,SAJxB,EAKE,WAAW,EAAE,KALf,EAME,SAAS,EAAEJ,SANb,EAOE,iBAAiB,EAAEC,iBAPrB,EAQE,MAAM,EAAE,KAAKlB,KAAL,CAAWsB,MARrB,EASE,MAAM,EAAE,KAAKtB,KAAL,CAAWuB,MATrB,EAUE,KAAK,EAAE,KAAKvB,KAAL,CAAWwB,KAVpB,EAWE,OAAO,EAAE,KAAKxB,KAAL,CAAWyB,OAXtB,EAYE,MAAM,EAAE,KAAKzB,KAAL,CAAW0B,MAZrB,IAcG,KAAK1B,KAAL,CAAW2B,QAdd,CADF,CADF,CAoBD,C,uBAnE+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UAEtB5B,Y,GAA6B,EACzCgB,iBAAiB,EAAEa,6BADsB,EAEzCd,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAF8B,E","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"]}
+{"version":3,"sources":["DropdownMenu.tsx"],"names":["DropdownMenu","rootNode","props","getProps","defaultProps","popupMenu","open","close","refPopupMenu","ref","caption","isProductionEnv","Error","render","theme","renderMain","positions","disableAnimations","setRootNode","menuMaxHeight","menuWidth","preventIconsOffset","header","footer","width","onClose","onOpen","popupMenuId","children","React","Component","__KONTUR_REACT_UI__","isTestEnv"],"mappings":"0UAAA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA,8D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA;AACA;AACA,G;;AAEaA,Y,OADZC,kB;;;;;;;;;;;;;AAcC,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAL9BC,QAK8B,GALnB,0CAAkBH,YAAY,CAACI,YAA/B,CAKmB,OAH9BC,SAG8B,GAHG,IAGH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgD/BC,IAAAA,IAhD+B,GAgDxB,YAAY;AACxB,UAAI,MAAKD,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeC,IAAf;AACD;AACF,KApDqC;;AAsD/BC,IAAAA,KAtD+B,GAsDvB,YAAY;AACzB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,KAAf;AACD;AACF,KA1DqC;;AA4D9BC,IAAAA,YA5D8B,GA4Df,UAACC,GAAD,UAA+B,MAAKJ,SAAL,GAAiBI,GAAhD,EA5De,CAGpC,IAAI,CAACP,KAAK,CAACQ,OAAP,IAAkB,CAACC,mCAAvB,EAAwC,CACtC,MAAM,IAAIC,KAAJ,CAAU,+BAAV,CAAN,CACD,CALmC,aAMrC,C,2CAEMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,oBAAO,6BAAC,0BAAD,CAAc,QAAd,IAAuB,KAAK,EAAE,gDAAqBA,KAArB,CAA9B,IAA4D,MAAI,CAACC,UAAL,EAA5D,CAAP,CACD,CAHH,CADF,CAOD,C,QAEMA,U,GAAP,sBAAoB,CAClB,IAAI,CAAC,KAAKb,KAAL,CAAWQ,OAAhB,EAAyB,CACvB,OAAO,IAAP,CACD,CACD,qBAAyC,KAAKP,QAAL,EAAzC,CAAQa,SAAR,kBAAQA,SAAR,CAAmBC,iBAAnB,kBAAmBA,iBAAnB,CACA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKC,WAAjC,IAAkD,KAAKhB,KAAvD,gBACE,6BAAC,oBAAD,IACE,cAAY,KAAKA,KAAL,CAAW,YAAX,CADd,EAEE,GAAG,EAAE,KAAKM,YAFZ,EAGE,OAAO,EAAE,KAAKN,KAAL,CAAWQ,OAHtB,EAIE,aAAa,EAAE,KAAKR,KAAL,CAAWiB,aAJ5B,EAKE,SAAS,EAAE,KAAKjB,KAAL,CAAWkB,SALxB,EAME,kBAAkB,EAAE,KAAKlB,KAAL,CAAWmB,kBANjC,EAOE,WAAW,EAAE,KAPf,EAQE,SAAS,EAAEL,SARb,EASE,iBAAiB,EAAEC,iBATrB,EAUE,MAAM,EAAE,KAAKf,KAAL,CAAWoB,MAVrB,EAWE,MAAM,EAAE,KAAKpB,KAAL,CAAWqB,MAXrB,EAYE,KAAK,EAAE,KAAKrB,KAAL,CAAWsB,KAZpB,EAaE,OAAO,EAAE,KAAKtB,KAAL,CAAWuB,OAbtB,EAcE,MAAM,EAAE,KAAKvB,KAAL,CAAWwB,MAdrB,EAeE,WAAW,EAAE,KAAKxB,KAAL,CAAWyB,WAf1B,IAiBG,KAAKzB,KAAL,CAAW0B,QAjBd,CADF,CADF,CAuBD,C,uBA3D+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UAEtB3B,Y,GAA6B,EACzCa,iBAAiB,EAAEe,6BADsB,EAEzChB,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAF8B,E","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\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\nimport { getDropdownMenuTheme } from './getDropdownMenuTheme';\n\nexport interface DropdownMenuProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n    CommonProps {\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 <ThemeContext.Provider value={getDropdownMenuTheme(theme)}>{this.renderMain()}</ThemeContext.Provider>;\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          aria-label={this.props['aria-label']}\n          ref={this.refPopupMenu}\n          caption={this.props.caption}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          preventIconsOffset={this.props.preventIconsOffset}\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          popupMenuId={this.props.popupMenuId}\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/cjs/components/DropdownMenu/DropdownMenu.md

@@ -16,6 +16,33 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </DropdownMenu>;
 ```
 
+В проп `caption` помимо компонента можно передать функцию, возвращающую компонент, с помощью которой можно управлять текущим состоянием меню.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={({ opened, openMenu, closeMenu, toggleMenu }) => {
+    return (
+      <>
+        <p>Сейчас меню { opened ? 'окрыто' : 'закрыто' }</p>
+        <Button onClick={toggleMenu}>Переключить меню</Button>
+        <Button onClick={openMenu}>Открыть меню</Button>
+        <Button onClick={closeMenu}>Закрыть меню</Button>
+      </>
+    )
+  }}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</DropdownMenu>;
+```
+
 Меню с заданной шириной.
 
 ```jsx harmony
@@ -86,6 +113,34 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </DropdownMenu>;
 ```
 
+С иконками и включенным по-умолчанию автоматическим выравниванием текста.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, DropdownMenu } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
+  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</DropdownMenu>;
+```
+
+С иконками и отключенным автоматическим выравниванием текста.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, DropdownMenu } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<DropdownMenu preventIconsOffset caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
+  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</DropdownMenu>
+```
+
 Меню с отключенной анимацией.
 
 ```jsx harmony
@@ -123,8 +178,48 @@ import { MenuItem } from '@skbkontur/react-ui';
 </DropdownMenu>;
 ```
 
+Пример с чекбоксом внутри MenuItem.
+
+```jsx harmony
+import { MenuItem, Checkbox, Button, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+let close;
+
+const renderCaption = ({ openMenu, closeMenu }) => {
+  close = closeMenu;
+  return (
+    <Button onClick={openMenu} use="primary">
+      Открыть меню
+    </Button>
+  );
+};
+
+<DropdownMenu caption={renderCaption}>
+  <MenuItem onClick={(e) => e.preventDefault()}>Просто пункт</MenuItem>
+  <ThemeContext.Provider value={ThemeFactory.create({ menuItemHoverBg: 'initial' })}>
+    <MenuItem
+      onClick={(e) => {
+        e.preventDefault();
+        setChecked(!checked);
+      }}
+    >
+      <Checkbox checked={checked}>с чекбоксом</Checkbox>
+    </MenuItem>
+  </ThemeContext.Provider>
+  <MenuItem
+    onClick={(e) => {
+      e.preventDefault();
+      close();
+    }}
+  >
+    Закрыть
+  </MenuItem>
+</DropdownMenu>
+```
 
-Условный рендер элементов меню (с сохранением поведения [`MenuItem`](#/Components/MenuItem)).
+Условный рендер элементов меню (с сохранением поведения [MenuItem](#/Components/MenuItem)).
 
 ```jsx harmony
 import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';

package/cjs/components/DropdownMenu/getDropdownMenuTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const getDropdownMenuTheme: (theme: Theme) => Theme;

package/cjs/components/DropdownMenu/getDropdownMenuTheme.js

@@ -0,0 +1,15 @@
+"use strict";exports.__esModule = true;exports.getDropdownMenuTheme = void 0;var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+
+var getDropdownMenuTheme = function getDropdownMenuTheme(theme) {
+  return _ThemeFactory.ThemeFactory.create(
+  {
+    popupMargin: theme.dropdownMenuMenuOffsetY,
+    menuBoxSizing: theme.dropdownMenuMenuBoxSizing,
+    menuPaddingY: theme.menuLegacyPaddingY,
+    menuScrollContainerContentWrapperPaddingY: theme.menuPaddingY,
+    scrollContainerScrollBarOffsetY: theme.dropdownMenuScrollContainerScrollBarOffsetY },
+
+  theme);
+
+};exports.getDropdownMenuTheme = getDropdownMenuTheme;

package/cjs/components/DropdownMenu/getDropdownMenuTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getDropdownMenuTheme.ts"],"names":["getDropdownMenuTheme","theme","ThemeFactory","create","popupMargin","dropdownMenuMenuOffsetY","menuBoxSizing","dropdownMenuMenuBoxSizing","menuPaddingY","menuLegacyPaddingY","menuScrollContainerContentWrapperPaddingY","scrollContainerScrollBarOffsetY","dropdownMenuScrollContainerScrollBarOffsetY"],"mappings":"6EAAA;;;AAGO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAyB;AAC3D,SAAOC,2BAAaC,MAAb;AACL;AACEC,IAAAA,WAAW,EAAEH,KAAK,CAACI,uBADrB;AAEEC,IAAAA,aAAa,EAAEL,KAAK,CAACM,yBAFvB;AAGEC,IAAAA,YAAY,EAAEP,KAAK,CAACQ,kBAHtB;AAIEC,IAAAA,yCAAyC,EAAET,KAAK,CAACO,YAJnD;AAKEG,IAAAA,+BAA+B,EAAEV,KAAK,CAACW,2CALzC,EADK;;AAQLX,EAAAA,KARK,CAAP;;AAUD,CAXM,C","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getDropdownMenuTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      popupMargin: theme.dropdownMenuMenuOffsetY,\n      menuBoxSizing: theme.dropdownMenuMenuBoxSizing,\n      menuPaddingY: theme.menuLegacyPaddingY,\n      menuScrollContainerContentWrapperPaddingY: theme.menuPaddingY,\n      scrollContainerScrollBarOffsetY: theme.dropdownMenuScrollContainerScrollBarOffsetY,\n    },\n    theme,\n  );\n};\n"]}

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

@@ -1,15 +1,28 @@
 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';
-interface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type FileUploaderSize = SizeProp;
+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?: SizeProp;
     /** Свойство, скрывающее отображение файлов.  */
     hideFiles?: boolean;
     /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */
@@ -30,7 +43,7 @@ interface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTML
      * */
     renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
 }
-export interface FileUploaderRef {
+export interface FileUploaderRef extends InstanceWithRootNode {
     focus: () => void;
     blur: () => void;
     /** Сбрасывает выбранные файлы */
@@ -40,6 +53,7 @@ export declare const FileUploaderDataTids: {
     readonly root: "FileUploader__root";
     readonly content: "FileUploader__content";
     readonly link: "FileUploader__link";
+    readonly input: "FileUploader__input";
 };
 export interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {
 }

package/cjs/components/FileUploader/FileUploader.js

@@ -1,7 +1,9 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.FileUploaderDataTids = exports.FileUploader = void 0;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+var _globalObject = require("@skbkontur/global-object");
 
 var _fileUtils = require("../../internal/FileUploaderControl/fileUtils");
 var _Emotion = require("../../lib/theming/Emotion");
+
 var _useMemoObject = require("../../hooks/useMemoObject");
 var _FileUploaderControlContext = require("../../internal/FileUploaderControl/FileUploaderControlContext");
 var _useControlLocale = require("../../internal/FileUploaderControl/hooks/useControlLocale");
@@ -14,15 +16,33 @@ var _withFileUploaderControlProvider = require("../../internal/FileUploaderContr
 var _keyListener = require("../../lib/events/keyListener");
 var _FileUploaderFile = require("../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile");
 var _FileUploaderFileList = require("../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList");
-var _client = require("../../lib/client");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 
 var _FileUploaderFileValidationResult = require("../../internal/FileUploaderControl/FileUploaderFileValidationResult");
+var _useFileUploaderSize = require("../../internal/FileUploaderControl/hooks/useFileUploaderSize");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+
 
-var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "renderFile"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+var _UploadIcon = require("./UploadIcon");
+var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "size", "renderFile"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
 var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
 
+/**
+ * @deprecated use SizeProp
+ */
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -64,13 +84,15 @@ var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
 var FileUploaderDataTids = {
   root: 'FileUploader__root',
   content: 'FileUploader__content',
-  link: 'FileUploader__link' };exports.FileUploaderDataTids = FileUploaderDataTids;
+  link: 'FileUploader__link',
+  input: 'FileUploader__input' };exports.FileUploaderDataTids = FileUploaderDataTids;
 
 
 var defaultRenderFile = function defaultRenderFile(file, fileNode) {return fileNode;};
 
-var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {var _cx, _cx2, _cx3, _cx4;
+var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {var _cx;
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(theme);
 
   var
   disabled =
@@ -88,17 +110,21 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
 
 
-  props.disabled,error = props.error,warning = props.warning,_props$multiple = props.multiple,multiple = _props$multiple === void 0 ? false : _props$multiple,_props$width = props.width,width = _props$width === void 0 ? theme.fileUploaderWidth : _props$width,_props$hideFiles = props.hideFiles,hideFiles = _props$hideFiles === void 0 ? false : _props$hideFiles,onBlur = props.onBlur,onFocus = props.onFocus,onChange = props.onChange,request = props.request,validateBeforeUpload = props.validateBeforeUpload,onRequestSuccess = props.onRequestSuccess,onRequestError = props.onRequestError,_props$renderFile = props.renderFile,renderFile = _props$renderFile === void 0 ? defaultRenderFile : _props$renderFile,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
-  var _useContext = (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files,setFiles = _useContext.setFiles,removeFile = _useContext.removeFile,reset = _useContext.reset,setFileValidationResult = _useContext.setFileValidationResult;
+  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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+  var _useContext =
+  (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files,setFiles = _useContext.setFiles,removeFile = _useContext.removeFile,reset = _useContext.reset,setFileValidationResult = _useContext.setFileValidationResult,isMinLengthReached = _useContext.isMinLengthReached;
 
   var locale = (0, _useControlLocale.useControlLocale)();
 
   var inputRef = (0, _react.useRef)(null);
+  var fileDivRef = (0, _react.useRef)(null);
 
   var isAsync = !!request;
   var isSingleMode = !multiple;
 
+  var _useState = (0, _react.useState)(true),isLinkVisible = _useState[0],setIsLinkVisible = _useState[1];
   var upload = (0, _useUpload.useUpload)(request, onRequestSuccess, onRequestError);
 
   var tryValidateAndUpload = (0, _react.useCallback)(
@@ -116,6 +142,24 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   [validateBeforeUpload, isAsync, upload, setFileValidationResult]);
 
 
+  var sizeClassName = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
+    small: _FileUploader2.jsStyles.sizeSmall(theme),
+    medium: _FileUploader2.jsStyles.sizeMedium(theme),
+    large: _FileUploader2.jsStyles.sizeLarge(theme) });
+
+
+  var sizeIconClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
+    small: _FileUploader2.jsStyles.iconSmall(theme),
+    medium: _FileUploader2.jsStyles.iconMedium(theme),
+    large: _FileUploader2.jsStyles.iconLarge(theme) });
+
+
+  var contentInnerClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
+    small: _FileUploader2.jsStyles.contentInnerSmall(theme),
+    medium: _FileUploader2.jsStyles.contentInnerMedium(theme),
+    large: _FileUploader2.jsStyles.contentInnerLarge(theme) });
+
+
   /** common part **/
   var handleChange = (0, _react.useCallback)(
   function (newFiles) {
@@ -163,8 +207,8 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useDrop = (0, _useDrop3.useDrop)({ onDrop: handleDrop }),isDraggable = _useDrop.isDraggable,labelRef = _useDrop.ref;
   var _useDrop2 = (0, _useDrop3.useDrop)(),isWindowDraggable = _useDrop2.isDraggable,windowRef = _useDrop2.ref;
 
-  if (_client.isBrowser) {
-    windowRef.current = window.document;
+  if ((0, _globalObject.isBrowser)(_globalObject.globalObject)) {
+    windowRef.current = _globalObject.globalObject.document;
   }
 
   var focus = (0, _react.useCallback)(function () {var _inputRef$current;
@@ -176,9 +220,14 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
   }, []);
 
-  (0, _react.useImperativeHandle)(ref, function () {return { focus: focus, blur: blur, reset: reset };}, [blur, focus, reset]);
+  (0, _react.useImperativeHandle)(ref, function () {return { focus: focus, blur: blur, reset: reset, getRootNode: function getRootNode() {return rootNodeRef.current;} };}, [
+  ref,
+  blur,
+  focus,
+  reset]);
 
-  var _useState = (0, _react.useState)(false),focusedByTab = _useState[0],setFocusedByTab = _useState[1];
+
+  var _useState2 = (0, _react.useState)(false),focusedByTab = _useState2[0],setFocusedByTab = _useState2[1];
   var handleInputChange = function handleInputChange(event) {
     onChange == null ? void 0 : onChange(event);
     handleChange(event.target.files);
@@ -188,7 +237,7 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     if (!disabled) {
       // focus event fires before keyDown eventlistener
       // so we should check tabPressed in async way
-      requestAnimationFrame(function () {
+      _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
         if (_keyListener.keyListener.isTabPressed) {
           setFocusedByTab(true);
         }
@@ -204,37 +253,60 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
   };
 
-  var _useState2 = (0, _react.useState)(false),hovered = _useState2[0],setHovered = _useState2[1];
-
-  var uploadButtonClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.uploadButton(theme), (_cx = {}, _cx[
-  _FileUploader2.jsStyles.uploadButtonFocus(theme)] = focusedByTab, _cx[
-  _FileUploader2.jsStyles.disabled(theme)] = disabled, _cx[
-  _FileUploader2.jsStyles.hovered(theme)] = !disabled && hovered, _cx[
-  _FileUploader2.jsStyles.warning(theme)] = !!warning, _cx[
-  _FileUploader2.jsStyles.error(theme)] = !!error, _cx[
-  _FileUploader2.jsStyles.dragOver(theme)] = isDraggable && !disabled, _cx));
+  var _useState3 = (0, _react.useState)(false),hovered = _useState3[0],setHovered = _useState3[1];
 
+  var uploadButtonClassNames = (0, _Emotion.cx)(
+  _FileUploader2.jsStyles.uploadButton(theme),
+  sizeClassName,
+  focusedByTab && _FileUploader2.jsStyles.uploadButtonFocus(theme),
+  disabled && _FileUploader2.jsStyles.disabled(theme),
+  !disabled && hovered && _FileUploader2.jsStyles.hovered(theme),
+  !!warning && _FileUploader2.jsStyles.warning(theme),
+  !!error && _FileUploader2.jsStyles.error(theme),
+  isDraggable && !disabled && _FileUploader2.jsStyles.dragOver(theme));
 
-  var uploadButtonWrapperClassNames = (0, _Emotion.cx)((_cx2 = {}, _cx2[
-  _FileUploader2.jsStyles.windowDragOver(theme)] = isWindowDraggable && !disabled, _cx2));
 
+  var canDrop = isWindowDraggable && !disabled;
+  var uploadButtonWrapperClassNames = (0, _Emotion.cx)(
+  !_isTheme2022 && canDrop && _FileUploader2.jsStyles.windowDragOver(theme),
+  _isTheme2022 && canDrop && _FileUploader2.jsStyles.windowDragOver2022(theme));
 
-  var uploadButtonIconClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.icon(theme), (_cx3 = {}, _cx3[
-  _FileUploader2.jsStyles.iconDisabled(theme)] = disabled, _cx3));
 
+  var uploadButtonIconClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.icon(theme), sizeIconClass, disabled && _FileUploader2.jsStyles.iconDisabled(theme));
 
   var hasOneFile = files.length === 1;
   var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
 
-  var linkClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.link(theme), (_cx4 = {}, _cx4[
-  _FileUploader2.jsStyles.linkHovered(theme)] = !disabled && hovered, _cx4[
-  _FileUploader2.jsStyles.linkDisabled(theme)] = disabled, _cx4));
+  var contentClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.content(), hasOneFileForSingle && _FileUploader2.jsStyles.contentWithFiles());
+
+  var linkClassNames = (0, _Emotion.cx)(
+  _FileUploader2.jsStyles.link(theme),
+  !disabled && hovered && _FileUploader2.jsStyles.linkHovered(theme),
+  disabled && _FileUploader2.jsStyles.linkDisabled(theme));
+
 
+  (0, _react.useEffect)(function () {
+    setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);
+  }, [isMinLengthReached, hasOneFileForSingle]);
+
+  var rootNodeRef = (0, _react.useRef)(null);
+
+  var iconSizes = {
+    small: parseInt(theme.btnIconSizeSmall),
+    medium: parseInt(theme.btnIconSizeMedium),
+    large: parseInt(theme.btnIconSizeLarge) };
+
+  var icon = _isTheme2022 ? /*#__PURE__*/_react.default.createElement(_UploadIcon.UploadIcon, { size: iconSizes[size] }) : /*#__PURE__*/_react.default.createElement(_px.UploadIcon, null);
 
   return /*#__PURE__*/(
     _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
-    _react.default.createElement("div", { "data-tid": FileUploaderDataTids.root, className: _FileUploader2.jsStyles.root(theme), style: (0, _useMemoObject.useMemoObject)({ width: width }) },
-    !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile }), /*#__PURE__*/
+    _react.default.createElement("div", {
+      "data-tid": FileUploaderDataTids.root,
+      className: _FileUploader2.jsStyles.root(theme),
+      style: (0, _useMemoObject.useMemoObject)({ width: width }),
+      ref: rootNodeRef },
+
+    !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile, size: size }), /*#__PURE__*/
     _react.default.createElement("div", { className: uploadButtonWrapperClassNames }, /*#__PURE__*/
     _react.default.createElement("label", {
       onMouseEnter: function onMouseEnter() {return setHovered(true);},
@@ -242,34 +314,43 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       ref: labelRef,
       className: uploadButtonClassNames }, /*#__PURE__*/
 
-    _react.default.createElement("div", { "data-tid": FileUploaderDataTids.content, className: _FileUploader2.jsStyles.content() }, /*#__PURE__*/
+    _react.default.createElement("div", {
+      "data-tid": FileUploaderDataTids.content,
+      className: (0, _Emotion.cx)(contentClassNames, (_cx = {}, _cx[contentInnerClass] = !files.length || !isSingleMode, _cx)) },
+
+    isLinkVisible && /*#__PURE__*/
     _react.default.createElement("span", { "data-tid": FileUploaderDataTids.link, className: linkClassNames },
-    hasOneFileForSingle ? locale.choosedFile : locale.chooseFile), "\xA0", /*#__PURE__*/
+    hasOneFileForSingle ? locale.choosedFile : locale.chooseFile),
+
+
+    isLinkVisible && String.fromCharCode(0xa0) /*   */, /*#__PURE__*/
+    _react.default.createElement("div", {
+      className: (0, _Emotion.cx)(
+      _FileUploader2.globalClasses.afterLinkText,
+      hasOneFileForSingle ? _FileUploader2.jsStyles.afterLinkText_HasFiles(theme) : _FileUploader2.jsStyles.afterLinkText(theme)) },
 
 
-    _react.default.createElement("div", { className: _FileUploader2.jsStyles.afterLinkText() },
     hasOneFileForSingle ? /*#__PURE__*/
-    _react.default.createElement("div", { className: _FileUploader2.jsStyles.singleFile() },
-    renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0] }))) : /*#__PURE__*/
+    _react.default.createElement("div", { ref: fileDivRef, className: _FileUploader2.jsStyles.singleFile() },
+    renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0], size: size }))) : /*#__PURE__*/
 
 
     _react.default.createElement(_react.default.Fragment, null,
     locale.orDragHere, "\xA0", /*#__PURE__*/
-    _react.default.createElement("div", { className: uploadButtonIconClassNames }, /*#__PURE__*/
-    _react.default.createElement(_px.UploadIcon, null))))), /*#__PURE__*/
-
+    _react.default.createElement("div", { className: uploadButtonIconClassNames }, icon)))), /*#__PURE__*/
 
 
 
 
     _react.default.createElement("input", (0, _extends2.default)({},
     inputProps, {
+      "data-tid": FileUploaderDataTids.input,
       ref: inputRef,
       tabIndex: disabled ? -1 : 0,
       type: "file",
       disabled: disabled,
       multiple: multiple,
-      className: _FileUploader2.jsStyles.fileInput(),
+      className: _FileUploader2.jsStyles.visuallyHidden(),
       onClick: stopPropagation,
       onChange: handleInputChange,
       onFocus: handleFocus,