@mailstep/design-system 0.6.6 → 0.6.8

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 (8) hide show
  1. package/package.json +1 -1
  2. package/ui/Blocks/CommonGrid/CommonGrid.js +1 -1
  3. package/ui/Blocks/CommonGrid/components/Table.d.ts +3 -1
  4. package/ui/Blocks/CommonGrid/components/Table.js +1 -1
  5. package/ui/Blocks/CommonGrid/hooks/useManageColumn.js +15 -7
  6. package/ui/Blocks/CommonGrid/utils/index.js +4 -1
  7. package/ui/index.es.js +1769 -1767
  8. package/ui/index.umd.js +77 -75
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.6.6",
3
+ "version": "0.6.8",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
package/ui/Blocks/CommonGrid/CommonGrid.js CHANGED
@@ -63,7 +63,7 @@ var CommonGrid = function (_a) {
63
63
  gridBoxRef.current = node;
64
64
  !!gridRef && (gridRef.current = node);
65
65
  }, []);
66
- 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), children: GridMessage }) })), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [columnsDefinitions.find(function (col) { return col.group; }) && (_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 }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, 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 &&
66
+ 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: [columnsDefinitions.find(function (col) { return col.group; }) && (_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 }), columnsDefinitions.find(function (col) { return col.filtering; }) && (_jsx(FilterRow, { filters: filters, 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 &&
67
67
  rowsData &&
68
68
  displayColumnsDefinitions &&
69
69
  rowsData.map(function (row, index) {
package/ui/Blocks/CommonGrid/components/Table.d.ts CHANGED
@@ -7,4 +7,6 @@ export declare const StyledDataRow: import("styled-components").StyledComponent<
7
7
  }, never>;
8
8
  export declare const Cell: (props: any) => JSX.Element;
9
9
  export declare const TextCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
10
- export declare const MessageCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
10
+ export declare const MessageCell: import("styled-components").StyledComponent<(props: any) => JSX.Element, import("@xstyled/system").Theme, {
11
+ width: number;
12
+ }, never>;
package/ui/Blocks/CommonGrid/components/Table.js CHANGED
@@ -21,5 +21,5 @@ var StyledCell = styled.div(templateObject_2 || (templateObject_2 = __makeTempla
21
21
  export var StyledDataRow = styled(Row)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return (props.isEven ? th('colors.bgLightGray') : 'white'); });
22
22
  export var Cell = function (props) { return _jsx(StyledCell, __assign({ ref: props.innerRef }, props)); };
23
23
  export var TextCell = styled(Cell)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
24
- export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
24
+ export var MessageCell = styled(Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: ", "px;\n position: sticky;\n left: 0;\n"], ["\n width: ", "px;\n position: sticky;\n left: 0;\n"])), function (props) { return props.width; });
25
25
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/ui/Blocks/CommonGrid/hooks/useManageColumn.js CHANGED
@@ -25,40 +25,48 @@ var useManageColumn = function (_a) {
25
25
  var resetGrid = gridActions.resetGrid, setColumnConfig = gridActions.setColumnConfig, setColumnsOrder = gridActions.setColumnsOrder;
26
26
  var columnConfig = gridSelectors.columnConfig, columnsOrder = gridSelectors.columnsOrder;
27
27
  var initialColumnsOrder = useMemo(function () { return columns === null || columns === void 0 ? void 0 : columns.map(function (col) { return col.name; }); }, [columns]);
28
+ // the length of columnsOrder is changed after using the setColumnsOrder
28
29
  var columnsOrderValue = (columnsOrder === null || columnsOrder === void 0 ? void 0 : columnsOrder.length) ? columnsOrder : initialColumnsOrder;
30
+ // columnsConfigOptions contains switch changes from the manageColumnForm (isHidden || {})
29
31
  var _b = useState(__assign({}, (columnConfig !== null && columnConfig !== void 0 ? columnConfig : {}))), columnsConfigOptions = _b[0], setColumnsConfigOptions = _b[1];
30
32
  var _c = useState(columnsOrderValue), updatedColumnsOrder = _c[0], setUpdatedColumnsOrder = _c[1];
31
33
  var columnsConfigValues = useMemo(function () {
32
34
  return columns === null || columns === void 0 ? void 0 : columns.filter(function (column) {
33
35
  var _a;
34
- var isHidden = (_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
35
- return (column === null || column === void 0 ? void 0 : column.alwaysOn) || typeof isHidden === 'boolean' ? !isHidden : !(column === null || column === void 0 ? void 0 : column.defaultHidden);
36
+ var isHidden = (_a = columnsConfigOptions === null || columnsConfigOptions === void 0 ? void 0 : columnsConfigOptions[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
37
+ if ((column === null || column === void 0 ? void 0 : column.alwaysOn) || typeof isHidden === 'boolean')
38
+ return !isHidden;
39
+ if (!!column.defaultHidden && !!(columnsConfigOptions === null || columnsConfigOptions === void 0 ? void 0 : columnsConfigOptions[column.name]))
40
+ return true;
41
+ else
42
+ return !(column === null || column === void 0 ? void 0 : column.defaultHidden);
36
43
  }).map(function (column) { return column.name; });
37
- }, [columnConfig, columns]);
44
+ }, [columnsConfigOptions, columns]);
38
45
  var onConfirmForm = useCallback(function () {
39
46
  setColumnConfig === null || setColumnConfig === void 0 ? void 0 : setColumnConfig(columnsConfigOptions);
40
- setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(columnsConfigValues);
47
+ setColumnsOrder === null || setColumnsOrder === void 0 ? void 0 : setColumnsOrder(updatedColumnsOrder);
41
48
  onClose === null || onClose === void 0 ? void 0 : onClose();
42
49
  }, [columnsConfigOptions, updatedColumnsOrder, onClose, setColumnConfig, setColumnsOrder]);
43
50
  var resetColumnConfig = useCallback(function () {
44
51
  setUpdatedColumnsOrder(initialColumnsOrder);
45
52
  resetGrid === null || resetGrid === void 0 ? void 0 : resetGrid();
46
53
  onClose === null || onClose === void 0 ? void 0 : onClose();
54
+ // clean columnsConfigOptions
47
55
  setColumnsConfigOptions({});
48
56
  }, [onClose, resetGrid, initialColumnsOrder, columnConfig]);
49
57
  var onCloseForm = useCallback(function () {
50
58
  setUpdatedColumnsOrder(columnsOrderValue);
51
59
  onClose === null || onClose === void 0 ? void 0 : onClose();
52
- setColumnsConfigOptions({});
60
+ setColumnsConfigOptions(columnConfig || {});
53
61
  }, [columnsOrderValue, onClose]);
54
62
  var getSortedColumns = useCallback(function (orderValues, isManageModal) {
55
- return (!isManageModal ? columns.filter(function (column) { return isColumnOn(column, columnConfig); }) : columns).toSorted(function (col1, col2) {
63
+ return (!isManageModal ? columns.filter(function (column) { return isColumnOn(column, columnsConfigOptions); }) : columns).toSorted(function (col1, col2) {
56
64
  var i = (orderValues || []).indexOf(col1.name);
57
65
  var j = (orderValues || []).indexOf(col2.name);
58
66
  return i > j ? 1 : i < j ? -1 : 0;
59
67
  });
60
68
  }, [columnConfig, columns]);
61
- var displayColumnsDefinitions = useMemo(function () { return getSortedColumns(columnsOrderValue, false); }, [columnsOrderValue]);
69
+ var displayColumnsDefinitions = useMemo(function () { return getSortedColumns(columnsOrderValue, false); }, [columnsOrderValue, columns]);
62
70
  var manageColumnsFormDefinitions = useMemo(function () { return getSortedColumns(updatedColumnsOrder, true); }, [updatedColumnsOrder]);
63
71
  var handleDragEnd = useCallback(function (isManageModal) {
64
72
  if (isManageModal === void 0) { isManageModal = false; }
package/ui/Blocks/CommonGrid/utils/index.js CHANGED
@@ -35,7 +35,10 @@ export var isColumnOn = function (column, columnConfig) {
35
35
  var isHidden = (_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
36
36
  if (typeof isHidden === 'boolean')
37
37
  return !isHidden; // isHidden is defined/stored => use user value
38
- return !column.defaultHidden; // isHidden is undefined => use default value
38
+ if (!!column.defaultHidden && !!(columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]))
39
+ return true; // is default hidden but activated
40
+ else
41
+ return !column.defaultHidden;
39
42
  };
40
43
  export var calculatePaginator = function (page, rowsPerPage) { return ({
41
44
  offset: rowsPerPage ? rowsPerPage * (page - 1) : rowsPerPage,