@vaadin/grid 25.3.0-alpha1 → 25.3.0-alpha10

package/src/vaadin-grid-mixin.js

@@ -4,10 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { TabindexMixin } from '@vaadin/a11y-base/src/tabindex-mixin.js';
-import { microTask } from '@vaadin/component-base/src/async.js';
-import { isAndroid, isChrome, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
+import { isAndroid, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { setTouchAction } from '@vaadin/component-base/src/gestures.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -23,8 +20,10 @@ import { DragAndDropMixin } from './vaadin-grid-drag-and-drop-mixin.js';
 import { DynamicColumnsMixin } from './vaadin-grid-dynamic-columns-mixin.js';
 import { EventContextMixin } from './vaadin-grid-event-context-mixin.js';
 import { FilterMixin } from './vaadin-grid-filter-mixin.js';
+import { HeaderFooterRenderingMixin } from './vaadin-grid-header-footer-rendering-mixin.js';
 import {
   getBodyRowCells,
+  getClosestCell,
   iterateChildren,
   iterateRowCells,
   updateBooleanRowStates,
@@ -48,17 +47,21 @@ export const GridMixin = (superClass) =>
     ArrayDataProviderMixin(
       DataProviderMixin(
         DynamicColumnsMixin(
-          ActiveItemMixin(
-            ScrollMixin(
-              SelectionMixin(
-                SortMixin(
-                  RowDetailsMixin(
-                    KeyboardNavigationMixin(
-                      A11yMixin(
-                        FilterMixin(
-                          ColumnReorderingMixin(
-                            ColumnResizingMixin(
-                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(ResizeMixin(superClass))))),
+          HeaderFooterRenderingMixin(
+            ActiveItemMixin(
+              ScrollMixin(
+                SelectionMixin(
+                  SortMixin(
+                    RowDetailsMixin(
+                      KeyboardNavigationMixin(
+                        A11yMixin(
+                          FilterMixin(
+                            ColumnReorderingMixin(
+                              ColumnResizingMixin(
+                                EventContextMixin(
+                                  DragAndDropMixin(StylingMixin(TabindexMixin(ResizeMixin(superClass)))),
+                                ),
+                              ),
                             ),
                           ),
                         ),
@@ -149,13 +152,22 @@ export const GridMixin = (superClass) =>
     /** @private */
     get _firstVisibleIndex() {
       const firstVisibleItem = this.__getFirstVisibleItem();
-      return firstVisibleItem ? firstVisibleItem.index : undefined;
+      return firstVisibleItem?.index;
     }
 
     /** @private */
     get _lastVisibleIndex() {
       const lastVisibleItem = this.__getLastVisibleItem();
-      return lastVisibleItem ? lastVisibleItem.index : undefined;
+      return lastVisibleItem?.index;
+    }
+
+    constructor() {
+      super();
+
+      this.__onCellMouseEnter = this.__onCellMouseEnter.bind(this);
+      this.__onCellMouseLeave = this.__onCellMouseLeave.bind(this);
+      this.__onCellMouseDown = this.__onCellMouseDown.bind(this);
+      this.__onCellKeyDown = this.__onCellKeyDown.bind(this);
     }
 
     /** @protected */
@@ -204,13 +216,7 @@ export const GridMixin = (superClass) =>
 
     /** @protected */
     _getRowContainingNode(node) {
-      const content = getClosestElement('vaadin-grid-cell-content', node);
-      if (!content) {
-        return;
-      }
-
-      const cell = content.assignedSlot.parentElement;
-      return cell.parentElement;
+      return getClosestCell(node)?.parentElement;
     }
 
     /** @protected */
@@ -292,9 +298,7 @@ export const GridMixin = (superClass) =>
     __focusBodyCell({ item, column }) {
       const row = this._getRenderedRows().find((row) => row._item === item);
       const cell = row && [...row.children].find((cell) => cell._column === column);
-      if (cell) {
-        cell.focus();
-      }
+      cell?.focus();
     }
 
     /** @protected */
@@ -341,7 +345,7 @@ export const GridMixin = (superClass) =>
         updatePart(row, 'row', true);
         updatePart(row, 'body-row', true);
         if (this._columnTree) {
-          this.__initRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);
+          this.__initRow(row, this._columnTree[this._columnTree.length - 1], 'body', true);
         }
         rows.push(row);
       }
@@ -357,6 +361,36 @@ export const GridMixin = (superClass) =>
       return rows;
     }
 
+    /** @private */
+    __onCellKeyDown(event) {
+      const cell = event.currentTarget;
+      cell._column?.__onCellKeyDown?.(event);
+    }
+
+    /** @private */
+    __onCellMouseEnter(event) {
+      // For now we only support tooltip on desktop
+      if (!isAndroid && !isIOS && !this.$.scroller.hasAttribute('scrolling')) {
+        this._showTooltip(event);
+      }
+    }
+
+    /** @private */
+    __onCellMouseLeave() {
+      // For now we only support tooltip on desktop
+      if (!isAndroid && !isIOS) {
+        this._hideTooltip();
+      }
+    }
+
+    /** @private */
+    __onCellMouseDown() {
+      // For now we only support tooltip on desktop
+      if (!isAndroid && !isIOS) {
+        this._hideTooltip(true);
+      }
+    }
+
     /** @private */
     _createCell(tagName, column) {
       const contentId = (this._contentIndex = this._contentIndex + 1 || 0);
@@ -369,22 +403,10 @@ export const GridMixin = (superClass) =>
       cell.id = slotName.replace('-content-', '-');
       cell.setAttribute('role', tagName === 'td' ? 'gridcell' : 'columnheader');
 
-      // For now we only support tooltip on desktop
-      if (!isAndroid && !isIOS) {
-        cell.addEventListener('mouseenter', (event) => {
-          if (!this.$.scroller.hasAttribute('scrolling')) {
-            this._showTooltip(event);
-          }
-        });
-
-        cell.addEventListener('mouseleave', () => {
-          this._hideTooltip();
-        });
-
-        cell.addEventListener('mousedown', () => {
-          this._hideTooltip(true);
-        });
-      }
+      cell.addEventListener('mouseenter', this.__onCellMouseEnter);
+      cell.addEventListener('mouseleave', this.__onCellMouseLeave);
+      cell.addEventListener('mousedown', this.__onCellMouseDown);
+      cell.addEventListener('keydown', this.__onCellKeyDown);
 
       const slot = document.createElement('slot');
       slot.setAttribute('name', slotName);
@@ -409,34 +431,6 @@ export const GridMixin = (superClass) =>
 
       cell._content = cellContent;
 
-      // With native Shadow DOM, mousedown on slotted element does not focus
-      // focusable slot wrapper, that is why cells are not focused with
-      // mousedown. Workaround: listen for mousedown and focus manually.
-      cellContent.addEventListener('mousedown', () => {
-        if (isChrome) {
-          // Chrome bug: focusing before mouseup prevents text selection, see http://crbug.com/771903
-          const mouseUpListener = (event) => {
-            // If focus is on element within the cell content - respect it, do not change
-            const contentContainsFocusedElement = cellContent.contains(this.getRootNode().activeElement);
-            // Only focus if mouse is released on cell content itself
-            const mouseUpWithinCell = event.composedPath().includes(cellContent);
-            if (!contentContainsFocusedElement && mouseUpWithinCell) {
-              cell.focus({ preventScroll: true });
-            }
-            document.removeEventListener('mouseup', mouseUpListener, true);
-          };
-          document.addEventListener('mouseup', mouseUpListener, true);
-        } else {
-          // Focus on mouseup, on the other hand, removes selection on Safari.
-          // Watch out sync focus removal issue, only async focus works here.
-          setTimeout(() => {
-            if (!cellContent.contains(this.getRootNode().activeElement)) {
-              cell.focus({ preventScroll: true });
-            }
-          });
-        }
-      });
-
       return cell;
     }
 
@@ -444,11 +438,10 @@ export const GridMixin = (superClass) =>
      * @param {!HTMLTableRowElement} row
      * @param {!Array<!GridColumn>} columns
      * @param {?string} section
-     * @param {boolean} isColumnRow
      * @param {boolean} noNotify
      * @private
      */
-    __initRow(row, columns, section = 'body', isColumnRow = false, noNotify = false) {
+    __initRow(row, columns, section = 'body', noNotify = false) {
       const contentsFragment = document.createDocumentFragment();
 
       iterateRowCells(row, (cell) => {
@@ -475,9 +468,6 @@ export const GridMixin = (superClass) =>
             cell = column._cells.find((cell) => cell._vacant);
             if (!cell) {
               cell = this._createCell('td', column);
-              if (column._onCellKeyDown) {
-                cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
-              }
               column._cells.push(cell);
             }
             updatePart(cell, 'cell', true);
@@ -519,33 +509,6 @@ export const GridMixin = (superClass) =>
             if (!noNotify) {
               column._cells = [...column._cells];
             }
-          } else {
-            // Header & footer
-            const tagName = section === 'header' ? 'th' : 'td';
-            if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
-              cell = column[`_${section}Cell`];
-              if (!cell) {
-                cell = this._createCell(tagName);
-                if (column._onCellKeyDown) {
-                  cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
-                }
-              }
-              cell._column = column;
-              row.appendChild(cell);
-              column[`_${section}Cell`] = cell;
-            } else {
-              if (!column._emptyCells) {
-                column._emptyCells = [];
-              }
-              cell = column._emptyCells.find((cell) => cell._vacant) || this._createCell(tagName);
-              cell._column = column;
-              row.appendChild(cell);
-              if (column._emptyCells.indexOf(cell) === -1) {
-                column._emptyCells.push(cell);
-              }
-            }
-            updatePart(cell, 'cell', true);
-            updatePart(cell, `${section}-cell`, true);
           }
 
           if (!cell._content.parentElement) {
@@ -555,10 +518,6 @@ export const GridMixin = (superClass) =>
           cell._column = column;
         });
 
-      if (section !== 'body') {
-        this.__debounceUpdateHeaderFooterRowVisibility(row);
-      }
-
       // Might be empty if only cache was used
       this.appendChild(contentsFragment);
 
@@ -566,75 +525,6 @@ export const GridMixin = (superClass) =>
       this._updateFirstAndLastColumnForRow(row);
     }
 
-    /**
-     * @param {HTMLTableRowElement} row
-     * @protected
-     */
-    __debounceUpdateHeaderFooterRowVisibility(row) {
-      row.__debounceUpdateHeaderFooterRowVisibility = Debouncer.debounce(
-        row.__debounceUpdateHeaderFooterRowVisibility,
-        microTask,
-        () => this.__updateHeaderFooterRowVisibility(row),
-      );
-    }
-
-    /**
-     * @param {HTMLTableRowElement} row
-     * @protected
-     */
-    __updateHeaderFooterRowVisibility(row) {
-      if (!row) {
-        return;
-      }
-
-      const visibleRowCells = Array.from(row.children).filter((cell) => {
-        const column = cell._column;
-        if (column._emptyCells && column._emptyCells.indexOf(cell) > -1) {
-          // The cell is an "empty cell"  -> doesn't block hiding the row
-          return false;
-        }
-        if (row.parentElement === this.$.header) {
-          if (column.headerRenderer) {
-            // The cell is the header cell of a column that has a header renderer
-            // -> row should be visible
-            return true;
-          }
-          if (column.header === null) {
-            // The column header is explicilty set to null -> doesn't block hiding the row
-            return false;
-          }
-          if (column.path || column.header !== undefined) {
-            // The column has an explicit non-null header or a path that generates a header
-            // -> row should be visible
-            return true;
-          }
-        } else if (column.footerRenderer) {
-          // The cell is the footer cell of a column that has a footer renderer
-          // -> row should be visible
-          return true;
-        }
-        return false;
-      });
-
-      if (row.hidden !== !visibleRowCells.length) {
-        row.hidden = !visibleRowCells.length;
-      }
-
-      if (row.parentElement === this.$.header) {
-        this.$.table.toggleAttribute('has-header', this.$.header.querySelector('tr:not([hidden])'));
-        this.__updateHeaderFooterRowParts('header');
-      }
-
-      if (row.parentElement === this.$.footer) {
-        this.$.table.toggleAttribute('has-footer', this.$.footer.querySelector('tr:not([hidden])'));
-        this.__updateHeaderFooterRowParts('footer');
-      }
-
-      // Make sure the section has a tabbable element
-      this._resetKeyboardNavigation();
-      this.__a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
-    }
-
     /** @private */
     __updateVirtualizerElement(row, index) {
       this._preventScrollerRotatingCellFocus(row, index);
@@ -687,46 +577,17 @@ export const GridMixin = (superClass) =>
      */
     _renderColumnTree(columnTree) {
       iterateChildren(this.$.items, (row) => {
-        this.__initRow(row, columnTree[columnTree.length - 1], 'body', false, true);
+        this.__initRow(row, columnTree[columnTree.length - 1], 'body', true);
         this.__updateRow(row);
       });
 
-      while (this.$.header.children.length < columnTree.length) {
-        const headerRow = document.createElement('tr');
-        headerRow.setAttribute('role', 'row');
-        headerRow.setAttribute('tabindex', '-1');
-        updatePart(headerRow, 'row', true);
-        updatePart(headerRow, 'header-row', true);
-        this.$.header.appendChild(headerRow);
-
-        const footerRow = document.createElement('tr');
-        footerRow.setAttribute('role', 'row');
-        footerRow.setAttribute('tabindex', '-1');
-        updatePart(footerRow, 'row', true);
-        updatePart(footerRow, 'footer-row', true);
-        this.$.footer.appendChild(footerRow);
-      }
-      while (this.$.header.children.length > columnTree.length) {
-        this.$.header.removeChild(this.$.header.firstElementChild);
-        this.$.footer.removeChild(this.$.footer.firstElementChild);
-      }
-
-      iterateChildren(this.$.header, (headerRow, index) => {
-        this.__initRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1);
-      });
-
-      iterateChildren(this.$.footer, (footerRow, index) => {
-        this.__initRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0);
-      });
+      this.__renderHeaderFooter();
 
       // Sizer rows
       this.__initRow(this.$.sizer, columnTree[columnTree.length - 1]);
 
-      this.__updateHeaderFooterRowParts('header');
-      this.__updateHeaderFooterRowParts('footer');
       this._resizeHandler();
       this._frozenCellsChanged();
-      this._updateFirstAndLastColumn();
       this._resetKeyboardNavigation();
       this.__a11yUpdateHeaderRows();
       this.__a11yUpdateFooterRows();
@@ -734,20 +595,6 @@ export const GridMixin = (superClass) =>
       this.__updateHeaderAndFooter();
     }
 
-    /** @private */
-    __updateHeaderFooterRowParts(section) {
-      const visibleRows = [...this.$[section].querySelectorAll('tr:not([hidden])')];
-      [...this.$[section].children].forEach((row) => {
-        updatePart(row, `first-${section}-row`, row === visibleRows.at(0));
-        updatePart(row, `last-${section}-row`, row === visibleRows.at(-1));
-
-        getBodyRowCells(row).forEach((cell) => {
-          updatePart(cell, `first-${section}-row-cell`, row === visibleRows.at(0));
-          updatePart(cell, `last-${section}-row-cell`, row === visibleRows.at(-1));
-        });
-      });
-    }
-
     /**
      * @param {!HTMLElement} row
      * @param {boolean} loading
@@ -925,9 +772,7 @@ export const GridMixin = (superClass) =>
 
     /** @protected */
     __updateVisibleRows(start, end) {
-      if (this.__virtualizer) {
-        this.__virtualizer.update(start, end);
-      }
+      this.__virtualizer?.update(start, end);
     }
 
     /** @private */

package/src/vaadin-grid-row-details-mixin.js

@@ -180,7 +180,7 @@ export const RowDetailsMixin = (superClass) =>
      * @protected
      */
     _isDetailsOpened(item) {
-      return this.__detailsOpenedKeys && this.__detailsOpenedKeys.has(this.getItemId(item));
+      return this.__detailsOpenedKeys?.has(this.getItemId(item));
     }
 
     /** @private */

package/src/vaadin-grid-scroll-mixin.js

@@ -6,6 +6,7 @@
 import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { OverflowController } from '@vaadin/component-base/src/overflow-controller.js';
 
 const timeouts = {
@@ -135,12 +136,6 @@ export const ScrollMixin = (superClass) =>
 
             this.__scrollIntoViewport(scrollTarget);
           }
-
-          if (!this.$.table.contains(e.relatedTarget)) {
-            // Virtualizer can't catch the event because if orginates from the light DOM.
-            // Dispatch a virtualizer-element-focused event for virtualizer to catch.
-            this.$.table.dispatchEvent(new CustomEvent('virtualizer-element-focused', { detail: { element: row } }));
-          }
         }
       });
 
@@ -377,11 +372,7 @@ export const ScrollMixin = (superClass) =>
 
     /** @private */
     __columnRenderingChanged(_columnTree, columnRendering) {
-      if (columnRendering === 'eager') {
-        this.$.scroller.removeAttribute('column-rendering');
-      } else {
-        this.$.scroller.setAttribute('column-rendering', columnRendering);
-      }
+      setOrRemoveAttribute(this.$.scroller, 'column-rendering', columnRendering !== 'eager' && columnRendering);
 
       this.__updateColumnsBodyContentHidden();
     }

package/src/vaadin-grid-selection-column-base-mixin.js

@@ -107,12 +107,12 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
 
     constructor() {
       super();
-      this.__onCellTrack = this.__onCellTrack.bind(this);
-      this.__onCellClick = this.__onCellClick.bind(this);
-      this.__onCellMouseDown = this.__onCellMouseDown.bind(this);
+      this.__onCellContentTrack = this.__onCellContentTrack.bind(this);
+      this.__onCellContentClick = this.__onCellContentClick.bind(this);
+      this.__onCellContentMouseDown = this.__onCellContentMouseDown.bind(this);
       this.__onGridInteraction = this.__onGridInteraction.bind(this);
-      this.__onActiveItemChanged = this.__onActiveItemChanged.bind(this);
-      this.__onTouchStart = this.__onTouchStart.bind(this);
+      this.__onGridActiveItemChanged = this.__onGridActiveItemChanged.bind(this);
+      this.__onGridTouchStart = this.__onGridTouchStart.bind(this);
       this.__onSelectRowCheckboxChange = this.__onSelectRowCheckboxChange.bind(this);
       this.__onSelectAllCheckboxChange = this.__onSelectAllCheckboxChange.bind(this);
     }
@@ -124,8 +124,8 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         this._grid.addEventListener('keyup', this.__onGridInteraction);
         this._grid.addEventListener('keydown', this.__onGridInteraction, { capture: true });
         this._grid.addEventListener('mousedown', this.__onGridInteraction);
-        this._grid.addEventListener('active-item-changed', this.__onActiveItemChanged);
-        this._grid.addEventListener('touchstart', this.__onTouchStart);
+        this._grid.addEventListener('active-item-changed', this.__onGridActiveItemChanged);
+        this._grid.addEventListener('touchstart', this.__onGridTouchStart);
       }
     }
 
@@ -136,8 +136,8 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         this._grid.removeEventListener('keyup', this.__onGridInteraction);
         this._grid.removeEventListener('keydown', this.__onGridInteraction, { capture: true });
         this._grid.removeEventListener('mousedown', this.__onGridInteraction);
-        this._grid.removeEventListener('active-item-changed', this.__onActiveItemChanged);
-        this._grid.removeEventListener('touchstart', this.__onTouchStart);
+        this._grid.removeEventListener('active-item-changed', this.__onGridActiveItemChanged);
+        this._grid.removeEventListener('touchstart', this.__onGridTouchStart);
       }
     }
 
@@ -150,16 +150,33 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       let checkbox = root.firstElementChild;
       if (!checkbox) {
         checkbox = document.createElement('vaadin-checkbox');
-        checkbox.accessibleName = 'Select All';
         checkbox.classList.add('vaadin-grid-select-all-checkbox');
         checkbox.addEventListener('change', this.__onSelectAllCheckboxChange);
         root.appendChild(checkbox);
       }
 
+      const { selectAll, selectAllUnavailable } = this._grid.__effectiveI18n;
+      checkbox.accessibleName = selectAll;
+
       const checked = this.__isChecked(this.selectAll, this._indeterminate);
       checkbox.checked = checked;
       checkbox.indeterminate = this._indeterminate;
       checkbox.style.visibility = this._selectAllHidden ? 'hidden' : '';
+
+      // When the Select All checkbox is hidden, the header cell would otherwise
+      // be announced as blank. Render a screen-reader-only label into the cell
+      // so that screen readers announce the `selectAllUnavailable` text.
+      let label = this._headerCell.querySelector(':scope > .sr-only');
+      if (this._selectAllHidden && selectAllUnavailable) {
+        if (!label) {
+          label = document.createElement('span');
+          label.classList.add('sr-only');
+          this._headerCell.appendChild(label);
+        }
+        label.textContent = selectAllUnavailable;
+      } else {
+        label?.remove();
+      }
     }
 
     /**
@@ -171,15 +188,15 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       let checkbox = root.firstElementChild;
       if (!checkbox) {
         checkbox = document.createElement('vaadin-checkbox');
-        checkbox.accessibleName = 'Select Row';
         checkbox.addEventListener('change', this.__onSelectRowCheckboxChange);
         root.appendChild(checkbox);
-        addListener(root, 'track', this.__onCellTrack);
+        addListener(root, 'track', this.__onCellContentTrack);
         setTouchAction(root, 'pinch-zoom');
-        root.addEventListener('mousedown', this.__onCellMouseDown);
-        root.addEventListener('click', this.__onCellClick);
+        root.addEventListener('mousedown', this.__onCellContentMouseDown);
+        root.addEventListener('click', this.__onCellContentClick);
       }
 
+      this.__updateSelectRowAccessibleName(checkbox, root);
       checkbox.__item = item;
       checkbox.checked = selected;
 
@@ -190,6 +207,34 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       checkbox.style.visibility = isHidden ? 'hidden' : '';
     }
 
+    /**
+     * Sets the Select Row checkbox accessible name based on the grid i18n.
+     * The `{rowHeader}` placeholder is replaced with the row header cell text content
+     * or row index if there is no row header column or it's cell is empty.
+     *
+     * @private
+     */
+    __updateSelectRowAccessibleName(checkbox, root) {
+      const ariaLabel = this._grid?.__effectiveI18n?.selectRow;
+      if (!ariaLabel || !ariaLabel.includes('{rowHeader}')) {
+        checkbox.accessibleName = ariaLabel;
+        return;
+      }
+
+      // Defer reading the row header cell text until all cell renderers of
+      // the row have run in the current task, as the selection column may
+      // render before the row header column.
+      queueMicrotask(() => {
+        const row = root.assignedSlot?.parentElement?.__parentRow;
+        if (!checkbox.isConnected || !row) {
+          return;
+        }
+        const rowHeaderCell = row.__cells.find((cell) => cell._column?.rowHeader);
+        const value = rowHeaderCell?._content?.textContent.trim() || String(row.index + 1);
+        checkbox.accessibleName = ariaLabel.replace('{rowHeader}', value);
+      });
+    }
+
     /**
      * Updates the select all state when the Select All checkbox is switched.
      * The listener handles only user-fired events.
@@ -225,7 +270,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    __onCellTrack(event) {
+    __onCellContentTrack(event) {
       if (!this.dragSelect) {
         return;
       }
@@ -261,7 +306,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    __onCellMouseDown(e) {
+    __onCellContentMouseDown(e) {
       if (this.dragSelect) {
         // Prevent text selection when starting to drag
         e.preventDefault();
@@ -269,7 +314,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    __onTouchStart(e) {
+    __onGridTouchStart(e) {
       if (e.touches.length > 1) {
         this.__multiTouchActive = true;
         // Cancel in-progress drag-select on multi-touch (e.g. pinch-zoom)
@@ -281,7 +326,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    __onCellClick(e) {
+    __onCellContentClick(e) {
       if (this.__dragStartIndex !== undefined) {
         // Stop the click event if drag was enabled. This click event should
         // only occur if drag started and stopped on the same item. In that case
@@ -293,7 +338,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    _onCellKeyDown(e) {
+    __onCellKeyDown(e) {
       const target = e.composedPath()[0];
       // Toggle on Space without having to enter interaction mode first
       if (e.keyCode !== 32) {
@@ -312,7 +357,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    __onActiveItemChanged(e) {
+    __onGridActiveItemChanged(e) {
       const activeItem = e.detail.value;
       if (this.autoSelect) {
         const item = activeItem || this.__previousActiveItem;
@@ -338,7 +383,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
 
       // Get the index of the row being hovered over or the first/last
       // visible row if hovering outside the grid
-      let hoveredIndex = hoveredRow ? hoveredRow.index : undefined;
+      let hoveredIndex = hoveredRow?.index;
       const scrollableArea = this.__getScrollableArea();
       if (this.__dragCurrentY < scrollableArea.top) {
         hoveredIndex = this._grid._firstVisibleIndex;