primereact 6.6.0-rc.1 → 7.0.0

package/multiselect/multiselect.cjs.js

@@ -3,10 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var core = require('primereact/core');
+var utils = require('primereact/utils');
+var tooltip = require('primereact/tooltip');
+var csstransition = require('primereact/csstransition');
+var portal = require('primereact/portal');
 var inputtext = require('primereact/inputtext');
+var ripple = require('primereact/ripple');
 var virtualscroller = require('primereact/virtualscroller');
 var PrimeReact = require('primereact/api');
+var overlayservice = require('primereact/overlayservice');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -139,6 +144,8 @@ function _typeof(obj) {
 function _possibleConstructorReturn(self, call) {
   if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -285,7 +292,7 @@ var Checkbox = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTooltip",
     value: function renderTooltip() {
-      this.tooltip = core.tip({
+      this.tooltip = tooltip.tip({
         target: this.element,
         content: this.props.tooltip,
         options: this.props.tooltipOptions
@@ -301,18 +308,19 @@ var Checkbox = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      var containerClass = core.classNames('p-checkbox p-component', {
-        'p-checkbox-checked': this.isChecked(),
+      var checked = this.isChecked();
+      var containerClass = utils.classNames('p-checkbox p-component', {
+        'p-checkbox-checked': checked,
         'p-checkbox-disabled': this.props.disabled,
         'p-checkbox-focused': this.state.focused
       }, this.props.className);
-      var boxClass = core.classNames('p-checkbox-box', {
-        'p-highlight': this.isChecked(),
+      var boxClass = utils.classNames('p-checkbox-box', {
+        'p-highlight': checked,
         'p-disabled': this.props.disabled,
         'p-focus': this.state.focused
       });
-      var iconClass = core.classNames('p-checkbox-icon p-c', _defineProperty({}, this.props.icon, this.isChecked()));
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      var icon = checked && this.props.icon;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         ref: function ref(el) {
           return _this2.element = el;
         },
@@ -322,31 +330,34 @@ var Checkbox = /*#__PURE__*/function (_Component) {
         onClick: this.onClick,
         onContextMenu: this.props.onContextMenu,
         onMouseDown: this.props.onMouseDown
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "p-hidden-accessible"
-      }, /*#__PURE__*/React__default['default'].createElement("input", {
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
         ref: this.inputRef,
         type: "checkbox",
         "aria-labelledby": this.props.ariaLabelledBy,
         id: this.props.inputId,
         name: this.props.name,
         tabIndex: this.props.tabIndex,
-        defaultChecked: this.isChecked(),
+        defaultChecked: checked,
         onKeyDown: this.onKeyDown,
         onFocus: this.onFocus,
         onBlur: this.onBlur,
         disabled: this.props.disabled,
         readOnly: this.props.readOnly,
         required: this.props.required
-      })), /*#__PURE__*/React__default['default'].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: boxClass,
         ref: function ref(el) {
           return _this2.box = el;
         },
         role: "checkbox",
-        "aria-checked": this.isChecked()
-      }, /*#__PURE__*/React__default['default'].createElement("span", {
-        className: iconClass
+        "aria-checked": checked
+      }, utils.IconUtils.getJSXIcon(icon, {
+        className: 'p-checkbox-icon p-c'
+      }, {
+        props: this.props,
+        checked: checked
       })));
     }
   }]);
@@ -421,16 +432,16 @@ var MultiSelectHeader = /*#__PURE__*/function (_Component) {
     key: "renderFilterElement",
     value: function renderFilterElement() {
       if (this.props.filter) {
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-multiselect-filter-container"
-        }, /*#__PURE__*/React__default['default'].createElement(inputtext.InputText, {
+        }, /*#__PURE__*/React__default["default"].createElement(inputtext.InputText, {
           type: "text",
           role: "textbox",
           value: this.props.filterValue,
           onChange: this.onFilter,
           className: "p-multiselect-filter",
           placeholder: this.props.filterPlaceholder
-        }), /*#__PURE__*/React__default['default'].createElement("span", {
+        }), /*#__PURE__*/React__default["default"].createElement("span", {
           className: "p-multiselect-filter-icon pi pi-search"
         }));
       }
@@ -441,20 +452,20 @@ var MultiSelectHeader = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var filterElement = this.renderFilterElement();
-      var checkboxElement = this.props.showSelectAll && /*#__PURE__*/React__default['default'].createElement(Checkbox, {
+      var checkboxElement = this.props.showSelectAll && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
         checked: this.props.selectAll,
         onChange: this.onSelectAll,
         role: "checkbox",
         "aria-checked": this.props.selectAll
       });
-      var closeElement = /*#__PURE__*/React__default['default'].createElement("button", {
+      var closeElement = /*#__PURE__*/React__default["default"].createElement("button", {
         type: "button",
         className: "p-multiselect-close p-link",
         onClick: this.props.onClose
-      }, /*#__PURE__*/React__default['default'].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "p-multiselect-close-icon pi pi-times"
-      }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
-      var element = /*#__PURE__*/React__default['default'].createElement("div", {
+      }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
+      var element = /*#__PURE__*/React__default["default"].createElement("div", {
         className: "p-multiselect-header"
       }, checkboxElement, filterElement, closeElement);
 
@@ -472,7 +483,7 @@ var MultiSelectHeader = /*#__PURE__*/function (_Component) {
           element: element,
           props: this.props
         };
-        return core.ObjectUtils.getJSXElement(this.props.template, defaultOptions);
+        return utils.ObjectUtils.getJSXElement(this.props.template, defaultOptions);
       }
 
       return element;
@@ -526,32 +537,32 @@ var MultiSelectItem = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var className = core.classNames('p-multiselect-item', {
+      var className = utils.classNames('p-multiselect-item', {
         'p-highlight': this.props.selected,
         'p-disabled': this.props.disabled
       }, this.props.option.className);
-      var checkboxClassName = core.classNames('p-checkbox-box', {
+      var checkboxClassName = utils.classNames('p-checkbox-box', {
         'p-highlight': this.props.selected
       });
-      var checkboxIcon = core.classNames('p-checkbox-icon p-c', {
+      var checkboxIcon = utils.classNames('p-checkbox-icon p-c', {
         'pi pi-check': this.props.selected
       });
-      var content = this.props.template ? core.ObjectUtils.getJSXElement(this.props.template, this.props.option) : this.props.label;
+      var content = this.props.template ? utils.ObjectUtils.getJSXElement(this.props.template, this.props.option) : this.props.label;
       var tabIndex = this.props.disabled ? null : this.props.tabIndex || 0;
-      return /*#__PURE__*/React__default['default'].createElement("li", {
+      return /*#__PURE__*/React__default["default"].createElement("li", {
         className: className,
         onClick: this.onClick,
         tabIndex: tabIndex,
         onKeyDown: this.onKeyDown,
         role: "option",
         "aria-selected": this.props.selected
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "p-checkbox p-component"
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: checkboxClassName
-      }, /*#__PURE__*/React__default['default'].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: checkboxIcon
-      }))), /*#__PURE__*/React__default['default'].createElement("span", null, content), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+      }))), /*#__PURE__*/React__default["default"].createElement("span", null, content), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
     }
   }]);
 
@@ -625,7 +636,7 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderHeader",
     value: function renderHeader() {
-      return /*#__PURE__*/React__default['default'].createElement(MultiSelectHeader, {
+      return /*#__PURE__*/React__default["default"].createElement(MultiSelectHeader, {
         filter: this.props.filter,
         filterValue: this.props.filterValue,
         onFilter: this.onFilterInputChange,
@@ -641,8 +652,8 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
     key: "renderFooter",
     value: function renderFooter() {
       if (this.props.panelFooterTemplate) {
-        var content = core.ObjectUtils.getJSXElement(this.props.panelFooterTemplate, this.props, this.props.onOverlayHide);
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        var content = utils.ObjectUtils.getJSXElement(this.props.panelFooterTemplate, this.props, this.props.onOverlayHide);
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-multiselect-footer"
         }, content);
       }
@@ -663,7 +674,7 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
         var disabled = _this3.props.isOptionDisabled(option);
 
         var tabIndex = disabled ? null : _this3.props.tabIndex || 0;
-        return /*#__PURE__*/React__default['default'].createElement(MultiSelectItem, {
+        return /*#__PURE__*/React__default["default"].createElement(MultiSelectItem, {
           key: optionKey,
           label: optionLabel,
           option: option,
@@ -679,8 +690,8 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderEmptyFilter",
     value: function renderEmptyFilter() {
-      var emptyFilterMessage = core.ObjectUtils.getJSXElement(this.props.emptyFilterMessage, this.props);
-      return /*#__PURE__*/React__default['default'].createElement("li", {
+      var emptyFilterMessage = utils.ObjectUtils.getJSXElement(this.props.emptyFilterMessage, this.props) || PrimeReact.localeOption('emptyFilterMessage');
+      return /*#__PURE__*/React__default["default"].createElement("li", {
         className: "p-multiselect-empty-message"
       }, emptyFilterMessage);
     }
@@ -688,12 +699,12 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
     key: "renderItem",
     value: function renderItem(option, index) {
       if (this.props.optionGroupLabel) {
-        var groupContent = this.props.optionGroupTemplate ? core.ObjectUtils.getJSXElement(this.props.optionGroupTemplate, option, index) : this.props.getOptionGroupLabel(option);
+        var groupContent = this.props.optionGroupTemplate ? utils.ObjectUtils.getJSXElement(this.props.optionGroupTemplate, option, index) : this.props.getOptionGroupLabel(option);
         var groupChildrenContent = this.renderGroupChildren(option);
         var key = index + '_' + this.props.getOptionGroupRenderKey(option);
-        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
           key: key
-        }, /*#__PURE__*/React__default['default'].createElement("li", {
+        }, /*#__PURE__*/React__default["default"].createElement("li", {
           className: "p-multiselect-item-group"
         }, groupContent), groupChildrenContent);
       } else {
@@ -701,7 +712,7 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
         var optionKey = index + '_' + this.props.getOptionRenderKey(option);
         var disabled = this.props.isOptionDisabled(option);
         var tabIndex = disabled ? null : this.props.tabIndex || 0;
-        return /*#__PURE__*/React__default['default'].createElement(MultiSelectItem, {
+        return /*#__PURE__*/React__default["default"].createElement(MultiSelectItem, {
           key: optionKey,
           label: optionLabel,
           option: option,
@@ -739,7 +750,7 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
           style: _objectSpread$1(_objectSpread$1({}, this.props.virtualScrollerOptions.style), {
             height: this.props.scrollHeight
           }),
-          className: core.classNames('p-multiselect-items-wrapper', this.props.virtualScrollerOptions.className),
+          className: utils.classNames('p-multiselect-items-wrapper', this.props.virtualScrollerOptions.className),
           items: this.props.visibleOptions,
           onLazyLoad: function onLazyLoad(event) {
             return _this5.props.virtualScrollerOptions.onLazyLoad(_objectSpread$1(_objectSpread$1({}, event), {
@@ -750,10 +761,10 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
             return item && _this5.renderItem(item, options.index);
           },
           contentTemplate: function contentTemplate(options) {
-            var className = core.classNames('p-multiselect-items p-component', options.className);
+            var className = utils.classNames('p-multiselect-items p-component', options.className);
             var content = _this5.isEmptyFilter() ? _this5.renderEmptyFilter() : options.children;
-            return /*#__PURE__*/React__default['default'].createElement("ul", {
-              ref: options.ref,
+            return /*#__PURE__*/React__default["default"].createElement("ul", {
+              ref: options.contentRef,
               className: className,
               role: "listbox",
               "aria-multiselectable": true
@@ -761,19 +772,19 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
           }
         });
 
-        return /*#__PURE__*/React__default['default'].createElement(virtualscroller.VirtualScroller, _extends({
+        return /*#__PURE__*/React__default["default"].createElement(virtualscroller.VirtualScroller, _extends({
           ref: function ref(el) {
             return _this5.virtualScrollerRef = el;
           }
         }, virtualScrollerProps));
       } else {
         var items = this.renderItems();
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-multiselect-items-wrapper",
           style: {
             maxHeight: this.props.scrollHeight
           }
-        }, /*#__PURE__*/React__default['default'].createElement("ul", {
+        }, /*#__PURE__*/React__default["default"].createElement("ul", {
           className: "p-multiselect-items p-component",
           role: "listbox",
           "aria-multiselectable": true
@@ -783,13 +794,13 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderElement",
     value: function renderElement() {
-      var panelClassName = core.classNames('p-multiselect-panel p-component', {
+      var panelClassName = utils.classNames('p-multiselect-panel p-component', {
         'p-multiselect-limited': !this.props.allowOptionSelect()
       }, this.props.panelClassName);
       var header = this.renderHeader();
       var content = this.renderContent();
       var footer = this.renderFooter();
-      return /*#__PURE__*/React__default['default'].createElement(core.CSSTransition, {
+      return /*#__PURE__*/React__default["default"].createElement(csstransition.CSSTransition, {
         nodeRef: this.props.forwardRef,
         classNames: "p-connected-overlay",
         in: this.props.in,
@@ -803,7 +814,7 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
         onEntered: this.props.onEntered,
         onExit: this.props.onExit,
         onExited: this.props.onExited
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         ref: this.props.forwardRef,
         className: panelClassName,
         style: this.props.panelStyle,
@@ -814,7 +825,7 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var element = this.renderElement();
-      return /*#__PURE__*/React__default['default'].createElement(core.Portal, {
+      return /*#__PURE__*/React__default["default"].createElement(portal.Portal, {
         element: element,
         appendTo: this.props.appendTo
       });
@@ -824,8 +835,8 @@ var MultiSelectPanelComponent = /*#__PURE__*/function (_Component) {
   return MultiSelectPanelComponent;
 }(React.Component);
 
-var MultiSelectPanel = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default['default'].createElement(MultiSelectPanelComponent, _extends({
+var MultiSelectPanel = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default["default"].createElement(MultiSelectPanelComponent, _extends({
     forwardRef: ref
   }, props));
 });
@@ -894,7 +905,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   _createClass(MultiSelect, [{
     key: "onPanelClick",
     value: function onPanelClick(event) {
-      core.OverlayService.emit('overlay-click', {
+      overlayservice.OverlayService.emit('overlay-click', {
         originalEvent: event,
         target: this.container
       });
@@ -921,7 +932,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
       var selected = this.isSelected(option);
       var allowOptionSelect = this.allowOptionSelect();
       if (selected) this.updateModel(originalEvent, this.props.value.filter(function (val) {
-        return !core.ObjectUtils.equals(isOptionValueUsed ? val : _this2.getOptionValue(val), optionValue, _this2.equalityKey());
+        return !utils.ObjectUtils.equals(isOptionValueUsed ? val : _this2.getOptionValue(val), optionValue, _this2.equalityKey());
       }));else if (allowOptionSelect) this.updateModel(originalEvent, [].concat(_toConsumableArray(this.props.value || []), [optionValue]));
     }
   }, {
@@ -971,18 +982,18 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
     key: "findNextItem",
     value: function findNextItem(item) {
       var nextItem = item.nextElementSibling;
-      if (nextItem) return core.DomHandler.hasClass(nextItem, 'p-disabled') || core.DomHandler.hasClass(nextItem, 'p-multiselect-item-group') ? this.findNextItem(nextItem) : nextItem;else return null;
+      if (nextItem) return utils.DomHandler.hasClass(nextItem, 'p-disabled') || utils.DomHandler.hasClass(nextItem, 'p-multiselect-item-group') ? this.findNextItem(nextItem) : nextItem;else return null;
     }
   }, {
     key: "findPrevItem",
     value: function findPrevItem(item) {
       var prevItem = item.previousElementSibling;
-      if (prevItem) return core.DomHandler.hasClass(prevItem, 'p-disabled') || core.DomHandler.hasClass(prevItem, 'p-multiselect-item-group') ? this.findPrevItem(prevItem) : prevItem;else return null;
+      if (prevItem) return utils.DomHandler.hasClass(prevItem, 'p-disabled') || utils.DomHandler.hasClass(prevItem, 'p-multiselect-item-group') ? this.findPrevItem(prevItem) : prevItem;else return null;
     }
   }, {
     key: "onClick",
     value: function onClick(event) {
-      if (!this.props.disabled && !this.isPanelClicked(event) && !core.DomHandler.hasClass(event.target, 'p-multiselect-token-icon') && !this.isClearClicked(event)) {
+      if (!this.props.disabled && !this.isPanelClicked(event) && !utils.DomHandler.hasClass(event.target, 'p-multiselect-token-icon') && !this.isClearClicked(event)) {
         if (this.state.overlayVisible) {
           this.hide();
         } else {
@@ -990,6 +1001,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
         }
 
         this.inputRef.current.focus();
+        event.preventDefault();
       }
     }
   }, {
@@ -1019,7 +1031,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
 
         case 9:
           if (this.state.overlayVisible) {
-            var firstFocusableElement = core.DomHandler.getFirstFocusableElement(this.overlayRef.current);
+            var firstFocusableElement = utils.DomHandler.getFirstFocusableElement(this.overlayRef.current);
 
             if (firstFocusableElement) {
               firstFocusableElement.focus();
@@ -1071,8 +1083,6 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
               return _this3.getOptionValue(option);
             });
           }
-
-          value = _toConsumableArray(new Set([].concat(_toConsumableArray(value), _toConsumableArray(this.props.value || []))));
         }
 
         this.updateModel(event.originalEvent, value);
@@ -1143,7 +1153,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "onOverlayEnter",
     value: function onOverlayEnter(callback) {
-      core.ZIndexUtils.set('overlay', this.overlayRef.current);
+      utils.ZIndexUtils.set('overlay', this.overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
       this.alignOverlay();
       this.scrollInView();
       callback && callback();
@@ -1171,18 +1181,18 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
         this.resetFilter();
       }
 
-      core.ZIndexUtils.clear(this.overlayRef.current);
+      utils.ZIndexUtils.clear(this.overlayRef.current);
       this.props.onHide && this.props.onHide();
     }
   }, {
     key: "alignOverlay",
     value: function alignOverlay() {
-      core.DomHandler.alignOverlay(this.overlayRef.current, this.label.parentElement, this.props.appendTo || PrimeReact__default['default'].appendTo);
+      utils.DomHandler.alignOverlay(this.overlayRef.current, this.label.parentElement, this.props.appendTo || PrimeReact__default["default"].appendTo);
     }
   }, {
     key: "scrollInView",
     value: function scrollInView() {
-      var highlightItem = core.DomHandler.findSingle(this.overlayRef.current, 'li.p-highlight');
+      var highlightItem = utils.DomHandler.findSingle(this.overlayRef.current, 'li.p-highlight');
 
       if (highlightItem) {
         highlightItem.scrollIntoView({
@@ -1229,7 +1239,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
       var key = this.equalityKey();
       return list.findIndex(function (item) {
         return value.some(function (val) {
-          return core.ObjectUtils.equals(val, _this6.getOptionValue(item), key);
+          return utils.ObjectUtils.equals(val, _this6.getOptionValue(item), key);
         });
       });
     }
@@ -1245,7 +1255,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
         var isOptionValueUsed = this.isOptionValueUsed(option);
         var key = this.equalityKey();
         selected = this.props.value.some(function (val) {
-          return core.ObjectUtils.equals(isOptionValueUsed ? val : _this7.getOptionValue(val), optionValue, key);
+          return utils.ObjectUtils.equals(isOptionValueUsed ? val : _this7.getOptionValue(val), optionValue, key);
         });
       }
 
@@ -1295,7 +1305,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
           var option = _step2.value;
           var optionValue = this.getOptionValue(option);
 
-          if (core.ObjectUtils.equals(optionValue, val, key)) {
+          if (utils.ObjectUtils.equals(optionValue, val, key)) {
             return option;
           }
         }
@@ -1356,7 +1366,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
       var _this11 = this;
 
       if (!this.scrollHandler) {
-        this.scrollHandler = new core.ConnectedOverlayScrollHandler(this.container, function () {
+        this.scrollHandler = new utils.ConnectedOverlayScrollHandler(this.container, function () {
           if (_this11.state.overlayVisible) {
             _this11.hide();
           }
@@ -1379,7 +1389,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
 
       if (!this.resizeListener) {
         this.resizeListener = function () {
-          if (_this12.state.overlayVisible && !core.DomHandler.isAndroid()) {
+          if (_this12.state.overlayVisible && !utils.DomHandler.isAndroid()) {
             _this12.hide();
           }
         };
@@ -1403,7 +1413,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "isClearClicked",
     value: function isClearClicked(event) {
-      return core.DomHandler.hasClass(event.target, 'p-multiselect-clear-icon');
+      return utils.DomHandler.hasClass(event.target, 'p-multiselect-clear-icon');
     }
   }, {
     key: "isPanelClicked",
@@ -1469,7 +1479,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
         this.tooltip = null;
       }
 
-      core.ZIndexUtils.clear(this.overlayRef.current);
+      utils.ZIndexUtils.clear(this.overlayRef.current);
     }
   }, {
     key: "hasFilter",
@@ -1552,13 +1562,13 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "getOptionLabel",
     value: function getOptionLabel(option) {
-      return this.props.optionLabel ? core.ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
+      return this.props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
     }
   }, {
     key: "getOptionValue",
     value: function getOptionValue(option) {
       if (this.props.optionValue) {
-        var data = core.ObjectUtils.resolveFieldData(option, this.props.optionValue);
+        var data = utils.ObjectUtils.resolveFieldData(option, this.props.optionValue);
         return data !== null ? data : option;
       }
 
@@ -1567,28 +1577,28 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "getOptionRenderKey",
     value: function getOptionRenderKey(option) {
-      return this.props.dataKey ? core.ObjectUtils.resolveFieldData(option, this.props.dataKey) : this.getOptionLabel(option);
+      return this.props.dataKey ? utils.ObjectUtils.resolveFieldData(option, this.props.dataKey) : this.getOptionLabel(option);
     }
   }, {
     key: "getOptionGroupRenderKey",
     value: function getOptionGroupRenderKey(optionGroup) {
-      return core.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
+      return utils.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
     }
   }, {
     key: "getOptionGroupLabel",
     value: function getOptionGroupLabel(optionGroup) {
-      return core.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
+      return utils.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupLabel);
     }
   }, {
     key: "getOptionGroupChildren",
     value: function getOptionGroupChildren(optionGroup) {
-      return core.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupChildren);
+      return utils.ObjectUtils.resolveFieldData(optionGroup, this.props.optionGroupChildren);
     }
   }, {
     key: "isOptionDisabled",
     value: function isOptionDisabled(option) {
       if (this.props.optionDisabled) {
-        return core.ObjectUtils.isFunction(this.props.optionDisabled) ? this.props.optionDisabled(option) : core.ObjectUtils.resolveFieldData(option, this.props.optionDisabled);
+        return utils.ObjectUtils.isFunction(this.props.optionDisabled) ? this.props.optionDisabled(option) : utils.ObjectUtils.resolveFieldData(option, this.props.optionDisabled);
       }
 
       return option && option['disabled'] !== undefined ? option['disabled'] : false;
@@ -1614,7 +1624,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
           try {
             for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
               var optgroup = _step6.value;
-              var filteredSubOptions = core.FilterUtils.filter(this.getOptionGroupChildren(optgroup), searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
+              var filteredSubOptions = PrimeReact.FilterService.filter(this.getOptionGroupChildren(optgroup), searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
 
               if (filteredSubOptions && filteredSubOptions.length) {
                 filteredGroups.push(_objectSpread(_objectSpread({}, optgroup), {
@@ -1630,7 +1640,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
 
           return filteredGroups;
         } else {
-          return core.FilterUtils.filter(this.props.options, searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
+          return PrimeReact.FilterService.filter(this.props.options, searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
         }
       } else {
         return this.props.options;
@@ -1656,7 +1666,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
     value: function removeChip(event, item) {
       var key = this.equalityKey();
       var value = this.props.value.filter(function (val) {
-        return !core.ObjectUtils.equals(val, item, key);
+        return !utils.ObjectUtils.equals(val, item, key);
       });
       this.updateModel(event, value);
     }
@@ -1677,7 +1687,9 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
       var label;
 
       if (!this.isEmpty() && !this.props.fixedPlaceholder) {
-        if (this.props.value.length <= this.props.maxSelectedLabels) {
+        if (this.props.maxSelectedLabels && this.props.value.length > this.props.maxSelectedLabels) {
+          return this.getSelectedItemsLabel();
+        } else {
           label = '';
 
           for (var i = 0; i < this.props.value.length; i++) {
@@ -1689,8 +1701,6 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
           }
 
           return label;
-        } else {
-          return this.getSelectedItemsLabel();
         }
       }
 
@@ -1703,34 +1713,37 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
 
       if (this.props.selectedItemTemplate) {
         if (!this.isEmpty()) {
-          if (this.props.value.length <= this.props.maxSelectedLabels) {
+          if (this.props.maxSelectedLabels && this.props.value.length > this.props.maxSelectedLabels) {
+            return this.getSelectedItemsLabel();
+          } else {
             return this.props.value.map(function (val, index) {
-              var item = core.ObjectUtils.getJSXElement(_this14.props.selectedItemTemplate, val);
-              return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
+              var item = utils.ObjectUtils.getJSXElement(_this14.props.selectedItemTemplate, val);
+              return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
                 key: index
               }, item);
             });
-          } else {
-            return this.getSelectedItemsLabel();
           }
         } else {
-          return core.ObjectUtils.getJSXElement(this.props.selectedItemTemplate);
+          return utils.ObjectUtils.getJSXElement(this.props.selectedItemTemplate);
         }
       } else {
         if (this.props.display === 'chip' && !this.isEmpty()) {
-          return this.props.value.map(function (val) {
+          var value = this.props.value.slice(0, this.props.maxSelectedLabels || this.props.value.length);
+          return value.map(function (val) {
             var label = _this14.getLabelByValue(val);
 
-            return /*#__PURE__*/React__default['default'].createElement("div", {
+            return /*#__PURE__*/React__default["default"].createElement("div", {
               className: "p-multiselect-token",
               key: label
-            }, /*#__PURE__*/React__default['default'].createElement("span", {
+            }, /*#__PURE__*/React__default["default"].createElement("span", {
               className: "p-multiselect-token-label"
-            }, label), !_this14.props.disabled && /*#__PURE__*/React__default['default'].createElement("span", {
-              className: "p-multiselect-token-icon pi pi-times-circle",
+            }, label), !_this14.props.disabled && utils.IconUtils.getJSXIcon(_this14.props.removeIcon, {
+              className: 'p-multiselect-token-icon',
               onClick: function onClick(e) {
                 return _this14.removeChip(e, val);
               }
+            }, {
+              props: _this14.props
             }));
           });
         }
@@ -1741,7 +1754,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTooltip",
     value: function renderTooltip() {
-      this.tooltip = core.tip({
+      this.tooltip = tooltip.tip({
         target: this.container,
         content: this.props.tooltip,
         options: this.props.tooltipOptions
@@ -1755,7 +1768,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
       var empty = this.isEmpty();
 
       if (!empty && this.props.showClear && !this.props.disabled) {
-        return /*#__PURE__*/React__default['default'].createElement("i", {
+        return /*#__PURE__*/React__default["default"].createElement("i", {
           className: "p-multiselect-clear-icon pi pi-times",
           onClick: function onClick(e) {
             return _this15.updateModel(e, null);
@@ -1772,17 +1785,17 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
 
       var empty = this.isEmpty();
       var content = this.getLabelContent();
-      var labelClassName = core.classNames('p-multiselect-label', {
+      var labelClassName = utils.classNames('p-multiselect-label', {
         'p-placeholder': empty && this.props.placeholder,
         'p-multiselect-label-empty': empty && !this.props.placeholder && !this.props.selectedItemTemplate,
-        'p-multiselect-items-label': !empty && this.props.value.length > this.props.maxSelectedLabels
+        'p-multiselect-items-label': !empty && this.props.display !== 'chip' && this.props.value.length > this.props.maxSelectedLabels
       });
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         ref: function ref(el) {
           return _this16.label = el;
         },
         className: "p-multiselect-label-container"
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: labelClassName
       }, content || this.props.placeholder || 'empty'));
     }
@@ -1791,7 +1804,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this17 = this;
 
-      var className = core.classNames('p-multiselect p-component p-inputwrapper', {
+      var className = utils.classNames('p-multiselect p-component p-inputwrapper', {
         'p-multiselect-chip': this.props.display === 'chip',
         'p-disabled': this.props.disabled,
         'p-multiselect-clearable': this.props.showClear && !this.props.disabled,
@@ -1799,11 +1812,10 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
         'p-inputwrapper-filled': this.props.value && this.props.value.length > 0,
         'p-inputwrapper-focus': this.state.focused || this.state.overlayVisible
       }, this.props.className);
-      var iconClassName = core.classNames('p-multiselect-trigger-icon p-c', this.props.dropdownIcon);
       var visibleOptions = this.getVisibleOptions();
       var label = this.renderLabel();
       var clearIcon = this.renderClearIcon();
-      return /*#__PURE__*/React__default['default'].createElement("div", {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
         id: this.props.id,
         className: className,
         onClick: this.onClick,
@@ -1811,9 +1823,9 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
           return _this17.container = el;
         },
         style: this.props.style
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "p-hidden-accessible"
-      }, /*#__PURE__*/React__default['default'].createElement("input", {
+      }, /*#__PURE__*/React__default["default"].createElement("input", {
         ref: this.inputRef,
         id: this.props.inputId,
         name: this.props.name,
@@ -1828,11 +1840,13 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
         "aria-expanded": this.state.overlayVisible,
         disabled: this.props.disabled,
         tabIndex: this.props.tabIndex
-      })), label, clearIcon, /*#__PURE__*/React__default['default'].createElement("div", {
+      })), label, clearIcon, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "p-multiselect-trigger"
-      }, /*#__PURE__*/React__default['default'].createElement("span", {
-        className: iconClassName
-      })), /*#__PURE__*/React__default['default'].createElement(MultiSelectPanel, _extends({
+      }, utils.IconUtils.getJSXIcon(this.props.dropdownIcon, {
+        className: 'p-multiselect-trigger-icon p-c'
+      }, {
+        props: this.props
+      })), /*#__PURE__*/React__default["default"].createElement(MultiSelectPanel, _extends({
         ref: this.overlayRef,
         visibleOptions: visibleOptions
       }, this.props, {
@@ -1895,7 +1909,7 @@ _defineProperty(MultiSelect, "defaultProps", {
   filterMatchMode: 'contains',
   filterPlaceholder: null,
   filterLocale: undefined,
-  emptyFilterMessage: 'No results found',
+  emptyFilterMessage: null,
   resetFilterOnHide: false,
   tabIndex: 0,
   dataKey: null,
@@ -1903,7 +1917,7 @@ _defineProperty(MultiSelect, "defaultProps", {
   appendTo: null,
   tooltip: null,
   tooltipOptions: null,
-  maxSelectedLabels: 3,
+  maxSelectedLabels: null,
   selectionLimit: null,
   selectedItemsLabel: '{0} items selected',
   ariaLabelledBy: null,
@@ -1913,6 +1927,7 @@ _defineProperty(MultiSelect, "defaultProps", {
   panelFooterTemplate: null,
   transitionOptions: null,
   dropdownIcon: 'pi pi-chevron-down',
+  removeIcon: 'pi pi-times-circle',
   showSelectAll: true,
   selectAll: false,
   onChange: null,