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

package/lib/ListItem/ListItemWithCheckBox.js

@@ -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); }
@@ -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

@@ -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 }; }
@@ -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);
+      });
     }
   }]);
 

package/lib/ListItem/ListItemWithRadio.js

@@ -19,6 +19,8 @@ var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 
 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); }
@@ -57,6 +59,7 @@ var ListItemWithRadio = /*#__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 ListItemWithRadio = /*#__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,
@@ -118,40 +133,46 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           customRadio = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2;
-      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: dataId,
-        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(_Radio["default"], {
-        checked: checked,
-        id: id,
-        a11y: {
-          ariaHidden: true
-        },
-        customClass: {
-          customRadio: customRadio,
-          customRadioWrap: customRadioWrap
-        }
-      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        flexible: true,
-        shrink: true,
-        "data-title": disableTitle ? 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: dataId,
+          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(_Radio["default"], {
+          checked: checked,
+          id: id,
+          a11y: {
+            ariaHidden: true
+          },
+          customClass: {
+            customRadio: customRadio,
+            customRadioWrap: customRadioWrap
+          }
+        })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true,
+          shrink: true,
+          "data-title": disableTitle ? null : title,
+          className: _ListItemModule["default"].value
+        }, value));
+      });
     }
   }]);
 

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -976,7 +976,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
-        "data-title": isDisabled ? title : '',
+        "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus
       }, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -456,7 +456,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_AdvancedMultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _AdvancedMultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _AdvancedMultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _AdvancedMultiSelectModule["default"].effect : ''),
         "data-id": dataIdMultiSelectComp,
-        "data-title": isDisabled ? title : '',
+        "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",

package/lib/MultiSelect/MultiSelect.js

@@ -980,7 +980,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
-        "data-title": isDisabled ? title : '',
+        "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -168,7 +168,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
-        "data-title": isDisabled ? title : '',
+        "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",

package/lib/Responsive/sizeObservers.js

@@ -62,7 +62,14 @@ function rangeCheck(minValue, maxValue, screenValue) {
   return minValue <= screenValue && maxValue >= screenValue;
 }
 
-var 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;
+
+
+var isTouchDevice = isTouchDeviceFunc();
 exports.isTouchDevice = isTouchDevice;
 
 function isBreackPointMatched(object, screen) {

package/lib/Select/GroupSelect.js

@@ -669,7 +669,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/Select/Select.js

@@ -778,7 +778,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isParentBased || isReadOnly || isDisabled ? _SelectModule["default"].container : '', " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/Select/SelectWithAvatar.js

@@ -212,7 +212,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/Select/SelectWithIcon.js

@@ -352,7 +352,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
       var ariaErrorId = this.getNextAriaId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -145,7 +145,7 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
         alignBox: "row",
         isCover: false,
         className: "".concat(_TextBoxIconModule["default"].container, " ").concat(isDisabled ? _TextBoxIconModule["default"].disabled : isReadOnly ? needEffect ? _TextBoxIconModule["default"].effect : _TextBoxIconModule["default"].readonly : _TextBoxIconModule["default"].effect, " ").concat(isActive || isFocus ? _TextBoxIconModule["default"].effectFocused : '', " ").concat(customTBoxWrap, " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _TextBoxIconModule["default"].iconOnHoverStyle : ''),
-        "data-title": isDisabled ? title : ''
+        "data-title": isDisabled ? title : null
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({}, this.props, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-49",
+  "version": "1.0.0-temp-50",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",