@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/cjs/components/Kebab/Kebab.d.ts

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import { PopupMenuProps } from '../../internal/PopupMenu';
 import { Nullable } from '../../typings/utility-types';
 import { PopupPositionsType } from '../../internal/Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
+import { SizeProp } from '../../lib/types/props';
+export interface KebabProps extends Pick<AriaAttributes, 'aria-label'>, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>, CommonProps {
     disabled?: boolean;
-    size: 'small' | 'medium' | 'large';
+    size?: SizeProp;
     /**
      * Список позиций доступных для расположения выпадашки.
      *
@@ -14,37 +15,38 @@ export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' |
      * **Возможные значения**: `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: PopupPositionsType[];
+    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;
 }
+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 displayName: string;
     static propTypes: {};
-    static defaultProps: {
-        onOpen: () => undefined;
-        onClose: () => undefined;
-        positions: string[];
-        size: string;
-        disableAnimations: boolean;
-        icon: JSX.Element;
-    };
-    state: {
-        focusedByTab: boolean;
-        anchor: null;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: KebabState;
     private theme;
+    private emotion;
     private setRootNode;
     private listener;
     componentDidMount(): void;
@@ -57,4 +59,6 @@ export declare class Kebab extends React.Component<KebabProps, KebabState> {
     private handleFocus;
     private handleBlur;
     private renderIcon;
+    private renderIcon2022;
 }
+export {};

package/cjs/components/Kebab/Kebab.js

@@ -1,13 +1,16 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;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"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;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 _globalObject = require("@skbkontur/global-object");
 
+
+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");
@@ -15,8 +18,21 @@ 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 _featureFlagsContext = require("../../lib/featureFlagsContext");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _Kebab = require("./Kebab.styles");
+var _KebabIcon = require("./KebabIcon");var _class, _class2, _temp;
+
+
+
+
+
+
 
-var _Kebab = require("./Kebab.styles");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
 
 
 
@@ -37,6 +53,12 @@ var _Kebab = require("./Kebab.styles");var _class, _class2, _temp;function _getR
 
 
 
+
+
+
+
+var KebabDataTids = {
+  caption: 'Kebab__caption' };exports.KebabDataTids = KebabDataTids;var
 
 
 
@@ -61,6 +83,8 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(Kebab.defaultProps);_this.
+
     state = {
       focusedByTab: false,
       anchor: null };_this.
@@ -69,6 +93,7 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
     listener =
 
     {
@@ -128,8 +153,27 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
-    renderCaption = function (captionProps) {var _cx;
-      var disabled = _this.props.disabled;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    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);
@@ -141,22 +185,30 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
           captionProps.toggleMenu();
         }
       };
+      var styles = (0, _Kebab.getStyles)(_this.emotion);
 
       return /*#__PURE__*/(
         _react.default.createElement("span", {
+          role: "button",
+          "data-tid": KebabDataTids.caption,
           tabIndex: disabled ? -1 : 0,
           onClick: handleCaptionClick,
           onKeyDown: handleCaptionKeyDown,
           onFocus: _this.handleFocus,
           onBlur: _this.handleBlur,
-          className: (0, _Emotion.cx)((_cx = {}, _cx[
-          _Kebab.styles.kebab(_this.theme)] = true, _cx[
-          _Kebab.styles.opened(_this.theme)] = captionProps.opened, _cx[
-          _Kebab.styles.disabled()] = disabled, _cx[
-          _Kebab.styles.focused(_this.theme)] = _this.state.focusedByTab, _cx)) },
+          className: _this.emotion.cx(
+          styles.kebab(_this.theme),
+          size === 'small' && styles.kebabSmall(_this.theme),
+          size === 'medium' && styles.kebabMedium(_this.theme),
+          size === 'large' && styles.kebabLarge(_this.theme),
+          (0, _ThemeHelpers.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'] },
 
-        _this.renderIcon()));
+        (0, _ThemeHelpers.isTheme2022)(_this.theme) ? _this.renderIcon2022() : _this.renderIcon()));
 
 
     };_this.
