@megafon/ui-core 8.2.1 → 8.4.0

package/dist/lib/components/Pagination/Pagination.js

@@ -6,11 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
+var _Caption = _interopRequireDefault(require("../Caption/Caption"));
+var _ValueField = _interopRequireDefault(require("../ValueField/ValueField"));
 var _PaginationButtons = _interopRequireDefault(require("./components/PaginationButtons/PaginationButtons"));
-var _PaginationNavigation = _interopRequireDefault(require("./components/PaginationNavigation/PaginationNavigation"));
-var _usePagination = _interopRequireWildcard(require("./usePagination"));
+var _PaginationNavigation = _interopRequireWildcard(require("./components/PaginationNavigation/PaginationNavigation"));
+var _helpers = require("./helpers");
+var _types = require("./types");
+var _usePagination2 = _interopRequireWildcard(require("./usePagination"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -18,11 +23,25 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-pagination');
 var Pagination = function Pagination(_ref) {
   var totalPages = _ref.totalPages,
     activePage = _ref.activePage,
-    dataAttrs = _ref.dataAttrs,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? _types.PaginationTypes.CLASSIC : _ref$type,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'default' : _ref$theme,
-    onChange = _ref.onChange;
-  var paginationItems = (0, _usePagination["default"])(totalPages, activePage);
+    showSelectPage = _ref.showSelectPage,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
+  var _usePagination = (0, _usePagination2["default"])(type, totalPages, activePage),
+    paginationItems = _usePagination.paginationItems,
+    skipPrevPage = _usePagination.skipPrevPage,
+    skipNextPage = _usePagination.skipNextPage;
+  var _React$useState = React.useState(''),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    inputValue = _React$useState2[0],
+    setInputValue = _React$useState2[1];
+  var inputRef = React.useRef(null);
+  var isModernType = type === _types.PaginationTypes.MODERN;
+  var buttonForm = isModernType ? 'brick' : 'round';
   var handleBackClick = React.useCallback(function () {
     onChange(activePage - 1);
   }, [activePage, onChange]);
@@ -30,36 +49,89 @@ var Pagination = function Pagination(_ref) {
     onChange(activePage + 1);
   }, [activePage, onChange]);
   var handlePageButtonClick = React.useCallback(function (value) {
+    if (value === _usePagination2.BUTTONS.SKIP_PREV) {
+      onChange(skipPrevPage);
+      return;
+    }
+    if (value === _usePagination2.BUTTONS.SKIP_NEXT) {
+      onChange(skipNextPage);
+      return;
+    }
     value && onChange(value);
-  }, [onChange]);
+  }, [onChange, skipNextPage, skipPrevPage]);
+  var handleInputSubmit = React.useCallback(function () {
+    var _a;
+    if (!inputValue) {
+      return;
+    }
+    var pageNumber = (0, _helpers.getInputRangeValue)(inputValue, totalPages, _usePagination2.BUTTONS.FIRST);
+    onChange(pageNumber);
+    setInputValue('');
+    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [inputValue, onChange, totalPages]);
+  var handleInputChange = React.useCallback(function (e) {
+    var targetValue = (0, _helpers.removeFirstZeros)(e.target.value);
+    setInputValue(targetValue);
+  }, []);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn()
-  }), /*#__PURE__*/React.createElement(_PaginationNavigation["default"], {
+    className: cn([className])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, /*#__PURE__*/React.createElement(_PaginationNavigation["default"], {
+    className: cn('button'),
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
     },
     direction: "left",
-    disabled: activePage === _usePagination.Button.FIRST,
-    onClick: handleBackClick,
-    className: cn('button'),
-    theme: theme
+    form: buttonForm,
+    disabled: activePage === _usePagination2.BUTTONS.FIRST,
+    hint: isModernType ? _PaginationNavigation.HINTS.PREV : null,
+    theme: theme,
+    onClick: handleBackClick
   }), /*#__PURE__*/React.createElement(_PaginationButtons["default"], {
     dataAttrs: {
-      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      button: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button,
+      skipNext: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.skipNext,
+      skipPrev: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.skipPrev
     },
     items: paginationItems,
     activeButton: activePage,
-    hiddenButton: _usePagination.Button.HIDDEN,
+    skipButtonPrev: _usePagination2.BUTTONS.SKIP_PREV,
+    skipButtonNext: _usePagination2.BUTTONS.SKIP_NEXT,
+    type: type,
+    form: buttonForm,
+    showHints: isModernType,
     theme: theme,
     onClick: handlePageButtonClick
   }), /*#__PURE__*/React.createElement(_PaginationNavigation["default"], {
+    className: cn('button'),
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
     },
+    direction: "right",
+    form: buttonForm,
     disabled: activePage === totalPages,
-    onClick: handleNextClick,
-    className: cn('button'),
-    theme: theme
-  }));
+    hint: isModernType ? _PaginationNavigation.HINTS.NEXT : null,
+    theme: theme,
+    onClick: handleNextClick
+  })), showSelectPage && /*#__PURE__*/React.createElement("div", {
+    className: cn('input')
+  }, /*#__PURE__*/React.createElement(_Caption["default"], {
+    className: cn('input-caption'),
+    color: theme === 'light' ? 'white' : 'default',
+    hasMargin: false
+  }, "\u041D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443"), /*#__PURE__*/React.createElement(_ValueField["default"], {
+    className: cn('input-field'),
+    isControlled: true,
+    placeholder: "\u2116",
+    theme: (0, _helpers.setValueFieldTheme)(theme),
+    value: inputValue,
+    onChange: handleInputChange,
+    onBlur: handleInputSubmit,
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input
+    },
+    inputRef: inputRef
+  })));
 };
 var _default = exports["default"] = Pagination;

