@zohodesk/components 1.5.2 → 1.5.4-temp-1

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 +21 -0
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +2 -0
  3. package/assets/Appearance/light/mode/Component_LightMode.module.css +2 -0
  4. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +2 -0
  5. package/es/CheckBox/CheckBox.js +21 -10
  6. package/es/CheckBox/CheckBox.module.css +21 -6
  7. package/es/CheckBox/__tests__/CheckBox.spec.js +9 -0
  8. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +162 -93
  9. package/es/CheckBox/props/propTypes.js +4 -1
  10. package/es/DropBox/DropBoxElement/DropBoxElement.js +1 -1
  11. package/es/DropBox/utils/isMobilePopover.js +3 -14
  12. package/es/Label/Label.js +19 -1
  13. package/es/Label/__tests__/Label.spec.js +58 -0
  14. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +66 -0
  15. package/es/Label/props/defaultProps.js +1 -0
  16. package/es/Label/props/propTypes.js +7 -1
  17. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +7 -7
  18. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +7 -7
  19. package/es/Popup/Popup.js +32 -1045
  20. package/es/Radio/Radio.js +20 -9
  21. package/es/Radio/Radio.module.css +38 -5
  22. package/es/Radio/__tests__/Radio.spec.js +10 -0
  23. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +154 -81
  24. package/es/Radio/props/propTypes.js +4 -1
  25. package/es/Tag/Tag.js +5 -2
  26. package/es/Tag/props/propTypes.js +2 -0
  27. package/es/utils/Common.js +1 -1
  28. package/es/v1/Popup/Popup.js +2 -2
  29. package/lib/CheckBox/CheckBox.js +23 -9
  30. package/lib/CheckBox/CheckBox.module.css +21 -6
  31. package/lib/CheckBox/__tests__/CheckBox.spec.js +21 -12
  32. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +162 -93
  33. package/lib/CheckBox/props/propTypes.js +5 -1
  34. package/lib/DropBox/DropBoxElement/DropBoxElement.js +5 -5
  35. package/lib/DropBox/utils/isMobilePopover.js +4 -14
  36. package/lib/Label/Label.js +21 -1
  37. package/lib/Label/__tests__/Label.spec.js +58 -0
  38. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +66 -0
  39. package/lib/Label/props/defaultProps.js +1 -0
  40. package/lib/Label/props/propTypes.js +8 -1
  41. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +7 -7
  42. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +7 -7
  43. package/lib/Popup/Popup.js +36 -1149
  44. package/lib/Radio/Radio.js +22 -8
  45. package/lib/Radio/Radio.module.css +38 -5
  46. package/lib/Radio/__tests__/Radio.spec.js +10 -0
  47. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +154 -81
  48. package/lib/Radio/props/propTypes.js +5 -1
  49. package/lib/Tag/Tag.js +6 -2
  50. package/lib/Tag/props/propTypes.js +2 -0
  51. package/lib/utils/Common.js +1 -1
  52. package/lib/v1/Popup/Popup.js +4 -4
  53. package/package.json +9 -9
  54. package/es/DropBox/DropBoxPositionMapping.js +0 -142
  55. package/es/Popup/PositionMapping.js +0 -72
  56. package/es/Popup/Registry.js +0 -36
  57. package/es/Popup/intersectionObserver.js +0 -49
  58. package/es/Popup/viewPort.js +0 -373
  59. package/lib/DropBox/DropBoxPositionMapping.js +0 -149
  60. package/lib/Popup/PositionMapping.js +0 -81
  61. package/lib/Popup/Registry.js +0 -46
  62. package/lib/Popup/intersectionObserver.js +0 -72
  63. package/lib/Popup/viewPort.js +0 -367
@@ -7,12 +7,15 @@ exports.propTypes = void 0;
7
7
 
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
 
10
+ var _propTypes2 = require("../../Typography/props/propTypes");
11
+
10
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
13
 
12
14
  var propTypes = {
13
15
  active: _propTypes["default"].bool,
14
16
  checked: _propTypes["default"].bool,
15
17
  disabled: _propTypes["default"].bool,
18
+ secondaryText: _propTypes["default"].string,
16
19
  disabledTitle: _propTypes["default"].string,
17
20
  getRef: _propTypes["default"].func,
18
21
  id: _propTypes["default"].string,
@@ -33,7 +36,8 @@ var propTypes = {
33
36
  }),
34
37
  customProps: _propTypes["default"].exact({
35
38
  ContainerProps: _propTypes["default"].object,
36
- LabelProps: _propTypes["default"].object
39
+ LabelProps: _propTypes["default"].object,
40
+ secondaryTextProps: _propTypes["default"].exact(_propTypes2.propTypes)
37
41
  }),
