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

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

@@ -1,30 +1,57 @@
-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 { jsx as _jsx, jsxs as _jsxs } 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 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
+    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;
+    // 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();
         }
     }, [onClick]);
-    var actions = useMemo(function () {
-        var actionOptions = [];
-        if (canEdit) {
-            actionOptions.push(_jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"));
-        }
-        else {
-            actionOptions.push(_jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read"));
-        }
-        return actionOptions;
-    }, [canEdit, handleOnClick, linkTo]);
-    return _jsx(Center, { onClick: handleOnClick, children: actions });
+    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, { children: rowIndex }), canEdit && _jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"), !canEdit && canRead && _jsx(IconButtonInCell, { icon: "chevronRight", onClick: handleOnClick, linkTo: linkTo }, "read")] }));
 };
-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,22 @@ 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 _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)) {
             // 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
+            };
         }
         else if (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.addRowNumbers) {
             return { flexBasis: 40, addRowNumbers: true };
@@ -41,20 +43,29 @@ 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;
+    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);
     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 || withCheckboxes) {
             var editReadColumnDefinition = {
                 name: 'sticky',
-                flexBasis: actionColumnDefinition.flexBasis || 88,
-                filtering: false,
+                flexBasis: flexBasis,
+                filtering: withCheckboxes,
+                filteringType: 'actions',
                 sorting: false,
                 sticky: true,
                 stickTo: stickTo,
                 alwaysOn: true,
-                cellComponent: CellComponent
+                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)
             };
             if (stickTo === EditReadPosition.Left) {
                 return __spreadArray([editReadColumnDefinition], columnsDefinitions, true);
@@ -66,10 +77,20 @@ 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,
+        withCheckboxes,
+        gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState,
+        actionColumnDefinition,
+        gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
+    ]);
     return {
         columnsDefinitions: modifiedColumnsDefinitions,
-        actionColumnDefinition: modifiedActionColumnDefinition,
+        actionColumnDefinition: actionColumnDefinition,
         onRowAction: modifiedOnRowAction
     };
 };

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