package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-pagination-button{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;font-weight:500;line-height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:1px solid transparent;border-radius:50%;cursor:pointer;height:32px;padding:0;width:32px}.mfui-pagination-button svg{width:100%}.mfui-pagination-button:disabled{pointer-events:none}.mfui-pagination-button_active{border-color:var(--brandGreen);pointer-events:none}.mfui-pagination-button_theme_default{color:var(--content)}.mfui-pagination-button_theme_default svg{fill:var(--content)}.mfui-pagination-button_theme_default:hover{background-color:var(--spbSky0)}.mfui-pagination-button_theme_default.mfui-pagination-button_active{border-color:var(--brandGreen)}.mfui-pagination-button_theme_light{color:var(--stcWhite)}.mfui-pagination-button_theme_light svg{fill:var(--stcWhite)}.mfui-pagination-button_theme_light:hover{background-color:var(--stcWhite20)}.mfui-pagination-button_theme_light.mfui-pagination-button_active{border-color:var(--stcWhite)}
+h1,h2,h3,h4,h5{margin:0}.mfui-pagination-button{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:1px solid transparent;border-radius:50%;height:32px;justify-content:center;padding:0;width:32px;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:transparent;cursor:pointer}.mfui-pagination-button svg{width:100%}.mfui-pagination-button:disabled{pointer-events:none}.mfui-pagination-button_form_brick{border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box}.mfui-pagination-button_auto-width{min-width:32px;padding:0 8px;width:auto}.mfui-pagination-button_active{border-color:var(--brandGreen);pointer-events:none}.mfui-pagination-button_theme_default{color:var(--content)}.mfui-pagination-button_theme_default svg{fill:var(--content)}.mfui-pagination-button_theme_default:hover{background-color:var(--spbSky0)}.mfui-pagination-button_theme_default.mfui-pagination-button_active{border-color:var(--brandGreen);color:var(--brandGreen)}.mfui-pagination-button_theme_light{color:var(--stcWhite)}.mfui-pagination-button_theme_light svg{fill:var(--stcWhite)}.mfui-pagination-button_theme_light:hover{background-color:var(--stcWhite20)}.mfui-pagination-button_theme_light.mfui-pagination-button_active{border-color:var(--stcWhite)}.mfui-pagination-button_theme_gray{color:var(--content)}.mfui-pagination-button_theme_gray svg{fill:var(--content)}.mfui-pagination-button_theme_gray:hover{background-color:var(--base)}.mfui-pagination-button_theme_gray.mfui-pagination-button_active{border-color:var(--brandGreen);color:var(--brandGreen)}

package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.d.ts

@@ -1,17 +1,22 @@
 import React from 'react';
+import { ValueType, ThemeType, ButtonFormType } from '../../types';
 import './PaginationButton.scss';
