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

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

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -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;
@@ -35,9 +37,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 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); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, 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);
+      });
     }
   }]);
 

package/lib/ListItem/ListItemWithCheckBox.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -19,6 +19,8 @@ var _Layout = require("../Layout");
 
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 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); }
@@ -27,9 +29,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 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); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -57,6 +59,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
     _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
     _this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
     _this.onHover = _this.onHover.bind(_assertThisInitialized(_this));
+    _this.responsiveFunc = _this.responsiveFunc.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -89,9 +92,21 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           index = _this$props3.index;
       onHover && onHover(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,
@@ -117,39 +132,45 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customCheckBox = _customClass$customCh === void 0 ? '' : _customClass$customCh,
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
-      return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
-        a11y: a11y,
-        size: size,
-        palette: palette,
-        highlight: highlight,
-        isDisabled: isDisabled,
-        active: active,
-        autoHover: autoHover,
-        customClass: customListItem,
-        dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
-        onClick: this.onClick,
-        onMouseOver: this.onHover,
-        eleRef: this.getRef,
-        disableTitle: disableTitle,
-        title: null,
-        customProps: ListItemProps
-      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].iconBox
-      }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
-        checked: checked,
-        a11y: {
-          ariaHidden: true
-        },
-        customClass: {
-          customCheckBox: customCheckBox,
-          customLabel: customLabel
-        }
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true,
-        shrink: true,
-        "data-title": isDisabled ? null : title,
-        className: _ListItemModule["default"].value
-      }, value));
+      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,
+          customClass: "".concat(customListItem, " ").concat(mobileToTab && _ListItemModule["default"].responsiveHeight),
+          dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
+          onClick: _this2.onClick,
+          onMouseOver: _this2.onHover,
+          eleRef: _this2.getRef,
+          disableTitle: disableTitle,
+          title: null,
+          customProps: ListItemProps
+        }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: _ListItemModule["default"].iconBox
+        }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
+          checked: checked,
+          a11y: {
+            ariaHidden: true
+          },
+          customClass: {
+            customCheckBox: customCheckBox,
+            customLabel: customLabel
+          }
+        })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true,
+          shrink: true,
+          "data-title": isDisabled ? null : title,
+          className: _ListItemModule["default"].value
+        }, value));
+      });
     }
   }]);
 

package/lib/ListItem/ListItemWithIcon.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -17,6 +17,8 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -27,9 +29,9 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 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); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
@@ -57,6 +59,7 @@ var ListItemWithIcon = /*#__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 ListItemWithIcon = /*#__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,
@@ -122,51 +137,57 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
       var _a11y$ariaHidden = a11y.ariaHidden,
           ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
       var dataIdString = dataId ? "".concat(dataId.replace("'", '_')) : value.toLowerCase().replace("'", '_');
-      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: customClass,
-        dataId: dataIdString,
-        isLink: isLink,
-        href: href,
-        target: target,
-        onClick: this.handleClick,
-        onMouseOver: this.handleMouseEnter,
-        eleRef: this.getRef,
-        disableTitle: disableTitle,
-        title: null,
-        customProps: ListItemProps
-      }, ContainerProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        "aria-hidden": true,
-        className: _ListItemModule["default"].iconBox,
-        dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconClass: iconClass,
-        name: iconName,
-        size: iconSize
-      })), iconClass && !iconName ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: iconClass
-      }) : null, value && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true,
-        shrink: true,
-        className: _ListItemModule["default"].value,
-        "data-title": isDisabled ? null : title,
-        dataId: "".concat(dataIdString, "_Text")
-      }, value), 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: dataIdString,
+          isLink: isLink,
+          href: href,
+          target: target,
+          onClick: _this2.handleClick,
+          onMouseOver: _this2.handleMouseEnter,
+          eleRef: _this2.getRef,
+          disableTitle: disableTitle,
+          title: null,
+          customProps: ListItemProps
+        }, ContainerProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          "aria-hidden": true,
+          className: _ListItemModule["default"].iconBox,
+          dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
+        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+          iconClass: iconClass,
+          name: iconName,
+          size: iconSize
+        })), iconClass && !iconName ? /*#__PURE__*/_react["default"].createElement("span", {
+          className: iconClass
+        }) : null, value && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true,
+          shrink: true,
+          className: _ListItemModule["default"].value,
+          "data-title": isDisabled ? null : title,
+          dataId: "".concat(dataIdString, "_Text")
+        }, value), 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);
+      });
     }
   }]);