primereact 10.5.2 → 10.6.0

package/multiselect/multiselect.js

@@ -261,6 +261,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       filterInputAutoFocus: true,
       filterLocale: undefined,
       selectOnFocus: false,
+      focusOnHover: true,
       autoOptionFocus: false,
       filterMatchMode: 'contains',
       filterPlaceholder: null,
@@ -358,7 +359,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       invalid: false,
       name: null,
       onChange: null,
-      onClick: null,
       onContextMenu: null,
       onMouseDown: null,
       readOnly: false,
@@ -405,6 +405,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         return;
       }
       if (props.onChange) {
+        var _props$onChange;
         var _checked = isChecked();
         var value = _checked ? props.falseValue : props.trueValue;
         var eventData = {
@@ -412,10 +413,10 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
           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',
@@ -425,7 +426,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
             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) {
@@ -489,7 +490,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         className: cx('input'),
         name: props.name,
         tabIndex: props.tabIndex,
-        defaultChecked: checked,
         onFocus: function onFocus(e) {
           return _onFocus();
         },
@@ -503,7 +503,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         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
@@ -565,15 +565,20 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         });
       }
     };
-    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({
@@ -634,7 +639,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     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,
@@ -665,7 +670,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         className: 'p-multiselect-header',
         checkboxElement: checkboxElement,
         checked: props.selectAll,
-        onChange: onSelectAll,
+        onChange: onToggleAll,
         filterElement: filterElement,
         closeElement: closeElement,
         closeElementClassName: 'p-multiselect-close p-link',
@@ -737,6 +742,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       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,
@@ -804,6 +812,10 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         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,
@@ -831,6 +843,12 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       }
       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) {
@@ -850,6 +868,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
           template: props.itemTemplate,
           selected: selected,
           onClick: props.onOptionSelect,
+          onMouseMove: changeFocusedItemOnHover,
           tabIndex: tabIndex,
           disabled: disabled,
           className: props.itemClassName,
@@ -892,39 +911,38 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         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) {
@@ -965,21 +983,20 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
             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();
@@ -1041,7 +1058,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       }, 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
@@ -1146,13 +1165,13 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       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;
@@ -1160,7 +1179,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     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;
@@ -1194,9 +1213,13 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       }
       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);
     };
@@ -1240,9 +1263,11 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       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();
@@ -1310,26 +1335,36 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       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;
@@ -1340,7 +1375,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
           onPageUpKey(event);
           break;
         case 'Escape':
-          if (props.inline) break;
+          if (props.inline) {
+            break;
+          }
           hide();
           break;
         case 'Tab':
@@ -1414,10 +1451,10 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
           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,
@@ -1463,7 +1500,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       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',
@@ -1517,9 +1554,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
             group: groupIndex,
             option: optionIndex
           } : -1;
-        } else {
-          return findOptionIndexInList(props.value, props.options);
         }
+        return findOptionIndexInList(props.value, props.options);
       }
       return -1;
     };
@@ -1587,44 +1623,42 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     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) {
@@ -1634,7 +1668,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         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);
@@ -1652,10 +1686,10 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       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;
@@ -1683,9 +1717,11 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
             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--) {
@@ -1779,25 +1815,24 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     };
     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;
     };
@@ -1806,52 +1841,49 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         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) {
@@ -1875,12 +1907,10 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
             _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 {
@@ -2016,6 +2046,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       lastHiddenFocusableElementOnOverlay: lastHiddenFocusableElementOnOverlay,
       setFocusedOptionIndex: setFocusedOptionIndex,
       hasFilter: hasFilter,
+      isValidOption: isValidOption,
+      getOptionValue: getOptionValue,
+      updateModel: updateModel,
       onFilterInputChange: onFilterInputChange,
       resetFilter: resetFilter,
       onCloseClick: onCloseClick,
@@ -2040,7 +2073,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       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,