@zohodesk/components 1.0.0-temp-192 → 1.0.0-temp-194

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 (94) hide show
  1. package/.cli/propValidation_report.html +1 -1
  2. package/es/AppContainer/AppContainer.js +10 -9
  3. package/es/Avatar/Avatar.js +4 -5
  4. package/es/AvatarTeam/AvatarTeam.js +7 -7
  5. package/es/Button/Button.js +5 -6
  6. package/es/CheckBox/CheckBox.js +8 -8
  7. package/es/DropBox/DropBox.js +10 -11
  8. package/es/DropDown/DropDown.js +2 -1
  9. package/es/ListItem/ListContainer.js +6 -5
  10. package/es/ListItem/ListItem.js +6 -7
  11. package/es/ListItem/ListItem.module.css +18 -85
  12. package/es/ListItem/ListItemWithAvatar.js +7 -8
  13. package/es/ListItem/ListItemWithCheckBox.js +4 -5
  14. package/es/ListItem/ListItemWithIcon.js +6 -7
  15. package/es/ListItem/ListItemWithRadio.js +4 -5
  16. package/es/Modal/Modal.js +4 -5
  17. package/es/MultiSelect/AdvancedGroupMultiSelect.js +3 -9
  18. package/es/MultiSelect/AdvancedMultiSelect.js +8 -9
  19. package/es/MultiSelect/MultiSelect.js +3 -9
  20. package/es/MultiSelect/MultiSelectWithAvatar.js +3 -6
  21. package/es/MultiSelect/SelectedOptions.js +6 -8
  22. package/es/MultiSelect/Suggestions.js +10 -16
  23. package/es/MultiSelect/props/defaultProps.js +5 -9
  24. package/es/MultiSelect/props/propTypes.js +3 -7
  25. package/es/Popup/Popup.js +3 -4
  26. package/es/Radio/Radio.js +8 -8
  27. package/es/ResponsiveDropBox/ResponsiveDropBox.js +2 -4
  28. package/es/Select/GroupSelect.js +3 -9
  29. package/es/Select/Select.js +4 -5
  30. package/es/Select/SelectWithAvatar.js +3 -9
  31. package/es/Select/SelectWithIcon.js +3 -9
  32. package/es/Select/props/defaultProps.js +3 -6
  33. package/es/Select/props/propTypes.js +3 -6
  34. package/es/Switch/Switch.js +8 -8
  35. package/es/Tab/Tab.js +4 -5
  36. package/es/Tab/TabContentWrapper.js +4 -5
  37. package/es/Tab/TabWrapper.js +5 -6
  38. package/es/Tab/Tabs.js +16 -16
  39. package/es/Tab/props/propTypes.js +1 -0
  40. package/es/TextBox/TextBox.js +5 -5
  41. package/es/TextBoxIcon/TextBoxIcon.js +2 -4
  42. package/es/Textarea/Textarea.js +4 -6
  43. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +4 -5
  44. package/es/deprecated/PortalLayer/PortalLayer.js +8 -6
  45. package/es/v1/AppContainer/AppContainer.js +10 -9
  46. package/es/v1/Avatar/Avatar.js +4 -5
  47. package/es/v1/AvatarTeam/AvatarTeam.js +7 -7
  48. package/es/v1/Button/Button.js +5 -6
  49. package/es/v1/CheckBox/CheckBox.js +8 -8
  50. package/es/v1/DropBox/DropBox.js +10 -11
  51. package/es/v1/DropDown/DropDown.js +2 -1
  52. package/es/v1/ListItem/ListContainer.js +6 -5
  53. package/es/v1/ListItem/ListItem.js +4 -5
  54. package/es/v1/ListItem/ListItemWithAvatar.js +4 -5
  55. package/es/v1/ListItem/ListItemWithCheckBox.js +4 -5
  56. package/es/v1/ListItem/ListItemWithIcon.js +4 -5
  57. package/es/v1/ListItem/ListItemWithRadio.js +4 -5
  58. package/es/v1/Modal/Modal.js +4 -5
  59. package/es/v1/MultiSelect/AdvancedMultiSelect.js +8 -9
  60. package/es/v1/MultiSelect/MultiSelectWithAvatar.js +4 -5
  61. package/es/v1/MultiSelect/SelectedOptions.js +6 -8
  62. package/es/v1/MultiSelect/Suggestions.js +6 -8
  63. package/es/v1/Popup/Popup.js +3 -4
  64. package/es/v1/Radio/Radio.js +8 -8
  65. package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js +2 -4
  66. package/es/v1/Select/Select.js +4 -5
  67. package/es/v1/Switch/Switch.js +8 -8
  68. package/es/v1/Tab/Tab.js +4 -5
  69. package/es/v1/Tab/TabContentWrapper.js +4 -5
  70. package/es/v1/Tab/TabWrapper.js +2 -4
  71. package/es/v1/Tab/Tabs.js +16 -16
  72. package/es/v1/TextBox/TextBox.js +5 -5
  73. package/es/v1/TextBoxIcon/TextBoxIcon.js +2 -4
  74. package/es/v1/Textarea/Textarea.js +4 -6
  75. package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +4 -5
  76. package/lib/ListItem/ListItem.js +2 -2
  77. package/lib/ListItem/ListItem.module.css +18 -85
  78. package/lib/ListItem/ListItemWithAvatar.js +3 -3
  79. package/lib/ListItem/ListItemWithIcon.js +2 -2
  80. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +3 -7
  81. package/lib/MultiSelect/MultiSelect.js +3 -8
  82. package/lib/MultiSelect/MultiSelectWithAvatar.js +1 -3
  83. package/lib/MultiSelect/Suggestions.js +4 -8
  84. package/lib/MultiSelect/props/defaultProps.js +5 -9
  85. package/lib/MultiSelect/props/propTypes.js +6 -9
  86. package/lib/Select/GroupSelect.js +3 -8
  87. package/lib/Select/SelectWithAvatar.js +3 -8
  88. package/lib/Select/SelectWithIcon.js +3 -8
  89. package/lib/Select/props/defaultProps.js +3 -5
  90. package/lib/Select/props/propTypes.js +3 -6
  91. package/lib/Tab/TabWrapper.js +3 -2
  92. package/lib/Tab/props/propTypes.js +1 -0
  93. package/package.json +3 -3
  94. package/result.json +1 -1
