@mailstep/design-system 0.7.47-beta.10 → 0.7.47-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.47-beta.10",
+  "version": "0.7.47-beta.12",
   "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

@@ -62,13 +62,12 @@ var CommonGrid = function (_a) {
     var commonGridRef = React.useCallback(function (node) {
         gridBoxRef.current = node;
     }, []);
-    console.log(actionColumnDefinition);
     return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, isLoading: isLoading, totalColumnsWidth: totalColumnsWidth, floatingChildren: GridMessage && (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { align: "center", className: "gridMessage ".concat(messageClass), width: window.innerWidth, children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd }), hasFilters && (_jsx(FilterRow, { filters: filters, comparators: comparators, columns: displayColumnsDefinitions, actionColumn: actionColumnDefinition, onChange: addFilter, filterValues: filter, displayColumnsWidth: displayColumnsWidth, groups: groups, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange }))] }), _jsx("div", { className: "body flx_1", style: rowsStyles, tabIndex: -1, onKeyDown: handleRowsKeyDown, children: !isLoading &&
                                 rowsData &&
                                 displayColumnsDefinitions &&
                                 rowsData.map(function (row, index) {
                                     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, 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/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,7 +1,6 @@
-import type { 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;
@@ -15,5 +14,5 @@ type DataRowProps = {
     groups: Group[];
     isEven?: boolean;
 };
-declare const DataRow: ({ columns, actionColumn, rowData, rowIndex, uxState, allowRowSelect, allowRowSelectOnAction, onUxChange, 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,25 +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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { rowClassSymbol } from '../types';
-import { getActionCellSizeProps } from '../utils';
-import { x } from '@xstyled/styled-components';
 import MemoDataCell from './DataCell';
-import { Cell, StyledDataRow } from './Table';
+import { StyledDataRow } from './Table';
 import { useTimeMeasurement } from './utils';
 var DataRow = function (_a) {
     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 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 handleRowAction = React.useCallback(function (id, field, value, rowData) {
         onRowAction === null || onRowAction === void 0 ? void 0 : onRowAction(id, field, value, rowData);
@@ -51,10 +38,6 @@ var DataRow = function (_a) {
         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]);
-    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)); })] }));
+    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;

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

@@ -1,36 +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 Checkbox from '../../../Forms/Checkbox';
-import { useToggleAllCheckbox } from '../hooks/useToggleAllCheckbox';
-import { getActionCellSizeProps, getFilterName } from '../utils';
+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 { 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 = ((_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 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 sticky sticky-left", style: actionColumnStyle })), 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)); })] }));
+    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, 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(x.div, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", children: [displayCheckbox && (_jsx(x.div, { pl: "8px", children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && _jsx(x.div, { pr: "8px", 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/gridCells/RowActionsCell.d.ts

@@ -3,6 +3,8 @@ import type { DataCellProps, ActionColumn, UxState, GridActionsType } from '../.
 type Props = DataCellProps<{
     id: string;
 }> & {
+    addRowNumbers?: boolean;
+    rowIndex?: number;
     actionColumnDefinition?: ActionColumn;
     uxState?: UxState;
     onUxChange?: GridActionsType['handleUxChange'];

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

@@ -16,10 +16,9 @@ import { x } from '@xstyled/styled-components';
 import { isFunction } from 'lodash/fp';
 import { IconButtonInCell } from './IconButtonInCell';
 export var RowActionsCell = function (_a) {
-    var actionColumnDefinition = _a.actionColumnDefinition, rowData = _a.rowData, uxState = _a.uxState, withCheckboxes = _a.withCheckboxes, onUxChange = _a.onUxChange, onRowAction = _a.onRowAction;
+    var actionColumnDefinition = _a.actionColumnDefinition, rowData = _a.rowData, addRowNumbers = _a.addRowNumbers, rowIndex = _a.rowIndex, uxState = _a.uxState, withCheckboxes = _a.withCheckboxes, onUxChange = _a.onUxChange, onRowAction = _a.onRowAction;
     var rowDataId = rowData === null || rowData === void 0 ? void 0 : rowData.id;
     // @TODO this should be in parent component
-    console.log('uxState', uxState);
     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)
@@ -54,5 +53,5 @@ export var RowActionsCell = function (_a) {
             onClick();
         }
     }, [onClick]);
-    return (_jsxs(x.div, { w: "100%", display: "flex", alignItems: "center", gap: "16px", children: [withCheckboxes && (_jsx(x.div, { w: "100%", h: "100%", display: "flex", children: _jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }) })), canEdit && _jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"), !canEdit && canRead && _jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read")] }));
+    return (_jsxs(x.div, { w: "100%", display: "flex", gap: "16px", pl: "8px", pr: "8px", children: [withCheckboxes && (_jsx(x.div, { w: "100%", children: _jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }) })), addRowNumbers && (_jsx(x.div, { display: "flex", alignItems: "center", children: rowIndex })), canEdit && _jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"), !canEdit && canRead && _jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read")] }));
 };

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

@@ -14,6 +14,7 @@ import { EditReadPosition } from '../types';
 var useEditReadAsColumn = function (props) {
     var _a;
     var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, gridSelectors = props.gridSelectors, gridActions = props.gridActions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
+    // @TODO delete this but check actionOptions before
     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)) {
@@ -42,8 +43,8 @@ var useEditReadAsColumn = function (props) {
             return onRowAction(id, field, value, rowData);
         }
     }, [onRowAction, onRowEditClick, onRowReadClick]);
