@zohodesk/components 1.0.0-temp-49 → 1.0.0-temp-50

package/es/ListItem/ListItemWithRadio.js

@@ -6,12 +6,14 @@ import Radio from '../Radio/Radio';
 import { Box } from '../Layout';
 import ListContainer from './ListContainer';
 import style from './ListItem.module.css';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 export default class ListItemWithRadio extends React.Component {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);
     this.getRef = this.getRef.bind(this);
     this.onHover = this.onHover.bind(this);
+    this.responsiveFunc = this.responsiveFunc.bind(this);
   }
 
   getRef(ele) {
@@ -43,6 +45,17 @@ export default class ListItemWithRadio extends React.Component {
     onHover && onHover(id, value, index, e);
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      mobileToTab: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       size,
@@ -70,40 +83,48 @@ export default class ListItemWithRadio extends React.Component {
       customRadio = '',
       customRadioWrap = ''
     } = customClass;
-    return /*#__PURE__*/React.createElement(ListContainer, _extends({
-      a11y: a11y,
-      size: size,
-      palette: palette,
-      highlight: highlight,
-      isDisabled: isDisabled,
-      active: active,
-      autoHover: autoHover,
-      customClass: customListItem,
-      dataId: dataId,
-      onClick: this.onClick,
-      onMouseOver: this.onHover,
-      eleRef: this.getRef,
-      disableTitle: disableTitle,
-      title: null,
-      customProps: ListItemProps
-    }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
-      className: style.iconBox
-    }, /*#__PURE__*/React.createElement(Radio, {
-      checked: checked,
-      id: id,
-      a11y: {
-        ariaHidden: true
-      },
-      customClass: {
-        customRadio: customRadio,
-        customRadioWrap: customRadioWrap
-      }
-    })), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      shrink: true,
-      "data-title": disableTitle ? null : title,
-      className: style.value
-    }, value));
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        mobileToTab
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ListContainer, _extends({
+        a11y: a11y,
+        size: size,
+        palette: palette,
+        highlight: highlight,
+        isDisabled: isDisabled,
+        active: active,
+        autoHover: autoHover,
+        customClass: `${customListItem} ${mobileToTab && style.responsiveHeight}`,
+        dataId: dataId,
+        onClick: this.onClick,
+        onMouseOver: this.onHover,
+        eleRef: this.getRef,
+        disableTitle: disableTitle,
+        title: null,
+        customProps: ListItemProps
+      }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
+        className: style.iconBox
+      }, /*#__PURE__*/React.createElement(Radio, {
+        checked: checked,
+        id: id,
+        a11y: {
+          ariaHidden: true
+        },
+        customClass: {
+          customRadio: customRadio,
+          customRadioWrap: customRadioWrap
+        }
+      })), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        shrink: true,
+        "data-title": disableTitle ? null : title,
+        className: style.value
+      }, value));
+    });
   }
 
 }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -887,7 +887,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, children ? /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -396,7 +396,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

package/es/MultiSelect/MultiSelect.js

@@ -909,7 +909,7 @@ export class MultiSelectComponent extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       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 : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -118,7 +118,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       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 : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

package/es/Responsive/sizeObservers.js

@@ -25,7 +25,14 @@ function rangeCheck(minValue, maxValue, screenValue) {
   return minValue <= screenValue && maxValue >= screenValue;
 }
 
