@mailstep/design-system 0.7.47-beta.1 → 0.7.47-beta.11

package/package.json

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

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

@@ -1,5 +1,5 @@
 import { DropResult } from 'react-beautiful-dnd';
-import { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
+import type { CommonGridProps, FiltersConfig, ColumnDefinition } from './types';
 type Props = CommonGridProps & {
     filters?: FiltersConfig;
     handleDragEnd: (item: DropResult) => void;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -67,7 +67,7 @@ var CommonGrid = function (_a) {
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {
                                     var rowIndex = rowsPerPage * page + (index + 1) - rowsPerPage;
-                                    return (_jsx(DataRow, { rowData: row, rowIndex: rowIndex, uxState: uxState, isEven: hasColouredRows && (index + 1) % 2 === 0, allowRowSelect: allowRowSelect, allowRowSelectOnAction: allowRowSelectOnAction, onRowAction: onRowAction, onUxChange: handleUxChange, onRowEditClick: onRowEditClick, onRowReadClick: onRowReadClick, onRowClick: onRowClick, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, displayColumnsWidth: displayColumnsWidth, groups: groups }, row.id));
+                                    return (_jsx(DataRow, { rowData: row, rowIndex: rowIndex, uxState: uxState, isEven: hasColouredRows && (index + 1) % 2 === 0, allowRowSelect: allowRowSelect, allowRowSelectOnAction: allowRowSelectOnAction, onRowAction: onRowAction, onUxChange: handleUxChange, onRowClick: onRowClick, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups }, row.id));
                                 }) })] }) }), floatingButtonProps && _jsx(FloatingButton, __assign({}, floatingButtonProps))] }));
 };
 export default CommonGrid;

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -66,6 +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;
-    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, actionColumn: actionColumnDefinition, 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 })] }));
+    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/HoC/withProps.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const withProps: (input: any) => <P>(Component: FC<P>) => FC<P>;
+export default withProps;

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

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+var withProps = function (input) {
+    return function (Component) {
+        return function ComponentWithProps(props) {
+            var additinalProps = typeof input === 'function' ? input(props) : input;
+            return _jsx(Component, __assign({}, props, additinalProps));
+        };
+    };
+};
+export default withProps;

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

@@ -2,11 +2,11 @@ import { GridActionsType, GridSelectorsType, OnBatchActionFn, RowProps, ActionCo
 type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
-    actionColumn?: ActionColumn;
+    actionOptions?: ActionColumn['actionOptions'];
     onBatchAction?: OnBatchActionFn;
     rowsData: RowProps[];
     processCheckedValues?: () => void;
     processCheckedValuesTitle?: string;
 };
-declare const ActionHead: ({ gridActions, gridSelectors, actionColumn, onBatchAction, rowsData, processCheckedValues, processCheckedValuesTitle }: Props) => JSX.Element;
+declare const ActionHead: ({ gridActions, gridSelectors, actionOptions, onBatchAction, rowsData, processCheckedValues, processCheckedValuesTitle }: Props) => JSX.Element;
 export default ActionHead;

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

