@zohodesk/components 1.2.25 → 1.2.26

package/README.md

@@ -32,6 +32,13 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.26
+
+- ** MultiSelect, MultiSelectWithAvatar  ** - Mobile Header Render Issue in Mobile Responsive Fixed.
+- ** isMobilePopover ** - Function added in Dropbox.
+- ** Tag ** -  closeTitle not working issue fixed ( because value sends in wrong prop key data-title)
+
+
 # 1.2.25
 
 - **RippleEffect** - cssClassPropOfChild prop added

package/es/DropBox/DropBox.js

@@ -1,15 +1,16 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
-import React, { useRef, Fragment, useContext } from 'react';
+import React, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-import Modal from '../Modal/Modal';
-import { getLibraryConfig } from '../Provider/Config';
+import Modal from '../Modal/Modal'; // import { getLibraryConfig } from '../Provider/Config';
+
 import LibraryContext from '../Provider/LibraryContextInit';
 import cssJSLogic from './css/cssJSLogic';
 import DropBoxElement from './DropBoxElement/DropBoxElement';
 import { DropBoxDefaultProps } from './props/defaultProps';
 import { DropBoxPropTypes } from './props/propTypes';
 import { stopPropagation } from './../utils/Common';
+import isMobilePopover from './utils/isMobilePopover';
 import style from './css/DropBox.module.css';
 export default function DropBox(props) {
   const dropBoxRef = useRef(null);
@@ -37,18 +38,7 @@ export default function DropBox(props) {
   const {
     direction
   } = DropBoxContext || {};
-  let windowWidth,
-      mobileWidth = getLibraryConfig('mobileWidth'),
-      isModel = false;
-
-  if (needResponsive) {
-    windowWidth = window.innerWidth;
-
-    if (windowWidth <= mobileWidth) {
-      isModel = true;
-    }
-  }
-
+  let isModel = isMobilePopover(needResponsive);
   const {
     zIndexStyle
   } = cssJSLogic(props);

package/es/DropBox/utils/isMobilePopover.js

@@ -0,0 +1,17 @@
+import { getLibraryConfig } from '../../Provider/Config';
+export default function isMobilePopover(needResponsive) {
+  //   let { needResponsive } = props;
+  let windowWidth,
+      mobileWidth = getLibraryConfig('mobileWidth'),
+      isModel = false;
+
+  if (needResponsive) {
+    windowWidth = window.innerWidth;
+
+    if (windowWidth <= mobileWidth) {
+      isModel = true;
+    }
+  }
+
+  return isModel ? true : false;
+}

package/es/MultiSelect/MultiSelect.js

@@ -14,10 +14,11 @@ import Suggestions from './Suggestions';
 import EmptyState from './EmptyState';
 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 MultiSelectHeader from './MultiSelectHeader';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import isMobilePopover from '../DropBox/utils/isMobilePopover';
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';
@@ -838,17 +839,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 {
@@ -1021,6 +1011,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}`,
@@ -1028,85 +1019,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))) : null, 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/MultiSelect/MultiSelectWithAvatar.js

@@ -15,10 +15,11 @@ import Suggestions from './Suggestions';
 import EmptyState from './EmptyState';
 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 MultiSelectHeader from './MultiSelectHeader';
+import isMobilePopover from '../DropBox/utils/isMobilePopover';
 /**** CSS ****/
 
 import style from './MultiSelect.module.css';
@@ -54,17 +55,6 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     });
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       isReadOnly,
@@ -117,6 +107,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     const setAriaId = this.getNextAriaId();
     const ariaErrorId = this.getNextAriaId();
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
+    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}`,
@@ -124,83 +115,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)))) : null, 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/Tag/Tag.js

@@ -130,7 +130,7 @@ export default class Tag extends PureComponent {
             ${rounded ? style.lgRadiusClose : style.smRadiusClose} ${isDarkPalette ? style.darkTagClose : ''}
             ${customTagClose} ${style[`close${closePalette}`]}`,
       dataId: `${dataId}_RemoveTag`,
-      "data-title": closeTitle,
+      title: closeTitle,
       onClick: this.handleRemove,
       a11y: {
         ariaLabel: clearLabel

package/es/v1/DropBox/DropBox.js

@@ -1,15 +1,15 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
-import React, { useRef, Fragment, useContext } from 'react';
+import React, { useRef, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 import Modal from '../Modal/Modal';
-import { getLibraryConfig } from '../../Provider/Config';
 import LibraryContext from '../../Provider/LibraryContextInit';
 import cssJSLogic from '../../DropBox/css/cssJSLogic';
 import DropBoxElement from './DropBoxElement/DropBoxElement';
 import { DropBoxDefaultProps } from './props/defaultProps';
 import { DropBoxPropTypes } from './props/propTypes';
 import { stopPropagation } from '../../utils/Common';
+import isMobilePopover from './utils/isMobilePopover';
 import style from '../../DropBox/css/DropBox.module.css';
 export default function DropBox(props) {
   const dropBoxRef = useRef(null);
@@ -37,18 +37,7 @@ export default function DropBox(props) {
   const {
     direction
   } = DropBoxContext || {};
-  let windowWidth,
-      mobileWidth = getLibraryConfig('mobileWidth'),
-      isModel = false;
-
-  if (needResponsive) {
-    windowWidth = window.innerWidth;
-
-    if (windowWidth <= mobileWidth) {
-      isModel = true;
-    }
-  }
-
+  let isModel = isMobilePopover(needResponsive);
   const {
     zIndexStyle
   } = cssJSLogic(props);

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

@@ -0,0 +1,17 @@
+import { getLibraryConfig } from '../../Provider/Config';
+export default function isMobilePopover(needResponsive) {
+  //   let { needResponsive } = props;
+  let windowWidth,
+      mobileWidth = getLibraryConfig('mobileWidth'),
+      isModel = false;
+
+  if (needResponsive) {
+    windowWidth = window.innerWidth;
+
+    if (windowWidth <= mobileWidth) {
+      isModel = true;
+    }
+  }
+
+  return isModel ? true : false;
+}