primereact 10.3.0 → 10.3.2

package/treeselect/treeselect.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.treeselect = (function (exports, React, PrimeReact, componentbase, hooks, chevrondown, search, times, overlayservice, ripple, tree, utils, csstransition, portal) {
+this.primereact.treeselect = (function (exports, React, PrimeReact, componentbase, hooks, chevrondown, search, times, overlayservice, ripple, tooltip, tree, utils, csstransition, portal) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -40,6 +40,37 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     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";
 
@@ -113,21 +144,6 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     }
   }
 
-  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.");
   }
@@ -184,7 +200,7 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     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',
@@ -214,6 +230,8 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
       name: null,
       nodeTemplate: null,
       onChange: null,
+      onFocus: null,
+      onBlur: null,
       onFilterValueChange: null,
       onHide: null,
       onNodeCollapse: null,
@@ -248,6 +266,7 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
   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;
@@ -256,23 +275,30 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
         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: {
@@ -290,7 +316,7 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
         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, {
@@ -306,6 +332,7 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
   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),
@@ -330,12 +357,18 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     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: {
@@ -382,15 +415,18 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     };
     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();
       }
@@ -441,6 +477,7 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     };
     var onNodeUnselect = function onNodeUnselect(node) {
       props.onNodeUnselect && props.onNodeUnselect(node);
+      isCheckboxSelectionMode && node.originalEvent.stopPropagation();
     };
     var onNodeToggle = function onNodeToggle(e) {
       if (props.onToggle) {
@@ -458,44 +495,88 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
         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) {
@@ -517,6 +598,7 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
         top: '0',
         left: '0'
       });
+      setFocusToFocusableFirstNode();
       alignOverlay();
       scrollInView();
     };
@@ -541,7 +623,7 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
       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',
@@ -594,6 +676,13 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
         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)) {
@@ -675,6 +764,7 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     }, [focusInputRef, props.inputRef]);
     hooks.useMountEffect(function () {
       updateTreeState();
+      listId.current = utils.UniqueComponentId() + '_list';
       if (props.autoFocus) {
         utils.DomHandler.focus(focusInputRef.current, props.autoFocus);
       }
@@ -688,6 +778,12 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     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();
@@ -705,18 +801,22 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
       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'));
@@ -725,16 +825,16 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
       })));
     };
     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
@@ -757,14 +857,14 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
       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);
@@ -775,7 +875,7 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     };
     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'));
@@ -787,10 +887,12 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
       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,
@@ -821,21 +923,23 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     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);
@@ -848,7 +952,9 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
             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
@@ -860,7 +966,7 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     };
     var createHeader = function createHeader() {
       var filterElement = createFilterElement();
-      var closeIconProps = utils.mergeProps({
+      var closeIconProps = mergeProps({
         className: cx('closeIcon'),
         'aria-hidden': true
       }, ptm('closeIcon'));
@@ -868,13 +974,16 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
       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));
@@ -900,7 +1009,27 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
     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,
@@ -926,7 +1055,10 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
       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,
@@ -935,7 +1067,12 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
       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';
 
@@ -945,4 +1082,4 @@ this.primereact.treeselect = (function (exports, React, PrimeReact, componentbas
 
   return exports;
 
-})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.icons.chevrondown, primereact.icons.search, primereact.icons.times, primereact.overlayservice, primereact.ripple, primereact.tree, primereact.utils, primereact.csstransition, primereact.portal);
+})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.icons.chevrondown, primereact.icons.search, primereact.icons.times, primereact.overlayservice, primereact.ripple, primereact.tooltip, primereact.tree, primereact.utils, primereact.csstransition, primereact.portal);