@zohodesk/components 1.2.25 → 1.2.26

package/lib/MultiSelect/MultiSelect.js

@@ -35,12 +35,12 @@ var _IdProvider = require("../Provider/IdProvider");
 
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 
-var _CustomResponsive = require("../Responsive/CustomResponsive");
-
 var _MultiSelectHeader = _interopRequireDefault(require("./MultiSelectHeader"));
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
+var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobilePopover"));
+
 var _icons = require("@zohodesk/icons");
 
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
@@ -918,16 +918,6 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         openPopupOnly: openPopupOnly
       });
     }
-  }, {
-    key: "responsiveFunc",
-    value: function responsiveFunc(_ref6) {
-      var mediaQueryOR = _ref6.mediaQueryOR;
-      return {
-        tabletMode: mediaQueryOR([{
-          maxWidth: 700
-        }])
-      };
-    }
   }, {
     key: "getSelectionUI",
     value: function getSelectionUI() {
@@ -1048,8 +1038,6 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
-
       var _this$props15 = this.props,
           isReadOnly = _this$props15.isReadOnly,
           searchEmptyMessage = _this$props15.searchEmptyMessage,
@@ -1099,6 +1087,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
         noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
       });
+      var isModel = (0, _isMobilePopover["default"])(needResponsive);
       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),
@@ -1106,83 +1095,77 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId
-      }, this.getSelectionUI(), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
-        query: this.responsiveFunc,
-        responsiveId: "Helmet"
-      }, function (_ref7) {
-        var tabletMode = _ref7.tabletMode;
-        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
-          animationStyle: animationStyle,
-          boxPosition: position || "".concat(defaultDropBoxPosition),
-          getRef: getContainerRef,
-          isActive: isPopupReady,
-          isAnimate: isAnimate,
-          isArrow: false,
-          onClick: removeClose,
-          needResponsive: needResponsive,
-          isPadding: false,
-          isBoxPaddingNeed: isBoxPaddingNeed,
-          palette: palette,
-          htmlId: setAriaId,
-          a11y: {
-            role: 'listbox',
-            ariaMultiselectable: true
-          },
-          size: boxSize,
-          alignBox: "row",
-          isResponsivePadding: getFooter ? false : true
-        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          flexible: true
-        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-          customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
-          onScroll: _this5.handleScroll
-        }, tabletMode && /*#__PURE__*/_react["default"].createElement(_MobileHeader["default"], {
-          selectedOptions: selectedOptions,
-          i18nKeys: i18nKeys,
-          onClick: _this5.handlePopupClose
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].effect
-        }, _this5.getSelectionUI(true))), needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
-          onSelect: _this5.handleSelectAll,
-          selectAllText: selectAllText,
-          suggestions: suggestions,
-          dataId: dataId
-        })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          align: "both",
-          className: _MultiSelectModule["default"].loader
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-          shrink: true,
-          customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
-          eleRef: _this5.suggestionContainerRef
-        }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"][palette]
-        }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
-          suggestions: suggestions,
-          getRef: _this5.suggestionItemRef,
-          hoverOption: hoverOption,
-          onClick: _this5.handleSelectOption,
-          onMouseEnter: _this5.handleMouseEnter,
-          needBorder: false,
-          dataId: "".concat(dataId, "_Options"),
-          palette: palette,
-          selectedOptions: selectedOptionIds,
-          a11y: {
-            role: 'option'
-          }
-        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-          isLoading: isFetchingOptions,
-          options: options,
-          searchString: searchStr,
-          suggestions: suggestions,
-          dataId: dataId,
-          palette: palette,
-          i18nKeys: i18nKeys,
-          htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          isCover: false,
-          align: "both"
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)));
-      }) : null);
+      }, this.getSelectionUI(), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+        animationStyle: animationStyle,
+        boxPosition: position || "".concat(defaultDropBoxPosition),
+        getRef: getContainerRef,
+        isActive: isPopupReady,
+        isAnimate: isAnimate,
+        isArrow: false,
+        onClick: removeClose,
+        needResponsive: needResponsive,
+        isPadding: false,
+        isBoxPaddingNeed: isBoxPaddingNeed,
+        palette: palette,
+        htmlId: setAriaId,
+        a11y: {
+          role: 'listbox',
+          ariaMultiselectable: true
+        },
+        size: boxSize,
+        alignBox: "row",
+        isResponsivePadding: getFooter ? false : true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true
+      }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+        customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
+        onScroll: this.handleScroll
+      }, isModel ? /*#__PURE__*/_react["default"].createElement(_MobileHeader["default"], {
+        selectedOptions: selectedOptions,
+        i18nKeys: i18nKeys,
+        onClick: this.handlePopupClose
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: _MultiSelectModule["default"].effect
+      }, this.getSelectionUI(true))) : null, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+        onSelect: this.handleSelectAll,
+        selectAllText: selectAllText,
+        suggestions: suggestions,
+        dataId: dataId
+      })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        align: "both",
+        className: _MultiSelectModule["default"].loader
+      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        shrink: true,
+        customClass: !isModel && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
+        eleRef: this.suggestionContainerRef
+      }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: _MultiSelectModule["default"][palette]
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+        suggestions: suggestions,
+        getRef: this.suggestionItemRef,
+        hoverOption: hoverOption,
+        onClick: this.handleSelectOption,
+        onMouseEnter: this.handleMouseEnter,
+        needBorder: false,
+        dataId: "".concat(dataId, "_Options"),
+        palette: palette,
+        selectedOptions: selectedOptionIds,
+        a11y: {
+          role: 'option'
+        }
+      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        isLoading: isFetchingOptions,
+        options: options,
+        searchString: searchStr,
+        suggestions: suggestions,
+        dataId: dataId,
+        palette: palette,
+        i18nKeys: i18nKeys,
+        htmlId: ariaErrorId
+      }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null))) : null);
     }
   }]);
 

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -33,12 +33,12 @@ var _IdProvider = require("../Provider/IdProvider");
 
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
 
