@mailstep/design-system 0.8.11-beta.1 → 0.8.12

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -23,12 +23,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useMemo, useState } from 'react';
 import { Pagination } from '../../Elements/Pagination';
+import { useCheckDeviceWidth } from '../../utils/CheckDeviceWidth/checkDeviceWidth';
 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 MobileFilterModal from './components/MobileFilterModal';
+import MobileSortModal from './components/MobileSortModal';
 import TablePagination from './components/TablePagination';
 import useEditReadAsColumn from './hooks/useEditReadAsColumn';
 import { useGridAutoRowsPerPage } from './hooks/useGridAutoRowsPerPage';
@@ -50,8 +53,10 @@ var CommonGridContainer = function (props) {
     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 hasSortableColumns = !!props.columnsDefinitions.find(function (col) { return col.sorting; });
     var hasGroupsOrFilters = hasGroups || hasFilters;
     var autoRowsPerPage = getRowsPerPage(gridRef, withPagination, withButtonStrip, hasGroupsOrFilters);
+    var isMobile = useCheckDeviceWidth().isMobile;
     useGridAutoRowsPerPage({
         autoHeight: autoHeight,
         gridActions: gridActions,
@@ -70,10 +75,12 @@ 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({
+    var _l = useModal(), isMobileFilterOpen = _l.isOpen, openMobileFilter = _l.onOpen, closeMobileFilter = _l.onClose;
+    var _m = useModal(), isMobileSortOpen = _m.isOpen, openMobileSort = _m.onOpen, closeMobileSort = _m.onClose;
+    var _o = 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: extendedExtraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, columns: columns, 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 = _o.isSortTerminatedAppeal, isSortTerminated = _o.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: 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, onOpenMobileFilters: hasFilters ? openMobileFilter : undefined, onOpenMobileSorting: hasSortableColumns ? openMobileSort : undefined }) }) })), _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: [!isMobile && _jsx(GridInfo, { isSortTerminatedAppeal: isSortTerminatedAppeal, isSortTerminated: isSortTerminated }), withPagination && (_jsxs(x.div, { display: "flex", alignItems: "center", className: "paginatorWrapper", w: "100%", justifyContent: "flex-end", gap: "16px", 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: isMobile ? 3 : 5, rate: isMobile ? 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 }), isMobileFilterOpen && gridActions.setFilters && (_jsx(MobileFilterModal, { isShown: isMobileFilterOpen, onClose: closeMobileFilter, columns: displayColumnsDefinitions, filters: filters, comparators: passDownProps.comparators, filterValues: gridSelectors.filter, setFilters: gridActions.setFilters, rowsData: rowsData, uxState: gridSelectors.uxState || {}, handleUxChange: gridActions.handleUxChange, onAsyncLoadFilterOptions: passDownProps.onAsyncLoadFilterOptions, actionColumn: actionColumnDefinition, onClearSettings: gridActions.clearSettings })), isMobileSortOpen && gridActions.addSorting && (_jsx(MobileSortModal, { isShown: isMobileSortOpen, onClose: closeMobileSort, columns: displayColumnsDefinitions, sortingValues: gridSelectors.sorting, onAddSorting: gridActions.addSorting, onResetSorting: gridActions.resetSorting }))] }));
 };
 export default CommonGridContainer;

package/ui/Blocks/CommonGrid/HoC/withReduxActions.js

