@mailstep/design-system 0.7.47-beta.2 → 0.7.47-beta.4

package/package.json

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

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, actionColumn: actionColumnDefinition, 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/DataRow.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDefinition, ActionColumn, RowProps, UxState, GridSelectorsType, Group } from '../types';
+import type { ColumnDefinition, ActionColumn, RowProps, UxState, GridSelectorsType, Group } from '../types';
 type DataRowProps = {
     columns: ColumnDefinition[];
     actionColumn?: ActionColumn;
@@ -8,8 +8,6 @@ type DataRowProps = {
     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 +15,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, actionColumn, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, onRowClick, onRowAction, displayColumnsWidth, groups, isEven }: DataRowProps) => JSX.Element;
 export default DataRow;

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

@@ -9,67 +9,24 @@ var __assign = (this && this.__assign) || function () {
     };
     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, Fragment as _Fragment, jsxs as _jsxs } 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 { 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, actionColumn = _a.actionColumn, 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 +39,22 @@ 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]);
+    // @TODO remove this
     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 (_jsxs(StyledDataRow, { className: rowClassName, hasRowClick: !!onRowClick, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, isEven: !!isEven, children: [actionColumn && (_jsx(_Fragment, { children: (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)); })] }));
 };
 export default DataRow;

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

@@ -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

@@ -11,13 +11,13 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import Checkbox from '../../../Forms/Checkbox';
+import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox';
+import { getActionCellSizeProps, 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';
 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;
@@ -29,6 +29,8 @@ var FilterRow = function (_a) {
     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 (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell sticky sticky-left", 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
+                .filter(function (column) { return !column.sticky; })
+                .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)); })] }));
 };
 export default FilterRow;

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,7 +19,7 @@ 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));
     });
 };
@@ -44,7 +44,7 @@ var HeadRow = function (_a) {
     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", 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,11 @@
-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;
+}> & {
+    actionColumnDefinition?: ActionColumn;
+    uxState?: UxState;
+    onUxChange?: GridActionsType['handleUxChange'];
 };
-export declare const RowActionsCell: ({ canEdit, onClick, linkTo }: Props) => JSX.Element;
+export declare const RowActionsCell: FC<Props>;
 export {};

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

@@ -1,15 +1,55 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+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";
 import { useCallback, useMemo } from 'react';
-import styled from '@xstyled/styled-components';
+import Checkbox from '../../../../Forms/Checkbox';
+import { x } from '@xstyled/styled-components';
 import { isFunction } from 'lodash/fp';
 import { IconButtonInCell } from './IconButtonInCell';
