@mailstep/design-system 0.7.47-beta.8 → 0.7.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.47-beta.8",
+  "version": "0.7.47",
   "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;
@@ -7,5 +7,5 @@ type Props = CommonGridProps & {
     hasGroups: boolean;
     hasFilters: boolean;
 };
-declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowEditClick, onRowReadClick, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters }: Props) => JSX.Element;
+declare const CommonGrid: ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, columnLayout, displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters }: Props) => JSX.Element;
 export default CommonGrid;

package/ui/Blocks/CommonGrid/CommonGrid.js

@@ -40,7 +40,7 @@ var CommonGrid = function (_a) {
     // redux props
     gridSelectors = _a.gridSelectors, gridActions = _a.gridActions, 
     // input props
-    isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowEditClick = _a.onRowEditClick, onRowReadClick = _a.onRowReadClick, onRowClick = _a.onRowClick, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, className = _a.className, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps, hasGroups = _a.hasGroups, hasFilters = _a.hasFilters;
+    isLoading = _a.isLoading, rowsData = _a.rowsData, hasColouredRows = _a.hasColouredRows, actionColumnDefinition = _a.actionColumnDefinition, allowRowSelect = _a.allowRowSelect, allowRowSelectOnAction = _a.allowRowSelectOnAction, onRowAction = _a.onRowAction, onRowClick = _a.onRowClick, _b = _a.columnLayout, columnLayout = _b === void 0 ? 'normal' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, className = _a.className, minColumnWidth = _a.minColumnWidth, errorMessage = _a.errorMessage, floatingButtonProps = _a.floatingButtonProps, hasGroups = _a.hasGroups, hasFilters = _a.hasFilters;
     var _c = gridSelectors.uxState, uxState = _c === void 0 ? defaultUxState : _c, _d = gridSelectors.columnsWidth, columnsWidth = _d === void 0 ? defaultColumnsWidth : _d, columnsWidthVariant = gridSelectors.columnsWidthVariant, _e = gridSelectors.page, page = _e === void 0 ? 1 : _e, filter = gridSelectors.filter, sorting = gridSelectors.sorting, _f = gridSelectors.rowsPerPage, rowsPerPage = _f === void 0 ? 10 : _f;
     var clearUxState = gridActions.clearUxState, handleUxChange = gridActions.handleUxChange, _g = gridActions.addFilter, addFilter = _g === void 0 ? defaultVoidFunction : _g, _h = gridActions.addSorting, addSorting = _h === void 0 ? defaultVoidFunction : _h, _j = gridActions.setColumnWidth, setColumnWidth = _j === void 0 ? defaultVoidFunction : _j;
     var handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
@@ -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 ActionsFilter: FC<Props>;
+export default ActionsFilter;

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 ActionsFilter = 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", pl: "4px", children: [displayCheckbox && (_jsx(x.div, { w: "100%", children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(x.div, { w: "100%", pr: "12px", display: "flex", justifyContent: "center", children: rowsNumberLabel }))] }));
+};
+export default ActionsFilter;

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/GroupRow.d.ts