@@ -29,6 +29,7 @@ var withReduxActions = function (gridName, prefix) {
                 setFilters: actions.setFilters,
                 resetFilters: actions.resetFilters,
                 addSorting: actions.addSorting,
+                resetSorting: actions.resetSorting,
                 clearSettings: actions.clearSettings,
                 setColumnWidth: actions.setColumnWidth,
                 resetGrid: actions.resetGrid,

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

@@ -6,7 +6,7 @@ type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
     quickFilter?: CommonGridProps['quickFilter'];
-    columns?: Array<ColumnDefinition<string>>;
+    displayColumnsDefinitions?: Array<ColumnDefinition<string>>;
     filters?: FiltersConfig;
     hideControlButtons?: boolean;
     displayManageColumnButton?: boolean;
@@ -17,6 +17,8 @@ type Props = {
     selectedPresetName: string;
     withPresets?: boolean;
     withManageColumnButton?: boolean;
+    onOpenMobileFilters?: () => void;
+    onOpenMobileSorting?: () => void;
 };
 declare const ControlButtons: FC<Props>;
 export default ControlButtons;

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

@@ -12,12 +12,15 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import Button from '../../../../Elements/Button/Button';
+import { Filter } from '../../../../Elements/Icon/icons/Filter';
 import { Settings2 } from '../../../../Elements/Icon/icons/Settings2';
+import { Sort } from '../../../../Elements/Icon/icons/Sort';
 import Tag from '../../../../Elements/Tag/Tag';
 import { palettes } from '../../../../Elements/Tag/palettes';
 import { H6 } from '../../../../Elements/Typography';
 import useQuickFilter from '../../hooks/useQuickFilter';
 import { ExtraControlButtonPosition } from '../../types';
+import { isFilterActive } from '../../utils';
 import ExtraControlButtons from '../ExtraControlButtons';
 import QuickFilter from '../QuickFilter';
 import { i18n } from '@lingui/core';
@@ -25,22 +28,26 @@ 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, columns = _a.columns, 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 _c = useQuickFilter({
+    var _b, _c;
+    var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _d = _a.quickFilter, quickFilter = _d === void 0 ? '' : _d, 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, onOpenMobileFilters = _a.onOpenMobileFilters, onOpenMobileSorting = _a.onOpenMobileSorting;
+    var _e = useQuickFilter({
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         quickFilter: quickFilter,
-        columns: columns,
+        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 = _e.searchedValue, translatedValue = _e.translatedValue, onChangeInputValue = _e.onChangeInputValue, onClear = _e.onClear, onClearSettings = _e.onClearSettings, onDisplayInput = _e.onDisplayInput, displayInput = _e.displayInput, isMobileInputView = _e.isMobileInputView, isMobile = _e.isMobile, filter = _e.filter;
     useEffect(function () {
         setDisplayManageColumnButton(!isMobileInputView && !!withManageColumnButton);
     }, [isMobileInputView, withManageColumnButton, setDisplayManageColumnButton]);
-    var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
-    return (_jsxs(ControlButtonsContainer, { children: [_jsxs(Left, { children: [!hideControlButtons && (_jsxs(_Fragment, { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
+    var filtersCount = filter ? Object.values(filter).filter(function (item) { return isFilterActive(item.value); }).length : 0;
+    var hasFilters = !!(displayColumnsDefinitions === null || displayColumnsDefinitions === void 0 ? void 0 : displayColumnsDefinitions.some(function (col) { return col.filtering; }));
+    var hasSortableColumns = !!(displayColumnsDefinitions === null || displayColumnsDefinitions === void 0 ? void 0 : displayColumnsDefinitions.some(function (col) { return col.sorting; }));
+    var sortCount = (_c = (_b = gridSelectors.sorting) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+    return (_jsxs(ControlButtonsContainer, { children: [_jsxs(Left, { children: [!hideControlButtons && (_jsxs(_Fragment, { children: [quickFilter && !isMobile && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
                                     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" }, palettes.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 })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft, isMobile: isMobile }), _jsx(x.div, { children: !!filtersCount && !isMobile && (_jsx(Button, { type: "button", onClick: onClearSettings, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }) })) })] })), isMobile && hasFilters && (_jsxs(Button, { type: "button", appearance: filtersCount ? 'primary' : 'tertiary', onClick: onOpenMobileFilters, "data-cy": "mobileFilterBtn", children: [_jsx(Filter, { fill: filtersCount ? 'white' : '#DB2B19' }), _jsxs(H6, { variant: "semiBold", mt: 0, mb: 0, ml: "6px", children: [_jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), " ", filtersCount > 0 && "(".concat(filtersCount, ")")] })] })), isMobile && hasSortableColumns && (_jsx(x.div, { ml: "10px", children: _jsxs(Button, { type: "button", appearance: sortCount ? 'primary' : 'tertiary', onClick: onOpenMobileSorting, "data-cy": "mobileSortBtn", children: [_jsx(Sort, { stroke: sortCount ? 'white' : '#DB2B19' }), _jsxs(H6, { variant: "semiBold", mt: 0, mb: 0, ml: "6px", children: [_jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), " ", sortCount > 0 && "(".concat(sortCount, ")")] })] }) })), withPresets && gridName && !isMobile && (_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" }, palettes.redWhite, { children: _jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: selectedPresetName }) })))] }))] }), _jsxs(Right, { children: [_jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopRight, isMobile: isMobile }), displayManageColumnButton && !isMobile && (_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/ExtraControlButtons/ExtraControlButtons.d.ts

@@ -5,6 +5,7 @@ export declare const Row: import('styled-components').StyledComponent<"div", imp
 type Props = {
     extraControlButtons: CommonGridProps['extraControlButtons'];
     targetPosition: ExtraControlButton['position'];
+    isMobile?: boolean;
 };
 declare const ExtraControlButtons: FC<Props>;
 export default ExtraControlButtons;

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

@@ -16,6 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import Button from '../../../../Elements/Button/Button';
 import DropdownSelect from '../../../../Elements/DropdownSelect';
+import ButtonMore from '../ButtonMore/ButtonMore';
 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"])));
@@ -34,13 +35,32 @@ var ControlButton = function (_a) {
     }
 };
 var ExtraControlButtons = function (_a) {
-    var extraControlButtons = _a.extraControlButtons, targetPosition = _a.targetPosition;
-    return (_jsx(Row, { children: (extraControlButtons || [])
-            .filter(function (_a) {
-            var position = _a.position;
-            return position == targetPosition;
-        })
-            .map(function (button, idx) { return (_jsx(x.div, { children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }));
+    var extraControlButtons = _a.extraControlButtons, targetPosition = _a.targetPosition, isMobile = _a.isMobile;
+    var buttons = (extraControlButtons || []).filter(function (_a) {
+        var position = _a.position, hide = _a.hide;
+        return position === targetPosition && !hide;
+    });
+    if (isMobile && buttons.length > 0) {
+        var items = buttons.flatMap(function (_a) {
+            var onSelect = _a.onSelect, onClick = _a.onClick, options = _a.options, label = _a.label;
+            if (options && onSelect) {
+                return options.map(function (option) { return ({
+                    title: option.label,
+                    onClick: function () {
+                        onSelect(option.value);
+                    }
+                }); });
+            }
+            if (label && onClick) {
+                return [{ title: label, onClick: onClick }];
+            }
+            return [];
+        });
+        if (items.length === 0)
+            return null;
+        return _jsx(ButtonMore, { items: items });
+    }
+    return (_jsx(Row, { children: buttons.map(function (button, idx) { return (_jsx(x.div, { children: _jsx(ControlButton, __assign({}, button)) }, idx)); }) }));
 };
 export default ExtraControlButtons;
 var templateObject_1, templateObject_2;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.d.ts

@@ -11,6 +11,7 @@ type DatePickerRangeProps = FilterComponentProps<Date[]> & {
 type DateRangeProps = DatePickerRangeProps & {
     error?: string;
     label?: string;
+    compact?: boolean;
 };
 declare const DatePickerRange: FC<DateRangeProps>;
 export default DatePickerRange;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js

@@ -33,15 +33,27 @@ import { useClickOutside } from '../../../../Modal/hooks/useClickOutside';
 import { getCleanValues } from './utils/getCleanValues';
 import { pickerRangeToString } from './utils/pickerRangeToString';
 import { i18n } from '@lingui/core';
-import styled from '@xstyled/styled-components';
-var RangeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  margin-right: 20px;\n"], ["\n  display: inline-flex;\n  margin-right: 20px;\n"])));
+import styled, { css } from '@xstyled/styled-components';
+var RangeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  flex-direction: ", ";\n  margin-right: ", ";\n\n  ", "\n"], ["\n  display: ", ";\n  flex-direction: ", ";\n  margin-right: ", ";\n\n  ", "\n"])), function (_a) {
+    var $compact = _a.$compact;
+    return ($compact ? 'flex' : 'inline-flex');
+}, function (_a) {
+    var $compact = _a.$compact;
+    return ($compact ? 'column' : 'row');
+}, function (_a) {
+    var $compact = _a.$compact;
+    return ($compact ? '0' : '20px');
+}, function (_a) {
+    var $compact = _a.$compact;
+    return $compact && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      .rdtPicker {\n        min-width: unset;\n        width: 100%;\n        box-sizing: border-box;\n        padding: 0.5rem 0.5rem;\n      }\n      .rdtPicker .rdtDays {\n        min-width: unset;\n      }\n      .rdtPicker td {\n        padding: 0 0.2rem;\n      }\n    "], ["\n      .rdtPicker {\n        min-width: unset;\n        width: 100%;\n        box-sizing: border-box;\n        padding: 0.5rem 0.5rem;\n      }\n      .rdtPicker .rdtDays {\n        min-width: unset;\n      }\n      .rdtPicker td {\n        padding: 0 0.2rem;\n      }\n    "])));
+});
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
     return _jsx("div", { children: children });
 };
 var DatePickerRange = function (props) {
     var _a, _b, _c;
-    var onChange = props.onChange, error = props.error, label = props.label, value = props.value, others = props.others, filterTime = props.filterTime, initialView = props.initialView, _d = props.OverlayComponent, OverlayComponent = _d === void 0 ? OverlayComponentDefault : _d, rest = __rest(props, ["onChange", "error", "label", "value", "others", "filterTime", "initialView", "OverlayComponent"]);
+    var onChange = props.onChange, error = props.error, label = props.label, value = props.value, others = props.others, filterTime = props.filterTime, initialView = props.initialView, compact = props.compact, _d = props.OverlayComponent, OverlayComponent = _d === void 0 ? OverlayComponentDefault : _d, rest = __rest(props, ["onChange", "error", "label", "value", "others", "filterTime", "initialView", "compact", "OverlayComponent"]);
     var _e = useState((_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : undefined), startRangeValue = _e[0], setStartRangeValue = _e[1];
     var _f = useState((_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : undefined), endRangeValue = _f[0], setEndRangeValue = _f[1];
     var timeFormat = filterTime ? 'HH:mm' : false;
@@ -94,7 +106,7 @@ var DatePickerRange = function (props) {
     // Check if the second value is not selected and the first value is the same as the initial value
     var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
     var ref = useClickOutside({ onClose: onClose });
-    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue, others), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, others: others === null || others === void 0 ? void 0 : others[0], onChangeOthers: handleOthersChangeFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, others: others === null || others === void 0 ? void 0 : others[1], onChangeOthers: handleOthersChangeTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, isSecondDatePicker: true }))] })) }) })] }));
+    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue, others), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { "$compact": compact, className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, others: others === null || others === void 0 ? void 0 : others[0], onChangeOthers: handleOthersChangeFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: !compact, open: true })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, others: others === null || others === void 0 ? void 0 : others[1], onChangeOthers: handleOthersChangeTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: !compact, open: true, isSecondDatePicker: true }))] })) }) })] }));
 };
 export default DatePickerRange;
