@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 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.
@@ -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,
@@ -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 */
@@ -59,6 +59,7 @@ export const GroupSelect_defaultProps = {
59
59
  dataIdDownIcon: 'downIcon',
60
60
  dataIdLoading: 'loading',
61
61
  dataIdSrchEmptyMsg: 'searchEmptyMessage',
62
+ dataId: 'GroupSelect',
62
63
  isPopupOpenOnEnter: false,
63
64
  borderColor: 'default',
64
65
  needTick: true,
@@ -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,
@@ -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 */
@@ -59,6 +59,7 @@ export const GroupSelect_defaultProps = {
59
59
  dataIdDownIcon: 'downIcon',
60
60
  dataIdLoading: 'loading',
61
61
  dataIdSrchEmptyMsg: 'searchEmptyMessage',
62
+ dataId: 'GroupSelect',
62
63
  isPopupOpenOnEnter: false,
63
64
  borderColor: 'default',
64
65
  needTick: true,
@@ -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,
@@ -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); }
@@ -72,6 +72,7 @@ var GroupSelect_defaultProps = {
72
72
  dataIdDownIcon: 'downIcon',
73
73
  dataIdLoading: 'loading',
74
74
  dataIdSrchEmptyMsg: 'searchEmptyMessage',
75
+ dataId: 'GroupSelect',
75
76
  isPopupOpenOnEnter: false,
76
77
  borderColor: 'default',
77
78
  needTick: true,
@@ -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,
@@ -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); }
@@ -72,6 +72,7 @@ var GroupSelect_defaultProps = {
72
72
  dataIdDownIcon: 'downIcon',
73
73
  dataIdLoading: 'loading',
74
74
  dataIdSrchEmptyMsg: 'searchEmptyMessage',
75
+ dataId: 'GroupSelect',
75
76
  isPopupOpenOnEnter: false,
76
77
  borderColor: 'default',
77
78
  needTick: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.2.30",
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.38",
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.38",
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",