@vaadin/grid 24.3.0-alpha1 → 24.3.0-alpha10

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')) {
@@ -154,6 +153,13 @@ export const RowDetailsMixin = (superClass) =>
         return;
       }
 
+      this.__updateDetailsRowPadding(row, cell);
+      // Ensure the row has correct padding after frame (the resize observer might miss it)
+      requestAnimationFrame(() => this.__updateDetailsRowPadding(row, cell));
+    }
+
+    /** @private */
+    __updateDetailsRowPadding(row, cell) {
       if (cell.hidden) {
         row.style.removeProperty('padding-bottom');
       } else {

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);
     }
@@ -320,9 +321,14 @@ export const ScrollMixin = (superClass) =>
       }
 
       // Check if the column's sizer cell is inside the viewport
+      return this.__isHorizontallyInViewport(column._sizerCell);
+    }
+
+    /** @private */
+    __isHorizontallyInViewport(element) {
       return (
-        column._sizerCell.offsetLeft + column._sizerCell.offsetWidth >= this._scrollLeft &&
-        column._sizerCell.offsetLeft <= this._scrollLeft + this.clientWidth
+        element.offsetLeft + element.offsetWidth >= this._scrollLeft &&
+        element.offsetLeft <= this._scrollLeft + this.clientWidth
       );
     }
 

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> {}

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

@@ -0,0 +1,194 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-base-mixin.js';
+
+/**
+ * @polymerMixin
+ */
+export const GridSelectionColumnMixin = (superClass) =>
+  class extends GridSelectionColumnBaseMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * The previous state of activeItem. When activeItem turns to `null`,
+         * previousActiveItem will have an Object with just unselected activeItem
+         * @private
+         */
+        __previousActiveItem: Object,
+      };
+    }
+
+    static get observers() {
+      return ['__onSelectAllChanged(selectAll)'];
+    }
+
+    constructor() {
+      super();
+
+      this.__boundOnActiveItemChanged = this.__onActiveItemChanged.bind(this);
+      this.__boundOnDataProviderChanged = this.__onDataProviderChanged.bind(this);
+      this.__boundOnSelectedItemsChanged = this.__onSelectedItemsChanged.bind(this);
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      this._grid.removeEventListener('active-item-changed', this.__boundOnActiveItemChanged);
+      this._grid.removeEventListener('data-provider-changed', this.__boundOnDataProviderChanged);
+      this._grid.removeEventListener('filter-changed', this.__boundOnSelectedItemsChanged);
+      this._grid.removeEventListener('selected-items-changed', this.__boundOnSelectedItemsChanged);
+
+      super.disconnectedCallback();
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      if (this._grid) {
+        this._grid.addEventListener('active-item-changed', this.__boundOnActiveItemChanged);
+        this._grid.addEventListener('data-provider-changed', this.__boundOnDataProviderChanged);
+        this._grid.addEventListener('filter-changed', this.__boundOnSelectedItemsChanged);
+        this._grid.addEventListener('selected-items-changed', this.__boundOnSelectedItemsChanged);
+      }
+    }
+
+    /** @private */
+    __onSelectAllChanged(selectAll) {
+      if (selectAll === undefined || !this._grid) {
+        return;
+      }
+
+      if (!this.__selectAllInitialized) {
+        // The initial value for selectAll property was applied, avoid clearing pre-selected items
+        this.__selectAllInitialized = true;
+        return;
+      }
+
+      if (this._selectAllChangeLock) {
+        return;
+      }
+
+      if (selectAll && this.__hasArrayDataProvider()) {
+        this.__withFilteredItemsArray((items) => {
+          this._grid.selectedItems = items;
+        });
+      } else {
+        this._grid.selectedItems = [];
+      }
+    }
+
+    /**
+     * Return true if array `a` contains all the items in `b`
+     * We need this when sorting or to preserve selection after filtering.
+     * @private
+     */
+    __arrayContains(a, b) {
+      return Array.isArray(a) && Array.isArray(b) && b.every((i) => a.includes(i));
+    }
+
+    /**
+     * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+     * selecting all items.
+     *
+     * @protected
+     * @override
+     */
+    _selectAll() {
+      this.selectAll = true;
+    }
+
+    /**
+     * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+     * deselecting all items.
+     *
+     * @protected
+     * @override
+     */
+    _deselectAll() {
+      this.selectAll = false;
+    }
+
+    /**
+     * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+     * selecting an item.
+     *
+     * @param {Object} item the item to select
+     * @protected
+     * @override
+     */
+    _selectItem(item) {
+      this._grid.selectItem(item);
+    }
+
+    /**
+     * Override a method from `GridSelectionColumnBaseMixin` to handle the user
+     * deselecting an item.
+     *
+     * @param {Object} item the item to deselect
+     * @protected
+     * @override
+     */
+    _deselectItem(item) {
+      this._grid.deselectItem(item);
+    }
+
+    /** @private */
+    __onActiveItemChanged(e) {
+      const activeItem = e.detail.value;
+      if (this.autoSelect) {
+        const item = activeItem || this.__previousActiveItem;
+        if (item) {
+          this._grid._toggleItem(item);
+        }
+      }
+      this.__previousActiveItem = activeItem;
+    }
+
+    /** @private */
+    __hasArrayDataProvider() {
+      return Array.isArray(this._grid.items) && !!this._grid.dataProvider;
+    }
+
+    /** @private */
+    __onSelectedItemsChanged() {
+      this._selectAllChangeLock = true;
+      if (this.__hasArrayDataProvider()) {
+        this.__withFilteredItemsArray((items) => {
+          if (!this._grid.selectedItems.length) {
+            this.selectAll = false;
+            this._indeterminate = false;
+          } else if (this.__arrayContains(this._grid.selectedItems, items)) {
+            this.selectAll = true;
+            this._indeterminate = false;
+          } else {
+            this.selectAll = false;
+            this._indeterminate = true;
+          }
+        });
+      }
+      this._selectAllChangeLock = false;
+    }
+
+    /** @private */
+    __onDataProviderChanged() {
+      this._selectAllHidden = !Array.isArray(this._grid.items);
+    }
+
+    /**
+     * Assuming the grid uses an items array data provider, fetches all the filtered items
+     * from the data provider and invokes the callback with the resulting array.
+     *
+     * @private
+     */
+    __withFilteredItemsArray(callback) {
+      const params = {
+        page: 0,
+        pageSize: Infinity,
+        sortOrders: [],
+        filters: this._grid._mapFilters(),
+      };
+      this._grid.dataProvider(params, (items) => callback(items));
+    }
+  };

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

