@vaadin/grid 24.2.3 → 24.3.0-alpha10

package/src/vaadin-grid-helpers.js

@@ -3,6 +3,8 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { microTask } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 
 /**
@@ -170,3 +172,95 @@ export function updateCellState(cell, attribute, value, part, oldPart) {
   // Add new part to the cell attribute
   updatePart(cell, value, part || `${attribute}-cell`);
 }
+
+/**
+ * A helper for observing flattened child column list of an element.
+ */
+export class ColumnObserver {
+  constructor(host, callback) {
+    this.__host = host;
+    this.__callback = callback;
+    this.__currentSlots = [];
+
+    this.__onMutation = this.__onMutation.bind(this);
+    this.__observer = new MutationObserver(this.__onMutation);
+    this.__observer.observe(host, {
+      childList: true,
+    });
+
+    // The observer callback is invoked once initially.
+    this.__initialCallDebouncer = Debouncer.debounce(this.__initialCallDebouncer, microTask, () => this.__onMutation());
+  }
+
+  disconnect() {
+    this.__observer.disconnect();
+    this.__initialCallDebouncer.cancel();
+    this.__toggleSlotChangeListeners(false);
+  }
+
+  flush() {
+    this.__onMutation();
+  }
+
+  __toggleSlotChangeListeners(add) {
+    this.__currentSlots.forEach((slot) => {
+      if (add) {
+        slot.addEventListener('slotchange', this.__onMutation);
+      } else {
+        slot.removeEventListener('slotchange', this.__onMutation);
+      }
+    });
+  }
+
+  __onMutation() {
+    // Detect if this is the initial call
+    const initialCall = !this.__currentColumns;
+    this.__currentColumns ||= [];
+
+    // Detect added and removed columns or if the columns order has changed
+    const columns = ColumnObserver.getColumns(this.__host);
+    const addedColumns = columns.filter((column) => !this.__currentColumns.includes(column));
+    const removedColumns = this.__currentColumns.filter((column) => !columns.includes(column));
+    const orderChanged = this.__currentColumns.some((column, index) => column !== columns[index]);
+    this.__currentColumns = columns;
+
+    // Update the list of child slots and toggle their slotchange listeners
+    this.__toggleSlotChangeListeners(false);
+    this.__currentSlots = [...this.__host.children].filter((child) => child instanceof HTMLSlotElement);
+    this.__toggleSlotChangeListeners(true);
+
+    // Invoke the callback if there are changes in the child columns or if this is the initial call
+    const invokeCallback = initialCall || addedColumns.length || removedColumns.length || orderChanged;
+    if (invokeCallback) {
+      this.__callback(addedColumns, removedColumns);
+    }
+  }
+
+  /**
+   * Default filter for column elements.
+   */
+  static __isColumnElement(node) {
+    return node.nodeType === Node.ELEMENT_NODE && /\bcolumn\b/u.test(node.localName);
+  }
+
+  static getColumns(host) {
+    const columns = [];
+
+    // A temporary workaround for backwards compatibility
+    const isColumnElement = host._isColumnElement || ColumnObserver.__isColumnElement;
+
+    [...host.children].forEach((child) => {
+      if (isColumnElement(child)) {
+        // The child is a column element, add it to the list
+        columns.push(child);
+      } else if (child instanceof HTMLSlotElement) {
+        // The child is a slot, add all assigned column elements to the list
+        [...child.assignedElements({ flatten: true })]
+          .filter((assignedElement) => isColumnElement(assignedElement))
+          .forEach((assignedElement) => columns.push(assignedElement));
+      }
+    });
+
+    return columns;
+  }
+}

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -18,6 +18,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         _headerFocusable: {
           type: Object,
           observer: '_focusableChanged',
+          sync: true,
         },
 
         /**
@@ -27,12 +28,14 @@ export const KeyboardNavigationMixin = (superClass) =>
         _itemsFocusable: {
           type: Object,
           observer: '_focusableChanged',
+          sync: true,
         },
 
         /** @private */
         _footerFocusable: {
           type: Object,
           observer: '_focusableChanged',
+          sync: true,
         },
 
         /** @private */
