@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/components/Modal/ModalSeparator/package.json

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

package/components/Modal/ModalSeparator.d.ts

@@ -0,0 +1,14 @@
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface ModalSeparatorProps extends CommonProps {
+    fixed?: boolean;
+}
+/**
+ * Разделитель
+ *
+ * @visibleName Modal.Separator
+ */
+export declare function ModalSeparator({ fixed }: ModalSeparatorProps): JSX.Element;
+export declare namespace ModalSeparator {
+    var __KONTUR_REACT_UI__: string;
+    var displayName: string;
+}

package/components/Modal/getModalBodyTheme/getModalBodyTheme.js

@@ -0,0 +1,6 @@
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+export var getModalBodyTheme = function getModalBodyTheme(theme) {
+  return ThemeFactory.create({
+    loaderBorderRadius: theme.modalBodyBorderRadius
+  }, theme);
+};

package/components/Modal/getModalBodyTheme/getModalBodyTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getModalBodyTheme.ts"],"names":["ThemeFactory","getModalBodyTheme","theme","create","loaderBorderRadius","modalBodyBorderRadius"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAAyB;AACxD,SAAOF,YAAY,CAACG,MAAb;AACL;AACEC,IAAAA,kBAAkB,EAAEF,KAAK,CAACG,qBAD5B,EADK;;AAILH,EAAAA,KAJK,CAAP;;AAMD,CAPM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getModalBodyTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      loaderBorderRadius: theme.modalBodyBorderRadius,\n    },\n    theme,\n  );\n};\n"]}

package/components/Modal/getModalBodyTheme/package.json

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

package/components/Modal/getModalBodyTheme.d.ts

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

package/components/Modal/getModalTheme/getModalTheme.js

@@ -0,0 +1,11 @@
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+export var getModalTheme = function getModalTheme(contextTheme, propsTheme) {
+  if (propsTheme === void 0) {
+    propsTheme = {};
+  }
+
+  var theme = ThemeFactory.create(propsTheme, contextTheme);
+  return ThemeFactory.create(propsTheme, ThemeFactory.create({
+    loaderBorderRadius: theme.modalBorderRadius
+  }, theme));
+};

package/components/Modal/getModalTheme/getModalTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getModalTheme.ts"],"names":["ThemeFactory","getModalTheme","contextTheme","propsTheme","theme","create","loaderBorderRadius","modalBorderRadius"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,YAAD,EAAsBC,UAAtB,EAA0D,KAApCA,UAAoC,cAApCA,UAAoC,GAAd,EAAc;AACrF,MAAMC,KAAK,GAAGJ,YAAY,CAACK,MAAb,CAAoBF,UAApB,EAAgCD,YAAhC,CAAd;AACA,SAAOF,YAAY,CAACK,MAAb;AACLF,EAAAA,UADK;AAELH,EAAAA,YAAY,CAACK,MAAb;AACE;AACEC,IAAAA,kBAAkB,EAAEF,KAAK,CAACG,iBAD5B,EADF;;AAIEH,EAAAA,KAJF,CAFK,CAAP;;;AASD,CAXM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\n\nexport const getModalTheme = (contextTheme: Theme, propsTheme: ThemeIn = {}): Theme => {\n  const theme = ThemeFactory.create(propsTheme, contextTheme);\n  return ThemeFactory.create(\n    propsTheme as Theme,\n    ThemeFactory.create(\n      {\n        loaderBorderRadius: theme.modalBorderRadius,\n      },\n      theme,\n    ),\n  );\n};\n"]}

package/components/Modal/getModalTheme/package.json

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

package/components/Modal/getModalTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme, ThemeIn } from '../../lib/theming/Theme';
+export declare const getModalTheme: (contextTheme: Theme, propsTheme?: ThemeIn) => Theme;

package/components/Modal/locale/index/index.js

@@ -0,0 +1,8 @@
+import { LocaleHelper } from "../../../../lib/locale/LocaleHelper";
+import { componentsLocales as en_GB } from "../locales/en";
+import { componentsLocales as ru_RU } from "../locales/ru";
+export * from "../types";
+export var ModalLocaleHelper = new LocaleHelper({
+  ru_RU: ru_RU,
+  en_GB: en_GB
+});

