@skbkontur/react-ui 0.0.0-d49c4902ee → 0.0.0-d560679cdd

package/cjs/components/Paging/Paging.d.ts

@@ -1,101 +1,112 @@
-import React from 'react';
-import { Nullable } from '../../typings/utility-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-export interface ItemComponentProps {
-    /** Определяет, является ли страница текущей. */
-    active: boolean;
-    /** @ignore */
-    children?: React.ReactNode;
-    /** Задает HTML-атрибут class. */
-    className: string;
-    /** Задает функцию, которая вызывается при клике на элемент. */
-    onClick: () => void;
-    /** Задает номер текущей страницы. */
-    pageNumber: number | 'forward';
-    /** Задает HTML-атрибут `tabindex`. */
-    tabIndex: number;
-}
-export interface PagingProps extends CommonProps {
-    activePage: number;
-    /** Компонент обертки по умолчанию.
-     * @default <span /> */
-    component?: React.ComponentType<ItemComponentProps>;
-    /** Задает функцию, которая вызывается при переключении страницы. */
-    onPageChange: (pageNumber: number) => void;
-    /** Задает общее количество страниц. */
-    pagesCount: number;
-    /** Делает компонент недоступным. */
-    disabled?: boolean;
-    /** Отключает навигационные подсказки.
-     * По-умолчанию подсказки появляются, когда доступно управление с клавиатуры (либо элемент в фокусе, либо globalListeners === true). */
-    withoutNavigationHint?: boolean;
-    /** Задает подпить у пейджинга. */
-    caption?: string;
-    /** Глобальный слушатель **keyDown**, для навигации клавишами без фокуса на компоненте.
-     * Если на странице используется несколько элементов **Paging** с useGlobalListener === true,
-     * то обработчик keyDown будет вызываться на каждом из них. Такие случаи лучше обрабатывать отдельно. */
-    useGlobalListener?: boolean;
-}
-export interface PagingState {
-    focusedByTab: boolean;
-    focusedItem: Nullable<ItemType>;
-    keyboardControl: boolean;
-}
-export type ItemType = number | '.' | 'forward';
-export declare const PagingDataTids: {
-    readonly root: "Paging__root";
-    readonly dots: "Paging__dots";
-    readonly forwardLink: "Paging__forwardLink";
-    readonly pageLinkWrapper: "Paging__pageLinkWrapper";
-    readonly pageLink: "Paging__pageLink";
-};
-type DefaultProps = Required<Pick<PagingProps, 'component' | 'useGlobalListener'>>;
-/**
- * Постраничная навигация `Paging` (пейджинг или пагинация) — способ представления большого количества однородной информации, когда контент разбивается на страницы.
- */
-export declare class Paging extends React.PureComponent<PagingProps, PagingState> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    static defaultProps: DefaultProps;
-    private getProps;
-    static propTypes: {};
-    private setRootNode;
-    static isForward(pageNumber: number | 'forward'): boolean;
-    state: PagingState;
-    private theme;
-    private readonly locale;
-    private addedGlobalListener;
-    private container;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: PagingProps): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element | null;
-    private renderMain;
-    private renderItem;
-    private renderDots;
-    private renderForwardLink;
-    private renderPageLink;
-    private renderNavigationHint;
-    private handleMouseDown;
-    private handleMouseDownPageLink;
-    private handleKeyDown;
-    private handleFocus;
-    private handleBlur;
-    private getItems;
-    private getFocusedItem;
-    private isItemFocusable;
-    private isItemDisabled;
-    private executeItemAction;
-    private moveFocusLeft;
-    private moveFocusRight;
-    private moveFocus;
-    private canGoBackward;
-    private canGoForward;
-    private goBackward;
-    private goForward;
-    private goToPage;
-    private addGlobalListener;
-    private removeGlobalListener;
-    private refContainer;
-}
-export {};
+import React from 'react';
+import type { Nullable } from '../../typings/utility-types';
+import type { CommonProps } from '../../internal/CommonWrapper';
+import type { TGetRootNode } from '../../lib/rootNode';
+import type { SizeProp } from '../../lib/types/props';
+export interface ItemComponentProps {
+    /** Определяет, является ли страница текущей. */
+    active: boolean;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Задает HTML-атрибут class. */
+    className: string;
+    /** Задает функцию, которая вызывается при клике на элемент. */
+    onClick: () => void;
+    /** Задает номер текущей страницы. */
+    pageNumber: number | 'forward';
+    /** Задает HTML-атрибут `tabindex`. */
+    tabIndex: number;
+}
+export interface PagingProps extends CommonProps {
+    activePage: number;
+    /** Компонент обертки по умолчанию.
+     * @default <span/> */
+    component?: React.ComponentType<ItemComponentProps>;
+    /** Задает функцию, которая вызывается при переключении страницы. */
+    onPageChange: (pageNumber: number) => void;
+    /** Задает общее количество страниц. */
+    pagesCount: number;
+    /** Задает размер контрола.
+     * @default 'small', начиная с версии темы 5.3. До этого по умолчанию стоит старый размер 'legacy'. */
+    size?: SizeProp;
+    /** Делает компонент недоступным. */
+    disabled?: boolean;
+    /** Отключает навигационные подсказки.
+     * По-умолчанию подсказки появляются, когда доступно управление с клавиатуры (либо элемент в фокусе, либо globalListeners === true). */
+    withoutNavigationHint?: boolean;
+    /** Задает подпить у пейджинга. */
+    caption?: string;
+    /** Глобальный слушатель **keyDown**, для навигации клавишами без фокуса на компоненте.
+     * Если на странице используется несколько элементов **Paging** с useGlobalListener === true,
+     * то обработчик keyDown будет вызываться на каждом из них. Такие случаи лучше обрабатывать отдельно. */
+    useGlobalListener?: boolean;
+}
+export interface PagingState {
+    focusedByTab: boolean;
+    focusedItem: Nullable<ItemType>;
+    keyboardControl: boolean;
+}
+export type ItemType = number | '.' | 'forward';
+export declare const PagingDataTids: {
+    readonly root: "Paging__root";
+    readonly dots: "Paging__dots";
+    readonly forwardLink: "Paging__forwardLink";
+    readonly pageLinkWrapper: "Paging__pageLinkWrapper";
+    readonly pageLink: "Paging__pageLink";
+};
+type DefaultProps = Required<Pick<PagingProps, 'component' | 'useGlobalListener'>>;
+/**
+ * Постраничная навигация `Paging` (пейджинг или пагинация) — способ представления большого количества однородной информации, когда контент разбивается на страницы.
+ */
+export declare class Paging extends React.PureComponent<PagingProps, PagingState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    static isForward(pageNumber: number | 'forward'): boolean;
+    state: PagingState;
+    private theme;
+    private readonly locale;
+    private isMobile;
+    private sizeClassNames;
+    private addedGlobalListener;
+    private container;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PagingProps): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element | null;
+    private renderMain;
+    private renderItem;
+    private renderDots;
+    private renderForwardLink;
+    private renderPageLink;
+    private renderNavigationHint;
+    private handleMouseDown;
+    private handleMouseDownPageLink;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    private getItems;
+    private getFocusedItem;
+    private isItemFocusable;
+    private isItemDisabled;
+    private executeItemAction;
+    private moveFocusLeft;
+    private moveFocusRight;
+    private moveFocus;
+    private canGoBackward;
+    private canGoForward;
+    private goBackward;
+    private goForward;
+    private goToPage;
+    private addGlobalListener;
+    private removeGlobalListener;
+    private refContainer;
+    private getPagingSizeClassNames;
+    private getDotsIcon;
+    private getForwardIcon;
+    private getSize;
+}
+export {};