38
42
  a11y: _propTypes["default"].shape({
39
43
  ariaChecked: _propTypes["default"].bool,
package/lib/Tag/Tag.js CHANGED
@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
13
13
 
14
14
  var _propTypes = require("./props/propTypes");
15
15
 
16
+ var _utils = require("@zohodesk/utils");
17
+
16
18
  var _icons = require("@zohodesk/icons");
17
19
 
18
20
  var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
@@ -141,6 +143,8 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
141
143
  a11y = _this$props4.a11y,
142
144
  needEffect = _this$props4.needEffect,
143
145
  isReadOnly = _this$props4.isReadOnly,
146
+ renderLeftChildren = _this$props4.renderLeftChildren,
147
+ renderRightChildren = _this$props4.renderRightChildren,
144
148
  customProps = _this$props4.customProps;
145
149
  var _customProps$avatarPr = customProps.avatarProps,
146
150
  avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr,
@@ -169,7 +173,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
169
173
  tabIndex: disabled ? '-1' : '0',
170
174
  "aria-labelledby": getAriaId,
171
175
  "data-selector-id": dataSelectorId
172
- }, customAttributes), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
176
+ }, customAttributes), (0, _utils.renderNode)(renderLeftChildren), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
173
177
  className: _TagModule["default"].avatar
174
178
  }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
175
179
  palette: isDarkPalette ? 'info' : avatarPalette,
@@ -202,7 +206,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
202
206
  isBold: true,
203
207
  name: "ZD-close2",
204
208
  size: "8"
205
- }))));
209
+ }))), (0, _utils.renderNode)(renderRightChildren));
206
210
  }
207
211
  }]);
208
212
 
