@vaadin/grid 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

package/src/vaadin-grid.js

@@ -8,9 +8,11 @@ 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, isChrome, isFirefox, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
@@ -191,7 +193,7 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
  * `reordering` | Set when the grid's columns are being reordered | :host
  * `dragover` | Set when the grid (not a specific row) is dragged over | :host
- * `dragging-rows` : Set when grid rows are dragged  | :host
+ * `dragging-rows` | Set when grid rows are dragged  | :host
  * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell
  * `frozen` | Frozen cell | cell
  * `last-frozen` | Last frozen cell | cell
@@ -209,7 +211,7 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * `drag-disabled` | Set to a row that isn't available for dragging | row
  * `drop-disabled` | Set to a row that can't be dropped on top of | row
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} active-item-changed - Fired when the `activeItem` property changes.
  * @fires {CustomEvent} cell-activate - Fired when the cell is activated with click or keyboard.
@@ -258,7 +260,9 @@ class Grid extends ElementMixin(
                         FilterMixin(
                           ColumnReorderingMixin(
                             ColumnResizingMixin(
-                              EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(PolymerElement)))),
+                              ControllerMixin(
+                                EventContextMixin(DragAndDropMixin(StylingMixin(TabindexMixin(PolymerElement)))),
+                              ),
                             ),
                           ),
                         ),
@@ -293,6 +297,8 @@ class Grid extends ElementMixin(
         <div part="reorder-ghost"></div>
       </div>
 
+      <slot name="tooltip"></slot>
+
       <div id="focusexit" tabindex="0"></div>
     `;
   }
@@ -394,6 +400,7 @@ class Grid extends ElementMixin(
   disconnectedCallback() {
     super.disconnectedCallback();
     this.isAttached = false;
+    this._hideTooltip();
   }
 
   /** @private */
@@ -453,6 +460,10 @@ class Grid extends ElementMixin(
     new ResizeObserver(() => setTimeout(() => this.__updateFooterPositioning())).observe(this.$.footer);
 
     processTemplates(this);
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+    this._tooltipController.setManual(true);
   }
 
   /**
@@ -594,6 +605,11 @@ class Grid extends ElementMixin(
     // Flush to make sure DOM is up-to-date when measuring the column widths
     this.__virtualizer.flush();
 
+    // Flush to account for any changes to the visibility of the columns
+    if (this._debouncerHiddenChanged) {
+      this._debouncerHiddenChanged.flush();
+    }
+
     cols.forEach((col) => {
       col.width = `${this.__getDistributedWidth(col)}px`;
     });
@@ -655,6 +671,15 @@ class Grid extends ElementMixin(
     cell.id = slotName.replace('-content-', '-');
     cell.setAttribute('tabindex', '-1');
     cell.setAttribute('role', tagName === 'td' ? 'gridcell' : 'columnheader');
+    cell.addEventListener('mouseenter', (event) => {
+      this._showTooltip(event);
+    });
+    cell.addEventListener('mouseleave', () => {
+      this._hideTooltip();
+    });
+    cell.addEventListener('mousedown', () => {
+      this._hideTooltip();
+    });
 
     const slot = document.createElement('slot');
     slot.setAttribute('name', slotName);
@@ -708,7 +733,9 @@ class Grid extends ElementMixin(
 
     const contentsFragment = document.createDocumentFragment();
 
-    Array.from(row.children).forEach((cell) => (cell._vacant = true));
+    Array.from(row.children).forEach((cell) => {
+      cell._vacant = true;
+    });
     row.innerHTML = '';
 
     columns
@@ -719,7 +746,7 @@ class Grid extends ElementMixin(
         if (section === 'body') {
           // Body
           column._cells = column._cells || [];
-          cell = column._cells.filter((cell) => cell._vacant)[0];
+          cell = column._cells.find((cell) => cell._vacant);
           if (!cell) {
             cell = this._createCell('td');
             column._cells.push(cell);
@@ -730,7 +757,7 @@ class Grid extends ElementMixin(
           if (index === cols.length - 1 && this.rowDetailsRenderer) {
             // Add details cell as last cell to body rows
             this._detailsCells = this._detailsCells || [];
-            const detailsCell = this._detailsCells.filter((cell) => cell._vacant)[0] || this._createCell('td');
+            const detailsCell = this._detailsCells.find((cell) => cell._vacant) || this._createCell('td');
             if (this._detailsCells.indexOf(detailsCell) === -1) {
               this._detailsCells.push(detailsCell);
             }
@@ -756,7 +783,7 @@ class Grid extends ElementMixin(
             column[`_${section}Cell`] = cell;
           } else {
             column._emptyCells = column._emptyCells || [];
-            cell = column._emptyCells.filter((cell) => cell._vacant)[0] || this._createCell(tagName);
+            cell = column._emptyCells.find((cell) => cell._vacant) || this._createCell(tagName);
             cell._column = column;
             row.appendChild(cell);
             if (column._emptyCells.indexOf(cell) === -1) {
@@ -977,6 +1004,24 @@ class Grid extends ElementMixin(
     };
   }
 
+  /**
+   * @param {Event} event
+   * @protected
+   */
+  _showTooltip(event) {
+    // Check if there is a slotted vaadin-tooltip element.
+    if (this._tooltipController.node && this._tooltipController.node.isConnected) {
+      this._tooltipController.setTarget(event.target);
+      this._tooltipController.setContext(this.getEventContext(event));
+      this._tooltipController.setOpened(true);
+    }
+  }
+
+  /** @protected */
+  _hideTooltip() {
+    this._tooltipController.setOpened(false);
+  }
+
   /**
    * Requests an update for the content of cells.
    *
@@ -993,7 +1038,9 @@ class Grid extends ElementMixin(
       // Header and footer renderers
       this._columnTree.forEach((level) => {
         level.forEach((column) => {
-          column._renderHeaderAndFooter();
+          if (column._renderHeaderAndFooter) {
+            column._renderHeaderAndFooter();
+          }
         });
       });
 

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

@@ -395,13 +395,3 @@ registerStyles(
   `,
   { moduleId: 'lumo-grid' },
 );
-
-registerStyles(
-  'vaadin-checkbox',
-  css`
-    :host(.vaadin-grid-select-all-checkbox) {
-      font-size: var(--lumo-font-size-m);
-    }
-  `,
-  { moduleId: 'vaadin-grid-select-all-checkbox-lumo' },
-);