@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
@@ -1,4 +1,4 @@
1
- import { getLibraryConfig } from '../../Provider/Config';
1
+ import { getLibraryConfig } from '../../../Provider/Config';
2
2
  export const Select_defaultProps = {
3
3
  animationStyle: 'bounce',
4
4
  autoComplete: getLibraryConfig('autoComplete'),
@@ -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';
@@ -45,7 +43,7 @@ const Switch = props => {
45
43
  customLabel = ''
46
44
  } = customClass;
47
45
  size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
48
- return /*#__PURE__*/React.createElement(Container, _extends({
46
+ return /*#__PURE__*/React.createElement(Container, {
49
47
  align: "vertical",
50
48
  isCover: false,
51
49
  alignBox: "row",
@@ -54,8 +52,9 @@ const Switch = props => {
54
52
  "data-title": disabled ? disableTitle : title,
55
53
  "aria-checked": checked,
56
54
  role: "switch",
57
- dataSelectorId: dataSelectorId
58
- }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
55
+ dataSelectorId: dataSelectorId,
56
+ ...SwitchProps
57
+ }, /*#__PURE__*/React.createElement(Box, {
59
58
  className: `${style[size]} ${customSwitchSize}`
60
59
  }, /*#__PURE__*/React.createElement("input", {
61
60
  type: "checkbox",
@@ -73,15 +72,16 @@ const Switch = props => {
73
72
  "data-test-id": dataId,
74
73
  className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
75
74
  tabIndex: isReadOnly || disabled ? '-1' : '0'
76
- })), text && /*#__PURE__*/React.createElement(Label, _extends({
75
+ })), text && /*#__PURE__*/React.createElement(Label, {
77
76
  text: text,
78
77
  palette: labelPalette,
79
78
  id: id,
80
79
  size: labelSize,
81
80
  type: "subtitle",
82
81
  onClick: !disabled || !isReadOnly ? onChange : null,
83
- customClass: customLabel
84
- }, LabelProps)));
82
+ customClass: customLabel,
83
+ ...LabelProps
84
+ }));
85
85
  };
86
86
 
87
87
  Switch.defaultProps = defaultProps;
package/es/v1/Tab/Tab.js CHANGED
@@ -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, { useMemo, useCallback } from 'react';
4
2
  import { Tab_defaultProps } from './props/defaultProps';
5
3
  import { Tab_propTypes } from './props/propTypes';
