@vaadin/grid 22.0.0-alpha9 → 22.0.0

package/src/vaadin-grid.js

@@ -3,39 +3,31 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import './vaadin-grid-column.js';
+import './vaadin-grid-styles.js';
 import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { isAndroid, isFirefox, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
+import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { Virtualizer } from '@vaadin/virtual-list/src/virtualizer.js';
 import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
 import { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';
 import { ArrayDataProviderMixin } from './vaadin-grid-array-data-provider-mixin.js';
+import { ColumnReorderingMixin } from './vaadin-grid-column-reordering-mixin.js';
 import { ColumnResizingMixin } from './vaadin-grid-column-resizing-mixin.js';
 import { DataProviderMixin } from './vaadin-grid-data-provider-mixin.js';
+import { DragAndDropMixin } from './vaadin-grid-drag-and-drop-mixin.js';
 import { DynamicColumnsMixin } from './vaadin-grid-dynamic-columns-mixin.js';
 import { EventContextMixin } from './vaadin-grid-event-context-mixin.js';
 import { FilterMixin } from './vaadin-grid-filter-mixin.js';
+import { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-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';
 import { SortMixin } from './vaadin-grid-sort-mixin.js';
 import { StylingMixin } from './vaadin-grid-styling-mixin.js';
-import { DragAndDropMixin } from './vaadin-grid-drag-and-drop-mixin.js';
-import { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';
-import { ColumnReorderingMixin } from './vaadin-grid-column-reordering-mixin.js';
-import './vaadin-grid-column.js';
-import './vaadin-grid-styles.js';
-
-const TOUCH_DEVICE = (() => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
 
 /**
  * `<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the
@@ -147,20 +139,16 @@ const TOUCH_DEVICE = (() => {
  * in the second argument of the data provider callback:__
  *
  * ```javascript
- * grid.dataProvider = function(params, callback) {
- *   const url = 'https://api.example/data' +
- *       '?page=' + params.page +        // the requested page index
- *       '&per_page=' + params.pageSize; // number of items on the page
- *   const xhr = new XMLHttpRequest();
- *   xhr.onload = function() {
- *     const response = JSON.parse(xhr.responseText);
- *     callback(
- *       response.employees, // requested page of items
- *       response.totalSize  // total number of items
- *     );
- *   };
- *   xhr.open('GET', url, true);
- *   xhr.send();
+ * grid.dataProvider = ({page, pageSize}, callback) => {
+ *   // page: the requested page index
+ *   // pageSize: number of items on one page
+ *   const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;
+ *
+ *   fetch(url)
+ *     .then((res) => res.json())
+ *     .then(({ employees, totalSize }) => {
+ *       callback(employees, totalSize);
+ *     });
  * };
  * ```
  *
@@ -168,17 +156,12 @@ const TOUCH_DEVICE = (() => {
  *
  * ```javascript
  * grid.size = 200; // The total number of items
- * grid.dataProvider = function(params, callback) {
- *   const url = 'https://api.example/data' +
- *       '?page=' + params.page +        // the requested page index
- *       '&per_page=' + params.pageSize; // number of items on the page
- *   const xhr = new XMLHttpRequest();
- *   xhr.onload = function() {
- *     const response = JSON.parse(xhr.responseText);
- *     callback(response.employees);
- *   };
- *   xhr.open('GET', url, true);
- *   xhr.send();
+ * grid.dataProvider = ({page, pageSize}, callback) => {
+ *   const url = `https://api.example/data?page=${page}&per_page=${pageSize}`;
+ *
+ *   fetch(url)
+ *     .then((res) => res.json())
+ *     .then((resJson) => callback(resJson.employees));
  * };
  * ```
  *
@@ -326,33 +309,31 @@ class Grid extends ElementMixin(
       /** @private */
       _safari: {
         type: Boolean,
-        value: /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+        value: isSafari
       },
 
       /** @private */
       _ios: {
         type: Boolean,
-        value:
-          (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) ||
-          (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+        value: isIOS
       },
 
       /** @private */
       _firefox: {
         type: Boolean,
-        value: navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+        value: isFirefox
       },
 
       /** @private */
       _android: {
         type: Boolean,
-        value: /android/i.test(navigator.userAgent)
+        value: isAndroid
       },
 
       /** @private */
       _touchDevice: {
         type: Boolean,
-        value: TOUCH_DEVICE
+        value: isTouch
       },
 
       /**
@@ -512,6 +493,9 @@ class Grid extends ElementMixin(
 
       // If the focused cell's parent row got hidden by the size change, focus the corresponding new cell
       cellCoordinates && cell.parentElement.hidden && this.__focusBodyCell(cellCoordinates);
+
+      // Make sure the body has a tabbable element
+      this._resetKeyboardNavigation();
     }
   }
 
@@ -532,42 +516,72 @@ class Grid extends ElementMixin(
     }
   }
 
+  /** @private */
+  __getIntrinsicWidth(col) {
+    const initialWidth = col.width;
+    const initialFlexGrow = col.flexGrow;
+
+    col.width = 'auto';
+    col.flexGrow = 0;
+
+    // Note: _allCells only contains cells which are currently rendered in DOM
+    const width = col._allCells
+      .filter((cell) => {
+        // Exclude body cells that are out of the visible viewport
+        return !this.$.items.contains(cell) || this._isInViewport(cell.parentElement);
+      })
+      .reduce((width, cell) => {
+        // Add 1px buffer to the offset width to avoid too narrow columns (sub-pixel rendering)
+        return Math.max(width, cell.offsetWidth + 1);
+      }, 0);
+
+    col.flexGrow = initialFlexGrow;
+    col.width = initialWidth;
+
+    return width;
+  }
+
+  /** @private */
+  __getDistributedWidth(col, innerColumn) {
+    if (col == null || col === this) return 0;
+
+    const columnWidth = Math.max(this.__getIntrinsicWidth(col), this.__getDistributedWidth(col.parentElement, col));
+
+    // we're processing a regular grid-column and not a grid-column-group
+    if (!innerColumn) {
+      return columnWidth;
+    }
+
+    // At the end, the width of each vaadin-grid-column-group is determined by the sum of the width of its children.
+    // Here we determine how much space the vaadin-grid-column-group actually needs to render properly and then we distribute that space
+    // to its children, so when we actually do the summation it will be rendered properly.
+    // Check out vaadin-grid-column-group:_updateFlexAndWidth
+    const columnGroup = col;
+    const columnGroupWidth = columnWidth;
+    const sumOfWidthOfAllChildColumns = columnGroup._visibleChildColumns
+      .map((col) => this.__getIntrinsicWidth(col))
+      .reduce((sum, curr) => sum + curr, 0);
+
+    const extraNecessarySpaceForGridColumnGroup = Math.max(0, columnGroupWidth - sumOfWidthOfAllChildColumns);
+
+    // The distribution of the extra necessary space is done according to the intrinsic width of each child column.
+    // Lets say we need 100 pixels of extra space for the grid-column-group to render properly
+    // it has two grid-column children, |100px|300px| in total 400px
+    // the first column gets 25px of the additional space (100/400)*100 = 25
+    // the second column gets the 75px of the additional space (300/400)*100 = 75
+    const proportionOfExtraSpace = this.__getIntrinsicWidth(innerColumn) / sumOfWidthOfAllChildColumns;
+    const shareOfInnerColumnFromNecessaryExtraSpace = proportionOfExtraSpace * extraNecessarySpaceForGridColumnGroup;
+
+    return this.__getIntrinsicWidth(innerColumn) + shareOfInnerColumnFromNecessaryExtraSpace;
+  }
+
   /**
    * @param {!Array<!GridColumn>} cols the columns to auto size based on their content width
    * @private
    */
   _recalculateColumnWidths(cols) {
-    // Note: The `cols.forEach()` loops below could be implemented as a single loop but this has been
-    // split for performance reasons to batch these similar actions [write/read] together to avoid
-    // unnecessary layout trashing.
-
-    // [write] Set automatic width for all cells (breaks column alignment)
     cols.forEach((col) => {
-      col.width = 'auto';
-      col._origFlexGrow = col.flexGrow;
-      col.flexGrow = 0;
-    });
-    // [read] Measure max cell width in each column
-    cols.forEach((col) => {
-      col._currentWidth = 0;
-      // Note: _allCells only contains cells which are currently rendered in DOM
-      col._allCells
-        .filter((c) => {
-          // Exclude body cells that are out of the visible viewport
-          return !this.$.items.contains(c) || this._isInViewport(c.parentElement);
-        })
-        .forEach((c) => {
-          // Add 1px buffer to the offset width to avoid too narrow columns (sub-pixel rendering)
-          const cellWidth = c.offsetWidth + 1;
-          col._currentWidth = Math.max(col._currentWidth, cellWidth);
-        });
-    });
-    // [write] Set column widths to fit widest measured content
-    cols.forEach((col) => {
-      col.width = `${col._currentWidth}px`;
-      col.flexGrow = col._origFlexGrow;
-      col._currentWidth = undefined;
-      col._origFlexGrow = undefined;
+      col.width = `${this.__getDistributedWidth(col)}px`;
     });
   }
 
@@ -791,6 +805,9 @@ class Grid extends ElementMixin(
     if (row.hidden !== !visibleRowCells.length) {
       row.hidden = !visibleRowCells.length;
     }
+
+    // Make sure the section has a tabbable element
+    this._resetKeyboardNavigation();
   }
 
   /** @private */
@@ -858,6 +875,7 @@ class Grid extends ElementMixin(
     this._a11yUpdateHeaderRows();
     this._a11yUpdateFooterRows();
     this.__updateFooterPositioning();
+    this.generateCellClassNames();
   }
 
   __updateFooterPositioning() {
@@ -884,7 +902,6 @@ class Grid extends ElementMixin(
 
     this._a11yUpdateRowLevel(row, model.level);
     this._a11yUpdateRowSelected(row, model.selected);
-    this._a11yUpdateRowExpanded(row, model.expanded);
     this._a11yUpdateRowDetailsOpened(row, model.detailsOpened);
 
     row.toggleAttribute('expanded', model.expanded);
@@ -902,6 +919,8 @@ class Grid extends ElementMixin(
     });
 
     this._updateDetailsCellHeight(row);
+
+    this._a11yUpdateRowExpanded(row, model.expanded);
   }
 
   /** @private */

package/theme/lumo/vaadin-grid-sorter-styles.js

@@ -1,7 +1,7 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-grid-sorter',

package/theme/lumo/vaadin-grid-styles.js

@@ -1,4 +1,3 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/font-icons.js';
 import '@vaadin/vaadin-lumo-styles/sizing.js';
@@ -6,6 +5,7 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
 import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-grid',
@@ -60,6 +60,10 @@ registerStyles(
 
     /* Focus-ring */
 
+    [part~='row'] {
+      position: relative;
+    }
+
     [part~='row']:focus,
     [part~='cell']:focus {
       outline: none;

package/theme/lumo/vaadin-grid-tree-toggle-styles.js

@@ -1,7 +1,7 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-grid-tree-toggle',

package/theme/material/vaadin-grid-sorter-styles.js

@@ -1,6 +1,6 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-grid-sorter',

package/theme/material/vaadin-grid-styles.js

@@ -1,6 +1,6 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-grid',
@@ -118,6 +118,10 @@ registerStyles(
 
     /* Keyboard navigation */
 
+    [part~='row'] {
+      position: relative;
+    }
+
     [part~='row']:focus,
     [part~='cell']:focus {
       outline: none;

package/theme/material/vaadin-grid-tree-toggle-styles.js

@@ -1,7 +1,7 @@
-import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-grid-tree-toggle',