@skbkontur/react-ui 3.7.2 → 3.8.3

package/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/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/components/Kebab/Kebab/Kebab.js

@@ -146,7 +146,8 @@ export var Kebab = /*#__PURE__*/function (_React$Component) {
       positions: positions,
       onChangeMenuState: this.handleChangeMenuState,
       caption: this.renderCaption,
-      disableAnimations: this.props.disableAnimations
+      disableAnimations: this.props.disableAnimations,
+      menuMaxHeight: this.props.menuMaxHeight
     }, !disabled && this.props.children));
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.tsx"],"names":["React","PropTypes","isKeyArrowVertical","isKeyEnter","isKeySpace","someKeys","LayoutEvents","keyListener","PopupMenu","ThemeContext","MenuKebabIcon","isTestEnv","ThemeFactory","CommonWrapper","cx","styles","Kebab","state","opened","focusedByTab","anchor","theme","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","kebab","focused","renderIcon","e","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","requestAnimationFrame","isTabPressed","componentDidMount","addListener","componentWillUnmount","render","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","children","icon","iconsmall","size","iconmedium","iconlarge","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","node","bool","menuMaxHeight","oneOfType","string","number","func"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;;AAEA,SAASC,kBAAT,EAA6BC,UAA7B,EAAyCC,UAAzC,EAAqDC,QAArD,QAAqE,uCAArE;AACA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,SAAT,QAAiD,0BAAjD;;;AAGA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,aAAT,QAA8B,2BAA9B;AACA,SAASC,SAAT,QAA0B,8BAA1B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,aAAT,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,gBAAvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,WAAaC,KAAb;;;;;;;;;;;;;;AAcSC,IAAAA,KAdT,GAciB;AACbC,MAAAA,MAAM,EAAE,KADK;AAEbC,MAAAA,YAAY,EAAE,KAFD;AAGbC,MAAAA,MAAM,EAAE,IAHK,EAdjB;;;AAoBUC,IAAAA,KApBV;;AAsBUC,IAAAA,QAtBV;;AAwBM;AACFC,MAAAA,MAAM,EAAE,0BAAMC,SAAN,EADN,EAxBN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EUC,IAAAA,aA9EV,GA8E0B,UAACC,YAAD,EAAyC;AACvDC,MAAAA,QADuD,GAC1C,MAAKC,KADqC,CACvDD,QADuD;AAE/D,UAAME,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgD;AAC3E,YAAI,CAACH,QAAL,EAAe;AACb,gBAAKE,oBAAL,CAA0BC,KAA1B,EAAiCJ,YAAY,CAACK,QAA9C;AACD;AACF,OAJD;;AAMA,UAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC/B,YAAI,CAACL,QAAL,EAAe;AACbD,UAAAA,YAAY,CAACO,UAAb;AACD;AACF,OAJD;;AAMA;AACE;AACE,UAAA,QAAQ,EAAEN,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAD5B;AAEE,UAAA,OAAO,EAAEK,kBAFX;AAGE,UAAA,SAAS,EAAEH,oBAHb;AAIE,UAAA,OAAO,EAAE,MAAKK,WAJhB;AAKE,UAAA,MAAM,EAAE,MAAKC,UALf;AAME,UAAA,SAAS,EAAErB,EAAE;AACVC,UAAAA,MAAM,CAACqB,KAAP,CAAa,MAAKf,KAAlB,CADU,IACiB,IADjB;AAEVN,UAAAA,MAAM,CAACG,MAAP,CAAc,MAAKG,KAAnB,CAFU,IAEkBK,YAAY,CAACR,MAF/B;AAGVH,UAAAA,MAAM,CAACY,QAAP,EAHU,IAGUA,QAHV;AAIVZ,UAAAA,MAAM,CAACsB,OAAP,CAAe,MAAKhB,KAApB,CAJU,IAImB,MAAKJ,KAAL,CAAWE,YAJ9B,OANf;;;AAaG,cAAKmB,UAAL,EAbH,CADF;;;AAiBD,KA7GH;;AA+GUT,IAAAA,oBA/GV,GA+GiC;AAC7BU,IAAAA,CAD6B;AAE7BR,IAAAA,QAF6B;AAG1B;AACH,UAAI1B,QAAQ,CAACF,UAAD,EAAaC,UAAb,EAAyBF,kBAAzB,CAAR,CAAqDqC,CAArD,CAAJ,EAA6D;AAC3DA,QAAAA,CAAC,CAACC,cAAF;AACAT,QAAAA,QAAQ,CAAC,IAAD,CAAR;AACD;AACF,KAvHH;;AAyHUU,IAAAA,qBAzHV,GAyHkC,UAACC,QAAD,EAAoBC,YAApB,EAAoD;AAClF,YAAKC,QAAL;AACE;AACE1B,QAAAA,MAAM,EAAEwB,QADV;AAEEvB,QAAAA,YAAY,EAAE,CAACuB,QAAD,IAAaC,YAF7B,EADF;;AAKE,kBAAM;AACJ,YAAI,MAAKf,KAAL,CAAWD,QAAf,EAAyB;AACvB;AACD;;AAED,YAAI,MAAKV,KAAL,CAAWC,MAAf,EAAuB;AACrB,gBAAKU,KAAL,CAAWiB,MAAX;AACD,SAFD,MAEO;AACL,gBAAKjB,KAAL,CAAWkB,OAAX;AACD;AACF,OAfH;;AAiBD,KA3IH;;AA6IUZ,IAAAA,WA7IV,GA6IwB,YAAM;AAC1B,UAAI,CAAC,MAAKN,KAAL,CAAWD,QAAhB,EAA0B;AACxB;AACA;AACAoB,QAAAA,qBAAqB,CAAC,YAAM;AAC1B,cAAIxC,WAAW,CAACyC,YAAhB,EAA8B;AAC5B,kBAAKJ,QAAL,CAAc,EAAEzB,YAAY,EAAE,IAAhB,EAAd;AACD;AACF,SAJoB,CAArB;AAKD;AACF,KAvJH;;AAyJUgB,IAAAA,UAzJV,GAyJuB,YAAM;AACzB,YAAKS,QAAL,CAAc;AACZzB,QAAAA,YAAY,EAAE,KADF,EAAd;;AAGD,KA7JH,mDA4BS8B,iBA5BT,GA4BE,6BAA2B,CACzB,4CACA,KAAK3B,QAAL,GAAgBhB,YAAY,CAAC4C,WAAb,CAAyB,oBAAM1B,SAAN,EAAzB,CAAhB,CACD,CA/BH,QAiCS2B,oBAjCT,GAiCE,gCAA8B,CAC5B,KAAK7B,QAAL,CAAcC,MAAd,GACD,CAnCH,QAqCS6B,MArCT,GAqCE,kBAA6B,mBAC3B,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAAC/B,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBACE,oBAAC,YAAD,CAAc,QAAd,IACE,KAAK,EAAET,YAAY,CAACyC,MAAb,CACL,EACEC,cAAc,EAAEjC,KAAK,CAACkC,cADxB,EAEEC,WAAW,EAAEnC,KAAK,CAACoC,WAFrB,EAGEC,YAAY,EAAErC,KAAK,CAACsC,YAHtB,EADK,EAMLtC,KANK,CADT,IAUG,MAAI,CAACuC,UAAL,EAVH,CADF,CAcD,CAjBH,CADF,CAqBD,CA3DH,QA6DUA,UA7DV,GA6DE,sBAAqB,mBACa,KAAKhC,KADlB,CACXD,QADW,eACXA,QADW,CACDkC,SADC,eACDA,SADC,CAEnB,oBACE,oBAAC,aAAD,EAAmB,KAAKjC,KAAxB,eACE,oBAAC,SAAD,IACE,WAAW,MADb,EAEE,SAAS,EAAEiC,SAFb,EAGE,iBAAiB,EAAE,KAAKpB,qBAH1B,EAIE,OAAO,EAAE,KAAKhB,aAJhB,EAKE,iBAAiB,EAAE,KAAKG,KAAL,CAAWkC,iBALhC,IAOG,CAACnC,QAAD,IAAa,KAAKC,KAAL,CAAWmC,QAP3B,CADF,CADF,CAaD,CA5EH;;AA+JUzB,EAAAA,UA/JV,GA+JE,sBAAqB;AACnB;AACE;AACE,QAAA,SAAS,EAAExB,EAAE;AACVC,QAAAA,MAAM,CAACiD,IAAP,EADU,IACM,IADN;AAEVjD,QAAAA,MAAM,CAACkD,SAAP,EAFU,IAEW,KAAKrC,KAAL,CAAWsC,IAAX,KAAoB,OAF/B;AAGVnD,QAAAA,MAAM,CAACoD,UAAP,EAHU,IAGY,KAAKvC,KAAL,CAAWsC,IAAX,KAAoB,QAHhC;AAIVnD,QAAAA,MAAM,CAACqD,SAAP,EAJU,IAIW,KAAKxC,KAAL,CAAWsC,IAAX,KAAoB,OAJ/B,QADf;;;AAQG,WAAKtC,KAAL,CAAWoC,IARd,CADF;;;AAYD,GA5KH,gBAA2BhE,KAAK,CAACqE,SAAjC,EAAarD,K,CACGsD,mB,GAAsB,O,CADzBtD,K,CAGGuD,S,GAAY,E,CAHfvD,K,CAKGwD,Y,GAAe,EAC3B3B,MAAM,EAAE,0BAAMrB,SAAN,EADmB,EAE3BsB,OAAO,EAAE,2BAAMtB,SAAN,EAFkB,EAG3BqC,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAHgB,EAI3BK,IAAI,EAAE,OAJqB,EAK3BJ,iBAAiB,EAAEnD,SALQ,EAM3BqD,IAAI,eAAE,oBAAC,aAAD,OANqB,E;;;AA0K/BhD,KAAK,CAACuD,SAAN,GAAkB;AAChBR,EAAAA,QAAQ,EAAE9D,SAAS,CAACwE,IADJ;AAEhB9C,EAAAA,QAAQ,EAAE1B,SAAS,CAACyE,IAFJ;AAGhBC,EAAAA,aAAa,EAAE1E,SAAS,CAAC2E,SAAV,CAAoB,CAAC3E,SAAS,CAAC4E,MAAX,EAAmB5E,SAAS,CAAC6E,MAA7B,CAApB,CAHC;;AAKhB;AACF;AACA;AACEZ,EAAAA,IAAI,EAAEjE,SAAS,CAAC4E,MARA;;AAUhB;AACF;AACA;AACE/B,EAAAA,OAAO,EAAE7C,SAAS,CAAC8E,IAbH;;AAehB;AACF;AACA;AACElC,EAAAA,MAAM,EAAE5C,SAAS,CAAC8E,IAlBF,EAAlB","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":["React","PropTypes","isKeyArrowVertical","isKeyEnter","isKeySpace","someKeys","LayoutEvents","keyListener","PopupMenu","ThemeContext","MenuKebabIcon","isTestEnv","ThemeFactory","CommonWrapper","cx","styles","Kebab","state","opened","focusedByTab","anchor","theme","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","kebab","focused","renderIcon","e","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","requestAnimationFrame","isTabPressed","componentDidMount","addListener","componentWillUnmount","render","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","menuMaxHeight","children","icon","iconsmall","size","iconmedium","iconlarge","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","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"]}

