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

package/lib/MultiSelect/MultiSelect.js

@@ -9,12 +9,12 @@ exports["default"] = exports.MultiSelectComponent = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+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");
@@ -33,10 +33,6 @@ var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
 
 var _IdProvider = require("../Provider/IdProvider");
 
-var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
-
-var _CustomResponsive = require("../Responsive/CustomResponsive");
-
 var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
 
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
@@ -45,8 +41,6 @@ var _Common = require("../utils/Common.js");
 
 var _dropDownUtils = require("../utils/dropDownUtils");
 
-var _Config = require("../Provider/Config");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -518,6 +512,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         }
       } else if (keyCode === 27) {// this.handlePopupClose(e);
       } else if (keyCode === 9) {
+        var _selectedOption = suggestions[hoverOption] || {};
+
+        var _id = _selectedOption.id;
+        isPopupOpen && !(0, _Common.getIsEmptyValue)(_id) && this.handleSelectOption(_id, e);
         this.handlePopupClose(e);
       }
     }
@@ -905,21 +903,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         openPopupOnly: openPopupOnly
       });
     }
-  }, {
-    key: "responsiveFunc",
-    value: function responsiveFunc(_ref6) {
-      var mediaQueryOR = _ref6.mediaQueryOR;
-      return {
-        tabletMode: mediaQueryOR([{
-          maxWidth: 700
-        }])
-      };
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
-
       var _this$props13 = this.props,
           isReadOnly = _this$props13.isReadOnly,
           needSelectAll = _this$props13.needSelectAll,
@@ -960,8 +946,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           getFooter = _this$props13.getFooter,
           needEffect = _this$props13.needEffect,
           disabledOptions = _this$props13.disabledOptions,
-          boxSize = _this$props13.boxSize,
-          autoComplete = _this$props13.autoComplete;
+          boxSize = _this$props13.boxSize;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText,
@@ -1050,7 +1035,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           ariaRequired: true,
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: autoComplete
+        autoComplete: false
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "vertical"
@@ -1066,71 +1051,60 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         size: "15"
       })) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: "".concat(dataId, "_children")
-      }, children) : null)))), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
-        query: this.responsiveFunc,
-        responsiveId: "Helmet"
-      }, function (_ref7) {
-        var tabletMode = _ref7.tabletMode;
-        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
-          animationStyle: animationStyle,
-          boxPosition: position || "".concat(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["default"].createElement(_Layout.Box, {
-          flexible: true
-        }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
-          customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
-          onScroll: _this5.handleScroll
-        }, /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
-          needSelectAll: needSelectAll,
-          onSelect: _this5.handleSelectAll,
-          selectAllText: selectAllText,
-          suggestions: suggestions,
-          dataId: dataId
-        })), /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
-          shrink: true,
-          customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
-          eleRef: _this5.suggestionContainerRef
-        }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _MultiSelectModule["default"][palette]
-        }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
-          suggestions: suggestions,
-          getRef: _this5.suggestionItemRef,
-          hoverOption: hoverOption,
-          onClick: _this5.handleSelectOption,
-          onMouseEnter: _this5.handleMouseEnter,
-          needBorder: false,
-          dataId: "".concat(dataId, "_Options"),
-          palette: palette,
-          a11y: {
-            role: 'option'
-          }
-        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
-          isLoading: isFetchingOptions,
-          options: options,
-          searchString: searchStr,
-          suggestions: suggestions,
-          dataId: dataId,
-          palette: palette,
-          i18nKeys: i18nKeys,
-          htmlId: ariaErrorId
-        })), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)));
-      }) : null);
+      }, children) : null)))), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+        animationStyle: animationStyle,
+        boxPosition: position || "".concat(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["default"].createElement(_Card["default"], {
+        customClass: "".concat(_MultiSelectModule["default"].box, " ").concat(_MultiSelectModule["default"]["".concat(palette, "Box")]),
+        onScroll: this.handleScroll
+      }, /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_MultiSelectHeader["default"], {
+        needSelectAll: needSelectAll,
+        onSelect: this.handleSelectAll,
+        selectAllText: selectAllText,
+        suggestions: suggestions,
+        dataId: dataId
+      })), /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        customClass: dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
+        eleRef: this.suggestionContainerRef
+      }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: _MultiSelectModule["default"][palette]
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+        suggestions: suggestions,
+        getRef: this.suggestionItemRef,
+        hoverOption: hoverOption,
+        onClick: this.handleSelectOption,
+        onMouseEnter: this.handleMouseEnter,
+        needBorder: false,
+        dataId: "".concat(dataId, "_Options"),
+        palette: palette,
+        a11y: {
+          role: 'option'
+        }
+      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        isLoading: isFetchingOptions,
+        options: options,
+        searchString: searchStr,
+        suggestions: suggestions,
+        dataId: dataId,
+        palette: palette,
+        i18nKeys: i18nKeys,
+        htmlId: ariaErrorId
+      })), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : null);
     }
   }]);
 
