@zohodesk/components 1.0.0-temp-198 → 1.0.0-temp-199

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 (136) hide show
  1. package/.cli/PropUnificationExcludeFilesArray.js +230 -230
  2. package/.cli/PropValidationExcludeFilesArray.js +1 -1
  3. package/.cli/propValidation_report.html +1 -1
  4. package/css_error.log +1 -1
  5. package/es/AppContainer/AppContainer.module.css +18 -18
  6. package/es/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +591 -591
  7. package/es/AvatarTeam/AvatarTeam.js +7 -7
  8. package/es/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +705 -705
  9. package/es/Button/Button.js +4 -4
  10. package/es/Buttongroup/Buttongroup.js +1 -1
  11. package/es/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap +191 -191
  12. package/es/Card/Card.js +4 -4
  13. package/es/Card/Card.module.css +20 -20
  14. package/es/DateTime/DateWidget.module.css +38 -38
  15. package/es/DropBox/DropBoxPositionMapping.json +144 -144
  16. package/es/DropDown/DropDown.module.css +5 -5
  17. package/es/DropDown/DropDownSearch.module.css +14 -14
  18. package/es/DropDown/DropDownSeparator.module.css +7 -7
  19. package/es/Heading/Heading.module.css +4 -4
  20. package/es/Label/Label.js +2 -2
  21. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +312 -312
  22. package/es/Layout/Layout.module.css +335 -335
  23. package/es/ListItem/ListItem.js +2 -2
  24. package/es/ListItem/ListItem.module.css +85 -18
  25. package/es/ListItem/ListItemWithAvatar.js +3 -3
  26. package/es/ListItem/ListItemWithIcon.js +2 -2
  27. package/es/MultiSelect/AdvancedGroupMultiSelect.js +7 -2
  28. package/es/MultiSelect/AdvancedMultiSelect.js +2 -1
  29. package/es/MultiSelect/MultiSelect.js +8 -4
  30. package/es/MultiSelect/SelectedOptions.module.css +15 -15
  31. package/es/MultiSelect/Suggestions.js +8 -4
  32. package/es/MultiSelect/props/defaultProps.js +8 -5
  33. package/es/MultiSelect/props/propTypes.js +6 -3
  34. package/es/Popup/PositionMapping.json +73 -73
  35. package/es/ResponsiveDropBox/ResponsiveDropBox.module.css +6 -6
  36. package/es/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +374 -374
  37. package/es/RippleEffect/RippleEffect.module.css +92 -92
  38. package/es/Select/GroupSelect.js +7 -2
  39. package/es/Select/Select.module.css +134 -134
  40. package/es/Select/SelectWithAvatar.js +7 -2
  41. package/es/Select/SelectWithIcon.js +7 -2
  42. package/es/Select/props/defaultProps.js +6 -3
  43. package/es/Select/props/propTypes.js +6 -3
  44. package/es/Stencils/Stencils.module.css +96 -96
  45. package/es/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +89 -89
  46. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +831 -831
  47. package/es/Tab/TabContent.module.css +4 -4
  48. package/es/Tab/Tabs.js +17 -17
  49. package/es/Tag/Tag.js +8 -8
  50. package/es/Tooltip/Tooltip.module.css +140 -140
  51. package/es/common/a11y.module.css +3 -3
  52. package/es/common/animation.module.css +624 -624
  53. package/es/common/avatarsizes.module.css +48 -48
  54. package/es/common/basic.module.css +33 -33
  55. package/es/common/basicReset.module.css +40 -40
  56. package/es/common/boxShadow.module.css +33 -33
  57. package/es/common/common.module.css +524 -524
  58. package/es/common/reset.module.css +13 -13
  59. package/es/common/transition.module.css +146 -146
  60. package/es/semantic/Button/semanticButton.module.css +9 -9
  61. package/es/v1/Avatar/Avatar.js +5 -5
  62. package/es/v1/AvatarTeam/AvatarTeam.js +4 -4
  63. package/es/v1/Button/Button.js +4 -4
  64. package/es/v1/MultiSelect/MultiSelect.js +6 -7
  65. package/es/v1/Tab/v1TabContent.module.css +4 -4
  66. package/es/v1/Tag/Tag.js +8 -8
  67. package/es/v1/Typography/css/Typography.module.css +380 -380
  68. package/install.md +10 -10
  69. package/lib/AppContainer/AppContainer.module.css +18 -18
  70. package/lib/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +591 -591
  71. package/lib/AvatarTeam/AvatarTeam.js +7 -7
  72. package/lib/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +705 -705
  73. package/lib/Button/Button.js +4 -4
  74. package/lib/Buttongroup/Buttongroup.js +1 -1
  75. package/lib/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap +191 -191
  76. package/lib/Card/Card.js +4 -4
  77. package/lib/Card/Card.module.css +20 -20
  78. package/lib/DateTime/DateWidget.module.css +38 -38
  79. package/lib/DropBox/DropBoxPositionMapping.json +144 -144
  80. package/lib/DropDown/DropDown.module.css +5 -5
  81. package/lib/DropDown/DropDownSearch.module.css +14 -14
  82. package/lib/DropDown/DropDownSeparator.module.css +7 -7
  83. package/lib/Heading/Heading.module.css +4 -4
  84. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +312 -312
  85. package/lib/Layout/Layout.module.css +335 -335
  86. package/lib/ListItem/ListItem.js +2 -2
  87. package/lib/ListItem/ListItem.module.css +85 -18
  88. package/lib/ListItem/ListItemWithAvatar.js +3 -3
  89. package/lib/ListItem/ListItemWithIcon.js +2 -2
  90. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +7 -3
  91. package/lib/MultiSelect/AdvancedMultiSelect.js +3 -1
  92. package/lib/MultiSelect/MultiSelect.js +9 -5
  93. package/lib/MultiSelect/SelectedOptions.module.css +15 -15
  94. package/lib/MultiSelect/Suggestions.js +8 -4
  95. package/lib/MultiSelect/props/defaultProps.js +8 -5
  96. package/lib/MultiSelect/props/propTypes.js +8 -6
  97. package/lib/Popup/PositionMapping.json +73 -73
  98. package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css +6 -6
  99. package/lib/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +374 -374
  100. package/lib/RippleEffect/RippleEffect.module.css +92 -92
  101. package/lib/Select/GroupSelect.js +8 -3
  102. package/lib/Select/Select.module.css +134 -134
  103. package/lib/Select/SelectWithAvatar.js +8 -3
  104. package/lib/Select/SelectWithIcon.js +8 -3
  105. package/lib/Select/props/defaultProps.js +5 -3
  106. package/lib/Select/props/propTypes.js +6 -3
  107. package/lib/Stencils/Stencils.module.css +96 -96
  108. package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +89 -89
  109. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +831 -831
  110. package/lib/Tab/TabContent.module.css +4 -4
  111. package/lib/Tab/Tabs.js +11 -11
  112. package/lib/Tag/Tag.js +8 -8
  113. package/lib/Tooltip/Tooltip.module.css +140 -140
  114. package/lib/common/a11y.module.css +3 -3
  115. package/lib/common/animation.module.css +624 -624
  116. package/lib/common/avatarsizes.module.css +48 -48
  117. package/lib/common/basic.module.css +33 -33
  118. package/lib/common/basicReset.module.css +40 -40
  119. package/lib/common/boxShadow.module.css +33 -33
  120. package/lib/common/common.module.css +524 -524
  121. package/lib/common/reset.module.css +13 -13
  122. package/lib/common/transition.module.css +146 -146
  123. package/lib/semantic/Button/semanticButton.module.css +9 -9
  124. package/lib/v1/Avatar/Avatar.js +5 -5
  125. package/lib/v1/AvatarTeam/AvatarTeam.js +4 -4
  126. package/lib/v1/Button/Button.js +4 -4
  127. package/lib/v1/MultiSelect/MultiSelect.js +6 -7
  128. package/lib/v1/Tab/v1TabContent.module.css +4 -4
  129. package/lib/v1/Tag/Tag.js +8 -8
  130. package/lib/v1/Typography/css/Typography.module.css +380 -380
  131. package/package.json +3 -3
  132. package/postPublish.js +8 -8
  133. package/prePublish.js +70 -70
  134. package/propValidationArg.json +11 -11
  135. package/react-cli.config.js +23 -23
  136. package/result.json +1 -1
