@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bc0c053ae7

package/components/Kebab/Kebab/Kebab.js

@@ -5,6 +5,8 @@ var _class, _class2, _temp;
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isElement } from 'react-is';
+import { isKonturIcon } from "../../../lib/utils";
 import { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from "../../../lib/events/keyboard/identifiers";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { keyListener } from "../../../lib/events/keyListener";
@@ -16,7 +18,13 @@ import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { styles } from "../Kebab.styles";
+import { KebabIcon } from "../KebabIcon";
+export var KebabDataTids = {
+  caption: 'Kebab__caption'
+};
 export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Kebab, _React$Component);
 
@@ -28,8 +36,8 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Kebab.defaultProps);
     _this.state = {
-      opened: false,
       focusedByTab: false,
       anchor: null
     };
@@ -40,9 +48,9 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     };
 
     _this.renderCaption = function (captionProps) {
-      var _cx;
-
-      var disabled = _this.props.disabled;
+      var _this$getProps = _this.getProps(),
+          disabled = _this$getProps.disabled,
+          size = _this$getProps.size;
 
       var handleCaptionKeyDown = function handleCaptionKeyDown(event) {
         if (!disabled) {
@@ -57,13 +65,16 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       };
 
       return /*#__PURE__*/React.createElement("span", {
+        role: "button",
+        "data-tid": KebabDataTids.caption,
         tabIndex: disabled ? -1 : 0,
         onClick: handleCaptionClick,
         onKeyDown: handleCaptionKeyDown,
         onFocus: _this.handleFocus,
         onBlur: _this.handleBlur,
-        className: cx((_cx = {}, _cx[styles.kebab(_this.theme)] = true, _cx[styles.opened(_this.theme)] = captionProps.opened, _cx[styles.disabled()] = disabled, _cx[styles.focused(_this.theme)] = _this.state.focusedByTab, _cx))
-      }, _this.renderIcon());
+        className: cx(styles.kebab(_this.theme), size === 'small' && styles.kebabSmall(_this.theme), size === 'medium' && styles.kebabMedium(_this.theme), size === 'large' && styles.kebabLarge(_this.theme), isTheme2022(_this.theme) && styles.kebab2022(), captionProps.opened && styles.opened(_this.theme), disabled && styles.disabled(), _this.state.focusedByTab && styles.focused(_this.theme)),
+        "aria-describedby": _this.props['aria-describedby']
+      }, isTheme2022(_this.theme) ? _this.renderIcon2022() : _this.renderIcon());
     };
 
     _this.handleCaptionKeyDown = function (e, openMenu) {
@@ -75,18 +86,7 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
 
     _this.handleChangeMenuState = function (isOpened, restoreFocus) {
       _this.setState({
-        opened: isOpened,
         focusedByTab: !isOpened && restoreFocus
-      }, function () {
-        if (_this.props.disabled) {
-          return;
-        }
-
-        if (_this.state.opened) {
-          _this.props.onOpen();
-        } else {
-          _this.props.onClose();
-        }
       });
     };
 
@@ -135,34 +135,73 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
         value: ThemeFactory.create({
           popupPinOffset: theme.kebabPinOffset,
           popupMargin: theme.kebabMargin,
-          popupPinSize: theme.kebabPinSize
+          popupPinSize: theme.kebabPinSize,
+          menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY
         }, theme)
       }, _this2.renderMain());
     });
   };
 
   _proto.renderMain = function renderMain() {
-    var _this$props = this.props,
-        disabled = _this$props.disabled,
-        positions = _this$props.positions;
+    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.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement(PopupMenu, {
-      popupHasPin: true,
+      popupHasPin: !isTheme2022(this.theme),
+      preventIconsOffset: this.props.preventIconsOffset,
       positions: positions,
       onChangeMenuState: this.handleChangeMenuState,
       caption: this.renderCaption,
-      disableAnimations: this.props.disableAnimations,
-      menuMaxHeight: this.props.menuMaxHeight
+      disableAnimations: disableAnimations,
+      menuMaxHeight: this.props.menuMaxHeight,
+      onOpen: onOpen,
+      onClose: onClose,
+      popupMenuId: this.props.popupMenuId,
+      "aria-label": this.props['aria-label']
     }, !disabled && this.props.children));
   };
 
   _proto.renderIcon = function renderIcon() {
-    var _cx2;
+    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.createElement(MenuKebabIcon, null) : _this$getProps3$icon;
 
     return /*#__PURE__*/React.createElement("div", {
-      className: cx((_cx2 = {}, _cx2[styles.icon()] = true, _cx2[styles.iconsmall()] = this.props.size === 'small', _cx2[styles.iconmedium()] = this.props.size === 'medium', _cx2[styles.iconlarge()] = this.props.size === 'large', _cx2))
-    }, this.props.icon);
+      className: cx((_cx = {}, _cx[styles.icon(this.theme)] = true, _cx[styles.iconsmall(this.theme)] = size === 'small', _cx[styles.iconmedium(this.theme)] = size === 'medium', _cx[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.createElement(KebabIcon, null) : _this$getProps4$icon;
+
+    if (isElement(icon) && 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.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;
@@ -175,8 +214,7 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   },
   positions: ['bottom left', 'bottom right', 'top left', 'top right'],
   size: 'small',
-  disableAnimations: isTestEnv,
-  icon: /*#__PURE__*/React.createElement(MenuKebabIcon, null)
+  disableAnimations: isTestEnv
 }, _temp)) || _class;
 Kebab.propTypes = {
   children: PropTypes.node,

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","rootNode","styles","Kebab","state","opened","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","kebab","theme","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","setRootNode","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';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\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\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 = {\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  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, positions } = this.props;\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={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"]}
+{"version":3,"sources":["Kebab.tsx"],"names":["React","PropTypes","isElement","isKonturIcon","isKeyArrowVertical","isKeyEnter","isKeySpace","someKeys","LayoutEvents","keyListener","PopupMenu","ThemeContext","MenuKebabIcon","isTestEnv","ThemeFactory","CommonWrapper","cx","rootNode","createPropsGetter","isTheme2022","styles","KebabIcon","KebabDataTids","caption","Kebab","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","size","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","kebab","theme","kebabSmall","kebabMedium","kebabLarge","kebab2022","opened","focused","props","renderIcon2022","renderIcon","e","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","requestAnimationFrame","isTabPressed","componentDidMount","addListener","componentWillUnmount","render","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","menuScrollContainerContentWrapperPaddingY","menuLegacyPaddingY","renderMain","positions","disableAnimations","onOpen","onClose","setRootNode","preventIconsOffset","menuMaxHeight","popupMenuId","children","icon","iconsmall","iconmedium","iconlarge","sizes","small","parseInt","kebabIconSizeSmall","medium","kebabIconSizeMedium","large","kebabIconSizeLarge","cloneElement","color","kebabIconColor","Component","__KONTUR_REACT_UI__","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 { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './Kebab.styles';\nimport { KebabIcon } from './KebabIcon';\n\nexport interface KebabProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n    CommonProps {\n  disabled?: boolean;\n  size?: SizeProp;\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                  menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY,\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={!isTheme2022(this.theme)}\n          preventIconsOffset={this.props.preventIconsOffset}\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          aria-label={this.props['aria-label']}\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        role=\"button\"\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<SizeProp, 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/components/Kebab/Kebab.d.ts

@@ -1,20 +1,12 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
+import { PopupMenuProps } from '../../internal/PopupMenu';
 import { Nullable } from '../../typings/utility-types';
-import { PopupPosition } from '../../internal/Popup';
+import { PopupPositionsType } from '../../internal/Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface KebabProps extends CommonProps {
+import { SizeProp } from '../../lib/types/props';
+export interface KebabProps extends Pick<AriaAttributes, 'aria-label'>, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>, CommonProps {
     disabled?: boolean;
-    /**
-     * Функция вызываемая при закрытии выпадашки
-     * @default () => undefined
-     */
-    onClose: () => void;
-    /**
-     * Функция вызываемая при открытии выпадашки
-     * @default () => undefined
-     */
-    onOpen: () => void;
-    size: 'small' | 'medium' | 'large';
+    size?: SizeProp;
     /**
      * Список позиций доступных для расположения выпадашки.
      *
@@ -23,38 +15,35 @@ export interface KebabProps extends CommonProps {
      * **Возможные значения**: `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[];
+    positions?: PopupPositionsType[];
     menuMaxHeight?: number | string;
     /**
      * Не показывать анимацию
      */
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
     /**
      * Кастомная иконка
      */
     icon?: React.ReactNode;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
+export declare const KebabDataTids: {
+    readonly caption: "Kebab__caption";
+};
 export interface KebabState {
     anchor: Nullable<HTMLElement>;
     focusedByTab: boolean;
-    opened: boolean;
 }
+declare type DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations'>>;
 export declare class Kebab extends React.Component<KebabProps, KebabState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {};
-    static defaultProps: {
-        onOpen: () => undefined;
-        onClose: () => undefined;
-        positions: string[];
-        size: string;
-        disableAnimations: boolean;
-        icon: JSX.Element;
-    };
-    state: {
-        opened: boolean;
-        focusedByTab: boolean;
-        anchor: null;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: KebabState;
     private theme;
     private setRootNode;
     private listener;
@@ -68,4 +57,6 @@ export declare class Kebab extends React.Component<KebabProps, KebabState> {
     private handleFocus;
     private handleBlur;
     private renderIcon;
+    private renderIcon2022;
 }
+export {};

package/components/Kebab/Kebab.md

@@ -160,6 +160,34 @@ let Card = ({ title }) => (
 <Card title="С кастомным действием" />
 ```
 
+С иконками и включенным по-умолчанию автоматическим выравниванием текста.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, Kebab } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<Kebab>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
+  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</Kebab>;
+```
+
+С иконками и отключенным автоматическим выравниванием текста.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, Kebab } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<Kebab preventIconsOffset>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
+  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</Kebab>
+```
+
 Отключенное кебаб-меню.
 
 ```jsx harmony

package/components/Kebab/Kebab.styles/Kebab.styles.js

@@ -1,34 +1,46 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   kebab: function kebab(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      text-align: center;\n      border: ", ";\n      box-sizing: border-box;\n      border-radius: ", ";\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      width: 26px;\n      height: 26px;\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    "])), t.kebabBorder, t.kebabBorderRadius, t.kebabBackground, t.kebabBackgroundHover);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      text-align: center;\n      border: ", ";\n      box-sizing: border-box;\n      border-radius: ", ";\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.kebabBorder, t.kebabBorderRadius, t.kebabBackground, t.kebabBackgroundHover, t.kebabBackgroundActive);
+  },
+  kebabSmall: function kebabSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n    "])), t.kebabSizeSmall, t.kebabSizeSmall);
+  },
+  kebabMedium: function kebabMedium(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n    "])), t.kebabSizeMedium, t.kebabSizeMedium);
+  },
+  kebabLarge: function kebabLarge(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      height: ", ";\n    "])), t.kebabSizeLarge, t.kebabSizeLarge);
+  },
+  kebab2022: function kebab2022() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    "])));
   },
   focused: function focused(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-color: ", ";\n    "])), t.kebabBackgroundHover, t.borderColorFocus);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-color: ", ";\n    "])), t.kebabBackgroundHover, t.borderColorFocus);
   },
   opened: function opened(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override kebab:hover style\n      cursor: default;\n    "])), t.kebabBackgroundHover);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      background: ", " !important; // override kebab:hover style\n      cursor: default;\n    "])), t.kebabBackgroundActive);
   },
   disabled: function disabled() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    "])));
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    "])));
   },
