@vaadin/grid 24.3.0-alpha5 → 24.3.0-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.3.0-alpha5",
+  "version": "24.3.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,19 @@
     "lit.d.ts",
     "lit.js",
     "src",
+    "!src/lit-all-imports.js",
+    "!src/vaadin-lit-grid-column-group.js",
+    "!src/vaadin-lit-grid-column.js",
+    "!src/vaadin-lit-grid-filter-column.js",
+    "!src/vaadin-lit-grid-filter.js",
+    "!src/vaadin-lit-grid-selection-column.js",
+    "!src/vaadin-lit-grid-sort-column.js",
+    "!src/vaadin-lit-grid-sorter.js",
+    "!src/vaadin-lit-grid-tree-column.js",
+    "!src/vaadin-lit-grid-tree-toggle.js",
+    "!src/vaadin-lit-grid.js",
     "theme",
+    "!theme/lumo/lit-all-imports.js",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -46,14 +58,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.3.0-alpha5",
-    "@vaadin/checkbox": "24.3.0-alpha5",
-    "@vaadin/component-base": "24.3.0-alpha5",
-    "@vaadin/lit-renderer": "24.3.0-alpha5",
-    "@vaadin/text-field": "24.3.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha5",
-    "@vaadin/vaadin-material-styles": "24.3.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha5"
+    "@vaadin/a11y-base": "24.3.0-alpha7",
+    "@vaadin/checkbox": "24.3.0-alpha7",
+    "@vaadin/component-base": "24.3.0-alpha7",
+    "@vaadin/lit-renderer": "24.3.0-alpha7",
+    "@vaadin/text-field": "24.3.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha7",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha7"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -65,5 +77,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b1fb1be6cc5dc69a82952571fbbda4ffd8e7527c"
+  "gitHead": "cf40acccb9e061debdf4d38b4149d6f2c50f8e10"
 }

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

@@ -11,7 +11,7 @@ import { iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
 export const A11yMixin = (superClass) =>
   class A11yMixin extends superClass {
     static get observers() {
-      return ['_a11yUpdateGridSize(size, _columnTree, _columnTree.*)'];
+      return ['_a11yUpdateGridSize(size, _columnTree)'];
     }
 
     /** @private */

package/src/vaadin-grid-active-item-mixin.js

@@ -44,6 +44,7 @@ export const ActiveItemMixin = (superClass) =>
           type: Object,
           notify: true,
           value: null,
+          sync: true,
         },
       };
     }

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

@@ -17,23 +17,24 @@ export const ArrayDataProviderMixin = (superClass) =>
          *
          * @type {Array<!GridItem> | undefined}
          */
-        items: Array,
+        items: {
+          type: Array,
+          sync: true,
+        },
       };
     }
 
     static get observers() {
-      return ['__dataProviderOrItemsChanged(dataProvider, items, isAttached, items.*, _filters, _sorters)'];
+      return ['__dataProviderOrItemsChanged(dataProvider, items, isAttached, _filters, _sorters, items.*)'];
     }
 
     /** @private */
     __setArrayDataProvider(items) {
       const arrayDataProvider = createArrayDataProvider(this.items, {});
       arrayDataProvider.__items = items;
-      this.setProperties({
-        _arrayDataProvider: arrayDataProvider,
-        size: items.length,
-        dataProvider: arrayDataProvider,
-      });
+      this._arrayDataProvider = arrayDataProvider;
+      this.size = items.length;
+      this.dataProvider = arrayDataProvider;
     }
 
     /** @private */
