primereact 10.5.0 → 10.5.2

package/multiselect/multiselect.js

@@ -164,6 +164,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       return utils.classNames('p-multiselect p-component p-inputwrapper', {
         'p-multiselect-chip': props.display === 'chip',
         'p-disabled': props.disabled,
+        'p-invalid': props.invalid,
         'p-multiselect-clearable': props.showClear && !props.disabled,
         'p-focus': focusedState,
         'p-inputwrapper-filled': utils.ObjectUtils.isNotEmpty(props.value),
@@ -223,24 +224,18 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     },
     checkboxContainer: 'p-checkbox p-component',
     checkboxIcon: 'p-checkbox-icon p-c',
-    checkbox: function checkbox(_ref6) {
-      var props = _ref6.itemProps;
-      return utils.classNames('p-checkbox-box', {
-        'p-highlight': props.selected
-      });
-    },
     transition: 'p-connected-overlay'
   };
-  var styles$1 = "\n@layer primereact {\n    .p-multiselect {\n        display: inline-flex;\n        user-select: none;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label-container {\n        overflow: hidden;\n        flex: 1 1 auto;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label  {\n        display: block;\n        white-space: nowrap;\n        cursor: pointer;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n    \n    .p-multiselect-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n    \n    .p-multiselect-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-multiselect-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-multiselect .p-multiselect-panel {\n        min-width: 100%;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel {\n        border: none;\n        position: initial;\n        background: none;\n        box-shadow: none;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel .p-multiselect-items {\n        padding: 0;\n    }\n    \n    .p-multiselect-flex.p-multiselect-panel .p-multiselect-items {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    \n    .p-multiselect-items-wrapper {\n        overflow: auto;\n    }\n    \n    .p-multiselect-items {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    \n    .p-multiselect-item {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: normal;\n        white-space: nowrap;\n        position: relative;\n        overflow: hidden;\n        outline: none;\n    }\n    \n    .p-multiselect-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-multiselect-select-all-label {\n        margin-left: 0.5rem;\n    }\n    \n    .p-multiselect-filter-container {\n        position: relative;\n        flex: 1 1 auto;\n    }\n    \n    .p-multiselect-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-multiselect-filter-container .p-inputtext {\n        width: 100%;\n    }\n    \n    .p-multiselect-close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: hidden;\n        position: relative;\n        margin-left: auto;\n    }\n    \n    .p-multiselect-clear-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n        right: 3rem;\n    }\n    \n    .p-fluid .p-multiselect {\n        display: flex;\n    }\n}\n";
+  var styles = "\n@layer primereact {\n    .p-multiselect {\n        display: inline-flex;\n        user-select: none;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label-container {\n        overflow: hidden;\n        flex: 1 1 auto;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label  {\n        display: block;\n        white-space: nowrap;\n        cursor: pointer;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n    \n    .p-multiselect-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n    \n    .p-multiselect-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-multiselect-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-multiselect .p-multiselect-panel {\n        min-width: 100%;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel {\n        border: none;\n        position: initial;\n        background: none;\n        box-shadow: none;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel .p-multiselect-items {\n        padding: 0;\n    }\n    \n    .p-multiselect-flex.p-multiselect-panel .p-multiselect-items {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    \n    .p-multiselect-items-wrapper {\n        overflow: auto;\n    }\n    \n    .p-multiselect-items {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    \n    .p-multiselect-item {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: normal;\n        white-space: nowrap;\n        position: relative;\n        overflow: hidden;\n        outline: none;\n    }\n    \n    .p-multiselect-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-multiselect-select-all-label {\n        margin-left: 0.5rem;\n    }\n    \n    .p-multiselect-filter-container {\n        position: relative;\n        flex: 1 1 auto;\n    }\n    \n    .p-multiselect-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-multiselect-filter-container .p-inputtext {\n        width: 100%;\n    }\n    \n    .p-multiselect-close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: hidden;\n        position: relative;\n        margin-left: auto;\n    }\n    \n    .p-multiselect-clear-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n        right: 3rem;\n    }\n    \n    .p-fluid .p-multiselect {\n        display: flex;\n    }\n}\n";
   var inlineStyles = {
-    root: function root(_ref7) {
-      var props = _ref7.props;
+    root: function root(_ref6) {
+      var props = _ref6.props;
       return props.showClear && !props.disabled && {
         position: 'relative'
       };
     },
-    itemGroup: function itemGroup(_ref8) {
-      var scrollerOptions = _ref8.scrollerOptions;
+    itemGroup: function itemGroup(_ref7) {
+      var scrollerOptions = _ref7.scrollerOptions;
       return {
         height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
       };
@@ -276,9 +271,12 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       inline: false,
       inputId: null,
       inputRef: null,
+      invalid: false,
       itemCheckboxIcon: null,
       itemClassName: null,
       itemTemplate: null,
+      loading: false,
+      loadingIcon: null,
       maxSelectedLabels: null,
       name: null,
       onBlur: null,
@@ -325,35 +323,26 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     },
     css: {
       classes: classes$1,
-      styles: styles$1,
+      styles: styles,
       inlineStyles: inlineStyles
     }
   });
 
   var classes = {
-    icon: 'p-checkbox-icon p-c',
-    input: function input(_ref) {
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input',
+    icon: 'p-checkbox-icon',
+    root: function root(_ref) {
       var props = _ref.props,
-        checked = _ref.checked,
-        focusedState = _ref.focusedState;
-      return utils.classNames('p-checkbox-box', {
+        checked = _ref.checked;
+      return utils.classNames('p-checkbox p-component', {
         'p-highlight': checked,
         'p-disabled': props.disabled,
-        'p-focus': focusedState
-      });
-    },
-    root: function root(_ref2) {
-      var props = _ref2.props,
-        checked = _ref2.checked,
-        focusedState = _ref2.focusedState;
-      return utils.classNames('p-checkbox p-component', {
-        'p-checkbox-checked': checked,
-        'p-checkbox-disabled': props.disabled,
-        'p-checkbox-focused': focusedState
+        'p-invalid': props.invalid,
+        'p-variant-filled': props.variant === 'filled'
       });
     }
   };
-  var styles = "\n.p-checkbox {\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    vertical-align: bottom;\n    position: relative;\n}\n\n.p-checkbox.p-checkbox-disabled {\n    cursor: auto;\n}\n\n.p-checkbox-box {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}        \n";
   var CheckboxBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Checkbox',
@@ -366,6 +355,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       id: null,
       inputId: null,
       inputRef: null,
+      invalid: false,
       name: null,
       onChange: null,
       onClick: null,
@@ -382,8 +372,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       children: undefined
     },
     css: {
-      classes: classes,
-      styles: styles
+      classes: classes
     }
   });
 
@@ -393,15 +382,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     var mergeProps = hooks.useMergeProps();
     var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
     var props = CheckboxBase.getProps(inProps, context);
-    var _React$useState = React__namespace.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focusedState = _React$useState2[0],
-      setFocusedState = _React$useState2[1];
     var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
         props: props,
-        state: {
-          focused: focusedState
-        },
         context: {
           checked: props.checked === props.trueValue,
           disabled: props.disabled
@@ -411,20 +393,19 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       cx = _CheckboxBase$setMeta.cx,
       isUnstyled = _CheckboxBase$setMeta.isUnstyled;
     componentbase.useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
-      name: 'checkbox',
-      styled: true
+      name: 'checkbox'
     });
     var elementRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
