primereact 10.3.1 → 10.3.3

package/treetable/treetable.js

@@ -244,7 +244,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     }
   });
 
-  var styles = "\n@layer primereact {\n    .p-treetable {\n        position: relative;\n    }\n    \n    .p-treetable > .p-treetable-wrapper {\n        overflow: auto;\n    }\n    \n    .p-treetable table {\n        border-collapse: collapse;\n        width: 100%;\n        table-layout: fixed;\n    }\n    \n    .p-treetable .p-sortable-column {\n        cursor: pointer;\n        user-select: none;\n    }\n    \n    .p-treetable-selectable .p-treetable-tbody > tr {\n        cursor: pointer;\n    }\n    \n    .p-treetable-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        vertical-align: middle;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-treetable-toggler + .p-checkbox {\n        vertical-align: middle;\n    }\n    \n    .p-treetable-toggler + .p-checkbox + span {\n        vertical-align: middle;\n    }\n    \n    /* Resizable */\n    .p-treetable-resizable > .p-treetable-wrapper {\n        overflow-x: auto;\n    }\n    \n    .p-treetable-resizable .p-treetable-thead > tr > th,\n    .p-treetable-resizable .p-treetable-tfoot > tr > td,\n    .p-treetable-resizable .p-treetable-tbody > tr > td {\n        overflow: hidden;\n    }\n    \n    .p-treetable-resizable .p-resizable-column {\n        background-clip: padding-box;\n        position: relative;\n    }\n    \n    .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n        display: none;\n    }\n    \n    .p-treetable .p-column-resizer {\n        display: block;\n        position: absolute;\n        top: 0;\n        right: 0;\n        margin: 0;\n        width: 0.5rem;\n        height: 100%;\n        padding: 0px;\n        cursor: col-resize;\n        border: 1px solid transparent;\n    }\n    \n    .p-treetable .p-column-resizer-helper {\n        width: 1px;\n        position: absolute;\n        z-index: 10;\n        display: none;\n    }\n    \n    /* Scrollable */\n    .p-treetable-scrollable-wrapper {\n        position: relative;\n    }\n    .p-treetable-scrollable-header,\n    .p-treetable-scrollable-footer {\n        overflow: hidden;\n        border: 0 none;\n    }\n    \n    .p-treetable-scrollable-body {\n        overflow: auto;\n        position: relative;\n    }\n    \n    .p-treetable-virtual-table {\n        position: absolute;\n    }\n    \n    /* Frozen Columns */\n    .p-treetable-frozen-view .p-treetable-scrollable-body {\n        overflow: hidden;\n    }\n    \n    .p-treetable-unfrozen-view {\n        position: absolute;\n        top: 0px;\n        left: 0px;\n    }\n    \n    /* Reorder */\n    .p-treetable-reorder-indicator-up,\n    .p-treetable-reorder-indicator-down {\n        position: absolute;\n        display: none;\n    }\n    \n    /* Loader */\n    .p-treetable .p-treetable-loading-overlay {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n    }\n}\n";
+  var styles = "\n@layer primereact {\n    .p-treetable {\n        position: relative;\n    }\n    \n    .p-treetable > .p-treetable-wrapper {\n        overflow: auto;\n    }\n    \n    .p-treetable table {\n        border-collapse: collapse;\n        width: 100%;\n        table-layout: fixed;\n    }\n    \n    .p-treetable .p-sortable-column {\n        cursor: pointer;\n        user-select: none;\n    }\n    \n    .p-treetable-selectable .p-treetable-tbody > tr {\n        cursor: pointer;\n    }\n    \n    .p-treetable-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        vertical-align: middle;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-treetable-toggler + .p-checkbox {\n        vertical-align: middle;\n    }\n    \n    .p-treetable-toggler + .p-checkbox + span {\n        vertical-align: middle;\n    }\n    \n    /* Resizable */\n    .p-treetable-resizable > .p-treetable-wrapper {\n        overflow-x: auto;\n    }\n    \n    .p-treetable-resizable .p-treetable-thead > tr > th,\n    .p-treetable-resizable .p-treetable-tfoot > tr > td,\n    .p-treetable-resizable .p-treetable-tbody > tr > td {\n        overflow: hidden;\n    }\n    \n    .p-treetable-resizable .p-resizable-column {\n        background-clip: padding-box;\n        position: relative;\n    }\n    \n    .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n        display: none;\n    }\n    \n    .p-treetable .p-column-resizer {\n        display: block;\n        position: absolute;\n        top: 0;\n        right: 0;\n        margin: 0;\n        width: 0.5rem;\n        height: 100%;\n        padding: 0px;\n        cursor: col-resize;\n        border: 1px solid transparent;\n    }\n    \n    .p-treetable .p-column-resizer-helper {\n        width: 1px;\n        position: absolute;\n        z-index: 10;\n        display: none;\n    }\n    \n    /* Scrollable */\n    .p-treetable-scrollable-wrapper {\n        position: relative;\n    }\n    .p-treetable-scrollable-header,\n    .p-treetable-scrollable-footer {\n        overflow: hidden;\n        border: 0 none;\n    }\n    \n    .p-treetable-scrollable-body {\n        overflow: auto;\n        position: relative;\n    }\n    \n    .p-treetable-virtual-table {\n        position: absolute;\n    }\n    \n    /* Frozen Columns */\n    .p-treetable-frozen-view .p-treetable-scrollable-body {\n        overflow: hidden;\n    }\n    \n    .p-treetable-unfrozen-view {\n        position: absolute;\n        top: 0px;\n        left: 0px;\n    }\n    \n    /* Reorder */\n    .p-treetable-reorder-indicator-up,\n    .p-treetable-reorder-indicator-down {\n        position: absolute;\n        display: none;\n    }\n    \n    /* Loader */\n    .p-treetable .p-treetable-loading-overlay {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n    }\n\n    /* Alignment */\n    .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,\n    .p-treetable .p-treetable-tbody > tr > td.p-align-left,\n    .p-treetable .p-treetable-tfoot > tr > td.p-align-left {\n        text-align: left;\n        justify-content: flex-start;\n    }\n    .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,\n    .p-treetable .p-treetable-tbody > tr > td.p-align-right,\n    .p-treetable .p-treetable-tfoot > tr > td.p-align-right {\n        text-align: right;\n        justify-content: flex-end;\n    }\n    .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,\n    .p-treetable .p-treetable-tbody > tr > td.p-align-center,\n    .p-treetable .p-treetable-tfoot > tr > td.p-align-center {\n        text-align: center;\n        justify-content: center;\n    }\n}\n";
   var classes = {
     root: function root(_ref) {
       var props = _ref.props,
@@ -264,8 +264,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     header: 'p-treetable-header',
     footer: 'p-treetable-footer',
     resizeHelper: 'p-column-resizer-helper',
-    reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
-    reorderIndicatorDown: 'p-datatable-reorder-indicator-down',
+    reorderIndicatorUp: 'p-treetable-reorder-indicator-up',
+    reorderIndicatorDown: 'p-treetable-reorder-indicator-down',
     wrapper: 'p-treetable-wrapper',
     table: function table(_ref2) {
       var props = _ref2.props;
@@ -291,22 +291,24 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     },
     sortBadge: 'p-sortable-column-badge',
     headerTitle: 'p-column-title',
+    headerContent: 'p-column-header-content',
     headerCell: function headerCell(_ref4) {
       var props = _ref4.headerProps,
         frozen = _ref4.frozen,
         column = _ref4.column,
         options = _ref4.options,
         getColumnProp = _ref4.getColumnProp,
-        sorted = _ref4.sorted;
+        sorted = _ref4.sorted,
+        align = _ref4.align;
       return options.filterOnly ? utils.classNames('p-filter-column', {
         'p-frozen-column': frozen
-      }) : utils.classNames({
+      }) : utils.classNames(_defineProperty({
         'p-sortable-column': getColumnProp(column, 'sortable'),
         'p-highlight': sorted,
         'p-frozen-column': frozen,
         'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable'),
         'p-reorderable-column': props.reorderableColumns && getColumnProp(column, 'reorderable') && !frozen
-      });
+      }, "p-align-".concat(align), !!align));
     },
     columnResizer: 'p-column-resizer p-clickable',
     sortIcon: 'p-sortable-column-icon',
