@zohodesk/components 1.2.28 → 1.2.30

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 (172) hide show
  1. package/.cli/PropLessFiles.html +1 -1
  2. package/.cli/propValidation_report.html +1 -1
  3. package/README.md +8 -0
  4. package/es/AppContainer/AppContainer.js +10 -9
  5. package/es/Avatar/Avatar.js +4 -5
  6. package/es/Avatar/Avatar.module.css +0 -12
  7. package/es/AvatarTeam/AvatarTeam.js +7 -7
  8. package/es/AvatarTeam/AvatarTeam.module.css +0 -4
  9. package/es/Button/Button.js +5 -6
  10. package/es/Button/css/Button.module.css +0 -6
  11. package/es/Buttongroup/Buttongroup.module.css +0 -2
  12. package/es/CheckBox/CheckBox.js +8 -8
  13. package/es/CheckBox/CheckBox.module.css +0 -2
  14. package/es/DateTime/DateTime.module.css +0 -1
  15. package/es/DropBox/DropBox.js +10 -11
  16. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +0 -7
  17. package/es/DropBox/css/DropBox.module.css +0 -1
  18. package/es/DropDown/DropDown.js +2 -1
  19. package/es/DropDown/DropDownHeading.module.css +0 -6
  20. package/es/DropDown/DropDownItem.module.css +0 -3
  21. package/es/Label/Label.module.css +0 -1
  22. package/es/ListItem/ListContainer.js +6 -5
  23. package/es/ListItem/ListItem.js +4 -5
  24. package/es/ListItem/ListItem.module.css +0 -21
  25. package/es/ListItem/ListItemWithAvatar.js +4 -5
  26. package/es/ListItem/ListItemWithCheckBox.js +4 -5
  27. package/es/ListItem/ListItemWithIcon.js +4 -5
  28. package/es/ListItem/ListItemWithRadio.js +4 -5
  29. package/es/Modal/Modal.js +4 -5
  30. package/es/MultiSelect/AdvancedMultiSelect.js +8 -9
  31. package/es/MultiSelect/MultiSelectWithAvatar.js +4 -5
  32. package/es/MultiSelect/SelectedOptions.js +6 -8
  33. package/es/MultiSelect/Suggestions.js +6 -8
  34. package/es/MultiSelect/props/defaultProps.js +4 -2
  35. package/es/PopOver/PopOver.module.css +3 -3
  36. package/es/Popup/Popup.js +3 -4
  37. package/es/Radio/Radio.js +8 -8
  38. package/es/Radio/Radio.module.css +0 -1
  39. package/es/ResponsiveDropBox/ResponsiveDropBox.js +2 -4
  40. package/es/Ribbon/Ribbon.module.css +0 -4
  41. package/es/Select/Select.js +4 -5
  42. package/es/Switch/Switch.js +8 -8
  43. package/es/Switch/Switch.module.css +0 -2
  44. package/es/Tab/Tab.js +4 -5
  45. package/es/Tab/TabContentWrapper.js +4 -5
  46. package/es/Tab/TabWrapper.js +2 -4
  47. package/es/Tab/Tabs.js +16 -16
  48. package/es/Tag/Tag.module.css +0 -6
  49. package/es/TextBox/TextBox.js +5 -5
  50. package/es/TextBox/TextBox.module.css +1 -21
  51. package/es/TextBoxIcon/TextBoxIcon.js +2 -4
  52. package/es/TextBoxIcon/TextBoxIcon.module.css +0 -5
  53. package/es/Textarea/Textarea.js +4 -6
  54. package/es/Textarea/Textarea.module.css +0 -6
  55. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +4 -5
  56. package/es/common/customscroll.module.css +27 -3
  57. package/es/deprecated/PortalLayer/PortalLayer.js +8 -6
  58. package/es/v1/Animation/Animation.js +1 -1
  59. package/es/v1/AppContainer/AppContainer.js +10 -9
  60. package/es/v1/Avatar/Avatar.js +4 -5
  61. package/es/v1/AvatarTeam/AvatarTeam.js +7 -7
  62. package/es/v1/Button/Button.js +5 -6
  63. package/es/v1/Card/Card.js +1 -1
  64. package/es/v1/CheckBox/CheckBox.js +9 -9
  65. package/es/v1/DropBox/DropBox.js +10 -11
  66. package/es/v1/DropBox/utils/isMobilePopover.js +1 -1
  67. package/es/v1/DropDown/DropDown.js +2 -1
  68. package/es/v1/ListItem/ListContainer.js +7 -6
  69. package/es/v1/ListItem/ListItem.js +4 -5
  70. package/es/v1/ListItem/ListItemWithAvatar.js +4 -5
  71. package/es/v1/ListItem/ListItemWithCheckBox.js +4 -5
  72. package/es/v1/ListItem/ListItemWithIcon.js +4 -5
  73. package/es/v1/ListItem/ListItemWithRadio.js +4 -5
  74. package/es/v1/Modal/Modal.js +4 -5
  75. package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js +1 -1
  76. package/es/v1/MultiSelect/AdvancedMultiSelect.js +9 -10
  77. package/es/v1/MultiSelect/MultiSelectWithAvatar.js +5 -6
  78. package/es/v1/MultiSelect/SelectedOptions.js +6 -8
  79. package/es/v1/MultiSelect/Suggestions.js +6 -8
  80. package/es/v1/MultiSelect/props/defaultProps.js +5 -3
  81. package/es/v1/Popup/Popup.js +3 -4
  82. package/es/v1/Radio/Radio.js +8 -8
  83. package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js +3 -5
  84. package/es/v1/Select/GroupSelect.js +1 -1
  85. package/es/v1/Select/Select.js +5 -6
  86. package/es/v1/Select/SelectWithAvatar.js +1 -1
  87. package/es/v1/Select/SelectWithIcon.js +1 -1
  88. package/es/v1/Select/props/defaultProps.js +1 -1
  89. package/es/v1/Switch/Switch.js +8 -8
  90. package/es/v1/Tab/Tab.js +4 -5
  91. package/es/v1/Tab/TabContentWrapper.js +4 -5
  92. package/es/v1/Tab/TabWrapper.js +2 -4
  93. package/es/v1/Tab/Tabs.js +18 -18
  94. package/es/v1/TextBox/TextBox.js +5 -5
  95. package/es/v1/TextBoxIcon/TextBoxIcon.js +2 -4
  96. package/es/v1/Textarea/Textarea.js +4 -6
  97. package/es/v1/Tooltip/Tooltip.js +1 -1
  98. package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +4 -5
  99. package/lib/Avatar/Avatar.module.css +0 -12
  100. package/lib/AvatarTeam/AvatarTeam.module.css +0 -4
  101. package/lib/Button/css/Button.module.css +0 -6
  102. package/lib/Buttongroup/Buttongroup.module.css +0 -2
  103. package/lib/CheckBox/CheckBox.module.css +0 -2
  104. package/lib/DateTime/DateTime.module.css +0 -1
  105. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +0 -7
  106. package/lib/DropBox/css/DropBox.module.css +0 -1
  107. package/lib/DropDown/DropDownHeading.module.css +0 -6
  108. package/lib/DropDown/DropDownItem.module.css +0 -3
  109. package/lib/Label/Label.module.css +0 -1
  110. package/lib/ListItem/ListItem.module.css +0 -21
  111. package/lib/MultiSelect/props/defaultProps.js +4 -2
  112. package/lib/PopOver/PopOver.module.css +3 -3
  113. package/lib/Radio/Radio.module.css +0 -1
  114. package/lib/Ribbon/Ribbon.module.css +0 -4
  115. package/lib/Switch/Switch.module.css +0 -2
  116. package/lib/Tag/Tag.module.css +0 -6
  117. package/lib/TextBox/TextBox.module.css +1 -21
  118. package/lib/TextBoxIcon/TextBoxIcon.module.css +0 -5
  119. package/lib/Textarea/Textarea.module.css +0 -6
  120. package/lib/common/customscroll.module.css +27 -3
  121. package/lib/v1/Animation/Animation.js +1 -1
  122. package/lib/v1/Card/Card.js +1 -1
  123. package/lib/v1/CheckBox/CheckBox.js +1 -1
  124. package/lib/v1/DropBox/utils/isMobilePopover.js +1 -1
  125. package/lib/v1/ListItem/ListContainer.js +1 -1
  126. package/lib/v1/MultiSelect/AdvancedGroupMultiSelect.js +1 -1
  127. package/lib/v1/MultiSelect/AdvancedMultiSelect.js +1 -1
  128. package/lib/v1/MultiSelect/props/defaultProps.js +5 -3
  129. package/lib/v1/ResponsiveDropBox/ResponsiveDropBox.js +1 -1
  130. package/lib/v1/Select/GroupSelect.js +1 -1
  131. package/lib/v1/Select/Select.js +1 -1
  132. package/lib/v1/Select/SelectWithAvatar.js +1 -1
  133. package/lib/v1/Select/SelectWithIcon.js +1 -1
  134. package/lib/v1/Select/props/defaultProps.js +1 -1
  135. package/lib/v1/Tab/Tabs.js +2 -2
  136. package/lib/v1/Tooltip/Tooltip.js +1 -1
  137. package/package.json +10 -10
  138. package/result.json +1 -1
  139. package/es/v1/Provider/AvatarSize.js +0 -13
  140. package/es/v1/Provider/Config.js +0 -18
  141. package/es/v1/Provider/CssProvider.js +0 -16
  142. package/es/v1/Provider/IdProvider.js +0 -66
  143. package/es/v1/Provider/LibraryContext.js +0 -37
  144. package/es/v1/Provider/LibraryContextInit.js +0 -3
  145. package/es/v1/Provider/NumberGenerator/NumberGenerator.js +0 -136
  146. package/es/v1/Provider/ZindexProvider.js +0 -57
  147. package/es/v1/Provider/index.js +0 -4
  148. package/es/v1/Responsive/CustomResponsive.js +0 -195
  149. package/es/v1/Responsive/RefWrapper.js +0 -39
  150. package/es/v1/Responsive/ResizeComponent.js +0 -197
  151. package/es/v1/Responsive/ResizeObserver.js +0 -140
  152. package/es/v1/Responsive/Responsive.js +0 -194
  153. package/es/v1/Responsive/index.js +0 -9
  154. package/es/v1/Responsive/props/defaultProps.js +0 -13
  155. package/es/v1/Responsive/props/propTypes.js +0 -25
  156. package/lib/v1/Provider/AvatarSize.js +0 -24
  157. package/lib/v1/Provider/Config.js +0 -27
  158. package/lib/v1/Provider/CssProvider.js +0 -27
  159. package/lib/v1/Provider/IdProvider.js +0 -79
  160. package/lib/v1/Provider/LibraryContext.js +0 -76
  161. package/lib/v1/Provider/LibraryContextInit.js +0 -15
  162. package/lib/v1/Provider/NumberGenerator/NumberGenerator.js +0 -174
  163. package/lib/v1/Provider/ZindexProvider.js +0 -69
  164. package/lib/v1/Provider/index.js +0 -81
  165. package/lib/v1/Responsive/CustomResponsive.js +0 -242
  166. package/lib/v1/Responsive/RefWrapper.js +0 -57
  167. package/lib/v1/Responsive/ResizeComponent.js +0 -268
  168. package/lib/v1/Responsive/ResizeObserver.js +0 -168
  169. package/lib/v1/Responsive/Responsive.js +0 -274
  170. package/lib/v1/Responsive/index.js +0 -55
  171. package/lib/v1/Responsive/props/defaultProps.js +0 -23
  172. package/lib/v1/Responsive/props/propTypes.js +0 -39