-    var _onClick = function onClick(event) {
-      if (props.disabled || props.readOnly) {
+    var isChecked = function isChecked() {
+      return props.checked === props.trueValue;
+    };
+    var _onChange = function onChange(event) {
+      if (props.disabled || props.readonly) {
         return;
       }
-      if (props.onChange || props.onClick) {
+      if (props.onChange) {
         var _checked = isChecked();
-        var checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement || event.target instanceof Object;
-        var isInputToggled = event.target === inputRef.current;
-        var isCheckboxToggled = checkboxClicked && event.target.checked !== _checked;
         var value = _checked ? props.falseValue : props.trueValue;
         var eventData = {
           originalEvent: event,
@@ -444,33 +425,22 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
             checked: value
           }
         };
-        props.onClick && props.onClick(eventData);
+        props.onChange && props.onChange(eventData);
 
         // do not continue if the user defined click wants to prevent
         if (event.defaultPrevented) {
           return;
         }
-        if (isInputToggled || isCheckboxToggled) {
-          props.onChange && props.onChange(eventData);
-        }
         utils.DomHandler.focus(inputRef.current);
-        event.preventDefault();
       }
     };
     var _onFocus = function onFocus() {
-      setFocusedState(true);
+      var _props$onFocus;
+      props === null || props === void 0 || (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props);
     };
     var _onBlur = function onBlur() {
-      setFocusedState(false);
-    };
-    var _onKeyDown = function onKeyDown(event) {
-      if (event.code === 'Space' || event.key === ' ') {
-        // event.key is for Android support
-        _onClick(event);
-      }
-    };
-    var isChecked = function isChecked() {
-      return props.checked === props.trueValue;
+      var _props$onBlur;
+      props === null || props === void 0 || (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props);
     };
     React__namespace.useImperativeHandle(ref, function () {
       return {
@@ -500,71 +470,70 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     var checked = isChecked();
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
     var otherProps = CheckboxBase.getOtherProps(props);
-    var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
-    var iconProps = mergeProps({
-      className: cx('icon')
-    }, ptm('icon'));
-    var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, iconProps) : null;
-    var checkboxIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$4({}, iconProps), {
-      props: props,
-      checked: checked
-    });
     var rootProps = mergeProps({
       id: props.id,
       className: utils.classNames(props.className, cx('root', {
-        checked: checked,
-        focusedState: focusedState
+        checked: checked
       })),
       style: props.style,
-      onClick: function onClick(e) {
-        return _onClick(e);
-      },
       'data-p-highlight': checked,
       'data-p-disabled': props.disabled,
       onContextMenu: props.onContextMenu,
       onMouseDown: props.onMouseDown
     }, otherProps, ptm('root'));
-    var hiddenInputWrapperProps = mergeProps({
-      className: 'p-hidden-accessible'
-    }, ptm('hiddenInputWrapper'));
-    var hiddenInputProps = mergeProps(_objectSpread$4({
-      id: props.inputId,
-      type: 'checkbox',
-      name: props.name,
-      tabIndex: props.tabIndex,
-      defaultChecked: checked,
-      onFocus: function onFocus(e) {
-        return _onFocus();
-      },
-      onBlur: function onBlur(e) {
-        return _onBlur();
-      },
-      onKeyDown: function onKeyDown(e) {
-        return _onKeyDown(e);
-      },
-      disabled: props.disabled,
-      readOnly: props.readOnly,
-      required: props.required
-    }, ariaProps), ptm('hiddenInput'));
-    var inputProps = mergeProps({
-      className: cx('input', {
-        checked: checked,
-        focusedState: focusedState
-      }),
-      'data-p-highlight': checked,
-      'data-p-disabled': props.disabled,
-      'data-p-focus': focusedState
-    }, ptm('input'));
+    var createInputElement = function createInputElement() {
+      var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
+      var inputProps = mergeProps(_objectSpread$4({
+        id: props.inputId,
+        type: 'checkbox',
+        className: cx('input'),
+        name: props.name,
+        tabIndex: props.tabIndex,
+        defaultChecked: checked,
+        onFocus: function onFocus(e) {
+          return _onFocus();
+        },
+        onBlur: function onBlur(e) {
+          return _onBlur();
+        },
+        onChange: function onChange(e) {
+          return _onChange(e);
+        },
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        required: props.required,
+        'aria-invalid': props.invalid,
+        checked: isChecked()
+      }, ariaProps), ptm('input'));
+      return /*#__PURE__*/React__namespace.createElement("input", _extends({
+        ref: inputRef
+      }, inputProps));
+    };
+    var createBoxElement = function createBoxElement() {
+      var iconProps = mergeProps({
+        className: cx('icon')
+      }, ptm('icon'));
+      var boxProps = mergeProps({
+        className: cx('box', {
+          checked: checked
+        }),
+        'data-p-highlight': checked,
+        'data-p-disabled': props.disabled
+      }, ptm('box'));
+      var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, iconProps) : null;
+      var checkboxIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$4({}, iconProps), {
+        props: props,
+        checked: checked
+      });
+      return /*#__PURE__*/React__namespace.createElement("div", boxProps, checkboxIcon);
+    };
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: elementRef
-    }, rootProps), /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({
-      ref: inputRef
-    }, hiddenInputProps))), /*#__PURE__*/React__namespace.createElement("div", inputProps, checkboxIcon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
-      content: props.tooltip
-    }, props.tooltipOptions, {
+      content: props.tooltip,
       pt: ptm('tooltip')
-    })));
+    }, props.tooltipOptions)));
   }));
   Checkbox.displayName = 'Checkbox';
 
