@skbkontur/react-ui 0.0.0-80ce75eca6 → 0.0.0-85ea551f96

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","children","React","Component","__KONTUR_REACT_UI__","defaultProps","isTestEnv"],"mappings":"wPAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA;AACA;AACA,G;AACaA,Y;;;;;;;;;;AAUX,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAF9BC,SAE8B,GAFG,IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqD/BC,IAAAA,IArD+B,GAqDxB,YAAY;AACxB,UAAI,MAAKD,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeC,IAAf;AACD;AACF,KAzDqC;;AA2D/BC,IAAAA,KA3D+B,GA2DvB,YAAY;AACzB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,KAAf;AACD;AACF,KA/DqC;;AAiE9BC,IAAAA,YAjE8B,GAiEf,UAACC,GAAD,UAA+B,MAAKJ,SAAL,GAAiBI,GAAhD,EAjEe;;AAmE9BC,IAAAA,qBAnE8B,GAmEN,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,KA7EqC,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,IAYG,KAAKxB,KAAL,CAAWyB,QAZd,CADF,CADF,CAkBD,C,uBA7D+BC,eAAMC,S,sCAA3B5B,Y,CACG6B,mB,GAAsB,c,CADzB7B,Y,CAGG8B,Y,GAAe,EAC3BP,iBAAiB,EAAEQ,6BADQ,EAE3BT,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  /**\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        >\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","popupMenu","setRootNode","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":"0UAAA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,8C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA;AACA;AACA,G;;AAEaA,Y,OADZC,kB;;;;;;;;;;;AAYC,wBAAYC,KAAZ,EAAsC;AACpC,wCAAMA,KAAN,UADoC,MAH9BC,SAG8B,GAHG,IAGH,OAF9BC,WAE8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsD/BC,IAAAA,IAtD+B,GAsDxB,YAAY;AACxB,UAAI,MAAKF,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeE,IAAf;AACD;AACF,KA1DqC;;AA4D/BC,IAAAA,KA5D+B,GA4DvB,YAAY;AACzB,UAAI,MAAKH,SAAT,EAAoB;AAClB,cAAKA,SAAL,CAAeG,KAAf;AACD;AACF,KAhEqC;;AAkE9BC,IAAAA,YAlE8B,GAkEf,UAACC,GAAD,UAA+B,MAAKL,SAAL,GAAiBK,GAAhD,EAlEe;;AAoE9BC,IAAAA,qBApE8B,GAoEN,UAACC,WAAD,EAA0B;AACxD,UAAIA,WAAW,IAAI,MAAKR,KAAL,CAAWS,MAA9B,EAAsC;AACpC,cAAKT,KAAL,CAAWS,MAAX;AACA;AACD;;AAED,UAAI,CAACD,WAAD,IAAgB,MAAKR,KAAL,CAAWU,OAA/B,EAAwC;AACtC,cAAKV,KAAL,CAAWU,OAAX;AACA;AACD;AACF,KA9EqC,CAGpC,IAAI,CAACV,KAAK,CAACW,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,KAAKnB,KAAL,CAAWW,OAAhB,EAAyB,CACvB,OAAO,IAAP,CACD,CACD,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKT,WAAjC,IAAkD,KAAKF,KAAvD,gBACE,6BAAC,oBAAD,IACE,GAAG,EAAE,KAAKK,YADZ,EAEE,OAAO,EAAE,KAAKL,KAAL,CAAWW,OAFtB,EAGE,aAAa,EAAE,KAAKX,KAAL,CAAWoB,aAH5B,EAIE,SAAS,EAAE,KAAKpB,KAAL,CAAWqB,SAJxB,EAKE,iBAAiB,EAAE,KAAKd,qBAL1B,EAME,WAAW,EAAE,KANf,EAOE,SAAS,EAAE,KAAKP,KAAL,CAAWsB,SAPxB,EAQE,iBAAiB,EAAE,KAAKtB,KAAL,CAAWuB,iBARhC,EASE,MAAM,EAAE,KAAKvB,KAAL,CAAWwB,MATrB,EAUE,MAAM,EAAE,KAAKxB,KAAL,CAAWyB,MAVrB,EAWE,KAAK,EAAE,KAAKzB,KAAL,CAAW0B,KAXpB,IAaG,KAAK1B,KAAL,CAAW2B,QAbd,CADF,CADF,CAmBD,C,uBA/D+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UAEtBC,Y,GAAe,EAC3BR,iBAAiB,EAAES,6BADQ,EAE3BV,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAFgB,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';\n\nexport interface DropdownMenuProps extends 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  onOpen?: () => void;\n  onClose?: () => void;\n\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations: boolean;\n}\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 = {\n    disableAnimations: isTestEnv,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n  };\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    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          onChangeMenuState={this.handleChangeMenuState}\n          popupHasPin={false}\n          positions={this.props.positions}\n          disableAnimations={this.props.disableAnimations}\n          header={this.props.header}\n          footer={this.props.footer}\n          width={this.props.width}\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  private handleChangeMenuState = (menuVisible: boolean) => {\n    if (menuVisible && this.props.onOpen) {\n      this.props.onOpen();\n      return;\n    }\n\n    if (!menuVisible && this.props.onClose) {\n      this.props.onClose();\n      return;\n    }\n  };\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/FxInput/FxInput.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Input, InputProps } from '../Input';
 import { CurrencyInput, CurrencyInputProps } from '../CurrencyInput';
 import { Override } from '../../typings/utility-types';
-import { CommonProps } from '../../internal/CommonWrapper';
+import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
 export interface FxInputProps extends CommonProps, Override<CurrencyInputProps, {
     /** Авто-режим */
     auto?: boolean;
