@skbkontur/react-ui 3.7.1 → 3.8.2

package/cjs/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.tsx"],"names":["PASS_PROPS","_renderButton","error","disabled","disablePortal","menuAlign","menuWidth","maxMenuHeight","use","size","warning","width","onOpen","onClose","onMouseEnter","onMouseLeave","onMouseOver","Dropdown","_select","renderMain","caption","icon","props","items","React","Children","map","children","item","_refSelect","renderValue","element","render","open","close","Component","__KONTUR_REACT_UI__","Header","MenuHeader","MenuItem","Separator","MenuSeparator","propTypes","PropTypes","node","isRequired","bool","number","oneOf","oneOfType","string","any","func","value"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { filterProps } from '../../lib/filterProps';\nimport { MenuHeader } from '../MenuHeader';\nimport { MenuItem } from '../MenuItem';\nimport { MenuSeparator } from '../MenuSeparator';\nimport { Select } from '../Select';\nimport { Nullable } from '../../typings/utility-types';\nimport { ButtonSize, ButtonUse } from '../Button';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\n\nconst PASS_PROPS = {\n  _renderButton: true,\n  error: true,\n  disabled: true,\n  disablePortal: true,\n  menuAlign: true,\n  menuWidth: true,\n  maxMenuHeight: true,\n  use: true,\n  size: true,\n  warning: true,\n  width: true,\n  onOpen: true,\n  onClose: true,\n  onMouseEnter: true,\n  onMouseLeave: true,\n  onMouseOver: true,\n};\n\nexport interface DropdownProps extends CommonProps {\n  /**\n   * Подпись на кнопке.\n   */\n  caption: React.ReactNode;\n  /**\n   * Иконка слева от текста кнопки\n   */\n  icon?: React.ReactElement<any>;\n  width?: React.CSSProperties['width'];\n\n  /** @ignore */\n  _renderButton?: (params: any) => JSX.Element;\n\n  /**\n   * Отключает использование портала\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Визуально отключает Dropdown\n   */\n  disabled?: boolean;\n\n  /**\n   * Визуально показать наличие ошибки.\n   */\n  error?: boolean;\n  /**\n   * Визуально показать наличие предупреждения.\n   */\n  warning?: boolean;\n  maxMenuHeight?: number;\n  menuAlign?: 'left' | 'right';\n  menuWidth?: number | string;\n  size?: ButtonSize;\n\n  /**\n   * Смотри Button.\n   */\n  use?: ButtonUse;\n\n  /**\n   * Вызывается при закрытии меню.\n   */\n  onClose?: () => void;\n  /**\n   * Вызывается при открытии меню.\n   */\n  onOpen?: () => void;\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;\n  onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\ntype DropdownSelectType = Select<React.ReactNode, React.ReactNode>;\n\n/**\n * Выпадающее меню.\n */\nexport class Dropdown extends React.Component<DropdownProps> {\n  public static __KONTUR_REACT_UI__ = 'Dropdown';\n\n  public static Header = MenuHeader;\n  public static MenuItem = MenuItem;\n  public static Separator = MenuSeparator;\n\n  public static propTypes = {\n    /**\n     * Подпись на кнопке.\n     */\n    caption: PropTypes.node.isRequired,\n\n    /**\n     * Отключает использование портала\n     */\n    disablePortal: PropTypes.bool,\n\n    /**\n     * Визуально отключает Dropdown\n     */\n    disabled: PropTypes.bool,\n\n    /**\n     * Визуально показать наличие ошибки.\n     */\n    error: PropTypes.bool,\n\n    /**\n     * Иконка слева от текста кнопки\n     */\n    icon: PropTypes.node,\n\n    maxMenuHeight: PropTypes.number,\n\n    menuAlign: PropTypes.oneOf(['left', 'right']),\n\n    menuWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    size: PropTypes.oneOf(['small', 'medium', 'large']),\n\n    /**\n     * Смотри Button.\n     */\n    use: PropTypes.any,\n\n    /**\n     * Визуально показать наличие предупреждения.\n     */\n    warning: PropTypes.bool,\n\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    /**\n     * Вызывается при закрытии меню.\n     */\n    onClose: PropTypes.func,\n\n    onMouseEnter: PropTypes.func,\n\n    onMouseLeave: PropTypes.func,\n\n    onMouseOver: PropTypes.func,\n\n    /**\n     * Вызывается при открытии меню.\n     */\n    onOpen: PropTypes.func,\n  };\n\n  private _select: Nullable<DropdownSelectType>;\n\n  public render() {\n    return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n  }\n\n  public renderMain = ({ caption, icon, ...props }: CommonWrapperRestProps<DropdownProps>) => {\n    const items = React.Children.map(this.props.children, (item) => item) || [];\n\n    return (\n      <Select<React.ReactNode, React.ReactNode>\n        ref={this._refSelect}\n        {...filterProps(props, PASS_PROPS)}\n        value={caption}\n        items={items}\n        _icon={icon}\n        renderValue={renderValue}\n      />\n    );\n  };\n\n  /**\n   * @public\n   */\n  public open() {\n    if (this._select) {\n      this._select.open();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public close() {\n    if (this._select) {\n      this._select.close();\n    }\n  }\n\n  private _refSelect = (element: DropdownSelectType): void => {\n    this._select = element;\n  };\n}\n\nfunction renderValue(value: any) {\n  return value;\n}\n"]}
+{"version":3,"sources":["Dropdown.tsx"],"names":["PASS_PROPS","_renderButton","error","disabled","disablePortal","menuAlign","menuWidth","maxMenuHeight","use","size","warning","width","onOpen","onClose","onMouseEnter","onMouseLeave","onMouseOver","Dropdown","_select","renderMain","caption","icon","props","items","React","Children","map","children","item","_refSelect","renderValue","element","render","open","close","Component","__KONTUR_REACT_UI__","Header","MenuHeader","MenuItem","Separator","MenuSeparator","propTypes","PropTypes","node","isRequired","bool","number","oneOf","oneOfType","string","any","func","value"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { filterProps } from '../../lib/filterProps';\nimport { MenuHeader } from '../MenuHeader';\nimport { MenuItem } from '../MenuItem';\nimport { MenuSeparator } from '../MenuSeparator';\nimport { Select } from '../Select';\nimport { Nullable } from '../../typings/utility-types';\nimport { ButtonSize, ButtonUse } from '../Button';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\n\nconst PASS_PROPS = {\n  _renderButton: true,\n  error: true,\n  disabled: true,\n  disablePortal: true,\n  menuAlign: true,\n  menuWidth: true,\n  maxMenuHeight: true,\n  use: true,\n  size: true,\n  warning: true,\n  width: true,\n  onOpen: true,\n  onClose: true,\n  onMouseEnter: true,\n  onMouseLeave: true,\n  onMouseOver: true,\n};\n\nexport interface DropdownProps extends CommonProps {\n  /**\n   * Подпись на кнопке.\n   */\n  caption: React.ReactNode;\n  /**\n   * Иконка слева от текста кнопки\n   */\n  icon?: React.ReactElement<any>;\n  width?: React.CSSProperties['width'];\n\n  /** @ignore */\n  _renderButton?: (params: any) => JSX.Element;\n\n  /**\n   * Отключает использование портала\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Визуально отключает Dropdown\n   */\n  disabled?: boolean;\n\n  /**\n   * Визуально показать наличие ошибки.\n   */\n  error?: boolean;\n  /**\n   * Визуально показать наличие предупреждения.\n   */\n  warning?: boolean;\n  maxMenuHeight?: number;\n  menuAlign?: 'left' | 'right';\n  menuWidth?: number | string;\n  size?: ButtonSize;\n\n  /**\n   * Смотри Button.\n   */\n  use?: ButtonUse;\n\n  /**\n   * Вызывается при закрытии меню.\n   */\n  onClose?: () => void;\n  /**\n   * Вызывается при открытии меню.\n   */\n  onOpen?: () => void;\n  onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;\n  onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\ntype DropdownSelectType = Select<React.ReactNode, React.ReactNode>;\n\n/**\n * Выпадающее меню.\n *\n */\nexport class Dropdown extends React.Component<DropdownProps> {\n  public static __KONTUR_REACT_UI__ = 'Dropdown';\n\n  public static Header = MenuHeader;\n  public static MenuItem = MenuItem;\n  public static Separator = MenuSeparator;\n\n  public static propTypes = {\n    /**\n     * Подпись на кнопке.\n     */\n    caption: PropTypes.node.isRequired,\n\n    /**\n     * Отключает использование портала\n     */\n    disablePortal: PropTypes.bool,\n\n    /**\n     * Визуально отключает Dropdown\n     */\n    disabled: PropTypes.bool,\n\n    /**\n     * Визуально показать наличие ошибки.\n     */\n    error: PropTypes.bool,\n\n    /**\n     * Иконка слева от текста кнопки\n     */\n    icon: PropTypes.node,\n\n    maxMenuHeight: PropTypes.number,\n\n    menuAlign: PropTypes.oneOf(['left', 'right']),\n\n    menuWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    size: PropTypes.oneOf(['small', 'medium', 'large']),\n\n    /**\n     * Смотри Button.\n     */\n    use: PropTypes.any,\n\n    /**\n     * Визуально показать наличие предупреждения.\n     */\n    warning: PropTypes.bool,\n\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n    /**\n     * Вызывается при закрытии меню.\n     */\n    onClose: PropTypes.func,\n\n    onMouseEnter: PropTypes.func,\n\n    onMouseLeave: PropTypes.func,\n\n    onMouseOver: PropTypes.func,\n\n    /**\n     * Вызывается при открытии меню.\n     */\n    onOpen: PropTypes.func,\n  };\n\n  private _select: Nullable<DropdownSelectType>;\n\n  public render() {\n    return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n  }\n\n  public renderMain = ({ caption, icon, ...props }: CommonWrapperRestProps<DropdownProps>) => {\n    const items = React.Children.map(this.props.children, (item) => item) || [];\n\n    return (\n      <Select<React.ReactNode, React.ReactNode>\n        ref={this._refSelect}\n        {...filterProps(props, PASS_PROPS)}\n        value={caption}\n        items={items}\n        _icon={icon}\n        renderValue={renderValue}\n      />\n    );\n  };\n\n  /**\n   * @public\n   */\n  public open() {\n    if (this._select) {\n      this._select.open();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public close() {\n    if (this._select) {\n      this._select.close();\n    }\n  }\n\n  private _refSelect = (element: DropdownSelectType): void => {\n    this._select = element;\n  };\n}\n\nfunction renderValue(value: any) {\n  return value;\n}\n"]}

package/cjs/components/Dropdown/Dropdown.md

@@ -1,6 +1,5 @@
 ```jsx harmony
 import { Dropdown, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
 <Dropdown caption="Click">
   <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
   <MenuSeparator />

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

@@ -11,15 +11,29 @@ export interface DropdownMenuProps extends CommonProps {
     width?: React.CSSProperties['width'];
     /**
      * Элемент или функция возвращающая элемент,
-     * если передана, используется вместо ```caption```,
+     * если передана, используется вместо `caption`,
      * в таком случае управлять открытием и закрытием меню
      * придется в этой функции
      */
     caption: PopupMenuProps['caption'];
+    /**
+     * Произвольный элемент, который будет отрендерен в шапке меню.
+     *
+     * _Примечание_: контрол [`MenuHeader`](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.
+     */
     header?: React.ReactNode;
+    /**
+     * Произвольный элемент, который будет отрендерен в подвале меню.
+     *
+     * Перед элементом переданным в `footer` будет отрендерен [`MenuSeparator`](#/Components/MenuSeparator).
+     */
     footer?: React.ReactNode;
     /**
-     * Массив разрешенных положений меню относительно caption'а.
+     *  Список позиций доступных для расположения выпадашки относительно `caption`.
+     *
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
+     *
+     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
      * @default ['bottom left', 'bottom right', 'top left', 'top right']
      */
     positions?: PopupPosition[];
@@ -31,7 +45,7 @@ export interface DropdownMenuProps extends CommonProps {
     disableAnimations: boolean;
 }
 /**
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент
  */
 export declare class DropdownMenu extends React.Component<DropdownMenuProps> {
     static __KONTUR_REACT_UI__: string;

package/cjs/components/DropdownMenu/DropdownMenu.js

@@ -27,6 +27,20 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -42,7 +56,7 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 
 
 /**
- * Меню, раскрывающееся по клику на переданный в ```caption``` элемент
+ * Меню, раскрывающееся по клику на переданный в `caption` элемент
  */var
 DropdownMenu = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(DropdownMenu, _React$Component);
 

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,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,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';\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 { PopupPosition } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\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  header?: React.ReactNode;\n  footer?: React.ReactNode;\n  /**\n   * Массив разрешенных положений меню относительно caption'а.\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\n   */\n  positions?: PopupPosition[];\n\n  onOpen?: () => void;\n  onClose?: () => void;\n\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в ```caption``` элемент\n */\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\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 {...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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA;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,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,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';\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 { PopupPosition } from '../../internal/Popup';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\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?: PopupPosition[];\n\n  onOpen?: () => void;\n  onClose?: () => void;\n\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations: boolean;\n}\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент\n */\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\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 {...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,4 +1,4 @@
-Простой пример
+Базовый пример меню.
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
@@ -16,12 +16,12 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </DropdownMenu>;
 ```
 
-С указанием ширины меню
+Меню с заданной шириной.
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
 
-<DropdownMenu caption={<Button use="primary">Открыть меню</Button>} menuWidth={350}>
+<DropdownMenu caption={<Button use="primary">Открыть меню c заданной шириной</Button>} menuWidth={350}>
   <MenuHeader>Заголовок меню</MenuHeader>
   <MenuSeparator />
   <MenuItem>Раз</MenuItem>
@@ -34,12 +34,12 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </DropdownMenu>;
 ```
 
-С указанием максимальной высоты меню
+Меню с заданной максимальной высотой.
 
 ```jsx harmony
 import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
 
-<DropdownMenu caption={<Button use="primary">Открыть меню</Button>} menuMaxHeight={150}>
+<DropdownMenu caption={<Button use="primary">Открыть меню c заданной высотой</Button>} menuMaxHeight={150}>
   <MenuHeader>Заголовок меню</MenuHeader>
   <MenuSeparator />
   <MenuItem>Раз</MenuItem>
@@ -52,7 +52,58 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </DropdownMenu>;
 ```
 
-В `caption` можно передать любой элемент
+Меню с выпадашкой слева по центру.
+
+```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';
@@ -71,3 +122,33 @@ import { MenuItem } from '@skbkontur/react-ui';
   <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/Kebab/Kebab.d.ts

@@ -16,8 +16,11 @@ export interface KebabProps extends CommonProps {
     onOpen: () => void;
     size: 'small' | 'medium' | 'large';
     /**
-     * Список позиций доступных для расположения выпадашки
-     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использоваться первая из этого списка
+     * Список позиций доступных для расположения выпадашки.
+     *
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
+     *
+     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
      * @default ['bottom left', 'bottom right', 'top left', 'top right']
      */
     positions: PopupPosition[];

package/cjs/components/Kebab/Kebab.js

@@ -49,6 +49,9 @@ var _Kebab = require("./Kebab.styles");var
 
 
 
+
+
+
 
 
 
@@ -129,6 +132,7 @@ Kebab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(K
 
 
 
+
 
 
     renderCaption = function (captionProps) {var _cx;var
@@ -210,7 +214,7 @@ Kebab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(K
       _this.setState({
         focusedByTab: false });
 
-    };return _this;}var _proto = Kebab.prototype;_proto.componentDidMount = function componentDidMount() {/** addListener'у нужен колбэк в аргумент */this.listener = LayoutEvents.addListener(function () {return undefined;});};_proto.componentWillUnmount = function componentWillUnmount() {this.listener.remove();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$props = this.props,disabled = _this$props.disabled,positions = _this$props.positions;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: true, positions: positions, onChangeMenuState: this.handleChangeMenuState, caption: this.renderCaption, disableAnimations: this.props.disableAnimations }, !disabled && this.props.children));};_proto.
+    };return _this;}var _proto = Kebab.prototype;_proto.componentDidMount = function componentDidMount() {/** addListener'у нужен колбэк в аргумент */this.listener = LayoutEvents.addListener(function () {return undefined;});};_proto.componentWillUnmount = function componentWillUnmount() {this.listener.remove();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$props = this.props,disabled = _this$props.disabled,positions = _this$props.positions;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: true, positions: positions, onChangeMenuState: this.handleChangeMenuState, caption: this.renderCaption, disableAnimations: this.props.disableAnimations, menuMaxHeight: this.props.menuMaxHeight }, !disabled && this.props.children));};_proto.
 
   renderIcon = function renderIcon() {var _cx2;
     return /*#__PURE__*/(

package/cjs/components/Kebab/Kebab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.tsx"],"names":["Kebab","state","opened","focusedByTab","anchor","theme","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","children","icon","iconsmall","size","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","isTestEnv","PropTypes","node","bool","menuMaxHeight","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPosition } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps {\n  disabled?: boolean;\n  /**\n   * Функция вызываемая при закрытии выпадашки\n   * @default () => undefined\n   */\n  onClose: () => void;\n  /**\n   * Функция вызываемая при открытии выпадашки\n   * @default () => undefined\n   */\n  onOpen: () => void;\n  size: 'small' | 'medium' | 'large';\n  /**\n   * Список позиций доступных для расположения выпадашки\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использоваться первая из этого списка\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\n   */\n  positions: PopupPosition[];\n  menuMaxHeight?: number | string;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations: boolean;\n  /**\n   * Кастомная иконка\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: boolean;\n  opened: boolean;\n}\n\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n  public static __KONTUR_REACT_UI__ = 'Kebab';\n\n  public static propTypes = {};\n\n  public static defaultProps = {\n    onOpen: () => undefined,\n    onClose: () => undefined,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n    size: 'small',\n    disableAnimations: isTestEnv,\n    icon: <MenuKebabIcon />,\n  };\n\n  public state = {\n    opened: false,\n    focusedByTab: false,\n    anchor: null,\n  };\n\n  private theme!: Theme;\n\n  private listener: {\n    remove: () => void;\n  } = {\n    remove: () => undefined,\n  };\n\n  public componentDidMount() {\n    /** addListener'у нужен колбэк в аргумент */\n    this.listener = LayoutEvents.addListener(() => undefined);\n  }\n\n  public componentWillUnmount() {\n    this.listener.remove();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.kebabPinOffset,\n                  popupMargin: theme.kebabMargin,\n                  popupPinSize: theme.kebabPinSize,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { disabled, positions } = this.props;\n    return (\n      <CommonWrapper {...this.props}>\n        <PopupMenu\n          popupHasPin\n          positions={positions}\n          onChangeMenuState={this.handleChangeMenuState}\n          caption={this.renderCaption}\n          disableAnimations={this.props.disableAnimations}\n        >\n          {!disabled && this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled } = this.props;\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!disabled) {\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\n      }\n    };\n\n    const handleCaptionClick = () => {\n      if (!disabled) {\n        captionProps.toggleMenu();\n      }\n    };\n\n    return (\n      <span\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCaptionClick}\n        onKeyDown={handleCaptionKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        className={cx({\n          [styles.kebab(this.theme)]: true,\n          [styles.opened(this.theme)]: captionProps.opened,\n          [styles.disabled()]: disabled,\n          [styles.focused(this.theme)]: this.state.focusedByTab,\n        })}\n      >\n        {this.renderIcon()}\n      </span>\n    );\n  };\n\n  private handleCaptionKeyDown = (\n    e: React.KeyboardEvent<HTMLDivElement>,\n    openMenu: PopupMenuCaptionProps['openMenu'],\n  ) => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      openMenu(true);\n    }\n  };\n\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n    this.setState(\n      {\n        opened: isOpened,\n        focusedByTab: !isOpened && restoreFocus,\n      },\n      () => {\n        if (this.props.disabled) {\n          return;\n        }\n\n        if (this.state.opened) {\n          this.props.onOpen();\n        } else {\n          this.props.onClose();\n        }\n      },\n    );\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      focusedByTab: false,\n    });\n  };\n\n  private renderIcon() {\n    return (\n      <div\n        className={cx({\n          [styles.icon()]: true,\n          [styles.iconsmall()]: this.props.size === 'small',\n          [styles.iconmedium()]: this.props.size === 'medium',\n          [styles.iconlarge()]: this.props.size === 'large',\n        })}\n      >\n        {this.props.icon}\n      </div>\n    );\n  }\n}\n\nKebab.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /**\n   * Размер кебаба small 14px | large 20px\n   */\n  size: PropTypes.string,\n\n  /**\n   * Коллбек, вызывающийся перед закрытием кебаба\n   */\n  onClose: PropTypes.func,\n\n  /**\n   * Коллбек, вызывающийся перед открытием кебаба\n   */\n  onOpen: PropTypes.func,\n};\n"]}
+{"version":3,"sources":["Kebab.tsx"],"names":["Kebab","state","opened","focusedByTab","anchor","theme","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","menuMaxHeight","children","icon","iconsmall","size","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPosition } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps {\n  disabled?: boolean;\n  /**\n   * Функция вызываемая при закрытии выпадашки\n   * @default () => undefined\n   */\n  onClose: () => void;\n  /**\n   * Функция вызываемая при открытии выпадашки\n   * @default () => undefined\n   */\n  onOpen: () => void;\n  size: 'small' | 'medium' | 'large';\n  /**\n   * Список позиций доступных для расположения выпадашки.\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: PopupPosition[];\n  menuMaxHeight?: number | string;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations: boolean;\n  /**\n   * Кастомная иконка\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: boolean;\n  opened: boolean;\n}\n\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n  public static __KONTUR_REACT_UI__ = 'Kebab';\n\n  public static propTypes = {};\n\n  public static defaultProps = {\n    onOpen: () => undefined,\n    onClose: () => undefined,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n    size: 'small',\n    disableAnimations: isTestEnv,\n    icon: <MenuKebabIcon />,\n  };\n\n  public state = {\n    opened: false,\n    focusedByTab: false,\n    anchor: null,\n  };\n\n  private theme!: Theme;\n\n  private listener: {\n    remove: () => void;\n  } = {\n    remove: () => undefined,\n  };\n\n  public componentDidMount() {\n    /** addListener'у нужен колбэк в аргумент */\n    this.listener = LayoutEvents.addListener(() => undefined);\n  }\n\n  public componentWillUnmount() {\n    this.listener.remove();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.kebabPinOffset,\n                  popupMargin: theme.kebabMargin,\n                  popupPinSize: theme.kebabPinSize,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { disabled, positions } = this.props;\n    return (\n      <CommonWrapper {...this.props}>\n        <PopupMenu\n          popupHasPin\n          positions={positions}\n          onChangeMenuState={this.handleChangeMenuState}\n          caption={this.renderCaption}\n          disableAnimations={this.props.disableAnimations}\n          menuMaxHeight={this.props.menuMaxHeight}\n        >\n          {!disabled && this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled } = this.props;\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!disabled) {\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\n      }\n    };\n\n    const handleCaptionClick = () => {\n      if (!disabled) {\n        captionProps.toggleMenu();\n      }\n    };\n\n    return (\n      <span\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCaptionClick}\n        onKeyDown={handleCaptionKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        className={cx({\n          [styles.kebab(this.theme)]: true,\n          [styles.opened(this.theme)]: captionProps.opened,\n          [styles.disabled()]: disabled,\n          [styles.focused(this.theme)]: this.state.focusedByTab,\n        })}\n      >\n        {this.renderIcon()}\n      </span>\n    );\n  };\n\n  private handleCaptionKeyDown = (\n    e: React.KeyboardEvent<HTMLDivElement>,\n    openMenu: PopupMenuCaptionProps['openMenu'],\n  ) => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      openMenu(true);\n    }\n  };\n\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n    this.setState(\n      {\n        opened: isOpened,\n        focusedByTab: !isOpened && restoreFocus,\n      },\n      () => {\n        if (this.props.disabled) {\n          return;\n        }\n\n        if (this.state.opened) {\n          this.props.onOpen();\n        } else {\n          this.props.onClose();\n        }\n      },\n    );\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      focusedByTab: false,\n    });\n  };\n\n  private renderIcon() {\n    return (\n      <div\n        className={cx({\n          [styles.icon()]: true,\n          [styles.iconsmall()]: this.props.size === 'small',\n          [styles.iconmedium()]: this.props.size === 'medium',\n          [styles.iconlarge()]: this.props.size === 'large',\n        })}\n      >\n        {this.props.icon}\n      </div>\n    );\n  }\n}\n\nKebab.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /**\n   * Размер кебаба small 14px | large 20px\n   */\n  size: PropTypes.string,\n\n  /**\n   * Коллбек, вызывающийся перед закрытием кебаба\n   */\n  onClose: PropTypes.func,\n\n  /**\n   * Коллбек, вызывающийся перед открытием кебаба\n   */\n  onOpen: PropTypes.func,\n};\n"]}