primereact 10.3.0 → 10.3.2

package/tree/tree.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.tree = (function (exports, React, api, componentbase, search, spinner, utils, check, chevrondown, chevronright, minus, ripple) {
+this.primereact.tree = (function (exports, React, api, componentbase, hooks, search, spinner, utils, check, chevrondown, chevronright, minus, ripple) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -149,6 +149,19 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
     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',
@@ -203,7 +216,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 +231,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 +256,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 +284,11 @@ 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 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;
@@ -285,11 +304,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 +327,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 +348,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 +366,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 +526,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 +714,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;
     };
@@ -733,10 +816,10 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       }
     };
     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,
@@ -753,22 +836,22 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       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));
       }
@@ -777,7 +860,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
     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);
@@ -785,8 +868,7 @@ 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({
+      var togglerIconProps = mergeProps({
         className: cx('togglerIcon'),
         'aria-hidden': true
       }, getPTOptions('togglerIcon'));
@@ -795,12 +877,12 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
         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) {
@@ -818,7 +900,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
     };
     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);
@@ -838,7 +920,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
       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,
@@ -858,12 +940,12 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
         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'));
@@ -872,62 +954,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 = 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();
@@ -946,6 +1036,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
   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(''),
@@ -962,6 +1053,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 +1079,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 {
-        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,
@@ -1265,41 +1378,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() {
@@ -1315,9 +1429,11 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
     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);
@@ -1326,7 +1442,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
     };
     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, {
@@ -1335,7 +1451,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
         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);
@@ -1345,17 +1461,17 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
     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',
@@ -1402,7 +1518,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
           };
           _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);
@@ -1411,7 +1527,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
     };
     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);
@@ -1422,7 +1538,7 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
     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,
@@ -1438,4 +1554,4 @@ this.primereact.tree = (function (exports, React, api, componentbase, search, sp
 
   return exports;
 
-})({}, React, primereact.api, primereact.componentbase, primereact.icons.search, primereact.icons.spinner, primereact.utils, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.minus, primereact.ripple);
+})({}, React, primereact.api, primereact.componentbase, primereact.hooks, primereact.icons.search, primereact.icons.spinner, primereact.utils, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.minus, primereact.ripple);