primereact 10.5.0 → 10.5.2

package/multiselect/multiselect.esm.js

@@ -157,6 +157,7 @@ var classes$1 = {
     return 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': ObjectUtils.isNotEmpty(props.value),
@@ -216,24 +217,18 @@ var classes$1 = {
   },
   checkboxContainer: 'p-checkbox p-component',
   checkboxIcon: 'p-checkbox-icon p-c',
-  checkbox: function checkbox(_ref6) {
-    var props = _ref6.itemProps;
-    return 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
     };
@@ -269,9 +264,12 @@ var MultiSelectBase = ComponentBase.extend({
     inline: false,
     inputId: null,
     inputRef: null,
+    invalid: false,
     itemCheckboxIcon: null,
     itemClassName: null,
     itemTemplate: null,
+    loading: false,
+    loadingIcon: null,
     maxSelectedLabels: null,
     name: null,
     onBlur: null,
@@ -318,35 +316,26 @@ var MultiSelectBase = ComponentBase.extend({
   },
   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 classNames('p-checkbox-box', {
+      checked = _ref.checked;
+    return 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 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.extend({
   defaultProps: {
     __TYPE: 'Checkbox',
@@ -359,6 +348,7 @@ var CheckboxBase = ComponentBase.extend({
     id: null,
     inputId: null,
     inputRef: null,
+    invalid: false,
     name: null,
     onChange: null,
     onClick: null,
@@ -375,8 +365,7 @@ var CheckboxBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes,
-    styles: styles
+    classes: classes
   }
 });
 
@@ -386,15 +375,8 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = CheckboxBase.getProps(inProps, context);
-  var _React$useState = React.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
@@ -404,20 +386,19 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     cx = _CheckboxBase$setMeta.cx,
     isUnstyled = _CheckboxBase$setMeta.isUnstyled;
   useHandleStyle(CheckboxBase.css.styles, isUnstyled, {
-    name: 'checkbox',
-    styled: true
+    name: 'checkbox'
   });
   var elementRef = React.useRef(null);
   var inputRef = React.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,
@@ -437,33 +418,22 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
           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);
-      }
       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.useImperativeHandle(ref, function () {
     return {
@@ -493,71 +463,70 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var checked = isChecked();
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
   var otherProps = CheckboxBase.getOtherProps(props);
-  var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
-  var iconProps = mergeProps({
-    className: cx('icon')
-  }, ptm('icon'));
-  var icon = checked ? props.icon || /*#__PURE__*/React.createElement(CheckIcon, iconProps) : null;
-  var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$4({}, iconProps), {
-    props: props,
-    checked: checked
-  });
   var rootProps = mergeProps({
     id: props.id,
     className: 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 = ObjectUtils.reduceKeys(otherProps, 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.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.createElement(CheckIcon, iconProps) : null;
+    var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$4({}, iconProps), {
+      props: props,
+      checked: checked
+    });
+    return /*#__PURE__*/React.createElement("div", boxProps, checkboxIcon);
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     ref: elementRef
-  }, rootProps), /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputRef
-  }, hiddenInputProps))), /*#__PURE__*/React.createElement("div", inputProps, checkboxIcon)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }, rootProps), createInputElement(), createBoxElement()), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
-    content: props.tooltip
-  }, props.tooltipOptions, {
+    content: props.tooltip,
     pt: ptm('tooltip')
-  })));
+  }, props.tooltipOptions)));
 }));
 Checkbox.displayName = 'Checkbox';
 
@@ -614,7 +583,7 @@ var MultiSelectHeader = /*#__PURE__*/React.memo(function (props) {
       var content = /*#__PURE__*/React.createElement("div", filterContainerProps, /*#__PURE__*/React.createElement(InputText, {
         ref: props.filterRef,
         type: "text",
-        role: "textbox",
+        role: "searchbox",
         value: props.filterValue,
         onChange: onFilter,
         className: "p-multiselect-filter",
@@ -714,7 +683,8 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
     setFocusedState = _React$useState2[1];
   var mergeProps = 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,
@@ -752,12 +722,6 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
   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: classNames(props.className, props.option.className, cx('item', {
       itemProps: props
@@ -772,7 +736,12 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
     'data-p-highlight': props.selected,
     'data-p-disabled': props.disabled
   }, getPTOptions('item'));
-  return /*#__PURE__*/React.createElement("li", itemProps, /*#__PURE__*/React.createElement("div", checkboxContainerProps, /*#__PURE__*/React.createElement("div", checkboxProps, checkboxIcon)), /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(Ripple, null));
+  return /*#__PURE__*/React.createElement("li", itemProps, /*#__PURE__*/React.createElement("div", checkboxContainerProps, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: props.selected,
+    icon: checkboxIcon,
+    pt: ptm('checkbox'),
+    unstyled: isUnstyled()
+  })), /*#__PURE__*/React.createElement("span", null, content), /*#__PURE__*/React.createElement(Ripple, null));
 });
 MultiSelectItem.displayName = 'MultiSelectItem';
 
@@ -878,6 +847,7 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
         disabled: disabled,
         className: props.itemClassName,
         checkboxIcon: props.checkboxIcon,
+        isUnstyled: isUnstyled,
         ptm: ptm,
         cx: cx
       });
