@zohodesk/components 1.0.0-temp-199.4 → 1.0.0-temp-210.5

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 (84) hide show
  1. package/.cli/propValidation_report.html +1 -1
  2. package/README.md +16 -1
  3. package/es/DateTime/CalendarView.js +8 -5
  4. package/es/DateTime/DateTime.js +18 -4
  5. package/es/DateTime/DateTime.module.css +5 -5
  6. package/es/DateTime/DateWidget.js +5 -1
  7. package/es/DateTime/DaysRow.js +3 -2
  8. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +7 -7
  9. package/es/DateTime/props/defaultProps.js +9 -3
  10. package/es/DateTime/props/propTypes.js +11 -4
  11. package/es/ListItem/ListItem.js +2 -2
  12. package/es/ListItem/ListItem.module.css +18 -85
  13. package/es/ListItem/ListItemWithAvatar.js +3 -3
  14. package/es/ListItem/ListItemWithIcon.js +2 -2
  15. package/es/MultiSelect/AdvancedGroupMultiSelect.js +2 -7
  16. package/es/MultiSelect/AdvancedMultiSelect.js +1 -2
  17. package/es/MultiSelect/MultiSelect.js +2 -7
  18. package/es/MultiSelect/Suggestions.js +4 -8
  19. package/es/MultiSelect/props/defaultProps.js +4 -6
  20. package/es/MultiSelect/props/propTypes.js +3 -6
  21. package/es/Popup/Popup.js +32 -13
  22. package/es/Popup/intersectionObserver.js +23 -19
  23. package/es/Select/GroupSelect.js +2 -7
  24. package/es/Select/SelectWithAvatar.js +2 -7
  25. package/es/Select/SelectWithIcon.js +2 -4
  26. package/es/Select/props/defaultProps.js +2 -4
  27. package/es/Select/props/propTypes.js +2 -4
  28. package/es/v1/DateTime/CalendarView.js +9 -6
  29. package/es/v1/DateTime/DateTime.js +18 -4
  30. package/es/v1/DateTime/DateWidget.js +5 -1
  31. package/es/v1/DateTime/DaysRow.js +3 -2
  32. package/es/v1/DateTime/props/defaultProps.js +9 -3
  33. package/es/v1/DateTime/props/propTypes.js +11 -4
  34. package/es/v1/MultiSelect/AdvancedMultiSelect.js +1 -2
  35. package/es/v1/MultiSelect/MultiSelect.js +2 -7
  36. package/es/v1/MultiSelect/Suggestions.js +4 -8
  37. package/es/v1/MultiSelect/props/defaultProps.js +2 -4
  38. package/es/v1/MultiSelect/props/propTypes.js +2 -6
  39. package/es/v1/Select/GroupSelect.js +2 -7
  40. package/es/v1/Select/SelectWithAvatar.js +2 -7
  41. package/es/v1/Select/props/defaultProps.js +2 -4
  42. package/es/v1/Select/props/propTypes.js +2 -6
  43. package/lib/DateTime/CalendarView.js +8 -5
  44. package/lib/DateTime/DateTime.js +27 -4
  45. package/lib/DateTime/DateTime.module.css +5 -5
  46. package/lib/DateTime/DateWidget.js +5 -1
  47. package/lib/DateTime/DaysRow.js +3 -2
  48. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +7 -7
  49. package/lib/DateTime/props/defaultProps.js +9 -3
  50. package/lib/DateTime/props/propTypes.js +11 -4
  51. package/lib/ListItem/ListItem.js +2 -2
  52. package/lib/ListItem/ListItem.module.css +18 -85
  53. package/lib/ListItem/ListItemWithAvatar.js +3 -3
  54. package/lib/ListItem/ListItemWithIcon.js +2 -2
  55. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +3 -7
  56. package/lib/MultiSelect/AdvancedMultiSelect.js +1 -3
  57. package/lib/MultiSelect/MultiSelect.js +3 -6
  58. package/lib/MultiSelect/Suggestions.js +4 -8
  59. package/lib/MultiSelect/props/defaultProps.js +4 -6
  60. package/lib/MultiSelect/props/propTypes.js +6 -8
  61. package/lib/Popup/Popup.js +32 -14
  62. package/lib/Popup/intersectionObserver.js +25 -21
  63. package/lib/Select/GroupSelect.js +3 -8
  64. package/lib/Select/SelectWithAvatar.js +3 -8
  65. package/lib/Select/SelectWithIcon.js +3 -5
  66. package/lib/Select/props/defaultProps.js +2 -4
  67. package/lib/Select/props/propTypes.js +2 -4
  68. package/lib/v1/DateTime/CalendarView.js +9 -6
  69. package/lib/v1/DateTime/DateTime.js +27 -4
  70. package/lib/v1/DateTime/DateWidget.js +5 -1
  71. package/lib/v1/DateTime/DaysRow.js +3 -2
  72. package/lib/v1/DateTime/props/defaultProps.js +9 -3
  73. package/lib/v1/DateTime/props/propTypes.js +11 -4
  74. package/lib/v1/MultiSelect/AdvancedMultiSelect.js +1 -3
  75. package/lib/v1/MultiSelect/MultiSelect.js +3 -8
  76. package/lib/v1/MultiSelect/Suggestions.js +4 -8
  77. package/lib/v1/MultiSelect/props/defaultProps.js +2 -4
  78. package/lib/v1/MultiSelect/props/propTypes.js +2 -6
  79. package/lib/v1/Select/GroupSelect.js +3 -8
  80. package/lib/v1/Select/SelectWithAvatar.js +3 -8
  81. package/lib/v1/Select/props/defaultProps.js +2 -4
  82. package/lib/v1/Select/props/propTypes.js +2 -6
  83. package/package.json +4 -4
  84. package/result.json +1 -1
