@zohodesk/components 1.0.0-temp-610 → 1.0.0-temp-68

package/es/ListItem/ListItem.module.css

@@ -1,173 +1,205 @@
-.varClass {
-  /* listitem default variables */
-  --listitem_text_color: var(--zdt_listitem_default_text);
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
-  --listitem_border_width: 0;
-  --listitem_border_color: var(--zdt_listitem_default_border);
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
-    /*rtl: 0 0 0 var(--zd_size15)*/;
-  --listitem_bg_color: var(--zdt_listitem_default_bg);
-  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
-  --listitem_height: auto;
-  --listitem_min_height: 0;
-
-  /* listitem hover default variable */
-  --listitem_highlight_bg_color: var(--zdt_listitem_highlight_bg);
-
-  /* listitem tick icon default variables */
-  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}
-.list {
-  composes: varClass;
-  position: relative;
-  list-style: none;
-  color: var(--listitem_text_color);
-  font-size: var(--zd_font_size13);
-  padding: var(--listitem_padding);
-  border-width: var(--listitem_border_width);
-  border-style: solid;
-  border-color: var(--listitem_border_color);
-  height: var(--listitem_height);
-  min-height: var(--listitem_min_height);
-  cursor: pointer;
-  text-decoration: none;
-}
-.list,
-.default,
-.secondary {
-  background-color: var(--listitem_bg_color);
-}
-.withBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
-}
-.active {
-  --listitem_border_color: var(--zdt_listitem_active_border);
-}
-.small {
-  --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
-    var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
-}
-.medium {
-  --listitem_padding: var(--zd_size9) var(--zd_size20);
-  --listitem_min_height: var(--zd_size35);
-}
-.large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
-    var(--zd_size25)
-    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
-  --listitem_height: var(--zd_size48);
-}
-.value,
-.children {
-  composes: dotted from '../common/common.module.css';
-}
-.iconBox {
-  width: var(--zd_size20);
-  margin-right: var(--zd_size10);
-  text-align: center;
-}
-.iconBox,
-.leftAvatar {
-  font-size: 0;
-}
-.leftAvatar {
-  margin: var(--listitem_avatar_margin);
-}
-
-.defaultHover,
-.primaryHover,
-.secondaryHover,
-.darkHover {
-  background-color: var(--listitem_highlight_bg_color);
-}
-.activewithBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
-  --listitem_border_color: var(--zdt_listitem_active_border);
-}
-
-.defaultHover,
-.defaultEffect:hover,
-.defaultEffect:focus {
-  --listitem_bg_color: var(--zdt_listitem_highlight_bg);
-}
-.primaryHover,
-.primaryEffect:hover,
-.primaryEffect:focus {
-  --listitem_bg_color: var(--zdt_listitem_primary_bg);
-  --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
-}
-.secondaryHover,
-.secondaryEffect:hover,
-.secondaryEffect:focus {
-  --listitem_bg_color: var(--zdt_listitem_secondary_bg);
-  --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
-  --listitem_text_color: var(--zdt_listitem_secondary_text);
-}
-.darkHover,
-.darkEffect:hover,
-.darkEffect:focus {
-  --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
-  --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
-}
-.activedefault,
-.activeprimary,
-.activesecondary,
-.activedark {
-  background-color: var(--listitem_active_bg_color);
-}
-.activedefault,
-.activedefault:hover,
-.activeprimary,
-.activeprimary:hover {
-  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
-}
-.activesecondary {
-  --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
-  --listitem_text_color: var(--zdt_listitem_secondary_text);
-}
-.dark {
-  --listitem_bg_color: var(--zdt_listitem_dark_bg);
-  --listitem_text_color: var(--zdt_listitem_dark_text);
-}
-.activedark {
-  --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
-}
-
-.tickIcon,
-.defaultTick,
-.darkTick {
-  position: absolute;
-  color: var(--listitem_tickicon_color);
-  right: var(--zd_size20);
-}
-.defaultTick {
-  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}
-.darkTick {
-  --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
-}
-.defaultTick > i {
-  display: block;
-}
-.smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
-    var(--zd_size5)
-    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
-}
-.mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
-    var(--zd_size20)
-    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
-}
-.largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
-    var(--zd_size25)
-    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
-}
-.responsiveHeight {
-  --listitem_min_height: var(--zd_size45);
-  padding-top: var(--zd_size10);
-  padding-bottom: var(--zd_size10);
-  font-size: var(--zd_font_size15);
-}
+.varClass {
+  /* listitem default variables */
+  --listitem_text_color: var(--zdt_listitem_default_text);
+  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_border_width: 0;
+  --listitem_border_color: var(--zdt_listitem_default_border);
+  --listitem_bg_color: var(--zdt_listitem_default_bg);
+  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
+  --listitem_height: auto;
+  --listitem_min_height: 0;
+
+  /* listitem hover default variable */
+  --listitem_highlight_bg_color: var(--zdt_listitem_highlight_bg);
+
+  /* listitem tick icon default variables */
+  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
+}[dir=ltr] .varClass {
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
+    /*rtl: 0 0 0 var(--zd_size15)*/;
+}[dir=rtl] .varClass {
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
+}
+.list {
+  composes: varClass;
+  position: relative;
+  list-style: none;
+  color: var(--listitem_text_color);
+  font-size: var(--zd_font_size13);
+  height: var(--listitem_height);
+  min-height: var(--listitem_min_height);
+  text-decoration: none;
+  padding: var(--listitem_padding);
+  border-width: var(--listitem_border_width);
+  border-style: solid;
+  border-color: var(--listitem_border_color);
+  cursor: pointer;
+}
+.list, .default, .secondary {
+  background-color: var(--listitem_bg_color);
+}
+[dir=ltr] .withBorder {
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .withBorder {
+  --listitem_border_width: 0 1px 0 0;
+}
+.active {
+  --listitem_border_color: var(--zdt_listitem_active_border);
+}
+[dir=ltr] .small {
+  --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
+    var(--zd_size5)
+    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
+}
+[dir=rtl] .small {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
+}
+.medium {
+  --listitem_padding: var(--zd_size9) var(--zd_size20);
+  --listitem_min_height: var(--zd_size35);
+}
+.large {
+  --listitem_height: var(--zd_size48);
+}
+[dir=ltr] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
+    var(--zd_size25)
+    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
+}
+[dir=rtl] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+}
+.value,
+.children {
+  composes: dotted from '../common/common.module.css';
+}
+.iconBox {
+  width: var(--zd_size20);
+  text-align: center;
+}
+[dir=ltr] .iconBox {
+  margin-right: var(--zd_size10);
+}
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size10);
+}
+.iconBox,
+.leftAvatar {
+  font-size: 0;
+}
+.leftAvatar {
+  margin: var(--listitem_avatar_margin);
+}
+
+.defaultHover, .primaryHover, .secondaryHover, .darkHover {
+  background-color: var(--listitem_highlight_bg_color);
+}
+.activewithBorder {
+  --listitem_border_color: var(--zdt_listitem_active_border);
+}
+[dir=ltr] .activewithBorder {
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .activewithBorder {
+  --listitem_border_width: 0 1px 0 0;
+}
+
+.defaultHover,
+.defaultEffect:hover,
+.defaultEffect:focus {
+  --listitem_bg_color: var(--zdt_listitem_highlight_bg);
+}
+.primaryHover,
+.primaryEffect:hover,
+.primaryEffect:focus {
+  --listitem_bg_color: var(--zdt_listitem_primary_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
+}
+.secondaryHover,
+.secondaryEffect:hover,
+.secondaryEffect:focus {
+  --listitem_bg_color: var(--zdt_listitem_secondary_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
+  --listitem_text_color: var(--zdt_listitem_secondary_text);
+}
+.darkHover,
+.darkEffect:hover,
+.darkEffect:focus {
+  --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
+}
+.activedefault, .activeprimary, .activesecondary, .activedark {
+  background-color: var(--listitem_active_bg_color);
+}
+.activedefault,
+.activedefault:hover,
+.activeprimary,
+.activeprimary:hover {
+  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
+}
+.activesecondary {
+  --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
+  --listitem_text_color: var(--zdt_listitem_secondary_text);
+}
+.dark {
+  --listitem_bg_color: var(--zdt_listitem_dark_bg);
+  --listitem_text_color: var(--zdt_listitem_dark_text);
+}
+.activedark {
+  --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
+}
+
+.tickIcon,
+.defaultTick,
+.darkTick {
+  position: absolute;
+  color: var(--listitem_tickicon_color);
+}
+
+[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
+  right: var(--zd_size20);
+}
+
+[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
+  left: var(--zd_size20);
+}
+.defaultTick {
+  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
+}
+.darkTick {
+  --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
+}
+.defaultTick > i {
+  display: block;
+}
+[dir=ltr] .smallwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+    var(--zd_size5)
+    /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
+}
+[dir=rtl] .smallwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+}
+[dir=ltr] .mediumwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
+    var(--zd_size20)
+    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
+}
+[dir=rtl] .mediumwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
+}
+[dir=ltr] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
+    var(--zd_size25)
+    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
+}
+[dir=rtl] .largewithTick {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
+}
+.responsiveHeight {
+  --listitem_min_height: var(--zd_size45);
+  font-size: var(--zd_font_size15);
+  padding-top: var(--zd_size10);
+  padding-bottom: var(--zd_size10);
+}

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 
 import Loader from '@zohodesk/svg/lib/svg/Loader';
 import Popup from '../Popup/Popup';