@@ -35,8 +35,9 @@ export declare class FxInput extends React.Component<FxInputProps> {
     };
     private input;
     private getProps;
+    private setRootNode;
     render(): JSX.Element;
-    renderMain: (props: Pick<Pick<FxInputProps, "type" | "auto" | "placeholder" | "dir" | "form" | "slot" | "title" | "mask" | "pattern" | "maskChar" | "formatChars" | "alwaysShowMask" | "onUnexpectedInput" | "onValueChange" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "leftIcon" | "rightIcon" | "error" | "warning" | "borderless" | "align" | "suffix" | "selectAllOnFocus" | "refInput" | "fractionDigits" | "hideTrailingZeros" | "signed" | "integerDigits" | "onRestore">, "type" | "auto" | "placeholder" | "dir" | "form" | "slot" | "title" | "mask" | "pattern" | "maskChar" | "formatChars" | "alwaysShowMask" | "onUnexpectedInput" | "onValueChange" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "leftIcon" | "rightIcon" | "error" | "warning" | "borderless" | "align" | "suffix" | "selectAllOnFocus" | "refInput" | "fractionDigits" | "hideTrailingZeros" | "signed" | "integerDigits" | "onRestore">) => JSX.Element;
+    renderMain: (props: CommonWrapperRestProps<FxInputProps>) => JSX.Element;
     /**
      * @public
      */

package/cjs/components/FxInput/FxInput.js

@@ -9,6 +9,7 @@ var _createPropsGetter = require("../../lib/createPropsGetter");
 
 var _px = require("../../internal/icons/16px");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _rootNode = require("../../lib/rootNode");var _class, _class2, _temp;
 
 
 
@@ -33,7 +34,8 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 
 
 /** Принимает все свойства `Input`'a */var
-FxInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(FxInput, _React$Component);function FxInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+FxInput = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(FxInput, _React$Component);function FxInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -50,13 +52,18 @@ FxInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)
     input = null;_this.
 
     getProps = (0, _createPropsGetter.createPropsGetter)(FxInput.defaultProps);_this.
+    setRootNode = void 0;_this.
+
+
+
+
 
 
 
 
 
     renderMain = function (props) {var
-      type = props.type,onRestore = props.onRestore,auto = props.auto,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["type", "onRestore", "auto"]);
+      type = props.type,onRestore = props.onRestore,auto = props.auto,refInput = props.refInput,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["type", "onRestore", "auto", "refInput"]);
       var inputProps = {
         align: 'right' };
 
