@itcase/ui 1.1.25 → 1.2.1

package/dist/cjs/components/MenuItem.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var MenuItem = require('../MenuItem-D6T9WRQk.js');
-require('../jsx-runtime-BBxmckJR.js');
+var MenuItem = require('../../MenuItem-DvIFaWkB.js');
+require('react/jsx-runtime');
 require('react');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
@@ -15,9 +15,9 @@ require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Link-DRV1vzHd.js');
-require('../_tslib-CKiUdo7p.js');
-require('../Text-B0SULA92.js');
+require('../../Link-DQxoFKhI.js');
+require('../../tslib.es6-CKiUdo7p.js');
+require('../../Text-_YhyTsQ1.js');
 
 
 

package/dist/cjs/components/Modal.js

@@ -1,26 +1,174 @@
 'use strict';
 
-var ModalLoader = require('../ModalLoader-DRt-18Tr.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('react-dom');
-require('../hooks/useDeviceTargetClass.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var ReactDOM = require('react-dom');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+var Overlay = require('../../Overlay-CFXouKnl.js');
+var Loader = require('../../Loader-fA11tUEJ.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Overlay-CkN2X1BM.js');
-require('../Loader-C2D6fJk1.js');
-require('../Text-B0SULA92.js');
+require('../../Text-_YhyTsQ1.js');
 
+var getOrCreateModalElement = function (modalQuerySelector, className) {
+    var _a;
+    if (className === void 0) { className = ''; }
+    // prettier-ignore
+    var classList = className && typeof className === 'string'
+        ? className.split(' ').filter(Boolean)
+        : [];
+    var modalElement = document.querySelector(modalQuerySelector);
+    if (!modalElement) {
+        // Add modal element into the DOM on mount.
+        modalElement = document.createElement('div');
+        modalElement.setAttribute('id', 'modal-global');
+        modalElement.classList.add('modal');
+        if (classList.length) {
+            (_a = modalElement.classList).add.apply(_a, classList);
+        }
+        document.body.prepend(modalElement);
+    }
+    return modalElement;
+};
+// Modal component that is an abstraction around the portal API.
+var Modal = React.forwardRef(function Modal(props, ref) {
+    var id = props.id, children = props.children, _a = props.isCloseOnBlur, isCloseOnBlur = _a === void 0 ? true : _a, _b = props.isOpen, initialIsOpen = _b === void 0 ? false : _b, _c = props.isOverlay, isOverlay = _c === void 0 ? true : _c, _d = props.isScrollOnOpen, isScrollOnOpen = _d === void 0 ? true : _d, _e = props.isSetFocusOnOpen, isSetFocusOnOpen = _e === void 0 ? true : _e, className = props.className, closeButton = props.closeButton, contentClassName = props.contentClassName, _f = props.modalQuerySelector, modalQuerySelector = _f === void 0 ? '#modal-global' : _f, overlayClassName = props.overlayClassName, overlayFill = props.overlayFill, overlayFillGradient = props.overlayFillGradient, overlayOpacity = props.overlayOpacity, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal;
+    // Query DOM element
+    var _g = React.useState(null), modalElement = _g[0], setModalElement = _g[1];
+    var _h = React.useState(initialIsOpen), isOpen = _h[0], setIsOpen = _h[1];
+    var modalContentRef = React.useRef(null);
+    // const modalOverlayRef = useRef(null)
+    var addModalProps = React.useCallback(function (element) {
+        // Change class need in "useEffect"
+        if (isOpen) {
+            // Show modal
+            element.classList.add('modal_state_visible');
+            // Scroll to opened modal
+            if (isScrollOnOpen) {
+                // modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
+                element.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            }
+            // "setTimeout" in this implementation is needs for set focus on modal
+            // after "onMouseDown" event on button
+            if (isSetFocusOnOpen) {
+                setTimeout(function () {
+                    if (modalContentRef.current) {
+                        modalContentRef.current.focus();
+                    }
+                }, 0);
+            }
+        }
+        else if (!element.children.length) {
+            // Hide modal if has no children
+            element.classList.remove('modal_state_visible');
+        }
+    }, [isOpen, isSetFocusOnOpen]);
+    // Show modal with children content
+    var openModal = React.useCallback(function () {
+        setIsOpen(true);
+        // Callback
+        if (typeof onOpenModal === 'function') {
+            onOpenModal();
+        }
+        /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
+          // If current modal is already opened
+          // Move content to end of modal root container. For order in DOM.
+          const modalContentElement = modalContentRef.current
+          if (modalContentElement) {
+            modalContentElement.parentNode.appendChild(modalContentElement)
+          }
+          // Also move overlay to end of modal root container after container
+          const modalOverlayElement = modalOverlayRef.current
+          if (modalOverlayElement) {
+            modalOverlayElement.parentNode.appendChild(modalOverlayElement)
+          }
+        */
+    }, [onOpenModal]);
+    // Hide modal and unmount children content
+    var closeModal = React.useCallback(function (event) {
+        if (event) {
+            // prettier-ignore
+            var hasRelatedTarget = (event.relatedTarget &&
+                modalElement &&
+                modalElement.contains(event.relatedTarget));
+            if (hasRelatedTarget) {
+                return event;
+            }
+        }
+        setIsOpen(false);
+        // Callback
+        onCloseModal && onCloseModal();
+    }, [modalElement, onCloseModal]);
+    React.useEffect(function () {
+        if (!modalElement) {
+            return;
+        }
+        addModalProps(modalElement);
+    }, [isOpen]); // eslint-disable-line
+    React.useLayoutEffect(function () {
+        var element = getOrCreateModalElement(modalQuerySelector, className);
+        setModalElement(element);
+        if (element) {
+            addModalProps(element);
+        }
+    }, []);
+    // Save ref things
+    React.useImperativeHandle(ref, function () { return ({ isOpen: isOpen, closeModal: closeModal, modalElement: modalElement, openModal: openModal }); }, [
+        isOpen,
+        openModal,
+        closeModal,
+        modalElement,
+    ]);
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    // Collect classes and styles
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'modal-shape_',
+        propsKey: 'shape',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    // @ts-expect-error
+    var modalStyles = useStyles.useStyles(props).styles;
+    // Use a portal to render the children into the element
+    return (modalElement &&
+        ReactDOM.createPortal(
+        // Any valid React child: JSX, strings, arrays, etc.
+        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: clsx('modal-content', contentClassName, fillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass), ref: modalContentRef, id: id, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [closeButton && (jsxRuntime.jsx("div", { className: "modal-content__close", onClick: closeModal, children: closeButton })), jsxRuntime.jsx("div", { className: "modal-content__wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: clsx('modal__overlay', 'overlay_type_modal', overlayClassName), 
+                    // ref={modalOverlayRef}
+                    fill: overlayFill, opacity: overlayOpacity, fillGradient: overlayFillGradient, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
+        // A DOM element
+        modalElement));
+});
 
+function ModalLoader(props) {
+    return (jsxRuntime.jsx("div", { className: "modal-loading", children: jsxRuntime.jsx("div", { className: "modal-loading__inner", children: jsxRuntime.jsx(Loader.Loader, {}) }) }));
+}
 
-exports.Modal = ModalLoader.Modal;
-exports.ModalLoader = ModalLoader.ModalLoader;
+exports.Modal = Modal;
+exports.ModalLoader = ModalLoader;

package/dist/cjs/components/Notification.js

@@ -1,27 +1,56 @@
 'use strict';
 
-var NotificationList = require('../NotificationList-DETpx50O.js');
-require('../jsx-runtime-BBxmckJR.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var Text = require('../../Text-_YhyTsQ1.js');
+var Title = require('../../Title-zwP6c2U2.js');
+var Notifications = require('../context/Notifications.js');
 require('react');
-require('clsx');
-require('../context/Notifications.js');
-require('prop-types');
-require('uuid');
-require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
+require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../Text-B0SULA92.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Title-Ckp30YSI.js');
+require('uuid');
 
+var notificationItemConfig = {
+    appearance: {},
+    setAppearance: function (newComponent) {
+        notificationItemConfig.appearance = newComponent;
+    },
+};
+function NotificationItem(props) {
+    var id = props.id, appearance = props.appearance, closeButton = props.closeButton, after = props.after, before = props.before, set = props.set, status = props.status, size = props.size, dataTour = props.dataTour, text = props.text, _a = props.textSize, textSize = _a === void 0 ? 's' : _a, textColor = props.textColor, title = props.title, _b = props.titleTextSize, titleTextSize = _b === void 0 ? 'h5' : _b, titleTextColor = props.titleTextColor, onClickClose = props.onClickClose, className = props.className;
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var appearanceConfig = appearance &&
+        notificationItemConfig.appearance &&
+        notificationItemConfig.appearance[appearance];
+    return (jsxRuntime.jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), "data-tour": dataTour, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Title.Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor) && appearanceConfig.titleTextColor), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: textSize, textColor: textColor || ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) && appearanceConfig.textColor), children: text })), closeButton && (jsxRuntime.jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
+}
+NotificationItem.defaultProps = {
+    titleTextSize: 'h5',
+    textSize: 's',
+};
 