-var _CustomResponsive = require("../Responsive/CustomResponsive");
-
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
 var _MultiSelectHeader = _interopRequireDefault(require("./MultiSelectHeader"));
 
+var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobilePopover"));
+
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
 var _MobileHeader = _interopRequireDefault(require("./MobileHeader/MobileHeader"));
@@ -109,21 +109,9 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         disabledOptions: disabledOptions
       });
     }
-  }, {
-    key: "responsiveFunc",
-    value: function responsiveFunc(_ref) {
-      var mediaQueryOR = _ref.mediaQueryOR;
-      return {
-        tabletMode: mediaQueryOR([{
-          maxWidth: 700
-        }])
-      };
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$props = this.props,
           isReadOnly = _this$props.isReadOnly,
           needSelectAll = _this$props.needSelectAll,
@@ -172,6 +160,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
       var popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
+      var isModel = (0, _isMobilePopover["default"])(needResponsive);
       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),
@@ -179,81 +168,75 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId
-      }, this.getSelectionUI(), popUpState ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
-        query: this.responsiveFunc,
-        responsiveId: "Helmet"
-      }, function (_ref2) {
-        var tabletMode = _ref2.tabletMode;
-        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
-          animationStyle: animationStyle,
-          boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
-          getRef: getContainerRef,
-          isActive: isPopupReady,
-          isAnimate: isAnimate,
-          isArrow: false,
-          onClick: removeClose,
-          needResponsive: needResponsive,
-          isPadding: false,
-          isBoxPaddingNeed: isBoxPaddingNeed,
-          palette: palette,
-          htmlId: setAriaId,
-          a11y: {
-            ariaMultiselectable: true,
-            role: 'listbox'
-          },
-          isResponsivePadding: true,
-          alignBox: "row"
-        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          flexible: true
-        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-          customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
-          onScroll: _this2.handleScroll
-        }, tabletMode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MobileHeader["default"], {
-          selectedOptions: selectedOptions,
-          i18nKeys: i18nKeys,
-          onClick: _this2.handlePopupClose
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"].effect
-        }, _this2.getSelectionUI(true)))), needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
-          onSelect: _this2.handleSelectAll,
-          selectAllText: selectAllText,
-          suggestions: suggestions,
-          dataId: dataId
-        })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          align: "both",
-          className: _MultiSelectModule["default"].loader
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-          shrink: true,
-          customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
-          eleRef: _this2.suggestionContainerRef
-        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
-          needTick: keepSelectedOptions,
-          suggestions: suggestions,
-          getRef: _this2.suggestionItemRef,
-          hoverOption: hoverOption,
-          onClick: _this2.handleSelectOption,
-          onMouseEnter: _this2.handleMouseEnter,
-          needBorder: false,
-          dataId: "".concat(dataId, "_Options"),
-          palette: palette,
-          selectedOptions: selectedOptionIds,
-          a11y: {
-            role: 'option'
-          }
-        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-          isLoading: isFetchingOptions,
-          options: options,
-          searchString: searchStr,
-          suggestions: suggestions,
-          dataId: dataId,
-          palette: palette,
-          i18nKeys: i18nKeys,
-          htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-          isCover: false,
-          align: "both"
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))));
-      }) : null);
+      }, this.getSelectionUI(), popUpState ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+        animationStyle: animationStyle,
+        boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
+        getRef: getContainerRef,
+        isActive: isPopupReady,
+        isAnimate: isAnimate,
+        isArrow: false,
+        onClick: removeClose,
+        needResponsive: needResponsive,
+        isPadding: false,
+        isBoxPaddingNeed: isBoxPaddingNeed,
+        palette: palette,
+        htmlId: setAriaId,
+        a11y: {
+          ariaMultiselectable: true,
+          role: 'listbox'
+        },
+        isResponsivePadding: true,
+        alignBox: "row"
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true
+      }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+        customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
+        onScroll: this.handleScroll
+      }, isModel ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MobileHeader["default"], {
+        selectedOptions: selectedOptions,
+        i18nKeys: i18nKeys,
+        onClick: this.handlePopupClose
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: _MultiSelectModule["default"].effect
+      }, this.getSelectionUI(true)))) : null, needSelectAll ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+        onSelect: this.handleSelectAll,
+        selectAllText: selectAllText,
+        suggestions: suggestions,
+        dataId: dataId
+      })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        align: "both",
+        className: _MultiSelectModule["default"].loader
+      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        shrink: true,
+        customClass: !isModel && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
+        eleRef: this.suggestionContainerRef
+      }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+        needTick: keepSelectedOptions,
+        suggestions: suggestions,
+        getRef: this.suggestionItemRef,
+        hoverOption: hoverOption,
+        onClick: this.handleSelectOption,
+        onMouseEnter: this.handleMouseEnter,
+        needBorder: false,
+        dataId: "".concat(dataId, "_Options"),
+        palette: palette,
+        selectedOptions: selectedOptionIds,
+        a11y: {
+          role: 'option'
+        }
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        isLoading: isFetchingOptions,
+        options: options,
+        searchString: searchStr,
+        suggestions: suggestions,
+        dataId: dataId,
+        palette: palette,
+        i18nKeys: i18nKeys,
+        htmlId: ariaErrorId
+      }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)))))) : null);
     }
   }]);
 

