primereact 10.4.0 → 10.5.0

package/primereact.all.js

@@ -2937,7 +2937,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
    * @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];
@@ -11836,11 +11836,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
         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();
     };
@@ -11891,7 +11894,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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();
           });
@@ -12271,7 +12274,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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;
     };
@@ -15696,6 +15704,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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'));
@@ -15880,22 +15890,29 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   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
       });
     }
   };
@@ -15948,6 +15965,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      focusedIndex = _React$useState4[0],
+      setFocusedIndex = _React$useState4[1];
     var _ChipsBase$setMetaDat = ChipsBase.setMetaData({
         props: props,
         state: {
@@ -16017,26 +16038,71 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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);
@@ -16091,8 +16157,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
       }
     };
+    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) {
@@ -16142,6 +16216,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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'),
@@ -16167,9 +16244,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var label = /*#__PURE__*/React__namespace.createElement("span", labelProps, content);
       var icon = createRemoveIcon(value, index);
       var tokenProps = mergeProps({
-        key: index,
-        className: cx('token'),
-        'data-p-highlight': true
+        key: "".concat(index, "_").concat(value),
+        id: props.inputId + '_chips_item_' + index,
+        role: 'option',
+        'aria-label': value,
+        className: cx('token', {
+          focusedIndex: focusedIndex,
+          index: index
+        }),
+        'aria-selected': true,
+        'aria-setsize': props.value.length,
+        'aria-posinset': index + 1,
+        'data-p-highlight': true,
+        'data-p-focused': focusedIndex === index
       }, ptm('token'));
       return /*#__PURE__*/React__namespace.createElement("li", tokenProps, label, icon);
     };
@@ -16209,13 +16296,24 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var containerProps = mergeProps({
         ref: listRef,
         className: cx('container', {
-          focusedState: focusedState
+          isFilled: isFilled
         }),
         onClick: function onClick(e) {
           return onWrapperClick();
         },
+        onKeyDown: function onKeyDown(e) {
+          return onContainerKeyDown(e);
+        },
+        tabIndex: -1,
+        role: 'listbox',
+        'aria-orientation': 'horizontal',
+        'aria-labelledby': props.ariaLabelledby,
+        'aria-label': props.ariaLabel,
+        'aria-activedescendant': focusedState ? focusedOptionId() : undefined,
         'data-p-disabled': props.disabled,
-        'data-p-focus': focusedState
+        'data-p-focus': focusedState,
+        onFocus: onContainerFocus,
+        onBlur: onContainerBlur
       }, ptm('container'));
       return /*#__PURE__*/React__namespace.createElement("ul", containerProps, items, input);
     };
@@ -16228,7 +16326,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       ref: elementRef,
       className: classNames(props.className, cx('root', {
         isFilled: isFilled,
-        focusedState: focusedState
+        focusedState: focusedState,
+        disabled: props.disabled
       })),
       style: props.style
     }, ptm('root'));
@@ -20049,7 +20148,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }),
       onClick: props.onClick,
       disabled: props.disabled,
-      'aria-label': ariaLabel$1('firstPageLabel')
+      'aria-label': ariaLabel('firstPageLabel')
     }, getPTOptions('firstPageButton'));
     var element = /*#__PURE__*/React__namespace.createElement("button", firstPageButtonProps, firstPageLinkIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null));
     if (props.template) {
@@ -20459,36 +20558,36 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -20496,7 +20595,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           break;
 
         //backspace
-        case 8:
+        case 'Backspace':
           event.preventDefault();
           if (selectionStart === selectionEnd) {
             var deleteChar = inputValue.charAt(selectionStart - 1);
@@ -20540,7 +20639,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           break;
 
         // del
-        case 46:
+        case 'Delete':
           event.preventDefault();
           if (selectionStart === selectionEnd) {
             var _deleteChar = inputValue.charAt(selectionStart);
@@ -20575,14 +20674,18 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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) {
@@ -21243,7 +21346,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         onChange: onChange,
         disabled: props.disabled,
         className: 'p-paginator-page-input',
-        ariaLabel: ariaLabelValue,
+        'aria-label': ariaLabelValue,
         element: element,
         props: props
       };
@@ -21287,7 +21390,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }),
       onClick: props.onClick,
       disabled: props.disabled,
-      'aria-label': ariaLabel$1('lastPageLabel')
+      'aria-label': ariaLabel('lastPageLabel')
     }, getPTOptions('lastPageButton'));
     var element = /*#__PURE__*/React__namespace.createElement("button", lastPageButtonProps, lastPageLinkIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null));
     if (props.template) {
@@ -21339,7 +21442,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }),
       onClick: props.onClick,
       disabled: props.disabled,
-      'aria-label': ariaLabel$1('nextPageLabel')
+      'aria-label': ariaLabel('nextPageLabel')
     }, getPTOptions('nextPageButton'));
     var element = /*#__PURE__*/React__namespace.createElement("button", nextPageButtonProps, nextPageLinkIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null));
     if (props.template) {
@@ -21403,7 +21506,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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
@@ -21422,7 +21525,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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,
@@ -21479,7 +21582,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }),
       onClick: props.onClick,
       disabled: props.disabled,
-      'aria-label': ariaLabel$1('previousPageLabel')
+      'aria-label': ariaLabel('previousPageLabel')
     }, getPTOptions('prevPageButton'));
     var element = /*#__PURE__*/React__namespace.createElement("button", prevPageButtonProps, prevPageLinkIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null));
     if (props.template) {
@@ -21552,10 +21655,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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
       });
     },
