@mailstep/design-system 0.7.62-beta.0 → 0.7.62

package/package.json

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

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

@@ -7,5 +7,5 @@ type Props = CommonGridProps & {
     hasGroups: boolean;
     hasFilters: boolean;
 };
-declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters, isSortTerminated }: Props) => JSX.Element;
+declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters }: Props) => JSX.Element;
 export default CommonGrid;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -14,13 +14,14 @@ import React from 'react';
 import DataRow from './components/DataRow';
 import FilterRow from './components/FilterRow';
 import FloatingButton from './components/FloatingButton/FloatingButton';
-import { GridStatus } from './components/GridStatus';
 import GroupRow from './components/GroupRow';
 import HeadRow from './components/HeadRow';
 import OversizedScroll from './components/OversizedScroll';
+import { Row, MessageCell } from './components/Table';
 import useColumnSizes from './hooks/useColumnSizes';
 import useRowsKeyControls from './hooks/useRowsKeyControls';
 import useUxReset from './hooks/useUxReset';
+import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 import { initialState } from './store';
 import { getGroups } from './utils';
@@ -39,11 +40,21 @@ var CommonGrid = function (_a) {
     // redux props
     gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, 
     // input props
-    isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowClick = _a.onRowClick, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, className = _a.className, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps, hasGroups = _a.hasGroups, hasFilters = _a.hasFilters, isSortTerminated = _a.isSortTerminated;
+    isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowClick = _a.onRowClick, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, className = _a.className, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps, hasGroups = _a.hasGroups, hasFilters = _a.hasFilters;
     var _c = gridSelectors.uxState, uxState = _c === void 0 ? defaultUxState : _c, _d = gridSelectors.columnsWidth, columnsWidth = _d === void 0 ? defaultColumnsWidth : _d, columnsWidthVariant = gridSelectors.columnsWidthVariant, _e = gridSelectors.page, page = _e === void 0 ? 1 : _e, filter = gridSelectors.filter, sorting = gridSelectors.sorting, _f = gridSelectors.rowsPerPage, rowsPerPage = _f === void 0 ? 10 : _f;
     var clearUxState = gridActions.clearUxState, handleUxChange = gridActions.handleUxChange, _g = gridActions.addFilter, addFilter = _g === void 0 ? defaultVoidFunction : _g, _h = gridActions.addSorting, addSorting = _h === void 0 ? defaultVoidFunction : _h, _j = gridActions.setColumnWidth, setColumnWidth = _j === void 0 ? defaultVoidFunction : _j;
     var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
     useUxReset(rowsData, uxState, clearUxState);
+    var GridMessage;
+    var messageClass = 'info';
+    if (isLoading)
+        GridMessage = _jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." });
+    if (!isLoading && (!rowsData || rowsData.length < 1))
+        GridMessage = _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." });
+    if (!isLoading && errorMessage) {
+        GridMessage = errorMessage;
+        messageClass = 'error';
+    }
     var _k = useColumnSizes(displayColumnsDefinitions, columnsWidth, columnsWidthVariant, setColumnWidth, columnLayout, minColumnWidth), displayColumnsWidth = _k.displayColumnsWidth, totalColumnsWidth = _k.totalColumnsWidth, gridBoxRef = _k.gridBoxRef, handleResizeDrag = _k.handleResizeDrag;
     var groups = React.useMemo(function () {
         return getGroups(displayColumnsDefinitions);
@@ -51,7 +62,7 @@ var CommonGrid = function (_a) {
     var commonGridRef = React.useCallback(function (node) {
         gridBoxRef.current = node;
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, floatingChildren: _jsx(GridStatus, { isLoading: isLoading, rowsData: rowsData, errorMessage: errorMessage }), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd, isSortTerminated: isSortTerminated }), hasFilters && (_jsx(FilterRow, { filters: filters, comparators: comparators, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
+    return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), width: window.innerWidth, children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), hasFilters && (_jsx(FilterRow, { filters: filters, comparators: comparators, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -27,7 +27,6 @@ import HidePrint from '../HidePrint/HidePrint';
 import { useModal } from '../Modal/hooks/useModal';
 import ActionHead from './components/ActionHead';
 import ControlButtons from './components/ControlButtons';
-import { GridInfo } from './components/GridInfo';
 import { GridModals } from './components/GridModals';
 import TablePagination from './components/TablePagination';
 import useEditReadAsColumn from './hooks/useEditReadAsColumn';
@@ -35,13 +34,12 @@ import { useGridAutoRowsPerPage } from './hooks/useGridAutoRowsPerPage';
 import useManageColumn from './hooks/useManageColumn';
 import { usePresetState } from './hooks/usePresetsState';
 import { getRowsPerPage } from './utils/getRowsPerPage';
-import hasSortTerminated from './utils/hasSortTerminated';
 import { x } from '@xstyled/styled-components';
 import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip } from './styles';
 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, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "withManageColumnButton", "withPagination"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
     var _g = useState(false), displayManageColumnButton = _g[0], setDisplayManageColumnButton = _g[1];
     var gridRef = useRef(null);
@@ -68,10 +66,6 @@ var CommonGridContainer = function (props) {
         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({
-        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: 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, 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 })), withPagination && (_jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", 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/ControlButtons/ControlButtons.js

@@ -32,7 +32,7 @@ var ControlButtons = function (_a) {
         quickFilter: quickFilter,
         displayColumnsDefinitions: displayColumnsDefinitions,
         filters: filters
-    }), 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;
+    }), searchedValue = _c.searchedValue, translatedValue = _c.translatedValue, onChangeInputValue = _c.onChangeInputValue, onClear = _c.onClear, onResetFilters = _c.onResetFilters, onDisplayInput = _c.onDisplayInput, displayInput = _c.displayInput, isMobileInputView = _c.isMobileInputView, isMobile = _c.isMobile, filter = _c.filter;
     useEffect(function () {
         setDisplayManageColumnButton(!isMobileInputView && !!withManageColumnButton);
     }, [isMobileInputView, withManageColumnButton, setDisplayManageColumnButton]);
@@ -41,6 +41,6 @@ var ControlButtons = function (_a) {
                                     id: 'controlButtons.searchPlaceholder',
                                     message: "Search ".concat(translatedValue, " ..."),
                                     values: { translatedValue: translatedValue }
-                                }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView, alwaysShowClear: isMobile })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onClearSettings, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }) })) })] })), withPresets && gridName && (_jsxs(_Fragment, { children: [_jsx(x.div, { mx: "12px", children: _jsx(Button, { onClick: onOpenPresetsModal, type: "button", variant: "default", appearance: "tertiary", children: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }) }) }), selectedPresetName && (_jsx(Tag, __assign({ size: "medium" }, palletes.redWhite, { children: _jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: selectedPresetName }) })))] }))] }), _jsxs(Right, { children: [_jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopRight }), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] })] }));
+                                }), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView, alwaysShowClear: isMobile })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] })), withPresets && gridName && (_jsxs(_Fragment, { children: [_jsx(x.div, { mx: "12px", children: _jsx(Button, { onClick: onOpenPresetsModal, type: "button", variant: "default", appearance: "tertiary", children: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }) }) }), selectedPresetName && (_jsx(Tag, __assign({ size: "medium" }, palletes.redWhite, { children: _jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: selectedPresetName }) })))] }))] }), _jsxs(Right, { children: [_jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopRight }), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] })] }));
 };
 export default ControlButtons;

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

