@zohodesk/dot 1.0.0-beta.252 → 1.0.0-beta.254

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 (63) hide show
  1. package/README.md +10 -0
  2. package/assets/Appearance/dark/mode/dotDarkMode.module.css +293 -303
  3. package/assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css +9 -9
  4. package/assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css +9 -9
  5. package/assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css +9 -9
  6. package/assets/Appearance/dark/themes/red/redDarkDotTheme.module.css +9 -9
  7. package/assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css +9 -9
  8. package/assets/Appearance/default/mode/dotDefaultMode.module.css +288 -298
  9. package/assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css +9 -9
  10. package/assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css +9 -9
  11. package/assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css +9 -9
  12. package/assets/Appearance/default/themes/red/redDefaultDotTheme.module.css +9 -9
  13. package/assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css +9 -9
  14. package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css +296 -306
  15. package/assets/Appearance/pureDark/themes/blue/bluePureDarkDotTheme.module.css +9 -9
  16. package/assets/Appearance/pureDark/themes/green/greenPureDarkDotTheme.module.css +9 -9
  17. package/assets/Appearance/pureDark/themes/orange/orangePureDarkDotTheme.module.css +9 -9
  18. package/assets/Appearance/pureDark/themes/red/redPureDarkDotTheme.module.css +9 -9
  19. package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkDotTheme.module.css +9 -9
  20. package/css_error.log +1 -0
  21. package/es/AttachmentViewer/AttachmentViewer.module.css +4 -5
  22. package/es/Drawer/Drawer.js +3 -2
  23. package/es/Drawer/Drawer.module.css +42 -3
  24. package/es/FreezeLayer/props/propTypes.js +2 -1
  25. package/es/FreezeLayer/useFreezeLayer.js +5 -3
  26. package/es/Link/Link.js +3 -2
  27. package/es/Message/Message.module.css +1 -1
  28. package/es/PlusIcon/PlusIcon.module.css +5 -2
  29. package/es/ToastMessage/ToastMessage.js +2 -5
  30. package/es/ToastMessage/ToastMessage.module.css +7 -6
  31. package/es/actions/AutoClose.js +2 -5
  32. package/es/common/dot_boxShadow.module.css +38 -0
  33. package/es/common/dot_docStyle.module.css +35 -0
  34. package/es/form/fields/TextEditor/TextEditor.module.css +161 -63
  35. package/es/layout/SubtabLayout/SubtabLayout.module.css +21 -2
  36. package/es/list/DotNew/DotNew.module.css +8 -5
  37. package/es/list/TagNew/TagNew.module.css +4 -2
  38. package/es/lookup/Section/LookupSection.module.css +2 -2
  39. package/es/lookup/header/Search/Search.js +5 -8
  40. package/es/version2/GlobalNotification/GlobalNotification.module.css +4 -1
  41. package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +23 -2
  42. package/lib/AttachmentViewer/AttachmentViewer.module.css +4 -5
  43. package/lib/Drawer/Drawer.js +3 -2
  44. package/lib/Drawer/Drawer.module.css +42 -3
  45. package/lib/FreezeLayer/props/propTypes.js +4 -2
  46. package/lib/FreezeLayer/useFreezeLayer.js +4 -2
  47. package/lib/Link/Link.js +3 -2
  48. package/lib/Message/Message.module.css +1 -1
  49. package/lib/PlusIcon/PlusIcon.module.css +5 -2
  50. package/lib/ToastMessage/ToastMessage.js +2 -5
  51. package/lib/ToastMessage/ToastMessage.module.css +7 -6
  52. package/lib/actions/AutoClose.js +2 -5
  53. package/lib/common/dot_boxShadow.module.css +38 -0
  54. package/lib/common/dot_docStyle.module.css +35 -0
  55. package/lib/form/fields/TextEditor/TextEditor.module.css +161 -63
  56. package/lib/layout/SubtabLayout/SubtabLayout.module.css +21 -2
  57. package/lib/list/DotNew/DotNew.module.css +8 -5
  58. package/lib/list/TagNew/TagNew.module.css +4 -2
  59. package/lib/lookup/Section/LookupSection.module.css +2 -2
  60. package/lib/lookup/header/Search/Search.js +5 -10
  61. package/lib/version2/GlobalNotification/GlobalNotification.module.css +4 -1
  62. package/lib/version2/notification/DesktopNotification/DesktopNotification.module.css +23 -2
  63. package/package.json +10 -18
