@mailstep/design-system 0.7.65-beta.2 → 0.7.65

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.65-beta.2",
3
+ "version": "0.7.65",
4
4
  "license": "ISC",
5
5
  "type": "module",
6
6
  "main": "./ui/index.js",
@@ -51,7 +51,9 @@ var CommonGrid = function (_a) {
51
51
  var commonGridRef = React.useCallback(function (node) {
52
52
  gridBoxRef.current = node;
53
53
  }, []);
54
- return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, floatingChildren: _jsx(GridStatus, { isLoading: isLoading, rowsData: rowsData, errorMessage: errorMessage }), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd, isSortTerminated: isSortTerminated }), hasFilters && (_jsx(FilterRow, { filters: filters, comparators: comparators, 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 &&
54
+ var isEmpty = !isLoading && !errorMessage && (!rowsData || rowsData.length < 1);
55
+ var hasFloatingChildren = isLoading || errorMessage || isEmpty;
56
+ return (_jsxs(_Fragment, { children: [_jsx(x.div, { className: className || '', children: _jsxs(OversizedScroll, { columnLayout: columnLayout, totalColumnsWidth: totalColumnsWidth, floatingChildren: hasFloatingChildren && _jsx(GridStatus, { isLoading: isLoading, isEmpty: isEmpty, errorMessage: errorMessage }), ref: commonGridRef, children: [_jsxs("div", { className: "gridHead", children: [hasGroups && (_jsx(GroupRow, { actionColumn: actionColumnDefinition, columns: displayColumnsDefinitions, displayColumnsWidth: displayColumnsWidth, groups: groups })), _jsx(HeadRow, { columns: displayColumnsDefinitions, onAddSort: addSorting, columnLayout: columnLayout, sortingValues: sorting, displayColumnsWidth: displayColumnsWidth, handleResizeDrag: handleResizeDrag, groups: groups, handleDragEnd: handleDragEnd, isSortTerminated: isSortTerminated }), hasFilters && (_jsx(FilterRow, { filters: filters, comparators: comparators, 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 &&
55
57
  rowsData &&
56
58
  displayColumnsDefinitions &&
57
59
  rowsData.map(function (row, index) {
@@ -1,8 +1,7 @@
1
1
  import type { FC } from 'react';
2
- import type { RowProps } from '../../types';
3
- type Props<TData extends RowProps = RowProps> = {
2
+ type Props = {
4
3
  isLoading?: boolean;
5
- rowsData: TData[];
4
+ isEmpty?: boolean;
6
5
  errorMessage?: string;
7
6
  };
8
7
  export declare const GridStatus: FC<Props>;
@@ -2,9 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Row, MessageCell, MessageCellBody } from '../Table';
3
3
  import { Trans } from '@lingui/react';
4
4
  export var GridStatus = function (_a) {
5
- var isLoading = _a.isLoading, rowsData = _a.rowsData, errorMessage = _a.errorMessage;
5
+ var isLoading = _a.isLoading, isEmpty = _a.isEmpty, errorMessage = _a.errorMessage;
6
6
  var hasError = !isLoading && errorMessage;
7
- var isEmpty = !isLoading && !errorMessage && (!rowsData || rowsData.length < 1);
8
7
  var variant = hasError ? 'error' : 'info';
9
8
  return (_jsx(Row, { className: "dataRow", align: "center", children: _jsx(MessageCell, { children: _jsxs(MessageCellBody, { variant: variant, children: [isLoading && _jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." }), hasError && errorMessage, isEmpty && _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." })] }) }) }));
10
9
  };
@@ -49,6 +49,6 @@ var MenuItem = function (_a) {
49
49
  }, [items, link]);
50
50
  return (_jsxs(_Fragment, { children: [separator && _jsx(ItemsSeparator, {}), _jsxs(MenuItemContainer, { ref: parentRef, "$isCompact": isCompact, "$lightMode": lightMode, hasChildren: hasChildren, isHovering: isHovering, children: [_jsxs(ItemLinkWrap, __assign({}, linkProps, { onMouseOver: handleMouseOver, exact: true, activeClassName: hasChildren ? 'selected' : undefined, onClick: toggleChildren, "$isCompact": isCompact, className: itemLinkWrapClassName,
51
51
  // @ts-expect-error
52
- isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign: isCompact ? 'center' : 'left', children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
52
+ isActive: isActive, "$lightMode": lightMode, children: [_jsxs(ItemLabel, { "$isCompact": isCompact, isSubitem: isSubitem, children: [!isSubitem && icon && (_jsx(ItemIcon, { className: "mainIcon", "$isCompact": isCompact, children: typeof icon === 'string' ? _jsx(Icon, { icon: icon, fill: "none" }) : icon })), _jsx(Title, { variant: "semiBold", mt: 0, mb: 0, textAlign: "left", children: _jsx(OverflowWithEllipsis, { children: title }) })] }), !isCompact && hasChildren && _jsx(ItemDropdownArrow, { icon: "goDown", "$lightMode": lightMode })] })), isHovering && isCompact && hasChildren && !listExpandedItems && (_jsx(SubitemTooltip, { items: items, childRef: childRef, parentRef: parentRef, isLeftMenuOpen: isLeftMenuOpen, onCloseLeftMenu: onCloseLeftMenu, lightMode: lightMode }))] }), hasChildren && listExpandedItems && (_jsx(SubItemsWrap, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) { return (_jsx(MenuItem, __assign({ isCompact: isCompact, lightMode: lightMode }, item, { onCloseLeftMenu: onCloseLeftMenu, isSubitem: true }), "".concat(index))); }) }))] }));
53
53
  };
54
54
  export default memo(MenuItem);
@@ -29,7 +29,6 @@ export { Inventory2 } from './Inventory2';
29
29
  export { Logout1 } from './Logout1';
30
30
  export { Puzzle1 } from './Puzzle1';
31
31
  export { AddPhoto } from './AddPhoto';
32
- export { Layout } from './Layout';
33
32
  export { Link } from './Link';
34
33
  export { OpenBox } from './OpenBox';
35
34
  export { Box } from './Box';
@@ -29,7 +29,6 @@ export { Inventory2 } from './Inventory2';
29
29
  export { Logout1 } from './Logout1';
30
30
  export { Puzzle1 } from './Puzzle1';
31
31
  export { AddPhoto } from './AddPhoto';
32
- export { Layout } from './Layout';
33
32
  export { Link } from './Link';
34
33
  export { OpenBox } from './OpenBox';
35
34
  export { Box } from './Box';
@@ -29,9 +29,6 @@ declare const defaultTheme: {
29
29
  typoPrimary: string;
30
30
  blue10: string;
31
31
  blue20: string;
32
- blue30: string;
33
- blue40: string;
34
- blue50: string;
35
32
  blue60: string;
36
33
  blue70: string;
37
34
  blue80: string;
@@ -82,13 +79,8 @@ declare const defaultTheme: {
82
79
  purple60: string;
83
80
  purple80: string;
84
81
  purple90: string;
85
- magenta10: string;
86
82
  magenta20: string;
87
- magenta30: string;
88
- magenta40: string;
89
- magenta50: string;
90
83
  magenta60: string;
91
- magenta70: string;
92
84
  magenta80: string;
93
85
  magenta90: string;
94
86
  };
@@ -29,9 +29,6 @@ var defaultTheme = {
29
29
  typoPrimary: '#22394E',
30
30
  blue10: '#F3F9FF',
31
31
  blue20: '#DCEFFF',
32
- blue30: '#BFE0FF',
33
- blue40: '#6FADFF',
34
- blue50: '#2684FF',
35
32
  blue60: '#0065FF',
36
33
  blue70: '#0052CC',
37
34
  blue80: '#0747A6',
@@ -82,15 +79,10 @@ var defaultTheme = {
82
79
  purple60: '#6554C0',
83
80
  purple80: '#403294',
84
81
  purple90: '#03235f',
85
- magenta10: '#FFF7FB',
86
82
  magenta20: '#FCF1F7',
87
- magenta30: '#FFD6E8',
88
- magenta40: '#FFAFD2',
89
- magenta50: '#FF7EB6',
90
83
  magenta60: '#EE5396',
91
- magenta70: '#D12771',
92
84
  magenta80: '#9F1853',
93
- magenta90: '#7B1340',
85
+ magenta90: '#872e8b',
94
86
  },
95
87
  fonts: {
96
88
  primary: 'Inter, sans-serif',
@@ -30,9 +30,6 @@ declare const themes: {
30
30
  typoPrimary: string;
31
31
  blue10: string;
32
32
  blue20: string;
33
- blue30: string;
34
- blue40: string;
35
- blue50: string;
36
33
  blue60: string;
37
34
  blue70: string;
38
35
  blue80: string;
@@ -83,13 +80,8 @@ declare const themes: {
83
80
  purple60: string;
84
81
  purple80: string;
85
82
  purple90: string;
86
- magenta10: string;
87
83
  magenta20: string;
88
- magenta30: string;
89
- magenta40: string;
90
- magenta50: string;
91
84
  magenta60: string;
92
- magenta70: string;
93
85
  magenta80: string;
94
86
  magenta90: string;
95
87
  };