primereact 10.4.0 → 10.5.0

package/listbox/listbox.esm.js

@@ -4,7 +4,7 @@ import { PrimeReactContext, FilterService, localeOption } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { useMergeProps, useMountEffect } from 'primereact/hooks';
 import { Tooltip } from 'primereact/tooltip';
-import { classNames, IconUtils, ObjectUtils, DomHandler } from 'primereact/utils';
+import { classNames, IconUtils, ObjectUtils, UniqueComponentId, DomHandler } from 'primereact/utils';
 import { VirtualScroller } from 'primereact/virtualscroller';
 import { SearchIcon } from 'primereact/icons/search';
 import { InputText } from 'primereact/inputtext';
@@ -97,6 +97,10 @@ function _toConsumableArray(arr) {
   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;
 }
@@ -137,28 +141,26 @@ function _slicedToArray(arr, i) {
   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 ? 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);
   },
@@ -167,22 +169,22 @@ var classes = {
   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.extend({
-  defaultProps: {
+  defaultProps: (_defaultProps = {
     __TYPE: 'ListBox',
     className: null,
     dataKey: null,
@@ -198,29 +200,13 @@ var ListBoxBase = ComponentBase.extend({
     filterPlaceholder: null,
     filterTemplate: null,
     filterValue: null,
+    selectOnFocus: false,
     id: null,
     itemTemplate: null,
     listClassName: null,
     listStyle: null,
-    metaKeySelection: false,
-    multiple: false,
-    onChange: null,
-    onFilterValueChange: null,
-    optionDisabled: null,
-    optionGroupChildren: null,
-    optionGroupLabel: null,
-    optionGroupTemplate: null,
-    optionLabel: null,
-    optionValue: null,
-    options: null,
-    style: null,
-    tabIndex: 0,
-    tooltip: null,
-    tooltipOptions: null,
-    value: null,
-    virtualScrollerOptions: null,
-    children: undefined
-  },
+    metaKeySelection: false
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultProps, "selectOnFocus", false), "autoOptionFocus", true), "multiple", false), "onChange", null), "onFilterValueChange", null), "optionDisabled", null), "optionGroupChildren", null), "optionGroupLabel", null), "optionGroupTemplate", null), "optionLabel", null), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultProps, "optionValue", null), "options", null), "style", null), "tabIndex", 0), "tooltip", null), "tooltipOptions", null), "value", null), "virtualScrollerOptions", null), "children", undefined)),
   css: {
     classes: classes,
     styles: styles,
@@ -317,7 +303,8 @@ var ListBoxItem = /*#__PURE__*/React.memo(function (props) {
       context: {
         selected: props.selected,
         disabled: props.disabled,
-        focused: focusedState
+        focused: focusedState,
+        focusedOptionIndex: props.focusedOptionIndex
       }
     });
   };
