@zohodesk/dot 1.4.8 → 1.4.9

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 (47) hide show
  1. package/README.md +15 -0
  2. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +0 -1
  3. package/assets/Appearance/light/mode/Dot_LightMode.module.css +0 -1
  4. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +0 -1
  5. package/coverage/ExternalLink/ExternalLink.js.html +1 -1
  6. package/coverage/ExternalLink/ExternalLink.module.css.html +1 -1
  7. package/coverage/ExternalLink/index.html +1 -1
  8. package/coverage/ExternalLink/props/defaultProps.js.html +1 -1
  9. package/coverage/ExternalLink/props/index.html +1 -1
  10. package/coverage/ExternalLink/props/propTypes.js.html +1 -1
  11. package/coverage/IconButton/IconButton.js.html +1 -1
  12. package/coverage/IconButton/IconButton.module.css.html +1 -1
  13. package/coverage/IconButton/index.html +1 -1
  14. package/coverage/IconButton/props/defaultProps.js.html +1 -1
  15. package/coverage/IconButton/props/index.html +1 -1
  16. package/coverage/IconButton/props/propTypes.js.html +1 -1
  17. package/coverage/Image/Image.js.html +1 -1
  18. package/coverage/Image/Image.module.css.html +1 -1
  19. package/coverage/Image/index.html +1 -1
  20. package/coverage/Image/props/defaultProps.js.html +1 -1
  21. package/coverage/Image/props/index.html +1 -1
  22. package/coverage/Image/props/propTypes.js.html +1 -1
  23. package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html +1 -1
  24. package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html +1 -1
  25. package/coverage/avatar/AvatarWithTeam/index.html +1 -1
  26. package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html +1 -1
  27. package/coverage/avatar/AvatarWithTeam/props/index.html +1 -1
  28. package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html +1 -1
  29. package/coverage/index.html +1 -1
  30. package/es/common/dot_boxShadow.module.css +3 -1
  31. package/es/v1/GlobalNotification/GlobalNotification.js +51 -19
  32. package/es/v1/GlobalNotification/props/defaultProps.js +3 -1
  33. package/es/v1/GlobalNotification/props/propTypes.js +12 -2
  34. package/es/version2/GlobalNotification/GlobalNotification.js +52 -26
  35. package/es/version2/GlobalNotification/GlobalNotification.module.css +57 -6
  36. package/es/version2/GlobalNotification/props/defaultProps.js +3 -1
  37. package/es/version2/GlobalNotification/props/propTypes.js +12 -4
  38. package/lib/common/dot_boxShadow.module.css +3 -1
  39. package/lib/v1/GlobalNotification/GlobalNotification.js +66 -17
  40. package/lib/v1/GlobalNotification/props/defaultProps.js +3 -1
  41. package/lib/v1/GlobalNotification/props/propTypes.js +17 -4
  42. package/lib/version2/GlobalNotification/GlobalNotification.js +52 -29
  43. package/lib/version2/GlobalNotification/GlobalNotification.module.css +57 -6
  44. package/lib/version2/GlobalNotification/props/defaultProps.js +3 -1
  45. package/lib/version2/GlobalNotification/props/propTypes.js +12 -4
  46. package/package.json +3 -3
  47. package/result.json +1 -1
@@ -3,7 +3,6 @@
3
3
  --commonalert_border_color: var(--zdt_commonalert_default_border);
4
4
  --globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
5
5
  --globalnotification_text_color: var(--zdt_globalnotification_default_text);
6
- --globalnotification_box_shadow: var(--zdt_globalnotification_default_box_shadow);
7
6
  }
8
7
 
9
8
  .message {
@@ -11,19 +10,69 @@
11
10
  position: absolute;
12
11
  top: 0 ;
13
12
  z-index: 1000;
14
- /*Hook for editor alert*/
15
- pointer-events: none;
13
+ width: var(--zd_size420) ;
16
14
  text-align: center;
15
+ margin: auto ;
17
16
  }
18
17
 
19
18
  [dir=ltr] .message {
20
- right: 0 ;
21
19
  left: 0 ;
20
+ right: 0 ;
22
21
  }
23
22
 
