@mailstep/design-system 0.7.6 → 0.7.8-beta.1

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -35,20 +35,21 @@ import useManageColumn from './hooks/useManageColumn';
 import { usePresetState } from './hooks/usePresetsState';
 import { x } from '@xstyled/styled-components';
 import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip } from './styles';
-import { getFilters, GRID_MIN_ROWS, rowHeight } from './utils';
+import { getFilters } from './utils';
 var CommonGridContainer = function (props) {
     var _a;
-    var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, gridName = props.gridName, _d = props.withPresets, withPresets = _d === void 0 ? true : _d, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets"]);
+    var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, gridName = props.gridName, _d = props.withPresets, withPresets = _d === void 0 ? true : _d, getRowsPerPage = props.getRowsPerPage, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "getRowsPerPage"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
     var _e = useState(false), displayManageColumnButton = _e[0], setDisplayManageColumnButton = _e[1];
     var _f = useGetGridHeight(), gridHeight = _f.gridHeight, gridRef = _f.gridRef, paginationRef = _f.paginationRef;
     useEffect(function () {
         var _a;
         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);
-            if (autoHeight) {
-                numberOfRows && ((_a = gridActions.setRowsPerPage) === null || _a === void 0 ? void 0 : _a.call(gridActions, numberOfRows));
+            // @TODO this move to mailship
+            // const numberOfRows = Math.max(Math.floor(gridHeight / rowHeight - 2), GRID_MIN_ROWS)
+            var numberOfRows = getRowsPerPage === null || getRowsPerPage === void 0 ? void 0 : getRowsPerPage(gridHeight);
+            if (autoHeight && numberOfRows) {
+                (_a = gridActions.setRowsPerPage) === null || _a === void 0 ? void 0 : _a.call(gridActions, numberOfRows);
             }
         }
     }, [gridHeight, gridActions, queryRowsParam]);
@@ -63,6 +64,6 @@ var CommonGridContainer = function (props) {
         onClose: onClose
     }), columnsConfigValues = _h.columnsConfigValues, setColumnsConfigOptions = _h.setColumnsConfigOptions, onConfirmForm = _h.onConfirmForm, resetColumnConfig = _h.resetColumnConfig, handleDragEnd = _h.handleDragEnd, onCloseForm = _h.onCloseForm, displayColumnsDefinitions = _h.displayColumnsDefinitions, manageColumnsFormDefinitions = _h.manageColumnsFormDefinitions;
     var _j = usePresetState(), isPresetsModalOpen = _j.isPresetsModalOpen, onClosePresetsModal = _j.onClosePresetsModal, onOpenPresetsModal = _j.onOpenPresetsModal, setSelectedPresetName = _j.setSelectedPresetName, selectedPresetName = _j.selectedPresetName;
-    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName }) }) }), _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 || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_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 })] })] }) })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName }) }) }), _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 || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_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, getRowsPerPage: getRowsPerPage, gridHeight: gridHeight })] })] }) })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
 };
 export default CommonGridContainer;

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

@@ -3,6 +3,8 @@ type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
     customPaginationHandler?: (page: number, rows: number) => void;
+    getRowsPerPage?: (height?: number) => number;
+    gridHeight?: number;
 };
-declare const TablePagination: ({ gridActions, gridSelectors, customPaginationHandler }: Props) => JSX.Element;
+declare const TablePagination: ({ gridActions, gridSelectors, getRowsPerPage, gridHeight, customPaginationHandler }: Props) => JSX.Element;
 export default TablePagination;

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

@@ -3,30 +3,32 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { x } from '@xstyled/styled-components';
-import { Trans } from '@lingui/react';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import Select from '../../../../Elements/Select/Select';
 import { Paragraph4 } from '../../../../Elements/Typography/Typography';
+import { Trans } from '@lingui/react';
+import styled, { x } from '@xstyled/styled-components';
 var Wrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  & > :nth-child(2) {\n    display: none;\n    @media (min-width: 1024px) {\n      display: block;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  & > :nth-child(2) {\n    display: none;\n    @media (min-width: 1024px) {\n      display: block;\n    }\n  }\n"])));
 var StyledSelect = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 15px;\n  @media (min-width: 1024px) {\n    margin-right: 8px;\n  }\n"], ["\n  margin-right: 15px;\n  @media (min-width: 1024px) {\n    margin-right: 8px;\n  }\n"])));
-var rowsPerPageOptionValues = [10, 20, 50, 100];
-var LABEL_VALUE = '_label_';
-var filterRowsOption = function (option) { return option.value !== LABEL_VALUE; };
+var rowsPerPageOptions = [
+    { value: 10, label: 10 },
+    { value: 20, label: 20 },
+    { value: 50, label: 50 },
+    { value: 100, label: 100 },
+    { value: 'auto', label: 'auto' },
+];
 var TablePagination = function (_a) {
-    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, customPaginationHandler = _a.customPaginationHandler;
+    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, getRowsPerPage = _a.getRowsPerPage, gridHeight = _a.gridHeight, customPaginationHandler = _a.customPaginationHandler;
     var setRowsPerPage = gridActions.setRowsPerPage;
     var page = gridSelectors.page;
     var onSetRowsPerPage = useCallback(function (option) {
         if (option && 'value' in option) {
+            var value = option.value !== 'auto' ? Number(option.value) : ((getRowsPerPage === null || getRowsPerPage === void 0 ? void 0 : getRowsPerPage(gridHeight)) || 10); // @TODO use 10 from constants
             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, page, customPaginationHandler]);
-    var rowsPerPageOptions = useMemo(function () {
-        return rowsPerPageOptionValues.map(function (value) { return ({ value: value, label: value }); });
-    }, []);
-    return (_jsxs(Wrapper, { children: [_jsx(StyledSelect, { minWidth: "80px", children: _jsx(Select, { name: "rowsPerPage", menuPlacement: "top", style: "gridFilter", placeholder: "".concat(gridSelectors.rowsPerPage), options: rowsPerPageOptions, value: gridSelectors.rowsPerPage, filterOption: filterRowsOption, isDarkPlaceholderText: true, onChange: onSetRowsPerPage }) }), _jsx(Paragraph4, { variant: "normal", mr: "20px", children: _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }) })] }));
+    return (_jsxs(Wrapper, { children: [_jsx(StyledSelect, { minWidth: "80px", children: _jsx(Select, { name: "rowsPerPage", menuPlacement: "top", style: "gridFilter", placeholder: "".concat(gridSelectors.rowsPerPage), options: rowsPerPageOptions, value: gridSelectors.rowsPerPage, isDarkPlaceholderText: true, onChange: onSetRowsPerPage }) }), _jsx(Paragraph4, { variant: "normal", mr: "20px", children: _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }) })] }));
 };
 export default TablePagination;
 var templateObject_1, templateObject_2;

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

@@ -260,6 +260,7 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     onRowEditClick?: (id: string, props: TData) => void;
     onRowReadClick?: (id: string, props: TData) => void;
     onRowClick?: (id: string, props: TData) => void;
+    getRowsPerPage?: (height?: number) => number;
     onBatchAction?: OnBatchActionFn;
     columnLayout?: ColumnLayout;
     quickFilter?: string;