package/lib/Tag/Tag.js

@@ -183,7 +183,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
       }, text), onRemove && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         customClass: "".concat(_TagModule["default"].close, " ").concat(active ? _TagModule["default"]["active".concat(closePalette, "Close")] : '', "\n            ").concat(rounded ? _TagModule["default"].lgRadiusClose : _TagModule["default"].smRadiusClose, " ").concat(isDarkPalette ? _TagModule["default"].darkTagClose : '', "\n            ").concat(customTagClose, " ").concat(_TagModule["default"]["close".concat(closePalette)]),
         dataId: "".concat(dataId, "_RemoveTag"),
-        "data-title": closeTitle,
+        title: closeTitle,
         onClick: this.handleRemove,
         a11y: {
           ariaLabel: clearLabel

package/lib/v1/DropBox/DropBox.js

@@ -13,8 +13,6 @@ var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/F
 
 var _Modal = _interopRequireDefault(require("../Modal/Modal"));
 
-var _Config = require("../../Provider/Config");
-
 var _LibraryContextInit = _interopRequireDefault(require("../../Provider/LibraryContextInit"));
 
 var _cssJSLogic2 = _interopRequireDefault(require("../../DropBox/css/cssJSLogic"));
@@ -27,6 +25,8 @@ var _propTypes = require("./props/propTypes");
 
 var _Common = require("../../utils/Common");
 
+var _isMobilePopover = _interopRequireDefault(require("./utils/isMobilePopover"));
+
 var _DropBoxModule = _interopRequireDefault(require("../../DropBox/css/DropBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -64,17 +64,7 @@ function DropBox(props) {
   var _ref = DropBoxContext || {},
       direction = _ref.direction;
 
-  var windowWidth,
-      mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth'),
-      isModel = false;
-
-  if (needResponsive) {
-    windowWidth = window.innerWidth;
-
-    if (windowWidth <= mobileWidth) {
-      isModel = true;
-    }
-  }
+  var isModel = (0, _isMobilePopover["default"])(needResponsive);
 
   var _cssJSLogic = (0, _cssJSLogic2["default"])(props),
       zIndexStyle = _cssJSLogic.zIndexStyle;

package/lib/v1/DropBox/utils/isMobilePopover.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = isMobilePopover;
+
+var _Config = require("../../Provider/Config");
+
+function isMobilePopover(needResponsive) {
+  //   let { needResponsive } = props;
+  var windowWidth,
+      mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth'),
+      isModel = false;
+
+  if (needResponsive) {
+    windowWidth = window.innerWidth;
+
+    if (windowWidth <= mobileWidth) {
+      isModel = true;
+    }
+  }
+
+  return isModel ? true : false;
+}