@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256

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 (88) hide show
  1. package/README.md +20 -3
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +4 -4
  3. package/assets/Appearance/dark/themes/blue/blue_componentsCTA_DarkModifyCategory.module.css +14 -0
  4. package/assets/Appearance/dark/themes/green/green_componentsCTA_DarkModifyCategory.module.css +14 -0
  5. package/assets/Appearance/dark/themes/orange/orange_componentsCTA_DarkModifyCategory.module.css +14 -0
  6. package/assets/Appearance/dark/themes/red/red_componentsCTA_DarkModifyCategory.module.css +14 -0
  7. package/assets/Appearance/dark/themes/yellow/yellow_componentsCTA_DarkModifyCategory.module.css +14 -0
  8. package/assets/Appearance/light/mode/Component_LightMode.module.css +6 -6
  9. package/assets/Appearance/light/themes/blue/blue_componentsCTA_LightModifyCategory.module.css +14 -0
  10. package/assets/Appearance/light/themes/green/green_componentsCTA_LightModifyCategory.module.css +14 -0
  11. package/assets/Appearance/light/themes/orange/orange_componentsCTA_LightModifyCategory.module.css +14 -0
  12. package/assets/Appearance/light/themes/red/red_componentsCTA_LightModifyCategory.module.css +14 -0
  13. package/assets/Appearance/light/themes/yellow/yellow_componentsCTA_LightModifyCategory.module.css +14 -0
  14. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +3 -3
  15. package/assets/Appearance/pureDark/themes/blue/blue_componentsCTA_PureDarkModifyCategory.module.css +14 -0
  16. package/assets/Appearance/pureDark/themes/green/green_componentsCTA_PureDarkModifyCategory.module.css +14 -0
  17. package/assets/Appearance/pureDark/themes/orange/orange_componentsCTA_PureDarkModifyCategory.module.css +14 -0
  18. package/assets/Appearance/pureDark/themes/red/red_componentsCTA_PureDarkModifyCategory.module.css +14 -0
  19. package/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css +14 -0
  20. package/cbt.config.js +12 -3
  21. package/es/Avatar/Avatar.js +1 -2
  22. package/es/Button/css/cssJSLogic.js +4 -5
  23. package/es/DateTime/DateTime.js +3 -6
  24. package/es/DateTime/DateWidget.js +34 -11
  25. package/es/DateTime/YearView.js +5 -6
  26. package/es/DateTime/common.js +2 -9
  27. package/es/DateTime/dateFormatUtils/dateFormat.js +55 -76
  28. package/es/DateTime/dateFormatUtils/index.js +7 -12
  29. package/es/DateTime/dateFormatUtils/timeChange.js +3 -4
  30. package/es/DateTime/dateFormatUtils/yearChange.js +3 -4
  31. package/es/DropBox/DropBoxElement/css/cssJSLogic.js +5 -6
  32. package/es/Layout/utils.js +1 -2
  33. package/es/ListItem/ListContainer.js +4 -5
  34. package/es/Modal/Portal/Portal.js +4 -5
  35. package/es/MultiSelect/AdvancedGroupMultiSelect.js +91 -103
  36. package/es/MultiSelect/AdvancedMultiSelect.js +74 -80
  37. package/es/MultiSelect/MultiSelect.js +4 -13
  38. package/es/MultiSelect/Suggestions.js +14 -17
  39. package/es/Popup/Popup.js +1 -4
  40. package/es/Provider/IdProvider.js +4 -5
  41. package/es/Provider/LibraryContext.js +15 -12
  42. package/es/Provider/NumberGenerator/NumberGenerator.js +15 -17
  43. package/es/Provider/ZindexProvider.js +4 -5
  44. package/es/Responsive/CustomResponsive.js +8 -11
  45. package/es/Responsive/ResizeComponent.js +1 -3
  46. package/es/Responsive/Responsive.js +9 -12
  47. package/es/Responsive/sizeObservers.js +1 -5
  48. package/es/ResponsiveDropBox/ResponsiveDropBox.js +10 -14
  49. package/es/Select/GroupSelect.js +98 -103
  50. package/es/Select/Select.js +110 -116
  51. package/es/Select/SelectWithAvatar.js +91 -95
  52. package/es/Select/SelectWithIcon.js +104 -109
  53. package/es/Select/__tests__/Select.spec.js +6 -9
  54. package/es/Tab/Tab.js +90 -40
  55. package/es/Tab/Tab.module.css +25 -0
  56. package/es/Tab/TabContent.js +16 -19
  57. package/es/Tab/TabContentWrapper.js +19 -22
  58. package/es/Tab/TabWrapper.js +15 -16
  59. package/es/Tab/Tabs.js +105 -81
  60. package/es/Tab/Tabs.module.css +48 -3
  61. package/es/Tab/__tests__/Tab.spec.js +112 -0
  62. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +316 -0
  63. package/es/Tab/props/defaultProps.js +3 -2
  64. package/es/Tab/props/propTypes.js +12 -3
  65. package/es/Tab/utils/tabConfigs.js +5 -0
  66. package/es/Typography/css/cssJSLogic.js +4 -5
  67. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -2
  68. package/es/utils/Common.js +10 -31
  69. package/es/utils/datetime/common.js +12 -9
  70. package/es/utils/dropDownUtils.js +7 -11
  71. package/es/utils/getInitial.js +1 -3
  72. package/es/v1/Button/css/cssJSLogic.js +4 -8
  73. package/es/v1/Label/css/cssJSLogic.js +4 -5
  74. package/es/v1/Switch/css/cssJSLogic.js +4 -5
  75. package/es/v1/helpers/colorHelpers/colorHelper.js +28 -39
  76. package/lib/DateTime/DateWidget.js +33 -6
  77. package/lib/Provider/LibraryContext.js +5 -1
  78. package/lib/Tab/Tab.js +62 -9
  79. package/lib/Tab/Tab.module.css +25 -0
  80. package/lib/Tab/Tabs.js +34 -3
  81. package/lib/Tab/Tabs.module.css +48 -3
  82. package/lib/Tab/__tests__/Tab.spec.js +115 -0
  83. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +316 -0
  84. package/lib/Tab/props/defaultProps.js +3 -2
  85. package/lib/Tab/props/propTypes.js +14 -3
  86. package/lib/Tab/utils/tabConfigs.js +7 -1
  87. package/lib/utils/datetime/common.js +10 -2
  88. package/package.json +12 -11
