primereact 10.4.0 → 10.5.0

package/primereact.all.cjs.js

@@ -2943,7 +2943,7 @@ function localeOption(key, locale) {
  * @param {any} options JSON options like { page: 2, user: "John", role: "Admin" }
  * @returns the ARIA label with replaced values
  */
-function ariaLabel$1(ariaKey, options) {
+function ariaLabel(ariaKey, options) {
   var _locale = PrimeReact$1.locale;
   try {
     var _ariaLabel = localeOptions(_locale)['aria'][ariaKey];
@@ -11842,11 +11842,14 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       }
       if (props.view === 'date') {
         overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
-        overlayRef.current.style.minWidth = inputWidth + 'px';
       } else {
-        overlayRef.current.style.minWidth = inputWidth + 'px';
         overlayRef.current.style.width = inputWidth + 'px';
       }
+
+      // #5830 Tailwind does not need a min width it breaks the styling
+      if (!isUnstyled()) {
+        overlayRef.current.style.minWidth = inputWidth + 'px';
+      }
     }
     alignOverlay();
   };
@@ -11897,7 +11900,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       if (isUnstyled) {
         destroyMask();
       } else {
-        DomHandler.addClass(touchUIMask.current, 'p-component-overlay-leave');
+        !isUnstyled() && DomHandler.addClass(touchUIMask.current, 'p-component-overlay-leave');
         touchUIMask.current.addEventListener('animationend', function () {
           destroyMask();
         });
@@ -12277,7 +12280,12 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       var isEnabled = props.enabledDates.some(function (d) {
         return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
       });
-      isDisabled = isDisabled ? !isEnabled : isEnabled;
+      if (isEnabled) {
+        isDisabled = false;
+      } else if (!props.disabledDays && !props.disabledDates) {
+        // disable other dates when only enabledDates are present
+        isDisabled = true;
+      }
     }
     return isDisabled;
   };