@@ -181,7 +233,7 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       if (!_this.props.disabled) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        requestAnimationFrame(function () {
+        _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
           if (_keyListener.keyListener.isTabPressed) {
             _this.setState({ focusedByTab: true });
           }
@@ -193,22 +245,43 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       _this.setState({
         focusedByTab: false });
 
-    };return _this;}var _proto = Kebab.prototype;_proto.componentDidMount = function componentDidMount() {/** addListener'у нужен колбэк в аргумент */this.listener = LayoutEvents.addListener(function () {return undefined;});};_proto.componentWillUnmount = function componentWillUnmount() {this.listener.remove();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$props = this.props,disabled = _this$props.disabled,positions = _this$props.positions;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (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: this.props.disableAnimations, menuMaxHeight: this.props.menuMaxHeight, onOpen: this.props.onOpen, onClose: this.props.onClose }, !disabled && this.props.children));};_proto.
+    };return _this;}var _proto = Kebab.prototype;_proto.componentDidMount = function componentDidMount() {/** addListener'у нужен колбэк в аргумент */this.listener = LayoutEvents.addListener(function () {return undefined;});};_proto.componentWillUnmount = function componentWillUnmount() {this.listener.remove();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeProvider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize, menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY }, theme) }, _this2.renderMain());});});};_proto.renderMain = function renderMain() {var _this3 = this;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(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {var hasPin = !(0, _featureFlagsContext.getFullReactUIFlagsContext)(flags).kebabHintRemovePin || !(0, _ThemeHelpers.isTheme2022)(_this3.theme);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: hasPin, preventIconsOffset: _this3.props.preventIconsOffset, positions: positions, onChangeMenuState: _this3.handleChangeMenuState, caption: _this3.renderCaption, disableAnimations: disableAnimations, menuMaxHeight: _this3.props.menuMaxHeight, onOpen: onOpen, onClose: onClose, popupMenuId: _this3.props.popupMenuId, "aria-label": _this3.props['aria-label'] }, !disabled && _this3.props.children));});};_proto.
 
-  renderIcon = function renderIcon() {var _cx2;
+  renderIcon = function renderIcon() {var _this$emotion$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;
+    var styles = (0, _Kebab.getStyles)(this.emotion);
     return /*#__PURE__*/(
       _react.default.createElement("div", {
-        className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
-        _Kebab.styles.icon()] = true, _cx2[
-        _Kebab.styles.iconsmall()] = this.props.size === 'small', _cx2[
-        _Kebab.styles.iconmedium()] = this.props.size === 'medium', _cx2[
-        _Kebab.styles.iconlarge()] = this.props.size === 'large', _cx2)) },
+        className: this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[
+        styles.icon(this.theme)] = true, _this$emotion$cx[
+        styles.iconsmall(this.theme)] = size === 'small', _this$emotion$cx[
+        styles.iconmedium(this.theme)] = size === 'medium', _this$emotion$cx[
+        styles.iconlarge(this.theme)] = size === 'large', _this$emotion$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) };
 
 
-      this.props.icon));
+      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 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, icon: /*#__PURE__*/_react.default.createElement(_px.MenuKebabIcon, null) }, _temp)) || _class;exports.Kebab = Kebab;
+    return icon;
+  };return Kebab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Kebab', _class2.displayName = '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 = {

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

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.tsx"],"names":["Kebab","rootNode","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","theme","opened","focused","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","setRootNode","disableAnimations","menuMaxHeight","onOpen","onClose","children","icon","iconsmall","size","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps, 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';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {\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\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: 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    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          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\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      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    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":["KebabDataTids","caption","Kebab","rootNode","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","size","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","styles","emotion","handleFocus","handleBlur","cx","kebab","theme","kebabSmall","kebabMedium","kebabLarge","kebab2022","opened","focused","props","renderIcon2022","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","globalObject","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","menuScrollContainerContentWrapperPaddingY","menuLegacyPaddingY","renderMain","positions","disableAnimations","onOpen","onClose","flags","hasPin","kebabHintRemovePin","setRootNode","preventIconsOffset","menuMaxHeight","popupMenuId","children","icon","iconsmall","iconmedium","iconlarge","sizes","small","parseInt","kebabIconSizeSmall","medium","kebabIconSizeMedium","large","kebabIconSizeLarge","React","cloneElement","color","kebabIconColor","Component","__KONTUR_REACT_UI__","displayName","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';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\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 { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } 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';\nimport { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from '../../lib/featureFlagsContext';\nimport { ThemeConsumer, ThemeProvider } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } 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  public static displayName = '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 emotion!: Emotion;\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return (\n                  <ThemeProvider\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                  </ThemeProvider>\n                );\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private renderMain() {\n    const { disabled } = this.props;\n    const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          const hasPin = !getFullReactUIFlagsContext(flags).kebabHintRemovePin || !isTheme2022(this.theme);\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <PopupMenu\n                popupHasPin={hasPin}\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      </ReactUIFeatureFlagsContext.Consumer>\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    const styles = getStyles(this.emotion);\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={this.emotion.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      globalObject.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    const styles = getStyles(this.emotion);\n    return (\n      <div\n        className={this.emotion.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/cjs/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/cjs/components/Kebab/Kebab.styles.d.ts

@@ -1,12 +1,17 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     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/cjs/components/Kebab/Kebab.styles.js

@@ -1,85 +1,119 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
-var styles = (0, _Emotion.memoizeStyle)({
-  kebab: function kebab(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])),
 
+var getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      kebab: function kebab(t) {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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.kebabBorder,
 
+        t.kebabBorderRadius,
 
 
 
 
+        t.kebabBackground,
 
-    t.kebabBackground,
 
+        t.kebabBackgroundHover,
 
-    t.kebabBackgroundHover);
 
 
-  },
+        t.kebabBackgroundActive);
 
-  focused: function focused(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      border-color: ", ";\n    "])),
-    t.kebabBackgroundHover,
-    t.borderColorFocus);
 
-  },
+      },
 
-  opened: function opened(t) {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important; // override kebab:hover style\n      cursor: default;\n    "])),
-    t.kebabBackgroundHover);
+      kebabSmall: function kebabSmall(t) {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: ", ";\n        height: ", ";\n      "])),
+        t.kebabSizeSmall,
+        t.kebabSizeSmall);
 
+      },
 
