@vaadin/grid 24.3.0-alpha5 → 24.3.0-alpha6

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

@@ -14,12 +14,18 @@ export const GridFilterColumnMixin = (superClass) =>
         /**
          * JS Path of the property in the item used for filtering the data.
          */
-        path: String,
+        path: {
+          type: String,
+          sync: true,
+        },
 
         /**
          * Text to display as the label of the column filter text-field.
          */
-        header: String,
+        header: {
+          type: String,
+          sync: true,
+        },
       };
     }
 

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

@@ -37,7 +37,10 @@ export const GridFilterElementMixin = (superClass) =>
         /**
          * JS Path of the property in the item used for filtering the data.
          */
-        path: String,
+        path: {
+          type: String,
+          sync: true,
+        },
 
         /**
          * Current filter value.
@@ -45,11 +48,13 @@ export const GridFilterElementMixin = (superClass) =>
         value: {
           type: String,
           notify: true,
+          sync: true,
         },
 
         /** @private */
         _textField: {
           type: Object,
+          sync: true,
         },
       };
     }
@@ -65,6 +70,10 @@ export const GridFilterElementMixin = (superClass) =>
       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;
           });
 

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-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,
         },
 
         /**
@@ -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

@@ -86,10 +86,7 @@ export const GridMixin = (superClass) =>
     ),
   ) {
     static get observers() {
-      return [
-        '_columnTreeChanged(_columnTree, _columnTree.*)',
-        '_flatSizeChanged(_flatSize, __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();
         }),
@@ -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
@@ -876,22 +874,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();
     }
 
     /**
@@ -929,7 +914,6 @@ export const GridMixin = (superClass) =>
     /** @private */
     _resizeHandler() {
       this._updateDetailsCellHeights();
-      this.__updateFooterPositioning();
       this.__updateHorizontalScrollPosition();
     }
 
@@ -983,7 +967,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);
       }
@@ -1001,19 +985,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 */

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,
         },
 
         /**

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-mixin.js

@@ -19,6 +19,7 @@ export const SelectionMixin = (superClass) =>
           type: Object,
           notify: true,
           value: () => [],
+          sync: true,
         },
 
         /**
@@ -27,13 +28,13 @@ export const SelectionMixin = (superClass) =>
          */
         __selectedKeys: {
           type: Object,
-          computed: '__computeSelectedKeys(itemIdPath, selectedItems.*)',
+          computed: '__computeSelectedKeys(itemIdPath, selectedItems)',
         },
       };
     }
 
     static get observers() {
-      return ['__selectedItemsChanged(itemIdPath, selectedItems.*)'];
+      return ['__selectedItemsChanged(itemIdPath, selectedItems)'];
     }
 
     /**
@@ -91,7 +92,7 @@ export const SelectionMixin = (superClass) =>
 
     /** @private */
     __computeSelectedKeys(itemIdPath, selectedItems) {
-      const selected = selectedItems.base || [];
+      const selected = selectedItems || [];
       const selectedKeys = new Set();
       selected.forEach((item) => {
         selectedKeys.add(this.getItemId(item));

package/src/vaadin-grid-sort-column-mixin.js

@@ -14,7 +14,10 @@ export const GridSortColumnMixin = (superClass) =>
         /**
          * JS Path of the property in the item used for sorting the data.
          */
-        path: String,
+        path: {
+          type: String,
+          sync: true,
+        },
 
         /**
          * How to sort the data.
@@ -25,6 +28,7 @@ export const GridSortColumnMixin = (superClass) =>
         direction: {
           type: String,
           notify: true,
+          sync: true,
         },
       };
     }

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

@@ -89,6 +89,7 @@ export const GridSorterMixin = (superClass) =>
           reflectToAttribute: true,
           notify: true,
           value: null,
+          sync: true,
         },
 
         /**
@@ -98,6 +99,7 @@ export const GridSorterMixin = (superClass) =>
         _order: {
           type: Number,
           value: null,
+          sync: true,
         },
 
         /** @private */