@@ -1015,12 +1015,8 @@ export class MultiSelectComponent extends React.Component {
1015
1015
  boxSize,
1016
1016
  isLoading,
1017
1017
  selectAllText,
1018
- needSelectAll,
1019
- customProps
1018
+ needSelectAll
1020
1019
  } = this.props;
1021
- const {
1022
- suggestionsProps = {}
1023
- } = customProps;
1024
1020
  const {
1025
1021
  selectedOptions,
1026
1022
  searchStr,
@@ -1110,8 +1106,7 @@ export class MultiSelectComponent extends React.Component {
1110
1106
  selectedOptions: selectedOptionIds,
1111
1107
  a11y: {
1112
1108
  role: 'option'
1113
- },
1114
- ...suggestionsProps
1109
+ }
1115
1110
  }) : /*#__PURE__*/React.createElement(EmptyState, {
1116
1111
  isLoading: isFetchingOptions,
1117
1112
  options: options,
@@ -27,8 +27,7 @@ export default class Suggestions extends React.PureComponent {
27
27
  avatarPalette,
28
28
  palette,
29
29
  htmlId,
30
- a11y,
31
- needMultiLineText
30
+ a11y
32
31
  } = this.props;
33
32
  const {
34
33
  ariaParentRole,
@@ -93,8 +92,7 @@ export default class Suggestions extends React.PureComponent {
93
92
  size: listItemSize,
94
93
  avatarPalette: avatarPalette,
95
94
  palette: palette,
96
- a11y: list_a11y,
97
- needMultiLineText: needMultiLineText
95
+ a11y: list_a11y
98
96
  });
99
97
  } else if (optionType === 'icon') {
100
98
  return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -114,8 +112,7 @@ export default class Suggestions extends React.PureComponent {
114
112
  iconSize: iconSize,
115
113
  size: listItemSize,
116
114
  palette: palette,
117
- a11y: list_a11y,
118
- needMultiLineText: needMultiLineText
115
+ a11y: list_a11y
119
116
  });
120
117
  }
121
118
 
@@ -134,8 +131,7 @@ export default class Suggestions extends React.PureComponent {
134
131
  active: isActive,
135
132
  size: listItemSize,
136
133
  palette: palette,
137
- a11y: list_a11y,
138
- needMultiLineText: needMultiLineText
134
+ a11y: list_a11y
139
135
  });