@@ -1,16 +1,19 @@
1
1
  .container {
2
2
  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
3
3
  border-radius: 50%;
4
- box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
4
+ box-shadow: var(--zd_bs_plusicon_container);
5
5
  cursor: pointer;
6
6
  background-color: var(--zdt_plusicon_bg);
7
7
  }
8
+
8
9
  .plusIcon {
9
10
  border: 1px solid var(--zdt_plusicon_border);
10
11
  }
12
+
11
13
  .icon {
12
14
  color: var(--zdt_plusicon_text);
13
15
  }
16
+
14
17
  .plusIcon:hover {
15
18
  border-color: var(--zdt_plusicon_hover_border);
16
- }
19
+ }
@@ -8,6 +8,7 @@ exports["default"] = ToastMessage;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _defaultProps = require("./props/defaultProps");
10
10
  var _propTypes = require("./props/propTypes");
11
+ var _Common = require("@zohodesk/components/es/utils/Common");
11
12
  var _icons = require("@zohodesk/icons");
12
13
  var _Layout = require("@zohodesk/components/lib/Layout");
13
14
  var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
@@ -25,10 +26,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
25
26
  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; }
26
27
  function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
27
28
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
28
- function removeClose(e) {
29
- e && e.stopPropagation && e.stopPropagation();
30
- e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
31
- }
32
29
  function ToastMessageUI(props) {
33
30
  var _useState = (0, _react.useState)(props.messageState),
34
31
  _useState2 = _slicedToArray(_useState, 2),
@@ -69,7 +66,7 @@ function ToastMessageUI(props) {
69
66
  onClose && onClose();
70
67
  }
71
68
  function changeMessageState(e) {
72
- removeClose(e);
69
+ (0, _Common.cancelBubblingEffect)(e);
73
70
  setMessageState(!messageState);
74
71
  }
75
72
  var animateClass = isClose ? _ToastMessageModule["default"].rightanimate : _ToastMessageModule["default"].leftanimate;
@@ -3,7 +3,7 @@
3
3
  position: relative;
4
4
  max-height: 100%;
5
5
  border-radius: 5px;
6
- box-shadow: 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow);
6
+ box-shadow: var(--zd_bs_toastmessage_container);
7
7
  background-color: var(--zdt_toastmessage_default_bg);
8
8
  margin-bottom: var(--zd_size7);
9
9
  }[dir=ltr] .container {
@@ -149,6 +149,7 @@
149
149
  .alertleft {
150
150
  padding: var(--zd_size15) var(--zd_size25);
151
151
  }
152
+
152
153
  .alertico {
153
154
  min-width: var(--zd_size50);
154
155
  }
@@ -232,17 +233,17 @@
232
233
  background: var(--zdt_toastmessage_dropdown_bg);
233
234
  }
234
235
 
