@skbkontur/react-ui 0.0.0-fed57d84fb → 0.7.0-beta.1

package/components/Input/Input.typings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.typings.js","sourceRoot":"","sources":["../../../components/Input/Input.typings.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nexport type InputElement = (HTMLInputElement | { input: HTMLInputElement | null }) & {\n  getRootNode: () => HTMLElement | null;\n};\n\nexport type InputElementProps = React.InputHTMLAttributes<HTMLInputElement>;\n"]}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { InputProps } from '../Input.js';
+import type { CommonProps } from '../../../internal/CommonWrapper/index.js';
+import type { InputLayoutContextProps } from './InputLayoutContext.js';
+type InputLayoutRootFromInputProps = Pick<InputProps, 'leftIcon' | 'rightIcon' | 'prefix' | 'suffix'>;
+export interface InputLayoutRootProps extends InputLayoutRootFromInputProps, CommonProps {
+    labelProps: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        ref?: React.Ref<HTMLLabelElement>;
+    };
+    context: Partial<InputLayoutContextProps>;
+    tag?: 'label' | 'span';
+}
+export declare const InputLayout: import("../../../lib/forwardRefAndName.js").ReactUIComponentWithRef<HTMLLabelElement, InputLayoutRootProps> & Record<never, never>;
+export {};