@@ -67,7 +65,7 @@ export default function Tab(_ref) {
67
65
  let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
68
66
  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
69
67
  let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
70
- return /*#__PURE__*/React.createElement(Box, _extends({
68
+ return /*#__PURE__*/React.createElement(Box, {
71
69
  tourId: tourId,
72
70
  tagName: isLink ? 'a' : 'div',
73
71
  className: tabClass,
@@ -85,8 +83,9 @@ export default function Tab(_ref) {
85
83
  "aria-selected": isActive ? true : false,
86
84
  tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
87
85
  "aria-label": text ? text : null,
88
- dataSelectorId: dataSelectorId
89
- }, customProps), /*#__PURE__*/React.createElement(Container, {
86
+ dataSelectorId: dataSelectorId,
87
+ ...customProps
88
+ }, /*#__PURE__*/React.createElement(Container, {
90
89
  alignBox: "row",
91
90
  align: "both",
92
91
  className: styles.textContainer
@@ -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 { TabContentWrapper_defaultProps } from './props/defaultProps';
5
3
  import { TabContentWrapper_propTypes } from './props/propTypes';
@@ -18,15 +16,16 @@ const TabContentWrapper = _ref => {
18
16
  tagName,
19
17
  a11y
20
18
  } = _ref;
21
- return /*#__PURE__*/React.createElement(Box, _extends({
19
+ return /*#__PURE__*/React.createElement(Box, {
22
20
  flexible: true,
23
21
  style: style,
24
22
  dataId: dataId,
25
23
  className: className,
26
24
  onScroll: onScroll,
27
25
  dataSelectorId: dataSelectorId,
28
- tagName: tagName
29
- }, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
26
+ tagName: tagName,
27
+ ...a11y
28
+ }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
30
29
  };
31
30
 
32
31
  TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
@@ -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, useCallback } from 'react';
4
2
  import { TabWrapper_defaultProps } from './props/defaultProps';
5
3
  import { TabWrapper_propTypes } from './props/propTypes';
@@ -37,7 +35,7 @@ function TabWrapper(_ref) {
37
35
  let TabsChild = child.type;
38
36
  let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
39
37
  return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
40
- , _extends({}, child.props, {
38
+ , { ...child.props,
41
39
  selectedTab: selectedTab,
42
40
  onSelect: setSelectedTab,
43
41
  type: type,
@@ -48,7 +46,7 @@ function TabWrapper(_ref) {
48
46
  needAppearance: needAppearance,
49
47
  hookToDisableInternalState: hookToDisableInternalState,
50
48
  align: align
51
- }));
49
+ });
52
50
  }));
53
51
  }
54
52
 
package/es/v1/Tab/Tabs.js CHANGED
@@ -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, useRef, useEffect, useCallback } from 'react';
4
2
  import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
5
3
  import Tab from './Tab';
@@ -7,13 +5,13 @@ import { Tabs_defaultProps } from './props/defaultProps';
7
5
  import { Tabs_propTypes } from './props/propTypes';
8
6
  import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from '../../utils/Common';
9
7
  import { Box, Container } from '../Layout';
10
- import ResizeObserver from '../Responsive/ResizeObserver';
8
+ import ResizeObserver from '../../Responsive/ResizeObserver';
11
9
  import ListItem from '../ListItem/ListItem';
12
10
  import { Icon } from '@zohodesk/icons';
13
11
  import tabsStyle from './v1Tabs.module.css';
14
12
  import Popup from '../Popup/Popup';
15
13
  import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
16
- import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
14
+ import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
17
15
  import btnstyle from '../../semantic/Button/semanticButton.module.css';
18
16
 
19
17
  const Tabs = props => {
@@ -394,7 +392,7 @@ const Tabs = props => {
394
392
  classProps.className = itemClass;
395
393
  }
396
394
 
397
- return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, _extends({}, child.props, {
395
+ return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, { ...child.props,
398
396
  key: child.props.id,
399
397
  getTabRef: getTabRef,
400
398
  onSelect: onSelect // recalculateDimension={tabElement.current[recalculateDimension]}
@@ -405,22 +403,23 @@ const Tabs = props => {
405
403
  needBorder: needTabBorder,
406
404
  needAppearance: needAppearance,
407
405
  align: align,
408
- isVirtual: isVirtual
409
- }, classProps));
406
+ isVirtual: isVirtual,
407
+ ...classProps
408
+ });
410
409
  }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
411
410
  className: `${tabsStyle.menu} `,
412
411
  dataSelectorId: `${dataSelectorId}_moreIcon`
413
- }, /*#__PURE__*/React.createElement(Container, _extends({
412
+ }, /*#__PURE__*/React.createElement(Container, {
414
413
  className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
415
414
  align: "both",
416
415
  onClick: togglePopupLocal,
417
416
  dataId: "moreTabs",
418
- eleRef: getTargetRef
419
- }, MoreButtonProps, {
417
+ eleRef: getTargetRef,
418
+ ...MoreButtonProps,
420
419
  "aria-label": "MoreTabs",
421
420
  role: "link",
422
421
  tagName: "button"
423
- }), /*#__PURE__*/React.createElement(Icon, {
422
+ }, /*#__PURE__*/React.createElement(Icon, {
424
423
  name: iconName,
425
424
  size: iconSize
426
425
  })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -430,7 +429,7 @@ const Tabs = props => {
430
429
  let {
431
430
  tabletMode
432
431
  } = _ref2;
433
- return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
432
+ return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
434
433
  isActive: isPopupReady,
435
434
  isAnimate: true,
436
435
  size: "medium",
@@ -440,12 +439,12 @@ const Tabs = props => {
440
439
  boxPosition: position,
441
440
  getRef: getContainerRef,
442
441
  isBoxPaddingNeed: true,
443
- isArrow: false
444
- }, DropBoxProps, {
442
+ isArrow: false,
443
+ ...DropBoxProps,
445
444
  isResponsivePadding: true,
446
445
  needFocusScope: true,
447
446
  onClose: togglePopupLocal
448
- }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
447
+ }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
449
448
  flexible: true,
450
449
  shrink: true,
451
450
  scroll: "vertical",
@@ -466,7 +465,7 @@ const Tabs = props => {
466
465
  dataId
467
466
  } = child.props;
468
467
  const value = text ? text : showTitleInMoreOptions ? title : null;
469
- return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, _extends({
468
+ return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, {
470
469
  key: id,
471
470
  value: value,
472
471
  onClick: moreTabSelect,
@@ -479,8 +478,9 @@ const Tabs = props => {
479
478
  customListItem: menuItemClass
480
479
  },
481
480
  target: "self",
482
- dataId: `${dataId}_Tab`
483
- }, ListItemProps), !showTitleInMoreOptions ? children : null);
481
+ dataId: `${dataId}_Tab`,
482
+ ...ListItemProps
483
+ }, !showTitleInMoreOptions ? children : null);
484
484
  })));