@@ -17,8 +17,9 @@
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 0 0 var(--zd_size15);
20
+ --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
21
21
  }
22
+
22
23
  .list {
23
24
  composes: varClass;
24
25
  position: relative;
@@ -34,62 +35,84 @@
34
35
  border-color: var(--listitem_border_color);
35
36
  cursor: pointer;
36
37
  }
38
+
37
39
  .list, .default, .secondary {
38
40
  background-color: var(--listitem_bg_color);
39
41
  }
42
+
40
43
  [dir=ltr] .withBorder {
41
- --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
44
+ --listitem_border_width: 0 0 0 1px
45
+ /*rtl: 0 1px 0 0*/
46
+ ;
42
47
  }
48
+
43
49
  [dir=rtl] .withBorder {
44
- --listitem_border_width: 0 1px 0 0;
50
+ --listitem_border_width: 0 0 0 1px ;
45
51
  }
52
+
46
53
  .active {
47
54
  --listitem_border_color: var(--zdt_listitem_active_border);
48
55
  }
56
+
49
57
  [dir=ltr] .small {
50
58
  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
51
59
  }
60
+
52
61
  [dir=rtl] .small {
53
- --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
62
+ --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
54
63
  }
64
+
55
65
  .medium {
56
66
  --listitem_padding: var(--zd_size7) var(--zd_size20);
57
67
  --listitem_min_height: var(--zd_size35);
58
68
  }
