@skbkontur/react-ui 0.0.0-8ea1692541 → 0.0.0-942b5aade9

package/cjs/components/Input/InputLayout/InputLayoutAside.js

@@ -0,0 +1,30 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.InputLayoutAside = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+var _chars = require("../../../lib/chars");
+
+var _InputLayout = require("./InputLayout.styles");
+var _InputLayoutAsideIcon = require("./InputLayoutAsideIcon");
+var _InputLayoutAsideText = require("./InputLayoutAsideText");
+
+
+
+
+
+
+
+var InputLayoutAside = function InputLayoutAside(_ref) {var _ref$icon = _ref.icon,icon = _ref$icon === void 0 ? null : _ref$icon,text = _ref.text,side = _ref.side;
+  var asideClassName = _InputLayout.stylesLayout.aside();
+
+  var _icon = /*#__PURE__*/_react.default.createElement(_InputLayoutAsideIcon.InputLayoutAsideIcon, { key: "icon", icon: icon, side: side });
+  var _text = /*#__PURE__*/_react.default.createElement(_InputLayoutAsideText.InputLayoutAsideText, { key: "text", text: text });
+
+  var child = side === 'left' ? [_icon, _text] : [_text, _icon];
+
+  return /*#__PURE__*/(
+    _react.default.createElement("span", { className: asideClassName },
+    _chars.ZERO_WIDTH_SPACE,
+    child));
+
+
+};exports.InputLayoutAside = InputLayoutAside;

package/cjs/components/Input/InputLayout/InputLayoutAside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutAside.tsx"],"names":["InputLayoutAside","icon","text","side","asideClassName","stylesLayout","aside","_icon","_text","child","ZERO_WIDTH_SPACE"],"mappings":"8JAAA;;;AAGA;;AAEA;AACA;AACA;;;;;;;;AAQO,IAAMA,gBAAgE,GAAG,SAAnEA,gBAAmE,OAAiC,sBAA9BC,IAA8B,CAA9BA,IAA8B,0BAAvB,IAAuB,aAAjBC,IAAiB,QAAjBA,IAAiB,CAAXC,IAAW,QAAXA,IAAW;AAC/G,MAAMC,cAAc,GAAGC,0BAAaC,KAAb,EAAvB;;AAEA,MAAMC,KAAK,gBAAG,6BAAC,0CAAD,IAAsB,GAAG,EAAC,MAA1B,EAAiC,IAAI,EAAEN,IAAvC,EAA6C,IAAI,EAAEE,IAAnD,GAAd;AACA,MAAMK,KAAK,gBAAG,6BAAC,0CAAD,IAAsB,GAAG,EAAC,MAA1B,EAAiC,IAAI,EAAEN,IAAvC,GAAd;;AAEA,MAAMO,KAAK,GAAGN,IAAI,KAAK,MAAT,GAAkB,CAACI,KAAD,EAAQC,KAAR,CAAlB,GAAmC,CAACA,KAAD,EAAQD,KAAR,CAAjD;;AAEA;AACE,2CAAM,SAAS,EAAEH,cAAjB;AACGM,2BADH;AAEGD,IAAAA,KAFH,CADF;;;AAMD,CAdM,C","sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { ZERO_WIDTH_SPACE } from '../../../lib/chars';\n\nimport { stylesLayout } from './InputLayout.styles';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon';\nimport { InputLayoutAsideText } from './InputLayoutAsideText';\n\nexport interface InputLayoutAsideProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  text: InputProps['prefix'] | InputProps['suffix'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps> = ({ icon = null, text, side }) => {\n  const asideClassName = stylesLayout.aside();\n\n  const _icon = <InputLayoutAsideIcon key=\"icon\" icon={icon} side={side} />;\n  const _text = <InputLayoutAsideText key=\"text\" text={text} />;\n\n  const child = side === 'left' ? [_icon, _text] : [_text, _icon];\n\n  return (\n    <span className={asideClassName}>\n      {ZERO_WIDTH_SPACE}\n      {child}\n    </span>\n  );\n};\n"]}

package/cjs/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/cjs/components/Input/InputLayout/InputLayoutAsideIcon.js

