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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.6",
+  "version": "0.7.8-beta.0",
   "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]);

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

@@ -2,17 +2,24 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 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 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 TablePagination = function (_a) {
     var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, customPaginationHandler = _a.customPaginationHandler;
     var setRowsPerPage = gridActions.setRowsPerPage;
@@ -24,9 +31,9 @@ var TablePagination = function (_a) {
         }
     }, [setRowsPerPage, page, customPaginationHandler]);
     var rowsPerPageOptions = useMemo(function () {
-        return rowsPerPageOptionValues.map(function (value) { return ({ value: value, label: value }); });
+        return __spreadArray(__spreadArray([], rowsPerPageOptionValues.map(function (value) { return ({ value: value, label: value }); }), true), [{ value: '', label: 'auto' }], false);
     }, []);
-    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;