@@ -621,7 +590,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         var content = /*#__PURE__*/React__namespace.createElement("div", filterContainerProps, /*#__PURE__*/React__namespace.createElement(inputtext.InputText, {
           ref: props.filterRef,
           type: "text",
-          role: "textbox",
+          role: "searchbox",
           value: props.filterValue,
           onChange: onFilter,
           className: "p-multiselect-filter",
@@ -721,7 +690,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       setFocusedState = _React$useState2[1];
     var mergeProps = hooks.useMergeProps();
     var ptm = props.ptm,
-      cx = props.cx;
+      cx = props.cx,
+      isUnstyled = props.isUnstyled;
     var getPTOptions = function getPTOptions(key) {
       return ptm(key, {
         hostName: props.hostName,
@@ -759,12 +729,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     var checkboxContainerProps = mergeProps({
       className: cx('checkboxContainer')
     }, getPTOptions('checkboxContainer'));
-    var checkboxProps = mergeProps({
-      className: cx('checkbox', {
-        itemProps: props
-      }),
-      'data-p-highlight': props.selected
-    }, getPTOptions('checkbox'));
     var itemProps = mergeProps({
       className: utils.classNames(props.className, props.option.className, cx('item', {
         itemProps: props
@@ -779,7 +743,12 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       'data-p-highlight': props.selected,
       'data-p-disabled': props.disabled
     }, getPTOptions('item'));
-    return /*#__PURE__*/React__namespace.createElement("li", itemProps, /*#__PURE__*/React__namespace.createElement("div", checkboxContainerProps, /*#__PURE__*/React__namespace.createElement("div", checkboxProps, checkboxIcon)), /*#__PURE__*/React__namespace.createElement("span", null, content), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    return /*#__PURE__*/React__namespace.createElement("li", itemProps, /*#__PURE__*/React__namespace.createElement("div", checkboxContainerProps, /*#__PURE__*/React__namespace.createElement(Checkbox, {
+      checked: props.selected,
+      icon: checkboxIcon,
+      pt: ptm('checkbox'),
+      unstyled: isUnstyled()
+    })), /*#__PURE__*/React__namespace.createElement("span", null, content), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
   });
   MultiSelectItem.displayName = 'MultiSelectItem';
 
@@ -885,6 +854,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
           disabled: disabled,
           className: props.itemClassName,
           checkboxIcon: props.checkboxIcon,
+          isUnstyled: isUnstyled,
           ptm: ptm,
           cx: cx
         });
@@ -943,6 +913,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
           disabled: disabled,
           className: props.itemClassName,
           checkboxIcon: props.checkboxIcon,
+          isUnstyled: isUnstyled,
           ptm: ptm,
           cx: cx
         });
@@ -1043,11 +1014,31 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         onExit: props.onExit,
         onExited: props.onExited
       }, getPTOptions('transition'));
+      var firstHiddenElementProps = mergeProps({
+        ref: props.firstHiddenFocusableElementOnOverlay,
+        role: 'presentation',
+        'aria-hidden': 'true',
+        className: 'p-hidden-accessible p-hidden-focusable',
+        tabIndex: '0',
+        onFocus: props.onFirstHiddenFocus,
+        'data-p-hidden-accessible': true,
+        'data-p-hidden-focusable': true
+      }, ptm('hiddenFirstFocusableEl'));
+      var lastHiddenElementProps = mergeProps({
+        ref: props.lastHiddenFocusableElementOnOverlay,
+        role: 'presentation',
+        'aria-hidden': 'true',
+        className: 'p-hidden-accessible p-hidden-focusable',
+        tabIndex: '0',
+        onFocus: props.onLastHiddenFocus,
+        'data-p-hidden-accessible': true,
+        'data-p-hidden-focusable': true
+      }, ptm('hiddenLastFocusableEl'));
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
         nodeRef: ref
       }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", _extends({
         ref: ref
-      }, panelProps), header, content, footer));
+      }, panelProps), /*#__PURE__*/React__namespace.createElement("span", firstHiddenElementProps), header, content, footer, /*#__PURE__*/React__namespace.createElement("span", lastHiddenElementProps)));
     };
     var element = createElement();
     if (props.inline) return element;