package/components/Modal/locale/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","ModalLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAASC,iBAAiB,IAAIC,KAA9B,QAA2C,cAA3C;AACA,SAASD,iBAAiB,IAAIE,KAA9B,QAA2C,cAA3C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,iBAAiB,GAAG,IAAIJ,YAAJ,CAA8B;AAC7DG,EAAAA,KAAK,EAALA,KAD6D;AAE7DD,EAAAA,KAAK,EAALA,KAF6D,EAA9B,CAA1B","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 { ModalLocale } from './types';\n\nexport * from './types';\n\nexport const ModalLocaleHelper = new LocaleHelper<ModalLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/components/Modal/locale/index/package.json

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

package/components/Modal/locale/index.d.ts

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

package/components/Modal/locale/locales/en/en.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  closeButtonAriaLabel: 'Close modal window'
+};

package/components/Modal/locale/locales/en/en.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,oBAAoB,EAAE,oBADsB,EAAvC","sourcesContent":["import { ModalLocale } from '../types';\n\nexport const componentsLocales: ModalLocale = {\n  closeButtonAriaLabel: 'Close modal window',\n};\n"]}

package/components/Modal/locale/locales/en/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/Modal/locale/locales/en.js",
+  "module": "en",
+  "types": "../en.d.ts",
+  "sideEffects": false
+}

package/components/Modal/locale/locales/en.d.ts

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

package/components/Modal/locale/locales/ru/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../../cjs/components/Modal/locale/locales/ru.js",
+  "module": "ru",
+  "types": "../ru.d.ts",
+  "sideEffects": false
+}

package/components/Modal/locale/locales/ru/ru.js

@@ -0,0 +1,3 @@
+export var componentsLocales = {
+  closeButtonAriaLabel: 'Закрыть модальное окно'
+};

package/components/Modal/locale/locales/ru/ru.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEA,OAAO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,oBAAoB,EAAE,wBADsB,EAAvC","sourcesContent":["import { ModalLocale } from '../types';\n\nexport const componentsLocales: ModalLocale = {\n  closeButtonAriaLabel: 'Закрыть модальное окно',\n};\n"]}

package/components/Modal/locale/locales/ru.d.ts

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

package/components/Modal/locale/package.json

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

package/components/Modal/locale/types/package.json

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

package/components/Modal/locale/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/Modal/locale/types/types.js.map

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

package/components/Modal/locale/types.d.ts

@@ -0,0 +1,3 @@
+export interface ModalLocale {
+    closeButtonAriaLabel?: string;
+}

package/components/Paging/ForwardIcon/ForwardIcon.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { ArrowCRightIcon16Light } from "../../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon16Light";
+import { ArrowCRightIcon20Light } from "../../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon20Light";
+import { ArrowCRightIcon24Regular } from "../../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon24Regular";
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+export var ForwardIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(ArrowCRightIcon16Light, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(ArrowCRightIcon20Light, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(ArrowCRightIcon24Regular, null);
+  }
+}, 'ForwardIcon');

package/components/Paging/ForwardIcon/ForwardIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ForwardIcon.tsx"],"names":["React","ArrowCRightIcon16Light","ArrowCRightIcon20Light","ArrowCRightIcon24Regular","iconSizer","ForwardIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,sBAAT,QAAuC,iEAAvC;AACA,SAASC,sBAAT,QAAuC,iEAAvC;AACA,SAASC,wBAAT,QAAyC,mEAAzC;AACA,SAASC,SAAT,QAA0B,oCAA1B;;AAEA,OAAO,IAAMC,WAAW,GAAGD,SAAS;AAClC;AACEE,EAAAA,KAAK,EAAE,sCAAM,oBAAC,sBAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,sBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,wBAAD,OAAN,EAHT,EADkC;;AAMlC,aANkC,CAA7B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowCRightIcon16Light } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon16Light';\nimport { ArrowCRightIcon20Light } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon20Light';\nimport { ArrowCRightIcon24Regular } from '../../internal/icons2022/ArrowCRightIcon/ArrowCRightIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ForwardIcon = iconSizer(\n  {\n    small: () => <ArrowCRightIcon16Light />,\n    medium: () => <ArrowCRightIcon20Light />,\n    large: () => <ArrowCRightIcon24Regular />,\n  },\n  'ForwardIcon',\n);\n"]}

package/components/Paging/ForwardIcon/package.json

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

package/components/Paging/ForwardIcon.d.ts

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

package/components/Paging/NavigationHelper/NavigationHelper.js

