@megafon/ui-core 6.2.1 → 7.0.0

package/dist/es/components/Notification/Notification.js

@@ -1,16 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/web.timers.js";
 import "core-js/modules/es.string.link.js";
-import "core-js/modules/es.object.values.js";
-import React, { useEffect, useRef, useState } from 'react';
+import "core-js/modules/web.timers.js";
+import * as React from 'react';
 import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import Button from "../Button/Button";
 import TextLink from "../TextLink/TextLink";
 import Tile from "../Tile/Tile";
 import "./Notification.css";
-
 var ErrorIcon = function ErrorIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -20,7 +17,6 @@ var ErrorIcon = function ErrorIcon(props) {
     d: "M16 4a6 6 0 00-6 6v2H8v8a8 8 0 0016 0v-8h-2v-2a6 6 0 00-6-6zm-4 6a4 4 0 018 0v2h-8zm10 10a6 6 0 01-12 0v-6h12z"
   }));
 };
-
 var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -30,7 +26,6 @@ var ArrowDown = function ArrowDown(props) {
     clipRule: "evenodd"
   }));
 };
-
 var RightArrow = function RightArrow(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -38,7 +33,6 @@ var RightArrow = function RightArrow(props) {
     d: "M8 13l3-3-3-3 1-1 4 4-4 4z"
   }));
 };
-
 var WarningIcon = function WarningIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -46,7 +40,6 @@ var WarningIcon = function WarningIcon(props) {
     d: "M15 22h2v-2h-2v2zm0-4h2v-8h-2v8zm1 10C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zM6 16c0 5.5 4.5 10 10 10s10-4.5 10-10S21.5 6 16 6 6 10.5 6 16z"
   }));
 };
-
 var SuccessIcon = function SuccessIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -54,7 +47,6 @@ var SuccessIcon = function SuccessIcon(props) {
     d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
   }));
 };
-
 var InfoIcon = function InfoIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
@@ -62,7 +54,6 @@ var InfoIcon = function InfoIcon(props) {
     d: "M15 12h2v-2h-2v2zm0 10h2v-8h-2v8zm1 6C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zm0-22C10.5 6 6 10.5 6 16s4.5 10 10 10 10-4.5 10-10S21.5 6 16 6z"
   }));
 };
-
 var CancelIcon = function CancelIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 10 10"
@@ -72,8 +63,10 @@ var CancelIcon = function CancelIcon(props) {
     d: "M5 3.75L1.25 0 0 1.25 3.75 5 0 8.75 1.25 10 5 6.25 8.75 10 10 8.75 6.25 5 10 1.25 8.75 0 5 3.75z"
   }));
 };
-
 var TIMEOUT_DELAY = 400;