@@ -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';
@@ -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__) {
@@ -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
@@ -150,7 +150,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
150
150
  autoHover: autoHover,
151
151
  needTick: needTick,
152
152
  needBorder: needBorder,
153
- customClass: "".concat(_ListItemModule["default"].txtAlignBaseLine, " ").concat(customListItem),
153
+ customClass: customListItem,
154
154
  dataId: dataIdString,
155
155
  dataSelectorId: "".concat(dataSelectorId),
156
156
  isLink: isLink,
@@ -171,7 +171,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
171
171
  adjust: true,
172
172
  className: _ListItemModule["default"].children
173
173
  }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
174
- className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
174
+ className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
175
175
  "aria-hidden": ariaHidden,
176
176
  dataId: "".concat(dataIdString, "_tickIcon"),
177
177
  dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
@@ -17,9 +17,8 @@
17
17
  }[dir=ltr] .varClass {
18
18
  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
19
19
  }[dir=rtl] .varClass {
20
- --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
20
+ --listitem_avatar_margin: 0 0 0 var(--zd_size15);
21
21
  }
22
-
23
22
  .list {
24
23
  composes: varClass;
25
24
  position: relative;
@@ -35,84 +34,62 @@
35
34
  border-color: var(--listitem_border_color);
36
35
  cursor: pointer;
37
36
  }
38
-
39
37
  .list, .default, .secondary {
40
38
  background-color: var(--listitem_bg_color);
41
39
  }
42
-
43
40
  [dir=ltr] .withBorder {
44
- --listitem_border_width: 0 0 0 1px
45
- /*rtl: 0 1px 0 0*/
46
- ;
41
+ --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
47
42
  }