@@ -54,6 +57,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         _focusedCell: {
           type: Object,
           observer: '_focusedCellChanged',
+          sync: true,
         },
 
         /**
@@ -267,7 +271,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __isRowExpandable(row) {
       if (this.itemHasChildrenPath) {
         const item = row._item;
-        return item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
+        return !!(item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item));
       }
     }
 
@@ -443,7 +447,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __navigateRows(dy, activeRow, activeCell) {
       const currentRowIndex = this.__getIndexInGroup(activeRow, this._focusedItemIndex);
       const activeRowGroup = activeRow.parentNode;
-      const maxRowIndex = (activeRowGroup === this.$.items ? this._effectiveSize : activeRowGroup.children.length) - 1;
+      const maxRowIndex = (activeRowGroup === this.$.items ? this._flatSize : activeRowGroup.children.length) - 1;
 
       // Index of the destination row
       let dstRowIndex = Math.max(0, Math.min(currentRowIndex + dy, maxRowIndex));
@@ -476,7 +480,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         // Row details navigation logic
         if (activeRowGroup === this.$.items) {
           const item = activeRow._item;
-          const dstItem = this._cache.getItemForIndex(dstRowIndex);
+          const { item: dstItem } = this._dataProviderController.getFlatIndexContext(dstRowIndex);
           // Should we navigate to row details?
           if (isRowDetails) {
             dstIsRowDetails = dy === 0;
@@ -967,6 +971,9 @@ export const KeyboardNavigationMixin = (superClass) =>
 
     /** @protected */
     _resetKeyboardNavigation() {
+      if (!this.$ && this.performUpdate) {
+        this.performUpdate();
+      }
       // Header / footer
       ['header', 'footer'].forEach((section) => {
         if (!this.__isValidFocusable(this[`_${section}Focusable`])) {
@@ -985,7 +992,7 @@ export const KeyboardNavigationMixin = (superClass) =>
 
         if (firstVisibleCell && firstVisibleRow) {
           // Reset memoized column
-          delete this._focusedColumnOrder;
+          this._focusedColumnOrder = undefined;
           this._itemsFocusable = this.__getFocusable(firstVisibleRow, firstVisibleCell);
         }
       } else {

package/src/vaadin-grid-mixin.js

@@ -58,8 +58,8 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * @mixes DragAndDropMixin
  */
 export const GridMixin = (superClass) =>
-  class extends DataProviderMixin(
-    ArrayDataProviderMixin(
+  class extends ArrayDataProviderMixin(
+    DataProviderMixin(
       DynamicColumnsMixin(
         ActiveItemMixin(
           ScrollMixin(
@@ -86,10 +86,7 @@ export const GridMixin = (superClass) =>
     ),
   ) {
     static get observers() {
-      return [
-        '_columnTreeChanged(_columnTree, _columnTree.*)',
-        '_effectiveSizeChanged(_effectiveSize, __virtualizer, _hasData, _columnTree)',
-      ];
+      return ['_columnTreeChanged(_columnTree)', '_flatSizeChanged(_flatSize, __virtualizer, _hasData, _columnTree)'];
     }
 
     static get properties() {
@@ -254,7 +251,6 @@ export const GridMixin = (superClass) =>
 
       new ResizeObserver(() =>
         setTimeout(() => {
-          this.__updateFooterPositioning();
           this.__updateColumnsBodyContentHidden();
           this.__tryToRecalculateColumnWidthsIfPending();
         }),
@@ -294,20 +290,20 @@ export const GridMixin = (superClass) =>
     }
 
     /** @private */
-    _effectiveSizeChanged(effectiveSize, virtualizer, hasData, columnTree) {
+    _flatSizeChanged(flatSize, virtualizer, hasData, columnTree) {
       if (virtualizer && hasData && columnTree) {
         // Changing the virtualizer size may result in the row with focus getting hidden
         const cell = this.shadowRoot.activeElement;
         const cellCoordinates = this.__getBodyCellCoordinates(cell);
 
         const previousSize = virtualizer.size || 0;
-        virtualizer.size = effectiveSize;
+        virtualizer.size = flatSize;
 
         // Request an update for the previous last row to have the "last" state removed
         virtualizer.update(previousSize - 1, previousSize - 1);
-        if (effectiveSize < previousSize) {
+        if (flatSize < previousSize) {
           // Size was decreased, so the new last row requires an explicit update
-          virtualizer.update(effectiveSize - 1, effectiveSize - 1);
+          virtualizer.update(flatSize - 1, flatSize - 1);
         }
 
         // If the focused cell's parent row got hidden by the size change, focus the corresponding new cell
@@ -466,7 +462,7 @@ export const GridMixin = (superClass) =>
       if (!this._columnTree) {
         return; // No columns
       }
-      if (isElementHidden(this) || this._cache.isLoading()) {
+      if (isElementHidden(this) || this._dataProviderController.isLoading()) {
         this.__pendingRecalculateColumnWidths = true;
         return;
       }
@@ -479,7 +475,7 @@ export const GridMixin = (superClass) =>
       if (
         this.__pendingRecalculateColumnWidths &&
         !isElementHidden(this) &&
-        !this._cache.isLoading() &&
+        !this._dataProviderController.isLoading() &&
         this.__hasRowsWithClientHeight()
       ) {
         this.__pendingRecalculateColumnWidths = false;
@@ -501,7 +497,7 @@ export const GridMixin = (superClass) =>
       const rows = [];
       for (let i = 0; i < count; i++) {
         const row = document.createElement('tr');
-        row.setAttribute('part', 'row');
+        row.setAttribute('part', 'row body-row');
         row.setAttribute('role', 'row');
         row.setAttribute('tabindex', '-1');
         if (this._columnTree) {
@@ -511,9 +507,11 @@ export const GridMixin = (superClass) =>
       }
 
       if (this._columnTree) {
-        this._columnTree[this._columnTree.length - 1].forEach(
-          (c) => c.isConnected && c.notifyPath && c.notifyPath('_cells.*', c._cells),
-        );
+        this._columnTree[this._columnTree.length - 1].forEach((c) => {
+          if (c.isConnected && c._cells) {
+            c._cells = [...c._cells];
+          }
+        });
       }
 
       this.__afterCreateScrollerRowsDebouncer = Debouncer.debounce(
@@ -678,8 +676,8 @@ export const GridMixin = (superClass) =>
               detailsCell._vacant = false;
             }
 
-            if (column.notifyPath && !noNotify) {
-              column.notifyPath('_cells.*', column._cells);
+            if (!noNotify) {
+              column._cells = [...column._cells];
             }
           } else {
             // Header & footer
@@ -700,7 +698,7 @@ export const GridMixin = (superClass) =>
                 column._emptyCells.push(cell);
               }
             }
-            cell.setAttribute('part', `cell ${section}-cell`);
+            cell.part.add('cell', `${section}-cell`);
           }
 
           if (!cell._content.parentElement) {
@@ -804,7 +802,7 @@ export const GridMixin = (superClass) =>
     _updateRowOrderParts(row, index = row.index) {
       updateBooleanRowStates(row, {
         first: index === 0,
-        last: index === this._effectiveSize - 1,
+        last: index === this._flatSize - 1,
         odd: index % 2 !== 0,
         even: index % 2 === 0,
       });
@@ -814,6 +812,7 @@ export const GridMixin = (superClass) =>
     _updateRowStateParts(row, { expanded, selected, detailsOpened }) {
       updateBooleanRowStates(row, {
         expanded,
+        collapsed: this.__isRowExpandable(row),
         selected,
         'details-opened': detailsOpened,
       });
@@ -876,25 +875,11 @@ export const GridMixin = (superClass) =>
       this._resetKeyboardNavigation();
       this._a11yUpdateHeaderRows();
       this._a11yUpdateFooterRows();
-      this.__updateFooterPositioning();
       this.generateCellClassNames();
       this.generateCellPartNames();
       this.__updateHeaderAndFooter();
     }
 
-    /** @private */
-    __updateFooterPositioning() {
-      // TODO: fixed in Firefox 99, remove when we can drop Firefox ESR 91 support
-      if (this._firefox && parseFloat(navigator.userAgent.match(/Firefox\/(\d{2,3}.\d)/u)[1]) < 99) {
-        // Sticky (or translated) footer in a flexbox host doesn't get included in
-        // the scroll height calculation on FF. This is a workaround for the issue.
-        this.$.items.style.paddingBottom = 0;
-        if (!this.allRowsVisible) {
-          this.$.items.style.paddingBottom = `${this.$.footer.offsetHeight}px`;
-        }
-      }
-    }
-
     /**
      * @param {!HTMLElement} row
      * @param {GridItem} item
@@ -930,7 +915,6 @@ export const GridMixin = (superClass) =>
     /** @private */
     _resizeHandler() {
       this._updateDetailsCellHeights();
-      this.__updateFooterPositioning();
       this.__updateHorizontalScrollPosition();
     }
 
@@ -984,7 +968,7 @@ export const GridMixin = (superClass) =>
 
     /** @protected */
     _hideTooltip(immediate) {
-      const tooltip = this._tooltipController.node;
+      const tooltip = this._tooltipController && this._tooltipController.node;
       if (tooltip) {
         tooltip._stateController.close(immediate);
       }

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

@@ -19,6 +19,7 @@ export const RowDetailsMixin = (superClass) =>
         detailsOpenedItems: {
           type: Array,
           value: () => [],
+          sync: true,
         },
 
         /**
@@ -37,7 +38,10 @@ export const RowDetailsMixin = (superClass) =>
          *
          * @type {GridRowDetailsRenderer | null | undefined}
          */
-        rowDetailsRenderer: Function,
+        rowDetailsRenderer: {
+          type: Function,
+          sync: true,
+        },
 
         /**
          * @type {!Array<!HTMLElement> | undefined}
@@ -51,7 +55,7 @@ export const RowDetailsMixin = (superClass) =>
 
     static get observers() {
       return [
-        '_detailsOpenedItemsChanged(detailsOpenedItems.*, rowDetailsRenderer)',
+        '_detailsOpenedItemsChanged(detailsOpenedItems, rowDetailsRenderer)',
         '_rowDetailsRendererChanged(rowDetailsRenderer)',
       ];
     }
@@ -90,12 +94,7 @@ export const RowDetailsMixin = (superClass) =>
     }
 
     /** @private */
-    _detailsOpenedItemsChanged(changeRecord, rowDetailsRenderer) {
-      // Skip to avoid duplicate work of both `.splices` and `.length` updates.
-      if (changeRecord.path === 'detailsOpenedItems.length' || !changeRecord.value) {
-        return;
-      }
-
+    _detailsOpenedItemsChanged(detailsOpenedItems, rowDetailsRenderer) {
       iterateChildren(this.$.items, (row) => {
         // Re-renders the row to possibly close the previously opened details.
         if (row.hasAttribute('details-opened')) {

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

@@ -61,6 +61,7 @@ export const ScrollMixin = (superClass) =>
         columnRendering: {
           type: String,
           value: 'eager',
+          sync: true,
         },
 
         /**
@@ -160,7 +161,7 @@ export const ScrollMixin = (superClass) =>
      * @protected
      */
     _scrollToFlatIndex(index) {
-      index = Math.min(this._effectiveSize - 1, Math.max(0, index));
+      index = Math.min(this._flatSize - 1, Math.max(0, index));
       this.__virtualizer.scrollToIndex(index);
       this.__scrollIntoViewport(index);
     }

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

@@ -28,6 +28,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         width: {
           type: String,
           value: '58px',
+          sync: true,
         },
 
         /**
@@ -38,6 +39,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         flexGrow: {
           type: Number,
           value: 0,
+          sync: true,
         },
 
         /**
@@ -49,6 +51,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
           type: Boolean,
           value: false,
           notify: true,
+          sync: true,
         },
 
         /**
@@ -59,6 +62,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         autoSelect: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -69,10 +73,14 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         dragSelect: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /** @protected */
-        _indeterminate: Boolean,
+        _indeterminate: {
+          type: Boolean,
+          sync: true,
+        },
 
         /** @protected */
         _selectAllHidden: Boolean,
@@ -181,7 +189,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         // Get the row where the drag started
         const dragStartRow = renderedRows.find((row) => row.contains(event.currentTarget.assignedSlot));
         // Whether to select or deselect the items on drag
-        this.__dragSelect = !this._grid._isSelected(dragStartRow._item);
+        this.__selectOnDrag = !this._grid._isSelected(dragStartRow._item);
         // Store the index of the row where the drag started
         this.__dragStartIndex = dragStartRow.index;
         // Store the item of the row where the drag started
@@ -191,7 +199,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       } else if (event.detail.state === 'end') {
         // if drag start and end stays within the same item, then toggle its state
         if (this.__dragStartItem) {
-          if (this.__dragSelect) {
+          if (this.__selectOnDrag) {
             this._selectItem(this.__dragStartItem);
           } else {
             this._deselectItem(this.__dragStartItem);
@@ -254,7 +262,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
             (hoveredIndex > this.__dragStartIndex && row.index >= this.__dragStartIndex && row.index <= hoveredIndex) ||
             (hoveredIndex < this.__dragStartIndex && row.index <= this.__dragStartIndex && row.index >= hoveredIndex)
           ) {
-            if (this.__dragSelect) {
+            if (this.__selectOnDrag) {
               this._selectItem(row._item);
             } else {
               this._deselectItem(row._item);

package/src/vaadin-grid-selection-column-mixin.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import { GridSelectionColumnBaseMixinClass } from './vaadin-grid-selection-column-base-mixin.js';
+
+/**
+ * Fired when the `selectAll` property changes.
+ */
+export type GridSelectionColumnSelectAllChangedEvent = CustomEvent<{ value: boolean }>;
+
+export interface GridSelectionColumnCustomEventMap {
+  'select-all-changed': GridSelectionColumnSelectAllChangedEvent;
+}
+
+export interface GridSelectionColumnEventMap extends HTMLElementEventMap, GridSelectionColumnCustomEventMap {}
+
+export declare function GridSelectionColumnMixin<TItem, T extends Constructor<HTMLElement>>(
+  superclass: T,
+): Constructor<GridSelectionColumnMixinClass<TItem>> & T;
+
+export declare class GridSelectionColumnMixinClass<TItem> extends GridSelectionColumnBaseMixinClass<TItem> {}