@@ -34,13 +34,10 @@
34
34
  composes: dInflex alignVertical flexrow from '../common/common.module.css';
35
35
  position: relative;
36
36
  vertical-align: middle;
37
- /* css:theme-validation:ignore */
38
37
  color: var(--tag_text_color);
39
- /* css:theme-validation:ignore */
40
38
  font-size: var(--tag_font_size);
41
39
  letter-spacing: var(--tag_letter_spacing);
42
40
  height: var(--tag_height);
43
- /* css:theme-validation:ignore */
44
41
  max-width: 100% ;
45
42
  background-color: var(--tag_bg_color);
46
43
  border-radius: var(--tag_border_radius);
@@ -125,13 +122,11 @@
125
122
  display: block;
126
123
  }
127
124
  .close {
128
- /* css:theme-validation:ignore */
129
125
  color: var(--tag_closeicon_color);
130
126
  display: none;
131
127
  position: absolute;
132
128
  top: 0 ;
133
129
  bottom: 0 ;
134
- /* css:theme-validation:ignore */
135
130
  padding: var(--tag_closeicon_padding);
136
131
  cursor: var(--tag_closeicon_cursor);
137
132
  border-radius: var(--tag_closeicon_border_radius);
@@ -229,7 +224,6 @@
229
224
  }