-  },
+      kebabMedium: function kebabMedium(t) {
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: ", ";\n        height: ", ";\n      "])),
+        t.kebabSizeMedium,
+        t.kebabSizeMedium);
 
-  disabled: function disabled() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    "])));
+      },
 
+      kebabLarge: function kebabLarge(t) {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        width: ", ";\n        height: ", ";\n      "])),
+        t.kebabSizeLarge,
+        t.kebabSizeLarge);
 
+      },
 
+      kebab2022: function kebab2022() {
+        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      "])));
 
 
 
-  },
 
-  icon: function icon() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #757575;\n      line-height: 1;\n    "])));
+      },
 
+      focused: function focused(t) {
+        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", ";\n        border-color: ", ";\n      "])),
+        t.kebabBackgroundHover,
+        t.borderColorFocus);
 
+      },
 
-  },
+      opened: function opened(t) {
+        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background: ", " !important; // override kebab:hover style\n        cursor: default;\n      "])),
+        t.kebabBackgroundActive);
 
-  iconsmall: function iconsmall() {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-top: 2px;\n      font-size: 14px;\n    "])));
 
+      },
 
+      disabled: function disabled() {
+        return emotion.css(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        cursor: default;\n\n        &:hover {\n          background: none;\n        }\n      "])));
 
-  },
 
-  iconmedium: function iconmedium() {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: 18px;\n    "])));
 
 
 
 
-  },
+      },
 
-  iconlarge: function iconlarge() {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: 20px;\n    "])));
+      icon: function icon(t) {
+        return emotion.css(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n        line-height: 1;\n      "])),
+        t.kebabIconColor);
 
 
+      },
 
+      iconsmall: function iconsmall(t) {
+        return emotion.css(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin-top: 2px;\n        font-size: ", ";\n      "])),
 
-  },
+        t.kebabIconSizeSmall);
 
-  menu: function menu(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      overflow: hidden;\n      border-radius: ", ";\n    "])),
+      },
 
-    t.popupBorderRadius);
+      iconmedium: function iconmedium(t) {
+        return emotion.css(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin-top: -1px;\n        margin-left: 0.5px;\n        font-size: ", ";\n      "])),
 
-  } });exports.styles = styles;
+
+        t.kebabIconSizeMedium);
+
+      },
+
+      iconlarge: function iconlarge(t) {
+        return emotion.css(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin-top: -2px;\n        margin-left: 1px;\n        font-size: ", ";\n      "])),
+
+
+        t.kebabIconSizeLarge);
+
+      },
+
+      menu: function menu(t) {
+        return emotion.css(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n        overflow: hidden;\n        border-radius: ", ";\n      "])),
+
+        t.popupBorderRadius);
+
+      } }));};exports.getStyles = getStyles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.styles.ts"],"names":["styles","kebab","t","css","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","focused","borderColorFocus","opened","disabled","icon","iconsmall","iconmedium","iconlarge","menu","popupBorderRadius"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,KADiC,iBAC3BC,CAD2B,EACjB;AACd,eAAOC,YAAP;;;AAGYD,IAAAA,CAAC,CAACE,WAHd;;AAKmBF,IAAAA,CAAC,CAACG,iBALrB;;;;;;;AAYgBH,IAAAA,CAAC,CAACI,eAZlB;;;AAekBJ,IAAAA,CAAC,CAACK,oBAfpB;;;AAkBD,GApBgC;;AAsBjCC,EAAAA,OAtBiC,mBAsBzBN,CAtByB,EAsBf;AAChB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACK,oBADlB;AAEkBL,IAAAA,CAAC,CAACO,gBAFpB;;AAID,GA3BgC;;AA6BjCC,EAAAA,MA7BiC,kBA6B1BR,CA7B0B,EA6BhB;AACf,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACK,oBADlB;;;AAID,GAlCgC;;AAoCjCI,EAAAA,QApCiC,sBAoCtB;AACT,eAAOR,YAAP;;;;;;;AAOD,GA5CgC;;AA8CjCS,EAAAA,IA9CiC,kBA8C1B;AACL,eAAOT,YAAP;;;;AAID,GAnDgC;;AAqDjCU,EAAAA,SArDiC,uBAqDrB;AACV,eAAOV,YAAP;;;;AAID,GA1DgC;;AA4DjCW,EAAAA,UA5DiC,wBA4DpB;AACX,eAAOX,YAAP;;;;;AAKD,GAlEgC;;AAoEjCY,EAAAA,SApEiC,uBAoErB;AACV,eAAOZ,YAAP;;;;;AAKD,GA1EgC;;AA4EjCa,EAAAA,IA5EiC,gBA4E5Bd,CA5E4B,EA4ElB;AACb,eAAOC,YAAP;;AAEmBD,IAAAA,CAAC,CAACe,iBAFrB;;AAID,GAjFgC,EAAb,CAAf,C","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":["getStyles","emotion","kebab","t","css","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":";;AAEA,oD;;;AAGO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,KADW,iBACLC,CADK,EACK;AACd,eAAOF,OAAO,CAACG,GAAf;;;AAGYD,QAAAA,CAAC,CAACE,WAHd;;AAKmBF,QAAAA,CAAC,CAACG,iBALrB;;;;;AAUgBH,QAAAA,CAAC,CAACI,eAVlB;;;AAakBJ,QAAAA,CAAC,CAACK,oBAbpB;;;;AAiBkBL,QAAAA,CAAC,CAACM,qBAjBpB;;;AAoBD,OAtBU;;AAwBXC,MAAAA,UAxBW,sBAwBAP,CAxBA,EAwBU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACQ,cADb;AAEYR,QAAAA,CAAC,CAACQ,cAFd;;AAID,OA7BU;;AA+BXC,MAAAA,WA/BW,uBA+BCT,CA/BD,EA+BW;AACpB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACU,eADb;AAEYV,QAAAA,CAAC,CAACU,eAFd;;AAID,OApCU;;AAsCXC,MAAAA,UAtCW,sBAsCAX,CAtCA,EAsCU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACY,cADb;AAEYZ,QAAAA,CAAC,CAACY,cAFd;;AAID,OA3CU;;AA6CXC,MAAAA,SA7CW,uBA6CC;AACV,eAAOf,OAAO,CAACG,GAAf;;;;;AAKD,OAnDU;;AAqDXa,MAAAA,OArDW,mBAqDHd,CArDG,EAqDO;AAChB,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACK,oBADlB;AAEkBL,QAAAA,CAAC,CAACe,gBAFpB;;AAID,OA1DU;;AA4DXC,MAAAA,MA5DW,kBA4DJhB,CA5DI,EA4DM;AACf,eAAOF,OAAO,CAACG,GAAf;AACgBD,QAAAA,CAAC,CAACM,qBADlB;;;AAID,OAjEU;;AAmEXW,MAAAA,QAnEW,sBAmEA;AACT,eAAOnB,OAAO,CAACG,GAAf;;;;;;;AAOD,OA3EU;;AA6EXiB,MAAAA,IA7EW,gBA6ENlB,CA7EM,EA6EI;AACb,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACmB,cADb;;;AAID,OAlFU;;AAoFXC,MAAAA,SApFW,qBAoFDpB,CApFC,EAoFS;AAClB,eAAOF,OAAO,CAACG,GAAf;;AAEeD,QAAAA,CAAC,CAACqB,kBAFjB;;AAID,OAzFU;;AA2FXC,MAAAA,UA3FW,sBA2FAtB,CA3FA,EA2FU;AACnB,eAAOF,OAAO,CAACG,GAAf;;;AAGeD,QAAAA,CAAC,CAACuB,mBAHjB;;AAKD,OAjGU;;AAmGXC,MAAAA,SAnGW,qBAmGDxB,CAnGC,EAmGS;AAClB,eAAOF,OAAO,CAACG,GAAf;;;AAGeD,QAAAA,CAAC,CAACyB,kBAHjB;;AAKD,OAzGU;;AA2GXC,MAAAA,IA3GW,gBA2GN1B,CA3GM,EA2GI;AACb,eAAOF,OAAO,CAACG,GAAf;;AAEmBD,QAAAA,CAAC,CAAC2B,iBAFrB;;AAID,OAhHU,EAAb,CADuB,GAAlB,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    kebab(t: Theme) {\n      return emotion.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 emotion.css`\n        width: ${t.kebabSizeSmall};\n        height: ${t.kebabSizeSmall};\n      `;\n    },\n\n    kebabMedium(t: Theme) {\n      return emotion.css`\n        width: ${t.kebabSizeMedium};\n        height: ${t.kebabSizeMedium};\n      `;\n    },\n\n    kebabLarge(t: Theme) {\n      return emotion.css`\n        width: ${t.kebabSizeLarge};\n        height: ${t.kebabSizeLarge};\n      `;\n    },\n\n    kebab2022() {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      `;\n    },\n\n    focused(t: Theme) {\n      return emotion.css`\n        background: ${t.kebabBackgroundHover};\n        border-color: ${t.borderColorFocus};\n      `;\n    },\n\n    opened(t: Theme) {\n      return emotion.css`\n        background: ${t.kebabBackgroundActive} !important; // override kebab:hover style\n        cursor: default;\n      `;\n    },\n\n    disabled() {\n      return emotion.css`\n        cursor: default;\n\n        &:hover {\n          background: none;\n        }\n      `;\n    },\n\n    icon(t: Theme) {\n      return emotion.css`\n        color: ${t.kebabIconColor};\n        line-height: 1;\n      `;\n    },\n\n    iconsmall(t: Theme) {\n      return emotion.css`\n        margin-top: 2px;\n        font-size: ${t.kebabIconSizeSmall};\n      `;\n    },\n\n    iconmedium(t: Theme) {\n      return emotion.css`\n        margin-top: -1px;\n        margin-left: 0.5px;\n        font-size: ${t.kebabIconSizeMedium};\n      `;\n    },\n\n    iconlarge(t: Theme) {\n      return emotion.css`\n        margin-top: -2px;\n        margin-left: 1px;\n        font-size: ${t.kebabIconSizeLarge};\n      `;\n    },\n\n    menu(t: Theme) {\n      return emotion.css`\n        overflow: hidden;\n        border-radius: ${t.popupBorderRadius};\n      `;\n    },\n  });\n"]}

package/cjs/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;
+}>;

package/cjs/components/Kebab/KebabIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.KebabIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _iconSizer = require("../../internal/icons2022/iconSizer");
+var _UiMenuDotsThreeVIcon16Light = require("../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon16Light");
+var _UiMenuDotsThreeVIcon20Regular = require("../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon20Regular");
+var _UiMenuDotsThreeVIcon24Regular = require("../../internal/icons2022/UiMenuDotsThreeVIcon/UiMenuDotsThreeVIcon24Regular"); /* eslint-disable react/display-name */
+
+var KebabIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_UiMenuDotsThreeVIcon16Light.UiMenuDotsThreeVIcon16Light, null);},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_UiMenuDotsThreeVIcon20Regular.UiMenuDotsThreeVIcon20Regular, null);},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_UiMenuDotsThreeVIcon24Regular.UiMenuDotsThreeVIcon24Regular, null);} },
+
+'KebabIcon');exports.KebabIcon = KebabIcon;