@vaadin/grid 24.4.0-alpha2 → 24.4.0-alpha21

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 (85) hide show
  1. package/README.md +0 -1
  2. package/package.json +10 -10
  3. package/src/vaadin-grid-a11y-mixin.js +3 -1
  4. package/src/vaadin-grid-column-mixin.js +8 -4
  5. package/src/vaadin-grid-column-reordering-mixin.js +17 -4
  6. package/src/vaadin-grid-data-provider-mixin.js +1 -5
  7. package/src/vaadin-grid-filter-column-mixin.js +1 -26
  8. package/src/vaadin-grid-filter-element-mixin.js +2 -10
  9. package/src/vaadin-grid-keyboard-navigation-mixin.js +16 -6
  10. package/src/vaadin-grid-mixin.js +44 -15
  11. package/src/vaadin-grid-scroll-mixin.d.ts +2 -0
  12. package/src/vaadin-grid-scroll-mixin.js +20 -8
  13. package/src/vaadin-grid-selection-column-base-mixin.js +18 -0
  14. package/src/vaadin-grid-tree-toggle-mixin.js +2 -4
  15. package/src/vaadin-lit-grid-column-group.js +1 -1
  16. package/src/vaadin-lit-grid-column.js +1 -1
  17. package/src/vaadin-lit-grid-filter-column.js +1 -1
  18. package/src/vaadin-lit-grid-filter.js +1 -1
  19. package/src/vaadin-lit-grid-selection-column.js +1 -1
  20. package/src/vaadin-lit-grid-sort-column.js +1 -1
  21. package/src/vaadin-lit-grid-sorter.js +1 -1
  22. package/src/vaadin-lit-grid-tree-column.js +1 -1
  23. package/src/vaadin-lit-grid-tree-toggle.js +1 -1
  24. package/src/vaadin-lit-grid.js +1 -1
  25. package/theme/lumo/all-imports.d.ts +11 -0
  26. package/theme/lumo/lit-all-imports.d.ts +11 -0
  27. package/theme/lumo/vaadin-grid-column-group.d.ts +1 -0
  28. package/theme/lumo/vaadin-grid-column.d.ts +1 -0
  29. package/theme/lumo/vaadin-grid-filter-column.d.ts +2 -0
  30. package/theme/lumo/vaadin-grid-filter.d.ts +2 -0
  31. package/theme/lumo/vaadin-grid-selection-column.d.ts +2 -0
  32. package/theme/lumo/vaadin-grid-sort-column.d.ts +2 -0
  33. package/theme/lumo/vaadin-grid-sorter-styles.d.ts +3 -0
  34. package/theme/lumo/vaadin-grid-sorter.d.ts +2 -0
  35. package/theme/lumo/vaadin-grid-styles.d.ts +6 -0
  36. package/theme/lumo/vaadin-grid-styles.js +0 -1
  37. package/theme/lumo/vaadin-grid-tree-column.d.ts +2 -0
  38. package/theme/lumo/vaadin-grid-tree-toggle-styles.d.ts +3 -0
  39. package/theme/lumo/vaadin-grid-tree-toggle.d.ts +2 -0
  40. package/theme/lumo/vaadin-grid.d.ts +2 -0
  41. package/theme/lumo/vaadin-lit-grid-column-group.d.ts +1 -0
  42. package/theme/lumo/vaadin-lit-grid-column.d.ts +1 -0
  43. package/theme/lumo/vaadin-lit-grid-filter-column.d.ts +2 -0
  44. package/theme/lumo/vaadin-lit-grid-filter.d.ts +2 -0
  45. package/theme/lumo/vaadin-lit-grid-filter.js +1 -2
  46. package/theme/lumo/vaadin-lit-grid-selection-column.d.ts +2 -0
  47. package/theme/lumo/vaadin-lit-grid-selection-column.js +1 -1
  48. package/theme/lumo/vaadin-lit-grid-sort-column.d.ts +2 -0
  49. package/theme/lumo/vaadin-lit-grid-sorter.d.ts +2 -0
  50. package/theme/lumo/vaadin-lit-grid-tree-column.d.ts +2 -0
  51. package/theme/lumo/vaadin-lit-grid-tree-toggle.d.ts +2 -0
  52. package/theme/lumo/vaadin-lit-grid.d.ts +2 -0
  53. package/theme/material/all-imports.d.ts +11 -0
  54. package/theme/material/lit-all-imports.d.ts +11 -0
  55. package/theme/material/vaadin-grid-column-group.d.ts +1 -0
  56. package/theme/material/vaadin-grid-column.d.ts +1 -0
  57. package/theme/material/vaadin-grid-filter-column.d.ts +2 -0
  58. package/theme/material/vaadin-grid-filter.d.ts +2 -0
  59. package/theme/material/vaadin-grid-selection-column.d.ts +2 -0
  60. package/theme/material/vaadin-grid-sort-column.d.ts +2 -0
  61. package/theme/material/vaadin-grid-sorter-styles.d.ts +2 -0
  62. package/theme/material/vaadin-grid-sorter.d.ts +2 -0
  63. package/theme/material/vaadin-grid-styles.d.ts +2 -0
  64. package/theme/material/vaadin-grid-tree-column.d.ts +2 -0
  65. package/theme/material/vaadin-grid-tree-toggle-styles.d.ts +3 -0
  66. package/theme/material/vaadin-grid-tree-toggle.d.ts +2 -0
  67. package/theme/material/vaadin-grid.d.ts +2 -0
  68. package/theme/material/vaadin-lit-grid-column-group.d.ts +1 -0
  69. package/theme/material/vaadin-lit-grid-column.d.ts +1 -0
  70. package/theme/material/vaadin-lit-grid-filter-column.d.ts +2 -0
  71. package/theme/material/vaadin-lit-grid-filter.d.ts +2 -0
  72. package/theme/material/vaadin-lit-grid-filter.js +1 -2
  73. package/theme/material/vaadin-lit-grid-selection-column.d.ts +2 -0
  74. package/theme/material/vaadin-lit-grid-selection-column.js +1 -1
  75. package/theme/material/vaadin-lit-grid-sort-column.d.ts +2 -0
  76. package/theme/material/vaadin-lit-grid-sorter.d.ts +2 -0
  77. package/theme/material/vaadin-lit-grid-tree-column.d.ts +2 -0
  78. package/theme/material/vaadin-lit-grid-tree-toggle.d.ts +2 -0
  79. package/theme/material/vaadin-lit-grid.d.ts +2 -0
  80. package/vaadin-grid.d.ts +0 -1
  81. package/vaadin-grid.js +0 -1
  82. package/vaadin-lit-grid.d.ts +0 -1
  83. package/vaadin-lit-grid.js +0 -1
  84. package/web-types.json +12 -8
  85. package/web-types.lit.json +5 -5
