@skbkontur/react-ui 0.0.0-edbe8cfc5c → 0.0.0-ee57da3e1e

package/cjs/components/Kebab/Kebab.js

@@ -0,0 +1,277 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.KebabDataTids = exports.Kebab = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIs = require("react-is");
+
+var _utils = require("../../lib/utils");
+var _identifiers = require("../../lib/events/keyboard/identifiers");
+var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
+var _keyListener = require("../../lib/events/keyListener");
+var _PopupMenu = require("../../internal/PopupMenu");
+
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _px = require("../../internal/icons/16px");
+var _currentEnvironment = require("../../lib/currentEnvironment");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+
+
+var _Kebab = require("./Kebab.styles");
+var _KebabIcon = require("./KebabIcon");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var KebabDataTids = {
+  caption: 'Kebab__caption' };exports.KebabDataTids = KebabDataTids;var
+
+
+
+
+
+
+
+
+
+
+Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Kebab, _React$Component);function Kebab() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Kebab.defaultProps);_this.
+
+    state = {
+      focusedByTab: false,
+      anchor: null };_this.
+
+
+
+
+
+    listener =
+
+    {
+      remove: function remove() {return undefined;} };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderCaption = function (captionProps) {
+      var _this$getProps = _this.getProps(),disabled = _this$getProps.disabled,size = _this$getProps.size;
+      var handleCaptionKeyDown = function handleCaptionKeyDown(event) {
+        if (!disabled) {
+          _this.handleCaptionKeyDown(event, captionProps.openMenu);
+        }
+      };
+
+      var handleCaptionClick = function handleCaptionClick() {
+        if (!disabled) {
+          captionProps.toggleMenu();
+        }
+      };
+
+      return /*#__PURE__*/(
+        _react.default.createElement("span", {
+          "data-tid": KebabDataTids.caption,
+          tabIndex: disabled ? -1 : 0,
+          onClick: handleCaptionClick,
+          onKeyDown: handleCaptionKeyDown,
+          onFocus: _this.handleFocus,
+          onBlur: _this.handleBlur,
+          className: (0, _Emotion.cx)(
+          _Kebab.styles.kebab(_this.theme),
+          size === 'small' && _Kebab.styles.kebabSmall(_this.theme),
+          size === 'medium' && _Kebab.styles.kebabMedium(_this.theme),
+          size === 'large' && _Kebab.styles.kebabLarge(_this.theme),
+          (0, _ThemeHelpers.isTheme2022)(_this.theme) && _Kebab.styles.kebab2022(),
+          captionProps.opened && _Kebab.styles.opened(_this.theme),
+          disabled && _Kebab.styles.disabled(),
+          _this.state.focusedByTab && _Kebab.styles.focused(_this.theme)),
+
+          "aria-describedby": _this.props['aria-describedby'] },
+
+        (0, _ThemeHelpers.isTheme2022)(_this.theme) ? _this.renderIcon2022() : _this.renderIcon()));
+
+
+    };_this.
+
+    handleCaptionKeyDown = function (
+    e,
+    openMenu)
+    {
+      if ((0, _identifiers.someKeys)(_identifiers.isKeyEnter, _identifiers.isKeySpace, _identifiers.isKeyArrowVertical)(e)) {
+        e.preventDefault();
+        openMenu(true);
+      }
+    };_this.
+
+    handleChangeMenuState = function (isOpened, restoreFocus) {
+      _this.setState({
+        focusedByTab: !isOpened && restoreFocus });
+
+    };_this.
+
+    handleFocus = function () {
+      if (!_this.props.disabled) {
+        // focus event fires before keyDown eventlistener
+        // so we should check tabPressed in async way
+        requestAnimationFrame(function () {
+          if (_keyListener.keyListener.isTabPressed) {
+            _this.setState({ focusedByTab: true });
+          }
+        });
+      }
+    };_this.
+
+    handleBlur = function () {
+      _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 disabled = this.props.disabled;var _this$getProps2 = this.getProps(),positions = _this$getProps2.positions,disableAnimations = _this$getProps2.disableAnimations,onOpen = _this$getProps2.onOpen,onClose = _this$getProps2.onClose;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: true, positions: positions, onChangeMenuState: this.handleChangeMenuState, caption: this.renderCaption, disableAnimations: disableAnimations, menuMaxHeight: this.props.menuMaxHeight, onOpen: onOpen, onClose: onClose, popupMenuId: this.props.popupMenuId }, !disabled && this.props.children));};_proto.
+
+  renderIcon = function renderIcon() {var _cx;
+    var _this$getProps3 = this.getProps(),size = _this$getProps3.size,_this$getProps3$icon = _this$getProps3.icon,icon = _this$getProps3$icon === void 0 ? /*#__PURE__*/_react.default.createElement(_px.MenuKebabIcon, null) : _this$getProps3$icon;
+    return /*#__PURE__*/(
+      _react.default.createElement("div", {
+        className: (0, _Emotion.cx)((_cx = {}, _cx[
+        _Kebab.styles.icon(this.theme)] = true, _cx[
+        _Kebab.styles.iconsmall(this.theme)] = size === 'small', _cx[
+        _Kebab.styles.iconmedium(this.theme)] = size === 'medium', _cx[
+        _Kebab.styles.iconlarge(this.theme)] = size === 'large', _cx)) },
+
+
+      icon));
+
+
+  };_proto.
+
+  renderIcon2022 = function renderIcon2022() {
+    var _this$getProps4 = this.getProps(),size = _this$getProps4.size,_this$getProps4$icon = _this$getProps4.icon,icon = _this$getProps4$icon === void 0 ? /*#__PURE__*/_react.default.createElement(_KebabIcon.KebabIcon, null) : _this$getProps4$icon;
+
+    if ((0, _reactIs.isElement)(icon) && (0, _utils.isKonturIcon)(icon)) {var _icon$props$size, _icon$props$color;
+      var sizes = {
+        small: parseInt(this.theme.kebabIconSizeSmall),
+        medium: parseInt(this.theme.kebabIconSizeMedium),
+        large: parseInt(this.theme.kebabIconSizeLarge) };
+
+
+      return /*#__PURE__*/_react.default.cloneElement(icon, {
+        size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[size],
+        color: (_icon$props$color = icon.props.color) != null ? _icon$props$color : this.theme.kebabIconColor });
+
+    }
+
+    return icon;
+  };return Kebab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Kebab', _class2.propTypes = {}, _class2.defaultProps = { onOpen: function onOpen() {return undefined;}, onClose: function onClose() {return undefined;}, positions: ['bottom left', 'bottom right', 'top left', 'top right'], size: 'small', disableAnimations: _currentEnvironment.isTestEnv }, _temp)) || _class;exports.Kebab = Kebab;
+
+
+Kebab.propTypes = {
+  children: _propTypes.default.node,
+  disabled: _propTypes.default.bool,
+  menuMaxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+
+  /**
+   * Размер кебаба small 14px | large 20px
+   */
+  size: _propTypes.default.string,
+
+  /**
+   * Коллбек, вызывающийся перед закрытием кебаба
+   */
+  onClose: _propTypes.default.func,
+
+  /**
+   * Коллбек, вызывающийся перед открытием кебаба
+   */
+  onOpen: _propTypes.default.func };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Kebab.tsx"],"names":["KebabDataTids","caption","Kebab","rootNode","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","size","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","theme","kebabSmall","kebabMedium","kebabLarge","kebab2022","opened","focused","props","renderIcon2022","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","onOpen","onClose","setRootNode","menuMaxHeight","popupMenuId","children","icon","iconsmall","iconmedium","iconlarge","sizes","small","parseInt","kebabIconSizeSmall","medium","kebabIconSizeMedium","large","kebabIconSizeLarge","React","cloneElement","color","kebabIconColor","Component","__KONTUR_REACT_UI__","propTypes","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { isElement } from 'react-is';\n\nimport { isKonturIcon } from '../../lib/utils';\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, PopupMenuProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPositionsType } 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';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ButtonSize } from '../Button';\n\nimport { styles } from './Kebab.styles';\nimport { KebabIcon } from './KebabIcon';\n\nexport interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId'> {\n  disabled?: boolean;\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?: PopupPositionsType[];\n  menuMaxHeight?: number | string;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n  /**\n   * Кастомная иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const KebabDataTids = {\n  caption: 'Kebab__caption',\n} as const;\n\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations'>>;\n\n@rootNode\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: DefaultProps = {\n    onOpen: () => undefined,\n    onClose: () => undefined,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n    size: 'small',\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(Kebab.defaultProps);\n\n  public state: KebabState = {\n    focusedByTab: false,\n    anchor: null,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\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 } = this.props;\n    const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          popupHasPin\n          positions={positions}\n          onChangeMenuState={this.handleChangeMenuState}\n          caption={this.renderCaption}\n          disableAnimations={disableAnimations}\n          menuMaxHeight={this.props.menuMaxHeight}\n          onOpen={onOpen}\n          onClose={onClose}\n          popupMenuId={this.props.popupMenuId}\n        >\n          {!disabled && this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled, size } = this.getProps();\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        data-tid={KebabDataTids.caption}\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),\n          size === 'small' && styles.kebabSmall(this.theme),\n          size === 'medium' && styles.kebabMedium(this.theme),\n          size === 'large' && styles.kebabLarge(this.theme),\n          isTheme2022(this.theme) && styles.kebab2022(),\n          captionProps.opened && styles.opened(this.theme),\n          disabled && styles.disabled(),\n          this.state.focusedByTab && styles.focused(this.theme),\n        )}\n        aria-describedby={this.props['aria-describedby']}\n      >\n        {isTheme2022(this.theme) ? this.renderIcon2022() : 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      focusedByTab: !isOpened && restoreFocus,\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    const { size, icon = <MenuKebabIcon /> } = this.getProps();\n    return (\n      <div\n        className={cx({\n          [styles.icon(this.theme)]: true,\n          [styles.iconsmall(this.theme)]: size === 'small',\n          [styles.iconmedium(this.theme)]: size === 'medium',\n          [styles.iconlarge(this.theme)]: size === 'large',\n        })}\n      >\n        {icon}\n      </div>\n    );\n  }\n\n  private renderIcon2022() {\n    const { size, icon = <KebabIcon /> } = this.getProps();\n\n    if (isElement(icon) && isKonturIcon(icon)) {\n      const sizes: Record<ButtonSize, number> = {\n        small: parseInt(this.theme.kebabIconSizeSmall),\n        medium: parseInt(this.theme.kebabIconSizeMedium),\n        large: parseInt(this.theme.kebabIconSizeLarge),\n      };\n\n      return React.cloneElement(icon, {\n        size: icon.props.size ?? sizes[size],\n        color: icon.props.color ?? this.theme.kebabIconColor,\n      });\n    }\n\n    return icon;\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/cjs/components/Kebab/Kebab.md

@@ -0,0 +1,278 @@
+Базовый пример кебаб-меню.
+
+```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',
+  border: '1px solid #dfdede',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0 20px',
+  width: 250,
+};
+
+let Card = ({ name, post }) => (
+  <div style={style}>
+    <div>
+      <h3>{name}</h3>
+      <p style={{ color: 'gray' }}>{post}</p>
+    </div>
+
+    <Kebab size="large">
+      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
+        Редактировать
+      </MenuItem>
+      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
+        Удалить
+      </MenuItem>
+    </Kebab>
+  </div>
+);
+
+<Gapped gap={-1} wrap>
+  <Gapped gap={-1}>
+    <Card name="Баранова Анастасия" post="SEO GazPro" />
+    <Card name="Слуцкий Антон" post="Junior Front-Back Developer" />
+  </Gapped>
+  <Gapped gap={-1}>
+    <Card name="Иванов Иван" post="Head Ivan Co" />
+    <Card name="Сашка Егоров" post="KungFu Master" />
+  </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',
+  border: '1px solid #dfdede',
+  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',
+  border: '1px solid #dfdede',
+  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',
+  border: '1px solid #dfdede',
+  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',
+  border: '1px solid #dfdede',
+  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',
+  border: '1px solid #dfdede',
+  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',
+  border: '1px solid #dfdede',
+  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/cjs/components/Kebab/Kebab.styles.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    kebab(t: Theme): string;
+    kebabSmall(t: Theme): string;
+    kebabMedium(t: Theme): string;
+    kebabLarge(t: Theme): string;
+    kebab2022(): string;
+    focused(t: Theme): string;
+    opened(t: Theme): string;
+    disabled(): string;
+    icon(t: Theme): string;
+    iconsmall(t: Theme): string;
+    iconmedium(t: Theme): string;
+    iconlarge(t: Theme): string;
+    menu(t: Theme): string;
+};