@itcase/ui 1.9.55 → 1.9.57

package/dist/components/ModalSheetBottom/ModalSheetBottom.appearance.js

@@ -0,0 +1,5 @@
+import { modalSheetBottomAppearanceSize } from './appearance/modalSheetBottomSize';
+const modalSheetBottomAppearance = {
+    ...modalSheetBottomAppearanceSize,
+};
+export { modalSheetBottomAppearance };

package/dist/components/ModalSheetBottom/ModalSheetBottom.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ModalSheetBottom/ModalSheetBottom.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useImperativeHandle, useState } from 'react';
+import clsx from 'clsx';
+import { Sheet } from 'react-modal-sheet';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Title } from 'src/components/Title';
+import { modalSheetBottomAppearance } from './ModalSheetBottom.appearance';
+const modalSheetBottomConfig = {
+    appearance: modalSheetBottomAppearance,
+    setAppearance: (appearanceConfig) => {
+        modalSheetBottomConfig.appearance = appearanceConfig;
+    },
+};
+const ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
+    const { appearance, dataTestId, dataTour, initialIsOpen, title, closeButton, isDisabled, onCloseModalSheetBottom, onOpenModalSheetBottom, children, } = props;
+    const [isOpen, setIsOpen] = useState(initialIsOpen);
+    const openModalSheetBottom = useCallback(() => {
+        setIsOpen(true);
+        onOpenModalSheetBottom && onOpenModalSheetBottom();
+    }, [onOpenModalSheetBottom]);
+    const closeModalSheetBottom = useCallback(() => {
+        setIsOpen(false);
+        onCloseModalSheetBottom && onCloseModalSheetBottom();
+    }, [onCloseModalSheetBottom]);
+    useImperativeHandle(ref, () => ({
+        openModal: openModalSheetBottom,
+        closeModal: closeModalSheetBottom,
+        isOpen: isOpen,
+    }), [isOpen, openModalSheetBottom, closeModalSheetBottom]);
+    const appearanceConfig = useAppearanceConfig(appearance, modalSheetBottomConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, zeroPadding, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (_jsxs(Sheet, { ...props, className: "modal-sheet-bottom", "data-testid": dataTestId, "data-tour": dataTour, isOpen: isOpen, onClose: closeModalSheetBottom, children: [_jsxs(Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [_jsx(Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (_jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), _jsx(Sheet.Content, { className: "modal-sheet-bottom__content", children: _jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (_jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), _jsx(Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
+});
+export { ModalSheetBottom };

package/dist/components/ModalSheetBottom/appearance/modalSheetBottomSize.js

@@ -0,0 +1,9 @@
+const modalSheetBottomAppearanceSize = {
+    sizeL: {
+        titleTextSize: 'h4',
+    },
+    sizeM: {
+        titleTextSize: 'h5',
+    },
+};
+export { modalSheetBottomAppearanceSize };

package/dist/components/ModalSheetBottom/index.js

@@ -0,0 +1,2 @@
+export { ModalSheetBottom } from './ModalSheetBottom';
+export { modalSheetBottomAppearance } from './ModalSheetBottom.appearance';

package/dist/components/Notification/Notification.appearance.js

@@ -0,0 +1,19 @@
+import { notificationAppearanceDefault } from './appearance/notificationDefault';
+import { notificationAppearanceError } from './appearance/notificationError';
+import { notificationAppearanceInfo } from './appearance/notificationInfo';
+import { notificationAppearanceShape } from './appearance/notificationShape';
+import { notificationAppearanceSize } from './appearance/notificationSize';
+import { notificationAppearanceStyle } from './appearance/notificationStyle';
+import { notificationAppearanceSuccess } from './appearance/notificationSuccess';
+import { notificationAppearanceWarning } from './appearance/notificationWarning';
+const notificationAppearance = {
+    ...notificationAppearanceDefault,
+    ...notificationAppearanceShape,
+    ...notificationAppearanceSize,
+    ...notificationAppearanceStyle,
+    ...notificationAppearanceError,
+    ...notificationAppearanceInfo,
+    ...notificationAppearanceSuccess,
+    ...notificationAppearanceWarning,
+};
+export { notificationAppearance };

package/dist/components/Notification/Notification.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Notification/Notification.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Button } from 'src/components/Button';
+import { Icon } from 'src/components/Icon';
+import { Loader } from 'src/components/Loader';
+import { Text } from 'src/components/Text';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { mergeAppearanceKeys } from 'src/utils';
+import { notificationAppearance } from './Notification.appearance';
+const notificationConfig = {
+    appearance: notificationAppearance,
+    setAppearance: (appearanceConfig) => {
+        notificationConfig.appearance = appearanceConfig;
+    },
+};
+function Notification(props) {
+    const { id, appearance, className, dataTestId, dataTour, type = 'float', title, text, before, after, isSkeleton, isLoading, onClickButton, onClickClose, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, notificationConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, buttonAppearance, buttonLabel, elevationClass, loaderAppearance, loaderAppearanceSize, loaderFill, loaderItemFill, loaderSize, loaderType = 'dot', shapeClass, shapeStrengthClass, sizeClass, widthClass, closeIcon, closeIconAppearance, closeIconAppearanceSize, closeIconSrc, } = propsGenerator;
+    const { styles: notificationStyles } = useStyles(props);
+    return (_jsxs("div", { className: clsx('notification__item', `notification__item_${type}`, widthClass && `width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, sizeClass && `notification__item_size_${sizeClass}`, type && `notification__item_type_${type}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && `notification__item_skeleton`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, _jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (_jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), text && (_jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: text })), isLoading && (_jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), onClickClose && (_jsx(Icon, { appearance: mergeAppearanceKeys(closeIconAppearance, closeIconAppearanceSize), className: clsx('notification__item-close', 'cursor_type_pointer'), imageSrc: closeIconSrc, SvgImage: closeIcon, onClick: () => onClickClose && onClickClose(id) })), onClickButton && buttonLabel && (_jsx(Button, { appearance: buttonAppearance, className: "notification__item-button", width: "fill", label: buttonLabel, onClick: onClickButton }))] }), after] }));
+}
+export { Notification, notificationConfig };

package/dist/components/Notification/NotificationWrapper.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useNotifications, useNotificationsAPI } from 'src/context';
+import { Notification } from './';
+function NotificationWrapper(props) {
+    const notifications = useNotifications();
+    const { hideNotifications } = useNotificationsAPI();
+    const { className, dataTestId, dataTour } = props;
+    return (_jsx("div", { className: clsx('notification', className), "data-testid": dataTestId, "data-tour": dataTour, children: _jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (_jsx(Notification, { id: notification.id, appearance: notification.appearance, type: notification.type, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, isLoading: notification.isLoading, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, notification.id))) }) }));
+}
+export { NotificationWrapper };