@@ -1138,8 +1112,116 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports.MultiSelectComponent = MultiSelectComponent;
-MultiSelectComponent.propTypes = _propTypes.MultiSelect_propTypes;
-MultiSelectComponent.defaultProps = _defaultProps.MultiSelect_defaultProps;
+MultiSelectComponent.propTypes = {
+  animationStyle: _propTypes["default"].string,
+  borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
+  closePopupOnly: _propTypes["default"].func,
+  dataId: _propTypes["default"].string,
+  defaultDropBoxPosition: _propTypes["default"].string,
+  disableAction: _propTypes["default"].bool,
+  dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  emptyMessage: _propTypes["default"].string.isRequired,
+  getContainerRef: _propTypes["default"].func,
+  getNextOptions: _propTypes["default"].func,
+  getPublicMethods: _propTypes["default"].func,
+  getRef: _propTypes["default"].func,
+  getTargetRef: _propTypes["default"].func,
+  i18nKeys: _propTypes["default"].shape({
+    clearText: _propTypes["default"].string,
+    loadingText: _propTypes["default"].string,
+    emptyText: _propTypes["default"].string,
+    noMoreText: _propTypes["default"].string,
+    searchEmptyText: _propTypes["default"].string
+  }),
+  a11y: _propTypes["default"].shape({
+    clearLabel: _propTypes["default"].string
+  }),
+  isAnimate: _propTypes["default"].bool,
+  isBoxPaddingNeed: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isNextOptions: _propTypes["default"].bool,
+  isPopupOpen: _propTypes["default"].bool,
+  isPopupOpenOnEnter: _propTypes["default"].bool,
+  isPopupReady: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  isSearchClearOnClose: _propTypes["default"].bool,
+  isSearching: _propTypes["default"].bool,
+  needAutoFocus: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needLocalSearch: _propTypes["default"].bool,
+  needResponsive: _propTypes["default"].bool,
+  needSelectAll: _propTypes["default"].bool,
+  needToCloseOnSelect: _propTypes["default"].bool,
+  //For Group multiSelect
+  noMoreOptionsMessage: _propTypes["default"].string,
+  onChange: _propTypes["default"].func.isRequired,
+  onDropBoxClose: _propTypes["default"].func,
+  onDropBoxOpen: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  onSearch: _propTypes["default"].func,
+  openPopupOnly: _propTypes["default"].func,
+  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])
+  }))]).isRequired,
+  palette: _propTypes["default"].oneOf(['default', 'dark']),
+  placeHolder: _propTypes["default"].string,
+  position: _propTypes["default"].string,
+  prefixText: _propTypes["default"].string,
+  removeClose: _propTypes["default"].func,
+  searchDebounceTime: _propTypes["default"].number,
+  searchEmptyMessage: _propTypes["default"].string,
+  selectAllText: _propTypes["default"].string,
+  selectedOptions: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])).isRequired,
+  size: _propTypes["default"].oneOf(['medium', 'xmedium']),
+  textBoxClass: _propTypes["default"].string,
+  textBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'xmedium']),
+  textField: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  togglePopup: _propTypes["default"].func,
+  valueField: _propTypes["default"].string,
+  variant: _propTypes["default"].string,
+  htmlId: _propTypes["default"].string,
+  isSearchClearOnSelect: _propTypes["default"].bool,
+  children: _propTypes["default"].node,
+  customChildrenClass: _propTypes["default"].string,
+  disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  getFooter: _propTypes["default"].func,
+  needEffect: _propTypes["default"].bool,
+  boxSize: _propTypes["default"].string
+};
+MultiSelectComponent.defaultProps = {
+  animationStyle: 'bounce',
+  dataId: 'multiSelect',
+  dropBoxSize: 'small',
+  isAnimate: true,
+  isDisabled: false,
+  isPopupOpenOnEnter: false,
+  isReadOnly: false,
+  needLocalSearch: true,
+  needSelectAll: false,
+  needToCloseOnSelect: false,
+  size: 'medium',
+  textBoxSize: 'medium',
+  textField: 'text',
+  valueField: 'id',
+  variant: 'default',
+  isSearching: false,
+  borderColor: 'default',
+  needBorder: true,
+  disableAction: false,
+  isSearchClearOnClose: true,
+  isBoxPaddingNeed: true,
+  needAutoFocus: false,
+  i18nKeys: {},
+  a11y: {},
+  textBoxClass: '',
+  palette: 'default',
+  isSearchClearOnSelect: true,
+  needEffect: true,
+  boxSize: 'default'
+};
 
 if (false) {
   MultiSelectComponent.docs = {

package/lib/MultiSelect/MultiSelect.module.css

@@ -1,6 +1,7 @@
 .wrapper {
   position: relative;
 }
+
 .disabled, .readOnly {
   cursor: not-allowed;
 }
@@ -100,9 +101,7 @@
 [dir=rtl] .container.medium .tag {
   margin: var(--zd_size5) 0 0 var(--zd_size10);
 }
-.responsiveParent{
-  width: 100%;
-}
+
 .box {
   background: var(--zdt_multiselect_box_bg);
 }
@@ -192,15 +191,3 @@
 [dir=rtl] .clearIconSpace {
   padding-left: var(--zd_size37)
 }
-.search{
-  padding: 0px 20px;
-}
-.more {
-  font-size: var(--zd_font_size14);
-  color: var(--zdt_multiselect_more_text);
-  font-family: inherit;
-  cursor: pointer;
-  margin-top: var(--zd_size5);
-  background-color: var(--zdt_multiselect_delete_bg);
-  border: 0;
-}

package/lib/MultiSelect/MultiSelectHeader.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ListItemWithIcon = _interopRequireDefault(require("../ListItem/ListItemWithIcon"));
 
@@ -75,5 +73,14 @@ var MultiSelectHeader = /*#__PURE__*/function (_React$PureComponent) {
 }(_react["default"].PureComponent);
 
 exports["default"] = MultiSelectHeader;
-MultiSelectHeader.propTypes = _propTypes.MultiSelectHeader_propTypes;
-MultiSelectHeader.defaultProps = _defaultProps.MultiSelectHeader_defaultProps;
+MultiSelectHeader.propTypes = {
+  dataId: _propTypes["default"].string,
+  needSelectAll: _propTypes["default"].bool,
+  onSelect: _propTypes["default"].func,
+  selectAllText: _propTypes["default"].string,
+  suggestions: _propTypes["default"].array
+};
+MultiSelectHeader.defaultProps = {};
+MultiSelectHeader.defaultProps = {
+  dataId: 'MultiSelectHeader'
+};