package/components/Input/InputLayout/InputLayout.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { useStyles } from '../../../lib/renderEnvironment/index.js';
+import { forwardRefAndName } from '../../../lib/forwardRefAndName.js';
+import { InputDataTids } from '../Input.js';
+import { CommonWrapper } from '../../../internal/CommonWrapper/index.js';
+import { mergeRefs } from '../../../lib/mergeRefs.js';
+import { InputLayoutAside } from './InputLayoutAside.js';
+import { InputLayoutContext, InputLayoutContextDefault } from './InputLayoutContext.js';
+import { getStylesLayout } from './InputLayout.styles.js';
+export var InputLayout = forwardRefAndName('InputLayout', function (props, ref) {
+    var stylesLayout = useStyles(getStylesLayout);
+    var leftIcon = props.leftIcon, rightIcon = props.rightIcon, prefix = props.prefix, suffix = props.suffix, labelProps = props.labelProps, context = props.context, children = props.children, _a = props.tag, tag = _a === void 0 ? 'label' : _a;
+    var _context = __assign(__assign({}, InputLayoutContextDefault), context);
+    var Tag = tag;
+    return (React.createElement(InputLayoutContext.Provider, { value: _context },
+        React.createElement(CommonWrapper, __assign({}, props),
+            React.createElement(Tag, __assign({ "data-tid": InputDataTids.root }, labelProps, { ref: mergeRefs(ref, labelProps.ref) }),
+                React.createElement(InputLayoutAside, { icon: leftIcon, text: prefix, side: "left" }),
+                React.createElement("span", { className: stylesLayout.input() }, children),
+                React.createElement(InputLayoutAside, { icon: rightIcon, text: suffix, side: "right" })))));
+});
+//# sourceMappingURL=InputLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputLayout.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayout.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAU1D,MAAM,CAAC,IAAM,WAAW,GAAG,iBAAiB,CAAyC,aAAa,EAAE,UAAC,KAAK,EAAE,GAAG;IAC7G,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IACxC,IAAA,QAAQ,GAA8E,KAAK,SAAnF,EAAE,SAAS,GAAmE,KAAK,UAAxE,EAAE,MAAM,GAA2D,KAAK,OAAhE,EAAE,MAAM,GAAmD,KAAK,OAAxD,EAAE,UAAU,GAAuC,KAAK,WAA5C,EAAE,OAAO,GAA8B,KAAK,QAAnC,EAAE,QAAQ,GAAoB,KAAK,SAAzB,EAAE,KAAkB,KAAK,IAAV,EAAb,GAAG,mBAAG,OAAO,KAAA,CAAW;IACpG,IAAM,QAAQ,yBAAiC,yBAAyB,GAAK,OAAO,CAAE,CAAC;IACvF,IAAM,GAAG,GAAG,GAAG,CAAC;IAEhB,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ;QAC1C,oBAAC,aAAa,eAAK,KAAK;YACtB,oBAAC,GAAG,yBAAW,aAAa,CAAC,IAAI,IAAM,UAAU,IAAE,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC;gBACpF,oBAAC,gBAAgB,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAG;gBAC9D,8BAAM,SAAS,EAAE,YAAY,CAAC,KAAK,EAAE,IAAG,QAAQ,CAAQ;gBACxD,oBAAC,gBAAgB,IAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG,CAC5D,CACQ,CACY,CAC/B,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName.js';\nimport type { InputProps } from '../Input.js';\nimport { InputDataTids } from '../Input.js';\nimport type { CommonProps } from '../../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../../internal/CommonWrapper/index.js';\nimport { mergeRefs } from '../../../lib/mergeRefs.js';\n\nimport { InputLayoutAside } from './InputLayoutAside.js';\nimport type { InputLayoutContextProps } from './InputLayoutContext.js';\nimport { InputLayoutContext, InputLayoutContextDefault } from './InputLayoutContext.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\n\ntype InputLayoutRootFromInputProps = Pick<InputProps, 'leftIcon' | 'rightIcon' | 'prefix' | 'suffix'>;\n\nexport interface InputLayoutRootProps extends InputLayoutRootFromInputProps, CommonProps {\n  labelProps: React.LabelHTMLAttributes<HTMLLabelElement> & { ref?: React.Ref<HTMLLabelElement> };\n  context: Partial<InputLayoutContextProps>;\n  tag?: 'label' | 'span';\n}\n\nexport const InputLayout = forwardRefAndName<HTMLLabelElement, InputLayoutRootProps>('InputLayout', (props, ref) => {\n  const stylesLayout = useStyles(getStylesLayout);\n  const { leftIcon, rightIcon, prefix, suffix, labelProps, context, children, tag = 'label' } = props;\n  const _context: InputLayoutContextProps = { ...InputLayoutContextDefault, ...context };\n  const Tag = tag;\n\n  return (\n    <InputLayoutContext.Provider value={_context}>\n      <CommonWrapper {...props}>\n        <Tag data-tid={InputDataTids.root} {...labelProps} ref={mergeRefs(ref, labelProps.ref)}>\n          <InputLayoutAside icon={leftIcon} text={prefix} side=\"left\" />\n          <span className={stylesLayout.input()}>{children}</span>\n          <InputLayoutAside icon={rightIcon} text={suffix} side=\"right\" />\n        </Tag>\n      </CommonWrapper>\n    </InputLayoutContext.Provider>\n  );\n});\n"]}

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

@@ -0,0 +1,11 @@
+import type { Theme } from '../../../lib/theming/Theme.js';
+export declare const getStylesLayout: import("../../../lib/theming/Emotion.js").StylesGetter<{
+    root(t: Theme): string;
+    input(): string;
+    aside(): string;
+    icon(t: Theme): string;
+    iconFocus(t: Theme): string;
+    iconDisabled(t: Theme): string;
+    text(t: Theme): string;
+    textDisabled(t: Theme): string;
+}>;

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