@@ -1193,7 +1184,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         }).map(function (option) {
           return getOptionValue(option);
         });
-        updateModel(event, value);
+        updateModel(event, value, value);
       }
     };
     var onOptionSelect = function onOptionSelect(event, option) {
@@ -1206,7 +1197,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       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);
+      updateModel(event, value, option);
       index !== -1 && setFocusedOptionIndex(index);
     };
     var onClick = function onClick(event) {
@@ -1253,7 +1244,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         if (focusedOptionIndex !== -1) {
           if (event.shiftKey) onOptionSelectRange(event, focusedOptionIndex);else onOptionSelect(event, visibleOptions[focusedOptionIndex]);
         }
-        hide();
       }
       event.preventDefault();
     };
@@ -1367,7 +1357,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
             }).map(function (option) {
               return getOptionValue(option);
             });
-            updateModel(event, value);
+            updateModel(event, value, value);
             event.preventDefault();
             break;
           }
@@ -1540,6 +1530,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         });
       });
     };
+    var isEquals = function isEquals(value1, value2) {
+      return utils.ObjectUtils.equals(value1, value2, equalityKey);
+    };
     var isSelected = function isSelected(option) {
       if (props.value) {
         var optionValue = getOptionValue(option);
@@ -1684,9 +1677,23 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       return isValidOption(option) && isSelected(option);
     };
     var findSelectedOptionIndex = function findSelectedOptionIndex() {
-      return hasSelectedOption ? visibleOptions === null || visibleOptions === void 0 ? void 0 : visibleOptions.findIndex(function (option) {
-        return isValidSelectedOption(option);
-      }) : -1;
+      if (hasSelectedOption()) {
+        var _loop = function _loop() {
+            var value = props.value[index];
+            var matchedOptionIndex = visibleOptions.findIndex(function (option) {
+              return isValidSelectedOption(option) && isEquals(value, getOptionValue(option));
+            });
+            if (matchedOptionIndex > -1) return {
+              v: matchedOptionIndex
+            };
+          },
+          _ret;
+        for (var index = props.value.length - 1; index >= 0; index--) {
+          _ret = _loop();
+          if (_ret) return _ret.v;
+        }
+      }
+      return -1;
     };
     var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
       var selectedIndex = findSelectedOptionIndex();
@@ -1814,6 +1821,12 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         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,
@@ -1821,17 +1834,17 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
               onClick: function onClick(e) {
                 return removeChip(e, val);
               }
-            }, ptm('removeTokenIcon'));
+            }, 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'));
+            }, ptm('token', context));
             var tokenLabelProps = mergeProps({
               key: label + i,
               className: cx('tokenLabel')
-            }, ptm('tokenLabel'));
+            }, ptm('tokenLabel', context));
             return /*#__PURE__*/React__namespace.createElement("div", _extends({}, tokenProps, {
               key: label
             }), /*#__PURE__*/React__namespace.createElement("span", tokenLabelProps, label), icon);