+import DropBox from '../DropBox/DropBox';
 import TextBox from '../TextBox/TextBox';
 import { Container, Box } from '../Layout';
 import DropDownHeading from '../DropDown/DropDownHeading';
@@ -13,8 +14,6 @@ import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
 import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** Icons ****/
 
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -409,8 +408,8 @@ class AdvancedGroupMultiSelect extends React.Component {
     if (suggestionsLen && isPopupOpen && keyCode === 38) {
       //up arrow
 
-      /*if (hoverOption === 0) { //disable first to last option higlight
-        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
+      /*if (hoverOption === 0) { //disable first to last option higlight
+        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
       }*/
       if (hoverIndex) {
         this.setState({
@@ -420,9 +419,9 @@ class AdvancedGroupMultiSelect extends React.Component {
     } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
       //down arrow
 
-      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
-        //disable last to first option higlight
-        !isNextOptions && this.setState({ hoverOption: 0 });
+      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
+        //disable last to first option higlight
+        !isNextOptions && this.setState({ hoverOption: 0 });
       }*/
       if (isNextOptions && suggestionsLen >= 5 && hoverIndex === suggestionsLen - 3) {
         getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
@@ -820,17 +819,6 @@ class AdvancedGroupMultiSelect extends React.Component {
     }
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       size,
@@ -965,90 +953,80 @@ class AdvancedGroupMultiSelect extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
+    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+      animationStyle: animationStyle,
+      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      getRef: getContainerRef,
+      isActive: isPopupReady,
+      isAnimate: true,
+      isArrow: false,
+      onClick: removeClose,
+      needResponsive: needResponsive,
+      isPadding: isPadding,
+      isBoxPaddingNeed: !needSelectAll,
+      htmlId: setAriaId,
+      a11y: {
+        role: 'listbox',
+        ariaMultiselectable: true
+      }
+    }, /*#__PURE__*/React.createElement(Card, {
+      customClass: `${style.box} ${style[`${palette}Box`]}`,
+      onScroll: this.handleScroll
+    }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      needSelectAll: needSelectAll,
+      onSelect: this.handleSelectAll,
+      selectAllText: selectAllText,
+      suggestions: suggestionOptionIds,
+      dataId: dataId
+    })), isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
+      customClass: dropBoxSize ? style[dropBoxSize] : '',
+      eleRef: this.suggestionContainerRef
+    }, /*#__PURE__*/React.createElement(React.Fragment, {
+      key: 'SuggestonsParent'
+    }, suggestionGroups.length ? suggestionGroups.map(group => {
       let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropbox, {
-        animationStyle: animationStyle,
-        boxPosition: position || `${defaultDropBoxPosition}Center`,
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        isPadding: isPadding,
-        isBoxPaddingNeed: !needSelectAll,
-        htmlId: setAriaId,
+        options: suggestions = []
+      } = group;
+      let groupId = group.id;
+      let groupName = group.name;
+      let hoverId = suggestionOptionIds[hoverIndex];
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: groupId
+      }, groupName && /*#__PURE__*/React.createElement("div", {
+        className: style.groupTitle
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        text: groupName,
+        a11y: {
+          role: 'heading'
+        }
+      })), /*#__PURE__*/React.createElement(Suggestions, {
+        suggestions: suggestions,
+        selectedOptions: selectedOptionIds,
+        getRef: this.suggestionItemRef,
+        hoverId: hoverId,
+        onClick: this.handleSelectOption,
+        onMouseEnter: this.handleMouseEnter,
+        needTick: true,
+        listItemSize: listItemSize,
         a11y: {
-          role: 'listbox',
-          ariaMultiselectable: true
+          role: 'option'
         }
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: style.responsiveParent
-      }, /*#__PURE__*/React.createElement(Card, {
-        customClass: `${style.box} ${style[`${palette}Box`]}`,
-        onScroll: this.handleScroll
-      }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        needSelectAll: needSelectAll,
-        onSelect: this.handleSelectAll,
-        selectAllText: selectAllText,
-        suggestions: suggestionOptionIds,
-        dataId: dataId
-      })), isDataLoaded ? /*#__PURE__*/React.createElement(CardContent, {
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, /*#__PURE__*/React.createElement(React.Fragment, {
-        key: 'SuggestonsParent'
-      }, suggestionGroups.length ? suggestionGroups.map(group => {
-        let {
-          options: suggestions = []
-        } = group;
-        let groupId = group.id;
-        let groupName = group.name;
-        let hoverId = suggestionOptionIds[hoverIndex];
-        return /*#__PURE__*/React.createElement(React.Fragment, {
-          key: groupId
-        }, groupName && /*#__PURE__*/React.createElement("div", {
-          className: style.groupTitle
-        }, /*#__PURE__*/React.createElement(DropDownHeading, {
-          text: groupName,
-          a11y: {
-            role: 'heading'
-          }
-        })), /*#__PURE__*/React.createElement(Suggestions, {
-          suggestions: suggestions,
-          selectedOptions: selectedOptionIds,
-          getRef: this.suggestionItemRef,
-          hoverId: hoverId,
-          onClick: this.handleSelectOption,
-          onMouseEnter: this.handleMouseEnter,
-          needTick: true,
-          listItemSize: listItemSize,
-          a11y: {
-            role: 'option'
-          }
-        }));
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
-        options: revampedGroups,
-        searchString: searchStr,
-        suggestions: suggestionGroups,
-        dataId: dataId,
-        isLoading: isFetchingOptions,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      }), isNextOptions && /*#__PURE__*/React.createElement("div", {
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
-        className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)) : null)));
-    }) : null);
+      }));
+    }) : /*#__PURE__*/React.createElement(EmptyState, {
+      options: revampedGroups,
+      searchString: searchStr,
+      suggestions: suggestionGroups,
+      dataId: dataId,
+      isLoading: isFetchingOptions,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    }), isNextOptions && /*#__PURE__*/React.createElement("div", {
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)))) : /*#__PURE__*/React.createElement("div", {
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)), getFooter ? isDataLoaded ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : /*#__PURE__*/React.createElement("div", {
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)) : null)) : null);
   }
 
 }