@megafon/ui-core 8.2.0 → 8.3.0

package/dist/es/components/Pagination/Pagination.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex}
+h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}

package/dist/es/components/Pagination/Pagination.d.ts

@@ -1,22 +1,31 @@
 import * as React from 'react';
+import { PaginationTypesType, ThemeType, ValueType } from './types';
 import './Pagination.scss';
-import { PaginationValueType } from './components/PaginationButton/PaginationButton';
 interface IPaginationProps {
+    /** Общее количество страниц */
+    totalPages: number;
+    /** Номер текущей страницы */
+    activePage: number;
+    /** Тип компонента. DEPRECATED: 'classic' */
+    type?: PaginationTypesType;
+    /** Цветовая тема компонента */
+    theme?: ThemeType;
+    /** Отобразить поле ввода номера страницы */
+    showSelectPage?: boolean;
+    /** Обработчик изменения активной страницы */
+    onChange: (value: ValueType) => void;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         prev?: Record<string, string>;
         next?: Record<string, string>;
         button?: Record<string, string>;
+        skipPrev?: Record<string, string>;
+        skipNext?: Record<string, string>;
+        input?: Record<string, string>;
     };
-    /** Общее количество страниц */
-    totalPages: number;
-    /** Номер текущей страницы */
-    activePage: number;
-    /** Тема компонента */
-    theme?: 'default' | 'light';
-    /** Обработчик изменения активной страницы */
-    onChange: (value: PaginationValueType) => void;
 }
 declare const Pagination: React.FC<IPaginationProps>;
 export default Pagination;

package/dist/es/components/Pagination/Pagination.js

@@ -1,19 +1,38 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import "./Pagination.css";
+import Caption from "../Caption/Caption";
+import ValueField from "../ValueField/ValueField";
 import PaginationButtons from "./components/PaginationButtons/PaginationButtons";
-import PaginationNavigation from "./components/PaginationNavigation/PaginationNavigation";
-import usePagination, { Button } from "./usePagination";
+import PaginationNavigation, { HINTS } from "./components/PaginationNavigation/PaginationNavigation";
+import { getInputRangeValue, removeFirstZeros, setValueFieldTheme } from "./helpers";
+import { PaginationTypes } from "./types";
+import usePagination, { BUTTONS } from "./usePagination";
+import "./Pagination.css";
 var cn = 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 ? PaginationTypes.CLASSIC : _ref$type,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'default' : _ref$theme,
-    onChange = _ref.onChange;
-  var paginationItems = usePagination(totalPages, activePage);
+    showSelectPage = _ref.showSelectPage,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
+  var _usePagination = usePagination(type, totalPages, activePage),
+    paginationItems = _usePagination.paginationItems,
+    skipPrevPage = _usePagination.skipPrevPage,
+    skipNextPage = _usePagination.skipNextPage;
+  var _React$useState = React.useState(''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    inputValue = _React$useState2[0],
+    setInputValue = _React$useState2[1];
+  var inputRef = React.useRef(null);
+  var isModernType = type === PaginationTypes.MODERN;
+  var buttonForm = isModernType ? 'brick' : 'round';
   var handleBackClick = React.useCallback(function () {
     onChange(activePage - 1);
   }, [activePage, onChange]);
@@ -21,36 +40,89 @@ var Pagination = function Pagination(_ref) {
     onChange(activePage + 1);
   }, [activePage, onChange]);
   var handlePageButtonClick = React.useCallback(function (value) {
+    if (value === BUTTONS.SKIP_PREV) {
+      onChange(skipPrevPage);
+      return;
+    }
+    if (value === 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 = getInputRangeValue(inputValue, totalPages, 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 = removeFirstZeros(e.target.value);
+    setInputValue(targetValue);
+  }, []);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn()
-  }), /*#__PURE__*/React.createElement(PaginationNavigation, {
+    className: cn([className])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, /*#__PURE__*/React.createElement(PaginationNavigation, {
+    className: cn('button'),
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
     },
     direction: "left",
-    disabled: activePage === Button.FIRST,
-    onClick: handleBackClick,
-    className: cn('button'),
-    theme: theme
+    form: buttonForm,
+    disabled: activePage === BUTTONS.FIRST,
+    hint: isModernType ? HINTS.PREV : null,
+    theme: theme,
+    onClick: handleBackClick
   }), /*#__PURE__*/React.createElement(PaginationButtons, {
     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: Button.HIDDEN,
+    skipButtonPrev: BUTTONS.SKIP_PREV,
+    skipButtonNext: BUTTONS.SKIP_NEXT,
+    type: type,
+    form: buttonForm,
+    showHints: isModernType,
     theme: theme,
     onClick: handlePageButtonClick
   }), /*#__PURE__*/React.createElement(PaginationNavigation, {
+    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 ? HINTS.NEXT : null,
+    theme: theme,
+    onClick: handleNextClick
+  })), showSelectPage && /*#__PURE__*/React.createElement("div", {
+    className: cn('input')
+  }, /*#__PURE__*/React.createElement(Caption, {
+    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, {
+    className: cn('input-field'),
+    isControlled: true,
+    placeholder: "\u2116",
+    theme: setValueFieldTheme(theme),
+    value: inputValue,
+    onChange: handleInputChange,
+    onBlur: handleInputSubmit,
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input
+    },
+    inputRef: inputRef
+  })));
 };
 export default Pagination;

