@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/lib/Select/GroupSelect.js

@@ -9,12 +9,12 @@ exports["default"] = exports.GroupSelectComponent = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+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,10 +33,6 @@ 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");
@@ -196,7 +192,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (selectedOption !== prevProps.selectedOption) {
-        var _this$handleGetSelect2 = this.handleGetSelectedId(this.props, newOptionIds),
+        var _this$handleGetSelect2 = this.handleGetSelectedId(this.props, allOptionIds),
             _selectedId = _this$handleGetSelect2.selectedId,
             _hoverIndex = _this$handleGetSelect2.hoverIndex;
 
@@ -605,16 +601,6 @@ 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() {
@@ -674,9 +660,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           suggestionGroups = _this$handleFilterSug4.suggestionGroups,
           suggestionOptionIds = _this$handleFilterSug4.suggestionOptionIds;
 
-      var _ref3 = normalizedFormatOptions[selectedId] || {},
-          _ref3$value = _ref3.value,
-          selected = _ref3$value === void 0 ? '' : _ref3$value;
+      var _ref2 = normalizedFormatOptions[selectedId] || {},
+          _ref2$value = _ref2.value,
+          selected = _ref2$value === void 0 ? '' : _ref2$value;
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -755,89 +741,78 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         },
         autoComplete: false,
         isFocus: isPopupReady
-      }))), !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,
+      }))), !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,
           a11y: {
-            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);
+            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);
     }
   }]);
 
@@ -845,8 +820,114 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports.GroupSelectComponent = GroupSelectComponent;
-GroupSelectComponent.propTypes = _propTypes.GroupSelect_propTypes;
-GroupSelectComponent.defaultProps = _defaultProps.GroupSelect_defaultProps;
+GroupSelectComponent.propTypes = {
+  groupedOptions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    name: _propTypes["default"].string.isRequired,
+    valueField: _propTypes["default"].string,
+    textField: _propTypes["default"].string,
+    options: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _propTypes["default"].arrayOf(_propTypes["default"].shape({
+      id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+      text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+    }))])
+  })),
+  selectedOption: _propTypes["default"].shape({
+    groupId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+    selected: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  }),
+  emptyMessage: _propTypes["default"].string.isRequired,
+  placeHolder: _propTypes["default"].string,
+  onChange: _propTypes["default"].func.isRequired,
+  onKeyDown: _propTypes["default"].func,
+  searchBoxPlaceHolder: _propTypes["default"].string,
+  needSearch: _propTypes["default"].bool,
+  searchEmptyMessage: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  needSelectDownIcon: _propTypes["default"].bool,
+  isPopupOpenOnEnter: _propTypes["default"].bool,
+  maxLength: _propTypes["default"].string,
+  needBorder: _propTypes["default"].bool,
+  autoSelectOnType: _propTypes["default"].bool,
+  autoSelectDebouneTime: _propTypes["default"].number,
+  dataId: _propTypes["default"].string,
+  dataIdSlctComp: _propTypes["default"].string,
+  dataIdDownIcon: _propTypes["default"].string,
+  dataIdSrchEmptyMsg: _propTypes["default"].string,
+  isNextOptions: _propTypes["default"].bool,
+  getNextOptions: _propTypes["default"].func,
+  searchDebounceTime: _propTypes["default"].func,
+  needLocalSearch: _propTypes["default"].bool,
+  onSearch: _propTypes["default"].func,
+  isSearchClearOnClose: _propTypes["default"].bool,
+  animationStyle: _propTypes["default"].string,
+  dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  defaultDropBoxPosition: _propTypes["default"].oneOf(['bottom', 'top', 'left', 'right']),
+  isAnimate: _propTypes["default"].bool,
+  onFocus: _propTypes["default"].func,
+  size: _propTypes["default"].oneOf(['medium', 'xmedium']),
+  textBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'xmedium']),
+  title: _propTypes["default"].string,
+  variant: _propTypes["default"].string,
+  needResponsive: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  textBoxVariant: _propTypes["default"].string,
+  searchBoxSize: _propTypes["default"].string,
+  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
+  needTick: _propTypes["default"].bool,
+  children: _propTypes["default"].node,
+  getFooter: _propTypes["default"].func,
+  htmlId: _propTypes["default"].string,
+  iconOnHover: _propTypes["default"].bool,
+
+  /**** Popup Props ****/
+  isPopupOpen: _propTypes["default"].bool,
+  isPopupReady: _propTypes["default"].bool,
+  togglePopup: _propTypes["default"].func,
+  getTargetRef: _propTypes["default"].func,
+  getContainerRef: _propTypes["default"].func,
+  closePopupOnly: _propTypes["default"].func,
+  position: _propTypes["default"].string,
+  removeClose: _propTypes["default"].func,
+  i18nKeys: _propTypes["default"].shape({
+    loadingText: _propTypes["default"].string,
+    emptyText: _propTypes["default"].string,
+    noMoreText: _propTypes["default"].string,
+    searchEmptyText: _propTypes["default"].string
+  })
+};
+GroupSelectComponent.defaultProps = {
+  animationStyle: 'bounce',
+  defaultDropBoxPosition: 'bottom',
+  dropBoxSize: 'small',
+  isDefaultSelectValue: true,
+  isDisabled: false,
+  isReadOnly: false,
+  needBorder: true,
+  needSearch: false,
+  needSelectDownIcon: true,
+  placeHolder: '',
+  searchBoxPlaceHolder: 'Search',
+  searchBoxSize: 'small',
+  size: 'medium',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  textField: 'text',
+  valueField: 'id',
+  autoSelectOnType: true,
+  dataIdSlctComp: 'selectComponent',
+  dataIdDownIcon: 'downIcon',
+  dataIdLoading: 'loading',
+  dataIdSrchEmptyMsg: 'searchEmptyMessage',
+  isPopupOpenOnEnter: false,
+  borderColor: 'default',
+  needTick: true,
+  needLocalSearch: true,
+  isSearchClearOnClose: true,
+  i18nKeys: {},
+  iconOnHover: false
+};
 GroupSelectComponent.displayName = 'GroupSelect';
 var GroupSelect = (0, _Popup["default"])(GroupSelectComponent);
 GroupSelect.defaultProps = GroupSelectComponent.defaultProps;