primereact 10.3.0 → 10.3.1

package/tree/tree.js

@@ -203,7 +203,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       });
     }
   };
-  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',
@@ -218,6 +218,8 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       contextMenuSelectionKey: null,
       onContextMenuSelectionChange: null,
       expandedKeys: null,
+      ariaLabel: null,
+      ariaLabelledBy: null,
       style: null,
       className: null,
       contentStyle: null,
@@ -241,6 +243,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       filterPlaceholder: null,
       filterLocale: undefined,
       filterTemplate: null,
+      level: 0,
       nodeTemplate: null,
       togglerTemplate: null,
       onSelect: null,
@@ -268,8 +271,10 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
   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 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;
@@ -285,11 +290,13 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       });
     };
     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);
     };
@@ -306,7 +313,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       if (props.disabled) {
         return;
       }
-      expanded ? collapse(event) : expand(event);
+      expanded ? collapse(event) : expand(event, false);
       event.preventDefault();
       event.stopPropagation();
     };
@@ -327,72 +334,6 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
         }
       }
     };
-    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;
@@ -411,7 +352,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       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) {
@@ -571,6 +512,131 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
         });
       }
     };
+    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;
@@ -634,6 +700,9 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
     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;
     };
@@ -736,7 +805,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       var labelProps = utils.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,
@@ -759,6 +828,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
         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({
+          'aria-hidden': true,
           className: cx('checkboxContainer')
         }, getPTOptions('checkboxContainer'));
         var checkboxProps = utils.mergeProps({
@@ -767,8 +837,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
             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));
       }
@@ -785,7 +854,6 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       return null;
     };
     var createToggler = function createToggler() {
-      var label = expanded ? api.ariaLabel('collapseLabel') : api.ariaLabel('expandLabel');
       var togglerIconProps = utils.mergeProps({
         className: cx('togglerIcon'),
         'aria-hidden': true
@@ -799,8 +867,8 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
         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) {
@@ -857,8 +925,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
         onDragEnter: onDragEnter,
         onDragLeave: onDragLeave,
         onDragStart: onDragStart,
-        onDragEnd: onDragEnd,
-        onKeyDown: onNodeKeyDown
+        onDragEnd: onDragEnd
       }, getPTOptions('content'));
       return /*#__PURE__*/React__namespace.createElement("div", contentProps, toggler, checkbox, icon, label);
     };
@@ -872,62 +939,70 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
           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 = utils.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();
@@ -940,6 +1015,19 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
   });
   UITreeNode.displayName = 'UITreeNode';
 
+  /* 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 */
+
   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; } } }; }
@@ -962,6 +1050,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
     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: {
@@ -987,12 +1076,33 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       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,
@@ -1265,41 +1375,42 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
         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() {
@@ -1318,6 +1429,8 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
         var containerProps = utils.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);