@@ -0,0 +1,38 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars.js';
+import { memoizeGetStyles } from '../../../lib/theming/Emotion.js';
+import { getStyles } from '../Input.styles.js';
+export var getStylesLayout = memoizeGetStyles(function (emotion) {
+    var styles = getStyles(emotion);
+    return {
+        root: function (t) {
+            return styles.root(t);
+        },
+        input: function () {
+            return emotion.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      "], ["\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      "])));
+        },
+        aside: function () {
+            return emotion.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '", "';\n        }\n      "], ["\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '", "';\n        }\n      "])), ZERO_WIDTH_SPACE_CSS);
+        },
+        icon: function (t) {
+            return emotion.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputIconColor);
+        },
+        iconFocus: function (t) {
+            return emotion.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputFocusedIconColor);
+        },
+        iconDisabled: function (t) {
+            return emotion.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        cursor: default;\n        color: ", ";\n      "], ["\n        cursor: default;\n        color: ", ";\n      "])), t.inputIconColorDisabled);
+        },
+        text: function (t) {
+            return emotion.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputPlaceholderColor);
+        },
+        textDisabled: function (t) {
+            return emotion.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.inputPlaceholderColorDisabled);
+        },
+    };
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=InputLayout.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputLayout.styles.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayout.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,IAAM,eAAe,GAAG,gBAAgB,CAAC,UAAC,OAAgB;IAC/D,IAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAElC,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,0MAAA,uIAMjB,KAAC;QACJ,CAAC;QACD,KAAK;YACH,OAAO,OAAO,CAAC,GAAG,iOAAA,qIAMF,EAAoB,uBAEnC,KAFe,oBAAoB,EAElC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAgB,WAC1B,KADU,CAAC,CAAC,cAAc,EACzB;QACJ,CAAC;QACD,SAAS,YAAC,CAAQ;YAChB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,6HAAA,6CAEP,EAAwB,WAClC,KADU,CAAC,CAAC,sBAAsB,EACjC;QACJ,CAAC;QACD,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAAuB,WACjC,KADU,CAAC,CAAC,qBAAqB,EAChC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAA+B,WACzC,KADU,CAAC,CAAC,6BAA6B,EACxC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars.js';\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\nimport { getStyles } from '../Input.styles.js';\n\nexport const getStylesLayout = memoizeGetStyles((emotion: Emotion) => {\n  const styles = getStyles(emotion);\n\n  return {\n    root(t: Theme) {\n      return styles.root(t);\n    },\n    input() {\n      return emotion.css`\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      `;\n    },\n    aside() {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '${ZERO_WIDTH_SPACE_CSS}';\n        }\n      `;\n    },\n    icon(t: Theme) {\n      return emotion.css`\n        color: ${t.inputIconColor};\n      `;\n    },\n    iconFocus(t: Theme) {\n      return emotion.css`\n        color: ${t.inputFocusedIconColor};\n      `;\n    },\n    iconDisabled(t: Theme) {\n      return emotion.css`\n        cursor: default;\n        color: ${t.inputIconColorDisabled};\n      `;\n    },\n    text(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColor};\n      `;\n    },\n    textDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColorDisabled};\n      `;\n    },\n  };\n});\n"]}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { InputProps } from '../Input.js';
+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/InputLayoutAside.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useStyles } from '../../../lib/renderEnvironment/index.js';
+import { getStylesLayout } from './InputLayout.styles.js';
+import { InputLayoutAsideIcon } from './InputLayoutAsideIcon.js';
+import { InputLayoutAsideText } from './InputLayoutAsideText.js';
+export var InputLayoutAside = function (_a) {
+    var icon = _a.icon, text = _a.text, side = _a.side;
+    var stylesLayout = useStyles(getStylesLayout);
+    var asideClassName = stylesLayout.aside();
+    var _icon = React.createElement(InputLayoutAsideIcon, { key: "icon", icon: icon, side: side });
+    var _text = React.createElement(InputLayoutAsideText, { key: "text", text: text });
+    var child = side === 'left' ? [_icon, _text] : [_text, _icon];
+    return React.createElement("span", { className: asideClassName }, child);
+};
+//# sourceMappingURL=InputLayoutAside.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputLayoutAside.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayoutAside.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAGpE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAQjE,MAAM,CAAC,IAAM,gBAAgB,GAAmD,UAAC,EAAoB;QAAlB,IAAI,UAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAA;IACjG,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAChD,IAAM,cAAc,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;IAE5C,IAAM,KAAK,GAAG,oBAAC,oBAAoB,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;IAC1E,IAAM,KAAK,GAAG,oBAAC,oBAAoB,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,GAAI,CAAC;IAE9D,IAAM,KAAK,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEhE,OAAO,8BAAM,SAAS,EAAE,cAAc,IAAG,KAAK,CAAQ,CAAC;AACzD,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport type { InputProps } from '../Input.js';\n\nimport { getStylesLayout } from './InputLayout.styles.js';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon.js';\nimport { InputLayoutAsideText } from './InputLayoutAsideText.js';\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, text, side }) => {\n  const stylesLayout = useStyles(getStylesLayout);\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 <span className={asideClassName}>{child}</span>;\n};\n"]}

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

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

