@mailstep/design-system 0.5.0-beta.24 → 0.5.0-beta.25

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -40,7 +40,7 @@ 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, handleCheckboxChange = props.handleCheckboxChange, handleCheckboxChangeTitle = props.handleCheckboxChangeTitle, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "handleCheckboxChange", "handleCheckboxChangeTitle", "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, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps"]);
     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;
@@ -62,6 +62,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: [handleCheckboxChange && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, handleCheckboxChange: handleCheckboxChange, handleCheckboxChangeTitle: handleCheckboxChangeTitle })), _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 }), _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 }) }))] }));
 };
 export default StyledCommonGrid;

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

@@ -5,8 +5,8 @@ type Props = {
     actionColumn?: ActionColumn;
     onBatchAction?: OnBatchActionFn;
     rowsData: RowProps[];
-    handleCheckboxChange?: () => void;
-    handleCheckboxChangeTitle?: string;
+    processCheckedValues?: () => void;
+    processCheckedValuesTitle?: string;
 };
-declare const ActionHead: ({ gridActions, gridSelectors, actionColumn, onBatchAction, rowsData, handleCheckboxChange, handleCheckboxChangeTitle, }: Props) => JSX.Element;
+declare const ActionHead: ({ gridActions, gridSelectors, actionColumn, onBatchAction, rowsData, processCheckedValues, processCheckedValuesTitle, }: Props) => JSX.Element;
 export default ActionHead;

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

@@ -6,10 +6,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import styled from '@xstyled/styled-components';
 import { Trans } from '@lingui/react';
-import { useGridActionTrigger, useToggleAllCheckbox } from '../../utils/public';
 import { Button } from '../../../../Elements/Button';
 import ButtonMore from '../ButtonMore/ButtonMore';
 import { i18n } from '@lingui/core';
+import { useToggleAllCheckbox } from '../../hooks/useToggleAllCheckbox';
+import { useGridActionTrigger } from '../../hooks/useGridActionTrigger';
 var Wrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-right: 2;\n  gap: 24px;\n  background-color: red;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-right: 2;\n  gap: 24px;\n  background-color: red;\n  position: relative;\n"])));
 var ActionsWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translate(-50%);\n  width: 596px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  background-color: #fff;\n  box-shadow: dropShadow;\n  z-index: 2;\n"], ["\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translate(-50%);\n  width: 596px;\n  padding: 12px 24px;\n  border-radius: 10px;\n  background-color: #fff;\n  box-shadow: dropShadow;\n  z-index: 2;\n"])));
 var StyledText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  color: blue2;\n  font-weight: 600;\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  color: blue2;\n  font-weight: 600;\n"])));
@@ -17,7 +18,7 @@ var ContentWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTempl
 var ButtonsWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n\n  & > * {\n    margin-left: 10px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n\n  & > * {\n    margin-left: 10px;\n  }\n"])));
 var ActionHead = function (_a) {
     var _b;
-    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, actionColumn = _a.actionColumn, onBatchAction = _a.onBatchAction, rowsData = _a.rowsData, handleCheckboxChange = _a.handleCheckboxChange, handleCheckboxChangeTitle = _a.handleCheckboxChangeTitle;
+    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, actionColumn = _a.actionColumn, onBatchAction = _a.onBatchAction, rowsData = _a.rowsData, processCheckedValues = _a.processCheckedValues, processCheckedValuesTitle = _a.processCheckedValuesTitle;
     var handleUxChange = (gridActions || {}).handleUxChange;
     var _c = (gridSelectors || {}).uxState, uxState = _c === void 0 ? {} : _c;
     var _d = useToggleAllCheckbox(rowsData, uxState, handleUxChange), checked = _d[0], toggleCheckbox = _d[1];
@@ -43,7 +44,7 @@ var ActionHead = function (_a) {
                             id: 'dataGrid.checkedRowsCount',
                             message: "Selected {checkedRowsCount} items",
                             values: { checkedRowsCount: checkedRowsCount },
-                        }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondaryLg", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), handleCheckboxChange && (_jsx(Button, { type: "button", onClick: handleCheckboxChange, appearance: "primary", "data-cy": "exportBtn", disabled: !rowsData.length, children: handleCheckboxChangeTitle ? (handleCheckboxChangeTitle) : (_jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" })) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
+                        }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondaryLg", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), processCheckedValues && (_jsx(Button, { type: "button", onClick: processCheckedValues, appearance: "primary", "data-cy": "exportBtn", disabled: !rowsData.length, children: processCheckedValuesTitle ? (processCheckedValuesTitle) : (_jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" })) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
 };
 export default ActionHead;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { x } from '@xstyled/styled-components';
 import { Cell } from './Table';
