primereact 10.3.3 → 10.5.0

package/listbox/listbox.js

@@ -109,6 +109,10 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
     return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
   }
 
+  function _readOnlyError(name) {
+    throw new TypeError("\"" + name + "\" is read-only");
+  }
+
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
@@ -149,28 +153,26 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
   }
 
+  var _defaultProps;
   var classes = {
     itemGroup: 'p-listbox-item-group',
     emptyMessage: 'p-listbox-empty-message',
-    list: function list(_ref) {
-      var props = _ref.props,
-        options = _ref.options;
-      return props.virtualScrollerOptions ? utils.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 utils.classNames('p-listbox-list-wrapper', props.listClassName);
     },
-    root: function root(_ref3) {
-      var props = _ref3.props;
+    root: function root(_ref2) {
+      var props = _ref2.props;
       return utils.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 utils.classNames('p-listbox-item', {
         'p-highlight': props.selected,
+        'p-focus': props.focusedOptionIndex === props.index,
         'p-disabled': props.disabled
       }, props.option.className);
     },
@@ -179,22 +181,22 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
     filterInput: 'p-listbox-filter',
     header: 'p-listbox-header'
   };
-  var styles = "\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 = "\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 = {
-    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.ComponentBase.extend({
-    defaultProps: {
+    defaultProps: (_defaultProps = {
       __TYPE: 'ListBox',
       className: null,
       dataKey: null,
@@ -210,29 +212,13 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
       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,
       styles: styles,
@@ -329,7 +315,8 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
         context: {
           selected: props.selected,
           disabled: props.disabled,
-          focused: focusedState
+          focused: focusedState,
+          focusedOptionIndex: props.focusedOptionIndex
         }
       });
     };
@@ -339,15 +326,6 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
     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({
@@ -356,47 +334,17 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
         });
       }
     };
-    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 ? utils.DomHandler.isAttributeEquals(nextItem, 'data-p-disabled', true) || utils.DomHandler.isAttributeEquals(nextItem, 'data-pc-section', 'itemgroup') ? findNextItem(nextItem) : nextItem : null;
-    };
-    var findPrevItem = function findPrevItem(item) {
-      var prevItem = item.previousElementSibling;
-      return prevItem ? utils.DomHandler.isAttributeEquals(prevItem, 'data-p-disabled', true) || utils.DomHandler.isAttributeEquals(prevItem, 'data-pc-section', 'itemgroup') ? findPrevItem(prevItem) : prevItem : null;
-    };
     var content = props.template ? utils.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',
@@ -420,12 +368,25 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
     var mergeProps = hooks.useMergeProps();
     var context = React__namespace.useContext(api.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(utils.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;
@@ -439,13 +400,14 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
     componentbase.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) {
@@ -514,6 +476,269 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
         });
       }
     };
+    var hasSelectedOption = function hasSelectedOption() {
+      return utils.ObjectUtils.isNotEmpty(props.value);
+    };
+    var isOptionGroup = function isOptionGroup(option) {
+      return props.optionGroupLabel && option.optionGroup && option.group;
+    };
+    var isValidOption = function isValidOption(option) {
+      return utils.ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
+    };
+    var isValidSelectedOption = function isValidSelectedOption(option) {
+      return isValidOption(option) && isSelected(option);
+    };
+    var findFirstOptionIndex = function findFirstOptionIndex() {
+      return visibleOptions.findIndex(function (option) {
+        return isValidOption(option);
+      });
+    };
+    var findLastOptionIndex = function findLastOptionIndex() {
+      return utils.ObjectUtils.findLastIndex(visibleOptions, function (option) {
+        return isValidOption(option);
+      });
+    };
+    var findNextOptionIndex = function findNextOptionIndex(index) {
+      var matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
+        return isValidOption(option);
+      }) : -1;
+      return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
+    };
+    var findPrevOptionIndex = function findPrevOptionIndex(index) {
+      var matchedOptionIndex = index > 0 ? utils.ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+        return isValidOption(option);
+      }) : -1;
+      return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+    };
+    var 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 (utils.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 ? utils.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 && utils.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,
@@ -606,6 +831,23 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
       }
       return option && option['disabled'] !== undefined ? option['disabled'] : false;
     };
+    var onFirstHiddenFocus = function onFirstHiddenFocus() {
+      utils.DomHandler.focus(listRef.current);
+      var firstFocusableEl = utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])');
+      lastHiddenFocusableElement.current.tabIndex = utils.DomHandler.isElement(firstFocusableEl) ? undefined : -1;
+      firstHiddenFocusableElement.current.tabIndex = -1;
+    };
+    var onLastHiddenFocus = function onLastHiddenFocus(event) {
+      var relatedTarget = event.relatedTarget;
+      if (relatedTarget === listRef.current) {
+        var firstFocusableEl = utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])');
+        utils.DomHandler.focus(firstFocusableEl);
+        firstHiddenFocusableElement.current.tabIndex = undefined;
+      } else {
+        utils.DomHandler.focus(firstHiddenFocusableElement.current);
+      }
+      astHiddenFocusableElement.current.tabIndex = -1;
+    };
     var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
       return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
     };
@@ -694,8 +936,9 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
         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,
@@ -704,8 +947,9 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
           template: props.itemTemplate,
           selected: isSelected(option),
           onClick: onOptionSelect,
+          index: j,
+          focusedOptionIndex: focusedOptionIndex,
           onTouchEnd: onOptionTouchEnd,
-          tabIndex: tabIndex,
           disabled: disabled,
           ptCallbacks: ptCallbacks,
           metaData: metaData
@@ -735,18 +979,20 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
         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
@@ -790,6 +1036,7 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
                 options: options
               }),
               role: 'listbox',
+              tabIndex: '-1',
               'aria-multiselectable': props.multiple
             }, ariaProps), ptCallbacks.ptm('list'));
             return /*#__PURE__*/React__namespace.createElement("ul", listProps, options.children);
@@ -803,9 +1050,12 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
       } else {
         var items = createItems();
         var listProps = mergeProps(_objectSpread({
+          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);
       }
@@ -826,7 +1076,27 @@ this.primereact.listbox = (function (exports, React, api, componentbase, hooks,
       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.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.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
     }, props.tooltipOptions, {