@skbkontur/react-ui 4.14.0-next.1 → 4.14.1

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

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { InputDataTids } from "../../Input";
+import { CommonWrapper } from "../../../../internal/CommonWrapper";
+import { InputLayoutAside } from "../InputLayoutAside";
+import { InputLayoutContext, InputLayoutContextDefault } from "../InputLayoutContext";
+import { stylesLayout } from "../InputLayout.styles";
+export var InputLayout = function InputLayout(props) {
+  var leftIcon = props.leftIcon,
+      rightIcon = props.rightIcon,
+      prefix = props.prefix,
+      suffix = props.suffix,
+      labelProps = props.labelProps,
+      context = props.context,
+      children = props.children;
+
+  var _context = _extends({}, InputLayoutContextDefault, context);
+
+  return /*#__PURE__*/React.createElement(InputLayoutContext.Provider, {
+    value: _context
+  }, /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("label", _extends({
+    "data-tid": InputDataTids.root
+  }, labelProps), /*#__PURE__*/React.createElement(InputLayoutAside, {
+    icon: leftIcon,
+    text: prefix,
+    side: "left"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: stylesLayout.input()
+  }, children), /*#__PURE__*/React.createElement(InputLayoutAside, {
+    icon: rightIcon,
+    text: suffix,
+    side: "right"
+  }))));
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayout.tsx"],"names":["React","InputDataTids","CommonWrapper","InputLayoutAside","InputLayoutContext","InputLayoutContextDefault","stylesLayout","InputLayout","props","leftIcon","rightIcon","prefix","suffix","labelProps","context","children","_context","root","input"],"mappings":"0DAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,aAAT,QAA0C,UAA1C;AACA,SAASC,aAAT,QAA8B,iCAA9B;;AAEA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,kBAAT,EAA6BC,yBAA7B,QAAuF,sBAAvF;AACA,SAASC,YAAT,QAA6B,sBAA7B;;;;;;;;;AASA,OAAO,IAAMC,WAA0D,GAAG,SAA7DA,WAA6D,CAACC,KAAD,EAAW;AACnF,MAAQC,QAAR,GAA+ED,KAA/E,CAAQC,QAAR,CAAkBC,SAAlB,GAA+EF,KAA/E,CAAkBE,SAAlB,CAA6BC,MAA7B,GAA+EH,KAA/E,CAA6BG,MAA7B,CAAqCC,MAArC,GAA+EJ,KAA/E,CAAqCI,MAArC,CAA6CC,UAA7C,GAA+EL,KAA/E,CAA6CK,UAA7C,CAAyDC,OAAzD,GAA+EN,KAA/E,CAAyDM,OAAzD,CAAkEC,QAAlE,GAA+EP,KAA/E,CAAkEO,QAAlE;AACA,MAAMC,QAAiC,gBAAQX,yBAAR,EAAsCS,OAAtC,CAAvC;;AAEA;AACE,wBAAC,kBAAD,CAAoB,QAApB,IAA6B,KAAK,EAAEE,QAApC;AACE,wBAAC,aAAD,EAAmBR,KAAnB;AACE,4CAAO,YAAUP,aAAa,CAACgB,IAA/B,IAAyCJ,UAAzC;AACE,wBAAC,gBAAD,IAAkB,IAAI,EAAEJ,QAAxB,EAAkC,IAAI,EAAEE,MAAxC,EAAgD,IAAI,EAAC,MAArD,GADF;AAEE,kCAAM,SAAS,EAAEL,YAAY,CAACY,KAAb,EAAjB,IAAwCH,QAAxC,CAFF;AAGE,wBAAC,gBAAD,IAAkB,IAAI,EAAEL,SAAxB,EAAmC,IAAI,EAAEE,MAAzC,EAAiD,IAAI,EAAC,OAAtD,GAHF,CADF,CADF,CADF;;;;;AAWD,CAfM","sourcesContent":["import React from 'react';\n\nimport { InputDataTids, InputProps } from '../Input';\nimport { CommonWrapper } from '../../../internal/CommonWrapper';\n\nimport { InputLayoutAside } from './InputLayoutAside';\nimport { InputLayoutContext, InputLayoutContextDefault, InputLayoutContextProps } from './InputLayoutContext';\nimport { stylesLayout } from './InputLayout.styles';\n\ntype InputLayoutRootFromInputProps = Pick<InputProps, 'leftIcon' | 'rightIcon' | 'prefix' | 'suffix'>;\n\nexport interface InputLayoutRootProps extends InputLayoutRootFromInputProps {\n  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;\n  context: Partial<InputLayoutContextProps>;\n}\n\nexport const InputLayout: React.FunctionComponent<InputLayoutRootProps> = (props) => {\n  const { leftIcon, rightIcon, prefix, suffix, labelProps, context, children } = props;\n  const _context: InputLayoutContextProps = { ...InputLayoutContextDefault, ...context };\n\n  return (\n    <InputLayoutContext.Provider value={_context}>\n      <CommonWrapper {...props}>\n        <label data-tid={InputDataTids.root} {...labelProps}>\n          <InputLayoutAside icon={leftIcon} text={prefix} side=\"left\" />\n          <span className={stylesLayout.input()}>{children}</span>\n          <InputLayoutAside icon={rightIcon} text={suffix} side=\"right\" />\n        </label>\n      </CommonWrapper>\n    </InputLayoutContext.Provider>\n  );\n};\n"]}

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InputProps } from '../Input';
+import { InputLayoutContextProps } from './InputLayoutContext';
+declare type InputLayoutRootFromInputProps = Pick<InputProps, 'leftIcon' | 'rightIcon' | 'prefix' | 'suffix'>;
+export interface InputLayoutRootProps extends InputLayoutRootFromInputProps {
+    labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
+    context: Partial<InputLayoutContextProps>;
+}
+export declare const InputLayout: React.FunctionComponent<InputLayoutRootProps>;
+export {};

