@sima-land/ui-nucleons 45.0.0-alpha.4 → 45.0.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "45.0.0-alpha.4",
+  "version": "45.0.0-alpha.5",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -28,7 +28,6 @@
   "dependencies": {
     "@floating-ui/react": "^0.17.0",
     "@krutoo/input-mask": "^0.0.9",
-    "@sima-land/ui-quarks": "^3.6.0",
     "body-scroll-lock": "3.1.5",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
@@ -46,7 +45,7 @@
     "@babel/preset-typescript": "^7.16.7",
     "@playwright/test": "^1.27.1",
     "@rushstack/eslint-patch": "^1.1.1",
-    "@sima-land/linters": "^2.1.2",
+    "@sima-land/linters": "^3.0.0",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-backgrounds": "^6.5.14",
     "@storybook/addon-docs": "^6.5.14",
@@ -56,10 +55,6 @@
     "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "^6.5.14",
     "@storybook/theming": "^6.5.14",
-    "@svgr/core": "^6.2.1",
-    "@svgr/plugin-jsx": "^6.2.1",
-    "@svgr/plugin-svgo": "^6.2.0",
-    "@svgr/webpack": "^6.2.1",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^14.4.3",
     "@types/body-scroll-lock": "^3.1.0",
@@ -87,22 +82,22 @@
     "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^12.3.5",
     "lorem-ipsum": "^2.0.8",
-    "postcss": "^8.4.11",
+    "postcss": "^8.4.24",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.9",
+    "sass": "^1.63.6",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.5.3",
+    "stylelint": "^15.9.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
-    "typescript-plugin-css-modules": "^4.1.1",
     "webpack": "^5.75.0"
   },
   "peerDependencies": {
+    "@sima-land/ui-quarks": "^4.2.0",
     "react": ">=17",
     "react-dom": ">=17"
   }

package/pagination/index.d.ts