@@ -327,15 +314,6 @@ var ListBoxItem = /*#__PURE__*/React.memo(function (props) {
   var onBlur = function onBlur(event) {
     setFocusedState(false);
   };
-  var onClick = function onClick(event) {
-    if (props.onClick) {
-      props.onClick({
-        originalEvent: event,
-        option: props.option
-      });
-    }
-    event.preventDefault();
-  };
   var onTouchEnd = function onTouchEnd(event) {
     if (props.onTouchEnd) {
       props.onTouchEnd({
@@ -344,47 +322,17 @@ var ListBoxItem = /*#__PURE__*/React.memo(function (props) {
       });
     }
   };
-  var onKeyDown = function onKeyDown(event) {
-    var item = event.currentTarget;
-    switch (event.which) {
-      //down
-      case 40:
-        var nextItem = findNextItem(item);
-        nextItem && nextItem.focus();
-        event.preventDefault();
-        break;
-
-      //up
-      case 38:
-        var prevItem = findPrevItem(item);
-        prevItem && prevItem.focus();
-        event.preventDefault();
-        break;
-
-      //enter
-      case 13:
-        onClick(event);
-        event.preventDefault();
-        break;
-    }
-  };
-  var findNextItem = function findNextItem(item) {
-    var nextItem = item.nextElementSibling;
-    return nextItem ? DomHandler.isAttributeEquals(nextItem, 'data-p-disabled', true) || DomHandler.isAttributeEquals(nextItem, 'data-pc-section', 'itemgroup') ? findNextItem(nextItem) : nextItem : null;
-  };
-  var findPrevItem = function findPrevItem(item) {
-    var prevItem = item.previousElementSibling;
-    return prevItem ? DomHandler.isAttributeEquals(prevItem, 'data-p-disabled', true) || DomHandler.isAttributeEquals(prevItem, 'data-pc-section', 'itemgroup') ? findPrevItem(prevItem) : prevItem : null;
-  };
   var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
   var itemProps = mergeProps({
+    id: props.id,
     className: cx('item', {
       props: props
     }),
     style: props.style,
-    onClick: onClick,
+    onClick: function onClick(event) {
+      return props.onClick(event, props.option, props.index);
+    },
     onTouchEnd: onTouchEnd,
-    onKeyDown: onKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
     tabIndex: '-1',
@@ -408,12 +356,25 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = ListBoxBase.getProps(inProps, context);
-  var _React$useState = React.useState(''),
+  var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    filterValueState = _React$useState2[0],
-    setFilterValueState = _React$useState2[1];
+    focusedOptionIndex = _React$useState2[0],
+    setFocusedOptionIndex = _React$useState2[1];
+  var searchTimeout = React.useRef(null);
+  var firstHiddenFocusableElement = React.useRef(null);
+  var lastHiddenFocusableElement = React.useRef(null);
+  var _React$useState3 = React.useState(-1),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    startRangeIndex = _React$useState4[0],
+    setStartRangeIndex = _React$useState4[1];
+  var _React$useState5 = React.useState(''),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    filterValueState = _React$useState6[0],
+    setFilterValueState = _React$useState6[1];
   var elementRef = React.useRef(null);
   var virtualScrollerRef = React.useRef(null);
+  var id = React.useRef(UniqueComponentId());
+  var listRef = React.useRef(null);
   var optionTouched = React.useRef(false);
   var filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
   var hasFilter = filteredValue && filteredValue.trim().length > 0;
@@ -427,13 +388,14 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
   useHandleStyle(ListBoxBase.css.styles, ptCallbacks.isUnstyled, {
     name: 'listbox'
   });
-  var onOptionSelect = function onOptionSelect(event) {
-    var option = event.option;
+  var onOptionSelect = function onOptionSelect(event, option) {
+    var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
     if (props.disabled || isOptionDisabled(option)) {
       return;
     }
     props.multiple ? onOptionSelectMultiple(event.originalEvent, option) : onOptionSelectSingle(event.originalEvent, option);
     optionTouched.current = false;
+    index !== -1 && setFocusedOptionIndex(index);
   };
   var onOptionTouchEnd = function onOptionTouchEnd() {
     if (props.disabled) {
@@ -502,6 +464,269 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
       });
     }
   };
+  var hasSelectedOption = function hasSelectedOption() {
+    return ObjectUtils.isNotEmpty(props.value);
+  };
+  var isOptionGroup = function isOptionGroup(option) {
+    return props.optionGroupLabel && option.optionGroup && option.group;
+  };
+  var isValidOption = function isValidOption(option) {
+    return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
+  };
+  var isValidSelectedOption = function isValidSelectedOption(option) {
+    return isValidOption(option) && isSelected(option);
+  };
+  var findFirstOptionIndex = function findFirstOptionIndex() {
+    return visibleOptions.findIndex(function (option) {
+      return isValidOption(option);
+    });
+  };
+  var findLastOptionIndex = function findLastOptionIndex() {
+    return ObjectUtils.findLastIndex(visibleOptions, function (option) {
+      return isValidOption(option);
+    });
+  };
+  var findNextOptionIndex = function findNextOptionIndex(index) {
+    var matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
+      return isValidOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
+  };
+  var findPrevOptionIndex = function findPrevOptionIndex(index) {
+    var matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+      return isValidOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+  };
+  var focusedOptionId = function focusedOptionId() {
+    return focusedOptionIndex !== -1 ? "".concat(id.current, "_").concat(focusedOptionIndex) : null;
+  };
+  var findNearestSelectedOptionIndex = function findNearestSelectedOptionIndex(index) {
+    var firstCheckUp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var matchedOptionIndex = -1;
+    if (hasSelectedOption) {
+      if (firstCheckUp) {
+        matchedOptionIndex = findPrevSelectedOptionIndex(index);
+        matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex;
+      } else {
+        matchedOptionIndex = findNextSelectedOptionIndex(index);
+        matchedOptionIndex = matchedOptionIndex === -1 ? findPrevSelectedOptionIndex(index) : matchedOptionIndex;
+      }
+    }
+    return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+  };
+  var isOptionMatched = function isOptionMatched(option) {
+    var _getOptionLabel;
+    return isValidOption(option) && ((_getOptionLabel = getOptionLabel(option)) === null || _getOptionLabel === void 0 ? void 0 : _getOptionLabel.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.toLocaleLowerCase(props.filterLocale)));
+  };
+  var searchOptions = function searchOptions(event, _char) {
+    searchValue = (searchValue || '') + _char;
+    var optionIndex = -1;
+    if (ObjectUtils.isNotEmpty(searchValue)) {
+      if (focusedOptionIndex !== -1) {
+        optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex(function (option) {
+          return isOptionMatched(option);
+        });
+        optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex(function (option) {
+          return isOptionMatched(option);
+        }) : optionIndex + focusedOptionIndex;
+      } else {
+        optionIndex = visibleOptions.findIndex(function (option) {
+          return isOptionMatched(option);
+        });
+      }
+      if (optionIndex === -1 && focusedOptionIndex === -1) {
+        optionIndex = findFirstFocusedOptionIndex();
+      }
+      if (optionIndex !== -1) {
+        changeFocusedOptionIndex(event, optionIndex);
+      }
+    }
+    if (searchTimeout.current) {
+      clearTimeout(searchTimeout.current);
+    }
+    searchTimeout.current = setTimeout(function () {
+      searchValue = '';
+      searchTimeout.current = null;
+    }, 500);
+  };
+  var findNextSelectedOptionIndex = function findNextSelectedOptionIndex(index) {
+    var matchedOptionIndex = hasSelectedOption && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
+      return isValidSelectedOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
+  };
+  var findPrevSelectedOptionIndex = function findPrevSelectedOptionIndex(index) {
+    var matchedOptionIndex = hasSelectedOption && index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+      return isValidSelectedOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
+  };
+  var onOptionSelectRange = function onOptionSelectRange(event) {
+    var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+    var end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+    start === -1 && (start = findNearestSelectedOptionIndex(end, true));
+    end === -1 && (end = findNearestSelectedOptionIndex(start));
+    if (start !== -1 && end !== -1) {
+      var rangeStart = Math.min(start, end);
+      var rangeEnd = Math.max(start, end);
+      var value = visibleOptions.slice(rangeStart, rangeEnd + 1).filter(function (option) {
+        return isValidOption(option);
+      }).map(function (option) {
+        return getOptionValue(option);
+      });
+      updateModel(event, value);
+    }
+  };
+  var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
+    var selectedIndex = findFirstSelectedOptionIndex();
+    return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
+  };
+  var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
+    if (focusedOptionIndex !== index) {
+      setFocusedOptionIndex(index);
+      scrollInView();
+      if (props.selectOnFocus && !props.multiple) {
+        onOptionSelect(event, visibleOptions[index]);
+      }
+    }
+  };
+  var onArrowDownKey = function onArrowDownKey(event) {
+    var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : findFirstFocusedOptionIndex();
+    if (props.multiple && event.shiftKey) {
+      onOptionSelectRange(event, startRangeIndex, optionIndex);
+    }
+    changeFocusedOptionIndex(event, optionIndex);
+    event.preventDefault();
+  };
+  var onArrowUpKey = function onArrowUpKey(event) {
+    var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : findLastFocusedOptionIndex();
+    if (props.multiple && event.shiftKey) {
+      onOptionSelectRange(event, optionIndex, startRangeIndex);
+    }
+    changeFocusedOptionIndex(event, optionIndex);
+    event.preventDefault();
+  };
+  var onEnterKey = function onEnterKey(event) {
+    if (focusedOptionIndex !== -1) {
+      if (props.multiple && event.shiftKey) onOptionSelectRange(event, focusedOptionIndex);else onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+    }
+    event.preventDefault();
+  };
+  var onSpaceKey = function onSpaceKey(event) {
+    onEnterKey(event);
+  };
+  var onShiftKey = function onShiftKey() {
+    setStartRangeIndex(focusedOptionIndex);
+  };
+  var onHomeKey = function onHomeKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (pressedInInputText) {
+      event.currentTarget.setSelectionRange(0, 0);
+      setFocusedOptionIndex(-1);
+    } else {
+      var metaKey = event.metaKey || event.ctrlKey;
+      var optionIndex = findFirstOptionIndex();
+      if (props.multiple && event.shiftKey && metaKey) {
+        onOptionSelectRange(event, optionIndex, startRangeIndex);
+      }
+      changeFocusedOptionIndex(event, optionIndex);
+    }
+    event.preventDefault();
+  };
+  var onEndKey = function onEndKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (pressedInInputText) {
+      var target = event.currentTarget;
+      var len = target.value.length;
+      target.setSelectionRange(len, len);
+      _readOnlyError("focusedOptionIndex");
+    } else {
+      var metaKey = event.metaKey || event.ctrlKey;
+      var optionIndex = findLastOptionIndex();
+      if (props.multiple && event.shiftKey && metaKey) {
+        onOptionSelectRange(event, startRangeIndex, optionIndex);
+      }
+      changeFocusedOptionIndex(event, optionIndex);
+    }
+    event.preventDefault();
+  };
+  var onPageUpKey = function onPageUpKey(event) {
+    scrollInView(0);
+    event.preventDefault();
+  };
+  var onPageDownKey = function onPageDownKey(event) {
+    scrollInView(visibleOptions.length - 1);
+    event.preventDefault();
+  };
+  var onKeyDown = function onKeyDown(event) {
+    var metaKey = event.metaKey || event.ctrlKey;
+    switch (event.code) {
+      case 'ArrowDown':
+        onArrowDownKey(event);
+        break;
+      case 'ArrowUp':
+        onArrowUpKey(event);
+        break;
+      case 'Home':
+        onHomeKey(event);
+        break;
+      case 'End':
+        onEndKey(event);
+        break;
+      case 'PageDown':
+        onPageDownKey(event);
+        break;
+      case 'PageUp':
+        onPageUpKey(event);
+        break;
+      case 'Enter':
+      case 'NumpadEnter':
+      case 'Space':
+        onSpaceKey(event);
+        event.preventDefault();
+        break;
+      case 'Tab':
+        //NOOP
+        break;
+      case 'ShiftLeft':
+      case 'ShiftRight':
+        onShiftKey();
+        break;
+      default:
+        if (props.multiple && event.code === 'KeyA' && metaKey) {
+          var value = visibleOptions.filter(function (option) {
+            return isValidOption(option);
+          }).map(function (option) {
+            return getOptionValue(option);
+          });
+          updateModel(event, value);
+          event.preventDefault();
+          break;
+        }
+        if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+          searchOptions(event, event.key);
+          event.preventDefault();
+        }
+        break;
+    }
+  };
+  var scrollInView = function scrollInView() {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+    setTimeout(function () {
+      var idx = index !== -1 ? "".concat(id.current, "_").concat(index) : focusedOptionId();
+      var element = listRef.current.querySelector("li[id=\"".concat(idx, "\"]"));
+      if (element) {
+        element.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+          behavior: 'smooth'
+        });
+      } else if (props.virtualScrollerOptions) {
+        virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(index !== -1 ? index : props.focusedOptionIndex);
+      }
+    }, 0);
+  };
   var onFilter = function onFilter(event) {
     virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
     var originalEvent = event.originalEvent,
@@ -594,6 +819,23 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     }
     return option && option['disabled'] !== undefined ? option['disabled'] : false;
   };
