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

package/lib/Select/GroupSelect.js

@@ -13,8 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
-var _DropBox = _interopRequireDefault(require("../DropBox/DropBox"));
-
 var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
 
 var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
@@ -33,6 +31,10 @@ var _Layout = require("../Layout");
 
 var _IdProvider = require("../Provider/IdProvider");
 
+var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
+
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
 var _dropDownUtils = require("../utils/dropDownUtils");
@@ -601,6 +603,16 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       var searchStr = this.state.searchStr;
       isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
     }
+  }, {
+    key: "responsiveFunc",
+    value: function responsiveFunc(_ref2) {
+      var mediaQueryOR = _ref2.mediaQueryOR;
+      return {
+        tabletMode: mediaQueryOR([{
+          maxWidth: 700
+        }])
+      };
+    }
   }, {
     key: "render",
     value: function render() {
@@ -660,9 +672,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           suggestionGroups = _this$handleFilterSug4.suggestionGroups,
           suggestionOptionIds = _this$handleFilterSug4.suggestionOptionIds;
 
-      var _ref2 = normalizedFormatOptions[selectedId] || {},
-          _ref2$value = _ref2.value,
-          selected = _ref2$value === void 0 ? '' : _ref2$value;
+      var _ref3 = normalizedFormatOptions[selectedId] || {},
+          _ref3$value = _ref3.value,
+          selected = _ref3$value === void 0 ? '' : _ref3$value;
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -741,78 +753,89 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         },
         autoComplete: false,
         isFocus: isPopupReady
-      }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
-        animationStyle: animationStyle,
-        boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        isPadding: false
-      }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-        customClass: _SelectModule["default"].box,
-        onScroll: this.handleScroll
-      }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-        inputRef: this.searchInputRef,
-        maxLength: maxLength,
-        onChange: this.handleSearch,
-        onKeyDown: this.handleKeyDown,
-        placeHolder: searchBoxPlaceHolder,
-        size: searchBoxSize,
-        value: searchStr,
-        onClear: this.handleClearSearch,
-        a11y: {
-          ariaControls: setAriaId,
-          ariaAutocomplete: 'list',
-          ariaDescribedby: ariaErrorId
-        },
-        autoComplete: false
-      }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-        customClass: dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, suggestionGroups.length ? suggestionGroups.map(function (group) {
-        var groupId = group.id,
-            groupName = group.name,
-            options = group.options;
-        var hoverId = suggestionOptionIds[hoverIndex];
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-          key: groupId
-        }, groupName && /*#__PURE__*/_react["default"].createElement("div", {
-          className: _SelectModule["default"].groupTitle
-        }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
-          text: groupName,
-          a11y: {
-            role: 'heading'
-          }
-        })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
-          activeId: selectedId,
-          suggestions: options,
-          getRef: _this7.suggestionItemRef,
-          hoverId: hoverId,
-          onClick: _this7.handleChange,
-          onMouseEnter: _this7.handleMouseEnter,
-          selectedOptions: [selectedId],
-          needTick: needTick,
-          needBorder: false,
-          htmlId: setAriaId,
+      }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+        query: this.responsiveFunc,
+        responsiveId: "Helmet"
+      }, function (_ref4) {
+        var tabletMode = _ref4.tabletMode;
+        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+          animationStyle: animationStyle,
+          boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),
+          getRef: getContainerRef,
+          isActive: isPopupReady,
+          isAnimate: true,
+          isArrow: false,
+          onClick: removeClose,
+          needResponsive: needResponsive,
+          isPadding: false,
+          isResponsivePadding: getFooter ? false : true,
+          alignBox: "row"
+        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+          customClass: _SelectModule["default"].box,
+          onScroll: _this7.handleScroll
+        }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+          inputRef: _this7.searchInputRef,
+          maxLength: maxLength,
+          onChange: _this7.handleSearch,
+          onKeyDown: _this7.handleKeyDown,
+          placeHolder: searchBoxPlaceHolder,
+          size: searchBoxSize,
+          value: searchStr,
+          onClear: _this7.handleClearSearch,
           a11y: {
-            ariaParentRole: 'listbox',
-            role: 'option'
-          }
-        }));
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-        options: revampedGroups,
-        searchString: searchStr,
-        suggestions: suggestionGroups,
-        dataId: dataIdSrchEmptyMsg,
-        isLoading: isFetchingOptions,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      })), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : null);
+            ariaControls: setAriaId,
+            ariaAutocomplete: 'list',
+            ariaDescribedby: ariaErrorId
+          },
+          autoComplete: false
+        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+          shrink: true,
+          customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
+          eleRef: _this7.suggestionContainerRef
+        }, suggestionGroups.length ? suggestionGroups.map(function (group) {
+          var groupId = group.id,
+              groupName = group.name,
+              options = group.options;
+          var hoverId = suggestionOptionIds[hoverIndex];
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+            key: groupId
+          }, groupName && /*#__PURE__*/_react["default"].createElement("div", {
+            className: _SelectModule["default"].groupTitle
+          }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
+            text: groupName,
+            a11y: {
+              role: 'heading'
+            }
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+            activeId: selectedId,
+            suggestions: options,
+            getRef: _this7.suggestionItemRef,
+            hoverId: hoverId,
+            onClick: _this7.handleChange,
+            onMouseEnter: _this7.handleMouseEnter,
+            selectedOptions: [selectedId],
+            needTick: needTick,
+            needBorder: false,
+            htmlId: setAriaId,
+            a11y: {
+              ariaParentRole: 'listbox',
+              role: 'option'
+            }
+          }));
+        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+          options: revampedGroups,
+          searchString: searchStr,
+          suggestions: suggestionGroups,
+          dataId: dataIdSrchEmptyMsg,
+          isLoading: isFetchingOptions,
+          i18nKeys: i18nKeys,
+          htmlId: ariaErrorId
+        })), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)));
+      }) : null);
     }
   }]);
 