@@ -1,20 +1,4 @@
-import React from 'react';
-import { BasePaginationProps } from './base-pagination';
-export interface PaginationProps {
-    /** Общее количество страниц. */
-    total: number;
-    /** Индекс текущей страницы. */
-    current: number;
-    /** Сработает при выборе страницы. */
-    onChange?: (data: {
-        value: number;
-    }) => void;
-    /** Функция возвращающая компонент кнопки. */
-    renderButton?: BasePaginationProps['renderButton'];
-}
-/**
- * Компонент списка кнопок навигации по страницам.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Pagination: React.FC<PaginationProps>;
+export type { PaginationProps, PaginationItemProps, PaginationButton } from './types';
+export { Pagination } from './pagination';
+export { PaginationItem } from './pagination-item';
+export { getPaginationItems, getNumbersAround } from './utils';

package/pagination/index.js

@@ -1,17 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = void 0;
-const react_1 = __importDefault(require("react"));
-const base_pagination_1 = require("./base-pagination");
-/**
- * Компонент списка кнопок навигации по страницам.
- * @param props Свойства.
- * @return Элемент.
- */
-const Pagination = ({ total, current, onChange, renderButton, }) => (react_1.default.createElement(base_pagination_1.BasePagination, { total: total, current: current, renderButton: renderButton, onButtonClick: content => {
-        Number.isFinite(content) && onChange && onChange({ value: content });
-    } }));
-exports.Pagination = Pagination;
+exports.getNumbersAround = exports.getPaginationItems = exports.PaginationItem = exports.Pagination = void 0;
+var pagination_1 = require("./pagination");
+Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return pagination_1.Pagination; } });
+var pagination_item_1 = require("./pagination-item");
+Object.defineProperty(exports, "PaginationItem", { enumerable: true, get: function () { return pagination_item_1.PaginationItem; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getPaginationItems", { enumerable: true, get: function () { return utils_1.getPaginationItems; } });
+Object.defineProperty(exports, "getNumbersAround", { enumerable: true, get: function () { return utils_1.getNumbersAround; } });

package/pagination/pagination-item.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PaginationItemProps } from './types';
+/**
+ * Кнопка страницы.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function PaginationItem({ rootRef, checked, disabled, children, rounds, onClick, className, href, role, ...rest }: PaginationItemProps): JSX.Element;

package/pagination/pagination-item.js

@@ -0,0 +1,31 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bind_1 = __importDefault(require("classnames/bind"));
+const pagination_item_module_scss_1 = __importDefault(require("./pagination-item.module.scss"));
+const cx = bind_1.default.bind(pagination_item_module_scss_1.default);
+/**
+ * Кнопка страницы.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function PaginationItem(_a) {
+    var { rootRef, checked, disabled, children, rounds, onClick, className, href, role = !href ? 'button' : undefined } = _a, rest = __rest(_a, ["rootRef", "checked", "disabled", "children", "rounds", "onClick", "className", "href", "role"]);
+    return ((0, jsx_runtime_1.jsx)("a", Object.assign({}, rest, { ref: rootRef, href: disabled ? undefined : href, role: role, className: cx('root', `rounds-${rounds}`, { checked, disabled }, className), onClick: disabled ? undefined : onClick }, { children: children })));
+}
+exports.PaginationItem = PaginationItem;

package/pagination/pagination-item.module.scss

@@ -0,0 +1,49 @@
+@use '../colors';
+
+.root {
+  --pagination-item-color: #{colors.$basic-gray87};
+  --pagination-item-background: #fff;
+  --pagination-item-border-color: #{colors.$basic-gray12};
+  --pagination-item-font-size: 14px;
+  --pagination-item-line-height: 20px;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  color: var(--pagination-item-color);
+  background: var(--pagination-item-background);
+  box-shadow: inset 0 0 0 1px var(--pagination-item-border-color);
+  font-size: var(--pagination-item-font-size);
+  line-height: var(--pagination-item-line-height);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  overflow: hidden;
+  text-decoration: none;
+  font-style: normal;
+  &.checked {
+    cursor: default;
+    --pagination-item-color: #fff;
+    --pagination-item-background: #{colors.$basic-gray87};
+    --pagination-item-border-color: #{colors.$basic-gray87};
+  }
+  &.disabled {
+    --pagination-item-color: #{colors.$basic-gray24};
+    --pagination-item-background: #fff;
+    --pagination-item-border-color: #{colors.$basic-gray12};
+  }
+  &:not(.checked):not(.disabled):hover {
+    cursor: pointer;
+    --pagination-item-background: #{colors.$basic-gray4};
+  }
+  &.rounds-all {
+    border-radius: 4px;
+  }
+  &.rounds-left {
+    border-radius: 4px 0 0 4px;
+  }
+  &.rounds-right {
+    border-radius: 0 4px 4px 0;
+  }
+}

package/pagination/pagination.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { PaginationProps } from './types';
+/**
+ * Кнопки навигации по страницам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Pagination({ rootRef, current, total, onPageChange, getItems, renderItem, className, ...restProps }: PaginationProps): JSX.Element;

package/pagination/pagination.js

@@ -0,0 +1,78 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const pagination_item_1 = require("./pagination-item");
+const Left_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Left"));
+const Right_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Right"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const pagination_module_scss_1 = __importDefault(require("./pagination.module.scss"));
+const cx = bind_1.default.bind(pagination_module_scss_1.default);
+/**
+ * Кнопки навигации по страницам.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Pagination(_a) {
+    var { rootRef, current = 1, total = 1, onPageChange, getItems = utils_1.getPaginationItems, renderItem = renderPaginationItem, className } = _a, restProps = __rest(_a, ["rootRef", "current", "total", "onPageChange", "getItems", "renderItem", "className"]);
+    const items = (0, react_1.useMemo)(() => getItems({ current, total }), [current, total]);
+    const onChangeRef = (0, react_1.useRef)(onPageChange);
+    onChangeRef.current = onPageChange;
+    const getItemProps = (0, react_1.useCallback)((item, index, userProps = {}) => {
+        // eslint-disable-next-line require-jsdoc
+        const onClick = event => {
+            var _a, _b;
+            if (item.value !== current) {
+                (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, event, item);
+            }
+            (_b = userProps.onClick) === null || _b === void 0 ? void 0 : _b.call(userProps, event);
+        };
+        if (item.type === 'page') {
+            let rounds;
+            if (index === 0 || items[index - 1].type === 'prev') {
+                rounds = 'left';
+            }
+            else if (index === items.length - 1 || items[index + 1].type === 'next') {
+                rounds = 'right';
+            }
+            return Object.assign(Object.assign({ rounds, checked: item.value === current, 'aria-label': `Перейти на страницу ${item.value}`, children: item.value }, userProps), { onClick, className: cx('page', userProps.className, item.value > 999 && 'large') });
+        }
+        if (item.type === 'prev') {
+            return Object.assign(Object.assign({ rounds: 'all', disabled: current <= 1, 'aria-label': 'Предыдущая страница', children: (0, jsx_runtime_1.jsx)(Left_1.default, { fill: 'currentColor' }) }, userProps), { onClick, className: cx('prev', userProps.className) });
+        }
+        if (item.type === 'more') {
+            return Object.assign(Object.assign({ 'aria-label': `Перейти на страницу ${item.value}`, children: '…' }, userProps), { onClick, className: cx('page', userProps.className) });
+        }
+        if (item.type === 'next') {
+            return Object.assign(Object.assign({ rounds: 'all', disabled: current >= total, 'aria-label': 'Следующая страница', children: (0, jsx_runtime_1.jsx)(Right_1.default, { fill: 'currentColor' }) }, userProps), { onClick, className: cx('next', userProps.className) });
+        }
+        return {};
+    }, [current, total, items]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: rootRef, className: cx('root', className), role: 'navigation', "aria-label": '\u041D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F \u043F\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u043C' }, restProps, { children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem(item, userProps => getItemProps(item, index, userProps)) }, index))) })));
+}
+exports.Pagination = Pagination;
+/**
+ * Рендер кнопки по умолчанию.
+ * @param button Данные кнопки.
+ * @param getProps Вернет свойства для PaginationItem.
+ * @return Элемент.
+ */
+function renderPaginationItem(button, getProps) {
+    return (0, jsx_runtime_1.jsx)(pagination_item_1.PaginationItem, Object.assign({}, getProps()));
+}

package/pagination/pagination.module.scss

@@ -1,76 +1,20 @@
-@use '../colors';
+.root {
+  display: flex;
+}
+
+.prev {
+  margin-right: 9px;
+}
 
-.page-select-form {
-  font-size: 12px;
-  .page-input-wrapper {
-    margin-left: 8px;
-    width: 64px;
-    .page-input {
-      text-align: center;
-      font-size: 16px;
-    }
-  }
-  .submit-button {
-    margin-left: 8px;
-  }
-  .cancel-button {
-    margin-left: 32px;
-  }
+.next {
+  margin-left: 8px;
 }
 
-.page-button {
-  display: inline-block;
-  width: 38px;
-  height: 38px;
-  background: #fff;
-  border: 1px solid colors.$basic-gray12;
-  font-size: 14px;
-  outline: 0;
-  box-sizing: border-box;
-  padding: 0;
-  vertical-align: top;
-  user-select: none;
-  &.rounds-all {
-    border-radius: 4px;
-  }
-  &.rounds-left {
-    border-radius: 4px 0 0 4px;
-  }
-  &.rounds-right {
-    border-radius: 0 4px 4px 0;
-    &:not(.rounds-all) {
-      margin-right: 0;
-    }
-  }
-  &:disabled {
-    color: colors.$basic-gray24;
-  }
-  &:not(.rounds-all) {
-    margin-right: -1px;
-  }
-  &:not(.selected):not(:disabled):hover {
-    background: #f5f5f5;
-    cursor: pointer;
-  }
-  &.selected {
-    position: relative;
-    background: colors.$basic-gray87;
-    border-color: colors.$basic-gray87;
-    color: #fff;
-    cursor: default;
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      box-shadow: inherit;
-      border-radius: inherit;
-    }
-  }
+.page {
+  margin-left: -1px;
 }
 
-.icon {
-  vertical-align: middle;
+.large {
+  --pagination-item-font-size: 12px;
+  --pagination-item-line-height: 16px;
 }

package/pagination/types.d.ts

@@ -0,0 +1,28 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';
+export interface PaginationButton {
+    type: 'page' | 'prev' | 'next' | 'more';
+    value: number;
+}
+export interface PaginationItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    rounds?: 'all' | 'right' | 'left';
+    checked?: boolean;
+    disabled?: boolean;
+    rootRef?: Ref<HTMLAnchorElement>;
+}
+export interface GetPaginationItemProps {
+    (userProps?: PaginationItemProps): PaginationItemProps;
+}
+export interface RenderPaginationItem {
+    (item: PaginationButton, getProps: GetPaginationItemProps): ReactNode;
+}
+export interface PaginationProps extends HTMLAttributes<HTMLDivElement> {
+    rootRef?: Ref<HTMLDivElement>;
+    current?: number;
+    total?: number;
+    onPageChange?: (event: MouseEvent<HTMLAnchorElement>, button: PaginationButton) => void;
+    getItems?: (payload: {
+        current: number;
+        total: number;
+    }) => PaginationButton[];
+    renderItem?: RenderPaginationItem;
+}

package/pagination/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/pagination/utils.d.ts

@@ -1,54 +1,26 @@
-interface IPageButton {
-    value: number;
-    content: string | number;
-}
-type State = {
-    current: number;
-    range: number;
-    total: number;
-};
-export declare const cx: (...args: import("classnames").ArgumentArray) => string;
-/**
- * Фабрика объектов с данными о кнопке страницы.
- * @param value Номер целевой страницы.
- * @param content Содержимое кнопки.
- * @return Список кнопок.
- */
-export declare const PageButton: (value: number, content?: string | number) => IPageButton;
+import type { PaginationButton } from './types';
 /**
- * Возвращает список кнопок навигации.
+ * Формирует список кнопок навигации по страницам по дизайн-гайдам.
  * @param props Свойства.
- * @param props.current Номер текущей страницы.
- * @param props.total Номер последней страницы.
- * @param props.buttonKeys Значения, которые будут использованы для не числовых кнопок.
- * @param props.buttonKeys.more Значение для отображения кнопки группы пропущенных чисел.
- * @return Список кнопок.
+ * @param config Конфиг.
+ * @return Список.
  */
-export declare const getPageButtons: ({ current, total, buttonKeys, }: {
-    current: number;
+export declare function getPaginationItems({ total, current, }: {
     total: number;
-    buttonKeys?: {
-        more: string | number;
-    } | undefined;
-}) => IPageButton[];
-/**
- * Возвращает корректный диапазон вокруг текущего значения в соответствии с дизайнерской задумкой.
- * По возможности показывает начало/конец списка при смещении.
- * При current = 4, range = 5 вместо [2,3,4,5,6] вернет [1,2,3,4,5].
- * @param props Свойства.
- * @param props.current Число вокруг которого нужно сформировать список.
- * @param props.range Размер списка.
- * @param props.total Максимальное значение.
- * @return Список номеров.
- */
-export declare const getCorrectRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
+    current: number;
+}, { arrows, }?: {
+    arrows?: boolean | 'active';
+}): PaginationButton[];
 /**
- * Возвращает список чисел вокруг заданного.
+ * Возвращает список натуральных чисел вокруг заданного.
  * @param props Свойства.
  * @param props.current Число вокруг которого нужно сформировать список.
  * @param props.range Размер списка.
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-export declare const getRangeNumbers: ({ current, range: rangeSize, total }: State) => number[];
-export {};
+export declare function getNumbersAround({ current, range: rangeSize, total, }: {
+    current: number;
+    range: number;
+    total: number;
+}): number[];

package/pagination/utils.js

@@ -1,106 +1,57 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRangeNumbers = exports.getCorrectRangeNumbers = exports.getPageButtons = exports.PageButton = exports.cx = void 0;
-const bind_1 = __importDefault(require("classnames/bind"));
-const pagination_module_scss_1 = __importDefault(require("./pagination.module.scss"));
-const lodash_1 = require("lodash");
-exports.cx = bind_1.default.bind(pagination_module_scss_1.default);
+exports.getNumbersAround = exports.getPaginationItems = void 0;
 /**
- * Фабрика объектов с данными о кнопке страницы.
- * @param value Номер целевой страницы.
- * @param content Содержимое кнопки.
- * @return Список кнопок.
- */
-const PageButton = (value, content = value) => ({
-    value,
-    content,
-});
-exports.PageButton = PageButton;
-/**
- * Возвращает список кнопок навигации.
+ * Формирует список кнопок навигации по страницам по дизайн-гайдам.
  * @param props Свойства.
- * @param props.current Номер текущей страницы.
- * @param props.total Номер последней страницы.
- * @param props.buttonKeys Значения, которые будут использованы для не числовых кнопок.
- * @param props.buttonKeys.more Значение для отображения кнопки группы пропущенных чисел.
- * @return Список кнопок.
+ * @param config Конфиг.
+ * @return Список.
  */
-const getPageButtons = ({ current, total, buttonKeys = { more: '...' }, }) => {
-    const list = (0, exports.getCorrectRangeNumbers)({ current, range: 5, total }).map(v => (0, exports.PageButton)(v));
-    if (list.length > 0 && total > 5) {
-        // если находимся в середине множества (многоточия с обоих сторон) - диапазон уменьшается до 4
-        if (list[0].value > 1 && list[list.length - 1].value < total) {
-            list.shift();
-        }
-        if (list[0].value > 1) {
-            // формируем начало диапазона
-            if (list[0].value === 2) {
-                list.unshift((0, exports.PageButton)(1));
-            }
-            else {
-                list.unshift((0, exports.PageButton)(1), 
-                // не выводим многоточие когда вместо него можно поставить одно число
-                list[0].value === 3 ? (0, exports.PageButton)(2) : (0, exports.PageButton)(list[0].value - 1, buttonKeys.more));
-            }
+function getPaginationItems({ total, current, }, { arrows = true, } = {}) {
+    const items = getNumbersAround({
+        total,
+        current,
+        range: 7,
+    }).map(value => ({ type: 'page', value }));
+    const size = items.length;
+    if (total > 7) {
+        // если первый элемент не является первой страницей
+        if (items[0].value !== 1) {
+            items.splice(0, 2, { type: 'page', value: 1 }, { type: 'more', value: items[2].value - 1 });
         }
-        if (list[list.length - 1].value < total) {
-            // формируем конец диапазона
-            if (list[list.length - 1].value === total - 1) {
-                list.push((0, exports.PageButton)(total));
-            }
-            else {
-                list.push(
-                // не выводим многоточие когда вместо него можно поставить одно число
-                total - list[list.length - 1].value > 2
-                    ? (0, exports.PageButton)(list[list.length - 1].value + 1, buttonKeys.more)
-                    : (0, exports.PageButton)(total - 1), (0, exports.PageButton)(total));
-            }
+        // если последний элемент не является последней страницей
+        if (items[size - 1].value !== total) {
+            items.splice(-2, 2, { type: 'more', value: items[size - 2].value }, { type: 'page', value: total });
         }
     }
-    return list;
-};
-exports.getPageButtons = getPageButtons;
-/**
- * Возвращает корректный диапазон вокруг текущего значения в соответствии с дизайнерской задумкой.
- * По возможности показывает начало/конец списка при смещении.
- * При current = 4, range = 5 вместо [2,3,4,5,6] вернет [1,2,3,4,5].
- * @param props Свойства.
- * @param props.current Число вокруг которого нужно сформировать список.
- * @param props.range Размер списка.
- * @param props.total Максимальное значение.
- * @return Список номеров.
- */
-const getCorrectRangeNumbers = ({ current, range: rangeSize, total }) => {
-    let result = [
-        ...(0, exports.getRangeNumbers)({
-            current,
-            range: rangeSize,
-            total,
-        }),
-    ];
-    if (total > rangeSize) {
-        if (current < rangeSize) {
-            result = (0, lodash_1.range)(1, rangeSize + 1);
+    switch (arrows) {
+        case true: {
+            items.unshift({ type: 'prev', value: Math.max(1, current - 1) });
+            items.push({ type: 'next', value: Math.min(total, current + 1) });
+            break;
         }
-        else if (current > total - rangeSize + 1) {
-            result = (0, lodash_1.range)(total - rangeSize + 1, total + 1);
+        case 'active': {
+            if (current !== 1) {
+                items.unshift({ type: 'prev', value: Math.max(1, current - 1) });
+            }
+            if (current !== total) {
+                items.push({ type: 'next', value: Math.min(total, current + 1) });
+            }
+            break;
         }
     }
-    return result;
-};
-exports.getCorrectRangeNumbers = getCorrectRangeNumbers;
+    return items;
+}
+exports.getPaginationItems = getPaginationItems;
 /**
- * Возвращает список чисел вокруг заданного.
+ * Возвращает список натуральных чисел вокруг заданного.
  * @param props Свойства.
  * @param props.current Число вокруг которого нужно сформировать список.
  * @param props.range Размер списка.
  * @param props.total Максимальное значение.
  * @return Список номеров.
  */
-const getRangeNumbers = ({ current, range: rangeSize, total }) => {
+function getNumbersAround({ current, range: rangeSize, total, }) {
     const pageNumbers = [];
     const readyRange = Math.min(rangeSize, total) || 0;
     const halfRange = Math.floor(readyRange / 2);
@@ -116,5 +67,5 @@ const getRangeNumbers = ({ current, range: rangeSize, total }) => {
         pageNumbers.push(i + 1);
     }
     return pageNumbers;
-};
-exports.getRangeNumbers = getRangeNumbers;
+}
+exports.getNumbersAround = getNumbersAround;