@@ -936,6 +906,7 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
         disabled: disabled,
         className: props.itemClassName,
         checkboxIcon: props.checkboxIcon,
+        isUnstyled: isUnstyled,
         ptm: ptm,
         cx: cx
       });
@@ -1036,11 +1007,31 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       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.createElement(CSSTransition, _extends({
       nodeRef: ref
     }, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
       ref: ref
-    }, panelProps), header, content, footer));
+    }, panelProps), /*#__PURE__*/React.createElement("span", firstHiddenElementProps), header, content, footer, /*#__PURE__*/React.createElement("span", lastHiddenElementProps)));
   };
   var element = createElement();
   if (props.inline) return element;
@@ -1186,7 +1177,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       }).map(function (option) {
         return getOptionValue(option);
       });
-      updateModel(event, value);
+      updateModel(event, value, value);
     }
   };
   var onOptionSelect = function onOptionSelect(event, option) {
@@ -1199,7 +1190,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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);
+    updateModel(event, value, option);
     index !== -1 && setFocusedOptionIndex(index);
   };
   var onClick = function onClick(event) {
@@ -1246,7 +1237,6 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       if (focusedOptionIndex !== -1) {
         if (event.shiftKey) onOptionSelectRange(event, focusedOptionIndex);else onOptionSelect(event, visibleOptions[focusedOptionIndex]);
       }
-      hide();
     }
     event.preventDefault();
   };
@@ -1360,7 +1350,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
           }).map(function (option) {
             return getOptionValue(option);
           });
-          updateModel(event, value);
+          updateModel(event, value, value);
           event.preventDefault();
           break;
         }
@@ -1533,6 +1523,9 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       });
     });
   };
+  var isEquals = function isEquals(value1, value2) {
+    return ObjectUtils.equals(value1, value2, equalityKey);
+  };
   var isSelected = function isSelected(option) {
     if (props.value) {
       var optionValue = getOptionValue(option);
@@ -1677,9 +1670,23 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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();
@@ -1807,6 +1814,12 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       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,
@@ -1814,17 +1827,17 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
             onClick: function onClick(e) {
               return removeChip(e, val);
             }
-          }, ptm('removeTokenIcon'));
+          }, 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'));
+          }, ptm('token', context));
           var tokenLabelProps = mergeProps({
             key: label + i,
             className: cx('tokenLabel')
-          }, ptm('tokenLabel'));
+          }, ptm('tokenLabel', context));
           return /*#__PURE__*/React.createElement("div", _extends({}, tokenProps, {
             key: label
           }), /*#__PURE__*/React.createElement("span", tokenLabelProps, label), icon);
@@ -1963,7 +1976,8 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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,
@@ -1973,34 +1987,14 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
     readOnly: true
-  }))), !props.inline && /*#__PURE__*/React.createElement(React.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React.createElement("span", firstHiddenElementProps), /*#__PURE__*/React.createElement(MultiSelectPanel, _extends({
+  }))), !props.inline && /*#__PURE__*/React.createElement(React.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React.createElement(MultiSelectPanel, _extends({
     hostName: "MultiSelect",
     ref: overlayRef,
     visibleOptions: visibleOptions
@@ -2009,6 +2003,10 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     onOverlayHide: hide,
     filterValue: filterState,
     focusedOptionIndex: focusedOptionIndex,
+    onFirstHiddenFocus: onFirstHiddenFocus,
+    onLastHiddenFocus: onLastHiddenFocus,
+    firstHiddenFocusableElementOnOverlay: firstHiddenFocusableElementOnOverlay,
+    lastHiddenFocusableElementOnOverlay: lastHiddenFocusableElementOnOverlay,
     setFocusedOptionIndex: setFocusedOptionIndex,
     hasFilter: hasFilter,
     onFilterInputChange: onFilterInputChange,
@@ -2036,12 +2034,11 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     sx: sx,
     isUnstyled: isUnstyled,
     metaData: metaData
-  })), /*#__PURE__*/React.createElement("span", lastHiddenElementProps)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  }))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
-    content: props.tooltip
-  }, props.tooltipOptions, {
+    content: props.tooltip,
     pt: ptm('tooltip')
-  })));
+  }, props.tooltipOptions)));
 }));
 MultiSelect.displayName = 'MultiSelect';