package/components/Input/InputLayout/InputLayoutAsideIcon.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { isElement } from '../../../lib/react-is.js';
+import { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';
+import { isKonturIcon } from '../../../lib/utils.js';
+import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
+import { InputLayoutContext } from './InputLayoutContext.js';
+import { getStylesLayout } from './InputLayout.styles.js';
+export var InputLayoutAsideIcon = function (_a) {
+    var _b;
+    var _c = _a.icon, icon = _c === void 0 ? null : _c, side = _a.side;
+    var theme = React.useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var stylesLayout = useStyles(getStylesLayout);
+    var _d = React.useContext(InputLayoutContext), focused = _d.focused, disabled = _d.disabled, size = _d.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 = icon instanceof Function ? icon() : icon;
+    if (isElement(icon) && isKonturIcon(icon)) {
+        var iconProps = icon.props;
+        _icon = React.cloneElement(icon, {
+            size: (_b = iconProps.size) !== null && _b !== void 0 ? _b : sizes[size],
+        });
+    }
+    var style = {};
+    if (side) {
+        if (side === 'right') {
+            style.marginLeft = gaps[size];
+        }
+        else {
+            style.marginRight = gaps[size];
+        }
+    }
+    return _icon ? (React.createElement("span", { style: style, className: cx(stylesLayout.aside(), stylesLayout.icon(theme), focused && stylesLayout.iconFocus(theme), disabled && stylesLayout.iconDisabled(theme)) }, _icon)) : null;
+};
+//# sourceMappingURL=InputLayoutAsideIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputLayoutAsideIcon.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayoutAsideIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAIpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAO1D,MAAM,CAAC,IAAM,oBAAoB,GAAuD,UAAC,EAAqB;;QAAnB,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EAAE,IAAI,UAAA;IAC1G,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAC1C,IAAA,KAA8B,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAhE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAyC,CAAC;IAEzE,IAAM,KAAK,GAA6B;QACtC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;QACzC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,mBAAmB,CAAC;QAC3C,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;KAC1C,CAAC;IACF,IAAM,IAAI,GAA6B;QACrC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC;QACxC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;QAC1C,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC;KACzC,CAAC;IAEF,IAAI,KAAK,GAAG,IAAI,YAAY,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;QAC1C,IAAM,SAAS,GAAG,IAAI,CAAC,KAAkB,CAAC;QAC1C,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;YAC/B,IAAI,EAAE,MAAA,SAAS,CAAC,IAAI,mCAAI,KAAK,CAAC,IAAI,CAAC;SACvB,CAAC,CAAC;IAClB,CAAC;IAED,IAAM,KAAK,GAAwB,EAAE,CAAC;IACtC,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,8BACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CACX,YAAY,CAAC,KAAK,EAAE,EACpB,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EACxB,OAAO,IAAI,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,EACxC,QAAQ,IAAI,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAC7C,IAEA,KAAK,CACD,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { isElement } from '../../../lib/react-is.js';\nimport { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { isKonturIcon } from '../../../lib/utils.js';\nimport type { InputProps } from '../Input.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../../lib/types/props.js';\nimport type { IconProps } from '../../../internal/icons2022/BaseIcon.js';\n\nimport { InputLayoutContext } from './InputLayoutContext.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\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 { cx } = useEmotion();\n  const stylesLayout = useStyles(getStylesLayout);\n  const { focused, disabled, size } = React.useContext(InputLayoutContext);\n\n  const sizes: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconSizeSmall),\n    medium: parseInt(theme.inputIconSizeMedium),\n    large: parseInt(theme.inputIconSizeLarge),\n  };\n  const gaps: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconGapSmall),\n    medium: parseInt(theme.inputIconGapMedium),\n    large: parseInt(theme.inputIconGapLarge),\n  };\n\n  let _icon = icon instanceof Function ? icon() : icon;\n  if (isElement(icon) && isKonturIcon(icon)) {\n    const iconProps = icon.props as IconProps;\n    _icon = React.cloneElement(icon, {\n      size: iconProps.size ?? sizes[size],\n    } as IconProps);\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 _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(theme),\n      )}\n    >\n      {_icon}\n    </span>\n  ) : null;\n};\n"]}

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

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

package/components/Input/InputLayout/InputLayoutAsideText.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
+import { InputLayoutContext } from './InputLayoutContext.js';
+import { getStylesLayout } from './InputLayout.styles.js';
+export var InputLayoutAsideText = function (_a) {
+    var _b = _a.text, text = _b === void 0 ? null : _b;
+    var theme = React.useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var stylesLayout = useStyles(getStylesLayout);
+    var disabled = React.useContext(InputLayoutContext).disabled;
+    var asideClassName = stylesLayout.aside();
+    return text ? (React.createElement("span", { className: cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme)) }, text)) : null;
+};
+//# sourceMappingURL=InputLayoutAsideText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputLayoutAsideText.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayoutAsideText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAM1D,MAAM,CAAC,IAAM,oBAAoB,GAAuD,UAAC,EAAe;QAAb,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA;IACpG,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IACxC,IAAA,QAAQ,GAAK,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,SAAzC,CAA0C;IAE1D,IAAM,cAAc,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;IAE5C,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,8BAAM,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,IAAI,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,IACxG,IAAI,CACA,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';\nimport type { InputProps } from '../Input.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\n\nimport { InputLayoutContext } from './InputLayoutContext.js';\nimport { getStylesLayout } from './InputLayout.styles.js';\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 { cx } = useEmotion();\n  const stylesLayout = useStyles(getStylesLayout);\n  const { disabled } = React.useContext(InputLayoutContext);\n\n  const asideClassName = stylesLayout.aside();\n\n  return text ? (\n    <span className={cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme))}>\n      {text}\n    </span>\n  ) : null;\n};\n"]}

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

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