package/cjs/components/Paging/Paging.js

@@ -1,5 +1,4 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.PagingDataTids = exports.Paging = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _propTypes = require("prop-types");
 var _globalObject = require("@skbkontur/global-object");
 
 var _isInstanceOf = require("../../lib/isInstanceOf");
@@ -11,18 +10,25 @@ var _utils = require("../../lib/utils");
 var _client = require("../../lib/client");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
+
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");
+var _ResponsiveLayout = require("../ResponsiveLayout");
+
 
 var _Paging2 = require("./Paging.styles");
 var NavigationHelper = _interopRequireWildcard(require("./NavigationHelper"));
 var _PagingHelper = require("./PagingHelper");
+
 var _locale = require("./locale");
 var _PagingDefaultComponent = require("./PagingDefaultComponent");
-var _ForwardIcon = require("./ForwardIcon");var _dec, _class, _Paging;
+var _ForwardIcon = require("./ForwardIcon");
+var _DotsIcon = require("./DotsIcon");var _dec, _class, _Paging;
 
 var IGNORE_EVENT_TAGS = ['input', 'textarea'];
 
@@ -76,6 +82,11 @@ var IGNORE_EVENT_TAGS = ['input', 'textarea'];
 
 
 
+
+
+
+
+
 
 
 
@@ -92,6 +103,13 @@ var PagingDataTids = exports.PagingDataTids = {
 
 
 
+
+
+
+
+
+
+
 /**
  * Постраничная навигация `Paging` (пейджинг или пагинация) — способ представления большого количества однородной информации, когда контент разбивается на страницы.
  */var
@@ -123,6 +141,8 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
 
 
+
+
     addedGlobalListener = false;_this.
     container = null;_this.
 
@@ -181,6 +201,17 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -216,50 +247,55 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
         _react.default.createElement("span", {
           "data-tid": PagingDataTids.dots,
           key: key,
-          className: (0, _Emotion.cx)((_cx = {}, _cx[_Paging2.styles.dots(_this.theme)] = true, _cx[_Paging2.styles.dotsDisabled(_this.theme)] = _this.props.disabled, _cx)) },
+          className: (0, _Emotion.cx)(_Paging2.styles.dots(_this.theme), _this.sizeClassNames.dots, (_cx = {}, _cx[
+          _Paging2.styles.dotsDisabled(_this.theme)] = _this.props.disabled, _cx)
+          ) },
 
-        '...'
+        _this.getDotsIcon()
         ));
 
     };_this.
 
