@itcase/ui 1.2.4 → 1.2.5

package/dist/cjs/components/FormField.js

@@ -9,9 +9,12 @@ var Icon = require('../../Icon-Cq4hPF2D.js');
 var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Radio = require('../../Radio-BQo97TZL.js');
+require('react-select');
 var index = require('./Select.js');
-var Switch = require('../../Switch-B5yVEqxz.js');
 require('react');
+require('../../Badge-2JkquAEb.js');
+require('../../Group-Buo_BxGT.js');
+var Switch = require('../../Switch-B5yVEqxz.js');
 require('react-inlinesvg');
 require('../../Link-DQxoFKhI.js');
 require('../../Tooltip-DkTKx9n-.js');
@@ -25,10 +28,7 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('lodash/castArray');
-require('react-select');
 require('react-select/creatable');
-require('../../Badge-2JkquAEb.js');
-require('../../Group-Buo_BxGT.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/cjs/components/Pagination.js

@@ -27,8 +27,8 @@ require('../../Tooltip-DkTKx9n-.js');
 require('../../Title-zwP6c2U2.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, 
@@ -36,20 +36,35 @@ function Pagination(props) {
      * @deprecated The method should not be used
      */
     onPerPageCountChange = props.onPerPageCountChange;
-    var _c = React.useState(false), isOpenDropdown = _c[0], setIsOpenDropdown = _c[1];
-    var _d = React.useState(true), showPagination = _d[0]; _d[1];
-    var _e = React.useState([]), pageCountDropdownArray = _e[0], setPageCountDropdownArray = _e[1];
-    var _f = React.useState(10), activeDropdownItem = _f[0], setActiveDropdownItem = _f[1];
+    var _onChangePage = React.useMemo(function () {
+        if (onPageChange) {
+            console.warn('@itcase/ui Pagination warning: "onPageChange" is deprecated, use "onChangePage" instead.');
+            return onPageChange;
+        }
+        return onChangePage;
+    }, [onChangePage, onPageChange]);
+    var _onChangePerPageCount = React.useMemo(function () {
+        if (onPerPageCountChange) {
+            console.warn('@itcase/ui Pagination warning: "onPerPageCountChange" is deprecated, use "onChangePerPageCount" instead.');
+            return onPerPageCountChange;
+        }
+        return onChangePerPageCount;
+    }, [onChangePerPageCount, onPerPageCountChange]);
+    var _g = React.useState(false), isOpenDropdown = _g[0], setIsOpenDropdown = _g[1];
+    var _h = React.useState(10), activeDropdownItem = _h[0], setActiveDropdownItem = _h[1];
+    var pageCountDropdownArray = React.useMemo(function () {
+        return isPageCountDropdownReversed ? pageCountArray === null || pageCountArray === void 0 ? void 0 : pageCountArray.reverse() : pageCountArray;
+    }, [isPageCountDropdownReversed, pageCountArray]);
     // Toggle command menu
     var onClickCommandMenuButton = React.useCallback(function () {
         setIsOpenDropdown(function (state) { return !state; });
     }, []);
     var handleDropdownItemClick = React.useCallback(function (event, item) {
         event.stopPropagation();
-        onPerPageCountChange && onPerPageCountChange(item);
+        _onChangePerPageCount && _onChangePerPageCount(item);
         setActiveDropdownItem(item);
         setIsOpenDropdown(false);
-    }, [onPerPageCountChange]);
+    }, [_onChangePerPageCount]);
     var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'pagination_justify-content_',
         propsKey: 'justifyContent',
@@ -83,10 +98,7 @@ function Pagination(props) {
         }
         return 0;
     }, [pageNumber]);
-    React.useEffect(function () {
-        setPageCountDropdownArray(isPageCountDropdownReversed ? pageCountArray === null || pageCountArray === void 0 ? void 0 : pageCountArray.reverse() : pageCountArray);
-    }, [pageCountArray, isPageCountDropdownReversed]);
-    return (jsxRuntime.jsxs("div", { className: "pagination", children: [showPagination && (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: "pagination", children: [jsxRuntime.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
@@ -96,17 +108,9 @@ function Pagination(props) {
                 // break element
                 breakLabel: "...", previousLinkClassName: "pagination__item-link", 
                 // next button
-                nextLabel: nextLabel })), isPageCount && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count', gapClass), children: [jsxRuntime.jsx(Text.Text, { size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { alignment: pageCountDropdownAlignment, elevation: pageCountDropdownElevation, fill: pageCountDropdownFill, isOpen: isOpenDropdown, set: pageCountDropdownSet, shape: pageCountDropdownShape, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
-                                    return activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.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)) : (jsxRuntime.jsx(DropdownItem.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 && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count', gapClass), children: [jsxRuntime.jsx(Text.Text, { size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.Dropdown, { fill: pageCountDropdownFill, alignment: pageCountDropdownAlignment, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, isOpen: isOpenDropdown, set: pageCountDropdownSet, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
+                                    return activeDropdownItem === item ? (jsxRuntime.jsx(DropdownItem.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)) : (jsxRuntime.jsx(DropdownItem.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: '',
-};
 
 exports.Pagination = Pagination;