-  icon: function icon() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: #757575;\n      line-height: 1;\n    "])));
+  icon: function icon(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      line-height: 1;\n    "])), t.kebabIconColor);
   },
-  iconsmall: function iconsmall() {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-top: 2px;\n      font-size: 14px;\n    "])));
+  iconsmall: function iconsmall(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      margin-top: 2px;\n      font-size: ", ";\n    "])), t.kebabIconSizeSmall);
   },
-  iconmedium: function iconmedium() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: 18px;\n    "])));
+  iconmedium: function iconmedium(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: ", ";\n    "])), t.kebabIconSizeMedium);
   },
-  iconlarge: function iconlarge() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: 20px;\n    "])));
+  iconlarge: function iconlarge(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: ", ";\n    "])), t.kebabIconSizeLarge);
   },
   menu: function menu(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      border-radius: ", ";\n    "])), t.popupBorderRadius);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      border-radius: ", ";\n    "])), t.popupBorderRadius);
   }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.styles.ts"],"names":["css","memoizeStyle","styles","kebab","t","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","focused","borderColorFocus","opened","disabled","icon","iconsmall","iconmedium","iconlarge","menu","popupBorderRadius"],"mappings":"oQAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,KADiC,iBAC3BC,CAD2B,EACjB;AACd,WAAOJ,GAAP;;;AAGYI,IAAAA,CAAC,CAACC,WAHd;;AAKmBD,IAAAA,CAAC,CAACE,iBALrB;;;;;;;AAYgBF,IAAAA,CAAC,CAACG,eAZlB;;;AAekBH,IAAAA,CAAC,CAACI,oBAfpB;;;AAkBD,GApBgC;;AAsBjCC,EAAAA,OAtBiC,mBAsBzBL,CAtByB,EAsBf;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACI,oBADlB;AAEkBJ,IAAAA,CAAC,CAACM,gBAFpB;;AAID,GA3BgC;;AA6BjCC,EAAAA,MA7BiC,kBA6B1BP,CA7B0B,EA6BhB;AACf,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACI,oBADlB;;;AAID,GAlCgC;;AAoCjCI,EAAAA,QApCiC,sBAoCtB;AACT,WAAOZ,GAAP;;;;;;;AAOD,GA5CgC;;AA8CjCa,EAAAA,IA9CiC,kBA8C1B;AACL,WAAOb,GAAP;;;;AAID,GAnDgC;;AAqDjCc,EAAAA,SArDiC,uBAqDrB;AACV,WAAOd,GAAP;;;;AAID,GA1DgC;;AA4DjCe,EAAAA,UA5DiC,wBA4DpB;AACX,WAAOf,GAAP;;;;;AAKD,GAlEgC;;AAoEjCgB,EAAAA,SApEiC,uBAoErB;AACV,WAAOhB,GAAP;;;;;AAKD,GA1EgC;;AA4EjCiB,EAAAA,IA5EiC,gBA4E5Bb,CA5E4B,EA4ElB;AACb,WAAOJ,GAAP;;AAEmBI,IAAAA,CAAC,CAACc,iBAFrB;;AAID,GAjFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  kebab(t: Theme) {\n    return css`\n      display: inline-block;\n      text-align: center;\n      border: ${t.kebabBorder};\n      box-sizing: border-box;\n      border-radius: ${t.kebabBorderRadius};\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      width: 26px;\n      height: 26px;\n      background: ${t.kebabBackground};\n\n      &:hover {\n        background: ${t.kebabBackgroundHover};\n      }\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundHover};\n      border-color: ${t.borderColorFocus};\n    `;\n  },\n\n  opened(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundHover} !important; // override kebab:hover style\n      cursor: default;\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    `;\n  },\n\n  icon() {\n    return css`\n      color: #757575;\n      line-height: 1;\n    `;\n  },\n\n  iconsmall() {\n    return css`\n      margin-top: 2px;\n      font-size: 14px;\n    `;\n  },\n\n  iconmedium() {\n    return css`\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: 18px;\n    `;\n  },\n\n  iconlarge() {\n    return css`\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: 20px;\n    `;\n  },\n\n  menu(t: Theme) {\n    return css`\n      overflow: hidden;\n      border-radius: ${t.popupBorderRadius};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Kebab.styles.ts"],"names":["css","memoizeStyle","styles","kebab","t","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","kebabBackgroundActive","kebabSmall","kebabSizeSmall","kebabMedium","kebabSizeMedium","kebabLarge","kebabSizeLarge","kebab2022","focused","borderColorFocus","opened","disabled","icon","kebabIconColor","iconsmall","kebabIconSizeSmall","iconmedium","kebabIconSizeMedium","iconlarge","kebabIconSizeLarge","menu","popupBorderRadius"],"mappings":"gVAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,KADiC,iBAC3BC,CAD2B,EACjB;AACd,WAAOJ,GAAP;;;AAGYI,IAAAA,CAAC,CAACC,WAHd;;AAKmBD,IAAAA,CAAC,CAACE,iBALrB;;;;;AAUgBF,IAAAA,CAAC,CAACG,eAVlB;;;AAakBH,IAAAA,CAAC,CAACI,oBAbpB;;;;AAiBkBJ,IAAAA,CAAC,CAACK,qBAjBpB;;;AAoBD,GAtBgC;;AAwBjCC,EAAAA,UAxBiC,sBAwBtBN,CAxBsB,EAwBZ;AACnB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACO,cADb;AAEYP,IAAAA,CAAC,CAACO,cAFd;;AAID,GA7BgC;;AA+BjCC,EAAAA,WA/BiC,uBA+BrBR,CA/BqB,EA+BX;AACpB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACS,eADb;AAEYT,IAAAA,CAAC,CAACS,eAFd;;AAID,GApCgC;;AAsCjCC,EAAAA,UAtCiC,sBAsCtBV,CAtCsB,EAsCZ;AACnB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACW,cADb;AAEYX,IAAAA,CAAC,CAACW,cAFd;;AAID,GA3CgC;;AA6CjCC,EAAAA,SA7CiC,uBA6CrB;AACV,WAAOhB,GAAP;;;;;AAKD,GAnDgC;;AAqDjCiB,EAAAA,OArDiC,mBAqDzBb,CArDyB,EAqDf;AAChB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACI,oBADlB;AAEkBJ,IAAAA,CAAC,CAACc,gBAFpB;;AAID,GA1DgC;;AA4DjCC,EAAAA,MA5DiC,kBA4D1Bf,CA5D0B,EA4DhB;AACf,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACK,qBADlB;;;AAID,GAjEgC;;AAmEjCW,EAAAA,QAnEiC,sBAmEtB;AACT,WAAOpB,GAAP;;;;;;;AAOD,GA3EgC;;AA6EjCqB,EAAAA,IA7EiC,gBA6E5BjB,CA7E4B,EA6ElB;AACb,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACkB,cADb;;;AAID,GAlFgC;;AAoFjCC,EAAAA,SApFiC,qBAoFvBnB,CApFuB,EAoFb;AAClB,WAAOJ,GAAP;;AAEeI,IAAAA,CAAC,CAACoB,kBAFjB;;AAID,GAzFgC;;AA2FjCC,EAAAA,UA3FiC,sBA2FtBrB,CA3FsB,EA2FZ;AACnB,WAAOJ,GAAP;;;AAGeI,IAAAA,CAAC,CAACsB,mBAHjB;;AAKD,GAjGgC;;AAmGjCC,EAAAA,SAnGiC,qBAmGvBvB,CAnGuB,EAmGb;AAClB,WAAOJ,GAAP;;;AAGeI,IAAAA,CAAC,CAACwB,kBAHjB;;AAKD,GAzGgC;;AA2GjCC,EAAAA,IA3GiC,gBA2G5BzB,CA3G4B,EA2GlB;AACb,WAAOJ,GAAP;;AAEmBI,IAAAA,CAAC,CAAC0B,iBAFrB;;AAID,GAhHgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  kebab(t: Theme) {\n    return css`\n      display: inline-block;\n      text-align: center;\n      border: ${t.kebabBorder};\n      box-sizing: border-box;\n      border-radius: ${t.kebabBorderRadius};\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      background: ${t.kebabBackground};\n\n      &:hover {\n        background: ${t.kebabBackgroundHover};\n      }\n\n      &:active {\n        background: ${t.kebabBackgroundActive};\n      }\n    `;\n  },\n\n  kebabSmall(t: Theme) {\n    return css`\n      width: ${t.kebabSizeSmall};\n      height: ${t.kebabSizeSmall};\n    `;\n  },\n\n  kebabMedium(t: Theme) {\n    return css`\n      width: ${t.kebabSizeMedium};\n      height: ${t.kebabSizeMedium};\n    `;\n  },\n\n  kebabLarge(t: Theme) {\n    return css`\n      width: ${t.kebabSizeLarge};\n      height: ${t.kebabSizeLarge};\n    `;\n  },\n\n  kebab2022() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundHover};\n      border-color: ${t.borderColorFocus};\n    `;\n  },\n\n  opened(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundActive} !important; // override kebab:hover style\n      cursor: default;\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      color: ${t.kebabIconColor};\n      line-height: 1;\n    `;\n  },\n\n  iconsmall(t: Theme) {\n    return css`\n      margin-top: 2px;\n      font-size: ${t.kebabIconSizeSmall};\n    `;\n  },\n\n  iconmedium(t: Theme) {\n    return css`\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: ${t.kebabIconSizeMedium};\n    `;\n  },\n\n  iconlarge(t: Theme) {\n    return css`\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: ${t.kebabIconSizeLarge};\n    `;\n  },\n\n  menu(t: Theme) {\n    return css`\n      overflow: hidden;\n      border-radius: ${t.popupBorderRadius};\n    `;\n  },\n});\n"]}