230
225
 
231
226
  .icon {
232
- /* css:theme-validation:ignore */
233
227
  margin: var(--tag_icon_margin);
234
228
  background-color: var(--tag_icon_bg_color);
235
229
  }
@@ -1,5 +1,3 @@
1
- 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); }
2
-
3
1
  import React from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -139,7 +137,7 @@ export default class TextBox extends React.PureComponent {
139
137
 
140
138
  let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.border : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isFocus ? style.focus : ''}` : `${style.basic}`;
141
139
  value = value === null || value === undefined ? '' : value;
142
- return /*#__PURE__*/React.createElement("input", _extends({
140
+ return /*#__PURE__*/React.createElement("input", {
143
141
  "aria-label": ariaLabel,
144
142
  "aria-invalid": ariaInvalid,
145
143
  "aria-autocomplete": ariaAutocomplete,
@@ -173,8 +171,10 @@ export default class TextBox extends React.PureComponent {
173
171
  value: value,
174
172
  onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : '',
175
173
  onKeyPress: onKeyPress,
176
- onMouseDown: onMouseDown
177
- }, options, customProps));
174
+ onMouseDown: onMouseDown,
175
+ ...options,
176
+ ...customProps
177
+ });
178
178
  }
179
179
 
180
180
  }
@@ -32,36 +32,30 @@
32
32
  }
33
33
 
34
34
  .basic::placeholder {
35
- /* css:theme-validation:ignore */
36
35
  color: var(--textbox_placeholder_text_color);
37
36
  }
38
37
 
39
38
  .basic::-webkit-placeholder {
40
- /* css:theme-validation:ignore */
41
39
  color: var(--textbox_placeholder_text_color);
42
40
  }
43
41
 
44
42
  .basic::-moz-placeholder {
45
- /* css:theme-validation:ignore */
46
43
  color: var(--textbox_placeholder_text_color);
47
44
  }
48
45
 
49
46
  .basic::-ms-placeholder {
50
- /* css:theme-validation:ignore */
51
47
  color: var(--textbox_placeholder_text_color);
52
48
  }
49
+
53
50
  /* css:lineheight-validation:ignore */
54
51
  .container {
55
52
  composes: basic;
56
- /* css:theme-validation:ignore */
57
53
  transition: border var(--zd_transition2) linear 0s;
58
54
  -moz-transition: border var(--zd_transition2) linear 0s;
59
55
  width: var(--textbox_width);
60
- /* css:theme-validation:ignore */
61
56
  color: var(--textbox_text_color);
62
57
  font-size: var(--textbox_font_size);
63
58
  height: var(--textbox_height);
64
- /* css:theme-validation:ignore */
65
59
  line-height: var(--textbox_line_height);
66
60
  background-color: var(--textbox_bg_color);
67
61
  -webkit-transition: border var(--zd_transition2) linear 0s;
@@ -85,22 +79,18 @@
85
79
  }
86
80
 
87
81
  .container::placeholder {
88
- /* css:theme-validation:ignore */
89
82
  color: var(--textbox_placeholder_text_color);
90
83
  }
91
84
 
92
85
  .container::-webkit-placeholder {
93
- /* css:theme-validation:ignore */
94
86
  color: var(--textbox_placeholder_text_color);
95
87
  }
96
88
 
97
89
  .container::-moz-placeholder {
98
- /* css:theme-validation:ignore */
99
90
  color: var(--textbox_placeholder_text_color);
100
91
  }
101
92
 
102
93
  .container::-ms-placeholder {
103
- /* css:theme-validation:ignore */
104
94
  color: var(--textbox_placeholder_text_color);
105
95
  }
106
96
 
@@ -114,11 +104,6 @@
114
104
  border-style: var(--textbox_border_style);
115
105
  }
116
106
 
117
- .effect:hover,
118
- .effect:focus {
119
- /* css:theme-validation:ignore */
120
- }
121
-
122
107
  .effect:hover, .effect:focus {
123
108
  border-color: var(--textbox_border_color);
124
109
  }
@@ -127,11 +112,6 @@
127
112
  --textbox_border_width: 0 0 1px 0;
128
113
  }
129
114
 
130
- .borderColor_transparent,
131
- .borderColor_default {
132
- /* css:theme-validation:ignore */
133
- }
134
-
135
115
  .borderColor_transparent, .borderColor_default {
136
116
  border-color: var(--textbox_border_color);
137
117
  }
@@ -1,5 +1,3 @@
1
- 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); }
2
-
3
1
  import React from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -127,7 +125,7 @@ export default class TextBoxIcon extends React.Component {
127
125
  "data-title": isDisabled ? title : null
128
126
  }, /*#__PURE__*/React.createElement(Box, {
129
127
  flexible: true
130
- }, /*#__PURE__*/React.createElement(TextBox, _extends({}, this.props, {
128
+ }, /*#__PURE__*/React.createElement(TextBox, { ...this.props,
131
129
  dataId: dataId,
132
130
  size: size,
133
131
  variant: variant,
@@ -155,7 +153,7 @@ export default class TextBoxIcon extends React.Component {
155
153
  isScrollPrevent: isScrollPrevent,
156
154
  customClass: customTextBox,
157
155
  customProps: TextBoxProps
158
- }))), /*#__PURE__*/React.createElement(Box, {
156
+ })), /*#__PURE__*/React.createElement(Box, {
159
157
  className: `${style.iconContainer} ${customTBoxIcon}`
160
158
  }, /*#__PURE__*/React.createElement(Container, {
161
159
  alignBox: "row"
@@ -24,7 +24,6 @@
24
24
  cursor: var(--textboxicon_icon_cursor);
25
25
  }
26
26
  .iconContainer {
27
- /* css:theme-validation:ignore */
28
27
  color: var(--textboxicon_icon_color);
29
28
  }
30
29
  .effect:hover .iconContainer,
@@ -51,10 +50,6 @@
51
50
  right: 0 ;
52
51
  left: 0 ;
53
52
  }
54
- .line,
55
- .borderColor_default {
56
- /* css:theme-validation:ignore */
57
- }
58
53
  .line, .borderColor_default {
59
54
  background-color: var(--textboxicon_line_color);
60
55
  }
@@ -1,5 +1,3 @@
1
- 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); }
2
-
3
1
  import React from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -87,12 +85,12 @@ export default class Textarea extends React.Component {
87
85
  }
88
86
 
89
87
  let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]} ${animated ? `${style[`${size}animated`]}` : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
90
- return /*#__PURE__*/React.createElement("textarea", _extends({
88
+ return /*#__PURE__*/React.createElement("textarea", {
91
89
  "aria-label": ariaLabel,
92
90
  "aria-labelledby": ariaLabelledby,
93
91
  className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
94
- placeholder: placeHolder
95
- }, options, {
92
+ placeholder: placeHolder,
93
+ ...options,
96
94
  "data-id": dataId,
97
95
  "data-test-id": dataId,
98
96
  maxLength: maxLength,
@@ -104,7 +102,7 @@ export default class Textarea extends React.Component {
104
102
  value: text,
105
103
  id: htmlId,
106
104
  "data-selector-id": dataSelectorId
107
- }));
105
+ });
108
106
  }
109
107
 
110
108
  }
@@ -19,7 +19,6 @@
19
19
  appearance: none;
20
20
  outline: 0;
21
21
  letter-spacing: 0.1px;
22
- /* css:theme-validation:ignore */
23
22
  color: var(--textarea_text_color);
24
23
  cursor: var(--textarea_cursor);
25
24
  }
@@ -27,19 +26,15 @@
27
26
  border-width: var(--textarea_border_width);
28
27
  }
29
28
  .basic::placeholder {
30
- /* css:theme-validation:ignore */
31
29
  color: var(--textarea_placeholder_text_color);
32
30
  }
33
31
  .basic::-webkit-placeholder {
34
- /* css:theme-validation:ignore */
35
32
  color: var(--textarea_placeholder_text_color);
36
33
  }
37
34
  .basic::-moz-placeholder {
38
- /* css:theme-validation:ignore */
39
35
  color: var(--textarea_placeholder_text_color);
40
36
  }
41
37
  .basic::-ms-placeholder {
42
- /* css:theme-validation:ignore */
43
38
  color: var(--textarea_placeholder_text_color);
44
39
  }
45
40
  .basic:disabled {
@@ -73,7 +68,6 @@
73
68
  min-width: var(--zd_size100) ;
74
69
  font-size: var(--textarea_font_size);
75
70
  line-height: var(--textarea_line_height);
76
- /* css:theme-validation:ignore */
77
71
  height: var(--textarea_height);
78
72
  -webkit-transition: border var(--zd_transition2) linear 0s,
79
73
  height var(--zd_transition2) linear 0s;
@@ -1,5 +1,3 @@
1
- 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); }
2
-
3
1
  import React from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -86,14 +84,15 @@ export default class VelocityAnimationGroup extends React.Component {
86
84
  delay: exitDelay ? exitDelay : 0,
87
85
  display: 'none'
88
86
  };
89
- return /*#__PURE__*/React.createElement(VelocityTransitionGroup, _extends({
87
+ return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
90
88
  enter: enterAnimation,
91
89
  leave: exitAnimation,
92
90
  component: component && component,
93
91
  runOnMount: runOnMount,
94
92
  enterHideStyle: enterHideStyle,
95
- enterShowStyle: enterShowStyle
96
- }, childProps), isActive ? children : null);
93
+ enterShowStyle: enterShowStyle,
94
+ ...childProps
95
+ }, isActive ? children : null);
97
96
  }
98
97
 
99
98
  }
@@ -9,6 +9,7 @@
9
9
  --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_hover_bg);
10
10
  --zd-scroll-border: var(--zdt_customscroll_border);
11
11
  }
12
+
12
13
  .scroll[data-scroll-palette='dark'],
13
14
  .scroll [data-scroll-palette='dark'] {
14
15
  --zd-scroll-bg: var(--zdt_customscroll_dark_bg);
@@ -16,92 +17,114 @@
16
17
  --zd-scroll-thump-hoverbg: var(--zdt_customscroll_thump_dark_hover_bg);
17
18
  --zd-scroll-border: var(--zdt_customscroll_dark_border);
18
19
  }
20
+
19
21
  .scroll,
20
22
  .scroll * {
23
+ /* css:theme-validation:ignore */
21
24
  scrollbar-color: var(--zd-scroll-thump) var(--zd-scroll-bg);
22
25
  scrollbar-width: thin;
26
+ /* css:theme-validation:ignore */
23
27
  -ms-scrollbar-highlight-color: var(--zd-scroll-bg);
28
+ /* css:theme-validation:ignore */
24
29
  -ms-scrollbar-face-color: var(--zd-scroll-thump);
25
30
  }
31
+
26
32
  .scroll::-webkit-scrollbar,
27
33
  .scroll ::-webkit-scrollbar {
28
34
  /* css:theme-validation:ignore */
29
35
  }
36
+
30
37
  .scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
31
38
  background: var(--zd-scroll-corner-bg);
32
39
  }
40
+
33
41
  .scroll::-webkit-scrollbar:hover,
34
42
  .scroll ::-webkit-scrollbar:hover {
35
43
  /* css:theme-validation:ignore */
36
44
  }
45
+
37
46
  .scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
38
47
  background: var(--zd-scroll-bg);
39
48
  }
49
+
40
50
  .scroll::-webkit-scrollbar:horizontal,
41
51
  .scroll ::-webkit-scrollbar:horizontal {
42
52
  height: var(--zd-scroll-height);
43
53
  }
54
+
44
55
  .scroll::-webkit-scrollbar:vertical,
45
56
  .scroll ::-webkit-scrollbar:vertical {
46
57
  width: var(--zd-scroll-width);
47
58
  }
59
+
48
60
  .scroll::-webkit-scrollbar-button,
49
61
  .scroll ::-webkit-scrollbar-button {
50
62
  display: none;
51
63
  width: 0 ;
52
64
  height: 0 ;
53
65
  }
66
+
54
67
  [dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
55
68
  border-left: 1px solid transparent;
56
69
  border-right: 1px solid transparent;
57
70
  }
71
+
58
72
  [dir=rtl] .scroll::-webkit-scrollbar-track:vertical, [dir=rtl] .scroll ::-webkit-scrollbar-track:vertical {
59
73
  border-right: 1px solid transparent;
60
74
  border-left: 1px solid transparent;
61
75
  }
76
+
62
77
  .scroll::-webkit-scrollbar-track:vertical:hover,
63
78
  .scroll ::-webkit-scrollbar-track:vertical:hover {
64
79
  /* css:theme-validation:ignore */
65
80
  }
81
+
66
82
  .scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
67
83
  border-color: var(--zd-scroll-border);
68
84
  }
85
+
69
86
  .scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
70
87
  border-top: 1px solid transparent;
71
88
  border-bottom: 1px solid transparent;
72
89
  }
90
+
73
91
  .scroll::-webkit-scrollbar-track:horizontal:hover,
74
92
  .scroll ::-webkit-scrollbar-track:horizontal:hover {
75
93
  /* css:theme-validation:ignore */
76
94
  }
95
+
77
96
  .scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
78
97
  border-color: var(--zd-scroll-border);
79
98
  }
99
+
80
100
  .scroll::-webkit-scrollbar-track-piece, .scroll ::-webkit-scrollbar-track-piece {
81
101
  background: inherit;
82
102
  }
103
+
83
104
  .scroll::-webkit-scrollbar-thumb,
84
105
  .scroll ::-webkit-scrollbar-thumb {
85
- /* css:theme-validation:ignore */
86
106
  /* css:theme-validation:ignore */
87
107
  /* display: none; */
88
108
  }
109
+
89
110
  .scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
90
111
  border-radius: 10px;
91
112
  background: var(--zd-scroll-thump);
92
113
  background-clip: padding-box;
93
114
  border: 3px solid transparent;
94
115
  }
116
+
95
117
  .scroll::-webkit-scrollbar-thumb:hover,
96
118
  .scroll ::-webkit-scrollbar-thumb:hover {
97
119
  /* css:theme-validation:ignore */
98
- /* css:theme-validation:ignore */
99
120
  }
121
+
100
122
  .scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
101
123
  background: var(--zd-scroll-thump-hoverbg);
102
124
  background-clip: padding-box;
103
125
  border: 3px solid transparent;
104
126
  }
127
+
105
128
  /* .scroll:hover > ::-webkit-scrollbar-thumb,
106
129
  .scroll *:hover > ::-webkit-scrollbar-thumb {
107
130
  display: block;
@@ -113,6 +136,7 @@
113
136
  .scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
114
137
  background: var(--zd-scroll-corner-bg);
115
138
  }
139
+
116
140
  .scroll::-webkit-resizer, .scroll ::-webkit-resizer {
117
141
  background: inherit;
118
- }
142
+ }
@@ -11,12 +11,14 @@ let RefElement = /*#__PURE__*/React.forwardRef((props, ref) => {
11
11
  isChildrenRestrictionNeeded = true,
12
12
  isActive
13
13
  } = props;
14
- return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
15
- forwardRef: ref
16
- })) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
17
- isActive,
18
- forwardRef: ref
19
- }));
14
+ return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, { ...Object.assign({}, elementProps, {
15
+ forwardRef: ref
16
+ })
17
+ }) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, { ...Object.assign({}, elementProps, {
18
+ isActive,
19
+ forwardRef: ref
20
+ })
21
+ });
20
22
  });
21
23
  RefElement.propTypes = RefElement_propTypes;
22
24
  export { RefElement };
@@ -17,7 +17,7 @@ export default function Animation(props) {
17
17
  } = props;
18
18
  let newClassNames = delayClassName ? Object.assign({}, animationStyle[name], {
19
19
  exit: `${delayClassName} ${animationStyle[name].exit}`
20
- }) : animaanimationStyletion[name];
20
+ }) : animationStyle[name];
21
21
  return /*#__PURE__*/React.createElement(CSSTransition, {
22
22
  classNames: newClassNames && newClassNames,
23
23
  in: isActive,
@@ -1,5 +1,3 @@
1
- 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); }
2
-
3
1
  import React, { useEffect, useRef, useLayoutEffect } from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -93,23 +91,26 @@ export default function AppContainer(props) {
93
91
  }
94
92
  };
95
93
  }, []);
96
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
94
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
97
95
  className: `${style.container} ${className}`,
98
96
  dataId: dataId,
99
97
  dataSelectorId: dataSelectorId,
100
98
  tagName: tagName,
101
- eleRef: getContainerRef
102
- }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
99
+ eleRef: getContainerRef,
100
+ ...ContainerProps,
101
+ ...ExtraProps
102
+ }, /*#__PURE__*/React.createElement(Box, {
103
103
  flexible: true
104
- }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
104
+ }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", { ...ExtraProps,
105
105
  className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
106
106
  "data-id": `${dataId}_tooltip`,
107
107
  "data-test-id": `${dataId}_tooltip`,
108
108
  "data-selector-id": `${dataSelectorId}_tooltip`
109
- }), /*#__PURE__*/React.createElement(Tooltip, _extends({
109
+ }, /*#__PURE__*/React.createElement(Tooltip, {
110
110
  ref: setTooltipRef,
111
- customClass: tooltipClass
112
- }, TooltipProps))) : null);
111
+ customClass: tooltipClass,
112
+ ...TooltipProps
113
+ })) : null);
113
114
  }
114
115
  AppContainer.propTypes = propTypes;
115
116
  AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
@@ -1,5 +1,3 @@
1
- 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); }
2
-
3
1
  import React, { useState } from 'react';
4
2
  import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
5
3
  import { defaultProps } from './props/defaultProps';
@@ -105,15 +103,16 @@ function Avatar(props) {
105
103
  let showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
106
104
  let borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? `${style.border} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} ` : '';
107
105
  borderStyle = showAlternateAvatar ? '' : borderStyle;
108
- return /*#__PURE__*/React.createElement("div", _extends({
106
+ return /*#__PURE__*/React.createElement("div", {
109
107
  className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
110
108
  "data-title": needTitle ? title ? title : name : null,
111
109
  "data-id": dataId,
112
110
  "data-test-id": dataId,
113
111
  onClick: onClick,
114
112
  "data-selector-id": dataSelectorId,
115
- tabIndex: onClick ? 0 : null
116
- }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
113
+ tabIndex: onClick ? 0 : null,
114
+ ...AvatarProps
115
+ }, showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
117
116
  className: `${style.initial}`,
118
117
  "data-id": `${dataId}_AvatarInitial`,
119
118
  "data-test-id": `${dataId}_AvatarInitial`,
@@ -1,5 +1,3 @@
1
- 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); }
2
-
3
1
  import React from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -41,12 +39,13 @@ export default function AvatarTeam(props) {
41
39
  customAvatarTeam = ''
42
40
  } = customClass;
43
41
  const border = borderOnHover || onClick;
44
- return /*#__PURE__*/React.createElement("span", _extends({
42
+ return /*#__PURE__*/React.createElement("span", {
45
43
  className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
46
44
  "data-id": dataId,
47
45
  "data-test-id": dataId,
48
- "data-selector-id": dataSelectorId
49
- }, AvatarTeamProps), /*#__PURE__*/React.createElement(Avatar, _extends({
46
+ "data-selector-id": dataSelectorId,
47
+ ...AvatarTeamProps
48
+ }, /*#__PURE__*/React.createElement(Avatar, {
50
49
  name: name,
51
50
  onClick: onClick,
52
51
  palette: palette,
@@ -60,8 +59,9 @@ export default function AvatarTeam(props) {
60
59
  borderOnHover: border,
61
60
  needInnerBorder: needInnerBorder,
62
61
  needBorder: needBorder,
63
- needDefaultBorder: needDefaultBorder
64
- }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
62
+ needDefaultBorder: needDefaultBorder,
63
+ ...AvatarProps
64
+ }), /*#__PURE__*/React.createElement("span", {
65
65
  className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill}
66
66
  ${style[`${size}team`]} ${customAvatarTeam}`
