@zohodesk/components 1.2.30 → 1.2.31
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 +4 -0
- package/es/Select/GroupSelect.js +11 -6
- package/es/Select/Select.js +0 -1
- package/es/Select/props/defaultProps.js +1 -0
- package/es/v1/Select/GroupSelect.js +11 -6
- package/es/v1/Select/Select.js +0 -1
- package/es/v1/Select/props/defaultProps.js +1 -0
- package/lib/Select/GroupSelect.js +11 -6
- package/lib/Select/Select.js +0 -2
- package/lib/Select/props/defaultProps.js +1 -0
- package/lib/v1/Select/GroupSelect.js +11 -6
- package/lib/v1/Select/Select.js +0 -2
- package/lib/v1/Select/props/defaultProps.js +1 -0
- package/package.json +3 -3
- package/result.json +1 -1
package/README.md
CHANGED
|
@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
|
|
|
32
32
|
- TextBoxIcon
|
|
33
33
|
- Tooltip
|
|
34
34
|
|
|
35
|
+
# 1.2.31
|
|
36
|
+
|
|
37
|
+
- **GroupSelect** - dataId Supported for all main places. Set the default value for dataId prop to 'GroupSelect'.
|
|
38
|
+
|
|
35
39
|
# 1.2.30
|
|
36
40
|
|
|
37
41
|
- **MultiSelect** - needResponsive default Prop Setted as true as before.
|
package/es/Select/GroupSelect.js
CHANGED
|
@@ -618,7 +618,9 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
618
618
|
}, /*#__PURE__*/React.createElement("div", {
|
|
619
619
|
className: `${className ? className : ''}`,
|
|
620
620
|
onClick: isDisabled || isReadOnly ? null : this.togglePopup,
|
|
621
|
-
ref: getTargetRef
|
|
621
|
+
ref: getTargetRef,
|
|
622
|
+
"data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
|
|
623
|
+
"data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
|
|
622
624
|
}, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
|
|
623
625
|
isDisabled: isDisabled,
|
|
624
626
|
iconRotated: isPopupOpen,
|
|
@@ -633,7 +635,7 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
633
635
|
value: selected,
|
|
634
636
|
variant: textBoxVariant,
|
|
635
637
|
needReadOnlyStyle: isReadOnly ? true : false,
|
|
636
|
-
dataId: dataId
|
|
638
|
+
dataId: `${dataId}_textBox`,
|
|
637
639
|
onKeyPress: this.handleValueInputChange,
|
|
638
640
|
needEffect: isReadOnly || isDisabled ? false : true,
|
|
639
641
|
borderColor: borderColor,
|
|
@@ -670,7 +672,7 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
670
672
|
value: selected,
|
|
671
673
|
variant: textBoxVariant,
|
|
672
674
|
needReadOnlyStyle: isReadOnly ? true : false,
|
|
673
|
-
dataId: dataId
|
|
675
|
+
dataId: `${dataId}_textBox`,
|
|
674
676
|
onKeyPress: this.handleValueInputChange,
|
|
675
677
|
borderColor: borderColor,
|
|
676
678
|
htmlId: htmlId,
|
|
@@ -704,7 +706,8 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
704
706
|
needResponsive: needResponsive,
|
|
705
707
|
isPadding: false,
|
|
706
708
|
isResponsivePadding: getFooter ? false : true,
|
|
707
|
-
alignBox: "row"
|
|
709
|
+
alignBox: "row",
|
|
710
|
+
dataId: `${dataId}_suggestionBox`
|
|
708
711
|
}, isLoading ? /*#__PURE__*/React.createElement(Container, {
|
|
709
712
|
align: "both",
|
|
710
713
|
className: style.loader
|
|
@@ -729,7 +732,8 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
729
732
|
ariaAutocomplete: 'list',
|
|
730
733
|
ariaDescribedby: ariaErrorId
|
|
731
734
|
},
|
|
732
|
-
autoComplete: false
|
|
735
|
+
autoComplete: false,
|
|
736
|
+
dataId: `${dataId}_search`
|
|
733
737
|
}))) : null, /*#__PURE__*/React.createElement(CardContent, {
|
|
734
738
|
shrink: true,
|
|
735
739
|
customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
|
|
@@ -764,7 +768,8 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
764
768
|
a11y: {
|
|
765
769
|
ariaParentRole: 'listbox',
|
|
766
770
|
role: 'option'
|
|
767
|
-
}
|
|
771
|
+
},
|
|
772
|
+
dataId: `${dataId}_Options`
|
|
768
773
|
}));
|
|
769
774
|
}) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
770
775
|
options: revampedGroups,
|
package/es/Select/Select.js
CHANGED
|
@@ -23,7 +23,6 @@ import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, ge
|
|
|
23
23
|
/**** CSS ****/
|
|
24
24
|
|
|
25
25
|
import style from './Select.module.css';
|
|
26
|
-
import { getLibraryConfig } from '../Provider/Config';
|
|
27
26
|
/* eslint-disable react/no-deprecated */
|
|
28
27
|
|
|
29
28
|
/* eslint-disable react/no-unused-prop-types */
|
|
@@ -620,7 +620,9 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
620
620
|
}, /*#__PURE__*/React.createElement("div", {
|
|
621
621
|
className: `${className ? className : ''}`,
|
|
622
622
|
onClick: isDisabled || isReadOnly ? null : this.togglePopup,
|
|
623
|
-
ref: getTargetRef
|
|
623
|
+
ref: getTargetRef,
|
|
624
|
+
"data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
|
|
625
|
+
"data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
|
|
624
626
|
}, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
|
|
625
627
|
isDisabled: isDisabled,
|
|
626
628
|
iconRotated: isPopupOpen,
|
|
@@ -635,7 +637,7 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
635
637
|
value: selected,
|
|
636
638
|
variant: textBoxVariant,
|
|
637
639
|
needReadOnlyStyle: isReadOnly ? true : false,
|
|
638
|
-
dataId: dataId
|
|
640
|
+
dataId: `${dataId}_textBox`,
|
|
639
641
|
onKeyPress: this.handleValueInputChange,
|
|
640
642
|
needEffect: isReadOnly || isDisabled ? false : true,
|
|
641
643
|
borderColor: borderColor,
|
|
@@ -672,7 +674,7 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
672
674
|
value: selected,
|
|
673
675
|
variant: textBoxVariant,
|
|
674
676
|
needReadOnlyStyle: isReadOnly ? true : false,
|
|
675
|
-
dataId: dataId
|
|
677
|
+
dataId: `${dataId}_textBox`,
|
|
676
678
|
onKeyPress: this.handleValueInputChange,
|
|
677
679
|
borderColor: borderColor,
|
|
678
680
|
htmlId: htmlId,
|
|
@@ -706,7 +708,8 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
706
708
|
needResponsive: needResponsive,
|
|
707
709
|
isPadding: false,
|
|
708
710
|
isResponsivePadding: getFooter ? false : true,
|
|
709
|
-
alignBox: "row"
|
|
711
|
+
alignBox: "row",
|
|
712
|
+
dataId: `${dataId}_suggestionBox`
|
|
710
713
|
}, isLoading ? /*#__PURE__*/React.createElement(Container, {
|
|
711
714
|
align: "both",
|
|
712
715
|
className: style.loader
|
|
@@ -731,7 +734,8 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
731
734
|
ariaAutocomplete: 'list',
|
|
732
735
|
ariaDescribedby: ariaErrorId
|
|
733
736
|
},
|
|
734
|
-
autoComplete: false
|
|
737
|
+
autoComplete: false,
|
|
738
|
+
dataId: `${dataId}_search`
|
|
735
739
|
}))) : null, /*#__PURE__*/React.createElement(CardContent, {
|
|
736
740
|
shrink: true,
|
|
737
741
|
customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
|
|
@@ -766,7 +770,8 @@ export class GroupSelectComponent extends PureComponent {
|
|
|
766
770
|
a11y: {
|
|
767
771
|
ariaParentRole: 'listbox',
|
|
768
772
|
role: 'option'
|
|
769
|
-
}
|
|
773
|
+
},
|
|
774
|
+
dataId: `${dataId}_Options`
|
|
770
775
|
}));
|
|
771
776
|
}) : /*#__PURE__*/React.createElement(EmptyState, {
|
|
772
777
|
options: revampedGroups,
|
package/es/v1/Select/Select.js
CHANGED
|
@@ -23,7 +23,6 @@ import { debounce, scrollTo, getIsEmptyValue, getSearchString, findScrollEnd, ge
|
|
|
23
23
|
/**** CSS ****/
|
|
24
24
|
|
|
25
25
|
import style from '../../Select/Select.module.css';
|
|
26
|
-
import { getLibraryConfig } from '../../Provider/Config';
|
|
27
26
|
/* eslint-disable react/no-deprecated */
|
|
28
27
|
|
|
29
28
|
/* eslint-disable react/no-unused-prop-types */
|
|
@@ -692,7 +692,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
692
692
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
693
693
|
className: "".concat(className ? className : ''),
|
|
694
694
|
onClick: isDisabled || isReadOnly ? null : this.togglePopup,
|
|
695
|
-
ref: getTargetRef
|
|
695
|
+
ref: getTargetRef,
|
|
696
|
+
"data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
|
|
697
|
+
"data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
|
|
696
698
|
}, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
697
699
|
isDisabled: isDisabled,
|
|
698
700
|
iconRotated: isPopupOpen,
|
|
@@ -707,7 +709,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
707
709
|
value: selected,
|
|
708
710
|
variant: textBoxVariant,
|
|
709
711
|
needReadOnlyStyle: isReadOnly ? true : false,
|
|
710
|
-
dataId: dataId,
|
|
712
|
+
dataId: "".concat(dataId, "_textBox"),
|
|
711
713
|
onKeyPress: this.handleValueInputChange,
|
|
712
714
|
needEffect: isReadOnly || isDisabled ? false : true,
|
|
713
715
|
borderColor: borderColor,
|
|
@@ -744,7 +746,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
744
746
|
value: selected,
|
|
745
747
|
variant: textBoxVariant,
|
|
746
748
|
needReadOnlyStyle: isReadOnly ? true : false,
|
|
747
|
-
dataId: dataId,
|
|
749
|
+
dataId: "".concat(dataId, "_textBox"),
|
|
748
750
|
onKeyPress: this.handleValueInputChange,
|
|
749
751
|
borderColor: borderColor,
|
|
750
752
|
htmlId: htmlId,
|
|
@@ -776,7 +778,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
776
778
|
needResponsive: needResponsive,
|
|
777
779
|
isPadding: false,
|
|
778
780
|
isResponsivePadding: getFooter ? false : true,
|
|
779
|
-
alignBox: "row"
|
|
781
|
+
alignBox: "row",
|
|
782
|
+
dataId: "".concat(dataId, "_suggestionBox")
|
|
780
783
|
}, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
781
784
|
align: "both",
|
|
782
785
|
className: _SelectModule["default"].loader
|
|
@@ -801,7 +804,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
801
804
|
ariaAutocomplete: 'list',
|
|
802
805
|
ariaDescribedby: ariaErrorId
|
|
803
806
|
},
|
|
804
|
-
autoComplete: false
|
|
807
|
+
autoComplete: false,
|
|
808
|
+
dataId: "".concat(dataId, "_search")
|
|
805
809
|
}))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
|
|
806
810
|
shrink: true,
|
|
807
811
|
customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
|
|
@@ -834,7 +838,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
834
838
|
a11y: {
|
|
835
839
|
ariaParentRole: 'listbox',
|
|
836
840
|
role: 'option'
|
|
837
|
-
}
|
|
841
|
+
},
|
|
842
|
+
dataId: "".concat(dataId, "_Options")
|
|
838
843
|
}));
|
|
839
844
|
}) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
|
|
840
845
|
options: revampedGroups,
|
package/lib/Select/Select.js
CHANGED
|
@@ -43,8 +43,6 @@ var _Common = require("../utils/Common.js");
|
|
|
43
43
|
|
|
44
44
|
var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
|
|
45
45
|
|
|
46
|
-
var _Config = require("../Provider/Config");
|
|
47
|
-
|
|
48
46
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
49
47
|
|
|
50
48
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -694,7 +694,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
694
694
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
695
695
|
className: "".concat(className ? className : ''),
|
|
696
696
|
onClick: isDisabled || isReadOnly ? null : this.togglePopup,
|
|
697
|
-
ref: getTargetRef
|
|
697
|
+
ref: getTargetRef,
|
|
698
|
+
"data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
|
|
699
|
+
"data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
|
|
698
700
|
}, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
699
701
|
isDisabled: isDisabled,
|
|
700
702
|
iconRotated: isPopupOpen,
|
|
@@ -709,7 +711,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
709
711
|
value: selected,
|
|
710
712
|
variant: textBoxVariant,
|
|
711
713
|
needReadOnlyStyle: isReadOnly ? true : false,
|
|
712
|
-
dataId: dataId,
|
|
714
|
+
dataId: "".concat(dataId, "_textBox"),
|
|
713
715
|
onKeyPress: this.handleValueInputChange,
|
|
714
716
|
needEffect: isReadOnly || isDisabled ? false : true,
|
|
715
717
|
borderColor: borderColor,
|
|
@@ -746,7 +748,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
746
748
|
value: selected,
|
|
747
749
|
variant: textBoxVariant,
|
|
748
750
|
needReadOnlyStyle: isReadOnly ? true : false,
|
|
749
|
-
dataId: dataId,
|
|
751
|
+
dataId: "".concat(dataId, "_textBox"),
|
|
750
752
|
onKeyPress: this.handleValueInputChange,
|
|
751
753
|
borderColor: borderColor,
|
|
752
754
|
htmlId: htmlId,
|
|
@@ -778,7 +780,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
778
780
|
needResponsive: needResponsive,
|
|
779
781
|
isPadding: false,
|
|
780
782
|
isResponsivePadding: getFooter ? false : true,
|
|
781
|
-
alignBox: "row"
|
|
783
|
+
alignBox: "row",
|
|
784
|
+
dataId: "".concat(dataId, "_suggestionBox")
|
|
782
785
|
}, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
783
786
|
align: "both",
|
|
784
787
|
className: _SelectModule["default"].loader
|
|
@@ -803,7 +806,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
803
806
|
ariaAutocomplete: 'list',
|
|
804
807
|
ariaDescribedby: ariaErrorId
|
|
805
808
|
},
|
|
806
|
-
autoComplete: false
|
|
809
|
+
autoComplete: false,
|
|
810
|
+
dataId: "".concat(dataId, "_search")
|
|
807
811
|
}))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
|
|
808
812
|
shrink: true,
|
|
809
813
|
customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
|
|
@@ -836,7 +840,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
|
|
|
836
840
|
a11y: {
|
|
837
841
|
ariaParentRole: 'listbox',
|
|
838
842
|
role: 'option'
|
|
839
|
-
}
|
|
843
|
+
},
|
|
844
|
+
dataId: "".concat(dataId, "_Options")
|
|
840
845
|
}));
|
|
841
846
|
}) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
|
|
842
847
|
options: revampedGroups,
|
package/lib/v1/Select/Select.js
CHANGED
|
@@ -43,8 +43,6 @@ var _Common = require("../../utils/Common.js");
|
|
|
43
43
|
|
|
44
44
|
var _SelectModule = _interopRequireDefault(require("../../Select/Select.module.css"));
|
|
45
45
|
|
|
46
|
-
var _Config = require("../../Provider/Config");
|
|
47
|
-
|
|
48
46
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
49
47
|
|
|
50
48
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohodesk/components",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.31",
|
|
4
4
|
"main": "es/index.js",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"private": false,
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@zohodesk/a11y": "2.2.1",
|
|
71
71
|
"@zohodesk/docstool": "1.0.0-alpha-2",
|
|
72
72
|
"@zohodesk/hooks": "2.0.4",
|
|
73
|
-
"@zohodesk/icons": "1.0.
|
|
73
|
+
"@zohodesk/icons": "1.0.43",
|
|
74
74
|
"@zohodesk/svg": "1.1.14",
|
|
75
75
|
"@zohodesk/utils": "1.3.13",
|
|
76
76
|
"@zohodesk/variables": "1.0.0",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"selectn": "1.1.2"
|
|
86
86
|
},
|
|
87
87
|
"peerDependencies": {
|
|
88
|
-
"@zohodesk/icons": "1.0.
|
|
88
|
+
"@zohodesk/icons": "1.0.43",
|
|
89
89
|
"@zohodesk/variables": "1.0.0",
|
|
90
90
|
"@zohodesk/svg": "1.1.14",
|
|
91
91
|
"@zohodesk/virtualizer": "1.0.3",
|