@@ -67,7 +74,13 @@ FxInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)
         inputProps.leftIcon = /*#__PURE__*/_react.default.createElement(_px.FunctionIcon, null);
       } else {
         button = /*#__PURE__*/
-        _react.default.createElement(_Button.Button, { narrow: true, onClick: _this.props.onRestore, borderless: _this.props.borderless, disabled: _this.props.disabled }, /*#__PURE__*/
+        _react.default.createElement(_Button.Button, {
+          size: _this.props.size,
+          narrow: true,
+          onClick: _this.props.onRestore,
+          borderless: _this.props.borderless,
+          disabled: _this.props.disabled }, /*#__PURE__*/
+
         _react.default.createElement(_px.UndoIcon, null));
 
 
@@ -124,4 +137,4 @@ FxInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)
       if (_this.props.refInput) {
         _this.props.refInput(_this.input);
       }
-    };return _this;}var _proto = FxInput.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, this.renderMain);};return FxInput;}(_react.default.Component);exports.FxInput = FxInput;FxInput.__KONTUR_REACT_UI__ = 'FxInput';FxInput.propTypes = { auto: _propTypes.default.bool, type: _propTypes.default.string };FxInput.defaultProps = { width: 250, type: 'text', value: '' };
+    };return _this;}var _proto = FxInput.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), this.renderMain);};return FxInput;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'FxInput', _class2.propTypes = { auto: _propTypes.default.bool, type: _propTypes.default.string }, _class2.defaultProps = { width: 250, type: 'text', value: '' }, _temp)) || _class;exports.FxInput = FxInput;

