@mailstep/design-system 0.5.0-beta.37 → 0.5.0-beta.39

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useGetGridHeight from './hooks/useGetGridHeight';
 import { useEffect, useMemo } from 'react';
-import { getFilters, GRID_MIN_ROWS } from './utils';
+import { getFilters, GRID_MIN_ROWS, rowHeight } from './utils';
 import useEditReadAsColumn from './hooks/useEditReadAsColumn';
 import { useModal } from '../Modal/hooks/useModal';
 import useManageColumn from './hooks/useManageColumn';
@@ -40,18 +40,17 @@ import Modal from '../Modal';
 import ManageColumnForm from './components/ManageColumnForm';
 import { Trans } from '@lingui/react';
 var StyledCommonGrid = function (props) {
-    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps"]);
+    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
-    var rowHeight = 40;
     var _b = useGetGridHeight(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
     useEffect(function () {
         var _a;
-        if (gridHeight && gridHeight > 0) {
+        if (!queryRowsParam && gridHeight && gridHeight > 0) {
             // Only main grids (without form grids on new pages)
             var numberOfRows = Math.max(Math.floor(gridHeight / rowHeight - 2), GRID_MIN_ROWS);
             numberOfRows && ((_a = gridActions.setRowsPerPage) === null || _a === void 0 ? void 0 : _a.call(gridActions, numberOfRows));
         }
-    }, [gridHeight, gridActions, gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage]);
+    }, [gridHeight, gridActions, queryRowsParam]);
     var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
     var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
     var columns = modifiedPassDownProps.columnsDefinitions;
@@ -62,6 +61,6 @@ var StyledCommonGrid = function (props) {
         gridSelectors: gridSelectors,
         onClose: onClose,
     }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig;
-    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", appearance: "ghost", icon: _jsx(Rows, {}), onClick: openManageColumnForm, children: _jsx(H6, { children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, hasColouredRows: true, floatingButtonProps: floatingButtonProps }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isAbsolute: !!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 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, 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: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
+    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", appearance: "ghost", icon: _jsx(Rows, {}), onClick: openManageColumnForm, children: _jsx(H6, { children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, hasColouredRows: true, floatingButtonProps: floatingButtonProps }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isAbsolute: !!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: onClose, onCancel: onClose, 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: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
 };
 export default StyledCommonGrid;

package/ui/Blocks/CommonGrid/components/TablePagination/TablePagination.d.ts

@@ -2,6 +2,7 @@ import { GridActionsType, GridSelectorsType } from '../../types';
 type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
+    customPaginationHandler?: (page: number, rows: number) => void;
 };
-declare const TablePagination: ({ gridActions, gridSelectors }: Props) => JSX.Element;
+declare const TablePagination: ({ gridActions, gridSelectors, customPaginationHandler }: Props) => JSX.Element;
 export default TablePagination;

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

@@ -14,13 +14,15 @@ var rowsPerPageOptionValues = [10, 20, 50, 100];
 var LABEL_VALUE = '_label_';
 var filterRowsOption = function (option) { return option.value !== LABEL_VALUE; };
 var TablePagination = function (_a) {
-    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors;
+    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, customPaginationHandler = _a.customPaginationHandler;
     var setRowsPerPage = gridActions.setRowsPerPage;
+    var page = gridSelectors.page;
     var onSetRowsPerPage = useCallback(function (option) {
         if (option && 'value' in option) {
             setRowsPerPage === null || setRowsPerPage === void 0 ? void 0 : setRowsPerPage(Number(option.value));
+            customPaginationHandler === null || customPaginationHandler === void 0 ? void 0 : customPaginationHandler(page !== null && page !== void 0 ? page : 1, Number(option.value));
         }
-    }, [setRowsPerPage]);
+    }, [setRowsPerPage, page, customPaginationHandler]);
     var rowsPerPageOptions = useMemo(function () {
         return rowsPerPageOptionValues.map(function (value) { return ({ value: value, label: value }); });
     }, []);

package/ui/Blocks/CommonGrid/types.d.ts

@@ -297,6 +297,8 @@ export type GridProps = Omit<CommonGridProps, 'filters'> & {
     processCheckedValues?: () => void;
     processCheckedValuesTitle?: string;
     hideControlButtons?: boolean;
+    queryRowsParam?: number | string;
+    customPaginationHandler?: (page: number, rows: number) => void;
 };
 export type PageGridProps = Omit<GridProps, 'rowsData' | 'totalRowsCount' | 'columnsDefinitions' | 'actionColumnDefinition' | 'hideColumnConfig' | 'minColumnWidth' | 'columnLayout'>;
 export type Item = {

package/ui/Blocks/CommonGrid/utils/index.d.ts

@@ -16,4 +16,5 @@ export declare const getGroups: (columns: ColumnDefinition[]) => Group[];
 export declare const getGroupClassNames: (group?: Group) => string;
 export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;
 export declare const GRID_MIN_ROWS = 6;
+export declare const rowHeight = 40;
 export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;

package/ui/Blocks/CommonGrid/utils/index.js

@@ -64,6 +64,7 @@ export var getStickyCollClassNames = function (sticky, stickTo) {
     return !sticky ? '' : "".concat(stickTo ? " sticky sticky-".concat(stickTo) : ' sticky sticky-left');
 };
 export var GRID_MIN_ROWS = 6;
+export var rowHeight = 40;
 export var getFilters = function (optimizeFilters) {
     var filters = {
         number: { CellComponent: NumberRange },

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

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

package/ui/Elements/Pagination/Pagination.js

@@ -2,12 +2,16 @@ 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;
+    var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page, customPaginationHandler = _a.customPaginationHandler;
     var setPage = useCallback(function (number) { return function () {
+        if (customPaginationHandler) {
+            customPaginationHandler(number, itemPerPage);
+            return;
+        }
         if (onPageChange) {
             onPageChange(number, itemPerPage);
         }
-    }; }, [itemPerPage, onPageChange]);
+    }; }, [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 arrayOfPages = useMemo(function () {

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ onPageChange, itemPerPage, itemCount, page }: import("../Pagination").Props) => JSX.Element;
+    component: ({ onPageChange, itemPerPage, itemCount, page, customPaginationHandler }: import("../Pagination").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
 };