@zohodesk/components 1.0.0-temp-252.3 → 1.0.0-temp-255

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 (98) hide show
  1. package/README.md +4 -3
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +0 -3
  3. package/assets/Appearance/light/mode/Component_LightMode.module.css +0 -3
  4. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +0 -3
  5. package/es/AppContainer/AppContainer.js +0 -2
  6. package/es/Avatar/Avatar.js +1 -2
  7. package/es/Button/css/cssJSLogic.js +4 -5
  8. package/es/DateTime/DateTime.js +3 -6
  9. package/es/DateTime/DateWidget.js +2 -5
  10. package/es/DateTime/YearView.js +5 -6
  11. package/es/DateTime/common.js +2 -9
  12. package/es/DateTime/dateFormatUtils/dateFormat.js +55 -76
  13. package/es/DateTime/dateFormatUtils/index.js +7 -12
  14. package/es/DateTime/dateFormatUtils/timeChange.js +3 -4
  15. package/es/DateTime/dateFormatUtils/yearChange.js +3 -4
  16. package/es/DropBox/DropBoxElement/css/cssJSLogic.js +5 -6
  17. package/es/Layout/utils.js +1 -2
  18. package/es/ListItem/ListContainer.js +4 -5
  19. package/es/Modal/Portal/Portal.js +4 -5
  20. package/es/MultiSelect/AdvancedGroupMultiSelect.js +91 -103
  21. package/es/MultiSelect/AdvancedMultiSelect.js +74 -80
  22. package/es/MultiSelect/MultiSelect.js +4 -13
  23. package/es/MultiSelect/Suggestions.js +14 -17
  24. package/es/Popup/Popup.js +1 -4
  25. package/es/Provider/IdProvider.js +4 -5
  26. package/es/Provider/LibraryContext.js +11 -12
  27. package/es/Provider/NumberGenerator/NumberGenerator.js +15 -17
  28. package/es/Provider/ZindexProvider.js +4 -5
  29. package/es/Responsive/CustomResponsive.js +8 -11
  30. package/es/Responsive/ResizeComponent.js +1 -3
  31. package/es/Responsive/Responsive.js +9 -12
  32. package/es/Responsive/sizeObservers.js +1 -5
  33. package/es/ResponsiveDropBox/ResponsiveDropBox.js +10 -14
  34. package/es/Select/GroupSelect.js +98 -103
  35. package/es/Select/Select.js +110 -129
  36. package/es/Select/Select.module.css +10 -37
  37. package/es/Select/SelectWithAvatar.js +91 -95
  38. package/es/Select/SelectWithIcon.js +104 -109
  39. package/es/Select/__tests__/Select.spec.js +6 -9
  40. package/es/Select/props/defaultProps.js +1 -2
  41. package/es/Select/props/propTypes.js +2 -4
  42. package/es/Tab/Tab.js +29 -30
  43. package/es/Tab/TabContent.js +16 -19
  44. package/es/Tab/TabContentWrapper.js +19 -22
  45. package/es/Tab/TabWrapper.js +15 -16
  46. package/es/Tab/Tabs.js +80 -87
  47. package/es/Typography/css/cssJSLogic.js +4 -5
  48. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -2
  49. package/es/utils/Common.js +10 -31
  50. package/es/utils/datetime/common.js +2 -6
  51. package/es/utils/dropDownUtils.js +7 -11
  52. package/es/utils/getInitial.js +1 -3
  53. package/es/v1/Button/Button.js +5 -3
  54. package/es/v1/Button/__tests__/Button.spec.js +5 -2
  55. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +8 -1
  56. package/es/v1/Button/css/cssJSLogic.js +11 -10
  57. package/es/v1/Label/css/cssJSLogic.js +4 -5
  58. package/es/v1/Switch/css/cssJSLogic.js +4 -5
  59. package/es/v1/helpers/colorHelpers/colorHelper.js +36 -44
  60. package/es/v1/helpers/colorHelpers/paletteUtilities.README.md +30 -30
  61. package/es/v1/{Button/_shared → shared}/Loader/Loader.js +3 -3
  62. package/es/v1/{Button/_shared → shared}/Loader/__tests__/Loader.spec.js +1 -1
  63. package/es/v1/shared/Loader/props/defaultProps.js +5 -0
  64. package/es/v1/{Button/_shared → shared}/Loader/props/propTypes.js +1 -1
  65. package/es/v1/{Button/_shared → shared}/SuccessTick/SuccessTick.js +3 -3
  66. package/es/v1/{Button/_shared → shared}/SuccessTick/__tests__/SuccessTick.spec.js +1 -1
  67. package/es/v1/shared/SuccessTick/props/defaultProps.js +5 -0
  68. package/es/v1/{Button/_shared → shared}/SuccessTick/props/propTypes.js +1 -1
  69. package/lib/AppContainer/AppContainer.js +0 -4
  70. package/lib/Select/Select.js +75 -89
  71. package/lib/Select/Select.module.css +10 -37
  72. package/lib/Select/props/defaultProps.js +1 -2
  73. package/lib/Select/props/propTypes.js +2 -4
  74. package/lib/v1/Button/Button.js +5 -3
  75. package/lib/v1/Button/__tests__/Button.spec.js +5 -2
  76. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +8 -1
  77. package/lib/v1/Button/css/cssJSLogic.js +9 -5
  78. package/lib/v1/helpers/colorHelpers/colorHelper.js +8 -5
  79. package/lib/v1/helpers/colorHelpers/paletteUtilities.README.md +30 -30
  80. package/lib/v1/{Button/_shared → shared}/Loader/Loader.js +5 -5
  81. package/lib/v1/{Button/_shared → shared}/Loader/__tests__/Loader.spec.js +1 -1
  82. package/lib/v1/{Button/_shared/SuccessTick → shared/Loader}/props/defaultProps.js +4 -1
  83. package/lib/v1/{Button/_shared → shared}/Loader/props/propTypes.js +1 -1
  84. package/lib/v1/{Button/_shared → shared}/SuccessTick/SuccessTick.js +5 -5
  85. package/lib/v1/{Button/_shared → shared}/SuccessTick/__tests__/SuccessTick.spec.js +1 -1
  86. package/lib/v1/{Button/_shared/Loader → shared/SuccessTick}/props/defaultProps.js +4 -1
  87. package/lib/v1/{Button/_shared → shared}/SuccessTick/props/propTypes.js +1 -1
  88. package/package.json +5 -5
  89. package/es/v1/Button/_shared/Loader/props/defaultProps.js +0 -4
  90. package/es/v1/Button/_shared/SuccessTick/props/defaultProps.js +0 -4
  91. /package/es/v1/{Button/_shared → shared}/Loader/Loader_v1.module.css +0 -0
  92. /package/es/v1/{Button/_shared → shared}/Loader/__tests__/__snapshots__/Loader.spec.js.snap +0 -0
  93. /package/es/v1/{Button/_shared → shared}/SuccessTick/SuccessTick_v1.module.css +0 -0
  94. /package/es/v1/{Button/_shared → shared}/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap +0 -0
  95. /package/lib/v1/{Button/_shared → shared}/Loader/Loader_v1.module.css +0 -0
  96. /package/lib/v1/{Button/_shared → shared}/Loader/__tests__/__snapshots__/Loader.spec.js.snap +0 -0
  97. /package/lib/v1/{Button/_shared → shared}/SuccessTick/SuccessTick_v1.module.css +0 -0
  98. /package/lib/v1/{Button/_shared → shared}/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap +0 -0