67
67
  }));
@@ -1,5 +1,3 @@
1
- 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); }
2
-
3
1
  import React from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -39,7 +37,7 @@ export default function Button(props) {
39
37
  style: finalStyle
40
38
  });
41
39
  let statusLower = status.toLowerCase();
42
- return /*#__PURE__*/React.createElement("button", _extends({
40
+ return /*#__PURE__*/React.createElement("button", {
43
41
  className: buttonClass,
44
42
  "data-id": disabled ? `${dataId}_disabled` : dataId,
45
43
  "data-test-id": disabled ? `${dataId}_disabled` : dataId,
@@ -48,10 +46,11 @@ export default function Button(props) {
48
46
  "data-title": title,
49
47
  type: "button",
50
48
  ref: getRef,
51
- "data-selector-id": dataSelectorId
52
- }, customProps, a11y, {
49
+ "data-selector-id": dataSelectorId,
50
+ ...customProps,
51
+ ...a11y,
53
52
  id: id
54
- }), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
53
+ }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
55
54
  className: finalStyle.overlay
56
55
  }, /*#__PURE__*/React.createElement("div", {
57
56
  className: loaderParentClass
@@ -3,7 +3,7 @@ import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
3
3
  import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
4
4
  import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from './props/defaultProps';
5
5
  import { Container, Box } from '../Layout';
6
- import { getLibraryConfig } from '../Provider/Config';
6
+ import { getLibraryConfig } from '../../Provider/Config';
7
7
  import style from '../../Card/Card.module.css';
8
8
  /* eslint-disable react/forbid-component-props */
9
9
 
@@ -1,11 +1,9 @@
1
- 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); }
2
-
3
1
  import React from 'react';
4
2
  import { propTypes } from './props/propTypes';
5
3
  import { defaultProps } from './props/defaultProps';
6
4
  import Label from '../Label/Label';
7
5
  import { Container, Box } from '../Layout';
8
- import CssProvider from '../Provider/CssProvider';
6
+ import CssProvider from '../../Provider/CssProvider';
9
7
  import style from '../../CheckBox/CheckBox.module.css';
10
8
 
11
9
  const CheckBox = props => {
@@ -66,7 +64,7 @@ const CheckBox = props => {
66
64
  role = 'checkbox',
67
65
  ariaChecked = checked
68
66
  } = a11y;
69
- return /*#__PURE__*/React.createElement(Container, _extends({
67
+ return /*#__PURE__*/React.createElement(Container, {
70
68
  dataId: dataId,
71
69
  isCover: false,
72
70
  isInline: text ? false : true,
@@ -83,8 +81,9 @@ const CheckBox = props => {
83
81
  "aria-label": ariaLabel,
84
82
  "aria-labelledby": ariaLabelledby,
85
83
  "aria-hidden": ariaHidden,
86
- "data-selector-id": dataSelectorId || id
87
- }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
84
+ "data-selector-id": dataSelectorId || id,
85
+ ...CheckBoxProps
86
+ }, /*#__PURE__*/React.createElement(Box, {
88
87
  className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
89
88
  }, /*#__PURE__*/React.createElement("input", {
90
89
  type: "hidden",
@@ -136,7 +135,7 @@ const CheckBox = props => {
136
135
  }) : null))), text && /*#__PURE__*/React.createElement(Box, {
137
136
  flexible: true,
138
137
  className: style.text
139
- }, /*#__PURE__*/React.createElement(Label, _extends({
138
+ }, /*#__PURE__*/React.createElement(Label, {
140
139
  text: text,
141
140
  palette: disabled ? 'disable' : labelPalette,
142
141
  id: id,
@@ -147,8 +146,9 @@ const CheckBox = props => {
147
146
  customClass: `${active && !disabled ? `${style[`active${palette}Label`]}` : ''}
148
147
  ${checked && active ? `${style[`checked${palette}Label`]}` : ''}
149
148
  ${accessMode} ${customLabel}`,
150
- title: toolTip ? toolTip : text
151
- }, LabelProps))));
149
+ title: toolTip ? toolTip : text,
150
+ ...LabelProps
151
+ })));
152
152
  };
153
153
 
154
154
  export default CheckBox;