package/components/Input/InputLayout/InputLayoutContext.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputLayoutContext.js","sourceRoot":"","sources":["../../../../components/Input/InputLayout/InputLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,CAAC,IAAM,yBAAyB,GAA4B;IAChE,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,IAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAA0B,yBAAyB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport type { SizeProp } from '../../../lib/types/props.js';\n\nexport interface InputLayoutContextProps {\n  focused: boolean;\n  disabled: boolean;\n  size: SizeProp;\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/index.d.ts

@@ -1 +1,2 @@
-export * from './Input';
+export * from './Input.js';
+export * from './Input.typings.js';

package/components/Input/index.js

@@ -0,0 +1,3 @@
+export * from './Input.js';
+export * from './Input.typings.js';
+//# sourceMappingURL=index.js.map

package/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Input.js';\nexport * from './Input.typings.js';\n"]}

package/components/Kebab/Kebab.d.ts

@@ -1,60 +1,65 @@
-import React 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'> {
-    disabled?: boolean;
-    size: 'small' | 'medium' | 'large';
-    /**
-     * Список позиций доступных для расположения выпадашки.
-     *
-     * Если во всех позициях выпадашка вылезает за пределы `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']
-     */
-    positions: PopupPositionsType[];
-    menuMaxHeight?: number | string;
-    /**
-     * Не показывать анимацию
-     */
-    disableAnimations: boolean;
-    /**
-     * Кастомная иконка
-     */
-    icon?: React.ReactNode;
-}
-export interface KebabState {
-    anchor: Nullable<HTMLElement>;
-    focusedByTab: boolean;
-}
-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;
-        icon: JSX.Element;
-    };
-    state: {
-        focusedByTab: boolean;
-        anchor: null;
-    };
-    private theme;
-    private setRootNode;
-    private listener;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    private renderMain;
-    private renderCaption;
-    private handleCaptionKeyDown;
-    private handleChangeMenuState;
-    private handleFocus;
-    private handleBlur;
-    private renderIcon;
-}
+import type { AriaAttributes, HTMLAttributes, JSX } from 'react';
+import React from 'react';
+import type { PopupMenuProps } from '../../internal/PopupMenu/index.js';
+import type { Nullable } from '../../typings/utility-types.js';
+import type { PopupPositionsType } from '../../internal/Popup/index.js';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { SizeProp } from '../../lib/types/props.js';
+export interface KebabProps extends Pick<AriaAttributes, 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>, CommonProps {
+    /** Размер кнопки. */
+    size?: SizeProp;
+    /** Список доступных позиций выпадающего меню относительно кнопки.
+     * @default ['bottom left', 'bottom right', 'top left', 'top right'].
+     */
+    positions?: PopupPositionsType[];
+    /** Максимальная высота меню. */
+    menuMaxHeight?: number | string;
+    /** Блокирует кнопку. */
+    disabled?: boolean;
+    /** Отключает анимацию выпадающего меню. */
+    disableAnimations?: boolean;
+    /** Заменяет иконку кебаба у кнопки. */
+    icon?: React.ReactNode;
+    /** @ignore */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+}
+export declare const KebabDataTids: {
+    readonly caption: "Kebab__caption";
+};
+export interface KebabState {
+    anchor: Nullable<HTMLElement>;
+    focusedByTab: boolean;
+}
+type DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'disableAnimations'>>;
+/**
+ * Кебаб-меню содержит действия с объектом.
+ */
+export declare class Kebab extends React.Component<KebabProps, KebabState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: KebabState;
+    private globalObject;
+    private emotion;
+    private cx;
+    private styles;
+    private theme;
+    private size;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private keyListener;
+    private listener;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    private renderMain;
+    private renderCaption;
+    private handleCaptionKeyDown;
+    private handleChangeMenuState;
+    private handleFocus;
+    private handleBlur;
+    private renderIcon;
+}
+export {};

