primereact 10.4.0 → 10.5.0

package/primereact.all.esm.js

@@ -2916,7 +2916,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];
@@ -11815,11 +11815,14 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }
       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();
   };
@@ -11870,7 +11873,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       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();
         });
@@ -12250,7 +12253,12 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       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;
   };
@@ -15675,6 +15683,8 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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'));
@@ -15859,22 +15869,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
     });
   }
 };
@@ -15927,6 +15944,10 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    focusedIndex = _React$useState4[0],
+    setFocusedIndex = _React$useState4[1];
   var _ChipsBase$setMetaDat = ChipsBase.setMetaData({
       props: props,
       state: {
@@ -15996,26 +16017,71 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
   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);
@@ -16070,8 +16136,16 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
       }
     }
   };
+  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) {
@@ -16121,6 +16195,9 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
       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'),
@@ -16146,9 +16223,19 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     var label = /*#__PURE__*/React.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.createElement("li", tokenProps, label, icon);
   };
@@ -16188,13 +16275,24 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     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.createElement("ul", containerProps, items, input);
   };
@@ -16207,7 +16305,8 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     ref: elementRef,
     className: classNames(props.className, cx('root', {
       isFilled: isFilled,
-      focusedState: focusedState
+      focusedState: focusedState,
+      disabled: props.disabled
     })),
     style: props.style
   }, ptm('root'));
@@ -20028,7 +20127,7 @@ var FirstPageLink = /*#__PURE__*/React.memo(function (inProps) {
     }),
     onClick: props.onClick,
     disabled: props.disabled,
-    'aria-label': ariaLabel$1('firstPageLabel')
+    'aria-label': ariaLabel('firstPageLabel')
   }, getPTOptions('firstPageButton'));
   var element = /*#__PURE__*/React.createElement("button", firstPageButtonProps, firstPageLinkIcon, /*#__PURE__*/React.createElement(Ripple, null));
   if (props.template) {
@@ -20438,36 +20537,36 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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);
@@ -20475,7 +20574,7 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         break;
 
       //backspace
-      case 8:
+      case 'Backspace':
         event.preventDefault();
         if (selectionStart === selectionEnd) {
           var deleteChar = inputValue.charAt(selectionStart - 1);
@@ -20519,7 +20618,7 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         break;
 
       // del
-      case 46:
+      case 'Delete':
         event.preventDefault();
         if (selectionStart === selectionEnd) {
           var _deleteChar = inputValue.charAt(selectionStart);
@@ -20554,14 +20653,18 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
           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) {
@@ -21222,7 +21325,7 @@ var JumpToPageInput = /*#__PURE__*/React.memo(function (inProps) {
       onChange: onChange,
       disabled: props.disabled,
       className: 'p-paginator-page-input',
-      ariaLabel: ariaLabelValue,
+      'aria-label': ariaLabelValue,
       element: element,
       props: props
     };
@@ -21266,7 +21369,7 @@ var LastPageLink = /*#__PURE__*/React.memo(function (inProps) {
     }),
     onClick: props.onClick,
     disabled: props.disabled,
-    'aria-label': ariaLabel$1('lastPageLabel')
+    'aria-label': ariaLabel('lastPageLabel')
   }, getPTOptions('lastPageButton'));
   var element = /*#__PURE__*/React.createElement("button", lastPageButtonProps, lastPageLinkIcon, /*#__PURE__*/React.createElement(Ripple, null));
   if (props.template) {
@@ -21318,7 +21421,7 @@ var NextPageLink = /*#__PURE__*/React.memo(function (inProps) {
     }),
     onClick: props.onClick,
     disabled: props.disabled,
-    'aria-label': ariaLabel$1('nextPageLabel')
+    'aria-label': ariaLabel('nextPageLabel')
   }, getPTOptions('nextPageButton'));
   var element = /*#__PURE__*/React.createElement("button", nextPageButtonProps, nextPageLinkIcon, /*#__PURE__*/React.createElement(Ripple, null));
   if (props.template) {
@@ -21382,7 +21485,7 @@ var PageLinks = /*#__PURE__*/React.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
@@ -21401,7 +21504,7 @@ var PageLinks = /*#__PURE__*/React.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,
@@ -21458,7 +21561,7 @@ var PrevPageLink = /*#__PURE__*/React.memo(function (inProps) {
     }),
     onClick: props.onClick,
     disabled: props.disabled,
-    'aria-label': ariaLabel$1('previousPageLabel')
+    'aria-label': ariaLabel('previousPageLabel')
   }, getPTOptions('prevPageButton'));
   var element = /*#__PURE__*/React.createElement("button", prevPageButtonProps, prevPageLinkIcon, /*#__PURE__*/React.createElement(Ripple, null));
   if (props.template) {
@@ -21531,10 +21634,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
     });
   },