package/cjs/components/FxInput/FxInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FxInput.tsx"],"names":["FxInput","input","getProps","defaultProps","renderMain","props","type","onRestore","auto","rest","inputProps","align","button","leftIcon","borderless","disabled","width","refInput","value","onValueChange","focus","blur","element","render","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string"],"mappings":"icAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,uC;AACaA,O;;;;;;;;;;;;;;AAcHC,IAAAA,K,GAAsC,I;;AAEtCC,IAAAA,Q,GAAW,0CAAkBF,OAAO,CAACG,YAA1B,C;;;;;;AAMZC,IAAAA,U,GAAa,UAACC,KAAD,EAAiD;AAC3DC,MAAAA,IAD2D,GACxBD,KADwB,CAC3DC,IAD2D,CACrDC,SADqD,GACxBF,KADwB,CACrDE,SADqD,CAC1CC,IAD0C,GACxBH,KADwB,CAC1CG,IAD0C,CACjCC,IADiC,+CACxBJ,KADwB;AAEnE,UAAMK,UAAuC,GAAG;AAC9CC,QAAAA,KAAK,EAAE,OADuC,EAAhD;;;AAIA,UAAIC,MAAM,GAAG,IAAb;;AAEA,UAAIJ,IAAJ,EAAU;AACRE,QAAAA,UAAU,CAACG,QAAX,gBAAsB,6BAAC,gBAAD,OAAtB;AACD,OAFD,MAEO;AACLD,QAAAA,MAAM;AACJ,qCAAC,cAAD,IAAQ,MAAM,MAAd,EAAe,OAAO,EAAE,MAAKP,KAAL,CAAWE,SAAnC,EAA8C,UAAU,EAAE,MAAKF,KAAL,CAAWS,UAArE,EAAiF,QAAQ,EAAE,MAAKT,KAAL,CAAWU,QAAtG;AACE,qCAAC,YAAD,OADF,CADF;;;AAKD;;AAED;AACE,qCAAC,YAAD,IAAO,KAAK,EAAE,MAAKV,KAAL,CAAWW,KAAzB;AACGJ,QAAAA,MADH;AAEG,cAAKV,QAAL,GAAgBI,IAAhB,KAAyB,UAAzB;AACC,qCAAC,4BAAD;AACMI,QAAAA,UADN;AAEMD,QAAAA,IAFN;AAGE,UAAA,KAAK,EAAE,MAHT;AAIE,UAAA,GAAG,EAAE,MAAKQ,QAJZ;AAKE,UAAA,KAAK,EAAE,MAAKZ,KAAL,CAAWa,KALpB;AAME,UAAA,aAAa,EAAE,MAAKb,KAAL,CAAWc,aAN5B,IADD;;;AAUC,qCAAC,YAAD;AACMT,QAAAA,UADN;AAEMD,QAAAA,IAFN;AAGE,UAAA,KAAK,EAAE,MAHT;AAIE,UAAA,GAAG,EAAE,MAAKQ,QAJZ;AAKE,UAAA,IAAI,EAAE,MAAKZ,KAAL,CAAWC,IALnB;AAME,UAAA,KAAK,EAAE,MAAKD,KAAL,CAAWa,KANpB;AAOE,UAAA,aAAa,EAAE,MAAKb,KAAL,CAAWc,aAP5B,IAZJ,CADF;;;;;AAyBD,K;;;;;AAKMC,IAAAA,K,GAAQ,YAAM;AACnB,UAAI,MAAKnB,KAAT,EAAgB;AACd,cAAKA,KAAL,CAAWmB,KAAX;AACD;AACF,K;;;;;AAKMC,IAAAA,I,GAAO,YAAM;AAClB,UAAI,MAAKpB,KAAT,EAAgB;AACd,cAAKA,KAAL,CAAWoB,IAAX;AACD;AACF,K;;AAEOJ,IAAAA,Q,GAAW,UAACK,OAAD,EAA2C;AAC5D,YAAKrB,KAAL,GAAaqB,OAAb;;AAEA,UAAI,MAAKjB,KAAL,CAAWY,QAAf,EAAyB;AACvB,cAAKZ,KAAL,CAAWY,QAAX,CAAoB,MAAKhB,KAAzB;AACD;AACF,K,qDAzEMsB,M,GAAP,kBAAgB,CACd,oBAAO,6BAAC,4BAAD,EAAmB,KAAKlB,KAAxB,EAAgC,KAAKD,UAArC,CAAP,CACD,C,kBApB0BoB,eAAMC,S,4BAAtBzB,O,CACG0B,mB,GAAsB,S,CADzB1B,O,CAGG2B,S,GAAY,EACxBnB,IAAI,EAAEoB,mBAAUC,IADQ,EAExBvB,IAAI,EAAEsB,mBAAUE,MAFQ,E,CAHf9B,O,CAQGG,Y,GAAe,EAC3Ba,KAAK,EAAE,GADoB,EAE3BV,IAAI,EAAE,MAFqB,EAG3BY,KAAK,EAAE,EAHoB,E","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { Button } from '../Button';\r\nimport { Group } from '../Group';\r\nimport { Input, InputProps, InputType } from '../Input';\r\nimport { CurrencyInput, CurrencyInputProps } from '../CurrencyInput';\r\nimport { createPropsGetter } from '../../lib/createPropsGetter';\r\nimport { Override } from '../../typings/utility-types';\r\nimport { FunctionIcon, UndoIcon } from '../../internal/icons/16px';\r\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\r\n\r\nexport interface FxInputProps\r\n  extends CommonProps,\r\n    Override<\r\n      CurrencyInputProps,\r\n      {\r\n        /** Авто-режим */\r\n        auto?: boolean;\r\n        /** Тип инпута */\r\n        type?: 'currency' | InputProps['type'];\r\n        /** onRestore */\r\n        onRestore?: () => void;\r\n        /** onValueChange */\r\n        onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];\r\n        /** Значение */\r\n        value?: React.ReactText;\r\n        /** ref Input'а */\r\n        refInput?: (element: CurrencyInput | Input | null) => void;\r\n        /** Убрать лишние нули после запятой */\r\n        hideTrailingZeros?: boolean;\r\n      }\r\n    > {}\r\n\r\n/** Принимает все свойства `Input`'a */\r\nexport class FxInput extends React.Component<FxInputProps> {\r\n  public static __KONTUR_REACT_UI__ = 'FxInput';\r\n\r\n  public static propTypes = {\r\n    auto: PropTypes.bool,\r\n    type: PropTypes.string,\r\n  };\r\n\r\n  public static defaultProps = {\r\n    width: 250,\r\n    type: 'text',\r\n    value: '',\r\n  };\r\n\r\n  private input: Input | CurrencyInput | null = null;\r\n\r\n  private getProps = createPropsGetter(FxInput.defaultProps);\r\n\r\n  public render() {\r\n    return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\r\n  }\r\n\r\n  public renderMain = (props: CommonWrapperRestProps<FxInputProps>) => {\r\n    const { type, onRestore, auto, ...rest } = props;\r\n    const inputProps: Partial<CurrencyInputProps> = {\r\n      align: 'right',\r\n    };\r\n\r\n    let button = null;\r\n\r\n    if (auto) {\r\n      inputProps.leftIcon = <FunctionIcon />;\r\n    } else {\r\n      button = (\r\n        <Button narrow onClick={this.props.onRestore} borderless={this.props.borderless} disabled={this.props.disabled}>\r\n          <UndoIcon />\r\n        </Button>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Group width={this.props.width}>\r\n        {button}\r\n        {this.getProps().type === 'currency' ? (\r\n          <CurrencyInput\r\n            {...inputProps}\r\n            {...rest}\r\n            width={'100%'}\r\n            ref={this.refInput}\r\n            value={this.props.value as CurrencyInputProps['value']}\r\n            onValueChange={this.props.onValueChange as CurrencyInputProps['onValueChange']}\r\n          />\r\n        ) : (\r\n          <Input\r\n            {...inputProps}\r\n            {...rest}\r\n            width={'100%'}\r\n            ref={this.refInput}\r\n            type={this.props.type as InputType}\r\n            value={this.props.value as InputProps['value']}\r\n            onValueChange={this.props.onValueChange as InputProps['onValueChange']}\r\n          />\r\n        )}\r\n      </Group>\r\n    );\r\n  };\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus = () => {\r\n    if (this.input) {\r\n      this.input.focus();\r\n    }\r\n  };\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public blur = () => {\r\n    if (this.input) {\r\n      this.input.blur();\r\n    }\r\n  };\r\n\r\n  private refInput = (element: Input | CurrencyInput | null) => {\r\n    this.input = element;\r\n\r\n    if (this.props.refInput) {\r\n      this.props.refInput(this.input);\r\n    }\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["FxInput.tsx"],"names":["FxInput","rootNode","input","getProps","defaultProps","setRootNode","renderMain","props","type","onRestore","auto","refInput","rest","inputProps","align","button","leftIcon","size","borderless","disabled","width","value","onValueChange","focus","blur","element","render","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string"],"mappings":"icAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,8C;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,uC;;AAEaA,O,OADZC,kB;;;;;;;;;;;;;;AAeSC,IAAAA,K,GAAsC,I;;AAEtCC,IAAAA,Q,GAAW,0CAAkBH,OAAO,CAACI,YAA1B,C;AACXC,IAAAA,W;;;;;;;;;;AAUDC,IAAAA,U,GAAa,UAACC,KAAD,EAAiD;AAC3DC,MAAAA,IAD2D,GACdD,KADc,CAC3DC,IAD2D,CACrDC,SADqD,GACdF,KADc,CACrDE,SADqD,CAC1CC,IAD0C,GACdH,KADc,CAC1CG,IAD0C,CACpCC,QADoC,GACdJ,KADc,CACpCI,QADoC,CACvBC,IADuB,+CACdL,KADc;AAEnE,UAAMM,UAAuC,GAAG;AAC9CC,QAAAA,KAAK,EAAE,OADuC,EAAhD;;;AAIA,UAAIC,MAAM,GAAG,IAAb;;AAEA,UAAIL,IAAJ,EAAU;AACRG,QAAAA,UAAU,CAACG,QAAX,gBAAsB,6BAAC,gBAAD,OAAtB;AACD,OAFD,MAEO;AACLD,QAAAA,MAAM;AACJ,qCAAC,cAAD;AACE,UAAA,IAAI,EAAE,MAAKR,KAAL,CAAWU,IADnB;AAEE,UAAA,MAAM,MAFR;AAGE,UAAA,OAAO,EAAE,MAAKV,KAAL,CAAWE,SAHtB;AAIE,UAAA,UAAU,EAAE,MAAKF,KAAL,CAAWW,UAJzB;AAKE,UAAA,QAAQ,EAAE,MAAKX,KAAL,CAAWY,QALvB;;AAOE,qCAAC,YAAD,OAPF,CADF;;;AAWD;;AAED;AACE,qCAAC,YAAD,IAAO,KAAK,EAAE,MAAKZ,KAAL,CAAWa,KAAzB;AACGL,QAAAA,MADH;AAEG,cAAKZ,QAAL,GAAgBK,IAAhB,KAAyB,UAAzB;AACC,qCAAC,4BAAD;AACMK,QAAAA,UADN;AAEMD,QAAAA,IAFN;AAGE,UAAA,KAAK,EAAE,MAHT;AAIE,UAAA,GAAG,EAAE,MAAKD,QAJZ;AAKE,UAAA,KAAK,EAAE,MAAKJ,KAAL,CAAWc,KALpB;AAME,UAAA,aAAa,EAAE,MAAKd,KAAL,CAAWe,aAN5B,IADD;;;AAUC,qCAAC,YAAD;AACMT,QAAAA,UADN;AAEMD,QAAAA,IAFN;AAGE,UAAA,KAAK,EAAE,MAHT;AAIE,UAAA,GAAG,EAAE,MAAKD,QAJZ;AAKE,UAAA,IAAI,EAAE,MAAKJ,KAAL,CAAWC,IALnB;AAME,UAAA,KAAK,EAAE,MAAKD,KAAL,CAAWc,KANpB;AAOE,UAAA,aAAa,EAAE,MAAKd,KAAL,CAAWe,aAP5B,IAZJ,CADF;;;;;AAyBD,K;;;;;AAKMC,IAAAA,K,GAAQ,YAAM;AACnB,UAAI,MAAKrB,KAAT,EAAgB;AACd,cAAKA,KAAL,CAAWqB,KAAX;AACD;AACF,K;;;;;AAKMC,IAAAA,I,GAAO,YAAM;AAClB,UAAI,MAAKtB,KAAT,EAAgB;AACd,cAAKA,KAAL,CAAWsB,IAAX;AACD;AACF,K;;AAEOb,IAAAA,Q,GAAW,UAACc,OAAD,EAA2C;AAC5D,YAAKvB,KAAL,GAAauB,OAAb;;AAEA,UAAI,MAAKlB,KAAL,CAAWI,QAAf,EAAyB;AACvB,cAAKJ,KAAL,CAAWI,QAAX,CAAoB,MAAKT,KAAzB;AACD;AACF,K,qDAnFMwB,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,KAAKrB,WAAjC,IAAkD,KAAKE,KAAvD,GACG,KAAKD,UADR,CADF,CAKD,C,kBAzB0BqB,eAAMC,S,WACnBC,mB,GAAsB,S,UAEtBC,S,GAAY,EACxBpB,IAAI,EAAEqB,mBAAUC,IADQ,EAExBxB,IAAI,EAAEuB,mBAAUE,MAFQ,E,UAKZ7B,Y,GAAe,EAC3BgB,KAAK,EAAE,GADoB,EAE3BZ,IAAI,EAAE,MAFqB,EAG3Ba,KAAK,EAAE,EAHoB,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Button } from '../Button';\nimport { Group } from '../Group';\nimport { Input, InputProps, InputType } from '../Input';\nimport { CurrencyInput, CurrencyInputProps } from '../CurrencyInput';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Override } from '../../typings/utility-types';\nimport { FunctionIcon, UndoIcon } from '../../internal/icons/16px';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nexport interface FxInputProps\n  extends CommonProps,\n    Override<\n      CurrencyInputProps,\n      {\n        /** Авто-режим */\n        auto?: boolean;\n        /** Тип инпута */\n        type?: 'currency' | InputProps['type'];\n        /** onRestore */\n        onRestore?: () => void;\n        /** onValueChange */\n        onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];\n        /** Значение */\n        value?: React.ReactText;\n        /** ref Input'а */\n        refInput?: (element: CurrencyInput | Input | null) => void;\n        /** Убрать лишние нули после запятой */\n        hideTrailingZeros?: boolean;\n      }\n    > {}\n\n/** Принимает все свойства `Input`'a */\n@rootNode\nexport class FxInput extends React.Component<FxInputProps> {\n  public static __KONTUR_REACT_UI__ = 'FxInput';\n\n  public static propTypes = {\n    auto: PropTypes.bool,\n    type: PropTypes.string,\n  };\n\n  public static defaultProps = {\n    width: 250,\n    type: 'text',\n    value: '',\n  };\n\n  private input: Input | CurrencyInput | null = null;\n\n  private getProps = createPropsGetter(FxInput.defaultProps);\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {this.renderMain}\n      </CommonWrapper>\n    );\n  }\n\n  public renderMain = (props: CommonWrapperRestProps<FxInputProps>) => {\n    const { type, onRestore, auto, refInput, ...rest } = props;\n    const inputProps: Partial<CurrencyInputProps> = {\n      align: 'right',\n    };\n\n    let button = null;\n\n    if (auto) {\n      inputProps.leftIcon = <FunctionIcon />;\n    } else {\n      button = (\n        <Button\n          size={this.props.size}\n          narrow\n          onClick={this.props.onRestore}\n          borderless={this.props.borderless}\n          disabled={this.props.disabled}\n        >\n          <UndoIcon />\n        </Button>\n      );\n    }\n\n    return (\n      <Group width={this.props.width}>\n        {button}\n        {this.getProps().type === 'currency' ? (\n          <CurrencyInput\n            {...inputProps}\n            {...rest}\n            width={'100%'}\n            ref={this.refInput}\n            value={this.props.value as CurrencyInputProps['value']}\n            onValueChange={this.props.onValueChange as CurrencyInputProps['onValueChange']}\n          />\n        ) : (\n          <Input\n            {...inputProps}\n            {...rest}\n            width={'100%'}\n            ref={this.refInput}\n            type={this.props.type as InputType}\n            value={this.props.value as InputProps['value']}\n            onValueChange={this.props.onValueChange as InputProps['onValueChange']}\n          />\n        )}\n      </Group>\n    );\n  };\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public blur = () => {\n    if (this.input) {\n      this.input.blur();\n    }\n  };\n\n  private refInput = (element: Input | CurrencyInput | null) => {\n    this.input = element;\n\n    if (this.props.refInput) {\n      this.props.refInput(this.input);\n    }\n  };\n}\n"]}

package/cjs/components/FxInput/FxInput.md

@@ -1,13 +1,16 @@
-```jsx harmony
-let initialState = { auto: false };
-
-function handleValueChange(value) {
-  setState({ auto: false, value });
-}
-
-function handleRestore() {
-  setState({ auto: true, value: 'auto' });
-}
-
-<FxInput auto={state.auto} value={state.value} onValueChange={handleValueChange} onRestore={handleRestore} />;
-```
+```jsx harmony
+const [auto, setAuto] = React.useState(false);
+const [value, setValue] = React.useState();
+
+function handleValueChange(value) {
+  setAuto(false);
+  setValue(value);
+}
+
+function handleRestore() {
+  setAuto(true);
+  setValue('auto');
+}
+
+<FxInput auto={auto} value={value} onValueChange={handleValueChange} onRestore={handleRestore} />;
+```

package/cjs/components/FxInput/index.js.map

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

package/cjs/components/Gapped/Gapped.d.ts

@@ -4,9 +4,9 @@ import { CommonProps } from '../../internal/CommonWrapper';
 export interface GappedProps extends CommonProps {
     /**
      * Расстояние между элементами в пикселях
-     * @default 10
+     * @default 8
      */
-    gap: number;
+    gap?: number;
     /**
      * Вертикальное выравнивание
      * @default "baseline"
@@ -43,13 +43,16 @@ export declare class Gapped extends React.Component<GappedProps> {
          */
         verticalAlign: PropTypes.Requireable<string>;
     };
+    private theme;
+    private setRootNode;
     static defaultProps: {
-        gap: number;
         wrap: boolean;
         vertical: boolean;
         verticalAlign: string;
     };
     render(): JSX.Element;
+    private getGapValue;
     private renderVertical;
     private renderHorizontal;
+    private filterChildren;
 }

