@mailstep/design-system 0.6.5 → 0.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -61,6 +61,6 @@ var StyledCommonGrid = function (props) {
         gridSelectors: gridSelectors,
         onClose: onClose,
     }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig, handleDragEnd = _d.handleDragEnd, onCloseForm = _d.onCloseForm, displayColumnsDefinitions = _d.displayColumnsDefinitions, manageColumnsFormDefinitions = _d.manageColumnsFormDefinitions;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", sizing: "iconLg", appearance: "ghost", icon: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
+    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", sizing: "iconLg", appearance: "ghost", icon: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
 };
 export default StyledCommonGrid;

package/ui/Elements/Pagination/Pagination.d.ts

@@ -1,9 +1,11 @@
-export type Props = {
+export type PaginationProps = {
     page?: number;
     itemCount?: number;
     itemPerPage: number;
+    radius?: number;
+    rate?: number;
     onPageChange?: (number: number, rows: number) => void;
     customPaginationHandler?: (page: number, rows: number) => void;
 };
-declare const Pagination: ({ onPageChange, itemPerPage, itemCount, page, customPaginationHandler }: Props) => JSX.Element;
+declare const Pagination: ({ onPageChange, itemPerPage, itemCount, page, radius, rate, customPaginationHandler, }: PaginationProps) => JSX.Element;
 export default Pagination;

package/ui/Elements/Pagination/Pagination.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled';
 var Pagination = function (_a) {
-    var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page, customPaginationHandler = _a.customPaginationHandler;
+    var onPageChange = _a.onPageChange, _b = _a.itemPerPage, itemPerPage = _b === void 0 ? 3 : _b, _c = _a.itemCount, itemCount = _c === void 0 ? 0 : _c, page = _a.page, _d = _a.radius, radius = _d === void 0 ? 5 : _d, _e = _a.rate, rate = _e === void 0 ? 4 : _e, customPaginationHandler = _a.customPaginationHandler;
     var setPage = useCallback(function (number) { return function () {
         if (customPaginationHandler) {
             customPaginationHandler(number, itemPerPage);
@@ -13,31 +13,27 @@ var Pagination = function (_a) {
         }
     }; }, [itemPerPage, onPageChange, customPaginationHandler]);
     var pageX = page !== null && page !== void 0 ? page : 1;
-    var pageCount = Math.max(Math.ceil((itemCount !== null && itemCount !== void 0 ? itemCount : 0) / (itemPerPage !== null && itemPerPage !== void 0 ? itemPerPage : 3)), 1);
+    var pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
     var arrayOfPages = useMemo(function () {
         var pageNumbers = Array.from({ length: pageCount }, function (_, i) { return i + 1; });
         // first and last page are still visible
         // if number of pages is less than 6 (display all pages without dots and duplication of first and last char)
-        if (pageCount < 6) {
+        if (pageCount < radius + 1) {
             return pageNumbers.slice(1, pageCount - 1);
-            // if current page is less than 5 (display first 5 pages)
+            // if current page is less than radius (display first radius pages)
         }
-        else if (pageX < 5) {
-            return pageNumbers.slice(1, 5);
-            // display last 5 pages
+        else if (pageX < radius) {
+            return pageNumbers.slice(1, Math.min(pageX + rate, radius));
+            // display last radius pages
         }
-        else if (pageX > pageCount - 4) {
-            return pageNumbers.slice(pageCount - 5, pageCount - 1);
-        }
-        else if (window.innerWidth < 768) {
-            // display dispersion of 1 chars from current page (part between dots)
-            return pageNumbers.slice(pageX - 2, pageX + 1);
+        else if (pageX > pageCount - Math.floor(radius / 2)) {
+            return pageNumbers.slice(pageCount - rate - 1, pageCount - 1);
         }
         else {
             // display dispersion of 2 chars from current page (part between dots)
-            return pageNumbers.slice(pageX - 3, pageX + 2);
+            return pageNumbers.slice(pageX - Math.ceil(radius / 2), Math.min(pageX + Math.floor(radius / 2), pageCount - 1));
         }
     }, [pageCount, pageX]);
-    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), pageX >= 5 && pageCount > 6 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), pageX < pageCount - 3 && pageCount > 6 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
+    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), arrayOfPages[0] > 2 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), arrayOfPages[arrayOfPages.length - 1] < pageCount - 1 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
 };
 export default Pagination;

package/ui/Elements/Pagination/index.d.ts

@@ -1,3 +1,4 @@
 import Pagination from './Pagination';
+export type { PaginationProps } from './Pagination';
 export { Pagination };
 export default Pagination;

package/ui/Elements/Pagination/stories/Pagination.stories.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
+import { PaginationProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ onPageChange, itemPerPage, itemCount, page, customPaginationHandler }: import("../Pagination").Props) => JSX.Element;
+    component: ({ onPageChange, itemPerPage, itemCount, page, radius, rate, customPaginationHandler, }: PaginationProps) => JSX.Element;
     tags: string[];
     argTypes: {};
 };