@@ -21601,6 +21707,8 @@ var DropdownBase = ComponentBase.extend({
     onShow: null,
     optionDisabled: null,
     optionGroupChildren: 'items',
+    selectOnFocus: false,
+    autoOptionFocus: false,
     optionGroupLabel: null,
     optionGroupTemplate: null,
     optionLabel: null,
@@ -21639,7 +21747,9 @@ var DropdownItem = /*#__PURE__*/React.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: {
@@ -21648,7 +21758,7 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
       }
     });
   };
-  var _onClick = function onClick(event) {
+  var _onClick = function onClick(event, i) {
     if (props.onClick) {
       props.onClick({
         originalEvent: event,
@@ -21663,7 +21773,9 @@ var DropdownItem = /*#__PURE__*/React.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) {
@@ -21672,6 +21784,7 @@ var DropdownItem = /*#__PURE__*/React.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.createElement("li", itemProps, content, /*#__PURE__*/React.createElement(Ripple, null));
@@ -21743,6 +21856,8 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       var disabled = props.isOptionDisabled(option);
       return /*#__PURE__*/React.createElement(DropdownItem, {
         key: optionKey,
+        index: j,
+        focusedOptionIndex: props.focusedOptionIndex,
         label: optionLabel,
         option: option,
         style: style,
@@ -21790,6 +21905,8 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       return /*#__PURE__*/React.createElement(DropdownItem, {
         key: optionKey,
         label: optionLabel,
+        index: index,
+        focusedOptionIndex: props.focusedOptionIndex,
         option: option,
         style: style,
         template: props.itemTemplate,
@@ -21982,20 +22099,30 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     setFilterState = _React$useState2[1];
   var _React$useState3 = React.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.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.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    focusedOptionIndex = _React$useState8[0],
+    setFocusedOptionIndex = _React$useState8[1];
+  var _React$useState9 = React.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    overlayVisibleState = _React$useState10[0],
+    setOverlayVisibleState = _React$useState10[1];
   var elementRef = React.useRef(null);
   var overlayRef = React.useRef(null);
+  var firstHiddenFocusableElementOnOverlay = React.useRef(null);
+  var lastHiddenFocusableElementOnOverlay = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
   var focusInputRef = React.useRef(props.focusInputRef);
   var virtualScrollerRef = React.useRef(null);
   var searchTimeout = React.useRef(null);
   var searchValue = React.useRef(null);
-  var currentSearchChar = React.useRef(null);
+  React.useRef(null);
   var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
   var hasFilter = ObjectUtils.isNotEmpty(filterState);
   var appendTo = props.appendTo || context && context.appendTo || PrimeReact.appendTo;
@@ -22059,6 +22186,14 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       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');
   };
@@ -22078,6 +22213,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       DomHandler.focus(focusInputRef.current);
       overlayVisibleState ? hide() : show();
     }
+    setClicked(true);
   };
   var onInputFocus = function onInputFocus(event) {
     if (props.showOnFocus && !overlayVisibleState) {
@@ -22109,6 +22245,15 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }, 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,
@@ -22116,189 +22261,285 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     });
   };
   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,
@@ -22428,10 +22669,17 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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']);
@@ -22484,6 +22732,9 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   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);
@@ -22632,8 +22883,9 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         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.createElement("input", inputProps);
@@ -22725,10 +22977,31 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     },
     onMouseDown: props.onMouseDown,
     onContextMenu: props.onContextMenu,
+    onFocus: onFocus,
     'data-p-disabled': props.disabled,
     'data-p-focus': focusedState
   }, otherProps, ptm('root'));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.createElement("span", firstHiddenFocusableElementProps), /*#__PURE__*/React.createElement(DropdownPanel, _extends({
     hostName: "Dropdown",
     ref: overlayRef,
     visibleOptions: visibleOptions,
@@ -22737,6 +23010,8 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     appendTo: appendTo,
     onClick: onPanelClick,
     onOptionClick: onOptionClick,
+    focusedOptionIndex: focusedOptionIndex,
+    setFocusedOptionIndex: setFocusedOptionIndex,
     filterValue: filterState,
     hasFilter: hasFilter,
     onFilterClearIconClick: onFilterClearIconClick,
@@ -22759,7 +23034,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     ptm: ptm,
     cx: cx,
     sx: sx
-  }))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  })), /*#__PURE__*/React.createElement("span", lastHiddenFocusableElementProps)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions, {
@@ -22780,7 +23055,7 @@ var RowsPerPageDropdown = /*#__PURE__*/React.memo(function (inProps) {
     };
   }) : [];
   var placeholderValue = localeOption('choose');
