@mailstep/design-system 0.7.10 → 0.7.11-beta.0

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -39,7 +39,7 @@ import { getFilters } from './utils';
 import { useGridAutoHeight } from './hooks/useGridAutoHeight';
 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, getRowsPerPage = props.getRowsPerPage, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "getRowsPerPage"]);
+    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, onPresetsChange = props.onPresetsChange, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "getRowsPerPage", "onPresetsChange"]);
     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;
@@ -55,6 +55,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, 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 })] }));
+    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, onPresetsChange: onPresetsChange })] }));
 };
 export default CommonGridContainer;

package/ui/Blocks/CommonGrid/components/GridModals/index.d.ts

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react';
 import { DropResult } from 'react-beautiful-dnd';
-import { ColumnConfig, ColumnDefinition, GridActionsType, GridSelectorsType } from '../../types';
+import { ColumnConfig, ColumnDefinition, GridActionsType, GridSelectorsType, Filtering } from '../../types';
 type ModalsProps = {
     manageColumnFormVisible: boolean;
     onCloseForm: () => void;
@@ -17,6 +17,7 @@ type ModalsProps = {
     onClosePresetsModal: () => void;
     selectedPresetName: string;
     setSelectedPresetName: (value: string) => void;
+    onPresetsChange?: (data: Record<string, Filtering>) => void;
 };
 export declare const GridModals: FC<ModalsProps>;
 export {};

package/ui/Blocks/CommonGrid/components/GridModals/index.js

@@ -9,12 +9,13 @@ import ManageColumnForm from '../ManageColumnForm';
 import { PresetsModalBody } from '../PresetsModalBody';
 import { Trans } from '@lingui/react';
 export var GridModals = function (_a) {
-    var manageColumnFormVisible = _a.manageColumnFormVisible, onCloseForm = _a.onCloseForm, resetColumnConfig = _a.resetColumnConfig, onConfirmForm = _a.onConfirmForm, manageColumnsFormDefinitions = _a.manageColumnsFormDefinitions, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, handleDragEnd = _a.handleDragEnd, gridName = _a.gridName, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, isPresetsModalOpen = _a.isPresetsModalOpen, onClosePresetsModal = _a.onClosePresetsModal, selectedPresetName = _a.selectedPresetName, setSelectedPresetName = _a.setSelectedPresetName;
+    var manageColumnFormVisible = _a.manageColumnFormVisible, onCloseForm = _a.onCloseForm, resetColumnConfig = _a.resetColumnConfig, onConfirmForm = _a.onConfirmForm, manageColumnsFormDefinitions = _a.manageColumnsFormDefinitions, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, handleDragEnd = _a.handleDragEnd, gridName = _a.gridName, gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, isPresetsModalOpen = _a.isPresetsModalOpen, onPresetsChange = _a.onPresetsChange, onClosePresetsModal = _a.onClosePresetsModal, selectedPresetName = _a.selectedPresetName, setSelectedPresetName = _a.setSelectedPresetName;
     var _b = useSelectPreset({
         gridName: gridName,
         gridActions: gridActions,
         setSelectedPresetName: setSelectedPresetName,
         onClosePresetsModal: onClosePresetsModal,
+        onPresetsChange: onPresetsChange,
         filters: gridSelectors.filter
     }), gridPresets = _b.gridPresets, setGridPresets = _b.setGridPresets, handleSelectPreset = _b.handleSelectPreset;
     var _c = useCreatePreset({ gridName: gridName, setGridPresets: setGridPresets, onClosePresetsModal: onClosePresetsModal, setSelectedPresetName: setSelectedPresetName, filters: gridSelectors.filter }), isCreatePresetModalOpen = _c.isCreatePresetModalOpen, handleCloseCreatePresetModal = _c.handleCloseCreatePresetModal, onOpenCreatePresetModal = _c.onOpenCreatePresetModal, handleCreatePreset = _c.handleCreatePreset, presetName = _c.presetName, handleChangePresetName = _c.handleChangePresetName;

package/ui/Blocks/CommonGrid/hooks/useSelectPreset.d.ts

@@ -4,6 +4,7 @@ type Props = {
     gridActions: GridActionsType;
     setSelectedPresetName: (value: string) => void;
     onClosePresetsModal: () => void;
+    onPresetsChange?: (data: Record<string, Filtering>) => void;
     filters?: Filtering;
 };
 type HookType = (props: Props) => {

package/ui/Blocks/CommonGrid/hooks/useSelectPreset.js

@@ -15,7 +15,7 @@ var getInitialPresets = function (gridName) {
     }
 };
 export var useSelectPreset = function (_a) {
-    var gridName = _a.gridName, gridActions = _a.gridActions, setSelectedPresetName = _a.setSelectedPresetName, onClosePresetsModal = _a.onClosePresetsModal, filters = _a.filters;
+    var gridName = _a.gridName, gridActions = _a.gridActions, setSelectedPresetName = _a.setSelectedPresetName, onClosePresetsModal = _a.onClosePresetsModal, onPresetsChange = _a.onPresetsChange, filters = _a.filters;
     var _b = useState(getInitialPresets(gridName)), gridPresets = _b[0], setGridPresets = _b[1];
     var handleSelectPreset = useCallback(function (presetName, filters) { return function () {
         var _a;
@@ -23,6 +23,10 @@ export var useSelectPreset = function (_a) {
         (_a = gridActions.setFilters) === null || _a === void 0 ? void 0 : _a.call(gridActions, filters);
         onClosePresetsModal();
     }; }, [gridActions]);
+    var handleSetGridPresets = useCallback(function (data) {
+        setGridPresets(data);
+        onPresetsChange === null || onPresetsChange === void 0 ? void 0 : onPresetsChange(data);
+    }, []);
     useEffect(function () {
         var _a;
         if (!gridName || !gridPresets)
@@ -33,5 +37,5 @@ export var useSelectPreset = function (_a) {
         });
         activePreset ? setSelectedPresetName(activePreset[0]) : setSelectedPresetName('');
     }, [filters]);
-    return { gridPresets: gridPresets, setGridPresets: setGridPresets, handleSelectPreset: handleSelectPreset };
+    return { gridPresets: gridPresets, setGridPresets: handleSetGridPresets, handleSelectPreset: handleSelectPreset };
 };

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

@@ -274,6 +274,7 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     floatingButtonProps?: FloatingButtonProps;
     editReadPosition?: EditReadPosition;
     comparators?: CustomComparators;
+    onPresetsChange?: (data: Record<string, Filtering>) => void;
 };
 export declare enum EditReadPosition {
     Left = "left",