@@ -0,0 +1,60 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.InputLayoutAsideIcon = void 0;var _react = _interopRequireDefault(require("react"));
+var _reactIs = require("react-is");
+
+var _utils = require("../../../lib/utils");
+
+var _Emotion = require("../../../lib/theming/Emotion");
+var _ThemeContext = require("../../../lib/theming/ThemeContext");
+
+var _InputLayoutContext = require("./InputLayoutContext");
+var _InputLayout = require("./InputLayout.styles");
+
+
+
+
+
+var InputLayoutAsideIcon = function InputLayoutAsideIcon(_ref) {var icon = _ref.icon,side = _ref.side;
+  var theme = _react.default.useContext(_ThemeContext.ThemeContext);
+  var _React$useContext = _react.default.useContext(_InputLayoutContext.InputLayoutContext),focused = _React$useContext.focused,disabled = _React$useContext.disabled,size = _React$useContext.size;
+
+  var sizes = {
+    small: parseInt(theme.inputIconSizeSmall),
+    medium: parseInt(theme.inputIconSizeMedium),
+    large: parseInt(theme.inputIconSizeLarge) };
+
+  var gaps = {
+    small: parseInt(theme.inputIconGapSmall),
+    medium: parseInt(theme.inputIconGapMedium),
+    large: parseInt(theme.inputIconGapLarge) };
+
+
+  var _icon = null;
+  if (icon && (0, _reactIs.isElement)(icon)) {var _icon$props$size;
+    _icon = (0, _utils.isKonturIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, { size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[size] }) : icon;
+  }
+
+  var style = {};
+  if (side) {
+    if (side === 'right') {
+      style.marginLeft = gaps[size];
+    } else {
+      style.marginRight = gaps[size];
+    }
+  }
+
+  return (
+    _icon && /*#__PURE__*/
+    _react.default.createElement("span", {
+      style: style,
+      className: (0, _Emotion.cx)(
+      _InputLayout.stylesLayout.aside(),
+      _InputLayout.stylesLayout.icon(theme),
+      focused && _InputLayout.stylesLayout.iconFocus(theme),
+      disabled && _InputLayout.stylesLayout.iconDisabled()) },
+
+
+    _icon));
+
+
+
+};exports.InputLayoutAsideIcon = InputLayoutAsideIcon;

