@vaadin/grid 24.3.0-alpha1 → 24.3.0-alpha10

package/src/vaadin-grid-filter-element-mixin.js

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { timeOut } from '@vaadin/component-base/src/async.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin';
+
+registerStyles(
+  'vaadin-grid-filter',
+  css`
+    :host {
+      display: inline-flex;
+      max-width: 100%;
+    }
+
+    ::slotted(*) {
+      width: 100%;
+      box-sizing: border-box;
+    }
+  `,
+  { moduleId: 'vaadin-grid-filter-styles' },
+);
+
+/**
+ * @polymerMixin
+ *
+ * @mixes ControllerMixin
+ */
+export const GridFilterElementMixin = (superClass) =>
+  class extends ControllerMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * JS Path of the property in the item used for filtering the data.
+         */
+        path: {
+          type: String,
+          sync: true,
+        },
+
+        /**
+         * Current filter value.
+         */
+        value: {
+          type: String,
+          notify: true,
+          sync: true,
+        },
+
+        /** @private */
+        _textField: {
+          type: Object,
+          sync: true,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['_filterChanged(path, value, _textField)'];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._filterController = new SlotController(this, '', 'vaadin-text-field', {
+        initializer: (field) => {
+          field.addEventListener('value-changed', (e) => {
+            if (field.__previousValue === undefined && e.detail.value === '') {
+              field.__previousValue = e.detail.value;
+              return;
+            }
+            this.value = e.detail.value;
+          });
+
+          this._textField = field;
+        },
+      });
+      this.addController(this._filterController);
+    }
+
+    /** @private */
+    _filterChanged(path, value, textField) {
+      if (path === undefined || value === undefined || !textField) {
+        return;
+      }
+      if (this._previousValue === undefined && value === '') {
+        return;
+      }
+
+      textField.value = value;
+      this._previousValue = value;
+
+      this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
+        this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));
+      });
+    }
+
+    focus() {
+      if (this._textField) {
+        this._textField.focus();
+      }
+    }
+  };

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

@@ -19,10 +19,10 @@ export const FilterMixin = (superClass) =>
       };
     }
 