+var useEffect = React.useEffect,
+  useRef = React.useRef,
+  useState = React.useState;
 var NotificationTypes = {
   SUCCESS: 'success',
   WARNING: 'warning',
@@ -88,61 +81,57 @@ var ShadowTypes = {
 };
 export var testIdPrefix = 'Notification';
 var cn = cnCreate('mfui-notification');
-
 var Notification = function Notification(_ref) {
   var className = _ref.className,
-      _ref$classes = _ref.classes;
-  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var rootClass = _ref$classes.root,
-      containerClass = _ref$classes.container,
-      contentClass = _ref$classes.content,
-      linkClass = _ref$classes.link,
-      children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'info' : _ref$type,
-      _ref$shadowLevel = _ref.shadowLevel,
-      shadowLevel = _ref$shadowLevel === void 0 ? 'zero' : _ref$shadowLevel,
-      _ref$isColored = _ref.isColored,
-      isColored = _ref$isColored === void 0 ? true : _ref$isColored,
-      hasCloseButton = _ref.hasCloseButton,
-      title = _ref.title,
-      shortText = _ref.shortText,
-      _ref$closeCollapseTit = _ref.closeCollapseTitle,
-      closeCollapseTitle = _ref$closeCollapseTit === void 0 ? 'Подробнее' : _ref$closeCollapseTit,
-      _ref$openCollapseTitl = _ref.openCollapseTitle,
-      openCollapseTitle = _ref$openCollapseTitl === void 0 ? 'Свернуть' : _ref$openCollapseTitl,
-      _ref$isCollapseOpened = _ref.isCollapseOpened,
-      isCollapseOpened = _ref$isCollapseOpened === void 0 ? false : _ref$isCollapseOpened,
-      buttonText = _ref.buttonText,
-      _ref$buttonLoader = _ref.buttonLoader,
-      buttonLoader = _ref$buttonLoader === void 0 ? false : _ref$buttonLoader,
-      _ref$buttonDisable = _ref.buttonDisable,
-      buttonDisable = _ref$buttonDisable === void 0 ? false : _ref$buttonDisable,
-      link = _ref.link,
-      rel = _ref.rel,
-      href = _ref.href,
-      target = _ref.target,
-      icon = _ref.icon,
-      rootRef = _ref.rootRef,
-      dataAttrs = _ref.dataAttrs,
-      onClose = _ref.onClose,
-      onLinkClick = _ref.onLinkClick,
-      onButtonClick = _ref.onButtonClick,
-      onCollapseButtonClick = _ref.onCollapseButtonClick;
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    rootClass = _ref$classes2.root,
+    containerClass = _ref$classes2.container,
+    contentClass = _ref$classes2.content,
+    linkClass = _ref$classes2.link,
+    children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'info' : _ref$type,
+    _ref$shadowLevel = _ref.shadowLevel,
+    shadowLevel = _ref$shadowLevel === void 0 ? 'zero' : _ref$shadowLevel,
+    _ref$isColored = _ref.isColored,
+    isColored = _ref$isColored === void 0 ? true : _ref$isColored,
+    hasCloseButton = _ref.hasCloseButton,
+    title = _ref.title,
+    shortText = _ref.shortText,
+    _ref$closeCollapseTit = _ref.closeCollapseTitle,
+    closeCollapseTitle = _ref$closeCollapseTit === void 0 ? 'Подробнее' : _ref$closeCollapseTit,
+    _ref$openCollapseTitl = _ref.openCollapseTitle,
+    openCollapseTitle = _ref$openCollapseTitl === void 0 ? 'Свернуть' : _ref$openCollapseTitl,
+    _ref$isCollapseOpened = _ref.isCollapseOpened,
+    isCollapseOpened = _ref$isCollapseOpened === void 0 ? false : _ref$isCollapseOpened,
+    buttonText = _ref.buttonText,
+    _ref$buttonLoader = _ref.buttonLoader,
+    buttonLoader = _ref$buttonLoader === void 0 ? false : _ref$buttonLoader,
+    _ref$buttonDisable = _ref.buttonDisable,
+    buttonDisable = _ref$buttonDisable === void 0 ? false : _ref$buttonDisable,
+    link = _ref.link,
+    rel = _ref.rel,
+    href = _ref.href,
+    target = _ref.target,
+    icon = _ref.icon,
+    rootRef = _ref.rootRef,
+    dataAttrs = _ref.dataAttrs,
+    onClose = _ref.onClose,
+    onLinkClick = _ref.onLinkClick,
+    onButtonClick = _ref.onButtonClick,
+    onCollapseButtonClick = _ref.onCollapseButtonClick;
   var shortTextRef = useRef(null);
   var fullTextRef = useRef(null);
   var wrapTextRef = useRef(null);
-
   var _useState = useState(isCollapseOpened),
-      _useState2 = _slicedToArray(_useState, 2),
-      showFullText = _useState2[0],
-      setShowFullText = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showFullText = _useState2[0],
+    setShowFullText = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      updateTextHeight = _useState4[0],
-      setUpdateTextHeight = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    updateTextHeight = _useState4[0],
+    setUpdateTextHeight = _useState4[1];
   var initialTextClasses = {
     "short": {
       hidden: shortText && showFullText
@@ -151,12 +140,10 @@ var Notification = function Notification(_ref) {
       visible: showFullText
     }
   };
-
   var _useState5 = useState(initialTextClasses),
-      _useState6 = _slicedToArray(_useState5, 2),
-      textClasses = _useState6[0],
-      setTextClass = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    textClasses = _useState6[0],
+    setTextClass = _useState6[1];
   var hasBottom = shortText || buttonText || link;
   var isErrorType = type === NotificationTypes.ERROR;
   useEffect(function () {
@@ -166,26 +153,21 @@ var Notification = function Notification(_ref) {
     if (!fullTextRef.current || !shortTextRef.current || !wrapTextRef.current) {
       return undefined;
     }
-
     var visibleElement = showFullText ? shortTextRef.current : fullTextRef.current;
-
     var _visibleElement$getBo = visibleElement.getBoundingClientRect(),
-        height = _visibleElement$getBo.height;
-
+      height = _visibleElement$getBo.height;
     wrapTextRef.current.style.height = "".concat(height, "px");
-    return setUpdateTextHeight(!updateTextHeight); // не должен запускаться при изменении флага updateTextHeight;
+    return setUpdateTextHeight(!updateTextHeight);
+    // не должен запускаться при изменении флага updateTextHeight;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showFullText]);
   useEffect(function () {
     if (!fullTextRef.current || !shortTextRef.current || !wrapTextRef.current) {
       return undefined;
     }
-
     var hiddenElement = showFullText ? fullTextRef.current : shortTextRef.current;
-
     var _hiddenElement$getBou = hiddenElement.getBoundingClientRect(),
-        height = _hiddenElement$getBou.height;
-
+      height = _hiddenElement$getBou.height;
     wrapTextRef.current.style.height = "".concat(height, "px");
     setTextClass(initialTextClasses);
     var timeoutId = setTimeout(function () {
@@ -195,16 +177,15 @@ var Notification = function Notification(_ref) {
     }, TIMEOUT_DELAY);
     return function () {
       clearTimeout(timeoutId);
-    }; // не должен запускаться при изменении флага showFullText;
+    };
+    // не должен запускаться при изменении флага showFullText;
     // запускается по флагу updateTextHeight, который изменяется в предыдущем эффекте.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [updateTextHeight]);
-
   var handleCollapseButtonClick = function handleCollapseButtonClick() {
     setShowFullText(!showFullText);
     onCollapseButtonClick === null || onCollapseButtonClick === void 0 ? void 0 : onCollapseButtonClick(!showFullText);
   };
-
   var renderLink = function renderLink() {
     return /*#__PURE__*/React.createElement(TextLink, {
       dataAttrs: {
@@ -212,6 +193,7 @@ var Notification = function Notification(_ref) {
       },
       className: cn('link', [linkClass]),
       onClick: onLinkClick,
+      color: isErrorType && isColored ? 'white' : 'green',
       rel: rel,
       href: href,
       target: target
@@ -219,7 +201,6 @@ var Notification = function Notification(_ref) {
       className: cn('link-arrow')
     }));
   };
-
   var renderButton = function renderButton() {
     return /*#__PURE__*/React.createElement(Button, {
       className: cn('button'),
@@ -235,7 +216,6 @@ var Notification = function Notification(_ref) {
       onClick: onButtonClick
     }, buttonText);
   };
-
   var renderCollapseButton = function renderCollapseButton() {
     return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapseButton), {
       type: "button",
@@ -247,31 +227,24 @@ var Notification = function Notification(_ref) {
       })
     }));
   };
-
   var renderIcon = function renderIcon() {
     if (icon) {
       return icon;
     }
-
     var SUCCESS = NotificationTypes.SUCCESS,
-        ERROR = NotificationTypes.ERROR,
-        WARNING = NotificationTypes.WARNING;
-
+      ERROR = NotificationTypes.ERROR,
+      WARNING = NotificationTypes.WARNING;
     switch (type) {
       case SUCCESS:
         return /*#__PURE__*/React.createElement(SuccessIcon, null);
-
       case ERROR:
         return /*#__PURE__*/React.createElement(ErrorIcon, null);
-
       case WARNING:
         return /*#__PURE__*/React.createElement(WarningIcon, null);
-
       default:
         return /*#__PURE__*/React.createElement(InfoIcon, null);
     }
   };
-
   return /*#__PURE__*/React.createElement(Tile, {
     className: cn({
       type: type,
@@ -322,47 +295,4 @@ var Notification = function Notification(_ref) {
     className: cn('close-icon')
   })));
 };
-
-Notification.propTypes = {
-  type: PropTypes.oneOf(Object.values(NotificationTypes)),
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    container: PropTypes.string,
-    content: PropTypes.string,
-    link: PropTypes.string
-  }),
-  shadowLevel: PropTypes.oneOf(Object.values(ShadowTypes)),
-  isColored: PropTypes.bool,
-  hasCloseButton: PropTypes.bool,
-  title: PropTypes.string,
-  shortText: PropTypes.string,
-  closeCollapseTitle: PropTypes.string,
-  openCollapseTitle: PropTypes.string,
-  isCollapseOpened: PropTypes.bool,
-  buttonText: PropTypes.string,
-  buttonLoader: PropTypes.bool,
-  buttonDisable: PropTypes.bool,
-  link: PropTypes.string,
-  rel: PropTypes.string,
-  href: PropTypes.string,
-  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  icon: PropTypes.element,
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    title: PropTypes.objectOf(PropTypes.string.isRequired),
-    text: PropTypes.objectOf(PropTypes.string.isRequired),
-    link: PropTypes.objectOf(PropTypes.string.isRequired),
-    close: PropTypes.objectOf(PropTypes.string.isRequired),
-    button: PropTypes.objectOf(PropTypes.string.isRequired),
-    collapseButton: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  onClose: PropTypes.func,
-  onLinkClick: PropTypes.func,
-  onButtonClick: PropTypes.func,
-  onCollapseButtonClick: PropTypes.func
-};
 export default Notification;

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

@@ -1,5 +1 @@
-.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}

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

@@ -1,5 +1,6 @@
-import React from 'react';
-import './Pagination.less';
+import * as React from 'react';
+import './Pagination.scss';
+import { PaginationValueType } from './components/PaginationButton/PaginationButton';
 interface IPaginationProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -15,7 +16,7 @@ interface IPaginationProps {
     /** Тема компонента */
     theme?: 'default' | 'light';
     /** Обработчик изменения активной страницы */
-    onChange: (value: number) => void;
+    onChange: (value: PaginationValueType) => void;
 }
 declare const Pagination: React.FC<IPaginationProps>;
 export default Pagination;

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

@@ -1,20 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import PropTypes from 'prop-types';
 import "./Pagination.css";
 import PaginationButtons from "./components/PaginationButtons/PaginationButtons";
 import PaginationNavigation from "./components/PaginationNavigation/PaginationNavigation";
 import usePagination, { Button } from "./usePagination";
 var cn = cnCreate('mfui-pagination');
-
 var Pagination = function Pagination(_ref) {
   var totalPages = _ref.totalPages,
-      activePage = _ref.activePage,
-      dataAttrs = _ref.dataAttrs,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'default' : _ref$theme,
-      onChange = _ref.onChange;
+    activePage = _ref.activePage,
+    dataAttrs = _ref.dataAttrs,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    onChange = _ref.onChange;
   var paginationItems = usePagination(totalPages, activePage);
   var handleBackClick = React.useCallback(function () {
     onChange(activePage - 1);
@@ -23,7 +21,7 @@ var Pagination = function Pagination(_ref) {
     onChange(activePage + 1);
   }, [activePage, onChange]);
   var handlePageButtonClick = React.useCallback(function (value) {
-    onChange(value);
+    value && onChange(value);
   }, [onChange]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn()
@@ -55,17 +53,4 @@ var Pagination = function Pagination(_ref) {
     theme: theme
   }));
 };
-
-Pagination.propTypes = {
-  totalPages: PropTypes.number.isRequired,
-  activePage: PropTypes.number.isRequired,
-  theme: PropTypes.oneOf(['default', 'light']),
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    prev: PropTypes.objectOf(PropTypes.string.isRequired),
-    next: PropTypes.objectOf(PropTypes.string.isRequired),
-    button: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  onChange: PropTypes.func.isRequired
-};
 export default Pagination;

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

@@ -1,62 +1 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
-.mfui-pagination-button {
-  font-size: 15px;
-  line-height: 24px;
-  font-weight: 500;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border-radius: 50%;
-  border: 1px solid transparent;
-  background-color: transparent;
-  cursor: pointer;
-}
-.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-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)}

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

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

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

@@ -1,27 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import PropTypes from 'prop-types';
 import "./PaginationButton.css";
 var cn = cnCreate('mfui-pagination-button');
-
 var PaginationButton = function PaginationButton(_ref) {
   var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$isActive = _ref.isActive,
-      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'default' : _ref$theme,
-      className = _ref.className,
-      children = _ref.children,
-      onClick = _ref.onClick,
-      value = _ref.value,
-      dataAttrs = _ref.dataAttrs;
-
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    className = _ref.className,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    value = _ref.value,
+    dataAttrs = _ref.dataAttrs;
   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,
@@ -32,16 +28,4 @@ var PaginationButton = function PaginationButton(_ref) {
     type: "button"
   }), children);
 };