-var templateObject_1;
+var templateObject_1, templateObject_2;

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

@@ -4,5 +4,7 @@ import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 export var GridInfo = function (_a) {
     var isSortTerminatedAppeal = _a.isSortTerminatedAppeal, isSortTerminated = _a.isSortTerminated;
+    if (!isSortTerminatedAppeal)
+        return null;
     return (_jsxs(x.span, { ml: "8px", fontSize: "12px", display: "flex", gap: "8px", alignItems: "center", children: [isSortTerminatedAppeal && !isSortTerminated && (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: "circleTriangle", size: "20px", fill: "yellow70" }), _jsx(Trans, { id: "dataGrid.sortingTerminatedAppeal", message: "Too many results, please set a filter" })] })), isSortTerminated && (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: "circleTriangle", size: "20px", fill: "dangerColor" }), _jsx(Trans, { id: "dataGrid.sortingTerminated", message: "Too many results, sorting cannot be used" })] }))] }));
 };

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

@@ -0,0 +1,4 @@
+import { PropsWithChildren, ReactElement } from 'react';
+
+declare const MobileFilterDropdown: ({ children }: PropsWithChildren) => ReactElement;
+export default MobileFilterDropdown;

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

@@ -0,0 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+var OverlayWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 10;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background-color: white;\n  border-radius: 4px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n"], ["\n  position: absolute;\n  z-index: 10;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background-color: white;\n  border-radius: 4px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n"])));
+var MobileFilterDropdown = function (_a) {
+    var children = _a.children;
+    return _jsx(OverlayWrapper, { children: children });
+};
+export default MobileFilterDropdown;
+var templateObject_1;

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparators, ActionColumn, UxState, RowProps, GridSelectorsType } from '../types';
+
+type Props = {
+    isShown: boolean;
+    onClose: () => void;
+    columns: ColumnDefinition[];
+    actionColumn?: ActionColumn;
+    filters?: FiltersConfig;
+    comparators?: CustomComparators;
+    filterValues?: GridSelectorsType['filter'];
+    setFilters: Required<GridActionsType>['setFilters'];
+    rowsData: RowProps[];
+    uxState: UxState;
+    handleUxChange?: GridActionsType['handleUxChange'];
+    onAsyncLoadFilterOptions?: (key: string, value: string) => void;
+    onClearSettings?: () => void;
+};
+declare const MobileFilterModal: FC<Props>;
+export default MobileFilterModal;

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

