primereact 10.5.2 → 10.6.0

package/multiselect/multiselect.cjs.js

@@ -281,6 +281,7 @@ var MultiSelectBase = componentbase.ComponentBase.extend({
     filterInputAutoFocus: true,
     filterLocale: undefined,
     selectOnFocus: false,
+    focusOnHover: true,
     autoOptionFocus: false,
     filterMatchMode: 'contains',
     filterPlaceholder: null,
@@ -378,7 +379,6 @@ var CheckboxBase = componentbase.ComponentBase.extend({
     invalid: false,
     name: null,
     onChange: null,
-    onClick: null,
     onContextMenu: null,
     onMouseDown: null,
     readOnly: false,
@@ -425,6 +425,7 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       return;
     }
     if (props.onChange) {
+      var _props$onChange;
       var _checked = isChecked();
       var value = _checked ? props.falseValue : props.trueValue;
       var eventData = {
@@ -432,10 +433,10 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         value: props.value,
         checked: value,
         stopPropagation: function stopPropagation() {
-          event.stopPropagation();
+          event === null || event === void 0 || event.stopPropagation();
         },
         preventDefault: function preventDefault() {
-          event.preventDefault();
+          event === null || event === void 0 || event.preventDefault();
         },
         target: {
           type: 'checkbox',
@@ -445,7 +446,7 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           checked: value
         }
       };
-      props.onChange && props.onChange(eventData);
+      props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, eventData);
 
       // do not continue if the user defined click wants to prevent
       if (event.defaultPrevented) {
@@ -509,7 +510,6 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       className: cx('input'),
       name: props.name,
       tabIndex: props.tabIndex,
-      defaultChecked: checked,
       onFocus: function onFocus(e) {
         return _onFocus();
       },
@@ -523,7 +523,7 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       readOnly: props.readOnly,
       required: props.required,
       'aria-invalid': props.invalid,
-      checked: isChecked()
+      checked: checked
     }, ariaProps), ptm('input'));
     return /*#__PURE__*/React__namespace.createElement("input", _extends({
       ref: inputRef
@@ -585,15 +585,20 @@ var MultiSelectHeader = /*#__PURE__*/React__namespace.memo(function (props) {
       });
     }
   };
-  var onSelectAll = function onSelectAll(event) {
+  var onToggleAll = function onToggleAll(event) {
     if (props.onSelectAll) {
       props.onSelectAll({
         originalEvent: event,
         checked: props.selectAll
       });
+    } else {
+      var value = props.isAllSelected() ? [] : props.visibleOptions.filter(function (option) {
+        return props.isValidOption(option);
+      }).map(function (option) {
+        return props.getOptionValue(option);
+      });
+      props.updateModel(event, value, value);
     }
-    event.preventDefault();
-    event.stopPropagation();
   };
   var createFilterElement = function createFilterElement() {
     var filterIconProps = mergeProps({
@@ -654,7 +659,7 @@ var MultiSelectHeader = /*#__PURE__*/React__namespace.memo(function (props) {
   var checkboxElement = props.showSelectAll && /*#__PURE__*/React__namespace.createElement("div", headerCheckboxContainerProps, /*#__PURE__*/React__namespace.createElement(Checkbox, {
     id: selectAllId,
     checked: props.selectAll,
-    onChange: onSelectAll,
+    onChange: onToggleAll,
     role: "checkbox",
     "aria-checked": props.selectAll,
     icon: itemCheckboxIcon,
@@ -685,7 +690,7 @@ var MultiSelectHeader = /*#__PURE__*/React__namespace.memo(function (props) {
       className: 'p-multiselect-header',
       checkboxElement: checkboxElement,
       checked: props.selectAll,
-      onChange: onSelectAll,
+      onChange: onToggleAll,
       filterElement: filterElement,
       closeElement: closeElement,
       closeElementClassName: 'p-multiselect-close p-link',
@@ -757,6 +762,9 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
     onClick: onClick,
     onFocus: onFocus,
     onBlur: onBlur,
+    onMouseMove: function onMouseMove(e) {
+      return props === null || props === void 0 ? void 0 : props.onMouseMove(e, props.index);
+    },
     tabIndex: tabIndex,
     role: 'option',
     'aria-selected': props.selected,
@@ -824,6 +832,10 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       filterRef: filterInputRef,
       filterValue: props.filterValue,
       filterTemplate: props.filterTemplate,
+      visibleOptions: props.visibleOptions,
+      isValidOption: props.isValidOption,
+      getOptionValue: props.getOptionValue,
+      updateModel: props.updateModel,
       onFilter: onFilterInputChange,
       filterPlaceholder: props.filterPlaceholder,
       onClose: props.onCloseClick,
@@ -851,6 +863,12 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
     }
     return null;
   };
+  var changeFocusedItemOnHover = function changeFocusedItemOnHover(event, index) {
+    if (props.focusOnHover) {
+      var _props$changeFocusedO;
+      props === null || props === void 0 || (_props$changeFocusedO = props.changeFocusedOptionIndex) === null || _props$changeFocusedO === void 0 || _props$changeFocusedO.call(props, event, index);
+    }
+  };
   var createGroupChildren = function createGroupChildren(optionGroup, style) {
     var groupChildren = props.getOptionGroupChildren(optionGroup);
     return groupChildren.map(function (option, j) {
@@ -870,6 +888,7 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
         template: props.itemTemplate,
         selected: selected,
         onClick: props.onOptionSelect,
+        onMouseMove: changeFocusedItemOnHover,
         tabIndex: tabIndex,
         disabled: disabled,
         className: props.itemClassName,
@@ -912,39 +931,38 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
         key: key
       }, /*#__PURE__*/React__namespace.createElement("li", itemGroupProps, groupContent), groupChildrenContent);
-    } else {
-      var optionLabel = props.getOptionLabel(option);
-      var optionKey = index + '_' + props.getOptionRenderKey(option);
-      var disabled = props.isOptionDisabled(option);
-      var tabIndex = disabled ? null : props.tabIndex || 0;
-      var selected = props.isSelected(option);
-      return /*#__PURE__*/React__namespace.createElement(MultiSelectItem, {
-        hostName: props.hostName,
-        key: optionKey,
-        focusedOptionIndex: props.focusedOptionIndex,
-        label: optionLabel,
-        option: option,
-        style: style,
-        index: index,
-        template: props.itemTemplate,
-        selected: selected,
-        onClick: props.onOptionSelect,
-        tabIndex: tabIndex,
-        disabled: disabled,
-        className: props.itemClassName,
-        checkboxIcon: props.checkboxIcon,
-        isUnstyled: isUnstyled,
-        ptm: ptm,
-        cx: cx
-      });
     }
+    var optionLabel = props.getOptionLabel(option);
+    var optionKey = index + '_' + props.getOptionRenderKey(option);
+    var disabled = props.isOptionDisabled(option);
+    var tabIndex = disabled ? null : props.tabIndex || 0;
+    var selected = props.isSelected(option);
+    return /*#__PURE__*/React__namespace.createElement(MultiSelectItem, {
+      hostName: props.hostName,
+      key: optionKey,
+      focusedOptionIndex: props.focusedOptionIndex,
+      label: optionLabel,
+      option: option,
+      style: style,
+      index: index,
+      template: props.itemTemplate,
+      selected: selected,
+      onClick: props.onOptionSelect,
+      onMouseMove: changeFocusedItemOnHover,
+      tabIndex: tabIndex,
+      disabled: disabled,
+      className: props.itemClassName,
+      checkboxIcon: props.checkboxIcon,
+      isUnstyled: isUnstyled,
+      ptm: ptm,
+      cx: cx
+    });
   };
   var createItems = function createItems() {
     if (utils.ObjectUtils.isNotEmpty(props.visibleOptions)) {
       return props.visibleOptions.map(createItem);
-    } else {
-      return props.hasFilter ? createEmptyFilter() : createEmptyContent();
     }
+    return props.hasFilter ? createEmptyFilter() : createEmptyContent();
   };
   var createContent = function createContent() {
     if (props.virtualScrollerOptions) {
@@ -985,21 +1003,20 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
           parent: props.metaData
         }
       }));
-    } else {
-      var items = createItems();
-      var wrapperProps = mergeProps({
-        className: cx('wrapper'),
-        style: {
-          maxHeight: props.scrollHeight
-        }
-      }, getPTOptions('wrapper'));
-      var listProps = mergeProps({
-        className: cx('list'),
-        role: 'listbox',
-        'aria-multiselectable': true
-      }, getPTOptions('list'));
-      return /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("ul", listProps, items));
     }
+    var items = createItems();
+    var wrapperProps = mergeProps({
+      className: cx('wrapper'),
+      style: {
+        maxHeight: props.scrollHeight
+      }
+    }, getPTOptions('wrapper'));
+    var listProps = mergeProps({
+      className: cx('list'),
+      role: 'listbox',
+      'aria-multiselectable': true
+    }, getPTOptions('list'));
+    return /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("ul", listProps, items));
   };
   var createElement = function createElement() {
     var allowOptionSelect = props.allowOptionSelect();
@@ -1061,7 +1078,9 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
     }, panelProps), /*#__PURE__*/React__namespace.createElement("span", firstHiddenElementProps), header, content, footer, /*#__PURE__*/React__namespace.createElement("span", lastHiddenElementProps)));
   };
   var element = createElement();