140
136
  })));
141
137
  }
@@ -37,8 +37,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
37
37
  needEffect: true,
38
38
  palette: 'default',
39
39
  isLoading: false,
40
- dataSelectorId: 'advancedGroupMultiSelect',
41
- customProps: {}
40
+ dataSelectorId: 'advancedGroupMultiSelect'
42
41
  };
43
42
  export const AdvancedMultiSelect_defaultProps = {
44
43
  animationStyle: 'bounce',
@@ -155,14 +154,13 @@ export const MultiSelectWithAvatar_defaultProps = {
155
154
  isLoading: false,
156
155
  dataSelectorId: 'multiSelectWithAvatar',
157
156
  keepSelectedOptions: false,
158
- needResponsive: true,
159
- customProps: {}
157
+ customProps: {},
158
+ needResponsive: true
160
159
  };
161
160
  export const SelectedOptions_defaultProps = {
162
161
  size: 'medium',
163
162
  dataId: 'selectedOptions'
164
163
  };
165
164
  export const Suggestions_defaultProps = {
166
- a11y: {},
167
- needMultiLineText: false
165
+ a11y: {}
168
166
  };
@@ -110,8 +110,7 @@ export const MultiSelect_propTypes = {
110
110
  setAriaId: PropTypes.string,
111
111
  ariaErrorId: PropTypes.string,
112
112
  customProps: PropTypes.shape({
113
- TextBoxIconProps: PropTypes.object,
114
- suggestionsProps: PropTypes.object
113
+ TextBoxIconProps: PropTypes.object
115
114
  })
116
115
  };
117
116
  export const MultiSelectHeader_propTypes = {
@@ -177,8 +176,7 @@ export const Suggestions_propTypes = {
177
176
  logo: PropTypes.string,
178
177
  optionType: PropTypes.string,
179
178
  listItemProps: PropTypes.object
180
- })),
181
- needMultiLineText: PropTypes.bool
179
+ }))
182
180
  };
183
181
  export const AdvancedGroupMultiSelect_propTypes = {
184
182
  animationStyle: PropTypes.string,
@@ -248,8 +246,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
248
246
  needToCloseOnSelect: PropTypes.func,
249
247
  searchStr: PropTypes.string,
250
248
  children: PropTypes.node,
251
- dataSelectorId: PropTypes.string,
252
- customProps: PropTypes.string
249
+ dataSelectorId: PropTypes.string
253
250
  };
254
251
  export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
255
252
  selectedOptionDetails: PropTypes.string,
package/es/Popup/Popup.js CHANGED
@@ -95,6 +95,8 @@ const Popup = function (Component) {
95
95
  this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
96
96
  this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
97
97
  this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
98
+ this.handlScrollBlockAdd = this.handlScrollBlockAdd.bind(this);
99
+ this.handleScrollBlockRemove = this.handleScrollBlockRemove.bind(this);
98
100
  this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
99
101
  this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
100
102
 
@@ -152,9 +154,7 @@ const Popup = function (Component) {
152
154
  dropElement
153
155
  } = this;
154
156
  const {
155
- needResizeHandling: propResizeHandling,
156
- isAbsolutePositioningNeeded,
157
- isOutsideScrollBlocked
157
+ needResizeHandling: propResizeHandling
158
158
  } = this.props;
159
159
 
160
160
  if (oldStateOpen !== isPopupReady) {
@@ -165,14 +165,10 @@ const Popup = function (Component) {
165
165
  this.popupObserver.disconnect();
166
166
  }
167
167
 
168
- if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
169
- if (isPopupReady) {
170
- addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
171
- this.addScrollBlockListeners();
172
- } else {
173
- removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
174
- this.removeScrollBlockListeners();
175
- }
168
+ if (isPopupReady) {
169
+ this.handlScrollBlockAdd();
170
+ } else {
171
+ this.handleScrollBlockRemove();
176
172
  }
177
173
  }
178
174
  }
@@ -189,8 +185,7 @@ const Popup = function (Component) {
189
185
 
190
186
  return res;
191
187
  }, popups);