@@ -21622,6 +21728,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onShow: null,
       optionDisabled: null,
       optionGroupChildren: 'items',
+      selectOnFocus: false,
+      autoOptionFocus: false,
       optionGroupLabel: null,
       optionGroupTemplate: null,
       optionLabel: null,
@@ -21660,7 +21768,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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: {
@@ -21669,7 +21779,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
       });
     };
-    var _onClick = function onClick(event) {
+    var _onClick = function onClick(event, i) {
       if (props.onClick) {
         props.onClick({
           originalEvent: event,
@@ -21684,7 +21794,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -21693,6 +21805,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       'aria-label': label,
       'aria-selected': selected,
       'data-p-highlight': selected,
+      'data-p-focused': focusedOptionIndex === index,
       'data-p-disabled': disabled
     }, getPTOptions('item'));
     return /*#__PURE__*/React__namespace.createElement("li", itemProps, content, /*#__PURE__*/React__namespace.createElement(Ripple, null));
@@ -21764,6 +21877,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var disabled = props.isOptionDisabled(option);
         return /*#__PURE__*/React__namespace.createElement(DropdownItem, {
           key: optionKey,
+          index: j,
+          focusedOptionIndex: props.focusedOptionIndex,
           label: optionLabel,
           option: option,
           style: style,
@@ -21811,6 +21926,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         return /*#__PURE__*/React__namespace.createElement(DropdownItem, {
           key: optionKey,
           label: optionLabel,
+          index: index,
+          focusedOptionIndex: props.focusedOptionIndex,
           option: option,
           style: style,
           template: props.itemTemplate,
@@ -22003,20 +22120,30 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       setFilterState = _React$useState2[1];
     var _React$useState3 = React__namespace.useState(false),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      focusedState = _React$useState4[0],
-      setFocusedState = _React$useState4[1];
+      clicked = _React$useState4[0],
+      setClicked = _React$useState4[1];
     var _React$useState5 = React__namespace.useState(false),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      overlayVisibleState = _React$useState6[0],
-      setOverlayVisibleState = _React$useState6[1];
+      focusedState = _React$useState6[0],
+      setFocusedState = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      focusedOptionIndex = _React$useState8[0],
+      setFocusedOptionIndex = _React$useState8[1];
+    var _React$useState9 = React__namespace.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      overlayVisibleState = _React$useState10[0],
+      setOverlayVisibleState = _React$useState10[1];
     var elementRef = React__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
+    var firstHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
+    var lastHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
     var focusInputRef = React__namespace.useRef(props.focusInputRef);
     var virtualScrollerRef = React__namespace.useRef(null);
     var searchTimeout = React__namespace.useRef(null);
     var searchValue = React__namespace.useRef(null);
-    var currentSearchChar = React__namespace.useRef(null);
+    React__namespace.useRef(null);
     var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
     var hasFilter = ObjectUtils.isNotEmpty(filterState);
     var appendTo = props.appendTo || context && context.appendTo || PrimeReact.appendTo;
@@ -22080,6 +22207,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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');
     };
@@ -22099,6 +22234,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         DomHandler.focus(focusInputRef.current);
         overlayVisibleState ? hide() : show();
       }
+      setClicked(true);
     };
     var onInputFocus = function onInputFocus(event) {
       if (props.showOnFocus && !overlayVisibleState) {
@@ -22130,6 +22266,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }, 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,
@@ -22137,189 +22282,285 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
     };
     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,
@@ -22449,10 +22690,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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']);
@@ -22505,6 +22753,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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);
@@ -22653,8 +22904,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           maxLength: props.maxLength,
           onInput: onEditableInputChange,
           onFocus: onEditableInputFocus,
+          onKeyDown: onInputKeyDown,
           onBlur: onInputBlur,
-          tabIndex: props.tabIndex || 0,
+          tabIndex: !props.disabled ? props.tabIndex : -1,
           'aria-haspopup': 'listbox'
         }, ariaProps), ptm('input'));
         return /*#__PURE__*/React__namespace.createElement("input", inputProps);
@@ -22746,10 +22998,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       },
       onMouseDown: props.onMouseDown,
       onContextMenu: props.onContextMenu,