package/cjs/components/Gapped/Gapped.js

@@ -2,7 +2,10 @@
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _rootNode = require("../../lib/rootNode");var _class, _class2, _temp;
 
 
 
@@ -27,10 +30,12 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 
 
 
-/**
- * Контейнер, расстояние между элементами в котором равно `gap`.
+
+/**
+ * Контейнер, расстояние между элементами в котором равно `gap`.
  */var
-Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Gapped, _React$Component);function Gapped() {return _React$Component.apply(this, arguments) || this;}var _proto = Gapped.prototype;_proto.
+
+Gapped = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Gapped, _React$Component);function Gapped() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -50,6 +55,8 @@ Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
+    theme = void 0;_this.
+    setRootNode = void 0;return _this;}var _proto = Gapped.prototype;_proto.
 
 
 
@@ -57,35 +64,53 @@ Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
-  render = function render() {
+  render = function render() {var _this2 = this;
     return /*#__PURE__*/(
-      _react.default.createElement(_CommonWrapper.CommonWrapper, this.props,
-      this.props.vertical ? this.renderVertical() : this.renderHorizontal()));
+      _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
+      function (theme) {
+        _this2.theme = theme;
+        return /*#__PURE__*/(
+          _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props),
+          _this2.props.vertical ? _this2.renderVertical() : _this2.renderHorizontal()));
+
+
+      }));
 
 
   };_proto.
 
