@mailstep/design-system 0.6.5 → 0.6.7

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -63,7 +63,7 @@ var CommonGrid = function (_a) {
         gridBoxRef.current = node;
         !!gridRef && (gridRef.current = node);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
+    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), width: window.innerWidth, children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {

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/Blocks/CommonGrid/components/Table.d.ts

@@ -7,4 +7,6 @@ export declare const StyledDataRow: import("styled-components").StyledComponent<
 }, never>;
 export declare const Cell: (props: any) => JSX.Element;
 export declare const TextCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
-export declare const MessageCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
+export declare const MessageCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {
+    width: number;
+}, never>;

package/ui/Blocks/CommonGrid/components/Table.js

@@ -21,5 +21,5 @@ var StyledCell = styled.div(templateObject_2 || (templateObject_2 = __makeTempla
 export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : 'white'); });
 export var Cell = function (props) { return _jsx(StyledCell, __assign({ ref: props.innerRef }, props)); };
 export var TextCell = styled(Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
-export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: ", "px;\n  position: sticky;\n  left: 0;\n"], ["\n  width: ", "px;\n  position: sticky;\n  left: 0;\n"])), function (props) { return props.width; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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;
@@ -37759,7 +37761,9 @@ const Cs = /* @__PURE__ */ ho(V4e), ISe = ({
   text-overflow: ellipsis;
   white-space: nowrap;
 `, f6e = ae(Pi)`
-  width: 100%;
+  width: ${(e) => e.width}px;
+  position: sticky;
+  left: 0;
 `, h6e = ae.div`
   ${(e) => e.columnLayout != "no-scroll" && Pt`
       overflow-x: ${e.columnLayout == "sticky" ? "inherit" : "auto"};
@@ -46508,7 +46512,7 @@ const XAe = ae.div`
     ie.current = pe, I && (I.current = pe);
   }, []);
   return /* @__PURE__ */ b.jsxs(b.Fragment, { children: [
-    /* @__PURE__ */ b.jsx(gt.div, { className: C || "", children: /* @__PURE__ */ b.jsxs(m6e, { columnLayout: E, isLoading: i, totalColumnsWidth: ge, floatingChildren: X && /* @__PURE__ */ b.jsx(jh, { className: "dataRow", align: "center", children: /* @__PURE__ */ b.jsx(f6e, { align: "center", className: `gridMessage ${se}`, children: X }) }), ref: ce, children: [
+    /* @__PURE__ */ b.jsx(gt.div, { className: C || "", children: /* @__PURE__ */ b.jsxs(m6e, { columnLayout: E, isLoading: i, totalColumnsWidth: ge, floatingChildren: X && /* @__PURE__ */ b.jsx(jh, { className: "dataRow", align: "center", children: /* @__PURE__ */ b.jsx(f6e, { align: "center", className: `gridMessage ${se}`, width: window.innerWidth, children: X }) }), ref: ce, children: [
       /* @__PURE__ */ b.jsxs("div", { className: "gridHead", children: [
         c.find((pe) => pe.group) && /* @__PURE__ */ b.jsx(y6e, { actionColumn: u, columns: S, displayColumnsWidth: oe, groups: te }),
         /* @__PURE__ */ b.jsx(B9e, { columns: S, actionColumn: u, onAddSort: he, columnLayout: E, sortingValues: V, displayColumnsWidth: oe, handleResizeDrag: q, groups: te, handleDragEnd: t }),
@@ -50855,7 +50859,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%;
@@ -3083,7 +3083,9 @@ function print() { __p += __j.call(arguments, '') }
   text-overflow: ellipsis;
   white-space: nowrap;
 `,f5e=oe(fi)`
-  width: 100%;
+  width: ${e=>e.width}px;
+  position: sticky;
+  left: 0;
 `,h5e=oe.div`
   ${e=>e.columnLayout!="no-scroll"&&Et`
       overflow-x: ${e.columnLayout=="sticky"?"inherit":"auto"};
@@ -3406,7 +3408,7 @@ Avoid returning a new reference inside your input selector, e.g.
   > :nth-child(2) {
     transform: ${({isOpen:e})=>e?"rotate(45deg) translate(-1px, -1px)":"rotate(90deg) translate(-2px, 0)"};
   }
-`,KCe=({options:e,onSelect:t,onClick:r})=>{const[n,i]=I.useState(!1),o=I.useRef(null),l=I.useCallback(()=>i(!1),[]),u=I.useCallback(()=>{e&&(e==null?void 0:e.length)>0&&i(h=>!h),r==null||r()},[r,e]),c=I.useCallback(h=>{i(!1),t==null||t(h.value)},[t]),f=I.useMemo(()=>e==null?void 0:e.map(h=>({title:h.label,onClick:()=>c(h),link:"#",name:h.name})),[c,e]);return b.jsx(JCe,{children:b.jsxs(qCe,{ref:o,onClick:u,children:[b.jsxs(QCe,{isOpen:n,children:[b.jsx("span",{className:"line"}),b.jsx("span",{className:"line"})]}),n&&b.jsx(y9,{parentRef:o,onClose:l,placement:"left-end",children:b.jsx(XCe,{showMenu:!0,items:f})})]})})},$Ce={outline:"none"},rv=(...e)=>null,exe=Xn.uxState,txe={},rxe=({filters:e,handleDragEnd:t,gridSelectors:r,gridActions:n,isLoading:i,rowsData:o,hasColouredRows:l,columnsDefinitions:u,actionColumnDefinition:c,allowRowSelect:f,allowRowSelectOnAction:h,onRowAction:g,onRowEditClick:v,onRowReadClick:m,onRowClick:w,columnLayout:E="normal",displayColumnsDefinitions:S,className:C,gridRef:k,minColumnWidth:P,errorMessage:T,floatingButtonProps:D})=>{const{uxState:B=exe,columnConfig:F,columnsWidth:W=txe,columnsWidthVariant:G,page:J=1,filter:R,sorting:j,rowsPerPage:V=10}=r,{clearUxState:te,handleUxChange:Y,addFilter:ie=rv,addSorting:pe=rv,setColumnWidth:be=rv,setColumnsOrder:fe=rv}=n,Z=Vwe(o,B,Y);Fwe(o,B,te);let q,le="info";i&&(q=b.jsx(Tr,{id:"dataGrid.status.loadingData",message:"... loading data ..."})),!i&&(!o||o.length<1)&&(q=b.jsx(Tr,{id:"dataGrid.status.noDataFound",message:"No data found."})),!i&&T&&(q=T,le="error");const{displayColumnsWidth:se,totalColumnsWidth:ve,gridBoxRef:ae,handleResizeDrag:K}=Uwe(S,W,G,be,E,P),re=I.useMemo(()=>x6e(S),[S]),de=I.useCallback(ge=>{ae.current=ge,k&&(k.current=ge)},[]);return b.jsxs(b.Fragment,{children:[b.jsx(dt.div,{className:C||"",children:b.jsxs(m5e,{columnLayout:E,isLoading:i,totalColumnsWidth:ve,floatingChildren:q&&b.jsx(E1,{className:"dataRow",align:"center",children:b.jsx(f5e,{align:"center",className:`gridMessage ${le}`,children:q})}),ref:de,children:[b.jsxs("div",{className:"gridHead",children:[u.find(ge=>ge.group)&&b.jsx(y5e,{actionColumn:c,columns:S,displayColumnsWidth:se,groups:re}),b.jsx(Bwe,{columns:S,actionColumn:c,onAddSort:pe,columnLayout:E,sortingValues:j,displayColumnsWidth:se,handleResizeDrag:K,groups:re,handleDragEnd:t}),u.find(ge=>ge.filtering)&&b.jsx(F5e,{filters:e,columns:S,actionColumn:c,onChange:ie,filterValues:R,displayColumnsWidth:se,groups:re,rowsData:o,uxState:B,handleUxChange:Y})]}),b.jsx("div",{className:"body flx_1",style:$Ce,tabIndex:-1,onKeyDown:Z,children:!i&&o&&S&&o.map((ge,Te)=>{const Ce=V*J+(Te+1)-V;return b.jsx(Z5e,{rowData:ge,rowIndex:Ce,uxState:B,isEven:l&&(Te+1)%2===0,allowRowSelect:f,allowRowSelectOnAction:h,onRowAction:g,onUxChange:Y,onRowEditClick:v,onRowReadClick:m,onRowClick:w,columns:S,actionColumn:c,displayColumnsWidth:se,groups:re},ge.id)})})]})}),D&&b.jsx(KCe,{...D})]})},nxe=oe(dt.div)`
+`,KCe=({options:e,onSelect:t,onClick:r})=>{const[n,i]=I.useState(!1),o=I.useRef(null),l=I.useCallback(()=>i(!1),[]),u=I.useCallback(()=>{e&&(e==null?void 0:e.length)>0&&i(h=>!h),r==null||r()},[r,e]),c=I.useCallback(h=>{i(!1),t==null||t(h.value)},[t]),f=I.useMemo(()=>e==null?void 0:e.map(h=>({title:h.label,onClick:()=>c(h),link:"#",name:h.name})),[c,e]);return b.jsx(JCe,{children:b.jsxs(qCe,{ref:o,onClick:u,children:[b.jsxs(QCe,{isOpen:n,children:[b.jsx("span",{className:"line"}),b.jsx("span",{className:"line"})]}),n&&b.jsx(y9,{parentRef:o,onClose:l,placement:"left-end",children:b.jsx(XCe,{showMenu:!0,items:f})})]})})},$Ce={outline:"none"},rv=(...e)=>null,exe=Xn.uxState,txe={},rxe=({filters:e,handleDragEnd:t,gridSelectors:r,gridActions:n,isLoading:i,rowsData:o,hasColouredRows:l,columnsDefinitions:u,actionColumnDefinition:c,allowRowSelect:f,allowRowSelectOnAction:h,onRowAction:g,onRowEditClick:v,onRowReadClick:m,onRowClick:w,columnLayout:E="normal",displayColumnsDefinitions:S,className:C,gridRef:k,minColumnWidth:P,errorMessage:T,floatingButtonProps:D})=>{const{uxState:B=exe,columnConfig:F,columnsWidth:W=txe,columnsWidthVariant:G,page:J=1,filter:R,sorting:j,rowsPerPage:V=10}=r,{clearUxState:te,handleUxChange:Y,addFilter:ie=rv,addSorting:pe=rv,setColumnWidth:be=rv,setColumnsOrder:fe=rv}=n,Z=Vwe(o,B,Y);Fwe(o,B,te);let q,le="info";i&&(q=b.jsx(Tr,{id:"dataGrid.status.loadingData",message:"... loading data ..."})),!i&&(!o||o.length<1)&&(q=b.jsx(Tr,{id:"dataGrid.status.noDataFound",message:"No data found."})),!i&&T&&(q=T,le="error");const{displayColumnsWidth:se,totalColumnsWidth:ve,gridBoxRef:ae,handleResizeDrag:K}=Uwe(S,W,G,be,E,P),re=I.useMemo(()=>x6e(S),[S]),de=I.useCallback(ge=>{ae.current=ge,k&&(k.current=ge)},[]);return b.jsxs(b.Fragment,{children:[b.jsx(dt.div,{className:C||"",children:b.jsxs(m5e,{columnLayout:E,isLoading:i,totalColumnsWidth:ve,floatingChildren:q&&b.jsx(E1,{className:"dataRow",align:"center",children:b.jsx(f5e,{align:"center",className:`gridMessage ${le}`,width:window.innerWidth,children:q})}),ref:de,children:[b.jsxs("div",{className:"gridHead",children:[u.find(ge=>ge.group)&&b.jsx(y5e,{actionColumn:c,columns:S,displayColumnsWidth:se,groups:re}),b.jsx(Bwe,{columns:S,actionColumn:c,onAddSort:pe,columnLayout:E,sortingValues:j,displayColumnsWidth:se,handleResizeDrag:K,groups:re,handleDragEnd:t}),u.find(ge=>ge.filtering)&&b.jsx(F5e,{filters:e,columns:S,actionColumn:c,onChange:ie,filterValues:R,displayColumnsWidth:se,groups:re,rowsData:o,uxState:B,handleUxChange:Y})]}),b.jsx("div",{className:"body flx_1",style:$Ce,tabIndex:-1,onKeyDown:Z,children:!i&&o&&S&&o.map((ge,Te)=>{const Ce=V*J+(Te+1)-V;return b.jsx(Z5e,{rowData:ge,rowIndex:Ce,uxState:B,isEven:l&&(Te+1)%2===0,allowRowSelect:f,allowRowSelectOnAction:h,onRowAction:g,onUxChange:Y,onRowEditClick:v,onRowReadClick:m,onRowClick:w,columns:S,actionColumn:c,displayColumnsWidth:se,groups:re},ge.id)})})]})}),D&&b.jsx(KCe,{...D})]})},nxe=oe(dt.div)`
   padding-bottom: 11px;
   padding-top: 10px;
   position: ${({isFixed:e})=>e?"fixed":"relative"};
@@ -3789,7 +3791,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
  *