package/dist/components/Notification/appearance/notificationDefault.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const notificationAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimary',
+        titleTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+        buttonAppearance: 'accentPrimary sizeXXL solid rounded',
+        loaderAppearance: 'accentTertiary sizeS ghost rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary ghost circular',
+    },
+};
+export { notificationAppearanceDefault };

package/dist/components/Notification/appearance/notificationError.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const notificationAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimary',
+        titleTextColor: 'errorTextPrimary',
+        descTextColor: 'errorTextPrimary',
+        borderColor: 'errorBorderPrimary',
+        textColor: 'errorTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
+        loaderAppearance: 'errorPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
+    },
+};
+export { notificationAppearanceError };

package/dist/components/Notification/appearance/notificationInfo.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const notificationAppearanceInfo = {
+    infoPrimary: {
+        fill: 'infoPrimary',
+        fillHover: 'infoPrimary',
+        titleTextColor: 'infoTextPrimary',
+        descTextColor: 'infoTextPrimary',
+        borderColor: 'infoBorderPrimary',
+        textColor: 'infoTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
+        loaderAppearance: 'infoPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
+    },
+};
+export { notificationAppearanceInfo };

package/dist/components/Notification/appearance/notificationShape.js

@@ -0,0 +1,25 @@
+const notificationAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { notificationAppearanceShape };

package/dist/components/Notification/appearance/notificationSize.js

@@ -0,0 +1,17 @@
+const notificationAppearanceSize = {
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size24_24',
+    },
+    sizeS: {
+        size: 'm',
+        titleTextSize: 'xl',
+        descTextSize: 'm',
+        loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size24_24',
+    },
+};
+export { notificationAppearanceSize };

package/dist/components/Notification/appearance/notificationStyle.js

@@ -0,0 +1,14 @@
+const notificationAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { notificationAppearanceStyle };

package/dist/components/Notification/appearance/notificationSuccess.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const notificationAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        fillHover: 'successPrimary',
+        titleTextColor: 'successTextPrimary',
+        descTextColor: 'successTextPrimary',
+        borderColor: 'successBorderPrimary',
+        textColor: 'successTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
+        loaderAppearance: 'successPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'successPrimary ghost circular',
+    },
+};
+export { notificationAppearanceSuccess };