+      onFocus: onFocus,
       'data-p-disabled': props.disabled,
       'data-p-focus': focusedState
     }, otherProps, ptm('root'));
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__namespace.createElement(DropdownPanel, _extends({
+    var firstHiddenFocusableElementProps = mergeProps({
+      ref: firstHiddenFocusableElementOnOverlay,
+      role: 'presentation',
+      'aria-hidden': 'true',
+      className: 'p-hidden-accessible p-hidden-focusable',
+      tabIndex: '0',
+      onFocus: onFirstHiddenFocus,
+      'data-p-hidden-accessible': true,
+      'data-p-hidden-focusable': true
+    }, ptm('hiddenFirstFocusableEl'));
+    var lastHiddenFocusableElementProps = mergeProps({
+      ref: lastHiddenFocusableElementOnOverlay,
+      role: 'presentation',
+      'aria-hidden': 'true',
+      className: 'p-hidden-accessible p-hidden-focusable',
+      tabIndex: '0',
+      onFocus: onLastHiddenFocus,
+      'data-p-hidden-accessible': true,
+      'data-p-hidden-focusable': true
+    }, ptm('hiddenLastFocusableEl'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__namespace.createElement("span", firstHiddenFocusableElementProps), /*#__PURE__*/React__namespace.createElement(DropdownPanel, _extends({
       hostName: "Dropdown",
       ref: overlayRef,
       visibleOptions: visibleOptions,
@@ -22758,6 +23031,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       appendTo: appendTo,
       onClick: onPanelClick,
       onOptionClick: onOptionClick,
+      focusedOptionIndex: focusedOptionIndex,
+      setFocusedOptionIndex: setFocusedOptionIndex,
       filterValue: filterState,
       hasFilter: hasFilter,
       onFilterClearIconClick: onFilterClearIconClick,
@@ -22780,7 +23055,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       ptm: ptm,
       cx: cx,
       sx: sx
-    }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
+    })), /*#__PURE__*/React__namespace.createElement("span", lastHiddenFocusableElementProps)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
     }, props.tooltipOptions, {
@@ -22801,7 +23076,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       };
     }) : [];
     var placeholderValue = localeOption('choose');
-    var ariaLabelValue = ariaLabel$1('rowsPerPage');
+    var ariaLabelValue = ariaLabel('jumpToPageDropdownLabel');
     var element = hasOptions ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Dropdown, {
       value: props.value,
       options: options,
@@ -24236,7 +24511,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         if (showSelection) {
           var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
           var ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
-          label = "".concat(props.selected ? ariaLabel$1('unselectLabel') : ariaLabel$1('selectLabel'), " ").concat(ariaLabelText);
+          label = "".concat(props.selected ? ariaLabel('unselectLabel') : ariaLabel('selectLabel'), " ").concat(ariaLabelText);
         }
         content = showSelection && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__namespace.createElement(RowRadioButton, {
           hostName: props.hostName,
@@ -24291,7 +24566,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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')
@@ -24346,19 +24621,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           var rowEditorSaveButtonProps = mergeProps(_defineProperty(_defineProperty({
             type: 'button',
             name: 'row-save',
-            'aria-label': ariaLabel$1('saveEdit'),
+            'aria-label': ariaLabel('saveEdit'),
             onClick: rowEditorProps.onSaveClick,
             className: rowEditorProps.saveClassName,
             tabIndex: props.tabIndex
-          }, "aria-label", ariaLabel$1('saveEdit')), 'data-p-row-editor-save', true), getColumnPTOptions('rowEditorSaveButton'));
+          }, "aria-label", ariaLabel('saveEdit')), 'data-p-row-editor-save', true), getColumnPTOptions('rowEditorSaveButton'));
           var rowEditorCancelButtonProps = mergeProps(_defineProperty({
             type: 'button',
             name: 'row-cancel',
-            'aria-label': ariaLabel$1('cancelEdit'),
+            'aria-label': ariaLabel('cancelEdit'),
             onClick: rowEditorProps.onCancelClick,
             className: rowEditorProps.cancelClassName,
             tabIndex: props.tabIndex
-          }, "aria-label", ariaLabel$1('cancelEdit')), getColumnPTOptions('rowEditorCancelButton'));
+          }, "aria-label", ariaLabel('cancelEdit')), getColumnPTOptions('rowEditorCancelButton'));
           content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", rowEditorSaveButtonProps, rowEditorSaveIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", rowEditorCancelButtonProps, rowEditorCancelIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null)));
         } else {
           rowEditorProps = {
@@ -24369,11 +24644,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           var rowEditorInitButtonProps = mergeProps(_defineProperty(_defineProperty({
             type: 'button',
             name: 'row-edit',
-            'aria-label': ariaLabel$1('editRow'),
+            'aria-label': ariaLabel('editRow'),
             onClick: rowEditorProps.onInitClick,
             className: rowEditorProps.initClassName,
             tabIndex: props.tabIndex
-          }, "aria-label", ariaLabel$1('editRow')), 'data-p-row-editor-init', true), getColumnPTOptions('rowEditorInitButton'));
+          }, "aria-label", ariaLabel('editRow')), 'data-p-row-editor-init', true), getColumnPTOptions('rowEditorInitButton'));
           content = /*#__PURE__*/React__namespace.createElement("button", rowEditorInitButtonProps, rowEditorInitIcon, /*#__PURE__*/React__namespace.createElement(Ripple, null));
         }
         if (body) {
@@ -25020,7 +25295,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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) {
@@ -26866,7 +27141,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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', {
@@ -26989,7 +27264,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           __parentMetadata: {
             parent: props.metaData
           },
-          "aria-label": ariaLabel$1('filterOperator')
+          "aria-label": ariaLabel('filterOperator')
         }));
       }
       return null;
@@ -27009,7 +27284,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           __parentMetadata: {
             parent: props.metaData
           },
-          "aria-label": ariaLabel$1('filterConstraint')
+          "aria-label": ariaLabel('filterConstraint')
         });
       }
       return null;
@@ -27280,7 +27555,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }),
       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();
@@ -34759,7 +35034,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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'
@@ -34960,6 +35237,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       disabled: false,
       readOnly: false,
       showValue: true,
+      tabIndex: 0,
       step: 1,
       min: 0,
       max: 100,
@@ -35123,6 +35401,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
+    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);
@@ -35145,6 +35432,48 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       unbindWindowTouchMoveListener();
       unbindWindowTouchEndListener();
     };
+    var _onKeyDown = function onKeyDown(event) {
+      if (!props.disabled && !props.readonly) {
+        switch (event.code) {
+          case 'ArrowRight':
+          case 'ArrowUp':
+            event.preventDefault();
+            updateModelValue(props.value + 1);
+            break;
+          case 'ArrowLeft':
+          case 'ArrowDown':
+            {
+              event.preventDefault();
+              updateModelValue(props.value - 1);
+              break;
+            }
+          case 'Home':
+            {
+              event.preventDefault();
+              updateModelValue(props.min);
+              break;
+            }
+          case 'End':
+            {
+              event.preventDefault();
+              updateModelValue(props.max);
+              break;
+            }
+          case 'PageUp':
+            {
+              event.preventDefault();
+              updateModelValue(props.value + 10);
+              break;
+            }
+          case 'PageDown':
+            {
+              event.preventDefault();
+              updateModelValue(props.value - 10);
+              break;
+            }
+        }
+      }
+    };
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
@@ -35172,6 +35501,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
       },
@@ -35186,6 +35522,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       },
       onTouchEnd: function onTouchEnd(e) {
         return _onTouchEnd();
+      },
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
       }
     }, ptm('svg'));
     var rangeProps = mergeProps({
@@ -35204,28 +35543,26 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   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);
     },
@@ -35234,22 +35571,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -35265,29 +35602,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -35384,7 +35705,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         context: {
           selected: props.selected,
           disabled: props.disabled,
-          focused: focusedState
+          focused: focusedState,
+          focusedOptionIndex: props.focusedOptionIndex
         }
       });
     };
@@ -35394,15 +35716,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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({
@@ -35411,47 +35724,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
-    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',
@@ -35475,12 +35758,25 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var mergeProps = useMergeProps();
     var context = React__namespace.useContext(PrimeReactContext);
     var props = ListBoxBase.getProps(inProps, context);
-    var _React$useState = React__namespace.useState(''),
+    var _React$useState = React__namespace.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      filterValueState = _React$useState2[0],
-      setFilterValueState = _React$useState2[1];
+      focusedOptionIndex = _React$useState2[0],
+      setFocusedOptionIndex = _React$useState2[1];
+    var searchTimeout = React__namespace.useRef(null);
+    var firstHiddenFocusableElement = React__namespace.useRef(null);
+    var lastHiddenFocusableElement = React__namespace.useRef(null);
+    var _React$useState3 = React__namespace.useState(-1),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      startRangeIndex = _React$useState4[0],
+      setStartRangeIndex = _React$useState4[1];
+    var _React$useState5 = React__namespace.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      filterValueState = _React$useState6[0],
+      setFilterValueState = _React$useState6[1];
     var elementRef = React__namespace.useRef(null);
     var virtualScrollerRef = React__namespace.useRef(null);
+    var id = React__namespace.useRef(UniqueComponentId());
+    var listRef = React__namespace.useRef(null);
     var optionTouched = React__namespace.useRef(false);
     var filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
     var hasFilter = filteredValue && filteredValue.trim().length > 0;
@@ -35494,13 +35790,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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) {
@@ -35569,6 +35866,269 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
+    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,
@@ -35661,6 +36221,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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);
     };
@@ -35749,8 +36326,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var optionLabel = getOptionLabel(option);
         var optionKey = j + '_' + getOptionRenderKey(option);
         var disabled = isOptionDisabled(option);
-        var tabIndex = disabled ? null : props.tabIndex || 0;
+        disabled ? null : props.tabIndex || 0;
         return /*#__PURE__*/React__namespace.createElement(ListBoxItem, {
+          id: id.current + '_' + j,
           hostName: "ListBox",
           key: optionKey,
           label: optionLabel,
@@ -35759,8 +36337,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           template: props.itemTemplate,
           selected: isSelected(option),
           onClick: onOptionSelect,
+          index: j,
+          focusedOptionIndex: focusedOptionIndex,
           onTouchEnd: onOptionTouchEnd,
-          tabIndex: tabIndex,
           disabled: disabled,
           ptCallbacks: ptCallbacks,
           metaData: metaData
@@ -35790,18 +36369,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var optionLabel = getOptionLabel(option);
         var optionKey = index + '_' + getOptionRenderKey(option);
         var disabled = isOptionDisabled(option);
-        var tabIndex = disabled ? null : props.tabIndex || 0;
+        disabled ? null : props.tabIndex || 0;
         return /*#__PURE__*/React__namespace.createElement(ListBoxItem, {
+          id: id.current + '_' + index,
           hostName: "ListBox",
           key: optionKey,
           label: optionLabel,
+          index: index,
+          focusedOptionIndex: focusedOptionIndex,
           option: option,
           style: style,
           template: props.itemTemplate,
           selected: isSelected(option),
           onClick: onOptionSelect,
           onTouchEnd: onOptionTouchEnd,
-          tabIndex: tabIndex,
           disabled: disabled,
           ptCallbacks: ptCallbacks,
           metaData: metaData
@@ -35845,6 +36426,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
                 options: options
               }),
               role: 'listbox',
+              tabIndex: '-1',
               'aria-multiselectable': props.multiple
             }, ariaProps), ptCallbacks.ptm('list'));
             return /*#__PURE__*/React__namespace.createElement("ul", listProps, options.children);
@@ -35858,9 +36440,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       } else {
         var items = createItems();
         var listProps = mergeProps(_objectSpread$O({
+          ref: listRef,
           className: ptCallbacks.cx('list'),
           role: 'listbox',
-          'aria-multiselectable': props.multiple
+          'aria-multiselectable': props.multiple,
+          tabIndex: '-1',
+          onKeyDown: onKeyDown
         }, ariaProps), ptCallbacks.ptm('list'));
         return /*#__PURE__*/React__namespace.createElement("ul", listProps, items);
       }