@@ -408,9 +410,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       propagateSelectionDown: true,
       propagateSelectionUp: true,
       removableSort: false,
-      reorderableColumns: false,
       reorderIndicatorDownIcon: null,
       reorderIndicatorUpIcon: null,
+      reorderableColumns: false,
       resizableColumns: false,
       rowClassName: null,
       rowHover: false,
@@ -423,8 +425,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       selectionMode: null,
       showGridlines: false,
       sortField: null,
-      sortMode: 'single',
       sortIcon: null,
+      sortMode: 'single',
       sortOrder: null,
       stripedRows: false,
       style: null,
@@ -453,6 +455,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var selfClick = React__namespace.useRef(false);
     var overlayEventListener = React__namespace.useRef(null);
     var tabIndexTimeout = React__namespace.useRef(null);
+    var mergeProps = hooks.useMergeProps();
     var getColumnProp = function getColumnProp(name) {
       return ColumnBase.getCProp(props.column, name);
     };
@@ -483,7 +486,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
           showGridlines: props.metaData.props.showGridlines
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetadata
       }), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
     };
@@ -642,7 +645,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         props: props
       });else content = utils.ObjectUtils.resolveFieldData(props.node.data, props.field);
     }
-    var editorKeyHelperProps = utils.mergeProps({
+    var editorKeyHelperProps = mergeProps({
       tabIndex: 0,
       ref: keyHelperRef,
       className: 'p-cell-editor-key-helper p-hidden-accessible',
@@ -650,12 +653,13 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         return onEditorFocus(e);
       }
     }, getColumnPTOptions('editorKeyHelperLabel'));
-    var editorKeyHelperLabelProps = utils.mergeProps(getColumnPTOptions('editorKeyHelper'));
+    var editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
     /* eslint-disable */
     var editorKeyHelper = props.editor && /*#__PURE__*/React__namespace.createElement("a", editorKeyHelperProps, /*#__PURE__*/React__namespace.createElement("span", editorKeyHelperLabelProps));
     var align = getColumnProp('align');
     /* eslint-enable */
-    var bodyCellProps = utils.mergeProps({
+    var bodyCellProps = mergeProps({
+      role: 'cell',
       className: utils.classNames(bodyClassName || props.className, cx('bodyCell', {
         bodyProps: props,
         editingState: editingState,
@@ -685,6 +689,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var checkboxRef = React__namespace.useRef(null);
     var checkboxBoxRef = React__namespace.useRef(null);
     var nodeTouched = React__namespace.useRef(false);
+    var mergeProps = hooks.useMergeProps();
     var expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false;
     var getColumnProp = function getColumnProp(column, name) {
       return ColumnBase.getCProp(column, name);
@@ -711,7 +716,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
           scrollable: props.metaData.props.scrollable
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetadata
       }), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
     };
@@ -726,7 +731,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
           partialChecked: isPartialChecked()
         }
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetadata
       }), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
     };
@@ -750,11 +755,13 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       event.stopPropagation();
     };
     var expand = function expand(event) {
+      var navigateFocusToChild = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var expandedKeys = props.expandedKeys ? _objectSpread$4({}, props.expandedKeys) : {};
       expandedKeys[props.node.key] = true;
       props.onToggle({
         originalEvent: event,
-        value: expandedKeys
+        value: expandedKeys,
+        navigateFocusToChild: navigateFocusToChild
       });
       invokeToggleEvents(event, true);
     };
@@ -935,49 +942,147 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         });
       }
     };