package/dist/components/Notification/appearance/notificationWarning.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const notificationAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+        fillHover: 'warningPrimary',
+        titleTextColor: 'warningTextPrimary',
+        descTextColor: 'warningTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'warningTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
+        loaderAppearance: 'warningPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
+    },
+};
+export { notificationAppearanceWarning };

package/dist/components/Notification/index.js

@@ -0,0 +1,4 @@
+import { Notification, notificationConfig } from './Notification';
+import { notificationAppearance } from './Notification.appearance';
+import { NotificationWrapper } from './NotificationWrapper';
+export { NotificationWrapper, Notification, notificationConfig, notificationAppearance, };

package/dist/components/Notification.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { B as Button } from '../Button_es_DmU0Szub.js';
+import { B as Button } from '../Button_es_DAzeb-vJ.js';
 import { I as Icon } from '../Icon_es_kewxGRUB.js';
 import { L as Loader } from '../Loader_es_CqlLujBJ.js';
 import { T as Text } from '../Text_es_DVNvU0m0.js';

package/dist/components/Overlay/Overlay.appearance.js

@@ -0,0 +1,5 @@
+import { overlayAppearanceDefault } from './appearance/overlayDefault';
+const overlayAppearance = {
+    ...overlayAppearanceDefault,
+};
+export { overlayAppearance };

