@skbkontur/react-ui 5.6.1-85c65.0 → 5.6.1-9a162.0

package/cjs/components/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_renderEnvironment","_Sticky","_ThemeContext","_CommonWrapper","_ResponsiveLayout","_Modal","_ModalClose","_ModalContext","_ModalSeparator","ModalHeaderDataTids","exports","root","ModalHeader","props","theme","useContext","ThemeContext","_useEmotion","useEmotion","cx","styles","useStyles","getStyles","modal","ModalContext","layout","useResponsiveLayout","_props$sticky","sticky","isMobile","_props$cutTitleOnStuc","cutTitleOnStuck","children","useLayoutEffect","setHasHeader","renderContent","fixed","default","createElement","className","header","mobileHeader","Boolean","additionalPadding","headerAddPadding","fixedHeader","titleCut","mobileFixedHeader","close","headerWithClose","mobileHeaderWithClose","ModalClose","requestClose","disableClose","ModalSeparator","getStickyOffset","mobileOnFullScreen","parseInt","mobileModalContainerMarginTop","CommonWrapper","Sticky","offset","side","__KONTUR_REACT_UI__","displayName","__MODAL_HEADER__"],"sources":["ModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useContext, useLayoutEffect } from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment';\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { getStyles } from './Modal.styles';\nimport { ModalClose } from './ModalClose';\nimport { ModalContext } from './ModalContext';\nimport { ModalSeparator } from './ModalSeparator';\n\nexport interface ModalHeaderProps extends CommonProps {\n  /** Закрепляет заголовок модального окна при скролле длинной контент-зоны. */\n  sticky?: boolean;\n\n  /** @ignore */\n  children?: ReactNode;\n\n  /**\n   * Обрезает длинный заголовок. Работает с пропом `sticky`.\n   * @default false\n   */\n  cutTitleOnStuck?: boolean;\n}\n\nexport const ModalHeaderDataTids = {\n  root: 'ModalHeader__root',\n} as const;\n\n/**\n * Шапка модального окна, состоит из заголовка и крестика закрытия.\n *\n * @visibleName Modal.Header\n */\nfunction ModalHeader(props: ModalHeaderProps): React.JSX.Element {\n  const theme = useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, cutTitleOnStuck = false, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasHeader?.(true);\n\n    return () => modal.setHasHeader?.(false);\n  }, []);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div>\n        <div\n          data-tid={ModalHeaderDataTids.root}\n          className={cx(\n            styles.header(theme),\n            layout.isMobile && styles.mobileHeader(theme),\n            Boolean(modal.additionalPadding) && styles.headerAddPadding(theme),\n            fixed && styles.fixedHeader(theme),\n            cutTitleOnStuck && fixed && styles.titleCut(),\n            fixed && layout.isMobile && styles.mobileFixedHeader(theme),\n            Boolean(modal.close) && styles.headerWithClose(theme),\n            Boolean(modal.close) && layout.isMobile && styles.mobileHeaderWithClose(theme),\n          )}\n        >\n          {modal.close && (\n            <ModalClose requestClose={modal.close.requestClose} disableClose={modal.close.disableClose} />\n          )}\n          {children}\n        </div>\n        {fixed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  const getStickyOffset = () => {\n    if (layout.isMobile && !modal.mobileOnFullScreen) {\n      return parseInt(theme.mobileModalContainerMarginTop);\n    }\n    return 0;\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      {sticky ? (\n        <Sticky offset={getStickyOffset()} side=\"top\">\n          {renderContent}\n        </Sticky>\n      ) : (\n        renderContent()\n      )}\n    </CommonWrapper>\n  );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.displayName = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_Sticky","_ThemeContext","_CommonWrapper","_Emotion","_ResponsiveLayout","_ThemeHelpers","_Modal","_ModalClose","_ModalContext","_ModalSeparator","ModalHeaderDataTids","exports","root","ModalHeader","props","theme","useContext","ThemeContext","modal","ModalContext","layout","useResponsiveLayout","_props$sticky","sticky","isMobile","_props$cutTitleOnStuc","cutTitleOnStuck","children","useLayoutEffect","setHasHeader","versionGTE5_2","isThemeGTE","renderContent","fixed","default","createElement","className","cx","styles","header","header5_2","mobileHeader","Boolean","additionalPadding","headerAddPadding","fixedHeader","titleCut","fixedHeader5_2","mobileFixedHeader","mobileFixedHeader5_2","close","headerWithClose","mobileHeaderWithClose","ModalClose","requestClose","disableClose","ModalSeparator","getStickyOffset","mobileOnFullScreen","parseInt","mobileModalContainerMarginTop","CommonWrapper","Sticky","offset","side","__KONTUR_REACT_UI__","displayName","__MODAL_HEADER__"],"sources":["ModalHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { useContext, useLayoutEffect } from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './Modal.styles';\nimport { ModalClose } from './ModalClose';\nimport { ModalContext } from './ModalContext';\nimport { ModalSeparator } from './ModalSeparator';\n\nexport interface ModalHeaderProps extends CommonProps {\n  /** Закрепляет заголовок модального окна при скролле длинной контент-зоны. */\n  sticky?: boolean;\n\n  /** @ignore */\n  children?: ReactNode;\n\n  /**\n   * Обрезает длинный заголовок. Работает с пропом `sticky`.\n   * @default false\n   */\n  cutTitleOnStuck?: boolean;\n}\n\nexport const ModalHeaderDataTids = {\n  root: 'ModalHeader__root',\n} as const;\n\n/**\n * Шапка модального окна, состоит из заголовка и крестика закрытия.\n *\n * @visibleName Modal.Header\n */\nfunction ModalHeader(props: ModalHeaderProps) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, cutTitleOnStuck = false, children } = props;\n\n  useLayoutEffect(() => {\n    modal.setHasHeader?.(true);\n\n    return () => modal.setHasHeader?.(false);\n  }, []);\n\n  const versionGTE5_2 = isThemeGTE(theme, '5.2');\n  const renderContent = (fixed = false) => {\n    return (\n      <div>\n        <div\n          data-tid={ModalHeaderDataTids.root}\n          className={cx(\n            styles.header(theme),\n            versionGTE5_2 && styles.header5_2(theme),\n            layout.isMobile && styles.mobileHeader(theme),\n            Boolean(modal.additionalPadding) && styles.headerAddPadding(theme),\n            fixed && styles.fixedHeader(theme),\n            cutTitleOnStuck && fixed && styles.titleCut(),\n            versionGTE5_2 && fixed && styles.fixedHeader5_2(),\n            fixed && layout.isMobile && styles.mobileFixedHeader(theme),\n            versionGTE5_2 && fixed && layout.isMobile && styles.mobileFixedHeader5_2(theme),\n            Boolean(modal.close) && styles.headerWithClose(theme),\n            Boolean(modal.close) && layout.isMobile && styles.mobileHeaderWithClose(theme),\n          )}\n        >\n          {modal.close && (\n            <ModalClose requestClose={modal.close.requestClose} disableClose={modal.close.disableClose} />\n          )}\n          {children}\n        </div>\n        {fixed && <ModalSeparator fixed={fixed} />}\n      </div>\n    );\n  };\n\n  const getStickyOffset = () => {\n    if (versionGTE5_2 && layout.isMobile && !modal.mobileOnFullScreen) {\n      return parseInt(theme.mobileModalContainerMarginTop);\n    }\n    return 0;\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      {sticky ? (\n        <Sticky offset={getStickyOffset()} side=\"top\">\n          {renderContent}\n        </Sticky>\n      ) : (\n        renderContent()\n      )}\n    </CommonWrapper>\n  );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.displayName = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/Modal/ModalSeparator.js

@@ -1,6 +1,6 @@
 "use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.ModalSeparator = ModalSeparator;var _react = _interopRequireWildcard(require("react"));
 
-var _renderEnvironment = require("../../lib/renderEnvironment");
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
@@ -18,12 +18,10 @@ var _Modal = require("./Modal.styles");
  */
 function ModalSeparator(_ref) {var fixed = _ref.fixed;
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
-  var _useEmotion = (0, _renderEnvironment.useEmotion)(),cx = _useEmotion.cx;
-  var styles = (0, _renderEnvironment.useStyles)(_Modal.getStyles);
 
   return /*#__PURE__*/(
-    _react.default.createElement("div", { className: styles.modalSeparatorWrapper() }, /*#__PURE__*/
-    _react.default.createElement("div", { className: cx(styles.modalSeparator(theme), fixed && styles.modalSeparatorFixed(theme)) })
+    _react.default.createElement("div", { className: _Modal.styles.modalSeparatorWrapper() }, /*#__PURE__*/
+    _react.default.createElement("div", { className: (0, _Emotion.cx)(_Modal.styles.modalSeparator(theme), fixed && _Modal.styles.modalSeparatorFixed(theme)) })
     ));
 
 }

package/cjs/components/Modal/ModalSeparator.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_renderEnvironment","_ThemeContext","_Modal","ModalSeparator","_ref","fixed","theme","useContext","ThemeContext","_useEmotion","useEmotion","cx","styles","useStyles","getStyles","default","createElement","className","modalSeparatorWrapper","modalSeparator","modalSeparatorFixed","__KONTUR_REACT_UI__","displayName"],"sources":["ModalSeparator.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Modal.styles';\n\nexport interface ModalSeparatorProps extends CommonProps {\n  /** Фиксирует позицию ModalSeparator. */\n  fixed?: boolean;\n}\n\n/**\n * Разделитель\n *\n * @visibleName Modal.Separator\n */\nexport function ModalSeparator({ fixed }: ModalSeparatorProps): React.JSX.Element {\n  const theme = useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n\n  return (\n    <div className={styles.modalSeparatorWrapper()}>\n      <div className={cx(styles.modalSeparator(theme), fixed && styles.modalSeparatorFixed(theme))} />\n    </div>\n  );\n}\n\nModalSeparator.__KONTUR_REACT_UI__ = 'ModalSeparator';\nModalSeparator.displayName = 'ModalSeparator';\n"],"mappings":"8KAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAAC,kBAAA,GAAAD,OAAA;;AAEA,IAAAE,aAAA,GAAAF,OAAA;;AAEA,IAAAG,MAAA,GAAAH,OAAA;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAAAC,IAAA,EAAoD,KAAjDC,KAAK,GAAAD,IAAA,CAALC,KAAK;EACpC,IAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,0BAAY,CAAC;EACtC,IAAAC,WAAA,GAAe,IAAAC,6BAAU,EAAC,CAAC,CAAnBC,EAAE,GAAAF,WAAA,CAAFE,EAAE;EACV,IAAMC,MAAM,GAAG,IAAAC,4BAAS,EAACC,gBAAS,CAAC;;EAEnC;IACEjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,UAAKC,SAAS,EAAEL,MAAM,CAACM,qBAAqB,CAAC,CAAE;IAC7CrB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,UAAKC,SAAS,EAAEN,EAAE,CAACC,MAAM,CAACO,cAAc,CAACb,KAAK,CAAC,EAAED,KAAK,IAAIO,MAAM,CAACQ,mBAAmB,CAACd,KAAK,CAAC,CAAE,EAAE;IAC5F,CAAC;;AAEV;;AAEAH,cAAc,CAACkB,mBAAmB,GAAG,gBAAgB;AACrDlB,cAAc,CAACmB,WAAW,GAAG,gBAAgB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_Emotion","_ThemeContext","_Modal","ModalSeparator","_ref","fixed","theme","useContext","ThemeContext","default","createElement","className","styles","modalSeparatorWrapper","cx","modalSeparator","modalSeparatorFixed","__KONTUR_REACT_UI__","displayName"],"sources":["ModalSeparator.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { styles } from './Modal.styles';\n\nexport interface ModalSeparatorProps extends CommonProps {\n  /** Фиксирует позицию ModalSeparator. */\n  fixed?: boolean;\n}\n\n/**\n * Разделитель\n *\n * @visibleName Modal.Separator\n */\nexport function ModalSeparator({ fixed }: ModalSeparatorProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <div className={styles.modalSeparatorWrapper()}>\n      <div className={cx(styles.modalSeparator(theme), fixed && styles.modalSeparatorFixed(theme))} />\n    </div>\n  );\n}\n\nModalSeparator.__KONTUR_REACT_UI__ = 'ModalSeparator';\nModalSeparator.displayName = 'ModalSeparator';\n"],"mappings":"8KAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;AAEA,IAAAC,QAAA,GAAAD,OAAA;;AAEA,IAAAE,aAAA,GAAAF,OAAA;;AAEA,IAAAG,MAAA,GAAAH,OAAA;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACO,SAASI,cAAcA,CAAAC,IAAA,EAAiC,KAA9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;EACpC,IAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,0BAAY,CAAC;;EAEtC;IACEX,MAAA,CAAAY,OAAA,CAAAC,aAAA,UAAKC,SAAS,EAAEC,aAAM,CAACC,qBAAqB,CAAC,CAAE;IAC7ChB,MAAA,CAAAY,OAAA,CAAAC,aAAA,UAAKC,SAAS,EAAE,IAAAG,WAAE,EAACF,aAAM,CAACG,cAAc,CAACT,KAAK,CAAC,EAAED,KAAK,IAAIO,aAAM,CAACI,mBAAmB,CAACV,KAAK,CAAC,CAAE,EAAE;IAC5F,CAAC;;AAEV;;AAEAH,cAAc,CAACc,mBAAmB,GAAG,gBAAgB;AACrDd,cAAc,CAACe,WAAW,GAAG,gBAAgB","ignoreList":[]}

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

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

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

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

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

@@ -1,7 +1,8 @@
 import type React from 'react';
+import type { Theme } from '../../lib/theming/Theme';
 export interface KeyDescriptionType {
     name: string;
     checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;
 }
-export declare const getKeyName: () => string;
-export declare const checkKeyPressed: (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) => boolean;
+export declare const getKeyName: (t: Theme) => string;
+export declare const checkKeyPressed: (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>, theme: Theme) => boolean;

package/cjs/components/Paging/NavigationHelper.js

@@ -3,15 +3,21 @@
 var _client = require("../../lib/client");
 
 
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
 
 
 
 
-var createKeyDescription = function createKeyDescription() {return (
+
+var keyDescription = null;
+
+var getKeyDescription = function getKeyDescription(theme) {return keyDescription || (keyDescription = createKeyDescription(theme));};
+
+var createKeyDescription = function createKeyDescription(theme) {return (
     _client.isMac ?
     {
-      name: '⌥',
+      name: (0, _ThemeHelpers.isThemeGTE)(theme, '5.3') ? '⌥' : 'Alt',
       checkPressed: function checkPressed(event) {return event.altKey;}
     } :
     {
@@ -19,8 +25,6 @@ var createKeyDescription = function createKeyDescription() {return (
       checkPressed: function checkPressed(event) {return event.ctrlKey;}
     });};
 
-var keyDescription = createKeyDescription();
-
-var getKeyName = exports.getKeyName = function getKeyName() {return keyDescription.name;};
-var checkKeyPressed = exports.checkKeyPressed = function checkKeyPressed(event) {return (
-    keyDescription.checkPressed(event));};
+var getKeyName = exports.getKeyName = function getKeyName(t) {return getKeyDescription(t).name;};
+var checkKeyPressed = exports.checkKeyPressed = function checkKeyPressed(event, theme) {return (
+    getKeyDescription(theme).checkPressed(event));};

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

@@ -1 +1 @@
-{"version":3,"names":["_client","require","createKeyDescription","isMac","name","checkPressed","event","altKey","ctrlKey","keyDescription","getKeyName","exports","checkKeyPressed"],"sources":["NavigationHelper.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { isMac } from '../../lib/client';\nimport type { Nullable } from '../../typings/utility-types';\n\nexport interface KeyDescriptionType {\n  name: string;\n  checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;\n}\n\nconst createKeyDescription = () =>\n  isMac\n    ? {\n        name: '⌥',\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\nconst keyDescription: Nullable<KeyDescriptionType> = createKeyDescription();\n\nexport const getKeyName = (): string => keyDescription.name;\nexport const checkKeyPressed = (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>): boolean =>\n  keyDescription.checkPressed(event);\n"],"mappings":";;AAEA,IAAAA,OAAA,GAAAC,OAAA;;;;;;;;AAQA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAA;IACxBC,aAAK;IACD;MACEC,IAAI,EAAE,GAAG;MACTC,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACC,MAAM;IACzF,CAAC;IACD;MACEH,IAAI,EAAE,MAAM;MACZC,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACE,OAAO;IAC1F,CAAC;;AAEP,IAAMC,cAA4C,GAAGP,oBAAoB,CAAC,CAAC;;AAEpE,IAAMQ,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAA,UAAiBD,cAAc,CAACL,IAAI;AACpD,IAAMQ,eAAe,GAAAD,OAAA,CAAAC,eAAA,GAAG,SAAlBA,eAAeA,CAAIN,KAAuD;IACrFG,cAAc,CAACJ,YAAY,CAACC,KAAK,CAAC","ignoreList":[]}
+{"version":3,"names":["_client","require","_ThemeHelpers","keyDescription","getKeyDescription","theme","createKeyDescription","isMac","name","isThemeGTE","checkPressed","event","altKey","ctrlKey","getKeyName","exports","t","checkKeyPressed"],"sources":["NavigationHelper.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { isMac } from '../../lib/client';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { isThemeGTE } from '../../lib/theming/ThemeHelpers';\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 = (theme: Theme) => keyDescription || (keyDescription = createKeyDescription(theme));\n\nconst createKeyDescription = (theme: Theme) =>\n  isMac\n    ? {\n        name: isThemeGTE(theme, '5.3') ? '⌥' : '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 = (t: Theme) => getKeyDescription(t).name;\nexport const checkKeyPressed = (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>, theme: Theme) =>\n  getKeyDescription(theme).checkPressed(event);\n"],"mappings":";;AAEA,IAAAA,OAAA,GAAAC,OAAA;;;AAGA,IAAAC,aAAA,GAAAD,OAAA;;;;;;;AAOA,IAAIE,cAA4C,GAAG,IAAI;;AAEvD,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,KAAY,UAAKF,cAAc,KAAKA,cAAc,GAAGG,oBAAoB,CAACD,KAAK,CAAC,CAAC;;AAE5G,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAID,KAAY;IACxCE,aAAK;IACD;MACEC,IAAI,EAAE,IAAAC,wBAAU,EAACJ,KAAK,EAAE,KAAK,CAAC,GAAG,GAAG,GAAG,KAAK;MAC5CK,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACC,MAAM;IACzF,CAAC;IACD;MACEJ,IAAI,EAAE,MAAM;MACZE,YAAY,EAAE,SAAAA,aAACC,KAAuD,UAAKA,KAAK,CAACE,OAAO;IAC1F,CAAC;;AAEA,IAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAIE,CAAQ,UAAKZ,iBAAiB,CAACY,CAAC,CAAC,CAACR,IAAI;AAC1D,IAAMS,eAAe,GAAAF,OAAA,CAAAE,eAAA,GAAG,SAAlBA,eAAeA,CAAIN,KAAuD,EAAEN,KAAY;IACnGD,iBAAiB,CAACC,KAAK,CAAC,CAACK,YAAY,CAACC,KAAK,CAAC","ignoreList":[]}

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

@@ -27,8 +27,7 @@ export interface PagingProps extends CommonProps {
     /** Задает общее количество страниц. */
     pagesCount: number;
     /** Задает размер контрола.
-     * @default 'small'
-     */
+     * @default 'small', начиная с версии темы 5.3. До этого по умолчанию стоит старый размер 'legacy'. */
     size?: SizeProp;
     /** Делает компонент недоступным. */
     disabled?: boolean;
@@ -68,17 +67,12 @@ export declare class Paging extends React.PureComponent<PagingProps, PagingState
     private setRootNode;
     static isForward(pageNumber: number | 'forward'): boolean;
     state: PagingState;
-    private globalObject;
-    private emotion;
-    private cx;
-    private styles;
     private theme;
     private readonly locale;
     private isMobile;
     private sizeClassNames;
     private addedGlobalListener;
     private container;
-    private keyListener;
     componentDidMount(): void;
     componentDidUpdate(prevProps: PagingProps): void;
     componentWillUnmount(): void;
@@ -90,6 +84,7 @@ export declare class Paging extends React.PureComponent<PagingProps, PagingState
     private renderPageLink;
     private renderNavigationHint;
     private handleMouseDown;
+    private handleMouseDownPageLink;
     private handleKeyDown;
     private handleFocus;
     private handleBlur;

package/cjs/components/Paging/Paging.js

@@ -1,7 +1,5 @@
 "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 _warning = _interopRequireDefault(require("warning"));
-
+var _globalObject = require("@skbkontur/global-object");
 
 var _isInstanceOf = require("../../lib/isInstanceOf");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -9,17 +7,19 @@ var _decorators = require("../../lib/locale/decorators");
 
 var _keyListener = require("../../lib/events/keyListener");
 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 _renderEnvironment = require("../../lib/renderEnvironment");
 
 var _Paging2 = require("./Paging.styles");
 var NavigationHelper = _interopRequireWildcard(require("./NavigationHelper"));
@@ -91,7 +91,6 @@ var IGNORE_EVENT_TAGS = ['input', 'textarea'];
 
 
 
-
 
 
 var PagingDataTids = exports.PagingDataTids = {
@@ -116,8 +115,7 @@ var PagingDataTids = exports.PagingDataTids = {
  */var
 
 
-
-Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.PagingLocaleHelper), (0, _renderEnvironment.withRenderEnvironment)(_class = (0, _rootNode.rootNode)(_class = _dec(_class = (_Paging = /*#__PURE__*/function (_React$PureComponent) {function Paging() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
+Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.PagingLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_Paging = /*#__PURE__*/function (_React$PureComponent) {function Paging() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
 
 
 
@@ -145,10 +143,6 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
 
 
-
-
-
-
     addedGlobalListener = false;_this.
     container = null;_this.
 
@@ -226,9 +220,6 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
 
 
-
-
-
 
 
 
@@ -251,13 +242,13 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
       }
     };_this.
 
-    renderDots = function (key) {var _this$cx;
+    renderDots = function (key) {var _cx;
       return /*#__PURE__*/(
         _react.default.createElement("span", {
           "data-tid": PagingDataTids.dots,
           key: key,
-          className: _this.cx(_this.styles.dots(_this.theme), _this.sizeClassNames.dots, (_this$cx = {}, _this$cx[
-          _this.styles.dotsDisabled(_this.theme)] = _this.props.disabled, _this$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()
@@ -265,15 +256,15 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
     };_this.
 
-    renderForwardLink = function (disabled, focused) {var _this$cx2;
-      var classNames = _this.cx(
-        _this.styles.pageLink(_this.theme),
+    renderForwardLink = function (disabled, focused) {var _cx2;
+      var classNames = (0, _Emotion.cx)(
+        _Paging2.styles.pageLink(_this.theme),
         _this.sizeClassNames.pageLink,
-        _this.styles.forwardLink(_this.theme),
-        _this.sizeClassNames.forwardLink, (_this$cx2 = {}, _this$cx2[
+        _Paging2.styles.forwardLink(_this.theme),
+        _this.sizeClassNames.forwardLink, (_cx2 = {}, _cx2[
 
-        _this.styles.pageLinkFocused(_this.theme)] = focused, _this$cx2[
-        _this.styles.forwardLinkDisabled(_this.theme)] = disabled || _this.props.disabled, _this$cx2)
+        _Paging2.styles.pageLinkFocused(_this.theme)] = focused, _cx2[
+        _Paging2.styles.forwardLinkDisabled(_this.theme)] = disabled || _this.props.disabled, _cx2)
 
       );
       var Component = _this.getProps().component;
@@ -298,13 +289,13 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
     };_this.
 
-    renderPageLink = function (pageNumber, active, focused) {var _this$cx3;
+    renderPageLink = function (pageNumber, active, focused) {var _cx3;
       var disabled = _this.props.disabled;
-      var classNames = _this.cx(_this.styles.pageLink(_this.theme), _this.sizeClassNames.pageLink, (_this$cx3 = {}, _this$cx3[
-      _this.styles.pageLinkFocused(_this.theme)] = focused, _this$cx3[
-      _this.styles.pageLinkDisabled(_this.theme)] = disabled, _this$cx3[
-      _this.styles.pageLinkCurrent(_this.theme)] = active, _this$cx3[
-      _this.styles.pageLinkCurrentDisabled(_this.theme)] = active && disabled, _this$cx3)
+      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);};
@@ -313,8 +304,9 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
         _react.default.createElement("span", (0, _extends2.default)({
           "data-tid": PagingDataTids.pageLinkWrapper,
           key: pageNumber,
-          className: _this.styles.pageLinkWrapper() },
-        (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ active: active, disabled: disabled })), /*#__PURE__*/
+          className: _Paging2.styles.pageLinkWrapper() },
+        (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ active: active, disabled: disabled }), {
+          onMouseDown: _this.handleMouseDownPageLink }), /*#__PURE__*/
 
         _react.default.createElement(Component, {
           "data-tid": PagingDataTids.pageLink,
@@ -344,19 +336,27 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
       if (keyboardControl && (canGoBackward || canGoForward)) {
         hint = /*#__PURE__*/
         _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
-        _react.default.createElement("span", { className: canGoBackward ? '' : _this.styles.transparent() }, '←'), /*#__PURE__*/
-        _react.default.createElement("span", null, NavigationHelper.getKeyName()), /*#__PURE__*/
-        _react.default.createElement("span", { className: canGoForward ? '' : _this.styles.transparent() }, '→')
+        _react.default.createElement("span", { className: canGoBackward ? '' : _Paging2.styles.transparent() }, '←'), /*#__PURE__*/
+        _react.default.createElement("span", null, NavigationHelper.getKeyName(_this.theme)), /*#__PURE__*/
+        _react.default.createElement("span", { className: canGoForward ? '' : _Paging2.styles.transparent() }, '→')
         );
 
       }
-      return /*#__PURE__*/_react.default.createElement("div", { className: _this.styles.pageLinkHint(_this.theme) }, hint);
+      return /*#__PURE__*/_react.default.createElement("div", { className: _Paging2.styles.pageLinkHint(_this.theme) }, hint);
     };_this.
 
     handleMouseDown = function () {
       _this.setState({ focusedByTab: false, focusedItem: null });
     };_this.
 
+    handleMouseDownPageLink = function () {
+      if (_client.isIE11) {
+        // Клик по span внутри контейнера с tabindex="0" переносит фокус именно на этот span.
+        // Поэтому горячие клавиши работают пока span существует на странице.
+        _globalObject.globalObject.setTimeout(function () {return _this.container && _this.container.focus();}, 0);
+      }
+    };_this.
+
     handleKeyDown = function (e) {
       if (e.shiftKey) {
         return;
@@ -368,17 +368,17 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
       var isArrowRight = (0, _identifiers.isKeyArrowRight)(e);
 
       if (
-      (0, _isInstanceOf.isInstanceOf)(target, _this.globalObject.Element) && (
+      (0, _isInstanceOf.isInstanceOf)(target, _globalObject.globalObject.Element) && (
       IGNORE_EVENT_TAGS.includes(target.tagName.toLowerCase()) || target.isContentEditable))
       {
         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;
       }
@@ -408,8 +408,8 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
       // focus event fires before keyDown eventlistener
       // so we should check tabPressed in async way
-      _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
-        if (_this.keyListener.isTabPressed) {
+      _globalObject.globalObject.requestAnimationFrame == null || _globalObject.globalObject.requestAnimationFrame(function () {
+        if (_keyListener.keyListener.isTabPressed) {
           _this.setState({ focusedByTab: true });
         }
       });
@@ -503,18 +503,18 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
       }
     };_this.
 
-    addGlobalListener = function () {var _this$globalObject$do;
+    addGlobalListener = function () {var _globalObject$documen;
       if (_this.addedGlobalListener) {
         return;
       }
 
-      (_this$globalObject$do = _this.globalObject.document) == null || _this$globalObject$do.addEventListener('keydown', _this.handleKeyDown);
+      (_globalObject$documen = _globalObject.globalObject.document) == null || _globalObject$documen.addEventListener('keydown', _this.handleKeyDown);
       _this.addedGlobalListener = true;
     };_this.
 
     removeGlobalListener = function () {
-      if (_this.addedGlobalListener) {var _this$globalObject$do2;
-        (_this$globalObject$do2 = _this.globalObject.document) == null || _this$globalObject$do2.removeEventListener('keydown', _this.handleKeyDown);
+      if (_this.addedGlobalListener) {var _globalObject$documen2;
+        (_globalObject$documen2 = _globalObject.globalObject.document) == null || _globalObject$documen2.removeEventListener('keydown', _this.handleKeyDown);
 
         _this.addedGlobalListener = false;
       }
@@ -526,49 +526,50 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
 
     getPagingSizeClassNames = function () {
       var size = _this.getSize();
-
-      var defaultClassNames = {
-        root: _this.styles.pagingSmall(_this.theme),
-        dots: _this.styles.dotsSmall(_this.theme),
-        forwardLink: _this.styles.forwardLinkSmall(_this.theme),
-        pageLink: _this.styles.pageLinkSmall(_this.theme)
-      };
-
       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 defaultClassNames;
+          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: _this.styles.pagingMedium(_this.theme),
-            dots: _this.styles.dotsMedium(_this.theme),
+            root: _Paging2.styles.pagingMedium(_this.theme),
+            dots: _Paging2.styles.dotsMedium(_this.theme),
             forwardLink: _this.isMobile ?
-            _this.styles.forwardLinkMediumMobile(_this.theme) :
-            _this.styles.forwardLinkMedium(_this.theme),
-            pageLink: _this.styles.pageLinkMedium(_this.theme)
+            _Paging2.styles.forwardLinkMediumMobile(_this.theme) :
+            _Paging2.styles.forwardLinkMedium(_this.theme),
+            pageLink: _Paging2.styles.pageLinkMedium(_this.theme)
           };
         case 'large':
           return {
-            root: _this.styles.pagingLarge(_this.theme),
-            dots: _this.styles.dotsLarge(_this.theme),
-            forwardLink: _this.isMobile ?
-            _this.styles.forwardLinkLargeMobile(_this.theme) :
-            _this.styles.forwardLinkLarge(_this.theme),
-            pageLink: _this.styles.pageLinkLarge(_this.theme)
+            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:
-          (0, _warning.default)(false, "Invalid size prop: '" + _this.props.size + "'");
-          return defaultClassNames;
+          throw new TypeError("Invalid size prop: '" + _this.props.size + "'");
       }
     };_this.
 
     getDotsIcon = function () {
       var size = _this.getSize();
-      return /*#__PURE__*/_react.default.createElement(_DotsIcon.DotsIcon, { size: size });
+      return size === 'legacy' ? '...' : /*#__PURE__*/_react.default.createElement(_DotsIcon.DotsIcon, { size: size });
     };_this.
 
     getForwardIcon = function () {
       var size = _this.getSize();
-      var iconSize = size;
+      var iconSize = size === 'legacy' ? parseInt(_this.theme.pagingForwardIconSize) : size;
       return _this.isMobile ? /*#__PURE__*/
       _react.default.createElement(_ForwardIcon.ForwardIconMobile, { size: iconSize }) : /*#__PURE__*/
 
@@ -581,6 +582,6 @@ Paging = exports.Paging = (_dec = (0, _decorators.locale)('Paging', _locale.Pagi
         return _this.isMobile && _this.props.size === 'small' ? 'medium' : _this.props.size;
       }
 
-      var defaultSize = 'small';
-      return _this.isMobile ? '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() {this.keyListener = new _keyListener.KeyListener(this.globalObject);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;}this.styles = (0, _Paging2.getStyles)(this.emotion);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;_this2.sizeClassNames = _this2.getPagingSizeClassNames();return _this2.renderMain();});});};_proto.renderMain = function renderMain() {var _this$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: this.cx(this.styles.paging(), this.sizeClassNames.root, (_this$cx4 = {}, _this$cx4[this.styles.pagingMobile()] = this.isMobile, _this$cx4[this.styles.pagingDisabled()] = this.props.disabled, _this$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) || _class);
+      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);