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

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -11,13 +11,12 @@ import Suggestions from './Suggestions';
 import EmptyState from './EmptyState';
 import MultiSelectHeader from './MultiSelectHeader';
 import Popup from '../Popup/Popup';
+import DropBox from '../DropBox/DropBox';
 import Textbox from '../TextBox/TextBox';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** CSS ****/
 
 import style from './AdvancedMultiSelect.module.css';
@@ -317,17 +316,6 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     });
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       isReadOnly,
@@ -464,64 +452,54 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropbox, _extends({
-        animationStyle: animationStyle,
-        boxPosition: position || `${defaultDropBoxPosition}Center`,
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: isAnimate,
-        isArrow: false,
-        onClick: removeClose,
-        isPadding: false,
-        isBoxPaddingNeed: isBoxPaddingNeed,
-        htmlId: setAriaId,
-        a11y: {
-          role: 'listbox',
-          ariaMultiselectable: true
-        }
-      }, DropBoxProps), /*#__PURE__*/React.createElement(Box, {
-        className: style.responsiveParent
-      }, /*#__PURE__*/React.createElement(Card, {
-        customClass: style.box,
-        onScroll: this.handleScroll
-      }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
-        needSelectAll: needSelectAll,
-        onSelect: this.handleSelectAll,
-        selectAllText: selectAllText,
-        suggestions: suggestions,
-        dataId: dataIdSelectAllEle
-      })), /*#__PURE__*/React.createElement(CardContent, {
-        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-        suggestions: suggestions,
-        selectedOptions: allselectedOptionIds,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverOption,
-        onClick: this.handleSelectOption,
-        onMouseEnter: this.handleMouseEnter,
-        needTick: true,
-        listItemSize: listItemSize,
-        a11y: {
-          role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataIdLoading,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      })), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
-    }) : null);
+    })) : null), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, _extends({
+      animationStyle: animationStyle,
+      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      getRef: getContainerRef,
+      isActive: isPopupReady,
+      isAnimate: isAnimate,
+      isArrow: false,
+      onClick: removeClose,
+      isPadding: false,
+      isBoxPaddingNeed: isBoxPaddingNeed,
+      htmlId: setAriaId,
+      a11y: {
+        role: 'listbox',
+        ariaMultiselectable: true
+      }
+    }, DropBoxProps), /*#__PURE__*/React.createElement(Card, {
+      customClass: style.box,
+      onScroll: this.handleScroll
+    }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      needSelectAll: needSelectAll,
+      onSelect: this.handleSelectAll,
+      selectAllText: selectAllText,
+      suggestions: suggestions,
+      dataId: dataIdSelectAllEle
+    })), /*#__PURE__*/React.createElement(CardContent, {
+      customClass: dropBoxSize ? style[dropBoxSize] : '',
+      eleRef: this.suggestionContainerRef
+    }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+      suggestions: suggestions,
+      selectedOptions: allselectedOptionIds,
+      getRef: this.suggestionItemRef,
+      hoverOption: hoverOption,
+      onClick: this.handleSelectOption,
+      onMouseEnter: this.handleMouseEnter,
+      needTick: true,
+      listItemSize: listItemSize,
+      a11y: {
+        role: 'option'
+      }
+    }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: isFetchingOptions,
+      options: options,
+      searchString: searchStr,
+      suggestions: suggestions,
+      dataId: dataIdLoading,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    })), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : null);
   }
 
 }

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,116 +1,127 @@
-.wrapper {
-  position: relative;
-}
-.disabled,
-.readOnly {
-  cursor: not-allowed;
-}
-.container {
-  max-height: var(--zd_size120);
-  composes: oflowy from '../common/common.module.css';
-}
-.hasBorder {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
-}
-.responsiveParent{
-  width: 100%;
-}
-.borderColor_transparent {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
-}
-.effect .borderColor_transparent:hover {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
-}
-.effect .borderColor_transparent.active {
-  border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
-}
-.borderColor_default {
-  border-bottom-color: var(--zdt_advancedmultiselect_default_border);
-}
-.effect .borderColor_default:hover {
-  border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
-}
-.effect .borderColor_default.active {
-  border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
-}
-.borderColor_dark {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
-}
-.effect .borderColor_dark:hover {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
-}
-.effect .borderColor_dark.active {
-  border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
-}
-.container.medium {
-  padding: 0 var(--zd_size34) var(--zd_size7) 0;
-}
-.container.xmedium {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
-  min-height: var(--zd_size30);
-}
-
-.delete {
-  position: absolute;
-  bottom: 0;
-  right: var(--zd_size15);
-  padding-bottom: var(--zd_size10);
-  color: var(--zdt_advancedmultiselect_delete_text);
-  cursor: pointer;
-  background-color: var(--zdt_advancedmultiselect_delete_bg);
-  border: 0;
-}
-
-.delete:hover {
-  color: var(--zdt_advancedmultiselect_delete_hover_text);
-}
-.transparentContainer .delete {
-  opacity: 0;
-  visibility: hidden;
-}
-.transparentContainer:hover .delete {
-  opacity: 1;
-  visibility: visible;
-}
-
-.box {
-  background: var(--zdt_advancedmultiselect_box_bg);
-}
-
-.small {
-  max-height: var(--zd_size200);
-}
-
-.medium {
-  max-height: var(--zd_size350);
-}
-
-.large {
-  max-height: var(--zd_size400);
-}
-
-.dropContainer {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: var(--zd_size5);
-}
-
-.dropPopup {
-  font-size: var(--zd_font_size13);
-}
-
-.dropPopup :global .toggleDropIcon {
-  color: var(--zdt_advancedmultiselect_droppopup_text);
-}
-
-.more {
-  font-size: var(--zd_font_size14);
-  color: var(--zdt_advancedmultiselect_more_text);
-  cursor: pointer;
-  margin-top: var(--zd_size5);
-  font-family: inherit;
-  background-color: var(--zdt_advancedmultiselect_delete_bg);
-  border: 0;
-}
+.wrapper {
+  position: relative;
+}
+.disabled, .readOnly {
+  cursor: not-allowed;
+}
+.container {
+  max-height: var(--zd_size120);
+  composes: oflowy from '../common/common.module.css';
+}
+.hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+.borderColor_transparent {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
+}
+.effect .borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
+}
+.effect .borderColor_transparent.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
+}
+.borderColor_default {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_border);
+}
+.effect .borderColor_default:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
+}
+.effect .borderColor_default.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
+}
+.borderColor_dark {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
+}
+.effect .borderColor_dark:hover {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
+}
+.effect .borderColor_dark.active {
+  border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
+}
+[dir=ltr] .container.medium {
+  padding: 0 var(--zd_size34) var(--zd_size7) 0;
+}
+[dir=rtl] .container.medium {
+  padding: 0 0 var(--zd_size7) var(--zd_size34);
+}
+.container.xmedium {
+  min-height: var(--zd_size30);
+}
+[dir=ltr] .container.xmedium {
+  padding: 0 var(--zd_size34) var(--zd_size1) 0;
+}
+[dir=rtl] .container.xmedium {
+  padding: 0 0 var(--zd_size1) var(--zd_size34);
+}
+
+.delete {
+  position: absolute;
+  bottom: 0;
+  color: var(--zdt_advancedmultiselect_delete_text);
+  padding-bottom: var(--zd_size10);
+  cursor: pointer;
+  background-color: var(--zdt_advancedmultiselect_delete_bg);
+  border: 0;
+}
+
+[dir=ltr] .delete {
+  right: var(--zd_size15);
+}
+
+[dir=rtl] .delete {
+  left: var(--zd_size15);
+}
+
+.delete:hover {
+  color: var(--zdt_advancedmultiselect_delete_hover_text);
+}
+.transparentContainer .delete {
+  opacity: 0;
+  visibility: hidden;
+}
+.transparentContainer:hover .delete {
+  opacity: 1;
+  visibility: visible;
+}
+
+.box {
+  background: var(--zdt_advancedmultiselect_box_bg);
+}
+
+.small {
+  max-height: var(--zd_size200);
+}
+
+.medium {
+  max-height: var(--zd_size350);
+}
+
+.large {
+  max-height: var(--zd_size400);
+}
+
+.dropContainer {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: var(--zd_size5);
+}
+
+.dropPopup {
+  font-size: var(--zd_font_size13);
+}
+
+.dropPopup :global .toggleDropIcon {
+  color: var(--zdt_advancedmultiselect_droppopup_text);
+}
+
+.more {
+  font-size: var(--zd_font_size14);
+  color: var(--zdt_advancedmultiselect_more_text);
+  font-family: inherit;
+  cursor: pointer;
+  margin-top: var(--zd_size5);
+  background-color: var(--zdt_advancedmultiselect_delete_bg);
+  border: 0;
+}