-    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 canRowEdit = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowEdit;
+    var canRowRead = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead;
     var stickTo = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.stickTo) || 'left';
     var flexBasis = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88;
     var withCheckboxes = !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length) || (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.forceCheckboxes);
@@ -52,7 +53,8 @@ var useEditReadAsColumn = function (props) {
             var editReadColumnDefinition = {
                 name: 'sticky',
                 flexBasis: flexBasis,
-                filtering: false,
+                filtering: withCheckboxes,
+                filteringType: 'actions',
                 sorting: false,
                 sticky: true,
                 stickTo: stickTo,
@@ -60,6 +62,7 @@ var useEditReadAsColumn = function (props) {
                 cellComponent: withProps({
                     actionColumnDefinition: actionColumnDefinition,
                     withCheckboxes: withCheckboxes,
+                    addRowNumbers: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers,
                     uxState: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState,
                     onUxChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
                 })(RowActionsCell)

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

@@ -10,7 +10,10 @@ import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../ut
 import withRedux from '../utils/withRedux';
 var ActionColumnButtons = {
     flexBasis: 80,
-    forceCheckboxes: true
+    forceCheckboxes: true,
+    addRowNumbers: true,
+    canRowEdit: false,
+    canRowRead: false
 };
 var FilterSetter = function (_a) {
     var gridActions = _a.gridActions;

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

@@ -106,7 +106,7 @@ export type ColumnDefinition<ColumnName extends string = string> = ColumnBasePro
     systemFilter?: string;
     title?: string | JSX.Element;
     filtering?: boolean;
-    filteringType?: 'number' | 'text' | 'date' | 'flag' | 'options';
+    filteringType?: 'number' | 'text' | 'date' | 'flag' | 'options' | 'actions';
     disableRowTouch?: boolean;
     filterExtraProps?: {
         isMulti?: boolean;
@@ -164,6 +164,7 @@ export type DataCellProps<T> = {
     onRowAction?: (id: string, field: string, value: any, rowData?: T) => void | Promise<any>;
     column: ColumnDefinition;
     children?: React.ReactNode;
+    rowIndex: number;
 };
 type SingleColumnConfig = {
     isHidden?: boolean;

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

@@ -1,4 +1,4 @@
-import { ColumnDefinition, ActionColumn, ColumnConfig, FilterProps, Group, StickTo, FiltersConfig } from '../types';
+import type { ColumnDefinition, ActionColumn, ColumnConfig, FilterProps, Group, StickTo, FiltersConfig } from '../types';
 export declare const getActionCellSizeProps: (column: ActionColumn) => object;
 export declare const getCellSizeProps: (column: ColumnDefinition, columnWidth: number) => object;
 export declare const getSortName: (column: ColumnDefinition) => string;

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

@@ -1,14 +1,15 @@
-import NumberRange from '../components/Filters/NumberRange';
-import TextRange from '../components/Filters/TextRange';
-import DatePickerRange from '../components/Filters/DatePickerRange';
+import ActionsFilter from '../components/Filters/ActionsFilter';
 import BooleanSelect from '../components/Filters/BooleanSelect';
+import DatePickerRange from '../components/Filters/DatePickerRange';
 import GridSelect from '../components/Filters/GridSelect';
+import NumberRange from '../components/Filters/NumberRange';
+import TextRange from '../components/Filters/TextRange';
 var isDefined = function (val) { return typeof val !== 'undefined'; };
 export var getActionCellSizeProps = function (column) {
     return {
         flexBasis: column.flexBasis,
         flexGrow: 0,
-        flexShrink: 0,
+        flexShrink: 0
     };
 };
 export var getCellSizeProps = function (column, columnWidth) {
@@ -19,7 +20,7 @@ export var getCellSizeProps = function (column, columnWidth) {
         flexBasis: columnWidth,
         flexGrow: fixedSize ? 0 : isDefined(flexGrow) ? flexGrow : 1,
         flexShrink: isDefined(flexShrink) ? flexShrink : 1,
-        maxWidth: sticky ? columnWidth : 'auto',
+        maxWidth: sticky ? columnWidth : 'auto'
     };
 };
 export var getSortName = function (column) {
@@ -42,7 +43,7 @@ export var isColumnOn = function (column, columnConfig) {
 };
 export var calculatePaginator = function (page, rowsPerPage) { return ({
     offset: rowsPerPage ? rowsPerPage * (page - 1) : rowsPerPage,
-    limit: rowsPerPage,
+    limit: rowsPerPage
 }); };
 export var createFilterType = function (columnDefinition) {
     if (columnDefinition.filterOptions)
@@ -56,7 +57,7 @@ export var getGroups = function (columns) {
         return {
             name: column.group,
             start: !!(column.group && (!previousGroup || (previousGroup && previousGroup !== column.group))),
-            end: !!(column.group && (!columns[key + 1] || columns[key + 1].group !== column.group)),
+            end: !!(column.group && (!columns[key + 1] || columns[key + 1].group !== column.group))
         };
     });
 };
@@ -73,6 +74,7 @@ export var getFilters = function (optimizeFilters) {
         date: { CellComponent: DatePickerRange },
         flag: { CellComponent: BooleanSelect },
         options: { CellComponent: GridSelect },
+        actions: { CellComponent: ActionsFilter }
     };
     if (optimizeFilters) {
         filters.text.defaultExtraProps = { defaultComparator: 'eq' };