@skbkontur/react-ui 0.0.0-a18e664e8f → 0.0.0-a2ba583fb2

package/cjs/components/Autocomplete/Autocomplete.md

@@ -1,7 +1,38 @@
 ```jsx harmony
-let items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
 
 const [value, setValue] = React.useState('Kappa');
 
 <Autocomplete source={items} value={value} onValueChange={setValue} />;
 ```
+
+Очистить значение в `Autocomplete` можно только с помощью пустой строки
+```jsx harmony
+import { Button, Group } from '@skbkontur/react-ui';
+
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+
+const [value, setValue] = React.useState('Kappa');
+
+<Group>
+  <Autocomplete source={items} value={value} onValueChange={setValue} />
+  <Button onClick={() => setValue('')}>Очистить</Button>
+</Group>
+```
+
+У Autocomplete есть 3 стандартных размера.
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+const items = ['Маленький', 'Средний', 'Большой'];
+
+const [valueSmall, setValueSmall] = React.useState('Маленький');
+const [valueMedium, setValueMedium] = React.useState('Средний');
+const [valueLarge, setValueLarge] = React.useState('Большой');
+
+<Gapped vertical>
+  <Autocomplete source={items} value={valueSmall} onValueChange={setValueSmall} size={'small'} />
+  <Autocomplete source={items} value={valueMedium} onValueChange={setValueMedium} size={'medium'} />
+  <Autocomplete source={items} value={valueLarge} onValueChange={setValueLarge} size={'large'} />
+</Gapped>
+```

package/cjs/components/Autocomplete/getAutocompleteTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const getAutocompleteTheme: (theme: Theme) => Theme;

package/cjs/components/Autocomplete/getAutocompleteTheme.js

@@ -0,0 +1,11 @@
+"use strict";exports.__esModule = true;exports.getAutocompleteTheme = void 0;var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+
+var getAutocompleteTheme = function getAutocompleteTheme(theme) {
+  return _ThemeFactory.ThemeFactory.create(
+  {
+    menuOffsetY: theme.autocompleteMenuOffsetY },
+
+  theme);
+
+};exports.getAutocompleteTheme = getAutocompleteTheme;

package/cjs/components/Autocomplete/getAutocompleteTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getAutocompleteTheme.ts"],"names":["getAutocompleteTheme","theme","ThemeFactory","create","menuOffsetY","autocompleteMenuOffsetY"],"mappings":"6EAAA;;;AAGO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAyB;AAC3D,SAAOC,2BAAaC,MAAb;AACL;AACEC,IAAAA,WAAW,EAAEH,KAAK,CAACI,uBADrB,EADK;;AAILJ,EAAAA,KAJK,CAAP;;AAMD,CAPM,C","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getAutocompleteTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      menuOffsetY: theme.autocompleteMenuOffsetY,\n    },\n    theme,\n  );\n};\n"]}

package/cjs/components/Autocomplete/locale/index.d.ts

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import { AutocompleteLocale } from './types';
+export * from './types';
+export declare const AutocompleteLocaleHelper: LocaleHelper<AutocompleteLocale>;

package/cjs/components/Autocomplete/locale/index.js

@@ -0,0 +1,11 @@
+"use strict";exports.__esModule = true;var _exportNames = { AutocompleteLocaleHelper: true };exports.AutocompleteLocaleHelper = void 0;var _LocaleHelper = require("../../../lib/locale/LocaleHelper");
+
+var _en = require("./locales/en");
+var _ru = require("./locales/ru");
+
+
+var _types = require("./types");Object.keys(_types).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _types[key]) return;exports[key] = _types[key];});
+
+var AutocompleteLocaleHelper = new _LocaleHelper.LocaleHelper({
+  ru_RU: _ru.componentsLocales,
+  en_GB: _en.componentsLocales });exports.AutocompleteLocaleHelper = AutocompleteLocaleHelper;

package/cjs/components/Autocomplete/locale/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["AutocompleteLocaleHelper","LocaleHelper","ru_RU","en_GB"],"mappings":"uIAAA;;AAEA;AACA;;;AAGA;;AAEO,IAAMA,wBAAwB,GAAG,IAAIC,0BAAJ,CAAqC;AAC3EC,EAAAA,KAAK,EAALA,qBAD2E;AAE3EC,EAAAA,KAAK,EAALA,qBAF2E,EAArC,CAAjC,C","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { AutocompleteLocale } from './types';\n\nexport * from './types';\n\nexport const AutocompleteLocaleHelper = new LocaleHelper<AutocompleteLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/cjs/components/Autocomplete/locale/locales/en.d.ts

@@ -0,0 +1,2 @@
+import { AutocompleteLocale } from '../types';
+export declare const componentsLocales: AutocompleteLocale;

package/cjs/components/Autocomplete/locale/locales/en.js

@@ -0,0 +1,6 @@
+"use strict";exports.__esModule = true;exports.componentsLocales = void 0;
+
+var componentsLocales = {
+  enterValue: 'Start typing',
+  notFound: 'Nothing was found',
+  updateValue: 'Start typing or changing the value' };exports.componentsLocales = componentsLocales;

package/cjs/components/Autocomplete/locale/locales/en.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","enterValue","notFound","updateValue"],"mappings":";;AAEO,IAAMA,iBAAqC,GAAG;AACnDC,EAAAA,UAAU,EAAE,cADuC;AAEnDC,EAAAA,QAAQ,EAAE,mBAFyC;AAGnDC,EAAAA,WAAW,EAAE,oCAHsC,EAA9C,C","sourcesContent":["import { AutocompleteLocale } from '../types';\n\nexport const componentsLocales: AutocompleteLocale = {\n  enterValue: 'Start typing',\n  notFound: 'Nothing was found',\n  updateValue: 'Start typing or changing the value',\n};\n"]}

package/cjs/components/Autocomplete/locale/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { AutocompleteLocale } from '../types';
+export declare const componentsLocales: AutocompleteLocale;

package/cjs/components/Autocomplete/locale/locales/ru.js

@@ -0,0 +1,6 @@
+"use strict";exports.__esModule = true;exports.componentsLocales = void 0;
+
+var componentsLocales = {
+  enterValue: 'Начните вводить значение',
+  notFound: 'Ничего не найдено',
+  updateValue: 'Начните вводить или изменять значение' };exports.componentsLocales = componentsLocales;

package/cjs/components/Autocomplete/locale/locales/ru.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","enterValue","notFound","updateValue"],"mappings":";;AAEO,IAAMA,iBAAqC,GAAG;AACnDC,EAAAA,UAAU,EAAE,0BADuC;AAEnDC,EAAAA,QAAQ,EAAE,mBAFyC;AAGnDC,EAAAA,WAAW,EAAE,uCAHsC,EAA9C,C","sourcesContent":["import { AutocompleteLocale } from '../types';\n\nexport const componentsLocales: AutocompleteLocale = {\n  enterValue: 'Начните вводить значение',\n  notFound: 'Ничего не найдено',\n  updateValue: 'Начните вводить или изменять значение',\n};\n"]}

package/cjs/components/Autocomplete/locale/types.d.ts

@@ -0,0 +1,5 @@
+export interface AutocompleteLocale {
+    enterValue: string;
+    notFound: string;
+    updateValue: string;
+}

package/cjs/components/Autocomplete/locale/types.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;

package/cjs/components/Autocomplete/locale/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/cjs/components/Button/ArrowLeftIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const ArrowLeftIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/cjs/components/Button/ArrowLeftIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ArrowLeftIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _ArrowALeftIcon16Light = require("../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light");
+var _ArrowALeftIcon20Light = require("../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light");
+var _ArrowALeftIcon24Regular = require("../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular");
+var _iconSizer = require("../../internal/icons2022/iconSizer"); /* eslint-disable react/display-name */
+
+var ArrowLeftIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_ArrowALeftIcon16Light.ArrowALeftIcon16Light, null);},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_ArrowALeftIcon20Light.ArrowALeftIcon20Light, null);},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_ArrowALeftIcon24Regular.ArrowALeftIcon24Regular, null);} },
+
+'ArrowLeftIcon');exports.ArrowLeftIcon = ArrowLeftIcon;

package/cjs/components/Button/ArrowLeftIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowLeftIcon.tsx"],"names":["ArrowLeftIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA;AACA;AACA,+D,CANA;;AAQO,IAAMA,aAAa,GAAG;AAC3B;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,4CAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,4CAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,gDAAD,OAAN,EAHT,EAD2B;;AAM3B,eAN2B,CAAtB,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowALeftIcon16Light } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light';\nimport { ArrowALeftIcon20Light } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light';\nimport { ArrowALeftIcon24Regular } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ArrowLeftIcon = iconSizer(\n  {\n    small: () => <ArrowALeftIcon16Light />,\n    medium: () => <ArrowALeftIcon20Light />,\n    large: () => <ArrowALeftIcon24Regular />,\n  },\n  'ArrowLeftIcon',\n);\n"]}

package/cjs/components/Button/ArrowRightIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const ArrowRightIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/cjs/components/Button/ArrowRightIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ArrowRightIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _ArrowARightIcon16Light = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light");
+var _ArrowARightIcon20Light = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light");
+var _ArrowARightIcon24Regular = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular");
+var _iconSizer = require("../../internal/icons2022/iconSizer"); /* eslint-disable react/display-name */
+
+var ArrowRightIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon16Light.ArrowARightIcon16Light, null);},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon20Light.ArrowARightIcon20Light, null);},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon24Regular.ArrowARightIcon24Regular, null);} },
+
+'ArrowRightIcon');exports.ArrowRightIcon = ArrowRightIcon;

package/cjs/components/Button/ArrowRightIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowRightIcon.tsx"],"names":["ArrowRightIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA;AACA;AACA,+D,CANA;;AAQO,IAAMA,cAAc,GAAG;AAC5B;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,8CAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,8CAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,kDAAD,OAAN,EAHT,EAD4B;;AAM5B,gBAN4B,CAAvB,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowARightIcon16Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light';\nimport { ArrowARightIcon20Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light';\nimport { ArrowARightIcon24Regular } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ArrowRightIcon = iconSizer(\n  {\n    small: () => <ArrowARightIcon16Light />,\n    medium: () => <ArrowARightIcon20Light />,\n    large: () => <ArrowARightIcon24Regular />,\n  },\n  'ArrowRightIcon',\n);\n"]}

package/cjs/components/Button/Button.d.ts

@@ -1,9 +1,15 @@
-import React from 'react';
+import React, { AriaAttributes, HTMLAttributes } from 'react';
+import { HTMLProps } from '../../typings/html';
+import { ThemeIn } from '../../lib/theming/Theme';
 import { CommonProps } from '../../internal/CommonWrapper';
-export declare type ButtonSize = 'small' | 'medium' | 'large';
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type ButtonSize = SizeProp;
 export declare type ButtonType = 'button' | 'submit' | 'reset';
-export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';
-export interface ButtonProps extends CommonProps {
+export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';
+export interface ButtonProps extends CommonProps, Pick<AriaAttributes, 'aria-haspopup' | 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-checked' | 'aria-expanded'>, Pick<HTMLAttributes<unknown>, 'role'>, Pick<HTMLProps['button'], 'onClickCapture' | 'onMouseUp' | 'onMouseDown'> {
     /** @ignore */
     _noPadding?: boolean;
     /** @ignore */
@@ -34,7 +40,7 @@ export interface ButtonProps extends CommonProps {
     checked?: boolean;
     children?: React.ReactNode;
     /** @ignore */
-    corners?: number;
+    corners?: React.CSSProperties;
     /**
      * Отключенное состояние кнопки.
      */
@@ -42,7 +48,7 @@ export interface ButtonProps extends CommonProps {
     /** @ignore */
     disableFocus?: boolean;
     /**
-     * Cостояние валидации при ошибке.
+     * Состояние валидации при ошибке.
      */
     error?: boolean;
     /**
@@ -90,7 +96,7 @@ export interface ButtonProps extends CommonProps {
      *
      * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
      */
-    size?: ButtonSize;
+    size?: SizeProp;
     /**
      * HTML-атрибут `type`.
      */
@@ -102,40 +108,44 @@ export interface ButtonProps extends CommonProps {
     /**
      * Стиль кнопки.
      *
-     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`.
+     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`, `"text"`, `"backless"`.
      */
     use?: ButtonUse;
     /** @ignore */
     visuallyFocused?: boolean;
     /**
-     * Cостояние валидации при предупреждении.
+     * Состояние валидации при предупреждении.
      */
     warning?: boolean;
     /**
      * CSS-свойство `width`.
      */
     width?: number | string;
+    /**
+     * Обычный объект с переменными темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
 }
 export interface ButtonState {
     focusedByTab: boolean;
 }
+export declare const ButtonDataTids: {
+    readonly root: "Button__root";
+    readonly spinner: "Button__spinner";
+};
+declare type DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;
 export declare class Button extends React.Component<ButtonProps, ButtonState> {
     static __KONTUR_REACT_UI__: string;
     static __BUTTON__: boolean;
-    static TOP_LEFT: number;
-    static TOP_RIGHT: number;
-    static BOTTOM_RIGHT: number;
-    static BOTTOM_LEFT: number;
-    static defaultProps: {
-        use: ButtonUse;
-        size: ButtonSize;
-        type: ButtonType;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: {
         focusedByTab: boolean;
     };
     private theme;
     private node;
+    private setRootNode;
     componentDidMount(): void;
     static getDerivedStateFromProps(props: ButtonProps): {
         focusedByTab: boolean;
@@ -149,12 +159,14 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
      */
     blur(): void;
     render(): JSX.Element;
+    private renderLinkRootWithoutHandlers;
     private renderMain;
-    private getLoadingSpinner;
+    private renderIcon2022;
     private getSizeClassName;
-    private getSizeIconClassName;
+    private getSizeWrapClassName;
     private handleFocus;
     private handleBlur;
     private _ref;
 }
-export declare const isButton: (child: React.ReactChild) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;
+export declare const isButton: (child: React.ReactNode) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;
+export {};

package/cjs/components/Button/Button.js

@@ -1,15 +1,38 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isButton = exports.Button = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isButton = exports.ButtonDataTids = exports.Button = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
 
+
+var _utils = require("../../lib/utils");
 var _client = require("../../lib/client");
 var _keyListener = require("../../lib/events/keyListener");
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _Spinner = require("../Spinner");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _Link = require("../Link");
+var _Spinner = require("../Spinner");
+var _LoadingIcon = require("../../internal/icons2022/LoadingIcon");
+
 
 var _Button = require("./Button.styles");
-var _Corners = require("./Corners");var
+var _ButtonIcon = require("./ButtonIcon");
+var _ButtonArrow = require("./ButtonArrow");
+var _getInnerLinkTheme = require("./getInnerLinkTheme");var _excluded = ["onClick", "onFocus", "onBlur", "children"];var _class, _class2, _temp;
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -162,25 +185,36 @@ var _Corners = require("./Corners");var
 
 
 
-Button = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Button, _React$Component);function Button() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
 
 
+var ButtonDataTids = {
+  root: 'Button__root',
+  spinner: 'Button__spinner' };exports.ButtonDataTids = ButtonDataTids;var
 
 
 
 
 
+Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Button, _React$Component);function Button() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
+
+
+
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Button.defaultProps);_this.
+
     state = {
       focusedByTab: false };_this.
 
 
-    theme = void 0;_this.
+
     node = null;_this.
 
 
@@ -401,6 +435,101 @@ Button = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -426,7 +555,7 @@ Button = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
       if (!_this.props.disabled && !_this.props.disableFocus) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        requestAnimationFrame(function () {
+        _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
           if (_keyListener.keyListener.isTabPressed) {
             _this.setState({ focusedByTab: true });
           }
@@ -448,8 +577,9 @@ Button = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
    * @public
    */;_proto.focus = function focus() {var _this$node;(_this$node = this.node) == null ? void 0 : _this$node.focus();} /**
    * @public
-   */;_proto.blur = function blur() {var _this$node2;(_this$node2 = this.node) == null ? void 0 : _this$node2.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx, _cx2, _cx7, _cx8;var _this$props = this.props,_this$props$corners = _this$props.corners,corners = _this$props$corners === void 0 ? 0 : _this$props$corners,active = _this$props.active,disabled = _this$props.disabled,borderless = _this$props.borderless,checked = _this$props.checked,error = _this$props.error,warning = _this$props.warning,loading = _this$props.loading,arrow = _this$props.arrow,narrow = _this$props.narrow,icon = _this$props.icon,_noPadding = _this$props._noPadding,_noRightPadding = _this$props._noRightPadding,_this$props$use = _this$props.use,use = _this$props$use === void 0 ? Button.defaultProps.use : _this$props$use,visuallyFocused = _this$props.visuallyFocused,align = _this$props.align,disableFocus = _this$props.disableFocus,onMouseEnter = _this$props.onMouseEnter,onMouseLeave = _this$props.onMouseLeave,onMouseOver = _this$props.onMouseOver,onKeyDown = _this$props.onKeyDown,onClick = _this$props.onClick,width = _this$props.width,children = _this$props.children;var sizeClass = this.getSizeClassName();var isFocused = this.state.focusedByTab || visuallyFocused;var isLink = use === 'link';var rootProps = { // By default the type attribute is 'submit'. IE8 will fire a click event
+   */;_proto.blur = function blur() {var _this$node2;(_this$node2 = this.node) == null ? void 0 : _this$node2.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return _this2.renderMain();});};_proto.renderLinkRootWithoutHandlers = function renderLinkRootWithoutHandlers(props) {var onClick = props.onClick,onFocus = props.onFocus,onBlur = props.onBlur,children = props.children,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);return /*#__PURE__*/_react.default.createElement("span", rest, children);};_proto.renderMain = function renderMain() {var _cx2, _cx5, _cx6;var _this$props = this.props,corners = _this$props.corners,active = _this$props.active,disabled = _this$props.disabled,borderless = _this$props.borderless,checked = _this$props.checked,error = _this$props.error,warning = _this$props.warning,loading = _this$props.loading,narrow = _this$props.narrow,icon = _this$props.icon,_noPadding = _this$props._noPadding,_noRightPadding = _this$props._noRightPadding,visuallyFocused = _this$props.visuallyFocused,align = _this$props.align,disableFocus = _this$props.disableFocus,onMouseEnter = _this$props.onMouseEnter,onMouseLeave = _this$props.onMouseLeave,onMouseOver = _this$props.onMouseOver,onMouseDown = _this$props.onMouseDown,onMouseUp = _this$props.onMouseUp,onKeyDown = _this$props.onKeyDown,onClick = _this$props.onClick,onClickCapture = _this$props.onClickCapture,width = _this$props.width,children = _this$props.children,ariaDescribedby = _this$props['aria-describedby'],ariaHasPopup = _this$props['aria-haspopup'],ariaControls = _this$props['aria-controls'],ariaLabel = _this$props['aria-label'],ariaChecked = _this$props['aria-checked'],ariaExpanded = _this$props['aria-expanded'],role = _this$props.role;var _this$getProps = this.getProps(),use = _this$getProps.use,type = _this$getProps.type,size = _this$getProps.size;var sizeClass = this.getSizeClassName();var isFocused = this.state.focusedByTab || visuallyFocused;var isLink = use === 'link';var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(this.theme); // eslint-disable-next-line react-hooks/rules-of-hooks
+    var _useButtonArrow = (0, _ButtonArrow.useButtonArrow)((0, _extends2.default)({}, this.props, { isFocused: Boolean(isFocused) }), this.theme),wrapClassNameWithArrow = _useButtonArrow[0],rootClassNameWithArrow = _useButtonArrow[1],arrowNode = _useButtonArrow[2];var isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);var rootClassName = '';if (_isTheme2022) {var trueDisabled = disabled || loading;rootClassName = _Emotion.cx.apply(void 0, [_Button.styles.root(this.theme), _Button.styles[use](this.theme), sizeClass, narrow && _Button.styles.narrow(), _noPadding && _Button.styles.noPadding(), _noRightPadding && _Button.styles.noRightPadding(), rootClassNameWithArrow].concat(trueDisabled ? [_Button.styles.disabled(this.theme), isUseStateWithoutOutlineInDisabledState && _Button.styles.disabledWithoutOutline(this.theme), checked && _Button.styles.checkedDisabled(this.theme), checked && _Button.styles.checkedDisabled2022(this.theme), borderless && _Button.styles.borderless2022()] : [active && !checked && _Button.activeStyles[use](this.theme), isFocused && _Button.styles.focus(this.theme), checked && _Button.styles.checked2022(this.theme), checked && isFocused && _Button.styles.checkedFocused(this.theme), borderless && !checked && !isFocused && _Button.styles.borderless2022()]));} else {var _cx;rootClassName = (0, _Emotion.cx)((_cx = {}, _cx[_Button.styles.root(this.theme)] = true, _cx[_Button.styles.simulatedPress()] = true, _cx[_Button.styles[use](this.theme)] = true, _cx[_Button.activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[_Button.styles.focus(this.theme)] = isFocused, _cx[_Button.styles.checked(this.theme)] = checked, _cx[_Button.styles.checkedFocused(this.theme)] = checked && isFocused, _cx[_Button.styles.disabled(this.theme)] = disabled || loading, _cx[_Button.styles.checkedDisabled(this.theme)] = checked && disabled, _cx[_Button.styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[_Button.styles.narrow()] = narrow, _cx[_Button.styles.noPadding()] = _noPadding, _cx[_Button.styles.noRightPadding()] = _noRightPadding, _cx));}var rootProps = { // By default the type attribute is 'submit'. IE8 will fire a click event
       // on this button if somewhere on the page user presses Enter while some
       // input is focused. So we set type to 'button' by default.
-      type: this.props.type, className: (0, _Emotion.cx)((_cx = {}, _cx[_Button.styles.root(this.theme)] = true, _cx[_Button.styles[use](this.theme)] = true, _cx[_Button.activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[_Button.styles.focus(this.theme)] = isFocused && !checked, _cx[_Button.styles.checked(this.theme)] = checked, _cx[_Button.styles.disabled(this.theme)] = disabled || loading, _cx[_Button.styles.checkedDisabled(this.theme)] = checked && disabled, _cx[_Button.styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[_Button.styles.narrow()] = narrow, _cx[_Button.styles.noPadding()] = _noPadding, _cx[_Button.styles.noRightPadding()] = _noRightPadding, _cx)), style: { borderTopLeftRadius: corners & _Corners.Corners.TOP_LEFT ? 0 : undefined, borderTopRightRadius: corners & _Corners.Corners.TOP_RIGHT ? 0 : undefined, borderBottomRightRadius: corners & _Corners.Corners.BOTTOM_RIGHT ? 0 : undefined, borderBottomLeftRadius: corners & _Corners.Corners.BOTTOM_LEFT ? 0 : undefined, textAlign: align }, disabled: disabled || loading, onClick: onClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, tabIndex: disableFocus ? -1 : 0, title: this.props.title };var wrapProps = { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Button.styles.wrap()] = true, _cx2[_Button.styles.wrapArrow()] = arrow === true, _cx2[_Button.styles.wrapArrowLeft()] = arrow === 'left', _cx2)), style: { width: width } };var outlineNode = null;if (!isFocused || isLink) {var _cx3;outlineNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.outline(), (_cx3 = {}, _cx3[_Button.styles.outlineWarning(this.theme)] = warning, _cx3[_Button.styles.outlineError(this.theme)] = error, _cx3[_Button.styles.outlineLink()] = isLink, _cx3[_Button.styles.outlineLinkWarning(this.theme)] = isLink && warning, _cx3[_Button.styles.outlineLinkError(this.theme)] = isLink && error, _cx3)) });}var loadingNode = null;if (loading && !icon) {loadingNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.styles.loading() }, this.getLoadingSpinner());}var iconNode = null;if (icon) {var _cx4;iconNode = /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Button.styles.icon(), this.getSizeIconClassName(), (_cx4 = {}, _cx4[_Button.styles.iconNoRightPadding()] = !children, _cx4[_Button.styles.iconLink(this.theme)] = isLink, _cx4)) }, loading ? this.getLoadingSpinner() : icon);}var arrowNode = null;if (arrow) {var _cx5;arrowNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Button.styles.arrow()] = true, _cx5[_Button.styles.arrowWarning(this.theme)] = !checked && warning, _cx5[_Button.styles.arrowError(this.theme)] = !checked && error, _cx5[_Button.styles.arrowFocus(this.theme)] = !checked && isFocused, _cx5[_Button.styles.arrowLeft()] = arrow === 'left', _cx5)) }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.globalClasses.arrowHelper, _Button.globalClasses.arrowHelperTop) }), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.globalClasses.arrowHelper, _Button.globalClasses.arrowHelperBottom) }));} // Force disable all props and features, that cannot be use with Link
-    if (isLink) {var _cx6;rootProps.className = (0, _Emotion.cx)((_cx6 = {}, _cx6[_Button.styles.root(this.theme)] = true, _cx6[sizeClass] = true, _cx6[_Button.styles.link(this.theme)] = true, _cx6[_Button.styles.linkFocus(this.theme)] = isFocused, _cx6[_Button.styles.linkDisabled(this.theme)] = disabled || loading, _cx6));Object.assign(wrapProps, { className: (0, _Emotion.cx)(_Button.styles.wrap(), _Button.styles.wrapLink()), style: { width: wrapProps.style.width } });rootProps.style.textAlign = undefined;arrowNode = null;}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("span", wrapProps, /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({ ref: this._ref }, rootProps), outlineNode, loadingNode, arrowNode, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.caption(), _Button.globalClasses.caption, (_cx7 = {}, _cx7[_Button.styles.captionTranslated()] = active || checked, _cx7[_Button.styles.captionLink()] = isLink, _cx7[_Button.styles.captionDisabled()] = !checked && disabled, _cx7)) }, iconNode, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)((_cx8 = {}, _cx8[_Button.styles.visibilityHidden()] = !!loadingNode, _cx8)) }, children)))));};_proto.getLoadingSpinner = function getLoadingSpinner() {return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, type: "mini" });};_proto.getSizeClassName = function getSizeClassName() {var _cx9, _cx10, _cx11;switch (this.props.size) {case 'large':return (0, _Emotion.cx)(_Button.styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[_Button.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));case 'medium':return (0, _Emotion.cx)(_Button.styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[_Button.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx10));case 'small':default:return (0, _Emotion.cx)(_Button.styles.sizeSmall(this.theme), (_cx11 = {}, _cx11[_Button.styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx11));}};_proto.getSizeIconClassName = function getSizeIconClassName() {switch (this.props.size) {case 'large':return _Button.styles.iconLarge(this.theme);case 'medium':return _Button.styles.iconMedium(this.theme);case 'small':default:return _Button.styles.iconSmall(this.theme);}};return Button;}(_react.default.Component);exports.Button = Button;Button.__KONTUR_REACT_UI__ = 'Button';Button.__BUTTON__ = true;Button.TOP_LEFT = _Corners.Corners.TOP_LEFT;Button.TOP_RIGHT = _Corners.Corners.TOP_RIGHT;Button.BOTTOM_RIGHT = _Corners.Corners.BOTTOM_RIGHT;Button.BOTTOM_LEFT = _Corners.Corners.BOTTOM_LEFT;Button.defaultProps = { use: 'default', size: 'small', type: 'button' };var isButton = function isButton(child) {return /*#__PURE__*/_react.default.isValidElement(child) ? Object.prototype.hasOwnProperty.call(child.type, '__BUTTON__') : false;};exports.isButton = isButton;
+      type: type, role: role, 'aria-describedby': ariaDescribedby, 'aria-haspopup': ariaHasPopup, 'aria-controls': ariaControls, 'aria-label': ariaLabel, 'aria-checked': ariaChecked, 'aria-expanded': ariaExpanded, className: rootClassName, style: (0, _extends2.default)({ textAlign: align }, corners), disabled: disabled || loading, onClick: onClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClickCapture: onClickCapture, tabIndex: disableFocus ? -1 : 0, title: this.props.title };var wrapProps = { className: (0, _Emotion.cx)(_Button.globalClasses.root, (_cx2 = {}, _cx2[_Button.styles.wrap(this.theme)] = true, _cx2[wrapClassNameWithArrow] = true, _cx2[this.getSizeWrapClassName()] = true, _cx2)), style: { width: width } };var innerShadowNode = _isTheme2022 ? null : /*#__PURE__*/_react.default.createElement("div", { className: _Button.globalClasses.innerShadow });var outlineNode = null;var isDisabled2022 = _isTheme2022 && (disabled || loading);if ((!isFocused || isLink) && !isDisabled2022) {var _cx3;outlineNode = /*#__PURE__*/_react.default.createElement("div", { style: { zIndex: _isTheme2022 && isLink ? -1 : undefined }, className: (0, _Emotion.cx)(_Button.styles.outline(), (_cx3 = {}, _cx3[_Button.styles.outlineWarning(this.theme)] = warning, _cx3[_Button.styles.outlineError(this.theme)] = error, _cx3[_Button.styles.outlineLink()] = isLink, _cx3[_Button.styles.outlineLinkWarning(this.theme)] = isLink && warning, _cx3[_Button.styles.outlineLinkError(this.theme)] = isLink && error, _cx3)) });}var iconNode = icon && /*#__PURE__*/_react.default.createElement(_ButtonIcon.ButtonIcon, { icon: icon, size: size, hasChildren: Boolean(children), disabled: disabled || false, loading: loading || false, use: use });var loadingNode = null;if (loading && !icon) {var loadingIcon = _isTheme2022 ? /*#__PURE__*/_react.default.createElement(_LoadingIcon.LoadingIcon, { size: size }) : /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, type: "mini" });loadingNode = /*#__PURE__*/_react.default.createElement("div", { "data-tid": ButtonDataTids.spinner, className: _Button.styles.loading() }, loadingIcon);} // Force disable all props and features, that cannot be use with Link
+    if (isLink) {var _cx4;rootProps.className = (0, _Emotion.cx)((_cx4 = {}, _cx4[_Button.styles.root(this.theme)] = true, _cx4[sizeClass] = true, _cx4[_Button.styles.link(this.theme)] = true, _cx4[_Button.styles.linkLineHeight()] = !_client.isSafari || _client.isSafari && !_isTheme2022, _cx4[_Button.styles.linkLineHeightSafariFallback()] = _client.isSafari && _isTheme2022, _cx4[_Button.styles.linkFocus(this.theme)] = isFocused, _cx4[_Button.styles.linkDisabled(this.theme)] = disabled || loading, _cx4));Object.assign(wrapProps, { className: (0, _Emotion.cx)(_Button.styles.wrap(this.theme), _Button.styles.wrapLink()), style: { width: wrapProps.style.width } });rootProps.style.textAlign = undefined;}var captionNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.caption(), _Button.globalClasses.caption, (_cx5 = {}, _cx5[_Button.styles.captionTranslated()] = (active || checked) && !loading && !_isTheme2022, _cx5[_Button.styles.captionLink()] = isLink, _cx5[_Button.styles.captionDisabled()] = !checked && disabled, _cx5)) }, loadingNode, iconNode, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Button.globalClasses.text, (_cx6 = {}, _cx6[_Button.styles.visibilityHidden()] = !!loadingNode, _cx6)) }, children));if (_isTheme2022 && isLink && !loading) {captionNode = /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _getInnerLinkTheme.getInnerLinkTheme)(this.theme) }, /*#__PURE__*/_react.default.createElement(_Link.Link, { focused: isFocused, disabled: disabled, icon: this.renderIcon2022(icon), as: this.renderLinkRootWithoutHandlers, tabIndex: -1 }, children));}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("span", wrapProps, /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({ "data-tid": ButtonDataTids.root, ref: this._ref }, rootProps), innerShadowNode, outlineNode, arrowNode, captionNode)));};_proto.renderIcon2022 = function renderIcon2022(icon) {if (icon && (0, _utils.isKonturIcon)(icon)) {var _icon$props$size;var sizes = (0, _ButtonIcon.getButtonIconSizes)(this.theme);return /*#__PURE__*/_react.default.cloneElement(icon, { size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[this.getProps().size] });}return icon;};_proto.getSizeClassName = function getSizeClassName() {var _cx7, _cx8, _cx9;var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(this.theme);switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)(_Button.styles.sizeLarge(this.theme), (_cx7 = {}, _cx7[_Button.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx7[_Button.styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _cx7[_Button.styles.sizeLargeWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx7));case 'medium':return (0, _Emotion.cx)(_Button.styles.sizeMedium(this.theme), (_cx8 = {}, _cx8[_Button.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx8[_Button.styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _cx8[_Button.styles.sizeMediumWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx8));case 'small':default:return (0, _Emotion.cx)(_Button.styles.sizeSmall(this.theme), (_cx9 = {}, _cx9[_Button.styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx9[_Button.styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _cx9[_Button.styles.sizeSmallWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx9));}};_proto.getSizeWrapClassName = function getSizeWrapClassName() {switch (this.getProps().size) {case 'large':return _Button.styles.wrapLarge(this.theme);case 'medium':return _Button.styles.wrapMedium(this.theme);case 'small':default:return _Button.styles.wrapSmall(this.theme);}};return Button;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = { use: 'default', size: 'small', type: 'button' }, _temp)) || _class;exports.Button = Button;var isButton = (0, _utils.isReactUIComponent)('Button');exports.isButton = isButton;