@@ -11,8 +11,6 @@ type HeadCellProps = {
     onSetSort: (column: string, systemName?: string) => (value: SortingValueType) => void;
     group: Group;
     hasResize: boolean;
-    totalRowsCount?: number;
-    isSortTerminated?: boolean;
 };
 export declare const HeadCell: FC<HeadCellProps>;
 export {};

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

@@ -18,12 +18,12 @@ import Resize from './Resize';
 import { Cell } from './Table';
 export var HeadCell = function (_a) {
     var _b;
-    var column = _a.column, isDragDisabled = _a.isDragDisabled, displayColumnsWidth = _a.displayColumnsWidth, onResizeOut = _a.onResizeOut, onResizeOver = _a.onResizeOver, onResize = _a.onResize, sortingValues = _a.sortingValues, onSetSort = _a.onSetSort, group = _a.group, hasResize = _a.hasResize, isSortTerminated = _a.isSortTerminated;
+    var column = _a.column, isDragDisabled = _a.isDragDisabled, displayColumnsWidth = _a.displayColumnsWidth, onResizeOut = _a.onResizeOut, onResizeOver = _a.onResizeOver, onResize = _a.onResize, sortingValues = _a.sortingValues, onSetSort = _a.onSetSort, group = _a.group, hasResize = _a.hasResize;
     var _c = useSortable({
         id: column.name,
         disabled: isDragDisabled || !!column.sticky,
         animateLayoutChanges: function () { return false; }
     }), attributes = _c.attributes, listeners = _c.listeners, setNodeRef = _c.setNodeRef, transform = _c.transform, transition = _c.transition;
     var cellClassName = "cell".concat(getStickyCollClassNames(!!(column === null || column === void 0 ? void 0 : column.sticky), column === null || column === void 0 ? void 0 : column.stickTo), " ").concat(getGroupClassNames(group));
-    return (_jsxs(Cell, __assign({}, getCellSizeProps(column, displayColumnsWidth[column.name]), attributes, listeners, { className: cellClassName, transition: transition, transform: CSS.Transform.toString(transform), ref: setNodeRef, children: [_jsx(ColumnTitle, { title: column === null || column === void 0 ? void 0 : column.title, isSortable: !!column.sorting && !isSortTerminated, onSetSort: onSetSort(column.name, column.systemName), sortValue: ((_b = sortingValues.find(function (sorting) { return sorting.column === getSortName(column); })) === null || _b === void 0 ? void 0 : _b.direction) || null }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize(column.name), onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
+    return (_jsxs(Cell, __assign({}, getCellSizeProps(column, displayColumnsWidth[column.name]), attributes, listeners, { className: cellClassName, transition: transition, transform: CSS.Transform.toString(transform), ref: setNodeRef, children: [_jsx(ColumnTitle, { title: column === null || column === void 0 ? void 0 : column.title, isSortable: !!column.sorting, onSetSort: onSetSort(column.name, column.systemName), sortValue: ((_b = sortingValues.find(function (sorting) { return sorting.column === getSortName(column); })) === null || _b === void 0 ? void 0 : _b.direction) || null }), hasResize && onResizeOut && onResizeOver && (_jsx(Resize, { onResize: onResize(column.name), onResizeOver: onResizeOver, onResizeOut: onResizeOut }))] })));
 };

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

@@ -9,7 +9,6 @@ type HeadRowProps = {
     handleResizeDrag: (column: string, width: number) => void;
     handleDragEnd: (event: DragEndEvent) => void;
     groups: Group[];
-    isSortTerminated?: boolean;
 };
-declare const HeadRow: ({ columns, onAddSort, handleDragEnd, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups, isSortTerminated }: HeadRowProps) => JSX.Element;
+declare const HeadRow: ({ columns, onAddSort, handleDragEnd, sortingValues, displayColumnsWidth, columnLayout, handleResizeDrag, groups }: HeadRowProps) => JSX.Element;
 export default HeadRow;

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

@@ -25,7 +25,7 @@ var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
     });
 };
 var HeadRow = function (_a) {
-    var columns = _a.columns, onAddSort = _a.onAddSort, handleDragEnd = _a.handleDragEnd, _b = _a.sortingValues, sortingValues = _b === void 0 ? [] : _b, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups, isSortTerminated = _a.isSortTerminated;
+    var columns = _a.columns, onAddSort = _a.onAddSort, handleDragEnd = _a.handleDragEnd, _b = _a.sortingValues, sortingValues = _b === void 0 ? [] : _b, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups;
     var _c = useState(false), showUIElements = _c[0], setShowUIElements = _c[1];
     useEffect(function () {
         setShowUIElements(true);
@@ -49,6 +49,6 @@ var HeadRow = function (_a) {
                     return name;
                 }), strategy: horizontalListSortingStrategy, children: _jsxs(Row, { className: "headRow", children: [getStickyComponent(columns, 'left', displayColumnsWidth), columns
                             .filter(function (item) { return !item.sticky; })
-                            .map(function (column, index) { return (_jsx(HeadCell, { column: column, isDragDisabled: isDragDisabled, displayColumnsWidth: displayColumnsWidth, onResizeOut: onResizeOut, onResizeOver: onResizeOver, onResize: onResize, sortingValues: sortingValues, onSetSort: onSetSort, group: groups[index], hasResize: columnLayout === 'normal' || !!columns[index + 1], isSortTerminated: isSortTerminated }, column.name)); }), getStickyComponent(columns, 'right', displayColumnsWidth)] }) }) })) }));
+                            .map(function (column, index) { return (_jsx(HeadCell, { column: column, isDragDisabled: isDragDisabled, displayColumnsWidth: displayColumnsWidth, onResizeOut: onResizeOut, onResizeOver: onResizeOver, onResize: onResize, sortingValues: sortingValues, onSetSort: onSetSort, group: groups[index], hasResize: columnLayout === 'normal' || !!columns[index + 1] }, column.name)); }), getStickyComponent(columns, 'right', displayColumnsWidth)] }) }) })) }));
 };
 export default HeadRow;

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { CommonGridProps } from '../types';
+import { CommonGridProps } from '../types';
 type OversizedScrollProps = {
     columnLayout: Required<CommonGridProps>['columnLayout'];
+    isLoading?: boolean;
     children: React.ReactNode;
     floatingChildren?: React.ReactNode;
     totalColumnsWidth: number;

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

@@ -6,15 +6,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import styled, { css } from '@xstyled/styled-components';
 var ScrollWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) {
-    return props.columnLayout !== 'no-scroll' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "], ["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "])), props.columnLayout === 'sticky' ? 'inherit' : 'auto');
+    return props.columnLayout != 'no-scroll' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "], ["\n      overflow-x: ", ";\n      position: relative;\n      @media (min-width: 1024px) {\n        overflow-x: auto;\n      }\n    "])), props.columnLayout == 'sticky' ? 'inherit' : 'auto');
 });
 var ScrollSizer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) {
-    return props.columnLayout !== 'no-scroll' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", "px;\n    "], ["\n      width: ", "px;\n    "])), props.totalColumnsWidth);
+    return props.columnLayout != 'no-scroll' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", "px;\n    "], ["\n      width: ", "px;\n    "])), props.totalColumnsWidth);
 });
 var FloatPosition = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  left: 0;\n"], ["\n  position: sticky;\n  left: 0;\n"])));
 var OversizedScroll = function (_a, ref) {
-    var columnLayout = _a.columnLayout, children = _a.children, floatingChildren = _a.floatingChildren, totalColumnsWidth = _a.totalColumnsWidth;
-    return (_jsxs(ScrollWrapper, { columnLayout: columnLayout, className: "gridWrapper", ref: ref, children: [_jsx(ScrollSizer, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, children: children }), floatingChildren && _jsx(FloatPosition, { children: floatingChildren })] }));
+    var columnLayout = _a.columnLayout, isLoading = _a.isLoading, children = _a.children, floatingChildren = _a.floatingChildren, totalColumnsWidth = _a.totalColumnsWidth;
+    return (_jsxs(ScrollWrapper, { columnLayout: columnLayout, isLoading: isLoading, className: "gridWrapper", ref: ref, children: [_jsx(ScrollSizer, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, children: children }), floatingChildren && _jsx(FloatPosition, { children: floatingChildren })] }));
 };
 var forwardedWrapper = React.forwardRef(OversizedScroll);
 export default forwardedWrapper;

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

