primereact 10.5.2 → 10.6.0

package/multiselect/multiselect.esm.js

@@ -254,6 +254,7 @@ var MultiSelectBase = ComponentBase.extend({
     filterInputAutoFocus: true,
     filterLocale: undefined,
     selectOnFocus: false,
+    focusOnHover: true,
     autoOptionFocus: false,
     filterMatchMode: 'contains',
     filterPlaceholder: null,
@@ -351,7 +352,6 @@ var CheckboxBase = ComponentBase.extend({
     invalid: false,
     name: null,
     onChange: null,
-    onClick: null,
     onContextMenu: null,
     onMouseDown: null,
     readOnly: false,
@@ -398,6 +398,7 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       return;
     }
     if (props.onChange) {
+      var _props$onChange;
       var _checked = isChecked();
       var value = _checked ? props.falseValue : props.trueValue;
       var eventData = {
@@ -405,10 +406,10 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         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',
@@ -418,7 +419,7 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
           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) {
@@ -482,7 +483,6 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       className: cx('input'),
       name: props.name,
       tabIndex: props.tabIndex,
-      defaultChecked: checked,
       onFocus: function onFocus(e) {
         return _onFocus();
       },
@@ -496,7 +496,7 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       readOnly: props.readOnly,
       required: props.required,
       'aria-invalid': props.invalid,
-      checked: isChecked()
+      checked: checked
     }, ariaProps), ptm('input'));
     return /*#__PURE__*/React.createElement("input", _extends({
       ref: inputRef
@@ -558,15 +558,20 @@ var MultiSelectHeader = /*#__PURE__*/React.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({
@@ -627,7 +632,7 @@ var MultiSelectHeader = /*#__PURE__*/React.memo(function (props) {
   var checkboxElement = props.showSelectAll && /*#__PURE__*/React.createElement("div", headerCheckboxContainerProps, /*#__PURE__*/React.createElement(Checkbox, {
     id: selectAllId,
     checked: props.selectAll,
-    onChange: onSelectAll,
+    onChange: onToggleAll,
     role: "checkbox",
     "aria-checked": props.selectAll,
     icon: itemCheckboxIcon,
@@ -658,7 +663,7 @@ var MultiSelectHeader = /*#__PURE__*/React.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',
@@ -730,6 +735,9 @@ var MultiSelectItem = /*#__PURE__*/React.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,
@@ -797,6 +805,10 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       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,
@@ -824,6 +836,12 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
     }
     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) {
@@ -843,6 +861,7 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
         template: props.itemTemplate,
         selected: selected,
         onClick: props.onOptionSelect,
+        onMouseMove: changeFocusedItemOnHover,
         tabIndex: tabIndex,
         disabled: disabled,
         className: props.itemClassName,
@@ -885,39 +904,38 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: key
       }, /*#__PURE__*/React.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.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.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 (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) {
@@ -958,21 +976,20 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
           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.createElement("div", wrapperProps, /*#__PURE__*/React.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.createElement("div", wrapperProps, /*#__PURE__*/React.createElement("ul", listProps, items));
   };
   var createElement = function createElement() {
     var allowOptionSelect = props.allowOptionSelect();
@@ -1034,7 +1051,9 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
     }, panelProps), /*#__PURE__*/React.createElement("span", firstHiddenElementProps), header, content, footer, /*#__PURE__*/React.createElement("span", lastHiddenElementProps)));
   };
   var element = createElement();
-  if (props.inline) return element;
+  if (props.inline) {
+    return element;
+  }
   return /*#__PURE__*/React.createElement(Portal, {
     element: element,
     appendTo: props.appendTo
@@ -1139,13 +1158,13 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+    var matchedOptionIndex = hasSelectedOption() && index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
       return isValidSelectedOption(option);
     }) : -1;
     return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
@@ -1153,7 +1172,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   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;
@@ -1187,9 +1206,13 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     }
     var selected = isSelected(option);
     var value = null;
-    if (selected) value = props.value.filter(function (val) {
-      return !ObjectUtils.equals(val, getOptionValue(option), equalityKey);
-    });else value = [].concat(_toConsumableArray(props.value || []), [getOptionValue(option)]);
+    if (selected) {
+      value = props.value.filter(function (val) {
+        return !ObjectUtils.equals(val, getOptionValue(option), equalityKey);
+      });
+    } else {
+      value = [].concat(_toConsumableArray(props.value || []), [getOptionValue(option)]);
+    }
     updateModel(event, value, option);
     index !== -1 && setFocusedOptionIndex(index);
   };
@@ -1233,9 +1256,11 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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();
@@ -1303,26 +1328,36 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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;
@@ -1333,7 +1368,9 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         onPageUpKey(event);
         break;
       case 'Escape':
-        if (props.inline) break;
+        if (props.inline) {
+          break;
+        }
         hide();
         break;
       case 'Tab':
@@ -1407,10 +1444,10 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         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,
@@ -1456,7 +1493,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     setClicked(false);
   };
   var onOverlayEnter = function onOverlayEnter(callback) {
-    ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex['overlay'] || PrimeReact.zIndex['overlay']);
+    ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex.overlay || PrimeReact.zIndex.overlay);
     DomHandler.addStyles(overlayRef.current, {
       position: 'absolute',
       top: '0',
@@ -1510,9 +1547,8 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
           group: groupIndex,
           option: optionIndex
         } : -1;
-      } else {
-        return findOptionIndexInList(props.value, props.options);
       }
+      return findOptionIndexInList(props.value, props.options);
     }
     return -1;
   };
@@ -1580,44 +1616,42 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var isAllSelected = function isAllSelected() {
     if (props.onSelectAll) {
       return props.selectAll;
-    } else {
-      if (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 (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 ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
+    return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
   };
   var getOptionValue = function getOptionValue(option) {
     if (props.useOptionAsValue) {
@@ -1627,7 +1661,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       var data = 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 ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
@@ -1645,10 +1679,10 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     if (props.optionDisabled) {
       return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : 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;
@@ -1676,9 +1710,11 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
           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--) {
@@ -1772,25 +1808,24 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   };
   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 || 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 (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
         return getSelectedItemsLabel();
-      } else {
-        if (ObjectUtils.isArray(props.value)) {
-          return props.value.reduce(function (acc, value, index) {
-            return acc + (index !== 0 ? ', ' : '') + getLabelByValue(value);
-          }, '');
-        } else {
-          return '';
-        }
       }
+      if (ObjectUtils.isArray(props.value)) {
+        return props.value.reduce(function (acc, value, index) {
+          return acc + (index !== 0 ? ', ' : '') + getLabelByValue(value);
+        }, '');
+      }
+      return '';
     }
     return label;
   };
@@ -1799,52 +1834,49 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       if (!empty) {
         if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
           return getSelectedItemsLabel();
-        } else {
-          return props.value.map(function (val, index) {
-            var item = ObjectUtils.getJSXElement(props.selectedItemTemplate, val);
-            return /*#__PURE__*/React.createElement(React.Fragment, {
-              key: index
-            }, item);
-          });
         }
-      } else {
-        return 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 ? IconUtils.getJSXIcon(props.removeIcon, _objectSpread({}, iconProps), {
-            props: props
-          }) : /*#__PURE__*/React.createElement(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.createElement("div", _extends({}, tokenProps, {
-            key: label
-          }), /*#__PURE__*/React.createElement("span", tokenLabelProps, label), icon);
+        return props.value.map(function (val, index) {
+          var item = ObjectUtils.getJSXElement(props.selectedItemTemplate, val);
+          return /*#__PURE__*/React.createElement(React.Fragment, {
+            key: index
+          }, item);
         });
       }
-      return getLabel();
+      return 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 ? IconUtils.getJSXIcon(props.removeIcon, _objectSpread({}, iconProps), {
+          props: props
+        }) : /*#__PURE__*/React.createElement(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.createElement("div", _extends({}, tokenProps, {
+          key: label
+        }), /*#__PURE__*/React.createElement("span", tokenLabelProps, label), icon);
+      });
+    }
+    return getLabel();
   };
   var getVisibleOptions = function getVisibleOptions() {
     if (hasFilter) {
@@ -1868,12 +1900,10 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
           _iterator3.f();
         }
         return filteredGroups;
-      } else {
-        return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
       }
-    } else {
-      return props.options;
+      return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
     }
+    return props.options;
   };
   React.useImperativeHandle(ref, function () {
     return {
@@ -2009,6 +2039,9 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     lastHiddenFocusableElementOnOverlay: lastHiddenFocusableElementOnOverlay,
     setFocusedOptionIndex: setFocusedOptionIndex,
     hasFilter: hasFilter,
+    isValidOption: isValidOption,
+    getOptionValue: getOptionValue,
+    updateModel: updateModel,
     onFilterInputChange: onFilterInputChange,
     resetFilter: resetFilter,
     onCloseClick: onCloseClick,
@@ -2033,7 +2066,8 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     cx: cx,
     sx: sx,
     isUnstyled: isUnstyled,
-    metaData: metaData
+    metaData: metaData,
+    changeFocusedOptionIndex: changeFocusedOptionIndex
   }))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip,