@vaadin/grid 24.4.0-alpha9 → 24.4.0-dev.4b20a0c55

package/README.md

@@ -5,7 +5,6 @@ A web component for showing tabular data.
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/grid)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/grid)](https://www.npmjs.com/package/@vaadin/grid)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-dev.4b20a0c55",
   "publishConfig": {
     "access": "public"
   },
@@ -46,14 +46,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-alpha9",
-    "@vaadin/checkbox": "24.4.0-alpha9",
-    "@vaadin/component-base": "24.4.0-alpha9",
-    "@vaadin/lit-renderer": "24.4.0-alpha9",
-    "@vaadin/text-field": "24.4.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha9",
+    "@vaadin/a11y-base": "24.4.0-dev.4b20a0c55",
+    "@vaadin/checkbox": "24.4.0-dev.4b20a0c55",
+    "@vaadin/component-base": "24.4.0-dev.4b20a0c55",
+    "@vaadin/lit-renderer": "24.4.0-dev.4b20a0c55",
+    "@vaadin/text-field": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "effb81abe3c6283a6ec620cc0cee56069af58226"
+  "gitHead": "b79c81e5f6fd24684b34ee0dc434e94d943ea13e"
 }

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

@@ -206,10 +206,6 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _getItem(index, el) {
-      if (index >= this._flatSize) {
-        return;
-      }
-
       el.index = index;
 
       const { item } = this._dataProviderController.getFlatIndexContext(index);
@@ -374,7 +370,7 @@ export const DataProviderMixin = (superClass) =>
       this._hasData = false;
       this.__updateVisibleRows();
 
-      if (!this.__virtualizer.size) {
+      if (!this.__virtualizer || !this.__virtualizer.size) {
         this._dataProviderController.loadFirstPage();
       }
     }

package/src/vaadin-grid-mixin.js

@@ -316,11 +316,6 @@ export const GridMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __hasRowsWithClientHeight() {
-      return !!Array.from(this.$.items.children).filter((row) => row.clientHeight).length;
-    }
-
     /** @private */
     __getIntrinsicWidth(col) {
       if (!this.__intrinsicWidthCache.has(col)) {
@@ -498,12 +493,26 @@ export const GridMixin = (superClass) =>
 
     /** @private */
     __tryToRecalculateColumnWidthsIfPending() {
-      if (
-        this.__pendingRecalculateColumnWidths &&
-        !isElementHidden(this) &&
-        !this._dataProviderController.isLoading() &&
-        this.__hasRowsWithClientHeight()
-      ) {
+      if (!this.__pendingRecalculateColumnWidths || isElementHidden(this) || this._dataProviderController.isLoading()) {
+        return;
+      }
+
+      // Delay recalculation if any rows are missing an index.
+      // This can happen during the grid's initialization if the recalculation is triggered
+      // as a result of the data provider responding synchronously to a page request created
+      // in the middle of the virtualizer update loop. In this case, rows after the one that
+      // triggered the page request may not have an index property yet. The lack of index
+      // prevents _onDataProviderPageReceived from requesting children for these rows,
+      // resulting in loading state being set to false and the recalculation beginning
+      // before all the data is loaded. Note, rows without index get updated in later iterations
+      // of the virtualizer update loop, ensuring the grid eventually reaches a stable state.
+      const hasRowsWithUndefinedIndex = [...this.$.items.children].some((row) => row.index === undefined);
+      if (hasRowsWithUndefinedIndex) {
+        return;
+      }
+
+      const hasRowsWithClientHeight = [...this.$.items.children].some((row) => row.clientHeight > 0);
+      if (hasRowsWithClientHeight) {
         this.__pendingRecalculateColumnWidths = false;
         this.recalculateColumnWidths();
       }
@@ -580,6 +589,10 @@ export const GridMixin = (superClass) =>
         });
       }
 
+      if (column && column._onCellKeyDown) {
+        cell.addEventListener('keydown', column._onCellKeyDown.bind(column));
+      }
+
       const slot = document.createElement('slot');
       slot.setAttribute('name', slotName);
 
@@ -711,7 +724,7 @@ export const GridMixin = (superClass) =>
             // Header & footer
             const tagName = section === 'header' ? 'th' : 'td';
             if (isColumnRow || column.localName === 'vaadin-grid-column-group') {
-              cell = column[`_${section}Cell`] || this._createCell(tagName);
+              cell = column[`_${section}Cell`] || this._createCell(tagName, column);
               cell._column = column;
               row.appendChild(cell);
               column[`_${section}Cell`] = cell;

package/src/vaadin-grid-scroll-mixin.js

@@ -123,6 +123,19 @@ export const ScrollMixin = (superClass) =>
       this.$.items.addEventListener('focusin', (e) => {
         const itemsIndex = e.composedPath().indexOf(this.$.items);
         this._rowWithFocusedElement = e.composedPath()[itemsIndex - 1];
+
+        if (this._rowWithFocusedElement) {
+          // Make sure the row with the focused element is fully inside the visible viewport
+          this.__scrollIntoViewport(this._rowWithFocusedElement.index);
+
+          if (!this.$.table.contains(e.relatedTarget)) {
+            // Virtualizer can't catch the event because if orginates from the light DOM.
+            // Dispatch a virtualizer-element-focused event for virtualizer to catch.
+            this.$.table.dispatchEvent(
+              new CustomEvent('virtualizer-element-focused', { detail: { element: this._rowWithFocusedElement } }),
+            );
+          }
+        }
       });
       this.$.items.addEventListener('focusout', () => {
         this._rowWithFocusedElement = undefined;

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

@@ -31,6 +31,14 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
           sync: true,
         },
 
+        /**
+         * Override `autoWidth` to enable auto-width
+         */
+        autoWidth: {
+          type: Boolean,
+          value: true,
+        },
+
         /**
          * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
          * @attr {number} flex-grow
@@ -233,6 +241,16 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    _onCellKeyDown(e) {
+      const target = e.composedPath()[0];
+      // Toggle on Space without having to enter interaction mode first
+      if (e.keyCode === 32 && (target === this._headerCell || (this._cells.includes(target) && !this.autoSelect))) {
+        const checkbox = target._content.firstElementChild;
+        checkbox.checked = !checkbox.checked;
+      }
+    }
+
     /** @private */
     __dragAutoScroller() {
       if (this.__dragStartIndex === undefined) {

package/src/vaadin-grid-tree-toggle-mixin.js

@@ -125,10 +125,8 @@ export const GridTreeToggleMixin = (superClass) =>
       };
     }
 
-    /** @protected */
-    ready() {
-      super.ready();
-
+    constructor() {
+      super();
       this.addEventListener('click', (e) => this._onClick(e));
     }
 

package/theme/lumo/all-imports.d.ts

@@ -1,11 +0,0 @@
-import './vaadin-grid-column-group.js';
-import './vaadin-grid-column.js';
-import './vaadin-grid-filter.js';
-import './vaadin-grid-filter-column.js';
-import './vaadin-grid-selection-column.js';
-import './vaadin-grid-sorter.js';
-import './vaadin-grid-sort-column.js';
-import './vaadin-grid-tree-toggle.js';
-import './vaadin-grid-tree-column.js';
-import './vaadin-grid.js';
-import '../../src/all-imports.js';

package/theme/lumo/lit-all-imports.d.ts

@@ -1,11 +0,0 @@
-import './vaadin-lit-grid-column-group.js';
-import './vaadin-lit-grid-column.js';
-import './vaadin-lit-grid-filter.js';
-import './vaadin-lit-grid-filter-column.js';
-import './vaadin-lit-grid-selection-column.js';
-import './vaadin-lit-grid-sorter.js';
-import './vaadin-lit-grid-sort-column.js';
-import './vaadin-lit-grid-tree-toggle.js';
-import './vaadin-lit-grid-tree-column.js';
-import './vaadin-lit-grid.js';
-import '../../src/lit-all-imports.js';

package/theme/lumo/vaadin-grid-column-group.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-grid-column-group.js';

package/theme/lumo/vaadin-grid-column.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-grid-column.js';

package/theme/lumo/vaadin-grid-filter-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-filter.js';
-import '../../src/vaadin-grid-filter-column.js';

package/theme/lumo/vaadin-grid-filter.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
-import '../../src/vaadin-grid-filter.js';

package/theme/lumo/vaadin-grid-selection-column.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
-import '../../src/vaadin-grid-selection-column.js';

package/theme/lumo/vaadin-grid-sort-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter.js';
-import '../../src/vaadin-grid-sort-column.js';

package/theme/lumo/vaadin-grid-sorter-styles.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';

package/theme/lumo/vaadin-grid-sorter.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter-styles.js';
-import '../../src/vaadin-grid-sorter.js';

package/theme/lumo/vaadin-grid-styles.d.ts

@@ -1,6 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-grid-tree-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-tree-toggle.js';
-import '../../src/vaadin-grid-tree-column.js';

package/theme/lumo/vaadin-grid-tree-toggle-styles.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';

package/theme/lumo/vaadin-grid-tree-toggle.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-tree-toggle-styles.js';
-import '../../src/vaadin-grid-tree-toggle.js';

package/theme/lumo/vaadin-grid.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-styles.js';
-import '../../src/vaadin-grid.js';

package/theme/lumo/vaadin-lit-grid-column-group.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-grid-column-group.js';

package/theme/lumo/vaadin-lit-grid-column.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-grid-column.js';

package/theme/lumo/vaadin-lit-grid-filter-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-filter.js';
-import '../../src/vaadin-lit-grid-filter-column.js';

package/theme/lumo/vaadin-lit-grid-filter.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/text-field/theme/lumo/vaadin-lit-text-field.js';
-import '../../src/vaadin-lit-grid-filter.js';

package/theme/lumo/vaadin-lit-grid-selection-column.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/checkbox/theme/lumo/vaadin-lit-checkbox.js';
-import '../../src/vaadin-lit-grid-selection-column.js';

package/theme/lumo/vaadin-lit-grid-sort-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-sorter.js';
-import '../../src/vaadin-lit-grid-sort-column.js';

package/theme/lumo/vaadin-lit-grid-sorter.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter-styles.js';
-import '../../src/vaadin-lit-grid-sorter.js';

package/theme/lumo/vaadin-lit-grid-tree-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-tree-toggle.js';
-import '../../src/vaadin-lit-grid-tree-column.js';

package/theme/lumo/vaadin-lit-grid-tree-toggle.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-tree-toggle-styles.js';
-import '../../src/vaadin-lit-grid-tree-toggle.js';

package/theme/lumo/vaadin-lit-grid.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-styles.js';
-import '../../src/vaadin-lit-grid.js';

package/theme/material/all-imports.d.ts

@@ -1,11 +0,0 @@
-import './vaadin-grid-column-group.js';
-import './vaadin-grid-column.js';
-import './vaadin-grid-filter.js';
-import './vaadin-grid-filter-column.js';
-import './vaadin-grid-selection-column.js';
-import './vaadin-grid-sorter.js';
-import './vaadin-grid-sort-column.js';
-import './vaadin-grid-tree-toggle.js';
-import './vaadin-grid-tree-column.js';
-import './vaadin-grid.js';
-import '../../src/all-imports.js';

package/theme/material/lit-all-imports.d.ts

@@ -1,11 +0,0 @@
-import './vaadin-lit-grid-column-group.js';
-import './vaadin-lit-grid-column.js';
-import './vaadin-lit-grid-filter.js';
-import './vaadin-lit-grid-filter-column.js';
-import './vaadin-lit-grid-selection-column.js';
-import './vaadin-lit-grid-sorter.js';
-import './vaadin-lit-grid-sort-column.js';
-import './vaadin-lit-grid-tree-toggle.js';
-import './vaadin-lit-grid-tree-column.js';
-import './vaadin-lit-grid.js';
-import '../../src/lit-all-imports.js';

package/theme/material/vaadin-grid-column-group.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-grid-column-group.js';

package/theme/material/vaadin-grid-column.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-grid-column.js';

package/theme/material/vaadin-grid-filter-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-filter.js';
-import '../../src/vaadin-grid-filter-column.js';

package/theme/material/vaadin-grid-filter.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/text-field/theme/material/vaadin-text-field.js';
-import '../../src/vaadin-grid-filter.js';

package/theme/material/vaadin-grid-selection-column.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/checkbox/theme/material/vaadin-checkbox.js';
-import '../../src/vaadin-grid-selection-column.js';

package/theme/material/vaadin-grid-sort-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter.js';
-import '../../src/vaadin-grid-sort-column.js';

package/theme/material/vaadin-grid-sorter-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';

package/theme/material/vaadin-grid-sorter.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter-styles.js';
-import '../../src/vaadin-grid-sorter.js';

package/theme/material/vaadin-grid-styles.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';

package/theme/material/vaadin-grid-tree-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-tree-toggle.js';
-import '../../src/vaadin-grid-tree-column.js';

package/theme/material/vaadin-grid-tree-toggle-styles.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';

package/theme/material/vaadin-grid-tree-toggle.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-tree-toggle-styles.js';
-import '../../src/vaadin-grid-tree-toggle.js';

package/theme/material/vaadin-grid.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-styles.js';
-import '../../src/vaadin-grid.js';

package/theme/material/vaadin-lit-grid-column-group.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-grid-column-group.js';

package/theme/material/vaadin-lit-grid-column.d.ts

@@ -1 +0,0 @@
-import '../../src/vaadin-lit-grid-column.js';

package/theme/material/vaadin-lit-grid-filter-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-filter.js';
-import '../../src/vaadin-lit-grid-filter-column.js';

package/theme/material/vaadin-lit-grid-filter.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/text-field/theme/material/vaadin-lit-text-field.js';
-import '../../src/vaadin-lit-grid-filter.js';

package/theme/material/vaadin-lit-grid-selection-column.d.ts

@@ -1,2 +0,0 @@
-import '@vaadin/checkbox/theme/material/vaadin-lit-checkbox.js';
-import '../../src/vaadin-lit-grid-selection-column.js';

package/theme/material/vaadin-lit-grid-sort-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-sorter.js';
-import '../../src/vaadin-lit-grid-sort-column.js';

package/theme/material/vaadin-lit-grid-sorter.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-sorter-styles.js';
-import '../../src/vaadin-lit-grid-sorter.js';

package/theme/material/vaadin-lit-grid-tree-column.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-grid-tree-toggle.js';
-import '../../src/vaadin-lit-grid-tree-column.js';

package/theme/material/vaadin-lit-grid-tree-toggle.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-tree-toggle-styles.js';
-import '../../src/vaadin-lit-grid-tree-toggle.js';

package/theme/material/vaadin-lit-grid.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-grid-styles.js';
-import '../../src/vaadin-lit-grid.js';