@@ -4,19 +4,14 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';
-import { GridColumn } from './vaadin-grid-column.js';
-import type { GridSelectionColumnBaseMixinClass } from './vaadin-grid-selection-column-base-mixin.js';
+import type { GridColumnMixin } from './vaadin-grid-column.js';
+import type { GridColumn } from './vaadin-grid-column.js';
+import type {
+  GridSelectionColumnEventMap,
+  GridSelectionColumnMixinClass,
+} from './vaadin-grid-selection-column-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 * from './vaadin-grid-selection-column-mixin.js';
 
 /**
  * `<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`
@@ -39,10 +34,13 @@ export interface GridSelectionColumnEventMap extends HTMLElementEventMap, GridSe
  * selection for all the items at once.
  *
  * __The default content can also be overridden__
- *
- * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
  */
-declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TItem> {
+declare class GridSelectionColumn<TItem = GridDefaultItem> extends HTMLElement {}
+
+interface GridSelectionColumn<TItem = GridDefaultItem>
+  extends GridSelectionColumnMixinClass<TItem>,
+    GridColumnMixin<TItem, GridColumn<TItem>>,
+    GridColumn<TItem> {
   addEventListener<K extends keyof GridSelectionColumnEventMap>(
     type: K,
     listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
@@ -56,8 +54,6 @@ declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TI
   ): void;
 }
 
-interface GridSelectionColumn<TItem = GridDefaultItem> extends GridSelectionColumnBaseMixinClass<TItem> {}
-
 declare global {
   interface HTMLElementTagNameMap {
     'vaadin-grid-selection-column': GridSelectionColumn<GridDefaultItem>;

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

@@ -6,7 +6,7 @@
 import '@vaadin/checkbox/src/vaadin-checkbox.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
-import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-base-mixin.js';
+import { GridSelectionColumnMixin } from './vaadin-grid-selection-column-mixin.js';
 
 /**
  * `<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`
@@ -31,196 +31,14 @@ import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-bas
  * __The default content can also be overridden__
  *
  * @customElement
- * @extends GridColumn
- * @mixes GridSelectionColumnBaseMixin
  * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
+ * @extends GridColumn
+ * @mixes GridSelectionColumnMixin
  */
-class GridSelectionColumn extends GridSelectionColumnBaseMixin(GridColumn) {
+class GridSelectionColumn extends GridSelectionColumnMixin(GridColumn) {
   static get is() {
     return 'vaadin-grid-selection-column';
   }
-
-  static get properties() {
-    return {
-      /**
-       * The previous state of activeItem. When activeItem turns to `null`,
-       * previousActiveItem will have an Object with just unselected activeItem
-       * @private
-       */
-      __previousActiveItem: Object,
-    };
-  }
-
-  static get observers() {
-    return ['__onSelectAllChanged(selectAll)'];
-  }
-
-  constructor() {
-    super();
-
-    this.__boundOnActiveItemChanged = this.__onActiveItemChanged.bind(this);
-    this.__boundOnDataProviderChanged = this.__onDataProviderChanged.bind(this);
-    this.__boundOnSelectedItemsChanged = this.__onSelectedItemsChanged.bind(this);
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    this._grid.removeEventListener('active-item-changed', this.__boundOnActiveItemChanged);
-    this._grid.removeEventListener('data-provider-changed', this.__boundOnDataProviderChanged);
-    this._grid.removeEventListener('filter-changed', this.__boundOnSelectedItemsChanged);
-    this._grid.removeEventListener('selected-items-changed', this.__boundOnSelectedItemsChanged);
-
-    super.disconnectedCallback();
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    if (this._grid) {
-      this._grid.addEventListener('active-item-changed', this.__boundOnActiveItemChanged);
-      this._grid.addEventListener('data-provider-changed', this.__boundOnDataProviderChanged);
-      this._grid.addEventListener('filter-changed', this.__boundOnSelectedItemsChanged);
-      this._grid.addEventListener('selected-items-changed', this.__boundOnSelectedItemsChanged);
-    }
-  }
-
-  /** @private */
-  __onSelectAllChanged(selectAll) {
-    if (selectAll === undefined || !this._grid) {
-      return;
-    }
-
-    if (!this.__selectAllInitialized) {
-      // The initial value for selectAll property was applied, avoid clearing pre-selected items
-      this.__selectAllInitialized = true;
-      return;
-    }
-
-    if (this._selectAllChangeLock) {
-      return;
-    }
-
-    if (selectAll && this.__hasArrayDataProvider()) {
-      this.__withFilteredItemsArray((items) => {
-        this._grid.selectedItems = items;
-      });
-    } else {
-      this._grid.selectedItems = [];
-    }
-  }
-
-  /**
-   * Return true if array `a` contains all the items in `b`
-   * We need this when sorting or to preserve selection after filtering.
-   * @private
-   */
-  __arrayContains(a, b) {
-    return Array.isArray(a) && Array.isArray(b) && b.every((i) => a.includes(i));
-  }
-
-  /**
-   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
-   * selecting all items.
-   *
-   * @protected
-   * @override
-   */
-  _selectAll() {
-    this.selectAll = true;
-  }
-
-  /**
-   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
-   * deselecting all items.
-   *
-   * @protected
-   * @override
-   */
-  _deselectAll() {
-    this.selectAll = false;
-  }
-
-  /**
-   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
-   * selecting an item.
-   *
-   * @param {Object} item the item to select
-   * @protected
-   * @override
-   */
-  _selectItem(item) {
-    this._grid.selectItem(item);
-  }
-
-  /**
-   * Override a method from `GridSelectionColumnBaseMixin` to handle the user
-   * deselecting an item.
-   *
-   * @param {Object} item the item to deselect
-   * @protected
-   * @override
-   */
-  _deselectItem(item) {
-    this._grid.deselectItem(item);
-  }
-
-  /** @private */
-  __onActiveItemChanged(e) {
-    const activeItem = e.detail.value;
-    if (this.autoSelect) {
-      const item = activeItem || this.__previousActiveItem;
-      if (item) {
-        this._grid._toggleItem(item);
-      }
-    }
-    this.__previousActiveItem = activeItem;
-  }
-
-  /** @private */
-  __hasArrayDataProvider() {
-    return Array.isArray(this._grid.items) && !!this._grid.dataProvider;
-  }
-
-  /** @private */
-  __onSelectedItemsChanged() {
-    this._selectAllChangeLock = true;
-    if (this.__hasArrayDataProvider()) {
-      this.__withFilteredItemsArray((items) => {
-        if (!this._grid.selectedItems.length) {
-          this.selectAll = false;
-          this._indeterminate = false;
-        } else if (this.__arrayContains(this._grid.selectedItems, items)) {
-          this.selectAll = true;
-          this._indeterminate = false;
-        } else {
-          this.selectAll = false;
-          this._indeterminate = true;
-        }
-      });
-    }
-    this._selectAllChangeLock = false;
-  }
-
-  /** @private */
-  __onDataProviderChanged() {
-    this._selectAllHidden = !Array.isArray(this._grid.items);
-  }
-
-  /**
-   * Assuming the grid uses an items array data provider, fetches all the filtered items
-   * from the data provider and invokes the callback with the resulting array.
-   *
-   * @private
-   */
-  __withFilteredItemsArray(callback) {
-    const params = {
-      page: 0,
-      pageSize: Infinity,
-      sortOrders: [],
-      filters: this._grid._mapFilters(),
-    };
-    this._grid.dataProvider(params, (items) => callback(items));
-  }
 }
 
 defineCustomElement(GridSelectionColumn);

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));