235
- .dropdown > i {
236
+ .dropdown>i {
236
237
  position: absolute;
237
238
  top: 50%;
238
239
  }
239
240
 
240
- [dir=ltr] .dropdown > i {
241
+ [dir=ltr] .dropdown>i {
241
242
  left: 50%;
242
243
  transform: translate(-50%, -50%);
243
244
  }
244
245
 
245
- [dir=rtl] .dropdown > i {
246
+ [dir=rtl] .dropdown>i {
246
247
  right: 50%;
247
248
  transform: translate(50%, -50%);
248
249
  }
@@ -260,7 +261,7 @@
260
261
  transition: padding var(--zd_transition3), height var(--zd_transition3);
261
262
  border-top: 1px solid var(--zdt_toastmessage_message_border);
262
263
  cursor: pointer;
263
- margin:0;
264
+ margin: 0;
264
265
  }
265
266
 
266
267
  [dir=ltr] .message {
@@ -325,4 +326,4 @@
325
326
 
326
327
  .primaryPlain {
327
328
  color: var(--zdt_toastmessage_primary_text);
328
- }
329
+ }
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports["default"] = AutoClose;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
+ var _Common = require("@zohodesk/components/es/utils/Common");
9
10
  var _defaultProps = require("./props/defaultProps");
10
11
  var _propTypes = require("./props/propTypes");
11
12
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -16,10 +17,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
16
17
  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; }
17
18
  function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
18
19
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
19
- function removeClose(e) {
20
- e && e.stopPropagation && e.stopPropagation();
21
- e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
22
- }
23
20
  function AutoClose(props) {
24
21
  var Element = props.Element,
25
22
  givenClose = props.isClose,
@@ -31,7 +28,7 @@ function AutoClose(props) {
31
28
  isClose = _useState2[0],
32
29
  setClose = _useState2[1];
33
30
  function onClose(e) {
34
- removeClose(e);
31
+ (0, _Common.cancelBubblingEffect)(e);
35
32
  onPortalClose && onPortalClose();
36
33
  }
37
34
  (0, _react.useEffect)(function () {
@@ -0,0 +1,38 @@
1
+ :root {
2
+ /* attachment viewer */
3
+ --zd_bs_attachmentviewer_selected: var(--zd_bs_contrast_outline, 0 0 4px 2px var(--zdt_attachmentviewer_selected_box_shadow) inset);
4
+
5
+ /* texteditor */
6
+ --zd_bs_texteditor_menu: var(--zd_bs_contrast_outline, -1px 1px 2px 0 var(--zdt_texteditor_menu_after_box_shadow));
7
+ --zd_bs_texteditor_ul: var(--zd_bs_contrast_outline, 0 1px 32px 0 var(--zdt_texteditor_dropdown_box_shadow));
8
+
9
+ /* subtab layout */
10
+ --zd_bs_subtablayout_shadow: var(--zd_bs_contrast_outline, 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow));
11
+
12
+ /* drawer */
13
+ --zd_bs_drawer_shadow: var(--zd_bs_contrast_outline, 0 6px 12px var(--zdt_drawer_default_box_shadow));
14
+
15
+ /* dot new */
16
+ --zd_bs_dotnew_shadow: var(--zd_bs_contrast_outline, 0 0 15px 1px var(--zdt_dotnew_default_box_shadow));
17
+
18
+ /* tag new */
19
+ --zd_bs_tagnew_shadow: var(--zd_bs_contrast_outline, 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow));
20
+
21
+ /* lookup section */
22
+ --zd_bs_lookupsection_shadow: var(--zd_bs_contrast_outline, 0px 4px 20px var(--zdt_lookupsection_box_shadow));
23
+
24
+ /* message */
25
+ --zd_bs_message_container: var(--zd_bs_contrast_outline, 0 0 19px 1px var(--zdt_message_default_box_shadow));
26
+
27
+ /* plus icon */
28
+ --zd_bs_plusicon_container: var(--zd_bs_contrast_outline, 0 2px 3px 0 var(--zdt_plusicon_box_shadow));
29
+
30
+ /* toast message */
31
+ --zd_bs_toastmessage_container: var(--zd_bs_contrast_outline, 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow));
32
+
33
+ /* global notification */
34
+ --zd_bs_globalnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--globalnotification_box_shadow));
35
+
36
+ /* desktop notification */
37
+ --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
38
+ }
@@ -0,0 +1,35 @@
1
+ [data-mode='default']:global(.zd-contrast) {
2
+ color: #000;
3
+ background: #fff;
4
+ border-color: #000;
5
+ }
6
+
7
+ [data-mode='dark']:global(.zd-contrast) {
8
+ color: #fff;
9
+ background-color: #101319;
10
+ border-color: #fff;
11
+ }
12
+
13
+ [data-mode='pureDark']:global(.zd-contrast) {
14
+ color: #fff;
15
+ background-color: #080808;
16
+ border-color: #fff;
17
+ }
18
+
19
+ :global(.zd-contrast) {
20
+ --zd_bs_contrast_outline: 0 0 2px var(--zdt_contrast_shadow);
21
+ --zd_bs_contrast_none: 0 0 0 transparent;
22
+ --zd_lightmode_grey_bg: -0%;
23
+ }
24
+
25
+ :global(.zd-contrast-level1) {
26
+ --zd_contrastLevel: 10;
27
+ }
28
+
29
+ :global(.zd-contrast-level2) {
30
+ --zd_contrastLevel: 20;
31
+ }
32
+
33
+ :global(.zd-contrast-level3) {
34
+ --zd_contrastLevel: 40;
35
+ }