@zohodesk/components 1.2.24 → 1.2.26

package/es/v1/MultiSelect/MultiSelect.js

@@ -17,8 +17,8 @@ import MultiSelectHeader from './MultiSelectHeader';
 import CssProvider from '../../Provider/CssProvider';
 import { getUniqueId } from '../../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import isMobilePopover from '../DropBox/utils/isMobilePopover';
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';
@@ -28,8 +28,8 @@ import style from '../../MultiSelect/MultiSelect.module.css';
 /**** Methods ****/
 
 import { debounce, scrollTo, bind, getIsEmptyValue, getSearchString, findScrollEnd } from '../../utils/Common.js';
-import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from '../../utils/dropDownUtils';
-import { getLibraryConfig } from '../../Provider/Config';
+import { makeFormatOptions, makeGetMultiSelectFilterSuggestions as makeGetFilterSuggestions, makeGetMultiSelectSelectedOptions as makeGetSelectedOptions, makeObjectConcat, filterSelectedOptions, makeGetIsShowClearIcon } from '../../utils/dropDownUtils'; // import { getLibraryConfig } from '../../Provider/Config';
+
 /* eslint-disable react/forbid-component-props */
 
 /* eslint-disable react/no-unused-prop-types */
@@ -840,17 +840,6 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   getSelectionUI() {
     let isResponsive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     let {
@@ -1023,6 +1012,7 @@ export class MultiSelectComponent extends React.Component {
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
       noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
     });
+    let isModel = isMobilePopover(needResponsive);
     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}`,
@@ -1030,85 +1020,77 @@ export class MultiSelectComponent extends React.Component {
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId
-    }, this.getSelectionUI(), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        animationStyle: animationStyle,
-        boxPosition: position || `${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.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        customClass: `${style.box} ${style[`${palette}Box`]}`,
-        onScroll: this.handleScroll
-      }, tabletMode && /*#__PURE__*/React.createElement(MobileHeader, {
-        selectedOptions: selectedOptions,
-        i18nKeys: i18nKeys,
-        onClick: this.handlePopupClose
-      }, /*#__PURE__*/React.createElement("div", {
-        className: style.effect
-      }, this.getSelectionUI(true))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        onSelect: this.handleSelectAll,
-        selectAllText: selectAllText,
-        suggestions: suggestions,
-        dataId: dataId
-      })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, isSearching ? /*#__PURE__*/React.createElement("div", {
-        className: style[palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverOption,
-        onClick: this.handleSelectOption,
-        onMouseEnter: this.handleMouseEnter,
-        needBorder: false,
-        dataId: `${dataId}_Options`,
-        palette: palette,
-        selectedOptions: selectedOptionIds,
-        a11y: {
-          role: 'option'
-        }
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        palette: palette,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
-    }) : null);
+    }, this.getSelectionUI(), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      animationStyle: animationStyle,
+      boxPosition: position || `${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.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, {
+      customClass: `${style.box} ${style[`${palette}Box`]}`,
+      onScroll: this.handleScroll
+    }, isModel && /*#__PURE__*/React.createElement(MobileHeader, {
+      selectedOptions: selectedOptions,
+      i18nKeys: i18nKeys,
+      onClick: this.handlePopupClose
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.effect
+    }, this.getSelectionUI(true))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      onSelect: this.handleSelectAll,
+      selectAllText: selectAllText,
+      suggestions: suggestions,
+      dataId: dataId
+    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true,
+      customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
+      eleRef: this.suggestionContainerRef
+    }, isSearching ? /*#__PURE__*/React.createElement("div", {
+      className: style[palette]
+    }, searchText) : suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+      suggestions: suggestions,
+      getRef: this.suggestionItemRef,
+      hoverOption: hoverOption,
+      onClick: this.handleSelectOption,
+      onMouseEnter: this.handleMouseEnter,
+      needBorder: false,
+      dataId: `${dataId}_Options`,
+      palette: palette,
+      selectedOptions: selectedOptionIds,
+      a11y: {
+        role: 'option'
+      }
+    }) : /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: isFetchingOptions,
+      options: options,
+      searchString: searchStr,
+      suggestions: suggestions,
+      dataId: dataId,
+      palette: palette,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null))) : null);
   }
 
 }

package/es/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -17,12 +17,13 @@ import MobileHeader from './MobileHeader/MobileHeader';
 import MultiSelectHeader from './MultiSelectHeader';
 import CssProvider from '../../Provider/CssProvider';
 import { getUniqueId } from '../../Provider/IdProvider';
-import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox'; // import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import isMobilePopover from '../DropBox/utils/isMobilePopover';
 /**** Icons ****/
+// import { Icon } from '@zohodesk/icons';
 
-import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
 import style from '../../MultiSelect/MultiSelect.module.css';
@@ -57,17 +58,6 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     });
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       isReadOnly,
@@ -108,6 +98,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
       noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
     });
+    let isModel = isMobilePopover(needResponsive);
     const {
       selectedOptions,
       searchStr,
@@ -127,83 +118,75 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId
-    }, this.getSelectionUI(), popUpState ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        animationStyle: animationStyle,
-        boxPosition: position || `${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.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Card, {
-        customClass: `${style.box} ${style[`${palette}Box`]}`,
-        onScroll: this.handleScroll
-      }, tabletMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileHeader, {
-        selectedOptions: selectedOptions,
-        i18nKeys: i18nKeys,
-        onClick: this.handlePopupClose
-      }, /*#__PURE__*/React.createElement("div", {
-        className: style.effect
-      }, this.getSelectionUI(true)))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        onSelect: this.handleSelectAll,
-        selectAllText: selectAllText,
-        suggestions: suggestions,
-        dataId: dataId
-      })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
-        align: "both",
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
-        shrink: true,
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-        needTick: keepSelectedOptions,
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverOption,
-        onClick: this.handleSelectOption,
-        onMouseEnter: this.handleMouseEnter,
-        needBorder: false,
-        dataId: `${dataId}_Options`,
-        palette: palette,
-        selectedOptions: selectedOptionIds,
-        a11y: {
-          role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        palette: palette,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Loader, null))))));
-    }) : null);
+    }, this.getSelectionUI(), popUpState ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      animationStyle: animationStyle,
+      boxPosition: position || `${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.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Card, {
+      customClass: `${style.box} ${style[`${palette}Box`]}`,
+      onScroll: this.handleScroll
+    }, isModel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileHeader, {
+      selectedOptions: selectedOptions,
+      i18nKeys: i18nKeys,
+      onClick: this.handlePopupClose
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.effect
+    }, this.getSelectionUI(true)))), needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      onSelect: this.handleSelectAll,
+      selectAllText: selectAllText,
+      suggestions: suggestions,
+      dataId: dataId
+    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
+      shrink: true,
+      customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
+      eleRef: this.suggestionContainerRef
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      needTick: keepSelectedOptions,
+      suggestions: suggestions,
+      getRef: this.suggestionItemRef,
+      hoverOption: hoverOption,
+      onClick: this.handleSelectOption,
+      onMouseEnter: this.handleMouseEnter,
+      needBorder: false,
+      dataId: `${dataId}_Options`,
+      palette: palette,
+      selectedOptions: selectedOptionIds,
+      a11y: {
+        role: 'option'
+      }
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: isFetchingOptions,
+      options: options,
+      searchString: searchStr,
+      suggestions: suggestions,
+      dataId: dataId,
+      palette: palette,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Loader, null)))))) : null);
   }
 
 }

package/es/v1/RippleEffect/RippleEffect.js

@@ -12,12 +12,13 @@ export default function RippleEffect(props) {
     hoverType,
     isNeedEffect,
     needBorder,
-    isCopyTextEnabled
+    isCopyTextEnabled,
+    cssClassPropOfChild
   } = props;
   let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
   let child = React.Children.only(children);
   return /*#__PURE__*/React.cloneElement(child, {
-    className: `${child.props.className || ''} ${className}`
+    [cssClassPropOfChild]: `${child.props[cssClassPropOfChild] || ''} ${className}`
   });
 }
 RippleEffect.defaultProps = defaultProps;

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

@@ -5,5 +5,6 @@ export const defaultProps = {
   needBorder: true,
   hoverType: 'default',
   palette: 'default',
+  cssClassPropOfChild: 'className',
   isCopyTextEnabled: false
 };

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

@@ -7,5 +7,6 @@ export const propTypes = {
   isNeedEffect: PropTypes.bool,
   needBorder: PropTypes.bool,
   palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  cssClassPropOfChild: PropTypes.string,
   isCopyTextEnabled: PropTypes.bool
 };

package/es/v1/Tag/Tag.js

@@ -115,7 +115,7 @@ function Tag(props) {
           ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''}
           ${customTagClose} ${style[`close${closePalette}`]}`,
     dataId: `${dataId}_RemoveTag`,
-    "data-title": closeTitle,
+    title: closeTitle,
     onClick: handleRemove,
     a11y: {
       ariaLabel: clearLabel

package/lib/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("./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("./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/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;
+}