package/components/Kebab/Kebab.styles.d.ts

@@ -1,12 +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(): string;
-    iconsmall(): string;
-    iconmedium(): string;
-    iconlarge(): string;
+    icon(t: Theme): string;
+    iconsmall(t: Theme): string;
+    iconmedium(t: Theme): string;
+    iconlarge(t: Theme): string;
     menu(t: Theme): string;
 };

package/components/Kebab/KebabIcon/KebabIcon.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+import { UiMenuDotsThreeVIcon16Light } from "../../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon16Light";
+import { UiMenuDotsThreeVIcon20Regular } from "../../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon20Regular";
+import { UiMenuDotsThreeVIcon24Regular } from "../../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon24Regular";
+export var KebabIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(UiMenuDotsThreeVIcon16Light, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(UiMenuDotsThreeVIcon20Regular, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(UiMenuDotsThreeVIcon24Regular, null);
+  }
+}, 'KebabIcon');

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

@@ -0,0 +1 @@
+{"version":3,"sources":["KebabIcon.tsx"],"names":["React","iconSizer","UiMenuDotsThreeVIcon16Light","UiMenuDotsThreeVIcon20Regular","UiMenuDotsThreeVIcon24Regular","KebabIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,SAAT,QAA0B,oCAA1B;AACA,SAASC,2BAAT,QAA4C,2EAA5C;AACA,SAASC,6BAAT,QAA8C,6EAA9C;AACA,SAASC,6BAAT,QAA8C,6EAA9C;;AAEA,OAAO,IAAMC,SAAS,GAAGJ,SAAS;AAChC;AACEK,EAAAA,KAAK,EAAE,sCAAM,oBAAC,2BAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,6BAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,6BAAD,OAAN,EAHT,EADgC;;AAMhC,WANgC,CAA3B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\nimport { UiMenuDotsThreeVIcon16Light } from '../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon16Light';\nimport { UiMenuDotsThreeVIcon20Regular } from '../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon20Regular';\nimport { UiMenuDotsThreeVIcon24Regular } from '../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon24Regular';\n\nexport const KebabIcon = iconSizer(\n  {\n    small: () => <UiMenuDotsThreeVIcon16Light />,\n    medium: () => <UiMenuDotsThreeVIcon20Regular />,\n    large: () => <UiMenuDotsThreeVIcon24Regular />,\n  },\n  'KebabIcon',\n);\n"]}

package/components/Kebab/KebabIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Kebab/KebabIcon.js",
+  "module": "KebabIcon",
+  "types": "../KebabIcon.d.ts",
+  "sideEffects": false
+}

package/components/Kebab/KebabIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const KebabIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;