@alfalab/core-components 23.4.1 → 23.6.0-beta.2

package/notification/index.css

@@ -1,4 +1,4 @@
-/* hash: 15ov9 */
+/* hash: 9p230 */
 :root {
 
     /* Hard */
@@ -15,7 +15,7 @@
 :root {
     --notification-desktop-content-width: 278px;
 }
-.notification__notificationComponent_1g1yl {
+.notification__notificationComponent_8xa3g {
     visibility: hidden;
     position: fixed;
     right: var(--gap-s);
@@ -28,22 +28,22 @@
     transition: transform 0.4s ease-out
 }
 @media screen and (min-width: 600px) {
-.notification__notificationComponent_1g1yl {
+.notification__notificationComponent_8xa3g {
         right: var(--gap-4xl);
         width: auto;
         transform: translate(var(--notification-desktop-content-width), 0)
 }
     }
-.notification__notificationComponent_1g1yl.notification__isVisible_1g1yl {
+.notification__notificationComponent_8xa3g.notification__isVisible_8xa3g {
         visibility: visible;
         transform: translate(0, 0);
     }
-.notification__notificationComponent_1g1yl.notification__isClosing_1g1yl {
+.notification__notificationComponent_8xa3g.notification__isClosing_8xa3g {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0)
     }
 @media screen and (min-width: 600px) {
-.notification__notificationComponent_1g1yl.notification__isClosing_1g1yl {
+.notification__notificationComponent_8xa3g.notification__isClosing_8xa3g {
             transform: translate(
                 calc(var(--notification-desktop-content-width) + var(--gap-4xl)),
                 0
@@ -51,7 +51,7 @@
     }
         }
 @media screen and (min-width: 600px) {
-.notification__toastContent_1g1yl {
+.notification__toastContent_8xa3g {
         width: var(--notification-desktop-content-width)
 }
     }

package/notification/modern/Component.js

@@ -8,7 +8,7 @@ import { ToastPlate } from '../../toast-plate/modern';
 import { stackingOrder, Stack } from '../../stack/modern';
 import { useClickOutside } from './utils/index.js';
 
-var styles = {"notificationComponent":"notification__notificationComponent_1g1yl","isVisible":"notification__isVisible_1g1yl","isClosing":"notification__isClosing_1g1yl","toastContent":"notification__toastContent_1g1yl"};
+var styles = {"notificationComponent":"notification__notificationComponent_8xa3g","isVisible":"notification__isVisible_8xa3g","isClosing":"notification__isClosing_8xa3g","toastContent":"notification__toastContent_8xa3g"};
 require('./index.css');
 
 const notificationClassNameSelector = `.${styles.notificationComponent}`;

package/notification/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 15ov9 */
+/* hash: 9p230 */
 :root {
 
     /* Hard */
@@ -15,7 +15,7 @@
 :root {
     --notification-desktop-content-width: 278px;
 }
-.notification__notificationComponent_1g1yl {
+.notification__notificationComponent_8xa3g {
     visibility: hidden;
     position: fixed;
     right: var(--gap-s);
@@ -28,22 +28,22 @@
     transition: transform 0.4s ease-out
 }
 @media screen and (min-width: 600px) {
-.notification__notificationComponent_1g1yl {
+.notification__notificationComponent_8xa3g {
         right: var(--gap-4xl);
         width: auto;
         transform: translate(var(--notification-desktop-content-width), 0)
 }
     }
-.notification__notificationComponent_1g1yl.notification__isVisible_1g1yl {
+.notification__notificationComponent_8xa3g.notification__isVisible_8xa3g {
         visibility: visible;
         transform: translate(0, 0);
     }
-.notification__notificationComponent_1g1yl.notification__isClosing_1g1yl {
+.notification__notificationComponent_8xa3g.notification__isClosing_8xa3g {
         transition: transform 0.1s ease-out;
         transform: translate(100vw, 0)
     }
 @media screen and (min-width: 600px) {
-.notification__notificationComponent_1g1yl.notification__isClosing_1g1yl {
+.notification__notificationComponent_8xa3g.notification__isClosing_8xa3g {
             transform: translate(
                 calc(var(--notification-desktop-content-width) + var(--gap-4xl)),
                 0
@@ -51,7 +51,7 @@
     }
         }
 @media screen and (min-width: 600px) {
-.notification__toastContent_1g1yl {
+.notification__toastContent_8xa3g {
         width: var(--notification-desktop-content-width)
 }
     }

package/notification-manager/component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_notification_component = require('./component-1aab53ca.js');
+var components_notification_component = require('./component-83acfea6.js');
 var React = require('react');
 var cn = require('classnames');
 var reactTransitionGroup = require('react-transition-group');
@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"notification-manager__component_12z31","notification":"notification-manager__notification_12z31","enter":"notification-manager__enter_12z31","enterActive":"notification-manager__enterActive_12z31","exit":"notification-manager__exit_12z31","exitActive":"notification-manager__exitActive_12z31"};
+var styles = {"component":"notification-manager__component_qoydp","notification":"notification-manager__notification_qoydp","enter":"notification-manager__enter_qoydp","enterActive":"notification-manager__enterActive_qoydp","exit":"notification-manager__exit_qoydp","exitActive":"notification-manager__exitActive_qoydp"};
 require('./index.css');
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/notification-manager/components/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_notification_component = require('../component-1aab53ca.js');
+var components_notification_component = require('../component-83acfea6.js');
 require('react');
 require('classnames');
 

package/notification-manager/components/notification/component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_notification_component = require('../../component-1aab53ca.js');
+var components_notification_component = require('../../component-83acfea6.js');
 require('react');
 require('classnames');
 

package/notification-manager/components/notification/index.d.ts

@@ -1 +1 @@
-export * from "../../component-1aab53ca";
+export * from "../../component-83acfea6";

package/notification-manager/components/notification/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_notification_component = require('../../component-1aab53ca.js');
+var components_notification_component = require('../../component-83acfea6.js');
 require('react');
 require('classnames');
 

package/notification-manager/esm/component.js

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
-import { _ as __rest, a as __assign, N as Notification } from './component-25b734a3.js';
+import { _ as __rest, a as __assign, N as Notification } from './component-6280daf0.js';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { Portal } from '../../portal/esm';
 import { stackingOrder, Stack } from '../../stack/esm';
 
-var styles = {"component":"notification-manager__component_12z31","notification":"notification-manager__notification_12z31","enter":"notification-manager__enter_12z31","enterActive":"notification-manager__enterActive_12z31","exit":"notification-manager__exit_12z31","exitActive":"notification-manager__exitActive_12z31"};
+var styles = {"component":"notification-manager__component_qoydp","notification":"notification-manager__notification_qoydp","enter":"notification-manager__enter_qoydp","enterActive":"notification-manager__enterActive_qoydp","exit":"notification-manager__exit_qoydp","exitActive":"notification-manager__exitActive_qoydp"};
 require('./index.css');
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/notification-manager/esm/components/index.js

@@ -1,3 +1,3 @@
 import 'react';
 import 'classnames';
-export { N as Notification } from '../component-25b734a3.js';
+export { N as Notification } from '../component-6280daf0.js';

package/notification-manager/esm/components/notification/component.js

@@ -1,3 +1,3 @@
 import 'react';
 import 'classnames';
-export { N as Notification } from '../../component-25b734a3.js';
+export { N as Notification } from '../../component-6280daf0.js';

package/notification-manager/esm/components/notification/index.d.ts

@@ -1 +1 @@
-export * from "../../component-25b734a3";
+export * from "../../component-6280daf0";

package/notification-manager/esm/components/notification/index.js

@@ -1,3 +1,3 @@
 import 'react';
 import 'classnames';
-export { N as Notification } from '../../component-25b734a3.js';
+export { N as Notification } from '../../component-6280daf0.js';

package/notification-manager/esm/index.css

@@ -1,11 +1,11 @@
-/* hash: 2t7za */
+/* hash: 13zd7 */
 :root {
     --gap-s: 12px;
     --gap-xl: 24px;
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_12z31 {
+.notification-manager__component_qoydp {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,48 +13,48 @@
     flex-direction: column;
 }
 
-.notification-manager__component_12z31 .notification-manager__notification_12z31 {
+.notification-manager__component_qoydp .notification-manager__notification_qoydp {
     position: static;
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform;
 }
 
-.notification-manager__enter_12z31 {
+.notification-manager__enter_qoydp {
     visibility: hidden;
     transform: translate(0, -500px);
     transition: transform 0.4s ease-out;
 }
 
-.notification-manager__enterActive_12z31 {
+.notification-manager__enterActive_qoydp {
     visibility: visible;
     transform: translate(0);
 }
 
-.notification-manager__exit_12z31 {
+.notification-manager__exit_qoydp {
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
-.notification-manager__exitActive_12z31 {
+.notification-manager__exitActive_qoydp {
     visibility: hidden;
     opacity: 0;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_12z31 {
+    .notification-manager__component_qoydp {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_12z31 .notification-manager__notification_12z31 {
+    .notification-manager__component_qoydp .notification-manager__notification_qoydp {
         width: auto;
     }
 
-    .notification-manager__enter_12z31 {
+    .notification-manager__enter_qoydp {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_12z31 {
+    .notification-manager__enterActive_qoydp {
         transform: translate(0);
     }
 }

package/notification-manager/esm/index.js

@@ -1,6 +1,6 @@
 import 'react';
 import 'classnames';
-import './component-25b734a3.js';
+import './component-6280daf0.js';
 import 'react-transition-group';
 import '../../portal/esm';
 import '../../stack/esm';

package/notification-manager/index.css

@@ -1,11 +1,11 @@
-/* hash: 2t7za */
+/* hash: 13zd7 */
 :root {
     --gap-s: 12px;
     --gap-xl: 24px;
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_12z31 {
+.notification-manager__component_qoydp {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,48 +13,48 @@
     flex-direction: column;
 }
 
-.notification-manager__component_12z31 .notification-manager__notification_12z31 {
+.notification-manager__component_qoydp .notification-manager__notification_qoydp {
     position: static;
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform;
 }
 
-.notification-manager__enter_12z31 {
+.notification-manager__enter_qoydp {
     visibility: hidden;
     transform: translate(0, -500px);
     transition: transform 0.4s ease-out;
 }
 
-.notification-manager__enterActive_12z31 {
+.notification-manager__enterActive_qoydp {
     visibility: visible;
     transform: translate(0);
 }
 
-.notification-manager__exit_12z31 {
+.notification-manager__exit_qoydp {
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
-.notification-manager__exitActive_12z31 {
+.notification-manager__exitActive_qoydp {
     visibility: hidden;
     opacity: 0;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_12z31 {
+    .notification-manager__component_qoydp {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_12z31 .notification-manager__notification_12z31 {
+    .notification-manager__component_qoydp .notification-manager__notification_qoydp {
         width: auto;
     }
 
-    .notification-manager__enter_12z31 {
+    .notification-manager__enter_qoydp {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_12z31 {
+    .notification-manager__enterActive_qoydp {
         transform: translate(0);
     }
 }

package/notification-manager/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./component-1aab53ca.js');
+require('./component-83acfea6.js');
 require('react');
 require('classnames');
 require('react-transition-group');

package/notification-manager/modern/component.js

@@ -5,7 +5,7 @@ import { Portal } from '../../portal/modern';
 import { stackingOrder, Stack } from '../../stack/modern';
 import { Notification } from './components/notification/component.js';
 
-var styles = {"component":"notification-manager__component_12z31","notification":"notification-manager__notification_12z31","enter":"notification-manager__enter_12z31","enterActive":"notification-manager__enterActive_12z31","exit":"notification-manager__exit_12z31","exitActive":"notification-manager__exitActive_12z31"};
+var styles = {"component":"notification-manager__component_qoydp","notification":"notification-manager__notification_qoydp","enter":"notification-manager__enter_qoydp","enterActive":"notification-manager__enterActive_qoydp","exit":"notification-manager__exit_qoydp","exitActive":"notification-manager__exitActive_qoydp"};
 require('./index.css');
 
 const CSS_TRANSITION_CLASS_NAMES = {

package/notification-manager/modern/index.css

@@ -1,11 +1,11 @@
-/* hash: 2t7za */
+/* hash: 13zd7 */
 :root {
     --gap-s: 12px;
     --gap-xl: 24px;
     --gap-4xl: 48px;
 }
 
-.notification-manager__component_12z31 {
+.notification-manager__component_qoydp {
     position: fixed;
     top: 0;
     right: var(--gap-s);
@@ -13,48 +13,48 @@
     flex-direction: column;
 }
 
-.notification-manager__component_12z31 .notification-manager__notification_12z31 {
+.notification-manager__component_qoydp .notification-manager__notification_qoydp {
     position: static;
     width: calc(100vw - var(--gap-xl));
     margin-top: var(--gap-s);
     will-change: transform;
 }
 
-.notification-manager__enter_12z31 {
+.notification-manager__enter_qoydp {
     visibility: hidden;
     transform: translate(0, -500px);
     transition: transform 0.4s ease-out;
 }
 
-.notification-manager__enterActive_12z31 {
+.notification-manager__enterActive_qoydp {
     visibility: visible;
     transform: translate(0);
 }
 
-.notification-manager__exit_12z31 {
+.notification-manager__exit_qoydp {
     opacity: 0;
     transition: opacity 0.15s ease-in-out;
 }
 
-.notification-manager__exitActive_12z31 {
+.notification-manager__exitActive_qoydp {
     visibility: hidden;
     opacity: 0;
 }
 
 @media (min-width: 600px) {
-    .notification-manager__component_12z31 {
+    .notification-manager__component_qoydp {
         right: var(--gap-4xl);
     }
 
-    .notification-manager__component_12z31 .notification-manager__notification_12z31 {
+    .notification-manager__component_qoydp .notification-manager__notification_qoydp {
         width: auto;
     }
 
-    .notification-manager__enter_12z31 {
+    .notification-manager__enter_qoydp {
         transform: translate(100%, 0);
     }
 
-    .notification-manager__enterActive_12z31 {
+    .notification-manager__enterActive_qoydp {
         transform: translate(0);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfalab/core-components",
-  "version": "23.4.1",
+  "version": "23.6.0-beta.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -163,7 +163,6 @@
     "mini-css-extract-plugin": "^0.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "playwright": "^1.16.3",
-    "playwright-cli": "^0.171.0",
     "postcss-cli": "^7.1.0",
     "postcss-custom-media": "^7.0.8",
     "postcss-custom-properties": "^10.0.0",
@@ -175,7 +174,9 @@
     "prettier": "^1.19.1",
     "purgecss": "^2.2.1",
     "raw-loader": "^4.0.1",
+    "react": "^16.9.0 || ^17.0.1",
     "react-docgen-typescript-loader": "^3.6.0",
+    "react-dom": "^16.9.0 || ^17.0.1",
     "react-github-btn": "^1.2.0",
     "react-scripts": "^3.3.1",
     "replace-in-file": "^5.0.2",

package/pagination/Component.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+type PaginationProps = {
+    /**
+     * Текущая страница (с нуля)
+     */
+    currentPageIndex: number;
+    /**
+     * Количество страниц
+     */
+    pagesCount: number;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Скрывает стрелки, если выбрана первая или последняя страница
+     */
+    hideArrows?: boolean;
+    /**
+     * Количество видимых страниц по бокам
+     */
+    sidePadding?: number;
+    /**
+     * Количество видимых страниц вокруг выбранной
+     */
+    activePadding?: number;
+    /**
+     * Режим пагинации
+     */
+    view?: 'default' | 'per-page';
+    /**
+     * Обработчик переключения страницы
+     */
+    onPageChange?: (pageIndex: number) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Pagination: FC<PaginationProps>;
+export { PaginationProps, Pagination };

package/pagination/Component.js

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var ChevronBackMIcon = require('@alfalab/icons-glyph/ChevronBackMIcon');
+var ChevronForwardMIcon = require('@alfalab/icons-glyph/ChevronForwardMIcon');
+var components_tag_index = require('./components/tag/index.js');
+require('../tag');
+var components_defaultView_index = require('./components/default-view/index.js');
+var components_perPageView_index = require('./components/per-page-view/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"component":"pagination__component_jogeo","default":"pagination__default_jogeo"};
+require('./index.css');
+
+var Pagination = function (_a) {
+    var _b = _a.currentPageIndex, currentPageIndex = _b === void 0 ? 0 : _b, pagesCount = _a.pagesCount, className = _a.className, _c = _a.sidePadding, sidePadding = _c === void 0 ? 1 : _c, _d = _a.activePadding, activePadding = _d === void 0 ? 2 : _d, _e = _a.hideArrows, hideArrows = _e === void 0 ? true : _e, _f = _a.view, view = _f === void 0 ? 'default' : _f, _g = _a.onPageChange, onPageChange = _g === void 0 ? function () { return null; } : _g, dataTestId = _a.dataTestId;
+    var handlePageClick = function (pageIndex) {
+        onPageChange(pageIndex);
+    };
+    var handleNextPageClick = function () {
+        handlePageClick(Math.min(pagesCount - 1, currentPageIndex + 1));
+    };
+    var handlePrevPageClick = function () {
+        handlePageClick(Math.max(0, currentPageIndex - 1));
+    };
+    var shouldRenderPrevArrow = view === 'per-page' || !hideArrows || currentPageIndex > 0;
+    var shouldRenderNextArrow = view === 'per-page' || !hideArrows || currentPageIndex < pagesCount - 1;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className, styles[view]), "data-test-id": dataTestId },
+        shouldRenderPrevArrow && (React__default['default'].createElement(components_tag_index.Tag, { className: styles.arrow, disabled: currentPageIndex <= 0, onClick: handlePrevPageClick, rightAddons: React__default['default'].createElement(ChevronBackMIcon.ChevronBackMIcon, { width: 16, height: 16 }) })),
+        view === 'default' && (React__default['default'].createElement(components_defaultView_index.DefaultView, { activePadding: activePadding, sidePadding: sidePadding, currentPageIndex: currentPageIndex, pagesCount: pagesCount, onPageChange: handlePageClick })),
+        view === 'per-page' && (React__default['default'].createElement(components_perPageView_index.PerPageView, { currentPageIndex: currentPageIndex, pagesCount: pagesCount })),
+        shouldRenderNextArrow && (React__default['default'].createElement(components_tag_index.Tag, { className: styles.arrow, disabled: currentPageIndex >= pagesCount - 1, onClick: handleNextPageClick, rightAddons: React__default['default'].createElement(ChevronForwardMIcon.ChevronForwardMIcon, { width: 16, height: 16 }) }))));
+};
+
+exports.Pagination = Pagination;

package/pagination/components/default-view/index.css

@@ -0,0 +1,22 @@
+/* hash: 1egyc */
+:root {
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.pagination__dots_1pknm {
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-text-secondary);
+    cursor: default;
+}

package/pagination/components/default-view/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { PaginationProps } from "../../Component";
+type DefaultViewProps = Pick<PaginationProps, 'sidePadding' | 'activePadding' | 'pagesCount' | 'currentPageIndex' | 'onPageChange'>;
+declare const DefaultView: FC<DefaultViewProps>;
+export { DefaultView };

package/pagination/components/default-view/index.js

@@ -0,0 +1,54 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('classnames');
+var components_tag_index = require('../tag/index.js');
+require('../../../tag');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles = {"dots":"pagination__dots_1pknm"};
+require('./index.css');
+
+var DefaultView = function (_a) {
+    var _b = _a.sidePadding, sidePadding = _b === void 0 ? 2 : _b, _c = _a.activePadding, activePadding = _c === void 0 ? 1 : _c, pagesCount = _a.pagesCount, currentPageIndex = _a.currentPageIndex, _d = _a.onPageChange, onPageChange = _d === void 0 ? function () { return null; } : _d;
+    var maxHalfCount = sidePadding + activePadding + 1;
+    var maxElementsCount = maxHalfCount * 2 + 1;
+    var itemsFit = pagesCount <= maxElementsCount;
+    var elementsCount = itemsFit ? pagesCount : maxElementsCount;
+    var getPageIndex = React.useCallback(function (elementIndex) {
+        var lastIndex = pagesCount - 1;
+        var reverseIndex = lastIndex - currentPageIndex;
+        var lastElementIndex = elementsCount - 1;
+        var reverseElementIndex = lastElementIndex - elementIndex;
+        var hasCollapsedItems = function (index) { return !itemsFit && index >= maxHalfCount; };
+        if (elementIndex < sidePadding) {
+            return elementIndex;
+        }
+        if (elementIndex === sidePadding && hasCollapsedItems(currentPageIndex)) {
+            return null;
+        }
+        if (reverseElementIndex === sidePadding && hasCollapsedItems(reverseIndex)) {
+            return null;
+        }
+        if (reverseElementIndex < sidePadding) {
+            return lastIndex - reverseElementIndex;
+        }
+        var computedIndex = currentPageIndex - maxHalfCount + elementIndex;
+        return Math.min(lastIndex - reverseElementIndex, Math.max(elementIndex, computedIndex));
+    }, [currentPageIndex, elementsCount, itemsFit, maxHalfCount, pagesCount, sidePadding]);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, Array(elementsCount)
+        .fill('')
+        .map(function (_, i) {
+        var pageIndex = getPageIndex(i);
+        if (pageIndex === null) {
+            return (React__default['default'].createElement("div", { key: i.toString(), className: styles.dots }, "..."));
+        }
+        var active = currentPageIndex === pageIndex;
+        return (React__default['default'].createElement(components_tag_index.Tag, { key: i.toString(), checked: active, disabled: active, onClick: function () { return onPageChange(pageIndex); } }, pageIndex + 1));
+    })));
+};
+
+exports.DefaultView = DefaultView;