@vaadin/grid 24.2.0-dev.f254716fe → 24.3.0-alpha2

package/src/vaadin-grid-data-provider-mixin.d.ts

@@ -4,6 +4,10 @@
  * 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 type {
+  DataProvider,
+  DataProviderCallback,
+} from '@vaadin/component-base/src/data-provider-controller/data-provider-controller.js';
 import { GridSorterDirection } from './vaadin-grid-sorter.js';
 
 export { GridSorterDirection };
@@ -18,7 +22,7 @@ export interface GridSorterDefinition {
   direction: GridSorterDirection;
 }
 
-export type GridDataProviderCallback<TItem> = (items: TItem[], size?: number) => void;
+export type GridDataProviderCallback<TItem> = DataProviderCallback<TItem>;
 
 export type GridDataProviderParams<TItem> = {
   page: number;
@@ -28,10 +32,7 @@ export type GridDataProviderParams<TItem> = {
   parentItem?: TItem;
 };
 
-export type GridDataProvider<TItem> = (
-  params: GridDataProviderParams<TItem>,
-  callback: GridDataProviderCallback<TItem>,
-) => void;
+export type GridDataProvider<TItem> = DataProvider<TItem, GridDataProviderParams<TItem>>;
 
 export declare function DataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,

package/src/vaadin-grid-data-provider-mixin.js

@@ -4,8 +4,9 @@
  * 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 { DataProviderController } from '@vaadin/component-base/src/data-provider-controller.js';
+import { DataProviderController } from '@vaadin/component-base/src/data-provider-controller/data-provider-controller.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 import { getBodyRowCells, updateCellsPart, updateState } from './vaadin-grid-helpers.js';
 
 /**
@@ -148,10 +149,28 @@ export const DataProviderMixin = (superClass) =>
       this._dataProviderController.addEventListener('page-loaded', this._onDataProviderPageLoaded.bind(this));
     }
 
+    /**
+     * @protected
+     * @deprecated since 24.3 and will be removed in Vaadin 25.
+     */
+    get _cache() {
+      console.warn('<vaadin-grid> The `_cache` property is deprecated and will be removed in Vaadin 25.');
+      return this._dataProviderController.rootCache;
+    }
+
+    /**
+     * @protected
+     * @deprecated since 24.3 and will be removed in Vaadin 25.
+     */
+    get _effectiveSize() {
+      console.warn('<vaadin-grid> The `_effectiveSize` property is deprecated and will be removed in Vaadin 25.');
+      return this._flatSize;
+    }
+
     /** @private */
     _sizeChanged(size) {
       this._dataProviderController.setSize(size);
-      this._effectiveSize = this._dataProviderController.effectiveSize;
+      this._flatSize = this._dataProviderController.flatSize;
     }
 
     /** @private */
@@ -169,18 +188,18 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _getItem(index, el) {
-      if (index >= this._effectiveSize) {
+      if (index >= this._flatSize) {
         return;
       }
 
       el.index = index;
 
-      const { item } = this._dataProviderController.getFlatIndexInfo(index);
+      const { item } = this._dataProviderController.getFlatIndexContext(index);
       if (item) {
         this.__updateLoading(el, false);
         this._updateItem(el, item);
         if (this._isExpanded(item)) {
-          this._dataProviderController.ensureFlatIndexChildrenLoaded(index);
+          this._dataProviderController.ensureFlatIndexHierarchy(index);
         }
       } else {
         this.__updateLoading(el, true);
@@ -210,7 +229,7 @@ export const DataProviderMixin = (superClass) =>
      * @return {!GridItem | !unknown}
      */
     getItemId(item) {
-      return this.itemIdPath ? this.get(this.itemIdPath, item) : item;
+      return this.itemIdPath ? get(this.itemIdPath, item) : item;
     }
 
     /**
@@ -224,8 +243,8 @@ export const DataProviderMixin = (superClass) =>
 
     /** @private */
     _expandedItemsChanged() {
-      this._dataProviderController.recalculateEffectiveSize();
-      this._effectiveSize = this._dataProviderController.effectiveSize;
+      this._dataProviderController.recalculateFlatSize();
+      this._flatSize = this._dataProviderController.flatSize;
       this.__updateVisibleRows();
     }
 
@@ -266,10 +285,21 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _getIndexLevel(index = 0) {
-      const { level } = this._dataProviderController.getFlatIndexInfo(index);
+      const { level } = this._dataProviderController.getFlatIndexContext(index);
       return level;
     }
 
+    /**
+     * @param {number} page
+     * @param {ItemCache} cache
+     * @protected
+     * @deprecated since 24.3 and will be removed in Vaadin 25.
+     */
+    _loadPage(page, cache) {
+      console.warn('<vaadin-grid> The `_loadPage` method is deprecated and will be removed in Vaadin 25.');
+      this._dataProviderController.__loadCachePage(cache, page);
+    }
+
     /** @protected */
     _onDataProviderPageRequested() {
       this._setLoading(true);
@@ -278,11 +308,11 @@ export const DataProviderMixin = (superClass) =>
     /** @protected */
     _onDataProviderPageReceived() {
       // With the new items added, update the cache size and the grid's effective size
-      this._effectiveSize = this._dataProviderController.effectiveSize;
+      this._flatSize = this._dataProviderController.flatSize;
 
       // After updating the cache, check if some of the expanded items should have sub-caches loaded
       this._getRenderedRows().forEach((row) => {
-        this._dataProviderController.ensureFlatIndexChildrenLoaded(row.index);
+        this._dataProviderController.ensureFlatIndexHierarchy(row.index);
       });
 
       this._hasData = true;
@@ -295,7 +325,7 @@ export const DataProviderMixin = (superClass) =>
         this._setLoading(false);
 
         this._getRenderedRows().forEach((row) => {
-          const { item } = this._dataProviderController.getFlatIndexInfo(row.index);
+          const { item } = this._dataProviderController.getFlatIndexContext(row.index);
           if (item) {
             this._getItem(row.index, row);
           }
@@ -317,22 +347,24 @@ export const DataProviderMixin = (superClass) =>
       this._dataProviderController.clearCache();
       this._hasData = false;
       this.__updateVisibleRows();
-      this._ensureFirstPageLoaded();
+
+      if (!this._flatSize) {
+        this._dataProviderController.loadFirstPage();
+      }
     }
 
     /** @private */
     _pageSizeChanged(pageSize, oldPageSize) {
       this._dataProviderController.setPageSize(pageSize);
+
       if (oldPageSize !== undefined && pageSize !== oldPageSize) {
-        this._hasData = false;
-        this.__updateVisibleRows();
-        this._ensureFirstPageLoaded();
+        this.clearCache();
       }
     }
 
     /** @protected */
     _checkSize() {
-      if (this.size === undefined && this._effectiveSize === 0) {
+      if (this.size === undefined && this._flatSize === 0) {
         console.warn(
           'The <vaadin-grid> needs the total number of items in' +
             ' order to display rows, which you can specify either by setting' +
@@ -347,8 +379,7 @@ export const DataProviderMixin = (superClass) =>
       this._dataProviderController.setDataProvider(dataProvider ? dataProvider.bind(this) : null);
 
       if (oldDataProvider !== undefined) {
-        this._hasData = false;
-        this.__updateVisibleRows();
+        this.clearCache();
       }
 
       this._ensureFirstPageLoaded();
@@ -365,7 +396,7 @@ export const DataProviderMixin = (superClass) =>
       if (!this._hasData) {
         // Load data before adding rows to make sure they have content when
         // rendered for the first time.
-        this._dataProviderController.ensureFirstPageLoaded();
+        this._dataProviderController.loadFirstPage();
       }
     }
 

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -211,7 +211,7 @@ export const DragAndDropMixin = (superClass) =>
 
         let row = e.composedPath().find((node) => node.localName === 'tr');
 
-        if (!this._effectiveSize || this.dropMode === DropMode.ON_GRID) {
+        if (!this._flatSize || this.dropMode === DropMode.ON_GRID) {
           // The grid is empty or "on-grid" drop mode was used, always default to "empty"
           this._dropLocation = DropLocation.EMPTY;
         } else if (!row || row.parentNode !== this.$.items) {

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -112,7 +112,7 @@ export const DynamicColumnsMixin = (superClass) =>
         if (hasColumnElements(info.addedNodes) || hasColumnElements(info.removedNodes)) {
           const allRemovedCells = info.removedNodes.flatMap((c) => c._allCells);
           const filterNotConnected = (element) =>
-            allRemovedCells.filter((cell) => cell._content.contains(element)).length;
+            allRemovedCells.filter((cell) => cell && cell._content.contains(element)).length;
 
           this.__removeSorters(this._sorters.filter(filterNotConnected));
           this.__removeFilters(this._filters.filter(filterNotConnected));

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-filter.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { GridColumn } from './vaadin-grid-column.js';
 
 /**
@@ -18,6 +19,9 @@ import { GridColumn } from './vaadin-grid-column.js';
  *  <vaadin-grid-column>
  *    ...
  * ```
+ *
+ * @customElement
+ * @extends GridColumn
  */
 class GridFilterColumn extends GridColumn {
   static get is() {
@@ -114,6 +118,6 @@ class GridFilterColumn extends GridColumn {
   }
 }
 
-customElements.define(GridFilterColumn.is, GridFilterColumn);
+defineCustomElement(GridFilterColumn);
 
 export { GridFilterColumn };

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

@@ -0,0 +1,34 @@
+/**
+ * @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 type { ControllerMixinClass } 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;
+}
+
+export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCustomEventMap {}
+
+export declare function GridFilterElementMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ControllerMixinClass> & Constructor<GridFilterElementMixinClass> & T;
+
+declare class GridFilterElementMixinClass {
+  /**
+   * JS Path of the property in the item used for filtering the data.
+   */
+  path: string | null | undefined;
+
+  /**
+   * Current filter value.
+   */
+  value: string | null | undefined;
+}

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

@@ -0,0 +1,99 @@
+/**
+ * @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: 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();
+      }
+    }
+  };

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,10 +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 { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.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,
@@ -35,96 +34,20 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  *
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
+ * @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();
-    }
-  }
 }
 
-customElements.define(GridFilter.is, GridFilter);
+defineCustomElement(GridFilter);
 
 export { GridFilter };

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

@@ -5,6 +5,7 @@
  */
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 
 /**
  * @polymerMixin
@@ -266,7 +267,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __isRowExpandable(row) {
       if (this.itemHasChildrenPath) {
         const item = row._item;
-        return item && this.get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
+        return item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
       }
     }
 
@@ -442,7 +443,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));
@@ -475,7 +476,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         // Row details navigation logic
         if (activeRowGroup === this.$.items) {
           const item = activeRow._item;
-          const { item: dstItem } = this._dataProviderController.getFlatIndexInfo(dstRowIndex);
+          const { item: dstItem } = this._dataProviderController.getFlatIndexContext(dstRowIndex);
           // Should we navigate to row details?
           if (isRowDetails) {
             dstIsRowDetails = dy === 0;
@@ -681,7 +682,26 @@ export const KeyboardNavigationMixin = (superClass) =>
         }
       }
 
-      return tabOrder[index];
+      let focusStepTarget = tabOrder[index];
+
+      // 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)) {
+        const firstVisibleColumn = this._getColumnsInOrder().find((column) => this.__isColumnInViewport(column));
+        if (firstVisibleColumn) {
+          if (focusStepTarget === this._headerFocusable) {
+            focusStepTarget = firstVisibleColumn._headerCell;
+          } else if (focusStepTarget === this._itemsFocusable) {
+            const rowIndex = focusStepTarget._column._cells.indexOf(focusStepTarget);
+            focusStepTarget = firstVisibleColumn._cells[rowIndex];
+          } else if (focusStepTarget === this._footerFocusable) {
+            focusStepTarget = firstVisibleColumn._footerCell;
+          }
+        }
+      }
+
+      return focusStepTarget;
     }
 
     /** @private */