@@ -47,17 +48,13 @@ export const ArrayDataProviderMixin = (superClass) =>
 
         if (dataProvider !== this._arrayDataProvider) {
           // A custom data provider was set externally
-          this.setProperties({
-            _arrayDataProvider: undefined,
-            items: undefined,
-          });
+          this._arrayDataProvider = undefined;
+          this.items = undefined;
         } else if (!items) {
           // The items array was unset
-          this.setProperties({
-            _arrayDataProvider: undefined,
-            dataProvider: undefined,
-            size: 0,
-          });
+          this._arrayDataProvider = undefined;
+          this.dataProvider = undefined;
+          this.size = 0;
           this.clearCache();
         } else if (this._arrayDataProvider.__items === items) {
           // The items array was modified

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

@@ -3,11 +3,10 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { ColumnBaseMixin } from './vaadin-grid-column-mixin.js';
-import { updateColumnOrders } from './vaadin-grid-helpers.js';
+import { ColumnObserver, updateColumnOrders } from './vaadin-grid-helpers.js';
 
 /**
  * A mixin providing common vaadin-grid-column-group functionality.
@@ -33,6 +32,7 @@ export const GridColumnGroupMixin = (superClass) =>
         flexGrow: {
           type: Number,
           readOnly: true,
+          sync: true,
         },
 
         /**
@@ -330,29 +330,24 @@ export const GridColumnGroupMixin = (superClass) =>
      * @protected
      */
     _getChildColumns(el) {
-      return FlattenedNodesObserver.getFlattenedNodes(el).filter(this._isColumnElement);
+      return ColumnObserver.getColumns(el);
     }
 
     /** @private */
     _addNodeObserver() {
-      this._observer = new FlattenedNodesObserver(this, (info) => {
-        if (
-          info.addedNodes.filter(this._isColumnElement).length > 0 ||
-          info.removedNodes.filter(this._isColumnElement).length > 0
-        ) {
-          // 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._updateVisibleChildColumns(this._childColumns);
-          this._preventHiddenSynchronization = false;
-
-          // Update the column tree
-          if (this._grid && this._grid._debounceUpdateColumnTree) {
-            this._grid._debounceUpdateColumnTree();
-          }
+      this._observer = new ColumnObserver(this, () => {
+        // 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._updateVisibleChildColumns(this._childColumns);
+        this._preventHiddenSynchronization = false;
+
+        // Update the column tree
+        if (this._grid && this._grid._debounceUpdateColumnTree) {
+          this._grid._debounceUpdateColumnTree();
         }
       });
       this._observer.flush();

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

@@ -23,6 +23,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         resizable: {
           type: Boolean,
+          sync: true,
           value() {
             if (this.localName === 'vaadin-grid-column-group') {
               return;
@@ -44,6 +45,7 @@ export const ColumnBaseMixin = (superClass) =>
         frozen: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -59,6 +61,7 @@ export const ColumnBaseMixin = (superClass) =>
         frozenToEnd: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -74,6 +77,7 @@ export const ColumnBaseMixin = (superClass) =>
         rowHeader: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -82,6 +86,7 @@ export const ColumnBaseMixin = (superClass) =>
         hidden: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -89,6 +94,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         header: {
           type: String,
+          sync: true,
         },
 
         /**
@@ -99,6 +105,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         textAlign: {
           type: String,
+          sync: true,
         },
 
         /**
@@ -108,6 +115,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         headerPartName: {
           type: String,
+          sync: true,
         },
 
         /**
@@ -117,6 +125,7 @@ export const ColumnBaseMixin = (superClass) =>
          */
         footerPartName: {
           type: String,
+          sync: true,
         },
 
         /**
@@ -126,6 +135,7 @@ export const ColumnBaseMixin = (superClass) =>
         _lastFrozen: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -135,6 +145,7 @@ export const ColumnBaseMixin = (superClass) =>
         _bodyContentHidden: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -144,13 +155,20 @@ export const ColumnBaseMixin = (superClass) =>
         _firstFrozenToEnd: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /** @protected */
-        _order: Number,
+        _order: {
+          type: Number,
+          sync: true,
+        },
 
         /** @private */
-        _reorderStatus: Boolean,
+        _reorderStatus: {
+          type: Boolean,
+          sync: true,
+        },
 
         /**
          * @type {Array<!HTMLElement>}
@@ -189,7 +207,10 @@ export const ColumnBaseMixin = (superClass) =>
          *
          * @type {GridHeaderFooterRenderer | null | undefined}
          */
-        headerRenderer: Function,
+        headerRenderer: {
+          type: Function,
+          sync: true,
+        },
 
         /**
          * Represents the final header renderer computed on the set of observable arguments.
@@ -201,6 +222,7 @@ export const ColumnBaseMixin = (superClass) =>
         _headerRenderer: {
           type: Function,
           computed: '_computeHeaderRenderer(headerRenderer, header, __initialized)',
+          sync: true,
         },
 
         /**
@@ -212,7 +234,10 @@ export const ColumnBaseMixin = (superClass) =>
          *
          * @type {GridHeaderFooterRenderer | null | undefined}
          */
-        footerRenderer: Function,
+        footerRenderer: {
+          type: Function,
+          sync: true,
+        },
 
         /**
          * Represents the final footer renderer computed on the set of observable arguments.
@@ -224,6 +249,7 @@ export const ColumnBaseMixin = (superClass) =>
         _footerRenderer: {
           type: Function,
           computed: '_computeFooterRenderer(footerRenderer, __initialized)',
+          sync: true,
         },
 
         /**
@@ -241,21 +267,21 @@ export const ColumnBaseMixin = (superClass) =>
 
     static get observers() {
       return [
-        '_widthChanged(width, _headerCell, _footerCell, _cells.*)',
-        '_frozenChanged(frozen, _headerCell, _footerCell, _cells.*)',
-        '_frozenToEndChanged(frozenToEnd, _headerCell, _footerCell, _cells.*)',
-        '_flexGrowChanged(flexGrow, _headerCell, _footerCell, _cells.*)',
-        '_textAlignChanged(textAlign, _cells.*, _headerCell, _footerCell)',
-        '_orderChanged(_order, _headerCell, _footerCell, _cells.*)',
+        '_widthChanged(width, _headerCell, _footerCell, _cells)',
+        '_frozenChanged(frozen, _headerCell, _footerCell, _cells)',
+        '_frozenToEndChanged(frozenToEnd, _headerCell, _footerCell, _cells)',
+        '_flexGrowChanged(flexGrow, _headerCell, _footerCell, _cells)',
+        '_textAlignChanged(textAlign, _cells, _headerCell, _footerCell)',
+        '_orderChanged(_order, _headerCell, _footerCell, _cells)',
         '_lastFrozenChanged(_lastFrozen)',
         '_firstFrozenToEndChanged(_firstFrozenToEnd)',
-        '_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, _cells.*, path)',
+        '_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, path)',
         '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header)',
         '_onFooterRendererOrBindingChanged(_footerRenderer, _footerCell)',
         '_resizableChanged(resizable, _headerCell)',
-        '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells.*)',
-        '_hiddenChanged(hidden, _headerCell, _footerCell, _cells.*)',
-        '_rowHeaderChanged(rowHeader, _cells.*)',
+        '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells)',
+        '_hiddenChanged(hidden, _headerCell, _footerCell, _cells)',
+        '_rowHeaderChanged(rowHeader, _cells)',
         '__headerFooterPartNameChanged(_headerCell, _footerCell, headerPartName, footerPartName)',
       ];
     }
@@ -444,11 +470,11 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _rowHeaderChanged(rowHeader, cells) {
-      if (!cells.value) {
+      if (!cells) {
         return;
       }
 
-      cells.value.forEach((cell) => {
+      cells.forEach((cell) => {
         cell.setAttribute('role', rowHeader ? 'rowheader' : 'gridcell');
       });
     }
@@ -826,6 +852,7 @@ export const GridColumnMixin = (superClass) =>
         width: {
           type: String,
           value: '100px',
+          sync: true,
         },
 
         /**
@@ -836,6 +863,7 @@ export const GridColumnMixin = (superClass) =>
         flexGrow: {
           type: Number,
           value: 1,
+          sync: true,
         },
 
         /**
@@ -855,7 +883,10 @@ export const GridColumnMixin = (superClass) =>
          *
          * @type {GridBodyRenderer | null | undefined}
          */
-        renderer: Function,
+        renderer: {
+          type: Function,
+          sync: true,
+        },
 
         /**
          * Represents the final renderer computed on the set of observable arguments.
@@ -867,6 +898,7 @@ export const GridColumnMixin = (superClass) =>
         _renderer: {
           type: Function,
           computed: '_computeRenderer(renderer, __initialized)',
+          sync: true,
         },
 
         /**
@@ -875,6 +907,7 @@ export const GridColumnMixin = (superClass) =>
          */
         path: {
           type: String,
+          sync: true,
         },
 
         /**
@@ -916,7 +949,10 @@ export const GridColumnMixin = (superClass) =>
          * @type {Array<!HTMLElement>}
          * @protected
          */
-        _cells: Array,
+        _cells: {
+          type: Array,
+          sync: true,
+        },
       };
     }
   };

package/src/vaadin-grid-column.js

@@ -27,3 +27,5 @@ class GridColumn extends GridColumnMixin(PolymerElement) {
 defineCustomElement(GridColumn);
 
 export { GridColumn };
+
+export { ColumnBaseMixin } from './vaadin-grid-column-mixin.js';

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

@@ -24,6 +24,16 @@ export const DataProviderMixin = (superClass) =>
         size: {
           type: Number,
           notify: true,
+          sync: true,
+        },
+
+        /**
+         * @type {number}
+         * @protected
+         */
+        _flatSize: {
+          type: Number,
+          sync: true,
         },
 
         /**
@@ -35,6 +45,7 @@ export const DataProviderMixin = (superClass) =>
           type: Number,
           value: 50,
           observer: '_pageSizeChanged',
+          sync: true,
         },
 
         /**
@@ -64,6 +75,7 @@ export const DataProviderMixin = (superClass) =>
           type: Object,
           notify: true,
           observer: '_dataProviderChanged',
+          sync: true,
         },
 
         /**
@@ -82,6 +94,7 @@ export const DataProviderMixin = (superClass) =>
         _hasData: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -92,6 +105,7 @@ export const DataProviderMixin = (superClass) =>
           type: String,
           value: 'children',
           observer: '__itemHasChildrenPathChanged',
+          sync: true,
         },
 
         /**
@@ -101,6 +115,7 @@ export const DataProviderMixin = (superClass) =>
         itemIdPath: {
           type: String,
           value: null,
+          sync: true,
         },
 
         /**
@@ -111,6 +126,7 @@ export const DataProviderMixin = (superClass) =>
           type: Object,
           notify: true,
           value: () => [],
+          sync: true,
         },
 
         /**
@@ -118,13 +134,13 @@ export const DataProviderMixin = (superClass) =>
          */
         __expandedKeys: {
           type: Object,
-          computed: '__computeExpandedKeys(itemIdPath, expandedItems.*)',
+          computed: '__computeExpandedKeys(itemIdPath, expandedItems)',
         },
       };
     }
 
     static get observers() {
-      return ['_sizeChanged(size)', '_expandedItemsChanged(expandedItems.*)'];
+      return ['_sizeChanged(size)', '_expandedItemsChanged(expandedItems)'];
     }
 
     constructor() {
@@ -239,7 +255,7 @@ export const DataProviderMixin = (superClass) =>
      * @protected
      */
     _isExpanded(item) {
-      return this.__expandedKeys.has(this.getItemId(item));
+      return this.__expandedKeys && this.__expandedKeys.has(this.getItemId(item));
     }
 
     /** @private */
@@ -251,7 +267,7 @@ export const DataProviderMixin = (superClass) =>
 
     /** @private */
     __computeExpandedKeys(itemIdPath, expandedItems) {
-      const expanded = expandedItems.base || [];
+      const expanded = expandedItems || [];
       const expandedKeys = new Set();
       expanded.forEach((item) => {
         expandedKeys.add(this.getItemId(item));

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -45,13 +45,19 @@ export const DragAndDropMixin = (superClass) =>
          * @attr {between|on-top|on-top-or-between|on-grid} drop-mode
          * @type {GridDropMode | null | undefined}
          */
-        dropMode: String,
+        dropMode: {
+          type: String,
+          sync: true,
+        },
 
         /**
          * Marks the grid's rows to be available for dragging.
          * @attr {boolean} rows-draggable
          */
-        rowsDraggable: Boolean,
+        rowsDraggable: {
+          type: Boolean,
+          sync: true,
+        },
 
         /**
          * A function that filters dragging of specific grid rows. The return value should be false
@@ -68,7 +74,10 @@ export const DragAndDropMixin = (superClass) =>
          *
          * @type {GridDragAndDropFilter | null | undefined}
          */
-        dragFilter: Function,
+        dragFilter: {
+          type: Function,
+          sync: true,
+        },
 
         /**
          * A function that filters dropping on specific grid rows. The return value should be false
@@ -85,7 +94,10 @@ export const DragAndDropMixin = (superClass) =>
          *
          * @type {GridDragAndDropFilter | null | undefined}
          */
-        dropFilter: Function,
+        dropFilter: {
+          type: Function,
+          sync: true,
+        },
 
         /** @private */
         __dndAutoScrollThreshold: {

package/src/vaadin-grid-dynamic-columns-mixin.js

@@ -3,11 +3,9 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { updateCellState } from './vaadin-grid-helpers.js';
+import { ColumnObserver, updateCellState } from './vaadin-grid-helpers.js';
 
 function arrayEquals(arr1, arr2) {
   if (!arr1 || !arr2 || arr1.length !== arr2.length) {
@@ -59,7 +57,7 @@ export const DynamicColumnsMixin = (superClass) =>
      * @protected
      */
     _getChildColumns(el) {
-      return FlattenedNodesObserver.getFlattenedNodes(el).filter(this._isColumnElement);
+      return ColumnObserver.getColumns(el);
     }
 
     /** @private */
@@ -78,7 +76,7 @@ export const DynamicColumnsMixin = (superClass) =>
 
     /** @private */
     _getColumnTree() {
-      const rootColumns = FlattenedNodesObserver.getFlattenedNodes(this).filter(this._isColumnElement);
+      const rootColumns = ColumnObserver.getColumns(this);
       const columnTree = [rootColumns];
 
       let c = rootColumns;
@@ -100,24 +98,31 @@ export const DynamicColumnsMixin = (superClass) =>
     /** @protected */
     _updateColumnTree() {
       const columnTree = this._getColumnTree();
+
       if (!arrayEquals(columnTree, this._columnTree)) {
+        // Request a synchronoys update for each column
+        columnTree.forEach((columnArray) => {
+          columnArray.forEach((column) => {
+            if (column.performUpdate) {
+              column.performUpdate();
+            }
+          });
+        });
+
         this._columnTree = columnTree;
       }
     }
 
     /** @private */
     _addNodeObserver() {
-      this._observer = new FlattenedNodesObserver(this, (info) => {
-        const hasColumnElements = (nodeCollection) => nodeCollection.filter(this._isColumnElement).length > 0;
-        if (hasColumnElements(info.addedNodes) || hasColumnElements(info.removedNodes)) {
-          const allRemovedCells = info.removedNodes.flatMap((c) => c._allCells);
-          const filterNotConnected = (element) =>
-            allRemovedCells.filter((cell) => cell && cell._content.contains(element)).length;
-
-          this.__removeSorters(this._sorters.filter(filterNotConnected));
-          this.__removeFilters(this._filters.filter(filterNotConnected));
-          this._debounceUpdateColumnTree();
-        }
+      this._observer = new ColumnObserver(this, (_addedColumns, removedColumns) => {
+        const allRemovedCells = removedColumns.flatMap((c) => c._allCells);
+        const filterNotConnected = (element) =>
+          allRemovedCells.filter((cell) => cell && cell._content.contains(element)).length;
+
+        this.__removeSorters(this._sorters.filter(filterNotConnected));
+        this.__removeFilters(this._filters.filter(filterNotConnected));
+        this._debounceUpdateColumnTree();
 
         this._debouncerCheckImports = Debouncer.debounce(
           this._debouncerCheckImports,
@@ -141,7 +146,7 @@ export const DynamicColumnsMixin = (superClass) =>
         'vaadin-grid-sorter',
       ].forEach((elementName) => {
         const element = this.querySelector(elementName);
-        if (element && !(element instanceof PolymerElement)) {
+        if (element && !customElements.get(elementName)) {
           console.warn(`Make sure you have imported the required module for <${elementName}> element.`);
         }
       });