@@ -35881,7 +36466,27 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       className: ptCallbacks.cx('root'),
       style: props.style
     }, ListBoxBase.getOtherProps(props), ptCallbacks.ptm('root'));
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, header, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, list)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
+    var hiddenFirstElement = mergeProps({
+      ref: firstHiddenFocusableElement,
+      role: 'presentation',
+      'aria-hidden': 'true',
+      className: 'p-hidden-accessible p-hidden-focusable',
+      tabIndex: !props.disabled ? props.tabIndex : -1,
+      onFocus: onFirstHiddenFocus,
+      'data-p-hidden-accessible': true,
+      'data-p-hidden-focusable': true
+    }, ptCallbacks.ptm('hiddenFirstFocusableEl'));
+    var hiddenLastElement = mergeProps({
+      ref: lastHiddenFocusableElement,
+      role: 'presentation',
+      'aria-hidden': 'true',
+      className: 'p-hidden-accessible p-hidden-focusable',
+      tabIndex: !props.disabled ? props.tabIndex : -1,
+      onFocus: onLastHiddenFocus,
+      'data-p-hidden-accessible': true,
+      'data-p-hidden-focusable': true
+    }, ptCallbacks.ptm('hiddenFirstFocusableEl'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("span", hiddenFirstElement), header, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, list), /*#__PURE__*/React__namespace.createElement("span", hiddenLastElement)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
     }, props.tooltipOptions, {
@@ -37062,7 +37667,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         '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);
@@ -37758,7 +38363,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         props: props,
         state: {
           id: idState,
-          visible: visibleState
+          visible: visibleState,
+          focused: focused
         }
       }),
       ptm = _MenuBase$setMetaData.ptm,
@@ -38057,7 +38663,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'aria-disabled': item.disabled,
         'data-p-disabled': item.disabled
       }, ptm('action'));
-      var content = /*#__PURE__*/React__namespace.createElement("div", contentProps, /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label));
+      var content = /*#__PURE__*/React__namespace.createElement("div", contentProps, /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label, /*#__PURE__*/React__namespace.createElement(Ripple, null)));
       if (item.template) {
         var defaultContentOptions = {
           onClick: function onClick(event) {
@@ -39111,7 +39717,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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) {
@@ -39330,7 +39936,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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',
@@ -39343,7 +39950,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     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;
@@ -39377,6 +39984,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       filterBy: null,
       filterInputAutoFocus: true,
       filterLocale: undefined,
+      selectOnFocus: false,
+      autoOptionFocus: false,
       filterMatchMode: 'contains',
       filterPlaceholder: null,
       filterTemplate: null,
@@ -39600,7 +40209,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         context: {
           selected: props.selected,
           disabled: props.disabled,
-          focused: focusedState
+          focused: focusedState,
+          focusedIndex: props.focusedIndex,
+          index: props.index
         }
       });
     };
@@ -39612,22 +40223,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     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'));
@@ -39636,7 +40236,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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'));
@@ -39652,7 +40252,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       })),
       style: props.style,
       onClick: onClick,
-      onKeyDown: onKeyDown,
       onFocus: onFocus,
       onBlur: onBlur,
       tabIndex: tabIndex,
@@ -39754,14 +40353,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var selected = props.isSelected(option);
         return /*#__PURE__*/React__namespace.createElement(MultiSelectItem, {
           hostName: props.hostName,
+          index: j,
           key: optionKey,
+          focusedOptionIndex: props.focusedOptionIndex,
           label: optionLabel,
           option: option,
           style: style,
           template: props.itemTemplate,
           selected: selected,
           onClick: props.onOptionSelect,
-          onKeyDown: props.onOptionKeyDown,
           tabIndex: tabIndex,
           disabled: disabled,
           className: props.itemClassName,
@@ -39812,13 +40412,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         return /*#__PURE__*/React__namespace.createElement(MultiSelectItem, {
           hostName: props.hostName,
           key: optionKey,
+          focusedOptionIndex: props.focusedOptionIndex,
           label: optionLabel,
           option: option,
           style: style,
+          index: index,
           template: props.itemTemplate,
           selected: selected,
           onClick: props.onOptionSelect,
-          onKeyDown: props.onOptionKeyDown,
           tabIndex: tabIndex,
           disabled: disabled,
           className: props.itemClassName,
@@ -39947,19 +40548,35 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var mergeProps = useMergeProps();
     var context = React__namespace.useContext(PrimeReactContext);
     var props = MultiSelectBase.getProps(inProps, context);
-    var _React$useState = React__namespace.useState(''),
+    var _React$useState = React__namespace.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      filterState = _React$useState2[0],
-      setFilterState = _React$useState2[1];
+      focusedOptionIndex = _React$useState2[0],
+      setFocusedOptionIndex = _React$useState2[1];
     var _React$useState3 = React__namespace.useState(false),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      focusedState = _React$useState4[0],
-      setFocusedState = _React$useState4[1];
-    var _React$useState5 = React__namespace.useState(props.inline),
+      clicked = _React$useState4[0],
+      setClicked = _React$useState4[1];
+    var _React$useState5 = React__namespace.useState(''),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      overlayVisibleState = _React$useState6[0],
-      setOverlayVisibleState = _React$useState6[1];
+      filterState = _React$useState6[0],
+      setFilterState = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(-1),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      startRangeIndex = _React$useState8[0],
+      setStartRangeIndex = _React$useState8[1];
+    var _React$useState9 = React__namespace.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      focusedState = _React$useState10[0],
+      setFocusedState = _React$useState10[1];
+    var _React$useState11 = React__namespace.useState(props.inline),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      overlayVisibleState = _React$useState12[0],
+      setOverlayVisibleState = _React$useState12[1];
     var elementRef = React__namespace.useRef(null);
+    var searchValue = React__namespace.useRef(null);
+    var searchTimeout = React__namespace.useRef(null);
+    var firstHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
+    var lastHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
     var labelRef = React__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
@@ -40001,6 +40618,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _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,
@@ -40010,63 +40635,60 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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)) {
@@ -40074,42 +40696,170 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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) {
@@ -40195,9 +40945,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     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']);
@@ -40391,6 +41145,100 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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);
@@ -40531,6 +41379,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       setTimeout(function () {
         props.overlayVisible ? show() : hide();
       }, 100);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.overlayVisible]);
     useUpdateEffect(function () {
       if (overlayVisibleState && filterState && hasFilter) {
@@ -40615,11 +41464,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       role: 'listbox',
       'aria-expanded': overlayVisibleState,
       disabled: props.disabled,
-      tabIndex: props.tabIndex
+      tabIndex: !props.disabled ? props.tabIndex : -1
     }, ariaProps), ptm('input'));