@@ -17,12 +17,11 @@ var StyledText = styled.span(templateObject_3 || (templateObject_3 = __makeTempl
 var ContentWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var ButtonsWrap = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n\n  & > * {\n    margin-left: 10px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n\n  & > * {\n    margin-left: 10px;\n  }\n"])));
 var ActionHead = function (_a) {
-    var _b;
-    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, actionColumn = _a.actionColumn, onBatchAction = _a.onBatchAction, rowsData = _a.rowsData, processCheckedValues = _a.processCheckedValues, processCheckedValuesTitle = _a.processCheckedValuesTitle;
+    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, actionOptions = _a.actionOptions, onBatchAction = _a.onBatchAction, rowsData = _a.rowsData, processCheckedValues = _a.processCheckedValues, processCheckedValuesTitle = _a.processCheckedValuesTitle;
     var handleUxChange = (gridActions || {}).handleUxChange;
-    var _c = (gridSelectors || {}).uxState, uxState = _c === void 0 ? {} : _c;
-    var _d = useToggleAllCheckbox(rowsData, uxState, handleUxChange), checked = _d[0], toggleCheckbox = _d[1];
-    var _e = useGridActionTrigger(rowsData, uxState, actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions, onBatchAction), enabledActions = _e[0], onSubmit = _e[1];
+    var _b = (gridSelectors || {}).uxState, uxState = _b === void 0 ? {} : _b;
+    var _c = useToggleAllCheckbox(rowsData, uxState, handleUxChange), checked = _c[0], toggleCheckbox = _c[1];
+    var _d = useGridActionTrigger(rowsData, uxState, actionOptions, onBatchAction), enabledActions = _d[0], onSubmit = _d[1];
     var checkedRowsCount = Object.keys((uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows) || []).length;
     var checkAll = useCallback(function () {
         if (!checked) {
@@ -30,21 +29,20 @@ var ActionHead = function (_a) {
         }
     }, [checked, toggleCheckbox]);
     var actionsOptions = useMemo(function () {
-        var _a;
-        if ((_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _a === void 0 ? void 0 : _a.length) {
-            return actionColumn.actionOptions.map(function (option) { return ({
+        if (actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.length) {
+            return actionOptions.map(function (option) { return ({
                 title: option.label,
                 onClick: function () { return onSubmit(option.value); },
                 link: '#'
             }); });
         }
         return [];
-    }, [actionColumn, onSubmit]);
+    }, [actionOptions, onSubmit]);
     return (_jsx(Wrap, { children: checkedRowsCount > 0 && (_jsx(ActionsWrap, { children: _jsxs(ContentWrap, { children: [_jsx(StyledText, { children: i18n._({
                             id: 'dataGrid.checkedRowsCount',
                             message: "Selected {checkedRowsCount} items",
                             values: { checkedRowsCount: checkedRowsCount }
-                        }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondary", variant: "default", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), processCheckedValues && (_jsx(Button, { type: "button", onClick: processCheckedValues, appearance: "primary", variant: "default", "data-cy": "exportBtn", disabled: !rowsData.length, children: processCheckedValuesTitle ? (processCheckedValuesTitle) : (_jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" })) })), ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
+                        }) }), _jsxs(ButtonsWrap, { children: [_jsx(Button, { type: "button", onClick: checkAll, appearance: "secondary", variant: "default", "data-cy": "checkAllBtn", disabled: checked, children: _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }) }), processCheckedValues && (_jsx(Button, { type: "button", onClick: processCheckedValues, appearance: "primary", variant: "default", "data-cy": "exportBtn", disabled: !rowsData.length, children: processCheckedValuesTitle || _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }) })), (actionOptions === null || actionOptions === void 0 ? void 0 : actionOptions.length) && (_jsx(ButtonMore, { items: actionsOptions, disabled: !enabledActions.length || !rowsData.length, dropdownPosition: "top" }))] })] }) })) }));
 };
 export default ActionHead;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,4 +1,4 @@
