primereact 10.4.0 → 10.5.1

package/multiselect/multiselect.js

@@ -112,6 +112,10 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
   }
 
+  function _readOnlyError(name) {
+    throw new TypeError("\"" + name + "\" is read-only");
+  }
+
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
@@ -213,7 +217,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       var props = _ref5.itemProps;
       return utils.classNames('p-multiselect-item', {
         'p-highlight': props.selected,
-        'p-disabled': props.disabled
+        'p-disabled': props.disabled,
+        'p-focus': props.focusedOptionIndex === props.index
       });
     },
     checkboxContainer: 'p-checkbox p-component',
@@ -226,7 +231,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     },
     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    }\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    }\n    \n    .p-fluid .p-multiselect {\n        display: flex;\n    }\n}\n";
+  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 inlineStyles = {
     root: function root(_ref7) {
       var props = _ref7.props;
@@ -260,6 +265,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       filterBy: null,
       filterInputAutoFocus: true,
       filterLocale: undefined,
+      selectOnFocus: false,
+      autoOptionFocus: false,
       filterMatchMode: 'contains',
       filterPlaceholder: null,
       filterTemplate: null,
@@ -272,6 +279,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       itemCheckboxIcon: null,
       itemClassName: null,
       itemTemplate: null,
+      loading: false,
       maxSelectedLabels: null,
       name: null,
       onBlur: null,
@@ -512,6 +520,8 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       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'));
@@ -552,10 +562,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       ref: inputRef
     }, hiddenInputProps))), /*#__PURE__*/React__namespace.createElement("div", inputProps, checkboxIcon)), 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';
 
@@ -719,7 +728,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         context: {
           selected: props.selected,
           disabled: props.disabled,
-          focused: focusedState
+          focused: focusedState,
+          focusedIndex: props.focusedIndex,
+          index: props.index
         }
       });
     };
@@ -731,22 +742,11 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     };
     var onClick = function onClick(event) {
       if (props.onClick) {
-        props.onClick({
-          originalEvent: event,
-          option: props.option
-        });
+        props.onClick(event, props.option);
       }
       event.preventDefault();
       event.stopPropagation();
     };
-    var onKeyDown = function onKeyDown(event) {
-      if (props.onKeyDown) {
-        props.onKeyDown({
-          originalEvent: event,
-          option: props.option
-        });
-      }
-    };
     var checkboxIconProps = mergeProps({
       className: cx('checkboxIcon')
     }, getPTOptions('checkboxIcon'));
@@ -755,7 +755,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       selected: props.selected
     }) : null;
     var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props.option) : props.label;
-    var tabIndex = props.disabled ? null : props.tabIndex || 0;
+    var tabIndex = props.disabled ? -1 : props.tabIndex;
     var checkboxContainerProps = mergeProps({
       className: cx('checkboxContainer')
     }, getPTOptions('checkboxContainer'));
@@ -771,7 +771,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       })),
       style: props.style,
       onClick: onClick,
-      onKeyDown: onKeyDown,
       onFocus: onFocus,
       onBlur: onBlur,
       tabIndex: tabIndex,