192
- removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
193
- this.removeScrollBlockListeners();
188
+ this.handleScrollBlockRemove();
194
189
  let noPopups = true;
195
190
 
196
191
  for (const i in popups) {
@@ -215,6 +210,30 @@ const Popup = function (Component) {
215
210
  }
216
211
  }
217
212
 
213
+ handlScrollBlockAdd() {
214
+ const {
215
+ isAbsolutePositioningNeeded,
216
+ isOutsideScrollBlocked
217
+ } = this.props;
218
+
219
+ if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
220
+ addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
221
+ this.addScrollBlockListeners();
222
+ }
223
+ }
224
+
225
+ handleScrollBlockRemove() {
226
+ const {
227
+ isAbsolutePositioningNeeded,
228
+ isOutsideScrollBlocked
229
+ } = this.props;
230
+
231
+ if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
232
+ removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
233
+ this.removeScrollBlockListeners();
234
+ }
235
+ }
236
+
218
237
  addScrollBlockListeners() {
219
238
  document.addEventListener('wheel', this.handleBlockScroll, {
220
239
  capture: true,
@@ -11,29 +11,33 @@ function handleObserverCallbacks(entries) {
11
11
  }
12
12
 
13
13
  export function addIntersectionObserver(element, callback, options) {
14
- if (intersectionObserver === null && observerCallbacks === null) {
15
- intersectionObserver = new IntersectionObserver(entries => {
16
- handleObserverCallbacks(entries);
17
- }, options);
18
- observerCallbacks = new Map();
19
- }
14
+ if (!!element && typeof callback == 'function') {
15
+ if (intersectionObserver === null && observerCallbacks === null) {
16
+ intersectionObserver = new IntersectionObserver(entries => {
17
+ handleObserverCallbacks(entries);
18
+ }, options);
19
+ observerCallbacks = new Map();
20
+ }
20
21
 
21
- intersectionObserver.observe(element);
22
- let oldCallbacks = observerCallbacks.get(element) || [];
23
- observerCallbacks.set(element, [...oldCallbacks, callback]);
22
+ intersectionObserver.observe(element);
23
+ let oldCallbacks = observerCallbacks.get(element) || [];
24
+ observerCallbacks.set(element, [...oldCallbacks, callback]);
25
+ }
24
26
  }
25
27
  export function removeIntersectionObserver(element, callback) {
26
- let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : [];
27
- oldCallbacks = oldCallbacks.filter(handler => handler !== callback);
28
+ if (!!element && typeof callback == 'function') {
29
+ let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) || [] : [];
30
+ oldCallbacks = oldCallbacks.filter(handler => handler !== callback);
28
31
 
29
- if (intersectionObserver && oldCallbacks.length === 0) {
30
- observerCallbacks.delete(element);
31
- intersectionObserver.unobserve(element);
32
- }
32
+ if (intersectionObserver && oldCallbacks.length === 0) {
33
+ observerCallbacks.delete(element);
34
+ intersectionObserver.unobserve(element);
35
+ }
33
36
 
34
- if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
35
- intersectionObserver.disconnect();
36
- intersectionObserver = null;
37
- observerCallbacks = null;
37
+ if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
38
+ intersectionObserver.disconnect();
39
+ intersectionObserver = null;
40
+ observerCallbacks = null;
41
+ }
38
42
  }
39
43
  }
@@ -588,12 +588,8 @@ export class GroupSelectComponent extends PureComponent {
588
588
  htmlId,
589
589
  iconOnHover,
590
590
  isLoading,
591
- dataSelectorId,
592
- customProps
591
+ dataSelectorId
593
592
  } = this.props;
594
- const {
595
- suggestionsProps = {}
596
- } = customProps;
597
593
  i18nKeys = Object.assign({}, i18nKeys, {
598
594
  emptyText: i18nKeys.emptyText || emptyMessage,
599
595
  searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -786,8 +782,7 @@ export class GroupSelectComponent extends PureComponent {
786
782
  ariaParentRole: 'listbox',
787
783
  role: 'option'
788
784
  },
789
- dataId: `${dataId}_Options`,
790
- ...suggestionsProps
785
+ dataId: `${dataId}_Options`
791
786
  }));
