@mailstep/design-system 0.7.76 → 0.7.77-beta.0

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -34,6 +34,7 @@ import useEditReadAsColumn from './hooks/useEditReadAsColumn';
 import { useGridAutoRowsPerPage } from './hooks/useGridAutoRowsPerPage';
 import useManageColumn from './hooks/useManageColumn';
 import { usePresetState } from './hooks/usePresetsState';
+import { getExtendedExtraControlButtons } from './utils/getExtendedExtraControlButtons';
 import { getRowsPerPage } from './utils/getRowsPerPage';
 import { hasSortTerminated } from './utils/hasSortTerminated';
 import { x } from '@xstyled/styled-components';
@@ -41,11 +42,12 @@ import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer,
 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, _e = props.withManageColumnButton, withManageColumnButton = _e === void 0 ? true : _e, _f = props.withPagination, withPagination = _f === void 0 ? true : _f, allowSortingOnlyUnderTotalRows = props.allowSortingOnlyUnderTotalRows, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "withManageColumnButton", "withPagination", "allowSortingOnlyUnderTotalRows"]);
+    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, _e = props.withManageColumnButton, withManageColumnButton = _e === void 0 ? true : _e, _f = props.withPagination, withPagination = _f === void 0 ? true : _f, allowSortingOnlyUnderTotalRows = props.allowSortingOnlyUnderTotalRows, onReload = props.onReload, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "withManageColumnButton", "withPagination", "allowSortingOnlyUnderTotalRows", "onReload"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
+    var extendedExtraControlButtons = useMemo(function () { return getExtendedExtraControlButtons(extraControlButtons, onReload); }, [extraControlButtons, onReload]);
     var _g = useState(false), displayManageColumnButton = _g[0], setDisplayManageColumnButton = _g[1];
     var gridRef = useRef(null);
-    var withButtonStrip = !!(extraControlButtons === null || extraControlButtons === void 0 ? void 0 : extraControlButtons.length) || !hideControlButtons || !!withPresets || !!withManageColumnButton;
+    var withButtonStrip = !!(extendedExtraControlButtons === null || extendedExtraControlButtons === void 0 ? void 0 : extendedExtraControlButtons.length) || !hideControlButtons || !!withPresets || !!withManageColumnButton;
     var hasGroups = !!props.columnsDefinitions.find(function (col) { return col.group; });
     var hasFilters = !!props.columnsDefinitions.find(function (col) { return col.filtering; });
     var hasGroupsOrFilters = hasGroups || hasFilters;
@@ -72,6 +74,6 @@ var CommonGridContainer = function (props) {
         allowSortingOnlyUnderTotalRows: allowSortingOnlyUnderTotalRows,
         totalRowsCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount
     }), isSortTerminatedAppeal = _l.isSortTerminatedAppeal, isSortTerminated = _l.isSortTerminated;
-    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_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, withManageColumnButton: withManageColumnButton }) }) })), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { withButtonStrip: withButtonStrip, hasGroupsOrFilters: hasGroupsOrFilters, filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasFilters: hasFilters, hasGroups: hasGroups, isSortTerminated: isSortTerminated, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { withPagination: withPagination, 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, actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [_jsx(GridInfo, { isSortTerminatedAppeal: isSortTerminatedAppeal, isSortTerminated: isSortTerminated }), withPagination && (_jsxs(x.div, { display: "flex", alignItems: "center", className: "paginatorWrapper", 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, autoRowsPerPage: autoRowsPerPage })] }))] })] })] }), _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, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extendedExtraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName, withManageColumnButton: withManageColumnButton }) }) })), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { withButtonStrip: withButtonStrip, hasGroupsOrFilters: hasGroupsOrFilters, filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasFilters: hasFilters, hasGroups: hasGroups, isSortTerminated: isSortTerminated, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { withPagination: withPagination, 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, actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [_jsx(GridInfo, { isSortTerminatedAppeal: isSortTerminatedAppeal, isSortTerminated: isSortTerminated }), withPagination && (_jsxs(x.div, { display: "flex", alignItems: "center", className: "paginatorWrapper", 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, autoRowsPerPage: autoRowsPerPage })] }))] })] })] }), _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/ExtraControlButtons/ExtraControlButtons.js