@@ -873,14 +872,15 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         var selected = props.isSelected(option);
         return /*#__PURE__*/React__namespace.createElement(MultiSelectItem, {
           hostName: props.hostName,
+          index: j,
           key: optionKey,
+          focusedOptionIndex: props.focusedOptionIndex,
           label: optionLabel,
           option: option,
           style: style,
           template: props.itemTemplate,
           selected: selected,
           onClick: props.onOptionSelect,
-          onKeyDown: props.onOptionKeyDown,
           tabIndex: tabIndex,
           disabled: disabled,
           className: props.itemClassName,
@@ -931,13 +931,14 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         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,
-          onKeyDown: props.onOptionKeyDown,
           tabIndex: tabIndex,
           disabled: disabled,
           className: props.itemClassName,
@@ -1042,11 +1043,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;
@@ -1066,19 +1087,35 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     var mergeProps = hooks.useMergeProps();
     var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
     var props = MultiSelectBase.getProps(inProps, context);
-    var _React$useState = React__namespace.useState(''),
+    var _React$useState = React__namespace.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      filterState = _React$useState2[0],
-      setFilterState = _React$useState2[1];
+      focusedOptionIndex = _React$useState2[0],
+      setFocusedOptionIndex = _React$useState2[1];
     var _React$useState3 = React__namespace.useState(false),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      focusedState = _React$useState4[0],
-      setFocusedState = _React$useState4[1];
-    var _React$useState5 = React__namespace.useState(props.inline),
+      clicked = _React$useState4[0],
+      setClicked = _React$useState4[1];
+    var _React$useState5 = React__namespace.useState(''),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      overlayVisibleState = _React$useState6[0],
-      setOverlayVisibleState = _React$useState6[1];
+      filterState = _React$useState6[0],
+      setFilterState = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(-1),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      startRangeIndex = _React$useState8[0],
+      setStartRangeIndex = _React$useState8[1];
+    var _React$useState9 = React__namespace.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      focusedState = _React$useState10[0],
+      setFocusedState = _React$useState10[1];
+    var _React$useState11 = React__namespace.useState(props.inline),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      overlayVisibleState = _React$useState12[0],
+      setOverlayVisibleState = _React$useState12[1];
     var elementRef = React__namespace.useRef(null);
+    var searchValue = React__namespace.useRef(null);
+    var searchTimeout = React__namespace.useRef(null);
+    var firstHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
+    var lastHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
     var labelRef = React__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
@@ -1120,6 +1157,14 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
       bindOverlayListener = _useOverlayListener2[0],
       unbindOverlayListener = _useOverlayListener2[1];
+    var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
+      var focusableEl = event.relatedTarget === inputRef.current ? utils.DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
+      utils.DomHandler.focus(focusableEl);
+    };
+    var onLastHiddenFocus = function onLastHiddenFocus(event) {
+      var focusableEl = event.relatedTarget === inputRef.current ? utils.DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
+      utils.DomHandler.focus(focusableEl);
+    };
     var onPanelClick = function onPanelClick(event) {
       overlayservice.OverlayService.emit('overlay-click', {
         originalEvent: event,
@@ -1129,63 +1174,60 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     var allowOptionSelect = function allowOptionSelect() {
       return !props.selectionLimit || !props.value || props.value && props.value.length < props.selectionLimit;
     };
-    var onOptionSelect = function onOptionSelect(event) {
-      var originalEvent = event.originalEvent,
-        option = event.option;
-      if (props.disabled || isOptionDisabled(option)) {
-        return;
+    var findNextSelectedOptionIndex = function findNextSelectedOptionIndex(index) {
+      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) {
+        return isValidSelectedOption(option);
+      }) : -1;
+      return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
+    };
+    var findNearestSelectedOptionIndex = function findNearestSelectedOptionIndex(index) {
+      var firstCheckUp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var matchedOptionIndex = -1;
+      if (hasSelectedOption) {
+        if (firstCheckUp) {
+          matchedOptionIndex = findPrevSelectedOptionIndex(index);
+          matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex;
+        } else {
+          matchedOptionIndex = findNextSelectedOptionIndex(index);
+          matchedOptionIndex = matchedOptionIndex === -1 ? findPrevSelectedOptionIndex(index) : matchedOptionIndex;
+        }
       }
-      var optionValue = getOptionValue(option);
-      var isUsed = isOptionValueUsed(option);
-      var selected = isSelected(option);
-      var allowSelect = allowOptionSelect();
-      if (selected) {
-        updateModel(originalEvent, props.value.filter(function (val) {
-          return !utils.ObjectUtils.equals(isUsed ? val : getOptionValue(val), optionValue, equalityKey);
-        }), option);
-      } else if (allowSelect) {
-        updateModel(originalEvent, [].concat(_toConsumableArray(props.value || []), [optionValue]), option);
+      return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+    };
+    var onOptionSelectRange = function onOptionSelectRange(event) {
+      var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+      var end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+      start === -1 && (start = findNearestSelectedOptionIndex(end, true));
+      end === -1 && (end = findNearestSelectedOptionIndex(start));
+      if (start !== -1 && end !== -1) {
+        var rangeStart = Math.min(start, end);
+        var rangeEnd = Math.max(start, end);
+        var value = visibleOptions.slice(rangeStart, rangeEnd + 1).filter(function (option) {
+          return isValidOption(option);
+        }).map(function (option) {
+          return getOptionValue(option);
+        });
+        updateModel(event, value);
       }
     };
-    var onOptionKeyDown = function onOptionKeyDown(event) {
-      var originalEvent = event.originalEvent;
-      var listItem = originalEvent.currentTarget;
-      switch (originalEvent.which) {
-        //down
-        case 40:
-          var nextItem = findNextItem(listItem);
-          nextItem && nextItem.focus();
-          originalEvent.preventDefault();
-          break;
-
-        //up
-        case 38:
-          var prevItem = findPrevItem(listItem);
-          prevItem && prevItem.focus();
-          originalEvent.preventDefault();
-          break;
-
-        //enter and space
-        case 13:
-        case 32:
-          onOptionSelect(event);
-          originalEvent.preventDefault();
-          break;
-
-        //escape
-        case 27:
-          hide();
-          utils.DomHandler.focus(inputRef.current);
-          break;
+    var onOptionSelect = function onOptionSelect(event, option) {
+      var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+      if (props.disabled || isOptionDisabled(option)) {
+        return;
       }
-    };
-    var findNextItem = function findNextItem(item) {
-      var nextItem = item.nextElementSibling;
-      return nextItem ? utils.DomHandler.getAttribute(nextItem, 'data-p-disabled') === true || utils.DomHandler.getAttribute(nextItem, 'data-pc-section') === 'itemgroup' ? findNextItem(nextItem) : nextItem : null;
-    };
-    var findPrevItem = function findPrevItem(item) {
-      var prevItem = item.previousElementSibling;
-      return prevItem ? utils.DomHandler.getAttribute(prevItem, 'data-p-disabled') === true || utils.DomHandler.getAttribute(prevItem, 'data-pc-section') === 'itemgroup' ? findPrevItem(prevItem) : prevItem : null;
+      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)]);
+      updateModel(event, value);
+      index !== -1 && setFocusedOptionIndex(index);
     };
     var onClick = function onClick(event) {
       if (!props.inline && !props.disabled && !props.loading && !isPanelClicked(event) && utils.DomHandler.getAttribute(event.target, 'data-pc-section') !== 'removetokenicon' && !isClearClicked(event)) {
@@ -1193,42 +1235,169 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
         utils.DomHandler.focus(inputRef.current);
         event.preventDefault();
       }
+      setClicked(true);
+    };
+    var onArrowDownKey = function onArrowDownKey(event) {
+      if (!overlayVisibleState) {
+        show();
+        props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
+      } else {
+        var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clicked ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
+        if (event.shiftKey) {
+          onOptionSelectRange(event, startRangeIndex, optionIndex);
+        }
+        changeFocusedOptionIndex(event, optionIndex);
+      }
+      event.preventDefault();
+    };
+    var onArrowUpKey = function onArrowUpKey(event) {
+      var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (event.altKey && !pressedInInputText) {
+        if (focusedOptionIndex !== -1) {
+          onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+        }
+        overlayVisibleState && hide();
+        event.preventDefault();
+      } else {
+        var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clicked ? findLastOptionIndex() : findLastFocusedOptionIndex();
+        changeFocusedOptionIndex(event, optionIndex);
+        !overlayVisibleState && show();
+        event.preventDefault();
+      }
+    };
+    var onEnterKey = function onEnterKey(event) {
+      if (!overlayVisibleState) {
+        setFocusedOptionIndex(-1);
+        onArrowDownKey(event);
+      } else {
+        if (focusedOptionIndex !== -1) {
+          if (event.shiftKey) onOptionSelectRange(event, focusedOptionIndex);else onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+        }
+      }
+      event.preventDefault();
+    };
+    var onHomeKey = function onHomeKey(event) {
+      var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var currentTarget = event.currentTarget;
+      if (pressedInInputText) {
+        var len = currentTarget.value.length;
+        currentTarget.setSelectionRange(0, event.shiftKey ? len : 0);
+        setFocusedOptionIndex(-1);
+      } else {
+        var metaKey = event.metaKey || event.ctrlKey;
+        var optionIndex = findFirstOptionIndex();
+        if (event.shiftKey && metaKey) {
+          onOptionSelectRange(event, optionIndex, startRangeIndex);
+        }
+        changeFocusedOptionIndex(event, optionIndex);
+        !overlayVisibleState && show();
+      }
+      event.preventDefault();
+    };
+    var onEndKey = function onEndKey(event) {
+      var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var currentTarget = event.currentTarget;
+      if (pressedInInputText) {
+        var len = currentTarget.value.length;
+        currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len);
+        _readOnlyError("focusedOptionIndex");
+      } else {
+        var metaKey = event.metaKey || event.ctrlKey;
+        var optionIndex = findLastOptionIndex();
+        if (event.shiftKey && metaKey) {
+          onOptionSelectRange(event, startRangeIndex, optionIndex);
+        }
+        changeFocusedOptionIndex(event, optionIndex);
+        !overlayVisibleState && show();
+      }
+      event.preventDefault();
+    };
+    var onPageUpKey = function onPageUpKey(event) {
+      event.preventDefault();
+    };
+    var onPageDownKey = function onPageDownKey(event) {
+      event.preventDefault();
+    };
+    var onTabKey = function onTabKey(event) {
+      var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (!pressedInInputText) {
+        if (overlayVisibleState && hasFocusableElements()) {
+          utils.DomHandler.focus(event.shiftKey ? lastHiddenFocusableElementOnOverlay.current : firstHiddenFocusableElementOnOverlay.current);
+          event.preventDefault();
+        } else {
+          if (focusedOptionIndex !== -1) {
+            onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+          }
+          overlayVisibleState && hide(filter);
+        }
+      }
+    };
+    var onShiftKey = function onShiftKey() {
+      setStartRangeIndex(focusedOptionIndex);
     };
     var onKeyDown = function onKeyDown(event) {
-      switch (event.which) {
-        //down
-        case 40:
+      var metaKey = event.metaKey || event.ctrlKey;
+      switch (event.code) {
+        case 'ArrowUp':
           if (props.inline) break;
-          if (!overlayVisibleState && event.altKey) {
-            show();
-            event.preventDefault();
-          }
+          onArrowUpKey(event);
           break;
-
-        //space
-        case 32:
+        case 'ArrowDown':
+          if (props.inline) break;
+          onArrowDownKey(event);
+          break;
+        case 'Space':
+        case 'NumpadEnter':
+        case 'Enter':
+          if (props.inline) break;
+          onEnterKey(event);
+          break;
+        case 'Home':
           if (props.inline) break;
-          overlayVisibleState ? hide() : show();
+          onHomeKey(event);
           event.preventDefault();
           break;
-
-        //escape
-        case 27:
+        case 'End':
+          if (props.inline) break;
+          onEndKey(event);
+          event.preventDefault();
+          break;
+        case 'PageDown':
+          onPageDownKey(event);
+          break;
+        case 'PageUp':
+          onPageUpKey(event);
+          break;
+        case 'Escape':
           if (props.inline) break;
           hide();
           break;
-
-        //tab
-        case 9:
-          if (overlayVisibleState) {
-            var firstFocusableElement = utils.DomHandler.getFirstFocusableElement(overlayRef.current);
-            if (firstFocusableElement) {
-              firstFocusableElement.focus();
-              event.preventDefault();
-            }
+        case 'Tab':
+          onTabKey(event);
+          break;
+        case 'ShiftLeft':
+        case 'ShiftRight':
+          onShiftKey();
+          break;
+        default:
+          if (event.code === 'KeyA' && metaKey) {
+            var value = visibleOptions.filter(function (option) {
+              return isValidOption(option);
+            }).map(function (option) {
+              return getOptionValue(option);
+            });
+            updateModel(event, value);
+            event.preventDefault();
+            break;
+          }
+          if (!metaKey && utils.ObjectUtils.isPrintableCharacter(event.key)) {
+            !overlayVisibleState && show();
+            searchOptions(event);
+            event.preventDefault();
           }
           break;
       }
+      setClicked(false);
     };
     var onSelectAll = function onSelectAll(event) {
       if (props.onSelectAll) {
@@ -1314,9 +1483,13 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     };
     var show = function show() {
       setOverlayVisibleState(true);
+      setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : findSelectedOptionIndex());
+      utils.DomHandler.focus(inputRef.current);
     };
     var hide = function hide() {
+      setFocusedOptionIndex(-1);
       setOverlayVisibleState(false);
+      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']);
@@ -1386,6 +1559,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);
@@ -1510,6 +1686,114 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
     var isOptionValueUsed = function isOptionValueUsed(option) {
       return !props.useOptionAsValue && props.optionValue || option && option['value'] !== undefined;
     };
+    var isOptionGroup = function isOptionGroup(option) {
+      return props.optionGroupLabel && option.optionGroup && option.group;
+    };
+    var hasSelectedOption = function hasSelectedOption() {
+      return utils.ObjectUtils.isNotEmpty(props.value);
+    };
+    var hasFocusableElements = function hasFocusableElements() {
+      return utils.DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
+    };
+    var isOptionMatched = function isOptionMatched(option) {
+      var _getOptionLabel;
+      return isValidOption(option) && ((_getOptionLabel = getOptionLabel(option)) === null || _getOptionLabel === void 0 ? void 0 : _getOptionLabel.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale)));
+    };
+    var isValidOption = function isValidOption(option) {
+      return utils.ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
+    };
+    var isValidSelectedOption = function isValidSelectedOption(option) {
+      return isValidOption(option) && isSelected(option);
+    };
+    var findSelectedOptionIndex = function findSelectedOptionIndex() {
+      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();
+      return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
+    };
+    var findLastFocusedOptionIndex = function findLastFocusedOptionIndex() {
+      var selectedIndex = findSelectedOptionIndex();
+      return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex;
+    };
+    var findFirstOptionIndex = function findFirstOptionIndex() {
+      return visibleOptions.findIndex(function (option) {
+        return isValidOption(option);
+      });
+    };
+    var findLastOptionIndex = function findLastOptionIndex() {
+      return utils.ObjectUtils.findLastIndex(visibleOptions, function (option) {
+        return isValidOption(option);
+      });
+    };
+    var findNextOptionIndex = function findNextOptionIndex(index) {
+      var matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
+        return isValidOption(option);
+      }) : -1;
+      return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
+    };
+    var findPrevOptionIndex = function findPrevOptionIndex(index) {
+      var matchedOptionIndex = index > 0 ? utils.ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+        return isValidOption(option);
+      }) : -1;
+      return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+    };
+    var searchOptions = function searchOptions(event) {
+      searchValue.current = (searchValue.current || '') + event.key;
+      var optionIndex = -1;
+      if (utils.ObjectUtils.isNotEmpty(searchValue.current)) {
+        if (focusedOptionIndex !== -1) {
+          optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex(function (option) {
+            return isOptionMatched(option);
+          });
+          optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex(function (option) {
+            return isOptionMatched(option);
+          }) : optionIndex + focusedOptionIndex;
+        } else {
+          optionIndex = visibleOptions.findIndex(function (option) {
+            return isOptionMatched(option);
+          });
+        }
+        if (optionIndex === -1 && focusedOptionIndex === -1) {
+          optionIndex = findFirstFocusedOptionIndex();
+        }
+        if (optionIndex !== -1) {
+          changeFocusedOptionIndex(event, optionIndex);
+        }
+      }
+      if (searchTimeout.current) {
+        clearTimeout(searchTimeout.current);
+      }
+      searchTimeout.current = setTimeout(function () {
+        searchValue.current = '';
+        searchTimeout.current = null;
+      }, 500);
+    };
+    var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
+      if (focusedOptionIndex !== index) {
+        setFocusedOptionIndex(index);
+        scrollInView();
+        if (props.selectOnFocus) {
+          onOptionSelect(event, visibleOptions[index], false);
+        }
+      }
+    };
     var removeChip = function removeChip(event, item) {
       var value = props.value.filter(function (val) {
         return !utils.ObjectUtils.equals(val, item, equalityKey);
@@ -1566,6 +1850,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,
@@ -1573,17 +1863,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);
@@ -1650,6 +1940,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       setTimeout(function () {
         props.overlayVisible ? show() : hide();
       }, 100);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.overlayVisible]);
     hooks.useUpdateEffect(function () {
       if (overlayVisibleState && filterState && hasFilter) {
@@ -1721,7 +2012,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,
@@ -1734,7 +2026,7 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       role: 'listbox',
       'aria-expanded': overlayVisibleState,
       disabled: props.disabled,
-      tabIndex: props.tabIndex
+      tabIndex: !props.disabled ? props.tabIndex : -1
     }, ariaProps), ptm('input'));
     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
@@ -1746,6 +2038,12 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       onClick: onPanelClick,
       onOverlayHide: hide,
       filterValue: filterState,
+      focusedOptionIndex: focusedOptionIndex,
+      onFirstHiddenFocus: onFirstHiddenFocus,
+      onLastHiddenFocus: onLastHiddenFocus,
+      firstHiddenFocusableElementOnOverlay: firstHiddenFocusableElementOnOverlay,
+      lastHiddenFocusableElementOnOverlay: lastHiddenFocusableElementOnOverlay,
+      setFocusedOptionIndex: setFocusedOptionIndex,
       hasFilter: hasFilter,
       onFilterInputChange: onFilterInputChange,
       resetFilter: resetFilter,
@@ -1762,7 +2060,6 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       isAllSelected: isAllSelected,
       onOptionSelect: onOptionSelect,
       allowOptionSelect: allowOptionSelect,
-      onOptionKeyDown: onOptionKeyDown,
       "in": overlayVisibleState,
       onEnter: onOverlayEnter,
       onEntered: onOverlayEntered,
@@ -1775,10 +2072,9 @@ this.primereact.multiselect = (function (exports, React, PrimeReact, componentba
       metaData: metaData
     }))), 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';