24
23
  [dir=rtl] .message {
25
- left: 0 ;
26
24
  right: 0 ;
25
+ left: 0 ;
26
+ }
27
+
28
+ .stackShadowOne::after,
29
+ .stackShadowTwo::before {
30
+ content: '';
31
+ position: absolute;
32
+ /* css:theme-validation:ignore */
33
+ height: var(--zd_size20) ;
34
+ }
35
+
36
+ .stackShadowOne::after, .stackShadowTwo::before {
37
+ background-color: var(--globalnotification_bg_color);
38
+ border-radius: 0 0 6px 6px;
39
+ box-shadow: var(--zd_bs_globalnotification_container);
40
+ }
41
+
42
+ [dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
43
+ left: 50% ;
44
+ right: 50% ;
45
+ transform: translate(-50%);
46
+ animation: behindInfo 0.8s forwards;
47
+ }
48
+
49
+ [dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
50
+ right: 50% ;
51
+ left: 50% ;
52
+ transform: translate(50%);
53
+ animation: behindInfo 0.8s forwards;
54
+ }
55
+
56
+ .stackShadowTwo::before {
57
+ width: 90% ;
58
+ bottom: calc( var(--zd_size10) * -1 ) ;
59
+ }
60
+
61
+ .stackShadowOne::after {
62
+ width: 95% ;
63
+ bottom: calc( var(--zd_size5) * -1 ) ;
64
+ }
65
+
66
+ @keyframes behindInfo {
67
+
68
+ 0%,
69
+ 40% {
70
+ opacity: 0;
71
+ }
72
+
73
+ 100% {
74
+ opacity: 1;
75
+ }
27
76
  }
28
77
 
29
78
  .container {
@@ -33,8 +82,9 @@
33
82
  /* css:theme-validation:ignore */
34
83
  /* css:theme-validation:ignore */
35
84
  color: var(--globalnotification_text_color);
36
- max-width: var(--zd_size490) ;
85
+ z-index: 1;
37
86
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
87
+ width: 100% ;
38
88
  box-shadow: var(--zd_bs_globalnotification_container);
39
89
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
40
90
  background-color: var(--globalnotification_bg_color);
@@ -103,6 +153,7 @@
103
153
  font-family: var(--zd_semibold);
104
154
  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
105
155
  line-height: 1.4286;
156
+ overflow: hidden;
106
157
  }
107
158
 
108
159
  [dir=ltr] .text {
@@ -1,4 +1,6 @@
1
1
  export const defaultProps = {
2
2
  customProps: {},
3
- dataSelectorId: 'globalNotification'
3
+ dataSelectorId: 'globalNotification',
4
+ needAutoClose: true,
5
+ hideTime: 3000
4
6
  };
@@ -9,19 +9,27 @@ export const propTypes = {
9
9
  i18nKeys: PropTypes.object,
10
10
  customProps: PropTypes.shape({
11
11
  ExtraProps: PropTypes.object
12
- })
12
+ }),
13
+ id: PropTypes.number,
14
+ hideTime: PropTypes.number,
15
+ needAutoClose: PropTypes.bool,
16
+ isCollapseView: PropTypes.bool,
17
+ shadowCount: PropTypes.number,
18
+ needShadow: PropTypes.bool
13
19
  };
14
20
  export const UI_propTypes = {
15
21
  dataSelectorId: PropTypes.string,
16
- onClose: PropTypes.func,
17
22
  closeTitle: PropTypes.string,
18
- hideMessage: PropTypes.func,
19
23
  message: PropTypes.string,
20
24
  onClick: PropTypes.func,
21
25
  type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
22
26
  customProps: PropTypes.shape({
23
27
  ExtraProps: PropTypes.object
24
- })
28
+ }),
29
+ needShadow: PropTypes.bool,
30
+ shadowCount: PropTypes.number,
31
+ id: PropTypes.number,
32
+ onClose: PropTypes.func
25
33
  };
26
34
  export const new_propTypes = {
27
35
  Element: PropTypes.element,
@@ -31,8 +31,10 @@
31
31
  --zd_bs_toastmessage_container: var(--zd_bs_contrast_outline, 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow));
32
32
 