69
+
59
70
  .large {
60
71
  --listitem_height: var(--zd_size48);
61
72
  }
73
+
62
74
  [dir=ltr] .large {
63
75
  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
64
76
  }
77
+
65
78
  [dir=rtl] .large {
66
- --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
79
+ --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
67
80
  }
81
+
68
82
  .value,
69
83
  .children {
70
84
  composes: dotted from '../common/common.module.css';
71
85
  }
72
- .value, .multiLineValue {
86
+
87
+ .value {
73
88
  line-height: 1.5385;
74
89
  }
75
- .multiLineValue{
90
+
91
+ .multiLineValue {
92
+ line-height: 1.5385;
76
93
  word-break: break-word;
77
- composes: clamp from '../common/common.module.css'
94
+ -webkit-line-clamp: 2;
95
+ composes: clamp from '../common/common.module.css';
78
96
  }
97
+
79
98
  .iconBox {
80
99
  width: var(--zd_size20) ;
81
100
  text-align: center;
82
101
  }
102
+
83
103
  [dir=ltr] .iconBox {
84
104
  margin-right: var(--zd_size10) ;
85
105
  }
106
+
86
107
  [dir=rtl] .iconBox {
87
108
  margin-left: var(--zd_size10) ;
88
109
  }
110
+
89
111
  .iconBox,
90
112
  .leftAvatar {
91
113
  font-size: 0 ;
92
114
  }
115
+
93
116
  .leftAvatar {
94
117
  margin: var(--listitem_avatar_margin);
95
118
  }
@@ -97,61 +120,78 @@
97
120
  .defaultHover, .primaryHover, .secondaryHover, .darkHover {
98
121
  background-color: var(--listitem_highlight_bg_color);
99
122
  }
123
+
100
124
  .activewithBorder {
101
125
  --listitem_border_color: var(--zdt_listitem_active_border);
102
126
  }
127
+
103
128
  [dir=ltr] .activewithBorder {
104
- --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
129
+ --listitem_border_width: 0 0 0 1px
130
+ /*rtl: 0 1px 0 0*/
131
+ ;
105
132
  }
133
+
106
134
  [dir=rtl] .activewithBorder {
107
- --listitem_border_width: 0 1px 0 0;
135
+ --listitem_border_width: 0 0 0 1px ;
108
136
  }
109
137
 
110
138
  .defaultHover,
111
139
  .defaultEffect:hover
140
+
112
141
  /* .defaultEffect:focus */
113
- {
142
+ {
114
143
  --listitem_bg_color: var(--zdt_listitem_highlight_bg);
115
144
  }
145
+
116
146
  .primaryHover,
117
147
  .primaryEffect:hover
148
+
118
149
  /* .primaryEffect:focus */
119
- {
150
+ {
120
151
  --listitem_bg_color: var(--zdt_listitem_primary_bg);
121
152
  --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
122
153
  }
154
+
123
155
  .secondaryHover,
124
156
  .secondaryEffect:hover
157
+
125
158
  /* .secondaryEffect:focus */
126
- {
159
+ {
127
160
  --listitem_bg_color: var(--zdt_listitem_secondary_bg);
128
161
  --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
129
162
  --listitem_text_color: var(--zdt_listitem_secondary_text);
130
163
  }
164
+
131
165
  .darkHover,
132
166
  .darkEffect:hover
167
+
133
168
  /* .darkEffect:focus */
134
- {
169
+ {
135
170
  --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
136
171
  --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
137
172
  }
173
+
138
174
  .activedefault, .activeprimary, .activesecondary, .activedark {
139
175
  background-color: var(--listitem_active_bg_color);
140
176
  }
177
+
141
178
  .activedefault,
142
179
  .activedefault:hover,
143
180
  .activeprimary,
144
181
  .activeprimary:hover {
145
182
  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
146
183
  }
184
+
147
185
  .activesecondary {
148
186
  --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
149
187
  --listitem_text_color: var(--zdt_listitem_secondary_text);
150
188
  }
189
+
151
190
  .dark {
152
191
  --listitem_bg_color: var(--zdt_listitem_dark_bg);
153
192
  --listitem_text_color: var(--zdt_listitem_dark_text);
154
193
  }
194
+
155
195
  .activedark {
156
196
  --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
157
197
  }
@@ -170,36 +210,63 @@
170
210
  [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
171
211
  left: var(--zd_size20) ;
172
212
  }
213
+
173
214
  .defaultTick {
174
215
  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
175
216
  }
217
+
176
218
  .darkTick {
177
219
  --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
178
220
  }
179
- .defaultTick > i {
221
+
222
+ .defaultTick>i {
180
223
  display: block;
181
224
  }
225
+
182
226
  [dir=ltr] .smallwithTick {
183
227
  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
184
228
  }
229
+
185
230
  [dir=rtl] .smallwithTick {
186
- --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
231
+ --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
187
232
  }
233
+
188
234
  [dir=ltr] .mediumwithTick {
189
235
  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
190
236
  }
237
+
191
238
  [dir=rtl] .mediumwithTick {
192
- --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
239
+ --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
193
240
  }
241
+
194
242
  [dir=ltr] .largewithTick {
195
243
  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
196
244
  }
245
+
197
246
  [dir=rtl] .largewithTick {
198
- --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
247
+ --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
199
248
  }
249
+
200
250
  .responsiveHeight {
201
251
  --listitem_min_height: var(--zd_size45);
202
252
  font-size: var(--zd_font_size15) ;
203
253
  padding-top: var(--zd_size10) ;
204
254
  padding-bottom: var(--zd_size10) ;
205
255
  }
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: customListItem,
161
+ customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(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: _ListItemModule["default"].leftAvatar
171
+ className: "".concat(needMultiLineText ? _ListItemModule["default"].alignSelfTop : '', " ").concat(_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: _ListItemModule["default"].tickIcon,
198
+ className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
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: customClass,
150
+ customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(needMultiLineText && iconClass && !iconName ? _ListItemModule["default"].txtAlignBaseLine : '', " ").concat(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: _ListItemModule["default"].tickIcon,
179
+ className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
180
180
  "aria-hidden": ariaHidden,
181
181
  dataId: "".concat(dataIdString, "_tickIcon"),
182
182
  dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
@@ -53,6 +53,8 @@ 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
+
56
58
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
57
59
 
58
60
  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."); }
@@ -960,7 +962,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
960
962
  a11y = _this$props8.a11y,
961
963
  palette = _this$props8.palette,
962
964
  needEffect = _this$props8.needEffect,
963
- autoComplete = _this$props8.autoComplete;
965
+ autoComplete = _this$props8.autoComplete,
966
+ customProps = _this$props8.customProps;
967
+ var suggestionsProps = customProps.suggestionsProps;
964
968
  var _i18nKeys = i18nKeys,
965
969
  _i18nKeys$clearText = _i18nKeys.clearText,
966
970
  clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1116,7 +1120,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
1116
1120
  a11y: {
1117
1121
  role: 'heading'
1118
1122
  }
1119
- })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
1123
+ })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
1120
1124
  suggestions: suggestions,
1121
1125
  selectedOptions: selectedOptionIds,
1122
1126
  getRef: _this5.suggestionItemRef,
@@ -1128,7 +1132,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
1128
1132
  a11y: {
1129
1133
  role: 'option'
1130
1134
  }
1131
- }));
1135
+ }, suggestionsProps)));
1132
1136
  }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
