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

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -41,9 +41,9 @@ 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, _g = props.resetSortingWithResetFilters, resetSortingWithResetFilters = _g === void 0 ? true : _g, allowSortingOnlyUnderTotalRows = props.allowSortingOnlyUnderTotalRows, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "withManageColumnButton", "withPagination", "resetSortingWithResetFilters", "allowSortingOnlyUnderTotalRows"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
-    var _g = useState(false), displayManageColumnButton = _g[0], setDisplayManageColumnButton = _g[1];
+    var _h = useState(false), displayManageColumnButton = _h[0], setDisplayManageColumnButton = _h[1];
     var gridRef = useRef(null);
     var withButtonStrip = !!(extraControlButtons === null || extraControlButtons === void 0 ? void 0 : extraControlButtons.length) || !hideControlButtons || !!withPresets || !!withManageColumnButton;
     var hasGroups = !!props.columnsDefinitions.find(function (col) { return col.group; });
@@ -60,18 +60,18 @@ var CommonGridContainer = function (props) {
     var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
     var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
     var columns = modifiedPassDownProps.columnsDefinitions;
-    var _h = useModal(), openManageColumnForm = _h.onOpen, manageColumnFormVisible = _h.isOpen, onClose = _h.onClose;
-    var _j = useManageColumn({
+    var _j = useModal(), openManageColumnForm = _j.onOpen, manageColumnFormVisible = _j.isOpen, onClose = _j.onClose;
+    var _k = useManageColumn({
         columns: columns,
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         onClose: onClose
-    }), columnsConfigValues = _j.columnsConfigValues, setColumnsConfigOptions = _j.setColumnsConfigOptions, onConfirmForm = _j.onConfirmForm, resetColumnConfig = _j.resetColumnConfig, handleDragEnd = _j.handleDragEnd, onCloseForm = _j.onCloseForm, displayColumnsDefinitions = _j.displayColumnsDefinitions, manageColumnsFormDefinitions = _j.manageColumnsFormDefinitions;
-    var _k = usePresetState(), isPresetsModalOpen = _k.isPresetsModalOpen, onClosePresetsModal = _k.onClosePresetsModal, onOpenPresetsModal = _k.onOpenPresetsModal, setSelectedPresetName = _k.setSelectedPresetName, selectedPresetName = _k.selectedPresetName;
-    var _l = hasSortTerminated({
+    }), columnsConfigValues = _k.columnsConfigValues, setColumnsConfigOptions = _k.setColumnsConfigOptions, onConfirmForm = _k.onConfirmForm, resetColumnConfig = _k.resetColumnConfig, handleDragEnd = _k.handleDragEnd, onCloseForm = _k.onCloseForm, displayColumnsDefinitions = _k.displayColumnsDefinitions, manageColumnsFormDefinitions = _k.manageColumnsFormDefinitions;
+    var _l = usePresetState(), isPresetsModalOpen = _l.isPresetsModalOpen, onClosePresetsModal = _l.onClosePresetsModal, onOpenPresetsModal = _l.onOpenPresetsModal, setSelectedPresetName = _l.setSelectedPresetName, selectedPresetName = _l.selectedPresetName;
+    var _m = hasSortTerminated({
         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 })] }));
+    }), isSortTerminatedAppeal = _m.isSortTerminatedAppeal, isSortTerminated = _m.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, resetSortingWithResetFilters: resetSortingWithResetFilters }) }) })), _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/HoC/withReduxActions.js

@@ -32,6 +32,7 @@ var withReduxActions = function (gridName, prefix) {
                 clearSettings: actions.clearSettings,
                 setColumnWidth: actions.setColumnWidth,
                 resetGrid: actions.resetGrid,
+                resetSorting: actions.resetSorting,
                 setColumnsOrder: actions.setColumnsOrder,
             }, dispatch),
             _a);

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

@@ -17,6 +17,7 @@ type Props = {
     selectedPresetName: string;
     withPresets?: boolean;
     withManageColumnButton?: boolean;
+    resetSortingWithResetFilters: boolean;
 };
 declare const ControlButtons: FC<Props>;
 export default ControlButtons;

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