+function NotificationList(props) {
+    var notifications = Notifications.useNotifications();
+    var hideNotifications = Notifications.useNotificationsAPI().hideNotifications;
+    var className = props.className, closeButton = props.closeButton, set = props.set, size = props.size, type = props.type;
+    return (jsxRuntime.jsx("div", { className: clsx('notification', className), children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsxRuntime.jsx(NotificationItem, { closeButton: closeButton, id: notification.id, size: notification.size || size, status: notification.status, text: notification.text, title: notification.title, type: notification.type || type, set: notification.set || set, onClickClose: hideNotifications }, i)); }) }) }));
+}
 
-exports.NotificationItem = NotificationList.NotificationItem;
-exports.NotificationList = NotificationList.NotificationList;
-exports.notificationItemConfig = NotificationList.notificationItemConfig;
+exports.NotificationItem = NotificationItem;
+exports.NotificationList = NotificationList;
+exports.notificationItemConfig = notificationItemConfig;

package/dist/cjs/components/Overlay.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var Overlay = require('../Overlay-CkN2X1BM.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
+var Overlay = require('../../Overlay-CFXouKnl.js');
+require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
+require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');

package/dist/cjs/components/Page.js

@@ -20,12 +20,6 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
 function Page(props) {
   const {
     after,
@@ -64,51 +58,51 @@ function Page(props) {
     styles,
     wrapper: wrapperStyles
   } = useStyles.useStyles(props);
-  return /*#__PURE__*/React__default.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: clsx__default.default('page', className, type && `${className}_type_${type}`, fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass),
+    className: clsx('page', className, type && `${className}_type_${type}`, fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass),
     style: styles
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('page__wrapper', alignDirectionClass, alignClass, 'content'),
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx('page__wrapper', alignDirectionClass, alignClass, 'content'),
     style: wrapperStyles
   }, before, children, after));
 }
 Page.propTypes = {
-  children: PropTypes__default.default.any,
-  className: PropTypes__default.default.string,
-  before: PropTypes__default.default.string,
-  after: PropTypes__default.default.string,
-  id: PropTypes__default.default.string,
-  fill: PropTypes__default.default.oneOf(fill.default),
-  fillMobile: PropTypes__default.default.oneOf(fill.default),
-  fillTablet: PropTypes__default.default.oneOf(fill.default),
-  fillDesktop: PropTypes__default.default.oneOf(fill.default),
-  type: PropTypes__default.default.string,
-  tag: PropTypes__default.default.string,
-  position: PropTypes__default.default.oneOf(position.default),
-  positionMobile: PropTypes__default.default.oneOf(position.default),
-  positionTablet: PropTypes__default.default.oneOf(position.default),
-  positionDesktop: PropTypes__default.default.oneOf(position.default),
-  wrapperPosition: PropTypes__default.default.oneOf(position.default),
-  wrapperPositionMobile: PropTypes__default.default.oneOf(position.default),
-  wrapperPositionTablet: PropTypes__default.default.oneOf(position.default),
-  wrapperPositionDesktop: PropTypes__default.default.oneOf(position.default),
-  horizontalResizing: PropTypes__default.default.oneOf(horizontalResizeMode.default),
-  horizontalResizingMobile: PropTypes__default.default.oneOf(horizontalResizeMode.default),
-  horizontalResizingTablet: PropTypes__default.default.oneOf(horizontalResizeMode.default),
-  horizontalResizingDesktop: PropTypes__default.default.oneOf(horizontalResizeMode.default),
-  verticalResizing: PropTypes__default.default.oneOf(verticalResizeMode.default),
-  verticalResizingMobile: PropTypes__default.default.oneOf(verticalResizeMode.default),
-  verticalResizingTablet: PropTypes__default.default.oneOf(verticalResizeMode.default),
-  verticalResizingDesktop: PropTypes__default.default.oneOf(verticalResizeMode.default),
-  align: PropTypes__default.default.oneOf(align.default),
-  alignMobile: PropTypes__default.default.oneOf(align.default),
-  alignTablet: PropTypes__default.default.oneOf(align.default),
-  alignDesktop: PropTypes__default.default.oneOf(align.default),
-  alignDirection: PropTypes__default.default.oneOf(alignDirection.default),
-  alignDirectionMobile: PropTypes__default.default.oneOf(alignDirection.default),
-  alignDirectionTablet: PropTypes__default.default.oneOf(alignDirection.default),
-  alignDirectionDesktop: PropTypes__default.default.oneOf(alignDirection.default)
+  children: PropTypes.any,
+  className: PropTypes.string,
+  before: PropTypes.string,
+  after: PropTypes.string,
+  id: PropTypes.string,
+  fill: PropTypes.oneOf(fill.default),
+  fillMobile: PropTypes.oneOf(fill.default),
+  fillTablet: PropTypes.oneOf(fill.default),
+  fillDesktop: PropTypes.oneOf(fill.default),
+  type: PropTypes.string,
+  tag: PropTypes.string,
+  position: PropTypes.oneOf(position.default),
+  positionMobile: PropTypes.oneOf(position.default),
+  positionTablet: PropTypes.oneOf(position.default),
+  positionDesktop: PropTypes.oneOf(position.default),
+  wrapperPosition: PropTypes.oneOf(position.default),
+  wrapperPositionMobile: PropTypes.oneOf(position.default),
+  wrapperPositionTablet: PropTypes.oneOf(position.default),
+  wrapperPositionDesktop: PropTypes.oneOf(position.default),
+  horizontalResizing: PropTypes.oneOf(horizontalResizeMode.default),
+  horizontalResizingMobile: PropTypes.oneOf(horizontalResizeMode.default),
+  horizontalResizingTablet: PropTypes.oneOf(horizontalResizeMode.default),
+  horizontalResizingDesktop: PropTypes.oneOf(horizontalResizeMode.default),
+  verticalResizing: PropTypes.oneOf(verticalResizeMode.default),
+  verticalResizingMobile: PropTypes.oneOf(verticalResizeMode.default),
+  verticalResizingTablet: PropTypes.oneOf(verticalResizeMode.default),
+  verticalResizingDesktop: PropTypes.oneOf(verticalResizeMode.default),
+  align: PropTypes.oneOf(align.default),
+  alignMobile: PropTypes.oneOf(align.default),
+  alignTablet: PropTypes.oneOf(align.default),
+  alignDesktop: PropTypes.oneOf(align.default),
+  alignDirection: PropTypes.oneOf(alignDirection.default),
+  alignDirectionMobile: PropTypes.oneOf(alignDirection.default),
+  alignDirectionTablet: PropTypes.oneOf(alignDirection.default),
+  alignDirectionDesktop: PropTypes.oneOf(alignDirection.default)
 };
 Page.__docgenInfo = {
   "description": "",

package/dist/cjs/components/Pagination.js

@@ -1,32 +1,112 @@
 'use strict';
 
-var Pagination = require('../Pagination-DuykmIqr.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('lodash/ceil');
-require('react-paginate');
-require('../hooks/useDeviceTargetClass.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var ceil = require('lodash/ceil');
+var ReactPaginate = require('react-paginate');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var DropdownItem = require('../../DropdownItem-m4hdxHp6.js');
+var Icon = require('../../Icon-Co5Mtpt_.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../DropdownItem-2Nqtx3Vi.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Divider-D92wY8Fn.js');
-require('../Link-DRV1vzHd.js');
-require('../_tslib-CKiUdo7p.js');
-require('../Text-B0SULA92.js');
-require('../Icon-C7ZJyN5o.js');
+require('../../Divider-BjB5MD6u.js');
+require('../../Link-DQxoFKhI.js');
+require('../../tslib.es6-CKiUdo7p.js');
 require('react-inlinesvg');
-require('../Tooltip-DREz-tP6.js');
-require('../Title-Ckp30YSI.js');
+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 /**
+     * @deprecated The method should not be used
+     */
+    onPageChange = props.onPageChange, 
+    /**
+     * @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];
+    // 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);
+        setActiveDropdownItem(item);
+        setIsOpenDropdown(false);
+    }, [onPerPageCountChange]);
+    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'pagination_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'gap_',
+        propsKey: 'gap',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    // Calculate count of pages for all items
+    var paginationPagesCount = React.useMemo(function () {
+        if (allItemsCount && allItemsCount > 0) {
+            // Round up. "perPageCount" may be is a query params "limit"
+            return ceil(allItemsCount / perPageCount);
+        }
+        return 0;
+    }, [allItemsCount, perPageCount]);
+    // Index for pagination state
+    var paginationPageIndex = React.useMemo(function () {
+        var intPageNumber = parseInt(pageNumber);
+        // For pagination need index of page, not number
+        if (!isNaN(intPageNumber) && intPageNumber > 1) {
+            return intPageNumber - 1;
+        }
+        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", 
+                // previous button
+                previousLabel: previousLabel, breakLinkClassName: "pagination__item-link", 
+                // pages settings
+                forcePage: paginationPageIndex, containerClassName: clsx(className, 'pagination__container', justifyContentClass), 
+                // page item
+                pageClassName: "pagination__item", nextLinkClassName: "pagination__item-link", 
+                // 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));
+                                }) })] })] }))] }));
+}
+Pagination.defaultProps = {
+    pageNumber: 0,
+    perPageCount: 0,
+    allItemsCount: 0,
+    pageCountArray: [10, 20, 50, 100],
+    isPageCountDropdownReversed: false,
+    pageCountDropdownItemLabelColorActive: '',
+};
 
-
-exports.Pagination = Pagination.Pagination;
+exports.Pagination = Pagination;

package/dist/cjs/components/Panel.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var jsxRuntime = require('../jsx-runtime-BBxmckJR.js');
+var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Group = require('../Group-EFTg84wP.js');
-var Text = require('../Text-B0SULA92.js');
+var Group = require('../../Group-Buo_BxGT.js');
+var Text = require('../../Text-_YhyTsQ1.js');
 require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
@@ -17,10 +17,6 @@ require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-
 var panelConfig = {
     appearance: undefined,
     setAppearance: function (newComponent) {
@@ -92,7 +88,7 @@ function Panel(props) {
     // @ts-expect-error
     var _a = useStyles.useStyles(props), panelStyles = _a.styles, panelWrapperStyles = _a.wrapper;
     var appearanceConfig = appearance && panelConfig.appearance && panelConfig.appearance[appearance];
-    return (jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { className: clsx__default.default(className, 'panel', widthClass, heightClass, fillClass ||
+    return (jsxRuntime.jsxs(Group.Group, { className: clsx(className, 'panel', widthClass, heightClass, fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
                 "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
@@ -104,7 +100,7 @@ function Panel(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
                 "border-width_".concat(appearanceConfig.borderWidth)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "panel__header", children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "panel__footer", children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
+                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsxRuntime.jsx("div", { className: "panel__header", children: jsxRuntime.jsx(Text.Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsxRuntime.jsx("div", { className: clsx('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsxRuntime.jsx("div", { className: "panel__footer", children: jsxRuntime.jsx(Text.Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
 }
 Panel.defaultProps = {};
 

package/dist/cjs/components/Radio.js

@@ -1,17 +1,17 @@
 'use strict';
 
-var Radio = require('../Radio-Bvv59nEV.js');
-require('../jsx-runtime-BBxmckJR.js');
-require('react');
+var Radio = require('../../Radio-BQo97TZL.js');
+require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
+require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../Text-B0SULA92.js');
+require('../../Text-_YhyTsQ1.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');