@@ -15702,6 +15710,8 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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'));
@@ -15886,22 +15896,29 @@ var styles$T = "\n@layer primereact {\n    .p-chips {\n        display: inline-f
 var classes$X = {
   removeTokenIcon: 'p-chips-token-icon',
   label: 'p-chips-token-label',
-  token: 'p-chips-token p-highlight',
+  token: function token(_ref) {
+    var focusedIndex = _ref.focusedIndex,
+      index = _ref.index;
+    return classNames('p-chips-token', {
+      'p-focus': focusedIndex === index
+    });
+  },
   inputToken: 'p-chips-input-token',
-  container: function container(_ref) {
-    var props = _ref.props,
-      focusedState = _ref.focusedState;
+  container: function container(_ref2) {
+    var isFilled = _ref2.isFilled;
     return classNames('p-inputtext p-chips-multiple-container', {
-      'p-disabled': props.disabled,
-      'p-focus': focusedState
+      'p-variant-filled': isFilled
     });
   },
-  root: function root(_ref2) {
-    var isFilled = _ref2.isFilled,
-      focusedState = _ref2.focusedState;
+  root: function root(_ref3) {
+    var isFilled = _ref3.isFilled,
+      focusedState = _ref3.focusedState,
+      disabled = _ref3.disabled;
     return classNames('p-chips p-component p-inputwrapper', {
       'p-inputwrapper-filled': isFilled,
-      'p-inputwrapper-focus': focusedState
+      'p-inputwrapper-focus': focusedState,
+      'p-disabled': disabled,
+      'p-focus': focusedState
     });
   }
 };
@@ -15954,6 +15971,10 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    focusedIndex = _React$useState4[0],
+    setFocusedIndex = _React$useState4[1];
   var _ChipsBase$setMetaDat = ChipsBase.setMetaData({
       props: props,
       state: {
@@ -16023,26 +16044,71 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
   var onWrapperClick = function onWrapperClick() {
     DomHandler.focus(inputRef.current);
   };
+  var onContainerKeyDown = function onContainerKeyDown(event) {
+    switch (event.code) {
+      case 'ArrowLeft':
+        onArrowLeftKeyOn();
+        break;
+      case 'ArrowRight':
+        onArrowRightKeyOn();
+        break;
+      case 'Backspace':
+        onBackspaceKeyOn(event);
+        break;
+    }
+  };
+  var onArrowLeftKeyOn = function onArrowLeftKeyOn() {
+    var focusIndex = focusedIndex;
+    if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
+      focusIndex = focusIndex === null ? props.value.length - 1 : focusIndex - 1;
+      if (focusIndex < 0) focusIndex = 0;
+    }
+    setFocusedIndex(focusIndex);
+  };
+  var onArrowRightKeyOn = function onArrowRightKeyOn() {
+    var focusIndex = focusedIndex;
+    if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
+      if (focusIndex === props.value.length - 1) {
+        focusIndex = null;
+        inputRef.current.focus();
+      } else {
+        focusIndex++;
+      }
+    }
+    setFocusedIndex(focusIndex);
+  };
+  var onBackspaceKeyOn = function onBackspaceKeyOn(event) {
+    if (focusedIndex !== null) {
+      removeItem(event, focusedIndex);
+    }
+  };
   var _onKeyDown = function onKeyDown(event) {
     var inputValue = event.target.value;
     var values = props.value || [];
     props.onKeyDown && props.onKeyDown(event);
-
-    // do not continue if the user defined keydown wants to prevent
     if (event.defaultPrevented) {
       return;
     }
-    switch (event.key) {
+    switch (event.code) {
       case 'Backspace':
-        if (inputRef.current.value.length === 0 && values.length > 0) {
+        if (inputValue.length === 0 && values.length > 0) {
           removeItem(event, values.length - 1);
         }
         break;
       case 'Enter':
+      case 'NumpadEnter':
         if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
           addItem(event, inputValue, true);
         }
         break;
+      case 'ArrowLeft':
+        if (inputValue.length === 0 && values && values.length > 0) {
+          DomHandler.focus(listRef.current);
+        }
+        break;
+      case 'ArrowRight':
+        event.stopPropagation();
+        break;
       default:
         if (props.keyfilter) {
           KeyFilter.onKeyPress(event, props.keyfilter);
@@ -16097,8 +16163,16 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
       }
     }
   };
+  var onContainerFocus = function onContainerFocus(event) {
+    setFocusedState(true);
+  };
+  var onContainerBlur = function onContainerBlur() {
+    setFocusedIndex(-1);
+    setFocusedState(false);
+  };
   var _onFocus = function onFocus(event) {
     setFocusedState(true);
+    setFocusedIndex(null);
     props.onFocus && props.onFocus(event);
   };
   var _onBlur = function onBlur(event) {
@@ -16148,6 +16222,9 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
       DomHandler.focus(inputRef.current, props.autoFocus);
     }
   });
+  var focusedOptionId = function focusedOptionId() {
+    return focusedIndex !== null ? "".concat(props.inputId, "_chips_item_").concat(focusedIndex) : null;
+  };
   var createRemoveIcon = function createRemoveIcon(value, index) {
     var iconProps = mergeProps({
       className: cx('removeTokenIcon'),
@@ -16173,9 +16250,19 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     var label = /*#__PURE__*/React__namespace.createElement("span", labelProps, content);
     var icon = createRemoveIcon(value, index);
     var tokenProps = mergeProps({
-      key: index,
-      className: cx('token'),
-      'data-p-highlight': true
+      key: "".concat(index, "_").concat(value),
+      id: props.inputId + '_chips_item_' + index,
+      role: 'option',
+      'aria-label': value,
+      className: cx('token', {
+        focusedIndex: focusedIndex,
+        index: index
+      }),
+      'aria-selected': true,
+      'aria-setsize': props.value.length,
+      'aria-posinset': index + 1,
+      'data-p-highlight': true,
+      'data-p-focused': focusedIndex === index
     }, ptm('token'));
     return /*#__PURE__*/React__namespace.createElement("li", tokenProps, label, icon);
   };
@@ -16215,13 +16302,24 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     var containerProps = mergeProps({
       ref: listRef,
       className: cx('container', {
-        focusedState: focusedState
+        isFilled: isFilled
       }),
       onClick: function onClick(e) {
         return onWrapperClick();
       },
+      onKeyDown: function onKeyDown(e) {
+        return onContainerKeyDown(e);
+      },
+      tabIndex: -1,
+      role: 'listbox',
+      'aria-orientation': 'horizontal',
+      'aria-labelledby': props.ariaLabelledby,
+      'aria-label': props.ariaLabel,
+      'aria-activedescendant': focusedState ? focusedOptionId() : undefined,
       'data-p-disabled': props.disabled,
-      'data-p-focus': focusedState
+      'data-p-focus': focusedState,
+      onFocus: onContainerFocus,
+      onBlur: onContainerBlur
     }, ptm('container'));
     return /*#__PURE__*/React__namespace.createElement("ul", containerProps, items, input);
   };
@@ -16234,7 +16332,8 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     ref: elementRef,
     className: classNames(props.className, cx('root', {
       isFilled: isFilled,
-      focusedState: focusedState
+      focusedState: focusedState,
+      disabled: props.disabled
     })),
     style: props.style
   }, ptm('root'));
@@ -20055,7 +20154,7 @@ var FirstPageLink = /*#__PURE__*/React__namespace.memo(function (inProps) {
     }),
     onClick: props.onClick,
     disabled: props.disabled,
-    'aria-label': ariaLabel$1('firstPageLabel')
+    'aria-label': ariaLabel('firstPageLabel')
   }, getPTOptions('firstPageButton'));
   var element = /*#__PURE__*/React__namespace.createElement("button", firstPageButtonProps, firstPageLinkIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null));
   if (props.template) {
@@ -20465,36 +20564,36 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     if (event.altKey) {
       event.preventDefault();
     }
-    switch (event.which) {
+    switch (event.code) {
       //up
-      case 38:
+      case 'ArrowUp':
         spin(event, 1);
         event.preventDefault();
         break;
 
       //down
-      case 40:
+      case 'ArrowDown':
         spin(event, -1);
         event.preventDefault();
         break;
 
       //left
-      case 37:
+      case 'ArrowLeft':
         if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) {
           event.preventDefault();
         }
         break;
 
       //right
-      case 39:
+      case 'ArrowRight':
         if (!isNumeralChar(inputValue.charAt(selectionStart))) {
           event.preventDefault();
         }
         break;
 
       //enter and tab
-      case 13:
-      case 9:
+      case 'Tab':
+      case 'Enter':
         newValueStr = validateValue(parseValue(inputValue));
         inputRef.current.value = formatValue(newValueStr);
         inputRef.current.setAttribute('aria-valuenow', newValueStr);
@@ -20502,7 +20601,7 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
         break;
 
       //backspace
-      case 8:
+      case 'Backspace':
         event.preventDefault();
         if (selectionStart === selectionEnd) {
           var deleteChar = inputValue.charAt(selectionStart - 1);
@@ -20546,7 +20645,7 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
         break;
 
       // del
-      case 46:
+      case 'Delete':
         event.preventDefault();
         if (selectionStart === selectionEnd) {
           var _deleteChar = inputValue.charAt(selectionStart);
@@ -20581,14 +20680,18 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
           updateValue(event, newValueStr, null, 'delete-range');
         }
         break;
-
-      // End
-      case 35:
-      // Home/Pos1
-      case 36:
-        setTimeout(function () {
-          initCursor();
-        });
+      case 'End':
+        event.preventDefault();
+        if (!ObjectUtils.isEmpty(props.max)) {
+          updateModel(event, props.max);
+        }
+        break;
+      case 'Home':
+        event.preventDefault();
+        if (!ObjectUtils.isEmpty(props.min)) {
+          updateModel(event, props.min);
+        }
+        break;
     }
   };
   var onInputKeyUp = function onInputKeyUp(event) {
@@ -21249,7 +21352,7 @@ var JumpToPageInput = /*#__PURE__*/React__namespace.memo(function (inProps) {
       onChange: onChange,
       disabled: props.disabled,
       className: 'p-paginator-page-input',
-      ariaLabel: ariaLabelValue,
+      'aria-label': ariaLabelValue,
       element: element,
       props: props
     };
@@ -21293,7 +21396,7 @@ var LastPageLink = /*#__PURE__*/React__namespace.memo(function (inProps) {
     }),
     onClick: props.onClick,
     disabled: props.disabled,
-    'aria-label': ariaLabel$1('lastPageLabel')
+    'aria-label': ariaLabel('lastPageLabel')
   }, getPTOptions('lastPageButton'));
   var element = /*#__PURE__*/React__namespace.createElement("button", lastPageButtonProps, lastPageLinkIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null));
   if (props.template) {
@@ -21345,7 +21448,7 @@ var NextPageLink = /*#__PURE__*/React__namespace.memo(function (inProps) {
     }),
     onClick: props.onClick,
     disabled: props.disabled,
-    'aria-label': ariaLabel$1('nextPageLabel')
+    'aria-label': ariaLabel('nextPageLabel')
   }, getPTOptions('nextPageButton'));
   var element = /*#__PURE__*/React__namespace.createElement("button", nextPageButtonProps, nextPageLinkIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null));
   if (props.template) {
@@ -21409,7 +21512,7 @@ var PageLinks = /*#__PURE__*/React__namespace.memo(function (inProps) {
           page: props.page
         }),
         disabled: props.disabled,
-        'aria-label': ariaLabel$1('pageLabel', {
+        'aria-label': ariaLabel('pageLabel', {
           page: pageLink
         }),
         'aria-current': pageLink - 1 === props.page ? 'true' : undefined
@@ -21428,7 +21531,7 @@ var PageLinks = /*#__PURE__*/React__namespace.memo(function (inProps) {
           page: pageLink - 1,
           currentPage: props.page,
           totalPages: props.pageCount,
-          ariaLabel: ariaLabel$1('pageLabel', {
+          ariaLabel: ariaLabel('pageLabel', {
             page: pageLink
           }),
           ariaCurrent: pageLink - 1 === props.page ? 'true' : undefined,
@@ -21485,7 +21588,7 @@ var PrevPageLink = /*#__PURE__*/React__namespace.memo(function (inProps) {
     }),
     onClick: props.onClick,
     disabled: props.disabled,
-    'aria-label': ariaLabel$1('previousPageLabel')
+    'aria-label': ariaLabel('previousPageLabel')
   }, getPTOptions('prevPageButton'));
   var element = /*#__PURE__*/React__namespace.createElement("button", prevPageButtonProps, prevPageLinkIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null));
   if (props.template) {
@@ -21558,10 +21661,13 @@ var classes$O = {
   item: function item(_ref7) {
     var selected = _ref7.selected,
       disabled = _ref7.disabled,
-      label = _ref7.label;
+      label = _ref7.label,
+      index = _ref7.index,
+      focusedOptionIndex = _ref7.focusedOptionIndex;
     return classNames('p-dropdown-item', {
       'p-highlight': selected,
       'p-disabled': disabled,
+      'p-focus': index === focusedOptionIndex,
       'p-dropdown-item-empty': !label || label.length === 0
     });
   },
@@ -21628,6 +21734,8 @@ var DropdownBase = ComponentBase.extend({
     onShow: null,
     optionDisabled: null,
     optionGroupChildren: 'items',
+    selectOnFocus: false,
+    autoOptionFocus: false,
     optionGroupLabel: null,
     optionGroupTemplate: null,
     optionLabel: null,
@@ -21666,7 +21774,9 @@ var DropdownItem = /*#__PURE__*/React__namespace.memo(function (props) {
     selected = props.selected,
     disabled = props.disabled,
     option = props.option,
-    label = props.label;
+    label = props.label,
+    index = props.index,
+    focusedOptionIndex = props.focusedOptionIndex;
   var getPTOptions = function getPTOptions(key) {
     return ptm(key, {
       context: {
@@ -21675,7 +21785,7 @@ var DropdownItem = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     });
   };
-  var _onClick = function onClick(event) {
+  var _onClick = function onClick(event, i) {
     if (props.onClick) {
       props.onClick({
         originalEvent: event,
@@ -21690,7 +21800,9 @@ var DropdownItem = /*#__PURE__*/React__namespace.memo(function (props) {
     className: classNames(option.className, cx('item', {
       selected: selected,
       disabled: disabled,
-      label: label
+      label: label,
+      index: index,
+      focusedOptionIndex: focusedOptionIndex
     })),
     style: props.style,
     onClick: function onClick(e) {
@@ -21699,6 +21811,7 @@ var DropdownItem = /*#__PURE__*/React__namespace.memo(function (props) {
     'aria-label': label,
     'aria-selected': selected,
     'data-p-highlight': selected,
+    'data-p-focused': focusedOptionIndex === index,
     'data-p-disabled': disabled
   }, getPTOptions('item'));
   return /*#__PURE__*/React__namespace.createElement("li", itemProps, content, /*#__PURE__*/React__namespace.createElement(Ripple, null));
@@ -21770,6 +21883,8 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
       var disabled = props.isOptionDisabled(option);
       return /*#__PURE__*/React__namespace.createElement(DropdownItem, {
         key: optionKey,
+        index: j,
+        focusedOptionIndex: props.focusedOptionIndex,
         label: optionLabel,
         option: option,
         style: style,
@@ -21817,6 +21932,8 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
       return /*#__PURE__*/React__namespace.createElement(DropdownItem, {
         key: optionKey,
         label: optionLabel,
+        index: index,
+        focusedOptionIndex: props.focusedOptionIndex,
         option: option,
         style: style,
         template: props.itemTemplate,
@@ -22009,20 +22126,30 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     setFilterState = _React$useState2[1];
   var _React$useState3 = React__namespace.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    focusedState = _React$useState4[0],
-    setFocusedState = _React$useState4[1];
+    clicked = _React$useState4[0],
+    setClicked = _React$useState4[1];
   var _React$useState5 = React__namespace.useState(false),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    overlayVisibleState = _React$useState6[0],
-    setOverlayVisibleState = _React$useState6[1];
+    focusedState = _React$useState6[0],
+    setFocusedState = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    focusedOptionIndex = _React$useState8[0],
+    setFocusedOptionIndex = _React$useState8[1];
+  var _React$useState9 = React__namespace.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    overlayVisibleState = _React$useState10[0],
+    setOverlayVisibleState = _React$useState10[1];
   var elementRef = React__namespace.useRef(null);
   var overlayRef = React__namespace.useRef(null);
+  var firstHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
+  var lastHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
   var inputRef = React__namespace.useRef(props.inputRef);
   var focusInputRef = React__namespace.useRef(props.focusInputRef);
   var virtualScrollerRef = React__namespace.useRef(null);
   var searchTimeout = React__namespace.useRef(null);
   var searchValue = React__namespace.useRef(null);
-  var currentSearchChar = React__namespace.useRef(null);
+  React__namespace.useRef(null);
   var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
   var hasFilter = ObjectUtils.isNotEmpty(filterState);
   var appendTo = props.appendTo || context && context.appendTo || PrimeReact.appendTo;
@@ -22086,6 +22213,14 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       return props.options;
     }
   };
+  var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
+    var focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+    DomHandler.focus(focusableEl);
+  };
+  var onLastHiddenFocus = function onLastHiddenFocus(event) {
+    var focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+    DomHandler.focus(focusableEl);
+  };
   var isClearClicked = function isClearClicked(event) {
     return DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'clearicon') || DomHandler.isAttributeEquals(event.target.parentElement || event.target, 'data-pc-section', 'filterclearicon');
   };
@@ -22105,6 +22240,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       DomHandler.focus(focusInputRef.current);
       overlayVisibleState ? hide() : show();
     }
+    setClicked(true);
   };
   var onInputFocus = function onInputFocus(event) {
     if (props.showOnFocus && !overlayVisibleState) {
@@ -22136,6 +22272,15 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       }, 200);
     }
   };
+  var onOptionSelect = function onOptionSelect(event, option) {
+    var isHide = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var value = getOptionValue(option);
+    selectItem({
+      originalEvent: event,
+      option: value
+    });
+    isHide && hide();
+  };
   var onPanelClick = function onPanelClick(event) {
     OverlayService.emit('overlay-click', {
       originalEvent: event,
@@ -22143,189 +22288,285 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     });
   };
   var onInputKeyDown = function onInputKeyDown(event) {
+    if (props.disabled || DomHandler.isAndroid()) {
+      event.preventDefault();
+      return;
+    }
+    var metaKey = event.metaKey || event.ctrlKey;
     switch (event.code) {
       case 'ArrowDown':
-        onDownKey(event);
+        onArrowDownKey(event);
         break;
       case 'ArrowUp':
-        onUpKey(event);
+        onArrowUpKey(event);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        onArrowLeftKey(event, props.editable);
+        break;
+      case 'Home':
+        onHomeKey(event);
+        break;
+      case 'End':
+        onEndKey(event);
+        break;
+      case 'PageDown':
+        onPageDownKey(event);
+        break;
+      case 'PageUp':
+        onPageUpKey(event);
         break;
       case 'Space':
+        onSpaceKey(event, props.editable);
+        break;
+      case 'NumpadEnter':
       case 'Enter':
-        overlayVisibleState ? hide() : show();
-        event.preventDefault();
+        onEnterKey(event);
         break;
       case 'Escape':
+        onEscapeKey(event);
+        break;
       case 'Tab':
-        hide();
+        onTabKey(event);
+        break;
+      case 'Backspace':
+        onBackspaceKey(event, props.editable);
+        break;
+      case 'ShiftLeft':
+      case 'ShiftRight':
+        //NOOP
         break;
       default:
-        search(event);
+        if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+          !overlayVisibleState && show();
+          !props.editable && searchOptions(event, event.key);
+        }
         break;
     }
+    setClicked(false);
   };
   var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
     switch (event.code) {
       case 'ArrowDown':
-        onDownKey(event);
+        onArrowDownKey(event);
         break;
       case 'ArrowUp':
-        onUpKey(event);
+        onArrowUpKey(event);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        onArrowLeftKey(event, true);
         break;
       case 'Escape':
       case 'Enter':
-        hide();
+        onEnterKey(event);
         event.preventDefault();
         break;
     }
   };
-  var onUpKey = function onUpKey(event) {
-    if (visibleOptions) {
-      var prevOption = findPrevOption(getSelectedOptionIndex());
-      if (prevOption) {
-        selectItem({
-          originalEvent: event,
-          option: prevOption
-        });
-      }
-    }
-    event.preventDefault();
+  var hasFocusableElements = function hasFocusableElements() {
+    return DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
   };
-  var onDownKey = function onDownKey(event) {
-    if (visibleOptions) {
-      if (!overlayVisibleState && event.altKey) {
-        show();
-      } else {
-        var nextOption = findNextOption(getSelectedOptionIndex());
-        if (nextOption) {
-          selectItem({
-            originalEvent: event,
-            option: nextOption
-          });
-        }
-      }
-    }
-    event.preventDefault();
+  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 findNextOption = function findNextOption(index) {
-    if (props.optionGroupLabel) {
-      var groupIndex = index === -1 ? 0 : index.group;
-      var optionIndex = index === -1 ? -1 : index.option;
-      var option = findNextOptionInList(getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
-      if (option) return option;else if (groupIndex + 1 !== visibleOptions.length) return findNextOption({
-        group: groupIndex + 1,
-        option: -1
-      });else return null;
-    }
-    return findNextOptionInList(visibleOptions, index);
-  };
-  var findNextOptionInList = function findNextOptionInList(list, index) {
-    var i = index + 1;
-    if (i === list.length) {
-      return null;
-    }
-    var option = list[i];
-    return isOptionDisabled(option) ? findNextOptionInList(i) : option;
+  var isValidOption = function isValidOption(option) {
+    return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
   };
-  var findPrevOption = function findPrevOption(index) {
-    if (index === -1) {
-      return null;
-    }
-    if (props.optionGroupLabel) {
-      var groupIndex = index.group;
-      var optionIndex = index.option;
-      var option = findPrevOptionInList(getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
-      if (option) return option;else if (groupIndex > 0) return findPrevOption({
-        group: groupIndex - 1,
-        option: getOptionGroupChildren(visibleOptions[groupIndex - 1]).length
-      });else return null;
-    }
-    return findPrevOptionInList(visibleOptions, index);
-  };
-  var findPrevOptionInList = function findPrevOptionInList(list, index) {
-    var i = index - 1;
-    if (i < 0) {
-      return null;
-    }
-    var option = list[i];
-    return isOptionDisabled(option) ? findPrevOption(i) : option;
+  var hasSelectedOption = function hasSelectedOption() {
+    return ObjectUtils.isNotEmpty(props.value);
+  };
+  var isValidSelectedOption = function isValidSelectedOption(option) {
+    return isValidOption(option) && isSelected(option);
+  };
+  var findSelectedOptionIndex = function findSelectedOptionIndex() {
+    return hasSelectedOption ? visibleOptions.findIndex(function (option) {
+      return isValidSelectedOption(option);
+    }) : -1;
+  };
+  var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
+    var selectedIndex = findSelectedOptionIndex();
+    return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
   };
-  var search = function search(event) {
+  var searchOptions = function searchOptions(event, _char) {
+    searchValue.current = (searchValue.current || '') + _char;
+    var optionIndex = -1;
+    var matched = false;
+    if (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) {
+        matched = true;
+      }
+      if (optionIndex === -1 && focusedOptionIndex === -1) {
+        optionIndex = findFirstFocusedOptionIndex();
+      }
+      if (optionIndex !== -1) {
+        changeFocusedOptionIndex(event, optionIndex);
+      }
+    }
     if (searchTimeout.current) {
       clearTimeout(searchTimeout.current);
     }
-    if (event.ctrlKey || event.metaKey || event.altKey) {
-      // ignore meta combinations like CTRL+F for browser search
-      return;
+    searchTimeout.current = setTimeout(function () {
+      searchValue.current = '';
+      searchTimeout.current = null;
+    }, 500);
+    return matched;
+  };
+  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 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 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+      return isValidOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+  };
+  var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
+    if (focusedOptionIndex !== index) {
+      setFocusedOptionIndex(index);
+      if (props.selectOnFocus) {
+        onOptionSelect(event, visibleOptions[index], false);
+      }
     }
-    var _char = event.key;
-    if (_char.length !== 1) {
-      // only single character keys matter for searching
-      return;
+  };
+  var onArrowDownKey = function onArrowDownKey(event) {
+    if (!overlayVisibleState) {
+      show();
+      props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
+    } else {
+      var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clicked ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
+      changeFocusedOptionIndex(event, optionIndex);
     }
-    if (currentSearchChar.current === _char) searchValue.current = _char;else searchValue.current = searchValue.current ? searchValue.current + _char : _char;
-    currentSearchChar.current = _char;
-    if (searchValue.current) {
-      var searchIndex = getSelectedOptionIndex();
-      var newOption = props.optionGroupLabel ? searchOptionInGroup(searchIndex) : searchOption(searchIndex + 1);
-      if (newOption) {
-        selectItem({
-          originalEvent: event,
-          option: newOption
-        });
+    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]);
       }
+      state.overlayVisible && hide();
+      event.preventDefault();
+    } else {
+      var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clicked ? findLastOptionIndex() : findLastFocusedOptionIndex();
+      changeFocusedOptionIndex(event, optionIndex);
+      !overlayVisibleState && show();
+      event.preventDefault();
     }
-    searchTimeout.current = setTimeout(function () {
-      searchValue.current = null;
-    }, 250);
   };
-  var searchOption = function searchOption(index) {
-    if (searchValue.current) {
-      return searchOptionInRange(index, visibleOptions.length) || searchOptionInRange(0, index);
+  var onArrowLeftKey = function onArrowLeftKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    pressedInInputText && setFocusedOptionIndex(-1);
+  };
+  var onHomeKey = function onHomeKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (pressedInInputText) {
+      event.currentTarget.setSelectionRange(0, 0);
+      setFocusedOptionIndex(-1);
+    } else {
+      changeFocusedOptionIndex(event, findFirstOptionIndex());
+      !overlayVisibleState && show();
     }
-    return null;
+    event.preventDefault();
   };
-  var searchOptionInRange = function searchOptionInRange(start, end) {
-    for (var i = start; i < end; i++) {
-      var opt = visibleOptions[i];
-      if (matchesSearchValue(opt)) {
-        return opt;
-      }
+  var onEndKey = function onEndKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (pressedInInputText) {
+      var target = event.currentTarget;
+      var len = target.value.length;
+      target.setSelectionRange(len, len);
+      setFocusedOptionIndex(-1);
+    } else {
+      changeFocusedOptionIndex(event, findLastOptionIndex());
+      !overlayVisibleState && show();
     }
-    return null;
+    event.preventDefault();
   };
-  var searchOptionInGroup = function searchOptionInGroup(index) {
-    var searchIndex = index === -1 ? {
-      group: 0,
-      option: -1
-    } : index;
-    for (var i = searchIndex.group; i < visibleOptions.length; i++) {
-      var groupOptions = getOptionGroupChildren(visibleOptions[i]);
-      for (var j = searchIndex.group === i ? searchIndex.option + 1 : 0; j < groupOptions.length; j++) {
-        if (matchesSearchValue(groupOptions[j])) {
-          return groupOptions[j];
-        }
+  var onPageUpKey = function onPageUpKey(event) {
+    event.preventDefault();
+  };
+  var onPageDownKey = function onPageDownKey(event) {
+    event.preventDefault();
+  };
+  var onSpaceKey = function onSpaceKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    !pressedInInputText && onEnterKey(event);
+  };
+  var onEnterKey = function onEnterKey(event) {
+    if (!overlayVisibleState) {
+      setFocusedOptionIndex(-1);
+      onArrowDownKey(event);
+    } else {
+      if (focusedOptionIndex !== -1) {
+        onOptionSelect(event, visibleOptions[focusedOptionIndex]);
       }
+      hide();
     }
-    for (var _i = 0; _i <= searchIndex.group; _i++) {
-      var _groupOptions = getOptionGroupChildren(visibleOptions[_i]);
-      for (var _j = 0; _j < (searchIndex.group === _i ? searchIndex.option : _groupOptions.length); _j++) {
-        if (matchesSearchValue(_groupOptions[_j])) {
-          return _groupOptions[_j];
+    event.preventDefault();
+  };
+  var onEscapeKey = function onEscapeKey(event) {
+    overlayVisibleState && hide();
+    event.preventDefault();
+  };
+  var onTabKey = function onTabKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!pressedInInputText) {
+      if (overlayVisibleState && hasFocusableElements()) {
+        DomHandler.focus($refs.firstHiddenFocusableElementOnOverlay);
+        event.preventDefault();
+      } else {
+        if (focusedOptionIndex !== -1) {
+          onOptionSelect(event, visibleOptions[focusedOptionIndex]);
         }
+        overlayVisibleState && hide();
       }
     }
-    return null;
   };
-  var matchesSearchValue = function matchesSearchValue(option) {
-    var label = getOptionLabel(option);
-    if (!label) {
-      return false;
+  var onBackspaceKey = function onBackspaceKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (pressedInInputText) {
+      !overlayVisibleState && show();
     }
-    label = label.toLocaleLowerCase(props.filterLocale);
-    return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale));
   };
   var onEditableInputChange = function onEditableInputChange(event) {
+    !overlayVisibleState && show();
+    var searchIndex = null;
+    if (event.target.value) {
+      searchIndex = visibleOptions.findIndex(function (item) {
+        return item.name.toLocaleLowerCase().startsWith(event.target.value.toLocaleLowerCase());
+      });
+    }
+    setFocusedOptionIndex(searchIndex);
     if (props.onChange) {
       props.onChange({
         originalEvent: event.originalEvent,
@@ -22455,10 +22696,17 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     return ObjectUtils.equals(props.value, getOptionValue(option), equalityKey());
   };
   var show = function show() {
+    setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : props.editable ? -1 : findSelectedOptionIndex());
     setOverlayVisibleState(true);
   };
   var hide = function hide() {
     setOverlayVisibleState(false);
+    setClicked(false);
+  };
+  var onFocus = function onFocus() {
+    if (props.editable) {
+      DomHandler.focus(inputRef.current);
+    }
   };
   var onOverlayEnter = function onOverlayEnter(callback) {
     ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex['overlay'] || PrimeReact.zIndex['overlay']);
@@ -22511,6 +22759,9 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var getOptionRenderKey = function getOptionRenderKey(option) {
     return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
   };
+  var isOptionGroup = function isOptionGroup(option) {
+    return props.optionGroupLabel && option.optionGroup && option.group;
+  };
   var isOptionDisabled = function isOptionDisabled(option) {
     if (props.optionDisabled) {
       return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
@@ -22659,8 +22910,9 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         maxLength: props.maxLength,
         onInput: onEditableInputChange,
         onFocus: onEditableInputFocus,
+        onKeyDown: onInputKeyDown,
         onBlur: onInputBlur,
-        tabIndex: props.tabIndex || 0,
+        tabIndex: !props.disabled ? props.tabIndex : -1,
         'aria-haspopup': 'listbox'
       }, ariaProps), ptm('input'));
       return /*#__PURE__*/React__namespace.createElement("input", inputProps);
@@ -22752,10 +23004,31 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     },
     onMouseDown: props.onMouseDown,
     onContextMenu: props.onContextMenu,
+    onFocus: onFocus,
     'data-p-disabled': props.disabled,
     'data-p-focus': focusedState
   }, otherProps, ptm('root'));
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__namespace.createElement(DropdownPanel, _extends({
+  var firstHiddenFocusableElementProps = 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 lastHiddenFocusableElementProps = 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, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__namespace.createElement("span", firstHiddenFocusableElementProps), /*#__PURE__*/React__namespace.createElement(DropdownPanel, _extends({
     hostName: "Dropdown",
     ref: overlayRef,
     visibleOptions: visibleOptions,
@@ -22764,6 +23037,8 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     appendTo: appendTo,
     onClick: onPanelClick,
     onOptionClick: onOptionClick,
+    focusedOptionIndex: focusedOptionIndex,
+    setFocusedOptionIndex: setFocusedOptionIndex,
     filterValue: filterState,
     hasFilter: hasFilter,
     onFilterClearIconClick: onFilterClearIconClick,
@@ -22786,7 +23061,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     ptm: ptm,
     cx: cx,
     sx: sx
-  }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
+  })), /*#__PURE__*/React__namespace.createElement("span", lastHiddenFocusableElementProps)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions, {
@@ -22807,7 +23082,7 @@ var RowsPerPageDropdown = /*#__PURE__*/React__namespace.memo(function (inProps)
     };
   }) : [];
   var placeholderValue = localeOption('choose');
-  var ariaLabelValue = ariaLabel$1('rowsPerPage');
+  var ariaLabelValue = ariaLabel('jumpToPageDropdownLabel');
   var element = hasOptions ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Dropdown, {
     value: props.value,
     options: options,
@@ -24242,7 +24517,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       if (showSelection) {
         var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
         var ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
-        label = "".concat(props.selected ? ariaLabel$1('unselectLabel') : ariaLabel$1('selectLabel'), " ").concat(ariaLabelText);
+        label = "".concat(props.selected ? ariaLabel('unselectLabel') : ariaLabel('selectLabel'), " ").concat(ariaLabelText);
       }
       content = showSelection && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__namespace.createElement(RowRadioButton, {
         hostName: props.hostName,
@@ -24297,7 +24572,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       var ariaControls = "".concat(props.tableSelector, "_content_").concat(props.rowIndex, "_expanded");
       var _ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
       var _ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, _ariaLabelField);
-      var _label = "".concat(props.expanded ? ariaLabel$1('collapseLabel') : ariaLabel$1('expandLabel'), " ").concat(_ariaLabelText);
+      var _label = "".concat(props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel'), " ").concat(_ariaLabelText);
       var expanderProps = {
         onClick: onRowToggle,
         className: cx('rowToggler')
@@ -24352,19 +24627,19 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         var rowEditorSaveButtonProps = mergeProps(_defineProperty(_defineProperty({
           type: 'button',
           name: 'row-save',
-          'aria-label': ariaLabel$1('saveEdit'),
+          'aria-label': ariaLabel('saveEdit'),
           onClick: rowEditorProps.onSaveClick,
           className: rowEditorProps.saveClassName,
           tabIndex: props.tabIndex
-        }, "aria-label", ariaLabel$1('saveEdit')), 'data-p-row-editor-save', true), getColumnPTOptions('rowEditorSaveButton'));
+        }, "aria-label", ariaLabel('saveEdit')), 'data-p-row-editor-save', true), getColumnPTOptions('rowEditorSaveButton'));
         var rowEditorCancelButtonProps = mergeProps(_defineProperty({
           type: 'button',
           name: 'row-cancel',
-          'aria-label': ariaLabel$1('cancelEdit'),
+          'aria-label': ariaLabel('cancelEdit'),
           onClick: rowEditorProps.onCancelClick,
           className: rowEditorProps.cancelClassName,
           tabIndex: props.tabIndex
-        }, "aria-label", ariaLabel$1('cancelEdit')), getColumnPTOptions('rowEditorCancelButton'));
+        }, "aria-label", ariaLabel('cancelEdit')), getColumnPTOptions('rowEditorCancelButton'));
         content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", rowEditorSaveButtonProps, rowEditorSaveIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", rowEditorCancelButtonProps, rowEditorCancelIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)));
       } else {
         rowEditorProps = {
@@ -24375,11 +24650,11 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         var rowEditorInitButtonProps = mergeProps(_defineProperty(_defineProperty({
           type: 'button',
           name: 'row-edit',
-          'aria-label': ariaLabel$1('editRow'),
+          'aria-label': ariaLabel('editRow'),
           onClick: rowEditorProps.onInitClick,
           className: rowEditorProps.initClassName,
           tabIndex: props.tabIndex
-        }, "aria-label", ariaLabel$1('editRow')), 'data-p-row-editor-init', true), getColumnPTOptions('rowEditorInitButton'));
+        }, "aria-label", ariaLabel('editRow')), 'data-p-row-editor-init', true), getColumnPTOptions('rowEditorInitButton'));
         content = /*#__PURE__*/React__namespace.createElement("button", rowEditorInitButtonProps, rowEditorInitIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null));
       }
       if (body) {
@@ -25026,7 +25301,7 @@ var RowTogglerButton = /*#__PURE__*/React__namespace.memo(function (props) {
   var togglerIcon = IconUtils.getJSXIcon(icon, _objectSpread$19({}, rowGroupTogglerIconProps), {
     props: props
   });
-  var label = props.expanded ? ariaLabel$1('collapseLabel') : ariaLabel$1('expandLabel');
+  var label = props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
   var rowGroupTogglerProps = mergeProps({
     type: 'button',
     onClick: function onClick(e) {
@@ -26872,7 +27147,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
     var columnFilterIcon = IconUtils.getJSXIcon(icon, _objectSpread$15({}, filterIconProps), {
       props: props
     });
-    var label = overlayVisibleState ? ariaLabel$1('hideFilterMenu') : ariaLabel$1('showFilterMenu');
+    var label = overlayVisibleState ? ariaLabel('hideFilterMenu') : ariaLabel('showFilterMenu');
     var filterMenuButtonProps = mergeProps({
       type: 'button',
       className: cx('filterMenuButton', {
@@ -26995,7 +27270,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
         __parentMetadata: {
           parent: props.metaData
         },
-        "aria-label": ariaLabel$1('filterOperator')
+        "aria-label": ariaLabel('filterOperator')
       }));
     }
     return null;
@@ -27015,7 +27290,7 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
         __parentMetadata: {
           parent: props.metaData
         },
-        "aria-label": ariaLabel$1('filterConstraint')
+        "aria-label": ariaLabel('filterConstraint')
       });
     }
     return null;
@@ -27286,7 +27561,7 @@ var HeaderCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
     }),
     role: 'checkbox',
     'aria-checked': props.checked,
-    'aria-label': props.checked ? ariaLabel$1('selectAll') : ariaLabel$1('unselectAll'),
+    'aria-label': props.checked ? ariaLabel('selectAll') : ariaLabel('unselectAll'),
     tabIndex: tabIndex,
     onFocus: function onFocus(e) {
       return _onFocus();
@@ -34765,7 +35040,9 @@ var InputSwitch = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     style: props.style,
     onClick: onClick,
     role: 'checkbox',
-    'aria-checked': checked
+    'aria-checked': checked,
+    'data-p-highlight': checked,
+    'data-p-disabled': props.disabled
   }, otherProps, ptm('root'));
   var hiddenInputWrapperProps = mergeProps({
     className: 'p-hidden-accessible'
@@ -34966,6 +35243,7 @@ var KnobBase = ComponentBase.extend({
     disabled: false,
     readOnly: false,
     showValue: true,
+    tabIndex: 0,
     step: 1,
     min: 0,
     max: 100,
@@ -35129,6 +35407,15 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       });
     }
   };
+  var updateModelValue = function updateModelValue(newValue) {
+    var currentValue;
+    if (newValue > props.max) currentValue = props.max;else if (newValue < props.min) currentValue = props.min;else currentValue = newValue;
+    if (props.onChange) {
+      props.onChange({
+        value: currentValue
+      });
+    }
+  };
   var _onClick = function onClick(event) {
     if (!props.disabled && !props.readOnly) {
       updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
@@ -35151,6 +35438,48 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     unbindWindowTouchMoveListener();
     unbindWindowTouchEndListener();
   };
+  var _onKeyDown = function onKeyDown(event) {
+    if (!props.disabled && !props.readonly) {
+      switch (event.code) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          event.preventDefault();
+          updateModelValue(props.value + 1);
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          {
+            event.preventDefault();
+            updateModelValue(props.value - 1);
+            break;
+          }
+        case 'Home':
+          {
+            event.preventDefault();
+            updateModelValue(props.min);
+            break;
+          }
+        case 'End':
+          {
+            event.preventDefault();
+            updateModelValue(props.max);
+            break;
+          }
+        case 'PageUp':
+          {
+            event.preventDefault();
+            updateModelValue(props.value + 10);
+            break;
+          }
+        case 'PageDown':
+          {
+            event.preventDefault();
+            updateModelValue(props.value - 10);
+            break;
+          }
+      }
+    }
+  };
   React__namespace.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -35178,6 +35507,13 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     viewBox: '0 0 100 100',
     width: props.size,
     height: props.size,
+    'aria-valuemin': props.min,
+    'aria-valuemax': props.max,
+    'aria-valuenow': props.value,
+    'aria-labelledby': props.ariaLabelledby,
+    'aria-label': props.ariaLabel,
+    role: 'slider',
+    tabIndex: props.readonly || props.disabled ? -1 : props.tabIndex,
     onClick: function onClick(e) {
       return _onClick(e);
     },
@@ -35192,6 +35528,9 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     },
     onTouchEnd: function onTouchEnd(e) {
       return _onTouchEnd();
+    },
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown(e);
     }
   }, ptm('svg'));
   var rangeProps = mergeProps({
@@ -35210,28 +35549,26 @@ var Knob = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
 }));
 Knob.displayName = 'Knob';
 
+var _defaultProps;
 var classes$A = {
   itemGroup: 'p-listbox-item-group',
   emptyMessage: 'p-listbox-empty-message',
-  list: function list(_ref) {
-    var props = _ref.props,
-      options = _ref.options;
-    return props.virtualScrollerOptions ? classNames('p-listbox-list', options.className) : 'p-listbox-list';
-  },
-  wrapper: function wrapper(_ref2) {
-    var props = _ref2.props;
+  list: 'p-listbox-list',
+  wrapper: function wrapper(_ref) {
+    var props = _ref.props;
     return classNames('p-listbox-list-wrapper', props.listClassName);
   },
-  root: function root(_ref3) {
-    var props = _ref3.props;
+  root: function root(_ref2) {
+    var props = _ref2.props;
     return classNames('p-listbox p-component', {
       'p-disabled': props.disabled
     }, props.className);
   },
-  item: function item(_ref4) {
-    var props = _ref4.props;
+  item: function item(_ref3) {
+    var props = _ref3.props;
     return classNames('p-listbox-item', {
       'p-highlight': props.selected,
+      'p-focus': props.focusedOptionIndex === props.index,
       'p-disabled': props.disabled
     }, props.option.className);
   },
@@ -35240,22 +35577,22 @@ var classes$A = {
   filterInput: 'p-listbox-filter',
   header: 'p-listbox-header'
 };
-var styles$w = "\n@layer primereact {\n    .p-listbox-list-wrapper {\n        overflow: auto;\n    }\n    \n    .p-listbox-list {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n    }\n    \n    .p-listbox-item {\n        cursor: pointer;\n        position: relative;\n        overflow: hidden;\n    }\n    \n    .p-listbox-filter-container {\n        position: relative;\n    }\n    \n    .p-listbox-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-listbox-filter {\n        width: 100%;\n    }\n}\n";
+var styles$w = "\n@layer primereact {\n    .p-listbox-list-wrapper {\n        overflow: auto;\n    }\n    \n    .p-listbox-list {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n    }\n    \n    .p-listbox-item {\n        cursor: pointer;\n        position: relative;\n        overflow: hidden;\n        outline: none;\n    }\n    \n    .p-listbox-filter-container {\n        position: relative;\n    }\n    \n    .p-listbox-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-listbox-filter {\n        width: 100%;\n    }\n}\n";
 var inlineStyles$c = {
-  itemGroup: function itemGroup(_ref5) {
-    var scrollerOptions = _ref5.scrollerOptions;
+  itemGroup: function itemGroup(_ref4) {
+    var scrollerOptions = _ref4.scrollerOptions;
     return {
       height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
     };
   },
-  list: function list(_ref6) {
-    var options = _ref6.options,
-      props = _ref6.props;
+  list: function list(_ref5) {
+    var options = _ref5.options,
+      props = _ref5.props;
     return props.virtualScrollerOptions ? options.style : undefined;
   }
 };
 var ListBoxBase = ComponentBase.extend({
-  defaultProps: {
+  defaultProps: (_defaultProps = {
     __TYPE: 'ListBox',
     className: null,
     dataKey: null,
@@ -35271,29 +35608,13 @@ var ListBoxBase = ComponentBase.extend({
     filterPlaceholder: null,
     filterTemplate: null,
     filterValue: null,
+    selectOnFocus: false,
     id: null,
     itemTemplate: null,
     listClassName: null,
     listStyle: null,
-    metaKeySelection: false,
-    multiple: false,
-    onChange: null,
-    onFilterValueChange: null,
-    optionDisabled: null,
-    optionGroupChildren: null,
-    optionGroupLabel: null,
-    optionGroupTemplate: null,
-    optionLabel: null,
-    optionValue: null,
-    options: null,
-    style: null,
-    tabIndex: 0,
-    tooltip: null,
-    tooltipOptions: null,
-    value: null,
-    virtualScrollerOptions: null,
-    children: undefined
-  },
+    metaKeySelection: false
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultProps, "selectOnFocus", false), "autoOptionFocus", true), "multiple", false), "onChange", null), "onFilterValueChange", null), "optionDisabled", null), "optionGroupChildren", null), "optionGroupLabel", null), "optionGroupTemplate", null), "optionLabel", null), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultProps, "optionValue", null), "options", null), "style", null), "tabIndex", 0), "tooltip", null), "tooltipOptions", null), "value", null), "virtualScrollerOptions", null), "children", undefined)),
   css: {
     classes: classes$A,
     styles: styles$w,
@@ -35390,7 +35711,8 @@ var ListBoxItem = /*#__PURE__*/React__namespace.memo(function (props) {
       context: {
         selected: props.selected,
         disabled: props.disabled,
-        focused: focusedState
+        focused: focusedState,
+        focusedOptionIndex: props.focusedOptionIndex
       }
     });
   };