-  if (props.inline) return element;
+  if (props.inline) {
+    return element;
+  }
   return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
     element: element,
     appendTo: props.appendTo
@@ -1166,13 +1185,13 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     return !props.selectionLimit || !props.value || props.value && props.value.length < props.selectionLimit;
   };
   var findNextSelectedOptionIndex = function findNextSelectedOptionIndex(index) {
-    var matchedOptionIndex = hasSelectedOption && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
+    var matchedOptionIndex = hasSelectedOption() && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
       return isValidSelectedOption(option);
     }) : -1;
     return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
   };
   var findPrevSelectedOptionIndex = function findPrevSelectedOptionIndex(index) {
-    var matchedOptionIndex = hasSelectedOption && index > 0 ? utils.ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+    var matchedOptionIndex = hasSelectedOption() && index > 0 ? utils.ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
       return isValidSelectedOption(option);
     }) : -1;
     return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
@@ -1180,7 +1199,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   var findNearestSelectedOptionIndex = function findNearestSelectedOptionIndex(index) {
     var firstCheckUp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var matchedOptionIndex = -1;
-    if (hasSelectedOption) {
+    if (hasSelectedOption()) {
       if (firstCheckUp) {
         matchedOptionIndex = findPrevSelectedOptionIndex(index);
         matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex;
@@ -1214,9 +1233,13 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     }
     var selected = isSelected(option);
     var value = null;
-    if (selected) value = props.value.filter(function (val) {
-      return !utils.ObjectUtils.equals(val, getOptionValue(option), equalityKey);
-    });else value = [].concat(_toConsumableArray(props.value || []), [getOptionValue(option)]);
+    if (selected) {
+      value = props.value.filter(function (val) {
+        return !utils.ObjectUtils.equals(val, getOptionValue(option), equalityKey);
+      });
+    } else {
+      value = [].concat(_toConsumableArray(props.value || []), [getOptionValue(option)]);
+    }
     updateModel(event, value, option);
     index !== -1 && setFocusedOptionIndex(index);
   };
@@ -1260,9 +1283,11 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     if (!overlayVisibleState) {
       setFocusedOptionIndex(-1);
       onArrowDownKey(event);
-    } else {
-      if (focusedOptionIndex !== -1) {
-        if (event.shiftKey) onOptionSelectRange(event, focusedOptionIndex);else onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+    } else if (focusedOptionIndex !== -1) {
+      if (event.shiftKey) {
+        onOptionSelectRange(event, focusedOptionIndex);
+      } else {
+        onOptionSelect(event, visibleOptions[focusedOptionIndex]);
       }
     }
     event.preventDefault();
@@ -1330,26 +1355,36 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     var metaKey = event.metaKey || event.ctrlKey;
     switch (event.code) {
       case 'ArrowUp':
-        if (props.inline) break;
+        if (props.inline) {
+          break;
+        }
         onArrowUpKey(event);
         break;
       case 'ArrowDown':
-        if (props.inline) break;
+        if (props.inline) {
+          break;
+        }
         onArrowDownKey(event);
         break;
       case 'Space':
       case 'NumpadEnter':
       case 'Enter':
-        if (props.inline) break;
+        if (props.inline) {
+          break;
+        }
         onEnterKey(event);
         break;
       case 'Home':
-        if (props.inline) break;
+        if (props.inline) {
+          break;
+        }
         onHomeKey(event);
         event.preventDefault();
         break;
       case 'End':
-        if (props.inline) break;
+        if (props.inline) {
+          break;
+        }
         onEndKey(event);
         event.preventDefault();
         break;
@@ -1360,7 +1395,9 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
         onPageUpKey(event);
         break;
       case 'Escape':
-        if (props.inline) break;
+        if (props.inline) {
+          break;
+        }
         hide();
         break;
       case 'Tab':
@@ -1434,10 +1471,10 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
         value: value,
         selectedOption: selectedOption,
         stopPropagation: function stopPropagation() {
-          event.stopPropagation();
+          event === null || event === void 0 || event.stopPropagation();
         },
         preventDefault: function preventDefault() {
-          event.preventDefault();
+          event === null || event === void 0 || event.preventDefault();
         },
         target: {
           name: props.name,
@@ -1483,7 +1520,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     setClicked(false);
   };
   var onOverlayEnter = function onOverlayEnter(callback) {
-    utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['overlay'] || PrimeReact__default["default"].zIndex['overlay']);
+    utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex.overlay || PrimeReact__default["default"].zIndex.overlay);
     utils.DomHandler.addStyles(overlayRef.current, {
       position: 'absolute',
       top: '0',
@@ -1537,9 +1574,8 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
           group: groupIndex,
           option: optionIndex
         } : -1;
-      } else {
-        return findOptionIndexInList(props.value, props.options);
       }
+      return findOptionIndexInList(props.value, props.options);
     }
     return -1;
   };
@@ -1607,44 +1643,42 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   var isAllSelected = function isAllSelected() {
     if (props.onSelectAll) {
       return props.selectAll;
-    } else {
-      if (utils.ObjectUtils.isEmpty(visibleOptions)) {
-        return false;
-      }
-      var options = visibleOptions.filter(function (option) {
-        return !isOptionDisabled(option);
-      });
-      if (props.optionGroupLabel) {
-        var areAllSelected = true;
-        var _iterator2 = _createForOfIteratorHelper(options),
-          _step2;
-        try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            var optionGroup = _step2.value;
-            var visibleOptionsGroupChildren = getOptionGroupChildren(optionGroup).filter(function (option) {
-              return !isOptionDisabled(option);
-            });
-            if (visibleOptionsGroupChildren.some(function (option) {
-              return !isSelected(option);
-            }) === true) {
-              areAllSelected = false;
-            }
+    }
+    if (utils.ObjectUtils.isEmpty(visibleOptions)) {
+      return false;
+    }
+    var options = visibleOptions.filter(function (option) {
+      return !isOptionDisabled(option);
+    });
+    if (props.optionGroupLabel) {
+      var areAllSelected = true;
+      var _iterator2 = _createForOfIteratorHelper(options),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var optionGroup = _step2.value;
+          var visibleOptionsGroupChildren = getOptionGroupChildren(optionGroup).filter(function (option) {
+            return !isOptionDisabled(option);
+          });
+          if (visibleOptionsGroupChildren.some(function (option) {
+            return !isSelected(option);
+          }) === true) {
+            areAllSelected = false;
           }
-        } catch (err) {
-          _iterator2.e(err);
-        } finally {
-          _iterator2.f();
         }
-        return areAllSelected;
-      } else {
-        return !options.some(function (option) {
-          return !isSelected(option);
-        });
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
       }
+      return areAllSelected;
     }
+    return !options.some(function (option) {
+      return !isSelected(option);
+    });
   };
   var getOptionLabel = function getOptionLabel(option) {
-    return props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
+    return props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
   };
   var getOptionValue = function getOptionValue(option) {
     if (props.useOptionAsValue) {
@@ -1654,7 +1688,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       var data = utils.ObjectUtils.resolveFieldData(option, props.optionValue);
       return data !== null ? data : option;
     }
-    return option && option['value'] !== undefined ? option['value'] : option;
+    return option && option.value !== undefined ? option.value : option;
   };
   var getOptionRenderKey = function getOptionRenderKey(option) {
     return props.dataKey ? utils.ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
@@ -1672,10 +1706,10 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     if (props.optionDisabled) {
       return utils.ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : utils.ObjectUtils.resolveFieldData(option, props.optionDisabled);
     }
-    return option && option['disabled'] !== undefined ? option['disabled'] : false;
+    return option && option.disabled !== undefined ? option.disabled : false;
   };
   var isOptionValueUsed = function isOptionValueUsed(option) {
-    return !props.useOptionAsValue && props.optionValue || option && option['value'] !== undefined;
+    return !props.useOptionAsValue && props.optionValue || option && option.value !== undefined;
   };
   var isOptionGroup = function isOptionGroup(option) {
     return props.optionGroupLabel && option.optionGroup && option.group;
@@ -1703,9 +1737,11 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
           var matchedOptionIndex = visibleOptions.findIndex(function (option) {
             return isValidSelectedOption(option) && isEquals(value, getOptionValue(option));
           });
-          if (matchedOptionIndex > -1) return {
-            v: matchedOptionIndex
-          };
+          if (matchedOptionIndex > -1) {
+            return {
+              v: matchedOptionIndex
+            };
+          }
         },
         _ret;
       for (var index = props.value.length - 1; index >= 0; index--) {
@@ -1799,25 +1835,24 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   };
   var getSelectedItemsLabel = function getSelectedItemsLabel() {
     var pattern = /{(.*?)}/;
-    if (pattern.test(props.selectedItemsLabel)) {
-      return props.selectedItemsLabel.replace(props.selectedItemsLabel.match(pattern)[0], props.value.length + '');
+    var selectedItemsLabel = props.selectedItemsLabel || PrimeReact.localeOption('selectionMessage');
+    if (pattern.test(selectedItemsLabel)) {
+      return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], props.value.length + '');
     }