package/dist/components/Overlay/Overlay.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Overlay/Overlay.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { overlayAppearance } from './Overlay.appearance';
+const overlayConfig = {
+    appearance: overlayAppearance,
+    setAppearance: (appearanceConfig) => {
+        overlayConfig.appearance = appearanceConfig;
+    },
+};
+function Overlay(props) {
+    const { appearance, className, dataTestId, dataTour, isOverlay, onClick } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, overlayConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, blurClass, opacityClass } = propsGenerator;
+    const { styles: overlayStyles } = useStyles(props);
+    return (_jsx("div", { className: clsx(className, 'overlay', opacityClass && `opacity_${opacityClass}`, blurClass && `blur_${blurClass}`, isOverlay && 'overlay_state_visible', fillClass && `fill_${fillClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
+}
+export { Overlay, overlayConfig };

package/dist/components/Overlay/appearance/overlayDefault.js

@@ -0,0 +1,11 @@
+const overlayAppearanceDefault = {
+    blackout: {
+        fill: 'black',
+        opacity: '50',
+    },
+    blur: {
+        fill: 'surfaceQuaternary',
+        blur: '10',
+    },
+};
+export { overlayAppearanceDefault };

package/dist/components/Overlay/index.js

@@ -0,0 +1,2 @@
+export { Overlay, overlayConfig } from './Overlay';
+export { overlayAppearance } from './Overlay.appearance';

package/dist/components/Pagination/Pagination.appearance.js

@@ -0,0 +1,13 @@
+import { paginationAppearanceAccent } from './appearance/paginationAccent';
+import { paginationAppearanceShape } from './appearance/paginationShape';
+import { paginationAppearanceSize } from './appearance/paginationSize';
+import { paginationAppearanceStyle } from './appearance/paginationStyle';
+import { paginationAppearanceSurface } from './appearance/paginationSurface';
+const paginationAppearance = {
+    ...paginationAppearanceSurface,
+    ...paginationAppearanceAccent,
+    ...paginationAppearanceSize,
+    ...paginationAppearanceShape,
+    ...paginationAppearanceStyle,
+};
+export { paginationAppearance };

package/dist/components/Pagination/Pagination.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import clsx from 'clsx';
+import ReactPaginate from 'react-paginate';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Dropdown, DropdownItem } from 'src/components/Dropdown';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { paginationAppearance } from './Pagination.appearance';
+const paginationConfig = {
+    appearance: paginationAppearance,
+    setAppearance: (appearanceConfig) => {
+        paginationConfig.appearance = appearanceConfig;
+    },
+};
+function Pagination(props) {
+    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageCountList = [10, 20, 50, 100], pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, onPageChange, onPerPageCountChange, } = props;
+    const _onChangePage = useMemo(() => {
+        if (onPageChange) {
+            console.warn('@itcase/ui Pagination warning: "onPageChange" is deprecated, use "onChangePage" instead.');
+            return onPageChange;
+        }
+        return onChangePage;
+    }, [onChangePage, onPageChange]);
+    const _onChangePerPageCount = useMemo(() => {
+        return (perPageCount) => {
+            if (onPerPageCountChange) {
+                console.warn('@itcase/ui Pagination warning: "onPerPageCountChange" is deprecated, use "onChangePerPageCount" instead.');
+                return onPerPageCountChange(perPageCount);
+            }
+            return onChangePerPageCount(perPageCount);
+        };
+    }, [onChangePerPageCount, onPerPageCountChange]);
+    const [isOpenDropdown, setIsOpenDropdown] = useState(false);
+    const [activeDropdownItem, setActiveDropdownItem] = useState(perPageCount);
+    const pageCountDropdownArray = useMemo(() => {
+        return isPageCountDropdownReversed
+            ? pageCountList?.reverse()
+            : pageCountList;
+    }, [isPageCountDropdownReversed, pageCountList]);
+    const onClickCommandMenuButton = useCallback(() => {
+        setIsOpenDropdown((state) => !state);
+    }, []);
+    const handleDropdownItemClick = useCallback((event, item) => {
+        event.stopPropagation();
+        _onChangePerPageCount(item);
+        setActiveDropdownItem(item);
+        setIsOpenDropdown(false);
+    }, [_onChangePerPageCount]);
+    const paginationPagesCount = useMemo(() => {
+        if (allItemsCount && allItemsCount > 0) {
+            return Math.ceil(allItemsCount / perPageCount);
+        }
+        return 0;
+    }, [allItemsCount, perPageCount]);
+    const paginationPageIndex = useMemo(() => {
+        const intPageNumber = pageNumber;
+        if (!isNaN(intPageNumber) && intPageNumber > 1) {
+            return intPageNumber - 1;
+        }
+        return 0;
+    }, [pageNumber]);
+    // Keep track of previous perPageCount value
+    const prevPageCountRef = useRef(perPageCount);
+    // When perPageCount changes and current pageNumber is invalid (even if in range).
+    useEffect(() => {
+        // If page number is 5 and perPageCount is 10 and there is 200 items in total,
+        // then user is seeing items from 41 to 50.
+        // Without this effect, when perPageCount changes to 20, pageNumber remains 5,
+        // which mean user will see items from 81 to 100, which is not expected.
+        // So we recalculate pageNumber to make sure user sees items from 41 to 60.
+        // pageNumber 1, perPageCount 10 -> items 1-10
+        // pageNumber 2, perPageCount 10 -> items 11-20
+        // pageNumber 3, perPageCount 10 -> items 21-30
+        // pageNumber 4, perPageCount 10 -> items 31-40
+        // pageNumber 5, perPageCount 10 -> items 41-50
+        // pageNumber 1, perPageCount 20 -> items 1-20
+        // pageNumber 2, perPageCount 20 -> items 21-40
+        // pageNumber 3, perPageCount 20 -> items 41-60
+        // pageNumber 4, perPageCount 20 -> items 61-80
+        // pageNumber 5, perPageCount 20 -> items 81-100
+        const prevPageCount = prevPageCountRef.current;
+        // Update previous perPageCount value
+        prevPageCountRef.current = perPageCount;
+        const firstItemIndex = (pageNumber - 1) * prevPageCount + 1;
+        const newPageNumber = Math.ceil(firstItemIndex / perPageCount);
+        if (newPageNumber !== pageNumber) {
+            _onChangePage({ selected: newPageNumber - 1 });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [perPageCount]);
+    // When allItemsCount changes and current pageNumber is out of range
+    useEffect(() => {
+        if (pageNumber > paginationPagesCount && paginationPagesCount > 0) {
+            _onChangePage({ selected: paginationPagesCount - 1 });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [allItemsCount]);
+    const appearanceConfig = useAppearanceConfig(appearance, paginationConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
+    const { styles: paginationStyles } = useStyles(props);
+    const minPageSize = Math.min(perPageCount, ...pageCountList);
+    const isPaginationDisplayed = allItemsCount > minPageSize;
+    return (isPaginationDisplayed && (_jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [_jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
+                    `fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
+                    `text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
+                    `text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
+                    `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), nextLabel: _jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
+                    (() => (_jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: _jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (_jsxs("div", { className: clsx(className, 'pagination__count'), children: [_jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), _jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
+                            `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [_jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), _jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), _jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (_jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
+                                        pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (_jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
+                                        pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
+}
+export { Pagination, paginationConfig };

package/dist/components/Pagination/appearance/paginationAccent.js

@@ -0,0 +1,38 @@
+const paginationAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillActive: 'accentActiveQuaternary',
+        fillInput: 'surfacePrimary',
+        borderColor: 'accentBorderPrimary',
+        textColor: 'accentTextPrimary',
+        builderIconFillIcon: 'accentItemPrimary',
+        nextIconFillIcon: 'accentItemPrimary',
+        pageCountDescTextColor: 'surfaceTextPrimary',
+        pageCountDropdownAlignment: 'topCenter',
+        pageCountDropdownElevation: '8',
+        pageCountDropdownFill: 'surfacePrimary',
+        pageCountDropdownItemDividerFill: 'surfaceSecondary',
+        pageCountDropdownItemFill: 'surfacePrimary',
+        pageCountDropdownItemFillActive: 'accentPrimary',
+        pageCountDropdownItemFillActiveHover: 'accentActiveHoverPrimary',
+        pageCountDropdownItemFillHover: 'surfaceHoverSecondary',
+        pageCountDropdownItemLabelAlign: 'center',
+        pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
+        pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
+        pageCountDropdownItemLabelColorActiveHover: 'accentTextPrimary',
+        pageCountDropdownItemLabelColorHover: 'surfaceTextPrimary',
+        pageCountInputIconColor: 'surfaceItemPrimary',
+        pageCountInputTextColor: 'surfaceTextPrimary',
+        previousIconFillIcon: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+};
+export { paginationAppearanceAccent };

package/dist/components/Pagination/appearance/paginationShape.js

@@ -0,0 +1,34 @@
+const paginationAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        fillInputShape: 'rounded',
+        pageCountDropdownShape: 'rounded',
+    },
+    roundedXL: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '2m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '2m',
+    },
+    roundedL: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '1_5m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '1_5m',
+    },
+    roundedM: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '1m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '1m',
+    },
+    roundedS: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '0_5m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '0_5m',
+    },
+};
+export { paginationAppearanceShape };

