@zohodesk/components 1.0.0-alpha-256 → 1.0.0-alpha-258

package/es/Modal/Modal.js

@@ -126,11 +126,12 @@ export default class Modal extends React.Component {
 }
 Modal.defaultProps = defaultProps;
 Modal.propTypes = propTypes;
-if (false) {
-  Modal.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    external: false,
-    description: ' '
-  };
-}
+
+// if (__DOCS__) {
+//   Modal.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     external: false,
+//     description: ' '
+//   };
+// }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -763,6 +763,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       selectedGroupOptions,
       placeHolder,
       dataId,
+      dataSelectorId,
       isReadOnly,
       isDisabled,
       isPopupOpen,
@@ -827,7 +828,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus
+      onClick: this.handleInputFocus,
+      "data-selector-id": dataSelectorId
     }, children ? /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -987,10 +989,11 @@ class AdvancedGroupMultiSelect extends React.Component {
 }
 AdvancedGroupMultiSelect.defaultProps = AdvancedGroupMultiSelect_defaultProps;
 AdvancedGroupMultiSelect.propTypes = AdvancedGroupMultiSelect_propTypes;
-if (false) {
-  AdvancedGroupMultiSelect.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   AdvancedGroupMultiSelect.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
+
 export default Popup(AdvancedGroupMultiSelect);

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -346,7 +346,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       customProps,
       needEffect,
       disabledOptions,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -389,7 +390,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus
+      onClick: this.handleInputFocus,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -531,12 +533,14 @@ AdvancedMultiSelectComponent.defaultProps = AdvancedMultiSelect_defaultProps;
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 const AdvancedMultiSelect = Popup(AdvancedMultiSelectComponent);
 AdvancedMultiSelect.defaultProps = AdvancedMultiSelectComponent.defaultProps;
-if (false) {
-  AdvancedMultiSelectComponent.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes;
-}
+
+// if (__DOCS__) {
+//   AdvancedMultiSelectComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   AdvancedMultiSelect.propTypes = AdvancedMultiSelectComponent.propTypes;
+// }
+
 export default AdvancedMultiSelect;

package/es/MultiSelect/MultiSelect.js

@@ -800,6 +800,7 @@ export class MultiSelectComponent extends React.Component {
       title,
       needResponsive,
       dataId,
+      dataSelectorId,
       isSearching,
       borderColor,
       textBoxClass,
@@ -856,7 +857,8 @@ export class MultiSelectComponent extends React.Component {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus
+      onClick: this.handleInputFocus,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -1004,12 +1006,13 @@ export class MultiSelectComponent extends React.Component {
 }
 MultiSelectComponent.propTypes = MultiSelect_propTypes;
 MultiSelectComponent.defaultProps = MultiSelect_defaultProps;
-if (false) {
-  MultiSelectComponent.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   MultiSelectComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
 MultiSelectComponent.displayName = 'MultiSelect';
 const MultiSelect = Popup(MultiSelectComponent);
 MultiSelect.propTypes = MultiSelectComponent.propTypes;

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -85,6 +85,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       isDisabled,
       title,
       dataId,
+      dataSelectorId,
       needResponsive,
       borderColor,
       textBoxClass,
@@ -129,7 +130,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus
+      onClick: this.handleInputFocus,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -276,12 +278,14 @@ MultiSelectWithAvatarComponent.defaultProps = MultiSelectWithAvatar_defaultProps
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);
 MultiSelectWithAvatar.defaultProps = MultiSelectWithAvatarComponent.defaultProps;
-if (false) {
-  MultiSelectWithAvatarComponent.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes;
-}
+
+// if (__DOCS__) {
+//   MultiSelectWithAvatarComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes;
+// }
+
 export default MultiSelectWithAvatar;

package/es/MultiSelect/props/defaultProps.js

@@ -34,7 +34,8 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   palette: 'default',
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -64,7 +65,8 @@ export const AdvancedMultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   customProps: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'advancedMultiSelect'
 };
 export const EmptyState_defaultProps = {
   dataId: 'empty',
@@ -103,7 +105,8 @@ export const MultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   boxSize: 'default',
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'multiSelect'
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -134,7 +137,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'multiSelectWithAvatar'
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'

package/es/MultiSelect/props/propTypes.js

@@ -50,7 +50,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   isSearchClearOnSelect: PropTypes.bool,
   palette: PropTypes.oneOf(['default', 'dark']),
   needEffect: true,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const AdvancedMultiSelect_propTypes = {
   id: PropTypes.string.isRequired,
@@ -133,7 +134,8 @@ export const AdvancedMultiSelect_propTypes = {
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const EmptyState_propTypes = {
   dataId: PropTypes.string,
@@ -236,7 +238,8 @@ export const MultiSelect_propTypes = {
   getFooter: PropTypes.func,
   needEffect: PropTypes.bool,
   boxSize: PropTypes.string,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -314,7 +317,8 @@ export const MultiSelectWithAvatar_propTypes = {
   customChildrenClass: PropTypes.string,
   isSearchClearOnSelect: PropTypes.bool,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const SelectedOptions_propTypes = {
   getRef: PropTypes.func,

package/es/PopOver/PopOver.js

@@ -101,14 +101,14 @@ class PopOver extends React.Component {
 }
 PopOver.defaultProps = PopOver_defaultProps;
 PopOver.propTypes = PopOver_propTypes;
-if (false) {
-  PopOver.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    description: ' ',
-    external: true
-  };
-}
+// if (__DOCS__) {
+//   PopOver.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     description: ' ',
+//     external: true
+//   };
+// }
 export default Popup(PopOver);
 export class PopOverTarget extends React.Component {
   constructor(props) {

package/es/Radio/Radio.js

@@ -111,9 +111,9 @@ export default class Radio extends React.Component {
 }
 Radio.defaultProps = defaultProps;
 Radio.propTypes = propTypes;
-if (false) {
-  Radio.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   Radio.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Ribbon/Ribbon.js

@@ -12,12 +12,14 @@ export default class Ribbon extends React.Component {
       palette,
       size,
       dataId,
-      customClass
+      customClass,
+      dataSelectorId
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
       className: `${style.basic} ${customClass} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
                  ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]}`,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-selector-id": dataSelectorId
     }, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
       className: style.after
     }) : null, children ? /*#__PURE__*/React.createElement("span", {
@@ -31,15 +33,17 @@ export default class Ribbon extends React.Component {
 }
 Ribbon.propTypes = propTypes;
 Ribbon.defaultProps = defaultProps;
-if (false) {
-  Ribbon.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' ',
-    images: [{
-      view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.png',
-      psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.psd'
-    }]
-  };
-}
+// if (__DOCS__) {
+//   Ribbon.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' ',
+//     images: [
+//       {
+//         view: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.png',
+//         psd: 'http://zsupport-tech-1.tsi.zohocorpin.com:8080/ui/general/Ribbon/v1/Ribbon.psd'
+//       }
+//     ]
+//   };
+// }

package/es/Ribbon/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   text: 'Ribbon',
   type: 'default',
   dataId: 'ribbonComp',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'ribbon'
 };

package/es/Ribbon/props/propTypes.js

@@ -6,5 +6,6 @@ export const propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
   text: PropTypes.string,
   type: PropTypes.oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };

package/es/RippleEffect/RippleEffect.js

@@ -22,9 +22,10 @@ export default function RippleEffect(props) {
 }
 RippleEffect.defaultProps = defaultProps;
 RippleEffect.propTypes = propTypes;
-if (false) {
-  RippleEffect.docs = {
-    componentGroup: 'RippleEffect',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   RippleEffect.docs = {
+//     componentGroup: 'RippleEffect',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Select/GroupSelect.js

@@ -541,7 +541,8 @@ export class GroupSelectComponent extends PureComponent {
       i18nKeys,
       htmlId,
       iconOnHover,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -569,7 +570,8 @@ export class GroupSelectComponent extends PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-id": dataIdSlctComp,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
@@ -742,11 +744,12 @@ GroupSelectComponent.displayName = 'GroupSelect';
 let GroupSelect = Popup(GroupSelectComponent);
 GroupSelect.defaultProps = GroupSelectComponent.defaultProps;
 export default GroupSelect;
-if (false) {
-  GroupSelect.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  GroupSelect.propTypes = GroupSelectComponent.propTypes;
-}
+
+// if (__DOCS__) {
+//   GroupSelect.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   GroupSelect.propTypes = GroupSelectComponent.propTypes;
+// }

package/es/Select/Select.js

@@ -677,7 +677,8 @@ export class SelectComponent extends Component {
       customProps,
       autoComplete,
       ariaLabelledby,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -705,7 +706,8 @@ export class SelectComponent extends Component {
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
@@ -893,13 +895,14 @@ SelectComponent.displayName = 'Select';
 let Select = Popup(SelectComponent);
 Select.defaultProps = SelectComponent.defaultProps;
 export default Select;
-if (false) {
-  Select.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  Select.propTypes = SelectComponent.propTypes;
-}
+
+// if (__DOCS__) {
+//   Select.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   Select.propTypes = SelectComponent.propTypes;
+// }

package/es/Select/SelectWithAvatar.js

@@ -144,7 +144,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       i18nKeys,
       htmlId,
       needEffect,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -169,7 +170,8 @@ class SelectWithAvatarComponent extends SelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -313,12 +315,14 @@ SelectWithAvatarComponent.defaultProps = SelectWithAvatar_defaultProps;
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);
 SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps;
-if (false) {
-  SelectWithAvatar.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes;
-}
+
+// if (__DOCS__) {
+//   SelectWithAvatar.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes;
+// }
+
 export default SelectWithAvatar;

package/es/Select/SelectWithIcon.js

@@ -304,7 +304,8 @@ class SelectWithIcon extends Component {
       iconClass,
       i18nKeys,
       htmlId,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -320,7 +321,8 @@ class SelectWithIcon extends Component {
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
@@ -476,10 +478,11 @@ class SelectWithIcon extends Component {
 }
 SelectWithIcon.propTypes = SelectWithIcon_propTypes;
 SelectWithIcon.defaultProps = SelectWithIcon_defaultProps;
-if (false) {
-  SelectWithIcon.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   SelectWithIcon.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
 export default Popup(SelectWithIcon);

package/es/Select/props/defaultProps.js

@@ -4,6 +4,7 @@ export const Select_defaultProps = {
   autoComplete: getLibraryConfig('autoComplete'),
   autoSelectOnType: true,
   dataId: 'selectComponent',
+  dataSelectorId: 'select',
   dropBoxSize: 'small',
   isDefaultSelectValue: true,
   isDisabled: false,
@@ -37,6 +38,7 @@ export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
+  dataSelectorId: 'groupSelect',
   isDefaultSelectValue: true,
   isDisabled: false,
   isReadOnly: false,
@@ -82,6 +84,7 @@ export const SelectWithAvatar_defaultProps = {
   textField: 'text',
   valueField: 'id',
   dataId: 'selectWithAvatar',
+  dataSelectorId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
   i18nKeys: {},
@@ -106,6 +109,7 @@ export const SelectWithIcon_defaultProps = {
   textBoxSize: 'medium',
   textBoxVariant: 'default',
   dataId: 'selectWithIcon',
+  dataSelectorId: 'selectWithIcon',
   dropBoxSize: 'small',
   needIcon: true,
   iconSize: '14',

package/es/Select/props/propTypes.js

@@ -84,7 +84,8 @@ export const Select_propTypes = {
     listItemProps: PropTypes.object,
     SuggestionsProps: PropTypes.object
   }),
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({
@@ -161,7 +162,8 @@ export const GroupSelect_propTypes = {
     noMoreText: PropTypes.string,
     searchEmptyText: PropTypes.string
   }),
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithAvatar_propTypes = {
   animationStyle: PropTypes.string,
@@ -219,7 +221,8 @@ export const SelectWithAvatar_propTypes = {
   valueField: PropTypes.string,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -265,5 +268,6 @@ export const SelectWithIcon_propTypes = {
   togglePopup: PropTypes.func,
   valueKey: PropTypes.string,
   htmlId: PropTypes.string,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };

package/es/Stencils/Stencils.js

@@ -20,11 +20,12 @@ export default class Stencils extends React.PureComponent {
 }
 Stencils.propTypes = propTypes;
 Stencils.defaultProps = defaultProps;
-if (false) {
-  Stencils.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    description: ' ',
-    external: true
-  };
-}
+
+// if (__DOCS__) {
+//   Stencils.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     description: ' ',
+//     external: true
+//   };
+// }