package/cjs/components/Input/InputLayout/InputLayoutAsideIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutAsideIcon.tsx"],"names":["InputLayoutAsideIcon","icon","side","theme","React","useContext","ThemeContext","InputLayoutContext","focused","disabled","size","sizes","small","parseInt","inputIconSizeSmall","medium","inputIconSizeMedium","large","inputIconSizeLarge","gaps","inputIconGapSmall","inputIconGapMedium","inputIconGapLarge","_icon","cloneElement","props","style","marginLeft","marginRight","stylesLayout","aside","iconFocus","iconDisabled"],"mappings":"kKAAA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;;;;;;AAMO,IAAMA,oBAAwE,GAAG,SAA3EA,oBAA2E,OAAoB,KAAjBC,IAAiB,QAAjBA,IAAiB,CAAXC,IAAW,QAAXA,IAAW;AAC1G,MAAMC,KAAK,GAAGC,eAAMC,UAAN,CAAiBC,0BAAjB,CAAd;AACA,0BAAoCF,eAAMC,UAAN,CAAiBE,sCAAjB,CAApC,CAAQC,OAAR,qBAAQA,OAAR,CAAiBC,QAAjB,qBAAiBA,QAAjB,CAA2BC,IAA3B,qBAA2BA,IAA3B;;AAEA,MAAMC,KAAgC,GAAG;AACvCC,IAAAA,KAAK,EAAEC,QAAQ,CAACV,KAAK,CAACW,kBAAP,CADwB;AAEvCC,IAAAA,MAAM,EAAEF,QAAQ,CAACV,KAAK,CAACa,mBAAP,CAFuB;AAGvCC,IAAAA,KAAK,EAAEJ,QAAQ,CAACV,KAAK,CAACe,kBAAP,CAHwB,EAAzC;;AAKA,MAAMC,IAA+B,GAAG;AACtCP,IAAAA,KAAK,EAAEC,QAAQ,CAACV,KAAK,CAACiB,iBAAP,CADuB;AAEtCL,IAAAA,MAAM,EAAEF,QAAQ,CAACV,KAAK,CAACkB,kBAAP,CAFsB;AAGtCJ,IAAAA,KAAK,EAAEJ,QAAQ,CAACV,KAAK,CAACmB,iBAAP,CAHuB,EAAxC;;;AAMA,MAAIC,KAAK,GAAG,IAAZ;AACA,MAAItB,IAAI,IAAI,wBAAUA,IAAV,CAAZ,EAA6B;AAC3BsB,IAAAA,KAAK,GAAG,yBAAatB,IAAb,iBAAqBG,eAAMoB,YAAN,CAAmBvB,IAAnB,EAAyB,EAAES,IAAI,sBAAET,IAAI,CAACwB,KAAL,CAAWf,IAAb,+BAAqBC,KAAK,CAACD,IAAD,CAAhC,EAAzB,CAArB,GAA0FT,IAAlG;AACD;;AAED,MAAMyB,KAA0B,GAAG,EAAnC;AACA,MAAIxB,IAAJ,EAAU;AACR,QAAIA,IAAI,KAAK,OAAb,EAAsB;AACpBwB,MAAAA,KAAK,CAACC,UAAN,GAAmBR,IAAI,CAACT,IAAD,CAAvB;AACD,KAFD,MAEO;AACLgB,MAAAA,KAAK,CAACE,WAAN,GAAoBT,IAAI,CAACT,IAAD,CAAxB;AACD;AACF;;AAED;AACEa,IAAAA,KAAK;AACH;AACE,MAAA,KAAK,EAAEG,KADT;AAEE,MAAA,SAAS,EAAE;AACTG,gCAAaC,KAAb,EADS;AAETD,gCAAa5B,IAAb,CAAkBE,KAAlB,CAFS;AAGTK,MAAAA,OAAO,IAAIqB,0BAAaE,SAAb,CAAuB5B,KAAvB,CAHF;AAITM,MAAAA,QAAQ,IAAIoB,0BAAaG,YAAb,EAJH,CAFb;;;AASGT,IAAAA,KATH,CAFJ;;;;AAeD,CA5CM,C","sourcesContent":["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { isKonturIcon } from '../../../lib/utils';\nimport { InputProps, InputSize } from '../Input';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { stylesLayout } from './InputLayout.styles';\nexport interface InputLayoutAsideIconProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps> = ({ icon, side }) => {\n  const theme = React.useContext(ThemeContext);\n  const { focused, disabled, size } = React.useContext(InputLayoutContext);\n\n  const sizes: Record<InputSize, number> = {\n    small: parseInt(theme.inputIconSizeSmall),\n    medium: parseInt(theme.inputIconSizeMedium),\n    large: parseInt(theme.inputIconSizeLarge),\n  };\n  const gaps: Record<InputSize, number> = {\n    small: parseInt(theme.inputIconGapSmall),\n    medium: parseInt(theme.inputIconGapMedium),\n    large: parseInt(theme.inputIconGapLarge),\n  };\n\n  let _icon = null;\n  if (icon && isElement(icon)) {\n    _icon = isKonturIcon(icon) ? React.cloneElement(icon, { size: icon.props.size ?? sizes[size] }) : icon;\n  }\n\n  const style: React.CSSProperties = {};\n  if (side) {\n    if (side === 'right') {\n      style.marginLeft = gaps[size];\n    } else {\n      style.marginRight = gaps[size];\n    }\n  }\n\n  return (\n    _icon && (\n      <span\n        style={style}\n        className={cx(\n          stylesLayout.aside(),\n          stylesLayout.icon(theme),\n          focused && stylesLayout.iconFocus(theme),\n          disabled && stylesLayout.iconDisabled(),\n        )}\n      >\n        {_icon}\n      </span>\n    )\n  );\n};\n"]}

package/cjs/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/cjs/components/Input/InputLayout/InputLayoutAsideText.js

