@itcase/ui 1.2.3 → 1.2.5

package/dist/cjs/context/Notifications.js

@@ -38,8 +38,9 @@ function NotificationsProvider(props) {
         // Check on need to hide, if current notification is target for hide
         const isNeedToHide = String(notificationItem.id) === String(targetId);
         // Callback for close if exists
-        if (isNeedToHide && typeof notificationItem.onClose === 'function') {
-          notificationItem.onClose();
+        if (isNeedToHide) {
+          clearTimeout(notificationItem._closeTimeout);
+          notificationItem.onClose && notificationItem.onClose();
         }
         // Save in state if no need to hide
         return !isNeedToHide;

package/dist/components/Choice.js

@@ -1,3 +1,4 @@
+import { _ as __assign } from '../tslib.es6-S-VPg1Cw.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
@@ -17,7 +18,6 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-Bqu5amIb.js';
-import '../tslib.es6-S-VPg1Cw.js';
 import '../Tooltip-DJufHBiQ.js';
 import '../Title-BfSFPJtJ.js';
 
@@ -28,7 +28,7 @@ var choiceConfig = {
     },
 };
 var Choice = React.forwardRef(function Choice(props, ref) {
-    var _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
+    var gap = props.gap, _a = props.isCheckbox, isCheckbox = _a === void 0 ? false : _a, _b = props.isDisabled, isDisabled = _b === void 0 ? false : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _d = props.active, active = _d === void 0 ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === void 0 ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === void 0 ? 'normal' : _f, type = props.type;
     var controlRef = useRef(null);
     var optionsRefs = useMemo(function () { return new Map(options.map(function (item) { return [item.value, createRef()]; })); }, [options]);
     var onChange = useCallback(function (event, item) {
@@ -75,18 +75,18 @@ var Choice = React.forwardRef(function Choice(props, ref) {
     var appearanceConfig = (appearance && choiceConfig.appearance && choiceConfig.appearance[appearance]);
     return (jsx("div", { className: clsx(className, 'choice', shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "choice_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), !isDisabled
-            ? fillClass ||
-                ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
-                    "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())
-            : fillDisabledClass, borderColorClass ||
+                "choice_shape_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
                 "border-color_".concat(appearanceConfig.borderColor)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: "choice__wrapper", children: options.map(function (item) { return (jsxs("div", { className: clsx('choice__item', !isDisabled &&
+                    .toLowerCase()), borderWidthClass, borderTypeClass, set && "choice_set_".concat(set), size && "choice_size_".concat(size), type && "choice_type_".concat(type)), ref: controlRef, children: isLoading ? (jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemAccent", set: "simple" })) : (jsx("div", { className: "choice__wrapper", style: __assign({}, (gap && { gap: gap })), children: options.map(function (item) { return (jsxs("div", { className: clsx('choice__item', !isDisabled
+                    ? fillClass ||
+                        ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                            "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())
+                    : fillDisabledClass, !isDisabled &&
                     (fillHoverClass ||
                         ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
-                            "fill_active_".concat(appearanceConfig.fillHover)
+                            "fill_hover_".concat(appearanceConfig.fillHover)
                                 .replace(/([A-Z])/g, '-$1')
                                 .toLowerCase())), item.value !== (active === null || active === void 0 ? void 0 : active.value) && isDisabled && 'choice__item_state_disabled', item.value === (active === null || active === void 0 ? void 0 : active.value)
                     ? !isDisabled

package/dist/components/DatePicker.js

@@ -4,6 +4,7 @@ import React, { useMemo, useCallback, useRef, useState, useEffect } from 'react'
 import clsx from 'clsx';
 import DatePicker from 'react-datepicker';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
 import { B as Button } from '../Button-BJWuO5uR.js';
 import { I as Icon } from '../Icon-fTLfvlsK.js';
 import { I as Input } from '../Input-UkM-ag48.js';
@@ -15,7 +16,6 @@ import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
@@ -1071,7 +1071,7 @@ const ru = {
 function DatePickerInput(props) {
     var className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, clearIconFillHover = props.clearIconFillHover, clearIconFillSize = props.clearIconFillSize, clearIconItemFill = props.clearIconItemFill, clearIconItemFillHover = props.clearIconItemFillHover, clearIconShape = props.clearIconShape, clearIconSize = props.clearIconSize, clearIconSrc = props.clearIconSrc, clearLabel = props.clearLabel, clearLabelTextColor = props.clearLabelTextColor, clearLabelTextColorHover = props.clearLabelTextColorHover, clearLabelTextSize = props.clearLabelTextSize, datePickerProps = props.datePickerProps, endValue = props.endValue, inputProps = props.inputProps, labelTextSize = props.labelTextSize, value = props.value, onChange = props.onChange;
     var widthClass = useDeviceTargetClass(props, {
-        prefix: 'width_',
+        prefix: 'datepicker_width_',
         propsKey: 'width',
     });
     var datepickerRef = useRef(null);
@@ -1105,7 +1105,7 @@ function DatePickerInput(props) {
         setEndDate(newEndDate);
     }, [onChange]);
     var renderDayContents = useCallback(function (day, date) {
-        return (jsx(Button, { className: "react-datepicker__day-button", label: date.getDate().toString(), labelTextColor: datePickerProps.dayTextColor, labelTextSize: datePickerProps.dayTextSize, shape: datePickerProps.dayTextShape, size: datePickerProps.daySize }));
+        return (jsx(Button, { className: "react-datepicker__day-button", labelTextColor: datePickerProps.dayTextColor, labelTextSize: datePickerProps.dayTextSize, label: date.getDate().toString(), shape: datePickerProps.dayTextShape, size: datePickerProps.daySize }));
     }, [
         datePickerProps.daySize,
         datePickerProps.dayTextColor,
@@ -1113,7 +1113,7 @@ function DatePickerInput(props) {
         datePickerProps.dayTextSize,
     ]);
     var renderCustomHeader = useCallback(function (_a) {
-        var monthDate = _a.monthDate, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth;
+        var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, monthDate = _a.monthDate;
         return (jsxs("div", { className: "react-datepicker__header--div", children: [datePickerProps.iconLeft && (jsx(Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill, fillHover: datePickerProps.iconFillHover, fillSize: datePickerProps.iconFillSize, iconFill: datePickerProps.iconItemFill, shape: datePickerProps.iconShape, size: datePickerProps.iconSize, SvgImage: datePickerProps.iconLeft, onClick: decreaseMonth })), jsxs("div", { className: "react-datepicker__data", children: [jsx(Text, { className: "react-datepicker__month", size: datePickerProps.monthTextSize, textColor: datePickerProps.monthTextColor, textWeight: datePickerProps.monthTextWeight, children: monthDate.toLocaleString('ru-RU', { month: 'long' }) }), jsx(Text, { className: "react-datepicker__year", size: datePickerProps.yearTextSize, textColor: datePickerProps.yearTextColor, textWeight: datePickerProps.yearTextWeight, children: monthDate.toLocaleString('ru-RU', { year: 'numeric' }) })] }), datePickerProps.iconRight && (jsx(Icon, { className: "react-datepicker__icon", fill: datePickerProps.iconFill, fillHover: datePickerProps.iconFillHover, fillSize: datePickerProps.iconFillSize, iconFill: datePickerProps.iconItemFill, shape: datePickerProps.iconShape, size: datePickerProps.iconSize, SvgImage: datePickerProps.iconRight, onClick: increaseMonth }))] }));
     }, [
         datePickerProps.iconFill,
@@ -1137,12 +1137,14 @@ function DatePickerInput(props) {
     useEffect(function () {
         setEndDate(end);
     }, [end]);
-    return (jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass), children: jsx(DatePicker, __assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
+    // @ts-expect-error
+    var datePickerStyles = useStyles(props).styles;
+    return (jsx("div", { className: clsx(className, 'datepicker', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.monthsShown) && 'datepicker_type_multiple-months', (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.customTimeInput) && 'datepicker_type_button', widthClass), style: datePickerStyles, children: jsx(DatePicker, __assign({ ref: datepickerRef, endDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? endDate : undefined, locale: ru, minDate: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.disablePastDays) ? new Date() : undefined, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: startDate, startDate: startDate, customInput: jsx(DatePickerCustomInput, { labelTextSize: labelTextSize, clearIcon: clearIcon, clearIconFill: clearIconFill, clearIconFillHover: clearIconFillHover, clearIconFillSize: clearIconFillSize, clearIconItemFill: clearIconItemFill, clearIconItemFillHover: clearIconItemFillHover, clearIconShape: clearIconShape, clearIconSize: clearIconSize, clearIconSrc: clearIconSrc, clearLabel: clearLabel, clearLabelTextColor: clearLabelTextColor, clearLabelTextColorHover: clearLabelTextColorHover, clearLabelTextSize: clearLabelTextSize, datepickerRef: datepickerRef, inputIcon: datePickerProps.inputIcon, inputIconFill: datePickerProps.inputIconFill, inputIconFillHover: datePickerProps.inputIconFillHover, inputIconFillSize: datePickerProps.inputIconFillSize, inputIconItemFill: datePickerProps.inputIconItemFill, inputIconShape: datePickerProps.inputIconShape, inputIconSize: datePickerProps.inputIconSize, inputIconSrc: datePickerProps.inputIconSrc, inputProps: inputProps, isClearable: datePickerProps.isClearable }), popperClassName: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.popper) && "react-datepicker-popper-".concat(datePickerProps.popper), onChange: (datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.selectsRange) ? handleChange : onChange }, datePickerProps, { 
             // Important for use custom clear button
             isClearable: false })) }));
 }
 var DatePickerCustomInput = React.forwardRef(function (props, ref) {
-    var isClearable = props.isClearable, value = props.value, inputProps = props.inputProps, inputIcon = props.inputIcon;
+    var isClearable = props.isClearable, inputIcon = props.inputIcon, inputProps = props.inputProps, value = props.value;
     var multipleValue = useMemo(function () {
         if (value) {
             var twoDates = value.split(' - ');
@@ -1160,7 +1162,7 @@ function DatePickerClearButton(props) {
         (_a = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _a === void 0 ? void 0 : _a.onClearClick(event);
         (_b = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.current) === null || _b === void 0 ? void 0 : _b.handleFocus(event);
     }, []);
-    return (jsxs(React.Fragment, { children: [clearLabel && (jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), label: clearLabel, labelTextColor: clearLabelTextColor, labelTextSize: clearLabelTextSize, labelTextColorHover: clearLabelTextColorHover, onClick: onClick })), (clearIcon || clearIconSrc) && (jsx(Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, size: clearIconSize, SvgImage: clearIcon, onClick: onClick }))] }));
+    return (jsxs(React.Fragment, { children: [clearLabel && (jsx(Label, { className: clsx('react-datepicker__clear-label', 'cursor_type_pointer'), labelTextColor: clearLabelTextColor, labelTextSize: clearLabelTextSize, label: clearLabel, labelTextColorHover: clearLabelTextColorHover, onClick: onClick })), (clearIcon || clearIconSrc) && (jsx(Icon, { className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), fill: clearIconFill, fillHover: clearIconFillHover, fillSize: clearIconFillSize, iconFill: clearIconItemFill, iconFillHover: clearIconItemFillHover, imageSrc: clearIconSrc, shape: clearIconShape, size: clearIconSize, SvgImage: clearIcon, onClick: onClick }))] }));
 }
 DatePickerClearButton.displayName = 'DatePickerClearButton';
 function DatePickerInputIcon(props) {

package/dist/components/FormField.js

@@ -7,9 +7,12 @@ import { I as Icon } from '../Icon-fTLfvlsK.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { R as Radio } from '../Radio-oMf0vN7T.js';
+import 'react-select';
 import { SelectInput } from './Select.js';
-import { S as Switch } from '../Switch-DEXsrPCo.js';
 import 'react';
+import '../Badge-CrhdvxY6.js';
+import '../Group-BXfLh7AZ.js';
+import { S as Switch } from '../Switch-DEXsrPCo.js';
 import 'react-inlinesvg';
 import '../Link-Bqu5amIb.js';
 import '../Tooltip-DJufHBiQ.js';
@@ -23,10 +26,7 @@ import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import 'lodash/castArray';
-import 'react-select';
 import 'react-select/creatable';
-import '../Badge-CrhdvxY6.js';
-import '../Group-BXfLh7AZ.js';
 
 function FormField(props) {
     var id = props.id, children = props.children, afterItem = props.afterItem, dataTestId = props.dataTestId, beforeItem = props.beforeItem, dividerWidth = props.dividerWidth, dividerDirection = props.dividerDirection, set = props.set, className = props.className, dividerSize = props.dividerSize, dividerFill = props.dividerFill, descSize = props.descSize, descTextWeight = props.descTextWeight, descTextColor = props.descTextColor, desc = props.desc, label = props.label, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextColor = props.labelTextColor, clearIconFill = props.clearIconFill, clearIcon = props.clearIcon, clearIconSize = props.clearIconSize, messageSize = props.messageSize, messageTextWeight = props.messageTextWeight, messageTextColor = props.messageTextColor, message = props.message;

package/dist/components/Pagination.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import clsx from 'clsx';
 import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
@@ -25,8 +25,8 @@ import '../Tooltip-DJufHBiQ.js';
 import '../Title-BfSFPJtJ.js';
 
 function Pagination(props) {
-    var allItemsCount = props.allItemsCount, className = props.className, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _a = props.pageCountArray, pageCountArray = _a === void 0 ? [10, 20, 50, 100] : _a, pageCountDesc = props.pageCountDesc, pageCountDescTextColor = props.pageCountDescTextColor, pageCountDescTextSize = props.pageCountDescTextSize, pageCountDropdownAlignment = props.pageCountDropdownAlignment, pageCountDropdownElevation = props.pageCountDropdownElevation, pageCountDropdownFill = props.pageCountDropdownFill, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, pageCountDropdownItemDividerFill = props.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = props.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = props.pageCountDropdownItemFill, pageCountDropdownItemFillActive = props.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = props.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = props.pageCountDropdownItemFillHover, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, pageNumber = props.pageNumber, pageRangeDisplayed = props.pageRangeDisplayed, _b = props.perPageCount, perPageCount = _b === void 0 ? 0 : _b, previousLabel = props.previousLabel, isPageCount = props.isPageCount, isPageCountDropdownReversed = props.isPageCountDropdownReversed; props.onChangePage; props.onChangePerPageCount; 
-    var /**
+    var isPageCount = props.isPageCount, _a = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _a === void 0 ? false : _a, _b = props.allItemsCount, allItemsCount = _b === void 0 ? 0 : _b, className = props.className, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _c = props.pageCountArray, pageCountArray = _c === void 0 ? [10, 20, 50, 100] : _c, pageCountDesc = props.pageCountDesc, pageCountDescTextColor = props.pageCountDescTextColor, pageCountDescTextSize = props.pageCountDescTextSize, pageCountDropdownAlignment = props.pageCountDropdownAlignment, pageCountDropdownElevation = props.pageCountDropdownElevation, pageCountDropdownFill = props.pageCountDropdownFill, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, pageCountDropdownItemDividerFill = props.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = props.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = props.pageCountDropdownItemFill, pageCountDropdownItemFillActive = props.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = props.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = props.pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, _d = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActive = _d === void 0 ? '' : _d, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, _e = props.pageNumber, pageNumber = _e === void 0 ? 0 : _e, pageRangeDisplayed = props.pageRangeDisplayed, _f = props.perPageCount, perPageCount = _f === void 0 ? 0 : _f, previousLabel = props.previousLabel, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount, 
+    /**
      * @deprecated The method should not be used
      */
     onPageChange = props.onPageChange, 
@@ -34,20 +34,35 @@ function Pagination(props) {
      * @deprecated The method should not be used
      */
     onPerPageCountChange = props.onPerPageCountChange;
-    var _c = useState(false), isOpenDropdown = _c[0], setIsOpenDropdown = _c[1];
-    var _d = useState(true), showPagination = _d[0]; _d[1];
-    var _e = useState([]), pageCountDropdownArray = _e[0], setPageCountDropdownArray = _e[1];
-    var _f = useState(10), activeDropdownItem = _f[0], setActiveDropdownItem = _f[1];
+    var _onChangePage = useMemo(function () {
+        if (onPageChange) {
+            console.warn('@itcase/ui Pagination warning: "onPageChange" is deprecated, use "onChangePage" instead.');
+            return onPageChange;
+        }
+        return onChangePage;
+    }, [onChangePage, onPageChange]);
+    var _onChangePerPageCount = useMemo(function () {
+        if (onPerPageCountChange) {
+            console.warn('@itcase/ui Pagination warning: "onPerPageCountChange" is deprecated, use "onChangePerPageCount" instead.');
+            return onPerPageCountChange;
+        }
+        return onChangePerPageCount;
+    }, [onChangePerPageCount, onPerPageCountChange]);
+    var _g = useState(false), isOpenDropdown = _g[0], setIsOpenDropdown = _g[1];
+    var _h = useState(10), activeDropdownItem = _h[0], setActiveDropdownItem = _h[1];
+    var pageCountDropdownArray = useMemo(function () {
+        return isPageCountDropdownReversed ? pageCountArray === null || pageCountArray === void 0 ? void 0 : pageCountArray.reverse() : pageCountArray;
+    }, [isPageCountDropdownReversed, pageCountArray]);
     // Toggle command menu
     var onClickCommandMenuButton = useCallback(function () {
         setIsOpenDropdown(function (state) { return !state; });
     }, []);
     var handleDropdownItemClick = useCallback(function (event, item) {
         event.stopPropagation();
-        onPerPageCountChange && onPerPageCountChange(item);
+        _onChangePerPageCount && _onChangePerPageCount(item);
         setActiveDropdownItem(item);
         setIsOpenDropdown(false);
-    }, [onPerPageCountChange]);
+    }, [_onChangePerPageCount]);
     var justifyContentClass = useDeviceTargetClass(props, {
         prefix: 'pagination_justify-content_',
         propsKey: 'justifyContent',
@@ -81,10 +96,7 @@ function Pagination(props) {
         }
         return 0;
     }, [pageNumber]);
-    useEffect(function () {
-        setPageCountDropdownArray(isPageCountDropdownReversed ? pageCountArray === null || pageCountArray === void 0 ? void 0 : pageCountArray.reverse() : pageCountArray);
-    }, [pageCountArray, isPageCountDropdownReversed]);
-    return (jsxs("div", { className: "pagination", children: [showPagination && (jsx(ReactPaginate, { activeClassName: "pagination__item_state_active cursor_type_default", breakClassName: "pagination__item pagination__item_break", disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", marginPagesDisplayed: marginPagesDisplayed, nextClassName: "pagination__item pagination__item_next", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed, previousClassName: "pagination__item pagination__item_previous", onPageChange: onPageChange, activeLinkClassName: "pagination__item-link_state_active", 
+    return (jsxs("div", { className: "pagination", children: [jsx(ReactPaginate, { activeClassName: "pagination__item_state_active cursor_type_default", breakClassName: "pagination__item pagination__item_break", disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", marginPagesDisplayed: marginPagesDisplayed, nextClassName: "pagination__item pagination__item_next", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed, previousClassName: "pagination__item pagination__item_previous", activeLinkClassName: "pagination__item-link_state_active", 
                 // previous button
                 previousLabel: previousLabel, breakLinkClassName: "pagination__item-link", 
                 // pages settings
@@ -94,17 +106,9 @@ function Pagination(props) {
                 // break element
                 breakLabel: "...", previousLinkClassName: "pagination__item-link", 
                 // next button
-                nextLabel: nextLabel })), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count', gapClass), children: [jsx(Text, { size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, SvgImage: pageCountInputIcon }), jsx(Dropdown, { alignment: pageCountDropdownAlignment, elevation: pageCountDropdownElevation, fill: pageCountDropdownFill, isOpen: isOpenDropdown, set: pageCountDropdownSet, shape: pageCountDropdownShape, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
-                                    return activeDropdownItem === item ? (jsx(DropdownItem, { dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, isActive: true, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize, width: pageCountDropdownItemWidth, showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsx(DropdownItem, { dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, isActive: false, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize, width: pageCountDropdownItemWidth, showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
+                nextLabel: nextLabel, onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count', gapClass), children: [jsx(Text, { size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, SvgImage: pageCountInputIcon }), jsx(Dropdown, { fill: pageCountDropdownFill, alignment: pageCountDropdownAlignment, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, isOpen: isOpenDropdown, set: pageCountDropdownSet, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
+                                    return activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, labelTextColor: pageCountDropdownItemLabelColor, labelTextSize: pageCountDropdownItemLabelSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize, showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, isActive: true, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, labelTextColor: pageCountDropdownItemLabelColor, labelTextSize: pageCountDropdownItemLabelSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize, showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, isActive: false, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
                                 }) })] })] }))] }));
 }
-Pagination.defaultProps = {
-    pageNumber: 0,
-    perPageCount: 0,
-    allItemsCount: 0,
-    pageCountArray: [10, 20, 50, 100],
-    isPageCountDropdownReversed: false,
-    pageCountDropdownItemLabelColorActive: '',
-};
 
 export { Pagination };