@@ -1,4 +1,4 @@
-import { ActionColumn, Group, ColumnDefinition, GridSelectorsType } from '../types';
+import type { ActionColumn, Group, ColumnDefinition, GridSelectorsType } from '../types';
 type GroupRowProps = {
     groups: Group[];
     actionColumn?: ActionColumn;

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

@@ -10,9 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { getCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
 import { Row, Cell } from './Table';
-import { getCellSizeProps, getActionCellSizeProps, getGroupClassNames, getStickyCollClassNames } from '../utils';
 var GroupCell = function (_a) {
     var column = _a.column, group = _a.group, displayColumnWidth = _a.displayColumnWidth;
     var cellSizeProps = getCellSizeProps(column, displayColumnWidth);
@@ -21,7 +20,6 @@ var GroupCell = function (_a) {
 };
 var GroupRow = function (_a) {
     var actionColumn = _a.actionColumn, columns = _a.columns, groups = _a.groups, displayColumnsWidth = _a.displayColumnsWidth;
-    var actionColumnStyle = React.useMemo(function () { return (actionColumn ? __assign({}, getActionCellSizeProps(actionColumn)) : {}); }, [actionColumn]);
-    return (_jsxs(Row, { className: "group-row", children: [actionColumn && _jsx(Cell, { className: "cell", style: actionColumnStyle }, "actions"), groups.map(function (group, key) { return (_jsx(GroupCell, { column: columns[key], group: group, displayColumnWidth: displayColumnsWidth[columns[key].name] }, key)); })] }));
+    return (_jsxs(Row, { className: "group-row", children: [actionColumn && _jsx(Cell, { className: "cell", flexBasis: actionColumn.flexBasis, flexGrow: 0, flexShrink: 0 }, "actions"), groups.map(function (group, key) { return (_jsx(GroupCell, { column: columns[key], group: group, displayColumnWidth: displayColumnsWidth[columns[key].name] }, key)); })] }));
 };
 export default GroupRow;

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

@@ -9,10 +9,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import { getActionCellSizeProps, getCellSizeProps, getGroupClassNames, getSortName, getStickyCollClassNames } from '../utils';
+import { getCellSizeProps, getGroupClassNames, getSortName, getStickyCollClassNames } from '../utils';
 import ColumnTitle from './ColumnTitle';
 import Resize from './Resize';
 import { Row, Cell } from './Table';
@@ -42,7 +42,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 === 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
+    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: [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/gridCells/Date.js

@@ -4,5 +4,5 @@ import { DateTime } from 'luxon';
 export var DateCell = function (_a) {
     var rowData = _a.rowData, column = _a.column;
     var value = get(column.name, rowData);
-    return value ? _jsx("span", { className: "cell", children: DateTime.fromISO(value).toFormat('dd. MM. yyyy') }) : null;
+    return value ? _jsx("span", { children: DateTime.fromISO(value).toFormat('dd. MM. yyyy') }) : null;
 };

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

@@ -9,5 +9,5 @@ export var DateTimeCell = function (_a) {
     var rowData = _a.rowData, column = _a.column;
     var value = get(column.name, rowData);
     var dateTimeFormat = ((_b = column === null || column === void 0 ? void 0 : column.passProps) !== null && _b !== void 0 ? _b : defaultProps).dateTimeFormat;
-    return value ? _jsx("span", { className: "cell", children: DateTime.fromISO(value).toFormat(dateTimeFormat) }) : null;
+    return value ? _jsx("span", { children: DateTime.fromISO(value).toFormat(dateTimeFormat) }) : null;
 };

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

@@ -28,6 +28,6 @@ export var EnumInCell = function (_a) {
     }, [appearanceMap, value]);
     if (!finalLabel)
         return null;
-    return (_jsx(Center, { children: _jsx(HighlightBox, __assign({ className: "cell" }, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
+    return (_jsx(Center, { children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
 };
 var templateObject_1;

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

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

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

@@ -9,17 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import Checkbox from '../../../../Forms/Checkbox';
 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, checkedRows = _a.checkedRows, 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
-    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;
@@ -53,20 +51,5 @@ export var RowActionsCell = function (_a) {
             onClick();
         }
     }, [onClick]);
-    var actions = useMemo(function () {
-        var actionOptions = [];
-        if (withCheckboxes) {
-            actionOptions.push(_jsx(x.div, { w: "100%", h: "100%", display: "flex", children: _jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }) }));
-        }
-        if (canEdit) {
-            actionOptions.push(_jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"));
-        }
-        if (!canEdit && canRead) {
-            actionOptions.push(_jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read"));
-        }
-        return actionOptions;
-    }, [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 }));
+    return (_jsxs(x.div, { w: "100%", display: "flex", gap: "16px", pl: "4px", pr: "4px", children: [withCheckboxes && (_jsx(x.div, { w: "100%", children: _jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }) })), addRowNumbers && (_jsx(x.div, { display: "flex", alignItems: "center", justifyContent: "center", pr: "8px", w: "100%", 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/components/gridCells/StringJoin.js

@@ -3,5 +3,5 @@ import get from 'lodash/fp/get';
 export var StringJoinCell = function (_a) {
     var rowData = _a.rowData, column = _a.column;
     var values = get(column.name, rowData);
-    return values && values.length ? _jsx("span", { className: "cell", children: values.join(', ') }) : null;
+    return values && values.length ? _jsx("span", { children: values.join(', ') }) : null;
 };

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

@@ -3,7 +3,6 @@ type ExcludedProps = 'components' | 'filters' | 'onBatchAction' | 'extraControlB
 type Props = Omit<CommonGridProps, ExcludedProps>;
 type UseEditReadAsColumnHook = {
     columnsDefinitions: CommonGridProps['columnsDefinitions'];
-    actionColumnDefinition: CommonGridProps['actionColumnDefinition'];
     onRowAction: CommonGridProps['onRowAction'];
 };
 declare const useEditReadAsColumn: (props: Props) => UseEditReadAsColumnHook;

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

@@ -14,23 +14,6 @@ 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;
-    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: (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88,
-                forceCheckboxes: true,
-                addRowNumbers: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers,
-            };
-        }
-        else if (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers) {
-            return { flexBasis: 40, addRowNumbers: true };
-        }
-        else {
-            return undefined;
-        }
-    }, [actionColumnDefinition]);
     var modifiedOnRowAction = useCallback(function (id, field, value, rowData) {
         if (field === 'row_edit' || field === 'row_read') {
             if (field === 'row_edit' && onRowEditClick)
@@ -42,17 +25,16 @@ 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 stickTo = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.stickTo) || 'left';
-    var flexBasis = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88;
+    var _b = actionColumnDefinition || {}, canRowEdit = _b.canRowEdit, canRowRead = _b.canRowRead, addRowNumbers = _b.addRowNumbers, _c = _b.stickTo, stickTo = _c === void 0 ? 'left' : _c, _d = _b.flexBasis, flexBasis = _d === void 0 ? 88 : _d;
     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);
     var modifiedColumnsDefinitions = useMemo(function () {
-        if (canRowEdit || canRowRead || withCheckboxes) {
+        var _a;
+        if (canRowEdit || canRowRead || withCheckboxes || addRowNumbers) {
             var editReadColumnDefinition = {
-                name: 'sticky',
+                name: 'actions',
                 flexBasis: flexBasis,
-                filtering: false,
+                filtering: withCheckboxes || addRowNumbers,
+                filteringType: 'actions',
                 sorting: false,
                 sticky: true,
                 stickTo: stickTo,
@@ -60,7 +42,8 @@ var useEditReadAsColumn = function (props) {
                 cellComponent: withProps({
                     actionColumnDefinition: actionColumnDefinition,
                     withCheckboxes: withCheckboxes,
-                    uxState: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState,
+                    addRowNumbers: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers,
+                    checkedRows: (_a = gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState) === null || _a === void 0 ? void 0 : _a.checkedRows,
                     onUxChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
                 })(RowActionsCell)
             };
@@ -74,10 +57,20 @@ var useEditReadAsColumn = function (props) {
         else {
             return columnsDefinitions;
         }
-    }, [flexBasis, stickTo, canRowEdit, canRowRead, columnsDefinitions]);
+    }, [
+        addRowNumbers,
+        flexBasis,
+        stickTo,
+        canRowEdit,
+        canRowRead,
+        columnsDefinitions,
+        withCheckboxes,
+        gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState,
+        actionColumnDefinition,
+        gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
+    ]);
     return {
         columnsDefinitions: modifiedColumnsDefinitions,
-        actionColumnDefinition: actionColumnDefinition,
         onRowAction: modifiedOnRowAction
     };
 };

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

@@ -1,8 +1,8 @@
-import { RowProps, GridActionsType, UxState } from '../types';
+import type { RowProps, GridActionsType, UxState } from '../types';
 /**
  * hook for checkbox that select and unselects all row
  * returns [checked state, toggleAllHandler()] for checkbox
  */
 type ToggleAllCheckboxRet = [boolean, () => void];
-export declare const useToggleAllCheckbox: (rowsData: RowProps[], uxState: UxState, handleUxChange?: GridActionsType['handleUxChange']) => ToggleAllCheckboxRet;
+export declare const useToggleAllCheckbox: (rowsData?: RowProps[], uxState?: UxState, handleUxChange?: GridActionsType['handleUxChange']) => ToggleAllCheckboxRet;
 export {};

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

@@ -1,6 +1,6 @@
 import { useMemo, useCallback } from 'react';
 export var useToggleAllCheckbox = function (rowsData, uxState, handleUxChange) {
-    var allChecked = useMemo(function () { return (rowsData || []).length >= 1 && rowsData.every(function (row) { var _a; return (_a = uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; }); }, [rowsData, uxState.checkedRows]);
+    var allChecked = useMemo(function () { return rowsData && (rowsData || []).length >= 1 && rowsData.every(function (row) { var _a; return (_a = uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows) === null || _a === void 0 ? void 0 : _a[row.id]; }); }, [rowsData, uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows]);
     var toggleAllHandler = useCallback(function () {
         var checkedRows = {};
         // if check all is not check, we check all
@@ -9,7 +9,7 @@ export var useToggleAllCheckbox = function (rowsData, uxState, handleUxChange) {
                 checkedRows[row.id] = true;
             });
         }
-        handleUxChange && handleUxChange('checkedRows', checkedRows);
+        handleUxChange === null || handleUxChange === void 0 ? void 0 : handleUxChange('checkedRows', checkedRows);
     }, [handleUxChange, rowsData, allChecked]);
-    return [allChecked, toggleAllHandler];
+    return [!!allChecked, toggleAllHandler];
 };

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: false,
+    canRowEdit: true,
+    canRowRead: false
 };
 var FilterSetter = function (_a) {
     var gridActions = _a.gridActions;

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

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