@@ -0,0 +1,27 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.InputLayoutAsideText = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+var _Emotion = require("../../../lib/theming/Emotion");
+var _ThemeContext = require("../../../lib/theming/ThemeContext");
+
+var _InputLayoutContext = require("./InputLayoutContext");
+var _InputLayout = require("./InputLayout.styles");
+
+
+
+
+
+var InputLayoutAsideText = function InputLayoutAsideText(_ref) {var _ref$text = _ref.text,text = _ref$text === void 0 ? null : _ref$text;
+  var theme = _react.default.useContext(_ThemeContext.ThemeContext);
+  var _React$useContext = _react.default.useContext(_InputLayoutContext.InputLayoutContext),disabled = _React$useContext.disabled;
+
+  var asideClassName = _InputLayout.stylesLayout.aside();
+
+  return (
+    text && /*#__PURE__*/
+    _react.default.createElement("span", { className: (0, _Emotion.cx)(asideClassName, _InputLayout.stylesLayout.text(theme), disabled && _InputLayout.stylesLayout.textDisabled(theme)) },
+    text));
+
+
+
+};exports.InputLayoutAsideText = InputLayoutAsideText;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutAsideText.tsx"],"names":["InputLayoutAsideText","text","theme","React","useContext","ThemeContext","InputLayoutContext","disabled","asideClassName","stylesLayout","aside","textDisabled"],"mappings":"kKAAA;;;AAGA;AACA;;AAEA;AACA;;;;;;AAMO,IAAMA,oBAAwE,GAAG,SAA3EA,oBAA2E,OAAqB,sBAAlBC,IAAkB,CAAlBA,IAAkB,0BAAX,IAAW;AAC3G,MAAMC,KAAK,GAAGC,eAAMC,UAAN,CAAiBC,0BAAjB,CAAd;AACA,0BAAqBF,eAAMC,UAAN,CAAiBE,sCAAjB,CAArB,CAAQC,QAAR,qBAAQA,QAAR;;AAEA,MAAMC,cAAc,GAAGC,0BAAaC,KAAb,EAAvB;;AAEA;AACET,IAAAA,IAAI;AACF,2CAAM,SAAS,EAAE,iBAAGO,cAAH,EAAmBC,0BAAaR,IAAb,CAAkBC,KAAlB,CAAnB,EAA6CK,QAAQ,IAAIE,0BAAaE,YAAb,CAA0BT,KAA1B,CAAzD,CAAjB;AACGD,IAAAA,IADH,CAFJ;;;;AAOD,CAbM,C","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/cjs/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/cjs/components/Input/InputLayout/InputLayoutContext.js

@@ -0,0 +1,17 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.InputLayoutContextDefault = exports.InputLayoutContext = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+
+
+
+
+
+
+
+var InputLayoutContextDefault = {
+  focused: false,
+  disabled: false,
+  size: 'small' };exports.InputLayoutContextDefault = InputLayoutContextDefault;
+
+
+var InputLayoutContext = /*#__PURE__*/_react.default.createContext(InputLayoutContextDefault);exports.InputLayoutContext = InputLayoutContext;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutContext.tsx"],"names":["InputLayoutContextDefault","focused","disabled","size","InputLayoutContext","React","createContext"],"mappings":"oMAAA;;;;;;;;;;AAUO,IAAMA,yBAAkD,GAAG;AAChEC,EAAAA,OAAO,EAAE,KADuD;AAEhEC,EAAAA,QAAQ,EAAE,KAFsD;AAGhEC,EAAAA,IAAI,EAAE,OAH0D,EAA3D,C;;;AAMA,IAAMC,kBAAkB,gBAAGC,eAAMC,aAAN,CAA6CN,yBAA7C,CAA3B,C","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/cjs/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/cjs/components/Input/InputLayout/PolyfillPlaceholder.js

@@ -0,0 +1,46 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PolyfillPlaceholder = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+var _Emotion = require("../../../lib/theming/Emotion");
+var _ThemeContext = require("../../../lib/theming/ThemeContext");
+var _Input = require("../Input.styles");
+var _needsPolyfillPlaceholder = require("../../../lib/needsPolyfillPlaceholder");
+
+var _InputLayoutContext = require("./InputLayoutContext");
+
+
+
+
+
+
+
+
+
+var PolyfillPlaceholder = function PolyfillPlaceholder(_ref)
+
+
+
+
+
+{var placeholder = _ref.children,align = _ref.align,value = _ref.value,defaultValue = _ref.defaultValue,isMaskVisible = _ref.isMaskVisible;
+  var theme = _react.default.useContext(_ThemeContext.ThemeContext);
+  var _React$useContext = _react.default.useContext(_InputLayoutContext.InputLayoutContext),focused = _React$useContext.focused,disabled = _React$useContext.disabled;
+
+  var _placeholder = null;
+
+  if (_needsPolyfillPlaceholder.needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {var _cx;
+    _placeholder = /*#__PURE__*/
+    _react.default.createElement("div", {
+      className: (0, _Emotion.cx)(_Input.styles.placeholder(theme), (_cx = {}, _cx[
+      _Input.styles.placeholderDisabled(theme)] = disabled, _cx[
+      _Input.styles.placeholderFocus(theme)] = focused, _cx)),
+
+      style: { textAlign: align || 'inherit' } },
+
+    placeholder);
+
+
+  }
+
+  return _placeholder;
+};exports.PolyfillPlaceholder = PolyfillPlaceholder;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["PolyfillPlaceholder.tsx"],"names":["PolyfillPlaceholder","placeholder","children","align","value","defaultValue","isMaskVisible","theme","React","useContext","ThemeContext","InputLayoutContext","focused","disabled","_placeholder","needsPolyfillPlaceholder","styles","placeholderDisabled","placeholderFocus","textAlign"],"mappings":"iKAAA;;;AAGA;AACA;AACA;AACA;;AAEA;;;;;;;;;;AAUO,IAAMA,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,GAAGC,eAAMC,UAAN,CAAiBC,0BAAjB,CAAd;AACA,0BAA8BF,eAAMC,UAAN,CAAiBE,sCAAjB,CAA9B,CAAQC,OAAR,qBAAQA,OAAR,CAAiBC,QAAjB,qBAAiBA,QAAjB;;AAEA,MAAIC,YAAY,GAAG,IAAnB;;AAEA,MAAIC,sDAA4Bd,WAA5B,IAA2C,CAACK,aAA5C,IAA6D,CAACF,KAA9D,IAAuE,CAACC,YAA5E,EAA0F;AACxFS,IAAAA,YAAY;AACV;AACE,MAAA,SAAS,EAAE,iBAAGE,cAAOf,WAAP,CAAmBM,KAAnB,CAAH;AACRS,oBAAOC,mBAAP,CAA2BV,KAA3B,CADQ,IAC4BM,QAD5B;AAERG,oBAAOE,gBAAP,CAAwBX,KAAxB,CAFQ,IAEyBK,OAFzB,OADb;;AAKE,MAAA,KAAK,EAAE,EAAEO,SAAS,EAAEhB,KAAK,IAAI,SAAtB,EALT;;AAOGF,IAAAA,WAPH,CADF;;;AAWD;;AAED,SAAOa,YAAP;AACD,CA3BM,C","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/cjs/components/Kebab/Kebab.d.ts

@@ -1,9 +1,9 @@
-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'> {
+export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'> {
     disabled?: boolean;
     size?: 'small' | 'medium' | 'large';
     /**
@@ -24,12 +24,19 @@ export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' |
      * Кастомная иконка
      */
     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' | 'icon'>>;
+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: {};
@@ -49,5 +56,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,6 +1,8 @@
-"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");exports.__esModule = true;exports.KebabDataTids = exports.Kebab = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIs = require("react-is");
 
+var _utils = require("../../lib/utils");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 var _keyListener = require("../../lib/events/keyListener");
@@ -16,9 +18,12 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
-var _Kebab = require("./Kebab.styles");var _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
+var _SSRSafe = require("../../lib/SSRSafe");
 
+var _Kebab = require("./Kebab.styles");
+var _KebabIcon = require("./KebabIcon");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
 
 
@@ -46,17 +51,25 @@ var _Kebab = require("./Kebab.styles");var _class, _class2, _temp;function _getR
 
 
 
+
+
+
+var KebabDataTids = {
+  caption: 'Kebab__caption' };exports.KebabDataTids = KebabDataTids;var
 
 
 
 
 
 
-Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Kebab, _React$Component);function Kebab() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
 
+Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Kebab, _React$Component);function Kebab() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
 
 
 
@@ -136,8 +149,10 @@ 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);
@@ -152,19 +167,26 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
       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: (0, _Emotion.cx)(
+          _Kebab.styles.kebab(_this.theme),
+          size === 'small' && _Kebab.styles.kebabSmall(_this.theme),
+          size === 'medium' && _Kebab.styles.kebabMedium(_this.theme),
+          size === 'large' && _Kebab.styles.kebabLarge(_this.theme),
+          (0, _ThemeHelpers.isTheme2022)(_this.theme) && _Kebab.styles.kebab2022(),
+          captionProps.opened && _Kebab.styles.opened(_this.theme),
+          disabled && _Kebab.styles.disabled(),
+          _this.state.focusedByTab && _Kebab.styles.focused(_this.theme)),
 
+          "aria-describedby": _this.props['aria-describedby'] },
 
