@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

package/components/Paging/Paging.d.ts

@@ -2,36 +2,38 @@ 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 />
-     */
+    /** Компонент обертки по умолчанию.
+     * @default <span /> */
     component?: React.ComponentType<ItemComponentProps>;
+    /** Задает функцию, которая вызывается при переключении страницы. */
     onPageChange: (pageNumber: number) => void;
+    /** Задает общее количество страниц. */
     pagesCount: number;
+    /** Делает компонент недоступным. */
     disabled?: boolean;
-    /**
-     * Отключает навигационные подсказки.
-     * По-умолчанию подсказки появляются, когда доступно управление с клавиатуры
-     * (либо элемент в фокусе, либо globalListeners === true)
-     */
+    /** Отключает навигационные подсказки.
+     * По-умолчанию подсказки появляются, когда доступно управление с клавиатуры (либо элемент в фокусе, либо globalListeners === true). */
     withoutNavigationHint?: boolean;
+    /** Задает подпить у пейджинга. */
     caption?: string;
-    /**
-     * Глобальный слушатель **keyDown**, для навигации клавишами без фокуса на компоненте.
-     * Если на странице используется несколько элементов
-     * **Paging** с useGlobalListener === true, то обработчик keyDown будет вызываться
-     * на каждом из них. Такие случаи лучше обрабатывать отдельно.
-     */
+    /** Глобальный слушатель **keyDown**, для навигации клавишами без фокуса на компоненте.
+     * Если на странице используется несколько элементов **Paging** с useGlobalListener === true,
+     * то обработчик keyDown будет вызываться на каждом из них. Такие случаи лучше обрабатывать отдельно. */
     useGlobalListener?: boolean;
 }
 export interface PagingState {
@@ -48,6 +50,9 @@ export declare const PagingDataTids: {
     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;
@@ -58,8 +63,6 @@ export declare class Paging extends React.PureComponent<PagingProps, PagingState
     static isForward(pageNumber: number | 'forward'): boolean;
     state: PagingState;
     private theme;
-    private emotion;
-    private styles;
     private readonly locale;
     private addedGlobalListener;
     private container;

package/components/Paging/Paging.md

@@ -6,6 +6,7 @@
 
 Навигационные подсказки появляются когда доступно управление с клавиатуры и `withoutNavigationHint != true`
 
+### Базовый пример
 ```jsx harmony
 class Paginator3000 extends React.Component {
   constructor() {
@@ -26,7 +27,7 @@ class Paginator3000 extends React.Component {
 <Paginator3000 />;
 ```
 
-Пейджинг в отключенном состоянии
+### Пейджинг в отключенном состоянии
 
 ```jsx
 const [activePage, setActivePage] = React.useState(3);
@@ -39,7 +40,7 @@ const [activePage, setActivePage] = React.useState(3);
 />
 ```
 
-#### Локали по умолчанию
+### Локали по умолчанию
 
 ```typescript static
 interface PagingLocale {

package/components/Paging/Paging.styles/Paging.styles.js

@@ -1,49 +1,47 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    paging: function paging(t) {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        user-select: none;\n        outline: 0;\n        font-size: ", ";\n        line-height: ", ";\n        display: inline-block;\n      "])), t.pagingFontSize, t.pagingLineHeight);
-    },
-    pagingDisabled: function pagingDisabled() {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        pointer-events: none;\n      "])));
-    },
-    dots: function dots(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        display: inline-block;\n        padding: ", ";\n      "])), t.pagingDotsColor, t.pagingDotsPadding);
-    },
-    dotsDisabled: function dotsDisabled(t) {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.pagingDotsDisabledColor);
-    },
-    forwardLink: function forwardLink(t) {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        cursor: pointer;\n        display: inline-block;\n        margin-top: ", ";\n        margin-left: ", ";\n        outline: none;\n        padding-right: ", ";\n        position: relative;\n        text-decoration: none;\n        user-select: none;\n        vertical-align: top;\n      "])), t.pagingForwardLinkColor, t.pagingPageForwardLinkMarginTop, t.pagingPageForwardLinkMarginLeft, t.pagingPageForwardLinkPaddingRight);
-    },
-    forwardLinkDisabled: function forwardLinkDisabled(t) {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        pointer-events: none;\n      "])), t.pagingForwardLinkDisabledColor);
-    },
-    pageLinkWrapper: function pageLinkWrapper() {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        display: inline-flex;\n        flex-flow: column nowrap;\n        text-align: center;\n        user-select: none;\n        vertical-align: top;\n      "])));
-    },
-    pageLink: function pageLink(t) {
-      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        box-sizing: ", ";\n        border-radius: ", ";\n        color: ", ";\n        cursor: pointer;\n        display: block;\n        margin: ", ";\n        outline: none;\n        min-width: ", ";\n        padding: ", " ", " ", ";\n        text-decoration: none;\n\n        &:hover {\n          background: ", ";\n        }\n      "])), t.pagingPageLinkBoxSizing, t.pagingPageLinkBorderRadius, t.pagingPageLinkColor, t.pagingPageLinkMargin, t.pagingPageLinkMinWidth, t.pagingPageLinkPaddingY, t.pagingPageLinkPaddingX, t.pagingPageLinkPaddingY, t.pagingPageLinkHoverBg);
-    },
-    pageLinkDisabled: function pageLinkDisabled(t) {
-      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        pointer-events: none;\n      "])), t.linkDisabledColor);
-    },
-    pageLinkCurrent: function pageLinkCurrent(t) {
-      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n        background: ", " !important; // override hover styles\n        color: ", ";\n      "])), t.pagingPageLinkActiveBg, t.pagingPageLinkActiveColor);
-    },
-    pageLinkCurrentDisabled: function pageLinkCurrentDisabled(t) {
-      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        background: ", " !important;\n        color: ", ";\n      "])), t.pagingPageLinkDisabledActiveBg, t.linkDisabledColor);
-    },
-    pageLinkFocused: function pageLinkFocused(t) {
-      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), "\n          box-shadow: 0 0 0 2px " + t.borderColorFocus + ";\n        ");
-    },
-    transparent: function transparent() {
-      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        color: transparent;\n      "])));
-    },
-    pageLinkHint: function pageLinkHint(t) {
-      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        margin: ", ";\n        font-size: ", ";\n        height: ", ";\n        line-height: ", ";\n        color: ", ";\n      "])), t.pagingPageLinkHintMargin, t.pagingPageLinkHintFontSize, t.pagingPageLinkHintLineHeight, t.pagingPageLinkHintLineHeight, t.pagingPageLinkHintColor);
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  paging: function paging(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      user-select: none;\n      outline: 0;\n      font-size: ", ";\n      line-height: ", ";\n      display: inline-block;\n    "])), t.pagingFontSize, t.pagingLineHeight);
+  },
+  pagingDisabled: function pagingDisabled() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n    "])));
+  },
+  dots: function dots(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      display: inline-block;\n      padding: ", ";\n    "])), t.pagingDotsColor, t.pagingDotsPadding);
+  },
+  dotsDisabled: function dotsDisabled(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.pagingDotsDisabledColor);
+  },
+  forwardLink: function forwardLink(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      margin-top: ", ";\n      margin-left: ", ";\n      outline: none;\n      padding-right: ", ";\n      position: relative;\n      text-decoration: none;\n      user-select: none;\n      vertical-align: top;\n    "])), t.pagingForwardLinkColor, t.pagingPageForwardLinkMarginTop, t.pagingPageForwardLinkMarginLeft, t.pagingPageForwardLinkPaddingRight);
+  },
+  forwardLinkDisabled: function forwardLinkDisabled(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      pointer-events: none;\n    "])), t.pagingForwardLinkDisabledColor);
+  },
+  pageLinkWrapper: function pageLinkWrapper() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      flex-flow: column nowrap;\n      text-align: center;\n      user-select: none;\n      vertical-align: top;\n    "])));
+  },
+  pageLink: function pageLink(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      box-sizing: ", ";\n      border-radius: ", ";\n      color: ", ";\n      cursor: pointer;\n      display: block;\n      margin: ", ";\n      outline: none;\n      min-width: ", ";\n      padding: ", " ", " ", ";\n      text-decoration: none;\n\n      &:hover {\n        background: ", ";\n      }\n    "])), t.pagingPageLinkBoxSizing, t.pagingPageLinkBorderRadius, t.pagingPageLinkColor, t.pagingPageLinkMargin, t.pagingPageLinkMinWidth, t.pagingPageLinkPaddingY, t.pagingPageLinkPaddingX, t.pagingPageLinkPaddingY, t.pagingPageLinkHoverBg);
+  },
+  pageLinkDisabled: function pageLinkDisabled(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      pointer-events: none;\n    "])), t.linkDisabledColor);
+  },
+  pageLinkCurrent: function pageLinkCurrent(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n      background: ", " !important; // override hover styles\n      color: ", ";\n    "])), t.pagingPageLinkActiveBg, t.pagingPageLinkActiveColor);
+  },
+  pageLinkCurrentDisabled: function pageLinkCurrentDisabled(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      color: ", ";\n    "])), t.pagingPageLinkDisabledActiveBg, t.linkDisabledColor);
+  },
+  pageLinkFocused: function pageLinkFocused(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), "\n          box-shadow: 0 0 0 2px " + t.borderColorFocus + ";\n        ");
+  },
+  transparent: function transparent() {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      color: transparent;\n    "])));
+  },
+  pageLinkHint: function pageLinkHint(t) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin: ", ";\n      font-size: ", ";\n      height: ", ";\n      line-height: ", ";\n      color: ", ";\n    "])), t.pagingPageLinkHintMargin, t.pagingPageLinkHintFontSize, t.pagingPageLinkHintLineHeight, t.pagingPageLinkHintLineHeight, t.pagingPageLinkHintColor);
+  }
+});

package/components/Paging/Paging.styles/Paging.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","paging","t","css","_templateObject","_taggedTemplateLiteralLoose","pagingFontSize","pagingLineHeight","pagingDisabled","_templateObject2","dots","_templateObject3","pagingDotsColor","pagingDotsPadding","dotsDisabled","_templateObject4","pagingDotsDisabledColor","forwardLink","_templateObject5","pagingForwardLinkColor","pagingPageForwardLinkMarginTop","pagingPageForwardLinkMarginLeft","pagingPageForwardLinkPaddingRight","forwardLinkDisabled","_templateObject6","pagingForwardLinkDisabledColor","pageLinkWrapper","_templateObject7","pageLink","_templateObject8","pagingPageLinkBoxSizing","pagingPageLinkBorderRadius","pagingPageLinkColor","pagingPageLinkMargin","pagingPageLinkMinWidth","pagingPageLinkPaddingY","pagingPageLinkPaddingX","pagingPageLinkHoverBg","pageLinkDisabled","_templateObject9","linkDisabledColor","pageLinkCurrent","_templateObject10","pagingPageLinkActiveBg","pagingPageLinkActiveColor","pageLinkCurrentDisabled","_templateObject11","pagingPageLinkDisabledActiveBg","pageLinkFocused","_templateObject12","borderColorFocus","transparent","_templateObject13","pageLinkHint","_templateObject14","pagingPageLinkHintMargin","pagingPageLinkHintFontSize","pagingPageLinkHintLineHeight","pagingPageLinkHintColor"],"sources":["Paging.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    paging(t: Theme) {\n      return emotion.css`\n        user-select: none;\n        outline: 0;\n        font-size: ${t.pagingFontSize};\n        line-height: ${t.pagingLineHeight};\n        display: inline-block;\n      `;\n    },\n\n    pagingDisabled() {\n      return emotion.css`\n        pointer-events: none;\n      `;\n    },\n\n    dots(t: Theme) {\n      return emotion.css`\n        color: ${t.pagingDotsColor};\n        display: inline-block;\n        padding: ${t.pagingDotsPadding};\n      `;\n    },\n\n    dotsDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.pagingDotsDisabledColor};\n      `;\n    },\n\n    forwardLink(t: Theme) {\n      return emotion.css`\n        color: ${t.pagingForwardLinkColor};\n        cursor: pointer;\n        display: inline-block;\n        margin-top: ${t.pagingPageForwardLinkMarginTop};\n        margin-left: ${t.pagingPageForwardLinkMarginLeft};\n        outline: none;\n        padding-right: ${t.pagingPageForwardLinkPaddingRight};\n        position: relative;\n        text-decoration: none;\n        user-select: none;\n        vertical-align: top;\n      `;\n    },\n\n    forwardLinkDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.pagingForwardLinkDisabledColor};\n        pointer-events: none;\n      `;\n    },\n\n    pageLinkWrapper() {\n      return emotion.css`\n        display: inline-flex;\n        flex-flow: column nowrap;\n        text-align: center;\n        user-select: none;\n        vertical-align: top;\n      `;\n    },\n\n    pageLink(t: Theme) {\n      return emotion.css`\n        box-sizing: ${t.pagingPageLinkBoxSizing};\n        border-radius: ${t.pagingPageLinkBorderRadius};\n        color: ${t.pagingPageLinkColor};\n        cursor: pointer;\n        display: block;\n        margin: ${t.pagingPageLinkMargin};\n        outline: none;\n        min-width: ${t.pagingPageLinkMinWidth};\n        padding: ${t.pagingPageLinkPaddingY} ${t.pagingPageLinkPaddingX} ${t.pagingPageLinkPaddingY};\n        text-decoration: none;\n\n        &:hover {\n          background: ${t.pagingPageLinkHoverBg};\n        }\n      `;\n    },\n\n    pageLinkDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.linkDisabledColor};\n        pointer-events: none;\n      `;\n    },\n\n    pageLinkCurrent(t: Theme) {\n      return emotion.css`\n        cursor: default;\n        background: ${t.pagingPageLinkActiveBg} !important; // override hover styles\n        color: ${t.pagingPageLinkActiveColor};\n      `;\n    },\n\n    pageLinkCurrentDisabled(t: Theme) {\n      return emotion.css`\n        background: ${t.pagingPageLinkDisabledActiveBg} !important;\n        color: ${t.linkDisabledColor};\n      `;\n    },\n\n    pageLinkFocused(t: Theme) {\n      return emotion.css`\n        ${`\n          box-shadow: 0 0 0 2px ${t.borderColorFocus};\n        `}\n      `;\n    },\n\n    transparent() {\n      return emotion.css`\n        color: transparent;\n      `;\n    },\n\n    pageLinkHint(t: Theme) {\n      return emotion.css`\n        display: inline-block;\n        margin: ${t.pagingPageLinkHintMargin};\n        font-size: ${t.pagingPageLinkHintFontSize};\n        height: ${t.pagingPageLinkHintLineHeight};\n        line-height: ${t.pagingPageLinkHintLineHeight};\n        color: ${t.pagingPageLinkHintColor};\n      `;\n    },\n  });\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","paging","t","_templateObject","_taggedTemplateLiteralLoose","pagingFontSize","pagingLineHeight","pagingDisabled","_templateObject2","dots","_templateObject3","pagingDotsColor","pagingDotsPadding","dotsDisabled","_templateObject4","pagingDotsDisabledColor","forwardLink","_templateObject5","pagingForwardLinkColor","pagingPageForwardLinkMarginTop","pagingPageForwardLinkMarginLeft","pagingPageForwardLinkPaddingRight","forwardLinkDisabled","_templateObject6","pagingForwardLinkDisabledColor","pageLinkWrapper","_templateObject7","pageLink","_templateObject8","pagingPageLinkBoxSizing","pagingPageLinkBorderRadius","pagingPageLinkColor","pagingPageLinkMargin","pagingPageLinkMinWidth","pagingPageLinkPaddingY","pagingPageLinkPaddingX","pagingPageLinkHoverBg","pageLinkDisabled","_templateObject9","linkDisabledColor","pageLinkCurrent","_templateObject10","pagingPageLinkActiveBg","pagingPageLinkActiveColor","pageLinkCurrentDisabled","_templateObject11","pagingPageLinkDisabledActiveBg","pageLinkFocused","_templateObject12","borderColorFocus","transparent","_templateObject13","pageLinkHint","_templateObject14","pagingPageLinkHintMargin","pagingPageLinkHintFontSize","pagingPageLinkHintLineHeight","pagingPageLinkHintColor"],"sources":["Paging.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  paging(t: Theme) {\n    return css`\n      user-select: none;\n      outline: 0;\n      font-size: ${t.pagingFontSize};\n      line-height: ${t.pagingLineHeight};\n      display: inline-block;\n    `;\n  },\n\n  pagingDisabled() {\n    return css`\n      pointer-events: none;\n    `;\n  },\n\n  dots(t: Theme) {\n    return css`\n      color: ${t.pagingDotsColor};\n      display: inline-block;\n      padding: ${t.pagingDotsPadding};\n    `;\n  },\n\n  dotsDisabled(t: Theme) {\n    return css`\n      color: ${t.pagingDotsDisabledColor};\n    `;\n  },\n\n  forwardLink(t: Theme) {\n    return css`\n      color: ${t.pagingForwardLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      margin-top: ${t.pagingPageForwardLinkMarginTop};\n      margin-left: ${t.pagingPageForwardLinkMarginLeft};\n      outline: none;\n      padding-right: ${t.pagingPageForwardLinkPaddingRight};\n      position: relative;\n      text-decoration: none;\n      user-select: none;\n      vertical-align: top;\n    `;\n  },\n\n  forwardLinkDisabled(t: Theme) {\n    return css`\n      color: ${t.pagingForwardLinkDisabledColor};\n      pointer-events: none;\n    `;\n  },\n\n  pageLinkWrapper() {\n    return css`\n      display: inline-flex;\n      flex-flow: column nowrap;\n      text-align: center;\n      user-select: none;\n      vertical-align: top;\n    `;\n  },\n\n  pageLink(t: Theme) {\n    return css`\n      box-sizing: ${t.pagingPageLinkBoxSizing};\n      border-radius: ${t.pagingPageLinkBorderRadius};\n      color: ${t.pagingPageLinkColor};\n      cursor: pointer;\n      display: block;\n      margin: ${t.pagingPageLinkMargin};\n      outline: none;\n      min-width: ${t.pagingPageLinkMinWidth};\n      padding: ${t.pagingPageLinkPaddingY} ${t.pagingPageLinkPaddingX} ${t.pagingPageLinkPaddingY};\n      text-decoration: none;\n\n      &:hover {\n        background: ${t.pagingPageLinkHoverBg};\n      }\n    `;\n  },\n\n  pageLinkDisabled(t: Theme) {\n    return css`\n      color: ${t.linkDisabledColor};\n      pointer-events: none;\n    `;\n  },\n\n  pageLinkCurrent(t: Theme) {\n    return css`\n      cursor: default;\n      background: ${t.pagingPageLinkActiveBg} !important; // override hover styles\n      color: ${t.pagingPageLinkActiveColor};\n    `;\n  },\n\n  pageLinkCurrentDisabled(t: Theme) {\n    return css`\n      background: ${t.pagingPageLinkDisabledActiveBg} !important;\n      color: ${t.linkDisabledColor};\n    `;\n  },\n\n  pageLinkFocused(t: Theme) {\n    return css`\n      ${`\n          box-shadow: 0 0 0 2px ${t.borderColorFocus};\n        `}\n    `;\n  },\n\n  transparent() {\n    return css`\n      color: transparent;\n    `;\n  },\n\n  pageLinkHint(t: Theme) {\n    return css`\n      display: inline-block;\n      margin: ${t.pagingPageLinkHintMargin};\n      font-size: ${t.pagingPageLinkHintFontSize};\n      height: ${t.pagingPageLinkHintLineHeight};\n      line-height: ${t.pagingPageLinkHintLineHeight};\n      color: ${t.pagingPageLinkHintColor};\n    `;\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/components/Paging/Paging.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     paging(t: Theme): string;
     pagingDisabled(): string;
     dots(t: Theme): string;

package/components/Paging/PagingDefaultComponent/PagingDefaultComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","extractDataProps","PagingDefaultComponent","_ref","onClick","className","children","rest","_objectWithoutPropertiesLoose","_excluded","_extractDataProps","dataProps","createElement","_extends"],"sources":["PagingDefaultComponent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { extractDataProps } from '../../lib/utils';\nimport { CommonProps } from '../../internal/CommonWrapper';\n\ninterface PagingDefaultComponentInterface {\n  onClick: () => void;\n  children?: React.ReactNode;\n}\n\nexport type PagingDefaultComponentProps = PagingDefaultComponentInterface & Pick<CommonProps, 'className'>;\n\nexport const PagingDefaultComponent = ({ onClick, className, children, ...rest }: PagingDefaultComponentProps) => {\n  const { dataProps } = extractDataProps(rest);\n\n  return (\n    <span onClick={onClick} className={className} {...dataProps}>\n      {children}\n    </span>\n  );\n};\n"],"mappings":"mNAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,gBAAgB,QAAQ,iBAAiB;;;;;;;;;;AAUlD,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAA+E,KAAzEC,OAAO,GAAAD,IAAA,CAAPC,OAAO,CAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ,CAAKC,IAAI,GAAAC,6BAAA,CAAAL,IAAA,EAAAM,SAAA;EAC5E,IAAAC,iBAAA,GAAsBT,gBAAgB,CAACM,IAAI,CAAC,CAApCI,SAAS,GAAAD,iBAAA,CAATC,SAAS;;EAEjB;IACEX,KAAA,CAAAY,aAAA,SAAAC,QAAA,GAAMT,OAAO,EAAEA,OAAQ,EAACC,SAAS,EAAEA,SAAU,IAAKM,SAAS;IACxDL;IACG,CAAC;;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["React","extractDataProps","PagingDefaultComponent","_ref","onClick","className","children","rest","_objectWithoutPropertiesLoose","_excluded","_extractDataProps","dataProps","createElement","_extends"],"sources":["PagingDefaultComponent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { extractDataProps } from '../../lib/utils';\nimport { CommonProps } from '../../internal/CommonWrapper';\n\ninterface PagingDefaultComponentInterface {\n  /** Задает функцию, которая вызывается при клике на пейджинг. */\n  onClick: () => void;\n\n  /** @ignore */\n  children?: React.ReactNode;\n}\n\nexport type PagingDefaultComponentProps = PagingDefaultComponentInterface & Pick<CommonProps, 'className'>;\n\nexport const PagingDefaultComponent = ({ onClick, className, children, ...rest }: PagingDefaultComponentProps) => {\n  const { dataProps } = extractDataProps(rest);\n\n  return (\n    <span onClick={onClick} className={className} {...dataProps}>\n      {children}\n    </span>\n  );\n};\n"],"mappings":"mNAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,gBAAgB,QAAQ,iBAAiB;;;;;;;;;;;;;AAalD,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAA+E,KAAzEC,OAAO,GAAAD,IAAA,CAAPC,OAAO,CAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ,CAAKC,IAAI,GAAAC,6BAAA,CAAAL,IAAA,EAAAM,SAAA;EAC5E,IAAAC,iBAAA,GAAsBT,gBAAgB,CAACM,IAAI,CAAC,CAApCI,SAAS,GAAAD,iBAAA,CAATC,SAAS;;EAEjB;IACEX,KAAA,CAAAY,aAAA,SAAAC,QAAA,GAAMT,OAAO,EAAEA,OAAQ,EAACC,SAAS,EAAEA,SAAU,IAAKM,SAAS;IACxDL;IACG,CAAC;;AAEX,CAAC","ignoreList":[]}