package/README.md CHANGED
@@ -5,7 +5,6 @@ A web component for showing tabular data.
5
5
  [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/grid)
6
6
 
7
7
  [![npm version](https://badgen.net/npm/v/@vaadin/grid)](https://www.npmjs.com/package/@vaadin/grid)
8
- [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
9
8
 
10
9
  ```html
11
10
  <vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/grid",
3
- "version": "24.4.0-alpha2",
3
+ "version": "24.4.0-alpha21",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -46,14 +46,14 @@
46
46
  "dependencies": {
47
47
  "@open-wc/dedupe-mixin": "^1.3.0",
48
48
  "@polymer/polymer": "^3.0.0",
49
- "@vaadin/a11y-base": "24.4.0-alpha2",
50
- "@vaadin/checkbox": "24.4.0-alpha2",
51
- "@vaadin/component-base": "24.4.0-alpha2",
52
- "@vaadin/lit-renderer": "24.4.0-alpha2",
53
- "@vaadin/text-field": "24.4.0-alpha2",
54
- "@vaadin/vaadin-lumo-styles": "24.4.0-alpha2",
55
- "@vaadin/vaadin-material-styles": "24.4.0-alpha2",
56
- "@vaadin/vaadin-themable-mixin": "24.4.0-alpha2",
49
+ "@vaadin/a11y-base": "24.4.0-alpha21",
50
+ "@vaadin/checkbox": "24.4.0-alpha21",
51
+ "@vaadin/component-base": "24.4.0-alpha21",
52
+ "@vaadin/lit-renderer": "24.4.0-alpha21",
53
+ "@vaadin/text-field": "24.4.0-alpha21",
54
+ "@vaadin/vaadin-lumo-styles": "24.4.0-alpha21",
55
+ "@vaadin/vaadin-material-styles": "24.4.0-alpha21",
56
+ "@vaadin/vaadin-themable-mixin": "24.4.0-alpha21",
57
57
  "lit": "^3.0.0"
58
58
  },
59
59
  "devDependencies": {
@@ -65,5 +65,5 @@
65
65
  "web-types.json",
66
66
  "web-types.lit.json"
67
67
  ],
68
- "gitHead": "f303ead58d27e15d81a55db0559611fb77c0e421"
68
+ "gitHead": "2efeeebbeabddfde14c845ee4098f9e62e352ffe"
69
69
  }
@@ -16,7 +16,9 @@ export const A11yMixin = (superClass) =>
16
16
 
17
17
  /** @private */
18
18
  _a11yGetHeaderRowCount(_columnTree) {
19
- return _columnTree.filter((level) => level.some((col) => col.headerRenderer || col.path || col.header)).length;
19
+ return _columnTree.filter((level) =>
20
+ level.some((col) => col.headerRenderer || (col.path && col.header !== null) || col.header),
21
+ ).length;
20
22
  }
21
23
 
22
24
  /** @private */
@@ -598,8 +598,14 @@ export const ColumnBaseMixin = (superClass) =>
598
598
 
599
599
  /** @protected */
600
600
  _runRenderer(renderer, cell, model) {
601
+ const isVisibleBodyCell = model && model.item && !cell.parentElement.hidden;
602
+ const shouldRender = isVisibleBodyCell || renderer === this._headerRenderer || renderer === this._footerRenderer;
603
+ if (!shouldRender) {
604
+ return;
605
+ }
606
+
601
607
  const args = [cell._content, this];
602
- if (model && model.item) {
608
+ if (isVisibleBodyCell) {
603
609
  args.push(model);
604
610
  }
605
611
 
@@ -634,9 +640,7 @@ export const ColumnBaseMixin = (superClass) =>
634
640
 
635
641
  cell._renderer = renderer;
636
642
 
637
- if (model.item || renderer === this._headerRenderer || renderer === this._footerRenderer) {
638
- this._runRenderer(renderer, cell, model);
639
- }
643
+ this._runRenderer(renderer, cell, model);
640
644
  });
641
645
  }
642
646
 
@@ -237,13 +237,26 @@ export const ColumnReorderingMixin = (superClass) =>
237
237
  if (!this._draggedColumn) {
238
238
  this.$.scroller.toggleAttribute('no-content-pointer-events', true);
239
239
  }
240
- const cell = this.shadowRoot.elementFromPoint(x, y);
240
+ const elementFromPoint = this.shadowRoot.elementFromPoint(x, y);
241
241
  this.$.scroller.toggleAttribute('no-content-pointer-events', false);
242
242
 
243
- // Make sure the element is actually a cell
244
- if (cell && cell._column) {
245
- return cell;
243
+ return this._getCellFromElement(elementFromPoint);
244
+ }
245
+
246
+ /** @private */
247
+ _getCellFromElement(element) {
248
+ if (element) {
249
+ // Check if element is a cell
250
+ if (element._column) {
251
+ return element;
252
+ }
253
+ // Check if element is the cell of a focus button mode column
254
+ const { parentElement } = element;
255
+ if (parentElement && parentElement._focusButton === element) {
256
+ return parentElement;
257
+ }
246
258
  }
259
+ return null;
247
260
  }
248
261
 
249
262
  /**
@@ -206,10 +206,6 @@ export const DataProviderMixin = (superClass) =>
206
206
  * @protected
207
207
  */
208
208
  _getItem(index, el) {
209
- if (index >= this._flatSize) {
210
- return;
211
- }
212
-
213
209
  el.index = index;
214
210
 
215
211
  const { item } = this._dataProviderController.getFlatIndexContext(index);
@@ -374,7 +370,7 @@ export const DataProviderMixin = (superClass) =>
374
370
  this._hasData = false;
375
371
  this.__updateVisibleRows();
376
372
 
377
- if (!this.__virtualizer.size) {
373
+ if (!this.__virtualizer || !this.__virtualizer.size) {
378
374
  this._dataProviderController.loadFirstPage();
379
375
  }
380
376
  }
@@ -30,13 +30,7 @@ export const GridFilterColumnMixin = (superClass) =>
30
30
  }
31
31
 
32
32
  static get observers() {
33
- return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, _filterValue)'];
34
- }
35
-
36
- constructor() {
37
- super();
38
-
39
- this.__boundOnFilterValueChanged = this.__onFilterValueChanged.bind(this);
33
+ return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header)'];
40
34
  }
41
35
 
42
36
  /**
@@ -54,16 +48,12 @@ export const GridFilterColumnMixin = (superClass) =>
54
48
  textField.setAttribute('theme', 'small');
55
49
  textField.setAttribute('style', 'max-width: 100%;');
56
50
  textField.setAttribute('focus-target', '');
57
- textField.addEventListener('value-changed', this.__boundOnFilterValueChanged);
58
51
  filter.appendChild(textField);
59
52
  root.appendChild(filter);
60
53
  }
61
54
 
62
55
  filter.path = this.path;
63
- filter.value = this._filterValue;
64
56
 
65
- textField.__rendererValue = this._filterValue;
66
- textField.value = this._filterValue;
67
57
  textField.label = this.__getHeader(this.header, this.path);
68
58
  }
69
59
 
@@ -78,21 +68,6 @@ export const GridFilterColumnMixin = (superClass) =>
78
68
  return this._defaultHeaderRenderer;
79
69
  }
80
70
 
81
- /**
82
- * Updates the internal filter value once the filter text field is changed.
83
- * The listener handles only user-fired events.
84
- *
85
- * @private
86
- */
87
- __onFilterValueChanged(e) {
88
- // Skip if the value is changed by the renderer.
89
- if (e.detail.value === e.target.__rendererValue) {
90
- return;
91
- }
92
-
93
- this._filterValue = e.detail.value;
94
- }
95
-
96
71
  /** @private */
97
72
  __getHeader(header, path) {
98
73
  if (header) {
@@ -69,12 +69,8 @@ export const GridFilterElementMixin = (superClass) =>
69
69
 
70
70
  this._filterController = new SlotController(this, '', 'vaadin-text-field', {
71
71
  initializer: (field) => {
72
- field.addEventListener('value-changed', (e) => {
73
- if (field.__previousValue === undefined && e.detail.value === '') {
74
- field.__previousValue = e.detail.value;
75
- return;
76
- }
77
- this.value = e.detail.value;
72
+ field.addEventListener('input', (e) => {
73
+ this.value = e.target.value;
78
74
  });
79
75
 
80
76
  this._textField = field;
@@ -88,12 +84,8 @@ export const GridFilterElementMixin = (superClass) =>
88
84
  if (path === undefined || value === undefined || !textField) {
89
85
  return;
90
86
  }
91
- if (this._previousValue === undefined && value === '') {
92
- return;
93
- }
94
87
 
95
88
  textField.value = value;
96
- this._previousValue = value;
97
89
 
98
90
  this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
99
91
  this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));
@@ -109,6 +109,11 @@ export const KeyboardNavigationMixin = (superClass) =>
109
109
  });
110
110
  }
111
111
 
112
+ /** @private */
113
+ get _visibleItemsCount() {
114
+ return this._lastVisibleIndex - this._firstVisibleIndex - 1;
115
+ }
116
+
112
117
  /** @protected */
113
118
  ready() {
114
119
  super.ready();
@@ -304,8 +309,9 @@ export const KeyboardNavigationMixin = (superClass) =>
304
309
  _onNavigationKeyDown(e, key) {
305
310
  e.preventDefault();
306
311
 
307
- const visibleItemsCount = this._lastVisibleIndex - this._firstVisibleIndex - 1;
308
312
  const isRTL = this.__isRTL;
313
+ const activeRow = e.composedPath().find((el) => this.__isRow(el));
314
+ const activeCell = e.composedPath().find((el) => this.__isCell(el));
309
315
 
310
316
  // Handle keyboard interaction as defined in:
311
317
  // https://w3c.github.io/aria-practices/#keyboard-interaction-24
@@ -350,18 +356,22 @@ export const KeyboardNavigationMixin = (superClass) =>
350
356
  dy = -1;
351
357
  break;
352
358
  case 'PageDown':
353
- dy = visibleItemsCount;
359
+ // Check if the active group is body
360
+ if (this.$.items.contains(activeRow)) {
361
+ const currentRowIndex = this.__getIndexInGroup(activeRow, this._focusedItemIndex);
362
+ // Scroll the current row to the top...
363
+ this._scrollToFlatIndex(currentRowIndex);
364
+ }
365
+ // ...only then measure the visible items count
366
+ dy = this._visibleItemsCount;
354
367
  break;
355
368
  case 'PageUp':
356
- dy = -visibleItemsCount;
369
+ dy = -this._visibleItemsCount;
357
370
  break;
358
371
  default:
359
372
  break;
360
373
  }
361
374
 
362
- const activeRow = e.composedPath().find((el) => this.__isRow(el));
363
- const activeCell = e.composedPath().find((el) => this.__isCell(el));
364
-
365
375
  if ((this.__rowFocusMode && !activeRow) || (!this.__rowFocusMode && !activeCell)) {
366
376
  // When using a screen reader, it's possible that neither a cell nor a row is focused.
367
377
  return;
@@ -316,11 +316,6 @@ export const GridMixin = (superClass) =>
316
316
  }
317
317
  }
318
318
 
319
- /** @private */
320
- __hasRowsWithClientHeight() {
321
- return !!Array.from(this.$.items.children).filter((row) => row.clientHeight).length;
322
- }
323
-
324
319
  /** @private */
325
320
  __getIntrinsicWidth(col) {
326
321
  if (!this.__intrinsicWidthCache.has(col)) {
@@ -484,17 +479,40 @@ export const GridMixin = (superClass) =>
484
479
  return;
485
480
  }
486
481
  const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
487
- this._recalculateColumnWidths(cols);
482
+
483
+ const undefinedCols = cols.filter((col) => !customElements.get(col.localName));
484
+ if (undefinedCols.length) {
485
+ // Some of the columns are not defined yet, wait for them to be defined before measuring
486
+ Promise.all(undefinedCols.map((col) => customElements.whenDefined(col.localName))).then(() => {
487
+ this._recalculateColumnWidths(cols);
488
+ });
489
+ } else {
490
+ this._recalculateColumnWidths(cols);
491
+ }
488
492
  }
489
493
 
490
494
  /** @private */
491
495
  __tryToRecalculateColumnWidthsIfPending() {
492
- if (
493
- this.__pendingRecalculateColumnWidths &&
494
- !isElementHidden(this) &&
495
- !this._dataProviderController.isLoading() &&
496
- this.__hasRowsWithClientHeight()
497
- ) {
496
+ if (!this.__pendingRecalculateColumnWidths || isElementHidden(this) || this._dataProviderController.isLoading()) {
497
+ return;
498
+ }
499
+
500
+ // Delay recalculation if any rows are missing an index.
501
+ // This can happen during the grid's initialization if the recalculation is triggered
502
+ // as a result of the data provider responding synchronously to a page request created
503
+ // in the middle of the virtualizer update loop. In this case, rows after the one that
504
+ // triggered the page request may not have an index property yet. The lack of index
505
+ // prevents _onDataProviderPageReceived from requesting children for these rows,
506
+ // resulting in loading state being set to false and the recalculation beginning
507
+ // before all the data is loaded. Note, rows without index get updated in later iterations
508
+ // of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
509
+ const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
510
+ if (hasRowsWithUndefinedIndex) {
511
+ return;
512
+ }
513
+
514
+ const hasRowsWithClientHeight = [...this.$.items.children].some((row) => row.clientHeight > 0);
515
+ if (hasRowsWithClientHeight) {
498
516
  this.__pendingRecalculateColumnWidths = false;
499
517
  this.recalculateColumnWidths();
500
518
  }
@@ -659,17 +677,22 @@ export const GridMixin = (superClass) =>
659
677
  cell = column._cells.find((cell) => cell._vacant);
660
678
  if (!cell) {
661
679
  cell = this._createCell('td', column);
680
+ if (column._onCellKeyDown) {
681
+ cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
682
+ }
662
683
  column._cells.push(cell);
663
684
  }
664
685
  cell.setAttribute('part', 'cell body-cell');
665
686
  cell.__parentRow = row;
666
687
  // Cache the cell reference
667
688
  row.__cells.push(cell);
668
- if (!column._bodyContentHidden) {
689
+
690
+ const isSizerRow = row === this.$.sizer;
691
+ if (!column._bodyContentHidden || isSizerRow) {
669
692
  row.appendChild(cell);
670
693
  }
671
694
 
672
- if (row === this.$.sizer) {
695
+ if (isSizerRow) {
673
696
  column._sizerCell = cell;
674
697
  }
675
698
 
@@ -700,7 +723,13 @@ export const GridMixin = (superClass) =>
700
723
  // Header & footer
701
724
  const tagName = section === 'header' ? 'th' : 'td';
702
725
  if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
703
- cell = column[`_${section}Cell`] || this._createCell(tagName);
726
+ cell = column[`_${section}Cell`];
727
+ if (!cell) {
728
+ cell = this._createCell(tagName);
729
+ if (column._onCellKeyDown) {
730
+ cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
731
+ }
732
+ }
704
733
  cell._column = column;
705
734
  row.appendChild(cell);
706
735
  column[`_${section}Cell`] = cell;
@@ -43,6 +43,8 @@ export declare class ScrollMixinClass {
43
43
  * - Keyboard Navigation: Tabbing through focusable elements inside the grid body may not work as expected because
44
44
  * some of the columns that would include focusable elements in the body cells may be outside the visible viewport
45
45
  * and thus not rendered.
46
+ *
47
+ * @attr {eager|lazy} column-rendering
46
48
  */
47
49
  columnRendering: ColumnRendering;
48
50
 
@@ -123,6 +123,19 @@ export const ScrollMixin = (superClass) =>
123
123
  this.$.items.addEventListener('focusin', (e) => {
124
124
  const itemsIndex = e.composedPath().indexOf(this.$.items);
125
125
  this._rowWithFocusedElement = e.composedPath()[itemsIndex - 1];
126
+
127
+ if (this._rowWithFocusedElement) {
128
+ // Make sure the row with the focused element is fully inside the visible viewport
129
+ this.__scrollIntoViewport(this._rowWithFocusedElement.index);
130
+
131
+ if (!this.$.table.contains(e.relatedTarget)) {
132
+ // Virtualizer can't catch the event because if orginates from the light DOM.
133
+ // Dispatch a virtualizer-element-focused event for virtualizer to catch.
134
+ this.$.table.dispatchEvent(
135
+ new CustomEvent('virtualizer-element-focused', { detail: { element: this._rowWithFocusedElement } }),
136
+ );
137
+ }
138
+ }
126
139
  });
127
140
  this.$.items.addEventListener('focusout', () => {
128
141
  this._rowWithFocusedElement = undefined;
@@ -235,17 +248,11 @@ export const ScrollMixin = (superClass) =>
235
248
 
236
249
  /** @private */
237
250
  __updateColumnsBodyContentHidden() {
238
- if (!this._columnTree) {
251
+ if (!this._columnTree || !this._areSizerCellsAssigned()) {
239
252
  return;
240
253
  }
241
254
 
242
255
  const columnsInOrder = this._getColumnsInOrder();
243
-
244
- // Return if sizer cells are not yet assigned to columns
245
- if (!columnsInOrder[0] || !columnsInOrder[0]._sizerCell) {
246
- return;
247
- }
248
-
249
256
  let bodyContentHiddenChanged = false;
250
257
 
251
258
  // Remove the column cells from the DOM if the column is outside the viewport.
@@ -485,7 +492,7 @@ export const ScrollMixin = (superClass) =>
485
492
 
486
493
  let transformFrozenToEndBody = transformFrozenToEnd;
487
494
 
488
- if (this._lazyColumns) {
495
+ if (this._lazyColumns && this._areSizerCellsAssigned()) {
489
496
  // Lazy column rendering is used, calculate the offset to apply to the frozen to end cells
490
497
  const columnsInOrder = this._getColumnsInOrder();
491
498
 
@@ -515,4 +522,9 @@ export const ScrollMixin = (superClass) =>
515
522
  this.$.table.style.setProperty('--_grid-horizontal-scroll-position', `${-x}px`);
516
523
  }
517
524
  }
525
+
526
+ /** @private */
527
+ _areSizerCellsAssigned() {
528
+ return this._getColumnsInOrder().every((column) => column._sizerCell);
529
+ }
518
530
  };
@@ -31,6 +31,14 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
31
31
  sync: true,
32
32
  },
33
33
 
34
+ /**
35
+ * Override `autoWidth` to enable auto-width
36
+ */
37
+ autoWidth: {
38
+ type: Boolean,
39
+ value: true,
40
+ },
41
+
34
42
  /**
35
43
  * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
36
44
  * @attr {number} flex-grow
@@ -233,6 +241,16 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
233
241
  }
234
242
  }
235
243
 
244
+ /** @private */
245
+ _onCellKeyDown(e) {
246
+ const target = e.composedPath()[0];
247
+ // Toggle on Space without having to enter interaction mode first
248
+ if (e.keyCode === 32 && (target === this._headerCell || (this._cells.includes(target) && !this.autoSelect))) {
249
+ const checkbox = target._content.firstElementChild;
250
+ checkbox.checked = !checkbox.checked;
251
+ }
252
+ }
253
+
236
254
  /** @private */
237
255
  __dragAutoScroller() {
238
256
  if (this.__dragStartIndex === undefined) {
@@ -125,10 +125,8 @@ export const GridTreeToggleMixin = (superClass) =>
125
125
  };
126
126
  }
127
127
 
128
- /** @protected */
129
- ready() {
130
- super.ready();
131
-
128
+ constructor() {
129
+ super();
132
130
  this.addEventListener('click', (e) => this._onClick(e));
133
131
  }
134
132
 
@@ -13,7 +13,7 @@ import { GridColumnGroupMixin } from './vaadin-grid-column-group-mixin.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -13,7 +13,7 @@ import { GridColumnMixin } from './vaadin-grid-column-mixin.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -15,7 +15,7 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
15
15
  *
16
16
  * ## Disclaimer
17
17
  *
18
- * This component is an experiment not intended for publishing to npm.
18
+ * This component is an experiment and not yet a part of Vaadin platform.
19
19
  * There is no ETA regarding specific Vaadin version where it'll land.
20
20
  * Feel free to try this code in your apps as per Apache 2.0 license.
21
21
  */
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -15,7 +15,7 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
15
15
  *
16
16
  * ## Disclaimer
17
17
  *
18
- * This component is an experiment not intended for publishing to npm.
18
+ * This component is an experiment and not yet a part of Vaadin platform.
19
19
  * There is no ETA regarding specific Vaadin version where it'll land.
20
20
  * Feel free to try this code in your apps as per Apache 2.0 license.
21
21
  */
@@ -13,7 +13,7 @@ import { GridColumn } from './vaadin-lit-grid-column.js';
13
13
  *
14
14
  * ## Disclaimer
15
15
  *
16
- * This component is an experiment not intended for publishing to npm.
16
+ * This component is an experiment and not yet a part of Vaadin platform.
17
17
  * There is no ETA regarding specific Vaadin version where it'll land.
18
18
  * Feel free to try this code in your apps as per Apache 2.0 license.
19
19
  */
@@ -15,7 +15,7 @@ import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
15
15
  *
16
16
  * ## Disclaimer
17
17
  *
18
- * This component is an experiment not intended for publishing to npm.
18
+ * This component is an experiment and not yet a part of Vaadin platform.
19
19
  * There is no ETA regarding specific Vaadin version where it'll land.
20
20
  * Feel free to try this code in your apps as per Apache 2.0 license.
21
21
  */
@@ -18,7 +18,7 @@ import { gridStyles } from './vaadin-grid-styles.js';
18
18
  *
19
19
  * ## Disclaimer
20
20
  *
21
- * This component is an experiment not intended for publishing to npm.
21
+ * This component is an experiment and not yet a part of Vaadin platform.
22
22
  * There is no ETA regarding specific Vaadin version where it'll land.
23
23
  * Feel free to try this code in your apps as per Apache 2.0 license.
24
24
  */
@@ -0,0 +1,11 @@
1
+ import './vaadin-grid-column-group.js';
2
+ import './vaadin-grid-column.js';
3
+ import './vaadin-grid-filter.js';
4
+ import './vaadin-grid-filter-column.js';
5
+ import './vaadin-grid-selection-column.js';
6
+ import './vaadin-grid-sorter.js';
7
+ import './vaadin-grid-sort-column.js';
8
+ import './vaadin-grid-tree-toggle.js';
9
+ import './vaadin-grid-tree-column.js';
10
+ import './vaadin-grid.js';
11
+ import '../../src/all-imports.js';
@@ -0,0 +1,11 @@
1
+ import './vaadin-lit-grid-column-group.js';
2
+ import './vaadin-lit-grid-column.js';
3
+ import './vaadin-lit-grid-filter.js';
4
+ import './vaadin-lit-grid-filter-column.js';
5
+ import './vaadin-lit-grid-selection-column.js';
6
+ import './vaadin-lit-grid-sorter.js';
7
+ import './vaadin-lit-grid-sort-column.js';
8
+ import './vaadin-lit-grid-tree-toggle.js';
9
+ import './vaadin-lit-grid-tree-column.js';
10
+ import './vaadin-lit-grid.js';
11
+ import '../../src/lit-all-imports.js';
@@ -0,0 +1 @@
1
+ import '../../src/vaadin-grid-column-group.js';
@@ -0,0 +1 @@
1
+ import '../../src/vaadin-grid-column.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-filter.js';
2
+ import '../../src/vaadin-grid-filter-column.js';
@@ -0,0 +1,2 @@
1
+ import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
2
+ import '../../src/vaadin-grid-filter.js';
@@ -0,0 +1,2 @@
1
+ import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
2
+ import '../../src/vaadin-grid-selection-column.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-sorter.js';
2
+ import '../../src/vaadin-grid-sort-column.js';
@@ -0,0 +1,3 @@
1
+ import '@vaadin/vaadin-lumo-styles/color.js';
2
+ import '@vaadin/vaadin-lumo-styles/style.js';
3
+ import '@vaadin/vaadin-lumo-styles/spacing.js';
@@ -0,0 +1,2 @@
1
+ import './vaadin-grid-sorter-styles.js';
2
+ import '../../src/vaadin-grid-sorter.js';