primereact 10.3.2 → 10.4.0

package/treetable/treetable.esm.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PrimeReact, { FilterMatchMode, ariaLabel, localeOption, PrimeReactContext, FilterService } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { ObjectUtils, classNames, DomHandler, IconUtils } from 'primereact/utils';
-import { useMergeProps, useEventListener, useUnmountEffect, useMountEffect } from 'primereact/hooks';
+import { useMergeProps, useEventListener, useUnmountEffect, useMountEffect, useUpdateEffect } from 'primereact/hooks';
 import { ArrowDownIcon } from 'primereact/icons/arrowdown';
 import { ArrowUpIcon } from 'primereact/icons/arrowup';
 import { SpinnerIcon } from 'primereact/icons/spinner';
@@ -654,6 +654,7 @@ var TreeTableBodyCell = function TreeTableBodyCell(props) {
   var align = getColumnProp('align');
   /* eslint-enable */
   var bodyCellProps = mergeProps({
+    role: 'cell',
     className: classNames(bodyClassName || props.className, cx('bodyCell', {
       bodyProps: props,
       editingState: editingState,
@@ -749,11 +750,13 @@ var TreeTableRow = /*#__PURE__*/React.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);
   };
@@ -934,49 +937,147 @@ var TreeTableRow = /*#__PURE__*/React.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 (!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 = DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
+    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 = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
+    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 = DomHandler.findSingle(event.currentTarget.parentElement, "tr[aria-level=\"".concat(props.level + 1, "\"]"));
+    findFirstElement && DomHandler.focus(findFirstElement);
+    event.preventDefault();
+  };
+  var onEndKey = function onEndKey(event) {
+    var nodes = DomHandler.find(event.currentTarget.parentElement, "tr[aria-level=\"".concat(props.level + 1, "\"]"));
+    var findFirstElement = nodes[nodes.length - 1];
+    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(DomHandler.find(elementRef.current.parentElement, 'tr'));
+    var hasSelectedRow = rows.some(function (row) {
+      return 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 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';
+    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(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;
       }
     }
   };
@@ -1161,6 +1262,12 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
   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);
@@ -1352,6 +1459,8 @@ var TreeTableBody = /*#__PURE__*/React.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,
@@ -1415,6 +1524,7 @@ var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
   };
   var content = props.value && props.value.length ? createRows() : createEmptyMessage();
   var tbodyProps = mergeProps({
+    role: 'rowgroup',
     className: cx('tbody')
   }, getPTOptions('tbody'));
   return /*#__PURE__*/React.createElement("tbody", tbodyProps, content);
@@ -1486,7 +1596,8 @@ var TreeTableFooter = /*#__PURE__*/React.memo(function (props) {
     var rowColumns = React.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.createElement("tr", _extends({}, footerRowProps, {
       key: index
@@ -1515,6 +1626,7 @@ var TreeTableFooter = /*#__PURE__*/React.memo(function (props) {
   var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
   if (hasFooter()) {
     var tfootProps = mergeProps({
+      role: 'rowgroup',
       className: cx('tfoot')
     }, ptm('tfoot', {
       hostName: props.hostName
@@ -1575,7 +1687,7 @@ var TreeTableHeader = /*#__PURE__*/React.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();
     }
@@ -1749,6 +1861,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
     if (options.filterOnly) {
       var frozen = getColumnProp(column, 'frozen');
       var headerCellProps = mergeProps({
+        role: 'columnheader',
         key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index,
         className: classNames(cx('headerCell', {
           options: options,
@@ -1780,11 +1893,14 @@ var TreeTableHeader = /*#__PURE__*/React.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 = 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: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', {
           headerProps: props,
           frozen: _frozen,
@@ -1795,7 +1911,8 @@ var TreeTableHeader = /*#__PURE__*/React.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);
         },
@@ -1806,25 +1923,16 @@ var TreeTableHeader = /*#__PURE__*/React.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,
@@ -1859,7 +1967,9 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
     var headerRowProps = mergeProps(ptm('headerRow', {
       hostName: props.hostName
     }));
-    return /*#__PURE__*/React.createElement("tr", _extends({}, headerRowProps, {
+    return /*#__PURE__*/React.createElement("tr", _extends({
+      role: "row"
+    }, headerRowProps, {
       key: index
     }), rowHeaderCells);
   };
@@ -1870,7 +1980,8 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
   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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", headerRowProps, columns.map(function (col, i) {
@@ -1887,7 +1998,9 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
           });
         })));
       } else {
-        return /*#__PURE__*/React.createElement("tr", headerRowProps, columns.map(function (col, i) {
+        return /*#__PURE__*/React.createElement("tr", _extends({
+          role: "row"
+        }, headerRowProps), columns.map(function (col, i) {
           return createHeaderCell(col, {
             index: i,
             filterOnly: false,
@@ -1901,6 +2014,7 @@ var TreeTableHeader = /*#__PURE__*/React.memo(function (props) {
   };
   var content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
   var theadProps = mergeProps({
+    role: 'rowgroup',
     className: cx('thead')
   }, ptm('thead', {
     hostName: props.hostName
@@ -2151,6 +2265,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var columnSortable = React.useRef(null);
   var columnSortFunction = React.useRef(null);
   var columnField = React.useRef(null);
+  var childFocusEvent = React.useRef(null);
   var _useEventListener = useEventListener({
       type: 'mousemove',
       listener: function listener(event) {
@@ -2175,10 +2290,19 @@ var TreeTable = /*#__PURE__*/React.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) {
@@ -2881,6 +3005,17 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
     return data;
   };
+  useUpdateEffect(function () {
+    if (childFocusEvent.current) {
+      var nodeElement = childFocusEvent.current.target;
+      var nextElementSibling = nodeElement.nextElementSibling;
+      if (nextElementSibling) {
+        nodeElement.tabIndex = '-1';
+        nextElementSibling.tabIndex = '0';
+        DomHandler.focus(nextElementSibling);
+      }
+    }
+  }, [expandedKeysState]);
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
@@ -3030,6 +3165,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       className: ptCallbacks.cx('wrapper')
     }, ptCallbacks.ptm('wrapper'));
     var tableProps = mergeProps({
+      role: 'table',
       style: props.tableStyle,
       className: classNames(props.tableClassName, ptCallbacks.cx('table'))
     }, ptCallbacks.ptm('table'));
@@ -3113,6 +3249,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     ref: reorderIndicatorDownRef
   }, reorderIndicatorDownProps), reorderIndicatorDownIcon);
   var rootProps = mergeProps({
+    role: 'table',
     id: props.id,
     className: classNames(props.className, ptCallbacks.cx('root', {
       isRowSelectionMode: isRowSelectionMode