@@ -35400,15 +35722,6 @@ var ListBoxItem = /*#__PURE__*/React__namespace.memo(function (props) {
   var onBlur = function onBlur(event) {
     setFocusedState(false);
   };
-  var onClick = function onClick(event) {
-    if (props.onClick) {
-      props.onClick({
-        originalEvent: event,
-        option: props.option
-      });
-    }
-    event.preventDefault();
-  };
   var onTouchEnd = function onTouchEnd(event) {
     if (props.onTouchEnd) {
       props.onTouchEnd({
@@ -35417,47 +35730,17 @@ var ListBoxItem = /*#__PURE__*/React__namespace.memo(function (props) {
       });
     }
   };
-  var onKeyDown = function onKeyDown(event) {
-    var item = event.currentTarget;
-    switch (event.which) {
-      //down
-      case 40:
-        var nextItem = findNextItem(item);
-        nextItem && nextItem.focus();
-        event.preventDefault();
-        break;
-
-      //up
-      case 38:
-        var prevItem = findPrevItem(item);
-        prevItem && prevItem.focus();
-        event.preventDefault();
-        break;
-
-      //enter
-      case 13:
-        onClick(event);
-        event.preventDefault();
-        break;
-    }
-  };
-  var findNextItem = function findNextItem(item) {
-    var nextItem = item.nextElementSibling;
-    return nextItem ? DomHandler.isAttributeEquals(nextItem, 'data-p-disabled', true) || DomHandler.isAttributeEquals(nextItem, 'data-pc-section', 'itemgroup') ? findNextItem(nextItem) : nextItem : null;
-  };
-  var findPrevItem = function findPrevItem(item) {
-    var prevItem = item.previousElementSibling;
-    return prevItem ? DomHandler.isAttributeEquals(prevItem, 'data-p-disabled', true) || DomHandler.isAttributeEquals(prevItem, 'data-pc-section', 'itemgroup') ? findPrevItem(prevItem) : prevItem : null;
-  };
   var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
   var itemProps = mergeProps({
+    id: props.id,
     className: cx('item', {
       props: props
     }),
     style: props.style,
-    onClick: onClick,
+    onClick: function onClick(event) {
+      return props.onClick(event, props.option, props.index);
+    },
     onTouchEnd: onTouchEnd,
-    onKeyDown: onKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
     tabIndex: '-1',
@@ -35481,12 +35764,25 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   var mergeProps = useMergeProps();
   var context = React__namespace.useContext(PrimeReactContext);
   var props = ListBoxBase.getProps(inProps, context);
-  var _React$useState = React__namespace.useState(''),
+  var _React$useState = React__namespace.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    filterValueState = _React$useState2[0],
-    setFilterValueState = _React$useState2[1];
+    focusedOptionIndex = _React$useState2[0],
+    setFocusedOptionIndex = _React$useState2[1];
+  var searchTimeout = React__namespace.useRef(null);
+  var firstHiddenFocusableElement = React__namespace.useRef(null);
+  var lastHiddenFocusableElement = React__namespace.useRef(null);
+  var _React$useState3 = React__namespace.useState(-1),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    startRangeIndex = _React$useState4[0],
+    setStartRangeIndex = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(''),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    filterValueState = _React$useState6[0],
+    setFilterValueState = _React$useState6[1];
   var elementRef = React__namespace.useRef(null);
   var virtualScrollerRef = React__namespace.useRef(null);
+  var id = React__namespace.useRef(UniqueComponentId());
+  var listRef = React__namespace.useRef(null);
   var optionTouched = React__namespace.useRef(false);
   var filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
   var hasFilter = filteredValue && filteredValue.trim().length > 0;
@@ -35500,13 +35796,14 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   useHandleStyle(ListBoxBase.css.styles, ptCallbacks.isUnstyled, {
     name: 'listbox'
   });
-  var onOptionSelect = function onOptionSelect(event) {
-    var option = event.option;
+  var onOptionSelect = function onOptionSelect(event, option) {
+    var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
     if (props.disabled || isOptionDisabled(option)) {
       return;
     }
     props.multiple ? onOptionSelectMultiple(event.originalEvent, option) : onOptionSelectSingle(event.originalEvent, option);
     optionTouched.current = false;
+    index !== -1 && setFocusedOptionIndex(index);
   };
   var onOptionTouchEnd = function onOptionTouchEnd() {
     if (props.disabled) {
@@ -35575,6 +35872,269 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       });
     }
   };
+  var hasSelectedOption = function hasSelectedOption() {
+    return ObjectUtils.isNotEmpty(props.value);
+  };
+  var isOptionGroup = function isOptionGroup(option) {
+    return props.optionGroupLabel && option.optionGroup && option.group;
+  };
+  var isValidOption = function isValidOption(option) {
+    return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
+  };
+  var isValidSelectedOption = function isValidSelectedOption(option) {
+    return isValidOption(option) && isSelected(option);
+  };
+  var findFirstOptionIndex = function findFirstOptionIndex() {
+    return visibleOptions.findIndex(function (option) {
+      return isValidOption(option);
+    });
+  };
+  var findLastOptionIndex = function findLastOptionIndex() {
+    return 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 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+      return isValidOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+  };
+  var focusedOptionId = function focusedOptionId() {
+    return focusedOptionIndex !== -1 ? "".concat(id.current, "_").concat(focusedOptionIndex) : null;
+  };
+  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;
+      }
+    }
+    return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+  };
+  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.toLocaleLowerCase(props.filterLocale)));
+  };
+  var searchOptions = function searchOptions(event, _char) {
+    searchValue = (searchValue || '') + _char;
+    var optionIndex = -1;
+    if (ObjectUtils.isNotEmpty(searchValue)) {
+      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 = '';
+      searchTimeout.current = null;
+    }, 500);
+  };
+  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 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+      return isValidSelectedOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
+  };
+  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 findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
+    var selectedIndex = findFirstSelectedOptionIndex();
+    return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
+  };
+  var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
+    if (focusedOptionIndex !== index) {
+      setFocusedOptionIndex(index);
+      scrollInView();
+      if (props.selectOnFocus && !props.multiple) {
+        onOptionSelect(event, visibleOptions[index]);
+      }
+    }
+  };
+  var onArrowDownKey = function onArrowDownKey(event) {
+    var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : findFirstFocusedOptionIndex();
+    if (props.multiple && event.shiftKey) {
+      onOptionSelectRange(event, startRangeIndex, optionIndex);
+    }
+    changeFocusedOptionIndex(event, optionIndex);
+    event.preventDefault();
+  };
+  var onArrowUpKey = function onArrowUpKey(event) {
+    var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : findLastFocusedOptionIndex();
+    if (props.multiple && event.shiftKey) {
+      onOptionSelectRange(event, optionIndex, startRangeIndex);
+    }
+    changeFocusedOptionIndex(event, optionIndex);
+    event.preventDefault();
+  };
+  var onEnterKey = function onEnterKey(event) {
+    if (focusedOptionIndex !== -1) {
+      if (props.multiple && event.shiftKey) onOptionSelectRange(event, focusedOptionIndex);else onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+    }
+    event.preventDefault();
+  };
+  var onSpaceKey = function onSpaceKey(event) {
+    onEnterKey(event);
+  };
+  var onShiftKey = function onShiftKey() {
+    setStartRangeIndex(focusedOptionIndex);
+  };
+  var onHomeKey = function onHomeKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (pressedInInputText) {
+      event.currentTarget.setSelectionRange(0, 0);
+      setFocusedOptionIndex(-1);
+    } else {
+      var metaKey = event.metaKey || event.ctrlKey;
+      var optionIndex = findFirstOptionIndex();
+      if (props.multiple && event.shiftKey && metaKey) {
+        onOptionSelectRange(event, optionIndex, startRangeIndex);
+      }
+      changeFocusedOptionIndex(event, optionIndex);
+    }
+    event.preventDefault();
+  };
+  var onEndKey = function onEndKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (pressedInInputText) {
+      var target = event.currentTarget;
+      var len = target.value.length;
+      target.setSelectionRange(len, len);
+      _readOnlyError("focusedOptionIndex");
+    } else {
+      var metaKey = event.metaKey || event.ctrlKey;
+      var optionIndex = findLastOptionIndex();
+      if (props.multiple && event.shiftKey && metaKey) {
+        onOptionSelectRange(event, startRangeIndex, optionIndex);
+      }
+      changeFocusedOptionIndex(event, optionIndex);
+    }
+    event.preventDefault();
+  };
+  var onPageUpKey = function onPageUpKey(event) {
+    scrollInView(0);
+    event.preventDefault();
+  };
+  var onPageDownKey = function onPageDownKey(event) {
+    scrollInView(visibleOptions.length - 1);
+    event.preventDefault();
+  };
+  var onKeyDown = function onKeyDown(event) {
+    var metaKey = event.metaKey || event.ctrlKey;
+    switch (event.code) {
+      case 'ArrowDown':
+        onArrowDownKey(event);
+        break;
+      case 'ArrowUp':
+        onArrowUpKey(event);
+        break;
+      case 'Home':
+        onHomeKey(event);
+        break;
+      case 'End':
+        onEndKey(event);
+        break;
+      case 'PageDown':
+        onPageDownKey(event);
+        break;
+      case 'PageUp':
+        onPageUpKey(event);
+        break;
+      case 'Enter':
+      case 'NumpadEnter':
+      case 'Space':
+        onSpaceKey(event);
+        event.preventDefault();
+        break;
+      case 'Tab':
+        //NOOP
+        break;
+      case 'ShiftLeft':
+      case 'ShiftRight':
+        onShiftKey();
+        break;
+      default:
+        if (props.multiple && 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 && ObjectUtils.isPrintableCharacter(event.key)) {
+          searchOptions(event, event.key);
+          event.preventDefault();
+        }
+        break;
+    }
+  };
+  var scrollInView = function scrollInView() {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+    setTimeout(function () {
+      var idx = index !== -1 ? "".concat(id.current, "_").concat(index) : focusedOptionId();
+      var element = listRef.current.querySelector("li[id=\"".concat(idx, "\"]"));
+      if (element) {
+        element.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+          behavior: 'smooth'
+        });
+      } else if (props.virtualScrollerOptions) {
+        virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(index !== -1 ? index : props.focusedOptionIndex);
+      }
+    }, 0);
+  };
   var onFilter = function onFilter(event) {
     virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
     var originalEvent = event.originalEvent,
@@ -35667,6 +36227,23 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     }
     return option && option['disabled'] !== undefined ? option['disabled'] : false;
   };
+  var onFirstHiddenFocus = function onFirstHiddenFocus() {
+    DomHandler.focus(listRef.current);
+    var firstFocusableEl = DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])');
+    lastHiddenFocusableElement.current.tabIndex = DomHandler.isElement(firstFocusableEl) ? undefined : -1;
+    firstHiddenFocusableElement.current.tabIndex = -1;
+  };
+  var onLastHiddenFocus = function onLastHiddenFocus(event) {
+    var relatedTarget = event.relatedTarget;
+    if (relatedTarget === listRef.current) {
+      var firstFocusableEl = DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])');
+      DomHandler.focus(firstFocusableEl);
+      firstHiddenFocusableElement.current.tabIndex = undefined;
+    } else {
+      DomHandler.focus(firstHiddenFocusableElement.current);
+    }
+    astHiddenFocusableElement.current.tabIndex = -1;
+  };
   var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
     return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
   };
@@ -35755,8 +36332,9 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       var optionLabel = getOptionLabel(option);
       var optionKey = j + '_' + getOptionRenderKey(option);
       var disabled = isOptionDisabled(option);
-      var tabIndex = disabled ? null : props.tabIndex || 0;
+      disabled ? null : props.tabIndex || 0;
       return /*#__PURE__*/React__namespace.createElement(ListBoxItem, {
+        id: id.current + '_' + j,
         hostName: "ListBox",
         key: optionKey,
         label: optionLabel,
@@ -35765,8 +36343,9 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
         template: props.itemTemplate,
         selected: isSelected(option),
         onClick: onOptionSelect,
+        index: j,
+        focusedOptionIndex: focusedOptionIndex,
         onTouchEnd: onOptionTouchEnd,
-        tabIndex: tabIndex,
         disabled: disabled,
         ptCallbacks: ptCallbacks,
         metaData: metaData
@@ -35796,18 +36375,20 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       var optionLabel = getOptionLabel(option);
       var optionKey = index + '_' + getOptionRenderKey(option);
       var disabled = isOptionDisabled(option);
-      var tabIndex = disabled ? null : props.tabIndex || 0;
+      disabled ? null : props.tabIndex || 0;
       return /*#__PURE__*/React__namespace.createElement(ListBoxItem, {
+        id: id.current + '_' + index,
         hostName: "ListBox",
         key: optionKey,
         label: optionLabel,
+        index: index,
+        focusedOptionIndex: focusedOptionIndex,
         option: option,
         style: style,
         template: props.itemTemplate,
         selected: isSelected(option),
         onClick: onOptionSelect,
         onTouchEnd: onOptionTouchEnd,
-        tabIndex: tabIndex,
         disabled: disabled,
         ptCallbacks: ptCallbacks,
         metaData: metaData
@@ -35851,6 +36432,7 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
               options: options
             }),
             role: 'listbox',
+            tabIndex: '-1',
             'aria-multiselectable': props.multiple
           }, ariaProps), ptCallbacks.ptm('list'));
           return /*#__PURE__*/React__namespace.createElement("ul", listProps, options.children);