-import type { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparators, Group } from '../types';
+import type { ColumnDefinition, GridActionsType, FiltersConfig, CustomComparators, Group, ActionColumn, UxState, RowProps } from '../types';
 type Props = {
     onChange: Required<GridActionsType>['addFilter'];
     value?: any;
@@ -8,6 +8,10 @@ type Props = {
     filters?: FiltersConfig;
     group?: Group;
     comparators?: CustomComparators;
+    actionColumn?: ActionColumn;
+    rowsData: RowProps[];
+    uxState: UxState;
+    handleUxChange: GridActionsType['handleUxChange'];
 };
-declare const ColumnFilterCell: ({ onChange, value, others, displayColumnWidth, filters, column: columnDefinition, group, comparators }: Props) => JSX.Element;
+declare const ColumnFilterCell: ({ onChange, value, others, displayColumnWidth, filters, column: columnDefinition, group, comparators, actionColumn, rowsData, uxState, handleUxChange }: Props) => JSX.Element;
 export default ColumnFilterCell;

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

@@ -17,7 +17,7 @@ import { x } from '@xstyled/styled-components';
 import OverlayComponent from './FilterDropdown';
 import { Cell } from './Table';
 var ColumnFilterCell = function (_a) {
-    var onChange = _a.onChange, value = _a.value, others = _a.others, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group, comparators = _a.comparators;
+    var onChange = _a.onChange, value = _a.value, others = _a.others, displayColumnWidth = _a.displayColumnWidth, filters = _a.filters, columnDefinition = _a.column, group = _a.group, comparators = _a.comparators, actionColumn = _a.actionColumn, rowsData = _a.rowsData, uxState = _a.uxState, handleUxChange = _a.handleUxChange;
     var cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
     var handleAddFilter = useAddFilter(onChange);
     var handleChange = React.useCallback(function (event, others) {
@@ -35,6 +35,6 @@ var ColumnFilterCell = function (_a) {
         console.error("ERROR, using unknown filter type ".concat(filterType));
         return (_jsx(x.div, { children: _jsx("span", { children: "".concat(filterType, " filter") }) }));
     }
-    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { children: _jsx(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, others: others, OverlayComponent: OverlayComponent, comparators: defaultComparators }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, (filterType == 'options' && { options: columnDefinition.filterOptions }))) }) })));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { children: _jsx(RenderComponent, __assign({ "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, others: others, OverlayComponent: OverlayComponent, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, (filterType == 'options' && { options: columnDefinition.filterOptions }))) }) })));
 };
 export default ColumnFilterCell;

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

@@ -6,6 +6,7 @@ type DataCellPros = {
     onRowAction?: (id: string, field: string, value: any, rowData?: RowProps) => void;
     displayColumnWidth: number;
     group: Group;
+    rowIndex: number;
 };
 declare const MemoDataCell: React.NamedExoticComponent<DataCellPros>;
 export default MemoDataCell;

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

@@ -15,14 +15,14 @@ import get from 'lodash/fp/get';
 import { TextCell } from './Table';
 import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
 var DataCell = function (_a) {
-    var column = _a.column, group = _a.group, rowData = _a.rowData, onRowAction = _a.onRowAction, displayColumnWidth = _a.displayColumnWidth;
+    var column = _a.column, group = _a.group, rowData = _a.rowData, onRowAction = _a.onRowAction, displayColumnWidth = _a.displayColumnWidth, rowIndex = _a.rowIndex;
     var Wrapper = column.fixedSize ? 'div' : TextCell;
     var wrapperBaseProps = column.fixedSize
         ? { style: __assign(__assign({}, getCellSizeProps(column, displayColumnWidth)), { alignSelf: 'center' }) }
         : getCellSizeProps(column, displayColumnWidth);
     var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo), " ").concat(getGroupClassNames(group));
     if (column.cellComponent) {
-        return (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: _jsx(column.cellComponent, { rowData: rowData, onRowAction: onRowAction, column: column }) })));
+        return (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: _jsx(column.cellComponent, { rowData: rowData, onRowAction: onRowAction, column: column, rowIndex: rowIndex }) })));
     }
     else {
         return (_jsx(Wrapper, __assign({ className: cellClassName }, wrapperBaseProps, { children: column.formatRowValue ? column.formatRowValue(rowData) : get(column.name, rowData) })));

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

@@ -1,15 +1,12 @@
-import { ColumnDefinition, ActionColumn, RowProps, UxState, GridSelectorsType, Group } from '../types';
+import type { ColumnDefinition, RowProps, UxState, GridSelectorsType, Group } from '../types';
 type DataRowProps = {
     columns: ColumnDefinition[];
-    actionColumn?: ActionColumn;
     rowData: RowProps;
     rowIndex: number;
     uxState: UxState;
     allowRowSelect?: boolean;
     allowRowSelectOnAction?: boolean;
     onUxChange?: (uxKey: keyof UxState, uxValue: any) => void;
-    onRowEditClick?: (id: string, props: RowProps) => void;
-    onRowReadClick?: (id: string, props: RowProps) => void;
     onRowClick?: (id: string, props: RowProps) => void;
     onRowAction?: (id: string, field: string, value: any, rowData?: RowProps) => void;
     createLink?: (params?: object) => string;
@@ -17,5 +14,5 @@ type DataRowProps = {
     groups: Group[];
     isEven?: boolean;
 };
-declare const DataRow: ({ columns, actionColumn, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowEditClick, onRowReadClick, onRowClick, onRowAction, displayColumnsWidth, groups, isEven }: DataRowProps) => JSX.Element;
+declare const DataRow: ({ columns, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowClick, onRowAction, displayColumnsWidth, groups, isEven }: DataRowProps) => JSX.Element;
 export default DataRow;

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

@@ -1,75 +1,19 @@
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Link } from 'react-router-dom';
-import Button from '../../../Elements/Button/Button';
-import Checkbox from '../../../Forms/Checkbox';
 import { rowClassSymbol } from '../types';
-import { getActionCellSizeProps } from '../utils';
-import EditIcon from './icons/Edit';
-import EyeOpenIcon from './icons/EyeOpen';
-import { x } from '@xstyled/styled-components';
-import { isFunction } from 'lodash/fp';
 import MemoDataCell from './DataCell';
-import { Cell, StyledDataRow } from './Table';
+import { StyledDataRow } from './Table';
 import { useTimeMeasurement } from './utils';
-var EmptySpan = function (_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return _jsx("span", __assign({}, props, { children: children }));
-};
 var DataRow = function (_a) {
-    var _b, _c, _d;
-    var columns = _a.columns, actionColumn = _a.actionColumn, rowData = _a.rowData, rowIndex = _a.rowIndex, uxState = _a.uxState, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onUxChange = _a.onUxChange, onRowEditClick = _a.onRowEditClick, onRowReadClick = _a.onRowReadClick, onRowClick = _a.onRowClick, onRowAction = _a.onRowAction, displayColumnsWidth = _a.displayColumnsWidth, groups = _a.groups, isEven = _a.isEven;
+    var _b;
+    var columns = _a.columns, rowData = _a.rowData, rowIndex = _a.rowIndex, uxState = _a.uxState, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onUxChange = _a.onUxChange, onRowClick = _a.onRowClick, onRowAction = _a.onRowAction, displayColumnsWidth = _a.displayColumnsWidth, groups = _a.groups, isEven = _a.isEven;
     var isChecked = !!((_b = uxState.checkedRows) === null || _b === void 0 ? void 0 : _b[rowData.id]);
-    var onCheckboxChange = React.useCallback(function () {
-        var checkedRows = __assign({}, (uxState.checkedRows || {}));
-        if (!isChecked) {
-            checkedRows[rowData.id] = true;
-        }
-        else {
-            delete checkedRows[rowData.id];
-        }
-        onUxChange && onUxChange('checkedRows', checkedRows);
-    }, [onUxChange, isChecked, uxState, rowData]);
-    var handleEditClick = React.useCallback(function () {
-        if (onRowEditClick)
-            onRowEditClick(rowData.id, rowData);
-        if (onUxChange && allowRowSelectOnAction)
-            onUxChange('selectedRow', rowData.id);
-    }, [onRowEditClick, rowData]);
-    var handleReadClick = React.useCallback(function () {
-        if (onRowReadClick)
-            onRowReadClick(rowData.id, rowData);
-        if (onUxChange && allowRowSelectOnAction)
-            onUxChange('selectedRow', rowData.id);
-    }, [onRowReadClick, rowData]);
     var handleRowAction = React.useCallback(function (id, field, value, rowData) {
-        if (onRowAction)
-            onRowAction(id, field, value, rowData);
-        if (onUxChange && allowRowSelectOnAction)
-            onUxChange('selectedRow', id);
-    }, [onRowReadClick, rowData]);
+        onRowAction === null || onRowAction === void 0 ? void 0 : onRowAction(id, field, value, rowData);
+        if (allowRowSelectOnAction) {
+            onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('selectedRow', id);
+        }
+    }, [onRowAction, allowRowSelectOnAction, onUxChange]);
     var handleRowClick = React.useCallback(function (e) {
         // test whether I should trigger event or not (because of possible button/link/input/etc in cell)
         var classes = Object.values(e.target.classList);
@@ -82,29 +26,18 @@ var DataRow = function (_a) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [onRowClick, onUxChange, rowData]);
-    var _e = useTimeMeasurement({ handleRowClick: handleRowClick }), handleMouseDown = _e.handleMouseDown, handleMouseUp = _e.handleMouseUp;
-    var RowActionComponent = ((actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) ? Link : EmptySpan);
-    var rowActionProps = React.useCallback(function (mode) {
-        var _a;
-        return (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink)
-            ? { to: (_a = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.createLink) === null || _a === void 0 ? void 0 : _a.call(actionColumn, { mode: mode, id: rowData.id }) }
-            : { onClick: { read: handleReadClick, edit: handleEditClick }[mode] };
-    }, [actionColumn, handleReadClick, handleEditClick]);
+    var _c = useTimeMeasurement({ handleRowClick: handleRowClick }), handleMouseDown = _c.handleMouseDown, handleMouseUp = _c.handleMouseUp;
     var rowClassName = React.useMemo(function () {
         var classes = ['dataRow'];
         if (isChecked)
             classes.push('checked');
-        if (uxState.selectedRow == rowData.id && (allowRowSelect || allowRowSelectOnAction))
+        if (uxState.selectedRow === rowData.id && (allowRowSelect || allowRowSelectOnAction))
             classes.push('selected');
         if (rowData[rowClassSymbol])
             classes.push(rowData[rowClassSymbol] || '');
         return classes.join(' ');
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isChecked, uxState, rowData]);
-    var actionColumnStyle = React.useMemo(function () {
-        return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
-    }, [actionColumn]);
-    var displayReadEditCell = ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
-    return (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: !!isEven, children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsxs(Cell, { className: "cell", style: actionColumnStyle, children: [((_d = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _d === void 0 ? void 0 : _d.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes) ? (_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" })) : null, _jsxs(x.div, { children: [(isFunction(actionColumn.canRowRead) ? actionColumn.canRowRead(rowData) : actionColumn.canRowRead) && (_jsx(RowActionComponent, __assign({}, rowActionProps('read'), { children: _jsx(Button, { type: "button", variant: "default", appearance: "primary", children: _jsx(EyeOpenIcon, { width: "16px", height: "16px" }) }) }))), (isFunction(actionColumn.canRowEdit) ? actionColumn.canRowEdit(rowData) : actionColumn.canRowEdit) && (_jsx(RowActionComponent, __assign({}, rowActionProps('edit'), { children: _jsx(Button, { type: "button", variant: "default", appearance: "primary", children: _jsx(EditIcon, { width: "16px", height: "16px" }) }) })))] })] })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(x.div, { children: rowIndex }) }))] })), columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); })] }));
+    return (_jsx(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: !!isEven, children: columns.map(function (column, key) { return (_jsx(MemoDataCell, { column: column, rowData: rowData, rowIndex: rowIndex, onRowAction: handleRowAction, displayColumnWidth: displayColumnsWidth[column.name], group: groups === null || groups === void 0 ? void 0 : groups[key] }, column.name)); }) }));
 };
 export default DataRow;

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

@@ -1,4 +1,4 @@
-import { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, CustomComparators, FiltersConfig, UxState, RowProps } from '../types';
+import type { Settings, ColumnDefinition as ColumnDefinitionType, ActionColumn, GridActionsType, GridSelectorsType, Group, CustomComparators, FiltersConfig, UxState, RowProps } from '../types';
 type Props = {
     columns: ColumnDefinitionType[];
     actionColumn?: ActionColumn;
@@ -12,5 +12,5 @@ type Props = {
     rowsData: RowProps[];
     uxState: UxState;
 };
-declare const FilterRow: ({ columns, groups, actionColumn, onChange, filterValues, displayColumnsWidth, filters, comparators, handleUxChange, rowsData, uxState, }: Props) => JSX.Element;
+declare const FilterRow: ({ columns, groups, actionColumn, onChange, filterValues, displayColumnsWidth, filters, comparators, handleUxChange, rowsData, uxState }: Props) => JSX.Element;
 export default FilterRow;

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

@@ -1,34 +1,12 @@
-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 React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFilterName } from '../utils';
 import get from 'lodash/fp/get';
 import throttle from 'lodash/throttle';
 import ColumnFilterCell from './ColumnFilterCell';
-import { Row, Cell } from './Table';
-import { getActionCellSizeProps, getFilterName } from '../utils';
-import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox';
-import Checkbox from '../../../Forms/Checkbox';
+import { Row } from './Table';
 var FilterRow = function (_a) {
-    var _b, _c;
-    var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _d = _a.filterValues, filterValues = _d === void 0 ? {} : _d, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, comparators = _a.comparators, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
+    var columns = _a.columns, groups = _a.groups, actionColumn = _a.actionColumn, onChange = _a.onChange, _b = _a.filterValues, filterValues = _b === void 0 ? {} : _b, displayColumnsWidth = _a.displayColumnsWidth, filters = _a.filters, comparators = _a.comparators, handleUxChange = _a.handleUxChange, rowsData = _a.rowsData, uxState = _a.uxState;
     var handleOnChange = throttle(onChange, 500);
-    var actionColumnStyle = React.useMemo(function () {
-        return actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {};
-    }, [actionColumn]);
-    var _e = useToggleAllCheckbox(rowsData, uxState, handleUxChange), allChecked = _e[0], toggleCheckbox = _e[1];
-    var displayCheckbox = (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.checkAllPosition) === 'top' && (((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes));
-    var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
-    var rowsNumberLabel = (_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _c !== void 0 ? _c : '#';
-    return (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx("div", { children: rowsNumberLabel }) })), !!(!displayCheckbox && !displayRowNumberLabel && actionColumn) && (_jsx(Cell, { className: "cell", style: actionColumnStyle }, 'actions')), columns.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), others: get([getFilterName(column), 'others'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, comparators: comparators, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); })] }));
+    return (_jsx(Row, { className: "filterRow", children: columns.map(function (column, index) { return (_jsx(ColumnFilterCell, { column: column, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onChange: handleOnChange, value: get([getFilterName(column), 'value'], filterValues), others: get([getFilterName(column), 'others'], filterValues), displayColumnWidth: displayColumnsWidth[column.name], filters: filters, comparators: comparators, group: groups === null || groups === void 0 ? void 0 : groups[index] }, index)); }) }));
 };
 export default FilterRow;

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

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import type { ActionColumn, GridActionsType, RowProps, UxState } from '../../../types';
+type Props = {
+    actionColumn?: ActionColumn;
+    rowsData?: RowProps[];
+    uxState?: UxState;
+    handleUxChange?: GridActionsType['handleUxChange'];
+};
+declare const ActionFilter: FC<Props>;
+export default ActionFilter;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Checkbox from '../../../../../Forms/Checkbox';
+import { useToggleAllCheckbox } from '../../../hooks/useToggleAllCheckbox';
+import { x } from '@xstyled/styled-components';
+var ActionFilter = function (_a) {
+    var _b, _c;
+    var actionColumn = _a.actionColumn, rowsData = _a.rowsData, uxState = _a.uxState, handleUxChange = _a.handleUxChange;
+    var _d = useToggleAllCheckbox(rowsData || [], uxState || {}, handleUxChange), allChecked = _d[0], toggleCheckbox = _d[1];
+    var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
+    var rowsNumberLabel = (_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _b !== void 0 ? _b : '#';
+    var displayCheckbox = ((_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _c === void 0 ? void 0 : _c.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
+    return (_jsxs(_Fragment, { children: [displayCheckbox && (_jsx(x.div, { pl: "8px", children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && _jsx("div", { children: rowsNumberLabel })] }));
+};
+export default ActionFilter;

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/index.d.ts

@@ -0,0 +1,2 @@
+import ActionsFilter from './ActionsFilter';
+export default ActionsFilter;

package/ui/Blocks/CommonGrid/components/Filters/ActionsFilter/index.js

@@ -0,0 +1,2 @@
+import ActionsFilter from './ActionsFilter';
+export default ActionsFilter;

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

@@ -1,5 +1,5 @@
-import { DropResult } from 'react-beautiful-dnd';
-import { Settings, ColumnDefinition, ActionColumn, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
+import type { DropResult } from 'react-beautiful-dnd';
+import type { Settings, ColumnDefinition, ActionColumn, GridSelectorsType, Group, CommonGridProps, GridActionsType } from '../types';
 type HeadRowProps = {
     actionColumn?: ActionColumn;
     columns: ColumnDefinition[];

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

@@ -19,32 +19,30 @@ import { Row, Cell } from './Table';
 var getStickyComponent = function (columns, stickyTo, displayColumnsWidth) {
     var _a;
     return (_a = columns === null || columns === void 0 ? void 0 : columns.filter(function (item) { return item.sticky && item.stickTo === stickyTo; })) === null || _a === void 0 ? void 0 : _a.map(function (column) {
-        var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo), "}");
+        var cellClassName = "cell".concat(getStickyCollClassNames(!!column.sticky, column.stickTo));
         return (_jsx(Cell, __assign({}, getCellSizeProps(column, displayColumnsWidth[column.name]), { className: cellClassName, children: _jsx(ColumnTitle, { title: column === null || column === void 0 ? void 0 : column.title, isSortable: false, sortValue: null }) }), column.name));
     });
 };
 var HeadRow = function (_a) {
-    var _b;
-    var columns = _a.columns, actionColumn = _a.actionColumn, onAddSort = _a.onAddSort, handleDragEnd = _a.handleDragEnd, _c = _a.sortingValues, sortingValues = _c === void 0 ? [] : _c, displayColumnsWidth = _a.displayColumnsWidth, columnLayout = _a.columnLayout, handleResizeDrag = _a.handleResizeDrag, groups = _a.groups;
-    var _d = useState(false), showUIElements = _d[0], setShowUIElements = _d[1];
+    var columns = _a.columns, actionColumn = _a.actionColumn, 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);
     }, []);
-    var _e = useState(false), isDragDisabled = _e[0], setIsDragDisabled = _e[1];
+    var _d = useState(false), isDragDisabled = _d[0], setIsDragDisabled = _d[1];
     var onResizeOver = React.useCallback(function () {
         setIsDragDisabled(true);
     }, [setIsDragDisabled]);
     var onResizeOut = React.useCallback(function () {
         setIsDragDisabled(false);
     }, [setIsDragDisabled]);
-    var displayReadEditCell = ((_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowEdit) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.canRowRead) || (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.forceCheckboxes);
     var onResize = React.useCallback(function (name) { return function (width) {
         handleResizeDrag === null || handleResizeDrag === void 0 ? void 0 : handleResizeDrag(name, width);
     }; }, [handleResizeDrag]);
     var onSetSort = React.useCallback(function (name, systemName) { return function (value) {
         onAddSort && onAddSort(systemName || name, value);
     }; }, [onAddSort]);
-    return (_jsx(_Fragment, { children: showUIElements && (_jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", isDropDisabled: isDragDisabled, isCombineEnabled: false, ignoreContainerClipping: false, children: function (droppableProvided) { return (_jsxs(Row, __assign({ className: "headRow", accountForScrollbar: false, ref: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: [actionColumn && (_jsxs(_Fragment, { children: [displayReadEditCell && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) })), (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) }))] })), getStickyComponent(columns, 'left', displayColumnsWidth), columns
+    return (_jsx(_Fragment, { children: showUIElements && (_jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", isDropDisabled: isDragDisabled, isCombineEnabled: false, ignoreContainerClipping: false, children: function (droppableProvided) { return (_jsxs(Row, __assign({ className: "headRow", accountForScrollbar: false, ref: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: [(actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers) && (_jsx(_Fragment, { children: _jsx(Cell, { className: "cell", style: Object.assign(__assign({}, getActionCellSizeProps(actionColumn))) }) })), getStickyComponent(columns, 'left', displayColumnsWidth), columns
                             .filter(function (item) { return !item.sticky; })
                             .map(function (column, index) { return (_jsx(Draggable, { draggableId: column.name, index: index, isDragDisabled: isDragDisabled || column.sticky, children: function (_a) {
                                 var _b;

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

@@ -5,6 +5,9 @@ export declare const Row: import("styled-components").StyledComponent<"div", imp
 }, never>;
 export declare const Cell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     align?: string | undefined;
+    flexBasis?: number | undefined;
+    flexGrow?: number | undefined;
+    flexShrink?: number | undefined;
 }, never>;
 export declare const StyledDataRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     hasRowClick?: boolean | undefined;
@@ -15,9 +18,15 @@ export declare const StyledDataRow: import("styled-components").StyledComponent<
 }, never>;
 export declare const TextCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     align?: string | undefined;
+    flexBasis?: number | undefined;
+    flexGrow?: number | undefined;
+    flexShrink?: number | undefined;
 }, never>;
 export declare const MessageCell: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     align?: string | undefined;
+    flexBasis?: number | undefined;
+    flexGrow?: number | undefined;
+    flexShrink?: number | undefined;
 } & {
     width: number;
 }, never>;

package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.js

@@ -1,15 +1,9 @@
-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';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Link as ReactLink } from 'react-router-dom';
-import Spinner from '../../../../Elements/Spinner/Spinner';
 import Icon from '../../../../Elements/Icon/Icon';
-var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  & > * {\n    cursor: pointer;\n    color: gray1;\n    :hover {\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  & > * {\n    cursor: pointer;\n    color: gray1;\n    :hover {\n      color: blue2;\n    }\n  }\n"])));
+import Spinner from '../../../../Elements/Spinner/Spinner';
+import { x } from '@xstyled/styled-components';
 export var IconButtonInCell = function (_a) {
     var icon = _a.icon, isLoading = _a.isLoading, onClick = _a.onClick, linkTo = _a.linkTo;
-    return (_jsx(Center, { children: isLoading ? (_jsx(Spinner, { variant: "sm" })) : linkTo ? (_jsx(ReactLink, { to: linkTo, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px" }) })) : (_jsx("span", { onClick: onClick, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px" }) })) }));
+    return (_jsx(_Fragment, { children: isLoading ? (_jsx(Spinner, { variant: "sm" })) : linkTo ? (_jsx(ReactLink, { to: linkTo, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px", fill: "blue2" }) })) : (_jsx(x.span, { onClick: onClick, "data-cy": "".concat(icon, "IconBtn"), cursor: "pointer", h: "100%", w: "100%", display: "flex", alignItems: "center", justifyContent: "center", children: _jsx(Icon, { icon: icon || 'warning', size: "16px", fill: "blue2" }) })) }));
 };
-var templateObject_1;

package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.d.ts

@@ -1,7 +1,14 @@
-type Props = {
-    canEdit: boolean;
-    onClick: () => void;
-    linkTo?: string;
+import type { FC } from 'react';
+import type { DataCellProps, ActionColumn, UxState, GridActionsType } from '../../types';
+type Props = DataCellProps<{
+    id: string;
+}> & {
+    addRowNumbers?: boolean;
+    rowIndex?: number;
+    actionColumnDefinition?: ActionColumn;
+    uxState?: UxState;
+    onUxChange?: GridActionsType['handleUxChange'];
+    withCheckboxes?: boolean;
 };
-export declare const RowActionsCell: ({ canEdit, onClick, linkTo }: Props) => JSX.Element;
+export declare const RowActionsCell: FC<Props>;
 export {};