package/components/Input/InputLayout/InputLayout.styles/InputLayout.styles.js

@@ -0,0 +1,32 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+import { css, memoizeStyle } from "../../../../lib/theming/Emotion";
+import { styles } from "../../Input.styles";
+export var stylesLayout = memoizeStyle({
+  root: function root(t) {
+    return styles.root(t);
+  },
+  input: function input() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      min-width: 0;\n      overflow: hidden;\n      position: relative;\n      width: 100%;\n      display: flex;\n    "])));
+  },
+  aside: function aside() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      flex-shrink: 0;\n    "])));
+  },
+  icon: function icon(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputIconColor);
+  },
+  iconFocus: function iconFocus(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputFocusedIconColor);
+  },
+  iconDisabled: function iconDisabled() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+  },
+  text: function text(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputPlaceholderColor);
+  },
+  textDisabled: function textDisabled(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputPlaceholderColorDisabled);
+  }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayout.styles.ts"],"names":["css","memoizeStyle","styles","stylesLayout","root","t","input","aside","icon","inputIconColor","iconFocus","inputFocusedIconColor","iconDisabled","text","inputPlaceholderColor","textDisabled","inputPlaceholderColorDisabled"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,8BAAlC;;AAEA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,OAAO,IAAMC,YAAY,GAAGF,YAAY,CAAC;AACvCG,EAAAA,IADuC,gBAClCC,CADkC,EACxB;AACb,WAAOH,MAAM,CAACE,IAAP,CAAYC,CAAZ,CAAP;AACD,GAHsC;AAIvCC,EAAAA,KAJuC,mBAI/B;AACN,WAAON,GAAP;;;;;;;AAOD,GAZsC;AAavCO,EAAAA,KAbuC,mBAa/B;AACN,WAAOP,GAAP;;;;;AAKD,GAnBsC;AAoBvCQ,EAAAA,IApBuC,gBAoBlCH,CApBkC,EAoBxB;AACb,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACI,cADb;;AAGD,GAxBsC;AAyBvCC,EAAAA,SAzBuC,qBAyB7BL,CAzB6B,EAyBnB;AAClB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACM,qBADb;;AAGD,GA7BsC;AA8BvCC,EAAAA,YA9BuC,0BA8BxB;AACb,WAAOZ,GAAP;;;AAGD,GAlCsC;AAmCvCa,EAAAA,IAnCuC,gBAmClCR,CAnCkC,EAmCxB;AACb,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACS,qBADb;;AAGD,GAvCsC;AAwCvCC,EAAAA,YAxCuC,wBAwC1BV,CAxC0B,EAwChB;AACrB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACW,6BADb;;AAGD,GA5CsC,EAAD,CAAjC","sourcesContent":["import { css, memoizeStyle } from '../../../lib/theming/Emotion';\nimport { Theme } from '../../../lib/theming/Theme';\nimport { styles } from '../Input.styles';\n\nexport const stylesLayout = memoizeStyle({\n  root(t: Theme) {\n    return styles.root(t);\n  },\n  input() {\n    return css`\n      min-width: 0;\n      overflow: hidden;\n      position: relative;\n      width: 100%;\n      display: flex;\n    `;\n  },\n  aside() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      flex-shrink: 0;\n    `;\n  },\n  icon(t: Theme) {\n    return css`\n      color: ${t.inputIconColor};\n    `;\n  },\n  iconFocus(t: Theme) {\n    return css`\n      color: ${t.inputFocusedIconColor};\n    `;\n  },\n  iconDisabled() {\n    return css`\n      cursor: default;\n    `;\n  },\n  text(t: Theme) {\n    return css`\n      color: ${t.inputPlaceholderColor};\n    `;\n  },\n  textDisabled(t: Theme) {\n    return css`\n      color: ${t.inputPlaceholderColorDisabled};\n    `;\n  },\n});\n"]}