@@ -35864,9 +36446,12 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     } else {
       var items = createItems();
       var listProps = mergeProps(_objectSpread$O({
+        ref: listRef,
         className: ptCallbacks.cx('list'),
         role: 'listbox',
-        'aria-multiselectable': props.multiple
+        'aria-multiselectable': props.multiple,
+        tabIndex: '-1',
+        onKeyDown: onKeyDown
       }, ariaProps), ptCallbacks.ptm('list'));
       return /*#__PURE__*/React__namespace.createElement("ul", listProps, items);
     }
@@ -35887,7 +36472,27 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     className: ptCallbacks.cx('root'),
     style: props.style
   }, ListBoxBase.getOtherProps(props), ptCallbacks.ptm('root'));
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, header, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, list)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
+  var hiddenFirstElement = mergeProps({
+    ref: firstHiddenFocusableElement,
+    role: 'presentation',
+    'aria-hidden': 'true',
+    className: 'p-hidden-accessible p-hidden-focusable',
+    tabIndex: !props.disabled ? props.tabIndex : -1,
+    onFocus: onFirstHiddenFocus,
+    'data-p-hidden-accessible': true,
+    'data-p-hidden-focusable': true
+  }, ptCallbacks.ptm('hiddenFirstFocusableEl'));
+  var hiddenLastElement = mergeProps({
+    ref: lastHiddenFocusableElement,
+    role: 'presentation',
+    'aria-hidden': 'true',
+    className: 'p-hidden-accessible p-hidden-focusable',
+    tabIndex: !props.disabled ? props.tabIndex : -1,
+    onFocus: onLastHiddenFocus,
+    'data-p-hidden-accessible': true,
+    'data-p-hidden-focusable': true
+  }, ptCallbacks.ptm('hiddenFirstFocusableEl'));
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("span", hiddenFirstElement), header, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, list), /*#__PURE__*/React__namespace.createElement("span", hiddenLastElement)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions, {
@@ -37068,7 +37673,7 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       'aria-haspopup': props.model && props.model.length > 0 ? true : false,
       'aria-expanded': mobileActiveState,
       'aria-controls': idState,
-      'aria-label': ariaLabel$1('navigation'),
+      'aria-label': ariaLabel('navigation'),
       tabIndex: 0,
       onClick: function onClick(e) {
         return toggle(e);
@@ -37764,7 +38369,8 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       props: props,
       state: {
         id: idState,
-        visible: visibleState
+        visible: visibleState,
+        focused: focused
       }
     }),
     ptm = _MenuBase$setMetaData.ptm,