@@ -31,19 +31,6 @@ export declare const MessageCell: import("styled-components").StyledComponent<"d
     flexShrink?: number | undefined;
     transition?: string | undefined;
     transform?: string | undefined;
-}, never>;
-declare const variantColors: {
-    error: (props: import("@xstyled/util").Props<import("@xstyled/system").Theme>) => import("@xstyled/system").CSSScalar;
-    info: (props: import("@xstyled/util").Props<import("@xstyled/system").Theme>) => import("@xstyled/system").CSSScalar;
-};
-export declare const MessageCellBody: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    align?: string | undefined;
-    flexBasis?: number | undefined;
-    flexGrow?: number | undefined;
-    flexShrink?: number | undefined;
-    transition?: string | undefined;
-    transform?: string | undefined;
 } & {
-    variant: keyof typeof variantColors;
+    width: number;
 }, never>;
-export {};

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

@@ -7,10 +7,5 @@ export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTempla
 export var Cell = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n  transition: ", ";\n  transform: ", ";\n"], ["\n  ", ";\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: ", ";\n  transition: ", ";\n  transform: ", ";\n"])), system, function (props) { return props.align; }, function (props) { return props.transition; }, function (props) { return props.transform; });
 export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : 'white'); });
 export var TextCell = styled(Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
-export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100vw;\n  position: sticky;\n  left: 0;\n  justify-content: center;\n"], ["\n  width: 100vw;\n  position: sticky;\n  left: 0;\n  justify-content: center;\n"])));
-var variantColors = {
-    error: th('colors.red1'),
-    info: th('colors.gray1')
-};
-export var MessageCellBody = styled(Cell)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 2px 10px;\n  border-radius: 4px;\n  color: ", ";\n"], ["\n  padding: 2px 10px;\n  border-radius: 4px;\n  color: ", ";\n"])), function (props) { return variantColors[props.variant]; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: ", "px;\n  position: sticky;\n  left: 0;\n"], ["\n  width: ", "px;\n  position: sticky;\n  left: 0;\n"])), function (props) { return props.width; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -12,7 +12,7 @@ declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, displa
     searchedValue: string;
     translatedValue: any;
     onChangeInputValue: (e: ChangeEvent<HTMLInputElement>) => void;
-    onClearSettings: () => void;
+    onResetFilters: () => void;
     onDisplayInput: () => void;
     displayInput: boolean;
     onClear: () => void;

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

@@ -13,11 +13,11 @@ 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 resetFilters = gridActions.resetFilters, _d = gridActions.addFilter, addFilter = _d === void 0 ? defaultVoidFunction : _d;
     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;
@@ -62,16 +62,16 @@ var useQuickFilter = function (_a) {
     var onDisplayInput = useCallback(function () {
         setDisplayInput(true);
     }, []);
-    var onClearSettings = useCallback(function () {
-        clearSettings === null || clearSettings === void 0 ? void 0 : clearSettings();
+    var onResetFilters = useCallback(function () {
+        resetFilters === null || resetFilters === void 0 ? void 0 : resetFilters();
         setSearchedValue === null || setSearchedValue === void 0 ? void 0 : setSearchedValue('');
-    }, [clearSettings, setSearchedValue]);
+    }, [resetFilters, setSearchedValue]);
     var translatedValue = getTranslatedValue(searchedColumnsDefinitions);
     return {
         searchedValue: searchedValue,
         translatedValue: translatedValue,
         onChangeInputValue: onChangeInputValue,
-        onClearSettings: onClearSettings,
+        onResetFilters: onResetFilters,
         onDisplayInput: onDisplayInput,
         displayInput: displayInput,
         onClear: onClear,

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

@@ -122,7 +122,6 @@ export default (function (state, action) {
                 draft[gridName].page = initialState.page;
                 draft[gridName].filter = initialState.filter;
                 draft[gridName].uxState = initialState.uxState;
-                draft[gridName].sorting = [];
                 break;
             case actionTypes.setPage:
                 draft[gridName].page = action.page;

package/ui/Blocks/CommonGrid/storybook/stories/loading.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const LoadingState: {
+    (): import("react/jsx-runtime").JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CommonGrid from '../../CommonGridContainer';
+import { createRandomData, gridSelectors, gridDummyActions } from '../utils/utils';
+import { columnDefinitions } from '../utils/columnDefinition';
+import { LinguiContainer } from '../../../../utils/LinguiContainer';
+export default {
+    title: 'Blocks/CommonGrid'
+};
+export var LoadingState = function () { return (_jsx(LinguiContainer, { children: _jsx(CommonGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(10), gridSelectors: gridSelectors, gridActions: gridDummyActions, isLoading: true }) })); };
+LoadingState.story = {
+    name: 'Loading state'
+};

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

@@ -7,7 +7,7 @@ export declare const CommonGridWrap: import("styled-components").StyledComponent
     withPagination: boolean;
 }, "color">;
 export declare const StyledButtonStrip: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters, isSortTerminated }: import("./types").CommonGridProps & {
+export declare const CommonGridWithStyles: import("styled-components").StyledComponent<({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters }: import("./types").CommonGridProps & {
     filters?: import("./types").FiltersConfig | undefined;
     handleDragEnd: (item: import("@dnd-kit/core").DragEndEvent) => void;
     displayColumnsDefinitions: import("./types").ColumnDefinition[];

package/ui/Blocks/CommonGrid/styles.js

@@ -6,7 +6,7 @@ import { gridRowHeight, gridFooterHeight, gridButtonStripHeight, gridHeadHeight,
 import styled, { x } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
 import CommonGrid from './CommonGrid';
-export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  bottom: 0px;\n  padding: ", ";\n  left: 0;\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"], ["\n  position: fixed;\n  z-index: 2;\n  bottom: 0px;\n  padding: ", ";\n  left: 0;\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"])), function (_a) {
+export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  bottom: 0px;\n  padding: ", ";\n  left: 0;\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"], ["\n  position: fixed;\n  z-index: 2;\n  bottom: 0px;\n  padding: ", ";\n  left: 0;\n  width: 100%;\n  height: ", "px;\n  background-color: bgLightGray;\n\n  & > * {\n    @media (min-width: 1024px) {\n      justify-content: flex-end;\n    }\n  }\n\n  @media print {\n    display: none;\n  }\n\n  @media (min-width: 1024px) {\n    position: relative;\n    bottom: 0;\n    margin-bottom: 0;\n  }\n"])), function (_a) {
     var withPagination = _a.withPagination;
     return (withPagination ? '10px 0' : '0px');
 }, function (_a) {

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

@@ -238,7 +238,6 @@ export type GridActionsType = {
     setFilters?: (filters: Filtering) => void;
     resetFilters?: () => void;
     addSorting?: (column: string, direction: SortingValueType) => void;
-    resetSorting?: () => void;
     openConfigForm?: () => void;
     closeConfigForm?: () => void;
     clearSettings?: () => void;
@@ -280,7 +279,6 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     floatingButtonProps?: FloatingButtonProps;
     editReadPosition?: EditReadPosition;
     comparators?: CustomComparators;
-    isSortTerminated?: boolean;
 };
 export declare enum EditReadPosition {
     Left = "left",
@@ -325,7 +323,6 @@ export type GridProps = CommonGridProps & {
     withPresets?: boolean;
     withManageColumnButton?: boolean;
     withPagination?: boolean;
-    allowSortingOnlyUnderTotalRows?: [number, number];
 };
 export type Item = {
     title: string | JSX.Element;

package/ui/Blocks/Header/components/MenuItems/components/MenuItem/index.js

@@ -3,5 +3,5 @@ import { Link } from 'react-router-dom';
 import { MenuItemsListItem } from '../../styles';
 export var MenuItem = function (_a) {
     var item = _a.item;
-    return _jsx(MenuItemsListItem, { children: item.link ? _jsx(Link, { to: item.link, children: item.title }) : item.title });
+    return (_jsx(MenuItemsListItem, { onClick: item.onClick, children: item.link ? _jsx(Link, { to: item.link, children: item.title }) : item.title }));
 };

package/ui/Blocks/Header/components/MenuItems/styles.js

@@ -4,5 +4,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from '@xstyled/styled-components';
 export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"], ["\n  display: none;\n  gap: 10px;\n\n  @media (min-width: 1024px) {\n    display: flex;\n  }\n"])));
-export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"], ["\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"])));
+export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"], ["\n  cursor: pointer;\n\n  a {\n    text-decoration: none;\n    border-color: red1;\n    color: typoPrimary;\n  }\n\n  a:hover {\n    border-bottom: 1px solid;\n    color: red1;\n  }\n"])));
 var templateObject_1, templateObject_2;

package/ui/Blocks/SideMenu/MenuItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuItemType } from './types';
+import { type MenuItemType } from './types';
 type Props = MenuItemType & {
     isSubitem?: boolean;
     isCompact: boolean;

package/ui/Blocks/SideMenu/MenuItem.js

@@ -25,7 +25,7 @@ var MenuItem = function (_a) {
     var _e = useLeftMenuContext(), expandedItem = _e.expandedItem, expandItem = _e.expandItem;
     var isExpanded = expandedItem === id;
     var toggleChildren = useCallback(function () {
-        hasChildren && expandItem(isExpanded ? null : id);
+        hasChildren && expandItem(isExpanded ? null : id !== null && id !== void 0 ? id : null);
         !hasChildren && !lightMode && onCloseLeftMenu && onCloseLeftMenu();
     }, [hasChildren, expandItem, isExpanded, id, lightMode, onCloseLeftMenu]);
     var linkProps = useMemo(function () { return (link.startsWith('https://') ? { to: { pathname: link }, target: '_blank' } : { to: link }); }, [link]);
@@ -48,7 +48,7 @@ var MenuItem = function (_a) {
         return isActive || childSelected || partialMatch;
     }, [items, link]);
     return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName, 
-                        // @ts-ignore
+                        // @ts-expect-error
                         isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign: "left", children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
 };
 export default memo(MenuItem);

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

@@ -1,11 +1,12 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type MenuItemType = {
     icon?: ReactNode;
+    onClick?: () => void;
     title: string;
     link?: string;
     acl?: [string, string];
     items?: MenuItemType[];
-    id: string;
+    id?: string;
     lightMode?: boolean;
     separator?: boolean;
     appearance?: 'gray' | 'default';

package/ui/Elements/Alert/Alert.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from 'react';
-import type { AlertProps } from './types';
-declare const Alert: FC<AlertProps>;
+import { IAlert } from './types';
+declare const Alert: IAlert;
 export default Alert;

package/ui/Elements/Alert/Alert.js

@@ -1,32 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon } from '../Icon';
 import { x, useTheme } from '@xstyled/styled-components';
 import { th } from '@xstyled/styled-components';
+import { Icon } from '../Icon';
 import { IconWrap, LinkWrapper, StyledAlert, VerticalSeparator, Text, Title, CloseBtn, ActionButton, Description } from './styles';
 var alertBackgroundColor = {
     success: 'green10',
     info: 'blue10',
     warning: 'yellow10',
-    danger: 'red10'
+    danger: 'red10',
 };
 var alertColorFill = {
     success: 'successColor',
     info: 'blue60',
     warning: 'yellow70',
-    danger: 'dangerColor'
+    danger: 'dangerColor',
 };
 var alertIconMap = {
     success: 'circleCheck',
     info: 'info',
     warning: 'circleTriangle',
-    danger: 'circleTriangle'
+    danger: 'circleTriangle',
 };
-var Alert = function (_a) {
-    var intent = _a.intent, inline = _a.inline, onClick = _a.onClick, onClose = _a.onClose, title = _a.title, text = _a.text, href = _a.href, actionLabel = _a.actionLabel, actionType = _a.actionType, desc = _a.desc, _b = _a.closeAnywhere, closeAnywhere = _b === void 0 ? false : _b, height = _a.height;
+var Alert = function (props) {
+    var intent = props.intent, inline = props.inline, onClick = props.onClick, onClose = props.onClose, title = props.title, text = props.text, href = props.href, actionLabel = props.actionLabel, actionType = props.actionType, desc = props.desc, _a = props.closeAnywhere, closeAnywhere = _a === void 0 ? false : _a;
     var theme = useTheme();
     var bgColor = th.color(intent ? alertBackgroundColor[intent] : 'transparent')({ theme: theme });
     var colorFill = th.color(intent ? alertColorFill[intent] : 'transparent')({ theme: theme });
     var icon = intent && alertIconMap[intent];
-    return (_jsxs(StyledAlert, { "$bgColor": bgColor, "$colorFill": colorFill, "$inline": inline, onClick: closeAnywhere ? onClose : undefined, height: height, icon: icon, children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [inline && _jsx(VerticalSeparator, { "$colorFill": colorFill, height: height }), icon && (_jsx(IconWrap, { children: _jsx(Icon, { icon: icon, size: "20px", fill: colorFill }) })), _jsxs("div", { children: [_jsx(Title, { children: title }), _jsxs(Text, { children: [" ", text] })] })] }), _jsxs(x.div, { display: "flex", alignItems: "center", children: [href && actionType === 'link' && (_jsx(LinkWrapper, { "$colorFill": colorFill, to: href, children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'Link' })), onClick && actionType === 'button' && (_jsx(ActionButton, { "$colorFill": colorFill, onClick: onClick, children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'Submit' })), onClose && !closeAnywhere && (_jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { icon: "close", size: "15px", fill: "gray" }) })), desc && _jsx(Description, { children: desc })] })] }));
+    return (_jsxs(StyledAlert, { "$bgColor": bgColor, "$colorFill": colorFill, "$inline": inline, onClick: closeAnywhere ? onClose : undefined, children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [inline && _jsx(VerticalSeparator, { "$colorFill": colorFill }), icon && (_jsx(IconWrap, { children: _jsx(Icon, { icon: icon, size: "20px", fill: colorFill }) })), _jsxs("div", { children: [_jsx(Title, { children: title }), _jsxs(Text, { children: [" ", text] })] })] }), _jsxs(x.div, { display: "flex", alignItems: "center", children: [href && actionType === 'link' && (_jsx(LinkWrapper, { "$colorFill": colorFill, to: href, children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'Link' })), onClick && actionType === 'button' && (_jsx(ActionButton, { "$colorFill": colorFill, onClick: onClick, children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'Submit' })), onClose && !closeAnywhere && (_jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { icon: "close", size: "15px", fill: "gray" }) })), desc && _jsx(Description, { children: desc })] })] }));
 };
 export default Alert;

package/ui/Elements/Alert/stories/Alert.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../types").AlertProps>;
+    component: import("../types").IAlert;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Alert/styles.d.ts

@@ -1,14 +1,11 @@
 /// <reference types="react" />
 export declare const StyledAlert: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
     $inline?: boolean | undefined;
-    $colorFill: string;
-    $bgColor: string;
-    height?: string | undefined;
-    icon?: string | undefined;
+    $colorFill: React.ReactText;
+    $bgColor: React.ReactText;
 }, "color">;
 export declare const VerticalSeparator: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
-    $colorFill?: string | undefined;
-    height?: string | undefined;
+    $colorFill?: import("react").ReactText | undefined;
 }, "color">;
 export declare const IconWrap: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
 export declare const Title: import("styled-components").StyledComponent<"span", any, {}, never>;