-export const isTouchDevice = 'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+function isTouchDeviceFunc() {
+  // return window.matchMedia("(pointer: coarse)").matches
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+} // export const isTouchDevice =
+//   'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
+
+
+export const isTouchDevice = isTouchDeviceFunc();
 export function isBreackPointMatched(object, screen) {
   if (!isValideBreakPoint(object)) {
     // eslint-disable-next-line no-console

package/es/Select/GroupSelect.js

@@ -599,7 +599,7 @@ 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 : ''
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/es/Select/Select.js

@@ -743,7 +743,7 @@ 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 : ''
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/es/Select/SelectWithAvatar.js

@@ -167,7 +167,7 @@ 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 : ''
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",

package/es/Select/SelectWithIcon.js

@@ -289,7 +289,7 @@ 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 : ''
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/es/TextBoxIcon/TextBoxIcon.js

@@ -101,7 +101,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 : ''}`,
-      "data-title": isDisabled ? title : ''
+      "data-title": isDisabled ? title : null
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBox, _extends({}, this.props, {

package/lib/Avatar/Avatar.js

@@ -203,7 +203,7 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
       borderStyle = showAlternateAvatar ? '' : borderStyle;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: "".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(customClass ? customClass : ''),
-        "data-title": needTitle ? title ? title : name : '',
+        "data-title": needTitle ? title ? title : name : null,
         "data-id": dataId,
         onClick: onClick
       }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement("span", {

package/lib/Button/Button.js

@@ -17,8 +17,6 @@ var _dummyFunction = require("../utils/dummyFunction");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign || 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); } }
@@ -74,8 +72,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
           needAppearance = _this$props.needAppearance,
           getRef = _this$props.getRef,
           title = _this$props.title,
-          customClass = _this$props.customClass,
-          customProps = _this$props.customProps;
+          customClass = _this$props.customClass;
       var _customClass$customBu = customClass.customButton,
           customButton = _customClass$customBu === void 0 ? '' : _customClass$customBu,
           _customClass$customSt = customClass.customStatus,
@@ -85,7 +82,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
       var paletteLower = palette.toLowerCase();
       var statusLower = status.toLowerCase();
       var classList = needAppearance ? "".concat(_ButtonModule["default"][paletteLower], " ").concat(rounded ? _ButtonModule["default"].rounded : '', " ").concat(!children ? _ButtonModule["default"][size.toLowerCase()] : "".concat(_ButtonModule["default"]["".concat(size, "Btn")], " \n             ").concat(rounded ? _ButtonModule["default"]["".concat(size, "Btn").concat(paletteLower)] : ''), " ").concat(statusLower !== 'none' ? _ButtonModule["default"].loader : '') : "".concat(_ButtonModule["default"]["default"]);
-      return /*#__PURE__*/_react["default"].createElement("button", _extends({
+      return /*#__PURE__*/_react["default"].createElement("button", {
         className: "".concat(customButton, " ").concat(classList, " ").concat(isBold ? _ButtonModule["default"].bold : '', "  "),
         "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
         disabled: disabled || statusLower === 'loading',
@@ -93,7 +90,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         type: "button",
         ref: getRef
-      }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
+      }, children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
         className: _ButtonModule["default"].overlay
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(customStatusSize, " ").concat(statusLower === 'loading' ? "".concat(_ButtonModule["default"].loading, " ").concat(_ButtonModule["default"]["".concat(size, "loading")] ? _ButtonModule["default"]["".concat(size, "loading")] : '') : _ButtonModule["default"].success)
@@ -119,8 +116,7 @@ Button.defaultProps = {
   size: 'medium',
   status: 'none',
   text: 'Button',
-  customClass: {},
-  customProps: {}
+  customClass: {}
 };
 Button.propTypes = {
   children: _propTypes["default"].node,
@@ -141,8 +137,7 @@ Button.propTypes = {
     customButton: _propTypes["default"].string,
     customStatus: _propTypes["default"].string,
     customStatusSize: _propTypes["default"].string
-  }),
-  customProps: _propTypes["default"].object
+  })
 }; // Button.propTypesDescription = {
 //   onClick: ' ',
 //   text: ' ',

package/lib/ListItem/ListItem.js

@@ -17,6 +17,8 @@ var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -57,6 +59,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
     _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
     _this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
     _this.handleMouseEnter = _this.handleMouseEnter.bind(_assertThisInitialized(_this));
+    _this.responsiveFunc = _this.responsiveFunc.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -90,9 +93,21 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           index = _this$props3.index;
       onMouseEnter && onMouseEnter(id, value, index, e);
     }
+  }, {
+    key: "responsiveFunc",
+    value: function responsiveFunc(_ref) {
+      var mediaQueryOR = _ref.mediaQueryOR;
+      return {
+        mobileToTab: mediaQueryOR([{
+          maxWidth: 700
+        }])
+      };
+    }
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props4 = this.props,
           size = _this$props4.size,
           active = _this$props4.active,
@@ -125,43 +140,49 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
       var tickIconPalette = _ListItemModule["default"]["".concat(palette, "Tick")] ? _ListItemModule["default"]["".concat(palette, "Tick")] : '';
       var dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-      return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
-        a11y: a11y,
-        size: size,
-        palette: palette,
-        highlight: highlight,
-        isDisabled: isDisabled,
-        active: active,
-        autoHover: autoHover,
-        needTick: needTick,
-        needBorder: needBorder,
-        customClass: customListItem,
-        dataId: dataIdString,
-        isLink: isLink,
-        href: href,
-        target: target,
-        disableTitle: disableTitle,
-        title: title,
-        onClick: this.handleClick,
-        onMouseEnter: this.handleMouseEnter,
-        eleRef: this.getRef,
-        customProps: ListItemProps
-      }, ContainerProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        shrink: true,
-        adjust: true,
-        className: _ListItemModule["default"].value
-      }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        shrink: true,
-        adjust: true,
-        className: _ListItemModule["default"].children
-      }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
-        "aria-hidden": ariaHidden,
-        dataId: "".concat(dataIdString, "_tickIcon")
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        name: "ZD-ticknew",
-        size: "8"
-      })) : null);
+      return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+        query: this.responsiveFunc,
+        responsiveId: "Helmet"
+      }, function (_ref2) {
+        var mobileToTab = _ref2.mobileToTab;
+        return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
+          a11y: a11y,
+          size: size,
+          palette: palette,
+          highlight: highlight,
+          isDisabled: isDisabled,
+          active: active,
+          autoHover: autoHover,
+          needTick: needTick,
+          needBorder: needBorder,
+          customClass: "".concat(customListItem, " ").concat(mobileToTab && _ListItemModule["default"].responsiveHeight),
+          dataId: dataIdString,
+          isLink: isLink,
+          href: href,
+          target: target,
+          disableTitle: disableTitle,
+          title: title,
+          onClick: _this2.handleClick,
+          onMouseEnter: _this2.handleMouseEnter,
+          eleRef: _this2.getRef,
+          customProps: ListItemProps
+        }, ContainerProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          shrink: true,
+          adjust: true,
+          className: _ListItemModule["default"].value
+        }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          shrink: true,
+          adjust: true,
+          className: _ListItemModule["default"].children
+        }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
+          "aria-hidden": ariaHidden,
+          dataId: "".concat(dataIdString, "_tickIcon")
+        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          name: "ZD-ticknew",
+          size: "8"
+        })) : null);
+      });
     }
   }]);
 

package/lib/ListItem/ListItem.module.css

@@ -70,6 +70,17 @@
 [dir=rtl] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
+.responsiveHeight {
+  --listitem_height: var(--zd_size45);
+}
+[dir=ltr] .responsiveHeight {
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
+    var(--zd_size20)
+    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
+}
+[dir=rtl] .responsiveHeight {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+}
 
 .value,
 .children {

package/lib/ListItem/ListItemWithAvatar.js

@@ -21,6 +21,8 @@ var _AvatarTeam = _interopRequireDefault(require("../AvatarTeam/AvatarTeam"));
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 var _ListItemWithAvatar$p;
@@ -65,6 +67,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
     _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
     _this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
     _this.handleMouseEnter = _this.handleMouseEnter.bind(_assertThisInitialized(_this));
+    _this.responsiveFunc = _this.responsiveFunc.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -98,9 +101,21 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           index = _this$props3.index;
       onMouseEnter && onMouseEnter(id, value, index, e);
     }
+  }, {
+    key: "responsiveFunc",
+    value: function responsiveFunc(_ref) {
+      var mediaQueryOR = _ref.mediaQueryOR;
+      return {
+        mobileToTab: mediaQueryOR([{
+          maxWidth: 700
+        }])
+      };
+    }
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props4 = this.props,
           size = _this$props4.size,
           active = _this$props4.active,
@@ -137,59 +152,65 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
       var isDarkPalette = palette === 'dark';
       var dataIdString = value ? value : dataId;
-      return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
-        a11y: a11y,
-        size: size,
-        palette: palette,
-        highlight: highlight,
-        isDisabled: isDisabled,
-        active: active,
-        autoHover: autoHover,
-        needTick: needTick,
-        needBorder: needBorder,
-        customClass: customListItem,
-        dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
-        onClick: this.handleClick,
-        onMouseEnter: this.handleMouseEnter,
-        eleRef: this.getRef,
-        disableTitle: disableTitle,
-        title: null,
-        customProps: ListItemProps
-      }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].leftAvatar
-      }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
-        name: name,
-        size: "small",
-        src: imgSrc,
-        needTitle: needAvatarTitle,
-        textPalette: isDarkPalette ? 'white' : '',
-        palette: isDarkPalette ? 'info' : avatarPalette,
-        customClass: {
-          customAvatar: customAvatar,
-          customAvatarTeam: customAvatarTeam
-        }
-      }) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
-        name: name,
-        size: "small",
-        src: imgSrc,
-        initial: initial,
-        textPalette: isDarkPalette ? 'white' : '',
-        needTitle: needAvatarTitle,
-        palette: isDarkPalette ? 'info' : avatarPalette,
-        customClass: customAvatar
-      })) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true,
-        shrink: true,
-        "data-title": isDisabled ? null : title,
-        className: _ListItemModule["default"].value
-      }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].tickIcon,
-        "aria-hidden": ariaHidden,
-        dataId: "".concat(dataIdString, "_tickIcon")
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        name: "ZD-ticknew",
-        size: "8"
-      })) : null);
+      return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+        query: this.responsiveFunc,
+        responsiveId: "Helmet"
+      }, function (_ref2) {
+        var mobileToTab = _ref2.mobileToTab;
+        return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
+          a11y: a11y,
+          size: size,
+          palette: palette,
+          highlight: highlight,
+          isDisabled: isDisabled,
+          active: active,
+          autoHover: autoHover,
+          needTick: needTick,
+          needBorder: needBorder,
+          customClass: "".concat(customListItem, " ").concat(mobileToTab && _ListItemModule["default"].responsiveHeight),
+          dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
+          onClick: _this2.handleClick,
+          onMouseEnter: _this2.handleMouseEnter,
+          eleRef: _this2.getRef,
+          disableTitle: disableTitle,
+          title: null,
+          customProps: ListItemProps
+        }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: _ListItemModule["default"].leftAvatar
+        }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
+          name: name,
+          size: "small",
+          src: imgSrc,
+          needTitle: needAvatarTitle,
+          textPalette: isDarkPalette ? 'white' : '',
+          palette: isDarkPalette ? 'info' : avatarPalette,
+          customClass: {
+            customAvatar: customAvatar,
+            customAvatarTeam: customAvatarTeam
+          }
+        }) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+          name: name,
+          size: "small",
+          src: imgSrc,
+          initial: initial,
+          textPalette: isDarkPalette ? 'white' : '',
+          needTitle: needAvatarTitle,
+          palette: isDarkPalette ? 'info' : avatarPalette,
+          customClass: customAvatar
+        })) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true,
+          shrink: true,
+          "data-title": isDisabled ? null : title,
+          className: _ListItemModule["default"].value
+        }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: _ListItemModule["default"].tickIcon,
+          "aria-hidden": ariaHidden,
+          dataId: "".concat(dataIdString, "_tickIcon")
+        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          name: "ZD-ticknew",
+          size: "8"
+        })) : null);
+      });
     }
   }]);