@zohodesk/components 1.0.0-alpha-237 → 1.0.0-alpha-240

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -11,12 +11,13 @@ 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';
@@ -316,6 +317,17 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     });
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       isReadOnly,
@@ -452,54 +464,68 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : 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);
+    })) : 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, {
+        alignBox: "row",
+        isResponsivePadding: getFooter ? false : true
+      }), /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__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, {
+        shrink: true,
+        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);
   }
 
 }

package/es/MultiSelect/MultiSelect.js

@@ -4,7 +4,6 @@ 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';
@@ -14,6 +13,8 @@ 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';
@@ -829,6 +830,17 @@ export class MultiSelectComponent extends React.Component {
     });
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       isReadOnly,
@@ -978,60 +990,73 @@ 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(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);
+    }, 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",
+        isResponsivePadding: getFooter ? false : true
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: 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: suggestions,
+        dataId: dataId
+      })), /*#__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,
+        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);
   }
 
 }

package/es/MultiSelect/MultiSelect.module.css

@@ -101,7 +101,9 @@
 [dir=rtl] .container.medium .tag {
   margin: var(--zd_size5) 0 0 var(--zd_size10);
 }
-
+.responsiveParent{
+  width: 100%;
+}
 .box {
   background: var(--zdt_multiselect_box_bg);
 }
@@ -191,3 +193,6 @@
 [dir=rtl] .clearIconSpace {
   padding-left: var(--zd_size37)
 }
+.search{
+  padding: 0px 20px;
+}

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 
 import { MultiSelectComponent } from './MultiSelect';
 import Popup from '../Popup/Popup';
-import DropBox from '../DropBox/DropBox';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader } from '../Card/Card';
@@ -15,6 +14,8 @@ 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';
@@ -52,6 +53,17 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     });
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       isReadOnly,
@@ -189,57 +201,70 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-delete",
       size: "15"
-    })) : null)))), popUpState ? /*#__PURE__*/React.createElement(DropBox, {
-      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'
-      }
-    }, /*#__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
-    }, 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
-    })))) : null);
+    })) : null)))), 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
+      }, /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+        needSelectAll: needSelectAll,
+        onSelect: this.handleSelectAll,
+        selectAllText: selectAllText,
+        suggestions: suggestions,
+        dataId: dataId
+      })), /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
+        customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
+        eleRef: this.suggestionContainerRef
+      }, 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
+      })))));
+    }) : null);
   }
 
 }

package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import AdvancedGroupMultiSelect from '../AdvancedGroupMultiSelect';
+export default class AdvancedGroupMultiSelect__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSelectOptions = this.handleSelectOptions.bind(this);
+    this.getNextOptions = this.getNextOptions.bind(this);
+    this.groupFooter = this.groupFooter.bind(this);
+    this.onSearch = this.onSearch.bind(this);
+    this.state = {
+      selectedGroupOptions: [{
+        groupId: 'Group1',
+        id: 'group13'
+      }, {
+        groupId: 'Group1',
+        id: '1212'
+      }, {
+        groupId: 'Group2',
+        id: '2222'
+      }],
+      selectedOptionDetails: {
+        Group1: [{
+          value: 'Ashok',
+          id: '1212'
+        }],
+        Group2: [{
+          value: 'team 1',
+          id: '2222'
+        }]
+      }
+    };
+  }
+
+  getNextOptions(searchStr) {
+    return Promise.resolve();
+  }
+
+  onSearch(searchStr) {
+    return Promise.resolve();
+  }
+
+  handleSelectOptions() {
+    let selectedGroupOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    this.setState({
+      selectedGroupOptions
+    });
+  }
+
+  groupFooter() {
+    return /*#__PURE__*/React.createElement("div", null, "Footer");
+  }
+
+  render() {
+    let groupOptions = [{
+      id: 'Group1',
+      name: 'Group 1',
+      options: [{
+        id: 'group11',
+        value: 'Option 1'
+      }, {
+        id: 'group12',
+        value: 'Option 2'
+      }, {
+        id: 'group13',
+        value: 'Option 3'
+      }],
+      textField: 'value',
+      valueField: 'id'
+    }, {
+      id: 'Group2',
+      name: 'Group 2',
+      options: [{
+        id: 'group21',
+        value: 'Group2 Option 1'
+      }, {
+        id: 'group22',
+        value: 'Group2 Option 2'
+      }, {
+        id: 'group23',
+        value: 'Group2 Option 3'
+      }],
+      textField: 'value',
+      valueField: 'id'
+    }];
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, {
+      groupedOptions: groupOptions,
+      selectedGroupOptions: this.state.selectedGroupOptions,
+      onChange: this.handleSelectOptions,
+      dataIdSrchEmptyMsg: "EmptySearch",
+      dataIdNoOptnsMsg: "NoData",
+      needLocalSearch: true,
+      getNextOptions: this.getNextOptions,
+      onSearch: this.onSearch,
+      selectedOptionDetails: this.state.selectedOptionDetails,
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      }
+    }), /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, {
+      groupedOptions: groupOptions,
+      selectedGroupOptions: this.state.selectedGroupOptions,
+      onChange: this.handleSelectOptions,
+      emptyMessage: "No data found",
+      searchEmptyMessage: "No results found",
+      dataIdSrchEmptyMsg: "EmptySearch",
+      dataIdNoOptnsMsg: "NoData",
+      needLocalSearch: true,
+      getNextOptions: this.getNextOptions,
+      onSearch: this.onSearch,
+      selectedOptionDetails: this.state.selectedOptionDetails,
+      getFooter: this.groupFooter
+    }, /*#__PURE__*/React.createElement("div", null, "Children")));
+  }
+
+}
+
+if (false) {
+  AdvancedGroupMultiSelect__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}