@@ -38063,7 +38669,7 @@ var Menu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       'aria-disabled': item.disabled,
       'data-p-disabled': item.disabled
     }, ptm('action'));
-    var content = /*#__PURE__*/React__namespace.createElement("div", contentProps, /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label));
+    var content = /*#__PURE__*/React__namespace.createElement("div", contentProps, /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label, /*#__PURE__*/React__namespace.createElement(Ripple, null)));
     if (item.template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
@@ -39117,7 +39723,7 @@ var Menubar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       tabIndex: '0',
       'aria-haspopup': mobileActiveState && props.model && props.model.lentgh > 0 ? true : false,
       'aria-expanded': mobileActiveState,
-      'aria-label': ariaLabel$1('navigation'),
+      'aria-label': ariaLabel('navigation'),
       'aria-controls': idState,
       role: 'button'
     }, "tabIndex", 0), "className", cx('button')), "onKeyDown", function onKeyDown(e) {
@@ -39336,7 +39942,8 @@ var classes$v = {
     var props = _ref5.itemProps;
     return 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',
@@ -39349,7 +39956,7 @@ var classes$v = {
   },
   transition: 'p-connected-overlay'
 };
-var styles$r = "\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$r = "\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$a = {
   root: function root(_ref7) {
     var props = _ref7.props;
@@ -39383,6 +39990,8 @@ var MultiSelectBase = ComponentBase.extend({
     filterBy: null,
     filterInputAutoFocus: true,
     filterLocale: undefined,
+    selectOnFocus: false,
+    autoOptionFocus: false,
     filterMatchMode: 'contains',
     filterPlaceholder: null,
     filterTemplate: null,
@@ -39606,7 +40215,9 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
       context: {
         selected: props.selected,
         disabled: props.disabled,
-        focused: focusedState
+        focused: focusedState,
+        focusedIndex: props.focusedIndex,
+        index: props.index
       }
     });
   };
@@ -39618,22 +40229,11 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   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'));
@@ -39642,7 +40242,7 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
     selected: props.selected
   }) : null;
   var content = props.template ? 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'));
@@ -39658,7 +40258,6 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
     })),
     style: props.style,
     onClick: onClick,
-    onKeyDown: onKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
     tabIndex: tabIndex,
@@ -39760,14 +40359,15 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       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,
@@ -39818,13 +40418,14 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       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,
@@ -39953,19 +40554,35 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   var mergeProps = useMergeProps();
   var context = React__namespace.useContext(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);
@@ -40007,6 +40624,14 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
     bindOverlayListener = _useOverlayListener2[0],
     unbindOverlayListener = _useOverlayListener2[1];
+  var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
+    var focusableEl = event.relatedTarget === inputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
+    DomHandler.focus(focusableEl);
+  };
+  var onLastHiddenFocus = function onLastHiddenFocus(event) {
+    var focusableEl = event.relatedTarget === inputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
+    DomHandler.focus(focusableEl);
+  };
   var onPanelClick = function onPanelClick(event) {
     OverlayService.emit('overlay-click', {
       originalEvent: event,
@@ -40016,63 +40641,60 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   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 optionValue = getOptionValue(option);
-    var isUsed = isOptionValueUsed(option);
-    var selected = isSelected(option);
-    var allowSelect = allowOptionSelect();
-    if (selected) {
-      updateModel(originalEvent, props.value.filter(function (val) {
-        return !ObjectUtils.equals(isUsed ? val : getOptionValue(val), optionValue, equalityKey);
-      }), option);
-    } else if (allowSelect) {
-      updateModel(originalEvent, [].concat(_toConsumableArray(props.value || []), [optionValue]), option);
-    }
+  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 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();
-        DomHandler.focus(inputRef.current);
-        break;
+  var findPrevSelectedOptionIndex = function findPrevSelectedOptionIndex(index) {
+    var matchedOptionIndex = hasSelectedOption && index > 0 ? 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;
+      }
     }
+    return matchedOptionIndex > -1 ? matchedOptionIndex : index;
   };
-  var findNextItem = function findNextItem(item) {
-    var nextItem = item.nextElementSibling;
-    return nextItem ? DomHandler.getAttribute(nextItem, 'data-p-disabled') === true || DomHandler.getAttribute(nextItem, 'data-pc-section') === 'itemgroup' ? findNextItem(nextItem) : nextItem : null;
+  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 findPrevItem = function findPrevItem(item) {
-    var prevItem = item.previousElementSibling;
-    return prevItem ? DomHandler.getAttribute(prevItem, 'data-p-disabled') === true || DomHandler.getAttribute(prevItem, 'data-pc-section') === 'itemgroup' ? findPrevItem(prevItem) : prevItem : null;
+  var onOptionSelect = function onOptionSelect(event, option) {
+    var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+    if (props.disabled || isOptionDisabled(option)) {
+      return;
+    }
+    var selected = isSelected(option);
+    var value = null;
+    if (selected) value = props.value.filter(function (val) {
+      return !ObjectUtils.equals(val, getOptionValue(option), equalityKey);
+    });else value = [].concat(_toConsumableArray(props.value || []), [getOptionValue(option)]);
+    updateModel(event, value);
+    index !== -1 && setFocusedOptionIndex(index);
   };
   var onClick = function onClick(event) {
     if (!props.inline && !props.disabled && !props.loading && !isPanelClicked(event) && DomHandler.getAttribute(event.target, 'data-pc-section') !== 'removetokenicon' && !isClearClicked(event)) {
@@ -40080,42 +40702,170 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       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]);
+      }
+      hide();
+    }
+    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()) {
+        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;
-        overlayVisibleState ? hide() : show();
+        onArrowDownKey(event);
+        break;
+      case 'Space':
+      case 'NumpadEnter':
+      case 'Enter':
+        if (props.inline) break;
+        onEnterKey(event);
+        break;
+      case 'Home':
+        if (props.inline) break;
+        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 = 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 && ObjectUtils.isPrintableCharacter(event.key)) {
+          !overlayVisibleState && show();
+          searchOptions(event);
+          event.preventDefault();
         }
         break;
     }
+    setClicked(false);
   };
   var onSelectAll = function onSelectAll(event) {
     if (props.onSelectAll) {
@@ -40201,9 +40951,13 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   };
   var show = function show() {
     setOverlayVisibleState(true);
+    setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : findSelectedOptionIndex());
+    DomHandler.focus(inputRef.current);
   };
   var hide = function hide() {
+    setFocusedOptionIndex(-1);
     setOverlayVisibleState(false);
+    setClicked(false);
   };
   var onOverlayEnter = function onOverlayEnter(callback) {
     ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex['overlay'] || PrimeReact.zIndex['overlay']);
