refactor: introduce grid ResizeMixin for resize observers (#10301)

Author: vursen

packages/grid/src/vaadin-grid-mixin.js

@@ -31,6 +31,7 @@ import {
   updateState,
 } from './vaadin-grid-helpers.js';
 import { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';
+import { ResizeMixin } from './vaadin-grid-resize-mixin.js';
 import { RowDetailsMixin } from './vaadin-grid-row-details-mixin.js';
 import { ScrollMixin } from './vaadin-grid-scroll-mixin.js';
 import { SelectionMixin } from './vaadin-grid-selection-mixin.js';
@@ -57,6 +58,7 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * @mixes EventContextMixin
  * @mixes StylingMixin
  * @mixes DragAndDropMixin
+ * @mixes ResizeMixin
  */
 export const GridMixin = (superClass) =>
   class extends ColumnAutoWidthMixin(
@@ -73,7 +75,7 @@ export const GridMixin = (superClass) =>
                         FilterMixin(
                           ColumnReorderingMixin(
                             ColumnResizingMixin(
-                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(superClass)))),
+                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(ResizeMixin(superClass))))),
                             ),
                           ),
                         ),
@@ -263,25 +265,6 @@ export const GridMixin = (superClass) =>
         __disableHeightPlaceholder: true,
       });
 
-      new ResizeObserver(() => {
-        setTimeout(() => {
-          this.__updateColumnsBodyContentHidden();
-        });
-        // Updating data can change the visibility of the scroll bar. Therefore,
-        // the scroll position has to be recalculated.
-        this.__updateHorizontalScrollPosition();
-      }).observe(this.$.table);
-
-      const minHeightObserver = new ResizeObserver(() =>
-        setTimeout(() => {
-          this.__updateMinHeight();
-        }),
-      );
-
-      minHeightObserver.observe(this.$.header);
-      minHeightObserver.observe(this.$.items);
-      minHeightObserver.observe(this.$.footer);
-
       this._tooltipController = new TooltipController(this);
       this.addController(this._tooltipController);
       this._tooltipController.setManual(true);
@@ -292,6 +275,23 @@ export const GridMixin = (superClass) =>
       });
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('__headerRect') || props.has('__footerRect') || props.has('__itemsRect')) {
+        setTimeout(() => this.__updateMinHeight());
+      }
+
+      if (props.has('__tableRect')) {
+        setTimeout(() => this.__updateColumnsBodyContentHidden());
+
+        // Updating data can change the visibility of the scroll bar. Therefore,
+        // the scroll position has to be recalculated.
+        this.__updateHorizontalScrollPosition();
+      }
+    }
+
     /** @private */
     __getBodyCellCoordinates(cell) {
       if (this.$.items.contains(cell) && cell.localName === 'td') {

packages/grid/src/vaadin-grid-resize-mixin.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 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';
+
+export declare function ResizeMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ResizeMixinClass> & T;
+
+declare class ResizeMixinClass {}

packages/grid/src/vaadin-grid-resize-mixin.js

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin to observe size changes of the grid and its main parts.
+ *
+ * @polymerMixin
+ */
+export const ResizeMixin = (superClass) =>
+  class extends superClass {
+    static get properties() {
+      return {
+        /** @private */
+        __tableRect: Object,
+
+        /** @private */
+        __headerRect: Object,
+
+        /** @private */
+        __itemsRect: Object,
+
+        /** @private */
+        __footerRect: Object,
+      };
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      const resizeObserver = new ResizeObserver((entries) => {
+        const tableEntry = entries.findLast(({ target }) => target === this.$.table);
+        if (tableEntry) {
+          this.__tableRect = tableEntry.contentRect;
+        }
+
+        const headerEntry = entries.findLast(({ target }) => target === this.$.header);
+        if (headerEntry) {
+          this.__headerRect = headerEntry.contentRect;
+        }
+
+        const itemsEntry = entries.findLast(({ target }) => target === this.$.items);
+        if (itemsEntry) {
+          this.__itemsRect = itemsEntry.contentRect;
+        }
+
+        const footerEntry = entries.findLast(({ target }) => target === this.$.footer);
+        if (footerEntry) {
+          this.__footerRect = footerEntry.contentRect;
+        }
+      });
+
+      resizeObserver.observe(this.$.table);
+      resizeObserver.observe(this.$.header);
+      resizeObserver.observe(this.$.items);
+      resizeObserver.observe(this.$.footer);
+    }
+  };

packages/grid/test/typings/grid.types.ts

@@ -23,6 +23,7 @@ import type { ColumnReorderingMixinClass } from '../../src/vaadin-grid-column-re
 import type { DataProviderMixinClass } from '../../src/vaadin-grid-data-provider-mixin';
 import type { DragAndDropMixinClass } from '../../src/vaadin-grid-drag-and-drop-mixin';
 import type { EventContextMixinClass } from '../../src/vaadin-grid-event-context-mixin';
+import type { ResizeMixinClass } from '../../src/vaadin-grid-resize-mixin';
 import type { RowDetailsMixinClass } from '../../src/vaadin-grid-row-details-mixin';
 import type { ScrollMixinClass } from '../../src/vaadin-grid-scroll-mixin';
 import type { GridSelectionColumnBaseMixinClass } from '../../src/vaadin-grid-selection-column-base-mixin';
@@ -85,6 +86,7 @@ assertType<ColumnReorderingMixinClass>(narrowedGrid);
 assertType<EventContextMixinClass<TestGridItem>>(narrowedGrid);
 assertType<StylingMixinClass<TestGridItem>>(narrowedGrid);
 assertType<DragAndDropMixinClass<TestGridItem>>(narrowedGrid);
+assertType<ResizeMixinClass>(narrowedGrid);
 
 narrowedGrid.addEventListener('active-item-changed', (event) => {
   assertType<GridActiveItemChangedEvent<TestGridItem>>(event);