-    var _onKeyDown = function onKeyDown(event) {
-      if (event.target === elementRef.current) {
-        var rowElement = event.currentTarget;
-        switch (event.which) {
-          //down arrow
-          case 40:
-            var nextRow = rowElement.nextElementSibling;
-            if (nextRow) {
-              nextRow.focus();
-            }
-            event.preventDefault();
-            break;
+    var _onKeyDown = function onKeyDown(event, item) {
+      switch (event.code) {
+        case 'ArrowDown':
+          onArrowDownKey(event);
+          break;
+        case 'ArrowUp':
+          onArrowUpKey(event);
+          break;
+        case 'ArrowLeft':
+          onArrowLeftKey(event);
+          break;
+        case 'ArrowRight':
+          onArrowRightKey(event);
+          break;
+        case 'Home':
+          onHomeKey(event);
+          break;
+        case 'End':
+          onEndKey(event);
+          break;
+        case 'Enter':
+        case 'NumpadEnter':
+        case 'Space':
+          if (!utils.DomHandler.isClickable(event.target)) {
+            onEnterKey(event);
+          }
+          break;
+        case 'Tab':
+          onTabKey();
+          break;
+      }
+    };
+    var onArrowDownKey = function onArrowDownKey(event) {
+      var nextElementSibling = event.currentTarget.nextElementSibling;
+      nextElementSibling && focusRowChange(event.currentTarget, nextElementSibling);
+      event.preventDefault();
+    };
+    var onArrowUpKey = function onArrowUpKey(event) {
+      var previousElementSibling = event.currentTarget.previousElementSibling;
+      previousElementSibling && focusRowChange(event.currentTarget, previousElementSibling);
+      event.preventDefault();
+    };
+    var onArrowRightKey = function onArrowRightKey(event) {
+      var ishiddenIcon = utils.DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
+      utils.DomHandler.findSingle(elementRef.current, '[data-pc-section="rowtoggler"]');
+      if (ishiddenIcon) return;
 
-          //up arrow
-          case 38:
-            var previousRow = rowElement.previousElementSibling;
-            if (previousRow) {
-              previousRow.focus();
-            }
-            event.preventDefault();
-            break;
+      // !expanded && togglerElement.click();
+      !expanded && expand(event, true);
 
-          //right arrow
-          case 39:
-            if (!expanded) {
-              expand(event);
-            }
-            event.preventDefault();
-            break;
+      // this.$nextTick(() => {
+      //     this.onArrowDownKey(event);
+      // });
 
-          //left arrow
-          case 37:
-            if (expanded) {
-              collapse(event);
-            }
-            event.preventDefault();
-            break;
+      event.preventDefault();
+    };
+    var onArrowLeftKey = function onArrowLeftKey(event) {
+      if (props.level === 0 && !expanded) {
+        return;
+      }
+      var currentTarget = event.currentTarget;
+      var ishiddenIcon = utils.DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
+      utils.DomHandler.findSingle(currentTarget, '[data-pc-section="rowtoggler"]');
+      if (expanded && !ishiddenIcon) {
+        // togglerElement.click();
+        collapse(event);
+        return;
+      }
+      var target = findBeforeClickableNode(currentTarget);
+      target && focusRowChange(currentTarget, target);
+    };
+    var onHomeKey = function onHomeKey(event) {
+      var findFirstElement = utils.DomHandler.findSingle(event.currentTarget.parentElement, "tr[aria-level=\"".concat(props.level + 1, "\"]"));
+      findFirstElement && utils.DomHandler.focus(findFirstElement);
+      event.preventDefault();
+    };
+    var onEndKey = function onEndKey(event) {
+      var nodes = utils.DomHandler.find(event.currentTarget.parentElement, "tr[aria-level=\"".concat(props.level + 1, "\"]"));
+      var findFirstElement = nodes[nodes.length - 1];
+      utils.DomHandler.focus(findFirstElement);
+      event.preventDefault();
+    };
+    var onEnterKey = function onEnterKey(event) {
+      event.preventDefault();
+      setTabIndexForSelectionMode(event, nodeTouched.current);
+      if (props.selectionMode === 'checkbox') {
+        // this.toggleCheckbox();
+        onCheckboxChange(event);
+        return;
+      }
+
+      // this.$emit('node-click', {
+      //     originalEvent: event,
+      //     nodeTouched: nodeTouched.current,
+      //     node: this.node
+      // });
 
-          //enter
-          case 13:
-            _onClick(event);
-            event.preventDefault();
-            break;
+      props.onRowClick(event, props.node);
+      nodeTouched.current = false;
+    };
+    var onTabKey = function onTabKey() {
+      var rows = _toConsumableArray(utils.DomHandler.find(elementRef.current.parentElement, 'tr'));
+      var hasSelectedRow = rows.some(function (row) {
+        return utils.DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true';
+      });
+      rows.forEach(function (row) {
+        row.tabIndex = -1;
+      });
+      if (hasSelectedRow) {
+        var selectedNodes = rows.filter(function (node) {
+          return utils.DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true';
+        });
+        selectedNodes[0].tabIndex = 0;
+        return;
+      }
+      rows[0].tabIndex = 0;
+    };
+    var focusRowChange = function focusRowChange(firstFocusableRow, currentFocusedRow) {
+      firstFocusableRow.tabIndex = '-1';
+      currentFocusedRow.tabIndex = '0';
+      utils.DomHandler.focus(currentFocusedRow);
+    };
+    var findBeforeClickableNode = function findBeforeClickableNode(node) {
+      var prevNode = node.previousElementSibling;
+      if (prevNode) {
+        var prevNodeButton = prevNode.querySelector('button');
+        if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
+          return prevNode;
+        }
+        return findBeforeClickableNode(prevNode);
+      }
+      return null;
+    };
+    var setTabIndexForSelectionMode = function setTabIndexForSelectionMode(event, nodeTouched) {
+      if (props.selectionMode !== null) {
+        var elements = _toConsumableArray(utils.DomHandler.find(elementRef.current.parentElement, 'tr'));
+        event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
+        if (elements.every(function (element) {
+          return element.tabIndex === -1;
+        })) {
+          elements[0].tabIndex = 0;
         }
       }
     };
@@ -995,7 +1100,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     };
     var createToggler = function createToggler(column) {
       var label = expanded ? PrimeReact.ariaLabel('collapseLabel') : PrimeReact.ariaLabel('expandLabel');
-      var rowTogglerIconProps = utils.mergeProps({
+      var rowTogglerIconProps = mergeProps({
         className: cx('rowTogglerIcon'),
         'aria-hidden': true
       }, getColumnPTOptions(column, 'rowTogglerIcon'));
@@ -1003,7 +1108,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       var togglerIcon = utils.IconUtils.getJSXIcon(props.togglerIcon || icon, _objectSpread$4({}, rowTogglerIconProps), {
         props: props
       });
-      var rowTogglerProps = utils.mergeProps({
+      var rowTogglerProps = mergeProps({
         type: 'button',
         className: cx('rowToggler'),
         onClick: function onClick(e) {
@@ -1038,7 +1143,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       if (props.selectionMode === 'checkbox' && props.node.selectable !== false) {
         var checked = isChecked();
         var partialChecked = isPartialChecked();
-        var checboxIconProps = utils.mergeProps({
+        var checboxIconProps = mergeProps({
           className: cx('checkboxIcon')
         }, getColumnCheckboxPTOptions(column, 'checkboxIcon'));
         var icon = checked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, checboxIconProps) : null;
@@ -1047,7 +1152,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
           checked: checked,
           partialChecked: partialChecked
         });
-        var hiddenInputProps = utils.mergeProps({
+        var hiddenInputProps = mergeProps({
           type: 'checkbox',
           onFocus: function onFocus(e) {
             return onCheckboxFocus();
@@ -1056,7 +1161,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
             return onCheckboxBlur();
           }
         }, getColumnCheckboxPTOptions(column, 'hiddenInput'));
-        var checkboxWrapperProps = utils.mergeProps({
+        var checkboxWrapperProps = mergeProps({
           className: cx('checkboxWrapper'),
           onClick: function onClick(e) {
             return onCheckboxChange(e);
@@ -1064,10 +1169,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
           role: 'checkbox',
           'aria-checked': checked
         }, getColumnCheckboxPTOptions(column, 'checkboxWrapper'));
-        var hiddenInputWrapperProps = utils.mergeProps({
+        var hiddenInputWrapperProps = mergeProps({
           className: 'p-hidden-accessible'
         }, getColumnCheckboxPTOptions(column, 'hiddenInputWrapper'));
-        var checkboxProps = utils.mergeProps({
+        var checkboxProps = mergeProps({
           className: cx('checkbox', {
             checked: checked,
             partialChecked: partialChecked
@@ -1159,9 +1264,15 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       className = _objectSpread$4(_objectSpread$4({}, className), rowClassName);
     }
     className = utils.classNames(className, props.node.className);
-    var rowProps = utils.mergeProps({
+    var rowProps = mergeProps({
       tabIndex: 0,
       className: className,
+      'aria-expanded': expanded,
+      'aria-level': props.level + 1,
+      'aria-posinset': props.ariaPosInSet,
+      'aria-setsize': props.ariaSetSize,
+      'aria-checked': isChecked(),
+      'aria-selected': isSelected(),
       style: props.node.style,
       onClick: function onClick(e) {
         return _onClick(e);
@@ -1195,6 +1306,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
   function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var TreeTableBody = /*#__PURE__*/React__namespace.memo(function (props) {
+    var mergeProps = hooks.useMergeProps();
     var isSingleSelectionMode = props.selectionMode === 'single';
     var isMultipleSelectionMode = props.selectionMode === 'multiple';
     var _props$ptCallbacks = props.ptCallbacks,
@@ -1352,6 +1464,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         key: "".concat(node.key || JSON.stringify(node.data), "_").concat(index),
         level: 0,
         rowIndex: index,
+        ariaSetSize: props.value.length,
+        ariaPosInSet: index + 1,
         selectOnEdit: props.selectOnEdit,
         node: node,
         originalOptions: props.originalOptions,
@@ -1404,17 +1518,18 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         var _content = utils.ObjectUtils.getJSXElement(props.emptyMessage, {
           props: props.tableProps
         }) || PrimeReact.localeOption('emptyMessage');
-        var emptyMessageProps = utils.mergeProps({
+        var emptyMessageProps = mergeProps({
           className: cx('emptyMessage')
         }, getPTOptions('emptyMessage'));
-        var emptyMessageCellProps = utils.mergeProps({
+        var emptyMessageCellProps = mergeProps({
           colSpan: colSpan
         }, getPTOptions('emptyMessageCell'));
         return /*#__PURE__*/React__namespace.createElement("tr", emptyMessageProps, /*#__PURE__*/React__namespace.createElement("td", emptyMessageCellProps, _content));
       }
     };
     var content = props.value && props.value.length ? createRows() : createEmptyMessage();
-    var tbodyProps = utils.mergeProps({
+    var tbodyProps = mergeProps({
+      role: 'rowgroup',
       className: cx('tbody')
     }, getPTOptions('tbody'));
     return /*#__PURE__*/React__namespace.createElement("tbody", tbodyProps, content);
@@ -1447,6 +1562,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
   });
 
   var TreeTableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
+    var mergeProps = hooks.useMergeProps();
     var _props$ptCallbacks = props.ptCallbacks,
       ptm = _props$ptCallbacks.ptm,
       ptmo = _props$ptCallbacks.ptmo,
@@ -1464,12 +1580,12 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         parent: props.metaData,
         hostName: props.hostName
       };
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetadata
       }), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
     };
     var createFooterCell = function createFooterCell(column, index) {
-      var footerCellProps = utils.mergeProps({
+      var footerCellProps = mergeProps({
         key: column.field || index,
         className: getColumnProp(column, 'footerClassName') || getColumnProp(column, 'className'),
         style: getColumnProp(column, 'footerStyle') || getColumnProp(column, 'style'),
@@ -1484,8 +1600,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var createFooterRow = function createFooterRow(row, index) {
       var rowColumns = React__namespace.Children.toArray(RowBase.getCProp(row, 'children'));
       var rowFooterCells = rowColumns.map(createFooterCell);
-      var footerRowProps = utils.mergeProps(ptm('footerRow', {
-        hostName: props.hostName
+      var footerRowProps = mergeProps(ptm('footerRow', {
+        hostName: props.hostName,
+        role: 'row'
       }));
       return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, footerRowProps, {
         key: index
@@ -1498,7 +1615,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var createColumns = function createColumns(columns) {
       if (columns) {
         var headerCells = columns.map(createFooterCell);
-        var footerRowProps = utils.mergeProps(ptm('footerRow', {
+        var footerRowProps = mergeProps(ptm('footerRow', {
           hostName: props.hostName
         }));
         return /*#__PURE__*/React__namespace.createElement("tr", footerRowProps, headerCells);
@@ -1513,7 +1630,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     };
     var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
     if (hasFooter()) {
-      var tfootProps = utils.mergeProps({
+      var tfootProps = mergeProps({
+        role: 'rowgroup',
         className: cx('tfoot')
       }, ptm('tfoot', {
         hostName: props.hostName
@@ -1531,6 +1649,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
   function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
+    var mergeProps = hooks.useMergeProps();
     var _props$ptCallbacks = props.ptCallbacks,
       ptm = _props$ptCallbacks.ptm,
       ptmo = _props$ptCallbacks.ptmo,
@@ -1549,7 +1668,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         parent: props.metaData,
         hostName: props.hostName
       }, params);
-      return utils.mergeProps(ptm("column.".concat(key), {
+      return mergeProps(ptm("column.".concat(key), {
         column: columnMetadata
       }), ptm("column.".concat(key), columnMetadata), ptmo(cProps, key, columnMetadata));
     };
@@ -1573,7 +1692,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       }
     };
     var onHeaderKeyDown = function onHeaderKeyDown(event, column) {
-      if (event.key === 'Enter') {
+      if (event.key === 'Enter' && event.key === 'Space') {
         onHeaderClick(event, column);
         event.preventDefault();
       }
@@ -1673,7 +1792,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     };
     var createSortIcon = function createSortIcon(column, sorted, sortOrder) {
       if (getColumnProp(column, 'sortable')) {
-        var sortIconProps = utils.mergeProps({
+        var sortIconProps = mergeProps({
           className: cx('sortIcon')
         }, getColumnPTOptions(column, 'sortIcon', {
           context: {
@@ -1693,7 +1812,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     };
     var createResizer = function createResizer(column) {
       if (props.resizableColumns) {
-        var columnResizerProps = utils.mergeProps({
+        var columnResizerProps = mergeProps({
           className: cx('columnResizer'),
           onMouseDown: function onMouseDown(e) {
             return onResizerMouseDown(e, column);
@@ -1706,7 +1825,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     };
     var createSortBadge = function createSortBadge(column, sortMetaDataIndex) {
       if (sortMetaDataIndex !== -1 && props.multiSortMeta && props.multiSortMeta.length > 1) {
-        var sortBadgeProps = utils.mergeProps({
+        var sortBadgeProps = mergeProps({
           className: cx('sortBadge')
         }, getColumnPTOptions(column, 'sortBadge'));
         return /*#__PURE__*/React__namespace.createElement("span", sortBadgeProps, sortMetaDataIndex + 1);
@@ -1717,7 +1836,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       var title = utils.ObjectUtils.getJSXElement(getColumnProp(column, 'header'), {
         props: options
       });
-      var headerTitleProps = utils.mergeProps({
+      var headerTitleProps = mergeProps({
         className: cx('headerTitle')
       }, getColumnPTOptions(column, 'headerTitle'));
       return /*#__PURE__*/React__namespace.createElement("span", headerTitleProps, title);
@@ -1746,7 +1865,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       }
       if (options.filterOnly) {
         var frozen = getColumnProp(column, 'frozen');
-        var headerCellProps = utils.mergeProps({
+        var headerCellProps = mergeProps({
+          role: 'columnheader',
           key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index,
           className: utils.classNames(cx('headerCell', {
             options: options,
@@ -1778,11 +1898,14 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         var sortIconElement = createSortIcon(column, sorted, sortOrder);
         var ariaSortData = getAriaSort(column, sorted, sortOrder);
         var sortBadge = createSortBadge(column, sortMetaDataIndex);
+        var ariaSort = sorted ? sortOrder ? sortOrder < 0 ? 'descending' : 'ascending' : 'none' : null;
         var headerTooltip = getColumnProp(column, 'headerTooltip');
         var hasTooltip = utils.ObjectUtils.isNotEmpty(headerTooltip);
         var title = createTitle(column, options);
         var resizer = createResizer(column);
-        var _headerCellProps = utils.mergeProps({
+        var sortable = getColumnProp(column, 'sortable');
+        var _headerCellProps = mergeProps(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+          role: 'columnheader',
           className: utils.classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', {
             headerProps: props,
             frozen: _frozen,
@@ -1793,7 +1916,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
             align: align
           })),
           style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
-          tabIndex: getColumnProp(column, 'sortable') ? props.tabIndex : null,
+          tabIndex: sortable ? props.tabIndex : null,
+          'aria-sort': ariaSort,
           onClick: function onClick(e) {
             return onHeaderClick(e, column);
           },
@@ -1804,32 +1928,23 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
             return onHeaderKeyDown(e, column);
           },
           rowSpan: getColumnProp(column, 'rowSpan'),
-          colSpan: getColumnProp(column, 'colSpan'),
-          'aria-sort': ariaSortData,
-          onDragStart: function onDragStart(e) {
-            return _onDragStart(e, column);
-          },
-          onDragOver: function onDragOver(e) {
-            return _onDragOver(e, column);
-          },
-          onDragLeave: function onDragLeave(e) {
-            return _onDragLeave(e, column);
-          },
-          onDrop: function onDrop(e) {
-            return _onDrop(e, column);
-          },
-          'data-p-sortable-column': getColumnProp(column, 'sortable'),
-          'data-p-resizable-column': props.resizableColumns,
-          'data-p-highlight': sorted,
-          'data-p-frozen-column': getColumnProp(column, 'frozen')
-        }, getColumnPTOptions(column, 'root'), getColumnPTOptions(column, 'headerCell', {
+          colSpan: getColumnProp(column, 'colSpan')
+        }, "aria-sort", ariaSortData), "onDragStart", function onDragStart(e) {
+          return _onDragStart(e, column);
+        }), "onDragOver", function onDragOver(e) {
+          return _onDragOver(e, column);
+        }), "onDragLeave", function onDragLeave(e) {
+          return _onDragLeave(e, column);
+        }), "onDrop", function onDrop(e) {
+          return _onDrop(e, column);
+        }), 'data-p-sortable-column', sortable), 'data-p-resizable-column', props.resizableColumns), 'data-p-highlight', sorted), 'data-p-frozen-column', getColumnProp(column, 'frozen')), getColumnPTOptions(column, 'root'), getColumnPTOptions(column, 'headerCell', {
           context: {
             sorted: sorted,
             frozen: _frozen,
             resizable: props.resizableColumns
           }
         }));
-        var headerContentProps = utils.mergeProps({
+        var headerContentProps = mergeProps({
           className: cx('headerContent')
         }, getColumnPTOptions(column, 'headerContent'));
         var header = /*#__PURE__*/React__namespace.createElement("div", headerContentProps, title, sortIconElement, sortBadge, filterElement);
@@ -1854,10 +1969,12 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
           renderFilter: true
         });
       });
-      var headerRowProps = utils.mergeProps(ptm('headerRow', {
+      var headerRowProps = mergeProps(ptm('headerRow', {
         hostName: props.hostName
       }));
-      return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, headerRowProps, {
+      return /*#__PURE__*/React__namespace.createElement("tr", _extends({
+        role: "row"
+      }, headerRowProps, {
         key: index
       }), rowHeaderCells);
     };
@@ -1867,8 +1984,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     };
     var createColumns = function createColumns(columns) {
       if (columns) {
-        var headerRowProps = utils.mergeProps(ptm('headerRow', {
-          hostName: props.hostName
+        var headerRowProps = mergeProps(ptm('headerRow', {
+          hostName: props.hostName,
+          role: 'row'
         }));
         if (hasColumnFilter(columns)) {
           return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, columns.map(function (col, i) {
@@ -1885,7 +2003,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
             });
           })));
         } else {
-          return /*#__PURE__*/React__namespace.createElement("tr", headerRowProps, columns.map(function (col, i) {
+          return /*#__PURE__*/React__namespace.createElement("tr", _extends({
+            role: "row"
+          }, headerRowProps), columns.map(function (col, i) {
             return createHeaderCell(col, {
               index: i,
               filterOnly: false,
@@ -1898,7 +2018,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       }
     };
     var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
-    var theadProps = utils.mergeProps({
+    var theadProps = mergeProps({
+      role: 'rowgroup',
       className: cx('thead')
     }, ptm('thead', {
       hostName: props.hostName
@@ -1917,6 +2038,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var scrollTableRef = React__namespace.useRef(null);
     var scrollFooterRef = React__namespace.useRef(null);
     var scrollFooterBoxRef = React__namespace.useRef(null);
+    var mergeProps = hooks.useMergeProps();
     var _props$ptCallbacks = props.ptCallbacks,
       ptm = _props$ptCallbacks.ptm,
       cx = _props$ptCallbacks.cx,
@@ -1996,7 +2118,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
             key: col.field + '_' + i
           });
         });
-        var scrollableColgroupProps = utils.mergeProps({
+        var scrollableColgroupProps = mergeProps({
           className: cx('scrollableColgroup')
         }, getPTOptions('scrollableColgroup'));
         return /*#__PURE__*/React__namespace.createElement("colgroup", scrollableColgroupProps, cols);
@@ -2007,7 +2129,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var width = props.frozen ? props.frozenWidth : 'calc(100% - ' + props.frozenWidth + ')';
     var left = props.frozen ? null : props.frozenWidth;
     var colGroup = createColGroup();
-    var scrollableProps = utils.mergeProps({
+    var scrollableProps = mergeProps({
       className: cx('scrollable', {
         scrolaableProps: props
       }),
@@ -2016,19 +2138,19 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         left: left
       }
     }, getPTOptions('scrollable'));
-    var scrollableHeaderProps = utils.mergeProps({
+    var scrollableHeaderProps = mergeProps({
       className: cx('scrollableHeader'),
       onScroll: function onScroll(e) {
         return onHeaderScroll();
       }
     }, getPTOptions('scrollableHeader'));
-    var scrollableHeaderBoxProps = utils.mergeProps({
+    var scrollableHeaderBoxProps = mergeProps({
       className: cx('scrollableHeaderBox')
     }, getPTOptions('scrollableHeaderBox'));
-    var scrollableHeaderTableProps = utils.mergeProps({
+    var scrollableHeaderTableProps = mergeProps({
       className: cx('scrollableHeaderTable')
     }, getPTOptions('scrollableHeaderTable'));
-    var scrollableBodyProps = utils.mergeProps({
+    var scrollableBodyProps = mergeProps({
       className: cx('scrollableBody'),
       style: !props.frozen && props.scrollHeight ? {
         overflowY: 'scroll'
@@ -2037,19 +2159,19 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         return onBodyScroll();
       }
     }, getPTOptions('scrollableBody'));
-    var scrollableBodyTableProps = utils.mergeProps({
+    var scrollableBodyTableProps = mergeProps({
       style: {
         top: '0'
       },
       className: cx('scrollableBodyTable')
     }, getPTOptions('scrollableBodyTable'));
-    var scrollableFooterProps = utils.mergeProps({
+    var scrollableFooterProps = mergeProps({
       className: cx('scrollableFooter')
     }, getPTOptions('scrollableFooter'));
-    var scrollableFooterBoxProps = utils.mergeProps({
+    var scrollableFooterBoxProps = mergeProps({
       className: sx('scrollableFooterBox')
     }, getPTOptions('scrollableFooterBox'));
-    var scrollableFooterTableProps = utils.mergeProps({
+    var scrollableFooterTableProps = mergeProps({
       className: cx('scrollableFooterTable')
     }, getPTOptions('scrollableFooterTable'));
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
@@ -2076,6 +2198,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
   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 TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var mergeProps = hooks.useMergeProps();
     var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
     var props = TreeTableBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(props.expandedKeys),
@@ -2147,6 +2270,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var columnSortable = React__namespace.useRef(null);
     var columnSortFunction = React__namespace.useRef(null);
     var columnField = React__namespace.useRef(null);
+    var childFocusEvent = React__namespace.useRef(null);
     var _useEventListener = hooks.useEventListener({
         type: 'mousemove',
         listener: function listener(event) {
@@ -2171,10 +2295,19 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       bindDocumentMouseUpListener = _useEventListener4[0],
       unbindDocumentMouseUpListener = _useEventListener4[1];
     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);
       }
     };
     var onPageChange = function onPageChange(event) {
@@ -2877,6 +3010,17 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       }
       return data;
     };
+    hooks.useUpdateEffect(function () {
+      if (childFocusEvent.current) {
+        var nodeElement = childFocusEvent.current.target;
+        var nextElementSibling = nodeElement.nextElementSibling;
+        if (nextElementSibling) {
+          nodeElement.tabIndex = '-1';
+          nextElementSibling.tabIndex = '0';
+          utils.DomHandler.focus(nextElementSibling);
+        }
+      }
+    }, [expandedKeysState]);
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
@@ -3012,7 +3156,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         frozenView = createScrollableView(value, frozenColumns, true, props.frozenHeaderColumnGroup, props.frozenFooterColumnGroup);
       }
       scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup);
-      var scrollableWrapperProps = utils.mergeProps({
+      var scrollableWrapperProps = mergeProps({
         className: ptCallbacks.cx('scrollableWrapper')
       }, ptCallbacks.ptm('scrollableWrapper'));
       return /*#__PURE__*/React__namespace.createElement("div", scrollableWrapperProps, frozenView, scrollableView);
@@ -3022,10 +3166,11 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       var header = createTableHeader(columns, props.headerColumnGroup);
       var footer = createTableFooter(columns, props.footerColumnGroup);
       var body = createTableBody(value, columns);
-      var wrapperProps = utils.mergeProps({
+      var wrapperProps = mergeProps({
         className: ptCallbacks.cx('wrapper')
       }, ptCallbacks.ptm('wrapper'));
-      var tableProps = utils.mergeProps({
+      var tableProps = mergeProps({
+        role: 'table',
         style: props.tableStyle,
         className: utils.classNames(props.tableClassName, ptCallbacks.cx('table'))
       }, ptCallbacks.ptm('table'));
@@ -3038,7 +3183,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     };
     var createLoader = function createLoader() {
       if (props.loading) {
-        var loadingIconProps = utils.mergeProps({
+        var loadingIconProps = mergeProps({
           className: ptCallbacks.cx('loadingIcon')
         }, ptCallbacks.ptm('loadingIcon'));
         var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
@@ -3047,10 +3192,10 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         var loadingIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
           props: props
         });
-        var loadingWrapperProps = utils.mergeProps({
+        var loadingWrapperProps = mergeProps({
           className: ptCallbacks.cx('loadingWrapper')
         }, ptCallbacks.ptm('loadingWrapper'));
-        var loadingOverlayProps = utils.mergeProps({
+        var loadingOverlayProps = mergeProps({
           className: ptCallbacks.cx('loadingOverlay')
         }, ptCallbacks.ptm('loadingOverlay'));
         return /*#__PURE__*/React__namespace.createElement("div", loadingWrapperProps, /*#__PURE__*/React__namespace.createElement("div", loadingOverlayProps, loadingIcon));
@@ -3060,13 +3205,13 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var data = processedData();
     var table = createTable(data);
     var totalRecords = getTotalRecords(data);
-    var headerProps = utils.mergeProps({
+    var headerProps = mergeProps({
       className: ptCallbacks.cx('header')
     }, ptCallbacks.ptm('header'));
-    var footerProps = utils.mergeProps({
+    var footerProps = mergeProps({
       className: ptCallbacks.cx('footer')
     }, ptCallbacks.ptm('footer'));
-    var resizeHelperProps = utils.mergeProps({
+    var resizeHelperProps = mergeProps({
       className: ptCallbacks.cx('resizeHelper'),
       style: {
         display: 'none'
@@ -3080,14 +3225,14 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var resizeHelper = props.resizableColumns && /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: resizerHelperRef
     }, resizeHelperProps));
-    var reorderIndicatorUpProps = utils.mergeProps({
+    var reorderIndicatorUpProps = mergeProps({
       className: ptCallbacks.cx('reorderIndicatorUp'),
       style: {
         position: 'absolute',
         display: 'none'
       }
     }, ptCallbacks.ptm('reorderIndicatorUp'));
-    var reorderIndicatorUpIconProps = utils.mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
+    var reorderIndicatorUpIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
     var reorderIndicatorUpIcon = props.reorderableColumns && utils.IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || /*#__PURE__*/React__namespace.createElement(arrowdown.ArrowDownIcon, reorderIndicatorUpIconProps), _objectSpread({}, reorderIndicatorUpIconProps), {
       props: props
     });
@@ -3101,14 +3246,15 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         display: 'none'
       }
     };
-    var reorderIndicatorDownIconProps = utils.mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
+    var reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
     var reorderIndicatorDownIcon = utils.IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || /*#__PURE__*/React__namespace.createElement(arrowup.ArrowUpIcon, reorderIndicatorDownIconProps), _objectSpread({}, reorderIndicatorDownIconProps), {
       props: props
     });
     var reorderIndicatorDown = props.reorderableColumns && /*#__PURE__*/React__namespace.createElement("span", _extends({
       ref: reorderIndicatorDownRef
     }, reorderIndicatorDownProps), reorderIndicatorDownIcon);
-    var rootProps = utils.mergeProps({
+    var rootProps = mergeProps({
+      role: 'table',
       id: props.id,
       className: utils.classNames(props.className, ptCallbacks.cx('root', {
         isRowSelectionMode: isRowSelectionMode