primereact 10.3.0 → 10.3.1

package/tree/tree.esm.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { ariaLabel, PrimeReactContext } from 'primereact/api';
+import { PrimeReactContext } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { SearchIcon } from 'primereact/icons/search';
 import { SpinnerIcon } from 'primereact/icons/spinner';
@@ -192,7 +192,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.extend({
   defaultProps: {
     __TYPE: 'Tree',
@@ -207,6 +207,8 @@ var TreeBase = ComponentBase.extend({
     contextMenuSelectionKey: null,
     onContextMenuSelectionChange: null,
     expandedKeys: null,
+    ariaLabel: null,
+    ariaLabelledBy: null,
     style: null,
     className: null,
     contentStyle: null,
@@ -230,6 +232,7 @@ var TreeBase = ComponentBase.extend({
     filterPlaceholder: null,
     filterLocale: undefined,
     filterTemplate: null,
+    level: 0,
     nodeTemplate: null,
     togglerTemplate: null,
     onSelect: null,
@@ -257,8 +260,10 @@ 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.memo(function (props) {
   var contentRef = React.useRef(null);
+  var elementRef = React.useRef(null);
   var nodeTouched = React.useRef(false);
   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;
@@ -274,11 +279,13 @@ var UITreeNode = /*#__PURE__*/React.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);
   };
@@ -295,7 +302,7 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     if (props.disabled) {
       return;
     }
-    expanded ? collapse(event) : expand(event);
+    expanded ? collapse(event) : expand(event, false);
     event.preventDefault();
     event.stopPropagation();
   };
@@ -316,72 +323,6 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
       }
     }
   };
-  var onNodeKeyDown = function onNodeKeyDown(event) {
-    if (props.disabled) {
-      return;
-    }
-    var nodeElement = event.target.parentElement;
-    if (!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 (!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;
@@ -400,7 +341,7 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     return 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) {
@@ -560,6 +501,131 @@ var UITreeNode = /*#__PURE__*/React.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 = 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 = 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(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 = 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;
@@ -623,6 +689,9 @@ var UITreeNode = /*#__PURE__*/React.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;
   };
@@ -725,7 +794,7 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     var labelProps = mergeProps({
       className: cx('label')
     }, getPTOptions('label'));
-    var content = /*#__PURE__*/React.createElement("span", labelProps, props.node.label);
+    var content = /*#__PURE__*/React.createElement("span", labelProps, label);
     if (props.nodeTemplate) {
       var defaultContentOptions = {
         onTogglerClick: onTogglerClick,
@@ -748,6 +817,7 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
       var icon = checked ? props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React.createElement(MinusIcon, checkboxIconProps) : null;
       var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$1({}, checkboxIconProps), props);
       var checkboxContainerProps = mergeProps({
+        'aria-hidden': true,
         className: cx('checkboxContainer')
       }, getPTOptions('checkboxContainer'));
       var checkboxProps = mergeProps({
@@ -756,8 +826,7 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
           partialChecked: partialChecked,
           nodeProps: props
         }),
-        role: 'checkbox',
-        'aria-checked': checked
+        role: 'checkbox'
       }, getPTOptions('checkbox'));
       return /*#__PURE__*/React.createElement("div", checkboxContainerProps, /*#__PURE__*/React.createElement("div", checkboxProps, checkboxIcon));
     }
@@ -774,7 +843,6 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     return null;
   };
   var createToggler = function createToggler() {
-    var label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
     var togglerIconProps = mergeProps({
       className: cx('togglerIcon'),
       'aria-hidden': true
@@ -788,8 +856,8 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
       type: 'button',
       className: cx('toggler'),
       tabIndex: -1,
-      onClick: onTogglerClick,
-      'aria-label': label
+      'aria-hidden': true,
+      onClick: onTogglerClick
     }, getPTOptions('toggler'));
     var content = /*#__PURE__*/React.createElement("button", togglerProps, togglerIcon, /*#__PURE__*/React.createElement(Ripple, null));
     if (props.togglerTemplate) {
@@ -846,8 +914,7 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
       onDragEnter: onDragEnter,
       onDragLeave: onDragLeave,
       onDragStart: onDragStart,
-      onDragEnd: onDragEnd,
-      onKeyDown: onNodeKeyDown
+      onDragEnd: onDragEnd
     }, getPTOptions('content'));
     return /*#__PURE__*/React.createElement("div", contentProps, toggler, checkbox, icon, label);
   };
@@ -861,62 +928,70 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
         return /*#__PURE__*/React.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 = mergeProps({
+    var nodeProps = mergeProps(_defineProperty(_defineProperty({
+      ref: elementRef,
       className: 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.createElement("li", nodeProps, content, children);
   };
   var node = createNode();
@@ -929,6 +1004,19 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
 });
 UITreeNode.displayName = 'UITreeNode';
 
+/* eslint-disable */
+var useUpdateEffect = function useUpdateEffect(fn, deps) {
+  var mounted = React.useRef(false);
+  return React.useEffect(function () {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    return fn && fn();
+  }, deps);
+};
+/* eslint-enable */
+
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
@@ -951,6 +1039,7 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
   var filterChanged = React.useRef(false);
   var filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
   var expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
+  var childFocusEvent = React.useRef(null);
   var _TreeBase$setMetaData = TreeBase.setMetaData({
       props: props,
       state: {
@@ -976,12 +1065,33 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
     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 {
+      if (navigateFocusToChild) {
+        childFocusEvent.current = originalEvent;
+      }
       setExpandedKeysState(event.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,
@@ -1254,41 +1364,42 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       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() {
@@ -1307,6 +1418,8 @@ var Tree = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
       var containerProps = mergeProps(_objectSpread({
         className: classNames(props.contentClassName, cx('container')),
         role: 'tree',
+        'aria-label': props.ariaLabel,
+        'aria-labelledby': props.ariaLabelledBy,
         style: props.contentStyle
       }, ariaProps), ptm('container'));
       return /*#__PURE__*/React.createElement("ul", containerProps, rootNodes);