-export type PaginationValueType = string | number;
 export interface IPaginationButtonProps {
+    theme?: ThemeType;
+    form?: ButtonFormType;
+    value?: ValueType;
     disabled?: boolean;
     isActive?: boolean;
-    theme?: 'default' | 'light';
-    value?: PaginationValueType;
+    autoWidth?: boolean;
     className?: string;
     dataAttrs?: {
         root?: Record<string, string>;
     };
     children?: React.ReactNode;
-    onClick?: (value?: PaginationValueType) => void;
+    onClick?: (value?: ValueType) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    rootRef?: React.Ref<HTMLButtonElement>;
 }
 declare const PaginationButton: React.FC<IPaginationButtonProps>;
 export default PaginationButton;

package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.js

@@ -16,22 +16,32 @@ var PaginationButton = function PaginationButton(_ref) {
     isActive = _ref$isActive === void 0 ? false : _ref$isActive,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    form = _ref.form,
+    autoWidth = _ref.autoWidth,
     className = _ref.className,
     children = _ref.children,
     onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
     value = _ref.value,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
   var handleClick = function handleClick() {
     onClick === null || onClick === void 0 ? void 0 : onClick(value);
   };
   return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
-      theme: theme
+      theme: theme,
+      form: form,
+      'auto-width': autoWidth
     }, className),
+    type: "button",
     disabled: disabled,
     onClick: handleClick,
-    type: "button"
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    ref: rootRef
   }), children);
 };
 var _default = exports["default"] = PaginationButton;

package/dist/lib/components/Pagination/components/PaginationButtons/PaginationButtons.css

@@ -1 +1 @@
-.mfui-pagination-buttons{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination-buttons__button{-ms-flex-negative:0;flex-shrink:0;margin:0 4px}
+h1,h2,h3,h4,h5{margin:0}.mfui-pagination-buttons{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination-buttons__button{-ms-flex-negative:0;flex-shrink:0;margin:0 4px}@media screen and (max-width:767px){.mfui-pagination-buttons__button{margin:0 2px}}.mfui-pagination-buttons__button_form_brick{margin:0 2px}@media screen and (max-width:767px){.mfui-pagination-buttons__button_form_brick{margin:0}}

package/dist/lib/components/Pagination/components/PaginationButtons/PaginationButtons.d.ts

@@ -1,15 +1,21 @@
 import React from 'react';
-import { PaginationValueType } from '../PaginationButton/PaginationButton';
+import { ValueType, ThemeType, ButtonFormType, PaginationTypesType } from '../../types';
 import './PaginationButtons.scss';
-interface IPaginationButtonsProps {
+export interface IPaginationButtonsProps {
     items: Array<string | number>;
-    theme?: 'default' | 'light';
+    type: PaginationTypesType;
+    form: ButtonFormType;
+    theme: ThemeType;
+    showHints: boolean;
     activeButton: number;
-    hiddenButton: string;
+    skipButtonPrev: string;
+    skipButtonNext: string;
     dataAttrs?: {
-        root?: Record<string, string>;
+        button?: Record<string, string>;
+        skipNext?: Record<string, string>;
+        skipPrev?: Record<string, string>;
     };
-    onClick: (value?: PaginationValueType) => void;
+    onClick: (value?: ValueType) => void;
 }
 declare const PaginationButtons: React.FC<IPaginationButtonsProps>;
 export default PaginationButtons;

package/dist/lib/components/Pagination/components/PaginationButtons/PaginationButtons.js

@@ -1,60 +1,80 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 require("core-js/modules/es.array.map.js");
 var _react = _interopRequireDefault(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
+var _types = require("../../types");
 var _PaginationButton = _interopRequireDefault(require("../PaginationButton/PaginationButton"));
+var _PaginationNavigation = _interopRequireWildcard(require("../PaginationNavigation/PaginationNavigation"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var NothingIcon = function NothingIcon(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M7 9a1 1 0 11-1 1 1 1 0 011-1zm2 1a1 1 0 101-1 1 1 0 00-1 1zm3 0a1 1 0 101-1 1 1 0 00-1 1z"
-  }));
-};
 var cn = (0, _uiHelpers.cnCreate)('mfui-pagination-buttons');
 var PaginationButtons = function PaginationButtons(_ref) {
   var items = _ref.items,
+    type = _ref.type,
     theme = _ref.theme,
+    form = _ref.form,
+    showHints = _ref.showHints,
     onClick = _ref.onClick,
     activeButton = _ref.activeButton,
-    hiddenButton = _ref.hiddenButton,
+    skipButtonPrev = _ref.skipButtonPrev,
+    skipButtonNext = _ref.skipButtonNext,
     dataAttrs = _ref.dataAttrs;
+  var isModernType = type === _types.PaginationTypes.MODERN;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: cn()
   }, items.map(function (pageNumber, index) {
-    var isHiddenButton = hiddenButton === pageNumber;
+    var isSkipButtonPrev = skipButtonPrev === pageNumber;
+    var isSkipButtonNext = skipButtonNext === pageNumber;
     var dataIndex = typeof pageNumber === 'number' ? pageNumber : undefined;
-    if (isHiddenButton) {
-      return /*#__PURE__*/_react["default"].createElement(_PaginationButton["default"], {
-        disabled: true,
+    if (isSkipButtonPrev || isSkipButtonNext) {
+      var hint = isSkipButtonNext ? _PaginationNavigation.HINTS.SKIP_NEXT : _PaginationNavigation.HINTS.SKIP_PREV;
+      return /*#__PURE__*/_react["default"].createElement(_PaginationNavigation["default"], {
         key: index,
+        className: cn('button', {
+          form: form
+        }),
         theme: theme,
-        className: cn('button'),
+        form: form,
+        value: pageNumber,
+        variant: "skip",
+        disabled: !isModernType,
+        direction: isSkipButtonNext ? 'right' : 'left',
+        hint: showHints ? hint : null,
+        onClick: onClick,
         dataAttrs: {
-          root: {
-            'data-testid': 'hiddenButton'
-          }
+          root: isSkipButtonNext ? dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.skipNext : dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.skipPrev
         }
-      }, /*#__PURE__*/_react["default"].createElement(NothingIcon, null));
+      });
     }
     var isActive = pageNumber === activeButton;
+    var digitCount = String(pageNumber).length;
+    var pageNumberStyle = isModernType ? {
+      width: 10 * digitCount
+    } : undefined;
     return /*#__PURE__*/_react["default"].createElement(_PaginationButton["default"], {
+      key: index,
+      className: cn('button', {
+        form: form
+      }),
       dataAttrs: {
-        root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, dataIndex)
+        root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, dataIndex)
       },
-      isActive: isActive,
-      key: index,
-      className: cn('button'),
-      onClick: onClick,
+      theme: theme,
+      form: form,
       value: pageNumber,
-      theme: theme
-    }, pageNumber);
+      autoWidth: isModernType,
+      isActive: isActive,
+      onClick: onClick
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: pageNumberStyle
+    }, pageNumber));
   }));
 };
 var _default = exports["default"] = PaginationButtons;