33
33
  /* global notification */
34
- --zd_bs_globalnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--globalnotification_box_shadow));
34
+ --zd_bs_globalnotification_container: var(--zd_bs_contrast_outline, 0px 4px 4px 0px var(--zdt_message_default_box_shadow));
35
35
 
36
36
  /* desktop notification */
37
37
  --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
38
+
39
+
38
40
  }
@@ -23,6 +23,8 @@ var _AlertClose = _interopRequireDefault(require("../alert/AlertClose/AlertClose
23
23
 
24
24
  var _Layout = require("@zohodesk/components/es/v1/Layout");
25
25
 
26
+ var _Common = require("@zohodesk/components/es/utils/Common");
27
+
26
28
  var _GlobalNotificationModule = _interopRequireDefault(require("../../version2/GlobalNotification/GlobalNotification.module.css"));
27
29
 
28
30
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -33,25 +35,63 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
33
35
 
34
36
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
35
37
 
38
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
39
+
40
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
41
+
42
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
43
+
44
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
45
+
46
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
47
+
48
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
49
+
36
50
  function GlobalNotification(props) {
37
51
  var type = props.type,
38
52
  message = props.message,
39
53
  hideMessage = props.hideMessage,
54
+ hideTime = props.hideTime,
40
55
  onClick = props.onClick,
56
+ onClose = props.onClose,
57
+ needAutoClose = props.needAutoClose,
41
58
  _props$i18nKeys = props.i18nKeys,
42
59
  i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
43
60
  customProps = props.customProps,
44
61
  dataSelectorId = props.dataSelectorId,
45
- showMessage = props.showMessage;
62
+ id = props.id,
63
+ needShadow = props.needShadow,
64
+ shadowCount = props.shadowCount,
65
+ eleRef = props.eleRef;
66
+ var hideMessageTimer = useRef(null);
67
+
68
+ var _useState = useState(true),
69
+ _useState2 = _slicedToArray(_useState, 2),
70
+ shadowClose = _useState2[0],
71
+ setShadowClose = _useState2[1];
72
+
46
73
  (0, _react.useEffect)(function () {
47
- if (!['danger', 'error', 'warning'].includes(type)) {
48
- setTimeout(function () {
49
- hideMessage();
50
- }, 3000);
74
+ if (needAutoClose) {
75
+ hideMessageTimer.current = setTimeout(function () {
76
+ hideMessage(id);
77
+ }, hideTime);
51
78
  }
52
- }, [showMessage, type]);
79
+
80
+ return function () {
81
+ if (hideMessageTimer.current) {
82
+ clearTimeout(hideMessageTimer.current);
83
+ }
84
+ };
85
+ }, []);
53
86
  var _i18nKeys$closeTitle = i18nKeys.closeTitle,
54
87
  closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
88
+
89
+ function onCloseLocal(e) {
90
+ setShadowClose(false);
91
+ hideMessage && hideMessage(id);
92
+ onClose && onClose(e);
93
+ }
94
+
55
95
  return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, {
56
96
  type: type,
57
97
  message: message,
@@ -59,7 +99,12 @@ function GlobalNotification(props) {
59
99
  onClick: onClick,
60
100
  closeTitle: closeTitle,
61
101
  customProps: customProps,
62
- dataSelectorId: dataSelectorId
102
+ dataSelectorId: dataSelectorId,
103
+ id: id,
104
+ shadowCount: shadowCount,
105
+ onClose: onCloseLocal,
106
+ needShadow: shadowClose && needShadow,
107
+ eleRef: eleRef
63
108
  });
64
109
  }
65
110
 
@@ -72,13 +117,6 @@ GlobalNotification.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
72
117
  // }
73
118
 
74
119
  function GlobalNotificationUI(props) {
75
- function onClose(e) {
76
- var hideMessage = props.hideMessage,
77
- onClose = props.onClose;
78
- hideMessage && hideMessage(e);
79
- onClose && onClose(e);
80
- }
81
-
82
120
  var _props$type = props.type,
83
121
  type = _props$type === void 0 ? '' : _props$type,
84
122
  message = props.message,
@@ -87,11 +125,22 @@ function GlobalNotificationUI(props) {
87
125
  closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle,
88
126
  _props$customProps = props.customProps,
89
127
  customProps = _props$customProps === void 0 ? {} : _props$customProps,
90
- dataSelectorId = props.dataSelectorId;
128
+ dataSelectorId = props.dataSelectorId,
129
+ shadowCount = props.shadowCount,
130
+ needShadow = props.needShadow,
131
+ eleRef = props.eleRef,
132
+ onClose = props.onClose;
91
133
  var _customProps$ExtraPro = customProps.ExtraProps,
92
134
  ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
135
+
136
+ function onCloseLocal(e) {
137
+ (0, _Common.cancelBubblingEffect)(e);
138
+ onClose && onClose(e);
139
+ }
140
+
93
141
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
94
- className: "".concat(_GlobalNotificationModule["default"].message, " ").concat(type ? _GlobalNotificationModule["default"][type] : ''),
142
+ ref: eleRef,
143
+ className: " ".concat(_GlobalNotificationModule["default"].message, " \n ").concat(needShadow && shadowCount >= 2 ? shadowCount > 2 ? "".concat(_GlobalNotificationModule["default"].stackShadowTwo, " ").concat(_GlobalNotificationModule["default"].stackShadowOne) : _GlobalNotificationModule["default"].stackShadowOne : '', "\n ").concat(type ? _GlobalNotificationModule["default"][type] : '', "\n "),
95
144
  "data-id": "show_".concat(type, "_message"),
96
145
  "data-test-id": "show_".concat(type, "_message"),
97
146
  tabIndex: 0,
@@ -122,7 +171,7 @@ function GlobalNotificationUI(props) {
122
171
  }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
123
172
  dataId: "close_".concat(type, "_message"),
124
173
  dataTitle: closeTitle,
125
- onClose: onClose,
174
+ onClose: onCloseLocal,
126
175
  type: type
127
176
  }))));