@@ -9,10 +9,11 @@ import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
 import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils';
 import withRedux from '../utils/withRedux';
 var ActionColumnButtons = {
-    flexBasis: 160,
-    canRowRead: true,
-    stickTo: 'left',
-    canRowEdit: function (row) { return row.enumColumn !== 'option C'; }
+    flexBasis: 85,
+    forceCheckboxes: false,
+    addRowNumbers: false,
+    canRowEdit: true,
+    canRowRead: true
 };
 var FilterSetter = function (_a) {
     var gridActions = _a.gridActions;

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -54,7 +54,6 @@ export var columnDefinitions = [
     },
     {
         name: 'dateColumn',
-        group: 'group1',
         title: 'Date Column',
         flexBasis: 160,
         filtering: true,
@@ -66,7 +65,6 @@ export var columnDefinitions = [
     },
     {
         name: 'boolColumn',
-        group: 'group1',
         title: 'Bool Column',
         flexBasis: 160,
         filtering: true,
@@ -78,7 +76,6 @@ export var columnDefinitions = [
     },
     {
         name: 'advancedColumn',
-        group: 'group2',
         title: 'Advanced Column',
         flexBasis: 160,
         formatRowValue: function (row) {
@@ -87,7 +84,6 @@ export var columnDefinitions = [
     },
     {
         name: 'complexColumn',
-        group: 'group2',
         title: 'Complex Column',
         flexBasis: 350,
         cellComponent: ComplexCell,

package/ui/Blocks/CommonGrid/styles.js

@@ -22,7 +22,7 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
     return (withPagination ? gridFooterHeight : 0);
 });
 export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: ", "px;\n  flex-wrap: wrap;\n  z-index: 3;\n"], ["\n  position: relative;\n  padding: 18px 20px;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  min-height: ", "px;\n  flex-wrap: wrap;\n  z-index: 3;\n"])), gridButtonStripHeight);
-export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    padding-left: 12px;\n\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n      z-index: 1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    padding-left: 12px;\n    border-top: 1px solid ", ";\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    margin: 0 1px 1px 1px; // matching margin with .gridHead\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    padding-left: 12px;\n\n    @media (min-width: 1024px) {\n      padding-left: 20px;\n    }\n\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n      z-index: 1;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    max-width: 88px;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), function (_a) {
+export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"], ["\n  height: calc(100% - ", "px);\n\n  & .cell {\n    padding: 0 4px;\n  }\n  & .dataRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: normal;\n    border-bottom: 1px solid;\n    border-color: lightGray3;\n    height: ", "px;\n  }\n  & .gridHead {\n    height: ", "px;\n    background-color: neutral20;\n    padding-bottom: 8px;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n    border-top: 1px solid ", ";\n  }\n  & .headRow {\n    font-size: 12px;\n    font-family: ", ";\n    color: typoPrimary;\n    font-weight: bold;\n    border-bottom: none; // TODO fix in common-grid\n\n    & .cell {\n      overflow: hidden;\n      max-height: 32px;\n      position: relative;\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n  }\n\n  & .filterRow {\n    & .cell {\n      overflow: visible;\n    }\n\n    & .cell > div {\n      width: 100%; // TODO fix in common-grid\n    }\n\n    & .sticky {\n      background-color: bgLightGray1;\n    }\n    border-bottom: none; // TODO fix in common-grid\n  }\n\n  & .body {\n    flex-grow: 1;\n  }\n\n  & .gridWrapper {\n    background-color: ", ";\n    width: auto;\n    padding-bottom: 35px;\n\n    @media (min-width: 1024px) {\n      height: 100%;\n      overflow-y: auto;\n      padding-bottom: 0;\n    }\n    @media print {\n      margin: 0;\n      width: 100%;\n      height: auto;\n      overflow-x: hidden;\n    }\n  }\n\n  & .fullWidthGrid > .gridWrapper > div {\n    width: 100% !important;\n  }\n\n  & .paginatorWrapper,\n  & .buttonsStrip {\n    @media print {\n      display: none;\n    }\n  }\n  & .cell {\n    padding-left: 2px;\n    padding-right: 2px;\n    @media print {\n      white-space: unset;\n    }\n  }\n\n  .dataRow {\n    &.grayedOut {\n      background: lightGray1;\n    }\n\n    .sticky-right,\n    .sticky-left {\n      background: white;\n    }\n\n    .sticky-right {\n      border-left: 1px solid #dfe1e6;\n    }\n\n    .sticky-left {\n      border-right: 1px solid #dfe1e6;\n    }\n  }\n\n  .dataRow:nth-child(even) {\n    .sticky-left,\n    .sticky-right {\n      background-color: bgLightGray;\n    }\n  }\n\n  @media print {\n    .filterRow .sticky {\n      display: none;\n    }\n\n    .headRow .sticky {\n      display: none;\n    }\n\n    .dataRow .sticky {\n      display: none;\n    }\n  }\n\n  .resizer {\n    z-index: unset;\n  }\n\n  // hotfix table head\n  .cell .sortable {\n    display: flex;\n    align-items: center;\n    padding-right: 2px;\n  }\n\n  .sticky {\n    position: sticky !important;\n    z-index: 1;\n  }\n\n  .sticky-left {\n    left: 0;\n  }\n\n  .sticky-right {\n    right: 0;\n  }\n"])), function (_a) {
     var withButtonStrip = _a.withButtonStrip;
     return (withButtonStrip ? gridButtonStripHeight : 0);
 }, th('fonts.primary'), gridRowHeight, function (_a) {

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;
@@ -148,7 +148,6 @@ export type ActionColumn = ColumnBaseProps & {
     canRowRead?: boolean | ((row: any) => boolean);
     createLink?: (params?: object) => string;
     forceCheckboxes?: boolean;
-    checkAllPosition?: 'top' | 'bottom';
     stickTo?: StickTo;
     addRowNumbers?: boolean;
     addRowNumbersLabel?: string;
@@ -165,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' };

package/ui/Blocks/Modal/hooks/useModal.d.ts

@@ -1,8 +1,2 @@
-import type { ControlProps, ModalData } from '../types';
-type UseModalProps = {
-    initialIsOpen?: boolean;
-    onCloseModal?: () => void;
-};
-/** @TODO This breaking change has to be fixed in WHM */
-export declare const useModal: <TData = ModalData>(props?: UseModalProps) => ControlProps<TData>;
-export {};
+import { ControlProps, ModalData } from '../types';
+export declare const useModal: <TData = ModalData>(initialState?: boolean) => ControlProps<TData>;

package/ui/Blocks/Modal/hooks/useModal.js

@@ -1,14 +1,12 @@
 import { useCallback, useState } from 'react';
-/** @TODO This breaking change has to be fixed in WHM */
-export var useModal = function (props) {
-    var _a = props || {}, _b = _a.initialIsOpen, initialIsOpen = _b === void 0 ? false : _b, onCloseModal = _a.onCloseModal;
-    var _c = useState(initialIsOpen), isOpen = _c[0], setIsOpen = _c[1];
-    var _d = useState(), data = _d[0], setData = _d[1];
+export var useModal = function (initialState) {
+    if (initialState === void 0) { initialState = false; }
+    var _a = useState(initialState), isOpen = _a[0], setIsOpen = _a[1];
+    var _b = useState(), data = _b[0], setData = _b[1];
     var onClose = useCallback(function () {
         setIsOpen(false);
         setData(undefined);
-        onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
-    }, [onCloseModal]);
+    }, []);
     var onOpen = useCallback(function (data) {
         data && setData(data);
         setIsOpen(true);