@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ccbe7cf017

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

@@ -0,0 +1,32 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.InputLayout = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireDefault(require("react"));
+
+var _Input = require("../Input");
+var _CommonWrapper = require("../../../internal/CommonWrapper");
+
+var _InputLayoutAside = require("./InputLayoutAside");
+var _InputLayoutContext = require("./InputLayoutContext");
+var _InputLayout = require("./InputLayout.styles");
+
+
+
+
+
+
+
+
+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 = (0, _extends2.default)({}, _InputLayoutContext.InputLayoutContextDefault, context);
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_InputLayoutContext.InputLayoutContext.Provider, { value: _context }, /*#__PURE__*/
+    _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
+    _react.default.createElement("label", (0, _extends2.default)({ "data-tid": _Input.InputDataTids.root }, labelProps), /*#__PURE__*/
+    _react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: leftIcon, text: prefix, side: "left" }), /*#__PURE__*/
+    _react.default.createElement("span", { className: _InputLayout.stylesLayout.input() }, children), /*#__PURE__*/
+    _react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: rightIcon, text: suffix, side: "right" })))));
+
+
+
+
+};exports.InputLayout = InputLayout;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayout.tsx"],"names":["InputLayout","props","leftIcon","rightIcon","prefix","suffix","labelProps","context","children","_context","InputLayoutContextDefault","InputDataTids","root","stylesLayout","input"],"mappings":"2OAAA;;AAEA;AACA;;AAEA;AACA;AACA;;;;;;;;;AASO,IAAMA,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,8BAAQC,6CAAR,EAAsCH,OAAtC,CAAvC;;AAEA;AACE,iCAAC,sCAAD,CAAoB,QAApB,IAA6B,KAAK,EAAEE,QAApC;AACE,iCAAC,4BAAD,EAAmBR,KAAnB;AACE,mEAAO,YAAUU,qBAAcC,IAA/B,IAAyCN,UAAzC;AACE,iCAAC,kCAAD,IAAkB,IAAI,EAAEJ,QAAxB,EAAkC,IAAI,EAAEE,MAAxC,EAAgD,IAAI,EAAC,MAArD,GADF;AAEE,2CAAM,SAAS,EAAES,0BAAaC,KAAb,EAAjB,IAAwCN,QAAxC,CAFF;AAGE,iCAAC,kCAAD,IAAkB,IAAI,EAAEL,SAAxB,EAAmC,IAAI,EAAEE,MAAzC,EAAiD,IAAI,EAAC,OAAtD,GAHF,CADF,CADF,CADF;;;;;AAWD,CAfM,C","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/cjs/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/cjs/components/Input/InputLayout/InputLayout.styles.js

@@ -0,0 +1,49 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.stylesLayout = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../../lib/theming/Emotion");
+
+var _Input = require("../Input.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+var stylesLayout = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return _Input.styles.root(t);
+  },
+  input: function input() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      min-width: 0;\n      overflow: hidden;\n      position: relative;\n      width: 100%;\n      display: flex;\n    "])));
+
+
+
+
+
+
+  },
+  aside: function aside() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      align-items: center;\n      flex-shrink: 0;\n    "])));
+
+
+
+
+  },
+  icon: function icon(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.inputIconColor);
+
+  },
+  iconFocus: function iconFocus(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.inputFocusedIconColor);
+
+  },
+  iconDisabled: function iconDisabled() {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n    "])));
+
+
+  },
+  text: function text(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.inputPlaceholderColor);
+
+  },
+  textDisabled: function textDisabled(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.inputPlaceholderColorDisabled);
+
+  } });exports.stylesLayout = stylesLayout;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["InputLayout.styles.ts"],"names":["stylesLayout","root","t","styles","input","css","aside","icon","inputIconColor","iconFocus","inputFocusedIconColor","iconDisabled","text","inputPlaceholderColor","textDisabled","inputPlaceholderColorDisabled"],"mappings":"kRAAA;;AAEA,wC;;AAEO,IAAMA,YAAY,GAAG,2BAAa;AACvCC,EAAAA,IADuC,gBAClCC,CADkC,EACxB;AACb,WAAOC,cAAOF,IAAP,CAAYC,CAAZ,CAAP;AACD,GAHsC;AAIvCE,EAAAA,KAJuC,mBAI/B;AACN,eAAOC,YAAP;;;;;;;AAOD,GAZsC;AAavCC,EAAAA,KAbuC,mBAa/B;AACN,eAAOD,YAAP;;;;;AAKD,GAnBsC;AAoBvCE,EAAAA,IApBuC,gBAoBlCL,CApBkC,EAoBxB;AACb,eAAOG,YAAP;AACWH,IAAAA,CAAC,CAACM,cADb;;AAGD,GAxBsC;AAyBvCC,EAAAA,SAzBuC,qBAyB7BP,CAzB6B,EAyBnB;AAClB,eAAOG,YAAP;AACWH,IAAAA,CAAC,CAACQ,qBADb;;AAGD,GA7BsC;AA8BvCC,EAAAA,YA9BuC,0BA8BxB;AACb,eAAON,YAAP;;;AAGD,GAlCsC;AAmCvCO,EAAAA,IAnCuC,gBAmClCV,CAnCkC,EAmCxB;AACb,eAAOG,YAAP;AACWH,IAAAA,CAAC,CAACW,qBADb;;AAGD,GAvCsC;AAwCvCC,EAAAA,YAxCuC,wBAwC1BZ,CAxC0B,EAwChB;AACrB,eAAOG,YAAP;AACWH,IAAAA,CAAC,CAACa,6BADb;;AAGD,GA5CsC,EAAb,CAArB,C","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/cjs/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/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/Input/index.js

@@ -1 +1 @@
-"use strict";exports.__esModule = true;var _Input = require("./Input");Object.keys(_Input).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _Input[key];});
+"use strict";exports.__esModule = true;var _Input = require("./Input");Object.keys(_Input).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Input[key]) return;exports[key] = _Input[key];});

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

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

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

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