primereact 10.3.0 → 10.3.2

package/tree/tree.cjs.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var api = require('primereact/api');
 var componentbase = require('primereact/componentbase');
+var hooks = require('primereact/hooks');
 var search = require('primereact/icons/search');
 var spinner = require('primereact/icons/spinner');
 var utils = require('primereact/utils');
@@ -162,6 +163,19 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$2(arr, i) || _nonIterableRest();
 }
 
+/* eslint-disable */
+var useUpdateEffect = function useUpdateEffect(fn, deps) {
+  var mounted = React__namespace.useRef(false);
+  return React__namespace.useEffect(function () {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    return fn && fn();
+  }, deps);
+};
+/* eslint-enable */
+
 var classes = {
   container: 'p-tree-container',
   loadingIcon: 'p-tree-loading-icon',
@@ -216,7 +230,7 @@ var classes = {
     });
   }
 };
-var styles = "\n@layer primereact {\n    .p-tree-container {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        overflow: auto;\n    }\n    \n    .p-treenode-children {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    \n    .p-treenode-selectable {\n        cursor: pointer;\n        user-select: none;\n    }\n    \n    .p-tree-toggler {\n        cursor: pointer;\n        user-select: none;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-treenode-leaf > .p-treenode-content .p-tree-toggler {\n        visibility: hidden;\n    }\n    \n    .p-treenode-content {\n        display: flex;\n        align-items: center;\n    }\n    \n    .p-tree-filter {\n        width: 100%;\n    }\n    \n    .p-tree-filter-container {\n        position: relative;\n        display: block;\n        width: 100%;\n    }\n    \n    .p-tree-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-tree-loading {\n        position: relative;\n        min-height: 4rem;\n    }\n    \n    .p-tree .p-tree-loading-overlay {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-tree-container {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        overflow: auto;\n    }\n\n    .p-treenode-children {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n\n    .p-treenode-selectable {\n        cursor: pointer;\n        user-select: none;\n    }\n\n    .p-tree-toggler {\n        cursor: pointer;\n        user-select: none;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-treenode-leaf > .p-treenode-content .p-tree-toggler {\n        visibility: hidden;\n    }\n\n    .p-treenode-content {\n        display: flex;\n        align-items: center;\n    }\n\n    .p-tree-filter {\n        width: 100%;\n    }\n\n    .p-tree-filter-container {\n        position: relative;\n        display: block;\n        width: 100%;\n    }\n\n    .p-tree-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n\n    .p-tree-loading {\n        position: relative;\n        min-height: 4rem;\n    }\n\n    .p-tree .p-tree-loading-overlay {\n        position: absolute;\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n}\n";
 var TreeBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Tree',
@@ -231,6 +245,8 @@ var TreeBase = componentbase.ComponentBase.extend({
     contextMenuSelectionKey: null,
     onContextMenuSelectionChange: null,
     expandedKeys: null,
+    ariaLabel: null,
+    ariaLabelledBy: null,
     style: null,
     className: null,
     contentStyle: null,
@@ -254,6 +270,7 @@ var TreeBase = componentbase.ComponentBase.extend({
     filterPlaceholder: null,
     filterLocale: undefined,
     filterTemplate: null,
+    level: 0,
     nodeTemplate: null,
     togglerTemplate: null,
     onSelect: null,
@@ -281,8 +298,11 @@ function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymb
 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 UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
   var contentRef = React__namespace.useRef(null);
+  var elementRef = React__namespace.useRef(null);
   var nodeTouched = React__namespace.useRef(false);
+  var mergeProps = hooks.useMergeProps();
   var isLeaf = props.isNodeLeaf(props.node);
+  var label = props.node.label;
   var expanded = (props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false) || props.node.expanded;
   var ptm = props.ptm,
     cx = props.cx;
@@ -298,11 +318,13 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
     });
   };
   var expand = function expand(event) {
+    var navigateFocusToChild = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var expandedKeys = props.expandedKeys ? _objectSpread$1({}, props.expandedKeys) : {};
     expandedKeys[props.node.key] = true;
     props.onToggle({
       originalEvent: event,
-      value: expandedKeys
+      value: expandedKeys,
+      navigateFocusToChild: navigateFocusToChild
     });
     invokeToggleEvents(event, true);
   };
@@ -319,7 +341,7 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
     if (props.disabled) {
       return;
     }
-    expanded ? collapse(event) : expand(event);
+    expanded ? collapse(event) : expand(event, false);
     event.preventDefault();
     event.stopPropagation();
   };