package/components/Paging/PagingDefaultComponent.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
 interface PagingDefaultComponentInterface {
+    /** Задает функцию, которая вызывается при клике на пейджинг. */
     onClick: () => void;
+    /** @ignore */
     children?: React.ReactNode;
 }
 export type PagingDefaultComponentProps = PagingDefaultComponentInterface & Pick<CommonProps, 'className'>;

package/components/Paging/__creevey__/Paging.creevey.mts

@@ -0,0 +1,97 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('Paging', () => {
+  story('GoToAbsensePageStory', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hover', 'Move to page by Ender'],
+        },
+        flaky: {
+          in: ['firefox2022', 'firefox2022Dark'],
+          tests: ['Move focus right', 'Move to page by Ender'],
+        },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+
+    test('change page by number', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'change page by number');
+    });
+
+    test('change page by forwardLink', async (context) => {
+      // NOTE Firefox bug if click send right after click from previous test it results as double click
+      await delay(500);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__forwardLink']` }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'change page by forwardLink');
+    });
+
+    test('focused', async (context) => {
+      // NOTE Firefox bug if click send right after click from previous test it results as double click
+      await delay(500);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'focused');
+    });
+
+    test('Move focus right', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .pause(100)
+        .sendKeys(Key.ARROW_RIGHT)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Move focus right');
+    });
+
+    test('Move to page by Ender', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .pause(100)
+        .sendKeys(Key.ARROW_RIGHT)
+        .pause(100)
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Move to page by Ender');
+    });
+  });
+});