1133
1137
  options: revampedGroups,
1134
1138
  searchString: searchStr,
@@ -599,7 +599,9 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
599
599
  a11y: {
600
600
  role: 'option'
601
601
  }
602
- }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
602
+ }, SuggestionsProps, {
603
+ needMultiLineText: true
604
+ })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
603
605
  isLoading: isFetchingOptions,
604
606
  options: options,
605
607
  searchString: searchStr,
@@ -57,6 +57,8 @@ 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
+
60
62
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
61
63
 
62
64
  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."); }
@@ -1068,7 +1070,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
1068
1070
  boxSize = _this$props15.boxSize,
1069
1071
  isLoading = _this$props15.isLoading,
1070
1072
  selectAllText = _this$props15.selectAllText,
1071
- needSelectAll = _this$props15.needSelectAll;
1073
+ needSelectAll = _this$props15.needSelectAll,
1074
+ customProps = _this$props15.customProps;
1075
+ var _customProps$suggesti = customProps.suggestionsProps,
1076
+ suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
1072
1077
  var _this$state9 = this.state,
1073
1078
  selectedOptions = _this$state9.selectedOptions,
1074
1079
  searchStr = _this$state9.searchStr,
@@ -1114,8 +1119,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
1114
1119
  },
1115
1120
  size: boxSize,