-  var ariaLabelValue = ariaLabel$1('rowsPerPage');
+  var ariaLabelValue = ariaLabel('jumpToPageDropdownLabel');
   var element = hasOptions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
     value: props.value,
     options: options,
@@ -24215,7 +24490,7 @@ var BodyCell = /*#__PURE__*/React.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.createElement(React.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React.createElement(RowRadioButton, {
         hostName: props.hostName,
@@ -24270,7 +24545,7 @@ var BodyCell = /*#__PURE__*/React.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')
@@ -24325,19 +24600,19 @@ var BodyCell = /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", rowEditorSaveButtonProps, rowEditorSaveIcon, /*#__PURE__*/React.createElement(Ripple, null)), /*#__PURE__*/React.createElement("button", rowEditorCancelButtonProps, rowEditorCancelIcon, /*#__PURE__*/React.createElement(Ripple, null)));
       } else {
         rowEditorProps = {
@@ -24348,11 +24623,11 @@ var BodyCell = /*#__PURE__*/React.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.createElement("button", rowEditorInitButtonProps, rowEditorInitIcon, /*#__PURE__*/React.createElement(Ripple, null));
       }
       if (body) {
@@ -24999,7 +25274,7 @@ var RowTogglerButton = /*#__PURE__*/React.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) {
@@ -26845,7 +27120,7 @@ var ColumnFilter = /*#__PURE__*/React.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', {
@@ -26968,7 +27243,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         __parentMetadata: {
           parent: props.metaData
         },
-        "aria-label": ariaLabel$1('filterOperator')
+        "aria-label": ariaLabel('filterOperator')
       }));
     }
     return null;
@@ -26988,7 +27263,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
         __parentMetadata: {
           parent: props.metaData
         },
-        "aria-label": ariaLabel$1('filterConstraint')
+        "aria-label": ariaLabel('filterConstraint')
       });
     }
     return null;
@@ -27259,7 +27534,7 @@ var HeaderCheckbox = /*#__PURE__*/React.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();
@@ -34738,7 +35013,9 @@ var InputSwitch = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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'
@@ -34939,6 +35216,7 @@ var KnobBase = ComponentBase.extend({
     disabled: false,
     readOnly: false,
     showValue: true,
+    tabIndex: 0,
     step: 1,
     min: 0,
     max: 100,
@@ -35102,6 +35380,15 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       });
     }
   };
+  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);
@@ -35124,6 +35411,48 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     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.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -35151,6 +35480,13 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     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);
     },
@@ -35165,6 +35501,9 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     },
     onTouchEnd: function onTouchEnd(e) {
       return _onTouchEnd();
+    },
+    onKeyDown: function onKeyDown(e) {
+      return _onKeyDown(e);
     }
   }, ptm('svg'));
   var rangeProps = mergeProps({
@@ -35183,28 +35522,26 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
 }));
 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);
   },
@@ -35213,22 +35550,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,
@@ -35244,29 +35581,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,
@@ -35363,7 +35684,8 @@ var ListBoxItem = /*#__PURE__*/React.memo(function (props) {
       context: {
         selected: props.selected,
         disabled: props.disabled,
-        focused: focusedState
+        focused: focusedState,
+        focusedOptionIndex: props.focusedOptionIndex
       }
     });
   };
@@ -35373,15 +35695,6 @@ var ListBoxItem = /*#__PURE__*/React.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({
@@ -35390,47 +35703,17 @@ var ListBoxItem = /*#__PURE__*/React.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',
@@ -35454,12 +35737,25 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = ListBoxBase.getProps(inProps, context);
-  var _React$useState = React.useState(''),
+  var _React$useState = React.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.useRef(null);
+  var firstHiddenFocusableElement = React.useRef(null);
+  var lastHiddenFocusableElement = React.useRef(null);
+  var _React$useState3 = React.useState(-1),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    startRangeIndex = _React$useState4[0],
+    setStartRangeIndex = _React$useState4[1];
+  var _React$useState5 = React.useState(''),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    filterValueState = _React$useState6[0],
+    setFilterValueState = _React$useState6[1];
   var elementRef = React.useRef(null);
   var virtualScrollerRef = React.useRef(null);
+  var id = React.useRef(UniqueComponentId());
+  var listRef = React.useRef(null);
   var optionTouched = React.useRef(false);
   var filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
   var hasFilter = filteredValue && filteredValue.trim().length > 0;
@@ -35473,13 +35769,14 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
   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) {
@@ -35548,6 +35845,269 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
       });
     }
   };
