@vaadin/grid 24.6.5 → 24.7.0-alpha10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/package.json +12 -12
  2. package/src/all-imports.js +1 -1
  3. package/src/lit/column-renderer-directives.d.ts +1 -1
  4. package/src/lit/column-renderer-directives.js +1 -1
  5. package/src/lit/renderer-directives.d.ts +1 -1
  6. package/src/lit/renderer-directives.js +1 -1
  7. package/src/lit-all-imports.js +1 -1
  8. package/src/vaadin-grid-a11y-mixin.d.ts +1 -1
  9. package/src/vaadin-grid-a11y-mixin.js +1 -1
  10. package/src/vaadin-grid-active-item-mixin.d.ts +1 -1
  11. package/src/vaadin-grid-active-item-mixin.js +1 -1
  12. package/src/vaadin-grid-array-data-provider-mixin.d.ts +1 -1
  13. package/src/vaadin-grid-array-data-provider-mixin.js +1 -1
  14. package/src/vaadin-grid-column-auto-width-mixin.d.ts +17 -0
  15. package/src/vaadin-grid-column-auto-width-mixin.js +307 -0
  16. package/src/vaadin-grid-column-group-mixin.d.ts +1 -1
  17. package/src/vaadin-grid-column-group-mixin.js +2 -1
  18. package/src/vaadin-grid-column-group.d.ts +1 -1
  19. package/src/vaadin-grid-column-group.js +1 -1
  20. package/src/vaadin-grid-column-mixin.d.ts +1 -1
  21. package/src/vaadin-grid-column-mixin.js +9 -6
  22. package/src/vaadin-grid-column-reordering-mixin.d.ts +1 -1
  23. package/src/vaadin-grid-column-reordering-mixin.js +1 -1
  24. package/src/vaadin-grid-column-resizing-mixin.js +1 -1
  25. package/src/vaadin-grid-column.d.ts +1 -1
  26. package/src/vaadin-grid-column.js +1 -1
  27. package/src/vaadin-grid-data-provider-mixin.d.ts +1 -1
  28. package/src/vaadin-grid-data-provider-mixin.js +1 -1
  29. package/src/vaadin-grid-drag-and-drop-mixin.d.ts +1 -1
  30. package/src/vaadin-grid-drag-and-drop-mixin.js +3 -11
  31. package/src/vaadin-grid-dynamic-columns-mixin.js +5 -11
  32. package/src/vaadin-grid-event-context-mixin.d.ts +1 -1
  33. package/src/vaadin-grid-event-context-mixin.js +1 -1
  34. package/src/vaadin-grid-filter-column-mixin.d.ts +1 -1
  35. package/src/vaadin-grid-filter-column-mixin.js +1 -1
  36. package/src/vaadin-grid-filter-column.d.ts +1 -1
  37. package/src/vaadin-grid-filter-column.js +1 -1
  38. package/src/vaadin-grid-filter-element-mixin.d.ts +1 -1
  39. package/src/vaadin-grid-filter-element-mixin.js +1 -1
  40. package/src/vaadin-grid-filter-mixin.js +1 -1
  41. package/src/vaadin-grid-filter.d.ts +1 -1
  42. package/src/vaadin-grid-filter.js +1 -1
  43. package/src/vaadin-grid-helpers.js +1 -1
  44. package/src/vaadin-grid-keyboard-navigation-mixin.js +1 -1
  45. package/src/vaadin-grid-mixin.d.ts +11 -6
  46. package/src/vaadin-grid-mixin.js +18 -243
  47. package/src/vaadin-grid-row-details-mixin.d.ts +1 -1
  48. package/src/vaadin-grid-row-details-mixin.js +1 -1
  49. package/src/vaadin-grid-scroll-mixin.d.ts +1 -1
  50. package/src/vaadin-grid-scroll-mixin.js +1 -1
  51. package/src/vaadin-grid-selection-column-base-mixin.d.ts +6 -1
  52. package/src/vaadin-grid-selection-column-base-mixin.js +32 -1
  53. package/src/vaadin-grid-selection-column-mixin.d.ts +1 -1
  54. package/src/vaadin-grid-selection-column-mixin.js +19 -1
  55. package/src/vaadin-grid-selection-column.d.ts +1 -1
  56. package/src/vaadin-grid-selection-column.js +1 -1
  57. package/src/vaadin-grid-selection-mixin.d.ts +1 -1
  58. package/src/vaadin-grid-selection-mixin.js +11 -1
  59. package/src/vaadin-grid-sort-column-mixin.d.ts +1 -1
  60. package/src/vaadin-grid-sort-column-mixin.js +1 -1
  61. package/src/vaadin-grid-sort-column.d.ts +1 -1
  62. package/src/vaadin-grid-sort-column.js +1 -1
  63. package/src/vaadin-grid-sort-mixin.d.ts +1 -1
  64. package/src/vaadin-grid-sort-mixin.js +1 -1
  65. package/src/vaadin-grid-sorter-mixin.d.ts +1 -1
  66. package/src/vaadin-grid-sorter-mixin.js +2 -1
  67. package/src/vaadin-grid-sorter.d.ts +1 -1
  68. package/src/vaadin-grid-sorter.js +1 -1
  69. package/src/vaadin-grid-styles.js +3 -5
  70. package/src/vaadin-grid-styling-mixin.d.ts +1 -1
  71. package/src/vaadin-grid-styling-mixin.js +1 -1
  72. package/src/vaadin-grid-tree-column-mixin.d.ts +1 -1
  73. package/src/vaadin-grid-tree-column-mixin.js +1 -5
  74. package/src/vaadin-grid-tree-column.d.ts +1 -1
  75. package/src/vaadin-grid-tree-column.js +1 -1
  76. package/src/vaadin-grid-tree-toggle-mixin.d.ts +1 -1
  77. package/src/vaadin-grid-tree-toggle-mixin.js +1 -1
  78. package/src/vaadin-grid-tree-toggle.d.ts +1 -1
  79. package/src/vaadin-grid-tree-toggle.js +1 -1
  80. package/src/vaadin-grid.d.ts +2 -1
  81. package/src/vaadin-grid.js +1 -1
  82. package/src/vaadin-lit-grid-column-group.js +1 -1
  83. package/src/vaadin-lit-grid-column.js +1 -1
  84. package/src/vaadin-lit-grid-filter-column.js +1 -1
  85. package/src/vaadin-lit-grid-filter.js +1 -1
  86. package/src/vaadin-lit-grid-selection-column.js +1 -1
  87. package/src/vaadin-lit-grid-sort-column.js +1 -1
  88. package/src/vaadin-lit-grid-sorter.js +1 -1
  89. package/src/vaadin-lit-grid-tree-column.js +1 -1
  90. package/src/vaadin-lit-grid-tree-toggle.js +1 -1
  91. package/src/vaadin-lit-grid.js +4 -4
  92. package/theme/lumo/vaadin-grid-sorter-styles.js +0 -1
  93. package/theme/material/vaadin-grid-sorter-styles.js +0 -1
  94. package/web-types.json +8 -4
  95. package/web-types.lit.json +11 -4
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { isChrome, isSafari } from '@vaadin/component-base/src/browser-utils.js';
@@ -25,9 +25,6 @@ const DropLocation = {
25
25
  EMPTY: 'empty',
26
26
  };