package/components/Input/InputLayout/InputLayout.styles/package.json

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

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

@@ -0,0 +1,11 @@
+import { Theme } from '../../../lib/theming/Theme';
+export declare const stylesLayout: {
+    root(t: Theme): string;
+    input(): string;
+    aside(): string;
+    icon(t: Theme): string;
+    iconFocus(t: Theme): string;
+    iconDisabled(): string;
+    text(t: Theme): string;
+    textDisabled(t: Theme): string;
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ZERO_WIDTH_SPACE } from "../../../../lib/chars";
+import { stylesLayout } from "../InputLayout.styles";
+import { InputLayoutAsideIcon } from "../InputLayoutAsideIcon";
+import { InputLayoutAsideText } from "../InputLayoutAsideText";
+export 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 = stylesLayout.aside();
+
+  var _icon = /*#__PURE__*/React.createElement(InputLayoutAsideIcon, {
+    key: "icon",
+    icon: icon,
+    side: side
+  });
+
+  var _text = /*#__PURE__*/React.createElement(InputLayoutAsideText, {
+    key: "text",
+    text: text
+  });
+
+  var child = side === 'left' ? [_icon, _text] : [_text, _icon];
+  return /*#__PURE__*/React.createElement("span", {
+    className: asideClassName
+  }, ZERO_WIDTH_SPACE, child);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutAside.tsx"],"names":["React","ZERO_WIDTH_SPACE","stylesLayout","InputLayoutAsideIcon","InputLayoutAsideText","InputLayoutAside","icon","text","side","asideClassName","aside","_icon","_text","child"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,gBAAT,QAAiC,oBAAjC;;AAEA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SAASC,oBAAT,QAAqC,wBAArC;AACA,SAASC,oBAAT,QAAqC,wBAArC;;;;;;;;AAQA,OAAO,IAAMC,gBAAgE,GAAG,SAAnEA,gBAAmE,OAAiC,sBAA9BC,IAA8B,CAA9BA,IAA8B,0BAAvB,IAAuB,aAAjBC,IAAiB,QAAjBA,IAAiB,CAAXC,IAAW,QAAXA,IAAW;AAC/G,MAAMC,cAAc,GAAGP,YAAY,CAACQ,KAAb,EAAvB;;AAEA,MAAMC,KAAK,gBAAG,oBAAC,oBAAD,IAAsB,GAAG,EAAC,MAA1B,EAAiC,IAAI,EAAEL,IAAvC,EAA6C,IAAI,EAAEE,IAAnD,GAAd;AACA,MAAMI,KAAK,gBAAG,oBAAC,oBAAD,IAAsB,GAAG,EAAC,MAA1B,EAAiC,IAAI,EAAEL,IAAvC,GAAd;;AAEA,MAAMM,KAAK,GAAGL,IAAI,KAAK,MAAT,GAAkB,CAACG,KAAD,EAAQC,KAAR,CAAlB,GAAmC,CAACA,KAAD,EAAQD,KAAR,CAAjD;;AAEA;AACE,kCAAM,SAAS,EAAEF,cAAjB;AACGR,IAAAA,gBADH;AAEGY,IAAAA,KAFH,CADF;;;AAMD,CAdM","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/components/Input/InputLayout/InputLayoutAside/package.json

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { InputProps } from '../Input';
+export interface InputLayoutAsideProps {
+    icon: InputProps['leftIcon'] | InputProps['rightIcon'];
+    text: InputProps['prefix'] | InputProps['suffix'];
+    side: 'left' | 'right';
+}
+export declare const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps>;

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