-    /** @protected */
-    ready() {
-      super.ready();
-      this.addEventListener('filter-changed', this._filterChanged.bind(this));
+    constructor() {
+      super();
+      this._filterChanged = this._filterChanged.bind(this);
+      this.addEventListener('filter-changed', this._filterChanged);
     }
 
     /** @private */

package/src/vaadin-grid-filter.d.ts

@@ -3,18 +3,11 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 
-/**
- * Fired when the `value` property changes.
- */
-export type GridFilterValueChangedEvent = CustomEvent<{ value: string }>;
-
-export interface GridFilterCustomEventMap {
-  'value-changed': GridFilterValueChangedEvent;
-}
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { GridFilterElementMixin, type GridFilterEventMap } from './vaadin-grid-filter-element-mixin.js';
 
-export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCustomEventMap {}
+export * from './vaadin-grid-filter-element-mixin.js';
 
 /**
  * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -41,17 +34,7 @@ export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCusto
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class GridFilter extends ControllerMixin(HTMLElement) {
-  /**
-   * JS Path of the property in the item used for filtering the data.
-   */
-  path: string | null | undefined;
-
-  /**
-   * Current filter value.
-   */
-  value: string | null | undefined;
-
+declare class GridFilter extends GridFilterElementMixin(ThemableMixin(HTMLElement)) {
   addEventListener<K extends keyof GridFilterEventMap>(
     type: K,
     listener: (this: GridFilter, ev: GridFilterEventMap[K]) => void,

package/src/vaadin-grid-filter.js

@@ -5,11 +5,9 @@
  */
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { timeOut } from '@vaadin/component-base/src/async.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
 
 /**
  * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
@@ -38,93 +36,16 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  *
  * @customElement
  * @extends HTMLElement
+ * @mixes GridFilterElementMixin
  */
-class GridFilter extends ControllerMixin(PolymerElement) {
+class GridFilter extends GridFilterElementMixin(ThemableMixin(PolymerElement)) {
   static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-flex;
-          max-width: 100%;
-        }
-
-        ::slotted(*) {
-          width: 100%;
-          box-sizing: border-box;
-        }
-      </style>
-      <slot></slot>
-    `;
+    return html`<slot></slot>`;
   }
 
   static get is() {
     return 'vaadin-grid-filter';
   }
-
-  static get properties() {
-    return {
-      /**
-       * JS Path of the property in the item used for filtering the data.
-       */
-      path: String,
-
-      /**
-       * Current filter value.
-       */
-      value: {
-        type: String,
-        notify: true,
-      },
-
-      /** @private */
-      _textField: {
-        type: Object,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['_filterChanged(path, value, _textField)'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._filterController = new SlotController(this, '', 'vaadin-text-field', {
-      initializer: (field) => {
-        field.addEventListener('value-changed', (e) => {
-          this.value = e.detail.value;
-        });
-
-        this._textField = field;
-      },
-    });
-    this.addController(this._filterController);
-  }
-
-  /** @private */
-  _filterChanged(path, value, textField) {
-    if (path === undefined || value === undefined || !textField) {
-      return;
-    }
-    if (this._previousValue === undefined && value === '') {
-      return;
-    }
-
-    textField.value = value;
-    this._previousValue = value;
-
-    this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
-      this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));
-    });
-  }
-
-  focus() {
-    if (this._textField) {
-      this._textField.focus();
-    }
-  }
 }
 
 defineCustomElement(GridFilter);

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));
@@ -687,7 +691,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       // If the target focusable is tied to a column that is not visible,
       // find the first visible column and update the target in order to
       // prevent scrolling to the start of the row.
-      if (focusStepTarget && focusStepTarget._column && !this.__isColumnInViewport(focusStepTarget._column)) {
+      if (focusStepTarget && !this.__isHorizontallyInViewport(focusStepTarget)) {
         const firstVisibleColumn = this._getColumnsInOrder().find((column) => this.__isColumnInViewport(column));
         if (firstVisibleColumn) {
           if (focusStepTarget === this._headerFocusable) {
@@ -842,9 +846,12 @@ export const KeyboardNavigationMixin = (superClass) =>
         }
 
         if (cell) {
-          // Fire a public event for cell.
           const context = this.getEventContext(e);
-          cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
+          this.__pendingBodyCellFocus = this.loading && context.section === 'body';
+          if (!this.__pendingBodyCellFocus) {
+            // Fire a cell-focus event for the cell
+            cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
+          }
           this._focusedCell = cell._focusButton || cell;
 
           if (isKeyboardActive() && e.target === cell) {
@@ -858,6 +865,16 @@ export const KeyboardNavigationMixin = (superClass) =>
       this._detectFocusedItemIndex(e);
     }
 
+    /**
+     * @private
+     */
+    __dispatchPendingBodyCellFocus() {
+      // If the body cell focus was pending, dispatch the event once loading is done
+      if (this.__pendingBodyCellFocus && this.shadowRoot.activeElement === this._itemsFocusable) {
+        this._itemsFocusable.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      }
+    }
+
     /**
      * Get the focusable element depending on the current focus mode.
      * It can be a row, a cell, or a focusable div inside a cell.
@@ -954,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`])) {
@@ -972,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

@@ -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
@@ -339,7 +335,10 @@ export const GridMixin = (superClass) =>
         return 0;
       }
 
-      const columnWidth = Math.max(this.__getIntrinsicWidth(col), this.__getDistributedWidth(col.parentElement, col));
+      const columnWidth = Math.max(
+        this.__getIntrinsicWidth(col),
+        this.__getDistributedWidth((col.assignedSlot || col).parentElement, col),
+      );
 
       // We're processing a regular grid-column and not a grid-column-group
       if (!innerColumn) {
@@ -498,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) {
@@ -508,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(
@@ -675,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
@@ -697,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) {
@@ -801,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,
       });
@@ -811,6 +812,7 @@ export const GridMixin = (superClass) =>
     _updateRowStateParts(row, { expanded, selected, detailsOpened }) {
       updateBooleanRowStates(row, {
         expanded,
+        collapsed: this.__isRowExpandable(row),
         selected,
         'details-opened': detailsOpened,
       });
@@ -873,22 +875,9 @@ export const GridMixin = (superClass) =>
       this._resetKeyboardNavigation();
       this._a11yUpdateHeaderRows();
       this._a11yUpdateFooterRows();
-      this.__updateFooterPositioning();
       this.generateCellClassNames();
       this.generateCellPartNames();
-    }
-
-    /** @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`;
-        }
-      }
+      this.__updateHeaderAndFooter();
     }
 
     /**
@@ -926,7 +915,6 @@ export const GridMixin = (superClass) =>
     /** @private */
     _resizeHandler() {
       this._updateDetailsCellHeights();
-      this.__updateFooterPositioning();
       this.__updateHorizontalScrollPosition();
     }
 
@@ -980,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);
       }
@@ -998,19 +986,22 @@ export const GridMixin = (superClass) =>
      * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
      */
     requestContentUpdate() {
-      if (this._columnTree) {
-        // Header and footer renderers
-        this._columnTree.forEach((level) => {
-          level.forEach((column) => {
-            if (column._renderHeaderAndFooter) {
-              column._renderHeaderAndFooter();
-            }
-          });
-        });
+      // Header and footer renderers
+      this.__updateHeaderAndFooter();
 
-        // Body and row details renderers
-        this.__updateVisibleRows();
-      }
+      // Body and row details renderers
+      this.__updateVisibleRows();
+    }
+
+    /** @private */
+    __updateHeaderAndFooter() {
+      (this._columnTree || []).forEach((level) => {
+        level.forEach((column) => {
+          if (column._renderHeaderAndFooter) {
+            column._renderHeaderAndFooter();
+          }
+        });
+      });
     }
 
     /** @protected */