@mailstep/design-system 0.7.47-beta.16 → 0.7.47-beta.18

package/package.json

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

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

@@ -7,6 +7,7 @@ import { Row } from './Table';
 var FilterRow = function (_a) {
     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);
+    console.log('columns', columns);
     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

@@ -6,5 +6,5 @@ type Props = {
     uxState?: UxState;
     handleUxChange?: GridActionsType['handleUxChange'];
 };
-declare const ActionFilter: FC<Props>;
-export default ActionFilter;
+declare const ActionsFilter: FC<Props>;
+export default ActionsFilter;

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

@@ -2,13 +2,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 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(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all"), displayRowNumberLabel && _jsx(x.div, { pr: "12px", children: rowsNumberLabel })] }));
+    console.log('test');
+    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, { pr: "12px", w: "100%", display: "flex", justifyContent: "center", children: rowsNumberLabel }))] }));
 };
-export default ActionFilter;
+export default ActionsFilter;

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

@@ -53,5 +53,5 @@ export var RowActionsCell = function (_a) {
             onClick();
         }
     }, [onClick]);
-    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", pr: "8px", children: rowIndex })), 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: "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/hooks/useEditReadAsColumn.js

@@ -52,9 +52,9 @@ var useEditReadAsColumn = function (props) {
     var modifiedColumnsDefinitions = useMemo(function () {
         if (canRowEdit || canRowRead || withCheckboxes || addRowNumbers) {
             var editReadColumnDefinition = {
-                name: 'sticky',
+                name: 'actions',
                 flexBasis: flexBasis,
-                filtering: withCheckboxes,
+                filtering: withCheckboxes || addRowNumbers,
                 filteringType: 'actions',
                 sorting: false,
                 sticky: true,
@@ -79,6 +79,7 @@ var useEditReadAsColumn = function (props) {
             return columnsDefinitions;
         }
     }, [
+        addRowNumbers,
         flexBasis,
         stickTo,
         canRowEdit,

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

@@ -9,7 +9,7 @@ import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
 import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils';
 import withRedux from '../utils/withRedux';
 var ActionColumnButtons = {
-    flexBasis: 75,
+    flexBasis: 80,
     forceCheckboxes: true,
     addRowNumbers: false,
     canRowEdit: true,

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

@@ -164,7 +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;
+    rowIndex?: number;
 };
 type SingleColumnConfig = {
     isHidden?: boolean;

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

@@ -87,10 +87,12 @@ export var checksColumnsOrder = function (colsOrder, columnsDefinitions) {
     if (stickyLeftColls.length > 1 || stickyRightColls.length > 1) {
         console.error('Grid can have only sticky column on each side.');
     }
-    if (stickyLeftColls.length && colsOrder.indexOf(stickyLeftColls[0].name) !== 0) {
+    if (stickyLeftColls.length && colsOrder.indexOf(stickyLeftColls[0].name) !== 0 && stickyLeftColls[0].name !== 'actions') {
         console.error('The left sticky column should be the first one in a row');
     }
-    if (stickyRightColls.length && colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1) {
+    if (stickyRightColls.length &&
+        colsOrder.indexOf(stickyRightColls[0].name) !== colsOrder.length - 1 &&
+        stickyRightColls[0].name !== 'actions') {
         console.error('The Right sticky column should be the last one in a row');
     }
 };