@@ -340,72 +362,6 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
       }
     }
   };
-  var onNodeKeyDown = function onNodeKeyDown(event) {
-    if (props.disabled) {
-      return;
-    }
-    var nodeElement = event.target.parentElement;
-    if (!utils.DomHandler.hasClass(nodeElement, 'p-treenode')) {
-      return;
-    }
-    switch (event.which) {
-      //down arrow
-      case 40:
-        var listElement = nodeElement.children[1];
-        if (listElement) {
-          focusNode(listElement.children[0]);
-        } else {
-          var nextNodeElement = nodeElement.nextElementSibling;
-          while (nextNodeElement) {
-            if (!utils.DomHandler.hasClass(nextNodeElement, 'p-treenode-droppoint')) {
-              break;
-            }
-            nextNodeElement = nextNodeElement.nextElementSibling;
-          }
-          if (nextNodeElement) {
-            focusNode(nextNodeElement);
-          } else {
-            var nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement);
-            nextSiblingAncestor && focusNode(nextSiblingAncestor);
-          }
-        }
-        event.preventDefault();
-        break;
-
-      //up arrow
-      case 38:
-        if (nodeElement.previousElementSibling) {
-          focusNode(findLastVisibleDescendant(nodeElement.previousElementSibling));
-        } else {
-          var parentNodeElement = getParentNodeElement(nodeElement);
-          parentNodeElement && focusNode(parentNodeElement);
-        }
-        event.preventDefault();
-        break;
-
-      //right arrow
-      case 39:
-        if (!expanded) {
-          expand(event);
-        }
-        event.preventDefault();
-        break;
-
-      //left arrow
-      case 37:
-        if (expanded) {
-          collapse(event);
-        }
-        event.preventDefault();
-        break;
-
-      //enter
-      case 13:
-        onClick(event);
-        event.preventDefault();
-        break;
-    }
-  };
   var findNextSiblingOfAncestor = function findNextSiblingOfAncestor(nodeElement) {
     var parentNodeElement = getParentNodeElement(nodeElement);
     return parentNodeElement ? parentNodeElement.nextElementSibling || findNextSiblingOfAncestor(parentNodeElement) : null;
@@ -424,7 +380,7 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
     return utils.DomHandler.hasClass(parentNodeElement, 'p-treenode') ? parentNodeElement : null;
   };
   var focusNode = function focusNode(element) {
-    element && element.children[0] && element.children[0].focus();
+    element && element.focus();
   };
   var onClick = function onClick(event) {
     if (props.onClick) {
@@ -584,6 +540,131 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
       });
     }
   };
+  var onKeyDown = function onKeyDown(event) {
+    if (!isSameNode(event)) return;
+    switch (event.code) {
+      case 'Tab':
+        onTabKey();
+        break;
+      case 'ArrowDown':
+        onArrowDown(event);
+        break;
+      case 'ArrowUp':
+        onArrowUp(event);
+        break;
+      case 'ArrowRight':
+        onArrowRight(event);
+        break;
+      case 'ArrowLeft':
+        onArrowLeft(event);
+        break;
+      case 'Enter':
+      case 'NumpadEnter':
+      case 'Space':
+        onEnterKey(event);
+        break;
+    }
+  };
+  var onArrowDown = function onArrowDown(event) {
+    var nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
+    var listElement = nodeElement.children[1];
+    if (listElement) {
+      focusRowChange(nodeElement, listElement.children[0]);
+    } else {
+      if (nodeElement.nextElementSibling) {
+        focusRowChange(nodeElement, nodeElement.nextElementSibling);
+      } else {
+        var nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement);
+        if (nextSiblingAncestor) {
+          focusRowChange(nodeElement, nextSiblingAncestor);
+        }
+      }
+    }
+    event.preventDefault();
+  };
+  var onArrowUp = function onArrowUp(event) {
+    var nodeElement = event.target;
+    if (nodeElement.previousElementSibling) {
+      focusRowChange(nodeElement, nodeElement.previousElementSibling, findLastVisibleDescendant(nodeElement.previousElementSibling));
+    } else {
+      var parentNodeElement = getParentNodeElement(nodeElement);
+      if (parentNodeElement) {
+        focusRowChange(nodeElement, parentNodeElement);
+      }
+    }
+    event.preventDefault();
+  };
+  var onArrowRight = function onArrowRight(event) {
+    if (isLeaf || expanded) return;
+    event.currentTarget.tabIndex = -1;
+    expand(event, true);
+  };
+  var onArrowLeft = function onArrowLeft(event) {
+    var togglerElement = utils.DomHandler.findSingle(event.currentTarget, '[data-pc-section="toggler"]');
+    if (props.level === 0 && !expanded) {
+      return false;
+    }
+    if (expanded && !isLeaf) {
+      togglerElement.click();
+      return false;
+    }
+    var target = findBeforeClickableNode(event.currentTarget);
+    if (target) {
+      focusRowChange(event.currentTarget, target);
+    }
+  };
+  var onEnterKey = function onEnterKey(event) {
+    setTabIndexForSelectionMode(event, nodeTouched.current);
+    onClick(event);
+    event.preventDefault();
+  };
+  var onTabKey = function onTabKey() {
+    setAllNodesTabIndexes();
+  };
+  var setAllNodesTabIndexes = function setAllNodesTabIndexes() {
+    var nodes = utils.DomHandler.find(contentRef.current.closest('[data-pc-section="container"]'), '[role="treeitem"]');
+    var hasSelectedNode = _toConsumableArray(nodes).some(function (node) {
+      return node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true';
+    });
+    _toConsumableArray(nodes).forEach(function (node) {
+      node.tabIndex = -1;
+    });
+    if (hasSelectedNode) {
+      var selectedNodes = _toConsumableArray(nodes).filter(function (node) {
+        return node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true';
+      });
+      selectedNodes[0].tabIndex = 0;
+      return;
+    }
+    _toConsumableArray(nodes)[0].tabIndex = 0;
+  };
+  var setTabIndexForSelectionMode = function setTabIndexForSelectionMode(event, nodeTouched) {
+    if (props.selectionMode !== null) {
+      var elements = _toConsumableArray(utils.DomHandler.find(elementRef.current.parentElement, '[role="treeitem"]'));
+      event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
+      if (elements.every(function (element) {
+        return element.tabIndex === -1;
+      })) {
+        elements[0].tabIndex = 0;
+      }
+    }
+  };
+  var focusRowChange = function focusRowChange(firstFocusableRow, currentFocusedRow, lastVisibleDescendant) {
+    firstFocusableRow.tabIndex = '-1';
+    currentFocusedRow.tabIndex = '0';
+    focusNode(lastVisibleDescendant || currentFocusedRow);
+  };
+  var findBeforeClickableNode = function findBeforeClickableNode(node) {
+    var parentListElement = node.closest('ul').closest('li');
+    if (parentListElement) {
+      var prevNodeButton = utils.DomHandler.findSingle(parentListElement, 'button');
+      if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
+        return parentListElement;
+      }
+      return findBeforeClickableNode(node.previousElementSibling);
+    }
+    return null;
+  };
   var propagateUp = function propagateUp(event) {
     var check = event.check;
     var selectionKeys = event.selectionKeys;
@@ -647,6 +728,9 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
   var isChecked = function isChecked() {
     return (props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].checked : false) || false;
   };
+  var isSameNode = function isSameNode(event) {
+    return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role="treeitem"]')));
+  };
   var isPartialChecked = function isPartialChecked() {
     return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false;
   };