+  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,
@@ -35640,6 +36200,23 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     }
     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);
   };
@@ -35728,8 +36305,9 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
       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.createElement(ListBoxItem, {
+        id: id.current + '_' + j,
         hostName: "ListBox",
         key: optionKey,
         label: optionLabel,
@@ -35738,8 +36316,9 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
         template: props.itemTemplate,
         selected: isSelected(option),
         onClick: onOptionSelect,
+        index: j,
+        focusedOptionIndex: focusedOptionIndex,
         onTouchEnd: onOptionTouchEnd,
-        tabIndex: tabIndex,
         disabled: disabled,
         ptCallbacks: ptCallbacks,
         metaData: metaData
@@ -35769,18 +36348,20 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
       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.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
@@ -35824,6 +36405,7 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
               options: options
             }),
             role: 'listbox',
+            tabIndex: '-1',
             'aria-multiselectable': props.multiple
           }, ariaProps), ptCallbacks.ptm('list'));
           return /*#__PURE__*/React.createElement("ul", listProps, options.children);
@@ -35837,9 +36419,12 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     } 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.createElement("ul", listProps, items);
     }
@@ -35860,7 +36445,27 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     className: ptCallbacks.cx('root'),
     style: props.style
   }, ListBoxBase.getOtherProps(props), ptCallbacks.ptm('root'));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, header, /*#__PURE__*/React.createElement("div", wrapperProps, list)), hasTooltip && /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("span", hiddenFirstElement), header, /*#__PURE__*/React.createElement("div", wrapperProps, list), /*#__PURE__*/React.createElement("span", hiddenLastElement)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions, {
@@ -37041,7 +37646,7 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       '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);
@@ -37737,7 +38342,8 @@ var Menu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       props: props,
       state: {
         id: idState,
-        visible: visibleState
+        visible: visibleState,
+        focused: focused
       }
     }),
     ptm = _MenuBase$setMetaData.ptm,
@@ -38036,7 +38642,7 @@ var Menu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       'aria-disabled': item.disabled,
       'data-p-disabled': item.disabled
     }, ptm('action'));
-    var content = /*#__PURE__*/React.createElement("div", contentProps, /*#__PURE__*/React.createElement("a", actionProps, icon, label));
+    var content = /*#__PURE__*/React.createElement("div", contentProps, /*#__PURE__*/React.createElement("a", actionProps, icon, label, /*#__PURE__*/React.createElement(Ripple, null)));
     if (item.template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
@@ -39090,7 +39696,7 @@ var Menubar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
       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) {
@@ -39309,7 +39915,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',
@@ -39322,7 +39929,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;
@@ -39356,6 +39963,8 @@ var MultiSelectBase = ComponentBase.extend({
     filterBy: null,
     filterInputAutoFocus: true,
     filterLocale: undefined,
+    selectOnFocus: false,
+    autoOptionFocus: false,
     filterMatchMode: 'contains',
     filterPlaceholder: null,
     filterTemplate: null,
@@ -39579,7 +40188,9 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
       context: {
         selected: props.selected,
         disabled: props.disabled,
-        focused: focusedState
+        focused: focusedState,
+        focusedIndex: props.focusedIndex,
+        index: props.index
       }
     });
   };
@@ -39591,22 +40202,11 @@ var MultiSelectItem = /*#__PURE__*/React.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'));
@@ -39615,7 +40215,7 @@ var MultiSelectItem = /*#__PURE__*/React.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'));
@@ -39631,7 +40231,6 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
     })),
     style: props.style,
     onClick: onClick,
-    onKeyDown: onKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
     tabIndex: tabIndex,
@@ -39733,14 +40332,15 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       var selected = props.isSelected(option);
       return /*#__PURE__*/React.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,
@@ -39791,13 +40391,14 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       return /*#__PURE__*/React.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,
@@ -39926,19 +40527,35 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = MultiSelectBase.getProps(inProps, context);
-  var _React$useState = React.useState(''),
+  var _React$useState = React.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.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    focusedState = _React$useState4[0],
-    setFocusedState = _React$useState4[1];
-  var _React$useState5 = React.useState(props.inline),
+    clicked = _React$useState4[0],
+    setClicked = _React$useState4[1];
+  var _React$useState5 = React.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.useState(-1),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    startRangeIndex = _React$useState8[0],
+    setStartRangeIndex = _React$useState8[1];
+  var _React$useState9 = React.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    focusedState = _React$useState10[0],
+    setFocusedState = _React$useState10[1];
+  var _React$useState11 = React.useState(props.inline),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    overlayVisibleState = _React$useState12[0],
+    setOverlayVisibleState = _React$useState12[1];
   var elementRef = React.useRef(null);