48
-
49
43
  [dir=rtl] .withBorder {
50
- --listitem_border_width: 0 0 0 1px ;
44
+ --listitem_border_width: 0 1px 0 0;
51
45
  }
52
-
53
46
  .active {
54
47
  --listitem_border_color: var(--zdt_listitem_active_border);
55
48
  }
56
-
57
49
  [dir=ltr] .small {
58
50
  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
59
51
  }
60
-
61
52
  [dir=rtl] .small {
62
- --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
53
+ --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
63
54
  }
64
-
65
55
  .medium {
66
56
  --listitem_padding: var(--zd_size7) var(--zd_size20);
67
57
  --listitem_min_height: var(--zd_size35);
68
58
  }
69
-
70
59
  .large {
71
60
  --listitem_height: var(--zd_size48);
72
61
  }
73
-
74
62
  [dir=ltr] .large {
75
63
  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
76
64
  }
77
-
78
65
  [dir=rtl] .large {
79
- --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
66
+ --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
80
67
  }
81
-
82
68
  .value,
83
69
  .children {
84
70
  composes: dotted from '../common/common.module.css';
85
71
  }
86
-
87
- .value {
72
+ .value, .multiLineValue {
88
73
  line-height: 1.5385;
89
74
  }
90
-
91
- .multiLineValue {
92
- line-height: 1.3076;
75
+ .multiLineValue{
93
76
  word-break: break-word;
94
- -webkit-line-clamp: 5;
95
- composes: clamp from '../common/common.module.css';
77
+ composes: clamp from '../common/common.module.css'
96
78
  }
97
-
98
79
  .iconBox {
99
80
  width: var(--zd_size20) ;
100
81
  text-align: center;
101
82
  }
102
-
103
83
  [dir=ltr] .iconBox {
104
84
  margin-right: var(--zd_size10) ;
105
85
  }
106
-
107
86
  [dir=rtl] .iconBox {
108
87
  margin-left: var(--zd_size10) ;
109
88
  }
110
-
111
89
  .iconBox,
112
90
  .leftAvatar {
113
91
  font-size: 0 ;
114
92
  }
115
-
116
93
  .leftAvatar {
117
94
  margin: var(--listitem_avatar_margin);
118
95
  }
@@ -120,78 +97,61 @@
120
97
  .defaultHover, .primaryHover, .secondaryHover, .darkHover {
121
98
  background-color: var(--listitem_highlight_bg_color);
122
99
  }
123
-
124
100
  .activewithBorder {
125
101
  --listitem_border_color: var(--zdt_listitem_active_border);
126
102
  }
127
-
128
103
  [dir=ltr] .activewithBorder {
129
- --listitem_border_width: 0 0 0 1px
130
- /*rtl: 0 1px 0 0*/
131
- ;
104
+ --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
132
105
  }
133
-
134
106
  [dir=rtl] .activewithBorder {
135
- --listitem_border_width: 0 0 0 1px ;
107
+ --listitem_border_width: 0 1px 0 0;
136
108
  }
137
109
 
138
110
  .defaultHover,
139
111
  .defaultEffect:hover
140
-
141
112
  /* .defaultEffect:focus */
142
- {
113
+ {
143
114
  --listitem_bg_color: var(--zdt_listitem_highlight_bg);
144
115
  }
145
-
146
116
  .primaryHover,
147
117
  .primaryEffect:hover
148
-
149
118
  /* .primaryEffect:focus */
150
- {
119
+ {
151
120
  --listitem_bg_color: var(--zdt_listitem_primary_bg);
152
121
  --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
153
122
  }
154
-
155
123
  .secondaryHover,
156
124
  .secondaryEffect:hover
157
-
158
125
  /* .secondaryEffect:focus */
159
- {
126
+ {
160
127
  --listitem_bg_color: var(--zdt_listitem_secondary_bg);
161
128
  --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
162
129
  --listitem_text_color: var(--zdt_listitem_secondary_text);
163
130
  }
164
-
165
131
  .darkHover,
166
132
  .darkEffect:hover
167
-
168
133
  /* .darkEffect:focus */
169
- {
134
+ {
170
135
  --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
171
136
  --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
172
137
  }
173
-
174
138
  .activedefault, .activeprimary, .activesecondary, .activedark {
175
139
  background-color: var(--listitem_active_bg_color);
176
140
  }
177
-
178
141
  .activedefault,
179
142
  .activedefault:hover,
180
143
  .activeprimary,
181
144
  .activeprimary:hover {
182
145
  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
183
146
  }
184
-
185
147
  .activesecondary {
186
148
  --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
187
149
  --listitem_text_color: var(--zdt_listitem_secondary_text);
188
150
  }
189
-
190
151
  .dark {
191
152
  --listitem_bg_color: var(--zdt_listitem_dark_bg);
192
153
  --listitem_text_color: var(--zdt_listitem_dark_text);
193
154
  }
194
-
195
155
  .activedark {
196
156
  --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
197
157
  }
@@ -210,63 +170,36 @@
210
170
  [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
211
171
  left: var(--zd_size20) ;
212
172
  }
213
-
214
173
  .defaultTick {
215
174
  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
216
175
  }
217
-
218
176
  .darkTick {
219
177
  --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
220
178
  }
221
-
222
- .defaultTick>i {
179
+ .defaultTick > i {
223
180
  display: block;
224
181
  }
225
-
226
182
  [dir=ltr] .smallwithTick {
227
183
  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
228
184
  }
229
-
230
185
  [dir=rtl] .smallwithTick {
231
- --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
186
+ --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
232
187
  }
233
-
234
188
  [dir=ltr] .mediumwithTick {
235
189
  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
236
190
  }
237
-
238
191
  [dir=rtl] .mediumwithTick {
239
- --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
192
+ --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
240
193
  }
241
-
242
194
  [dir=ltr] .largewithTick {
243
195
  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
244
196
  }
245
-
246
197
  [dir=rtl] .largewithTick {
247
- --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
198
+ --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
248
199
  }
249
-
250
200
  .responsiveHeight {
251
201
  --listitem_min_height: var(--zd_size45);
252
202
  font-size: var(--zd_font_size15) ;
253
203
  padding-top: var(--zd_size10) ;
254
204
  padding-bottom: var(--zd_size10) ;
255
205
  }
256
-
257
- .autoHeight {
258
- height: auto ;
259
- }
260
-
261
- .tickIconCenter {
262
- top: 50% ;
263
- transform: translateY(-50%);
264
- }
265
-
266
- .txtAlignBaseLine {
267
- align-items: baseline;
268
- }
269
-
270
- .alignSelfTop {
271
- align-self: start;
272
- }
@@ -158,7 +158,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
158
158
  autoHover: autoHover,
159
159
  needTick: needTick,
160
160
  needBorder: needBorder,
161
- customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
161
+ customClass: customListItem,
162
162
  dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
163
163
  dataSelectorId: "".concat(dataSelectorId),
164
164
  onClick: this.handleClick,
@@ -168,7 +168,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
168
168
  title: null,
169
169
  customProps: ListItemProps
170
170
  }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
171
- className: "".concat(needMultiLineText ? _ListItemModule["default"].alignSelfTop : '', " ").concat(_ListItemModule["default"].leftAvatar)
171
+ className: _ListItemModule["default"].leftAvatar
172
172
  }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
173
173
  name: name,
174
174
  size: "small",
@@ -195,7 +195,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
195
195
  "data-title": isDisabled ? null : title,
196
196
  className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
197
197
  }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
198
- className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
198
+ className: _ListItemModule["default"].tickIcon,
199
199
  "aria-hidden": ariaHidden,
200
200
  dataId: "".concat(dataIdString, "_tickIcon"),
201
201
  dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
@@ -147,7 +147,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
147
147
  autoHover: autoHover,
148
148
  needTick: needTick,
149
149
  needBorder: needBorder,
150
- customClass: "".concat(needMultiLineText && iconClass && !iconName ? _ListItemModule["default"].txtAlignBaseLine : '', " ").concat(customClass),
150
+ customClass: customClass,
151
151
  dataId: dataIdString,
152
152
  dataSelectorId: dataSelectorId,
153
153
  isLink: isLink,
@@ -176,7 +176,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
176
176
  "data-title": isDisabled ? null : title,
177
177
  dataId: "".concat(dataIdString, "_Text")
178
178
  }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
179
- className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
179
+ className: _ListItemModule["default"].tickIcon,
180
180
  "aria-hidden": ariaHidden,
181
181
  dataId: "".concat(dataIdString, "_tickIcon"),
182
182
  dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
@@ -53,8 +53,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
53
53
 
54
54
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
55
55
 
56
- 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); }
57
-
58
56
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
59
57
 
60
58
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -962,9 +960,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
962
960
  a11y = _this$props8.a11y,
963
961
  palette = _this$props8.palette,
964
962
  needEffect = _this$props8.needEffect,
965
- autoComplete = _this$props8.autoComplete,
966
- customProps = _this$props8.customProps;
967
- var suggestionsProps = customProps.suggestionsProps;
963
+ autoComplete = _this$props8.autoComplete;
968
964
  var _i18nKeys = i18nKeys,
969
965
  _i18nKeys$clearText = _i18nKeys.clearText,
970
966
  clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1120,7 +1116,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
1120
1116
  a11y: {
1121
1117
  role: 'heading'
1122
1118
  }
1123
- })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
1119
+ })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
1124
1120
  suggestions: suggestions,
