@zohodesk/components 1.0.0-temp-203.2 → 1.0.0-temp-204

package/es/v1/ListItem/ListItemWithAvatar.js

@@ -16,6 +16,7 @@ import style from '../../ListItem/ListItem.module.css';
 const ListItemWithAvatar = props => {
   let {
     size,
+    avatarSize,
     active,
     highlight,
     value,
@@ -42,7 +43,8 @@ const ListItemWithAvatar = props => {
     id,
     getRef,
     onClick,
-    onMouseEnter
+    onMouseEnter,
+    onAvatarClick
   } = props;
 
   function handleRef(ele) {
@@ -100,7 +102,7 @@ const ListItemWithAvatar = props => {
     className: style.leftAvatar
   }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
     name: name,
-    size: "small",
+    size: avatarSize,
     src: imgSrc,
     needTitle: needAvatarTitle,
     textPalette: isDarkPalette ? 'white' : '',
@@ -108,16 +110,18 @@ const ListItemWithAvatar = props => {
     customClass: {
       customAvatar: customAvatar,
       customAvatarTeam: customAvatarTeam
-    }
+    },
+    onClick: onAvatarClick
   }) : /*#__PURE__*/React.createElement(Avatar, {
     name: name,
-    size: "small",
+    size: avatarSize,
     src: imgSrc,
     initial: initial,
     textPalette: isDarkPalette ? 'white' : '',
     needTitle: needAvatarTitle,
     palette: isDarkPalette ? 'info' : avatarPalette,
-    customClass: customAvatar
+    customClass: customAvatar,
+    onClick: onAvatarClick
   })) : null, value ? /*#__PURE__*/React.createElement(Box, {
     flexible: true,
     shrink: true,

package/es/v1/ListItem/props/defaultProps.js

@@ -39,6 +39,7 @@ export const ListItemWithAvatarDefaultProps = {
   needTick: false,
   palette: 'default',
   size: 'medium',
+  avatarSize: 'small',
   value: 'List',
   dataId: 'listAvatar',
   needBorder: true,

package/es/v1/ListItem/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as AvatarProps } from '../../Avatar/props/propTypes.js';
 export const ListContainer_Props = {
   active: PropTypes.bool,
   autoHover: PropTypes.bool,
@@ -87,6 +88,7 @@ export const ListItemWithAvatar_Props = {
   onMouseEnter: PropTypes.func,
   palette: PropTypes.oneOf(['dark']),
   size: PropTypes.string,
+  avatarSize: AvatarProps.size,
   title: PropTypes.string,
   value: PropTypes.string,
   a11y: PropTypes.shape({
@@ -102,7 +104,8 @@ export const ListItemWithAvatar_Props = {
   needMultiLineText: PropTypes.bool,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
-  })
+  }),
+  onAvatarClick: PropTypes.func
 };
 export const ListItemWithCheckBox_Props = {
   active: PropTypes.bool,

package/es/v1/MultiSelect/Suggestions.js

@@ -15,6 +15,7 @@ export default class Suggestions extends React.PureComponent {
       getRef,
       hoverOption,
       onClick,
+      onAvatarClick,
       onMouseEnter,
       needTick,
       needBorder,
@@ -83,6 +84,7 @@ export default class Suggestions extends React.PureComponent {
           key: `${id}avatarListItem`,
           name: value,
           onClick: onClick,
+          onAvatarClick: onAvatarClick,
           onMouseEnter: onMouseEnter,
           value: value,
           title: value,

package/es/v1/MultiSelect/props/propTypes.js

@@ -158,6 +158,7 @@ export const Suggestions_propTypes = {
   needBorder: PropTypes.bool,
   needTick: PropTypes.bool,
   onClick: PropTypes.func,
+  onAvatarClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   palette: PropTypes.string,
   selectedOptions: PropTypes.array,

package/es/v1/Popup/Popup.js

@@ -6,7 +6,7 @@ import hoistStatics from 'hoist-non-react-statics';
 
 import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from '../../utils/Common.js';
 import viewPort from '../../Popup/viewPort';
-import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from '../../Popup/PositionMapping.json';
+import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from '../../Popup/PositionMapping.js';
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
 let lastOpenedGroup = [];
 let popups = {};

package/es/v1/Select/Select.js

@@ -750,6 +750,7 @@ export class SelectComponent extends Component {
     let ariaErrorId = this.getNextAriaId();
     let {
       TextBoxProps = {},
+      TextBoxIconProps = {},
       DropdownSearchTextBoxProps = {},
       SuggestionsProps = {}
     } = customProps;
@@ -805,7 +806,8 @@ export class SelectComponent extends Component {
           'data-title': title || selected,
           ...TextBoxProps
         }
-      }
+      },
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "both"

package/es/v1/Select/props/propTypes.js

@@ -80,6 +80,7 @@ export const Select_propTypes = {
   iconOnHover: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
+    TextBoxIconProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
     listItemProps: PropTypes.object,
     SuggestionsProps: PropTypes.object

package/es/v1/Tag/Tag.js

@@ -41,6 +41,7 @@ function Tag(props) {
     tooltip,
     avatarPalette,
     customClass,
+    customAttributes,
     a11y,
     needEffect,
     isReadOnly,
@@ -90,7 +91,8 @@ function Tag(props) {
     "data-title": tooltip ? tooltip : text,
     tabIndex: disabled ? '-1' : '0',
     "aria-labelledby": getAriaId,
-    "data-selector-id": dataSelectorId
+    "data-selector-id": dataSelectorId,
+    ...customAttributes
   }, hasAvatar ? /*#__PURE__*/React.createElement("div", {
     className: style.avatar
   }, /*#__PURE__*/React.createElement(Avatar, {

package/es/v1/Tag/props/defaultProps.js

@@ -7,6 +7,7 @@ export const defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
+  customAttributes: {},
   a11y: {},
   needEffect: true,
   isReadOnly: false,

package/es/v1/Tag/props/propTypes.js

@@ -26,6 +26,7 @@ export const propTypes = {
     customTagIcon: PropTypes.string,
     customAvatar: PropTypes.string
   }),
+  customAttributes: PropTypes.object,
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
   }),

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -48,6 +48,7 @@ export default function TextBoxIcon(props) {
     inputRef,
     onFocus,
     onBlur,
+    needInputFocusOnWrapperClick,
     isScrollPrevent
   } = props;
   const {
@@ -88,12 +89,19 @@ export default function TextBoxIcon(props) {
     onBlur && onBlur(e);
   };
 
+  const handleInputFocusOnClick = () => {
+    inputEle.current && inputEle.current.focus({
+      preventScroll: true
+    });
+  };
+
   return /*#__PURE__*/React.createElement(Container, {
     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
+    "data-title": isDisabled ? title : null,
+    onClick: needInputFocusOnWrapperClick && !isDisabled ? handleInputFocusOnClick : null
   }, /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement(TextBox, { ...props,

package/es/v1/TextBoxIcon/props/defaultProps.js

@@ -8,6 +8,7 @@ export const defaultProps = {
   type: 'text',
   variant: 'default',
   needReadOnlyStyle: true,
+  needInputFocusOnWrapperClick: false,
   isClickable: false,
   needEffect: true,
   dataId: 'textBoxIcon',

package/es/v1/TextBoxIcon/props/propTypes.js

@@ -20,6 +20,7 @@ export const propTypes = { ...TextBox_propTypes,
   needBorder: PropTypes.bool,
   needEffect: PropTypes.bool,
   needReadOnlyStyle: PropTypes.bool,
+  needInputFocusOnWrapperClick: PropTypes.bool,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onClear: PropTypes.func,

package/lib/CheckBox/CheckBox.js

@@ -103,7 +103,8 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props3.a11y,
           customClass = _this$props3.customClass,
           customProps = _this$props3.customProps,
-          dataSelectorId = _this$props3.dataSelectorId;
+          dataSelectorId = _this$props3.dataSelectorId,
+          renderRightPlaceholderNode = _this$props3.renderRightPlaceholderNode;
       var _customProps$CheckBox = customProps.CheckBoxProps,
           CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
           _customProps$LabelPro = customProps.LabelProps,
@@ -204,7 +205,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         variant: variant,
         customClass: "".concat(active && !disabled ? "".concat(_CheckBoxModule["default"]["active".concat(palette, "Label")]) : '', "\n                            ").concat(checked && active ? "".concat(_CheckBoxModule["default"]["checked".concat(palette, "Label")]) : '', " \n                            ").concat(accessMode, " ").concat(customLabel),
         title: toolTip ? toolTip : text
-      }, LabelProps))));
+      }, LabelProps))), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
     }
   }]);
 

