primereact 10.3.2 → 10.4.0

package/treetable/treetable.js

@@ -659,6 +659,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var align = getColumnProp('align');
     /* eslint-enable */
     var bodyCellProps = mergeProps({
+      role: 'cell',
       className: utils.classNames(bodyClassName || props.className, cx('bodyCell', {
         bodyProps: props,
         editingState: editingState,
@@ -754,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);
     };
@@ -939,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;
         }
       }
     };
@@ -1166,6 +1267,12 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     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);
@@ -1357,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,
@@ -1420,6 +1529,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     };
     var content = props.value && props.value.length ? createRows() : createEmptyMessage();
     var tbodyProps = mergeProps({
+      role: 'rowgroup',
       className: cx('tbody')
     }, getPTOptions('tbody'));
     return /*#__PURE__*/React__namespace.createElement("tbody", tbodyProps, content);
@@ -1491,7 +1601,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       var rowColumns = React__namespace.Children.toArray(RowBase.getCProp(row, 'children'));
       var rowFooterCells = rowColumns.map(createFooterCell);
       var footerRowProps = mergeProps(ptm('footerRow', {
-        hostName: props.hostName
+        hostName: props.hostName,
+        role: 'row'
       }));
       return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, footerRowProps, {
         key: index
@@ -1520,6 +1631,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
     if (hasFooter()) {
       var tfootProps = mergeProps({
+        role: 'rowgroup',
         className: cx('tfoot')
       }, ptm('tfoot', {
         hostName: props.hostName
@@ -1580,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();
       }
@@ -1754,6 +1866,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       if (options.filterOnly) {
         var frozen = getColumnProp(column, 'frozen');
         var headerCellProps = mergeProps({
+          role: 'columnheader',
           key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index,
           className: utils.classNames(cx('headerCell', {
             options: options,
@@ -1785,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 = 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,
@@ -1800,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);
           },
@@ -1811,25 +1928,16 @@ 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,
@@ -1864,7 +1972,9 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       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);
     };
@@ -1875,7 +1985,8 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     var createColumns = function createColumns(columns) {
       if (columns) {
         var headerRowProps = mergeProps(ptm('headerRow', {
-          hostName: props.hostName
+          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) {
@@ -1892,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,
@@ -1906,6 +2019,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
     };
     var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
     var theadProps = mergeProps({
+      role: 'rowgroup',
       className: cx('thead')
     }, ptm('thead', {
       hostName: props.hostName
@@ -2156,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) {
@@ -2180,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) {
@@ -2886,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,
@@ -3035,6 +3170,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
         className: ptCallbacks.cx('wrapper')
       }, ptCallbacks.ptm('wrapper'));
       var tableProps = mergeProps({
+        role: 'table',
         style: props.tableStyle,
         className: utils.classNames(props.tableClassName, ptCallbacks.cx('table'))
       }, ptCallbacks.ptm('table'));
@@ -3118,6 +3254,7 @@ this.primereact.treetable = (function (exports, React, PrimeReact, componentbase
       ref: reorderIndicatorDownRef
     }, reorderIndicatorDownProps), reorderIndicatorDownIcon);
     var rootProps = mergeProps({
+      role: 'table',
       id: props.id,
       className: utils.classNames(props.className, ptCallbacks.cx('root', {
         isRowSelectionMode: isRowSelectionMode