-        _this.renderIcon()));
+        (0, _ThemeHelpers.isTheme2022)(_this.theme) ? _this.renderIcon2022() : _this.renderIcon()));
 
 
     };_this.
@@ -189,7 +211,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 () {
+        _SSRSafe.globalThat.requestAnimationFrame(function () {
           if (_keyListener.keyListener.isTabPressed) {
             _this.setState({ focusedByTab: true });
           }
@@ -201,23 +223,42 @@ 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 disabled = this.props.disabled;var _this$getProps = this.getProps(),positions = _this$getProps.positions,disableAnimations = _this$getProps.disableAnimations,onOpen = _this$getProps.onOpen,onClose = _this$getProps.onClose;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: true, positions: positions, onChangeMenuState: this.handleChangeMenuState, caption: this.renderCaption, disableAnimations: disableAnimations, menuMaxHeight: this.props.menuMaxHeight, onOpen: onOpen, onClose: onClose }, !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(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var disabled = this.props.disabled;var _this$getProps2 = this.getProps(),positions = _this$getProps2.positions,disableAnimations = _this$getProps2.disableAnimations,onOpen = _this$getProps2.onOpen,onClose = _this$getProps2.onClose;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: true, preventIconsOffset: this.props.preventIconsOffset, positions: positions, onChangeMenuState: this.handleChangeMenuState, caption: this.renderCaption, disableAnimations: disableAnimations, menuMaxHeight: this.props.menuMaxHeight, onOpen: onOpen, onClose: onClose, popupMenuId: this.props.popupMenuId }, !disabled && this.props.children));};_proto.
 
-  renderIcon = function renderIcon() {var _cx2;
-    var _this$getProps2 = this.getProps(),size = _this$getProps2.size,icon = _this$getProps2.icon;
+  renderIcon = function renderIcon() {var _cx;
+    var _this$getProps3 = this.getProps(),size = _this$getProps3.size,_this$getProps3$icon = _this$getProps3.icon,icon = _this$getProps3$icon === void 0 ? /*#__PURE__*/_react.default.createElement(_px.MenuKebabIcon, null) : _this$getProps3$icon;
     return /*#__PURE__*/(
       _react.default.createElement("div", {
-        className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
-        _Kebab.styles.icon()] = true, _cx2[
-        _Kebab.styles.iconsmall()] = size === 'small', _cx2[
-        _Kebab.styles.iconmedium()] = size === 'medium', _cx2[
-        _Kebab.styles.iconlarge()] = size === 'large', _cx2)) },
+        className: (0, _Emotion.cx)((_cx = {}, _cx[
+        _Kebab.styles.icon(this.theme)] = true, _cx[
+        _Kebab.styles.iconsmall(this.theme)] = size === 'small', _cx[
+        _Kebab.styles.iconmedium(this.theme)] = size === 'medium', _cx[
+        _Kebab.styles.iconlarge(this.theme)] = size === 'large', _cx)) },
 
 
       icon));
 
 