@@ -47,6 +47,8 @@ var propTypes = {
47
47
  needEffect: _propTypes["default"].bool,
48
48
  isReadOnly: _propTypes["default"].bool,
49
49
  dataSelectorId: _propTypes["default"].string,
50
+ renderLeftChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
51
+ renderRightChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
50
52
  customProps: _propTypes["default"].shape({
51
53
  avatarProps: _propTypes["default"].exact(_propTypes2.propTypes),
52
54
  iconProps: _propTypes["default"].exact(_propTypes3.IconProps)
@@ -38,7 +38,7 @@ exports.stopAllEventPropagation = exports.scrollTo = void 0;
38
38
  exports.stopPropagation = stopPropagation;
39
39
  exports.throttle = void 0;
40
40
 
41
- var _viewPort = _interopRequireDefault(require("../Popup/viewPort"));
41
+ var _viewPort = _interopRequireDefault(require("@zohodesk/dotkit/es/react/components/Popup/utils/viewPort.js"));
42
42
 
43
43
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
44
44
 
@@ -15,9 +15,9 @@ var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-stat
15
15
 
16
16
  var _Common = require("../../utils/Common.js");
17
17
 
18
- var _viewPort = _interopRequireDefault(require("../../Popup/viewPort"));
18
+ var _viewPort = _interopRequireDefault(require("@zohodesk/dotkit/es/react/components/Popup/utils/viewPort.js"));
19
19
 
20
- var _PositionMapping = require("../../Popup/PositionMapping.js");
20
+ var _positioning = require("@zohodesk/dotkit/es/react/components/Popup/utils/positioning.js");
21
21
 
22
22
  var _ResizeObserver = _interopRequireDefault(require("@zohodesk/virtualizer/lib/commons/ResizeObserver.js"));
23
23
 
@@ -484,9 +484,9 @@ var Popup = function Popup(Component) {
484
484
  var customOrder = this.getCustomPositionOrder(this);
485
485
 
486
486
  if (direction === 'rtl') {
487
- defaultPosition = isAbsolute ? _PositionMapping.rtlAbsolutePositionMapping[defaultPosition] : _PositionMapping.rtlFixedPositionMapping[defaultPosition];
487
+ defaultPosition = isAbsolute ? _positioning.rtlAbsolutePositionMapping[defaultPosition] : _positioning.rtlFixedPositionMapping[defaultPosition];
488
488
  } else {
489
- defaultPosition = isAbsolute ? _PositionMapping.absolutePositionMapping[defaultPosition] : defaultPosition;
489
+ defaultPosition = isAbsolute ? _positioning.absolutePositionMapping[defaultPosition] : defaultPosition;
490
490
  }
491
491
 
492
492
  if (!placeHolderElement && !dropElement) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.5.2",
3
+ "version": "1.5.4-temp-1",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -80,12 +80,12 @@
80
80
  "@zohodesk-private/react-prop-validator": "1.2.3",
81
81
  "@zohodesk/a11y": "2.3.8",
82
82
  "@zohodesk/docstool": "1.0.0-alpha-2",
83
- "@zohodesk/dotkit": "1.0.3",
83
+ "@zohodesk/dotkit": "1.0.4",
84
84
  "@zohodesk/hooks": "2.0.6",
85
- "@zohodesk/icons": "1.1.3",
85
+ "@zohodesk/icons": "1.1.4",
86
86
  "@zohodesk/layout": "3.1.0",
87
- "@zohodesk/svg": "1.2.3",
88
- "@zohodesk/utils": "1.3.15",
87
+ "@zohodesk/svg": "1.2.5",
88
+ "@zohodesk/utils": "1.3.16",
89
89
  "@zohodesk/variables": "1.2.0",
90
90
  "@zohodesk/virtualizer": "1.0.13",
91
91
  "react-sortable-hoc": "^0.8.3",
@@ -100,17 +100,17 @@
100
100
  "selectn": "1.1.2"
101
101
  },
102
102
  "peerDependencies": {
103
- "@zohodesk/icons": "1.1.3",
103
+ "@zohodesk/icons": "1.1.4",
104
104
  "@zohodesk/variables": "1.2.0",
105
- "@zohodesk/svg": "1.2.3",
105
+ "@zohodesk/svg": "1.2.5",
106
106
  "@zohodesk/virtualizer": "1.0.13",
107
107
  "velocity-react": "1.4.3",
108
108
  "react-sortable-hoc": "^0.8.3",
109
109
  "@zohodesk/hooks": "2.0.6",
110
- "@zohodesk/utils": "1.3.15",
110
+ "@zohodesk/utils": "1.3.16",
111
111
  "@zohodesk/a11y": "2.3.8",
112
112
  "@zohodesk/layout": "3.1.0",
113
- "@zohodesk/dotkit": "1.0.3",
113
+ "@zohodesk/dotkit": "1.0.4",
114
114
  "color": "4.2.3"
115
115
  }
116
116
  }
@@ -1,142 +0,0 @@
1
- export const positionMapping = {
2
- "bottomCenter": {
3
- "direction": "bottom",
4
- "arrowPosition": "mid",
5
- "positionStyle": "bottomMid"
6
- },
7
- "bottomLeftToRight": {
8
- "direction": "bottom",
9
- "arrowPosition": "start",
10
- "positionStyle": "bottomEnd"
11
- },
12
- "bottomCenterToRight": {
13
- "direction": "bottom",
14
- "arrowPosition": "start",
15
- "positionStyle": "bottomEnd"
16
- },
17
- "bottomRightToLeft": {
18
- "direction": "bottom",
19
- "arrowPosition": "end",
20
- "positionStyle": "bottomStart"
21
- },
22
- "bottomCenterToLeft": {
23
- "direction": "bottom",
24
- "arrowPosition": "end",
25
- "positionStyle": "bottomStart"
26
- },
27
- "topCenter": {
28
- "direction": "top",
29
- "arrowPosition": "mid",
30
- "positionStyle": "topMid"
31
- },
32
- "topLeftToRight": {
33
- "direction": "top",
34
- "arrowPosition": "start",
35
- "positionStyle": "topEnd"
36
- },
37
- "topCenterToRight": {
38
- "direction": "top",
39
- "arrowPosition": "start",
40
- "positionStyle": "topEnd"
41
- },
42
- "topRightToLeft": {
43
- "direction": "top",
44
- "arrowPosition": "end",
45
- "positionStyle": "topStart"
46
- },
47
- "topCenterToLeft": {
48
- "direction": "top",
49
- "arrowPosition": "end",
50
- "positionStyle": "topStart"
51
- },
52
- "rightCenter": {
53
- "direction": "right",
54
- "arrowPosition": "mid",
55
- "positionStyle": "rightMid"
56
- },
57
- "rightTopToBottom": {
58
- "direction": "right",
59
- "arrowPosition": "start",
60
- "positionStyle": "rightEnd"
61
- },
62
- "rightCenterToBottom": {
63
- "direction": "right",
64
- "arrowPosition": "start",
65
- "positionStyle": "rightEnd"
66
- },
67
- "rightBottomToTop": {
68
- "direction": "right",
69
- "arrowPosition": "end",
70
- "positionStyle": "rightStart"
71
- },
72
- "rightCenterToTop": {
73
- "direction": "right",
74
- "arrowPosition": "end",
75
- "positionStyle": "rightStart"
76
- },
77
- "leftCenter": {
78
- "direction": "left",
79
- "arrowPosition": "mid",
80
- "positionStyle": "leftMid"
81
- },
82
- "leftTopToBottom": {
83
- "direction": "left",
84
- "arrowPosition": "start",
85
- "positionStyle": "leftEnd"
86
- },
87
- "leftCenterToBottom": {
88
- "direction": "left",
89
- "arrowPosition": "start",
90
- "positionStyle": "leftEnd"
91
- },
92
- "leftBottomToTop": {
93
- "direction": "left",
94
- "arrowPosition": "end",
95
- "positionStyle": "leftStart"
96
- },
97
- "leftCenterToTop": {
98
- "direction": "left",
99
- "arrowPosition": "end",
100
- "positionStyle": "leftStart"
101
- },
102
- "bottomRight": {
103
- "direction": "bottom",
104
- "arrowPosition": "start",
105
- "positionStyle": "bottomEnd"
106
- },
107
- "bottomLeft": {
108
- "direction": "bottom",
109
- "arrowPosition": "end",
110
- "positionStyle": "bottomStart"
111
- },
112
- "topRight": {
113
- "direction": "top",
114
- "arrowPosition": "start",
115
- "positionStyle": "topEnd"
116
- },
117
- "topLeft": {
118
- "direction": "top",
119
- "arrowPosition": "end",
120
- "positionStyle": "topStart"
121
- },
122
- "rightBottom": {
123
- "direction": "right",
124
- "arrowPosition": "start",
125
- "positionStyle": "rightEnd"
126
- },
127
- "rightTop": {
128
- "direction": "right",
129
- "arrowPosition": "end",
130
- "positionStyle": "rightStart"
131
- },
132
- "leftBottom": {
133
- "direction": "left",
134
- "arrowPosition": "start",
135
- "positionStyle": "leftEnd"
136
- },
137
- "leftTop": {
138
- "direction": "left",
139
- "arrowPosition": "end",
140
- "positionStyle": "leftStart"
141
- }
142
- };
@@ -1,72 +0,0 @@
1
- export const absolutePositionMapping = {
2
- "bottomCenter": "bottomCenter",
3
- "bottomRight": "bottomLeftToRight",
4
- "bottomLeft": "bottomRightToLeft",
5
- "topCenter": "topCenter",
6
- "topRight": "topLeftToRight",
7
- "topLeft": "topRightToLeft",
8
- "rightCenter": "rightCenter",
9
- "rightBottom": "rightTopToBottom",
10
- "rightTop": "rightBottomToTop",
11
- "leftCenter": "leftCenter",
12
- "leftBottom": "leftTopToBottom",
13
- "leftTop": "leftBottomToTop",
14
- "bottomLeftToRight": "bottomLeftToRight",
15
- "bottomRightToLeft": "bottomRightToLeft",
16
- "topLeftToRight": "topLeftToRight",
17
- "topRightToLeft": "topRightToLeft",
18
- "rightTopToBottom": "rightTopToBottom",
19
- "rightBottomToTop": "rightBottomToTop",
20
- "leftTopToBottom": "leftTopToBottom"
21
- };
22
- export const rtlAbsolutePositionMapping = {
23
- "bottomCenter": "bottomCenter",
24
- "bottomRight": "bottomRightToLeft",
25
- "bottomLeft": "bottomLeftToRight",
26
- "topCenter": "topCenter",
27
- "topRight": "topRightToLeft",
28
- "topLeft": "topLeftToRight",
29
- "rightCenter": "leftCenter",
30
- "rightBottom": "leftTopToBottom",
31
- "rightTop": "leftBottomToTop",
32
- "leftCenter": "rightCenter",
33
- "leftBottom": "rightTopToBottom",
34
- "leftTop": "rightBottomToTop",
35
- "bottomLeftToRight": "bottomLeftToRight",
36
- "bottomRightToLeft": "bottomRightToLeft",
37
- "topLeftToRight": "topLeftToRight",
38
- "topRightToLeft": "topRightToLeft",
39
- "rightTopToBottom": "rightTopToBottom",
40
- "rightBottomToTop": "rightBottomToTop",
41
- "leftTopToBottom": "leftTopToBottom"
42
- };
43
- export const rtlFixedPositionMapping = {
44
- "bottomCenter": "bottomCenter",
45
- "bottomLeftToRight": "bottomRightToLeft",
46
- "bottomCenterToRight": "bottomCenterToLeft",
47
- "bottomRightToLeft": "bottomLeftToRight",
48
- "bottomCenterToLeft": "bottomCenterToRight",
49
- "topCenter": "topCenter",
50
- "topLeftToRight": "topRightToLeft",
51
- "topCenterToRight": "topCenterToLeft",
52
- "topRightToLeft": "topLeftToRight",
53
- "topCenterToLeft": "topCenterToRight",
54
- "rightTopToBottom": "leftTopToBottom",
55
- "rightCenterToBottom": "leftCenterToBottom",
56
- "rightCenter": "leftCenter",
57
- "rightBottomToTop": "leftBottomToTop",
58
- "rightCenterToTop": "leftCenterToTop",
59
- "leftTopToBottom": "rightTopToBottom",
60
- "leftCenterToBottom": "rightCenterToBottom",
61
- "leftCenter": "rightCenter",
62
- "leftBottomToTop": "rightBottomToTop",
63
- "leftCenterToTop": "rightCenterToTop",
64
- "bottomRight": "bottomLeft",
65
- "bottomLeft": "bottomRight",
66
- "topRight": "topLeft",
67
- "topLeft": "topRight",
68
- "rightBottom": "leftBottom",
69
- "rightTop": "leftTop",
70
- "leftBottom": "rightBottom",
71
- "leftTop": "rightTop"
72
- };
@@ -1,36 +0,0 @@
1
- import { getLibraryConfig } from "../Provider/Config.js";
2
- const Registry = {
3
- lastOpenedGroup: [],
4
- popups: {},
5
- listenerPopupRef: undefined,
6
- scrollBlockedListenerPopupRef: undefined,
7
- scrollableListenerPopupRef: undefined,
8
-
9
- getOpenedPopups() {
10
- return Object.values(Registry.popups).flat().filter(popup => popup.state.isPopupOpen);
11
- },
12
-
13
- getOpenedScrollBlockedFixedPopups() {
14
- return Registry.getOpenedPopups().filter(popup => popup.getIsOutsideScrollBlocked(popup) && !popup.getIsAbsolutePopup(popup));
15
- },
16
-
17
- getOpenedScrollableFixedPopups() {
18
- return Registry.getOpenedPopups().filter(popup => !popup.getIsOutsideScrollBlocked(popup) && !popup.getIsAbsolutePopup(popup));
19
- },
20
-
21
- getRootElement() {
22
- const getRootElement = getLibraryConfig('getRootElement');
23
-
24
- if (getRootElement && typeof getRootElement === 'function') {
25
- const parent = getRootElement();
26
-
27
- if (parent) {
28
- return parent;
29
- }
30
- }
31
-
32
- return document;
33
- }
34
-
35
- };
36
- export default Registry;
@@ -1,49 +0,0 @@
1
- let observerCallbacks = null;
2
- let intersectionObserver = null;
3
-
4
- function handleObserverCallbacks(entries) {
5
- entries.forEach(entry => {
6
- let oldCallbacks = observerCallbacks.get(entry.target);
7
-
8
- if (Array.isArray(oldCallbacks) && oldCallbacks.length) {
9
- oldCallbacks.forEach(callback => {
10
- callback && callback(entry);
11
- });
12
- }
13
- });
14
- }
15
-
16
- export function addIntersectionObserver(element, callback, options) {
17
- if (!!element && typeof callback == 'function') {
18
- if (intersectionObserver === null && observerCallbacks === null) {
19
- intersectionObserver = new IntersectionObserver(entries => {
20
- handleObserverCallbacks(entries);
21
- }, options);
22
- observerCallbacks = new Map();
23
- }
24
-
25
- intersectionObserver.observe(element);
26
- let oldCallbacks = observerCallbacks.get(element) || [];
27
- observerCallbacks.set(element, [...oldCallbacks, callback]);
28
- }
29
- }
30
- export function removeIntersectionObserver(element, callback) {
31
- if (!!element && typeof callback == 'function') {
32
- let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : null;
33
-
34
- if (Array.isArray(oldCallbacks)) {
35
- let callbacks = oldCallbacks.filter(handler => handler !== callback);
36
-
37
- if (intersectionObserver && callbacks.length === 0) {
38
- observerCallbacks.delete(element);
39
- intersectionObserver.unobserve(element);
40
- }
41
- }
42
-
43
- if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
44
- intersectionObserver.disconnect();
45
- intersectionObserver = null;
46
- observerCallbacks = null;
47
- }
48
- }
49
- }