package/dist/lib/components/Pagination/components/PaginationNavigation/PaginationNavigation.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-pagination-navigation_direction_left .mfui-pagination-navigation__icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-pagination-navigation svg{width:100%}.mfui-pagination-navigation:disabled svg{opacity:.25}
+h1,h2,h3,h4,h5{margin:0}.mfui-pagination-navigation__icon{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-pagination-navigation__skip-icon-hover{height:20px;left:50%;opacity:0;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mfui-pagination-navigation__button_direction_left .mfui-pagination-navigation__icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-pagination-navigation__button:disabled .mfui-pagination-navigation__arrow-icon{opacity:.25}.mfui-pagination-navigation__button:not(:disabled):hover .mfui-pagination-navigation__skip-icon-base{opacity:0}.mfui-pagination-navigation__button:not(:disabled):hover .mfui-pagination-navigation__skip-icon-hover{opacity:1}

package/dist/lib/components/Pagination/components/PaginationNavigation/PaginationNavigation.d.ts

@@ -1,16 +1,25 @@
 import React from 'react';
-import { PaginationValueType } from '../PaginationButton/PaginationButton';
+import { ButtonFormType, ThemeType, ValueType } from '../../types';
 import './PaginationNavigation.scss';
+export declare const HINTS: {
+    PREV: string;
+    SKIP_PREV: string;
+    SKIP_NEXT: string;
+    NEXT: string;
+};
 interface IPaginationNavigationProps {
+    theme?: ThemeType;
+    form?: ButtonFormType;
     direction?: 'left' | 'right';
-    theme?: 'default' | 'light';
+    variant?: 'default' | 'skip';
     disabled?: boolean;
-    isActive?: boolean;
+    value?: string | number;
+    hint?: string | null;
     className?: string;
     dataAttrs?: {
         root?: Record<string, string>;
     };
-    onClick?: (value?: PaginationValueType) => void;
+    onClick?: (value?: ValueType) => void;
 }
 declare const PaginationNavigation: React.FC<IPaginationNavigationProps>;
 export default PaginationNavigation;

package/dist/lib/components/Pagination/components/PaginationNavigation/PaginationNavigation.js

@@ -3,12 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.HINTS = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/web.timers.js");
 var _react = _interopRequireDefault(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
+var _Tooltip = _interopRequireDefault(require("../../../Tooltip/Tooltip"));
 var _PaginationButton = _interopRequireDefault(require("../PaginationButton/PaginationButton"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var NothingIcon = function NothingIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M7 9a1 1 0 11-1 1 1 1 0 011-1zm2 1a1 1 0 101-1 1 1 0 00-1 1zm3 0a1 1 0 101-1 1 1 0 00-1 1z"
+  }));
+};
 var ArrowRightIcon = function ArrowRightIcon(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
@@ -16,27 +26,111 @@ var ArrowRightIcon = function ArrowRightIcon(props) {
     d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
   }));
 };