package/dist/es/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/es/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/es/components/Pagination/components/PaginationButton/PaginationButton.js

@@ -10,22 +10,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.createElement("button", _extends({}, 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);
 };
 export default PaginationButton;

package/dist/es/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/es/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/es/components/Pagination/components/PaginationButtons/PaginationButtons.js

@@ -1,54 +1,71 @@
-import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.array.map.js";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { PaginationTypes } from "../../types";
 import PaginationButton from "../PaginationButton/PaginationButton";
+import PaginationNavigation, { HINTS } from "../PaginationNavigation/PaginationNavigation";
 import "./PaginationButtons.css";
-var NothingIcon = function NothingIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.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 = 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 === PaginationTypes.MODERN;
   return /*#__PURE__*/React.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.createElement(PaginationButton, {
-        disabled: true,
+    if (isSkipButtonPrev || isSkipButtonNext) {
+      var hint = isSkipButtonNext ? HINTS.SKIP_NEXT : HINTS.SKIP_PREV;
+      return /*#__PURE__*/React.createElement(PaginationNavigation, {
         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.createElement(NothingIcon, null));
+      });
     }
     var isActive = pageNumber === activeButton;
+    var digitCount = String(pageNumber).length;
+    var pageNumberStyle = isModernType ? {
+      width: 10 * digitCount
+    } : undefined;
     return /*#__PURE__*/React.createElement(PaginationButton, {
+      key: index,
+      className: cn('button', {
+        form: form
+      }),
       dataAttrs: {
-        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, dataIndex)
+        root: 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.createElement("div", {
+      style: pageNumberStyle
+    }, pageNumber));
   }));
 };
 export default PaginationButtons;

package/dist/es/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/es/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/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.js

@@ -1,8 +1,18 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/web.timers.js";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, detectTouch } from '@megafon/ui-helpers';
+import Tooltip from "../../../Tooltip/Tooltip";
 import PaginationButton from "../PaginationButton/PaginationButton";
 import "./PaginationNavigation.css";
+var NothingIcon = function NothingIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.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.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -10,27 +20,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.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.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"
+  }));
+};
+export var HINTS = {
+  PREV: 'Предыдущая страница',
+  SKIP_PREV: 'Предыдущие 4 страницы',
+  SKIP_NEXT: 'Следующие 4 страницы',
+  NEXT: 'Следующая страница'
+};
+var delayShow = 250;
+var delayHide = 50;
 var cn = 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.createElement(PaginationButton, {
-    dataAttrs: dataAttrs,
-    className: cn({
+  var isTouch = detectTouch();
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    timeoutId = _React$useState2[0],
+    setTimeoutId = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isHovered = _React$useState4[0],
+    setIsHovered = _React$useState4[1];
+  var triggerRef = React.useRef(null);
+  var hasHint = !!hint && !disabled && !isTouch;
+  var handleClick = React.useCallback(function () {
+    onClick === null || onClick === void 0 ? void 0 : onClick(value);
+  }, [onClick, value]);
+  var handleHover = React.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.useCallback(function () {
+    return handleHover(true);
+  }, [handleHover]);
+  var handleMouseLeave = React.useCallback(function () {
+    return handleHover(false);
+  }, [handleHover]);
+  var renderIcon = function renderIcon() {
+    if (variant === 'skip') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NothingIcon, {
+        className: cn('skip-icon-base')
+      }), !disabled && /*#__PURE__*/React.createElement(ArrowsRightIcon, {
+        className: cn('skip-icon-hover')
+      }));
+    }
+    return /*#__PURE__*/React.createElement(ArrowRightIcon, {
+      className: cn('arrow-icon')
+    });
+  };
+  React.useEffect(function () {
+    if (disabled) {
+      setIsHovered(false);
+      timeoutId && clearTimeout(timeoutId);
+    }
+    return function () {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [disabled, timeoutId]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn([className])
+  }, /*#__PURE__*/React.createElement(PaginationButton, {
+    className: cn('button', {
       direction: direction
-    }, className),
+    }),
+    dataAttrs: dataAttrs,
     disabled: disabled,
-    isActive: isActive,
     theme: theme,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(ArrowRightIcon, {
+    form: form,
+    onClick: handleClick,
+    onMouseEnter: hasHint ? handleMouseEnter : undefined,
+    onMouseLeave: hasHint ? handleMouseLeave : undefined,
+    rootRef: triggerRef
+  }, /*#__PURE__*/React.createElement("div", {
     className: cn('icon')
-  }));
+  }, renderIcon())), hasHint && /*#__PURE__*/React.createElement(Tooltip, {
+    isOpened: isHovered,
+    triggerEvent: "controlled",
+    triggerElement: triggerRef,
+    colorTheme: "blue",
+    placement: "bottom",
+    fallbackPlacements: ['bottom'],
+    offset: "small"
+  }, hint));
 };
 export default PaginationNavigation;

package/dist/es/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/es/components/Pagination/helpers.js

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

package/dist/es/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/es/components/Pagination/types.js

@@ -0,0 +1,4 @@
+export var PaginationTypes = {
+  CLASSIC: 'classic',
+  MODERN: 'modern'
+};