@@ -1970,7 +1983,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       onClick: onClick
     }), MultiSelectBase.getOtherProps(props), ptm('root'));
     var hiddenInputWrapperProps = mergeProps({
-      className: 'p-hidden-accessible'
+      className: 'p-hidden-accessible',
+      'data-p-hidden-accessible': true
     }, ptm('hiddenInputWrapper'));
     var inputProps = mergeProps(_objectSpread({
       ref: inputRef,
@@ -1980,34 +1994,14 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
-      role: 'listbox',
+      role: 'combobox',
       'aria-expanded': overlayVisibleState,
       disabled: props.disabled,
       tabIndex: !props.disabled ? props.tabIndex : -1
     }, ariaProps), ptm('input'));
-    var firstHiddenElementProps = mergeProps({
-      ref: firstHiddenFocusableElementOnOverlay,
-      role: 'presentation',
-      'aria-hidden': true,
-      className: 'p-hidden-accessible p-hidden-focusable',
-      tabIndex: '0',
-      onFocus: onFirstHiddenFocus,
-      'data-p-hidden-accessible': true,
-      'data-p-hidden-focusable': true
-    }, ptm('hiddenFirstFocusableEl'));
-    var lastHiddenElementProps = mergeProps({
-      ref: lastHiddenFocusableElementOnOverlay,
-      role: 'presentation',
-      'aria-hidden': true,
-      className: 'p-hidden-accessible p-hidden-focusable',
-      tabIndex: '0',
-      onFocus: onLastHiddenFocus,
-      'data-p-hidden-accessible': true,
-      'data-p-hidden-focusable': true
-    }, ptm('hiddenLastFocusableEl'));
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({}, inputProps, {
       readOnly: true
-    }))), !props.inline && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React__namespace.createElement("span", firstHiddenElementProps), /*#__PURE__*/React__namespace.createElement(MultiSelectPanel, _extends({
+    }))), !props.inline && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React__namespace.createElement(MultiSelectPanel, _extends({
       hostName: "MultiSelect",
       ref: overlayRef,
       visibleOptions: visibleOptions
@@ -2016,6 +2010,10 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       onOverlayHide: hide,
       filterValue: filterState,
       focusedOptionIndex: focusedOptionIndex,
+      onFirstHiddenFocus: onFirstHiddenFocus,
+      onLastHiddenFocus: onLastHiddenFocus,
+      firstHiddenFocusableElementOnOverlay: firstHiddenFocusableElementOnOverlay,
+      lastHiddenFocusableElementOnOverlay: lastHiddenFocusableElementOnOverlay,
       setFocusedOptionIndex: setFocusedOptionIndex,
       hasFilter: hasFilter,
       onFilterInputChange: onFilterInputChange,
@@ -2043,12 +2041,11 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       sx: sx,
       isUnstyled: isUnstyled,
       metaData: metaData
-    })), /*#__PURE__*/React__namespace.createElement("span", lastHiddenElementProps)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
-      content: props.tooltip
-    }, props.tooltipOptions, {
+      content: props.tooltip,
       pt: ptm('tooltip')
-    })));
+    }, props.tooltipOptions)));
   }));
   MultiSelect.displayName = 'MultiSelect';