-  };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;
+  };_proto.
+
+  renderIcon2022 = function renderIcon2022() {
+    var _this$getProps4 = this.getProps(),size = _this$getProps4.size,_this$getProps4$icon = _this$getProps4.icon,icon = _this$getProps4$icon === void 0 ? /*#__PURE__*/_react.default.createElement(_KebabIcon.KebabIcon, null) : _this$getProps4$icon;
+
+    if ((0, _reactIs.isElement)(icon) && (0, _utils.isKonturIcon)(icon)) {var _icon$props$size, _icon$props$color;
+      var sizes = {
+        small: parseInt(this.theme.kebabIconSizeSmall),
+        medium: parseInt(this.theme.kebabIconSizeMedium),
+        large: parseInt(this.theme.kebabIconSizeLarge) };
+
+
+      return /*#__PURE__*/_react.default.cloneElement(icon, {
+        size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[size],
+        color: (_icon$props$color = icon.props.color) != null ? _icon$props$color : this.theme.kebabIconColor });
+
+    }
+
+    return icon;
+  };return Kebab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Kebab', _class2.propTypes = {}, _class2.defaultProps = { onOpen: function onOpen() {return undefined;}, onClose: function onClose() {return undefined;}, positions: ['bottom left', 'bottom right', 'top left', 'top right'], size: 'small', disableAnimations: _currentEnvironment.isTestEnv }, _temp)) || _class;exports.Kebab = Kebab;
 
 
 Kebab.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.tsx"],"names":["Kebab","rootNode","getProps","defaultProps","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","disableAnimations","onOpen","onClose","setRootNode","menuMaxHeight","children","size","icon","iconsmall","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","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';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\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\ntype DefaultProps = Required<\n  Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations' | 'icon'>\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: 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  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        >\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    const { size, icon } = this.getProps();\n    return (\n      <div\n        className={cx({\n          [styles.icon()]: true,\n          [styles.iconsmall()]: size === 'small',\n          [styles.iconmedium()]: size === 'medium',\n          [styles.iconlarge()]: size === 'large',\n        })}\n      >\n        {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","handleFocus","handleBlur","styles","kebab","theme","kebabSmall","kebabMedium","kebabLarge","kebab2022","opened","focused","props","renderIcon2022","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","globalThat","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","onOpen","onClose","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__","propTypes","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { isElement } from 'react-is';\n\nimport { isKonturIcon } from '../../lib/utils';\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps, PopupMenuProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ButtonSize } from '../Button';\nimport { globalThat } from '../../lib/SSRSafe';\n\nimport { styles } from './Kebab.styles';\nimport { KebabIcon } from './KebabIcon';\n\nexport interface KebabProps\n  extends CommonProps,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'> {\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          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        >\n          {!disabled && this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled, size } = this.getProps();\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!disabled) {\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\n      }\n    };\n\n    const handleCaptionClick = () => {\n      if (!disabled) {\n        captionProps.toggleMenu();\n      }\n    };\n\n    return (\n      <span\n        role=\"button\"\n        data-tid={KebabDataTids.caption}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCaptionClick}\n        onKeyDown={handleCaptionKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        className={cx(\n          styles.kebab(this.theme),\n          size === 'small' && styles.kebabSmall(this.theme),\n          size === 'medium' && styles.kebabMedium(this.theme),\n          size === 'large' && styles.kebabLarge(this.theme),\n          isTheme2022(this.theme) && styles.kebab2022(),\n          captionProps.opened && styles.opened(this.theme),\n          disabled && styles.disabled(),\n          this.state.focusedByTab && styles.focused(this.theme),\n        )}\n        aria-describedby={this.props['aria-describedby']}\n      >\n        {isTheme2022(this.theme) ? this.renderIcon2022() : this.renderIcon()}\n      </span>\n    );\n  };\n\n  private handleCaptionKeyDown = (\n    e: React.KeyboardEvent<HTMLDivElement>,\n    openMenu: PopupMenuCaptionProps['openMenu'],\n  ) => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      openMenu(true);\n    }\n  };\n\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n    this.setState({\n      focusedByTab: !isOpened && restoreFocus,\n    });\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalThat.requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      focusedByTab: false,\n    });\n  };\n\n  private renderIcon() {\n    const { size, icon = <MenuKebabIcon /> } = this.getProps();\n    return (\n      <div\n        className={cx({\n          [styles.icon(this.theme)]: true,\n          [styles.iconsmall(this.theme)]: size === 'small',\n          [styles.iconmedium(this.theme)]: size === 'medium',\n          [styles.iconlarge(this.theme)]: size === 'large',\n        })}\n      >\n        {icon}\n      </div>\n    );\n  }\n\n  private renderIcon2022() {\n    const { size, icon = <KebabIcon /> } = this.getProps();\n\n    if (isElement(icon) && isKonturIcon(icon)) {\n      const sizes: Record<ButtonSize, number> = {\n        small: parseInt(this.theme.kebabIconSizeSmall),\n        medium: parseInt(this.theme.kebabIconSizeMedium),\n        large: parseInt(this.theme.kebabIconSizeLarge),\n      };\n\n      return React.cloneElement(icon, {\n        size: icon.props.size ?? sizes[size],\n        color: icon.props.color ?? this.theme.kebabIconColor,\n      });\n    }\n\n    return icon;\n  }\n}\n\nKebab.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /**\n   * Размер кебаба small 14px | large 20px\n   */\n  size: PropTypes.string,\n\n  /**\n   * Коллбек, вызывающийся перед закрытием кебаба\n   */\n  onClose: PropTypes.func,\n\n  /**\n   * Коллбек, вызывающийся перед открытием кебаба\n   */\n  onOpen: PropTypes.func,\n};\n"]}

package/cjs/components/Kebab/Kebab.md

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