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

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

@@ -1 +1 @@
-{"version":3,"sources":["DropdownMenu.tsx"],"names":["DropdownMenu","props","popupMenu","open","close","refPopupMenu","ref","handleChangeMenuState","menuVisible","onOpen","onClose","caption","isProductionEnv","Error","render","theme","ThemeFactory","create","popupMargin","renderMain","menuMaxHeight","menuWidth","positions","disableAnimations","header","footer","width","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"wPAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;AACA;AACA,G;AACaA,Y;;;;;;;;;;AAUX,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAF9BC,SAE8B,GAFG,IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsD/BC,IAAAA,IAtD+B,GAsDxB,YAAY;AACxB,UAAI,MAAKD,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeC,IAAf;AACD;AACF,KA1DqC;;AA4D/BC,IAAAA,KA5D+B,GA4DvB,YAAY;AACzB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,KAAf;AACD;AACF,KAhEqC;;AAkE9BC,IAAAA,YAlE8B,GAkEf,UAACC,GAAD,UAA+B,MAAKJ,SAAL,GAAiBI,GAAhD,EAlEe;;AAoE9BC,IAAAA,qBApE8B,GAoEN,UAACC,WAAD,EAA0B;AACxD,UAAIA,WAAW,IAAI,MAAKP,KAAL,CAAWQ,MAA9B,EAAsC;AACpC,cAAKR,KAAL,CAAWQ,MAAX;AACA;AACD;;AAED,UAAI,CAACD,WAAD,IAAgB,MAAKP,KAAL,CAAWS,OAA/B,EAAwC;AACtC,cAAKT,KAAL,CAAWS,OAAX;AACA;AACD;AACF,KA9EqC,CAGpC,IAAI,CAACT,KAAK,CAACU,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,UAAAC,KAAK,EAAI,CACR,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,KAAKlB,KAAL,CAAWU,OAAhB,EAAyB,CACvB,OAAO,IAAP,CACD,CACD,oBACE,6BAAC,4BAAD,EAAmB,KAAKV,KAAxB,eACE,6BAAC,oBAAD,IACE,GAAG,EAAE,KAAKI,YADZ,EAEE,OAAO,EAAE,KAAKJ,KAAL,CAAWU,OAFtB,EAGE,aAAa,EAAE,KAAKV,KAAL,CAAWmB,aAH5B,EAIE,SAAS,EAAE,KAAKnB,KAAL,CAAWoB,SAJxB,EAKE,iBAAiB,EAAE,KAAKd,qBAL1B,EAME,WAAW,EAAE,KANf,EAOE,SAAS,EAAE,KAAKN,KAAL,CAAWqB,SAPxB,EAQE,iBAAiB,EAAE,KAAKrB,KAAL,CAAWsB,iBARhC,EASE,MAAM,EAAE,KAAKtB,KAAL,CAAWuB,MATrB,EAUE,MAAM,EAAE,KAAKvB,KAAL,CAAWwB,MAVrB,EAWE,KAAK,EAAE,KAAKxB,KAAL,CAAWyB,KAXpB,IAaG,KAAKzB,KAAL,CAAW0B,QAbd,CADF,CADF,CAmBD,C,uBA9D+BC,eAAMC,S,sCAA3B7B,Y,CACG8B,mB,GAAsB,c,CADzB9B,Y,CAGG+B,Y,GAAe,EAC3BR,iBAAiB,EAAES,6BADQ,EAE3BV,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAFgB,E","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":["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"]}

package/cjs/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/cjs/components/DropdownMenu/index.js.map

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

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

@@ -0,0 +1,48 @@
+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> {
+    /** Состояние ошибки всего контрола */
+    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 extends InstanceWithRootNode {
+    focus: () => void;
+    blur: () => void;
+    /** Сбрасывает выбранные файлы */
+    reset: () => void;
+}
+export declare const FileUploaderDataTids: {
+    readonly root: "FileUploader__root";
+    readonly content: "FileUploader__content";
+    readonly link: "FileUploader__link";
+};
+export interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {
+}
+export declare const FileUploader: React.MemoExoticComponent<React.ForwardRefExoticComponent<FileUploaderProps & FileUploaderControlProviderProps & React.RefAttributes<FileUploaderRef>>>;
+export {};

package/cjs/components/FileUploader/FileUploader.js

@@ -0,0 +1,305 @@
+"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 _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");
+var _useUpload = require("../../internal/FileUploaderControl/hooks/useUpload");
+var _useDrop3 = require("../../hooks/useDrop");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _px = require("../../internal/icons/16px");
+
+var _withFileUploaderControlProvider = require("../../internal/FileUploaderControl/withFileUploaderControlProvider");
+var _keyListener = require("../../lib/events/keyListener");
+var _FileUploaderFile = require("../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile");
+var _FileUploaderFileList = require("../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList");
+var _client = require("../../lib/client");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+
+var _FileUploaderFileValidationResult = require("../../internal/FileUploaderControl/FileUploaderFileValidationResult");
+
+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 stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var FileUploaderDataTids = {
+  root: 'FileUploader__root',
+  content: 'FileUploader__content',
+  link: 'FileUploader__link' };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 theme = (0, _react.useContext)(_ThemeContext.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 = (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;
+
+  var locale = (0, _useControlLocale.useControlLocale)();
+
+  var inputRef = (0, _react.useRef)(null);
+
+  var isAsync = !!request;
+  var isSingleMode = !multiple;
+
+  var upload = (0, _useUpload.useUpload)(request, onRequestSuccess, onRequestError);
+
+  var tryValidateAndUpload = (0, _react.useCallback)(
+  function (files) {
+    files.forEach( /*#__PURE__*/function () {var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file) {var validationMessage;return _regenerator.default.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:_context.t0 =
+                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.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 = (0, _react.useCallback)(
+  function (newFiles) {
+    if (!newFiles) {
+      return;
+    }
+
+    var filesArray = Array.from(newFiles);
+
+    if (isSingleMode) {
+      filesArray = [filesArray[0]];
+    }
+
+    var attachedFiles = filesArray.map(_fileUtils.getAttachedFile);
+
+    if (isSingleMode && attachedFiles.length && files.length) {
+      removeFile(files[0].id);
+    }
+
+    if (attachedFiles.length) {
+      setFiles(attachedFiles);
+      tryValidateAndUpload(attachedFiles);
+    }
+  },
+  [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile]);
+
+
+  var handleDrop = (0, _react.useCallback)(
+  function (event) {
+    if (disabled) {
+      return;
+    }
+
+    var dataTransfer = event.dataTransfer;
+    var files = dataTransfer.files;
+
+    if ((files == null ? void 0 : files.length) > 0) {
+      handleChange(files);
+      dataTransfer.clearData();
+    }
+  },
+  [handleChange, disabled]);
+
+
+  var _useDrop = (0, _useDrop3.useDrop)({ onDrop: handleDrop }),isDraggable = _useDrop.isDraggable,labelRef = _useDrop.ref;
+  var _useDrop2 = (0, _useDrop3.useDrop)(),isWindowDraggable = _useDrop2.isDraggable,windowRef = _useDrop2.ref;
+
+  if (_client.isBrowser) {
+    windowRef.current = window.document;
+  }
+
+  var focus = (0, _react.useCallback)(function () {var _inputRef$current;
+    _keyListener.keyListener.isTabPressed = true;
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+  }, []);
+
+  var blur = (0, _react.useCallback)(function () {var _inputRef$current2;
+    (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
+  }, []);
+
+  (0, _react.useImperativeHandle)(ref, function () {return { focus: focus, blur: blur, reset: reset, getRootNode: function getRootNode() {return rootNodeRef.current;} };}, [
+  ref,
+  blur,
+  focus,
+  reset]);
+
+
+  var _useState = (0, _react.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.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 = (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 uploadButtonWrapperClassNames = (0, _Emotion.cx)((_cx2 = {}, _cx2[
+  _FileUploader2.jsStyles.windowDragOver(theme)] = isWindowDraggable && !disabled, _cx2));
+
+
+  var uploadButtonIconClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.icon(theme), (_cx3 = {}, _cx3[
+  _FileUploader2.jsStyles.iconDisabled(theme)] = disabled, _cx3));
+
+
+  var hasOneFile = files.length === 1;
+  var hasOneFileForSingle = isSingleMode && hasOneFile && !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 rootNodeRef = (0, _react.useRef)(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 }),
+      ref: rootNodeRef },
+
+    !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile }), /*#__PURE__*/
+    _react.default.createElement("div", { className: uploadButtonWrapperClassNames }, /*#__PURE__*/
+    _react.default.createElement("label", {
+      onMouseEnter: function onMouseEnter() {return setHovered(true);},
+      onMouseLeave: function onMouseLeave() {return setHovered(false);},
+      ref: labelRef,
+      className: uploadButtonClassNames }, /*#__PURE__*/
+
+    _react.default.createElement("div", { "data-tid": FileUploaderDataTids.content, className: _FileUploader2.jsStyles.content() }, /*#__PURE__*/
+    _react.default.createElement("span", { "data-tid": FileUploaderDataTids.link, className: linkClassNames },
+    hasOneFileForSingle ? locale.choosedFile : locale.chooseFile), "\xA0", /*#__PURE__*/
+
+
+    _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(_react.default.Fragment, null,
+    locale.orDragHere, "\xA0", /*#__PURE__*/
+    _react.default.createElement("div", { className: uploadButtonIconClassNames }, /*#__PURE__*/
+    _react.default.createElement(_px.UploadIcon, null))))), /*#__PURE__*/
+
+
+
+
+
+    _react.default.createElement("input", (0, _extends2.default)({},
+    inputProps, {
+      ref: inputRef,
+      tabIndex: disabled ? -1 : 0,
+      type: "file",
+      disabled: disabled,
+      multiple: multiple,
+      className: _FileUploader2.jsStyles.fileInput(),
+      onClick: stopPropagation,
+      onChange: handleInputChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+      // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд
+      , value: '' })))))));
+
+
+
+
+
+
+});
+
+
+
+var FileUploader = (0, _withFileUploaderControlProvider.withFileUploaderControlProvider)( /*#__PURE__*/
+_react.default.memo(_FileUploader));exports.FileUploader = FileUploader;
+
+FileUploader.displayName = 'FileUploader';