@@ -10,3 +10,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const ManyPages: Story;
+export declare const Shorter: Story;

package/ui/Elements/Pagination/stories/Pagination.stories.js

@@ -1,3 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Pagination } from '../';
 var meta = {
     title: 'Elements/Pagination',
@@ -6,17 +19,30 @@ var meta = {
     argTypes: {},
 };
 export default meta;
+var withSetState = function (arg) {
+    var _a = useState(1), page = _a[0], setPage = _a[1];
+    return _jsx(Pagination, __assign({}, arg, { page: page, onPageChange: setPage }));
+};
 export var Default = {
     args: {
         itemCount: 100,
         itemPerPage: 8,
-        page: 1,
     },
+    render: withSetState,
 };
 export var ManyPages = {
     args: {
         itemCount: 1000,
         itemPerPage: 8,
-        page: 1,
     },
+    render: withSetState,
+};
+export var Shorter = {
+    args: {
+        itemCount: 100,
+        itemPerPage: 8,
+        radius: 3,
+        rate: 1,
+    },
+    render: withSetState,
 };

package/ui/Elements/Spinner/styles.js

@@ -2,8 +2,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { th } from '@xstyled/styled-components';
-import { keyframes } from 'styled-components';
+import styled, { th, keyframes } from '@xstyled/styled-components';
 var KeyframesCircularDash = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
 var KeyframesCircularRotate = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
 export var Svg = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"])), function (_a) {

package/ui/index.es.js

@@ -17519,31 +17519,33 @@ const Cce = (e, t) => Object.entries(e).map(([r, n]) => `${n} ${r}`).join(", "),
   }
 `, Vce = ({
   onPageChange: e,
-  itemPerPage: t,
-  itemCount: r,
+  itemPerPage: t = 3,
+  itemCount: r = 0,
   page: n,
-  customPaginationHandler: i
+  radius: i = 5,
+  rate: o = 4,
+  customPaginationHandler: l
 }) => {
-  const o = Oe((f) => () => {
-    if (i) {
-      i(f, t);
+  const c = Oe((g) => () => {
+    if (l) {
+      l(g, t);
       return;
     }
-    e && e(f, t);
-  }, [t, e, i]), l = n ?? 1, c = Math.max(Math.ceil((r ?? 0) / (t ?? 3)), 1), u = it(() => {
-    const f = Array.from({
-      length: c
-    }, (h, g) => g + 1);
-    return c < 6 ? f.slice(1, c - 1) : l < 5 ? f.slice(1, 5) : l > c - 4 ? f.slice(c - 5, c - 1) : window.innerWidth < 768 ? f.slice(l - 2, l + 1) : f.slice(l - 3, l + 2);
-  }, [c, l]);
+    e && e(g, t);
+  }, [t, e, l]), u = n ?? 1, f = Math.max(Math.ceil(r / t), 1), h = it(() => {
+    const g = Array.from({
+      length: f
+    }, (v, m) => m + 1);
+    return f < i + 1 ? g.slice(1, f - 1) : u < i ? g.slice(1, Math.min(u + o, i)) : u > f - Math.floor(i / 2) ? g.slice(f - o - 1, f - 1) : g.slice(u - Math.ceil(i / 2), Math.min(u + Math.floor(i / 2), f - 1));
+  }, [f, u]);
   return /* @__PURE__ */ b.jsxs(Bce, { children: [
-    /* @__PURE__ */ b.jsx(uk, { disabled: l <= 1, onClick: o(l - 1), children: /* @__PURE__ */ b.jsx(dk, { icon: "goLeft", isActive: l > 1 }) }),
-    /* @__PURE__ */ b.jsx(L8, { isCurrent: l === 1, onClick: o(1), children: 1 }),
-    l >= 5 && c > 6 && /* @__PURE__ */ b.jsx(fk, { children: "..." }),
-    u == null ? void 0 : u.map((f) => /* @__PURE__ */ b.jsx(L8, { isCurrent: l === f, onClick: o(f ?? 1), children: f }, f)),
-    l < c - 3 && c > 6 && /* @__PURE__ */ b.jsx(fk, { children: "..." }),
-    c !== 1 && /* @__PURE__ */ b.jsx(L8, { isCurrent: l === c, onClick: o(c), children: c }),
-    /* @__PURE__ */ b.jsx(uk, { disabled: l >= c, onClick: o(l + 1), children: /* @__PURE__ */ b.jsx(dk, { icon: "goRight", isActive: l < c }) })
+    /* @__PURE__ */ b.jsx(uk, { disabled: u <= 1, onClick: c(u - 1), children: /* @__PURE__ */ b.jsx(dk, { icon: "goLeft", isActive: u > 1 }) }),
+    /* @__PURE__ */ b.jsx(L8, { isCurrent: u === 1, onClick: c(1), children: 1 }),
+    h[0] > 2 && /* @__PURE__ */ b.jsx(fk, { children: "..." }),
+    h == null ? void 0 : h.map((g) => /* @__PURE__ */ b.jsx(L8, { isCurrent: u === g, onClick: c(g ?? 1), children: g }, g)),
+    h[h.length - 1] < f - 1 && /* @__PURE__ */ b.jsx(fk, { children: "..." }),
+    f !== 1 && /* @__PURE__ */ b.jsx(L8, { isCurrent: u === f, onClick: c(f), children: f }),
+    /* @__PURE__ */ b.jsx(uk, { disabled: u >= f, onClick: c(u + 1), children: /* @__PURE__ */ b.jsx(dk, { icon: "goRight", isActive: u < f }) })
   ] });
 }, jce = ae.div`
   position: relative;