+  var searchValue = React.useRef(null);
+  var searchTimeout = React.useRef(null);
+  var firstHiddenFocusableElementOnOverlay = React.useRef(null);
+  var lastHiddenFocusableElementOnOverlay = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
   var labelRef = React.useRef(null);
   var overlayRef = React.useRef(null);
@@ -39980,6 +40597,14 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     _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,
@@ -39989,63 +40614,60 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   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)) {
@@ -40053,42 +40675,170 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       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) {
@@ -40174,9 +40924,13 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   };
   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']);
@@ -40370,6 +41124,100 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   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);
@@ -40510,6 +41358,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     setTimeout(function () {
       props.overlayVisible ? show() : hide();
     }, 100);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.overlayVisible]);
   useUpdateEffect(function () {
     if (overlayVisibleState && filterState && hasFilter) {
@@ -40594,11 +41443,31 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
     readOnly: true
-  }))), !props.inline && /*#__PURE__*/React.createElement(React.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React.createElement(MultiSelectPanel, _extends({
+  }))), !props.inline && /*#__PURE__*/React.createElement(React.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React.createElement("span", firstHiddenElementProps), /*#__PURE__*/React.createElement(MultiSelectPanel, _extends({
     hostName: "MultiSelect",
     ref: overlayRef,
     visibleOptions: visibleOptions
@@ -40606,6 +41475,8 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     onClick: onPanelClick,
     onOverlayHide: hide,
     filterValue: filterState,
+    focusedOptionIndex: focusedOptionIndex,
+    setFocusedOptionIndex: setFocusedOptionIndex,
     hasFilter: hasFilter,
     onFilterInputChange: onFilterInputChange,
     resetFilter: resetFilter,
@@ -40622,7 +41493,6 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     isAllSelected: isAllSelected,
     onOptionSelect: onOptionSelect,
     allowOptionSelect: allowOptionSelect,
-    onOptionKeyDown: onOptionKeyDown,
     "in": overlayVisibleState,
     onEnter: onOverlayEnter,
     onEntered: onOverlayEntered,
@@ -40633,7 +41503,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     sx: sx,
     isUnstyled: isUnstyled,
     metaData: metaData
-  }))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  })), /*#__PURE__*/React.createElement("span", lastHiddenElementProps)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions, {
@@ -40838,7 +41708,7 @@ var MultiStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
   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,
@@ -41047,7 +41917,7 @@ var OrderListControls = /*#__PURE__*/React.memo(function (props) {
     icon: moveUpIcon,
     onClick: moveUp,
     disabled: isMoveDisabled,
-    'aria-label': ariaLabel$1('moveUp'),
+    'aria-label': ariaLabel('moveUp'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -41058,7 +41928,7 @@ var OrderListControls = /*#__PURE__*/React.memo(function (props) {
     icon: moveTopIcon,
     onClick: moveTop,
     disabled: isMoveDisabled,
-    'aria-label': ariaLabel$1('moveTop'),
+    'aria-label': ariaLabel('moveTop'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -41069,7 +41939,7 @@ var OrderListControls = /*#__PURE__*/React.memo(function (props) {
     icon: moveDownIcon,
     onClick: moveDown,
     disabled: isMoveDisabled,
-    'aria-label': ariaLabel$1('moveDown'),
+    'aria-label': ariaLabel('moveDown'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -41080,7 +41950,7 @@ var OrderListControls = /*#__PURE__*/React.memo(function (props) {
     icon: moveBottomIcon,
     onClick: moveBottom,
     disabled: isMoveDisabled,
-    'aria-label': ariaLabel$1('moveBottom'),
+    'aria-label': ariaLabel('moveBottom'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -42858,7 +43728,7 @@ var PanelMenuSub = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       tabIndex: '-1',
       'aria-hidden': true
     }, getPTOptions(processedItem, 'action', index));
-    var content = /*#__PURE__*/React.createElement("a", actionProps, submenuIcon, icon, label);
+    var content = /*#__PURE__*/React.createElement("a", actionProps, submenuIcon, icon, label, /*#__PURE__*/React.createElement(Ripple, null));
     if (item.template) {
       var defaultContentOptions = {
         className: linkClassName,
@@ -44041,17 +44911,19 @@ var Password = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     var hideIconProps = mergeProps(ptm('hideIcon'));
     var showIconProps = mergeProps(ptm('showIcon'));
     if (unmaskedState) {
-      icon = props.hideIcon || /*#__PURE__*/React.createElement(EyeSlashIcon, hideIconProps);
+      icon = props.hideIcon || /*#__PURE__*/React.createElement(EyeSlashIcon, _extends({}, hideIconProps, {
+        onClick: toggleMask
+      }));
     } else {
-      icon = props.showIcon || /*#__PURE__*/React.createElement(EyeIcon, showIconProps);
+      icon = props.showIcon || /*#__PURE__*/React.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.createElement("i", {
-        onClick: toggleMask
-      }, " ", eyeIcon, " ");
+      var content = eyeIcon;
       if (props.icon) {
         var defaultIconOptions = {
           onClick: toggleMask,
@@ -44370,7 +45242,7 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveUp,
     pt: ptm('moveUpButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveUp'),
+    "aria-label": ariaLabel('moveUp'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44381,7 +45253,7 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveTop,
     pt: ptm('moveTopButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveTop'),
+    "aria-label": ariaLabel('moveTop'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44392,7 +45264,7 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveDown,
     pt: ptm('moveDownButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveDown'),
+    "aria-label": ariaLabel('moveDown'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44403,7 +45275,7 @@ var PickListControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveBottom,
     pt: ptm('moveBottomButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveBottom'),
+    "aria-label": ariaLabel('moveBottom'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44747,7 +45619,7 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveRight,
     pt: ptm('moveToTargetButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveToTarget'),
+    "aria-label": ariaLabel('moveToTarget'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44758,7 +45630,7 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveAllRight,
     pt: ptm('moveAllToTargetButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveAllToTarget'),
+    "aria-label": ariaLabel('moveAllToTarget'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44769,7 +45641,7 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveLeft,
     pt: ptm('moveToSourceButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveToSource'),
+    "aria-label": ariaLabel('moveToSource'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -44780,7 +45652,7 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
     onClick: moveAllLeft,
     pt: ptm('moveAllToSourceButton'),
     unstyled: unstyled,
-    "aria-label": ariaLabel$1('moveAllToSource'),
+    "aria-label": ariaLabel('moveAllToSource'),
     __parentMetadata: {
       parent: props.metaData
     }
@@ -45718,6 +46590,7 @@ var RadioButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
+    checked: props.checked,
     disabled: props.disabled,
     required: props.required,
     tabIndex: props.tabIndex
@@ -45748,9 +46621,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',
@@ -45798,6 +46676,14 @@ var Rating = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = RatingBase.getProps(inProps, context);
+  var _React$useState = React.useState(-1),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedOptionIndex = _React$useState2[0],
+    setFocusedOptionIndex = _React$useState2[1];
+  var _React$useState3 = React.useState(true),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isFocusVisibleItem = _React$useState4[0];
+    _React$useState4[1];
   var elementRef = React.useRef(null);
   var _RatingBase$setMetaDa = RatingBase.setMetaData({
       props: props
@@ -45835,6 +46721,7 @@ var Rating = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
         }
       });
     }
+    setFocusedOptionIndex(i);
     event.preventDefault();
   };
   var clear = function clear(event) {
@@ -45858,10 +46745,30 @@ var Rating = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
     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);
@@ -45891,14 +46798,24 @@ var Rating = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
       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.createElement("div", _extends({
@@ -46507,7 +47424,8 @@ var SelectButtonItem = /*#__PURE__*/React.memo(function (props) {
       }
     });
   };
-  var onClick = function onClick(event) {
+  var _onClick = function onClick(event, index) {
+    props.setFocusedIndex(index);
     if (props.onClick) {
       props.onClick({
         originalEvent: event,
@@ -46521,13 +47439,46 @@ var SelectButtonItem = /*#__PURE__*/React.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')
@@ -46543,9 +47494,14 @@ var SelectButtonItem = /*#__PURE__*/React.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'));
@@ -46557,6 +47513,10 @@ var SelectButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = SelectButtonBase.getProps(inProps, context);
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focusedIndex = _React$useState2[0],
+    setFocusedIndex = _React$useState2[1];
   var elementRef = React.useRef(null);
   var _SelectButtonBase$set = SelectButtonBase.setMetaData({
       props: props
@@ -46629,7 +47589,7 @@ var SelectButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       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.createElement(SelectButtonItem, {
@@ -46638,13 +47598,16 @@ var SelectButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
           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
         });
       });
     }
@@ -47736,10 +48699,31 @@ var Slider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
     }
     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) {
@@ -49942,6 +50926,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   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: {
@@ -50036,10 +51021,9 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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;
@@ -50064,7 +51048,6 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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) {
@@ -50114,7 +51097,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     switch (event.code) {
       case 'ArrowLeft':
         {
-          if (props.layout === 'horizontal') {
+          if (horizontal) {
             setTimer(event, index, props.step * -1);
           }
           event.preventDefault();
@@ -50122,7 +51105,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         }
       case 'ArrowRight':
         {
-          if (props.layout === 'horizontal') {
+          if (horizontal) {
             setTimer(event, index, props.step);
           }
           event.preventDefault();
@@ -50130,7 +51113,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         }
       case 'ArrowDown':
         {
-          if (props.layout === 'vertical') {
+          if (!horizontal) {
             setTimer(event, index, props.step * -1);
           }
           event.preventDefault();
@@ -50138,7 +51121,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         }
       case 'ArrowUp':
         {
-          if (props.layout === 'vertical') {
+          if (!horizontal) {
             setTimer(event, index, props.step);
           }
           event.preventDefault();
@@ -50158,7 +51141,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         }
       case 'Enter':
         {
-          if (prevSize.current > 99) {
+          if (prevSize.current > 100 - (minSize || 5)) {
             resizePanel(index, minSize, 100);
           } else {
             resizePanel(index, 100, minSize);
@@ -50187,14 +51170,16 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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) {
@@ -50255,7 +51240,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         return gutterRefs.current[index] = el;
       },
       className: cx('gutter'),
-      style: props.layout === 'horizontal' ? {
+      style: horizontal ? {
         width: props.gutterSize + 'px'
       } : {
         height: props.gutterSize + 'px'
@@ -50282,7 +51267,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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'),
@@ -51218,8 +52203,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,
@@ -51228,12 +52215,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);
@@ -51327,7 +52313,7 @@ var TabView = /*#__PURE__*/React.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;
     });
   };
@@ -51745,7 +52731,7 @@ var TabView = /*#__PURE__*/React.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();
       }
@@ -51767,7 +52753,7 @@ var TabView = /*#__PURE__*/React.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();
       }
@@ -52605,14 +53591,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.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var context = React.useContext(PrimeReactContext);
+  var props = ToggleButtonBase.getProps(inProps, context);
+  var elementRef = React.useRef(null);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
-  var mergeProps = useMergeProps();
-  var context = React.useContext(PrimeReactContext);
-  var props = ToggleButtonBase.getProps(inProps, context);
-  var elementRef = React.useRef(null);
   var _ToggleButtonBase$set = ToggleButtonBase.setMetaData({
       props: props,
       state: {
@@ -52648,6 +53633,12 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       });
     }
   };
+  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);
@@ -52656,12 +53647,6 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     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({
@@ -52711,7 +53696,9 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, iconElement, /*#__PURE__*/React.createElement("span", labelProps, label), /*#__PURE__*/React.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
@@ -55977,7 +56964,7 @@ var TreeTableRow = /*#__PURE__*/React.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
@@ -58218,7 +59205,7 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
     setFocusedState(false);
   };
   var onKeyDown = function onKeyDown(e) {
-    if (e.keyCode === 32) {
+    if (e.code === 'Enter' || e.code === 'Space') {
       toggle(e);
       e.preventDefault();
     }
@@ -58257,7 +59244,7 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
   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', {
@@ -58277,7 +59264,8 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
   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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     id: props.id,
@@ -58291,4 +59279,4 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
 }));
 TriStateCheckbox.displayName = 'TriStateCheckbox';
 
-export { Accordion, AccordionTab, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowDownIcon, ArrowUpIcon, AutoComplete, Avatar, AvatarGroup, Badge, BanIcon, BarsIcon, BlockUI, BreadCrumb, Button, CSSTransition, Calendar, CalendarIcon, Card, Carousel, CascadeSelect, PrimeReactChart as Chart, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ContextMenu, DataScroller, DataTable, DataView, DataViewItem, DataViewLayoutOptions, DeferredContent, Dialog, Divider, Dock, DomHandler, Dropdown, ESC_KEY_HANDLING_PRIORITIES, Editor, EventBus, ExclamationTriangleIcon, EyeIcon, EyeSlashIcon, Fieldset, FileUpload, FilterIcon, FilterMatchMode, FilterOperator, FilterService, FilterSlashIcon, Galleria, IconBase, IconUtils, Image, InfoCircleIcon, Inplace, InplaceContent, InplaceDisplay, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MegaMenu, Mention, Menu, Menubar, Message, MessageSeverity, Messages, MinusIcon, MultiSelect, MultiStateCheckbox, ObjectUtils, OrderList, OrganizationChart, OverlayPanel, OverlayService, Paginator, Panel, PanelMenu, Password, PencilIcon, PickList, PlusIcon, Portal, PrimeIcons, PrimeReactContext, PrimeReactProvider, ProgressBar, ProgressSpinner, RadioButton, Rating, RefreshIcon, Ripple, Row, ScrollPanel, ScrollTop, SearchIcon, SearchMinusIcon, SearchPlusIcon, SelectButton, Sidebar, Skeleton, SlideMenu, Slider, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon, SortOrder, SpeedDial, SpinnerIcon, SplitButton, Splitter, SplitterPanel, StarFillIcon, StarIcon, Steps, StyleClass, TabMenu, TabPanel, TabView, Tag, Terminal, TerminalService, ThLargeIcon, TieredMenu, Timeline, TimesCircleIcon, TimesIcon, Toast, ToggleButton, Toolbar, Tooltip, TrashIcon, Tree, TreeSelect, TreeTable, TriStateCheckbox, UndoIcon, UniqueComponentId, UploadIcon, VirtualScroller, WindowMaximizeIcon, WindowMinimizeIcon, ZIndexUtils, _mergeProps, addLocale, ariaLabel$1 as ariaLabel, classNames, confirmDialog, confirmPopup, PrimeReact as default, locale, localeOption, localeOptions, mask, mergeProps, updateLocaleOption, updateLocaleOptions, useClickOutside, useCounter, useDebounce, useDisplayOrder, useEventListener, useFavicon, useGlobalOnEscapeKey, useIntersectionObserver, useInterval, useLocalStorage, useMatchMedia, useMergeProps, useMountEffect, useMouse, useMove, useOverlayListener, useOverlayScrollListener, usePrevious, useResizeListener, useSessionStorage, useStorage, useStyle, useTimeout, useUnmountEffect, useUpdateEffect };
+export { Accordion, AccordionTab, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowDownIcon, ArrowUpIcon, AutoComplete, Avatar, AvatarGroup, Badge, BanIcon, BarsIcon, BlockUI, BreadCrumb, Button, CSSTransition, Calendar, CalendarIcon, Card, Carousel, CascadeSelect, PrimeReactChart as Chart, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ContextMenu, DataScroller, DataTable, DataView, DataViewItem, DataViewLayoutOptions, DeferredContent, Dialog, Divider, Dock, DomHandler, Dropdown, ESC_KEY_HANDLING_PRIORITIES, Editor, EventBus, ExclamationTriangleIcon, EyeIcon, EyeSlashIcon, Fieldset, FileUpload, FilterIcon, FilterMatchMode, FilterOperator, FilterService, FilterSlashIcon, Galleria, IconBase, IconUtils, Image, InfoCircleIcon, Inplace, InplaceContent, InplaceDisplay, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MegaMenu, Mention, Menu, Menubar, Message, MessageSeverity, Messages, MinusIcon, MultiSelect, MultiStateCheckbox, ObjectUtils, OrderList, OrganizationChart, OverlayPanel, OverlayService, Paginator, Panel, PanelMenu, Password, PencilIcon, PickList, PlusIcon, Portal, PrimeIcons, PrimeReactContext, PrimeReactProvider, ProgressBar, ProgressSpinner, RadioButton, Rating, RefreshIcon, Ripple, Row, ScrollPanel, ScrollTop, SearchIcon, SearchMinusIcon, SearchPlusIcon, SelectButton, Sidebar, Skeleton, SlideMenu, Slider, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon, SortOrder, SpeedDial, SpinnerIcon, SplitButton, Splitter, SplitterPanel, StarFillIcon, StarIcon, Steps, StyleClass, TabMenu, TabPanel, TabView, Tag, Terminal, TerminalService, ThLargeIcon, TieredMenu, Timeline, TimesCircleIcon, TimesIcon, Toast, ToggleButton, Toolbar, Tooltip, TrashIcon, Tree, TreeSelect, TreeTable, TriStateCheckbox, UndoIcon, UniqueComponentId, UploadIcon, VirtualScroller, WindowMaximizeIcon, WindowMinimizeIcon, ZIndexUtils, _mergeProps, addLocale, ariaLabel, classNames, confirmDialog, confirmPopup, PrimeReact as default, locale, localeOption, localeOptions, mask, mergeProps, updateLocaleOption, updateLocaleOptions, useClickOutside, useCounter, useDebounce, useDisplayOrder, useEventListener, useFavicon, useGlobalOnEscapeKey, useIntersectionObserver, useInterval, useLocalStorage, useMatchMedia, useMergeProps, useMountEffect, useMouse, useMove, useOverlayListener, useOverlayScrollListener, usePrevious, useResizeListener, useSessionStorage, useStorage, useStyle, useTimeout, useUnmountEffect, useUpdateEffect };