package/components/Paging/__docs__/Paging.mdx

@@ -0,0 +1,28 @@
+import * as PagingStories from './Paging.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={PagingStories} />
+
+# Paging
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/navigation/paging/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=281%3A18146)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/components/PasswordInput/PasswordInput/PasswordInput.js

@@ -15,10 +15,10 @@ import { Input } from "../../Input";
 import { isIE11 } from "../../../lib/client";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { getStyles } from "../PasswordInput.styles";
+import { styles } from "../PasswordInput.styles";
 import { PasswordInputIcon } from "../PasswordInputIcon";
 import { PasswordInputLocaleHelper } from "../locale";
 export var PasswordInputDataTids = {
@@ -28,7 +28,9 @@ export var PasswordInputDataTids = {
 };
 
 /**
- * Компонент для ввода пароля
+ * `PasswordInput` — однострочное поле для ввода пароля, в котором символы заменяются на точки.
+ *
+ * Не используйте такое поле для ввода одноразовых кодов из смс. У них короткий срок действия и используются они только один раз.
  */
 export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHelper), rootNode(_class = _dec(_class = (_PasswordInput = /*#__PURE__*/function (_React$PureComponent) {
   function PasswordInput() {
@@ -57,7 +59,9 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
      * @public
      */
     _this.blur = function () {
-      _this.handleBlur();
+      if (_this.input) {
+        _this.input.blur();
+      }
     };
     _this.handleKeyPress = function (e) {
       var _this$props = _this.props,
@@ -97,9 +101,9 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
         return {
           visible: !prevState.visible
         };
-      }, _this.handleFocusOnInput);
+      }, _this.focusOnInput);
     };
-    _this.handleFocusOnInput = function () {
+    _this.focusOnInput = function () {
       if (_this.input) {
         _this.input.focus();
       }
@@ -115,14 +119,16 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
         _this.props.onFocus(event);
       }
     };
-    _this.handleBlur = function () {
-      if (_this.input) {
-        _this.input.blur();
+    _this.handleFocusOutside = function () {
+      _this.hideSymbols();
+      if (_this.state.focused) {
+        _this.setState({
+          focused: false
+        });
       }
     };
     _this.renderEye = function () {
       var capsLockEnabled = _this.state.capsLockEnabled;
-      var styles = _this.styles;
       return /*#__PURE__*/(
         React.createElement("span", {
           className: styles.iconWrapper()
@@ -133,7 +139,7 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
         }), /*#__PURE__*/
 
         React.createElement("span", {
-          className: _this.emotion.cx(styles.toggleVisibility(_this.theme), _this.getEyeWrapperClassname())
+          className: cx(styles.toggleVisibility(_this.theme), _this.getEyeWrapperClassname())
         }, !_this.props.disabled && /*#__PURE__*/
         React.createElement("button", {
           type: "button",
@@ -156,12 +162,6 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
       _this.setState({
         visible: false
       });
-      if (!_this.state.focused) {
-        return;
-      }
-      _this.setState({
-        focused: false
-      });
     };
     _this.renderMain = function (props) {
       var detectCapsLock = props.detectCapsLock,
@@ -174,13 +174,14 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
       });
       return /*#__PURE__*/(
         React.createElement(RenderLayer, {
-          onFocusOutside: _this.hideSymbols,
-          onClickOutside: _this.hideSymbols,
-          active: _this.state.focused
+          active: _this.state.focused,
+          onFocusOutside: _this.handleFocusOutside,
+          onClickOutside: _this.handleFocusOutside
         }, /*#__PURE__*/
+
         React.createElement("div", {
           "data-tid": PasswordInputDataTids.root,
-          className: _this.styles.root()
+          className: styles.root()
         }, /*#__PURE__*/
         React.createElement(Input, _extends({
           ref: _this.refInput,
@@ -214,19 +215,14 @@ export var PasswordInput = (_dec = locale('PasswordInput', PasswordInputLocaleHe
   };
   _proto.render = function render() {
     var _this3 = this;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this3.emotion = emotion;
-      _this3.styles = getStyles(_this3.emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this3.theme = theme;
-        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-          rootNodeRef: _this3.setRootNode
-        }, _this3.props), _this3.renderMain(_this3.props));
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this3.theme = theme;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this3.setRootNode
+      }, _this3.getProps()), _this3.renderMain);
     });
   };
   _proto.getEyeWrapperClassname = function getEyeWrapperClassname() {
-    var styles = this.styles;
     switch (this.getProps().size) {
       case 'large':
         return styles.eyeWrapperLarge(this.theme);