primereact 7.0.0-rc.2 → 7.0.0

package/multiselect/multiselect.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.multiselect = (function (exports, React, core, inputtext, virtualscroller, PrimeReact) {
+this.primereact.multiselect = (function (exports, React, utils, tooltip, csstransition, portal, inputtext, ripple, virtualscroller, PrimeReact, overlayservice) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -281,7 +281,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     }, {
       key: "renderTooltip",
       value: function renderTooltip() {
-        this.tooltip = core.tip({
+        this.tooltip = tooltip.tip({
           target: this.element,
           content: this.props.tooltip,
           options: this.props.tooltipOptions
@@ -297,18 +297,19 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
       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;
           },
@@ -318,31 +319,34 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
           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
         })));
       }
     }]);
@@ -417,16 +421,16 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
       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"
           }));
         }
@@ -437,20 +441,20 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
       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);
 
@@ -468,7 +472,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
             element: element,
             props: this.props
           };
-          return core.ObjectUtils.getJSXElement(this.props.template, defaultOptions);
+          return utils.ObjectUtils.getJSXElement(this.props.template, defaultOptions);
         }
 
         return element;
@@ -522,32 +526,32 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     }, {
       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));
       }
     }]);
 
@@ -621,7 +625,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     }, {
       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,
@@ -637,8 +641,8 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
       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);
         }
@@ -659,7 +663,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
           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,
@@ -675,8 +679,8 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     }, {
       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);
       }
@@ -684,12 +688,12 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
       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 {
@@ -697,7 +701,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
           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,
@@ -735,7 +739,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
             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), {
@@ -746,9 +750,9 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
               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", {
+              return /*#__PURE__*/React__default["default"].createElement("ul", {
                 ref: options.contentRef,
                 className: className,
                 role: "listbox",
@@ -757,19 +761,19 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
             }
           });
 
-          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
@@ -779,13 +783,13 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     }, {
       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,
@@ -799,7 +803,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
           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,
@@ -810,7 +814,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
       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
         });
@@ -820,8 +824,8 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     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));
   });
@@ -890,7 +894,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     _createClass(MultiSelect, [{
       key: "onPanelClick",
       value: function onPanelClick(event) {
-        core.OverlayService.emit('overlay-click', {
+        overlayservice.OverlayService.emit('overlay-click', {
           originalEvent: event,
           target: this.container
         });
@@ -917,7 +921,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
         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]));
       }
     }, {
@@ -967,18 +971,18 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
       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 {
@@ -986,6 +990,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
           }
 
           this.inputRef.current.focus();
+          event.preventDefault();
         }
       }
     }, {
@@ -1015,7 +1020,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
 
           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();
@@ -1067,8 +1072,6 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
                 return _this3.getOptionValue(option);
               });
             }
-
-            value = _toConsumableArray(new Set([].concat(_toConsumableArray(value), _toConsumableArray(this.props.value || []))));
           }
 
           this.updateModel(event.originalEvent, value);
@@ -1139,7 +1142,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     }, {
       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();
@@ -1167,18 +1170,18 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
           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({
@@ -1225,7 +1228,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
         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);
           });
         });
       }
@@ -1241,7 +1244,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
           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);
           });
         }
 
@@ -1291,7 +1294,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
             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;
             }
           }
@@ -1352,7 +1355,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
         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();
             }
@@ -1375,7 +1378,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
 
         if (!this.resizeListener) {
           this.resizeListener = function () {
-            if (_this12.state.overlayVisible && !core.DomHandler.isAndroid()) {
+            if (_this12.state.overlayVisible && !utils.DomHandler.isAndroid()) {
               _this12.hide();
             }
           };
@@ -1399,7 +1402,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     }, {
       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",
@@ -1465,7 +1468,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
           this.tooltip = null;
         }
 
-        core.ZIndexUtils.clear(this.overlayRef.current);
+        utils.ZIndexUtils.clear(this.overlayRef.current);
       }
     }, {
       key: "hasFilter",
@@ -1548,13 +1551,13 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     }, {
       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;
         }
 
@@ -1563,28 +1566,28 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     }, {
       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;
@@ -1652,7 +1655,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
       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);
       }
@@ -1673,7 +1676,9 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
         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++) {
@@ -1685,8 +1690,6 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
             }
 
             return label;
-          } else {
-            return this.getSelectedItemsLabel();
           }
         }
 
@@ -1699,34 +1702,37 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
 
         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
               }));
             });
           }
@@ -1737,7 +1743,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     }, {
       key: "renderTooltip",
       value: function renderTooltip() {
-        this.tooltip = core.tip({
+        this.tooltip = tooltip.tip({
           target: this.container,
           content: this.props.tooltip,
           options: this.props.tooltipOptions
@@ -1751,7 +1757,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
         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);
@@ -1768,17 +1774,17 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
 
         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'));
       }
@@ -1787,7 +1793,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
       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,
@@ -1795,11 +1801,10 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
           '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,
@@ -1807,9 +1812,9 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
             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,
@@ -1824,11 +1829,13 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
           "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, {
@@ -1891,7 +1898,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     filterMatchMode: 'contains',
     filterPlaceholder: null,
     filterLocale: undefined,
-    emptyFilterMessage: 'No results found',
+    emptyFilterMessage: null,
     resetFilterOnHide: false,
     tabIndex: 0,
     dataKey: null,
@@ -1899,7 +1906,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     appendTo: null,
     tooltip: null,
     tooltipOptions: null,
-    maxSelectedLabels: 3,
+    maxSelectedLabels: null,
     selectionLimit: null,
     selectedItemsLabel: '{0} items selected',
     ariaLabelledBy: null,
@@ -1909,6 +1916,7 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
     panelFooterTemplate: null,
     transitionOptions: null,
     dropdownIcon: 'pi pi-chevron-down',
+    removeIcon: 'pi pi-times-circle',
     showSelectAll: true,
     selectAll: false,
     onChange: null,
@@ -1926,4 +1934,4 @@ this.primereact.multiselect = (function (exports, React, core, inputtext, virtua
 
   return exports;
 
-}({}, React, primereact.core, primereact.inputtext, primereact.virtualscroller, primereact.api));
+})({}, React, primereact.utils, primereact.tooltip, primereact.csstransition, primereact.portal, primereact.inputtext, primereact.ripple, primereact.virtualscroller, primereact.api, primereact.overlayservice);