27
27
 
28
- // Detects if the browser doesn't support HTML5 Drag & Drop API (and falls back to the @vaadin/vaadin-mobile-drag-drop polyfill)
29
- const usesDnDPolyfill = !('draggable' in document.createElement('div'));
30
-
31
28
  /**
32
29
  * @polymerMixin
33
30
  */
@@ -178,13 +175,8 @@ export const DragAndDropMixin = (superClass) =>
178
175
 
179
176
  const rowRect = row.getBoundingClientRect();
180
177
 
181
- if (usesDnDPolyfill) {
182
- // The polyfill drag image is automatically centered so there is no need to adjust the position
183
- e.dataTransfer.setDragImage(row);
184
- } else {
185
- // The native drag image needs to be shifted manually to compensate for the touch position offset
186
- e.dataTransfer.setDragImage(row, e.clientX - rowRect.left, e.clientY - rowRect.top);
187
- }
178
+ // The native drag image needs to be shifted manually to compensate for the touch position offset
179
+ e.dataTransfer.setDragImage(row, e.clientX - rowRect.left, e.clientY - rowRect.top);
188
180
 
189
181
  let rows = [row];
190
182
  if (this._isSelected(row._item)) {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
@@ -36,7 +36,10 @@ export const DynamicColumnsMixin = (superClass) =>
36
36
  /**
37
37
  * @protected
38
38
  */
39
- _columnTree: Object,
39
+ _columnTree: {
40
+ type: Object,
41
+ sync: true,
42
+ },
40
43
  };