@@ -0,0 +1,69 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { H6 } from '../../../Elements/Typography';
+import { Modal } from '../../Modal/Modal';
+import { createFilterType, getFilterName, isFilterActive } from '../utils';
+import { Trans } from '@lingui/react';
+import { x } from '@xstyled/styled-components';
+import get from 'lodash/fp/get';
+import OverlayComponent from './MobileFilterDropdown';
+var MobileFilterModal = function (_a) {
+    var isShown = _a.isShown, onClose = _a.onClose, columns = _a.columns, filters = _a.filters, comparators = _a.comparators, _b = _a.filterValues, filterValues = _b === void 0 ? {} : _b, setFilters = _a.setFilters, rowsData = _a.rowsData, uxState = _a.uxState, handleUxChange = _a.handleUxChange, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions, actionColumn = _a.actionColumn, onClearSettings = _a.onClearSettings;
+    var filterableColumns = columns.filter(function (col) { return col.filtering; });
+    var _c = useState(filterValues !== null && filterValues !== void 0 ? filterValues : {}), localFilterValues = _c[0], setLocalFilterValues = _c[1];
+    // Re-sync local state whenever the modal is opened
+    useEffect(function () {
+        if (isShown) {
+            setLocalFilterValues(filterValues !== null && filterValues !== void 0 ? filterValues : {});
+        }
+    }, [isShown]);
+    var hasActiveFilters = Object.values(localFilterValues).some(function (item) { return isFilterActive(item.value); });
+    var handleChange = useCallback(function (column) {
+        return function (event, extraOthers) {
+            var value = (event === null || event === void 0 ? void 0 : event.target) ? event.target.value : event;
+            setLocalFilterValues(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[getFilterName(column)] = {
+                    value: value,
+                    filterProps: {
+                        type: createFilterType(column),
+                        filterExtraProps: column.filterExtraProps || {},
+                        computedValue: column.getFilterCriteria ? column.getFilterCriteria(value) : null
+                    },
+                    others: extraOthers
+                }, _a)));
+            });
+        };
+    }, []);
+    var handleApplyFilters = useCallback(function (close) {
+        setFilters(localFilterValues);
+        close();
+    }, [localFilterValues, setFilters]);
+    var handleReset = useCallback(function () {
+        setLocalFilterValues({});
+        onClearSettings === null || onClearSettings === void 0 ? void 0 : onClearSettings();
+    }, [onClearSettings]);
+    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), onCancel: handleReset, cancelLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), onConfirm: handleApplyFilters, confirmLabel: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), hasFooter: hasActiveFilters, width: "narrow", children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "16px", p: "8px 4px", children: filterableColumns.map(function (column) {
+                var filterType = createFilterType(column);
+                var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
+                var defaultComparators = comparators === null || comparators === void 0 ? void 0 : comparators[filterType];
+                var value = get([getFilterName(column), 'value'], localFilterValues);
+                var others = get([getFilterName(column), 'others'], localFilterValues);
+                if (!(filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent))
+                    return null;
+                var RenderComponent = filterConfig.CellComponent;
+                return (_jsxs(x.div, { display: "flex", flexDirection: "column", gap: "6px", position: "relative", children: [column.title && (_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: column.title })), _jsx(RenderComponent, __assign({ asyncLoadKey: column.asyncLoadKey, "data-test": column.name, name: column.name, onChange: handleChange(column), value: value, others: others, OverlayComponent: OverlayComponent, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, (filterType === 'date' && { compact: true }), (filterType === 'options' && { options: column.filterOptions }), filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, column.filterExtraProps))] }, column.name));
+            }) }) }));
+};
+export default MobileFilterModal;

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ColumnDefinition, GridActionsType, GridSelectorsType } from '../types';
+
+type Props = {
+    isShown: boolean;
+    onClose: () => void;
+    columns: ColumnDefinition[];
+    sortingValues?: GridSelectorsType['sorting'];
+    onAddSorting: Required<GridActionsType>['addSorting'];
+    onResetSorting?: GridActionsType['resetSorting'];
+};
+declare const MobileSortModal: FC<Props>;
+export default MobileSortModal;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import Button from '../../../Elements/Button';
+import { Modal } from '../../Modal/Modal';
+import { getSortName } from '../utils';
+import { SortingUp, SortingDown } from './icons/Sorting';
+import { Trans } from '@lingui/react';
+import { x } from '@xstyled/styled-components';
+var AscIcon = _jsx(SortingUp, { width: "16", fill: "white" });
+var DescIcon = _jsx(SortingDown, { width: "16", fill: "white" });
+var SortRow = function (_a) {
+    var column = _a.column, currentDirection = _a.currentDirection, onCycle = _a.onCycle;
+    var handleClick = useCallback(function () {
+        onCycle(column);
+    }, [column, onCycle]);
+    var icon = currentDirection === 'asc' ? AscIcon : currentDirection === 'desc' ? DescIcon : null;
+    return (_jsx(Button, { type: "button", onClick: handleClick, appearance: currentDirection ? 'primary' : 'secondary', iconRight: icon, fullWidth: true, children: column.title }));
+};
+var MobileSortModal = function (_a) {
+    var isShown = _a.isShown, onClose = _a.onClose, columns = _a.columns, _b = _a.sortingValues, sortingValues = _b === void 0 ? [] : _b, onAddSorting = _a.onAddSorting, onResetSorting = _a.onResetSorting;
+    var sortableColumns = columns.filter(function (col) { return col.sorting; });
+    var getCurrentDirection = useCallback(function (column) { var _a; return ((_a = sortingValues.find(function (s) { return s.column === getSortName(column); })) === null || _a === void 0 ? void 0 : _a.direction) || null; }, [sortingValues]);
+    var activeSortedColumn = sortableColumns.find(function (col) { return getCurrentDirection(col) !== null; });
+    var handleCycle = useCallback(function (column) {
+        var current = getCurrentDirection(column);
+        var next = current ? (current === 'asc' ? 'desc' : null) : 'asc';
+        onAddSorting(getSortName(column), next);
+    }, [getCurrentDirection, onAddSorting]);
+    var handleClearSort = useCallback(function () {
+        onResetSorting === null || onResetSorting === void 0 ? void 0 : onResetSorting();
+    }, [onResetSorting]);
+    return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), onConfirm: activeSortedColumn ? handleClearSort : undefined, confirmLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), width: "narrow", children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "8px", p: "8px 4px", children: sortableColumns.map(function (column) { return (_jsx(SortRow, { column: column, currentDirection: getCurrentDirection(column), onCycle: handleCycle }, column.name)); }) }) }));
+};
+export default MobileSortModal;

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