@@ -163,9 +163,7 @@ export default class ResizeComponent extends React.Component {
163
163
  }
164
164
  }
165
165
 
166
- constructChildren() {
167
- let dataCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
168
- let responsive = arguments.length > 1 ? arguments[1] : undefined;
166
+ constructChildren(dataCount = 0, responsive) {
169
167
  const {
170
168
  childrenList,
171
169
  getData
@@ -96,8 +96,7 @@ ResponsiveSender.defaultProps = { ...ResponsiveSender_defaultProps,
96
96
  };
97
97
  ResponsiveSender.contextType = ResponsiveContext;
98
98
  ResponsiveSender.propTypes = ResponsiveSender_propTypes;
99
- export function useResponsiveReceiver() {
100
- let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
99
+ export function useResponsiveReceiver(responsiveId = defaultResponsiveId) {
101
100
  const [_, forceUpdate] = useState();
102
101
  let totalContextData = useContext(ResponsiveContext);
103
102
  let contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId]; // NOTE: this for fallback of if responsive receiver id wrong
@@ -144,8 +143,7 @@ export function useResponsiveReceiver() {
144
143
  return value1 <= width && value2 >= width || breakPoint1 === breakPoint || breakPoint2 === breakPoint;
145
144
  },
146
145
 
147
- deviceOnly() {
148
- let breakPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
146
+ deviceOnly(breakPoints = []) {
149
147
  return breakPoints.includes(breakPoint);
150
148
  },
151
149
 
@@ -170,14 +168,13 @@ export function useResponsiveReceiver() {
170
168
  // ) : null;
171
169
  // }
172
170
 
173
- export function ResponsiveReceiver(_ref) {
174
- let {
175
- children,
176
- responsiveId,
177
- hiddenSizes,
178
- eleRef,
179
- domRefKey
180
- } = _ref;
171
+ export function ResponsiveReceiver({
172
+ children,
173
+ responsiveId,
174
+ hiddenSizes,
175
+ eleRef,
176
+ domRefKey
177
+ }) {
181
178
  const data = useResponsiveReceiver(responsiveId);
182
179
  const {
183
180
  breakPoint
@@ -75,11 +75,7 @@ export class Subscribale {
75
75
  this.subscribers.length && this.disconnect();
76
76
  }
77
77
 
78
- dispatch() {
79
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
80
- args[_key] = arguments[_key];
81
- }
82
-
78
+ dispatch(...args) {
83
79
  this.subscribers.forEach(subscriber => {
84
80
  subscriber(...args);
85
81
  });
@@ -13,10 +13,9 @@ export default class ResponsiveDropBox extends Component {
13
13
  this.responsiveFunc = this.responsiveFunc.bind(this);
14
14
  }
15
15
 
16
- responsiveFunc(_ref) {
17
- let {
18
- mediaQueryOR
19
- } = _ref;
16
+ responsiveFunc({
17
+ mediaQueryOR
18
+ }) {
20
19
  return {
21
20
  tabletMode: mediaQueryOR([{
22
21
  maxWidth: 700
@@ -50,16 +49,13 @@ export default class ResponsiveDropBox extends Component {
50
49
  }), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
51
50
  query: this.responsiveFunc,
52
51
  responsiveId: "Helmet"
53
- }, _ref2 => {
54
- let {
55
- tabletMode
56
- } = _ref2;
57
- return /*#__PURE__*/React.createElement(Container, {
58
- alignBox: alignBox,
59
- isCover: false,
60
- className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
61
- }, children);
62
- }));
52
+ }, ({
53
+ tabletMode
54
+ }) => /*#__PURE__*/React.createElement(Container, {
55
+ alignBox: alignBox,
56
+ isCover: false,
57
+ className: `${tabletMode ? style.dropBoxContainer : ''} ${tabletMode && isResponsivePadding ? style.boxPadding : ''} ${customResponsiveContainer}`
58
+ }, children)));
63
59
  }
64
60
 
65
61
  }
@@ -493,8 +493,7 @@ export class GroupSelectComponent extends PureComponent {
493
493
  isScrollReachedBottom && this.handleGetNextOptions();
494
494
  }
495
495
 
496
- handleFetchOptions(APICall) {
497
- let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
496
+ handleFetchOptions(APICall, searchStr = '') {
498
497
  // let funcArgs = args.slice(1, args.length);
499
498
  let {
500
499
  isFetchingOptions = false
@@ -537,10 +536,9 @@ export class GroupSelectComponent extends PureComponent {
537
536
  isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
538
537
  }
539
538
 
540
- responsiveFunc(_ref) {
541
- let {
542
- mediaQueryOR
543
- } = _ref;
539
+ responsiveFunc({
540
+ mediaQueryOR
541
+ }) {
544
542
  return {
545
543
  tabletMode: mediaQueryOR([{
546
544
  maxWidth: 700
@@ -716,107 +714,104 @@ export class GroupSelectComponent extends PureComponent {
716
714
  }, TextBoxProps)))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
717
715
  query: this.responsiveFunc,
718
716
  responsiveId: "Helmet"
719
- }, _ref2 => {
717
+ }, ({
718
+ tabletMode
719
+ }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
720
+ animationStyle: animationStyle,
721
+ boxPosition: position || `${defaultDropBoxPosition}Center`,
722
+ getRef: getContainerRef,
723
+ isActive: isPopupReady,
724
+ isAnimate: true,
725
+ isArrow: false,
726
+ onClick: removeClose,
727
+ needResponsive: needResponsive,
728
+ isPadding: false,
729
+ isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
730
+ positionsOffset: positionsOffset,
731
+ targetOffset: targetOffset,
732
+ isRestrictScroll: isRestrictScroll,
733
+ isResponsivePadding: getFooter ? false : true,
734
+ alignBox: "row",
735
+ dataId: `${dataId}_suggestionBox`,
736
+ customClass: {
737
+ customDropBox: dropBoxClass
738
+ }
739
+ }, isLoading ? /*#__PURE__*/React.createElement(Container, {
740
+ align: "both",
741
+ className: style.loader
742
+ }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
743
+ flexible: true
744
+ }, /*#__PURE__*/React.createElement(Card, {
745
+ customClass: style.box,
746
+ onScroll: this.handleScroll
747
+ }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
748
+ className: `${style.search} ${style[size]}`
749
+ }, /*#__PURE__*/React.createElement(TextBoxIcon, {
750
+ inputRef: this.searchInputRef,
751
+ maxLength: maxLength,
752
+ onChange: this.handleSearch,
753
+ onKeyDown: this.handleKeyDown,
754
+ placeHolder: searchBoxPlaceHolder,
755
+ size: searchBoxSize,
756
+ value: searchStr,
757
+ onClear: this.handleClearSearch,
758
+ a11y: {
759
+ ariaControls: setAriaId,
760
+ ariaAutocomplete: 'list',
761
+ ariaDescribedby: ariaErrorId
762
+ },
763
+ autoComplete: false,
764
+ dataId: `${dataId}_search`
765
+ }))) : null, /*#__PURE__*/React.createElement(CardContent, {
766
+ shrink: true,
767
+ customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
768
+ eleRef: this.suggestionContainerRef
769
+ }, suggestionGroups.length ? suggestionGroups.map(group => {
720
770
  let {
721
- tabletMode
722
- } = _ref2;
723
- return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
724
- animationStyle: animationStyle,
725
- boxPosition: position || `${defaultDropBoxPosition}Center`,
726
- getRef: getContainerRef,
727
- isActive: isPopupReady,
728
- isAnimate: true,
729
- isArrow: false,
730
- onClick: removeClose,
731
- needResponsive: needResponsive,
732
- isPadding: false,
733
- isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
734
- positionsOffset: positionsOffset,
735
- targetOffset: targetOffset,
736
- isRestrictScroll: isRestrictScroll,
737
- isResponsivePadding: getFooter ? false : true,
738
- alignBox: "row",
739
- dataId: `${dataId}_suggestionBox`,
740
- customClass: {
741
- customDropBox: dropBoxClass
771
+ id: groupId,
772
+ name: groupName,
773
+ options
774
+ } = group;
775
+ let hoverId = suggestionOptionIds[hoverIndex];
776
+ return /*#__PURE__*/React.createElement(React.Fragment, {
777
+ key: groupId
778
+ }, groupName && /*#__PURE__*/React.createElement("div", {
779
+ className: style.groupTitle
780
+ }, /*#__PURE__*/React.createElement(DropDownHeading, {
781
+ text: groupName,
782
+ a11y: {
783
+ role: 'heading'
742
784
  }
743
- }, isLoading ? /*#__PURE__*/React.createElement(Container, {
744
- align: "both",
745
- className: style.loader
746
- }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
747
- flexible: true
748
- }, /*#__PURE__*/React.createElement(Card, {
749
- customClass: style.box,
750
- onScroll: this.handleScroll
751
- }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
752
- className: `${style.search} ${style[size]}`
753
- }, /*#__PURE__*/React.createElement(TextBoxIcon, {
754
- inputRef: this.searchInputRef,
755
- maxLength: maxLength,
756
- onChange: this.handleSearch,
757
- onKeyDown: this.handleKeyDown,
758
- placeHolder: searchBoxPlaceHolder,
759
- size: searchBoxSize,
760
- value: searchStr,
761
- onClear: this.handleClearSearch,
785
+ })), /*#__PURE__*/React.createElement(Suggestions, _extends({
786
+ activeId: selectedId,
787
+ suggestions: options,
788
+ getRef: this.suggestionItemRef,
789
+ hoverId: hoverId,
790
+ onClick: this.handleChange,
791
+ onMouseEnter: this.handleMouseEnter,
792
+ selectedOptions: [selectedId],
793
+ needTick: needTick,
794
+ needBorder: false,
795
+ htmlId: setAriaId,
762
796
  a11y: {
763
- ariaControls: setAriaId,
764
- ariaAutocomplete: 'list',
765
- ariaDescribedby: ariaErrorId
797
+ ariaParentRole: 'listbox',
798
+ role: 'option'
766
799
  },
767
- autoComplete: false,
768
- dataId: `${dataId}_search`
769
- }))) : null, /*#__PURE__*/React.createElement(CardContent, {
770
- shrink: true,
771
- customClass: `${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
772
- eleRef: this.suggestionContainerRef
773
- }, suggestionGroups.length ? suggestionGroups.map(group => {
774
- let {
775
- id: groupId,
776
- name: groupName,
777
- options
778
- } = group;
779
- let hoverId = suggestionOptionIds[hoverIndex];
780
- return /*#__PURE__*/React.createElement(React.Fragment, {
781
- key: groupId
782
- }, groupName && /*#__PURE__*/React.createElement("div", {
783
- className: style.groupTitle
784
- }, /*#__PURE__*/React.createElement(DropDownHeading, {
785
- text: groupName,
786
- a11y: {
787
- role: 'heading'
788
- }
789
- })), /*#__PURE__*/React.createElement(Suggestions, _extends({
790
- activeId: selectedId,
791
- suggestions: options,
792
- getRef: this.suggestionItemRef,
793
- hoverId: hoverId,
794
- onClick: this.handleChange,
795
- onMouseEnter: this.handleMouseEnter,
796
- selectedOptions: [selectedId],
797
- needTick: needTick,
798
- needBorder: false,
799
- htmlId: setAriaId,
800
- a11y: {
801
- ariaParentRole: 'listbox',
802
- role: 'option'
803
- },
804
- dataId: `${dataId}_Options`
805
- }, SuggestionsProps)));
806
- }) : /*#__PURE__*/React.createElement(EmptyState, {
807
- options: revampedGroups,
808
- searchString: searchStr,
809
- suggestions: suggestionGroups,
810
- renderCustomEmptyState: renderCustomEmptyState,
811
- dataId: dataIdSrchEmptyMsg,
812
- isLoading: isFetchingOptions,
813
- i18nKeys: i18nKeys,
814
- htmlId: ariaErrorId
815
- }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
816
- isCover: false,
817
- align: "both"
818
- }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
819
- }) : null);
800
+ dataId: `${dataId}_Options`
801
+ }, SuggestionsProps)));
802
+ }) : /*#__PURE__*/React.createElement(EmptyState, {
803
+ options: revampedGroups,
804
+ searchString: searchStr,
805
+ suggestions: suggestionGroups,
806
+ renderCustomEmptyState: renderCustomEmptyState,
807
+ dataId: dataIdSrchEmptyMsg,
808
+ isLoading: isFetchingOptions,
809
+ i18nKeys: i18nKeys,
810
+ htmlId: ariaErrorId
811
+ }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
812
+ isCover: false,
813
+ align: "both"
814
+ }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)))) : null);
820
815
  }
821
816
 
822
817
  }
@@ -325,10 +325,9 @@ export class SelectComponent extends Component {
325
325
  needCloseOnSelect && this.handlePopupClose(e);
326
326
  }
327
327
 
328
- responsiveFunc(_ref) {
329
- let {
330
- mediaQueryOR
331
- } = _ref;
328
+ responsiveFunc({
329
+ mediaQueryOR
330
+ }) {
332
331
  return {
333
332
  tabletMode: mediaQueryOR([{
334
333
  maxWidth: 700
@@ -508,8 +507,7 @@ export class SelectComponent extends Component {
508
507
  isScrollReachedBottom && this.handleGetNextOptions();
509
508
  }
510
509
 
511
- handleFetchOptions(APICall) {
512
- let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
510
+ handleFetchOptions(APICall, searchStr = '') {
513
511
  // let funcArgs = args.slice(1, args.length);
514
512
  let {
515
513
  isFetchingOptions = false
@@ -724,14 +722,13 @@ export class SelectComponent extends Component {
724
722
  });
725
723
  }
726
724
 
727
- getInputFieldLineA11y(_ref2) {
728
- let {
729
- setAriaId,
730
- isReadOnly,
731
- isDisabled,
732
- isPopupOpen,
733
- inputFieldLineA11y
734
- } = _ref2;
725
+ getInputFieldLineA11y({
726
+ setAriaId,
727
+ isReadOnly,
728
+ isDisabled,
729
+ isPopupOpen,
730
+ inputFieldLineA11y
731
+ }) {
735
732
  return {
736
733
  tabIndex: 0,
737
734
  role: 'button',
@@ -813,8 +810,7 @@ export class SelectComponent extends Component {
813
810
  renderCustomSearchClearComponent,
814
811
  renderCustomSelectedValue,
815
812
  inputFieldLineA11y,
816
- customClass,
817
- renderCustomDropBoxHeader
813
+ customClass
818
814
  } = this.props;
819
815
  let {
820
816
  TextBoxIcon_i18n,
@@ -845,8 +841,7 @@ export class SelectComponent extends Component {
845
841
  } = customProps;
846
842
  const {
847
843
  dropBox: dropBoxClass = '',
848
- cardContent: cardContentClass = '',
849
- customDropBoxHeader: customDropBoxHeaderClass = ''
844
+ cardContent: cardContentClass = ''
850
845
  } = customClass;
851
846
  const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
852
847
  setAriaId,
@@ -998,118 +993,104 @@ export class SelectComponent extends Component {
998
993
  })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
999
994
  query: this.responsiveFunc,
1000
995
  responsiveId: "Helmet"
1001
- }, _ref3 => {
1002
- let {
1003
- tabletMode
1004
- } = _ref3;
1005
- return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
1006
- animationStyle: animationStyle,
1007
- boxPosition: position || `${defaultDropBoxPosition}`,
1008
- getRef: getContainerRef,
1009
- isActive: isPopupReady,
1010
- isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
1011
- ,
1012
- isArrow: false,
1013
- onClick: removeClose,
1014
- needResponsive: needResponsive,
1015
- dataId: `${dataId}_suggestions`,
1016
- size: boxSize,
1017
- isPadding: false,
1018
- isResponsivePadding: getFooter ? false : true,
1019
- alignBox: "row",
1020
- isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
1021
- positionsOffset: positionsOffset,
1022
- targetOffset: targetOffset,
1023
- isRestrictScroll: isRestrictScroll,
1024
- portalId: dropBoxPortalId,
1025
- customClass: {
1026
- customDropBox: `${dropBoxClass} ${renderCustomDropBoxHeader ? style.dropBoxWithCustomHeader : ''}`
1027
- }
1028
- }, (() => {
1029
- const dropdownContent = isLoading ? /*#__PURE__*/React.createElement(Container, {
1030
- align: "both",
1031
- className: style.loader
1032
- }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
1033
- flexible: true
1034
- }, /*#__PURE__*/React.createElement(Card, {
1035
- onScroll: this.handleScroll
1036
- }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
1037
- className: `${style.search} ${style[size]}`
1038
- }, /*#__PURE__*/React.createElement(TextBoxIcon, {
1039
- a11y: {
1040
- ariaControls: setAriaId,
1041
- ariaAutocomplete: 'list',
1042
- ariaDescribedby: ariaErrorId
1043
- },
1044
- inputRef: this.searchInputRef,
1045
- maxLength: maxLength,
1046
- onChange: this.handleSearch,
1047
- onKeyDown: this.handleKeyDown,
1048
- placeHolder: searchBoxPlaceHolder,
1049
- size: searchBoxSize,
1050
- value: searchStr,
1051
- onClear: this.handleClearSearch,
1052
- dataId: `${dataId}_search`,
1053
- i18nKeys: TextBoxIcon_i18n,
1054
- autoComplete: autoComplete,
1055
- customProps: {
1056
- TextBoxProps: DropdownSearchTextBoxProps
1057
- },
1058
- renderCustomClearComponent: renderCustomSearchClearComponent
1059
- }))) : null, /*#__PURE__*/React.createElement(CardContent, {
1060
- shrink: true,
1061
- customClass: `
996
+ }, ({
997
+ tabletMode
998
+ }) => /*#__PURE__*/React.createElement(ResponsiveDropBox, {
999
+ animationStyle: animationStyle,
1000
+ boxPosition: position || `${defaultDropBoxPosition}`,
1001
+ getRef: getContainerRef,
1002
+ isActive: isPopupReady,
1003
+ isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
1004
+ ,
1005
+ isArrow: false,
1006
+ onClick: removeClose,
1007
+ needResponsive: needResponsive,
1008
+ dataId: `${dataId}_suggestions`,
1009
+ size: boxSize,
1010
+ isPadding: false,
1011
+ isResponsivePadding: getFooter ? false : true,
1012
+ alignBox: "row",
1013
+ isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
1014
+ positionsOffset: positionsOffset,
1015
+ targetOffset: targetOffset,
1016
+ isRestrictScroll: isRestrictScroll,
1017
+ portalId: dropBoxPortalId,
1018
+ customClass: {
1019
+ customDropBox: dropBoxClass
1020
+ }
1021
+ }, isLoading ? /*#__PURE__*/React.createElement(Container, {
1022
+ align: "both",
1023
+ className: style.loader
1024
+ }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
1025
+ flexible: true
1026
+ }, /*#__PURE__*/React.createElement(Card, {
1027
+ onScroll: this.handleScroll
1028
+ }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
1029
+ className: `${style.search} ${style[size]}`
1030
+ }, /*#__PURE__*/React.createElement(TextBoxIcon, {
1031
+ a11y: {
1032
+ ariaControls: setAriaId,
1033
+ ariaAutocomplete: 'list',
1034
+ ariaDescribedby: ariaErrorId
1035
+ },
1036
+ inputRef: this.searchInputRef,
1037
+ maxLength: maxLength,
1038
+ onChange: this.handleSearch,
1039
+ onKeyDown: this.handleKeyDown,
1040
+ placeHolder: searchBoxPlaceHolder,
1041
+ size: searchBoxSize,
1042
+ value: searchStr,
1043
+ onClear: this.handleClearSearch,
1044
+ dataId: `${dataId}_search`,
1045
+ i18nKeys: TextBoxIcon_i18n,
1046
+ autoComplete: autoComplete,
1047
+ customProps: {
1048
+ TextBoxProps: DropdownSearchTextBoxProps
1049
+ },
1050
+ renderCustomClearComponent: renderCustomSearchClearComponent
1051
+ }))) : null, /*#__PURE__*/React.createElement(CardContent, {
1052
+ shrink: true,
1053
+ customClass: `
1062
1054
  ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
1063
- eleRef: this.suggestionContainerRef
1064
- }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
1065
- key: searchStr.trim(),
1066
- activeId: selectedId,
1067
- isVirtualizerEnabled: isVirtualizerEnabled,
1068
- getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
1069
- setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
1070
- suggestions: suggestions,
1071
- getRef: this.suggestionItemRef,
1072
- hoverOption: hoverIndex,
1073
- onClick: this.handleChange,
1074
- onMouseEnter: this.handleMouseEnter,
1075
- dataId: `${dataId}_Options`,
1076
- needTick: needTick,
1077
- needBorder: needListBorder,
1078
- selectedOptions: [selectedId],
1079
- className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
1080
- listItemSize: listItemSize,
1081
- htmlId: setAriaId,
1082
- a11y: {
1083
- ariaParentRole: 'listbox',
1084
- role: 'option'
1085
- }
1086
- }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
1087
- isLoading: isFetchingOptions,
1088
- options: options,
1089
- searchString: searchStr,
1090
- suggestions: suggestions,
1091
- dataId: dataId,
1092
- renderCustomEmptyState: renderCustomEmptyState,
1093
- getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
1094
- i18nKeys: i18nKeys,
1095
- htmlId: ariaErrorId
1096
- }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
1097
- isCover: false,
1098
- align: "both"
1099
- }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
1100
- flexible: true
1101
- }, getChildren()));
1102
- return renderCustomDropBoxHeader ? /*#__PURE__*/React.createElement("div", {
1103
- className: style.dropBoxListContainer
1104
- }, /*#__PURE__*/React.createElement("div", {
1105
- className: `${customDropBoxHeaderClass} ${style.customDropBoxHeaderContainer}`
1106
- }, renderNode(renderCustomDropBoxHeader, {
1107
- closePopup: this.handlePopupClose
1108
- })), /*#__PURE__*/React.createElement("div", {
1109
- className: style.dropdownOptions
1110
- }, dropdownContent)) : dropdownContent;
1111
- })());
1112
- }) : null);
1055
+ eleRef: this.suggestionContainerRef
1056
+ }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
1057
+ key: searchStr.trim(),
1058
+ activeId: selectedId,
1059
+ isVirtualizerEnabled: isVirtualizerEnabled,
1060
+ getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
1061
+ setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
1062
+ suggestions: suggestions,
1063
+ getRef: this.suggestionItemRef,
1064
+ hoverOption: hoverIndex,
1065
+ onClick: this.handleChange,
1066
+ onMouseEnter: this.handleMouseEnter,
1067
+ dataId: `${dataId}_Options`,
1068
+ needTick: needTick,
1069
+ needBorder: needListBorder,
1070
+ selectedOptions: [selectedId],
1071
+ className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
1072
+ listItemSize: listItemSize,
1073
+ htmlId: setAriaId,
1074
+ a11y: {
1075
+ ariaParentRole: 'listbox',
1076
+ role: 'option'
1077
+ }
1078
+ }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
1079
+ isLoading: isFetchingOptions,
1080
+ options: options,
1081
+ searchString: searchStr,
1082
+ suggestions: suggestions,
1083
+ dataId: dataId,
1084
+ renderCustomEmptyState: renderCustomEmptyState,
1085
+ getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
1086
+ i18nKeys: i18nKeys,
1087
+ htmlId: ariaErrorId
1088
+ }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
1089
+ isCover: false,
1090
+ align: "both"
1091
+ }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
1092
+ flexible: true
1093
+ }, getChildren())))) : null);
1113
1094
  }
1114
1095
 
1115
1096
  }