1116
1121
  alignBox: "row",
1117
- isResponsivePadding: getFooter ? false : true,
1118
- dataId: "".concat(dataId, "_dropbox")
1122
+ isResponsivePadding: getFooter ? false : true
1119
1123
  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
1120
1124
  flexible: true
1121
1125
  }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
@@ -1141,7 +1145,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
1141
1145
  eleRef: this.suggestionContainerRef
1142
1146
  }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
1143
1147
  className: _MultiSelectModule["default"][palette]
1144
- }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
1148
+ }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
1145
1149
  suggestions: suggestions,
1146
1150
  getRef: this.suggestionItemRef,
1147
1151
  hoverOption: hoverOption,
@@ -1154,7 +1158,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
1154
1158
  a11y: {
1155
1159
  role: 'option'
1156
1160
  }
1157
- }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
1161
+ }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
1158
1162
  isLoading: isFetchingOptions,
1159
1163
  options: options,
1160
1164
  searchString: searchStr,
@@ -1,15 +1,15 @@
1
- .tag {
2
- max-width: 100% ;
3
- }
4
- [dir=ltr] .xmedium {
5
- margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
6
- }
7
- [dir=rtl] .xmedium {
8
- margin: 0 0 var(--zd_size2) var(--zd_size10) ;
9
- }
10
- [dir=ltr] .medium {
11
- margin: var(--zd_size5) var(--zd_size10) 0 0 ;
12
- }
13
- [dir=rtl] .medium {
14
- margin: var(--zd_size5) 0 0 var(--zd_size10) ;
15
- }
1
+ .tag {
2
+ max-width: 100% ;
3
+ }
4
+ [dir=ltr] .xmedium {
5
+ margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
6
+ }
7
+ [dir=rtl] .xmedium {
8
+ margin: 0 0 var(--zd_size2) var(--zd_size10) ;
9
+ }
10
+ [dir=ltr] .medium {
11
+ margin: var(--zd_size5) var(--zd_size10) 0 0 ;
12
+ }
13
+ [dir=rtl] .medium {
14
+ margin: var(--zd_size5) 0 0 var(--zd_size10) ;
15
+ }
@@ -83,7 +83,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
83
83
  avatarPalette = _this$props.avatarPalette,
84
84
  palette = _this$props.palette,
85
85
  htmlId = _this$props.htmlId,
86
- a11y = _this$props.a11y;
86
+ a11y = _this$props.a11y,
87
+ needMultiLineText = _this$props.needMultiLineText;
87
88
  var ariaParentRole = a11y.ariaParentRole,
88
89
  ariaMultiselectable = a11y.ariaMultiselectable;
89
90
  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -143,7 +144,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
143
144
  size: listItemSize,
144
145
  avatarPalette: avatarPalette,
145
146
  palette: palette,
146
- a11y: list_a11y
147
+ a11y: list_a11y,
148
+ needMultiLineText: needMultiLineText
147
149
  }));
