@mailstep/design-system 0.7.47-beta.5 → 0.7.47-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/CommonGrid/components/FilterRow.js +1 -1
  3. package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.js +1 -1
  4. package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.d.ts +1 -0
  5. package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js +2 -4
  6. package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js +4 -1
  7. package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +2 -4
  8. package/ui/index.es.js +1058 -1056
  9. package/ui/index.umd.js +88 -88
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.7.47-beta.5",
3
+ "version": "0.7.47-beta.7",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/CommonGrid/components/FilterRow.js CHANGED
@@ -29,7 +29,7 @@ var FilterRow = function (_a) {
29
29
  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);
30
30
  var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
31
31
  var rowsNumberLabel = (_c = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _c !== void 0 ? _c : '#';
32
- return (_jsxs(Row, { className: "filterRow", children: [displayCheckbox && (_jsx(Cell, { className: "cell sticky sticky-left", style: actionColumnStyle, children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && (_jsx(Cell, { className: "cell", style: actionColumnStyle, children: _jsx("div", { children: rowsNumberLabel }) })), !!(!displayCheckbox && !displayRowNumberLabel && actionColumn) && (_jsx(Cell, { className: "cell", style: actionColumnStyle }, 'actions')), columns
32
+ 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
33
33
  .filter(function (column) { return !column.sticky; })
34
34
  .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)); })] }));
35
35
  };
package/ui/Blocks/CommonGrid/components/gridCells/IconButtonInCell.js CHANGED
@@ -5,5 +5,5 @@ import Spinner from '../../../../Elements/Spinner/Spinner';
5
5
  import { x } from '@xstyled/styled-components';