1125
1121
  selectedOptions: selectedOptionIds,
1126
1122
  getRef: _this5.suggestionItemRef,
@@ -1132,7 +1128,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
1132
1128
  a11y: {
1133
1129
  role: 'option'
1134
1130
  }
1135
- }, suggestionsProps)));
1131
+ }));
1136
1132
  }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
1137
1133
  options: revampedGroups,
1138
1134
  searchString: searchStr,
@@ -57,8 +57,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
57
57
 
58
58
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
59
59
 
60
- 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); }
61
-
62
60
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
63
61
 
64
62
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -1070,10 +1068,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
1070
1068
  boxSize = _this$props15.boxSize,
1071
1069
  isLoading = _this$props15.isLoading,
1072
1070
  selectAllText = _this$props15.selectAllText,
1073
- needSelectAll = _this$props15.needSelectAll,
1074
- customProps = _this$props15.customProps;
1075
- var _customProps$suggesti = customProps.suggestionsProps,
1076
- suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
1071
+ needSelectAll = _this$props15.needSelectAll;
1077
1072
  var _this$state9 = this.state,
1078
1073
  selectedOptions = _this$state9.selectedOptions,
1079
1074
  searchStr = _this$state9.searchStr,
@@ -1145,7 +1140,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
1145
1140
  eleRef: this.suggestionContainerRef