@@ -50855,7 +50857,7 @@ const KCe = ki.div`
     /* @__PURE__ */ b.jsx(sM, { children: /* @__PURE__ */ b.jsxs(aCe, { ref: I, isFixed: !!S, children: [
       o && /* @__PURE__ */ b.jsx(YCe, { rowsData: w, onBatchAction: i, gridActions: v, gridSelectors: m, actionColumn: E, processCheckedValues: o, processCheckedValuesTitle: l }),
       /* @__PURE__ */ b.jsxs(gt.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? "60px" : "32px", children: [
-        /* @__PURE__ */ b.jsx(Vce, { page: m == null ? void 0 : m.page, itemCount: g == null ? void 0 : g.totalRowsCount, itemPerPage: (m == null ? void 0 : m.rowsPerPage) || 10, onPageChange: v == null ? void 0 : v.setPage, customPaginationHandler: h }),
+        /* @__PURE__ */ b.jsx(Vce, { page: m == null ? void 0 : m.page, itemCount: g == null ? void 0 : g.totalRowsCount, itemPerPage: (m == null ? void 0 : m.rowsPerPage) || 10, onPageChange: v == null ? void 0 : v.setPage, customPaginationHandler: h, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }),
         /* @__PURE__ */ b.jsx(qCe, { gridActions: v, gridSelectors: m, customPaginationHandler: h })
       ] })
     ] }) }),

package/ui/index.umd.js

@@ -1960,7 +1960,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   &:hover {
     color: blue2;
   }
-`,nN=({onPageChange:e,itemPerPage:t,itemCount:r,page:n,customPaginationHandler:i})=>{const o=I.useCallback(f=>()=>{if(i){i(f,t);return}e&&e(f,t)},[t,e,i]),l=n??1,u=Math.max(Math.ceil((r??0)/(t??3)),1),c=I.useMemo(()=>{const f=Array.from({length:u},(h,g)=>g+1);return u<6?f.slice(1,u-1):l<5?f.slice(1,5):l>u-4?f.slice(u-5,u-1):window.innerWidth<768?f.slice(l-2,l+1):f.slice(l-3,l+2)},[u,l]);return b.jsxs(Mce,{children:[b.jsx(eN,{disabled:l<=1,onClick:o(l-1),children:b.jsx(tN,{icon:"goLeft",isActive:l>1})}),b.jsx(jb,{isCurrent:l===1,onClick:o(1),children:1}),l>=5&&u>6&&b.jsx(rN,{children:"..."}),c==null?void 0:c.map(f=>b.jsx(jb,{isCurrent:l===f,onClick:o(f??1),children:f},f)),l<u-3&&u>6&&b.jsx(rN,{children:"..."}),u!==1&&b.jsx(jb,{isCurrent:l===u,onClick:o(u),children:u}),b.jsx(eN,{disabled:l>=u,onClick:o(l+1),children:b.jsx(tN,{icon:"goRight",isActive:l<u})})]})},Nce=oe.div`
+`,nN=({onPageChange:e,itemPerPage:t=3,itemCount:r=0,page:n,radius:i=5,rate:o=4,customPaginationHandler:l})=>{const u=I.useCallback(g=>()=>{if(l){l(g,t);return}e&&e(g,t)},[t,e,l]),c=n??1,f=Math.max(Math.ceil(r/t),1),h=I.useMemo(()=>{const g=Array.from({length:f},(v,m)=>m+1);return f<i+1?g.slice(1,f-1):c<i?g.slice(1,Math.min(c+o,i)):c>f-Math.floor(i/2)?g.slice(f-o-1,f-1):g.slice(c-Math.ceil(i/2),Math.min(c+Math.floor(i/2),f-1))},[f,c]);return b.jsxs(Mce,{children:[b.jsx(eN,{disabled:c<=1,onClick:u(c-1),children:b.jsx(tN,{icon:"goLeft",isActive:c>1})}),b.jsx(jb,{isCurrent:c===1,onClick:u(1),children:1}),h[0]>2&&b.jsx(rN,{children:"..."}),h==null?void 0:h.map(g=>b.jsx(jb,{isCurrent:c===g,onClick:u(g??1),children:g},g)),h[h.length-1]<f-1&&b.jsx(rN,{children:"..."}),f!==1&&b.jsx(jb,{isCurrent:c===f,onClick:u(f),children:f}),b.jsx(eN,{disabled:c>=f,onClick:u(c+1),children:b.jsx(tN,{icon:"goRight",isActive:c<f})})]})},Nce=oe.div`
   position: relative;
   display: flex;
   width: 100%;
@@ -3789,7 +3789,7 @@ function print() { __p += __j.call(arguments, '') }
   border: 1px solid ${ne.color("lightGray6")};
   border-radius: 8px;
   margin-bottom: 15px;
-`,Kxe=({column:e,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:n,innerRef:i,draggableProps:o,dragHandleProps:l})=>{var m,w,E,S;const[u,c]=I.useState((t==null?void 0:t.includes(e.name))??!1),f=I.useMemo(()=>({...o==null?void 0:o.style}),[o]),h=qxe.isObject(e==null?void 0:e.title)&&"props"in e.title&&((m=e.title)==null?void 0:m.props)&&pt._({id:(E=(w=e.title)==null?void 0:w.props)==null?void 0:E.id,message:(S=e.title)==null?void 0:S.props.message}),g=h&&h.toLocaleLowerCase().includes(n.toLocaleLowerCase()),v=I.useCallback(()=>{r(C=>({...C,[e.name]:u?{isHidden:!0}:{}})),c(!u)},[r,u,e.name]);return b.jsxs(Qxe,{$isVisible:g,...o,...l,ref:i,style:f,children:[b.jsxs(dt.div,{display:"flex",alignItems:"center",children:[b.jsx(dt.div,{w:"28px",children:b.jsx(Zf,{name:"",variant:"grid",onChange:v,spaceAround:!1,checked:u})}),b.jsx(Mp,{variant:"medium",ml:"8px",children:h})]}),b.jsx(tO,{})]})},$xe=({columns:e,columnsConfigValues:t,setColumnsConfigOptions:r,handleDragEnd:n})=>{const[i,o]=I.useState(""),l=I.useCallback(c=>{o(c.target.value)},[o]),u=I.useCallback(()=>{o("")},[o]);return b.jsxs(dt.div,{children:[b.jsx(tc,{icon:"search",type:"text",value:i,placeholder:pt._({id:"manageColumn.searchPlaceholder",message:"Find column..."}),onChange:l,onClear:u,variant:"gray"}),b.jsx(NV,{onDragEnd:n,children:b.jsx(U7,{droppableId:"droppable",direction:"vertical",children:c=>b.jsx(dt.div,{h:"400px",overflowY:"scroll",mt:"20px",ref:c.innerRef,...c.droppableProps,children:e==null?void 0:e.map((f,h)=>b.jsx(YV,{draggableId:f.name,index:h,isDragDisabled:!!i,children:(g,v)=>b.jsx(Kxe,{column:f,innerRef:g.innerRef,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:i,draggableProps:g.draggableProps,dragHandleProps:g.dragHandleProps},h)},f.name))})})})]})},eEe=e=>{const{optimizeFilters:t=!1,extraControlButtons:r,eshopSelect:n,onBatchAction:i,processCheckedValues:o,processCheckedValuesTitle:l,hideControlButtons:u,floatingButtonProps:c,queryRowsParam:f,customPaginationHandler:h,...g}=e,{gridActions:v,gridSelectors:m,rowsData:w,actionColumnDefinition:E}=g,{gridHeight:S,gridRef:C,paginationRef:k}=Qhe();I.useEffect(()=>{var pe;if(!f&&S&&S>0){const be=Math.max(Math.floor(S/S6e-2),E6e);be&&((pe=v.setRowsPerPage)==null||pe.call(v,be))}},[S,v,f]);const P=o5e(g),T=I.useMemo(()=>I6e(t),[t]),D=P.columnsDefinitions,{onOpen:B,isOpen:F,onClose:W}=ab(),{columnsConfigValues:G,setColumnsConfigOptions:J,onConfirmForm:R,resetColumnConfig:j,handleDragEnd:V,onCloseForm:te,displayColumnsDefinitions:Y,manageColumnsFormDefinitions:ie}=s5e({columns:D,gridActions:v,gridSelectors:m,onClose:W});return b.jsxs(ixe,{children:[b.jsxs(axe,{children:[b.jsx(Pj,{children:b.jsxs(oxe,{className:"buttonsStrip",children:[!u&&b.jsx(bxe,{extraControlButtons:r,gridActions:v,gridSelectors:m,eshopSelect:n}),b.jsx(sxe,{type:"button",sizing:"iconLg",appearance:"ghost",icon:b.jsx($k,{}),onClick:B,children:b.jsx(Mp,{variant:"semiBold",children:b.jsx(Tr,{id:"manageColumn.title",message:"Manage column"})})})]})}),b.jsx(lxe,{...g,...P,filters:T,gridRef:C,height:S,floatingButtonProps:c,handleDragEnd:V(!1),displayColumnsDefinitions:Y,hasColouredRows:!0})]}),b.jsx(Pj,{children:b.jsxs(nxe,{ref:k,isFixed:!!S,children:[o&&b.jsx(Gxe,{rowsData:w,onBatchAction:i,gridActions:v,gridSelectors:m,actionColumn:E,processCheckedValues:o,processCheckedValuesTitle:l}),b.jsxs(dt.div,{display:"flex",justifyContent:"center",alignItems:"center",className:"paginatorWrapper",w:"100%",h:window.innerWidth>1204?"60px":"32px",children:[b.jsx(nN,{page:m==null?void 0:m.page,itemCount:g==null?void 0:g.totalRowsCount,itemPerPage:(m==null?void 0:m.rowsPerPage)||10,onPageChange:v==null?void 0:v.setPage,customPaginationHandler:h}),b.jsx(Xxe,{gridActions:v,gridSelectors:m,customPaginationHandler:h})]})]})}),F&&b.jsx(ib,{title:b.jsx(Tr,{id:"manageColumn.title",message:"Manage columns"}),onClose:te,onCancel:te,onExtraAction:j,onConfirm:R,width:"auto",minWidth:"350px",hasFooter:!0,extraActionLabel:b.jsx(Tr,{id:"dataGrid.buttonClearConfig",message:"Reset config"}),cancelLabel:b.jsx(Tr,{id:"form.buttonCancel",message:"Cancel"}),confirmLabel:b.jsx(Tr,{id:"form.buttonConfirm",message:"Confirm"}),children:b.jsx($xe,{columns:ie,columnsConfigValues:G,setColumnsConfigOptions:J,handleDragEnd:V(!0)})})]})};var w9={};/**
+`,Kxe=({column:e,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:n,innerRef:i,draggableProps:o,dragHandleProps:l})=>{var m,w,E,S;const[u,c]=I.useState((t==null?void 0:t.includes(e.name))??!1),f=I.useMemo(()=>({...o==null?void 0:o.style}),[o]),h=qxe.isObject(e==null?void 0:e.title)&&"props"in e.title&&((m=e.title)==null?void 0:m.props)&&pt._({id:(E=(w=e.title)==null?void 0:w.props)==null?void 0:E.id,message:(S=e.title)==null?void 0:S.props.message}),g=h&&h.toLocaleLowerCase().includes(n.toLocaleLowerCase()),v=I.useCallback(()=>{r(C=>({...C,[e.name]:u?{isHidden:!0}:{}})),c(!u)},[r,u,e.name]);return b.jsxs(Qxe,{$isVisible:g,...o,...l,ref:i,style:f,children:[b.jsxs(dt.div,{display:"flex",alignItems:"center",children:[b.jsx(dt.div,{w:"28px",children:b.jsx(Zf,{name:"",variant:"grid",onChange:v,spaceAround:!1,checked:u})}),b.jsx(Mp,{variant:"medium",ml:"8px",children:h})]}),b.jsx(tO,{})]})},$xe=({columns:e,columnsConfigValues:t,setColumnsConfigOptions:r,handleDragEnd:n})=>{const[i,o]=I.useState(""),l=I.useCallback(c=>{o(c.target.value)},[o]),u=I.useCallback(()=>{o("")},[o]);return b.jsxs(dt.div,{children:[b.jsx(tc,{icon:"search",type:"text",value:i,placeholder:pt._({id:"manageColumn.searchPlaceholder",message:"Find column..."}),onChange:l,onClear:u,variant:"gray"}),b.jsx(NV,{onDragEnd:n,children:b.jsx(U7,{droppableId:"droppable",direction:"vertical",children:c=>b.jsx(dt.div,{h:"400px",overflowY:"scroll",mt:"20px",ref:c.innerRef,...c.droppableProps,children:e==null?void 0:e.map((f,h)=>b.jsx(YV,{draggableId:f.name,index:h,isDragDisabled:!!i,children:(g,v)=>b.jsx(Kxe,{column:f,innerRef:g.innerRef,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:i,draggableProps:g.draggableProps,dragHandleProps:g.dragHandleProps},h)},f.name))})})})]})},eEe=e=>{const{optimizeFilters:t=!1,extraControlButtons:r,eshopSelect:n,onBatchAction:i,processCheckedValues:o,processCheckedValuesTitle:l,hideControlButtons:u,floatingButtonProps:c,queryRowsParam:f,customPaginationHandler:h,...g}=e,{gridActions:v,gridSelectors:m,rowsData:w,actionColumnDefinition:E}=g,{gridHeight:S,gridRef:C,paginationRef:k}=Qhe();I.useEffect(()=>{var pe;if(!f&&S&&S>0){const be=Math.max(Math.floor(S/S6e-2),E6e);be&&((pe=v.setRowsPerPage)==null||pe.call(v,be))}},[S,v,f]);const P=o5e(g),T=I.useMemo(()=>I6e(t),[t]),D=P.columnsDefinitions,{onOpen:B,isOpen:F,onClose:W}=ab(),{columnsConfigValues:G,setColumnsConfigOptions:J,onConfirmForm:R,resetColumnConfig:j,handleDragEnd:V,onCloseForm:te,displayColumnsDefinitions:Y,manageColumnsFormDefinitions:ie}=s5e({columns:D,gridActions:v,gridSelectors:m,onClose:W});return b.jsxs(ixe,{children:[b.jsxs(axe,{children:[b.jsx(Pj,{children:b.jsxs(oxe,{className:"buttonsStrip",children:[!u&&b.jsx(bxe,{extraControlButtons:r,gridActions:v,gridSelectors:m,eshopSelect:n}),b.jsx(sxe,{type:"button",sizing:"iconLg",appearance:"ghost",icon:b.jsx($k,{}),onClick:B,children:b.jsx(Mp,{variant:"semiBold",children:b.jsx(Tr,{id:"manageColumn.title",message:"Manage column"})})})]})}),b.jsx(lxe,{...g,...P,filters:T,gridRef:C,height:S,floatingButtonProps:c,handleDragEnd:V(!1),displayColumnsDefinitions:Y,hasColouredRows:!0})]}),b.jsx(Pj,{children:b.jsxs(nxe,{ref:k,isFixed:!!S,children:[o&&b.jsx(Gxe,{rowsData:w,onBatchAction:i,gridActions:v,gridSelectors:m,actionColumn:E,processCheckedValues:o,processCheckedValuesTitle:l}),b.jsxs(dt.div,{display:"flex",justifyContent:"center",alignItems:"center",className:"paginatorWrapper",w:"100%",h:window.innerWidth>1204?"60px":"32px",children:[b.jsx(nN,{page:m==null?void 0:m.page,itemCount:g==null?void 0:g.totalRowsCount,itemPerPage:(m==null?void 0:m.rowsPerPage)||10,onPageChange:v==null?void 0:v.setPage,customPaginationHandler:h,radius:window.innerWidth<768?3:5,rate:window.innerWidth<768?1:4}),b.jsx(Xxe,{gridActions:v,gridSelectors:m,customPaginationHandler:h})]})]})}),F&&b.jsx(ib,{title:b.jsx(Tr,{id:"manageColumn.title",message:"Manage columns"}),onClose:te,onCancel:te,onExtraAction:j,onConfirm:R,width:"auto",minWidth:"350px",hasFooter:!0,extraActionLabel:b.jsx(Tr,{id:"dataGrid.buttonClearConfig",message:"Reset config"}),cancelLabel:b.jsx(Tr,{id:"form.buttonCancel",message:"Cancel"}),confirmLabel:b.jsx(Tr,{id:"form.buttonConfirm",message:"Confirm"}),children:b.jsx($xe,{columns:ie,columnsConfigValues:G,setColumnsConfigOptions:J,handleDragEnd:V(!0)})})]})};var w9={};/**
  * @license React
  * use-sync-external-store-with-selector.production.min.js
  *