@mailstep/design-system 0.7.47-beta.13 → 0.7.47-beta.15

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mailstep/design-system",
3
- "version": "0.7.47-beta.13",
3
+ "version": "0.7.47-beta.15",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
@@ -9,6 +9,6 @@ var ActionFilter = function (_a) {
9
9
  var displayRowNumberLabel = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbers;
10
10
  var rowsNumberLabel = (_b = actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.addRowNumbersLabel) !== null && _b !== void 0 ? _b : '#';
11
11
  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);
12
- return (_jsxs(x.div, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", children: [displayCheckbox && (_jsx(x.div, { pl: "8px", children: _jsx(Checkbox, { checked: allChecked, onChange: toggleCheckbox, label: "" }, "check-all") })), displayRowNumberLabel && _jsx(x.div, { pr: "8px", children: rowsNumberLabel })] }));
12
+ 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 })] }));
13
13
  };
14
14
  export default ActionFilter;
@@ -4,5 +4,5 @@ import { DateTime } from 'luxon';
4
4
  export var DateCell = function (_a) {
5
5
  var rowData = _a.rowData, column = _a.column;
6
6
  var value = get(column.name, rowData);
7
- return value ? _jsx("span", { className: "cell", children: DateTime.fromISO(value).toFormat('dd. MM. yyyy') }) : null;
7
+ return value ? _jsx("span", { children: DateTime.fromISO(value).toFormat('dd. MM. yyyy') }) : null;
8
8
  };
@@ -9,5 +9,5 @@ export var DateTimeCell = function (_a) {
9
9
  var rowData = _a.rowData, column = _a.column;
10
10
  var value = get(column.name, rowData);
11
11
  var dateTimeFormat = ((_b = column === null || column === void 0 ? void 0 : column.passProps) !== null && _b !== void 0 ? _b : defaultProps).dateTimeFormat;
12
- return value ? _jsx("span", { className: "cell", children: DateTime.fromISO(value).toFormat(dateTimeFormat) }) : null;
12
+ return value ? _jsx("span", { children: DateTime.fromISO(value).toFormat(dateTimeFormat) }) : null;
13
13
  };
@@ -28,6 +28,6 @@ export var EnumInCell = function (_a) {
28
28
  }, [appearanceMap, value]);
29
29
  if (!finalLabel)
30
30
  return null;
31
- return (_jsx(Center, { children: _jsx(HighlightBox, __assign({ className: "cell" }, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
31
+ return (_jsx(Center, { children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
32
32
  };
33
33
  var templateObject_1;
@@ -53,5 +53,5 @@ export var RowActionsCell = function (_a) {
53
53
  onClick();
54
54
  }
55
55
  }, [onClick]);
56
- 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, { 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")] }));
56
+ 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")] }));
57
57
  };
@@ -3,5 +3,5 @@ import get from 'lodash/fp/get';
3
3
  export var StringJoinCell = function (_a) {
4
4
  var rowData = _a.rowData, column = _a.column;
5
5
  var values = get(column.name, rowData);
6
- return values && values.length ? _jsx("span", { className: "cell", children: values.join(', ') }) : null;
6
+ return values && values.length ? _jsx("span", { children: values.join(', ') }) : null;
7
7
  };
@@ -22,7 +22,7 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
22
22
  return (withPagination ? gridFooterHeight : 0);
23
23
  });
24
24
  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);
25
- 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) {
25
+ 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: 4px;\n padding-right: 4px;\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: 4px;\n padding-right: 4px;\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) {
26
26
  var withButtonStrip = _a.withButtonStrip;
27
27
  return (withButtonStrip ? gridButtonStripHeight : 0);
28
28
  }, th('fonts.primary'), gridRowHeight, function (_a) {