@@ -10,5 +10,5 @@ type QuickFilterProps = {
     isMobileInputView?: boolean;
     alwaysShowClear?: boolean;
 };
-declare const QuickFilter: ({ searchedValue, placeholderText, onChange, onClick, displayInput, onClear, isMobileInputView, alwaysShowClear, }: QuickFilterProps) => import("react/jsx-runtime").JSX.Element;
+declare const QuickFilter: ({ searchedValue, placeholderText, onChange, onClick, displayInput, onClear, isMobileInputView, alwaysShowClear }: QuickFilterProps) => import("react/jsx-runtime").JSX.Element;
 export default QuickFilter;

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

@@ -3,9 +3,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import Button from '../../../../Elements/Button';
 import Input from '../../../../Forms/Input';
 import styled, { x } from '@xstyled/styled-components';
-import Button from '../../../../Elements/Button';
 var StyledInput = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: ", ";\n  z-index: ", ";\n  width: ", ";\n"], ["\n  position: ", ";\n  z-index: ", ";\n  width: ", ";\n"])), function (_a) {
     var isMobileInputView = _a.isMobileInputView;
     return (isMobileInputView ? 'absolute' : 'relative');
@@ -14,7 +14,7 @@ var StyledInput = styled(Input)(templateObject_1 || (templateObject_1 = __makeTe
     return (isMobileInputView ? '3' : '1');
 }, function (_a) {
     var isMobileInputView = _a.isMobileInputView;
-    return (isMobileInputView ? '90vw' : 'auto');
+    return (isMobileInputView ? 'auto' : 'auto');
 });
 var QuickFilter = function (_a) {
     var searchedValue = _a.searchedValue, placeholderText = _a.placeholderText, onChange = _a.onChange, onClick = _a.onClick, displayInput = _a.displayInput, onClear = _a.onClear, isMobileInputView = _a.isMobileInputView, alwaysShowClear = _a.alwaysShowClear;

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

@@ -60,7 +60,7 @@ var useManageColumn = function (_a) {
         setColumnsConfigOptions(columnConfig || {});
     }, [columnsOrderValue, onClose]);
     var getSortedColumns = useCallback(function (orderValues, isManageModal) {
-        var list = columns.filter(function (column) { return isManageModal ? !column.alwaysOff : isColumnOn(column, columnsConfigOptions); });
+        var list = !isManageModal ? columns.filter(function (column) { return isColumnOn(column, columnsConfigOptions); }) : columns;
         var sortFunction = function (col1, col2) {
             var i = (orderValues || []).indexOf(col1.name);
             var j = (orderValues || []).indexOf(col2.name);

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

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

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

@@ -12,7 +12,7 @@ var defaultVoidFunction = function () {
 };
 var useQuickFilter = function (_a) {
     var _b, _c;
-    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, quickFilter = _a.quickFilter, columns = _a.columns, filters = _a.filters;
+    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 filter = gridSelectors.filter;
     var isMobile = useCheckDeviceWidth().isMobile;
@@ -20,7 +20,7 @@ var useQuickFilter = function (_a) {
     var _g = useState(false), displayInput = _g[0], setDisplayInput = _g[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 = (columns === null || columns === void 0 ? void 0 : columns.find(function (item) { return item.name === quickFilter; })) || null;
+    var searchedColumnsDefinitions = (displayColumnsDefinitions === null || displayColumnsDefinitions === void 0 ? void 0 : displayColumnsDefinitions.find(function (item) { return item.name === quickFilter; })) || null;
     var filterType = createFilterType(searchedColumnsDefinitions || {});
     var filtersDefaultComparator = ((_c = filters === null || filters === void 0 ? void 0 : filters[filterType].defaultExtraProps) === null || _c === void 0 ? void 0 : _c.defaultComparator) || 'eq';
     var searchComparator = (quickFilterValues && quickFilterValues.comparator) || filtersDefaultComparator;

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

@@ -1,9 +1,7 @@
 import { FilterProps, SortingValueType, InitProps, GridState, GridSelectorsType, ColumnConfig, Filtering, GridPresets } from '../types';
 
 type DefaultRootState = {};
-export type MultiState = {
-    [key: string]: GridState;
-};
+export type MultiState = Record<string, GridState>;
 export declare const initialState: GridState;
 export declare const actionPrefix = "@store/CommonGrid";
 export declare const actionTypes: {
@@ -22,6 +20,7 @@ export declare const actionTypes: {
     addFilter: string;
     setFilters: string;
     addSorting: string;
+    resetSorting: string;
     clearSettings: string;
     resetGrid: string;
     setColumnWidth: string;
@@ -40,9 +39,7 @@ export declare const createActions: (gridName: string) => {
     setPresets: (presets: GridPresets) => Action;
     createPreset: (presetName: string, filters: Filtering) => Action;
     deletePreset: (presetName: string) => Action;
-    setColumnWidth: (columnsWidth: null | {
-        [anyKey: string]: number;
-    }, columnLayout: "normal" | "no-scroll" | "sticky") => Action;
+    setColumnWidth: (columnsWidth: null | Record<string, number>, columnLayout: "normal" | "no-scroll" | "sticky") => Action;
     resetGrid: () => Action;
     setColumnsOrder: (columnsOrder: string[]) => Action;
     setRowsPerPage: (rowsPerPage: number) => Action;
@@ -50,6 +47,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

@@ -46,6 +46,7 @@ export var actionTypes = {
     addFilter: "".concat(actionPrefix, "/addFilter"),
     setFilters: "".concat(actionPrefix, "/setFilters"),
     addSorting: "".concat(actionPrefix, "/addSorting"),
+    resetSorting: "".concat(actionPrefix, "/resetSorting"),
     clearSettings: "".concat(actionPrefix, "/clearSettings"),
     resetGrid: "".concat(actionPrefix, "/resetGrid"),
     setColumnWidth: "".concat(actionPrefix, "/setColumnWidth"),
@@ -56,7 +57,7 @@ export default (function (state, action) {
     if (state === void 0) { state = {}; }
     return produce(state, function (draft) {
         var _a, _b, _c;
-        var _d, _e, _f, _g, _h;
+        var _d, _e, _f, _g, _h, _j;
         // version migrations
         if (!migrationChecked && state && Object.keys(state).length > 0) {
             draft = migrateState(draft);
@@ -118,6 +119,9 @@ export default (function (state, action) {
                 }
                 draft[gridName].sorting = sorting;
                 break;
+            case actionTypes.resetSorting:
+                draft[gridName].sorting = ((_j = draft[gridName].defaultSorting) === null || _j === void 0 ? void 0 : _j.length) ? draft[gridName].defaultSorting : initialState.sorting;
+                break;
             case actionTypes.clearSettings:
                 draft[gridName].page = initialState.page;
                 draft[gridName].filter = initialState.filter;
@@ -211,6 +215,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 +229,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);
     },