@zohodesk/dot 1.0.0-beta.246 → 1.0.0-beta.248

package/es/avatar/AvatarUser/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   size: 'medium',
   needDelete: false,
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarUser'
 };

package/es/avatar/AvatarUser/props/propTypes.js

@@ -20,6 +20,7 @@ export const propTypes = {
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   alternateSrc: PropTypes.string,
   i18nKeys: PropTypes.shape({
     paidTitle: PropTypes.string,

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -21,7 +21,9 @@ export default class AvatarWithTeam extends React.Component {
       customTextClass,
       teamClassName,
       borderOnActive,
-      customProps
+      customProps,
+      dataSelectorId,
+      teamBorderActive
     } = this.props;
     let {
       AvatarWithTeamProps = {},
@@ -32,7 +34,8 @@ export default class AvatarWithTeam extends React.Component {
     } = customProps;
     return /*#__PURE__*/React.createElement("span", _extends({
       className: `${style.container} `,
-      "data-id": "avatarWithTeamId"
+      "data-id": "avatarWithTeamId",
+      "data-selector-id": dataSelectorId
     }, AvatarWithTeamProps), isTeam && teamName ? /*#__PURE__*/React.createElement(Avatar, _extends({
       name: name,
       src: src,
@@ -79,7 +82,7 @@ export default class AvatarWithTeam extends React.Component {
       customClass: {
         customAvatar: customTextClass
       },
-      borderOnActive: borderOnActive
+      borderOnActive: teamBorderActive
     }, AvatarTeam2Props))) : null);
   }
 }

package/es/avatar/AvatarWithTeam/props/defaultProps.js

@@ -3,5 +3,7 @@ export const defaultProps = {
   isTeam: false,
   teamClassName: '',
   borderOnActive: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarWithTeam',
+  teamBorderActive: true
 };

package/es/avatar/AvatarWithTeam/props/propTypes.js

@@ -8,11 +8,13 @@ export const propTypes = {
   palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
   size: PropTypes.string,
   src: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   teamClassName: PropTypes.string,
   teamName: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,
   borderOnActive: PropTypes.bool,
+  teamBorderActive: PropTypes.bool,
   customProps: PropTypes.shape({
     AvatarWithTeamProps: PropTypes.object,
     Avatar1Props: PropTypes.object,

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -490,6 +490,7 @@ export class ToggleDropDown extends Component {
       getTargetRef,
       getContainerRef,
       dataId,
+      dataSelectorId,
       searchBoxSize,
       searchEmptyHint,
       searchErrorText,
@@ -541,7 +542,8 @@ export class ToggleDropDown extends Component {
     return /*#__PURE__*/React.createElement("div", _extends({
       className: style.wrapper,
       onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.showTogglePopup : undefined,
-      onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined
+      onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined,
+      "data-selector-id": dataSelectorId
     }, ToggleDropDownProps), /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable && this.handleTogglePopup,

package/es/dropdown/ToggleDropDown/props/defaultProps.js

@@ -20,5 +20,6 @@ export const defaultProps = {
   hoverType: 'default',
   needExternalPopupState: false,
   customProps: {},
-  preventPopupClose: false
+  preventPopupClose: false,
+  dataSelectorId: 'toggleDropdown'
 };

package/es/dropdown/ToggleDropDown/props/propTypes.js

@@ -8,6 +8,7 @@ export const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   dataTitle: PropTypes.string,
   getContainerRef: PropTypes.func,
   getNextOptions: PropTypes.func,

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -53,6 +53,7 @@ export default class CheckBoxField extends PureComponent {
       isDisabled,
       title,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       infoText,
@@ -93,7 +94,8 @@ export default class CheckBoxField extends PureComponent {
     }, LabelProps)));
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
       className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, /*#__PURE__*/React.createElement(Container, {

package/es/form/fields/CheckBoxField/props/defaultProps.js

@@ -7,5 +7,6 @@ export const defaultProps = {
   direction: 'row',
   lineClamp: '',
   customProps: {},
+  dataSelectorId: 'checkBoxField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -85,6 +85,7 @@ export default class CurrencyField extends PureComponent {
       labelPalette,
       labelCustomClass,
       htmlId,
+      dataSelectorId,
       lockedInfoText,
       isLocked,
       needReadOnlyStyle,
@@ -112,7 +113,8 @@ export default class CurrencyField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,

package/es/form/fields/CurrencyField/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   needReadOnlyStyle: true,
   customProps: {},
   formatCurrency: () => {},
+  dataSelectorId: 'currencyField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/DateField/DateField.js

@@ -86,6 +86,7 @@ export default class DateField extends PureComponent {
       title,
       popupGroup,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       onKeyDown,
@@ -114,7 +115,8 @@ export default class DateField extends PureComponent {
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,

package/es/form/fields/DateField/props/defaultProps.js

@@ -14,5 +14,6 @@ export const defaultProps = {
   i18nKeys: {},
   dataId: 'dateField',
   customProps: {},
+  dataSelectorId: 'dateField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/FieldContainer/FieldContainer.js

@@ -22,7 +22,8 @@ export default class FieldContainer extends PureComponent {
       infoText,
       dataId,
       renderProps,
-      alignContainer
+      alignContainer,
+      dataSelectorId
     } = this.props;
     let {
       ePhiTitle = '',
@@ -37,7 +38,8 @@ export default class FieldContainer extends PureComponent {
     return /*#__PURE__*/React.createElement(Container, {
       align: alignContainer,
       alignBox: "row",
-      isCover: false
+      isCover: false,
+      dataSelectorId: dataSelectorId
     }, renderStart ? renderStart() : null, children, renderMiddle ? renderMiddle() : null, infoText ? /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-info",
       iconClass: style.infoIcon,

package/es/form/fields/FieldContainer/props/defaultProps.js

@@ -2,5 +2,6 @@ import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
 export const defaultProps = {
   ...FieldCommonDefaultProps(),
   renderProps: {},
-  alignContainer: 'vertical'
+  alignContainer: 'vertical',
+  dataSelectorId: 'fieldContainer'
 };

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -98,6 +98,7 @@ export default class MultiSelectField extends PureComponent {
       isDisabled,
       title,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       onKeyDown,
@@ -132,7 +133,8 @@ export default class MultiSelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,

package/es/form/fields/MultiSelectField/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   labelPalette: 'default',
   customProps: {},
   i18nKeys: {},
+  dataSelectorId: 'multiSelectField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/PhoneField/PhoneField.js

@@ -77,6 +77,7 @@ export default class PhoneField extends PureComponent {
       title,
       onBlur,
       dataId,
+      dataSelectorId,
       onKeyDown,
       placeHolder,
       infoText,
@@ -119,7 +120,8 @@ export default class PhoneField extends PureComponent {
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       className: `${style.container} ${isDisabled ? style.disabled : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBoxField, _extends({

package/es/form/fields/PhoneField/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   labelPalette: 'default',
   labelCustomClass: '',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'phoneField'
 };

package/es/form/fields/RadioField/RadioField.js

@@ -40,6 +40,7 @@ export default class RadioField extends PureComponent {
       selectedValue,
       isActive,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       isReadOnly,
@@ -54,7 +55,8 @@ export default class RadioField extends PureComponent {
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,
       size: "medium",

package/es/form/fields/RadioField/props/defaultProps.js

@@ -7,5 +7,6 @@ export const defaultProps = {
   labelSize: 'medium',
   labelPalette: 'default',
   isActive: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'radioField'
 };

package/es/form/fields/SelectField/SelectField.js

@@ -71,6 +71,7 @@ export default class SelectField extends PureComponent {
       isDisabled,
       title,
       dataId,
+      dataSelectorId,
       fieldClass,
       validationRuleMessage,
       validationRulePalette,
@@ -106,7 +107,8 @@ export default class SelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,

package/es/form/fields/SelectField/props/defaultProps.js

@@ -13,5 +13,6 @@ export const defaultProps = {
   isDefaultSelectValue: true,
   placeHolder: '',
   customProps: {},
+  dataSelectorId: 'selectField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -127,7 +127,8 @@ export default class TagsMultiSelect extends React.Component {
       htmlId,
       boxSize,
       onSelectTag,
-      clickableTag
+      clickableTag,
+      dataSelectorId
     } = this.props;
     let {
       showAll
@@ -137,7 +138,8 @@ export default class TagsMultiSelect extends React.Component {
       className: ` ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
               ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder ? style.active : ''}` : ''} ${className}`,
       onClick: stopBubbling,
-      "data-id": `${dataId}_tagsContainer`
+      "data-id": `${dataId}_tagsContainer`,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "vertical",

package/es/form/fields/TagsMultiSelect/props/defaultProps.js

@@ -6,5 +6,6 @@ export const defaultProps = {
   needBorder: true,
   dataId: '',
   boxSize: 'default',
-  clickableTag: false
+  clickableTag: false,
+  dataSelectorId: 'tagsMultiSelectField'
 };

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -39,7 +39,8 @@ const TagsMultiSelectField = props => {
     children,
     ePhiData,
     customProps,
-    clickableTag
+    clickableTag,
+    dataSelectorId
   } = props;
   const {
     LabelProps = {},
@@ -169,7 +170,8 @@ const TagsMultiSelectField = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: `${isDisabled ? fieldStyle.disabled : isReadOnly ? fieldStyle.readonly : ''}`,
     tabIndex: "0",
-    "aria-label": `${labelName}`
+    "aria-label": `${labelName}`,
+    "data-selector-id": dataSelectorId
   }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
     ePhiData: ePhiData,
     alignContainer: "baseline",

package/es/form/fields/TagsMultiSelectField/props/defaultProps.js

@@ -14,5 +14,6 @@ export const defaultProps = {
   i18nKeys: {},
   numberOfDisplayedValues: '5',
   customProps: {},
+  dataSelectorId: 'tagsMultiSelectField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -62,6 +62,7 @@ export default class TextBoxField extends PureComponent {
       title,
       onBlur,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       onKeyDown,
@@ -91,7 +92,8 @@ export default class TextBoxField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,

package/es/form/fields/TextBoxField/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   isClickable: false,
   needReadOnlyStyle: true,
   customProps: {},
+  dataSelectorId: 'textBoxField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/TextEditor/TextEditor.js

@@ -331,7 +331,8 @@ export default class TextEditor extends Component {
       ImgLazyLoad,
       loadingComponent,
       isNightMode,
-      isReadOnly
+      isReadOnly,
+      dataSelectorId
     } = this.props;
     let {
       isEditorLoad,
@@ -342,7 +343,8 @@ export default class TextEditor extends Component {
       className: `${styles.textEditor} ${styles[type]} ${styles[border]}
         ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${!isEditorShow ? styles.editorHide : ''}`,
       dataId: dataId,
-      "data-isEditor": true
+      "data-isEditor": true,
+      dataSelectorId: dataSelectorId
     }, loadingComponent && !isEditorLoad ? loadingComponent : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       id: id,

package/es/form/fields/TextEditor/props/defaultProps.js

@@ -8,5 +8,6 @@ export const defaultProps = {
   i18nKeys: {},
   needInlineAttachment: false,
   isNightMode: false,
-  isReadOnly: false
+  isReadOnly: false,
+  dataSelectorId: 'textEditor'
 };

package/es/form/fields/TextEditorField/TextEditorField.js

@@ -63,6 +63,7 @@ export default class TextEditorField extends PureComponent {
       onAttachmentUpload,
       needEditor,
       dataId,
+      dataSelectorId,
       isDisabled,
       fieldSize,
       textBoxSize,
@@ -102,7 +103,8 @@ export default class TextEditorField extends PureComponent {
       ValidationMessageProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,

package/es/form/fields/TextEditorField/props/defaultProps.js

@@ -10,5 +10,6 @@ export const defaultProps = {
   labelCustomClass: '',
   className: '',
   customProps: {},
+  dataSelectorId: 'textEditorField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -110,7 +110,8 @@ export default class TextEditorWrapper extends Component {
       i18nKeys,
       isEditorDefaultOpen,
       needInlineAttachment,
-      customProps
+      customProps,
+      dataSelectorId
     } = this.props;
     const {
       Textarea1Props = {},
@@ -122,7 +123,8 @@ export default class TextEditorWrapper extends Component {
     };
     let editorOptionsObject = Object.assign(defaultObj, editorOptions);
     return /*#__PURE__*/React.createElement("div", {
-      className: style.container
+      className: style.container,
+      "data-selector-id": dataSelectorId
     }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, _extends({
       onFocus: this.handleTextareaFocus,
       text: value,

package/es/form/fields/TextEditorWrapper/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   editorSize: 'large',
   editorBorder: 'borderAll',
   isEditorDefaultOpen: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'textEditorWrapper'
 };

package/es/form/fields/TextareaField/TextareaField.js

@@ -70,6 +70,7 @@ export default class TextareaField extends PureComponent {
       title,
       placeHolder,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       // onKeyDown,
@@ -93,7 +94,8 @@ export default class TextareaField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,

package/es/form/fields/TextareaField/props/defaultProps.js

@@ -10,5 +10,6 @@ export const defaultProps = {
   labelPalette: 'default',
   labelCustomClass: '',
   customProps: {},
+  dataSelectorId: 'textareaField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/ValidationMessage/ValidationMessage.js

@@ -17,7 +17,8 @@ export default class ValidationMessage extends React.Component {
       dataId,
       clipped,
       a11y,
-      tooltip
+      tooltip,
+      dataSelectorId
     } = this.props;
     let {
       role = 'alert'
@@ -26,7 +27,8 @@ export default class ValidationMessage extends React.Component {
       role: role,
       onClick: onClick,
       className: `${type === 'primary' ? style.primary : style.secondary}`,
-      "data-id": "errorMsgContainer"
+      "data-id": "errorMsgContainer",
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Label, {
       text: text,
       htmlFor: htmlFor,

package/es/form/fields/ValidationMessage/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   palette: 'mandatory',
   size: 'xsmall',
   type: 'primary',
-  a11y: {}
+  a11y: {},
+  dataSelectorId: 'validationMessage'
 };

package/es/form/fields/props/FieldCommonPropTypes.js

@@ -17,6 +17,7 @@ export const FieldCommonPropTypes = () => {
       start: PropTypes.func,
       middle: PropTypes.func,
       end: PropTypes.func
-    })
+    }),
+    dataSelectorId: PropTypes.bool
   };
 };

package/es/list/AvatarFlip/AvatarFlip.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -30,9 +31,10 @@ export default class AvatarFlip extends Component {
       tourId,
       iconSize,
       isFilledCheckbox,
-      channelTitle
+      channelTitle,
+      customProps
     } = this.props;
-    return /*#__PURE__*/React.createElement(FlipCard, {
+    return /*#__PURE__*/React.createElement(FlipCard, _extends({
       id: id,
       action: action,
       name: name,
@@ -61,7 +63,7 @@ export default class AvatarFlip extends Component {
       tourId: tourId,
       isFilledCheckbox: isFilledCheckbox,
       channelTitle: channelTitle
-    });
+    }, customProps));
   }
 }
 AvatarFlip.propTypes = propTypes;

package/es/list/AvatarFlip/props/defaultProps.js

@@ -1,5 +1,6 @@
 export const defaultProps = {
   size: 'xmedium',
   noNeedFlip: false,
-  iconSize: '21'
+  iconSize: '21',
+  customProps: {}
 };

package/es/list/AvatarFlip/props/propTypes.js

@@ -24,5 +24,6 @@ export const propTypes = {
   size: PropTypes.string,
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
-  tourId: PropTypes.string
+  tourId: PropTypes.string,
+  customProps: PropTypes.object
 };