+  var onFirstHiddenFocus = function onFirstHiddenFocus() {
+    DomHandler.focus(listRef.current);
+    var firstFocusableEl = DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])');
+    lastHiddenFocusableElement.current.tabIndex = DomHandler.isElement(firstFocusableEl) ? undefined : -1;
+    firstHiddenFocusableElement.current.tabIndex = -1;
+  };
+  var onLastHiddenFocus = function onLastHiddenFocus(event) {
+    var relatedTarget = event.relatedTarget;
+    if (relatedTarget === listRef.current) {
+      var firstFocusableEl = DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])');
+      DomHandler.focus(firstFocusableEl);
+      firstHiddenFocusableElement.current.tabIndex = undefined;
+    } else {
+      DomHandler.focus(firstHiddenFocusableElement.current);
+    }
+    astHiddenFocusableElement.current.tabIndex = -1;
+  };
   var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
     return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
   };
@@ -682,8 +924,9 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
       var optionLabel = getOptionLabel(option);
       var optionKey = j + '_' + getOptionRenderKey(option);
       var disabled = isOptionDisabled(option);
-      var tabIndex = disabled ? null : props.tabIndex || 0;
+      disabled ? null : props.tabIndex || 0;
       return /*#__PURE__*/React.createElement(ListBoxItem, {
+        id: id.current + '_' + j,
         hostName: "ListBox",
         key: optionKey,
         label: optionLabel,
@@ -692,8 +935,9 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
         template: props.itemTemplate,
         selected: isSelected(option),
         onClick: onOptionSelect,
+        index: j,
+        focusedOptionIndex: focusedOptionIndex,
         onTouchEnd: onOptionTouchEnd,
-        tabIndex: tabIndex,
         disabled: disabled,
         ptCallbacks: ptCallbacks,
         metaData: metaData
@@ -723,18 +967,20 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
       var optionLabel = getOptionLabel(option);
       var optionKey = index + '_' + getOptionRenderKey(option);
       var disabled = isOptionDisabled(option);
-      var tabIndex = disabled ? null : props.tabIndex || 0;
+      disabled ? null : props.tabIndex || 0;
       return /*#__PURE__*/React.createElement(ListBoxItem, {
+        id: id.current + '_' + index,
         hostName: "ListBox",
         key: optionKey,
         label: optionLabel,
+        index: index,
+        focusedOptionIndex: focusedOptionIndex,
         option: option,
         style: style,
         template: props.itemTemplate,
         selected: isSelected(option),
         onClick: onOptionSelect,
         onTouchEnd: onOptionTouchEnd,
-        tabIndex: tabIndex,
         disabled: disabled,
         ptCallbacks: ptCallbacks,
         metaData: metaData
@@ -778,6 +1024,7 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
               options: options
             }),
             role: 'listbox',
+            tabIndex: '-1',
             'aria-multiselectable': props.multiple
           }, ariaProps), ptCallbacks.ptm('list'));
           return /*#__PURE__*/React.createElement("ul", listProps, options.children);