-var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  width: 100%;\n\n  svg {\n    color: blue2;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  width: 100%;\n\n  svg {\n    color: blue2;\n  }\n"])));
 export var RowActionsCell = function (_a) {
-    var canEdit = _a.canEdit, onClick = _a.onClick, linkTo = _a.linkTo;
+    var _b;
+    var actionColumnDefinition = _a.actionColumnDefinition, rowData = _a.rowData, uxState = _a.uxState, onUxChange = _a.onUxChange, onRowAction = _a.onRowAction;
+    var rowDataId = rowData === null || rowData === void 0 ? void 0 : rowData.id;
+    // @TODO this should be in parent component
+    var checkedRows = uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows;
+    var canEdit = isFunction(actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit)
+        ? actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit(rowData)
+        : actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit;
+    var canRead = isFunction(actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead)
+        ? actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead(rowData)
+        : actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead;
+    var withCheckboxes = !!((_b = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.forceCheckboxes);
+    // if canEdit and canRead are both true, canEdit supersedes canRead
+    var onClick = useCallback(function () {
+        var action = canEdit ? 'row_edit' : 'row_read';
+        onRowAction === null || onRowAction === void 0 ? void 0 : onRowAction(rowData === null || rowData === void 0 ? void 0 : rowData.id, action, rowData);
+    }, [canEdit, onRowAction, rowData]);
+    var linkTo = useMemo(function () {
+        var _a;
+        var mode = canEdit ? 'edit' : 'read';
+        return (_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.createLink) === null || _a === void 0 ? void 0 : _a.call(actionColumnDefinition, { mode: mode, id: rowData === null || rowData === void 0 ? void 0 : rowData.id });
+    }, [canEdit, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
+    var isChecked = !!(checkedRows === null || checkedRows === void 0 ? void 0 : checkedRows[rowDataId]);
+    // @TODO this should be in reducer
+    var onCheckboxChange = useCallback(function () {
+        var newCheckedRows = __assign({}, (checkedRows || {}));
+        if (!isChecked) {
+            newCheckedRows[rowDataId] = true;
+        }
+        else {
+            delete newCheckedRows[rowDataId];
+        }
+        onUxChange === null || onUxChange === void 0 ? void 0 : onUxChange('checkedRows', newCheckedRows);
+    }, [onUxChange, isChecked, rowDataId, checkedRows]);
     var handleOnClick = useCallback(function () {
         if (isFunction(onClick)) {
             onClick();
@@ -17,14 +57,18 @@ export var RowActionsCell = function (_a) {
     }, [onClick]);
     var actions = useMemo(function () {
         var actionOptions = [];
+        if (withCheckboxes) {
+            actionOptions.push(_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }));
+        }
         if (canEdit) {
             actionOptions.push(_jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"));
         }
-        else {
+        if (!canEdit && canRead) {
             actionOptions.push(_jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read"));
         }
         return actionOptions;
-    }, [canEdit, handleOnClick, linkTo]);
-    return _jsx(Center, { onClick: handleOnClick, children: actions });
+    }, [canEdit, canRead, handleOnClick, linkTo, isChecked, withCheckboxes, onCheckboxChange]);
+    if (actions.length === 0)
+        return null;
+    return (_jsx(x.div, { w: "100%", display: "flex", alignItems: "center", gap: "16px", children: actions }));
 };
-var templateObject_1;

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

@@ -1,4 +1,4 @@
-import { CommonGridProps } from '../types';
+import type { CommonGridProps } from '../types';
 type ExcludedProps = 'components' | 'filters' | 'onBatchAction' | 'extraControlButtons';
 type Props = Omit<CommonGridProps, ExcludedProps>;
 type UseEditReadAsColumnHook = {
@@ -6,10 +6,5 @@ type UseEditReadAsColumnHook = {
     actionColumnDefinition: CommonGridProps['actionColumnDefinition'];
     onRowAction: CommonGridProps['onRowAction'];
 };
-/**
- * Because in new design we are displaying lot of the controlls differently, including read and edit buttons in grid,
- * easiest way to make all the definition changes is to just overwrite the here once, instead of modifying every single grid (33 instances atm).
- * This will also allow to easily swap back to grid provided logic, if it becomes usable for redesigned grid or if design changes again
- * */
 declare const useEditReadAsColumn: (props: Props) => UseEditReadAsColumnHook;
 export default useEditReadAsColumn;

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

@@ -8,20 +8,21 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { useCallback, useMemo } from 'react';
-import getReadEditButtonCell from '../components/ReadEditButtonCell';
+import withProps from '../HoC/withProps';
+import { RowActionsCell } from '../components/gridCells';
 import { EditReadPosition } from '../types';
-/**
- * Because in new design we are displaying lot of the controlls differently, including read and edit buttons in grid,
- * easiest way to make all the definition changes is to just overwrite the here once, instead of modifying every single grid (33 instances atm).
- * This will also allow to easily swap back to grid provided logic, if it becomes usable for redesigned grid or if design changes again
- * */
 var useEditReadAsColumn = function (props) {
-    var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
+    var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, gridSelectors = props.gridSelectors, gridActions = props.gridActions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
     var modifiedActionColumnDefinition = useMemo(function () {
         var _a;
         if ((actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.forceCheckboxes) || ((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) {
             // note: this also removes actions, because we render action trigger outside the grid anyway
-            return { flexBasis: 40, forceCheckboxes: true, addRowNumbers: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers, checkAllPosition: 'top' };
+            return {
+                flexBasis: (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88,
+                forceCheckboxes: true,
+                addRowNumbers: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers,
+                checkAllPosition: 'top'
+            };
         }
         else if (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers) {
             return { flexBasis: 40, addRowNumbers: true };
@@ -41,20 +42,25 @@ var useEditReadAsColumn = function (props) {
             return onRowAction(id, field, value, rowData);
         }
     }, [onRowAction, onRowEditClick, onRowReadClick]);
-    // TODO Entire logic of row edit / row read need to be completely refactored.
-    var CellComponent = useMemo(function () { return getReadEditButtonCell(actionColumnDefinition); }, [actionColumnDefinition]);
+    var canRowEdit = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit) !== undefined;
+    var canRowRead = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead) !== undefined;
+    var stickTo = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.stickTo) || 'right';
+    var flexBasis = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88;
     var modifiedColumnsDefinitions = useMemo(function () {
-        if ((actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit) !== undefined || (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead) !== undefined) {
-            var stickTo = actionColumnDefinition.stickTo || 'right';
+        if (canRowEdit || canRowRead) {
             var editReadColumnDefinition = {
                 name: 'sticky',
-                flexBasis: actionColumnDefinition.flexBasis || 88,
+                flexBasis: flexBasis,
                 filtering: false,
                 sorting: false,
                 sticky: true,
                 stickTo: stickTo,
                 alwaysOn: true,
-                cellComponent: CellComponent
+                cellComponent: withProps({
+                    actionColumnDefinition: actionColumnDefinition,
+                    uxState: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState,
+                    onUxChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
+                })(RowActionsCell)
             };
             if (stickTo === EditReadPosition.Left) {
                 return __spreadArray([editReadColumnDefinition], columnsDefinitions, true);
@@ -66,7 +72,7 @@ var useEditReadAsColumn = function (props) {
         else {
             return columnsDefinitions;
         }
-    }, [CellComponent, actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit, actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead, columnsDefinitions]);
+    }, [flexBasis, stickTo, canRowEdit, canRowRead, columnsDefinitions]);
     return {
         columnsDefinitions: modifiedColumnsDefinitions,
         actionColumnDefinition: modifiedActionColumnDefinition,

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

@@ -12,6 +12,7 @@ var ActionColumnButtons = {
     flexBasis: 160,
     canRowRead: true,
     stickTo: 'left',
+    forceCheckboxes: true,
     canRowEdit: function (row) { return row.enumColumn !== 'option C'; }
 };
 var FilterSetter = function (_a) {