792
787
  }) : /*#__PURE__*/React.createElement(EmptyState, {
793
788
  options: revampedGroups,
@@ -163,12 +163,8 @@ class SelectWithAvatarComponent extends SelectComponent {
163
163
  needEffect,
164
164
  isLoading,
165
165
  dataSelectorId,
166
- getTargetRef,
167
- customProps
166
+ getTargetRef
168
167
  } = this.props;
169
- const {
170
- suggestionsProps = {}
171
- } = customProps;
172
168
  i18nKeys = Object.assign({}, i18nKeys, {
173
169
  emptyText: i18nKeys.emptyText || emptyMessage,
174
170
  searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -325,8 +321,7 @@ class SelectWithAvatarComponent extends SelectComponent {
325
321
  a11y: {
326
322
  ariaParentRole: 'listbox',
327
323
  role: 'option'
328
- },
329
- ...suggestionsProps
324
+ }
330
325
  }) : /*#__PURE__*/React.createElement(EmptyState, {
331
326
  isLoading: isFetchingOptions,
332
327
  options: options,
@@ -367,8 +367,7 @@ class SelectWithIcon extends Component {
367
367
  let {
368
368
  TextBoxProps = {},
369
369
  DropdownSearchTextBoxProps = {},
370
- TextBoxIconProps = {},
371
- listItemProps = {}
370
+ TextBoxIconProps = {}
372
371
  } = customProps;
373
372
  return /*#__PURE__*/React.createElement("div", {
374
373
  className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -531,8 +530,7 @@ class SelectWithIcon extends Component {
531
530
  role: 'option',
532
531
  ariaSelected: selectedId === options[idKey],
533
532
  ariaLabel: options[valueKey]
534
- },
535
- ...listItemProps
533
+ }
536
534
  });
537
535
  })) : /*#__PURE__*/React.createElement(EmptyState, {
538
536
  isLoading: isFetchingOptions,
@@ -69,8 +69,7 @@ export const GroupSelect_defaultProps = {
69
69
  isRestrictScroll: false,
70
70
  i18nKeys: {},
71
71
  iconOnHover: false,
72
- isLoading: false,
73
- customProps: {}
72
+ isLoading: false
74
73
  };
75
74
  export const SelectWithAvatar_defaultProps = {
76
75
  animationStyle: 'bounce',
@@ -96,8 +95,7 @@ export const SelectWithAvatar_defaultProps = {
96
95
  isRestrictScroll: false,
97
96
  i18nKeys: {},
98
97
  needEffect: true,
99
- isLoading: false,
100
- customProps: {}
98
+ isLoading: false
101
99
  };
102
100
  export const SelectWithIcon_defaultProps = {
103
101
  isReadOnly: false,
@@ -174,8 +174,7 @@ export const GroupSelect_propTypes = {
174
174
  }),
175
175
  isLoading: PropTypes.bool,
176
176
  dataSelectorId: PropTypes.string,
177
- isDefaultSelectValue: PropTypes.bool,
178
- customProps: PropTypes.string
177
+ isDefaultSelectValue: PropTypes.bool
179
178
  };
180
179
  export const SelectWithAvatar_propTypes = { ...Select_propTypes,
181
180
  textBoxClass: PropTypes.string,
@@ -236,8 +235,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
236
235
  htmlId: PropTypes.string,
237
236
  needEffect: PropTypes.bool,
238
237
  isLoading: PropTypes.bool,
239
- dataSelectorId: PropTypes.string,
240
- customProps: PropTypes.string
238
+ dataSelectorId: PropTypes.string
241
239
  };
242
240
  export const SelectWithIcon_propTypes = {
243
241
  animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -34,10 +34,12 @@ export default class CalendarView extends React.PureComponent {
34
34
  todayDate,
35
35
  todayYear,
36
36
  startDate,
37
- endDate
37
+ endDate,
38
+ weekStartDay,
39
+ holidays
38
40
  } = this.props;
39
41
  const userSeeDate = new Date(year, month, 1);
40
- const userSeeDay = userSeeDate.getDay() + 1;
42
+ const userSeeDay = (userSeeDate.getDay() - weekStartDay + dayNames.length) % dayNames.length + 1;
41
43
  const userSeeYear = userSeeDate.getFullYear();
42
44
  const userSeeMonth = userSeeDate.getMonth();
43
45
  const monthEnd = getMonthEnd(month, year);
@@ -65,10 +67,10 @@ export default class CalendarView extends React.PureComponent {
65
67
  let output = null;
66
68
 
67
69
  for (let i = 1; i <= 7; i++) {
68
- let tdclass = `${style.datesStr} ${style.grid}`;
70
+ let tdclass = `${style.datesStr} ${style.grid}`; // if (i === 1) {
69
71
 
70
- if (i === 1) {
71
- tdclass += ` ${style.sunday}`;
72
+ if (holidays.includes(i - 1)) {
73
+ tdclass += ` ${style.holiday}`;
72
74
  }
73
75
 
74
76
  if (incremleti >= userSeeDay && incremday <= monthEnd) {
@@ -177,7 +179,8 @@ export default class CalendarView extends React.PureComponent {
177
179
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DaysRow, {
178
180
  dayNames: dayNames,
179
181
  dayNamesShort: dayNamesShort,
180
- ariaLabel: dayNamesShort
182
+ ariaLabel: dayNamesShort,
183
+ holidays: holidays
181
184
  }), /*#__PURE__*/React.createElement("div", {
182
185
  "data-id": `${dataId}_dateContainer`,
183
186
  "data-test-id": `${dataId}_dateContainer`,
@@ -652,7 +652,9 @@ export default class DateTime extends React.PureComponent {
652
652
  dropBoxPortalId,
653
653
  startDate,
654
654
  endDate,
655
- customProps = {}
655
+ customProps = {},
656
+ holidays,
657
+ weekStartDay
656
658
  } = this.props;
657
659
  const {
658
660
  TimeProps = {}
@@ -671,6 +673,16 @@ export default class DateTime extends React.PureComponent {
671
673
  dayNamesShort = dayNamesShortDefault
672
674
  } = i18nKeys;
673
675
  const showmonthtxt = title(date, year, month, monthNames);
676
+ let customDayNames = dayNames,
677
+ customDayNamesShort = dayNamesShort,
678
+ customizedHolidays = holidays;
679
+
680
+ if (weekStartDay !== 0) {
681
+ customDayNames = [...dayNames.slice(weekStartDay), ...dayNames.slice(0, weekStartDay)];
682
+ customDayNamesShort = [...dayNamesShort.slice(weekStartDay), ...dayNamesShort.slice(0, weekStartDay)];
683
+ customizedHolidays = holidays.map(dayIndex => customDayNames.indexOf(dayNames[dayIndex]));
684
+ }
685
+
674
686
  const childEle = /*#__PURE__*/React.createElement("div", {
675
687
  className: `${style.container} ${innerClass}`,
676
688
  "data-id": `${dataId}_Calendar`,
@@ -692,13 +704,15 @@ export default class DateTime extends React.PureComponent {
692
704
  year: year,
693
705
  month: month,
694
706
  onSelect: this.dateSelect,
695
- dayNames: dayNames,
696
- dayNamesShort: dayNamesShort,
707
+ dayNames: customDayNames,
708
+ dayNamesShort: customDayNamesShort,
697
709
  todayDate: todayDate,
698
710
  todayMonth: todayMonth,
699
711
  todayYear: todayYear,
700
712
  startDate: startDate,
701
- endDate: endDate
713
+ endDate: endDate,
714
+ weekStartDay: weekStartDay,
715
+ holidays: customizedHolidays
702
716
  }), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
703
717
  timeText: timeText,
704
718
  dataId: dataId,
@@ -1006,6 +1006,8 @@ class DateWidgetComponent extends React.Component {
1006
1006
  onError,
1007
1007
  startDate,
1008
1008
  endDate,
1009
+ weekStartDay,
1010
+ holidays,
1009
1011
  customProps = {}
1010
1012
  } = this.props;
1011
1013
  const {
@@ -1105,7 +1107,9 @@ class DateWidgetComponent extends React.Component {
1105
1107
  onError: onError,
1106
1108
  startDate: startDate,
1107
1109
  endDate: endDate,
1108
- customProps: DateTimeProps
1110
+ customProps: DateTimeProps,
1111
+ weekStartDay: weekStartDay,
1112
+ holidays: holidays
1109
1113
  }));
1110
1114
  }
1111
1115
 
@@ -13,7 +13,8 @@ export default class DaysRow extends PureComponent {
13
13
  render() {
14
14
  const {
15
15
  dayNames,
16
- dayNamesShort
16
+ dayNamesShort,
17
+ holidays
17
18
  } = this.props;
18
19
  return /*#__PURE__*/React.createElement(Container, {
19
20
  alignBox: "row",
@@ -21,7 +22,7 @@ export default class DaysRow extends PureComponent {
21
22
  className: style.days
22
23
  }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
23
24
  key: dayName,
24
- className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
25
+ className: `${style.daysStr} ${style.grid} ${holidays.includes(index) ? style.holiday : ''}`,
25
26
  "data-title": dayName,
26
27
  "aria-label": dayName
27
28
  }, dayNamesShort[index])));
@@ -1,6 +1,8 @@
1
1
  export const CalendarView_defaultProps = {
2
2
  dataId: 'dateContainer',
3
- needBorder: true
3
+ needBorder: true,
4
+ weekStartDay: 0,
5
+ holidays: [0]
4
6
  };
5
7
  export const Span_defaultProps = {
6
8
  dataId: 'calendar-view'
@@ -20,7 +22,9 @@ export const DateTime_defaultProps = {
20
22
  i18nKeys: {},
21
23
  is24Hour: false,
22
24
  isDefaultPosition: false,
23
- customDateFormat: null
25
+ customDateFormat: null,
26
+ weekStartDay: 0,
27
+ holidays: [0]
24
28
  };
25
29
  export const DateWidget_defaultProps = {
26
30
  borderColor: 'default',
@@ -43,7 +47,9 @@ export const DateWidget_defaultProps = {
43
47
  needErrorOnBlur: false,
44
48
  isEditable: false,
45
49
  iconOnHover: false,
46
- is24Hour: false
50
+ is24Hour: false,
51
+ weekStartDay: 0,
52
+ holidays: [0]
47
53
  };
48
54
  export const YearView_defaultProps = {
49
55
  dataId: 'dateContainer',
@@ -13,7 +13,9 @@ export const CalendarView_propTypes = {
13
13
  todayDate: PropTypes.string,
14
14
  todayYear: PropTypes.string,
15
15
  startDate: PropTypes.string,
16
- endDate: PropTypes.string
16
+ endDate: PropTypes.string,
17
+ weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
18
+ holidays: PropTypes.arrayOf(PropTypes.number)
17
19
  };
18
20
  export const Span_propTypes = {
19
21
  dataId: PropTypes.string,
@@ -79,7 +81,9 @@ export const DateTime_propTypes = {
79
81
  dropBoxPortalId: PropTypes.string,
80
82
  startDate: PropTypes.string,
81
83
  endDate: PropTypes.string,
82
- customProps: PropTypes.object
84
+ customProps: PropTypes.object,
85
+ weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
86
+ holidays: PropTypes.arrayOf(PropTypes.number)
83
87
  };
84
88
  export const DateWidget_propTypes = {
85
89
  borderColor: PropTypes.oneOf(['transparent', 'default']),
@@ -150,7 +154,9 @@ export const DateWidget_propTypes = {
150
154
  startDate: PropTypes.string,
151
155
  endDate: PropTypes.string,
152
156
  getPopupProps: PropTypes.func,
153
- customProps: PropTypes.object
157
+ customProps: PropTypes.object,
158
+ weekStartDay: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
159
+ holidays: PropTypes.arrayOf(PropTypes.number)
154
160
  };
155
161
  export const YearView_propTypes = {
156
162
  onSelectMonth: PropTypes.func,
@@ -177,7 +183,8 @@ export const DateTimePopupHeader_propTypes = {
177
183
  };
178
184
  export const DaysRow_propTypes = {
179
185
  dayNames: PropTypes.array,
180
- dayNamesShort: PropTypes.object
186
+ dayNamesShort: PropTypes.object,
187
+ holidays: PropTypes.arrayOf(PropTypes.number)
181
188
  };
182
189
  export const Time_propTypes = {
183
190
  timeText: PropTypes.string,
@@ -549,8 +549,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
549
549
  role: 'option'
550
550
  },
551
551
  dataId: `${dataIdMultiSelectComp}_Options`,
552
- ...SuggestionsProps,
553
- needMultiLineText: true
552
+ ...SuggestionsProps
554
553
  }) : /*#__PURE__*/React.createElement(EmptyState, {
555
554
  isLoading: isFetchingOptions,
556
555
  options: options,
@@ -1008,12 +1008,8 @@ export class MultiSelectComponent extends React.Component {
1008
1008
  boxSize,
1009
1009
  isLoading,
1010
1010
  selectAllText,
1011
- needSelectAll,
1012
- customProps
1011
+ needSelectAll
1013
1012
  } = this.props;
1014
- const {
1015
- suggestionsProps = {}
1016
- } = customProps;
1017
1013
  const {
1018
1014
  selectedOptions,
1019
1015
  searchStr,
@@ -1103,8 +1099,7 @@ export class MultiSelectComponent extends React.Component {
1103
1099
  selectedOptions: selectedOptionIds,
1104
1100
  a11y: {
1105
1101
  role: 'option'
1106
- },
1107
- ...suggestionsProps
1102
+ }
1108
1103
  }) : /*#__PURE__*/React.createElement(EmptyState, {
1109
1104
  isLoading: isFetchingOptions,
1110
1105
  options: options,
@@ -27,8 +27,7 @@ export default class Suggestions extends React.PureComponent {
27
27
  avatarPalette,
28
28
  palette,
29
29
  htmlId,
30
- a11y,
31
- needMultiLineText
30
+ a11y
32
31
  } = this.props;
33
32
  const {
34
33
  ariaParentRole,
@@ -93,8 +92,7 @@ export default class Suggestions extends React.PureComponent {
93
92
  size: listItemSize,
94
93
  avatarPalette: avatarPalette,
95
94
  palette: palette,
96
- a11y: list_a11y,
97
- needMultiLineText: needMultiLineText
95
+ a11y: list_a11y
98
96
  });
99
97
  } else if (optionType === 'icon') {
100
98
  return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -114,8 +112,7 @@ export default class Suggestions extends React.PureComponent {
114
112
  iconSize: iconSize,
115
113
  size: listItemSize,
116
114
  palette: palette,
117
- a11y: list_a11y,
118
- needMultiLineText: needMultiLineText
115
+ a11y: list_a11y
119
116
  });
120
117
  }
121
118
 
@@ -134,8 +131,7 @@ export default class Suggestions extends React.PureComponent {
134
131
  active: isActive,
135
132
  size: listItemSize,
136
133
  palette: palette,
137
- a11y: list_a11y,
138
- needMultiLineText: needMultiLineText
134
+ a11y: list_a11y
139
135
  });
140
136
  })));
141
137
  }
@@ -117,8 +117,7 @@ export const MultiSelect_defaultProps = {
117
117
  keepSelectedOptions: false,
118
118
  selectedOptionsCount: 0,
119
119
  cardHeaderName: '',
120
- needResponsive: true,
121
- customProps: {}
120
+ needResponsive: true
122
121
  };
123
122
  export const MultiSelectHeader_defaultProps = {
124
123
  dataId: 'MultiSelectHeader'
@@ -162,6 +161,5 @@ export const SelectedOptions_defaultProps = {
162
161
  dataId: 'selectedOptions'
163
162
  };
164
163
  export const Suggestions_defaultProps = {
165
- a11y: {},
166
- needMultiLineText: false
164
+ a11y: {}
167
165
  };