@@ -20,7 +20,7 @@ import styled, { x } from '@xstyled/styled-components';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
 var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])));
 var ControlButton = function (_a) {
-    var hide = _a.hide, node = _a.node, label = _a.label, appearance = _a.appearance, variant = _a.variant, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron, iconLeft = _a.iconLeft;
+    var hide = _a.hide, node = _a.node, label = _a.label, appearance = _a.appearance, variant = _a.variant, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron, iconLeft = _a.iconLeft, buttonProps = _a.buttonProps;
     if (hide) {
         return null;
     }
@@ -30,7 +30,7 @@ var ControlButton = function (_a) {
         return (_jsx(DropdownSelect, { label: label || '', appearance: appearance || 'secondary', variant: variant || 'default', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
     }
     else {
-        return (_jsx(StyledButton, { type: "button", onClick: onClick, disabled: disabled, variant: variant || 'default', appearance: appearance || 'primary', iconLeft: iconLeft, children: label }));
+        return (_jsx(StyledButton, __assign({ type: "button", onClick: onClick, disabled: disabled, variant: variant || 'default', appearance: appearance || 'primary', iconLeft: iconLeft }, buttonProps, { children: label })));
     }
 };
 var ExtraControlButtons = function (_a) {

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

@@ -1,4 +1,4 @@
-import { AppearanceValue, VariantValue } from '../../Elements/Button/types';
+import { Props as ButtonProps, AppearanceValue, VariantValue } from '../../Elements/Button/types';
 
 export declare const rowClassSymbol: unique symbol;
 type Option = {
@@ -288,6 +288,7 @@ export type ExtraControlButton = {
     hideChevron?: boolean;
     disabled?: boolean;
     iconLeft?: string | React.ReactNode;
+    buttonProps?: Omit<ButtonProps, 'children' | 'onClick' | 'disabled' | 'appearance' | 'variant' | 'iconLeft' | 'as'>;
 };
 export type Group = {
     name?: string;
@@ -306,6 +307,7 @@ export type GridProps = CommonGridProps & {
     withManageColumnButton?: boolean;
     withPagination?: boolean;
     allowSortingOnlyUnderTotalRows?: [number, number];
+    onReload?: () => void;
 };
 export type Item = {
     title: string | React.ReactNode;

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

@@ -0,0 +1,3 @@
+import { ExtraControlButton } from '../types';
+
+export declare const getExtendedExtraControlButtons: (extraControlButtons?: ExtraControlButton[], onReload?: () => void) => ExtraControlButton[] | undefined;

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

@@ -0,0 +1,23 @@
+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 } from "react/jsx-runtime";
+import { Reload } from '../../../Elements/Icon/icons/Reload';
+import { ExtraControlButtonPosition } from '../types';
+import compact from 'lodash/compact';
+export var getExtendedExtraControlButtons = function (extraControlButtons, onReload) {
+    return compact(__spreadArray([
+        onReload && {
+            onClick: onReload,
+            label: _jsx(Reload, { width: "16px", height: "16px", fill: "white" }),
+            position: ExtraControlButtonPosition.TopLeft,
+            buttonProps: { 'data-testid': 'reload-button' }
+        }
+    ], (extraControlButtons || []), true));
+};

package/ui/Blocks/CornerDialog/CornerDialog.js

@@ -14,5 +14,5 @@ export var CornerDialog = function (_a) {
     var _d = statusToColors[intent], fontColor = _d.fontColor, backgroundColor = _d.backgroundColor, fill = _d.fill;
     if (!isOpen)
         return null;
-    return (_jsx(Portal, { children: _jsxs(Container, { "$mounted": isMounted, children: [_jsxs(Status, { background: backgroundColor, children: [_jsx(Icon, { icon: statusToIcon[intent], fill: fill }), _jsx(StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), _jsx(Header, { children: title }), _jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { icon: "close", size: "25px" }) }), _jsx(Wrapper, { children: children })] }) }));
+    return (_jsx(Portal, { children: _jsxs(Container, { "$mounted": isMounted, children: [_jsxs(Status, { background: backgroundColor, children: [_jsx(Icon, { icon: statusToIcon[intent], fill: fill }), _jsx(StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), _jsx(Header, { children: title }), _jsx(CloseBtn, { onClick: onClose, "data-testid": "corner-dialog-close-btn", children: _jsx(Icon, { icon: "close", size: "25px" }) }), _jsx(Wrapper, { children: children })] }) }));
 };

package/ui/Blocks/Tabs/Tabs.js

@@ -9,7 +9,7 @@ var Tab = function (_a) {
     var handleOnClick = useCallback(function () {
         onTabSwitch(value);
     }, [onTabSwitch, value]);
-    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, minWidth: minWidth, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 ||
+    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, minWidth: minWidth, "data-testid": "tab-".concat(value), children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 ||
                     (badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) })))] }) }));
 };
 export var Tabs = function (_a) {

package/ui/Elements/Button/types.d.ts

@@ -20,4 +20,6 @@ export type Props = React.HTMLProps<HTMLButtonElement> & {
     iconStrokeColor?: string;
     buttonRef?: any;
     type?: 'button' | 'submit' | 'reset';
+} & {
+    [key: `data-${string}`]: string | undefined;
 };

package/ui/Elements/Icon/icons/Reload.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SvgProps } from '../types';
+
+export declare const Reload: FC<SvgProps>;

package/ui/Elements/Icon/icons/Reload.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Reload = function (props) { return (_jsx("svg", __assign({ baseProfile: "tiny", height: "1em", viewBox: "0 0 32 32", transform: "scale(1.5)", width: "1em" }, props, { children: _jsx("path", { d: "M24 13V7.369L21.899 9.47a8.454 8.454 0 00-6.005-2.495 8.5 8.5 0 000 17 8.49 8.49 0 007.375-4.286l-1.737-.993a6.5 6.5 0 01-5.638 3.278 6.508 6.508 0 01-6.5-6.5c0-3.584 2.916-6.5 6.5-6.5 1.792 0 3.414.732 4.59 1.91L18.369 13H24z" }) }))); };

package/ui/Elements/Icon/icons/index.d.ts

@@ -77,3 +77,4 @@ export { Foldable } from './Foldable';
 export { MachinePackingForbidden } from './MachinePackingForbidden';
 export { Valuable } from './Valuable';
 export { MobilePhone } from './MobilePhone';
+export { Reload } from './Reload';

package/ui/Elements/Icon/icons/index.js

@@ -77,3 +77,4 @@ export { Foldable } from './Foldable';
 export { MachinePackingForbidden } from './MachinePackingForbidden';
 export { Valuable } from './Valuable';
 export { MobilePhone } from './MobilePhone';
+export { Reload } from './Reload';