@zohodesk/components 1.6.14 → 1.6.16
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.
- package/README.md +12 -0
- package/es/Avatar/Avatar.js +1 -2
- package/es/Button/css/cssJSLogic.js +4 -5
- package/es/DateTime/DateTime.js +3 -6
- package/es/DateTime/DateWidget.js +34 -11
- package/es/DateTime/YearView.js +5 -6
- package/es/DateTime/common.js +2 -9
- package/es/DateTime/dateFormatUtils/dateFormat.js +55 -76
- package/es/DateTime/dateFormatUtils/index.js +7 -12
- package/es/DateTime/dateFormatUtils/timeChange.js +3 -4
- package/es/DateTime/dateFormatUtils/yearChange.js +3 -4
- package/es/DropBox/DropBoxElement/css/cssJSLogic.js +5 -6
- package/es/Layout/utils.js +1 -2
- package/es/ListItem/ListContainer.js +4 -5
- package/es/Modal/Portal/Portal.js +4 -5
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +91 -103
- package/es/MultiSelect/AdvancedMultiSelect.js +74 -80
- package/es/MultiSelect/MultiSelect.js +4 -13
- package/es/MultiSelect/Suggestions.js +14 -17
- package/es/Popup/Popup.js +1 -4
- package/es/Provider/IdProvider.js +4 -5
- package/es/Provider/LibraryContext.js +11 -12
- package/es/Provider/NumberGenerator/NumberGenerator.js +15 -17
- package/es/Provider/ZindexProvider.js +4 -5
- package/es/Responsive/CustomResponsive.js +8 -11
- package/es/Responsive/ResizeComponent.js +1 -3
- package/es/Responsive/Responsive.js +9 -12
- package/es/Responsive/sizeObservers.js +1 -5
- package/es/ResponsiveDropBox/ResponsiveDropBox.js +10 -14
- package/es/Select/GroupSelect.js +98 -103
- package/es/Select/Select.js +110 -114
- package/es/Select/SelectWithAvatar.js +91 -95
- package/es/Select/SelectWithIcon.js +104 -109
- package/es/Select/__tests__/Select.spec.js +6 -9
- package/es/Tab/Tab.js +29 -30
- package/es/Tab/TabContent.js +16 -19
- package/es/Tab/TabContentWrapper.js +19 -22
- package/es/Tab/TabWrapper.js +15 -16
- package/es/Tab/Tabs.js +80 -87
- package/es/Typography/css/cssJSLogic.js +4 -5
- package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -2
- package/es/utils/Common.js +10 -31
- package/es/utils/datetime/common.js +12 -9
- package/es/utils/dropDownUtils.js +7 -11
- package/es/utils/getInitial.js +1 -3
- package/es/v1/Button/css/cssJSLogic.js +4 -8
- package/es/v1/Label/css/cssJSLogic.js +4 -5
- package/es/v1/Switch/css/cssJSLogic.js +4 -5
- package/es/v1/helpers/colorHelpers/colorHelper.js +28 -39
- package/lib/DateTime/DateWidget.js +33 -6
- package/lib/Select/Select.js +3 -1
- package/lib/utils/datetime/common.js +10 -2
- package/package.json +2 -2
|
@@ -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(
|
|
841
|
-
|
|
842
|
-
|
|
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
|
-
},
|
|
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
|
-
|
|
1017
|
-
} =
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
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: '
|
|
1036
|
-
ariaMultiselectable: true
|
|
1071
|
+
role: 'option'
|
|
1037
1072
|
},
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
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
|
}
|
|
@@ -83,9 +83,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
|
|
|
83
83
|
return suggestions;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
handleChange() {
|
|
87
|
-
let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
88
|
-
let e = arguments.length > 1 ? arguments[1] : undefined;
|
|
86
|
+
handleChange(selectedOptions = [], e) {
|
|
89
87
|
const {
|
|
90
88
|
optionsNormalize,
|
|
91
89
|
searchStr
|
|
@@ -333,10 +331,9 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
|
|
|
333
331
|
});
|
|
334
332
|
}
|
|
335
333
|
|
|
336
|
-
responsiveFunc(
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
} = _ref;
|
|
334
|
+
responsiveFunc({
|
|
335
|
+
mediaQueryOR
|
|
336
|
+
}) {
|
|
340
337
|
return {
|
|
341
338
|
tabletMode: mediaQueryOR([{
|
|
342
339
|
maxWidth: 700
|
|
@@ -514,79 +511,76 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
|
|
|
514
511
|
}))) : null))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
|
|
515
512
|
query: this.responsiveFunc,
|
|
516
513
|
responsiveId: "Helmet"
|
|
517
|
-
},
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
align: "both"
|
|
588
|
-
}, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
|
|
589
|
-
}) : null);
|
|
514
|
+
}, ({
|
|
515
|
+
tabletMode
|
|
516
|
+
}) => /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
|
|
517
|
+
animationStyle: animationStyle,
|
|
518
|
+
boxPosition: position || `${defaultDropBoxPosition}Center`,
|
|
519
|
+
getRef: getContainerRef,
|
|
520
|
+
isActive: isPopupReady,
|
|
521
|
+
isAnimate: isAnimate,
|
|
522
|
+
isArrow: false,
|
|
523
|
+
onClick: removeClose,
|
|
524
|
+
isPadding: false,
|
|
525
|
+
isBoxPaddingNeed: isBoxPaddingNeed,
|
|
526
|
+
htmlId: setAriaId,
|
|
527
|
+
a11y: {
|
|
528
|
+
role: 'listbox',
|
|
529
|
+
ariaMultiselectable: true
|
|
530
|
+
},
|
|
531
|
+
dataId: `${dataIdMultiSelectComp}_dropbox`,
|
|
532
|
+
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
|
|
533
|
+
positionsOffset: positionsOffset,
|
|
534
|
+
targetOffset: targetOffset,
|
|
535
|
+
isRestrictScroll: isRestrictScroll
|
|
536
|
+
}, DropBoxProps, {
|
|
537
|
+
alignBox: "row",
|
|
538
|
+
isResponsivePadding: getFooter ? false : true
|
|
539
|
+
}), isLoading ? /*#__PURE__*/React.createElement(Container, {
|
|
540
|
+
align: "both",
|
|
541
|
+
className: style.loader
|
|
542
|
+
}, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
|
|
543
|
+
flexible: true
|
|
544
|
+
}, /*#__PURE__*/React.createElement(Card, {
|
|
545
|
+
customClass: style.box,
|
|
546
|
+
onScroll: this.handleScroll
|
|
547
|
+
}, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
|
|
548
|
+
onSelect: this.handleSelectAll,
|
|
549
|
+
selectAllText: selectAllText,
|
|
550
|
+
suggestions: suggestions,
|
|
551
|
+
dataId: dataIdSelectAllEle
|
|
552
|
+
})) : null, /*#__PURE__*/React.createElement(CardContent, {
|
|
553
|
+
shrink: true,
|
|
554
|
+
customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
|
|
555
|
+
eleRef: this.suggestionContainerRef
|
|
556
|
+
}, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
|
|
557
|
+
suggestions: suggestions,
|
|
558
|
+
selectedOptions: allselectedOptionIds,
|
|
559
|
+
getRef: this.suggestionItemRef,
|
|
560
|
+
hoverOption: hoverOption,
|
|
561
|
+
onClick: this.handleSelectOption,
|
|
562
|
+
onMouseEnter: this.handleMouseEnter,
|
|
563
|
+
needTick: true,
|
|
564
|
+
listItemSize: listItemSize,
|
|
565
|
+
a11y: {
|
|
566
|
+
role: 'option'
|
|
567
|
+
},
|
|
568
|
+
dataId: `${dataIdMultiSelectComp}_Options`,
|
|
569
|
+
limit: limit,
|
|
570
|
+
limitReachedMessage: limitReachedMessage
|
|
571
|
+
}, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
572
|
+
isLoading: isFetchingOptions,
|
|
573
|
+
options: options,
|
|
574
|
+
searchString: searchStr,
|
|
575
|
+
suggestions: suggestions,
|
|
576
|
+
renderCustomEmptyState: renderCustomEmptyState,
|
|
577
|
+
dataId: dataIdLoading,
|
|
578
|
+
i18nKeys: i18nKeys,
|
|
579
|
+
htmlId: ariaErrorId
|
|
580
|
+
}), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
|
|
581
|
+
isCover: false,
|
|
582
|
+
align: "both"
|
|
583
|
+
}, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)))) : null);
|
|
590
584
|
}
|
|
591
585
|
|
|
592
586
|
}
|
|
@@ -613,11 +613,7 @@ export class MultiSelectComponent extends React.Component {
|
|
|
613
613
|
}
|
|
614
614
|
}
|
|
615
615
|
|
|
616
|
-
handleFetchOptions() {
|
|
617
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
618
|
-
args[_key] = arguments[_key];
|
|
619
|
-
}
|
|
620
|
-
|
|
616
|
+
handleFetchOptions(...args) {
|
|
621
617
|
const [APICall, searchStr] = args;
|
|
622
618
|
const {
|
|
623
619
|
isFetchingOptions
|
|
@@ -683,9 +679,7 @@ export class MultiSelectComponent extends React.Component {
|
|
|
683
679
|
});
|
|
684
680
|
}
|
|
685
681
|
|
|
686
|
-
handleClickSelectedOption() {
|
|
687
|
-
let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
688
|
-
let e = arguments.length > 1 ? arguments[1] : undefined;
|
|
682
|
+
handleClickSelectedOption(id = '', e) {
|
|
689
683
|
const {
|
|
690
684
|
selectedOptions
|
|
691
685
|
} = this.props;
|
|
@@ -761,9 +755,7 @@ export class MultiSelectComponent extends React.Component {
|
|
|
761
755
|
isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
|
|
762
756
|
}
|
|
763
757
|
|
|
764
|
-
handleChange() {
|
|
765
|
-
let selectedOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
766
|
-
let e = arguments.length > 1 ? arguments[1] : undefined;
|
|
758
|
+
handleChange(selectedOptions = [], e) {
|
|
767
759
|
const {
|
|
768
760
|
optionsNormalize
|
|
769
761
|
} = this.state;
|
|
@@ -912,8 +904,7 @@ export class MultiSelectComponent extends React.Component {
|
|
|
912
904
|
this.suggestionContainer && refFunc(this.suggestionContainer);
|
|
913
905
|
}
|
|
914
906
|
|
|
915
|
-
getSelectionUI() {
|
|
916
|
-
let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
907
|
+
getSelectionUI(isResponsive = false) {
|
|
917
908
|
let {
|
|
918
909
|
size,
|
|
919
910
|
needBorder,
|
|
@@ -14,12 +14,11 @@ import { Container, Box } from "../Layout";
|
|
|
14
14
|
import { DUMMY_OBJECT, DUMMY_ARRAY } from "../utils/Common";
|
|
15
15
|
import { renderNode } from '@zohodesk/utils';
|
|
16
16
|
|
|
17
|
-
function SuggestionsVirtualizerContainer(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
} = _ref;
|
|
17
|
+
function SuggestionsVirtualizerContainer({
|
|
18
|
+
eleRef,
|
|
19
|
+
children,
|
|
20
|
+
setVirtualizerContainerRefFunction
|
|
21
|
+
}) {
|
|
23
22
|
useMemo(() => {
|
|
24
23
|
typeof setVirtualizerContainerRefFunction === 'function' && setVirtualizerContainerRefFunction(eleRef);
|
|
25
24
|
}, [eleRef, setVirtualizerContainerRefFunction]);
|
|
@@ -33,12 +32,11 @@ export default class Suggestions extends React.PureComponent {
|
|
|
33
32
|
this.renderVirtualizerSuggestionListItem = this.renderVirtualizerSuggestionListItem.bind(this);
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
renderSuggestionList(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
} = _ref2;
|
|
35
|
+
renderSuggestionList({
|
|
36
|
+
suggestion,
|
|
37
|
+
index,
|
|
38
|
+
ref
|
|
39
|
+
}) {
|
|
42
40
|
const {
|
|
43
41
|
getRef,
|
|
44
42
|
hoverOption,
|
|
@@ -170,11 +168,10 @@ export default class Suggestions extends React.PureComponent {
|
|
|
170
168
|
}));
|
|
171
169
|
}
|
|
172
170
|
|
|
173
|
-
renderVirtualizerSuggestionListItem(
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
} = _ref3;
|
|
171
|
+
renderVirtualizerSuggestionListItem({
|
|
172
|
+
index,
|
|
173
|
+
ref
|
|
174
|
+
}) {
|
|
178
175
|
const {
|
|
179
176
|
suggestions
|
|
180
177
|
} = this.props;
|
package/es/Popup/Popup.js
CHANGED
|
@@ -5,10 +5,7 @@ import { DUMMY_ARRAY, DUMMY_OBJECT } from "./../utils/Common.js";
|
|
|
5
5
|
import Registry from '@zohodesk/dotkit/es/react/components/Popup/Registry.js';
|
|
6
6
|
global.closeGroupPopups = Registry.closeAllPopupsInGroup;
|
|
7
7
|
|
|
8
|
-
const Popup =
|
|
9
|
-
let group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
|
|
10
|
-
let needResizeHandling = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
11
|
-
let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DUMMY_OBJECT;
|
|
8
|
+
const Popup = (Component, group = 'global', needResizeHandling = true, options = DUMMY_OBJECT) => {
|
|
12
9
|
const {
|
|
13
10
|
isAbsolutePositioningNeeded = true,
|
|
14
11
|
isArrow = false,
|
|
@@ -30,11 +30,10 @@ function getDeletedIndexes() {
|
|
|
30
30
|
return deletedIndexes;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
function callback(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
} = _ref;
|
|
33
|
+
function callback({
|
|
34
|
+
globalId,
|
|
35
|
+
deletedIndexes
|
|
36
|
+
}) {
|
|
38
37
|
setGlobalId(globalId);
|
|
39
38
|
setDeletedIndexes(deletedIndexes);
|
|
40
39
|
}
|
|
@@ -3,18 +3,17 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import LibraryContextInit from "./LibraryContextInit";
|
|
4
4
|
import { getLibraryConfig } from "./Config";
|
|
5
5
|
|
|
6
|
-
const LibraryContextProvider =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} = _ref;
|
|
6
|
+
const LibraryContextProvider = ({
|
|
7
|
+
isReducedMotion,
|
|
8
|
+
direction,
|
|
9
|
+
coloredTagVariant,
|
|
10
|
+
hasTagColorInheritedToText,
|
|
11
|
+
shouldIndicateSwitchState,
|
|
12
|
+
shouldStrikeThroughDisabledButton,
|
|
13
|
+
labelRequiredType,
|
|
14
|
+
shouldHighlightRequiredLabel,
|
|
15
|
+
children
|
|
16
|
+
}) => {
|
|
18
17
|
const [value, setValue] = useState({
|
|
19
18
|
isReducedMotion,
|
|
20
19
|
direction,
|
|
@@ -50,14 +50,13 @@ export function decreaseGlobalIds(numbers, deletedIndexes, globalId) {
|
|
|
50
50
|
deletedIndexes
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
|
-
export function useNumberGenerator(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
} = _ref;
|
|
53
|
+
export function useNumberGenerator({
|
|
54
|
+
getGlobalId,
|
|
55
|
+
prefix,
|
|
56
|
+
getGlobalPrefix,
|
|
57
|
+
getDeletedIndexes,
|
|
58
|
+
callback
|
|
59
|
+
}) {
|
|
61
60
|
let presentValues = useRef([]),
|
|
62
61
|
presentIndex = useRef(0);
|
|
63
62
|
prefix = typeof prefix === 'undefined' ? '' : `${prefix}_`;
|
|
@@ -84,15 +83,14 @@ export function useNumberGenerator(_ref) {
|
|
|
84
83
|
presentIndex.current = -1;
|
|
85
84
|
return getNextId;
|
|
86
85
|
}
|
|
87
|
-
export function getNumberGenerators(
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
} = _ref2;
|
|
86
|
+
export function getNumberGenerators({
|
|
87
|
+
Component,
|
|
88
|
+
prefix,
|
|
89
|
+
getGlobalPrefix,
|
|
90
|
+
getGlobalId,
|
|
91
|
+
getDeletedIndexes,
|
|
92
|
+
callback
|
|
93
|
+
}) {
|
|
96
94
|
let presentIndex = 0,
|
|
97
95
|
presentValues = [],
|
|
98
96
|
{
|
|
@@ -27,11 +27,10 @@ function getDeletedIndexes() {
|
|
|
27
27
|
return deletedIndexes;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
function callback(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
} = _ref;
|
|
30
|
+
function callback({
|
|
31
|
+
globalId,
|
|
32
|
+
deletedIndexes
|
|
33
|
+
}) {
|
|
35
34
|
setInitialZIndex(globalId);
|
|
36
35
|
setDeletedIndexes(deletedIndexes);
|
|
37
36
|
}
|
|
@@ -94,9 +94,7 @@ ResponsiveSender.defaultProps = { ...CustomResponsiveSender_defaultProps,
|
|
|
94
94
|
};
|
|
95
95
|
ResponsiveSender.contextType = ResponsiveContext;
|
|
96
96
|
ResponsiveSender.propTypes = CustomResponsiveSender_propTypes;
|
|
97
|
-
export function useResponsiveReceiver() {
|
|
98
|
-
let responsiveId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultResponsiveId;
|
|
99
|
-
let query = arguments.length > 1 ? arguments[1] : undefined;
|
|
97
|
+
export function useResponsiveReceiver(responsiveId = defaultResponsiveId, query) {
|
|
100
98
|
const [, forceUpdate] = useState();
|
|
101
99
|
const totalContextData = useContext(ResponsiveContext);
|
|
102
100
|
const validSizeContextData = totalContextData[validSizeResponsiveId];
|
|
@@ -174,14 +172,13 @@ export function useResponsiveReceiver() {
|
|
|
174
172
|
updateLatestData();
|
|
175
173
|
return data.current;
|
|
176
174
|
}
|
|
177
|
-
export function ResponsiveReceiver(
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
} = _ref;
|
|
175
|
+
export function ResponsiveReceiver({
|
|
176
|
+
children,
|
|
177
|
+
responsiveId,
|
|
178
|
+
query,
|
|
179
|
+
eleRef,
|
|
180
|
+
domRefKey
|
|
181
|
+
}) {
|
|
185
182
|
const data = useResponsiveReceiver(responsiveId, query);
|
|
186
183
|
const child = children(data);
|
|
187
184
|
return eleRef ? /*#__PURE__*/React.createElement(DOMRefWrapper, {
|