+  getGapValue = function getGapValue() {
+    // DEPRECATED remove in 4.0
+    var propsGap = this.props.gap;
+    if (propsGap !== undefined && propsGap !== null) {
+      return propsGap;
+    } else {
+      var gap = (0, _ThemeHelpers.is8pxTheme)(this.theme) ? 8 : 10;
+      return gap;
+    }
+  };_proto.
+
   renderVertical = function renderVertical() {
     var subsequentItemStyle = {
-      paddingTop: this.props.gap };
+      paddingTop: this.getGapValue() };
 
-    var isFirst = true;
-    var children = _react.default.Children.map(this.props.children, function (child) {
-      if (!child) {
-        return child;
-      }
-      var style = isFirst ? undefined : subsequentItemStyle;
+    var children = _react.default.Children.toArray(this.props.children).
+    filter(this.filterChildren).
+    map(function (child, index) {
+      var style = index === 0 ? undefined : subsequentItemStyle;
+      return /*#__PURE__*/(
+        _react.default.createElement("div", { style: style, key: index },
+        child));
 
-      isFirst = false;
 
-      return /*#__PURE__*/_react.default.createElement("div", { style: style }, child);
     });
 
     return /*#__PURE__*/_react.default.createElement("div", null, children);
   };_proto.
 
   renderHorizontal = function renderHorizontal() {var _this$props =
-    this.props,gap = _this$props.gap,children = _this$props.children,verticalAlign = _this$props.verticalAlign,wrap = _this$props.wrap;
+    this.props,children = _this$props.children,verticalAlign = _this$props.verticalAlign,wrap = _this$props.wrap;
+    var gap = this.getGapValue();
     var itemStyle = (0, _extends2.default)({
       display: 'inline-block',
       verticalAlign: verticalAlign },
@@ -97,7 +122,9 @@ Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
     return /*#__PURE__*/(
       _react.default.createElement("div", { style: rootStyle }, /*#__PURE__*/
       _react.default.createElement("div", { style: contStyle },
-      _react.default.Children.toArray(children).map(function (child, index) {
+      _react.default.Children.toArray(children).
+      filter(this.filterChildren).
+      map(function (child, index) {
         var marginLeft = index === 0 ? undefined : gap;
         return /*#__PURE__*/(
           _react.default.createElement("span", { key: index, style: (0, _extends2.default)({ marginLeft: marginLeft }, itemStyle) },
@@ -108,10 +135,14 @@ Gapped = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
-  };return Gapped;}(_react.default.Component);exports.Gapped = Gapped;Gapped.__KONTUR_REACT_UI__ = 'Gapped';Gapped.propTypes = { /**
-   * Расстояние между элементами.
-   */gap: _propTypes.default.number, /**
-   * Располагать элементы вертикально.
-   */vertical: _propTypes.default.bool, /**
-   * Вертикальное выравнивание элементов.
-   */verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'baseline', 'bottom']) };Gapped.defaultProps = { gap: 10, wrap: false, vertical: false, verticalAlign: 'baseline' };
+  };_proto.
+
+  filterChildren = function filterChildren(child) {
+    return Boolean(child) || typeof child === 'number';
+  };return Gapped;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Gapped', _class2.propTypes = { /**
+   * Расстояние между элементами.
+   */gap: _propTypes.default.number, /**
+   * Располагать элементы вертикально.
+   */vertical: _propTypes.default.bool, /**
+   * Вертикальное выравнивание элементов.
+   */verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'baseline', 'bottom']) }, _class2.defaultProps = { wrap: false, vertical: false, verticalAlign: 'baseline' }, _temp)) || _class;exports.Gapped = Gapped;