package/es/MultiSelect/MultiSelect.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 /**** Components ****/
 
 import Popup from '../Popup/Popup';
+import DropBox from '../DropBox/DropBox';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
@@ -13,8 +14,6 @@ import EmptyState from './EmptyState';
 import MultiSelectHeader from './MultiSelectHeader';
 import CssProvider from '../Provider/CssProvider';
 import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropbox from '../ResponsiveDropbox/ResponsiveDropbox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 /**** Icons ****/
 
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -315,8 +314,8 @@ export class MultiSelectComponent 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 (hoverOption) {
         this.setState({
@@ -326,9 +325,9 @@ export class MultiSelectComponent 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 && hoverOption === suggestionsLen - 3) {
         getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
@@ -830,17 +829,6 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
-
   render() {
     let {
       isReadOnly,
@@ -990,71 +978,60 @@ export class MultiSelectComponent extends React.Component {
       size: "15"
     })) : null, children ? /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}_children`
-    }, children) : null)))), !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"
-      }, /*#__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: suggestions,
-        dataId: dataId
-      })), /*#__PURE__*/React.createElement(CardContent, {
-        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,
-        a11y: {
-          role: 'option'
-        }
-      }) : /*#__PURE__*/React.createElement(EmptyState, {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        palette: palette,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      })), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)));
-    }) : null);
+    }, children) : null)))), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+      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
+    }, /*#__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: suggestions,
+      dataId: dataId
+    })), /*#__PURE__*/React.createElement(CardContent, {
+      customClass: 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,
+      a11y: {
+        role: 'option'
+      }
+    }) : /*#__PURE__*/React.createElement(EmptyState, {
+      isLoading: isFetchingOptions,
+      options: options,
+      searchString: searchStr,
+      suggestions: suggestions,
+      dataId: dataId,
+      palette: palette,
+      i18nKeys: i18nKeys,
+      htmlId: ariaErrorId
+    })), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : null);
   }
 
 }