6
6
  export var IconButtonInCell = function (_a) {
7
7
  var icon = _a.icon, isLoading = _a.isLoading, onClick = _a.onClick, linkTo = _a.linkTo;
8
- return (_jsx(_Fragment, { children: isLoading ? (_jsx(Spinner, { variant: "sm" })) : linkTo ? (_jsx(ReactLink, { to: linkTo, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px", fill: "blue2" }) })) : (_jsx(x.span, { onClick: onClick, "data-cy": "".concat(icon, "IconBtn"), cursor: "pointer", children: _jsx(Icon, { icon: icon || 'warning', size: "16px", fill: "blue2" }) })) }));
8
+ return (_jsx(_Fragment, { children: isLoading ? (_jsx(Spinner, { variant: "sm" })) : linkTo ? (_jsx(ReactLink, { to: linkTo, "data-cy": "".concat(icon, "IconBtn"), children: _jsx(Icon, { icon: icon || 'warning', size: "16px", fill: "blue2" }) })) : (_jsx(x.span, { onClick: onClick, "data-cy": "".concat(icon, "IconBtn"), cursor: "pointer", h: "100%", w: "100%", display: "flex", alignItems: "center", justifyContent: "center", children: _jsx(Icon, { icon: icon || 'warning', size: "16px", fill: "blue2" }) })) }));
9
9
  };
package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.d.ts CHANGED
@@ -6,6 +6,7 @@ type Props = DataCellProps<{
6
6
  actionColumnDefinition?: ActionColumn;
7
7
  uxState?: UxState;
8
8
  onUxChange?: GridActionsType['handleUxChange'];
9
+ withCheckboxes?: boolean;
9
10
  };
10
11
  export declare const RowActionsCell: FC<Props>;
11
12
  export {};
package/ui/Blocks/CommonGrid/components/gridCells/RowActionsCell.js CHANGED
@@ -16,8 +16,7 @@ import { x } from '@xstyled/styled-components';
16
16
  import { isFunction } from 'lodash/fp';
17
17
  import { IconButtonInCell } from './IconButtonInCell';
18
18
  export var RowActionsCell = function (_a) {
19
- var _b;
20
- var actionColumnDefinition = _a.actionColumnDefinition, rowData = _a.rowData, uxState = _a.uxState, onUxChange = _a.onUxChange, onRowAction = _a.onRowAction;
19
+ var actionColumnDefinition = _a.actionColumnDefinition, rowData = _a.rowData, uxState = _a.uxState, withCheckboxes = _a.withCheckboxes, onUxChange = _a.onUxChange, onRowAction = _a.onRowAction;
21
20
  var rowDataId = rowData === null || rowData === void 0 ? void 0 : rowData.id;
22
21
  // @TODO this should be in parent component
23
22
  var checkedRows = uxState === null || uxState === void 0 ? void 0 : uxState.checkedRows;
@@ -27,7 +26,6 @@ export var RowActionsCell = function (_a) {
27
26
  var canRead = isFunction(actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead)
28
27
  ? actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead(rowData)
29
28
  : actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead;
30
- var withCheckboxes = !!((_b = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _b === void 0 ? void 0 : _b.length) || (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.forceCheckboxes);
31
29
  // if canEdit and canRead are both true, canEdit supersedes canRead
32
30
  var onClick = useCallback(function () {
33
31
  var action = canEdit ? 'row_edit' : 'row_read';
@@ -58,7 +56,7 @@ export var RowActionsCell = function (_a) {
58
56
  var actions = useMemo(function () {
59
57
  var actionOptions = [];
60
58
  if (withCheckboxes) {
61
- actionOptions.push(_jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }));
59
+ actionOptions.push(_jsx(x.div, { w: "100%", h: "100%", display: "flex", children: _jsx(Checkbox, { checked: isChecked, onChange: onCheckboxChange, label: "" }) }));
62
60
  }
63
61
  if (canEdit) {
64
62
  actionOptions.push(_jsx(IconButtonInCell, { icon: "pen", onClick: handleOnClick, linkTo: linkTo }, "edit"));
package/ui/Blocks/CommonGrid/hooks/useEditReadAsColumn.js CHANGED
@@ -12,6 +12,7 @@ import withProps from '../HoC/withProps';
12
12
  import { RowActionsCell } from '../components/gridCells';
13
13
  import { EditReadPosition } from '../types';
14
14
  var useEditReadAsColumn = function (props) {
15
+ var _a;
15
16
  var onRowAction = props.onRowAction, actionColumnDefinition = props.actionColumnDefinition, columnsDefinitions = props.columnsDefinitions, gridSelectors = props.gridSelectors, gridActions = props.gridActions, onRowEditClick = props.onRowEditClick, onRowReadClick = props.onRowReadClick;
16
17
  var modifiedActionColumnDefinition = useMemo(function () {
17
18
  var _a;
@@ -45,8 +46,9 @@ var useEditReadAsColumn = function (props) {
45
46
  var canRowRead = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.canRowRead) !== undefined;
46
47
  var stickTo = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.stickTo) || 'right';
47
48
  var flexBasis = (actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.flexBasis) || 88;
49
+ 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);
48
50
  var modifiedColumnsDefinitions = useMemo(function () {
49
- if (canRowEdit || canRowRead) {
51
+ if (canRowEdit || canRowRead || withCheckboxes) {
50
52
  var editReadColumnDefinition = {
51
53
  name: 'sticky',
52
54
  flexBasis: flexBasis,
@@ -57,6 +59,7 @@ var useEditReadAsColumn = function (props) {
57
59
  alwaysOn: true,
58
60
  cellComponent: withProps({
59
61
  actionColumnDefinition: actionColumnDefinition,
62
+ withCheckboxes: withCheckboxes,
60
63
  uxState: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.uxState,
61
64
  onUxChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.handleUxChange
62
65
  })(RowActionsCell)
package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js CHANGED
@@ -9,11 +9,9 @@ import { columnDefinitions, enumColumn } from '../utils/columnDefinition';
9
9
  import { ReduxGrid, createRandomData, enumValues, gridDummyActions } from '../utils/utils';
10
10
  import withRedux from '../utils/withRedux';
11
11
  var ActionColumnButtons = {
12
- flexBasis: 70,
13
- canRowRead: true,
12
+ flexBasis: 80,
14
13
  stickTo: 'left',
15
- forceCheckboxes: true,
16
- canRowEdit: function (row) { return row.enumColumn !== 'option C'; }
14
+ forceCheckboxes: true
17
15
  };
18
16
  var FilterSetter = function (_a) {
19
17
  var gridActions = _a.gridActions;