485
485
  })) : null);
486
486
  }
@@ -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, { memo, useRef, useCallback } from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -113,7 +111,7 @@ function TextBox(props) {
113
111
 
114
112
  let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.border : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isFocus ? style.focus : ''}` : `${style.basic}`;
115
113
  value = value === null || value === undefined ? '' : value;
116
- return /*#__PURE__*/React.createElement("input", _extends({
114
+ return /*#__PURE__*/React.createElement("input", {
117
115
  "aria-label": ariaLabel,
118
116
  "aria-invalid": ariaInvalid,
119
117
  "aria-autocomplete": ariaAutocomplete,
@@ -147,8 +145,10 @@ function TextBox(props) {
147
145
  value: value,
148
146
  onScroll: isScrollPrevent ? handlePreventTextBoxScroll : '',
149
147
  onKeyPress: onKeyPress,
150
- onMouseDown: onMouseDown
151
- }, options.current, customProps));
148
+ onMouseDown: onMouseDown,
149
+ ...options.current,
150
+ ...customProps
151
+ });
152
152
  }
153
153
 
154
154
  TextBox.defaultProps = defaultProps;
@@ -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, useRef, useCallback } from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -98,7 +96,7 @@ export default function TextBoxIcon(props) {
98
96
  "data-title": isDisabled ? title : null
99
97
  }, /*#__PURE__*/React.createElement(Box, {
100
98
  flexible: true
101
- }, /*#__PURE__*/React.createElement(TextBox, _extends({}, props, {
99
+ }, /*#__PURE__*/React.createElement(TextBox, { ...props,
102
100
  dataId: dataId,
103
101
  size: size,
104
102
  variant: variant,
@@ -126,7 +124,7 @@ export default function TextBoxIcon(props) {
126
124
  isScrollPrevent: isScrollPrevent,
127
125
  customClass: customTextBox,
128
126
  customProps: TextBoxProps
129
- }))), /*#__PURE__*/React.createElement(Box, {
127
+ })), /*#__PURE__*/React.createElement(Box, {
130
128
  className: `${style.iconContainer} ${customTBoxIcon}`
131
129
  }, /*#__PURE__*/React.createElement(Container, {
132
130
  alignBox: "row"
@@ -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, { useRef } from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -72,12 +70,12 @@ export default function Textarea(props) {
72
70
  }
73
71
 
74
72
  let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes.current[resize]] : style[resizes.current.none]} ${animated ? `${style[`${size}animated`]}` : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
75
- return /*#__PURE__*/React.createElement("textarea", _extends({
73
+ return /*#__PURE__*/React.createElement("textarea", {
76
74
  "aria-label": ariaLabel,
77
75
  "aria-labelledby": ariaLabelledby,
78
76
  className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
79
- placeholder: placeHolder
80
- }, options.current, {
77
+ placeholder: placeHolder,
78
+ ...options.current,
81
79
  "data-id": dataId,
82
80
  "data-test-id": dataId,
83
81
  maxLength: maxLength,
@@ -89,7 +87,7 @@ export default function Textarea(props) {
89
87
  value: text,
90
88
  id: htmlId,
91
89
  "data-selector-id": dataSelectorId
92
- }));
90
+ });
93
91
  }
94
92
  Textarea.defaultProps = defaultProps;
95
93
  Textarea.propTypes = propTypes; // if (__DOCS__) {
@@ -3,7 +3,7 @@ import { defaultProps } from './props/defaultProps';
3
3
  import { propTypes } from './props/propTypes';
4
4
  import { getLibraryConfig } from '../../Provider/Config';
5
5
  import style from '../../Tooltip/Tooltip.module.css';
6
- import ResizeObserver from '../Responsive/ResizeObserver';
6
+ import ResizeObserver from '../../Responsive/ResizeObserver';
7
7
  import selectn from 'selectn';
8
8
  export default class Tooltip extends React.Component {
9
9
  constructor(props) {
@@ -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, { useContext } from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -81,14 +79,15 @@ export default function VelocityAnimationGroup(props) {
81
79
  delay: exitDelay ? exitDelay : 0,
82
80
  display: 'none'
83
81
  };
84
- return /*#__PURE__*/React.createElement(VelocityTransitionGroup, _extends({
82
+ return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
85
83
  enter: enterAnimation,
86
84
  leave: exitAnimation,
87
85
  component: component && component,
88
86
  runOnMount: runOnMount,
89
87
  enterHideStyle: enterHideStyle,
90
- enterShowStyle: enterShowStyle
91
- }, childProps), isActive ? children : null);
88
+ enterShowStyle: enterShowStyle,
89
+ ...childProps
90
+ }, isActive ? children : null);
92
91
  }
93
92
  VelocityAnimationGroup.defaultProps = { ...defaultProps,
94
93
  component: React.Fragment
@@ -18,31 +18,19 @@
18
18
  composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
19
19
  vertical-align: middle;
20
20
  font-size: var(--avatar_font_size);
21
- /* css:theme-validation:ignore */
22
21
  color: var(--avatar_text_color);
23
22
  border-width: var(--avatar_border_width);
24
23
  border-style: var(--avatar_border_style);
25
24
  }
26
25
 
27
26
  .border {
28
- /* css:theme-validation:ignore */
29
27
  border-color: var(--avatar_border_color);
30
28
  }
31
29
 
32
- .borderOnHover:hover,
33
- .borderOnActive {
34
- /* css:theme-validation:ignore */
35
- }
36
-
37
30
  .borderOnHover:hover, .borderOnActive {
38
31
  border-color: var(--avatar_border_hoverColor);
39
32
  }
40
33
 
41
- .avatar,
42
- .primary {
43
- /* css:theme-validation:ignore */
44
- }
45
-
46
34
  .avatar, .primary {
47
35
  background-color: var(--avatar_bg_color);
48
36
  }
@@ -25,13 +25,10 @@
25
25
  composes: varClass;
26
26
  composes: posab from '../common/common.module.css';
27
27
  top: var(--avatarteam_top_top);
28
- /* css:theme-validation:ignore */
29
- /* css:theme-validation:ignore */
30
28
  width: var(--avatarteam_width);
31
29
  height: var(--avatarteam_height);
32
30
  outline-width: var(--avatarteam_outline_width);
33
31
  outline-style: var(--avatarteam_outline_style);
34
- /* css:theme-validation:ignore */
35
32
  outline-color: var(--avatarteam_outline_color);
36
33
  border-width: var(--avatarteam_border_width);
37
34
  border-style: var(--avatarteam_border_style);
@@ -76,7 +73,6 @@
76
73
  top: var(--avatarteam_bottom_top);
77
74
  outline-width: var(--avatarteam_outline_width);
78
75
  outline-style: var(--avatarteam_outline_style);
79
- /* css:theme-validation:ignore */
80
76
  outline-color: var( --avatarteam_outline_color);
81
77
  }
82
78
  .team:after, .team:before {
@@ -48,13 +48,10 @@
48
48
  composes: dotted from '../../common/common.module.css';
49
49
  position: relative;
50
50
  font-size: var(--button_font_size);
51
- /* css:theme-validation:ignore */
52
51
  color: var(--button_text_color);
53
52
  font-family: var(--button_font_family);
54
53
  text-transform: var(--button_text_transform);
55
- /* css:theme-validation:ignore */
56
54
  min-width: var(--button_min_width);
57
- /* css:theme-validation:ignore */
58
55
  height: var(--button_height);
59
56
  background-color: var(--button_bg_color);
60
57
  border-radius: var(--button_border_radius);
@@ -298,7 +295,6 @@
298
295
  .loadingelement:after {
299
296
  content: '';
300
297
  position: absolute;
301
- /* css:theme-validation:ignore */
302
298
  }
303
299
 
304
300
  .loadingelement:before, .loadingelement:after {
@@ -472,7 +468,6 @@
472
468
  transform-origin: center;
473
469
  border-width: 2px 2px 0 0;
474
470
  border-style: solid;
475
- /* css:theme-validation:ignore */
476
471
  border-color: var(--button_success_border_color);
477
472
  animation: tick var(--zd_no_transition3) ease 0s forwards;
478
473
  }
@@ -529,6 +524,5 @@
529
524
  }
530
525
 
531
526
  .loader{
532
- /* css:theme-validation:ignore */
533
527
  color:var(--dot_mirror)
534
528
  }
@@ -11,8 +11,6 @@
11
11
  .buttonGroup {
12
12
  composes: varClass;
13
13
  composes: cboth from '../common/common.module.css';
14
- /* css:theme-validation:ignore */
15
- /* css:theme-validation:ignore */
16
14
  background-color: var(--buttongroup_bg_color);
17
15
  box-shadow: var(--buttongroup_box_shadow);
18
16
  padding: var(--buttongroup_padding);
@@ -34,7 +34,6 @@
34
34
  }
35
35
  .boxContainer {
36
36
  composes: offSelection from '../common/common.module.css';
37
- /* css:theme-validation:ignore */
38
37
  border-radius: 2px;
39
38
  background-color: var(--checkbox_bg_color);
40
39
  }
@@ -121,7 +120,6 @@
121
120
 
122
121
  .checkedprimaryLabel,
123
122
  .checkeddangerLabel {
124
- /* css:theme-validation:ignore */
125
123
  color: var(--checkbox_checked_active_color);
126
124
  }
127
125
  .activeprimaryLabel:hover
@@ -36,7 +36,6 @@
36
36
  width: var(--zd_size28) ;
37
37
  height: var(--zd_size28) ;
38
38
  line-height: 1.3846;
39
- /* css:theme-validation:ignore */
40
39
  text-align: center;
41
40
  padding: var(--zd_size4) 0 ;
42
41
  border-radius: 50%;
@@ -18,11 +18,6 @@
18
18
  box-shadow: var(--dropbox_box_shadow);
19
19
  }
20
20
 
21
- .defaultPalette,
22
- .darkPalette {
23
- /* css:theme-validation:ignore */
24
- }
25
-
26
21
  .defaultPalette, .darkPalette {
27
22
  background-color: var(--dropbox_bg_color);
28
23
  }
@@ -212,7 +207,6 @@
212
207
  height: var(--zd_size10) ;
213
208
  width: var(--zd_size10) ;
214
209
  box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
215
- /* css:theme-validation:ignore */
216
210
  background-color: var(--dropbox_bg_color);
217
211
  -webkit-transform: rotateZ(-45deg);
218
212
  transform: rotateZ(-45deg);
@@ -422,7 +416,6 @@
422
416
  .closeBar {
423
417
  /* Variable:Ignore */
424
418
  height: 6px;
425
- /* css:theme-validation:ignore */
426
419
  width: 20% ;
427
420
  border-radius: 5px;
428
421
  background-color: var(--dropbox_mob_close_bg_color);
@@ -49,7 +49,6 @@
49
49
 
50
50
  .freeze {
51
51
  composes: varClass;
52
- /* css:theme-validation:ignore */
53
52
  background: var(--dropbox_mob_bg_color);
54
53
  }
55
54
 
@@ -18,9 +18,7 @@
18
18
  font-size: var(--zd_font_size11) ;
19
19
  letter-spacing: 0.6px;
20
20
  text-transform: var(--dropdownheading_text_transform);
21
- /* css:theme-validation:ignore */
22
21
  color: var(--dropdownheading_text_color);
23
- /* css:theme-validation:ignore */
24
22
  padding: var(--dropdownheading_padding);
25
23
  background-color: var(--dropdownheading_bg_color);
26
24
  }
@@ -35,10 +33,6 @@
35
33
  .light {
36
34
  composes: default;
37
35
  }
38
- .light::after,
39
- .dark::after {
40
- /* css:theme-validation:ignore */
41
- }
42
36
  .light::after, .dark::after {
43
37
  background-color: var(--dropdownheading_underline_bg_color);
44
38
  }
@@ -20,8 +20,6 @@
20
20
  position: relative;
21
21
  color: var(--zdt_dropdown_default_text);
22
22
  font-size: var(--zd_font_size13) ;
23
- /* css:theme-validation:ignore */
24
- /* css:theme-validation:ignore */
25
23
  padding: var(--dropdownitem-padding);
26
24
  border-style: solid;
27
25
  border-color: var(--dropdownitem-border-color);
@@ -76,7 +74,6 @@
76
74
  opacity: 0;
77
75
  visibility: hidden;
78
76
  width: var(--dropdownitem-user-width);
79
- /* css:theme-validation:ignore */
80
77
  border-width: var(--dropdownitem-user-border-width);
81
78
  border-style: var(--dropdownitem-user-border-style);
82
79
  border-color: var(--dropdownitem-user-border-color);
@@ -12,7 +12,6 @@
12
12
  vertical-align: middle;
13
13
  line-height: var(--label_line_height);
14
14
  font-size: var(--label_font_size);
15
- /* css:theme-validation:ignore */
16
15
  color: var(--label_text_color);
17
16
  font-family: var(--label_font_family);
18
17
  cursor: var(--label_cursor);
@@ -23,10 +23,8 @@
23
23
  composes: varClass;
24
24
  position: relative;
25
25
  list-style: none;
26
- /* css:theme-validation:ignore */
27
26
  color: var(--listitem_text_color);
28
27
  font-size: var(--zd_font_size13) ;
29
- /* css:theme-validation:ignore */
30
28
  height: var(--listitem_height);
31
29
  min-height: var(--listitem_min_height);
32
30
  text-decoration: none;
@@ -36,11 +34,6 @@
36
34
  border-color: var(--listitem_border_color);
37
35
  cursor: pointer;
38
36
  }
39
- .list,
40
- .default,
41
- .secondary {
42
- /* css:theme-validation:ignore */
43
- }
44
37
  .list, .default, .secondary {
45
38
  background-color: var(--listitem_bg_color);
46
39
  }
@@ -101,13 +94,6 @@
101
94
  margin: var(--listitem_avatar_margin);
102
95
  }
103
96
 
104
- .defaultHover,
105
- .primaryHover,
106
- .secondaryHover,
107
- .darkHover {
108
- /* css:theme-validation:ignore */
109
- }
110
-
111
97
  .defaultHover, .primaryHover, .secondaryHover, .darkHover {
112
98
  background-color: var(--listitem_highlight_bg_color);
113
99
  }
@@ -149,12 +135,6 @@
149
135
  --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
150
136
  --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
151
137
  }
152
- .activedefault,
153
- .activeprimary,
154
- .activesecondary,
155
- .activedark {
156
- /* css:theme-validation:ignore */
157
- }
158
138
  .activedefault, .activeprimary, .activesecondary, .activedark {
159
139
  background-color: var(--listitem_active_bg_color);
160
140
  }
@@ -180,7 +160,6 @@
180
160
  .defaultTick,
181
161
  .darkTick {
182
162
  position: absolute;
183
- /* css:theme-validation:ignore */
184
163
  color: var(--listitem_tickicon_color);
185
164
  }
186
165
 
@@ -120,7 +120,8 @@ var MultiSelect_defaultProps = {
120
120
  dataSelectorId: 'multiSelect',
121
121
  keepSelectedOptions: false,
122
122
  selectedOptionsCount: 0,
123
- cardHeaderName: ''
123
+ cardHeaderName: '',
124
+ needResponsive: true
124
125
  };
125
126
  exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
126
127
  var MultiSelectHeader_defaultProps = {
@@ -156,7 +157,8 @@ var MultiSelectWithAvatar_defaultProps = {
156
157
  isLoading: false,
157
158
  dataSelectorId: 'multiSelectWithAvatar',
158
159
  keepSelectedOptions: false,
159
- customProps: {}
160
+ customProps: {},
161
+ needResponsive: true
160
162
  };
161
163
  exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
162
164
  var SelectedOptions_defaultProps = {
@@ -1,9 +1,9 @@
1
1
  .popup {
2
2
  position: relative;
3
- /* css:theme-validation:ignore */
4
- background-color: var(--dot_white);
3
+ background-color: var(--zdt_popover_default_bg);
5
4
  }
5
+
6
6
  .target {
7
7
  composes: offSelection from '../common/common.module.css';
8
8
  cursor: pointer;
9
- }
9
+ }