@@ -194,12 +194,11 @@ export default class YearView extends React.PureComponent {
194
194
  onSelectYear && onSelectYear(year);
195
195
  }
196
196
 
197
- renderListItem(_ref) {
198
- let {
199
- index,
200
- style: virtualizerStyle,
201
- ref
202
- } = _ref;
197
+ renderListItem({
198
+ index,
199
+ style: virtualizerStyle,
200
+ ref
201
+ }) {
203
202
  const {
204
203
  years
205
204
  } = this;
@@ -1,16 +1,9 @@
1
- export function bind() {
2
- for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
3
- handlers[_key] = arguments[_key];
4
- }
5
-
1
+ export function bind(...handlers) {
6
2
  handlers.forEach(handler => {
7
3
  this[handler] = this[handler].bind(this);
8
4
  });
9
5
  }
10
- export function formatValue() {
11
- let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
12
- let valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
13
- let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
6
+ export function formatValue(values = [], valueField = 'id', textField = 'name') {
14
7
  return values && values.map(value => {
15
8
  let formattedValue = value;
16
9
 
@@ -12,9 +12,7 @@ import { formatDate } from "../../utils/datetime/common";
12
12
  import { defaultFormat, supportedPatterns, // patternChangeStr,
13
13
  patternSplitStr, INCONSTANT, flags } from "../constants";
14
14
 
15
- function getDateFormatString() {
16
- let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
17
- let datePatternArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
15
+ function getDateFormatString(dateFormatArr = [], datePatternArr = []) {
18
16
  return dateFormatArr.reduce((res, dateStr, index) => {
19
17
  const patternStr = datePatternArr[index] || '';
20
18
  res += dateStr + patternStr;
@@ -22,14 +20,8 @@ function getDateFormatString() {
22
20
  }, '');
23
21
  }
24
22
 
25
- function getIsValidPattern() {
26
- let dateFormatArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
27
- let datePatternArr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
28
-
29
- const isValueInArray = function () {
30
- let possibleFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
31
- return possibleFormat.some(str => dateFormatArr.indexOf(str) >= 0);
32
- };
23
+ function getIsValidPattern(dateFormatArr = [], datePatternArr = []) {
24
+ const isValueInArray = (possibleFormat = []) => possibleFormat.some(str => dateFormatArr.indexOf(str) >= 0);
33
25
 
34
26
  const haveDay = isValueInArray(flags.day);
35
27
  const haveMonth = isValueInArray(flags.month);
@@ -38,14 +30,12 @@ function getIsValidPattern() {
38
30
  return haveDay && haveMonth && (haveYear || !haveYear) && isValidPattern;
39
31
  }
40
32
 
41
- export function getDateFormatDetails() {
42
- let dateFormat = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
43
- let {
44
- isHideCurrentYear,
45
- value,
46
- timeZone,
47
- isDateTime
48
- } = arguments.length > 1 ? arguments[1] : undefined;
33
+ export function getDateFormatDetails(dateFormat = '', {
34
+ isHideCurrentYear,
35
+ value,
36
+ timeZone,
37
+ isDateTime
38
+ }) {
49
39
  let dayInfo = {};
50
40
  let monthInfo = {};
51
41
  let yearInfo = {};
@@ -126,11 +116,10 @@ export function getDateFormatDetails() {
126
116
  };
127
117
  }
128
118
 
129
- function getDisplayFormatValue(dateVal, formatVal) {
130
- let {
131
- i18nShortMonths = [],
132
- i18nMonths = []
133
- } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
119
+ function getDisplayFormatValue(dateVal, formatVal, {
120
+ i18nShortMonths = [],
121
+ i18nMonths = []
122
+ } = {}) {
134
123
  const {
135
124
  length,
136
125
  type
@@ -151,11 +140,10 @@ function getDisplayFormatValue(dateVal, formatVal) {
151
140
  return addZero(dateVal, length);
152
141
  }
153
142
 
154
- function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder) {
155
- let {
156
- i18nShortMonths,
157
- i18nMonths
158
- } = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
143
+ function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder, {
144
+ i18nShortMonths,
145
+ i18nMonths
146
+ } = {}) {
159
147
  const dateString = dateFormatArr.reduce((res, formatVal, index) => {
160
148
  const {
161
149
  type: dateFormatVal = ''
@@ -172,15 +160,11 @@ function concatDate(values, dateFormatArr, patternArr, fillPlaceHolder) {
172
160
  return dateString;
173
161
  }
174
162
 
175
- export function getDateTimeString() {
176
- let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
177
- let dateFormatDetails = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
178
- let isDateTime = arguments.length > 2 ? arguments[2] : undefined;
179
- let {
180
- i18nShortMonths,
181
- i18nMonths,
182
- is24Hour
183
- } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
163
+ export function getDateTimeString(values = {}, dateFormatDetails = {}, isDateTime, {
164
+ i18nShortMonths,
165
+ i18nMonths,
166
+ is24Hour
167
+ } = {}) {
184
168
  const {
185
169
  day,
186
170
  month,
@@ -220,10 +204,9 @@ export function getDateText(value, isDateTime, timeZone) {
220
204
 
221
205
  return value ? isDateTime ? timeZone ? datetime.toDate(datetime.tz.utcToTz(value, timeZone)) : new Date(value) : timeZone ? datetime.toDate(value) : new Date(value) : new Date();
222
206
  }
223
- export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
224
- let {
225
- is24Hour
226
- } = _ref;
207
+ export function getDateDetails(value, localValues, isDateTime, timeZone, {
208
+ is24Hour
209
+ }) {
227
210
  const {
228
211
  day,
229
212
  month,
@@ -273,10 +256,9 @@ export function getDateDetails(value, localValues, isDateTime, timeZone, _ref) {
273
256
 
274
257
  return localValues;
275
258
  }
276
- export function getIsValidDate(values, isDateTime, _ref2) {
277
- let {
278
- is24Hour
279
- } = _ref2;
259
+ export function getIsValidDate(values, isDateTime, {
260
+ is24Hour
261
+ }) {
280
262
  const {
281
263
  day,
282
264
  month,
@@ -437,22 +419,20 @@ export function getSelectedDate(values, props) {
437
419
  };
438
420
  }
439
421
 
440
- function getDateFormatLength(type, length) {
441
- let formatVal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
442
- let {
443
- i18nShortMonths,
444
- i18nMonths,
445
- selectedValue,
446
- day,
447
- month,
448
- year,
449
- hour,
450
- minute,
451
- noon,
452
- timeZone,
453
- isDateTime,
454
- is24Hour
455
- } = arguments.length > 3 ? arguments[3] : undefined;
422
+ function getDateFormatLength(type, length, formatVal = '', {
423
+ i18nShortMonths,
424
+ i18nMonths,
425
+ selectedValue,
426
+ day,
427
+ month,
428
+ year,
429
+ hour,
430
+ minute,
431
+ noon,
432
+ timeZone,
433
+ isDateTime,
434
+ is24Hour
435
+ }) {
456
436
  const {
457
437
  month: selectedMonth
458
438
  } = getDateDetails(selectedValue, {
@@ -479,20 +459,19 @@ function getDateFormatLength(type, length) {
479
459
  return length;
480
460
  }
481
461
 
482
- export function getDateFormatSelection(dateFormatDetails, isDateTime) {
483
- let {
484
- i18nShortMonths,
485
- i18nMonths,
486
- selectedValue,
487
- day,
488
- month,
489
- year,
490
- hour,
491
- minute,
492
- noon,
493
- timeZone,
494
- is24Hour
495
- } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
462
+ export function getDateFormatSelection(dateFormatDetails, isDateTime, {
463
+ i18nShortMonths,
464
+ i18nMonths,
465
+ selectedValue,
466
+ day,
467
+ month,
468
+ year,
469
+ hour,
470
+ minute,
471
+ noon,
472
+ timeZone,
473
+ is24Hour
474
+ } = {}) {
496
475
  const {
497
476
  dateFormatArr = [],
498
477
  patternArr = []
@@ -9,9 +9,7 @@ import { getDateText } from "./dateFormat";
9
9
  export function convertYearToTwoDigit(year) {
10
10
  return parseInt(year.toString().slice(-2));
11
11
  }
12
- export function addZero() {
13
- let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
14
- let length = arguments.length > 1 ? arguments[1] : undefined;
12
+ export function addZero(value = '', length) {
15
13
  let newValue = value.toString();
16
14
 
17
15
  for (let i = 0; i < length; i++) {
@@ -98,9 +96,7 @@ export function getYearDetails(yearLength) {
98
96
  currentYear: year
99
97
  };
100
98
  }
101
- export function convertTwoDigitToYear() {
102
- let digitValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
103
- let selectedYear = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
99
+ export function convertTwoDigitToYear(digitValue = '', selectedYear = '') {
104
100
  const dateObj = new Date();
105
101
  let year = dateObj.getFullYear();
106
102
  const digitValueStr = addZero(digitValue.toString(), 2);
@@ -224,12 +220,11 @@ export function getIsEmptyYear(value, yearLength) {
224
220
  } = getYearDetails(yearLength);
225
221
  return getIsEmptyValue(value, startPoint, endPoint);
226
222
  }
227
- export function getIsCurrentYear(_ref) {
228
- let {
229
- isDateTime,
230
- value,
231
- timeZone
232
- } = _ref;
223
+ export function getIsCurrentYear({
224
+ isDateTime,
225
+ value,
226
+ timeZone
227
+ }) {
233
228
  let isCurrentYear = false;
234
229
 
235
230
  if (value && value !== INVALID_DATE) {
@@ -1,10 +1,9 @@
1
1
  /** * Methods ** */
2
2
  import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getHourDetails, getMinuteDetails, getNoonDetails, getIsNoonValueTyped, getIsEmptyHour } from "./index";
3
3
  import { getKeyValue, getIsEmptyValue } from "../../utils/Common";
4
- export function getChangedHour(values, event, focusOrders, keyActions) {
5
- let {
6
- is24Hour = false
7
- } = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
4
+ export function getChangedHour(values, event, focusOrders, keyActions, {
5
+ is24Hour = false
6
+ } = {}) {
8
7
  const {
9
8
  keyCode,
10
9
  which
@@ -1,10 +1,9 @@
1
1
  /** * Methods ** */
2
2
  import { getIsNewValueType, getIsNumberTyped, getIsDeleteTyped, getDayEnd, convertYearToTwoDigit, getYearDetails, convertTwoDigitToYear, getIsEmptyYear } from "./index";
3
3
  import { getKeyValue } from "../../utils/Common";
4
- export function getChangedYear(values, event, focusOrders, keyActions, _ref) {
5
- let {
6
- yearInfo
7
- } = _ref;
4
+ export function getChangedYear(values, event, focusOrders, keyActions, {
5
+ yearInfo
6
+ }) {
8
7
  const {
9
8
  keyCode,
10
9
  which
@@ -1,12 +1,11 @@
1
1
  import { useContext } from 'react';
2
2
  import LibraryContext from "../../../Provider/LibraryContextInit";
3
3
  import { compileClassNames } from '@zohodesk/utils';
4
- export default function cssJSLogic(_ref) {
5
- let {
6
- props,
7
- style,
8
- customState
9
- } = _ref;
4
+ export default function cssJSLogic({
5
+ props,
6
+ style,
7
+ customState
8
+ }) {
10
9
  const DropBoxElementContext = useContext(LibraryContext);
11
10
  const {
12
11
  boxPosition,
@@ -15,8 +15,7 @@ export function createProps(propTypes, props, classNames) {
15
15
  export function isInteger(value) {
16
16
  return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
17
17
  }
18
- export function setProps(childProps, props) {
19
- let values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
18
+ export function setProps(childProps, props, values = {}) {
20
19
  Object.keys(values).forEach(value => {
21
20
  if (props[value]) {
22
21
  if (value === 'dataId') {
@@ -36,11 +36,10 @@ const ListContainer = props => {
36
36
  eleRef,
37
37
  align
38
38
  } = props;
39
- const responsiveFunc = useCallback(_ref => {
40
- let {
41
- mediaQueryOR,
42
- isTouchDevice
43
- } = _ref;
39
+ const responsiveFunc = useCallback(({
40
+ mediaQueryOR,
41
+ isTouchDevice
42
+ }) => {
44
43
  return {
45
44
  mobileToTab: mediaQueryOR([{
46
45
  maxWidth: 700
@@ -3,11 +3,10 @@ import BasePortal from '@zohodesk/dotkit/es/react/components/Portal/Portal';
3
3
  import { getLibraryConfig } from "../../Provider/Config";
4
4
  import { defaultProps } from "./props/defaultProps";
5
5
  import { propTypes } from "./props/propTypes";
6
- export default function Portal(_ref) {
7
- let {
8
- children,
9
- portalId
10
- } = _ref;
6
+ export default function Portal({
7
+ children,
8
+ portalId
9
+ }) {
11
10
  const getPortalContainer = useCallback(() => {
12
11
  const getConfigPortalContainer = getLibraryConfig('getPortalContainer');
13
12
 
@@ -272,9 +272,7 @@ class AdvancedGroupMultiSelect extends React.Component {
272
272
  }) : this.togglePopup(e);
273
273
  }
274
274
 
275
- handleClickSelectedOption() {
276
- let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
277
- let e = arguments.length > 1 ? arguments[1] : undefined;
275
+ handleClickSelectedOption(id = '', e) {
278
276
  let {
279
277
  selectedOptionIds
280
278
  } = this.state;
@@ -546,11 +544,7 @@ class AdvancedGroupMultiSelect extends React.Component {
546
544
  });
547
545
  }
548
546
 
549
- handleFetchOptions() {
550
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
551
- args[_key] = arguments[_key];
552
- }
553
-
547
+ handleFetchOptions(...args) {
554
548
  let [APICall, searchStr] = args;
555
549
  let {
556
550
  isFetchingOptions
@@ -663,9 +657,7 @@ class AdvancedGroupMultiSelect extends React.Component {
663
657
  this.handleChange([]);
664
658
  }
665
659
 
666
- handleChange() {
667
- let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
668
- let e = arguments.length > 1 ? arguments[1] : undefined;
660
+ handleChange(selectedOptions = [], e) {
669
661
  let {
670
662
  onChange,
671
663
  needToCloseOnSelect,
@@ -837,10 +829,9 @@ class AdvancedGroupMultiSelect extends React.Component {
837
829
  }
838
830
  }
839
831
 
840
- responsiveFunc(_ref) {
841
- let {
842
- mediaQueryOR
843
- } = _ref;
832
+ responsiveFunc({
833
+ mediaQueryOR
834
+ }) {
844
835
  return {
845
836
  tabletMode: mediaQueryOR([{
846
837
  maxWidth: 700
@@ -1011,97 +1002,94 @@ class AdvancedGroupMultiSelect extends React.Component {
1011
1002
  }))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
1012
1003
  query: this.responsiveFunc,
1013
1004
  responsiveId: "Helmet"
1014
- }, _ref2 => {
1005
+ }, ({
1006
+ tabletMode
1007
+ }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
1008
+ animationStyle: animationStyle,
1009
+ boxPosition: position || `${defaultDropBoxPosition}Center`,
1010
+ getRef: getContainerRef,
1011
+ isActive: isPopupReady,
1012
+ isAnimate: true,
1013
+ isArrow: false,
1014
+ onClick: removeClose,
1015
+ needResponsive: needResponsive,
1016
+ isPadding: isPadding,
1017
+ isBoxPaddingNeed: !needSelectAll,
1018
+ isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
1019
+ positionsOffset: positionsOffset,
1020
+ targetOffset: targetOffset,
1021
+ isRestrictScroll: isRestrictScroll,
1022
+ htmlId: setAriaId,
1023
+ a11y: {
1024
+ role: 'listbox',
1025
+ ariaMultiselectable: true
1026
+ },
1027
+ alignBox: "row",
1028
+ dataId: `${dataId}_dropbox`
1029
+ }, /*#__PURE__*/React.createElement(Box, {
1030
+ flexible: true
1031
+ }, /*#__PURE__*/React.createElement(Card, {
1032
+ customClass: `${style.box} ${style[`${palette}Box`]}`,
1033
+ onScroll: this.handleScroll
1034
+ }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
1035
+ onSelect: this.handleSelectAll,
1036
+ selectAllText: selectAllText,
1037
+ suggestions: suggestionOptionIds,
1038
+ dataId: dataId
1039
+ })) : null, isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
1040
+ shrink: true,
1041
+ customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
1042
+ eleRef: this.suggestionContainerRef
1043
+ }, /*#__PURE__*/React.createElement(React.Fragment, {
1044
+ key: 'SuggestonsParent'
1045
+ }, suggestionGroups.length ? suggestionGroups.map(group => {
1015
1046
  let {
1016
- tabletMode
1017
- } = _ref2;
1018
- return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
1019
- animationStyle: animationStyle,
1020
- boxPosition: position || `${defaultDropBoxPosition}Center`,
1021
- getRef: getContainerRef,
1022
- isActive: isPopupReady,
1023
- isAnimate: true,
1024
- isArrow: false,
1025
- onClick: removeClose,
1026
- needResponsive: needResponsive,
1027
- isPadding: isPadding,
1028
- isBoxPaddingNeed: !needSelectAll,
1029
- isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
1030
- positionsOffset: positionsOffset,
1031
- targetOffset: targetOffset,
1032
- isRestrictScroll: isRestrictScroll,
1033
- htmlId: setAriaId,
1047
+ options: suggestions = []
1048
+ } = group;
1049
+ let groupId = group.id;
1050
+ let groupName = group.name;
1051
+ let hoverId = suggestionOptionIds[hoverIndex];
1052
+ return /*#__PURE__*/React.createElement(React.Fragment, {
1053
+ key: groupId
1054
+ }, groupName && /*#__PURE__*/React.createElement("div", {
1055
+ className: style.groupTitle
1056
+ }, /*#__PURE__*/React.createElement(DropDownHeading, {
1057
+ text: groupName,
1058
+ a11y: {
1059
+ role: 'heading'
1060
+ }
1061
+ })), /*#__PURE__*/React.createElement(Suggestions, _extends({}, SuggestionsProps, {
1062
+ suggestions: suggestions,
1063
+ selectedOptions: selectedOptionIds,
1064
+ getRef: this.suggestionItemRef,
1065
+ hoverId: hoverId,
1066
+ onClick: this.handleSelectOption,
1067
+ onMouseEnter: this.handleMouseEnter,
1068
+ needTick: true,
1069
+ listItemSize: listItemSize,
1034
1070
  a11y: {
1035
- role: 'listbox',
1036
- ariaMultiselectable: true
1071
+ role: 'option'
1037
1072
  },
1038
- alignBox: "row",
1039
- dataId: `${dataId}_dropbox`
1040
- }, /*#__PURE__*/React.createElement(Box, {
1041
- flexible: true
1042
- }, /*#__PURE__*/React.createElement(Card, {
1043
- customClass: `${style.box} ${style[`${palette}Box`]}`,
1044
- onScroll: this.handleScroll
1045
- }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
1046
- onSelect: this.handleSelectAll,
1047
- selectAllText: selectAllText,
1048
- suggestions: suggestionOptionIds,
1049
- dataId: dataId
1050
- })) : null, isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
1051
- shrink: true,
1052
- customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
1053
- eleRef: this.suggestionContainerRef
1054
- }, /*#__PURE__*/React.createElement(React.Fragment, {
1055
- key: 'SuggestonsParent'
1056
- }, suggestionGroups.length ? suggestionGroups.map(group => {
1057
- let {
1058
- options: suggestions = []
1059
- } = group;
1060
- let groupId = group.id;
1061
- let groupName = group.name;
1062
- let hoverId = suggestionOptionIds[hoverIndex];
1063
- return /*#__PURE__*/React.createElement(React.Fragment, {
1064
- key: groupId
1065
- }, groupName && /*#__PURE__*/React.createElement("div", {
1066
- className: style.groupTitle
1067
- }, /*#__PURE__*/React.createElement(DropDownHeading, {
1068
- text: groupName,
1069
- a11y: {
1070
- role: 'heading'
1071
- }
1072
- })), /*#__PURE__*/React.createElement(Suggestions, _extends({}, SuggestionsProps, {
1073
- suggestions: suggestions,
1074
- selectedOptions: selectedOptionIds,
1075
- getRef: this.suggestionItemRef,
1076
- hoverId: hoverId,
1077
- onClick: this.handleSelectOption,
1078
- onMouseEnter: this.handleMouseEnter,
1079
- needTick: true,
1080
- listItemSize: listItemSize,
1081
- a11y: {
1082
- role: 'option'
1083
- },
1084
- limit: limit,
1085
- limitReachedMessage: limitReachedMessage,
1086
- dataId: `${dataId}_Options`
1087
- })));
1088
- }) : /*#__PURE__*/React.createElement(EmptyState, {
1089
- options: revampedGroups,
1090
- searchString: searchStr,
1091
- suggestions: suggestionGroups,
1092
- renderCustomEmptyState: renderCustomEmptyState,
1093
- dataId: dataId,
1094
- isLoading: isFetchingOptions,
1095
- i18nKeys: i18nKeys,
1096
- htmlId: ariaErrorId
1097
- }), isNextOptions && /*#__PURE__*/React.createElement("div", {
1098
- className: style.loader
1099
- }, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
1100
- className: style.loader
1101
- }, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
1102
- className: style.loader
1103
- }, /*#__PURE__*/React.createElement(Loader, null)) : null)));
1104
- }) : null);
1073
+ limit: limit,
1074
+ limitReachedMessage: limitReachedMessage,
1075
+ dataId: `${dataId}_Options`
1076
+ })));
1077
+ }) : /*#__PURE__*/React.createElement(EmptyState, {
1078
+ options: revampedGroups,
1079
+ searchString: searchStr,
1080
+ suggestions: suggestionGroups,
1081
+ renderCustomEmptyState: renderCustomEmptyState,
1082
+ dataId: dataId,
1083
+ isLoading: isFetchingOptions,
1084
+ i18nKeys: i18nKeys,
1085
+ htmlId: ariaErrorId
1086
+ }), isNextOptions && /*#__PURE__*/React.createElement("div", {
1087
+ className: style.loader
1088
+ }, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
1089
+ className: style.loader
1090
+ }, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
1091
+ className: style.loader
1092
+ }, /*#__PURE__*/React.createElement(Loader, null)) : null)))) : null);
1105
1093
  }
1106
1094
 
1107
1095
  }