+var ArrowsRightIcon = function ArrowsRightIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M5 12.976L7.996 10 5 7.023 6.002 6 10 10l-3.998 4L5 12.976zM10 12.976L12.996 10 10 7.023 11.002 6 15 10l-3.998 4L10 12.976z"
+  }));
+};
+var HINTS = exports.HINTS = {
+  PREV: 'Предыдущая страница',
+  SKIP_PREV: 'Предыдущие 4 страницы',
+  SKIP_NEXT: 'Следующие 4 страницы',
+  NEXT: 'Следующая страница'
+};
+var delayShow = 250;
+var delayHide = 50;
 var cn = (0, _uiHelpers.cnCreate)('mfui-pagination-navigation');
 var PaginationNavigation = function PaginationNavigation(_ref) {
-  var _ref$direction = _ref.direction,
+  var variant = _ref.variant,
+    _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'right' : _ref$direction,
     theme = _ref.theme,
+    form = _ref.form,
     disabled = _ref.disabled,
-    isActive = _ref.isActive,
+    value = _ref.value,
+    hint = _ref.hint,
     onClick = _ref.onClick,
     className = _ref.className,
     dataAttrs = _ref.dataAttrs;
-  return /*#__PURE__*/_react["default"].createElement(_PaginationButton["default"], {
-    dataAttrs: dataAttrs,
-    className: cn({
+  var isTouch = (0, _uiHelpers.detectTouch)();
+  var _React$useState = _react["default"].useState(null),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    timeoutId = _React$useState2[0],
+    setTimeoutId = _React$useState2[1];
+  var _React$useState3 = _react["default"].useState(false),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    isHovered = _React$useState4[0],
+    setIsHovered = _React$useState4[1];
+  var triggerRef = _react["default"].useRef(null);
+  var hasHint = !!hint && !disabled && !isTouch;
+  var handleClick = _react["default"].useCallback(function () {
+    onClick === null || onClick === void 0 ? void 0 : onClick(value);
+  }, [onClick, value]);
+  var handleHover = _react["default"].useCallback(function (isHovering) {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    var delay = isHovering ? delayShow : delayHide;
+    var newTimeoutId = setTimeout(function () {
+      setIsHovered(isHovering);
+    }, delay);
+    setTimeoutId(newTimeoutId);
+  }, [timeoutId]);
+  var handleMouseEnter = _react["default"].useCallback(function () {
+    return handleHover(true);
+  }, [handleHover]);
+  var handleMouseLeave = _react["default"].useCallback(function () {
+    return handleHover(false);
+  }, [handleHover]);
+  var renderIcon = function renderIcon() {
+    if (variant === 'skip') {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(NothingIcon, {
+        className: cn('skip-icon-base')
+      }), !disabled && /*#__PURE__*/_react["default"].createElement(ArrowsRightIcon, {
+        className: cn('skip-icon-hover')
+      }));
+    }
+    return /*#__PURE__*/_react["default"].createElement(ArrowRightIcon, {
+      className: cn('arrow-icon')
+    });
+  };
+  _react["default"].useEffect(function () {
+    if (disabled) {
+      setIsHovered(false);
+      timeoutId && clearTimeout(timeoutId);
+    }
+    return function () {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [disabled, timeoutId]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn([className])
+  }, /*#__PURE__*/_react["default"].createElement(_PaginationButton["default"], {
+    className: cn('button', {
       direction: direction
-    }, className),
+    }),
+    dataAttrs: dataAttrs,
     disabled: disabled,
-    isActive: isActive,
     theme: theme,
-    onClick: onClick
-  }, /*#__PURE__*/_react["default"].createElement(ArrowRightIcon, {
+    form: form,
+    onClick: handleClick,
+    onMouseEnter: hasHint ? handleMouseEnter : undefined,
+    onMouseLeave: hasHint ? handleMouseLeave : undefined,
+    rootRef: triggerRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('icon')
-  }));
+  }, renderIcon())), hasHint && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+    isOpened: isHovered,
+    triggerEvent: "controlled",
+    triggerElement: triggerRef,
+    colorTheme: "blue",
+    placement: "bottom",
+    fallbackPlacements: ['bottom'],
+    offset: "small"
+  }, hint));
 };
 var _default = exports["default"] = PaginationNavigation;