1146
1141
  }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
1147
1142
  className: _MultiSelectModule["default"][palette]
1148
- }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
1143
+ }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
1149
1144
  suggestions: suggestions,
1150
1145
  getRef: this.suggestionItemRef,
1151
1146
  hoverOption: hoverOption,
@@ -1158,7 +1153,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
1158
1153
  a11y: {
1159
1154
  role: 'option'
1160
1155
  }
1161
- }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
1156
+ }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
1162
1157
  isLoading: isFetchingOptions,
1163
1158
  options: options,
1164
1159
  searchString: searchStr,
@@ -141,7 +141,6 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
141
141
  needEffect = _this$props.needEffect,
142
142
  isLoading = _this$props.isLoading,
143
143
  keepSelectedOptions = _this$props.keepSelectedOptions,
144
- needMultiLineText = _this$props.needMultiLineText,
145
144
  customProps = _this$props.customProps;
146
145
  var _customProps$Suggesti = customProps.SuggestionsProps,
147
146
  SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
@@ -224,8 +223,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
224
223
  selectedOptions: selectedOptionIds,
225
224
  a11y: {
226
225
  role: 'option'
227
- },
228
- needMultiLineText: needMultiLineText
226
+ }
229
227
  }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
230
228
  isLoading: isFetchingOptions,
231
229
  options: options,