package/dist/components/Pagination/appearance/paginationSize.js

@@ -0,0 +1,63 @@
+import { icons14, icons16, icons24 } from '@itcase/icons/default';
+const paginationAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'l',
+        textSize: 'l',
+        builderIcon: icons24.General.DotMedium,
+        nextIcon: icons24.Arrow.ChevronRightSmall,
+        pageCountDescTextSize: 'l',
+        pageCountDropdownItemDividerSize: 'xxs',
+        pageCountDropdownItemLabelSize: 'm',
+        pageCountDropdownItemSize: 'l',
+        pageCountDropdownItemWidth: '64px',
+        pageCountInputIcon: icons14.Arrow.ChevronDownSmall,
+        pageCountInputIconFillSize: '24',
+        pageCountInputTextSize: 'l',
+        previousIcon: icons24.Arrow.ChevronLeftSmall,
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        textSize: 'm',
+        builderIcon: icons24.General.DotMedium,
+        nextIcon: icons24.Arrow.ChevronRightSmall,
+        pageCountDescTextSize: 'm',
+        pageCountDropdownItemDividerSize: 'xxs',
+        pageCountDropdownItemLabelSize: 'm',
+        pageCountDropdownItemSize: 'l',
+        pageCountInputIcon: icons14.Arrow.ChevronDownSmall,
+        pageCountInputIconFillSize: '14',
+        pageCountInputTextSize: 'm',
+        previousIcon: icons24.Arrow.ChevronLeftSmall,
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        textSize: 's',
+        builderIcon: icons24.General.DotMedium,
+        nextIcon: icons16.Arrow.ChevronRightSmall,
+        pageCountDescTextSize: 's',
+        pageCountDropdownItemDividerSize: 'xxs',
+        pageCountDropdownItemLabelSize: 's',
+        pageCountDropdownItemSize: 's',
+        pageCountInputIcon: icons14.Arrow.ChevronDownSmall,
+        pageCountInputTextSize: 's',
+        previousIcon: icons16.Arrow.ChevronLeftSmall,
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        textSize: 'xs',
+        builderIcon: icons14.General.DotMedium,
+        nextIcon: icons14.Arrow.ChevronRightSmall,
+        pageCountDescTextSize: 'xs',
+        pageCountDropdownItemDividerSize: 'xxs',
+        pageCountDropdownItemLabelSize: 'xs',
+        pageCountDropdownItemSize: 'xs',
+        pageCountInputIcon: icons14.Arrow.ChevronDownSmall,
+        pageCountInputTextSize: 'xs',
+        previousIcon: icons14.Arrow.ChevronLeftSmall,
+    },
+};
+export { paginationAppearanceSize };