@@ -791,9 +1038,12 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     } 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.createElement("ul", listProps, items);
     }
@@ -814,7 +1064,27 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     className: ptCallbacks.cx('root'),
     style: props.style
   }, ListBoxBase.getOtherProps(props), ptCallbacks.ptm('root'));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, header, /*#__PURE__*/React.createElement("div", wrapperProps, list)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  var hiddenFirstElement = mergeProps({
+    ref: firstHiddenFocusableElement,
+    role: 'presentation',
+    'aria-hidden': 'true',
+    className: 'p-hidden-accessible p-hidden-focusable',
+    tabIndex: !props.disabled ? props.tabIndex : -1,
+    onFocus: onFirstHiddenFocus,
+    'data-p-hidden-accessible': true,
+    'data-p-hidden-focusable': true
+  }, ptCallbacks.ptm('hiddenFirstFocusableEl'));
+  var hiddenLastElement = mergeProps({
+    ref: lastHiddenFocusableElement,
+    role: 'presentation',
+    'aria-hidden': 'true',
+    className: 'p-hidden-accessible p-hidden-focusable',
+    tabIndex: !props.disabled ? props.tabIndex : -1,
+    onFocus: onLastHiddenFocus,
+    'data-p-hidden-accessible': true,
+    'data-p-hidden-focusable': true
+  }, ptCallbacks.ptm('hiddenFirstFocusableEl'));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("span", hiddenFirstElement), header, /*#__PURE__*/React.createElement("div", wrapperProps, list), /*#__PURE__*/React.createElement("span", hiddenLastElement)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions, {