@@ -0,0 +1,36 @@
+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 InputLayoutAsideIcon = function InputLayoutAsideIcon(_ref) {
+  var _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? null : _ref$icon,
+      side = _ref.side;
+  var theme = React.useContext(ThemeContext);
+
+  var _React$useContext = React.useContext(InputLayoutContext),
+      focused = _React$useContext.focused,
+      disabled = _React$useContext.disabled,
+      size = _React$useContext.size;
+
+  var gaps = {
+    small: parseInt(theme.inputIconGapSmall),
+    medium: parseInt(theme.inputIconGapMedium),
+    large: parseInt(theme.inputIconGapLarge)
+  };
+  var style = {};
+
+  if (side) {
+    if (side === 'right') {
+      style.marginLeft = gaps[size];
+    } else {
+      style.marginRight = gaps[size];
+    }
+  }
+
+  return icon && /*#__PURE__*/React.createElement("span", {
+    style: style,
+    className: cx(stylesLayout.aside(), stylesLayout.icon(theme), focused && stylesLayout.iconFocus(theme), disabled && stylesLayout.iconDisabled())
+  }, icon);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayoutAsideIcon.tsx"],"names":["React","cx","ThemeContext","InputLayoutContext","stylesLayout","InputLayoutAsideIcon","icon","side","theme","useContext","focused","disabled","size","gaps","small","parseInt","inputIconGapSmall","medium","inputIconGapMedium","large","inputIconGapLarge","style","marginLeft","marginRight","aside","iconFocus","iconDisabled"],"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;;;;;;;AAOA,OAAO,IAAMC,oBAAwE,GAAG,SAA3EA,oBAA2E,OAA2B,sBAAxBC,IAAwB,CAAxBA,IAAwB,0BAAjB,IAAiB,aAAXC,IAAW,QAAXA,IAAW;AACjH,MAAMC,KAAK,GAAGR,KAAK,CAACS,UAAN,CAAiBP,YAAjB,CAAd;AACA,0BAAoCF,KAAK,CAACS,UAAN,CAAiBN,kBAAjB,CAApC,CAAQO,OAAR,qBAAQA,OAAR,CAAiBC,QAAjB,qBAAiBA,QAAjB,CAA2BC,IAA3B,qBAA2BA,IAA3B;;AAEA,MAAMC,IAA+B,GAAG;AACtCC,IAAAA,KAAK,EAAEC,QAAQ,CAACP,KAAK,CAACQ,iBAAP,CADuB;AAEtCC,IAAAA,MAAM,EAAEF,QAAQ,CAACP,KAAK,CAACU,kBAAP,CAFsB;AAGtCC,IAAAA,KAAK,EAAEJ,QAAQ,CAACP,KAAK,CAACY,iBAAP,CAHuB,EAAxC;;;AAMA,MAAMC,KAA0B,GAAG,EAAnC;AACA,MAAId,IAAJ,EAAU;AACR,QAAIA,IAAI,KAAK,OAAb,EAAsB;AACpBc,MAAAA,KAAK,CAACC,UAAN,GAAmBT,IAAI,CAACD,IAAD,CAAvB;AACD,KAFD,MAEO;AACLS,MAAAA,KAAK,CAACE,WAAN,GAAoBV,IAAI,CAACD,IAAD,CAAxB;AACD;AACF;;AAED;AACEN,IAAAA,IAAI;AACF;AACE,MAAA,KAAK,EAAEe,KADT;AAEE,MAAA,SAAS,EAAEpB,EAAE;AACXG,MAAAA,YAAY,CAACoB,KAAb,EADW;AAEXpB,MAAAA,YAAY,CAACE,IAAb,CAAkBE,KAAlB,CAFW;AAGXE,MAAAA,OAAO,IAAIN,YAAY,CAACqB,SAAb,CAAuBjB,KAAvB,CAHA;AAIXG,MAAAA,QAAQ,IAAIP,YAAY,CAACsB,YAAb,EAJD,CAFf;;;AASGpB,IAAAA,IATH,CAFJ;;;;AAeD,CAlCM","sourcesContent":["import React from 'react';\n\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';\n\nexport interface InputLayoutAsideIconProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps> = ({ icon = null, side }) => {\n  const theme = React.useContext(ThemeContext);\n  const { focused, disabled, size } = React.useContext(InputLayoutContext);\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  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/components/Input/InputLayout/InputLayoutAsideIcon/package.json

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

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/Kebab/Kebab/Kebab.js

@@ -17,10 +17,9 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { styles } from "../Kebab.styles";
-export var KebabDataTids = {
-  caption: 'Kebab__caption'
-};
+import { KebabIcon } from "../KebabIcon";
 export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Kebab, _React$Component);
 