@@ -25,13 +25,14 @@ import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 import { ControlButtonsContainer, Left, Right, StyledColumnButton } from './styles';
 var ControlButtons = function (_a) {
-    var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, hideControlButtons = _a.hideControlButtons, displayManageColumnButton = _a.displayManageColumnButton, openManageColumnForm = _a.openManageColumnForm, setDisplayManageColumnButton = _a.setDisplayManageColumnButton, onOpenPresetsModal = _a.onOpenPresetsModal, gridName = _a.gridName, selectedPresetName = _a.selectedPresetName, withPresets = _a.withPresets, withManageColumnButton = _a.withManageColumnButton;
+    var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, hideControlButtons = _a.hideControlButtons, displayManageColumnButton = _a.displayManageColumnButton, openManageColumnForm = _a.openManageColumnForm, setDisplayManageColumnButton = _a.setDisplayManageColumnButton, onOpenPresetsModal = _a.onOpenPresetsModal, gridName = _a.gridName, selectedPresetName = _a.selectedPresetName, withPresets = _a.withPresets, withManageColumnButton = _a.withManageColumnButton, resetSortingWithResetFilters = _a.resetSortingWithResetFilters;
     var _c = useQuickFilter({
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         quickFilter: quickFilter,
         displayColumnsDefinitions: displayColumnsDefinitions,
-        filters: filters
+        filters: filters,
+        resetSortingWithResetFilters: resetSortingWithResetFilters,
     }), searchedValue = _c.searchedValue, translatedValue = _c.translatedValue, onChangeInputValue = _c.onChangeInputValue, onClear = _c.onClear, onClearSettings = _c.onClearSettings, onDisplayInput = _c.onDisplayInput, displayInput = _c.displayInput, isMobileInputView = _c.isMobileInputView, isMobile = _c.isMobile, filter = _c.filter;
     useEffect(function () {
         setDisplayManageColumnButton(!isMobileInputView && !!withManageColumnButton);

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/hooks/useQuickFilter.d.ts

@@ -8,8 +8,9 @@ type Props = {
     filter?: CommonGridProps['gridSelectors']['filter'];
     displayColumnsDefinitions?: ColumnDefinition<string>[];
     filters?: FiltersConfig;
+    resetSortingWithResetFilters: boolean;
 };
-declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters }: Props) => {
+declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, resetSortingWithResetFilters }: Props) => {
     searchedValue: string;
     translatedValue: import('react').ReactNode;
     onChangeInputValue: (e: ChangeEvent<HTMLInputElement>) => void;

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

@@ -12,12 +12,12 @@ var defaultVoidFunction = function () {
 };
 var useQuickFilter = function (_a) {
     var _b, _c;
-    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, quickFilter = _a.quickFilter, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters;
-    var _d = gridActions.addFilter, addFilter = _d === void 0 ? defaultVoidFunction : _d, _e = gridActions.clearSettings, clearSettings = _e === void 0 ? defaultVoidFunction : _e;
+    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, quickFilter = _a.quickFilter, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, resetSortingWithResetFilters = _a.resetSortingWithResetFilters;
+    var _d = gridActions.addFilter, addFilter = _d === void 0 ? defaultVoidFunction : _d, clearSettings = gridActions.clearSettings, resetSorting = gridActions.resetSorting;
     var filter = gridSelectors.filter;
     var isMobile = useCheckDeviceWidth().isMobile;
-    var _f = useState(''), searchedValue = _f[0], setSearchedValue = _f[1];
-    var _g = useState(false), displayInput = _g[0], setDisplayInput = _g[1];
+    var _e = useState(''), searchedValue = _e[0], setSearchedValue = _e[1];
+    var _f = useState(false), displayInput = _f[0], setDisplayInput = _f[1];
     var handleAddFilter = useAddFilter(addFilter);
     var quickFilterValues = quickFilter ? (_b = filter === null || filter === void 0 ? void 0 : filter[quickFilter]) === null || _b === void 0 ? void 0 : _b.value : undefined;
     var searchedColumnsDefinitions = (displayColumnsDefinitions === null || displayColumnsDefinitions === void 0 ? void 0 : displayColumnsDefinitions.find(function (item) { return item.name === quickFilter; })) || null;
@@ -65,6 +65,9 @@ var useQuickFilter = function (_a) {
     var onClearSettings = useCallback(function () {
         clearSettings === null || clearSettings === void 0 ? void 0 : clearSettings();
         setSearchedValue === null || setSearchedValue === void 0 ? void 0 : setSearchedValue('');
+        if (resetSortingWithResetFilters) {
+            resetSorting === null || resetSorting === void 0 ? void 0 : resetSorting();
+        }
     }, [clearSettings, setSearchedValue]);
     var translatedValue = getTranslatedValue(searchedColumnsDefinitions);
     return {

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

@@ -23,6 +23,7 @@ export declare const actionTypes: {
     setFilters: string;
     addSorting: string;
     clearSettings: string;
+    resetSorting: string;
     resetGrid: string;
     setColumnWidth: string;
     setColumnsOrder: string;
@@ -50,6 +51,7 @@ export declare const createActions: (gridName: string) => {
     addFilter: (column: string, value: any, filterProps: FilterProps, others?: any) => Action;
     setFilters: (filters: Filtering) => Action;
     addSorting: (column: string, direction: SortingValueType) => Action;
+    resetSorting: () => Action;
     clearSettings: () => Action;
 };
 export declare const createSelectors: (gridName: string) => {

package/ui/Blocks/CommonGrid/store/index.js

@@ -47,6 +47,7 @@ export var actionTypes = {
     setFilters: "".concat(actionPrefix, "/setFilters"),
     addSorting: "".concat(actionPrefix, "/addSorting"),
     clearSettings: "".concat(actionPrefix, "/clearSettings"),
+    resetSorting: "".concat(actionPrefix, "/resetSorting"),
     resetGrid: "".concat(actionPrefix, "/resetGrid"),
     setColumnWidth: "".concat(actionPrefix, "/setColumnWidth"),
     setColumnsOrder: "".concat(actionPrefix, "/setColumnsOrder")
@@ -122,6 +123,8 @@ export default (function (state, action) {
                 draft[gridName].page = initialState.page;
                 draft[gridName].filter = initialState.filter;
                 draft[gridName].uxState = initialState.uxState;
+                break;
+            case actionTypes.resetSorting:
                 draft[gridName].sorting = [];
                 break;
             case actionTypes.setPage:
@@ -211,6 +214,7 @@ export var createActions = function (gridName) { return ({
         column: column,
         direction: direction
     }); },
+    resetSorting: function () { return ({ gridName: gridName, type: actionTypes.resetSorting }); },
     clearSettings: function () { return ({ gridName: gridName, type: actionTypes.clearSettings }); }
 }); };
 export var createSelectors = function (gridName) { return ({
@@ -224,7 +228,9 @@ export var createSelectors = function (gridName) { return ({
         return getOr(initialState.columnConfig, "commonGrid.".concat(gridName, ".columnConfig"), state);
     },
     getPage: function (state) { return getOr(initialState.page, "commonGrid.".concat(gridName, ".page"), state); },
-    getPresets: function (state) { return getOr(initialState.presets, "commonGrid.".concat(gridName, ".presets"), state); },
+    getPresets: function (state) {
+        return getOr(initialState.presets, "commonGrid.".concat(gridName, ".presets"), state);
+    },
     getRowsPerPage: function (state) {
         return getOr(initialState.rowsPerPage, "commonGrid.".concat(gridName, ".rowsPerPage"), state);
     },

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 = {
@@ -227,6 +227,7 @@ export type GridActionsType = {
     closeConfigForm?: () => void;
     clearSettings?: () => void;
     resetGrid?: () => void;
+    resetSorting?: () => void;
     setColumnWidth?: (columnsWidth: null | Record<string, number>, columnLayout: ColumnLayout) => void;
     setColumnsOrder?: (columnsOrder: string[]) => void;
 };
@@ -288,6 +289,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;
@@ -305,6 +307,7 @@ export type GridProps = CommonGridProps & {
     withPresets?: boolean;
     withManageColumnButton?: boolean;
     withPagination?: boolean;
+    resetSortingWithResetFilters?: boolean;
     allowSortingOnlyUnderTotalRows?: [number, number];
 };
 export type Item = {

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;
 };