128
177
  }
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.defaultProps = void 0;
7
7
  var defaultProps = {
8
8
  customProps: {},
9
- dataSelectorId: 'globalNotification'
9
+ dataSelectorId: 'globalNotification',
10
+ needAutoClose: true,
11
+ hideTime: 3000
10
12
  };
11
13
  exports.defaultProps = defaultProps;
@@ -9,6 +9,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
 
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
11
 
12
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
13
+
12
14
  var propTypes = {
13
15
  dataSelectorId: _propTypes["default"].string,
14
16
  hideMessage: _propTypes["default"].func,
@@ -19,10 +21,17 @@ var propTypes = {
19
21
  i18nKeys: _propTypes["default"].object,
20
22
  customProps: _propTypes["default"].shape({
21
23
  ExtraProps: _propTypes["default"].object
22
- })
24
+ }),
25
+ id: _propTypes["default"].number,
26
+ hideTime: _propTypes["default"].number,
27
+ needAutoClose: _propTypes["default"].bool,
28
+ isCollapseView: _propTypes["default"].bool,
29
+ shadowCount: _propTypes["default"].number,
30
+ needShadow: _propTypes["default"].bool
23
31
  };
24
32
  exports.propTypes = propTypes;
25
- var UI_propTypes = {
33
+
34
+ var UI_propTypes = _defineProperty({
26
35
  dataSelectorId: _propTypes["default"].string,
27
36
  onClose: _propTypes["default"].func,
28
37
  closeTitle: _propTypes["default"].string,
@@ -32,8 +41,12 @@ var UI_propTypes = {
32
41
  type: _propTypes["default"].oneOf(['success', 'danger', 'info', 'warning', 'error']),
33
42
  customProps: _propTypes["default"].shape({
34
43
  ExtraProps: _propTypes["default"].object
35
- })
36
- };
44
+ }),
45
+ needShadow: _propTypes["default"].bool,
46
+ shadowCount: _propTypes["default"].number,
47
+ id: _propTypes["default"].number
48
+ }, "onClose", _propTypes["default"].func);
49
+
37
50
  exports.UI_propTypes = UI_propTypes;