package/lib/CheckBox/props/propTypes.js

@@ -47,6 +47,7 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     CheckBoxProps: _propTypes["default"].object,
     LabelProps: _propTypes["default"].object
-  })
+  }),
+  renderRightPlaceholderNode: _propTypes["default"].node
 };
 exports.propTypes = propTypes;

package/lib/DateTime/DateWidget.js

@@ -47,6 +47,8 @@ var _constants = require("./constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -1035,7 +1037,9 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       var _customProps$DateTime = customProps.DateTimeProps,
           DateTimeProps = _customProps$DateTime === void 0 ? {} : _customProps$DateTime,
           _customProps$TextBoxP = customProps.TextBoxProps,
-          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
+          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
+          _customProps$TextBoxI = customProps.TextBoxIconProps,
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
       var _this$state6 = this.state,
           _this$state6$selected = _this$state6.selected,
           value = _this$state6$selected === void 0 ? '' : _this$state6$selected,
@@ -1060,7 +1064,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         className: "".concat(className ? className : '', " ").concat(_DateWidgetModule["default"].textBox, " ").concat(isPopupOpen && !isDisabled ? _DateWidgetModule["default"].textBoxFocus : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : isReadOnly ? _DateWidgetModule["default"].readOnly : _DateWidgetModule["default"].enabled),
         onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
         ref: getTargetRef
-      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: htmlId,
         value: showValue ? showValue : placeholder,
         needBorder: needBorder,
@@ -1089,10 +1093,13 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         autoComplete: false,
         a11y: a11y,
         customProps: TextBoxProps
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, TextBoxIconProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        isInline: true,
         align: "both",
+        isCover: false,
         onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
-        dataId: "".concat(dataId, "_datePicker")
+        dataId: "".concat(dataId, "_datePicker"),
+        className: _DateWidgetModule["default"].datePickIcon
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-datepicker",
         size: "12"

package/lib/DateTime/DateWidget.module.css

@@ -3,6 +3,7 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
+.datePickIcon{height:100% }
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }

package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -670,7 +670,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"
@@ -770,7 +770,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"
@@ -870,7 +870,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -52,7 +52,7 @@ exports[`DateWidget rendering the defult props 1`] = `
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover coldir both"
+                class="datePickIcon inflex coldir both"
                 data-id="dateWidget_datePicker"
                 data-selector-id="container"
                 data-test-id="dateWidget_datePicker"

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -77,7 +77,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
@@ -175,7 +175,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
@@ -273,7 +273,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -11,7 +11,7 @@ var _useDropboxPosCalc2 = _interopRequireDefault(require("./useDropboxPosCalc"))
 
 var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _DropBoxPositionMapping = require("../DropBoxPositionMapping.json");
+var _DropBoxPositionMapping = require("../DropBoxPositionMapping.js");
 
 var _defaultProps = require("./props/defaultProps");
 

package/lib/DropBox/DropBoxPositionMapping.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.positionMapping = void 0;
+var positionMapping = {
+  "bottomCenter": {
+    "direction": "bottom",
+    "arrowPosition": "mid",
+    "positionStyle": "bottomMid"
+  },
+  "bottomLeftToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomCenterToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomRightToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "bottomCenterToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topCenter": {
+    "direction": "top",
+    "arrowPosition": "mid",
+    "positionStyle": "topMid"
+  },
+  "topLeftToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topCenterToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topRightToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "topCenterToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightCenter": {
+    "direction": "right",
+    "arrowPosition": "mid",
+    "positionStyle": "rightMid"
+  },
+  "rightTopToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightCenterToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightBottomToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "rightCenterToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftCenter": {
+    "direction": "left",
+    "arrowPosition": "mid",
+    "positionStyle": "leftMid"
+  },
+  "leftTopToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftCenterToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftBottomToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "leftCenterToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "bottomRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  }
+};
+exports.positionMapping = positionMapping;

package/lib/ListItem/ListItemWithAvatar.js

@@ -128,7 +128,9 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
-          needMultiLineText = _this$props4.needMultiLineText;
+          needMultiLineText = _this$props4.needMultiLineText,
+          onAvatarClick = _this$props4.onAvatarClick,
+          avatarSize = _this$props4.avatarSize;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -171,7 +173,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         className: _ListItemModule["default"].leftAvatar
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
         name: name,
-        size: "small",
+        size: avatarSize,
         src: imgSrc,
         needTitle: needAvatarTitle,
         textPalette: isDarkPalette ? 'white' : '',
@@ -179,16 +181,18 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         customClass: {
           customAvatar: customAvatar,
           customAvatarTeam: customAvatarTeam
-        }
+        },
+        onClick: onAvatarClick
       }) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
         name: name,
-        size: "small",
+        size: avatarSize,
         src: imgSrc,
         initial: initial,
         textPalette: isDarkPalette ? 'white' : '',
         needTitle: needAvatarTitle,
         palette: isDarkPalette ? 'info' : avatarPalette,
-        customClass: customAvatar
+        customClass: customAvatar,
+        onClick: onAvatarClick
       })) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,

package/lib/ListItem/props/defaultProps.js

@@ -47,6 +47,7 @@ var ListItemWithAvatarDefaultProps = {
   needTick: false,
   palette: 'default',
   size: 'medium',
+  avatarSize: 'small',
   value: 'List',
   dataId: 'listAvatar',
   needBorder: true,

package/lib/ListItem/props/propTypes.js

@@ -7,6 +7,8 @@ exports.ListItem_Props = exports.ListItemWithRadio_Props = exports.ListItemWithI
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("../../Avatar/props/propTypes.js");
+
 var _ListItemWithAvatar_P;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -83,7 +85,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
+}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "avatarSize", _propTypes2.propTypes.size), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
   role: _propTypes["default"].string,
   ariaSelected: _propTypes["default"].bool,
   ariaHidden: _propTypes["default"].bool
@@ -93,7 +95,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customAvatarTeam: _propTypes["default"].string
 })), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object
-})), _ListItemWithAvatar_P);
+})), _defineProperty(_ListItemWithAvatar_P, "onAvatarClick", _propTypes["default"].func), _ListItemWithAvatar_P);
 exports.ListItemWithAvatar_Props = ListItemWithAvatar_Props;
 var ListItemWithCheckBox_Props = {
   active: _propTypes["default"].bool,