-    renderForwardLink = function (disabled, focused) {
-      var classes = (0, _Emotion.cx)(
+    renderForwardLink = function (disabled, focused) {var _cx2;
+      var classNames = (0, _Emotion.cx)(
         _Paging2.styles.pageLink(_this.theme),
+        _this.sizeClassNames.pageLink,
         _Paging2.styles.forwardLink(_this.theme),
-        focused && _Paging2.styles.pageLinkFocused(_this.theme),
-        (disabled || _this.props.disabled) && _Paging2.styles.forwardLinkDisabled(_this.theme)
+        _this.sizeClassNames.forwardLink, (_cx2 = {}, _cx2[
+
+        _Paging2.styles.pageLinkFocused(_this.theme)] = focused, _cx2[
+        _Paging2.styles.forwardLinkDisabled(_this.theme)] = disabled || _this.props.disabled, _cx2)
+
       );
       var Component = _this.getProps().component;
       var forward = _this.locale.forward;
 
-      var forwardIcon = /*#__PURE__*/_react.default.createElement(_ForwardIcon.ForwardIcon, { size: parseInt(_this.theme.pagingForwardIconSize), style: { marginLeft: 4 } });
+      var forwardIcon = _this.getForwardIcon();
 
       return /*#__PURE__*/(
         _react.default.createElement(Component, (0, _extends2.default)({
           key: 'forward',
           "data-tid": PagingDataTids.forwardLink,
           active: false,
-          className: classes,
+          className: classNames,
           onClick: disabled ? _utils.emptyHandler : _this.goForward,
           tabIndex: -1,
           pageNumber: 'forward' },
         (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: disabled })),
 
-        _this.props.caption || forward,
+        !_this.isMobile && (_this.props.caption || forward),
         forwardIcon
         ));
 
     };_this.
 
-    renderPageLink = function (pageNumber, active, focused) {var _cx2;
+    renderPageLink = function (pageNumber, active, focused) {var _cx3;
       var disabled = _this.props.disabled;
-      var classes = (0, _Emotion.cx)((_cx2 = {}, _cx2[
-      _Paging2.styles.pageLink(_this.theme)] = true, _cx2[
-      _Paging2.styles.pageLinkFocused(_this.theme)] = focused, _cx2[
-      _Paging2.styles.pageLinkDisabled(_this.theme)] = disabled, _cx2[
-      _Paging2.styles.pageLinkCurrent(_this.theme)] = active, _cx2[
-      _Paging2.styles.pageLinkCurrentDisabled(_this.theme)] = active && disabled, _cx2)
+      var classNames = (0, _Emotion.cx)(_Paging2.styles.pageLink(_this.theme), _this.sizeClassNames.pageLink, (_cx3 = {}, _cx3[
+      _Paging2.styles.pageLinkFocused(_this.theme)] = focused, _cx3[
+      _Paging2.styles.pageLinkDisabled(_this.theme)] = disabled, _cx3[
+      _Paging2.styles.pageLinkCurrent(_this.theme)] = active, _cx3[
+      _Paging2.styles.pageLinkCurrentDisabled(_this.theme)] = active && disabled, _cx3)
       );
       var Component = _this.getProps().component;
       var handleClick = function handleClick() {return _this.goToPage(pageNumber);};
@@ -275,14 +311,14 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
         _react.default.createElement(Component, {
           "data-tid": PagingDataTids.pageLink,
           active: active,
-          className: classes,
+          className: classNames,
           onClick: handleClick,
           tabIndex: -1,
           pageNumber: pageNumber },
 
         pageNumber
         ),
-        active && _this.renderNavigationHint()
+        active && !_this.isMobile && _this.renderNavigationHint()
         ));
 
     };_this.
@@ -301,7 +337,7 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
         hint = /*#__PURE__*/
         _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
         _react.default.createElement("span", { className: canGoBackward ? '' : _Paging2.styles.transparent() }, '←'), /*#__PURE__*/
-        _react.default.createElement("span", null, NavigationHelper.getKeyName()), /*#__PURE__*/
+        _react.default.createElement("span", null, NavigationHelper.getKeyName(_this.theme)), /*#__PURE__*/
         _react.default.createElement("span", { className: canGoForward ? '' : _Paging2.styles.transparent() }, '→')
         );
 