-    return props.selectedItemsLabel;
+    return selectedItemsLabel;
   };
   var getLabel = function getLabel() {
     var label;
     if (!empty && !props.fixedPlaceholder) {
       if (utils.ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
         return getSelectedItemsLabel();
-      } else {
-        if (utils.ObjectUtils.isArray(props.value)) {
-          return props.value.reduce(function (acc, value, index) {
-            return acc + (index !== 0 ? ', ' : '') + getLabelByValue(value);
-          }, '');
-        } else {
-          return '';
-        }
       }
+      if (utils.ObjectUtils.isArray(props.value)) {
+        return props.value.reduce(function (acc, value, index) {
+          return acc + (index !== 0 ? ', ' : '') + getLabelByValue(value);
+        }, '');
+      }
+      return '';
     }
     return label;
   };
@@ -1826,52 +1861,49 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       if (!empty) {
         if (utils.ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
           return getSelectedItemsLabel();
-        } else {
-          return props.value.map(function (val, index) {
-            var item = utils.ObjectUtils.getJSXElement(props.selectedItemTemplate, val);
-            return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
-              key: index
-            }, item);
-          });
         }
-      } else {
-        return utils.ObjectUtils.getJSXElement(props.selectedItemTemplate);
-      }
-    } else {
-      if (props.display === 'chip' && !empty) {
-        var value = props.value.slice(0, props.maxSelectedLabels || props.value.length);
-        return value.map(function (val, i) {
-          var context = {
-            context: {
-              value: val,
-              index: i
-            }
-          };
-          var label = getLabelByValue(val);
-          var iconProps = mergeProps({
-            key: i,
-            className: cx('removeTokenIcon'),
-            onClick: function onClick(e) {
-              return removeChip(e, val);
-            }
-          }, ptm('removeTokenIcon', context));
-          var icon = !props.disabled && (props.removeIcon ? utils.IconUtils.getJSXIcon(props.removeIcon, _objectSpread({}, iconProps), {
-            props: props
-          }) : /*#__PURE__*/React__namespace.createElement(timescircle.TimesCircleIcon, iconProps));
-          var tokenProps = mergeProps({
-            className: cx('token')
-          }, ptm('token', context));
-          var tokenLabelProps = mergeProps({
-            key: label + i,
-            className: cx('tokenLabel')
-          }, ptm('tokenLabel', context));
-          return /*#__PURE__*/React__namespace.createElement("div", _extends({}, tokenProps, {
-            key: label
-          }), /*#__PURE__*/React__namespace.createElement("span", tokenLabelProps, label), icon);
+        return props.value.map(function (val, index) {
+          var item = utils.ObjectUtils.getJSXElement(props.selectedItemTemplate, val);
+          return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
+            key: index
+          }, item);
         });
       }
-      return getLabel();
+      return utils.ObjectUtils.getJSXElement(props.selectedItemTemplate);
     }
