primereact 10.3.0 → 10.3.2

package/treeselect/treeselect.cjs.js

@@ -12,6 +12,7 @@ var search = require('primereact/icons/search');
 var times = require('primereact/icons/times');
 var overlayservice = require('primereact/overlayservice');
 var ripple = require('primereact/ripple');
+var tooltip = require('primereact/tooltip');
 var tree = require('primereact/tree');
 var utils = require('primereact/utils');
 var csstransition = require('primereact/csstransition');
@@ -55,6 +56,37 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _arrayLikeToArray$1(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray$1(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
+}
+
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -128,21 +160,6 @@ function _iterableToArrayLimit(r, l) {
   }
 }
 
-function _arrayLikeToArray$1(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray$1(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
-}
-
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
@@ -199,7 +216,7 @@ var classes = {
   wrapper: 'p-treeselect-items-wrapper',
   transition: 'p-connected-overlay'
 };
-var styles = "\n@layer primereact {\n    .p-treeselect {\n        display: inline-flex;\n        cursor: pointer;\n        position: relative;\n        user-select: none;\n    }\n    \n    .p-treeselect-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n    }\n    \n    .p-treeselect-label-container {\n        overflow: hidden;\n        flex: 1 1 auto;\n        cursor: pointer;\n    }\n    \n    .p-treeselect-label  {\n        display: block;\n        white-space: nowrap;\n        cursor: pointer;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n    \n    .p-treeselect-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n    \n    .p-treeselect-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-treeselect .p-treeselect-panel {\n        min-width: 100%;\n    }\n    \n    .p-treeselect-items-wrapper {\n        overflow: auto;\n    }\n    \n    .p-treeselect-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-treeselect-filter-container {\n        position: relative;\n        flex: 1 1 auto;\n    }\n    \n    .p-treeselect-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-treeselect-filter-container .p-inputtext {\n        width: 100%;\n    }\n    \n    .p-treeselect-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-treeselect-clear-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-fluid .p-treeselect {\n        display: flex;\n}\n}\n";
+var styles = "\n@layer primereact {\n    .p-treeselect {\n        display: inline-flex;\n        cursor: pointer;\n        position: relative;\n        user-select: none;\n    }\n\n    .p-treeselect-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n    }\n\n    .p-treeselect-label-container {\n        overflow: hidden;\n        flex: 1 1 auto;\n        cursor: pointer;\n    }\n\n    .p-treeselect-label  {\n        display: block;\n        white-space: nowrap;\n        cursor: pointer;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    .p-treeselect-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n\n    .p-treeselect-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n\n    .p-treeselect .p-treeselect-panel {\n        min-width: 100%;\n    }\n\n    .p-treeselect-items-wrapper {\n        overflow: auto;\n    }\n\n    .p-treeselect-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .p-treeselect-filter-container {\n        position: relative;\n        flex: 1 1 auto;\n    }\n\n    .p-treeselect-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n\n    .p-treeselect-filter-container .p-inputtext {\n        width: 100%;\n    }\n\n    .p-treeselect-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-treeselect-clear-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n\n    .p-fluid .p-treeselect {\n        display: flex;\n}\n}\n";
 var TreeSelectBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TreeSelect',
@@ -229,6 +246,8 @@ var TreeSelectBase = componentbase.ComponentBase.extend({
     name: null,
     nodeTemplate: null,
     onChange: null,
+    onFocus: null,
+    onBlur: null,
     onFilterValueChange: null,
     onHide: null,
     onNodeCollapse: null,
@@ -263,6 +282,7 @@ var TreeSelectBase = componentbase.ComponentBase.extend({
 function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TreeSelectPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+  var mergeProps = hooks.useMergeProps();
   var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
   var ptm = props.ptm,
     cx = props.cx;
@@ -271,23 +291,30 @@ var TreeSelectPanel = /*#__PURE__*/React__namespace.forwardRef(function (props,
       hostName: props.hostName
     }, options));
   };
+  var onKeyDown = function onKeyDown(event) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      props.hide();
+    }
+  };
   var createElement = function createElement() {
     var wrapperStyle = {
       maxHeight: props.scrollHeight || 'auto'
     };
-    var panelProps = utils.mergeProps({
+    var panelProps = mergeProps({
       className: cx('panel', {
         panelProps: props,
         context: context
       }),
       style: props.panelStyle,
+      onKeyDown: onKeyDown,
       onClick: props.onClick
     }, getPTOptions('panel'));
-    var wrapperProps = utils.mergeProps({
+    var wrapperProps = mergeProps({
       className: cx('wrapper'),
       style: wrapperStyle
     }, getPTOptions('wrapper'));
-    var transitionProps = utils.mergeProps({
+    var transitionProps = mergeProps({
       classNames: cx('transition'),
       "in": props["in"],
       timeout: {
@@ -305,7 +332,7 @@ var TreeSelectPanel = /*#__PURE__*/React__namespace.forwardRef(function (props,
       nodeRef: ref
     }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: ref
-    }, panelProps), props.header, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, props.children), props.footer));
+    }, panelProps), props.firstHiddenFocusableElementOnOverlay, props.header, /*#__PURE__*/React__namespace.createElement("div", wrapperProps, props.children), props.footer, props.lastHiddenFocusableElementOnOverlay));
   };
   var element = createElement();
   return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
@@ -321,6 +348,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var mergeProps = hooks.useMergeProps();
   var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
   var props = TreeSelectBase.getProps(inProps, context);
   var _React$useState = React__namespace.useState(false),
@@ -345,12 +373,18 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   var focusInputRef = React__namespace.useRef(props.inputRef);
   var triggerRef = React__namespace.useRef(null);
   var selfChange = React__namespace.useRef(null);
+  var treeRef = React__namespace.useRef(null);
+  var firstHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
+  var lastHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
+  var focusToTree = React__namespace.useRef(false);
+  var listId = React__namespace.useRef('');
   var expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
   var filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
   var isValueEmpty = utils.ObjectUtils.isEmpty(props.value);
   var hasNoOptions = utils.ObjectUtils.isEmpty(props.options);
   var isSingleSelectionMode = props.selectionMode === 'single';
   var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
+  var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
   var metaData = {
     props: props,
     state: {
@@ -397,15 +431,18 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   };
   var hide = function hide() {
     setOverlayVisibleState(false);
+    focusInputRef.current && utils.DomHandler.focus(focusInputRef.current);
   };
   var onInputFocus = function onInputFocus() {
     setFocusedState(true);
+    props.onFocus && props.onFocus();
   };
   var onInputBlur = function onInputBlur() {
     setFocusedState(false);
+    props.onBlur && props.onBlur();
   };
   var onClick = function onClick(event) {
-    if (!props.disabled && (!overlayRef.current || !overlayRef.current.contains(event.target)) && !utils.DomHandler.hasClass(event.target, 'p-treeselect-close')) {
+    if (!props.disabled && (!overlayRef.current || !overlayRef.current.contains(event.target)) && !utils.DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'closebutton')) {
       utils.DomHandler.focus(focusInputRef.current);
       overlayVisibleState ? hide() : show();
     }
@@ -456,6 +493,7 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   };
   var onNodeUnselect = function onNodeUnselect(node) {
     props.onNodeUnselect && props.onNodeUnselect(node);
+    isCheckboxSelectionMode && node.originalEvent.stopPropagation();
   };
   var onNodeToggle = function onNodeToggle(e) {
     if (props.onToggle) {
@@ -473,44 +511,88 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       target: elementRef.current
     });
   };
-  var onInputKeyDown = function onInputKeyDown(event) {
-    switch (event.which) {
-      //down
-      case 40:
-        if (!overlayVisibleState && event.altKey) {
-          show();
-        }
+  var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
+    var focusableEl = event.relatedTarget === focusInputRef.current ? utils.DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+    utils.DomHandler.focus(focusableEl);
+  };
+  var onLastHiddenFocus = function onLastHiddenFocus(event) {
+    var focusableEl = event.relatedTarget === focusInputRef.current ? utils.DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+    utils.DomHandler.focus(focusableEl);
+  };
+  var onHeaderElementKeyDown = function onHeaderElementKeyDown(event, isHideButton) {
+    switch (event.code) {
+      case 'ArrowDown':
+        event.preventDefault();
+        setFocusToFocusableFirstNode();
         break;
-
-      //space
-      case 32:
-        if (!overlayVisibleState) {
-          show();
-          event.preventDefault();
-        }
+      case 'ArrowUp':
+        event.preventDefault();
+        focusInputRef.current && utils.DomHandler.focus(focusInputRef.current);
         break;
-
-      //enter and escape
-      case 13:
-      case 27:
+      case 'Space':
+      case 'Enter':
+      case 'NumpadEnter':
+        event.preventDefault();
+        if (isHideButton) hide();
+        break;
+      case 'Escape':
+        onEscapeKey(event);
+        break;
+    }
+  };
+  var onKeyDown = function onKeyDown(event) {
+    switch (event.code) {
+      case 'ArrowDown':
+        onArrowDownKey(event);
+        break;
+      case 'Space':
+      case 'Enter':
+      case 'NumpadEnter':
+        onEnterKey(event);
+        break;
+      case 'Escape':
+        onEscapeKey(event);
+        break;
+      case 'Tab':
         if (overlayVisibleState) {
-          hide();
           event.preventDefault();
+          if (event.shiftKey) setFocusToFocusableFirstNode();else onTabKey(event);
         }
         break;
-
-      //tab
-      case 9:
-        hide();
-        break;
     }
   };
-  var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
-    //enter
-    if (event.which === 13) {
+  var onArrowDownKey = function onArrowDownKey(event) {
+    if (overlayVisibleState) return;
+    focusToTree.current = true;
+    show();
+    event.preventDefault();
+  };
+  var onEnterKey = function onEnterKey(event) {
+    if (overlayVisibleState) {
+      hide();
+    } else {
+      onArrowDownKey(event);
+    }
+    event.preventDefault();
+  };
+  var onEscapeKey = function onEscapeKey(event) {
+    if (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()) {
+        utils.DomHandler.focus(firstHiddenFocusableElementOnOverlay.current);
+        event.preventDefault();
+      }
+    }
+  };
+  var hasFocusableElements = function hasFocusableElements() {
+    return utils.DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
+  };
   var onFilterInputChange = function onFilterInputChange(event) {
     var value = event.target.value;
     if (props.onFilterValueChange) {
@@ -532,6 +614,7 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       top: '0',
       left: '0'
     });
+    setFocusToFocusableFirstNode();
     alignOverlay();
     scrollInView();
   };
@@ -556,7 +639,7 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     utils.DomHandler.alignOverlay(overlayRef.current, triggerRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo);
   };
   var scrollInView = function scrollInView() {
-    var highlightItem = utils.DomHandler.findSingle(overlayRef.current, '.p-treenode-content.p-highlight');
+    var highlightItem = utils.DomHandler.findSingle(overlayRef.current, '[data-pc-section="content"][data-p-highlight="true"]');
     if (highlightItem && highlightItem.scrollIntoView) {
       highlightItem.scrollIntoView({
         block: 'nearest',
@@ -609,6 +692,13 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       updateTreeBranchState(null, null, keys);
     }
   };
+  var setFocusToFocusableFirstNode = function setFocusToFocusableFirstNode() {
+    var treeNodeEl = utils.DomHandler.find(treeRef.current.getElement(), '[data-pc-section="node"]');
+    var focusedElement = _toConsumableArray(treeNodeEl).find(function (item) {
+      return item.getAttribute('tabindex') === '0';
+    });
+    utils.DomHandler.focus(focusedElement);
+  };
   var updateTreeBranchState = function updateTreeBranchState(node, path, keys) {
     if (node) {
       if (isSelected(node, keys)) {
@@ -690,6 +780,7 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   }, [focusInputRef, props.inputRef]);
   hooks.useMountEffect(function () {
     updateTreeState();
+    listId.current = utils.UniqueComponentId() + '_list';
     if (props.autoFocus) {
       utils.DomHandler.focus(focusInputRef.current, props.autoFocus);
     }
@@ -703,6 +794,12 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   hooks.useUpdateEffect(function () {
     updateTreeState();
   }, [props.options]);
+  hooks.useUpdateEffect(function () {
+    if (focusToTree.current && overlayVisibleState) {
+      focusToTree.current = false;
+      setFocusToFocusableFirstNode();
+    }
+  }, [overlayVisibleState]);
   hooks.useUpdateEffect(function () {
     if (overlayVisibleState && expandedKeysState) {
       alignOverlay();
@@ -720,18 +817,22 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     utils.ZIndexUtils.clear(overlayRef.current);
   });
   var createKeyboardHelper = function createKeyboardHelper() {
-    var hiddenInputWrapperProps = utils.mergeProps({
+    var hiddenInputWrapperProps = mergeProps({
       className: 'p-hidden-accessible'
     }, ptm('hiddenInputWrapper'));
-    var hiddenInputProps = utils.mergeProps(_objectSpread({
+    var hiddenInputProps = mergeProps(_objectSpread({
       ref: focusInputRef,
       role: 'listbox',
       id: props.inputId,
       type: 'text',
       'aria-expanded': overlayVisibleState,
+      'aria-label': props.ariaLabel,
+      'aria-labelledby': props.ariaLabelledBy,
+      'aria-haspopup': 'tree',
+      'aria-controls': listId.current,
       onFocus: onInputFocus,
       onBlur: onInputBlur,
-      onKeyDown: onInputKeyDown,
+      onKeyDown: onKeyDown,
       disabled: props.disabled,
       tabIndex: props.tabIndex
     }, ariaProps), ptm('hiddenInput'));
@@ -740,16 +841,16 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     })));
   };
   var createLabel = function createLabel() {
-    var tokenProps = utils.mergeProps({
+    var tokenProps = mergeProps({
       className: cx('token')
     }, ptm('token'));
-    var tokenLabelProps = utils.mergeProps({
+    var tokenLabelProps = mergeProps({
       className: cx('tokenLabel')
     }, ptm('tokenLabel'));
-    var labelContainerProps = utils.mergeProps({
+    var labelContainerProps = mergeProps({
       className: cx('labelContainer')
     }, ptm('labelContainer'));
-    var labelProps = utils.mergeProps({
+    var labelProps = mergeProps({
       className: cx('label', {
         isValueEmpty: isValueEmpty,
         getLabel: getLabel
@@ -772,14 +873,14 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     return /*#__PURE__*/React__namespace.createElement("div", labelContainerProps, /*#__PURE__*/React__namespace.createElement("div", labelProps, content));
   };
   var createDropdownIcon = function createDropdownIcon() {
-    var triggerProps = utils.mergeProps({
+    var triggerProps = mergeProps({
       ref: triggerRef,
       className: cx('trigger'),
       role: 'button',
-      'aria-haspopup': 'listbox',
+      'aria-haspopup': 'tree',
       'aria-expanded': overlayVisibleState
     }, ptm('trigger'));
-    var triggerIconProps = utils.mergeProps({
+    var triggerIconProps = mergeProps({
       className: cx('triggerIcon')
     }, ptm('triggerIcon'));
     var icon = props.dropdownIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, triggerIconProps);
@@ -790,7 +891,7 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   };
   var createClearIcon = function createClearIcon() {
     if (props.value != null && props.showClear && !props.disabled) {
-      var clearIconProps = utils.mergeProps({
+      var clearIconProps = mergeProps({
         className: cx('clearIcon'),
         onPointerUp: clear
       }, ptm('clearIcon'));
@@ -802,10 +903,12 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     return null;
   };
   var createContent = function createContent() {
-    var emptyMessageProps = utils.mergeProps({
+    var emptyMessageProps = mergeProps({
       className: cx('emptyMessage')
     }, ptm('emptyMessage'));
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(tree.Tree, {
+      ref: treeRef,
+      id: listId.current,
       expandedKeys: expandedKeys,
       filter: props.filter,
       filterBy: props.filterBy,
@@ -836,21 +939,23 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   var createFilterElement = function createFilterElement() {
     if (props.filter) {
       var filterValue = utils.ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
-      var filterContainerProps = utils.mergeProps({
+      var filterContainerProps = mergeProps({
         className: cx('filterContainer')
       }, ptm('filterContainer'));
-      var filterProps = utils.mergeProps({
+      var filterProps = mergeProps({
         ref: filterInputRef,
         type: 'text',
         value: filterValue,
         autoComplete: 'off',
         className: cx('filter'),
         placeholder: props.filterPlaceholder,
-        onKeyDown: onFilterInputKeyDown,
+        onKeyDown: function onKeyDown(event) {
+          return onHeaderElementKeyDown(event, false);
+        },
         onChange: onFilterInputChange,
         disabled: props.disabled
       }, ptm('filter'));
-      var filterIconProps = utils.mergeProps({
+      var filterIconProps = mergeProps({
         className: cx('filterIcon')
       }, ptm('filterIcon'));
       var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, filterIconProps);
@@ -863,7 +968,9 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
           className: 'p-treeselect-filter-container',
           element: filterContent,
           filterOptions: filterOptions,
-          filterInputKeyDown: onFilterInputKeyDown,
+          filterInputKeyDown: function filterInputKeyDown(event) {
+            return onHeaderElementKeyDown(event, function () {});
+          },
           filterInputChange: onFilterInputChange,
           filterIconClassName: 'p-dropdown-filter-icon',
           props: props
@@ -875,7 +982,7 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   };
   var createHeader = function createHeader() {
     var filterElement = createFilterElement();
-    var closeIconProps = utils.mergeProps({
+    var closeIconProps = mergeProps({
       className: cx('closeIcon'),
       'aria-hidden': true
     }, ptm('closeIcon'));
@@ -883,13 +990,16 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     var closeIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, closeIconProps), {
       props: props
     });
-    var closeButtonProps = utils.mergeProps({
+    var closeButtonProps = mergeProps({
       type: 'button',
       className: cx('closeButton'),
+      onKeyDown: function onKeyDown(event) {
+        return onHeaderElementKeyDown(event, true);
+      },
       onClick: hide,
       'aria-label': PrimeReact.localeOption('close')
     }, ptm('closeButton'));
-    var headerProps = utils.mergeProps({
+    var headerProps = mergeProps({
       className: cx('header')
     }, ptm('header'));
     var closeElement = /*#__PURE__*/React__namespace.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
@@ -915,7 +1025,27 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   var selectedNodes = getSelectedNodes();
   var otherProps = TreeSelectBase.getOtherProps(props);
   var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
-  var rootProps = utils.mergeProps({
+  var firstHiddenFocusableElementOnOverlayProps = mergeProps({
+    ref: firstHiddenFocusableElementOnOverlay,
+    role: 'presentation',
+    className: 'p-hidden-accessible p-hidden-focusable',
+    tabIndex: 0,
+    onFocus: onFirstHiddenFocus,
+    'aria-hidden': true,
+    'data-p-hidden-accessible': true,
+    'data-p-hidden-focusable': true
+  }, ptm('firstHiddenFocusableElementOnOverlay'));
+  var lastHiddenFocusableElementOnOverlayProps = mergeProps({
+    ref: lastHiddenFocusableElementOnOverlay,
+    role: 'presentation',
+    className: 'p-hidden-accessible p-hidden-focusable',
+    tabIndex: 0,
+    onFocus: onLastHiddenFocus,
+    'aria-hidden': true,
+    'data-p-hidden-accessible': true,
+    'data-p-hidden-focusable': true
+  }, ptm('lastHiddenFocusableElementOnOverlay'));
+  var rootProps = mergeProps({
     ref: elementRef,
     className: cx('root', {
       focusedState: focusedState,
@@ -941,7 +1071,10 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     scrollHeight: props.scrollHeight,
     onClick: onOverlayClick,
     header: header,
+    hide: hide,
     footer: footer,
+    firstHiddenFocusableElementOnOverlay: /*#__PURE__*/React__namespace.createElement("span", firstHiddenFocusableElementOnOverlayProps),
+    lastHiddenFocusableElementOnOverlay: /*#__PURE__*/React__namespace.createElement("span", lastHiddenFocusableElementOnOverlayProps),
     transitionOptions: props.transitionOptions,
     "in": overlayVisibleState,
     onEnter: onOverlayEnter,
@@ -950,7 +1083,12 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     onExited: onOverlayExited,
     ptm: ptm,
     cx: cx
-  }, content));
+  }, content), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    target: elementRef,
+    content: props.tooltip
+  }, props.tooltipOptions, {
+    pt: ptm('tooltip')
+  })));
 }));
 TreeSelect.displayName = 'TreeSelect';