@zohodesk/components 1.0.0-temp-121 → 1.0.0-temp-123

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",

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,

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/Switch/Switch.js

@@ -32,6 +32,7 @@ export default class Switch extends React.Component {
       title,
       disableTitle,
       dataId,
+      dataSelectorId,
       customClass,
       customProps
     } = this.props;
@@ -55,7 +56,8 @@ export default class Switch extends React.Component {
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
-      tabIndex: isReadOnly || disabled ? '-1' : '0'
+      tabIndex: isReadOnly || disabled ? '-1' : '0',
+      dataSelectorId: dataSelectorId
     }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
     }, /*#__PURE__*/React.createElement("input", {

package/es/Switch/props/defaultProps.js

@@ -6,5 +6,6 @@ export const defaultProps = {
   size: 'medium',
   isReadOnly: false,
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'switch'
 };

package/es/Switch/props/propTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   checked: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   disabled: PropTypes.bool,
   id: PropTypes.string.isRequired,

package/es/Tab/Tab.js

@@ -30,6 +30,7 @@ export default function Tab(_ref) {
     children,
     className,
     dataId,
+    dataSelectorId,
     title,
     titlePosition,
     activeClass,
@@ -84,7 +85,8 @@ export default function Tab(_ref) {
     "aria-controls": id,
     "aria-selected": isActive ? true : false,
     tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
-    "aria-label": text ? text : null
+    "aria-label": text ? text : null,
+    dataSelectorId: dataSelectorId
   }, customProps), /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     align: "both",

package/es/Tab/TabContent.js

@@ -10,7 +10,8 @@ const TabContent = _ref => {
     children,
     scroll,
     dataId,
-    id
+    id,
+    dataSelectorId
   } = _ref;
   return /*#__PURE__*/React.createElement(Container, {
     className: style.container,
@@ -19,7 +20,8 @@ const TabContent = _ref => {
     isScrollAttribute: true,
     "aria-labelledby": id,
     tabindex: "-1",
-    role: "tabpanel"
+    role: "tabpanel",
+    dataSelectorId: dataSelectorId
   }, children);
 };
 TabContent.defaultProps = TabContent_defaultProps;

package/es/Tab/TabContentWrapper.js

@@ -10,14 +10,16 @@ const TabContentWrapper = _ref => {
     children,
     dataId,
     selectedTab,
-    onScroll
+    onScroll,
+    dataSelectorId
   } = _ref;
   return /*#__PURE__*/React.createElement(Box, {
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
-    onScroll: onScroll
+    onScroll: onScroll,
+    dataSelectorId: dataSelectorId
   }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 };
 TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;

package/es/Tab/TabWrapper.js

@@ -16,7 +16,8 @@ function TabWrapper(_ref) {
     needAppearance,
     align,
     dataId,
-    children
+    children,
+    dataSelectorId
   } = _ref;
   let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
   const setSelectedTab = useCallback(id => {
@@ -27,7 +28,8 @@ function TabWrapper(_ref) {
   }, [hookToDisableInternalState, onSelect]);
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: align === 'vertical' ? 'column' : 'row',
-    dataId: dataId
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
   }, React.Children.map(children, child => {
     let TabsChild = child.type;
     let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;

package/es/Tab/Tabs.js

@@ -389,7 +389,8 @@ class Tabs extends React.Component {
       getTargetRef,
       position,
       customProps,
-      getCustomDropBoxHeaderPlaceHolder
+      getCustomDropBoxHeaderPlaceHolder,
+      dataSelectorId
     } = this.props;
     let {
       DropBoxProps = {},
@@ -423,7 +424,8 @@ class Tabs extends React.Component {
         isVirtual: isVirtual
       }, classProps));
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
-      className: `${tabsStyle.menu} `
+      className: `${tabsStyle.menu} `,
+      dataSelectorId: `${dataSelectorId}_moreIcon`
     }, /*#__PURE__*/React.createElement(Container, _extends({
       className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
@@ -511,7 +513,8 @@ class Tabs extends React.Component {
       align,
       needAppearance,
       children,
-      containerClass
+      containerClass,
+      dataSelectorId
     } = this.props;
     let {
       totalDimension,
@@ -527,7 +530,8 @@ class Tabs extends React.Component {
     let tabsClass = cs([tabsStyle.tab, className, needAppearance && appearanceClass]);
     let hlClass = cs([tabsStyle.highlight, highlightClass, isAnimate && tabsStyle.lineAnimate]);
     return /*#__PURE__*/React.createElement(Box, {
-      className: containerClass
+      className: containerClass,
+      dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: align === 'vertical' ? 'row' : 'column',
       className: tabsClass,

package/es/Tab/props/defaultProps.js

@@ -1,12 +1,15 @@
 export const Tab_defaultProps = {
   dataId: 'tabMenu',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'tab'
 };
 export const TabContent_defaultProps = {
-  dataId: 'tabContent'
+  dataId: 'tabContent',
+  dataSelectorId: 'tabContent'
 };
 export const TabContentWrapper_defaultProps = {
-  children: []
+  children: [],
+  dataSelectorId: 'tabContentWrapper'
 };
 export const Tabs_defaultProps = {
   isAnimate: false,
@@ -25,7 +28,8 @@ export const Tabs_defaultProps = {
   iconName: 'ZD-TB-menu',
   iconSize: '7',
   containerClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'tabs'
 };
 export const TabWrapper_defaultProps = {
   hookToDisableInternalState: false,
@@ -35,5 +39,6 @@ export const TabWrapper_defaultProps = {
   needTabBorder: false,
   type: 'alpha',
   align: 'vertical',
-  needAppearance: true
+  needAppearance: true,
+  dataSelectorId: 'tabWrapper'
 };

package/es/Tab/props/propTypes.js

@@ -23,13 +23,15 @@ export const Tab_propTypes = {
   tourId: PropTypes.string,
   type: PropTypes.string,
   customProps: PropTypes.object,
-  isVirtual: PropTypes.bool
+  isVirtual: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const TabContent_propTypes = {
   children: PropTypes.node,
   dataId: PropTypes.string,
   id: PropTypes.string,
-  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none'])
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  dataSelectorId: PropTypes.string
 };
 export const TabContentWrapper_propTypes = {
   children: PropTypes.node,
@@ -37,7 +39,8 @@ export const TabContentWrapper_propTypes = {
   dataId: PropTypes.string,
   onScroll: PropTypes.func,
   selectedTab: PropTypes.string,
-  style: PropTypes.object
+  style: PropTypes.object,
+  dataSelectorId: PropTypes.string
 };
 export const Tabs_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),
@@ -84,7 +87,8 @@ export const Tabs_propTypes = {
     ListItemProps: PropTypes.object,
     MoreButtonProps: PropTypes.object
   }),
-  getCustomDropBoxHeaderPlaceHolder: PropTypes.func
+  getCustomDropBoxHeaderPlaceHolder: PropTypes.func,
+  dataSelectorId: PropTypes.string
 };
 export const TabWrapper_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),
@@ -98,5 +102,6 @@ export const TabWrapper_propTypes = {
   needPadding: PropTypes.bool,
   needTabBorder: PropTypes.bool,
   onSelect: PropTypes.func,
-  type: PropTypes.oneOf(['alpha', 'beta', 'zeta'])
+  type: PropTypes.oneOf(['alpha', 'beta', 'zeta']),
+  dataSelectorId: PropTypes.string
 };

package/es/Tag/Tag.js

@@ -71,6 +71,7 @@ export default class Tag extends PureComponent {
       onSelectTag,
       closeTitle,
       dataId,
+      dataSelectorId,
       iconName,
       iconSize,
       tooltip,
@@ -99,7 +100,8 @@ export default class Tag extends PureComponent {
       ref: this.getRef,
       "data-title": tooltip ? tooltip : text,
       tabIndex: disabled ? '-1' : '0',
-      "aria-labelledby": getAriaId
+      "aria-labelledby": getAriaId,
+      "data-selector-id": dataSelectorId
     }, hasAvatar ? /*#__PURE__*/React.createElement("div", {
       className: style.avatar
     }, /*#__PURE__*/React.createElement(Avatar, {

package/es/Tag/props/defaultProps.js

@@ -9,5 +9,6 @@ export const defaultProps = {
   customClass: {},
   a11y: {},
   needEffect: true,
-  isReadOnly: false
+  isReadOnly: false,
+  dataSelectorId: 'tag'
 };

package/es/Tag/props/propTypes.js

@@ -30,5 +30,6 @@ export const propTypes = {
     clearLabel: PropTypes.string
   }),
   needEffect: PropTypes.bool,
-  isReadOnly: PropTypes.bool
+  isReadOnly: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };

package/es/TextBox/TextBox.js

@@ -86,7 +86,8 @@ export default class Textbox extends React.PureComponent {
       a11y,
       customClass,
       isFocus,
-      customProps
+      customProps,
+      dataSelectorId
     } = this.props;
     let {
       ariaLabel,
@@ -136,6 +137,7 @@ export default class Textbox extends React.PureComponent {
       "aria-multiselectable": ariaMultiselectable,
       className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${customClass ? customClass : ''}`,
       "data-id": `${dataId}`,
+      "data-selector-id": dataSelectorId,
       id: htmlId || id,
       maxLength: maxLength,
       name: name,

package/es/TextBox/props/defaultProps.js

@@ -15,5 +15,6 @@ export const defaultProps = {
   borderColor: 'default',
   a11y: {},
   isFocus: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'textBox'
 };

package/es/TextBox/props/propTypes.js

@@ -49,5 +49,6 @@ export const propTypes = {
     ariaMultiselectable: PropTypes.bool
   }),
   isFocus: PropTypes.bool,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  dataSelectorId: PropTypes.string
 };

package/es/TextBoxIcon/TextBoxIcon.js

@@ -63,6 +63,7 @@ export default class TextBoxIcon extends React.Component {
       onChange,
       title,
       dataId,
+      dataSelectorId,
       needReadOnlyStyle,
       isClickable,
       needEffect,
@@ -97,6 +98,7 @@ export default class TextBoxIcon extends React.Component {
       alignBox: "row",
       isCover: false,
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      dataSelectorId: dataSelectorId,
       "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true

package/es/TextBoxIcon/props/defaultProps.js

@@ -17,5 +17,6 @@ export const defaultProps = {
   customClass: {},
   iconOnHover: false,
   isFocus: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'textBoxIcon'
 };

package/es/TextBoxIcon/props/propTypes.js

@@ -3,6 +3,7 @@ export const propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   htmlId: PropTypes.string,
   i18nKeys: PropTypes.shape({
     clearText: PropTypes.string

package/es/Textarea/Textarea.js

@@ -45,6 +45,7 @@ export default class Textarea extends React.Component {
       getRef,
       onFocus,
       dataId,
+      dataSelectorId,
       isReadOnly,
       needAppearance,
       needReadOnlyStyle,
@@ -90,7 +91,8 @@ export default class Textarea extends React.Component {
       onBlur: this.onBlur,
       ref: getRef,
       value: text,
-      id: htmlId
+      id: htmlId,
+      "data-selector-id": dataSelectorId
     }));
   }
 }

package/es/Textarea/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   needEffect: true,
   autoFocus: false,
   customClass: '',
-  a11y: {}
+  a11y: {},
+  dataSelectorId: 'textarea'
 };

package/es/Textarea/props/propTypes.js

@@ -5,6 +5,7 @@ export const propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default']),
   className: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   getRef: PropTypes.func,
   htmlId: PropTypes.string,
   isDisabled: PropTypes.bool,

package/es/common/boxShadow.module.css

@@ -37,41 +37,41 @@
 }
 
 :global(.shadowOffWithOutline) {
-    --bs_contrast_outine: 0 0 2px var(--zdt_contrast_shadow);
+    --bs_contrast_outline: 0 0 2px var(--zdt_contrast_shadow);
 
     /* avatar */
-    --bs_avatar_black: var(--bs_contrast_outine);
-    --bs_avatar_white: var(--bs_contrast_outine);
+    --bs_avatar_black: var(--bs_contrast_outline);
+    --bs_avatar_white: var(--bs_contrast_outline);
 
     /* button */
-    --bs_button_primary: var(--bs_contrast_outine);
-    --bs_button_danger: var(--bs_contrast_outine);
+    --bs_button_primary: var(--bs_contrast_outline);
+    --bs_button_danger: var(--bs_contrast_outline);
 
     /* button group */
-    --bs_buttongroup_footer: var(--bs_contrast_outine);
+    --bs_buttongroup_footer: var(--bs_contrast_outline);
 
     /* dropbox */
-    --bs_dropbox_default: var(--bs_contrast_outine);
-    --bs_dropbox_top: var(--bs_contrast_outine);
-    --bs_dropbox_left: var(--bs_contrast_outine);
-    --bs_dropbox_right: var(--bs_contrast_outine);
-    --bs_dropbox_bottom: var(--bs_contrast_outine);
-    --bs_dropbox_arrow: var(--bs_contrast_outine);
+    --bs_dropbox_default: var(--bs_contrast_outline);
+    --bs_dropbox_top: var(--bs_contrast_outline);
+    --bs_dropbox_left: var(--bs_contrast_outline);
+    --bs_dropbox_right: var(--bs_contrast_outline);
+    --bs_dropbox_bottom: var(--bs_contrast_outline);
+    --bs_dropbox_arrow: var(--bs_contrast_outline);
 
     /* ribbon */
-    --bs_ribbon_default: var(--bs_contrast_outine);
-    --bs_ribbon_danger: var(--bs_contrast_outine);
-    --bs_ribbon_primary: var(--bs_contrast_outine);
-    --bs_ribbon_secondary: var(--bs_contrast_outine);
-    --bs_ribbon_info: var(--bs_contrast_outine);
-    --bs_ribbon_dark: var(--bs_contrast_outine);
+    --bs_ribbon_default: var(--bs_contrast_outline);
+    --bs_ribbon_danger: var(--bs_contrast_outline);
+    --bs_ribbon_primary: var(--bs_contrast_outline);
+    --bs_ribbon_secondary: var(--bs_contrast_outline);
+    --bs_ribbon_info: var(--bs_contrast_outline);
+    --bs_ribbon_dark: var(--bs_contrast_outline);
 
     /* switch */
-    --bs_switch_default: var(--bs_contrast_outine);
+    --bs_switch_default: var(--bs_contrast_outline);
 
     /* tabs */
-    --bs_tabs_shadow: var(--bs_contrast_outine);
+    --bs_tabs_shadow: var(--bs_contrast_outline);
 
     /* tooltip */
-    --bs_tooltip_shadow: var(--bs_contrast_outine);
+    --bs_tooltip_shadow: var(--bs_contrast_outline);
 }

package/lib/Accordion/Accordion.js

@@ -64,7 +64,9 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
         unMount = _this$props2.unMount,
         disableInternalState = _this$props2.disableInternalState,
         propSelectedItem = _this$props2.selectedItem,
-        a11y = _this$props2.a11y;
+        a11y = _this$props2.a11y,
+        dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId;
       var selectedItem = this.state.selectedItem;
       var children = _react["default"].Children.map(this.props.children, function (child) {
         if (child) {
@@ -85,7 +87,9 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
         },
         role: role,
         "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHaspopup
+        "aria-haspopup": ariaHaspopup,
+        "data-id": dataId,
+        "data-selector-id": dataSelectorId
       }, children);
     }
   }]);

package/lib/Accordion/AccordionItem.js

@@ -49,6 +49,7 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
         className = _this$props2.className,
         children = _this$props2.children,
         dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId,
         unMount = _this$props2.unMount,
         unMountItem = _this$props2.unMountItem,
         a11y = _this$props2.a11y,
@@ -58,7 +59,8 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: className ? className : '',
         "data-id": dataId,
-        role: role
+        role: role,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: innerClass ? innerClass : '',
         onClick: selectMenu.bind(this, id)

package/lib/Accordion/props/defaultProps.js

@@ -7,10 +7,14 @@ exports.Accordion_defaultProps = exports.AccordionItem_defaultProps = void 0;
 var Accordion_defaultProps = {
   unMount: true,
   disableInternalState: false,
-  a11y: {}
+  a11y: {},
+  dataId: 'Accordion',
+  dataSelectorId: 'accordion'
 };
 exports.Accordion_defaultProps = Accordion_defaultProps;
 var AccordionItem_defaultProps = {
-  a11y: {}
+  a11y: {},
+  dataId: 'AccordionItem',
+  dataSelectorId: 'accordionItem'
 };
 exports.AccordionItem_defaultProps = AccordionItem_defaultProps;

package/lib/Accordion/props/propTypes.js

@@ -9,6 +9,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var Accordion_propTypes = {
   children: _propTypes["default"].node,
   className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableInternalState: _propTypes["default"].bool,
   height: _propTypes["default"].string,
   onSelect: _propTypes["default"].func,
@@ -25,6 +27,7 @@ var AccordionItem_propTypes = {
   children: _propTypes["default"].node,
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   equalityCheck: _propTypes["default"].func,
   id: _propTypes["default"].string,
   selectMenu: _propTypes["default"].func,

package/lib/AppContainer/AppContainer.js

@@ -118,6 +118,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
         children = _this$props.children,
         tagName = _this$props.tagName,
         dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId,
         tooltipClass = _this$props.tooltipClass,
         tooltipParentClass = _this$props.tooltipParentClass,
         customProps = _this$props.customProps;
@@ -132,13 +133,15 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
         //onMouseOver={this.handleOver}
         ,
         dataId: dataId,
+        dataSelectorId: dataSelectorId,
         tagName: tagName,
         eleRef: this.getContainerRef
       }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, children)), /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
         className: "".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass),
-        "data-id": "".concat(dataId, "_tooltip")
+        "data-id": "".concat(dataId, "_tooltip"),
+        "data-selector-id": "".concat(dataSelectorId, "_tooltip")
       }), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], _extends({
         ref: this.setTooltipRef,
         customClass: tooltipClass