-import { useAddFilter } from '../utils/public';
+import { useAddFilter } from '../hooks/useAddFilter';
 import { createFilterType, getStickyCollClassNames } from '../utils';
 import { getCellSizeProps, getGroupClassNames } from '../utils';
 import OverlayComponent from './FilterDropdown';

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

@@ -16,7 +16,7 @@ import throttle from 'lodash/throttle';
 import ColumnFilterCell from './ColumnFilterCell';
 import { Row, Cell } from './Table';
 import { getActionCellSizeProps, getFilterName } from '../utils';
-import { useToggleAllCheckbox } from '../utils/public';
+import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox';
 import Toggle from '../../../Elements/Toggle/Toggle';
 var FilterRow = function (_a) {
     var _b, _c;

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

@@ -0,0 +1,4 @@
+import { GridActionsType, ColumnDefinition } from '../types';
+type AddFilterRet = (value: any, column: ColumnDefinition) => void;
+export declare const useAddFilter: (onChange: Required<GridActionsType>['addFilter']) => AddFilterRet;
+export {};

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

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+import { createFilterType, getFilterName } from '../utils';
+export var useAddFilter = function (onChange) {
+    return useCallback(function (value, column) {
+        if (onChange) {
+            var filterProps = {
+                type: createFilterType(column),
+                filterExtraProps: column.filterExtraProps || {},
+                computedValue: column.getFilterCriteria ? column.getFilterCriteria(value) : null,
+            };
+            onChange(getFilterName(column), value, filterProps);
+        }
+    }, [onChange]);
+};

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

@@ -0,0 +1,8 @@
+import { RowProps, UxState, ActionColumn, OnBatchActionFn } from '../types';
+/**
+ * hook for action selection and trigger
+ * returns [subset of actions that are enabled, onSelect(value) - param1: selected action value]
+ */
+type GridActionTriggerRet = [Required<ActionColumn>['actionOptions'], (value: any) => void];
+export declare const useGridActionTrigger: (rowsData: RowProps[], uxState: UxState, actionOptions?: ActionColumn['actionOptions'], onBatchAction?: OnBatchActionFn) => GridActionTriggerRet;
+export {};

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

@@ -0,0 +1,25 @@
+import { useMemo, useCallback } from 'react';
+import find from 'lodash/find';
+export var useGridActionTrigger = function (rowsData, uxState, actionOptions, onBatchAction) {
+    if (actionOptions === void 0) { actionOptions = []; }
+    var actionRows = useMemo(function () {
+        return (rowsData || []).filter(function (row) { var _a; return (_a = uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; });
+    }, [uxState, rowsData]);
+    var enabledActions = useMemo(function () {
+        var actionsOptions = actionOptions || [];
+        return actionsOptions.filter(function (action) {
+            if (action.isEnabled) {
+                return action.isEnabled(actionRows);
+            }
+            else {
+                return uxState.checkedRows && find(uxState.checkedRows, Boolean);
+            }
+        });
+    }, [uxState, actionRows, actionOptions]);
+    var handleBatchAction = useCallback(function (value) {
+        var actionsOptions = actionOptions || [];
+        var action = actionsOptions.find(function (option) { return option.value == value; });
+        action && onBatchAction && onBatchAction(action, actionRows);
+    }, [actionOptions, onBatchAction, actionRows]);
+    return [enabledActions, handleBatchAction];
+};

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

@@ -0,0 +1,8 @@
+import { RowProps, GridActionsType, UxState } from '../types';
+/**
+ * hook for checkbox that select and unselects all row
+ * returns [checked state, toggleAllHandler()] for checkbox
+ */
+type ToggleAllCheckboxRet = [boolean, () => void];
+export declare const useToggleAllCheckbox: (rowsData: RowProps[], uxState: UxState, handleUxChange?: GridActionsType['handleUxChange']) => ToggleAllCheckboxRet;
+export {};

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

@@ -0,0 +1,15 @@
+import { useMemo, useCallback } from 'react';
+export var useToggleAllCheckbox = function (rowsData, uxState, handleUxChange) {
+    var allChecked = useMemo(function () { return (rowsData || []).length >= 1 && rowsData.every(function (row) { var _a; return (_a = uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; }); }, [rowsData, uxState.checkedRows]);
+    var toggleAllHandler = useCallback(function () {
+        var checkedRows = {};
+        // if check all is not check, we check all
+        if (!allChecked && rowsData) {
+            rowsData.forEach(function (row) {
+                checkedRows[row.id] = true;
+            });
+        }
+        handleUxChange && handleUxChange('checkedRows', checkedRows);
+    }, [handleUxChange, rowsData, allChecked]);
+    return [allChecked, toggleAllHandler];
+};

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

@@ -3,8 +3,8 @@ import withReduxActions from './HoC/withReduxActions';
 import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
 import useFloatingButton from './hooks/useFloatingButton';
 import * as Types from './types';
-import * as utils from './utils/public';
 export * from './StandardButtons';
 export * from './components/gridCells';
+import { useAddFilter } from './hooks/useAddFilter';
 export default CommonGrid;
-export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils, useFloatingButton, };
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, useFloatingButton, useAddFilter, };

package/ui/Blocks/CommonGrid/index.js

@@ -3,8 +3,8 @@ import withReduxActions from './HoC/withReduxActions';
 import reducer, { actionPrefix, createActions, createSelectors, createFullSelector, actionTypes } from './store';
 import useFloatingButton from './hooks/useFloatingButton';
 import * as Types from './types';
-import * as utils from './utils/public';
 export * from './StandardButtons';
 export * from './components/gridCells';
+import { useAddFilter } from './hooks/useAddFilter';
 export default CommonGrid;
-export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, utils, useFloatingButton, };
+export { withReduxActions, reducer, actionPrefix, actionTypes, createActions, createSelectors, createFullSelector, Types, useFloatingButton, useAddFilter, };

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils';
 import { onRowEditClick, onRowReadClick, onRowAction, onBatchAction } from '../utils/actions';
 import { filters } from '../utils/filters';
-import { useAddFilter } from '../../utils/public';
+import { useAddFilter } from '../../hooks/useAddFilter';
 import withReduxActions from '../../HoC/withReduxActions';
 import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
 import withRedux from '../utils/withRedux';

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

@@ -294,8 +294,8 @@ export type Group = {
 export type GridProps = Omit<CommonGridProps, 'filters'> & {
     optimizeFilters?: boolean;
     eshopSelect?: CommonGridProps['extraControlButtons'];
-    handleCheckboxChange?: () => void;
-    handleCheckboxChangeTitle?: string;
+    processCheckedValues?: () => void;
+    processCheckedValuesTitle?: string;
     hideControlButtons?: boolean;
 };
 export type PageGridProps = Omit<GridProps, 'rowsData' | 'totalRowsCount' | 'columnsDefinitions' | 'actionColumnDefinition' | 'hideColumnConfig' | 'minColumnWidth' | 'columnLayout'>;