package/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/components/Kebab/Kebab.md

@@ -1,7 +1,9 @@
+Базовый пример кебаб-меню.
+
 ```jsx harmony
 import EditIcon from '@skbkontur/react-icons/Edit';
 import TrashIcon from '@skbkontur/react-icons/Trash';
-import { Gapped, MenuItem } from '@skbkontur/react-ui';
+import { Gapped, MenuItem, Toast } from '@skbkontur/react-ui';
 
 let style = {
   alignItems: 'center',
@@ -22,10 +24,10 @@ let Card = ({ name, post }) => (
     </div>
 
     <Kebab size="large">
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Nope')}>
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
         Редактировать
       </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Nope')}>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
         Удалить
       </MenuItem>
     </Kebab>
@@ -43,3 +45,247 @@ let Card = ({ name, post }) => (
   </Gapped>
 </Gapped>;
 ```
+
+Различные размеры кебаб-меню.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { Gapped, MenuItem, Toast} from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  background: 'white',
+  border: '1px solid #dfdede',
+  color: '#333',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 230,
+};
+
+let Card = ({ title, size }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab size={size}>
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Gapped>
+  <Card title="Маленький кебаб" size="small" />
+  <Card title="Средний кебаб" size="medium" />
+  <Card title="Большой кебаб" size="large" />
+</Gapped>
+```
+
+Кебаб-меню с выпадашкой слева.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  background: 'white',
+  border: '1px solid #dfdede',
+  color: '#333',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ title }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab positions={['left middle']} size="large">
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="С выпадашкой слева" />
+```
+
+С кастомным действием при открытии.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  background: 'white',
+  border: '1px solid #dfdede',
+  color: '#333',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ title }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab
+      onOpen={() => Toast.push('Кебаб-меню открылось!')}
+      size="large"
+      >
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="С кастомным действием" />
+```
+
+Отключенное кебаб-меню.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  background: 'white',
+  border: '1px solid #dfdede',
+  color: '#333',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ title }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab disabled size="large">
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="Не нажимается :(" />
+```
+
+Кебаб-меню с отключенной анимацией.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  background: 'white',
+  border: '1px solid #dfdede',
+  color: '#333',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ title }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab disableAnimations size="large">
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="Без анимации" />
+```
+
+Кебаб-меню с заданной высотой.
+
+```jsx harmony
+import EditIcon from '@skbkontur/react-icons/Edit';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import { MenuItem, Toast } from '@skbkontur/react-ui';
+
+let style = {
+  alignItems: 'center',
+  background: 'white',
+  border: '1px solid #dfdede',
+  color: '#333',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ title }) => (
+  <div style={style}>
+    <div>
+      <h3>{title}</h3>
+    </div>
+
+    <Kebab
+      menuMaxHeight="100px"
+      size="large"
+      >
+      <MenuItem>
+        Действие
+      </MenuItem>
+      <MenuItem>
+        И ещё одно
+      </MenuItem>
+      <MenuItem>
+        Ещё действие
+      </MenuItem>
+      <MenuItem>
+        И последнее действие
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Card title="С заданной высотой" />
+```

package/components/MenuHeader/MenuHeader/MenuHeader.js

@@ -5,7 +5,11 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { styles } from "../MenuHeader.styles";
 /**
- * Заголовок в меню.
+ * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
+ *
+ * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 
 function MenuHeader(_ref) {

package/components/MenuHeader/MenuHeader/MenuHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","cx","styles","MenuHeader","_enableIconPadding","children","rest","theme","root","withLeftPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"oGAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;;;;;;AAOA;AACA;AACA;AACA,SAASC,UAAT,OAAwF,0CAAlEC,kBAAkE,CAAlEA,kBAAkE,sCAA7C,KAA6C,yBAAtCC,QAAsC,QAAtCA,QAAsC,CAAzBC,IAAyB;AACtF,MAAMC,KAAK,GAAGT,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBO,IAAnB;AACE;AACE,MAAA,SAAS,EAAEL,EAAE;AACVC,MAAAA,MAAM,CAACM,IAAP,CAAYD,KAAZ,CADU,IACW,IADX;AAEVL,MAAAA,MAAM,CAACO,eAAP,CAAuBF,KAAvB,CAFU,IAEsBH,kBAFtB,OADf;;;AAMGC,IAAAA,QANH,CADF,CADF;;;;AAYD;;AAEDF,UAAU,CAACO,mBAAX,GAAiC,YAAjC;AACAP,UAAU,CAACQ,eAAX,GAA6B,IAA7B;;AAEA,SAASR,UAAT;;AAEA,OAAO,IAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,aAAAhB,KAAK,CAACiB,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MenuHeader.styles';\n\nexport interface MenuHeaderProps extends CommonProps {\n  _enableIconPadding?: boolean;\n  children: ReactNode;\n}\n\n/**\n * Заголовок в меню.\n */\nfunction MenuHeader({ _enableIconPadding = false, children, ...rest }: MenuHeaderProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...rest}>\n      <div\n        className={cx({\n          [styles.root(theme)]: true,\n          [styles.withLeftPadding(theme)]: _enableIconPadding,\n        })}\n      >\n        {children}\n      </div>\n    </CommonWrapper>\n  );\n}\n\nMenuHeader.__KONTUR_REACT_UI__ = 'MenuHeader';\nMenuHeader.__MENU_HEADER__ = true;\n\nexport { MenuHeader };\n\nexport const isMenuHeader = (child: React.ReactNode): child is React.ReactElement<MenuHeaderProps> => {\n  return React.isValidElement<MenuHeaderProps>(child)\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__')\n    : false;\n};\n"]}
+{"version":3,"sources":["MenuHeader.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","cx","styles","MenuHeader","_enableIconPadding","children","rest","theme","root","withLeftPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"oGAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAT,OAAwF,0CAAlEC,kBAAkE,CAAlEA,kBAAkE,sCAA7C,KAA6C,yBAAtCC,QAAsC,QAAtCA,QAAsC,CAAzBC,IAAyB;AACtF,MAAMC,KAAK,GAAGT,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBO,IAAnB;AACE;AACE,MAAA,SAAS,EAAEL,EAAE;AACVC,MAAAA,MAAM,CAACM,IAAP,CAAYD,KAAZ,CADU,IACW,IADX;AAEVL,MAAAA,MAAM,CAACO,eAAP,CAAuBF,KAAvB,CAFU,IAEsBH,kBAFtB,OADf;;;AAMGC,IAAAA,QANH,CADF,CADF;;;;AAYD;;AAEDF,UAAU,CAACO,mBAAX,GAAiC,YAAjC;AACAP,UAAU,CAACQ,eAAX,GAA6B,IAA7B;;AAEA,SAASR,UAAT;;AAEA,OAAO,IAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,aAAAhB,KAAK,CAACiB,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MenuHeader.styles';\n\nexport interface MenuHeaderProps extends CommonProps {\n  _enableIconPadding?: boolean;\n  children: ReactNode;\n}\n\n/**\n * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.\n *\n * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.\n *\n * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\nfunction MenuHeader({ _enableIconPadding = false, children, ...rest }: MenuHeaderProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...rest}>\n      <div\n        className={cx({\n          [styles.root(theme)]: true,\n          [styles.withLeftPadding(theme)]: _enableIconPadding,\n        })}\n      >\n        {children}\n      </div>\n    </CommonWrapper>\n  );\n}\n\nMenuHeader.__KONTUR_REACT_UI__ = 'MenuHeader';\nMenuHeader.__MENU_HEADER__ = true;\n\nexport { MenuHeader };\n\nexport const isMenuHeader = (child: React.ReactNode): child is React.ReactElement<MenuHeaderProps> => {\n  return React.isValidElement<MenuHeaderProps>(child)\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__')\n    : false;\n};\n"]}

package/components/MenuHeader/MenuHeader.d.ts

@@ -5,7 +5,11 @@ export interface MenuHeaderProps extends CommonProps {
     children: ReactNode;
 }
 /**
- * Заголовок в меню.
+ * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
+ *
+ * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 declare function MenuHeader({ _enableIconPadding, children, ...rest }: MenuHeaderProps): JSX.Element;
 declare namespace MenuHeader {

package/components/MenuHeader/MenuHeader.md

@@ -0,0 +1,23 @@
+Базовый пример меню с заголовками.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  menuMaxHeight="10rem"
+  caption={<Button use="primary">Сотрудники компании</Button>}
+  >
+  <MenuHeader>Разработчики</MenuHeader>
+  <MenuItem>Вася</MenuItem>
+  <MenuItem>Петя</MenuItem>
+  <MenuItem>Маша</MenuItem>
+  <MenuHeader>Дизайнеры</MenuHeader>
+  <MenuItem>Галя</MenuItem>
+  <MenuItem>Гриша</MenuItem>
+  <MenuItem>Гена</MenuItem>
+  <MenuHeader>Продакты</MenuHeader>
+  <MenuItem>Валя</MenuItem>
+  <MenuItem>Аля</MenuItem>
+  <MenuItem>Артём</MenuItem>
+</DropdownMenu>
+```

package/components/MenuItem/MenuItem/MenuItem.js

@@ -9,7 +9,10 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { styles } from "../MenuItem.styles";
 /**
- * Элемент меню.
+ *
+ * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 
 export var MenuItem = /*#__PURE__*/function (_React$Component) {