@@ -40397,6 +41151,100 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   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 ObjectUtils.isNotEmpty(props.value);
+  };
+  var hasFocusableElements = function hasFocusableElements() {
+    return 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 ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
+  };
+  var isValidSelectedOption = function isValidSelectedOption(option) {
+    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;
+  };
+  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 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 ? 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 (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 !ObjectUtils.equals(val, item, equalityKey);
@@ -40537,6 +41385,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     setTimeout(function () {
       props.overlayVisible ? show() : hide();
     }, 100);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.overlayVisible]);
   useUpdateEffect(function () {
     if (overlayVisibleState && filterState && hasFilter) {
@@ -40621,11 +41470,31 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     role: 'listbox',
     'aria-expanded': overlayVisibleState,
     disabled: props.disabled,
-    tabIndex: props.tabIndex
+    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(MultiSelectPanel, _extends({
+  }))), !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({
     hostName: "MultiSelect",
     ref: overlayRef,
     visibleOptions: visibleOptions
@@ -40633,6 +41502,8 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     onClick: onPanelClick,
     onOverlayHide: hide,
     filterValue: filterState,
+    focusedOptionIndex: focusedOptionIndex,
+    setFocusedOptionIndex: setFocusedOptionIndex,
     hasFilter: hasFilter,
     onFilterInputChange: onFilterInputChange,
     resetFilter: resetFilter,
@@ -40649,7 +41520,6 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     isAllSelected: isAllSelected,
     onOptionSelect: onOptionSelect,
     allowOptionSelect: allowOptionSelect,
-    onOptionKeyDown: onOptionKeyDown,
     "in": overlayVisibleState,
     onEnter: onOverlayEnter,
     onEntered: onOverlayEntered,
@@ -40660,7 +41530,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     sx: sx,
     isUnstyled: isUnstyled,
     metaData: metaData
-  }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
+  })), /*#__PURE__*/React__namespace.createElement("span", lastHiddenElementProps)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions, {
@@ -40865,7 +41735,7 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React_
   var otherProps = MultiStateCheckboxBase.getOtherProps(props);
   var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
   var icon = createIcon();
-  var ariaValueLabel = !!selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel$1('nullLabel');
+  var ariaValueLabel = !!selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
   var ariaChecked = !!selectedOption ? 'true' : 'false';
   var rootProps = mergeProps({
     ref: elementRef,
@@ -41074,7 +41944,7 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     icon: moveUpIcon,
     onClick: moveUp,
     disabled: isMoveDisabled,
-    'aria-label': ariaLabel$1('moveUp'),
+    'aria-label': ariaLabel('moveUp'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -41085,7 +41955,7 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     icon: moveTopIcon,
     onClick: moveTop,
     disabled: isMoveDisabled,
-    'aria-label': ariaLabel$1('moveTop'),
+    'aria-label': ariaLabel('moveTop'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -41096,7 +41966,7 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     icon: moveDownIcon,
     onClick: moveDown,
     disabled: isMoveDisabled,
-    'aria-label': ariaLabel$1('moveDown'),
+    'aria-label': ariaLabel('moveDown'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -41107,7 +41977,7 @@ var OrderListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     icon: moveBottomIcon,
     onClick: moveBottom,
     disabled: isMoveDisabled,
-    'aria-label': ariaLabel$1('moveBottom'),
+    'aria-label': ariaLabel('moveBottom'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -42885,7 +43755,7 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
       tabIndex: '-1',
       'aria-hidden': true
     }, getPTOptions(processedItem, 'action', index));
-    var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, submenuIcon, icon, label);
+    var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, submenuIcon, icon, label, /*#__PURE__*/React__namespace.createElement(Ripple, null));
     if (item.template) {
       var defaultContentOptions = {
         className: linkClassName,
@@ -44068,17 +44938,19 @@ var Password = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var hideIconProps = mergeProps(ptm('hideIcon'));
     var showIconProps = mergeProps(ptm('showIcon'));
     if (unmaskedState) {
-      icon = props.hideIcon || /*#__PURE__*/React__namespace.createElement(EyeSlashIcon, hideIconProps);
+      icon = props.hideIcon || /*#__PURE__*/React__namespace.createElement(EyeSlashIcon, _extends({}, hideIconProps, {
+        onClick: toggleMask
+      }));
     } else {
-      icon = props.showIcon || /*#__PURE__*/React__namespace.createElement(EyeIcon, showIconProps);
+      icon = props.showIcon || /*#__PURE__*/React__namespace.createElement(EyeIcon, _extends({}, showIconProps, {
+        onClick: toggleMask
+      }));
     }
     var eyeIcon = IconUtils.getJSXIcon(icon, unmaskedState ? _objectSpread$x({}, hideIconProps) : _objectSpread$x({}, showIconProps), {
       props: props
     });
     if (props.toggleMask) {
-      var content = /*#__PURE__*/React__namespace.createElement("i", {
-        onClick: toggleMask
-      }, " ", eyeIcon, " ");
+      var content = eyeIcon;
       if (props.icon) {
         var defaultIconOptions = {
           onClick: toggleMask,
@@ -44397,7 +45269,7 @@ var PickListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     onClick: moveUp,
     pt: ptm('moveUpButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveUp'),
+    "aria-label": ariaLabel('moveUp'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44408,7 +45280,7 @@ var PickListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     onClick: moveTop,
     pt: ptm('moveTopButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveTop'),
+    "aria-label": ariaLabel('moveTop'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44419,7 +45291,7 @@ var PickListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     onClick: moveDown,
     pt: ptm('moveDownButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveDown'),
+    "aria-label": ariaLabel('moveDown'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44430,7 +45302,7 @@ var PickListControls = /*#__PURE__*/React__namespace.memo(function (props) {
     onClick: moveBottom,
     pt: ptm('moveBottomButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveBottom'),
+    "aria-label": ariaLabel('moveBottom'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44774,7 +45646,7 @@ var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (prop
     onClick: moveRight,
     pt: ptm('moveToTargetButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveToTarget'),
+    "aria-label": ariaLabel('moveToTarget'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44785,7 +45657,7 @@ var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (prop
     onClick: moveAllRight,
     pt: ptm('moveAllToTargetButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveAllToTarget'),
+    "aria-label": ariaLabel('moveAllToTarget'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44796,7 +45668,7 @@ var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (prop
     onClick: moveLeft,
     pt: ptm('moveToSourceButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveToSource'),
+    "aria-label": ariaLabel('moveToSource'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44807,7 +45679,7 @@ var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (prop
     onClick: moveAllLeft,
     pt: ptm('moveAllToSourceButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveAllToSource'),
+    "aria-label": ariaLabel('moveAllToSource'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -45745,6 +46617,7 @@ var RadioButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
+    checked: props.checked,
     disabled: props.disabled,
     required: props.required,
     tabIndex: props.tabIndex
@@ -45775,9 +46648,14 @@ RadioButton.displayName = 'RadioButton';
 var classes$l = {
   onIcon: 'p-rating-icon',
   item: function item(_ref) {
-    var active = _ref.active;
+    var active = _ref.active,
+      value = _ref.value,
+      isFocusVisibleItem = _ref.isFocusVisibleItem,
+      focusedOptionIndex = _ref.focusedOptionIndex;
     return classNames('p-rating-item', {
       'p-rating-item-active': active
+    }, {
+      'p-focus': value === focusedOptionIndex && isFocusVisibleItem
     });
   },
   cancelIcon: 'p-rating-icon p-rating-cancel',
@@ -45825,6 +46703,14 @@ var Rating = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
   var mergeProps = useMergeProps();
   var context = React__namespace.useContext(PrimeReactContext);
   var props = RatingBase.getProps(inProps, context);
+  var _React$useState = React__namespace.useState(-1),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedOptionIndex = _React$useState2[0],
+    setFocusedOptionIndex = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState(true),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isFocusVisibleItem = _React$useState4[0];
+    _React$useState4[1];
   var elementRef = React__namespace.useRef(null);
   var _RatingBase$setMetaDa = RatingBase.setMetaData({
       props: props
@@ -45862,6 +46748,7 @@ var Rating = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
         }
       });
     }
+    setFocusedOptionIndex(i);
     event.preventDefault();
   };
   var clear = function clear(event) {
@@ -45885,10 +46772,30 @@ var Rating = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
     event.preventDefault();
   };
   var onStarKeyDown = function onStarKeyDown(event, value) {
-    if (event.key === 'Enter') {
-      rate(event, value);
+    switch (event.key) {
+      case 'Enter':
+      case 'Space':
+        rate(event, value);
+        event.preventDefault();
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        event.preventDefault();
+        rate(event, props.value - 1 < 1 ? props.stars : props.value - 1);
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        event.preventDefault();
+        rate(event, props.value + 1 > props.stars ? 1 : props.value + 1);
+        break;
     }
   };
+  var _onFocus = function onFocus(event, value) {
+    setFocusedOptionIndex(value);
+  };
+  var _onBlur = function onBlur(event) {
+    setFocusedOptionIndex(-1);
+  };
   var onCancelKeyDown = function onCancelKeyDown(event) {
     if (event.key === 'Enter') {
       clear(event);
@@ -45918,14 +46825,24 @@ var Rating = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
       var itemProps = mergeProps({
         key: value,
         className: cx('item', {
-          active: active
+          active: active,
+          focusedOptionIndex: focusedOptionIndex,
+          isFocusVisibleItem: isFocusVisibleItem,
+          value: value
         }),
+        'data-p-focused': value === focusedOptionIndex,
         tabIndex: tabIndex,
         onClick: function onClick(e) {
           return rate(e, value);
         },
         onKeyDown: function onKeyDown(e) {
           return onStarKeyDown(e, value);
+        },
+        onFocus: function onFocus(e) {
+          return _onFocus(e, value);
+        },
+        onBlur: function onBlur(e) {
+          return _onBlur();
         }
       }, getPTOptions(props.value, 'item'));
       return /*#__PURE__*/React__namespace.createElement("div", _extends({
@@ -46534,7 +47451,8 @@ var SelectButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     });
   };
-  var onClick = function onClick(event) {
+  var _onClick = function onClick(event, index) {
+    props.setFocusedIndex(index);
     if (props.onClick) {
       props.onClick({
         originalEvent: event,
@@ -46548,13 +47466,46 @@ var SelectButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
   var onBlur = function onBlur() {
     setFocusedState(false);
   };
-  var onKeyDown = function onKeyDown(event) {
-    var keyCode = event.which;
-    if (keyCode === 32) {
-      onClick(event);
-      event.preventDefault();
+  var _onKeyDown = function onKeyDown(event, index) {
+    switch (event.code) {
+      case 'Space':
+        {
+          _onClick(event, index);
+          event.preventDefault();
+          break;
+        }
+      case 'ArrowDown':
+      case 'ArrowRight':
+        {
+          changeTabIndexes(event, 'next');
+          event.preventDefault();
+          break;
+        }
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        {
+          changeTabIndexes(event, 'prev');
+          event.preventDefault();
+          break;
+        }
     }
   };
+  var changeTabIndexes = function changeTabIndexes(event, direction) {
+    var firstTabableChild, index;
+    for (var i = 0; i <= props.elementRef.current.children.length - 1; i++) {
+      if (props.elementRef.current.children[i].getAttribute('tabindex') === '0') firstTabableChild = {
+        elem: props.elementRef.current.children[i],
+        index: i
+      };
+    }
+    if (direction === 'prev') {
+      if (firstTabableChild.index === 0) index = props.elementRef.current.children.length - 1;else index = firstTabableChild.index - 1;
+    } else {
+      if (firstTabableChild.index === props.elementRef.current.children.length - 1) index = 0;else index = firstTabableChild.index + 1;
+    }
+    props.setFocusedIndex(index);
+    props.elementRef.current.children[index].focus();
+  };
   var createContent = function createContent() {
     var labelProps = mergeProps({
       className: cx('label')
@@ -46570,9 +47521,14 @@ var SelectButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
     role: 'button',
     'aria-label': props.label,
     'aria-pressed': props.selected,
-    onClick: onClick,
-    onKeyDown: onKeyDown,
+    onClick: function onClick(event) {
+      return _onClick(event, props.index);
+    },
+    onKeyDown: function onKeyDown(event) {
+      return _onKeyDown(event, props.index);
+    },
     tabIndex: props.tabIndex,
+    'aria-disabled': props.disabled,
     onFocus: onFocus,
     onBlur: onBlur
   }, getPTOptions('button'));
@@ -46584,6 +47540,10 @@ var SelectButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   var mergeProps = useMergeProps();
   var context = React__namespace.useContext(PrimeReactContext);
   var props = SelectButtonBase.getProps(inProps, context);
+  var _React$useState = React__namespace.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedIndex = _React$useState2[0],
+    setFocusedIndex = _React$useState2[1];
   var elementRef = React__namespace.useRef(null);
   var _SelectButtonBase$set = SelectButtonBase.setMetaData({
       props: props
@@ -46656,7 +47616,7 @@ var SelectButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
       return props.options.map(function (option, index) {
         var isDisabled = props.disabled || isOptionDisabled(option);
         var optionLabel = getOptionLabel(option);
-        var tabIndex = isDisabled ? null : 0;
+        var tabIndex = index === focusedIndex ? '0' : '-1';
         var selected = isSelected(option);
         var key = optionLabel + '_' + index;
         return /*#__PURE__*/React__namespace.createElement(SelectButtonItem, {
@@ -46665,13 +47625,16 @@ var SelectButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
           label: optionLabel,
           className: option.className,
           option: option,
+          setFocusedIndex: setFocusedIndex,
           onClick: onOptionClick,
           template: props.itemTemplate,
           selected: selected,
           tabIndex: tabIndex,
+          index: index,
           disabled: isDisabled,
           ptm: ptm,
-          cx: cx
+          cx: cx,
+          elementRef: elementRef
         });
       });
     }
@@ -47763,10 +48726,31 @@ var Slider = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
     }
     handleIndex.current = index;
     var key = event.key;
-    if (key === 'ArrowRight' || key === 'ArrowUp') {
-      spin(event, 1);
-    } else if (key === 'ArrowLeft' || key === 'ArrowDown') {
-      spin(event, -1);
+    switch (key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        spin(event, 1);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        spin(event, -1);
+        break;
+      case 'PageUp':
+        spin(event, 10);
+        event.preventDefault();
+        break;
+      case 'PageDown':
+        spin(event, -10);
+        event.preventDefault();
+        break;
+      case 'Home':
+        spin(event, -value);
+        event.preventDefault();
+        break;
+      case 'End':
+        spin(event, props.max);
+        event.preventDefault();
+        break;
     }
   };
   var onBarClick = function onBarClick(event) {
@@ -49969,6 +50953,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var panelSize = function panelSize(sizes, index) {
     return index in sizes ? sizes[index] : props.children && [].concat(props.children)[index].props.size || 100 / childrenLength;
   };
+  var horizontal = props.layout === 'horizontal';
   var metaData = {
     props: props,
     state: {
@@ -50063,10 +51048,9 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     if (stateString) setPanelSizes(JSON.parse(stateString));
   }, [getStorage, props.stateKey]);
   var onResizeStart = function onResizeStart(event, index, isKeyDown) {
-    gutterRef.current = gutterRefs.current[index];
     var pageX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
     var pageY = event.type === 'touchstart' ? event.touches[0].pageY : event.pageY;
-    var horizontal = props.layout === 'horizontal';
+    gutterRef.current = gutterRefs.current[index];
     size.current = horizontal ? DomHandler.getWidth(elementRef.current) : DomHandler.getHeight(elementRef.current);
     dragging.current = true;
     startPos.current = horizontal ? pageX : pageY;
@@ -50091,7 +51075,6 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var step = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var isKeyDown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var newPos, newNextPanelSize, newPrevPanelSize;
-    var horizontal = props.layout === 'horizontal';
     var pageX = event.type === 'touchmove' ? event.touches[0].pageX : event.pageX;
     var pageY = event.type === 'touchmove' ? event.touches[0].pageY : event.pageY;
     if (isKeyDown) {
@@ -50141,7 +51124,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     switch (event.code) {
       case 'ArrowLeft':
         {
-          if (props.layout === 'horizontal') {
+          if (horizontal) {
             setTimer(event, index, props.step * -1);
           }
           event.preventDefault();
@@ -50149,7 +51132,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         }
       case 'ArrowRight':
         {
-          if (props.layout === 'horizontal') {
+          if (horizontal) {
             setTimer(event, index, props.step);
           }
           event.preventDefault();
@@ -50157,7 +51140,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         }
       case 'ArrowDown':
         {
-          if (props.layout === 'vertical') {
+          if (!horizontal) {
             setTimer(event, index, props.step * -1);
           }
           event.preventDefault();
@@ -50165,7 +51148,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         }
       case 'ArrowUp':
         {
-          if (props.layout === 'vertical') {
+          if (!horizontal) {
             setTimer(event, index, props.step);
           }
           event.preventDefault();
@@ -50185,7 +51168,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         }
       case 'Enter':
         {
-          if (prevSize.current > 99) {
+          if (prevSize.current > 100 - (minSize || 5)) {
             resizePanel(index, minSize, 100);
           } else {
             resizePanel(index, 100, minSize);
@@ -50214,14 +51197,16 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     onResize(event, step, true);
   };
   var setTimer = function setTimer(event, index, step) {
-    clearTimer();
-    timer.current = setTimeout(function () {
-      repeat(event, index, step);
-    }, 40);
+    if (!timer.current) {
+      timer.current = setInterval(function () {
+        repeat(event, index, step);
+      }, 40);
+    }
   };
   var clearTimer = function clearTimer() {
     if (timer.current) {
-      clearTimeout(timer.current);
+      clearInterval(timer.current);
+      timer.current = null;
     }
   };
   var onGutterMouseDown = function onGutterMouseDown(event, index) {
@@ -50282,7 +51267,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         return gutterRefs.current[index] = el;
       },
       className: cx('gutter'),
-      style: props.layout === 'horizontal' ? {
+      style: horizontal ? {
         width: props.gutterSize + 'px'
       } : {
         height: props.gutterSize + 'px'
@@ -50309,7 +51294,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var gutterHandlerProps = mergeProps({
       tabIndex: getPanelProp(panel, 'tabIndex') || 0,
       className: cx('gutterHandler'),
-      'aria-orientation': props.layout === 'horizontal' ? 'vertical' : 'horizontal',
+      'aria-orientation': horizontal ? 'vertical' : 'horizontal',
       'aria-controls': panelId,
       'aria-label': getPanelProp(panel, 'aria-label'),
       'aria-labelledby': getPanelProp(panel, 'aria-labelledby'),
@@ -51245,8 +52230,10 @@ var TabViewBase = ComponentBase.extend({
 var TabPanelBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TabPanel',
+    children: undefined,
     className: null,
     closable: false,
+    closeIcon: null,
     contentClassName: null,
     contentStyle: null,
     disabled: false,
@@ -51255,12 +52242,11 @@ var TabPanelBase = ComponentBase.extend({
     headerStyle: null,
     headerTemplate: null,
     leftIcon: null,
-    rightIcon: null,
-    prevButton: null,
     nextButton: null,
-    closeIcon: null,
+    prevButton: null,
+    rightIcon: null,
     style: null,
-    children: undefined
+    visible: true
   },
   getCProp: function getCProp(tab, name) {
     return ObjectUtils.getComponentProp(tab, name, TabPanelBase.defaultProps);
@@ -51354,7 +52340,7 @@ var TabView = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     return TabPanelBase.getCProp(tab, name);
   };
   var shouldUseTab = function shouldUseTab(tab) {
-    return tab && ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every(function (_i) {
+    return tab && getTabProp(tab, 'visible') && ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every(function (_i) {
       return _i !== tab.key;
     });
   };
@@ -51772,7 +52758,7 @@ var TabView = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
       ref: prevBtnRef,
       type: 'button',
       className: cx('prevbutton'),
-      'aria-label': ariaLabel$1('previousPageLabel'),
+      'aria-label': ariaLabel('previousPageLabel'),
       onClick: function onClick(e) {
         return navBackward();
       }
@@ -51794,7 +52780,7 @@ var TabView = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
       ref: nextBtnRef,
       type: 'button',
       className: cx('nextbutton'),
-      'aria-label': ariaLabel$1('nextPageLabel'),
+      'aria-label': ariaLabel('nextPageLabel'),
       onClick: function onClick(e) {
         return navForward();
       }
@@ -52632,14 +53618,13 @@ var ToggleButtonBase = ComponentBase.extend({
 function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var context = React__namespace.useContext(PrimeReactContext);
+  var props = ToggleButtonBase.getProps(inProps, context);
+  var elementRef = React__namespace.useRef(null);
   var _React$useState = React__namespace.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
-  var mergeProps = useMergeProps();
-  var context = React__namespace.useContext(PrimeReactContext);
-  var props = ToggleButtonBase.getProps(inProps, context);
-  var elementRef = React__namespace.useRef(null);
   var _ToggleButtonBase$set = ToggleButtonBase.setMetaData({
       props: props,
       state: {
@@ -52675,6 +53660,12 @@ var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
       });
     }
   };
+  var onKeyDown = function onKeyDown(event) {
+    if (event.keyCode === 32) {
+      toggle(event);
+      event.preventDefault();
+    }
+  };
   var onFocus = function onFocus(event) {
     setFocusedState(true);
     props.onFocus && props.onFocus(event);
@@ -52683,12 +53674,6 @@ var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
     setFocusedState(false);
     props.onBlur && props.onBlur(event);
   };
-  var onKeyDown = function onKeyDown(event) {
-    if (event.keyCode === 32) {
-      toggle(event);
-      event.preventDefault();
-    }
-  };
   var createIcon = function createIcon() {
     if (hasIcon) {
       var iconProps = mergeProps({
@@ -52738,7 +53723,9 @@ var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
     onKeyDown: onKeyDown,
     tabIndex: tabIndex,
     role: 'button',
-    'aria-pressed': props.checked
+    'aria-pressed': props.checked,
+    'data-p-highlight': props.checked,
+    'data-p-disabled': props.disabled
   }, ToggleButtonBase.getOtherProps(props), ptm('root'));
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, iconElement, /*#__PURE__*/React__namespace.createElement("span", labelProps, label), /*#__PURE__*/React__namespace.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
     target: elementRef,
@@ -56004,7 +56991,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
     return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false;
   };
   var createToggler = function createToggler(column) {
-    var label = expanded ? ariaLabel$1('collapseLabel') : ariaLabel$1('expandLabel');
+    var label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
     var rowTogglerIconProps = mergeProps({
       className: cx('rowTogglerIcon'),
       'aria-hidden': true
@@ -58245,7 +59232,7 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
     setFocusedState(false);
   };
   var onKeyDown = function onKeyDown(e) {
-    if (e.keyCode === 32) {
+    if (e.code === 'Enter' || e.code === 'Space') {
       toggle(e);
       e.preventDefault();
     }
@@ -58284,7 +59271,7 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
   var checkIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, checkIconProps), {
     props: props
   });
-  var ariaValueLabel = props.value ? ariaLabel$1('trueLabel') : props.value === false ? ariaLabel$1('falseLabel') : ariaLabel$1('nullLabel');
+  var ariaValueLabel = props.value ? ariaLabel('trueLabel') : props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
   var ariaChecked = props.value ? 'true' : 'false';
   var checkboxProps = mergeProps(_objectSpread({
     className: cx('checkbox', {
@@ -58304,7 +59291,8 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
   var rootProps = mergeProps({
     className: classNames(props.className, cx('root')),
     style: props.style,
-    onClick: onClick
+    onClick: onClick,
+    'data-p-disabled': props.disabled
   }, TriStateCheckboxBase.getOtherProps(props), ptm('root'));
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
     id: props.id,
@@ -58485,7 +59473,7 @@ exports.WindowMinimizeIcon = WindowMinimizeIcon;
 exports.ZIndexUtils = ZIndexUtils;
 exports._mergeProps = _mergeProps;
 exports.addLocale = addLocale;
-exports.ariaLabel = ariaLabel$1;
+exports.ariaLabel = ariaLabel;
 exports.classNames = classNames;
 exports.confirmDialog = confirmDialog;
 exports.confirmPopup = confirmPopup;