package/lib/Select/Select.js

@@ -13,8 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
-var _DropBox = _interopRequireDefault(require("../DropBox/DropBox"));
-
 var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
 
 var _Layout = require("../Layout");
@@ -31,6 +29,10 @@ var _IdProvider = require("../Provider/IdProvider");
 
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
+var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
+
+var _CustomResponsive = require("../Responsive/CustomResponsive");
+
 var _dropDownUtils = require("../utils/dropDownUtils");
 
 var _Common = require("../utils/Common.js");
@@ -321,6 +323,16 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
 
       needCloseOnSelect && this.handlePopupClose(e);
     }
+  }, {
+    key: "responsiveFunc",
+    value: function responsiveFunc(_ref) {
+      var mediaQueryOR = _ref.mediaQueryOR;
+      return {
+        tabletMode: mediaQueryOR([{
+          maxWidth: 700
+        }])
+      };
+    }
   }, {
     key: "handleKeyDown",
     value: function handleKeyDown(e) {
@@ -373,8 +385,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       } else if (keyCode === 13) {
         var option = options[hoverIndex];
 
-        var _ref = option || {},
-            id = _ref.id;
+        var _ref2 = option || {},
+            id = _ref2.id;
 
         if (isPopupOpen && !(0, _Common.getIsEmptyValue)(id) && onChange) {
           onChange(id, optionsNormalize[id]);
@@ -391,8 +403,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       } else if (keyCode === 9) {
         var _option = options[hoverIndex];
 
-        var _ref2 = _option || {},
-            _id = _ref2.id;
+        var _ref3 = _option || {},
+            _id = _ref3.id;
 
         if (isPopupOpen && !(0, _Common.getIsEmptyValue)(_id)) {
           onChange && onChange(_id, optionsNormalize[_id]);
@@ -627,8 +639,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var changeValue = function changeValue() {
         var optionDetails = _this6.autoSelectSuggestions[_this6.autoSelectIndex];
 
-        var _ref3 = optionDetails || {},
-            id = _ref3.id;
+        var _ref4 = optionDetails || {},
+            id = _ref4.id;
 
         if (!(0, _Common.getIsEmptyValue)(id)) {
           _this6.handleChange(id);
@@ -712,6 +724,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this7 = this;
+
       var _this$props11 = this.props,
           needSearch = _this$props11.needSearch,
           dropBoxSize = _this$props11.dropBoxSize,
@@ -871,73 +885,86 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         autoComplete: autoComplete,
         isFocus: isPopupReady,
         customProps: TextBoxProps
-      })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
-        animationStyle: animationStyle,
-        boxPosition: position || "".concat(defaultDropBoxPosition),
-        getRef: getContainerRef,
-        isActive: isPopupReady,
-        isAnimate: true,
-        isArrow: false,
-        onClick: removeClose,
-        needResponsive: needResponsive,
-        dataId: "".concat(dataId, "_suggestions"),
-        size: boxSize,
-        isPadding: false
-      }, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-        onScroll: this.handleScroll
-      }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-        a11y: {
-          ariaControls: setAriaId,
-          ariaAutocomplete: 'list',
-          ariaDescribedby: ariaErrorId
-        },
-        inputRef: this.searchInputRef,
-        maxLength: maxLength,
-        onChange: this.handleSearch,
-        onKeyDown: this.handleKeyDown,
-        placeHolder: searchBoxPlaceHolder,
-        size: searchBoxSize,
-        value: searchStr,
-        onClear: this.handleClearSearch,
-        dataId: "".concat(dataId, "_search"),
-        i18nKeys: TextBoxIcon_i18n,
-        autoComplete: autoComplete,
-        customProps: {
-          TextBoxProps: DropdownSearchTextBoxProps
-        }
-      }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-        customClass: dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
-        eleRef: this.suggestionContainerRef
-      }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
-        activeId: selectedId,
-        suggestions: suggestions,
-        getRef: this.suggestionItemRef,
-        hoverOption: hoverIndex,
-        onClick: this.handleChange,
-        onMouseEnter: this.handleMouseEnter,
-        dataId: "".concat(dataId, "_Options"),
-        needTick: needTick,
-        needBorder: needListBorder,
-        selectedOptions: [selectedId],
-        className: _SelectModule["default"].listItemContainer,
-        listItemSize: listItemSize,
-        htmlId: setAriaId,
-        a11y: {
-          ariaParentRole: 'listbox',
-          role: 'option'
-        }
-      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-        isLoading: isFetchingOptions,
-        options: options,
-        searchString: searchStr,
-        suggestions: suggestions,
-        dataId: dataId,
-        getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
-        i18nKeys: i18nKeys,
-        htmlId: ariaErrorId
-      })), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null) : getChildren()) : null);
+      })), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+        query: this.responsiveFunc,
+        responsiveId: "Helmet"
+      }, function (_ref5) {
+        var tabletMode = _ref5.tabletMode;
+        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+          animationStyle: animationStyle,
+          boxPosition: position || "".concat(defaultDropBoxPosition),
+          getRef: getContainerRef,
+          isActive: isPopupReady,
+          isAnimate: true,
+          isArrow: false,
+          onClick: removeClose,
+          needResponsive: needResponsive,
+          dataId: "".concat(dataId, "_suggestions"),
+          size: boxSize,
+          isPadding: false,
+          isResponsivePadding: getFooter ? false : true,
+          alignBox: "row"
+        }, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+          onScroll: _this7.handleScroll
+        }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+          a11y: {
+            ariaControls: setAriaId,
+            ariaAutocomplete: 'list',
+            ariaDescribedby: ariaErrorId
+          },
+          inputRef: _this7.searchInputRef,
+          maxLength: maxLength,
+          onChange: _this7.handleSearch,
+          onKeyDown: _this7.handleKeyDown,
+          placeHolder: searchBoxPlaceHolder,
+          size: searchBoxSize,
+          value: searchStr,
+          onClear: _this7.handleClearSearch,
+          dataId: "".concat(dataId, "_search"),
+          i18nKeys: TextBoxIcon_i18n,
+          autoComplete: autoComplete,
+          customProps: {
+            TextBoxProps: DropdownSearchTextBoxProps
+          }
+        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+          shrink: true,
+          customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
+          eleRef: _this7.suggestionContainerRef
+        }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          activeId: selectedId,
+          suggestions: suggestions,
+          getRef: _this7.suggestionItemRef,
+          hoverOption: hoverIndex,
+          onClick: _this7.handleChange,
+          onMouseEnter: _this7.handleMouseEnter,
+          dataId: "".concat(dataId, "_Options"),
+          needTick: needTick,
+          needBorder: needListBorder,
+          selectedOptions: [selectedId],
+          className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
+          listItemSize: listItemSize,
+          htmlId: setAriaId,
+          a11y: {
+            ariaParentRole: 'listbox',
+            role: 'option'
+          }
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+          isLoading: isFetchingOptions,
+          options: options,
+          searchString: searchStr,
+          suggestions: suggestions,
+          dataId: dataId,
+          getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
+          i18nKeys: i18nKeys,
+          htmlId: ariaErrorId
+        })), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true
+        }, getChildren()));
+      }) : null);
     }
   }]);
 

package/lib/Select/Select.module.css

@@ -46,6 +46,9 @@
 .listItemContainer {
   padding: var(--zd_size10) 0;
 }
+.responsivelistItemContainer {
+  padding: var(--zd_size10) 0 0;
+}
 .readonly {
   --textboxicon_icon_cursor: not-allowed;
 }
@@ -85,6 +88,9 @@
 .dropBoxList {
   padding: var(--zd_size10) 0;
 }
+.responsivedropBoxList{
+  padding: var(--zd_size10) 0 0 0;
+}
 .rotate {
   transform: rotateX(180deg);
 }