@vaadin/vaadin-grid 5.9.3 → 5.9.6

package/package.json

@@ -15,7 +15,7 @@
   "repository": "vaadin/vaadin-grid",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-grid",
-  "version": "5.9.3",
+  "version": "5.9.6",
   "main": "vaadin-grid.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",

package/src/vaadin-grid-column-group.js

@@ -82,11 +82,8 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
 
   static get observers() {
     return [
-      '_updateVisibleChildColumns(_childColumns)',
-      '_childColumnsChanged(_childColumns)',
       '_groupFrozenChanged(frozen, _rootColumns)',
-      '_groupHiddenChanged(hidden, _rootColumns)',
-      '_visibleChildColumnsChanged(_visibleChildColumns)',
+      '_groupHiddenChanged(hidden)',
       '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
       '_groupOrderChanged(_order, _rootColumns)',
       '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
@@ -114,9 +111,12 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
    */
   _columnPropChanged(path, value) {
     if (path === 'hidden') {
-      this._preventHiddenCascade = true;
+      // Prevent synchronization of the hidden state to child columns.
+      // If the group is currently auto-hidden, and one column is made visible,
+      // we don't want the other columns to become visible as well.
+      this._preventHiddenSynchronization = true;
       this._updateVisibleChildColumns(this._childColumns);
-      this._preventHiddenCascade = false;
+      this._preventHiddenSynchronization = false;
     }
 
     if (/flexGrow|width|hidden|_childColumns/.test(path)) {
@@ -188,15 +188,9 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
 
   /** @private */
   _updateVisibleChildColumns(childColumns) {
-    this._visibleChildColumns = Array.prototype.filter.call(childColumns, col => !col.hidden);
-  }
-
-  /** @private */
-  _childColumnsChanged(childColumns) {
-    if (!this._autoHidden && this.hidden) {
-      Array.prototype.forEach.call(childColumns, column => column.hidden = true);
-      this._updateVisibleChildColumns(childColumns);
-    }
+    this._visibleChildColumns = Array.prototype.filter.call(childColumns, (col) => !col.hidden);
+    this._colSpan = this._visibleChildColumns.length;
+    this._updateAutoHidden();
   }
 
   /** @protected */
@@ -230,26 +224,31 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
   }
 
   /** @private */
-  _groupHiddenChanged(hidden, rootColumns) {
-    if (rootColumns && !this._preventHiddenCascade) {
-      this._ignoreVisibleChildColumns = true;
-      rootColumns.forEach(column => column.hidden = hidden);
-      this._ignoreVisibleChildColumns = false;
+  _groupHiddenChanged(hidden) {
+    // When initializing the hidden property, only sync hidden state to columns
+    // if group is actually hidden. Otherwise, we could override a hidden column
+    // to be visible.
+    // We always want to run this though if the property is actually changed.
+    if (hidden || this.__groupHiddenInitialized) {
+      this._synchronizeHidden();
     }
+    this.__groupHiddenInitialized = true;
+  }
 
-    this._columnPropChanged('hidden');
+  /** @private */
+  _updateAutoHidden() {
+    const wasAutoHidden = this._autoHidden;
+    this._autoHidden = (this._visibleChildColumns || []).length === 0;
+    // Only modify hidden state if group was auto-hidden, or becomes auto-hidden
+    if (wasAutoHidden || this._autoHidden) {
+      this.hidden = this._autoHidden;
+    }
   }
 
   /** @private */
-  _visibleChildColumnsChanged(visibleChildColumns) {
-    this._colSpan = visibleChildColumns.length;
-
-    if (!this._ignoreVisibleChildColumns) {
-      if (visibleChildColumns.length === 0) {
-        this._autoHidden = this.hidden = true;
-      } else if (this.hidden && this._autoHidden) {
-        this._autoHidden = this.hidden = false;
-      }
+  _synchronizeHidden() {
+    if (this._childColumns && !this._preventHiddenSynchronization) {
+      this._childColumns.forEach((column) => (column.hidden = this.hidden));
     }
   }
 
@@ -280,10 +279,14 @@ class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
       if (info.addedNodes.filter(this._isColumnElement).length > 0 ||
         info.removedNodes.filter(this._isColumnElement).length > 0) {
 
-        this._preventHiddenCascade = true;
+        // Prevent synchronization of the hidden state to child columns.
+        // If the group is currently auto-hidden, and a visible column is added,
+        // we don't want the other columns to become visible as well.
+        this._preventHiddenSynchronization = true;
         this._rootColumns = this._getChildColumns(this);
         this._childColumns = this._rootColumns;
-        this._preventHiddenCascade = false;
+        this._updateVisibleChildColumns(this._childColumns);
+        this._preventHiddenSynchronization = false;
 
         // Update the column tree with microtask timing to avoid shady style scope issues
         microTask.run(() => {

package/src/vaadin-grid-column.js

@@ -310,10 +310,6 @@ export const ColumnBaseMixin = superClass => class ColumnBaseMixin extends super
 
   /** @private */
   __setColumnTemplateOrRenderer(template, renderer, cells) {
-    // no renderer or template needed in a hidden column
-    if (this.hidden) {
-      return;
-    }
     if (template && renderer) {
       throw new Error('You should only use either a renderer or a template');
     }

package/src/vaadin-grid-disabled-mixin.d.ts

@@ -0,0 +1,34 @@
+/**
+ * DO NOT EDIT
+ *
+ * This file was automatically generated by
+ *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
+ *
+ * To modify these typings, edit the source file(s):
+ *   src/vaadin-grid-disabled-mixin.js
+ */
+
+
+// tslint:disable:variable-name Describing an API that's defined elsewhere.
+// tslint:disable:no-any describes the API as best we are able today
+
+export {DisabledMixin};
+
+declare function DisabledMixin<T extends new (...args: any[]) => {}>(base: T): T & DisabledMixinConstructor;
+
+interface DisabledMixinConstructor {
+  new(...args: any[]): DisabledMixin;
+}
+
+export {DisabledMixinConstructor};
+
+interface DisabledMixin {
+  disabled: boolean|null|undefined;
+  _disabledChanged(disabled: any): void;
+
+  /**
+   * Overrides the default element `click` method in order to prevent
+   * firing the `click` event when the element is disabled.
+   */
+  click(): void;
+}

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

@@ -0,0 +1,43 @@
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+/**
+ * @polymerMixin
+ */
+export const DisabledMixin = superClass => class DisabledMixin extends superClass {
+  static get properties() {
+    return {
+      disabled: {
+        type: Boolean,
+        value: false,
+        observer: '_disabledChanged',
+        reflectToAttribute: true
+      }
+    };
+  }
+
+  /** @protected */
+  _disabledChanged(disabled) {
+    if (disabled) {
+      this.setAttribute('tabindex', '-1');
+      this.setAttribute('aria-disabled', 'true');
+    } else {
+      this.removeAttribute('tabindex');
+      this.removeAttribute('aria-disabled');
+    }
+  }
+
+  /**
+   * Overrides the default element `click` method in order to prevent
+   * firing the `click` event when the element is disabled.
+   * @protected
+   * @override
+   */
+  click() {
+    if (!this.disabled) {
+      super.click();
+    }
+  }
+};

package/src/vaadin-grid-styles.js

@@ -31,6 +31,11 @@ VaadinGridStyles.appendChild(
       display: none !important;
     }
 
+    :host([disabled]) {
+      pointer-events: none;
+      animation: none;
+    }
+
     #scroller {
       display: block;
       transform: translateY(0);

package/src/vaadin-grid.d.ts

@@ -13,6 +13,8 @@
 
 import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+import {DisabledMixin} from './vaadin-grid-disabled-mixin.js';
+
 import {ScrollerElement} from './vaadin-grid-scroller.js';
 
 import {A11yMixin} from './vaadin-grid-a11y-mixin.js';

package/src/vaadin-grid.js

@@ -6,6 +6,7 @@ This program is available under Apache License Version 2.0, available at https:/
 import '@polymer/polymer/polymer-legacy.js';
 
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { DisabledMixin } from './vaadin-grid-disabled-mixin.js';
 import { ScrollerElement } from './vaadin-grid-scroller.js';
 import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
 import { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';
@@ -294,7 +295,8 @@ class GridElement extends
                                 EventContextMixin(
                                   DragAndDropMixin(
                                     StylingMixin(
-                                      ScrollerElement)))))))))))))))))) {
+                                      DisabledMixin(
+                                        ScrollerElement))))))))))))))))))) {
   static get template() {
     return html`
     <style include="vaadin-grid-styles"></style>
@@ -323,7 +325,7 @@ class GridElement extends
   }
 
   static get version() {
-    return '5.9.3';
+    return '5.9.6';
   }
 
   static get observers() {
@@ -334,6 +336,12 @@ class GridElement extends
 
   static get properties() {
     return {
+      /** @private */
+      _chrome: {
+        type: Boolean,
+        value: /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor)
+      },
+
       /** @private */
       _safari: {
         type: Boolean,
@@ -599,13 +607,16 @@ class GridElement extends
     // focusable slot wrapper, that is why cells are not focused with
     // mousedown. Workaround: listen for mousedown and focus manually.
     cellContent.addEventListener('mousedown', () => {
-      if (window.chrome) {
+      if (this._chrome) {
         // Chrome bug: focusing before mouseup prevents text selection, see http://crbug.com/771903
-        const mouseUpListener = () => {
-          if (!cellContent.contains(this.getRootNode().activeElement)) {
+        const mouseUpListener = (event) => {
+          // If focus is on element within the cell content — respect it, do not change
+          const contentContainsFocusedElement = cellContent.contains(this.getRootNode().activeElement);
+          // Only focus if mouse is released on cell content itself
+          const mouseUpWithinCell = event.composedPath().indexOf(cellContent) >= 0;
+          if (!contentContainsFocusedElement && mouseUpWithinCell) {
             cell.focus();
           }
-          // If focus is in the cell content — respect it, do not change.
           document.removeEventListener('mouseup', mouseUpListener, true);
         };
         document.addEventListener('mouseup', mouseUpListener, true);

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

@@ -29,6 +29,10 @@ const $_documentContainer = html`<dom-module id="lumo-grid" theme-for="vaadin-gr
         --_lumo-grid-selected-row-color: var(--lumo-primary-color-10pct);
       }
 
+      :host([disabled]) {
+        opacity: 0.7;
+      }
+
       /* No (outer) border */
 
       :host(:not([theme~="no-border"])) {

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

@@ -13,6 +13,10 @@ const $_documentContainer = html`<dom-module id="material-grid" theme-for="vaadi
         color: var(--material-body-text-color);
       }
 
+      :host([disabled]) {
+        opacity: 0.7;
+      }
+
       [part~="cell"] {
         min-height: 48px;
         -webkit-tap-highlight-color: transparent;