+    var firstHiddenElementProps = mergeProps({
+      ref: firstHiddenFocusableElementOnOverlay,
+      role: 'presentation',
+      'aria-hidden': true,
+      className: 'p-hidden-accessible p-hidden-focusable',
+      tabIndex: '0',
+      onFocus: onFirstHiddenFocus,
+      'data-p-hidden-accessible': true,
+      'data-p-hidden-focusable': true
+    }, ptm('hiddenFirstFocusableEl'));
+    var lastHiddenElementProps = mergeProps({
+      ref: lastHiddenFocusableElementOnOverlay,
+      role: 'presentation',
+      'aria-hidden': true,
+      className: 'p-hidden-accessible p-hidden-focusable',
+      tabIndex: '0',
+      onFocus: onLastHiddenFocus,
+      'data-p-hidden-accessible': true,
+      'data-p-hidden-focusable': true
+    }, ptm('hiddenLastFocusableEl'));
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({}, inputProps, {
       readOnly: true
-    }))), !props.inline && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React__namespace.createElement(MultiSelectPanel, _extends({
+    }))), !props.inline && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React__namespace.createElement("span", firstHiddenElementProps), /*#__PURE__*/React__namespace.createElement(MultiSelectPanel, _extends({
       hostName: "MultiSelect",
       ref: overlayRef,
       visibleOptions: visibleOptions
@@ -40627,6 +41496,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onClick: onPanelClick,
       onOverlayHide: hide,
       filterValue: filterState,
+      focusedOptionIndex: focusedOptionIndex,
+      setFocusedOptionIndex: setFocusedOptionIndex,
       hasFilter: hasFilter,
       onFilterInputChange: onFilterInputChange,
       resetFilter: resetFilter,
@@ -40643,7 +41514,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       isAllSelected: isAllSelected,
       onOptionSelect: onOptionSelect,
       allowOptionSelect: allowOptionSelect,
-      onOptionKeyDown: onOptionKeyDown,
       "in": overlayVisibleState,
       onEnter: onOverlayEnter,
       onEntered: onOverlayEntered,
@@ -40654,7 +41524,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       sx: sx,
       isUnstyled: isUnstyled,
       metaData: metaData
-    }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
+    })), /*#__PURE__*/React__namespace.createElement("span", lastHiddenElementProps)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
     }, props.tooltipOptions, {
@@ -40859,7 +41729,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -41068,7 +41938,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       icon: moveUpIcon,
       onClick: moveUp,
       disabled: isMoveDisabled,
-      'aria-label': ariaLabel$1('moveUp'),
+      'aria-label': ariaLabel('moveUp'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -41079,7 +41949,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       icon: moveTopIcon,
       onClick: moveTop,
       disabled: isMoveDisabled,
-      'aria-label': ariaLabel$1('moveTop'),
+      'aria-label': ariaLabel('moveTop'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -41090,7 +41960,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       icon: moveDownIcon,
       onClick: moveDown,
       disabled: isMoveDisabled,
-      'aria-label': ariaLabel$1('moveDown'),
+      'aria-label': ariaLabel('moveDown'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -41101,7 +41971,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       icon: moveBottomIcon,
       onClick: moveBottom,
       disabled: isMoveDisabled,
-      'aria-label': ariaLabel$1('moveBottom'),
+      'aria-label': ariaLabel('moveBottom'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -42879,7 +43749,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         tabIndex: '-1',
         'aria-hidden': true
       }, getPTOptions(processedItem, 'action', index));
-      var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, submenuIcon, icon, label);
+      var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, submenuIcon, icon, label, /*#__PURE__*/React__namespace.createElement(Ripple, null));
       if (item.template) {
         var defaultContentOptions = {
           className: linkClassName,
@@ -44062,17 +44932,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var hideIconProps = mergeProps(ptm('hideIcon'));
       var showIconProps = mergeProps(ptm('showIcon'));
       if (unmaskedState) {
-        icon = props.hideIcon || /*#__PURE__*/React__namespace.createElement(EyeSlashIcon, hideIconProps);
+        icon = props.hideIcon || /*#__PURE__*/React__namespace.createElement(EyeSlashIcon, _extends({}, hideIconProps, {
+          onClick: toggleMask
+        }));
       } else {
-        icon = props.showIcon || /*#__PURE__*/React__namespace.createElement(EyeIcon, showIconProps);
+        icon = props.showIcon || /*#__PURE__*/React__namespace.createElement(EyeIcon, _extends({}, showIconProps, {
+          onClick: toggleMask
+        }));
       }
       var eyeIcon = IconUtils.getJSXIcon(icon, unmaskedState ? _objectSpread$x({}, hideIconProps) : _objectSpread$x({}, showIconProps), {
         props: props
       });
       if (props.toggleMask) {
-        var content = /*#__PURE__*/React__namespace.createElement("i", {
-          onClick: toggleMask
-        }, " ", eyeIcon, " ");
+        var content = eyeIcon;
         if (props.icon) {
           var defaultIconOptions = {
             onClick: toggleMask,
@@ -44391,7 +45263,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onClick: moveUp,
       pt: ptm('moveUpButton'),
       unstyled: unstyled,
-      "aria-label": ariaLabel$1('moveUp'),
+      "aria-label": ariaLabel('moveUp'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -44402,7 +45274,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onClick: moveTop,
       pt: ptm('moveTopButton'),
       unstyled: unstyled,
-      "aria-label": ariaLabel$1('moveTop'),
+      "aria-label": ariaLabel('moveTop'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -44413,7 +45285,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onClick: moveDown,
       pt: ptm('moveDownButton'),
       unstyled: unstyled,
-      "aria-label": ariaLabel$1('moveDown'),
+      "aria-label": ariaLabel('moveDown'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -44424,7 +45296,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onClick: moveBottom,
       pt: ptm('moveBottomButton'),
       unstyled: unstyled,
-      "aria-label": ariaLabel$1('moveBottom'),
+      "aria-label": ariaLabel('moveBottom'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -44768,7 +45640,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onClick: moveRight,
       pt: ptm('moveToTargetButton'),
       unstyled: unstyled,
-      "aria-label": ariaLabel$1('moveToTarget'),
+      "aria-label": ariaLabel('moveToTarget'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -44779,7 +45651,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onClick: moveAllRight,
       pt: ptm('moveAllToTargetButton'),
       unstyled: unstyled,
-      "aria-label": ariaLabel$1('moveAllToTarget'),
+      "aria-label": ariaLabel('moveAllToTarget'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -44790,7 +45662,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onClick: moveLeft,
       pt: ptm('moveToSourceButton'),
       unstyled: unstyled,
-      "aria-label": ariaLabel$1('moveToSource'),
+      "aria-label": ariaLabel('moveToSource'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -44801,7 +45673,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onClick: moveAllLeft,
       pt: ptm('moveAllToSourceButton'),
       unstyled: unstyled,
-      "aria-label": ariaLabel$1('moveAllToSource'),
+      "aria-label": ariaLabel('moveAllToSource'),
       __parentMetadata: {
         parent: props.metaData
       }
@@ -45739,6 +46611,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
+      checked: props.checked,
       disabled: props.disabled,
       required: props.required,
       tabIndex: props.tabIndex
@@ -45769,9 +46642,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   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',
@@ -45819,6 +46697,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var mergeProps = useMergeProps();
     var context = React__namespace.useContext(PrimeReactContext);
     var props = RatingBase.getProps(inProps, context);
+    var _React$useState = React__namespace.useState(-1),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      focusedOptionIndex = _React$useState2[0],
+      setFocusedOptionIndex = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState(true),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isFocusVisibleItem = _React$useState4[0];
+      _React$useState4[1];
     var elementRef = React__namespace.useRef(null);
     var _RatingBase$setMetaDa = RatingBase.setMetaData({
         props: props
@@ -45856,6 +46742,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         });
       }
+      setFocusedOptionIndex(i);
       event.preventDefault();
     };
     var clear = function clear(event) {
@@ -45879,10 +46766,30 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -45912,14 +46819,24 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var itemProps = mergeProps({
           key: value,
           className: cx('item', {
-            active: active
+            active: active,
+            focusedOptionIndex: focusedOptionIndex,
+            isFocusVisibleItem: isFocusVisibleItem,
+            value: value
           }),
+          'data-p-focused': value === focusedOptionIndex,
           tabIndex: tabIndex,
           onClick: function onClick(e) {
             return rate(e, value);
           },
           onKeyDown: function onKeyDown(e) {
             return onStarKeyDown(e, value);
+          },
+          onFocus: function onFocus(e) {
+            return _onFocus(e, value);
+          },
+          onBlur: function onBlur(e) {
+            return _onBlur();
           }
         }, getPTOptions(props.value, 'item'));
         return /*#__PURE__*/React__namespace.createElement("div", _extends({
@@ -46528,7 +47445,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
       });
     };
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event, index) {
+      props.setFocusedIndex(index);
       if (props.onClick) {
         props.onClick({
           originalEvent: event,
@@ -46542,13 +47460,46 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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')
@@ -46564,9 +47515,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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'));
@@ -46578,6 +47534,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var mergeProps = useMergeProps();
     var context = React__namespace.useContext(PrimeReactContext);
     var props = SelectButtonBase.getProps(inProps, context);
+    var _React$useState = React__namespace.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      focusedIndex = _React$useState2[0],
+      setFocusedIndex = _React$useState2[1];
     var elementRef = React__namespace.useRef(null);
     var _SelectButtonBase$set = SelectButtonBase.setMetaData({
         props: props
@@ -46650,7 +47610,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         return props.options.map(function (option, index) {
           var isDisabled = props.disabled || isOptionDisabled(option);
           var optionLabel = getOptionLabel(option);
-          var tabIndex = isDisabled ? null : 0;
+          var tabIndex = index === focusedIndex ? '0' : '-1';
           var selected = isSelected(option);
           var key = optionLabel + '_' + index;
           return /*#__PURE__*/React__namespace.createElement(SelectButtonItem, {
@@ -46659,13 +47619,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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
           });
         });
       }
@@ -47757,10 +48720,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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) {
@@ -49963,6 +50947,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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: {
@@ -50057,10 +51042,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
@@ -50085,7 +51069,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -50135,7 +51118,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       switch (event.code) {
         case 'ArrowLeft':
           {
-            if (props.layout === 'horizontal') {
+            if (horizontal) {
               setTimer(event, index, props.step * -1);
             }
             event.preventDefault();
@@ -50143,7 +51126,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         case 'ArrowRight':
           {
-            if (props.layout === 'horizontal') {
+            if (horizontal) {
               setTimer(event, index, props.step);
             }
             event.preventDefault();
@@ -50151,7 +51134,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         case 'ArrowDown':
           {
-            if (props.layout === 'vertical') {
+            if (!horizontal) {
               setTimer(event, index, props.step * -1);
             }
             event.preventDefault();
@@ -50159,7 +51142,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         case 'ArrowUp':
           {
-            if (props.layout === 'vertical') {
+            if (!horizontal) {
               setTimer(event, index, props.step);
             }
             event.preventDefault();
@@ -50179,7 +51162,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         case 'Enter':
           {
-            if (prevSize.current > 99) {
+            if (prevSize.current > 100 - (minSize || 5)) {
               resizePanel(index, minSize, 100);
             } else {
               resizePanel(index, 100, minSize);
@@ -50208,14 +51191,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -50276,7 +51261,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           return gutterRefs.current[index] = el;
         },
         className: cx('gutter'),
-        style: props.layout === 'horizontal' ? {
+        style: horizontal ? {
           width: props.gutterSize + 'px'
         } : {
           height: props.gutterSize + 'px'
@@ -50303,7 +51288,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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'),
@@ -51239,8 +52224,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   var TabPanelBase = ComponentBase.extend({
     defaultProps: {
       __TYPE: 'TabPanel',
+      children: undefined,
       className: null,
       closable: false,
+      closeIcon: null,
       contentClassName: null,
       contentStyle: null,
       disabled: false,
@@ -51249,12 +52236,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -51348,7 +52334,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
       });
     };
@@ -51766,7 +52752,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         ref: prevBtnRef,
         type: 'button',
         className: cx('prevbutton'),
-        'aria-label': ariaLabel$1('previousPageLabel'),
+        'aria-label': ariaLabel('previousPageLabel'),
         onClick: function onClick(e) {
           return navBackward();
         }
@@ -51788,7 +52774,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         ref: nextBtnRef,
         type: 'button',
         className: cx('nextbutton'),
-        'aria-label': ariaLabel$1('nextPageLabel'),
+        'aria-label': ariaLabel('nextPageLabel'),
         onClick: function onClick(e) {
           return navForward();
         }
@@ -52626,14 +53612,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var ToggleButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var context = React__namespace.useContext(PrimeReactContext);
+    var props = ToggleButtonBase.getProps(inProps, context);
+    var elementRef = React__namespace.useRef(null);
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
-    var mergeProps = useMergeProps();
-    var context = React__namespace.useContext(PrimeReactContext);
-    var props = ToggleButtonBase.getProps(inProps, context);
-    var elementRef = React__namespace.useRef(null);
     var _ToggleButtonBase$set = ToggleButtonBase.setMetaData({
         props: props,
         state: {
@@ -52669,6 +53654,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
+    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);
@@ -52677,12 +53668,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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({
@@ -52732,7 +53717,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onKeyDown: onKeyDown,
       tabIndex: tabIndex,
       role: 'button',
-      'aria-pressed': props.checked
+      'aria-pressed': props.checked,
+      'data-p-highlight': props.checked,
+      'data-p-disabled': props.disabled
     }, ToggleButtonBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, iconElement, /*#__PURE__*/React__namespace.createElement("span", labelProps, label), /*#__PURE__*/React__namespace.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
       target: elementRef,
@@ -55998,7 +56985,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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
@@ -58239,7 +59226,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       setFocusedState(false);
     };
     var onKeyDown = function onKeyDown(e) {
-      if (e.keyCode === 32) {
+      if (e.code === 'Enter' || e.code === 'Space') {
         toggle(e);
         e.preventDefault();
       }
@@ -58278,7 +59265,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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', {
@@ -58298,7 +59285,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       className: classNames(props.className, cx('root')),
       style: props.style,
-      onClick: onClick
+      onClick: onClick,
+      'data-p-disabled': props.disabled
     }, TriStateCheckboxBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
       id: props.id,
@@ -58479,7 +59467,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   exports.ZIndexUtils = ZIndexUtils;
   exports._mergeProps = _mergeProps;
   exports.addLocale = addLocale;
-  exports.ariaLabel = ariaLabel$1;
+  exports.ariaLabel = ariaLabel;
   exports.classNames = classNames;
   exports.confirmDialog = confirmDialog;
   exports.confirmPopup = confirmPopup;