38
51
  var new_propTypes = {
39
52
  Element: _propTypes["default"].element,
@@ -25,6 +25,8 @@ var _GlobalNotificationModule = _interopRequireDefault(require("./GlobalNotifica
25
25
 
26
26
  var _Layout = require("@zohodesk/components/lib/Layout");
27
27
 
28
+ var _Common = require("@zohodesk/components/es/utils/Common");
29
+
28
30
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
29
31
 
30
32
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -60,41 +62,49 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
60
62
  _classCallCheck(this, GlobalNotification);
61
63
 
62
64
  _this = _super.call(this, props);
65
+ _this.hideMessageTimer = null;
63
66
  _this.state = {
64
- hideMessage: false
67
+ shadowClose: true
65
68
  };
69
+ _this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
66
70
  return _this;
67
71
  }
68
72
 
69
73
  _createClass(GlobalNotification, [{
70
- key: "UNSAFE_componentWillReceiveProps",
71
- value: function UNSAFE_componentWillReceiveProps(nextProps) {
74
+ key: "componentDidMount",
75
+ value: function componentDidMount() {
72
76
  var _this$props = this.props,
73
- showMessage = _this$props.showMessage,
74
77
  hideMessage = _this$props.hideMessage,
75
- type = _this$props.type;
76
-
77
- if (showMessage !== nextProps.showMessage || type !== nextProps.type) {
78
- if (!['danger', 'error', 'warning'].includes(nextProps.type)) {
79
- setTimeout(function () {
80
- hideMessage();
81
- }, 3000);
82
- }
78
+ hideTime = _this$props.hideTime,
79
+ id = _this$props.id,
80
+ needAutoClose = _this$props.needAutoClose;
81
+
82
+ if (needAutoClose) {
83
+ this.hideMessageTimer = setTimeout(function () {
84
+ hideMessage(id);
85
+ }, hideTime);
83
86
  }
84
87
  }
85
88
  }, {
86
- key: "componentDidMount",
87
- value: function componentDidMount() {
88
- var _this$props2 = this.props,
89
- type = _this$props2.type,
90
- hideMessage = _this$props2.hideMessage;
91
-
92
- if (!['danger', 'error', 'warning'].includes(type)) {
93
- setTimeout(function () {
94
- hideMessage();
95
- }, 3000);
89
+ key: "componentWillUnmount",
90
+ value: function componentWillUnmount() {
91
+ if (this.hideMessageTimer) {
92
+ clearTimeout(this.hideMessageTimer);
96
93
  }
97
94
  }
95
+ }, {
96
+ key: "onClose",
97
+ value: function onClose(e) {
98
+ var _this$props2 = this.props,
99
+ onClose = _this$props2.onClose,
100
+ hideMessage = _this$props2.hideMessage,
101
+ id = _this$props2.id;
102
+ this.setState({
103
+ shadowClose: false
104
+ });
105
+ hideMessage && hideMessage(id);
106
+ onClose && onClose(e);
107
+ }
98
108
  }, {
99
109
  key: "render",
100
110
  value: function render() {
@@ -106,7 +116,12 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
106
116
  _this$props3$i18nKeys = _this$props3.i18nKeys,
107
117
  i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys,
108
118
  customProps = _this$props3.customProps,
109
- dataSelectorId = _this$props3.dataSelectorId;
119
+ dataSelectorId = _this$props3.dataSelectorId,
120
+ id = _this$props3.id,
121
+ needShadow = _this$props3.needShadow,
122
+ shadowCount = _this$props3.shadowCount,
123
+ eleRef = _this$props3.eleRef;
124
+ var shadowClose = this.state.shadowClose;
110
125
  var _i18nKeys$closeTitle = i18nKeys.closeTitle,
111
126
  closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
112
127
  return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, {
@@ -116,7 +131,12 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
116
131
  onClick: onClick,
117
132
  closeTitle: closeTitle,
118
133
  customProps: customProps,
119
- dataSelectorId: dataSelectorId
134
+ dataSelectorId: dataSelectorId,
135
+ id: id,
136
+ shadowCount: shadowCount,
137
+ onClose: this.onClose,
138
+ needShadow: shadowClose && needShadow,
139
+ eleRef: eleRef
120
140
  });
121
141
  }
122
142
  }]);
@@ -135,9 +155,8 @@ GlobalNotification.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
135
155
 
136
156
  function GlobalNotificationUI(props) {
137
157
  function onClose(e) {
138
- var hideMessage = props.hideMessage,
139
- onClose = props.onClose;
140
- hideMessage && hideMessage(e);
158
+ var onClose = props.onClose;
159
+ (0, _Common.cancelBubblingEffect)(e);
141
160
  onClose && onClose(e);
142
161
  }
143
162
 
@@ -149,11 +168,15 @@ function GlobalNotificationUI(props) {
149
168
  closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle,
150
169
  _props$customProps = props.customProps,
151
170
  customProps = _props$customProps === void 0 ? {} : _props$customProps,
152
- dataSelectorId = props.dataSelectorId;
171
+ dataSelectorId = props.dataSelectorId,
172
+ shadowCount = props.shadowCount,
173
+ needShadow = props.needShadow,
174
+ eleRef = props.eleRef;
153
175
  var _customProps$ExtraPro = customProps.ExtraProps,
154
176
  ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
155
177
  return /*#__PURE__*/_react["default"].createElement("div", _extends({
156
- className: "".concat(_GlobalNotificationModule["default"].message, " ").concat(type ? _GlobalNotificationModule["default"][type] : ''),
178
+ ref: eleRef,
179
+ className: " ".concat(_GlobalNotificationModule["default"].message, " \n ").concat(needShadow && shadowCount >= 2 ? shadowCount > 2 ? "".concat(_GlobalNotificationModule["default"].stackShadowTwo, " ").concat(_GlobalNotificationModule["default"].stackShadowOne) : _GlobalNotificationModule["default"].stackShadowOne : '', "\n ").concat(type ? _GlobalNotificationModule["default"][type] : '', "\n "),
157
180
  "data-id": "show_".concat(type, "_message"),
158
181
  "data-test-id": "show_".concat(type, "_message"),
159
182
  tabIndex: 0,
@@ -3,7 +3,6 @@
3
3
  --commonalert_border_color: var(--zdt_commonalert_default_border);
4
4
  --globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
5
5
  --globalnotification_text_color: var(--zdt_globalnotification_default_text);
6
- --globalnotification_box_shadow: var(--zdt_globalnotification_default_box_shadow);
7
6
  }
8
7
 
9
8
  .message {
@@ -11,19 +10,69 @@
11
10
  position: absolute;
12
11
  top: 0 ;
13
12
  z-index: 1000;
14
- /*Hook for editor alert*/
15
- pointer-events: none;
13
+ width: var(--zd_size420) ;
16
14
  text-align: center;
15
+ margin: auto ;
17
16
  }
18
17
 
19
18
  [dir=ltr] .message {
20
- right: 0 ;
21
19
  left: 0 ;
20
+ right: 0 ;
22
21
  }
23
22
 
24
23
  [dir=rtl] .message {
25
- left: 0 ;
26
24
  right: 0 ;
25
+ left: 0 ;
26
+ }
27
+
28
+ .stackShadowOne::after,
29
+ .stackShadowTwo::before {
30
+ content: '';
31
+ position: absolute;
32
+ /* css:theme-validation:ignore */
33
+ height: var(--zd_size20) ;
34
+ }
35
+
36
+ .stackShadowOne::after, .stackShadowTwo::before {
37
+ background-color: var(--globalnotification_bg_color);
38
+ border-radius: 0 0 6px 6px;
39
+ box-shadow: var(--zd_bs_globalnotification_container);
40
+ }
41
+
42
+ [dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
43
+ left: 50% ;
44
+ right: 50% ;
45
+ transform: translate(-50%);
46
+ animation: behindInfo 0.8s forwards;
47
+ }
48
+
49
+ [dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
50
+ right: 50% ;
51
+ left: 50% ;
52
+ transform: translate(50%);
53
+ animation: behindInfo 0.8s forwards;
54
+ }
55
+
56
+ .stackShadowTwo::before {
57
+ width: 90% ;
58
+ bottom: calc( var(--zd_size10) * -1 ) ;
59
+ }
60
+
61
+ .stackShadowOne::after {
62
+ width: 95% ;
63
+ bottom: calc( var(--zd_size5) * -1 ) ;
64
+ }
65
+
66
+ @keyframes behindInfo {
67
+
68
+ 0%,
69
+ 40% {
70
+ opacity: 0;
71
+ }
72
+
73
+ 100% {
74
+ opacity: 1;
75
+ }
27
76
  }
28
77
 
29
78
  .container {
@@ -33,8 +82,9 @@
33
82
  /* css:theme-validation:ignore */
34
83
  /* css:theme-validation:ignore */
35
84
  color: var(--globalnotification_text_color);
36
- max-width: var(--zd_size490) ;
85
+ z-index: 1;
37
86
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
87
+ width: 100% ;
38
88
  box-shadow: var(--zd_bs_globalnotification_container);
39
89
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
40
90
  background-color: var(--globalnotification_bg_color);
@@ -103,6 +153,7 @@
103
153
  font-family: var(--zd_semibold);
104
154
  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
105
155
  line-height: 1.4286;
156
+ overflow: hidden;
106
157
  }
107
158
 
108
159
  [dir=ltr] .text {
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.defaultProps = void 0;
7
7
  var defaultProps = {
8
8
  customProps: {},
9
- dataSelectorId: 'globalNotification'
9
+ dataSelectorId: 'globalNotification',
10
+ needAutoClose: true,
11
+ hideTime: 3000
10
12
  };
11
13
  exports.defaultProps = defaultProps;
@@ -19,20 +19,28 @@ var propTypes = {
19
19
  i18nKeys: _propTypes["default"].object,
20
20
  customProps: _propTypes["default"].shape({
21
21
  ExtraProps: _propTypes["default"].object
22
- })
22
+ }),
23
+ id: _propTypes["default"].number,
24
+ hideTime: _propTypes["default"].number,
25
+ needAutoClose: _propTypes["default"].bool,
26
+ isCollapseView: _propTypes["default"].bool,
27
+ shadowCount: _propTypes["default"].number,
28
+ needShadow: _propTypes["default"].bool
23
29
  };
24
30
  exports.propTypes = propTypes;
25
31
  var UI_propTypes = {
26
32
  dataSelectorId: _propTypes["default"].string,
27
- onClose: _propTypes["default"].func,
28
33
  closeTitle: _propTypes["default"].string,
29
- hideMessage: _propTypes["default"].func,
30
34
  message: _propTypes["default"].string,
31
35
  onClick: _propTypes["default"].func,
32
36
  type: _propTypes["default"].oneOf(['success', 'danger', 'info', 'warning', 'error']),
33
37
  customProps: _propTypes["default"].shape({
34
38
  ExtraProps: _propTypes["default"].object
35
- })
39
+ }),
40
+ needShadow: _propTypes["default"].bool,
41
+ shadowCount: _propTypes["default"].number,
42
+ id: _propTypes["default"].number,
43
+ onClose: _propTypes["default"].func
36
44
  };
37
45
  exports.UI_propTypes = UI_propTypes;
38
46
  var new_propTypes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/dot",
3
- "version": "1.4.8",
3
+ "version": "1.4.9",
4
4
  "main": "lib/index",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -61,7 +61,7 @@
61
61
  "@zohodesk-private/node-plugins": "1.1.6",
62
62
  "@zohodesk-private/react-prop-validator": "1.2.1",
63
63
  "@zohodesk/a11y": "2.2.0",
64
- "@zohodesk/components": "1.2.23",
64
+ "@zohodesk/components": "1.2.24",
65
65
  "@zohodesk/hooks": "2.0.2",
66
66
  "@zohodesk/icons": "1.0.27",
67
67
  "@zohodesk/svg": "1.1.10",
@@ -74,7 +74,7 @@
74
74
  "peerDependencies": {
75
75
  "velocity-react": "1.4.3",
76
76
  "@zohodesk/variables": "1.0.0",
77
- "@zohodesk/components": "1.2.23",
77
+ "@zohodesk/components": "1.2.24",
78
78
  "@zohodesk/icons": "1.0.27",
79
79
  "@zohodesk/svg": "1.1.10",
80
80
  "@zohodesk/virtualizer": "1.0.3",