-
-PaginationButton.propTypes = {
-  disabled: PropTypes.bool,
-  isActive: PropTypes.bool,
-  theme: PropTypes.oneOf(['default', 'light']),
-  className: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  onClick: PropTypes.func
-};
 export default PaginationButton;

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

@@ -1,10 +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;
-}
+.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}

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import './PaginationButtons.less';
+import { PaginationValueType } from '../PaginationButton/PaginationButton';
+import './PaginationButtons.scss';
 interface IPaginationButtonsProps {
     items: Array<string | number>;
     theme?: 'default' | 'light';
@@ -8,7 +9,7 @@ interface IPaginationButtonsProps {
     dataAttrs?: {
         root?: Record<string, string>;
     };
-    onClick: (value?: number | string) => void;
+    onClick: (value?: PaginationValueType) => void;
 }
 declare const PaginationButtons: React.FC<IPaginationButtonsProps>;
 export default PaginationButtons;

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

@@ -2,10 +2,8 @@ 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 PropTypes from 'prop-types';
 import PaginationButton from "../PaginationButton/PaginationButton";
 import "./PaginationButtons.css";
-
 var NothingIcon = function NothingIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -13,22 +11,19 @@ var NothingIcon = function NothingIcon(props) {
     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,
-      theme = _ref.theme,
-      onClick = _ref.onClick,
-      activeButton = _ref.activeButton,
-      hiddenButton = _ref.hiddenButton,
-      dataAttrs = _ref.dataAttrs;
+    theme = _ref.theme,
+    onClick = _ref.onClick,
+    activeButton = _ref.activeButton,
+    hiddenButton = _ref.hiddenButton,
+    dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
   }, items.map(function (pageNumber, index) {
     var isHiddenButton = hiddenButton === pageNumber;
     var dataIndex = typeof pageNumber === 'number' ? pageNumber : undefined;
-
     if (isHiddenButton) {
       return /*#__PURE__*/React.createElement(PaginationButton, {
         disabled: true,
@@ -42,7 +37,6 @@ var PaginationButtons = function PaginationButtons(_ref) {
         }
       }, /*#__PURE__*/React.createElement(NothingIcon, null));
     }
-
     var isActive = pageNumber === activeButton;
     return /*#__PURE__*/React.createElement(PaginationButton, {
       dataAttrs: {
@@ -57,15 +51,4 @@ var PaginationButtons = function PaginationButtons(_ref) {
     }, pageNumber);
   }));
 };
-
-PaginationButtons.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired).isRequired,
-  theme: PropTypes.oneOf(['default', 'light']),
-  activeButton: PropTypes.number.isRequired,
-  hiddenButton: PropTypes.string.isRequired,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  onClick: PropTypes.func.isRequired
-};
 export default PaginationButtons;