@@ -746,10 +830,10 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var createLabel = function createLabel() {
-    var labelProps = utils.mergeProps({
+    var labelProps = mergeProps({
       className: cx('label')
     }, getPTOptions('label'));
-    var content = /*#__PURE__*/React__namespace.createElement("span", labelProps, props.node.label);
+    var content = /*#__PURE__*/React__namespace.createElement("span", labelProps, label);
     if (props.nodeTemplate) {
       var defaultContentOptions = {
         onTogglerClick: onTogglerClick,
@@ -766,22 +850,22 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
     if (isCheckboxSelectionMode() && props.node.selectable !== false) {
       var checked = isChecked();
       var partialChecked = isPartialChecked();
-      var checkboxIconProps = utils.mergeProps({
+      var checkboxIconProps = mergeProps({
         className: cx('checkboxIcon')
       }, getPTOptions('checkboxIcon'));
       var icon = checked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checkboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, checkboxIconProps) : null;
       var checkboxIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, checkboxIconProps), props);
-      var checkboxContainerProps = utils.mergeProps({
+      var checkboxContainerProps = mergeProps({
+        'aria-hidden': true,
         className: cx('checkboxContainer')
       }, getPTOptions('checkboxContainer'));
-      var checkboxProps = utils.mergeProps({
+      var checkboxProps = mergeProps({
         className: cx('checkbox', {
           checked: checked,
           partialChecked: partialChecked,
           nodeProps: props
         }),
-        role: 'checkbox',
-        'aria-checked': checked
+        role: 'checkbox'
       }, getPTOptions('checkbox'));
       return /*#__PURE__*/React__namespace.createElement("div", checkboxContainerProps, /*#__PURE__*/React__namespace.createElement("div", checkboxProps, checkboxIcon));
     }
@@ -790,7 +874,7 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
   var createIcon = function createIcon() {
     var icon = props.node.icon || (expanded ? props.node.expandedIcon : props.node.collapsedIcon);
     if (icon) {
-      var nodeIconProps = utils.mergeProps({
+      var nodeIconProps = mergeProps({
         className: utils.classNames(icon, cx('nodeIcon'))
       }, getPTOptions('nodeIcon'));
       return /*#__PURE__*/React__namespace.createElement("span", nodeIconProps);
@@ -798,8 +882,7 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
     return null;
   };
   var createToggler = function createToggler() {
-    var label = expanded ? api.ariaLabel('collapseLabel') : api.ariaLabel('expandLabel');
-    var togglerIconProps = utils.mergeProps({
+    var togglerIconProps = mergeProps({
       className: cx('togglerIcon'),
       'aria-hidden': true
     }, getPTOptions('togglerIcon'));
@@ -808,12 +891,12 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
       props: props,
       expanded: expanded
     });
-    var togglerProps = utils.mergeProps({
+    var togglerProps = mergeProps({
       type: 'button',
       className: cx('toggler'),
       tabIndex: -1,
-      onClick: onTogglerClick,
-      'aria-label': label
+      'aria-hidden': true,
+      onClick: onTogglerClick
     }, getPTOptions('toggler'));
     var content = /*#__PURE__*/React__namespace.createElement("button", togglerProps, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     if (props.togglerTemplate) {
@@ -831,7 +914,7 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   var createDropPoint = function createDropPoint(position) {
     if (props.dragdropScope) {
-      var droppointProps = utils.mergeProps({
+      var droppointProps = mergeProps({
         className: cx('droppoint'),
         onDrop: function onDrop(event) {
           return onDropPoint(event, position);
@@ -851,7 +934,7 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
     var checkbox = createCheckbox();
     var icon = createIcon();
     var label = createLabel();
-    var contentProps = utils.mergeProps({
+    var contentProps = mergeProps({
       ref: contentRef,
       className: utils.classNames(props.node.className, cx('content', {
         checked: checked,
@@ -871,12 +954,12 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
       onDragLeave: onDragLeave,
       onDragStart: onDragStart,
       onDragEnd: onDragEnd,
-      onKeyDown: onNodeKeyDown
+      'data-p-highlight': isCheckboxSelectionMode() ? checked : selected
     }, getPTOptions('content'));
     return /*#__PURE__*/React__namespace.createElement("div", contentProps, toggler, checkbox, icon, label);
   };
   var createChildren = function createChildren() {
-    var subgroupProps = utils.mergeProps({
+    var subgroupProps = mergeProps({
       className: cx('subgroup'),
       role: 'group'
     }, getPTOptions('subgroup'));
@@ -885,62 +968,70 @@ var UITreeNode = /*#__PURE__*/React__namespace.memo(function (props) {
         return /*#__PURE__*/React__namespace.createElement(UITreeNode, {
           key: childNode.key || childNode.label,
           node: childNode,
-          originalOptions: props.originalOptions,
-          parent: props.node,
+          checkboxIcon: props.checkboxIcon,
+          collapseIcon: props.collapseIcon,
+          contextMenuSelectionKey: props.contextMenuSelectionKey,
+          cx: cx,
+          disabled: props.disabled,
+          dragdropScope: props.dragdropScope,
+          expandIcon: props.expandIcon,
+          expandedKeys: props.expandedKeys,
           index: index,
+          isNodeLeaf: props.isNodeLeaf,
           last: index === props.node.children.length - 1,
-          path: props.path + '-' + index,
-          disabled: props.disabled,
-          selectionMode: props.selectionMode,
-          selectionKeys: props.selectionKeys,
-          onSelectionChange: props.onSelectionChange,
           metaKeySelection: props.metaKeySelection,
-          propagateSelectionDown: props.propagateSelectionDown,
-          propagateSelectionUp: props.propagateSelectionUp,
-          contextMenuSelectionKey: props.contextMenuSelectionKey,
-          onContextMenuSelectionChange: props.onContextMenuSelectionChange,
-          onContextMenu: props.onContextMenu,
-          onExpand: props.onExpand,
-          onCollapse: props.onCollapse,
-          onSelect: props.onSelect,
-          onUnselect: props.onUnselect,
+          nodeTemplate: props.nodeTemplate,
           onClick: props.onClick,
+          onCollapse: props.onCollapse,
+          onContextMenu: props.onContextMenu,
+          onContextMenuSelectionChange: props.onContextMenuSelectionChange,
           onDoubleClick: props.onDoubleClick,
-          expandedKeys: props.expandedKeys,
-          onToggle: props.onToggle,
-          onPropagateUp: propagateUp,
-          nodeTemplate: props.nodeTemplate,
-          togglerTemplate: props.togglerTemplate,
-          isNodeLeaf: props.isNodeLeaf,
-          dragdropScope: props.dragdropScope,
-          onDragStart: props.onDragStart,
           onDragEnd: props.onDragEnd,
+          onDragStart: props.onDragStart,
           onDrop: props.onDrop,
           onDropPoint: props.onDropPoint,
+          onExpand: props.onExpand,
+          onPropagateUp: propagateUp,
+          onSelect: props.onSelect,
+          onSelectionChange: props.onSelectionChange,
+          onToggle: props.onToggle,
+          onUnselect: props.onUnselect,
+          originalOptions: props.originalOptions,
+          parent: props.node,
+          path: props.path + '-' + index,
+          propagateSelectionDown: props.propagateSelectionDown,
+          propagateSelectionUp: props.propagateSelectionUp,
           ptm: ptm,
-          cx: cx
+          selectionKeys: props.selectionKeys,
+          selectionMode: props.selectionMode,
+          togglerTemplate: props.togglerTemplate
         });
       }));
     }
     return null;
   };
   var createNode = function createNode() {
-    var tabIndex = props.disabled ? undefined : 0;
+    var tabIndex = props.disabled || props.index !== 0 ? -1 : 0;
     var selected = isSelected();
     var checked = isChecked();
     var content = createContent();
     var children = createChildren();
-    var nodeProps = utils.mergeProps({
+    var nodeProps = mergeProps(_defineProperty(_defineProperty({
+      ref: elementRef,
       className: utils.classNames(props.node.className, cx('node', {
         isLeaf: isLeaf
       })),
       style: props.node.style,
       tabIndex: tabIndex,
       role: 'treeitem',
-      'aria-posinset': props.index + 1,
+      'aria-label': label,
+      'aria-level': props.level,
       'aria-expanded': expanded,
-      'aria-selected': checked || selected
-    }, getPTOptions('node'));
+      'aria-checked': checked,
+      'aria-setsize': props.node.children ? props.node.children.length : 0,
+      'aria-posinset': props.index + 1,
+      onKeyDown: onKeyDown
+    }, "aria-expanded", expanded), 'aria-selected', checked || selected), getPTOptions('node'));
     return /*#__PURE__*/React__namespace.createElement("li", nodeProps, content, children);
   };
   var node = createNode();
@@ -959,6 +1050,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 Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var mergeProps = hooks.useMergeProps();
   var context = React__namespace.useContext(api.PrimeReactContext);
   var props = TreeBase.getProps(inProps, context);
   var _React$useState = React__namespace.useState(''),
@@ -975,6 +1067,7 @@ var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
   var filterChanged = React__namespace.useRef(false);
   var filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
   var expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
+  var childFocusEvent = React__namespace.useRef(null);
   var _TreeBase$setMetaData = TreeBase.setMetaData({
       props: props,
       state: {
@@ -1000,12 +1093,33 @@ var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
     return props.filter && filteredNodes.current ? filteredNodes.current : props.value;
   };
   var onToggle = function onToggle(event) {
+    var originalEvent = event.originalEvent,
+      value = event.value,
+      navigateFocusToChild = event.navigateFocusToChild;
     if (props.onToggle) {
-      props.onToggle(event);
+      props.onToggle({
+        originalEvent: originalEvent,
+        value: value
+      });
     } else {
-      setExpandedKeysState(event.value);
+      if (navigateFocusToChild) {
+        childFocusEvent.current = originalEvent;
+      }
+      setExpandedKeysState(value);
     }
   };
+  useUpdateEffect(function () {
+    if (childFocusEvent.current) {
+      var event = childFocusEvent.current;
+      var nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
+      var listElement = nodeElement.children[1];
+      var childElement = listElement.children[0];
+      nodeElement.tabIndex = '-1';
+      childElement.tabIndex = '0';
+      childElement.focus();
+      childFocusEvent.current = null;
+    }
+  }, [expandedKeys]);
   var onDragStart = function onDragStart(event) {
     dragState.current = {
       path: event.path,
@@ -1278,41 +1392,42 @@ var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       hostName: "Tree",
       key: node.key || node.label,
       node: node,
+      level: props.level + 1,
       originalOptions: props.value,
       index: index,
       last: last,
       path: String(index),
       checkboxIcon: props.checkboxIcon,
-      expandIcon: props.expandIcon,
       collapseIcon: props.collapseIcon,
-      disabled: props.disabled,
-      selectionMode: props.selectionMode,
-      selectionKeys: props.selectionKeys,
-      onSelectionChange: props.onSelectionChange,
-      metaKeySelection: props.metaKeySelection,
       contextMenuSelectionKey: props.contextMenuSelectionKey,
-      onContextMenuSelectionChange: props.onContextMenuSelectionChange,
-      onContextMenu: props.onContextMenu,
-      propagateSelectionDown: props.propagateSelectionDown,
-      propagateSelectionUp: props.propagateSelectionUp,
-      onExpand: props.onExpand,
-      onCollapse: props.onCollapse,
-      onSelect: props.onSelect,
-      onUnselect: props.onUnselect,
+      cx: cx,
+      disabled: props.disabled,
+      dragdropScope: props.dragdropScope,
+      expandIcon: props.expandIcon,
       expandedKeys: expandedKeys,
-      onToggle: onToggle,
-      nodeTemplate: props.nodeTemplate,
-      togglerTemplate: props.togglerTemplate,
       isNodeLeaf: isNodeLeaf,
-      dragdropScope: props.dragdropScope,
-      onDragStart: onDragStart,
+      metaKeySelection: props.metaKeySelection,
+      nodeTemplate: props.nodeTemplate,
+      onClick: props.onNodeClick,
+      onCollapse: props.onCollapse,
+      onContextMenu: props.onContextMenu,
+      onContextMenuSelectionChange: props.onContextMenuSelectionChange,
+      onDoubleClick: props.onNodeDoubleClick,
       onDragEnd: onDragEnd,
+      onDragStart: onDragStart,
       onDrop: onDrop,
       onDropPoint: onDropPoint,
-      onClick: props.onNodeClick,
-      onDoubleClick: props.onNodeDoubleClick,
+      onExpand: props.onExpand,
+      onSelect: props.onSelect,
+      onSelectionChange: props.onSelectionChange,
+      onToggle: onToggle,
+      onUnselect: props.onUnselect,
+      propagateSelectionDown: props.propagateSelectionDown,
+      propagateSelectionUp: props.propagateSelectionUp,
       ptm: ptm,
-      cx: cx
+      selectionKeys: props.selectionKeys,
+      selectionMode: props.selectionMode,
+      togglerTemplate: props.togglerTemplate
     });
   };
   var createRootChildren = function createRootChildren() {
@@ -1328,9 +1443,11 @@ var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
   var createModel = function createModel() {
     if (props.value) {
       var rootNodes = createRootChildren();
-      var containerProps = utils.mergeProps(_objectSpread({
+      var containerProps = mergeProps(_objectSpread({
         className: utils.classNames(props.contentClassName, cx('container')),
         role: 'tree',
+        'aria-label': props.ariaLabel,
+        'aria-labelledby': props.ariaLabelledBy,
         style: props.contentStyle
       }, ariaProps), ptm('container'));
       return /*#__PURE__*/React__namespace.createElement("ul", containerProps, rootNodes);
@@ -1339,7 +1456,7 @@ var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
   };
   var createLoader = function createLoader() {
     if (props.loading) {
-      var loadingIconProps = utils.mergeProps({
+      var loadingIconProps = mergeProps({
         className: cx('loadingIcon')
       }, ptm('loadingIcon'));
       var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
@@ -1348,7 +1465,7 @@ var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
       var loadingIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
         props: props
       });
-      var loadingOverlayProps = utils.mergeProps({
+      var loadingOverlayProps = mergeProps({
         className: cx('loadingOverlay')
       }, ptm('loadingOverlay'));
       return /*#__PURE__*/React__namespace.createElement("div", loadingOverlayProps, loadingIcon);
@@ -1358,17 +1475,17 @@ var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
   var createFilter = function createFilter() {
     if (props.filter) {
       var value = utils.ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
-      var searchIconProps = utils.mergeProps({
+      var searchIconProps = mergeProps({
         className: cx('searchIcon')
       }, ptm('searchIcon'));
       var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, searchIconProps);
       var filterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, searchIconProps), {
         props: props
       });
-      var filterContainerProps = utils.mergeProps({
+      var filterContainerProps = mergeProps({
         className: cx('filterContainer')
       }, ptm('filterContainer'));
-      var inputProps = utils.mergeProps({
+      var inputProps = mergeProps({
         type: 'text',
         value: value,
         autoComplete: 'off',
@@ -1415,7 +1532,7 @@ var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
         };
         _content2 = utils.ObjectUtils.getJSXElement(props.header, defaultContentOptions);
       }
-      var headerProps = utils.mergeProps({
+      var headerProps = mergeProps({
         className: cx('header')
       }, ptm('header'));
       return /*#__PURE__*/React__namespace.createElement("div", headerProps, _content2);
@@ -1424,7 +1541,7 @@ var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
   };
   var createFooter = function createFooter() {
     var content = utils.ObjectUtils.getJSXElement(props.footer, props);
-    var footerProps = utils.mergeProps({
+    var footerProps = mergeProps({
       className: cx('footer')
     }, ptm('footer'));
     return /*#__PURE__*/React__namespace.createElement("div", footerProps, content);
@@ -1435,7 +1552,7 @@ var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.for
   var content = createModel();
   var header = createHeader();
   var footer = createFooter();
-  var rootProps = utils.mergeProps({
+  var rootProps = mergeProps({
     ref: elementRef,
     className: utils.classNames(props.className, cx('root')),
     style: props.style,