primereact 10.3.1 → 10.3.3

package/treetable/treetable.cjs.js

@@ -266,7 +266,7 @@ var ColumnBase = componentbase.ComponentBase.extend({
   }
 });
 
-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,
@@ -286,8 +286,8 @@ var classes = {
   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;
@@ -313,22 +313,24 @@ var classes = {
   },
   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',
@@ -430,9 +432,9 @@ var TreeTableBase = componentbase.ComponentBase.extend({
     propagateSelectionDown: true,
     propagateSelectionUp: true,
     removableSort: false,
-    reorderableColumns: false,
     reorderIndicatorDownIcon: null,
     reorderIndicatorUpIcon: null,
+    reorderableColumns: false,
     resizableColumns: false,
     rowClassName: null,
     rowHover: false,
@@ -445,8 +447,8 @@ var TreeTableBase = componentbase.ComponentBase.extend({
     selectionMode: null,
     showGridlines: false,
     sortField: null,
-    sortMode: 'single',
     sortIcon: null,
+    sortMode: 'single',
     sortOrder: null,
     stripedRows: false,
     style: null,
@@ -475,6 +477,7 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
   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);
   };
@@ -505,7 +508,7 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
         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));
   };
@@ -664,7 +667,7 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
       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',
@@ -672,12 +675,13 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
       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,
@@ -707,6 +711,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
   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);
@@ -733,7 +738,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -748,7 +753,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
         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));
   };
@@ -772,11 +777,13 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
   };
@@ -957,49 +964,147 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
       });
     }
   };
-  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;
       }
     }
   };
@@ -1017,7 +1122,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   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'));
@@ -1025,7 +1130,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
     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) {
@@ -1060,7 +1165,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
     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;
@@ -1069,7 +1174,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
         checked: checked,
         partialChecked: partialChecked
       });
-      var hiddenInputProps = utils.mergeProps({
+      var hiddenInputProps = mergeProps({
         type: 'checkbox',
         onFocus: function onFocus(e) {
           return onCheckboxFocus();
@@ -1078,7 +1183,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
           return onCheckboxBlur();
         }
       }, getColumnCheckboxPTOptions(column, 'hiddenInput'));
-      var checkboxWrapperProps = utils.mergeProps({
+      var checkboxWrapperProps = mergeProps({
         className: cx('checkboxWrapper'),
         onClick: function onClick(e) {
           return onCheckboxChange(e);
@@ -1086,10 +1191,10 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
         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
@@ -1181,9 +1286,15 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
@@ -1217,6 +1328,7 @@ function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) le
 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,
@@ -1374,6 +1486,8 @@ var TreeTableBody = /*#__PURE__*/React__namespace.memo(function (props) {
       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,
@@ -1426,17 +1540,18 @@ var TreeTableBody = /*#__PURE__*/React__namespace.memo(function (props) {
       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);
@@ -1469,6 +1584,7 @@ var RowBase = componentbase.ComponentBase.extend({
 });
 
 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,
@@ -1486,12 +1602,12 @@ var TreeTableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
       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'),
@@ -1506,8 +1622,9 @@ var TreeTableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
   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
@@ -1520,7 +1637,7 @@ var TreeTableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
   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);
@@ -1535,7 +1652,8 @@ var TreeTableFooter = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   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
@@ -1553,6 +1671,7 @@ function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) le
 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,
@@ -1571,7 +1690,7 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
       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));
   };
@@ -1595,7 +1714,7 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var onHeaderKeyDown = function onHeaderKeyDown(event, column) {
-    if (event.key === 'Enter') {
+    if (event.key === 'Enter' && event.key === 'Space') {
       onHeaderClick(event, column);
       event.preventDefault();
     }
@@ -1695,7 +1814,7 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   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: {
@@ -1715,7 +1834,7 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   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);
@@ -1728,7 +1847,7 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   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);
@@ -1739,7 +1858,7 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     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);
@@ -1768,7 +1887,8 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     }
     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,
@@ -1800,11 +1920,14 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
       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,
@@ -1815,7 +1938,8 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
           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);
         },
@@ -1826,32 +1950,23 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
           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);
@@ -1876,10 +1991,12 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
         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);
   };
@@ -1889,8 +2006,9 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   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) {
@@ -1907,7 +2025,9 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
           });
         })));
       } 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,
@@ -1920,7 +2040,8 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   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
@@ -1939,6 +2060,7 @@ var TreeTableScrollableView = /*#__PURE__*/React__namespace.memo(function (props
   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,
@@ -2018,7 +2140,7 @@ var TreeTableScrollableView = /*#__PURE__*/React__namespace.memo(function (props
           key: col.field + '_' + i
         });
       });
-      var scrollableColgroupProps = utils.mergeProps({
+      var scrollableColgroupProps = mergeProps({
         className: cx('scrollableColgroup')
       }, getPTOptions('scrollableColgroup'));
       return /*#__PURE__*/React__namespace.createElement("colgroup", scrollableColgroupProps, cols);
@@ -2029,7 +2151,7 @@ var TreeTableScrollableView = /*#__PURE__*/React__namespace.memo(function (props
   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
     }),
@@ -2038,19 +2160,19 @@ var TreeTableScrollableView = /*#__PURE__*/React__namespace.memo(function (props
       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'
@@ -2059,19 +2181,19 @@ var TreeTableScrollableView = /*#__PURE__*/React__namespace.memo(function (props
       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({
@@ -2098,6 +2220,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var 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),
@@ -2169,6 +2292,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   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) {
@@ -2193,10 +2317,19 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     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) {
@@ -2899,6 +3032,17 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     }
     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,
@@ -3034,7 +3178,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       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);
@@ -3044,10 +3188,11 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     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'));
@@ -3060,7 +3205,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   };
   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, {
@@ -3069,10 +3214,10 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       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));
@@ -3082,13 +3227,13 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   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'
@@ -3102,14 +3247,14 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   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
   });
@@ -3123,14 +3268,15 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       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