package/components/Kebab/Kebab.js

@@ -0,0 +1,173 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { isElement } from '../../lib/react-is.js';
+import { isKonturIcon } from '../../lib/utils.js';
+import { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers.js';
+import * as LayoutEvents from '../../lib/LayoutEvents.js';
+import { KeyListener } from '../../lib/events/keyListener.js';
+import { PopupMenu } from '../../internal/PopupMenu/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { isTestEnv } from '../../lib/currentEnvironment.js';
+import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';
+import { withSize } from '../../lib/size/SizeDecorator.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles } from './Kebab.styles.js';
+import { KebabIcon } from './KebabIcon.js';
+export var KebabDataTids = {
+    caption: 'Kebab__caption',
+};
+/**
+ * Кебаб-меню содержит действия с объектом.
+ */
+var Kebab = /** @class */ (function (_super) {
+    __extends(Kebab, _super);
+    function Kebab() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getProps = createPropsGetter(Kebab_1.defaultProps);
+        _this.state = {
+            focusedByTab: false,
+            anchor: null,
+        };
+        _this.listener = {
+            remove: function () { return undefined; },
+        };
+        _this.renderCaption = function (captionProps) {
+            var disabled = _this.getProps().disabled;
+            var size = _this.size;
+            var handleCaptionKeyDown = function (event) {
+                if (!disabled) {
+                    _this.handleCaptionKeyDown(event, captionProps.openMenu);
+                }
+            };
+            var handleCaptionClick = function () {
+                if (!disabled) {
+                    captionProps.toggleMenu();
+                }
+            };
+            return (React.createElement("span", { role: "button", "data-tid": KebabDataTids.caption, tabIndex: disabled ? -1 : 0, onClick: handleCaptionClick, onKeyDown: handleCaptionKeyDown, onFocus: _this.handleFocus, onBlur: _this.handleBlur, className: _this.cx(_this.styles.kebab(_this.theme), size === 'small' && _this.styles.kebabSmall(_this.theme), size === 'medium' && _this.styles.kebabMedium(_this.theme), size === 'large' && _this.styles.kebabLarge(_this.theme), captionProps.opened && _this.styles.opened(_this.theme), disabled && _this.styles.disabled(), _this.state.focusedByTab && _this.styles.focused(_this.theme)), "aria-describedby": _this.props['aria-describedby'] }, _this.renderIcon()));
+        };
+        _this.handleCaptionKeyDown = function (e, openMenu) {
+            if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {
+                e.preventDefault();
+                openMenu(true);
+            }
+        };
+        _this.handleChangeMenuState = function (isOpened, restoreFocus) {
+            _this.setState({
+                focusedByTab: !isOpened && restoreFocus,
+            });
+        };
+        _this.handleFocus = function () {
+            var _a, _b;
+            if (!_this.props.disabled) {
+                // focus event fires before keyDown eventlistener
+                // so we should check tabPressed in async way
+                (_b = (_a = _this.globalObject).requestAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(_a, function () {
+                    if (_this.keyListener.isTabPressed) {
+                        _this.setState({ focusedByTab: true });
+                    }
+                });
+            }
+        };
+        _this.handleBlur = function () {
+            _this.setState({
+                focusedByTab: false,
+            });
+        };
+        return _this;
+    }
+    Kebab_1 = Kebab;
+    Kebab.prototype.componentDidMount = function () {
+        this.keyListener = new KeyListener(this.globalObject);
+        /** addListener'у нужен колбэк в аргумент */
+        this.listener = LayoutEvents.addListener(function () { return undefined; }, this.globalObject);
+    };
+    Kebab.prototype.componentWillUnmount = function () {
+        this.listener.remove();
+    };
+    Kebab.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
+                    popupMargin: theme.kebabMargin,
+                }, theme) }, _this.renderMain()));
+        }));
+    };
+    Kebab.prototype.renderMain = function () {
+        var disabled = this.props.disabled;
+        var _a = this.getProps(), positions = _a.positions, disableAnimations = _a.disableAnimations, onOpen = _a.onOpen, onClose = _a.onClose;
+        return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props, getVisualStateDataAttributes({ disabled: disabled })),
+            React.createElement(PopupMenu, { id: this.props.id, popupHasPin: false, 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, "aria-label": this.props['aria-label'] }, !disabled && this.props.children)));
+    };
+    Kebab.prototype.renderIcon = function () {
+        var _a, _b;
+        var _c = this.getProps().icon, icon = _c === void 0 ? React.createElement(KebabIcon, null) : _c;
+        if (isElement(icon) && isKonturIcon(icon)) {
+            var iconProps = icon.props;
+            var sizes = {
+                small: parseInt(this.theme.kebabIconSizeSmall),
+                medium: parseInt(this.theme.kebabIconSizeMedium),
+                large: parseInt(this.theme.kebabIconSizeLarge),
+            };
+            return React.cloneElement(icon, {
+                size: (_a = iconProps.size) !== null && _a !== void 0 ? _a : sizes[this.size],
+                color: (_b = iconProps.color) !== null && _b !== void 0 ? _b : this.theme.kebabIconColor,
+            });
+        }
+        return icon;
+    };
+    var Kebab_1;
+    Kebab.__KONTUR_REACT_UI__ = 'Kebab';
+    Kebab.displayName = 'Kebab';
+    Kebab.defaultProps = {
+        onOpen: function () { return undefined; },
+        onClose: function () { return undefined; },
+        positions: ['bottom left', 'bottom right', 'top left', 'top right'],
+        disableAnimations: isTestEnv,
+    };
+    Kebab = Kebab_1 = __decorate([
+        withRenderEnvironment,
+        rootNode,
+        withSize
+    ], Kebab);
+    return Kebab;
+}(React.Component));
+export { Kebab };
+//# sourceMappingURL=Kebab.js.map