41
44
  }
42
45
 
@@ -100,15 +103,6 @@ export const DynamicColumnsMixin = (superClass) =>
100
103
  const columnTree = this._getColumnTree();
101
104
 
102
105
  if (!arrayEquals(columnTree, this._columnTree)) {
103
- // Request a synchronoys update for each column
104
- columnTree.forEach((columnArray) => {
105
- columnArray.forEach((column) => {
106
- if (column.performUpdate) {
107
- column.performUpdate();
108
- }
109
- });
110
- });
111
-
112
106
  this._columnTree = columnTree;
113
107
  }
114
108
  }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
 
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
 
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { GridDefaultItem } from './vaadin-grid.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import './vaadin-grid-filter.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { timeOut } from '@vaadin/component-base/src/async.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
 
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
 
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import '@vaadin/text-field/src/vaadin-text-field.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { microTask } from '@vaadin/component-base/src/async.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -9,6 +9,7 @@ import type { A11yMixinClass } from './vaadin-grid-a11y-mixin.js';
9
9
  import type { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
10
10
  import type { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
11
11
  import type { GridBodyRenderer, GridColumn, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
12
+ import type { ColumnAutoWidthMixinClass } from './vaadin-grid-column-auto-width-mixin.js';
12
13
  import type { ColumnReorderingMixinClass } from './vaadin-grid-column-reordering-mixin.js';
13
14
  import type {
14
15
  DataProviderMixinClass,
@@ -98,6 +99,11 @@ export type GridDataProviderChangedEvent<TItem> = CustomEvent<{ value: GridDataP
98
99
  */
99
100
  export type GridExpandedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
100
101
 
102
+ /**
103
+ * Fired when the user selects or deselects an item through the selection column.
104
+ */
105
+ export type GridItemToggleEvent<TItem> = CustomEvent<{ item: TItem; selected: boolean; shiftKey: boolean }>;
106
+
101
107
  /**
102
108
  * Fired when starting to drag grid rows.
103
109
  */
@@ -157,6 +163,8 @@ export interface GridCustomEventMap<TItem> {
157
163
  'selected-items-changed': GridSelectedItemsChangedEvent<TItem>;
158
164
 
159
165
  'size-changed': GridSizeChangedEvent;
166
+
167
+ 'item-toggle': GridItemToggleEvent<TItem>;
160
168
  }
161
169
 
162
170
  export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEventMap<TItem> {}
@@ -165,6 +173,7 @@ export declare function GridMixin<TItem, T extends Constructor<HTMLElement>>(
165
173
  base: T,
166
174
  ): Constructor<A11yMixinClass> &
167
175
  Constructor<ActiveItemMixinClass<TItem>> &
176
+ Constructor<ColumnAutoWidthMixinClass> &
168
177
  Constructor<ArrayDataProviderMixinClass<TItem>> &
169
178
  Constructor<ColumnReorderingMixinClass> &
170
179
  Constructor<DataProviderMixinClass<TItem>> &
@@ -184,6 +193,7 @@ export interface GridMixinClass<TItem>
184
193
  A11yMixinClass,
185
194
  ActiveItemMixinClass<TItem>,
186
195
  ArrayDataProviderMixinClass<TItem>,
196
+ ColumnAutoWidthMixinClass,
187
197
  DataProviderMixinClass<TItem>,
188
198
  RowDetailsMixinClass<TItem>,
189
199
  ScrollMixinClass,
@@ -202,11 +212,6 @@ export interface GridMixinClass<TItem>
202
212
  */
203
213
  allRowsVisible: boolean;
204
214
 
205
- /**
206
- * Updates the `width` of all columns which have `autoWidth` set to `true`.
207
- */
208
- recalculateColumnWidths(): void;
209
-
210
215
  /**
211
216
  * Requests an update for the content of cells.
212
217
  *
@@ -1,9 +1,8 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
7
6
  import { TabindexMixin } from '@vaadin/a11y-base/src/tabindex-mixin.js';
8
7
  import { animationFrame, microTask } from '@vaadin/component-base/src/async.js';
9
8
  import {
@@ -24,6 +23,7 @@ import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
24
23
  import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
25
24
  import { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';
26
25
  import { ArrayDataProviderMixin } from './vaadin-grid-array-data-provider-mixin.js';
26
+ import { ColumnAutoWidthMixin } from './vaadin-grid-column-auto-width-mixin.js';
27
27
  import { ColumnReorderingMixin } from './vaadin-grid-column-reordering-mixin.js';
28
28
  import { ColumnResizingMixin } from './vaadin-grid-column-resizing-mixin.js';
29
29
  import { DataProviderMixin } from './vaadin-grid-data-provider-mixin.js';
@@ -67,20 +67,22 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
67
67
  * @mixes DragAndDropMixin
68
68
  */
69
69
  export const GridMixin = (superClass) =>
70
- class extends ArrayDataProviderMixin(
71
- DataProviderMixin(
72
- DynamicColumnsMixin(
73
- ActiveItemMixin(
74
- ScrollMixin(
75
- SelectionMixin(
76
- SortMixin(
77
- RowDetailsMixin(
78
- KeyboardNavigationMixin(
79
- A11yMixin(
80
- FilterMixin(
81
- ColumnReorderingMixin(
82
- ColumnResizingMixin(
83
- EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(superClass)))),
70
+ class extends ColumnAutoWidthMixin(
71
+ ArrayDataProviderMixin(
72
+ DataProviderMixin(
73
+ DynamicColumnsMixin(
74
+ ActiveItemMixin(
75
+ ScrollMixin(
76
+ SelectionMixin(
77
+ SortMixin(
78
+ RowDetailsMixin(
79
+ KeyboardNavigationMixin(
80
+ A11yMixin(
81
+ FilterMixin(
82
+ ColumnReorderingMixin(
83
+ ColumnResizingMixin(
84
+ EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(superClass)))),
85
+ ),
84
86
  ),
85
87
  ),
86
88
  ),
@@ -144,12 +146,6 @@ export const GridMixin = (superClass) =>
144
146
  reflectToAttribute: true,
145
147
  },
146
148
 
147
- /** @private */
148
- __pendingRecalculateColumnWidths: {
149
- type: Boolean,
150
- value: true,
151
- },
152
-
153
149
  /** @private */
154
150
  isAttached: {
155
151
  value: false,
@@ -201,7 +197,6 @@ export const GridMixin = (superClass) =>
201
197
  connectedCallback() {
202
198
  super.connectedCallback();
203
199
  this.isAttached = true;
204
- this.recalculateColumnWidths();
205
200
  }
206
201
 
207
202
  /** @protected */
@@ -273,7 +268,6 @@ export const GridMixin = (superClass) =>
273
268
  new ResizeObserver(() =>
274
269
  setTimeout(() => {
275
270
  this.__updateColumnsBodyContentHidden();
276
- this.__tryToRecalculateColumnWidthsIfPending();
277
271
  }),
278
272
  ).observe(this.$.table);
279
273
 
@@ -352,222 +346,6 @@ export const GridMixin = (superClass) =>
352
346
  }
353
347
  }
354
348
 
355
- /** @private */
356
- __getIntrinsicWidth(col) {
357
- if (!this.__intrinsicWidthCache.has(col)) {
358
- this.__calculateAndCacheIntrinsicWidths([col]);
359
- }
360
- return this.__intrinsicWidthCache.get(col);
361
- }
362
-
363
- /** @private */
364
- __getDistributedWidth(col, innerColumn) {
365
- if (col == null || col === this) {
366
- return 0;
367
- }
368
-
369
- const columnWidth = Math.max(
370
- this.__getIntrinsicWidth(col),
371
- this.__getDistributedWidth((col.assignedSlot || col).parentElement, col),
372
- );
373
-
374
- // We're processing a regular grid-column and not a grid-column-group
375
- if (!innerColumn) {
376
- return columnWidth;
377
- }
378
-
379
- // At the end, the width of each vaadin-grid-column-group is determined by the sum of the width of its children.
380
- // Here we determine how much space the vaadin-grid-column-group actually needs to render properly and then we distribute that space
381
- // to its children, so when we actually do the summation it will be rendered properly.
382
- // Check out vaadin-grid-column-group:_updateFlexAndWidth
383
- const columnGroup = col;
384
- const columnGroupWidth = columnWidth;
385
- const sumOfWidthOfAllChildColumns = columnGroup._visibleChildColumns
386
- .map((col) => this.__getIntrinsicWidth(col))
387
- .reduce((sum, curr) => sum + curr, 0);
388
-
389
- const extraNecessarySpaceForGridColumnGroup = Math.max(0, columnGroupWidth - sumOfWidthOfAllChildColumns);
390
-
391
- // The distribution of the extra necessary space is done according to the intrinsic width of each child column.
392
- // Lets say we need 100 pixels of extra space for the grid-column-group to render properly
393
- // it has two grid-column children, |100px|300px| in total 400px
394
- // the first column gets 25px of the additional space (100/400)*100 = 25
395
- // the second column gets the 75px of the additional space (300/400)*100 = 75
396
- const proportionOfExtraSpace = this.__getIntrinsicWidth(innerColumn) / sumOfWidthOfAllChildColumns;
397
- const shareOfInnerColumnFromNecessaryExtraSpace = proportionOfExtraSpace * extraNecessarySpaceForGridColumnGroup;
398
-
399
- return this.__getIntrinsicWidth(innerColumn) + shareOfInnerColumnFromNecessaryExtraSpace;
400
- }
401
-
402
- /**
403
- * @param {!Array<!GridColumn>} cols the columns to auto size based on their content width
404
- * @private
405
- */
406
- _recalculateColumnWidths(cols) {
407
- // Flush to make sure DOM is up-to-date when measuring the column widths
408
- this.__virtualizer.flush();
409
- [...this.$.header.children, ...this.$.footer.children].forEach((row) => {
410
- if (row.__debounceUpdateHeaderFooterRowVisibility) {
411
- row.__debounceUpdateHeaderFooterRowVisibility.flush();
412
- }
413
- });
414
-
415
- // Flush to account for any changes to the visibility of the columns
416
- if (this._debouncerHiddenChanged) {
417
- this._debouncerHiddenChanged.flush();
418
- }
419
-
420
- // Flush frozen column updates
421
- if (this.__debounceUpdateFrozenColumn) {
422
- this.__debounceUpdateFrozenColumn.flush();
423
- }
424
-
425
- this.__intrinsicWidthCache = new Map();
426
- // Cache the viewport rows to avoid unnecessary reflows while measuring the column widths
427
- const fvi = this._firstVisibleIndex;
428
- const lvi = this._lastVisibleIndex;
429
- this.__viewportRowsCache = this._getRenderedRows().filter((row) => row.index >= fvi && row.index <= lvi);
430
-
431
- // Pre-cache the intrinsic width of each column
432
- this.__calculateAndCacheIntrinsicWidths(cols);
433
-
434
- cols.forEach((col) => {
435
- col.width = `${this.__getDistributedWidth(col)}px`;
436
- });
437
- }
438
-
439
- /**
440
- * Toggles the cell content for the given column to use or not use auto width.
441
- *
442
- * While content for all the column cells uses auto width (instead of the default 100%),
443
- * their offsetWidth can be used to calculate the collective intrinsic width of the column.
444
- *
445
- * @private
446
- */
447
- __setVisibleCellContentAutoWidth(col, autoWidth) {
448
- col._allCells
449
- .filter((cell) => {
450
- if (this.$.items.contains(cell)) {
451
- return this.__viewportRowsCache.includes(cell.parentElement);
452
- }
453
- return true;
454
- })
455
- .forEach((cell) => {
456
- cell.__measuringAutoWidth = autoWidth;
457
-
458
- if (cell.__measuringAutoWidth) {
459
- // Store the original inline width of the cell to restore it later
460
- cell.__originalWidth = cell.style.width;
461
- // Prepare the cell for having its intrinsic width measured
462
- cell.style.width = 'auto';
463
- cell.style.position = 'absolute';
464
- } else {
465
- // Restore the original width
466
- cell.style.width = cell.__originalWidth;
467
- delete cell.__originalWidth;
468
- cell.style.position = '';
469
- }
470
- });
471
-
472
- if (autoWidth) {
473
- this.$.scroller.setAttribute('measuring-auto-width', '');
474
- } else {
475
- this.$.scroller.removeAttribute('measuring-auto-width');
476
- }
477
- }
478
-
479
- /**
480
- * Returns the maximum intrinsic width of the cell content in the given column.
481
- * Only cells which are marked for measuring auto width are considered.
482
- *
483
- * @private
484
- */
485
- __getAutoWidthCellsMaxWidth(col) {
486
- // Note: _allCells only contains cells which are currently rendered in DOM
487
- return col._allCells.reduce((width, cell) => {
488
- // Add 1px buffer to the offset width to avoid too narrow columns (sub-pixel rendering)
489
- return cell.__measuringAutoWidth ? Math.max(width, cell.offsetWidth + 1) : width;
490
- }, 0);
491
- }
492
-
493
- /**
494
- * Calculates and caches the intrinsic width of each given column.
495
- *
496
- * @private
497
- */
498
- __calculateAndCacheIntrinsicWidths(cols) {
499
- // Make all the columns use auto width at once before measuring to
500
- // avoid reflows in between the measurements
501
- cols.forEach((col) => this.__setVisibleCellContentAutoWidth(col, true));
502
- // Measure and cache
503
- cols.forEach((col) => {
504
- const width = this.__getAutoWidthCellsMaxWidth(col);
505
- this.__intrinsicWidthCache.set(col, width);
506
- });
507
- // Reset the columns to use 100% width
508
- cols.forEach((col) => this.__setVisibleCellContentAutoWidth(col, false));
509
- }
510
-
511
- /**
512
- * Updates the `width` of all columns which have `autoWidth` set to `true`.
513
- */
514
- recalculateColumnWidths() {
515
- if (!this._columnTree) {
516
- return; // No columns
517
- }
518
- if (isElementHidden(this) || this._dataProviderController.isLoading()) {
519
- this.__pendingRecalculateColumnWidths = true;
520
- return;
521
- }
522
- const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
523
-
524
- const undefinedCols = cols.filter((col) => !customElements.get(col.localName));
525
- if (undefinedCols.length) {
526
- // Some of the columns are not defined yet, wait for them to be defined before measuring
527
- Promise.all(undefinedCols.map((col) => customElements.whenDefined(col.localName))).then(() => {
528
- this._recalculateColumnWidths(cols);
529
- });
530
- } else {
531
- this._recalculateColumnWidths(cols);
532
- }
533
- }
534
-
535
- /** @private */
536
- __tryToRecalculateColumnWidthsIfPending() {
537
- if (!this.__pendingRecalculateColumnWidths || isElementHidden(this) || this._dataProviderController.isLoading()) {
538
- return;
539
- }
540
-
541
- // Delay recalculation if any rows are missing an index.
542
- // This can happen during the grid's initialization if the recalculation is triggered
543
- // as a result of the data provider responding synchronously to a page request created
544
- // in the middle of the virtualizer update loop. In this case, rows after the one that
545
- // triggered the page request may not have an index property yet. The lack of index
546
- // prevents _onDataProviderPageReceived from requesting children for these rows,
547
- // resulting in loading state being set to false and the recalculation beginning
548
- // before all the data is loaded. Note, rows without index get updated in later iterations
549
- // of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
550
- const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
551
- if (hasRowsWithUndefinedIndex) {
552
- return;
553
- }
554
-
555
- const hasRowsWithClientHeight = [...this.$.items.children].some((row) => row.clientHeight > 0);
556
- if (hasRowsWithClientHeight) {
557
- this.__pendingRecalculateColumnWidths = false;
558
- this.recalculateColumnWidths();
559
- }
560
- }
561
-
562
- /**
563
- * @protected
564
- * @override
565
- */
566
- _onDataProviderPageLoaded() {
567
- super._onDataProviderPageLoaded();
568
- this.__tryToRecalculateColumnWidthsIfPending();
569
- }
570
-
571
349
  /** @private */
572
350
  _createScrollerRows(count) {
573
351
  const rows = [];
@@ -595,7 +373,6 @@ export const GridMixin = (superClass) =>
595
373
  animationFrame,
596
374
  () => {
597
375
  this._afterScroll();
598
- this.__tryToRecalculateColumnWidthsIfPending();
599
376
  },
600
377
  );
601
378
  return rows;
@@ -881,7 +658,6 @@ export const GridMixin = (superClass) =>
881
658
  /** @private */
882
659
  _columnTreeChanged(columnTree) {
883
660
  this._renderColumnTree(columnTree);
884
- this.recalculateColumnWidths();
885
661
  this.__updateColumnsBodyContentHidden();
886
662
  }
887
663
 
@@ -1020,7 +796,6 @@ export const GridMixin = (superClass) =>
1020
796
  // ShadyCSS applies scoping suffixes to animation names
1021
797
  if (e.animationName.indexOf('vaadin-grid-appear') === 0) {
1022
798
  e.stopPropagation();
1023
- this.__tryToRecalculateColumnWidthsIfPending();
1024
799
 
1025
800
  // Ensure header and footer have tabbable elements
1026
801
  this._resetKeyboardNavigation();
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { iterateChildren } from './vaadin-grid-helpers.js';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import { isElementHidden } from '@vaadin/a11y-base';
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @license
3
- * Copyright (c) 2016 - 2024 Vaadin Ltd.
3
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
6
  import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -39,6 +39,11 @@ export declare class GridSelectionColumnBaseMixinClass<TItem> {
39
39
  */
40
40
  dragSelect: boolean;
41
41
 
42
+ /**
43
+ * Indicates whether the shift key is currently pressed.
44
+ */
45
+ protected _shiftKeyDown: boolean;
46
+
42
47
  /**
43
48
  * Override to handle the user selecting all items.
44
49
  */