package/dist/lib/components/Pagination/helpers.d.ts

@@ -1,2 +1,8 @@
-declare const getRange: (from: number, to: number, step?: number) => number[];
-export default getRange;
+import { ComponentProps } from 'react';
+import ValueField from '../ValueField/ValueField';
+import { ThemeType } from './types';
+export declare const getRange: (from: number, to: number, step?: number) => number[];
+export declare const removeFirstZeros: (value: string) => string;
+export declare const getInputRangeValue: (value: string | number, maxValue: number, minValue: number) => number;
+export type ValueFieldThemeType = ComponentProps<typeof ValueField>['theme'];
+export declare const setValueFieldTheme: (theme: ThemeType) => ValueFieldThemeType;

package/dist/lib/components/Pagination/helpers.js

@@ -3,8 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var getRange = function getRange(from, to) {
+exports.setValueFieldTheme = exports.removeFirstZeros = exports.getRange = exports.getInputRangeValue = void 0;
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.string.replace.js");
+var getRange = exports.getRange = function getRange(from, to) {
   var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   var i = from;
   var range = [];
@@ -14,4 +18,26 @@ var getRange = function getRange(from, to) {
   }
   return range;
 };
-var _default = exports["default"] = getRange;
+var removeFirstZeros = exports.removeFirstZeros = function removeFirstZeros(value) {
+  return /^0.+/.test(value) ? value.replace(/^(0)+/, '') : value;
+};
+var getInputRangeValue = exports.getInputRangeValue = function getInputRangeValue(value, maxValue, minValue) {
+  var numberValue = Number(value);
+  if (numberValue > maxValue) {
+    return maxValue;
+  }
+  if (numberValue < minValue) {
+    return minValue;
+  }
+  return numberValue;
+};
+var setValueFieldTheme = exports.setValueFieldTheme = function setValueFieldTheme(theme) {
+  switch (theme) {
+    case 'light':
+      return 'color';
+    case 'gray':
+      return 'gray';
+    default:
+      return 'default';
+  }
+};

package/dist/lib/components/Pagination/types.d.ts

@@ -0,0 +1,25 @@
+export declare const PaginationTypes: {
+    readonly CLASSIC: "classic";
+    readonly MODERN: "modern";
+};
+export type PaginationTypesType = (typeof PaginationTypes)[keyof typeof PaginationTypes];
+export type ButtonFormType = 'brick' | 'round';
+export type ValueType = string | number;
+export type ThemeType = 'default' | 'light' | 'gray';
+type SettingsType = {
+    neighbourCount: {
+        main: number;
+        mobile: number;
+        mobileXS: number;
+    };
+    visibleNumbers: {
+        main: number;
+        mobile: number;
+        mobileXS: number;
+    };
+    skipStep: number;
+};
+export type SettingsMapType = {
+    [key in PaginationTypesType]: SettingsType;
+};
+export {};

package/dist/lib/components/Pagination/types.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationTypes = void 0;
+var PaginationTypes = exports.PaginationTypes = {
+  CLASSIC: 'classic',
+  MODERN: 'modern'
+};