@@ -338,11 +374,11 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
         return;
       }
 
-      if (NavigationHelper.checkKeyPressed(e) && isArrowLeft) {
+      if (NavigationHelper.checkKeyPressed(e, _this.theme) && isArrowLeft) {
         _this.setState({ focusedItem: null }, _this.goBackward);
         return;
       }
-      if (NavigationHelper.checkKeyPressed(e) && isArrowRight) {
+      if (NavigationHelper.checkKeyPressed(e, _this.theme) && isArrowRight) {
         _this.setState({ focusedItem: null }, _this.goForward);
         return;
       }
@@ -387,7 +423,7 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
     };_this.
 
     getItems = function () {
-      return (0, _PagingHelper.getItems)(_this.props.activePage, _this.props.pagesCount).concat('forward');
+      return (0, _PagingHelper.getItems)(_this.props.activePage, _this.props.pagesCount, _this.isMobile).concat('forward');
     };_this.
 
     getFocusedItem = function () {
@@ -486,29 +522,66 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
     refContainer = function (element) {
       _this.container = element;
-    };return _this;}(0, _inheritsLoose2.default)(Paging, _React$PureComponent);Paging.isForward = function isForward(pageNumber) /* %checks */{return pageNumber === 'forward';};var _proto = Paging.prototype;_proto.componentDidMount = function componentDidMount() {var useGlobalListener = this.getProps().useGlobalListener;if (useGlobalListener) {this.addGlobalListener();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var useGlobalListener = this.getProps().useGlobalListener;if (!prevProps.useGlobalListener && useGlobalListener) {this.addGlobalListener();}if (prevProps.useGlobalListener && !useGlobalListener) {this.removeGlobalListener();}if (prevProps.useGlobalListener !== useGlobalListener) {this.setState({ keyboardControl: useGlobalListener });}};_proto.componentWillUnmount = function componentWillUnmount() {this.removeGlobalListener();};_proto.render = function render() {var _this2 = this;if (this.props.pagesCount < 2) {return null;}return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx3;var _this$getProps = this.getProps(),useGlobalListener = _this$getProps.useGlobalListener;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: this.props.disabled })), /*#__PURE__*/_react.default.createElement("span", { tabIndex: this.props.disabled ? -1 : 0, "data-tid": PagingDataTids.root, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_Paging2.styles.paging(this.theme)] = true, _cx3[_Paging2.styles.pagingDisabled()] = this.props.disabled, _cx3)), onKeyDown: useGlobalListener ? undefined : this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, ref: this.refContainer }, this.getItems().map(this.renderItem)));};return Paging;}(_react.default.PureComponent), _Paging.__KONTUR_REACT_UI__ = 'Paging', _Paging.displayName = 'Paging', _Paging.defaultProps = { component: _PagingDefaultComponent.PagingDefaultComponent, useGlobalListener: false }, _Paging.propTypes = {}, _Paging)) || _class) || _class);
-
-
-Paging.propTypes = {
-  /**
-   * Current active page
-   */
-  activePage: _propTypes.number.isRequired,
-
-  /**
-   * React component that would be used for rendering items
-   *
-   * Usefull for router integration
-   */
-  component: _propTypes.func,
-
-  /**
-   * Total page count
-   */
-  pagesCount: _propTypes.number.isRequired,
-
-  /**
-   * Calls when page has been changed
-   */
-  onPageChange: _propTypes.func.isRequired
-};
+    };_this.
+
+    getPagingSizeClassNames = function () {
+      var size = _this.getSize();
+      switch (size) {
+        case 'legacy':
+          return {
+            root: _Paging2.styles.pagingLegacy(_this.theme),
+            dots: _Paging2.styles.dotsLegacy(_this.theme),
+            forwardLink: _Paging2.styles.forwardLinkLegacy(_this.theme),
+            pageLink: _Paging2.styles.pageLinkLegacy(_this.theme)
+          };
+        case 'small':
+          return {
+            root: _Paging2.styles.pagingSmall(_this.theme),
+            dots: _Paging2.styles.dotsSmall(_this.theme),
+            forwardLink: _Paging2.styles.forwardLinkSmall(_this.theme),
+            pageLink: _Paging2.styles.pageLinkSmall(_this.theme)
+          };
+        case 'medium':
+          return {
+            root: _Paging2.styles.pagingMedium(_this.theme),
+            dots: _Paging2.styles.dotsMedium(_this.theme),
+            forwardLink: _this.isMobile ?
+            _Paging2.styles.forwardLinkMediumMobile(_this.theme) :
+            _Paging2.styles.forwardLinkMedium(_this.theme),
+            pageLink: _Paging2.styles.pageLinkMedium(_this.theme)
+          };
+        case 'large':
+          return {
+            root: _Paging2.styles.pagingLarge(_this.theme),
+            dots: _Paging2.styles.dotsLarge(_this.theme),
+            forwardLink: _this.isMobile ? _Paging2.styles.forwardLinkLargeMobile(_this.theme) : _Paging2.styles.forwardLinkLarge(_this.theme),
+            pageLink: _Paging2.styles.pageLinkLarge(_this.theme)
+          };
+        default:
+          throw new TypeError("Invalid size prop: '" + _this.props.size + "'");
+      }
+    };_this.
+
+    getDotsIcon = function () {
+      var size = _this.getSize();
+      return size === 'legacy' ? '...' : /*#__PURE__*/_react.default.createElement(_DotsIcon.DotsIcon, { size: size });
+    };_this.
+
+    getForwardIcon = function () {
+      var size = _this.getSize();
+      var iconSize = size === 'legacy' ? parseInt(_this.theme.pagingForwardIconSize) : size;
+      return _this.isMobile ? /*#__PURE__*/
+      _react.default.createElement(_ForwardIcon.ForwardIconMobile, { size: iconSize }) : /*#__PURE__*/
+
+      _react.default.createElement(_ForwardIcon.ForwardIcon, { size: iconSize, style: { marginLeft: 4 } });
+
+    };_this.
+
+    getSize = function () {
+      if (_this.props.size) {
+        return _this.isMobile && _this.props.size === 'small' ? 'medium' : _this.props.size;
+      }
+
+      var defaultSize = (0, _ThemeHelpers.isThemeGTE)(_this.theme, '5.3') ? 'small' : 'legacy';
+      return _this.isMobile && defaultSize === 'small' ? 'medium' : defaultSize;
+    };return _this;}(0, _inheritsLoose2.default)(Paging, _React$PureComponent);Paging.isForward = function isForward(pageNumber) {return pageNumber === 'forward';};var _proto = Paging.prototype;_proto.componentDidMount = function componentDidMount() {var useGlobalListener = this.getProps().useGlobalListener;if (useGlobalListener) {this.addGlobalListener();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var useGlobalListener = this.getProps().useGlobalListener;if (!prevProps.useGlobalListener && useGlobalListener) {this.addGlobalListener();}if (prevProps.useGlobalListener && !useGlobalListener) {this.removeGlobalListener();}if (prevProps.useGlobalListener !== useGlobalListener) {this.setState({ keyboardControl: useGlobalListener });}};_proto.componentWillUnmount = function componentWillUnmount() {this.removeGlobalListener();};_proto.render = function render() {var _this2 = this;if (this.props.pagesCount < 2) {return null;}return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var isMobile = _ref.isMobile;_this2.isMobile = isMobile && (0, _ThemeHelpers.isThemeGTE)(_this2.theme, '5.3');_this2.sizeClassNames = _this2.getPagingSizeClassNames();return _this2.renderMain();});});};_proto.renderMain = function renderMain() {var _cx4,_this3 = this;var _this$getProps = this.getProps(),useGlobalListener = _this$getProps.useGlobalListener;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: this.props.disabled })), /*#__PURE__*/_react.default.createElement("span", { tabIndex: this.props.disabled ? -1 : 0, "data-tid": PagingDataTids.root, className: (0, _Emotion.cx)(_Paging2.styles.paging(), this.sizeClassNames.root, (_cx4 = {}, _cx4[_Paging2.styles.pagingMobile()] = this.isMobile, _cx4[_Paging2.styles.pagingDisabled()] = this.props.disabled, _cx4)), onKeyDown: useGlobalListener ? undefined : this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, ref: this.refContainer }, this.getItems().map(function (item, index) {return _this3.renderItem(item, index);})));};return Paging;}(_react.default.PureComponent), _Paging.__KONTUR_REACT_UI__ = 'Paging', _Paging.displayName = 'Paging', _Paging.defaultProps = { component: _PagingDefaultComponent.PagingDefaultComponent, useGlobalListener: false }, _Paging)) || _class) || _class);