+    if (props.display === 'chip' && !empty) {
+      var value = props.value.slice(0, props.maxSelectedLabels || props.value.length);
+      return value.map(function (val, i) {
+        var context = {
+          context: {
+            value: val,
+            index: i
+          }
+        };
+        var label = getLabelByValue(val);
+        var iconProps = mergeProps({
+          key: i,
+          className: cx('removeTokenIcon'),
+          onClick: function onClick(e) {
+            return removeChip(e, val);
+          }
+        }, ptm('removeTokenIcon', context));
+        var icon = !props.disabled && (props.removeIcon ? utils.IconUtils.getJSXIcon(props.removeIcon, _objectSpread({}, iconProps), {
+          props: props
+        }) : /*#__PURE__*/React__namespace.createElement(timescircle.TimesCircleIcon, iconProps));
+        var tokenProps = mergeProps({
+          className: cx('token')
+        }, ptm('token', context));
+        var tokenLabelProps = mergeProps({
+          key: label + i,
+          className: cx('tokenLabel')
+        }, ptm('tokenLabel', context));
+        return /*#__PURE__*/React__namespace.createElement("div", _extends({}, tokenProps, {
+          key: label
+        }), /*#__PURE__*/React__namespace.createElement("span", tokenLabelProps, label), icon);
+      });
+    }
+    return getLabel();
   };
   var getVisibleOptions = function getVisibleOptions() {
     if (hasFilter) {
@@ -1895,12 +1927,10 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
           _iterator3.f();
         }
         return filteredGroups;
-      } else {
-        return PrimeReact.FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
       }
-    } else {
-      return props.options;
+      return PrimeReact.FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
     }
+    return props.options;
   };
   React__namespace.useImperativeHandle(ref, function () {
     return {
@@ -2036,6 +2066,9 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     lastHiddenFocusableElementOnOverlay: lastHiddenFocusableElementOnOverlay,
     setFocusedOptionIndex: setFocusedOptionIndex,
     hasFilter: hasFilter,
+    isValidOption: isValidOption,
+    getOptionValue: getOptionValue,
+    updateModel: updateModel,
     onFilterInputChange: onFilterInputChange,
     resetFilter: resetFilter,
     onCloseClick: onCloseClick,
@@ -2060,7 +2093,8 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     cx: cx,
     sx: sx,
     isUnstyled: isUnstyled,
-    metaData: metaData
+    metaData: metaData,
+    changeFocusedOptionIndex: changeFocusedOptionIndex
   }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
     target: elementRef,
     content: props.tooltip,