@@ -1,3 +1,4 @@
+import { isMac } from "../../../lib/client";
 var keyDescription = null;
 
 var getKeyDescription = function getKeyDescription() {
@@ -5,7 +6,7 @@ var getKeyDescription = function getKeyDescription() {
 };
 
 var createKeyDescription = function createKeyDescription() {
-  return navigator.platform.includes('Mac') ? {
+  return isMac ? {
     name: 'Alt',
     checkPressed: function checkPressed(event) {
       return event.altKey;

package/components/Paging/NavigationHelper/NavigationHelper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["NavigationHelper.tsx"],"names":["keyDescription","getKeyDescription","createKeyDescription","navigator","platform","includes","name","checkPressed","event","altKey","ctrlKey","getKeyName","checkKeyPressed"],"mappings":";;;;;;;;;AASA,IAAIA,cAA4C,GAAG,IAAnD;;AAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,WAAMD,cAAc,KAAKA,cAAc,GAAGE,oBAAoB,EAA1C,CAApB,EAA1B;;AAEA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB;AAC3BC,IAAAA,SAAS,CAACC,QAAV,CAAmBC,QAAnB,CAA4B,KAA5B;AACI;AACEC,MAAAA,IAAI,EAAE,KADR;AAEEC,MAAAA,YAAY,EAAE,sBAACC,KAAD,UAA6DA,KAAK,CAACC,MAAnE,EAFhB,EADJ;;AAKI;AACEH,MAAAA,IAAI,EAAE,MADR;AAEEC,MAAAA,YAAY,EAAE,sBAACC,KAAD,UAA6DA,KAAK,CAACE,OAAnE,EAFhB,EANuB,GAA7B;;;AAWA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,WAAMV,iBAAiB,GAAGK,IAA1B,EAAnB;AACP,OAAO,IAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACJ,KAAD;AAC7BP,IAAAA,iBAAiB,GAAGM,YAApB,CAAiCC,KAAjC,CAD6B,GAAxB","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\n\nexport interface KeyDescriptionType {\n  name: string;\n  checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;\n}\n\nlet keyDescription: Nullable<KeyDescriptionType> = null;\n\nconst getKeyDescription = () => keyDescription || (keyDescription = createKeyDescription());\n\nconst createKeyDescription = () =>\n  navigator.platform.includes('Mac')\n    ? {\n        name: 'Alt',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.altKey,\n      }\n    : {\n        name: 'Ctrl',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.ctrlKey,\n      };\n\nexport const getKeyName = () => getKeyDescription().name;\nexport const checkKeyPressed = (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) =>\n  getKeyDescription().checkPressed(event);\n"]}
+{"version":3,"sources":["NavigationHelper.tsx"],"names":["isMac","keyDescription","getKeyDescription","createKeyDescription","name","checkPressed","event","altKey","ctrlKey","getKeyName","checkKeyPressed"],"mappings":";;AAEA,SAASA,KAAT,QAAsB,kBAAtB;;;;;;;;AAQA,IAAIC,cAA4C,GAAG,IAAnD;;AAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,WAAMD,cAAc,KAAKA,cAAc,GAAGE,oBAAoB,EAA1C,CAApB,EAA1B;;AAEA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB;AAC3BH,IAAAA,KAAK;AACD;AACEI,MAAAA,IAAI,EAAE,KADR;AAEEC,MAAAA,YAAY,EAAE,sBAACC,KAAD,UAA6DA,KAAK,CAACC,MAAnE,EAFhB,EADC;;AAKD;AACEH,MAAAA,IAAI,EAAE,MADR;AAEEC,MAAAA,YAAY,EAAE,sBAACC,KAAD,UAA6DA,KAAK,CAACE,OAAnE,EAFhB,EANuB,GAA7B;;;AAWA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,WAAMP,iBAAiB,GAAGE,IAA1B,EAAnB;AACP,OAAO,IAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACJ,KAAD;AAC7BJ,IAAAA,iBAAiB,GAAGG,YAApB,CAAiCC,KAAjC,CAD6B,GAAxB","sourcesContent":["import React from 'react';\n\nimport { isMac } from '../../lib/client';\nimport { Nullable } from '../../typings/utility-types';\n\nexport interface KeyDescriptionType {\n  name: string;\n  checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;\n}\n\nlet keyDescription: Nullable<KeyDescriptionType> = null;\n\nconst getKeyDescription = () => keyDescription || (keyDescription = createKeyDescription());\n\nconst createKeyDescription = () =>\n  isMac\n    ? {\n        name: 'Alt',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.altKey,\n      }\n    : {\n        name: 'Ctrl',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.ctrlKey,\n      };\n\nexport const getKeyName = () => getKeyDescription().name;\nexport const checkKeyPressed = (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) =>\n  getKeyDescription().checkPressed(event);\n"]}

package/components/Paging/Paging/Paging.js

@@ -5,6 +5,8 @@ var _dec, _class, _class2, _temp;
 
 import React from 'react';
 import { func, number } from 'prop-types';
+import { globalObject } from '@skbkontur/global-object';
+import { isInstanceOf } from "../../../lib/isInstanceOf";
 import { isKeyArrowLeft, isKeyArrowRight, isKeyEnter } from "../../../lib/events/keyboard/identifiers";
 import { locale } from "../../../lib/locale/decorators";
 import { keyListener } from "../../../lib/events/keyListener";
@@ -15,12 +17,23 @@ import { ArrowChevronRightIcon } from "../../../internal/icons/16px";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { getVisualStateDataAttributes } from "../../../internal/CommonWrapper/utils/getVisualStateDataAttributes";
 import { styles } from "../Paging.styles";
 import * as NavigationHelper from "../NavigationHelper";
 import { getItems } from "../PagingHelper";
 import { PagingLocaleHelper } from "../locale";
 import { PagingDefaultComponent } from "../PagingDefaultComponent";
+import { ForwardIcon } from "../ForwardIcon";
 var IGNORE_EVENT_TAGS = ['input', 'textarea'];
+export var PagingDataTids = {
+  root: 'Paging__root',
+  dots: 'Paging__dots',
+  forwardLink: 'Paging__forwardLink',
+  pageLinkWrapper: 'Paging__pageLinkWrapper',
+  pageLink: 'Paging__pageLink'
+};
 export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(Paging, _React$PureComponent);
 
@@ -32,10 +45,11 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
     }
 
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Paging.defaultProps);
     _this.state = {
       focusedByTab: false,
       focusedItem: null,
-      keyboardControl: _this.props.useGlobalListener
+      keyboardControl: _this.getProps().useGlobalListener
     };
     _this.addedGlobalListener = false;
     _this.container = null;
@@ -66,53 +80,69 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
     };
 
     _this.renderDots = function (key) {
+      var _cx;
+
       return /*#__PURE__*/React.createElement("span", {
-        "data-tid": "Paging__dots",
+        "data-tid": PagingDataTids.dots,
         key: key,
-        className: styles.dots(_this.theme)
+        className: cx((_cx = {}, _cx[styles.dots(_this.theme)] = true, _cx[styles.dotsDisabled(_this.theme)] = _this.props.disabled, _cx))
       }, '...');
     };
 
     _this.renderForwardLink = function (disabled, focused) {
-      var _cx;
+      var _cx2;
+
+      var classes = isTheme2022(_this.theme) ? cx(styles.pageLink(_this.theme), styles.forwardLink(_this.theme), focused && styles.pageLinkFocused(_this.theme), (disabled || _this.props.disabled) && styles.pageLinkDisabled(_this.theme)) : cx((_cx2 = {}, _cx2[styles.forwardLink(_this.theme)] = true, _cx2[styles.forwardLinkFocused()] = focused, _cx2[styles.forwardLinkDisabled(_this.theme)] = disabled || _this.props.disabled, _cx2));
+
+      var Component = _this.getProps().component;
 
-      var classes = cx((_cx = {}, _cx[styles.forwardLink(_this.theme)] = true, _cx[styles.forwardLinkFocused()] = focused, _cx[styles.disabled(_this.theme)] = disabled, _cx));
-      var _this$props = _this.props,
-          Component = _this$props.component,
-          caption = _this$props.caption;
       var forward = _this.locale.forward;
-      return /*#__PURE__*/React.createElement(Component, {
+      var forwardIcon = isTheme2022(_this.theme) ? /*#__PURE__*/React.createElement(ForwardIcon, {
+        size: parseInt(_this.theme.pagingForwardIconSize),
+        style: {
+          marginLeft: 4
+        }
+      }) : /*#__PURE__*/React.createElement("span", {
+        className: styles.forwardIcon(_this.theme)
+      }, /*#__PURE__*/React.createElement(ArrowChevronRightIcon, {
+        size: _this.theme.pagingForwardIconSize
+      }));
+      return /*#__PURE__*/React.createElement(Component, _extends({
         key: 'forward',
-        "data-tid": "Paging__forwardLink",
+        "data-tid": PagingDataTids.forwardLink,
         active: false,
         className: classes,
         onClick: disabled ? emptyHandler : _this.goForward,
         tabIndex: -1,
         pageNumber: 'forward'
-      }, caption || forward, /*#__PURE__*/React.createElement("span", {
-        className: styles.forwardIcon(_this.theme)
-      }, /*#__PURE__*/React.createElement(ArrowChevronRightIcon, {
-        size: _this.theme.pagingForwardIconSize
-      })));
+      }, getVisualStateDataAttributes({
+        disabled: disabled
+      })), _this.props.caption || forward, forwardIcon);
     };
 
     _this.renderPageLink = function (pageNumber, active, focused) {
-      var _cx2;
+      var _cx3;
+
+      var disabled = _this.props.disabled;
+      var classes = cx((_cx3 = {}, _cx3[styles.pageLink(_this.theme)] = true, _cx3[styles.pageLinkFocused(_this.theme)] = focused, _cx3[styles.pageLinkDisabled(_this.theme)] = disabled, _cx3[styles.pageLinkCurrent(_this.theme)] = active, _cx3[styles.pageLinkCurrentDisabled(_this.theme)] = active && disabled, _cx3));
 
-      var classes = cx((_cx2 = {}, _cx2[styles.pageLink(_this.theme)] = true, _cx2[styles.pageLinkFocused(_this.theme)] = focused, _cx2[styles.active(_this.theme)] = active, _cx2));
-      var Component = _this.props.component;
+      var Component = _this.getProps().component;
 
       var handleClick = function handleClick() {
         return _this.goToPage(pageNumber);
       };
 
-      return /*#__PURE__*/React.createElement("span", {
-        "data-tid": "Paging__pageLinkWrapper",
+      return /*#__PURE__*/React.createElement("span", _extends({
+        "data-tid": PagingDataTids.pageLinkWrapper,
         key: pageNumber,
-        className: styles.pageLinkWrapper(),
+        className: styles.pageLinkWrapper()
+      }, getVisualStateDataAttributes({
+        active: active,
+        disabled: disabled
+      }), {
         onMouseDown: _this.handleMouseDownPageLink
-      }, /*#__PURE__*/React.createElement(Component, {
-        "data-tid": "Paging__pageLink",
+      }), /*#__PURE__*/React.createElement(Component, {
+        "data-tid": PagingDataTids.pageLink,
         active: active,
         className: classes,
         onClick: handleClick,
@@ -132,10 +162,10 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
 
       var canGoForward = _this.canGoForward();
 
+      var hint = null;
+
       if (keyboardControl && (canGoBackward || canGoForward)) {
-        return /*#__PURE__*/React.createElement("span", {
-          className: styles.pageLinkHint(_this.theme)
-        }, /*#__PURE__*/React.createElement("span", {
+        hint = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
           className: canGoBackward ? '' : styles.transparent()
         }, '←'), /*#__PURE__*/React.createElement("span", null, NavigationHelper.getKeyName()), /*#__PURE__*/React.createElement("span", {
           className: canGoForward ? '' : styles.transparent()
@@ -143,8 +173,8 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
       }
 
       return /*#__PURE__*/React.createElement("div", {
-        className: styles.pageLinkHintPlaceHolder(_this.theme)
-      });
+        className: styles.pageLinkHint(_this.theme)
+      }, hint);
     };
 
     _this.handleMouseDown = function () {
@@ -158,7 +188,7 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
       if (isIE11) {
         // Клик по span внутри контейнера с tabindex="0" переносит фокус именно на этот span.
         // Поэтому горячие клавиши работают пока span существует на странице.
-        setTimeout(function () {
+        globalObject.setTimeout(function () {
           return _this.container && _this.container.focus();
         }, 0);
       }
@@ -173,7 +203,7 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
       var isArrowLeft = isKeyArrowLeft(e);
       var isArrowRight = isKeyArrowRight(e);
 
-      if (target instanceof Element && (IGNORE_EVENT_TAGS.includes(target.tagName.toLowerCase()) || target.isContentEditable)) {
+      if (isInstanceOf(target, globalObject.Element) && (IGNORE_EVENT_TAGS.includes(target.tagName.toLowerCase()) || target.isContentEditable)) {
         return;
       }
 
@@ -218,7 +248,7 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
       }
     };
 
-    _this.handleFocus = function (e) {
+    _this.handleFocus = function () {
       if (_this.props.disabled) {
         return;
       }
@@ -229,7 +259,7 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
       // so we should check tabPressed in async way
 
 
-      requestAnimationFrame(function () {
+      globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
         if (keyListener.isTabPressed) {
           _this.setState({
             focusedByTab: true
@@ -241,7 +271,7 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
     _this.handleBlur = function () {
       _this.setState({
         focusedByTab: false,
-        keyboardControl: _this.props.useGlobalListener || false
+        keyboardControl: _this.getProps().useGlobalListener || false
       });
     };
 
@@ -339,17 +369,21 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
     };
 
     _this.addGlobalListener = function () {
+      var _globalObject$documen;
+
       if (_this.addedGlobalListener) {
         return;
       }
 
-      document.addEventListener('keydown', _this.handleKeyDown);
+      (_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.addEventListener('keydown', _this.handleKeyDown);
       _this.addedGlobalListener = true;
     };
 
     _this.removeGlobalListener = function () {
       if (_this.addedGlobalListener) {
-        document.removeEventListener('keydown', _this.handleKeyDown);
+        var _globalObject$documen2;
+
+        (_globalObject$documen2 = globalObject.document) == null ? void 0 : _globalObject$documen2.removeEventListener('keydown', _this.handleKeyDown);
         _this.addedGlobalListener = false;
       }
     };
@@ -370,7 +404,7 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
   var _proto = Paging.prototype;
 
   _proto.componentDidMount = function componentDidMount() {
-    var useGlobalListener = this.props.useGlobalListener;
+    var useGlobalListener = this.getProps().useGlobalListener;
 
     if (useGlobalListener) {
       this.addGlobalListener();
@@ -378,17 +412,19 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (!prevProps.useGlobalListener && this.props.useGlobalListener) {
+    var useGlobalListener = this.getProps().useGlobalListener;
+
+    if (!prevProps.useGlobalListener && useGlobalListener) {
       this.addGlobalListener();
     }
 
-    if (prevProps.useGlobalListener && !this.props.useGlobalListener) {
+    if (prevProps.useGlobalListener && !useGlobalListener) {
       this.removeGlobalListener();
     }
 
-    if (prevProps.useGlobalListener !== this.props.useGlobalListener) {
+    if (prevProps.useGlobalListener !== useGlobalListener) {
       this.setState({
-        keyboardControl: this.props.useGlobalListener
+        keyboardControl: useGlobalListener
       });
     }
   };
@@ -400,7 +436,7 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
   _proto.render = function render() {
     var _this2 = this;
 
-    if (this.props.pagesCount < 2 && !this.props.shouldBeVisibleWithLessThanTwoPages) {
+    if (this.props.pagesCount < 2 && !this.getProps().shouldBeVisibleWithLessThanTwoPages) {
       return null;
     }
 
@@ -411,13 +447,21 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
   };
 
   _proto.renderMain = function renderMain() {
+    var _cx4;
+
+    var _this$getProps = this.getProps(),
+        dataTid = _this$getProps['data-tid'],
+        useGlobalListener = _this$getProps.useGlobalListener;
+
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
-    }, this.props), /*#__PURE__*/React.createElement("span", {
-      tabIndex: 0,
-      "data-tid": this.props['data-tid'],
-      className: styles.paging(this.theme),
-      onKeyDown: this.props.useGlobalListener ? undefined : this.handleKeyDown,
+    }, this.props, getVisualStateDataAttributes({
+      disabled: this.props.disabled
+    })), /*#__PURE__*/React.createElement("span", {
+      tabIndex: this.props.disabled ? -1 : 0,
+      "data-tid": dataTid,
+      className: cx((_cx4 = {}, _cx4[styles.paging(this.theme)] = true, _cx4[styles.pagingDisabled()] = this.props.disabled, _cx4)),
+      onKeyDown: useGlobalListener ? undefined : this.handleKeyDown,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       onMouseDown: this.handleMouseDown,
@@ -426,11 +470,11 @@ export var Paging = (_dec = locale('Paging', PagingLocaleHelper), rootNode(_clas
   };
 
   return Paging;
-}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Paging', _class2.defaultProps = {
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Paging', _class2.displayName = 'Paging', _class2.defaultProps = {
   component: PagingDefaultComponent,
   shouldBeVisibleWithLessThanTwoPages: true,
   useGlobalListener: false,
-  'data-tid': 'Paging__root'
+  'data-tid': PagingDataTids.root
 }, _class2.propTypes = {}, _temp)) || _class) || _class);
 Paging.propTypes = {
   /**