@@ -44,9 +43,9 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     };
 
     _this.renderCaption = function (captionProps) {
-      var _cx;
-
-      var disabled = _this.props.disabled;
+      var _this$getProps = _this.getProps(),
+          disabled = _this$getProps.disabled,
+          size = _this$getProps.size;
 
       var handleCaptionKeyDown = function handleCaptionKeyDown(event) {
         if (!disabled) {
@@ -61,15 +60,14 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       };
 
       return /*#__PURE__*/React.createElement("span", {
-        "data-tid": KebabDataTids.caption,
         tabIndex: disabled ? -1 : 0,
         onClick: handleCaptionClick,
         onKeyDown: handleCaptionKeyDown,
         onFocus: _this.handleFocus,
         onBlur: _this.handleBlur,
-        className: cx((_cx = {}, _cx[styles.kebab(_this.theme)] = true, _cx[styles.opened(_this.theme)] = captionProps.opened, _cx[styles.disabled()] = disabled, _cx[styles.focused(_this.theme)] = _this.state.focusedByTab, _cx)),
+        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']
-      }, _this.renderIcon());
+      }, isTheme2022(_this.theme) ? _this.renderIcon2022() : _this.renderIcon());
     };
 
     _this.handleCaptionKeyDown = function (e, openMenu) {
@@ -139,11 +137,11 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   _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;
+    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
@@ -155,23 +153,34 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       disableAnimations: disableAnimations,
       menuMaxHeight: this.props.menuMaxHeight,
       onOpen: onOpen,
-      onClose: onClose,
-      popupMenuId: this.props.popupMenuId
+      onClose: onClose
     }, !disabled && this.props.children));
   };
 
   _proto.renderIcon = function renderIcon() {
-    var _cx2;
+    var _cx;
 
-    var _this$getProps2 = this.getProps(),
-        size = _this$getProps2.size,
-        icon = _this$getProps2.icon;
+    var _this$getProps3 = this.getProps(),
+        size = _this$getProps3.size,
+        _this$getProps3$icon = _this$getProps3.icon,
+        icon = _this$getProps3$icon === void 0 ? /*#__PURE__*/React.createElement(MenuKebabIcon, null) : _this$getProps3$icon;
 
     return /*#__PURE__*/React.createElement("div", {
-      className: cx((_cx2 = {}, _cx2[styles.icon()] = true, _cx2[styles.iconsmall()] = size === 'small', _cx2[styles.iconmedium()] = size === 'medium', _cx2[styles.iconlarge()] = size === 'large', _cx2))
+      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,
+        icon = _this$getProps4.icon;
+
+    return icon != null ? icon : /*#__PURE__*/React.createElement(KebabIcon, {
+      size: size,
+      color: this.theme.kebabIconColor
+    });
+  };
+
   return Kebab;
 }(React.Component), _class2.__KONTUR_REACT_UI__ = 'Kebab', _class2.propTypes = {}, _class2.defaultProps = {
   onOpen: function onOpen() {
@@ -182,8 +191,7 @@ export var Kebab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   },
   positions: ['bottom left', 'bottom right', 'top left', 'top right'],
   size: 'small',
-  disableAnimations: isTestEnv,
-  icon: /*#__PURE__*/React.createElement(MenuKebabIcon, null)
+  disableAnimations: isTestEnv
 }, _temp)) || _class;
 Kebab.propTypes = {
   children: PropTypes.node,

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

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.tsx"],"names":["React","PropTypes","isKeyArrowVertical","isKeyEnter","isKeySpace","someKeys","LayoutEvents","keyListener","PopupMenu","ThemeContext","MenuKebabIcon","isTestEnv","ThemeFactory","CommonWrapper","cx","rootNode","createPropsGetter","styles","KebabDataTids","caption","Kebab","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","kebab","theme","opened","focused","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","size","icon","iconsmall","iconmedium","iconlarge","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';\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' | '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<\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          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 } = 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        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)]: true,\n          [styles.opened(this.theme)]: captionProps.opened,\n          [styles.disabled()]: disabled,\n          [styles.focused(this.theme)]: this.state.focusedByTab,\n        })}\n        aria-describedby={this.props['aria-describedby']}\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":["React","PropTypes","isKeyArrowVertical","isKeyEnter","isKeySpace","someKeys","LayoutEvents","keyListener","PopupMenu","ThemeContext","MenuKebabIcon","isTestEnv","ThemeFactory","CommonWrapper","cx","rootNode","createPropsGetter","isTheme2022","styles","KebabIcon","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","children","icon","iconsmall","iconmedium","iconlarge","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';\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';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './Kebab.styles';\nimport { KebabIcon } from './KebabIcon';\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   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\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        >\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        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 } = this.getProps();\n\n    return icon ?? <KebabIcon size={size} color={this.theme.kebabIconColor} />;\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

@@ -3,7 +3,7 @@ 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' | 'popupMenuId'> {
+export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
     disabled?: boolean;
     size?: 'small' | 'medium' | 'large';
     /**
@@ -29,14 +29,11 @@ export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' |
      */
     '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: {};
@@ -56,5 +53,6 @@ export declare class Kebab extends React.Component<KebabProps, KebabState> {
     private handleFocus;
     private handleBlur;
     private renderIcon;
+    private renderIcon2022;
 }
 export {};