148
150
  } else if (optionType === 'icon') {
149
151
  return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
@@ -163,7 +165,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
163
165
  iconSize: iconSize,
164
166
  size: listItemSize,
165
167
  palette: palette,
166
- a11y: list_a11y
168
+ a11y: list_a11y,
169
+ needMultiLineText: needMultiLineText
167
170
  }));
168
171
  }
169
172
 
@@ -182,7 +185,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
182
185
  active: isActive,
183
186
  size: listItemSize,
184
187
  palette: palette,
185
- a11y: list_a11y
188
+ a11y: list_a11y,
189
+ needMultiLineText: needMultiLineText
186
190
  }));
187
191
  })));
188
192
  }
@@ -43,7 +43,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
43
43
  needEffect: true,
44
44
  palette: 'default',
45
45
  isLoading: false,
46
- dataSelectorId: 'advancedGroupMultiSelect'
46
+ dataSelectorId: 'advancedGroupMultiSelect',
47
+ customProps: {}
47
48
  };
48
49
  exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
49
50
  var AdvancedMultiSelect_defaultProps = {
@@ -122,7 +123,8 @@ var MultiSelect_defaultProps = {
122
123
  keepSelectedOptions: false,
123
124
  selectedOptionsCount: 0,
124
125
  cardHeaderName: '',
125
- needResponsive: true
126
+ needResponsive: true,
127
+ customProps: {}
126
128
  };
127
129
  exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
128
130
  var MultiSelectHeader_defaultProps = {
@@ -158,8 +160,8 @@ var MultiSelectWithAvatar_defaultProps = {
158
160
  isLoading: false,
159
161
  dataSelectorId: 'multiSelectWithAvatar',
160
162
  keepSelectedOptions: false,
161
- customProps: {},
162
- needResponsive: true
163
+ needResponsive: true,
164
+ customProps: {}
163
165
  };
164
166
  exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
165
167
  var SelectedOptions_defaultProps = {
@@ -167,6 +169,7 @@ var SelectedOptions_defaultProps = {
167
169
  };
168
170
  exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
169
171
  var Suggestions_defaultProps = {
170
- a11y: {}
172
+ a11y: {},
173
+ needMultiLineText: false
171
174
  };
172
175
  exports.Suggestions_defaultProps = Suggestions_defaultProps;
@@ -7,6 +7,8 @@ exports.Suggestions_propTypes = exports.SelectedOptions_propTypes = exports.Mult
7
7
 
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
 
10
+ var _AdvancedGroupMultiSe;
11
+
10
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
13
 
12
14
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -121,7 +123,8 @@ var MultiSelect_propTypes = {
121
123
  needSelectAll: _propTypes["default"].bool,
122
124
  selectAllText: _propTypes["default"].string,
123
125
  setAriaId: _propTypes["default"].string,
124
- ariaErrorId: _propTypes["default"].string
126
+ ariaErrorId: _propTypes["default"].string,
127
+ customProps: _propTypes["default"].string
125
128
  };
126
129
  exports.MultiSelect_propTypes = MultiSelect_propTypes;
127
130
  var MultiSelectHeader_propTypes = {
@@ -190,11 +193,11 @@ var Suggestions_propTypes = {
190
193
  logo: _propTypes["default"].string,
191
194
  optionType: _propTypes["default"].string,
192
195
  listItemProps: _propTypes["default"].object
193
- }))
196
+ })),
197
+ needMultiLineText: _propTypes["default"].bool
194
198
  };
195
199
  exports.Suggestions_propTypes = Suggestions_propTypes;
196
-
197
- var AdvancedGroupMultiSelect_propTypes = _defineProperty({
200
+ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
198
201
  animationStyle: _propTypes["default"].string,
199
202
  autoComplete: _propTypes["default"].bool,
200
203
  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
@@ -258,8 +261,7 @@ var AdvancedGroupMultiSelect_propTypes = _defineProperty({
258
261
  needToCloseOnSelect: _propTypes["default"].func,
259
262
  searchStr: _propTypes["default"].string,
260
263
  children: _propTypes["default"].node
261
- }, "dataSelectorId", _propTypes["default"].string);
262
-
264
+ }, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].string), _AdvancedGroupMultiSe);
263
265
  exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
264
266
 
265
267
  var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {