@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0dca6f33be

package/components/Input/InputLayout/InputLayoutAsideIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InputProps } from '../Input';
+export interface InputLayoutAsideIconProps {
+    icon: InputProps['leftIcon'] | InputProps['rightIcon'];
+    side: 'left' | 'right';
+}
+export declare const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps>;

package/components/Input/InputLayout/InputLayoutAsideText/InputLayoutAsideText.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { cx } from "../../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../../lib/theming/ThemeContext";
+import { InputLayoutContext } from "../InputLayoutContext";
+import { stylesLayout } from "../InputLayout.styles";
+export var InputLayoutAsideText = function InputLayoutAsideText(_ref) {
+  var _ref$text = _ref.text,
+      text = _ref$text === void 0 ? null : _ref$text;
+  var theme = React.useContext(ThemeContext);
+
+  var _React$useContext = React.useContext(InputLayoutContext),
+      disabled = _React$useContext.disabled;
+
+  var asideClassName = stylesLayout.aside();
+  return text && /*#__PURE__*/React.createElement("span", {
+    className: cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme))
+  }, text);
+};

package/components/Input/InputLayout/InputLayoutAsideText/InputLayoutAsideText.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutAsideText.tsx"],"names":["React","cx","ThemeContext","InputLayoutContext","stylesLayout","InputLayoutAsideText","text","theme","useContext","disabled","asideClassName","aside","textDisabled"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,EAAT,QAAmB,8BAAnB;AACA,SAASC,YAAT,QAA6B,mCAA7B;;AAEA,SAASC,kBAAT,QAAmC,sBAAnC;AACA,SAASC,YAAT,QAA6B,sBAA7B;;;;;;AAMA,OAAO,IAAMC,oBAAwE,GAAG,SAA3EA,oBAA2E,OAAqB,sBAAlBC,IAAkB,CAAlBA,IAAkB,0BAAX,IAAW;AAC3G,MAAMC,KAAK,GAAGP,KAAK,CAACQ,UAAN,CAAiBN,YAAjB,CAAd;AACA,0BAAqBF,KAAK,CAACQ,UAAN,CAAiBL,kBAAjB,CAArB,CAAQM,QAAR,qBAAQA,QAAR;;AAEA,MAAMC,cAAc,GAAGN,YAAY,CAACO,KAAb,EAAvB;;AAEA;AACEL,IAAAA,IAAI;AACF,kCAAM,SAAS,EAAEL,EAAE,CAACS,cAAD,EAAiBN,YAAY,CAACE,IAAb,CAAkBC,KAAlB,CAAjB,EAA2CE,QAAQ,IAAIL,YAAY,CAACQ,YAAb,CAA0BL,KAA1B,CAAvD,CAAnB;AACGD,IAAAA,IADH,CAFJ;;;;AAOD,CAbM","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { stylesLayout } from './InputLayout.styles';\n\nexport interface InputLayoutAsideTextProps {\n  text: InputProps['prefix'] | InputProps['suffix'];\n}\n\nexport const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps> = ({ text = null }) => {\n  const theme = React.useContext(ThemeContext);\n  const { disabled } = React.useContext(InputLayoutContext);\n\n  const asideClassName = stylesLayout.aside();\n\n  return (\n    text && (\n      <span className={cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme))}>\n        {text}\n      </span>\n    )\n  );\n};\n"]}

package/components/Input/InputLayout/InputLayoutAsideText/package.json

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

package/components/Input/InputLayout/InputLayoutAsideText.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InputProps } from '../Input';
+export interface InputLayoutAsideTextProps {
+    text: InputProps['prefix'] | InputProps['suffix'];
+}
+export declare const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps>;

package/components/Input/InputLayout/InputLayoutContext/InputLayoutContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export var InputLayoutContextDefault = {
+  focused: false,
+  disabled: false,
+  size: 'small'
+};
+export var InputLayoutContext = /*#__PURE__*/React.createContext(InputLayoutContextDefault);

package/components/Input/InputLayout/InputLayoutContext/InputLayoutContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutContext.tsx"],"names":["React","InputLayoutContextDefault","focused","disabled","size","InputLayoutContext","createContext"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;;;;;AAUA,OAAO,IAAMC,yBAAkD,GAAG;AAChEC,EAAAA,OAAO,EAAE,KADuD;AAEhEC,EAAAA,QAAQ,EAAE,KAFsD;AAGhEC,EAAAA,IAAI,EAAE,OAH0D,EAA3D;;;AAMP,OAAO,IAAMC,kBAAkB,gBAAGL,KAAK,CAACM,aAAN,CAA6CL,yBAA7C,CAA3B","sourcesContent":["import React from 'react';\n\nimport { InputSize } from '../Input';\n\nexport interface InputLayoutContextProps {\n  focused: boolean;\n  disabled: boolean;\n  size: InputSize;\n}\n\nexport const InputLayoutContextDefault: InputLayoutContextProps = {\n  focused: false,\n  disabled: false,\n  size: 'small',\n};\n\nexport const InputLayoutContext = React.createContext<InputLayoutContextProps>(InputLayoutContextDefault);\n"]}

package/components/Input/InputLayout/InputLayoutContext/package.json

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

package/components/Input/InputLayout/InputLayoutContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { InputSize } from '../Input';
+export interface InputLayoutContextProps {
+    focused: boolean;
+    disabled: boolean;
+    size: InputSize;
+}
+export declare const InputLayoutContextDefault: InputLayoutContextProps;
+export declare const InputLayoutContext: React.Context<InputLayoutContextProps>;

package/components/Input/InputLayout/PolyfillPlaceholder/PolyfillPlaceholder.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { cx } from "../../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../../lib/theming/ThemeContext";
+import { styles } from "../../Input.styles";
+import { needsPolyfillPlaceholder } from "../../../../lib/needsPolyfillPlaceholder";
+import { InputLayoutContext } from "../InputLayoutContext";
+export var PolyfillPlaceholder = function PolyfillPlaceholder(_ref) {
+  var placeholder = _ref.children,
+      align = _ref.align,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      isMaskVisible = _ref.isMaskVisible;
+  var theme = React.useContext(ThemeContext);
+
+  var _React$useContext = React.useContext(InputLayoutContext),
+      focused = _React$useContext.focused,
+      disabled = _React$useContext.disabled;
+
+  var _placeholder = null;
+
+  if (needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {
+    var _cx;
+
+    _placeholder = /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.placeholder(theme), (_cx = {}, _cx[styles.placeholderDisabled(theme)] = disabled, _cx[styles.placeholderFocus(theme)] = focused, _cx)),
+      style: {
+        textAlign: align || 'inherit'
+      }
+    }, placeholder);
+  }
+
+  return _placeholder;
+};

package/components/Input/InputLayout/PolyfillPlaceholder/PolyfillPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PolyfillPlaceholder.tsx"],"names":["React","cx","ThemeContext","styles","needsPolyfillPlaceholder","InputLayoutContext","PolyfillPlaceholder","placeholder","children","align","value","defaultValue","isMaskVisible","theme","useContext","focused","disabled","_placeholder","placeholderDisabled","placeholderFocus","textAlign"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,EAAT,QAAmB,8BAAnB;AACA,SAASC,YAAT,QAA6B,mCAA7B;AACA,SAASC,MAAT,QAAuB,iBAAvB;AACA,SAASC,wBAAT,QAAyC,uCAAzC;;AAEA,SAASC,kBAAT,QAAmC,sBAAnC;;;;;;;;;;AAUA,OAAO,IAAMC,mBAAyE,GAAG,SAA5EA,mBAA4E;;;;;;AAMnF,KALMC,WAKN,QALJC,QAKI,CAJJC,KAII,QAJJA,KAII,CAHJC,KAGI,QAHJA,KAGI,CAFJC,YAEI,QAFJA,YAEI,CADJC,aACI,QADJA,aACI;AACJ,MAAMC,KAAK,GAAGb,KAAK,CAACc,UAAN,CAAiBZ,YAAjB,CAAd;AACA,0BAA8BF,KAAK,CAACc,UAAN,CAAiBT,kBAAjB,CAA9B,CAAQU,OAAR,qBAAQA,OAAR,CAAiBC,QAAjB,qBAAiBA,QAAjB;;AAEA,MAAIC,YAAY,GAAG,IAAnB;;AAEA,MAAIb,wBAAwB,IAAIG,WAA5B,IAA2C,CAACK,aAA5C,IAA6D,CAACF,KAA9D,IAAuE,CAACC,YAA5E,EAA0F;AACxFM,IAAAA,YAAY;AACV;AACE,MAAA,SAAS,EAAEhB,EAAE,CAACE,MAAM,CAACI,WAAP,CAAmBM,KAAnB,CAAD;AACVV,MAAAA,MAAM,CAACe,mBAAP,CAA2BL,KAA3B,CADU,IAC0BG,QAD1B;AAEVb,MAAAA,MAAM,CAACgB,gBAAP,CAAwBN,KAAxB,CAFU,IAEuBE,OAFvB,OADf;;AAKE,MAAA,KAAK,EAAE,EAAEK,SAAS,EAAEX,KAAK,IAAI,SAAtB,EALT;;AAOGF,IAAAA,WAPH,CADF;;;AAWD;;AAED,SAAOU,YAAP;AACD,CA3BM","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { styles } from '../Input.styles';\nimport { needsPolyfillPlaceholder } from '../../../lib/needsPolyfillPlaceholder';\n\nimport { InputLayoutContext } from './InputLayoutContext';\n\ntype PolyfillPlaceholder = Pick<InputProps, 'placeholder' | 'value' | 'defaultValue' | 'align'> & {\n  isMaskVisible: boolean;\n};\n\nexport interface InputLayoutPlaceholderProps extends PolyfillPlaceholder {\n  children: InputProps['placeholder'];\n}\n\nexport const PolyfillPlaceholder: React.FunctionComponent<InputLayoutPlaceholderProps> = ({\n  children: placeholder,\n  align,\n  value,\n  defaultValue,\n  isMaskVisible,\n}) => {\n  const theme = React.useContext(ThemeContext);\n  const { focused, disabled } = React.useContext(InputLayoutContext);\n\n  let _placeholder = null;\n\n  if (needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {\n    _placeholder = (\n      <div\n        className={cx(styles.placeholder(theme), {\n          [styles.placeholderDisabled(theme)]: disabled,\n          [styles.placeholderFocus(theme)]: focused,\n        })}\n        style={{ textAlign: align || 'inherit' }}\n      >\n        {placeholder}\n      </div>\n    );\n  }\n\n  return _placeholder;\n};\n"]}

package/components/Input/InputLayout/PolyfillPlaceholder/package.json

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

package/components/Input/InputLayout/PolyfillPlaceholder.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InputProps } from '../Input';
+declare type PolyfillPlaceholder = Pick<InputProps, 'placeholder' | 'value' | 'defaultValue' | 'align'> & {
+    isMaskVisible: boolean;
+};
+export interface InputLayoutPlaceholderProps extends PolyfillPlaceholder {
+    children: InputProps['placeholder'];
+}
+export declare const PolyfillPlaceholder: React.FunctionComponent<InputLayoutPlaceholderProps>;
+export {};

package/components/Input/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Input';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Input';\n"]}

package/components/Kebab/Kebab/Kebab.js

@@ -1,18 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
+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 { tabListener } from "../../../lib/events/tabListener";
+import { keyListener } from "../../../lib/events/keyListener";
 import { PopupMenu } from "../../../internal/PopupMenu";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { MenuKebabIcon } from "../../../internal/icons/16px";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../Kebab.styles";
-export var Kebab = /*#__PURE__*/function (_React$Component) {
+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);
 
   function Kebab() {
@@ -23,12 +36,11 @@ export var Kebab = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Kebab.defaultProps);
     _this.state = {
-      opened: false,
       focusedByTab: false,
       anchor: null
     };
-    _this.theme = void 0;
     _this.listener = {
       remove: function remove() {
         return undefined;
@@ -36,9 +48,9 @@ export var Kebab = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.renderCaption = function (captionProps) {
-      var _cn;
-
-      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) {
@@ -53,13 +65,15 @@ export var Kebab = /*#__PURE__*/function (_React$Component) {
       };
 
       return /*#__PURE__*/React.createElement("span", {
+        "data-tid": KebabDataTids.caption,
         tabIndex: disabled ? -1 : 0,
         onClick: handleCaptionClick,
         onKeyDown: handleCaptionKeyDown,
         onFocus: _this.handleFocus,
         onBlur: _this.handleBlur,
-        className: cn((_cn = {}, _cn[jsStyles.kebab(_this.theme)] = true, _cn[jsStyles.opened(_this.theme)] = captionProps.opened, _cn[jsStyles.disabled(_this.theme)] = disabled, _cn[jsStyles.focused(_this.theme)] = _this.state.focusedByTab, _cn))
-      }, _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) {
@@ -71,18 +85,7 @@ export var Kebab = /*#__PURE__*/function (_React$Component) {
 
     _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();
-        }
       });
     };
 
@@ -90,8 +93,8 @@ export var Kebab = /*#__PURE__*/function (_React$Component) {
       if (!_this.props.disabled) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        process.nextTick(function () {
-          if (tabListener.isTabPressed) {
+        requestAnimationFrame(function () {
+          if (keyListener.isTabPressed) {
             _this.setState({
               focusedByTab: true
             });
@@ -138,57 +141,67 @@ export var Kebab = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderMain = function renderMain() {
-    var _this$props = this.props,
-        disabled = _this$props.disabled,
-        positions = _this$props.positions;
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(PopupMenu, {
+    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,
       positions: positions,
       onChangeMenuState: this.handleChangeMenuState,
       caption: this.renderCaption,
-      disableAnimations: this.props.disableAnimations
+      disableAnimations: disableAnimations,
+      menuMaxHeight: this.props.menuMaxHeight,
+      onOpen: onOpen,
+      onClose: onClose,
+      popupMenuId: this.props.popupMenuId
     }, !disabled && this.props.children));
   };
 
   _proto.renderIcon = function renderIcon() {
-    switch (this.props.size) {
-      case 'small':
-        return /*#__PURE__*/React.createElement("div", {
-          className: jsStyles.iconsmall(this.theme)
-        }, /*#__PURE__*/React.createElement(MenuKebabIcon, {
-          size: "14px",
-          color: "#757575"
-        }));
-
-      case 'medium':
-        return /*#__PURE__*/React.createElement("div", {
-          className: jsStyles.iconmedium(this.theme)
-        }, /*#__PURE__*/React.createElement(MenuKebabIcon, {
-          size: "18px",
-          color: "#757575"
-        }));
-
-      case 'large':
-        return /*#__PURE__*/React.createElement("div", {
-          className: jsStyles.iconlarge(this.theme)
-        }, /*#__PURE__*/React.createElement(MenuKebabIcon, {
-          size: "20px",
-          color: "#757575",
-          style: {
-            verticalAlign: -2
-          }
-        }));
+    var _cx;
 
-      default:
-        throw new Error("Unexpected size '" + this.props.size + "'");
+    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((_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;
-}(React.Component);
-Kebab.__KONTUR_REACT_UI__ = 'Kebab';
-Kebab.propTypes = {};
-Kebab.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Kebab', _class2.propTypes = {}, _class2.defaultProps = {
   onOpen: function onOpen() {
     return undefined;
   },
@@ -198,24 +211,24 @@ Kebab.defaultProps = {
   positions: ['bottom left', 'bottom right', 'top left', 'top right'],
   size: 'small',
   disableAnimations: isTestEnv
-};
+}, _temp)) || _class;
 Kebab.propTypes = {
   children: PropTypes.node,
   disabled: PropTypes.bool,
   menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * Размер кебаба small 14px | large 20px
+  /**
+   * Размер кебаба small 14px | large 20px
    */
   size: PropTypes.string,
 
-  /**
-   * Коллбек, вызывающийся перед закрытием кебаба
+  /**
+   * Коллбек, вызывающийся перед закрытием кебаба
    */
   onClose: PropTypes.func,
 
-  /**
-   * Коллбек, вызывающийся перед открытием кебаба
+  /**
+   * Коллбек, вызывающийся перед открытием кебаба
    */
   onOpen: PropTypes.func
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.tsx"],"names":["React","PropTypes","cn","isKeyArrowVertical","isKeyEnter","isKeySpace","someKeys","LayoutEvents","tabListener","PopupMenu","ThemeContext","MenuKebabIcon","isTestEnv","ThemeFactory","CommonWrapper","jsStyles","Kebab","state","opened","focusedByTab","anchor","theme","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","kebab","focused","renderIcon","e","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","process","nextTick","isTabPressed","componentDidMount","addListener","componentWillUnmount","render","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","children","size","iconsmall","iconmedium","iconlarge","verticalAlign","Error","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","node","bool","menuMaxHeight","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { tabListener } from '../../lib/events/tabListener';\r\nimport { PopupMenu, PopupMenuCaptionProps } from '../../internal/PopupMenu';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { PopupPosition } from '../../internal/Popup';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { MenuKebabIcon } from '../../internal/icons/16px';\r\nimport { isTestEnv } from '../../lib/currentEnvironment';\r\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Kebab.styles';\r\n\r\nexport interface KebabProps extends CommonProps {\r\n  disabled?: boolean;\r\n  /**\r\n   * Функция вызываемая при закрытии выпадашки\r\n   * @default () => undefined\r\n   */\r\n  onClose: () => void;\r\n  /**\r\n   * Функция вызываемая при открытии выпадашки\r\n   * @default () => undefined\r\n   */\r\n  onOpen: () => void;\r\n  size: 'small' | 'medium' | 'large';\r\n  /**\r\n   * Список позиций доступных для расположения выпадашки\r\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использоваться первая из этого списка\r\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\r\n   */\r\n  positions: PopupPosition[];\r\n  menuMaxHeight?: number | string;\r\n  /**\r\n   * Не показывать анимацию\r\n   */\r\n  disableAnimations: boolean;\r\n}\r\n\r\nexport interface KebabState {\r\n  anchor: Nullable<HTMLElement>;\r\n  focusedByTab: boolean;\r\n  opened: boolean;\r\n}\r\n\r\nexport class Kebab extends React.Component<KebabProps, KebabState> {\r\n  public static __KONTUR_REACT_UI__ = 'Kebab';\r\n\r\n  public static propTypes = {};\r\n\r\n  public static defaultProps = {\r\n    onOpen: () => undefined,\r\n    onClose: () => undefined,\r\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\r\n    size: 'small',\r\n    disableAnimations: isTestEnv,\r\n  };\r\n\r\n  public state = {\r\n    opened: false,\r\n    focusedByTab: false,\r\n    anchor: null,\r\n  };\r\n\r\n  private theme!: Theme;\r\n\r\n  private listener: {\r\n    remove: () => void;\r\n  } = {\r\n    remove: () => undefined,\r\n  };\r\n\r\n  public componentDidMount() {\r\n    /** addListener'у нужен колбэк в аргумент */\r\n    this.listener = LayoutEvents.addListener(() => undefined);\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    this.listener.remove();\r\n  }\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return (\r\n            <ThemeContext.Provider\r\n              value={ThemeFactory.create(\r\n                {\r\n                  popupPinOffset: theme.kebabPinOffset,\r\n                  popupMargin: theme.kebabMargin,\r\n                  popupPinSize: theme.kebabPinSize,\r\n                },\r\n                theme,\r\n              )}\r\n            >\r\n              {this.renderMain()}\r\n            </ThemeContext.Provider>\r\n          );\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { disabled, positions } = this.props;\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <PopupMenu\r\n          popupHasPin\r\n          positions={positions}\r\n          onChangeMenuState={this.handleChangeMenuState}\r\n          caption={this.renderCaption}\r\n          disableAnimations={this.props.disableAnimations}\r\n        >\r\n          {!disabled && this.props.children}\r\n        </PopupMenu>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\r\n    const { disabled } = this.props;\r\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n      if (!disabled) {\r\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\r\n      }\r\n    };\r\n\r\n    const handleCaptionClick = () => {\r\n      if (!disabled) {\r\n        captionProps.toggleMenu();\r\n      }\r\n    };\r\n\r\n    return (\r\n      <span\r\n        tabIndex={disabled ? -1 : 0}\r\n        onClick={handleCaptionClick}\r\n        onKeyDown={handleCaptionKeyDown}\r\n        onFocus={this.handleFocus}\r\n        onBlur={this.handleBlur}\r\n        className={cn({\r\n          [jsStyles.kebab(this.theme)]: true,\r\n          [jsStyles.opened(this.theme)]: captionProps.opened,\r\n          [jsStyles.disabled(this.theme)]: disabled,\r\n          [jsStyles.focused(this.theme)]: this.state.focusedByTab,\r\n        })}\r\n      >\r\n        {this.renderIcon()}\r\n      </span>\r\n    );\r\n  };\r\n\r\n  private handleCaptionKeyDown = (\r\n    e: React.KeyboardEvent<HTMLDivElement>,\r\n    openMenu: PopupMenuCaptionProps['openMenu'],\r\n  ) => {\r\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\r\n      e.preventDefault();\r\n      openMenu(true);\r\n    }\r\n  };\r\n\r\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\r\n    this.setState(\r\n      {\r\n        opened: isOpened,\r\n        focusedByTab: !isOpened && restoreFocus,\r\n      },\r\n      () => {\r\n        if (this.props.disabled) {\r\n          return;\r\n        }\r\n\r\n        if (this.state.opened) {\r\n          this.props.onOpen();\r\n        } else {\r\n          this.props.onClose();\r\n        }\r\n      },\r\n    );\r\n  };\r\n\r\n  private handleFocus = () => {\r\n    if (!this.props.disabled) {\r\n      // focus event fires before keyDown eventlistener\r\n      // so we should check tabPressed in async way\r\n      process.nextTick(() => {\r\n        if (tabListener.isTabPressed) {\r\n          this.setState({ focusedByTab: true });\r\n        }\r\n      });\r\n    }\r\n  };\r\n\r\n  private handleBlur = () => {\r\n    this.setState({\r\n      focusedByTab: false,\r\n    });\r\n  };\r\n\r\n  private renderIcon() {\r\n    switch (this.props.size) {\r\n      case 'small':\r\n        return (\r\n          <div className={jsStyles.iconsmall(this.theme)}>\r\n            <MenuKebabIcon size=\"14px\" color=\"#757575\" />\r\n          </div>\r\n        );\r\n      case 'medium':\r\n        return (\r\n          <div className={jsStyles.iconmedium(this.theme)}>\r\n            <MenuKebabIcon size=\"18px\" color=\"#757575\" />\r\n          </div>\r\n        );\r\n      case 'large':\r\n        return (\r\n          <div className={jsStyles.iconlarge(this.theme)}>\r\n            <MenuKebabIcon size=\"20px\" color=\"#757575\" style={{ verticalAlign: -2 }} />\r\n          </div>\r\n        );\r\n      default:\r\n        throw new Error(`Unexpected size '${this.props.size}'`);\r\n    }\r\n  }\r\n}\r\n\r\nKebab.propTypes = {\r\n  children: PropTypes.node,\r\n  disabled: PropTypes.bool,\r\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n\r\n  /**\r\n   * Размер кебаба small 14px | large 20px\r\n   */\r\n  size: PropTypes.string,\r\n\r\n  /**\r\n   * Коллбек, вызывающийся перед закрытием кебаба\r\n   */\r\n  onClose: PropTypes.func,\r\n\r\n  /**\r\n   * Коллбек, вызывающийся перед открытием кебаба\r\n   */\r\n  onOpen: PropTypes.func,\r\n};\r\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","renderMain","positions","disableAnimations","onOpen","onClose","setRootNode","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 { ButtonSize } from '../Button';\n\nimport { styles } from './Kebab.styles';\nimport { KebabIcon } from './KebabIcon';\n\nexport interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId'> {\n  disabled?: boolean;\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Список позиций доступных для расположения выпадашки.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\n   */\n  positions?: PopupPositionsType[];\n  menuMaxHeight?: number | string;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n  /**\n   * Кастомная иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const KebabDataTids = {\n  caption: 'Kebab__caption',\n} as const;\n\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations'>>;\n\n@rootNode\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n  public static __KONTUR_REACT_UI__ = 'Kebab';\n\n  public static propTypes = {};\n\n  public static defaultProps: DefaultProps = {\n    onOpen: () => undefined,\n    onClose: () => undefined,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n    size: 'small',\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(Kebab.defaultProps);\n\n  public state: KebabState = {\n    focusedByTab: false,\n    anchor: null,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  private listener: {\n    remove: () => void;\n  } = {\n    remove: () => undefined,\n  };\n\n  public componentDidMount() {\n    /** addListener'у нужен колбэк в аргумент */\n    this.listener = LayoutEvents.addListener(() => undefined);\n  }\n\n  public componentWillUnmount() {\n    this.listener.remove();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.kebabPinOffset,\n                  popupMargin: theme.kebabMargin,\n                  popupPinSize: theme.kebabPinSize,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { disabled } = this.props;\n    const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          popupHasPin\n          positions={positions}\n          onChangeMenuState={this.handleChangeMenuState}\n          caption={this.renderCaption}\n          disableAnimations={disableAnimations}\n          menuMaxHeight={this.props.menuMaxHeight}\n          onOpen={onOpen}\n          onClose={onClose}\n          popupMenuId={this.props.popupMenuId}\n        >\n          {!disabled && this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled, size } = this.getProps();\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!disabled) {\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\n      }\n    };\n\n    const handleCaptionClick = () => {\n      if (!disabled) {\n        captionProps.toggleMenu();\n      }\n    };\n\n    return (\n      <span\n        data-tid={KebabDataTids.caption}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCaptionClick}\n        onKeyDown={handleCaptionKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        className={cx(\n          styles.kebab(this.theme),\n          size === 'small' && styles.kebabSmall(this.theme),\n          size === 'medium' && styles.kebabMedium(this.theme),\n          size === 'large' && styles.kebabLarge(this.theme),\n          isTheme2022(this.theme) && styles.kebab2022(),\n          captionProps.opened && styles.opened(this.theme),\n          disabled && styles.disabled(),\n          this.state.focusedByTab && styles.focused(this.theme),\n        )}\n        aria-describedby={this.props['aria-describedby']}\n      >\n        {isTheme2022(this.theme) ? this.renderIcon2022() : this.renderIcon()}\n      </span>\n    );\n  };\n\n  private handleCaptionKeyDown = (\n    e: React.KeyboardEvent<HTMLDivElement>,\n    openMenu: PopupMenuCaptionProps['openMenu'],\n  ) => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      openMenu(true);\n    }\n  };\n\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n    this.setState({\n      focusedByTab: !isOpened && restoreFocus,\n    });\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      focusedByTab: false,\n    });\n  };\n\n  private renderIcon() {\n    const { size, icon = <MenuKebabIcon /> } = this.getProps();\n    return (\n      <div\n        className={cx({\n          [styles.icon(this.theme)]: true,\n          [styles.iconsmall(this.theme)]: size === 'small',\n          [styles.iconmedium(this.theme)]: size === 'medium',\n          [styles.iconlarge(this.theme)]: size === 'large',\n        })}\n      >\n        {icon}\n      </div>\n    );\n  }\n\n  private renderIcon2022() {\n    const { size, icon = <KebabIcon /> } = this.getProps();\n\n    if (isElement(icon) && isKonturIcon(icon)) {\n      const sizes: Record<ButtonSize, number> = {\n        small: parseInt(this.theme.kebabIconSizeSmall),\n        medium: parseInt(this.theme.kebabIconSizeMedium),\n        large: parseInt(this.theme.kebabIconSizeLarge),\n      };\n\n      return React.cloneElement(icon, {\n        size: icon.props.size ?? sizes[size],\n        color: icon.props.color ?? this.theme.kebabIconColor,\n      });\n    }\n\n    return icon;\n  }\n}\n\nKebab.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /**\n   * Размер кебаба small 14px | large 20px\n   */\n  size: PropTypes.string,\n\n  /**\n   * Коллбек, вызывающийся перед закрытием кебаба\n   */\n  onClose: PropTypes.func,\n\n  /**\n   * Коллбек, вызывающийся перед открытием кебаба\n   */\n  onOpen: PropTypes.func,\n};\n"]}

package/components/Kebab/Kebab.d.ts

@@ -1,53 +1,50 @@
-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 {
+export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId'> {
     disabled?: boolean;
+    size?: 'small' | 'medium' | 'large';
     /**
-     * Функция вызываемая при закрытии выпадашки
-     * @default () => undefined
+     * Список позиций доступных для расположения выпадашки.
+     *
+     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.
+     *
+     * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`
+     * @default ['bottom left', 'bottom right', 'top left', 'top right']
      */
-    onClose: () => void;
+    positions?: PopupPositionsType[];
+    menuMaxHeight?: number | string;
     /**
-     * Функция вызываемая при открытии выпадашки
-     * @default () => undefined
+     * Не показывать анимацию
      */
-    onOpen: () => void;
-    size: 'small' | 'medium' | 'large';
+    disableAnimations?: boolean;
     /**
-     * Список позиций доступных для расположения выпадашки
-     * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использоваться первая из этого списка
-     * @default ['bottom left', 'bottom right', 'top left', 'top right']
+     * Кастомная иконка
      */
-    positions: PopupPosition[];
-    menuMaxHeight?: number | string;
+    icon?: React.ReactNode;
     /**
-     * Не показывать анимацию
+     * Атрибут для указания id элемента(-ов), описывающих его
      */
-    disableAnimations: boolean;
+    '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;
-    };
-    state: {
-        opened: boolean;
-        focusedByTab: boolean;
-        anchor: null;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: KebabState;
     private theme;
+    private setRootNode;
     private listener;
     componentDidMount(): void;
     componentWillUnmount(): void;
@@ -59,4 +56,6 @@ export declare class Kebab extends React.Component<KebabProps, KebabState> {
     private handleFocus;
     private handleBlur;
     private renderIcon;
+    private renderIcon2022;
 }
+export {};