@vaadin/grid 24.2.0-dev.f254716fe → 24.3.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.3.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -46,18 +46,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-dev.f254716fe",
-    "@vaadin/checkbox": "24.2.0-dev.f254716fe",
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
-    "@vaadin/lit-renderer": "24.2.0-dev.f254716fe",
-    "@vaadin/text-field": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.f254716fe"
+    "@vaadin/a11y-base": "24.3.0-alpha2",
+    "@vaadin/checkbox": "24.3.0-alpha2",
+    "@vaadin/component-base": "24.3.0-alpha2",
+    "@vaadin/lit-renderer": "24.3.0-alpha2",
+    "@vaadin/text-field": "24.3.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "0fd437292fa2a2f65e29b424d2456909ad2d684b"
 }

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

@@ -62,7 +62,7 @@ export const ArrayDataProviderMixin = (superClass) =>
         } else if (this._arrayDataProvider.__items === items) {
           // The items array was modified
           this.clearCache();
-          this.size = this._effectiveSize;
+          this.size = this._flatSize;
         } else {
           // The items array was replaced
           this.__setArrayDataProvider(items);

package/src/vaadin-grid-column-group-mixin.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { ColumnBaseMixinClass } from './vaadin-grid-column.js';
+
+export interface GridColumnGroupMixin<TItem, Column extends ColumnBaseMixinClass<TItem, Column>>
+  extends ColumnBaseMixinClass<TItem, Column> {
+  /**
+   * Flex grow ratio for the column group as the sum of the ratios of its child columns.
+   * @attr {number} flex-grow
+   */
+  readonly flexGrow: number | null | undefined;
+
+  /**
+   * Width of the column group as the sum of the widths of its child columns.
+   */
+  readonly width: string | null | undefined;
+}

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

@@ -0,0 +1,369 @@
+/**
+ * @license
+ * 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';
+
+/**
+ * A mixin providing common vaadin-grid-column-group functionality.
+ *
+ * @polymerMixin
+ * @mixes ColumnBaseMixin
+ */
+export const GridColumnGroupMixin = (superClass) =>
+  class extends ColumnBaseMixin(superClass) {
+    static get properties() {
+      return {
+        /** @private */
+        _childColumns: {
+          value() {
+            return this._getChildColumns(this);
+          },
+        },
+
+        /**
+         * Flex grow ratio for the column group as the sum of the ratios of its child columns.
+         * @attr {number} flex-grow
+         */
+        flexGrow: {
+          type: Number,
+          readOnly: true,
+        },
+
+        /**
+         * Width of the column group as the sum of the widths of its child columns.
+         */
+        width: {
+          type: String,
+          readOnly: true,
+        },
+
+        /** @private */
+        _visibleChildColumns: Array,
+
+        /** @private */
+        _colSpan: Number,
+
+        /** @private */
+        _rootColumns: Array,
+      };
+    }
+
+    static get observers() {
+      return [
+        '_groupFrozenChanged(frozen, _rootColumns)',
+        '_groupFrozenToEndChanged(frozenToEnd, _rootColumns)',
+        '_groupHiddenChanged(hidden)',
+        '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
+        '_groupOrderChanged(_order, _rootColumns)',
+        '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
+        '_groupResizableChanged(resizable, _rootColumns)',
+      ];
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+      this._addNodeObserver();
+      this._updateFlexAndWidth();
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      if (this._observer) {
+        this._observer.disconnect();
+      }
+    }
+
+    /**
+     * @param {string} path
+     * @param {unknown=} value
+     * @protected
+     */
+    _columnPropChanged(path, value) {
+      if (path === 'hidden') {
+        // 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._preventHiddenSynchronization = false;
+      }
+
+      if (/flexGrow|width|hidden|_childColumns/u.test(path)) {
+        this._updateFlexAndWidth();
+      }
+
+      // Don't unfreeze the frozen group because of a non-frozen child
+      if (path === 'frozen' && !this.frozen) {
+        this.frozen = value;
+      }
+
+      // Don't unfreeze the frozen group because of a non-frozen child
+      if (path === 'lastFrozen' && !this._lastFrozen) {
+        this._lastFrozen = value;
+      }
+
+      // Don't unfreeze the frozen group because of a non-frozen child
+      if (path === 'frozenToEnd' && !this.frozenToEnd) {
+        this.frozenToEnd = value;
+      }
+
+      // Don't unfreeze the frozen group because of a non-frozen child
+      if (path === 'firstFrozenToEnd' && !this._firstFrozenToEnd) {
+        this._firstFrozenToEnd = value;
+      }
+    }
+
+    /** @private */
+    _groupOrderChanged(order, rootColumns) {
+      if (rootColumns) {
+        const _rootColumns = rootColumns.slice(0);
+
+        if (!order) {
+          _rootColumns.forEach((column) => {
+            column._order = 0;
+          });
+          return;
+        }
+        // The parent column order number cascades downwards to it's children
+        // so that the resulting order numbering constructs as follows:
+        // [             1000              ]
+        // [     1100    ] | [     1200    ]
+        // [1110] | [1120] | [1210] | [1220]
+
+        // Trailing zeros are counted so we know the level on which we're working on.
+        const trailingZeros = /(0+)$/u.exec(order).pop().length; // NOSONAR
+
+        // In an unlikely situation where a group has more than 9 child columns,
+        // the child scope must have 1 digit less...
+        // Log^a_b = Ln(a)/Ln(b)
+        // Number of digits of a number is equal to floor(Log(number)_10) + 1
+        const childCountDigits = ~~(Math.log(rootColumns.length) / Math.LN10) + 1;
+
+        // Final scope for the child columns needs to mind both factors.
+        const scope = 10 ** (trailingZeros - childCountDigits);
+
+        if (_rootColumns[0] && _rootColumns[0]._order) {
+          _rootColumns.sort((a, b) => a._order - b._order);
+        }
+        updateColumnOrders(_rootColumns, scope, order);
+      }
+    }
+
+    /** @private */
+    _groupReorderStatusChanged(reorderStatus, rootColumns) {
+      if (reorderStatus === undefined || rootColumns === undefined) {
+        return;
+      }
+
+      rootColumns.forEach((column) => {
+        column._reorderStatus = reorderStatus;
+      });
+    }
+
+    /** @private */
+    _groupResizableChanged(resizable, rootColumns) {
+      if (resizable === undefined || rootColumns === undefined) {
+        return;
+      }
+
+      rootColumns.forEach((column) => {
+        column.resizable = resizable;
+      });
+    }
+
+    /** @private */
+    _updateVisibleChildColumns(childColumns) {
+      this._visibleChildColumns = Array.prototype.filter.call(childColumns, (col) => !col.hidden);
+      this._colSpan = this._visibleChildColumns.length;
+      this._updateAutoHidden();
+    }
+
+    /** @protected */
+    _updateFlexAndWidth() {
+      if (!this._visibleChildColumns) {
+        return;
+      }
+
+      if (this._visibleChildColumns.length > 0) {
+        const width = this._visibleChildColumns
+          .reduce((prev, curr) => {
+            prev += ` + ${(curr.width || '0px').replace('calc', '')}`;
+            return prev;
+          }, '')
+          .substring(3);
+        this._setWidth(`calc(${width})`);
+      } else {
+        this._setWidth('0px');
+      }
+
+      this._setFlexGrow(
+        Array.prototype.reduce.call(this._visibleChildColumns, (prev, curr) => prev + curr.flexGrow, 0),
+      );
+    }
+
+    /**
+     * This method is called before the group's frozen value is being propagated to the child columns.
+     * In case some of the child columns are frozen, while others are not, the non-frozen ones
+     * will get automatically frozen as well. As this may sometimes be unintended, this method
+     * shows a warning in the console in such cases.
+     * @private
+     */
+    __scheduleAutoFreezeWarning(columns, frozenProp) {
+      if (this._grid) {
+        // Derive the attribute name from the property name
+        const frozenAttr = frozenProp.replace(/([A-Z])/gu, '-$1').toLowerCase();
+
+        // Check if all the columns have the same frozen value
+        const firstColumnFrozen = columns[0][frozenProp] || columns[0].hasAttribute(frozenAttr);
+        const allSameFrozen = columns.every((column) => {
+          return (column[frozenProp] || column.hasAttribute(frozenAttr)) === firstColumnFrozen;
+        });
+
+        if (!allSameFrozen) {
+          // Some of the child columns are frozen, some are not. Show a warning.
+          this._grid.__autoFreezeWarningDebouncer = Debouncer.debounce(
+            this._grid.__autoFreezeWarningDebouncer,
+            animationFrame,
+            () => {
+              console.warn(
+                `WARNING: Joining ${frozenProp} and non-${frozenProp} Grid columns inside the same column group! ` +
+                  `This will automatically freeze all the joined columns to avoid rendering issues. ` +
+                  `If this was intentional, consider marking each joined column explicitly as ${frozenProp}. ` +
+                  `Otherwise, exclude the ${frozenProp} columns from the joined group.`,
+              );
+            },
+          );
+        }
+      }
+    }
+
+    /** @private */
+    _groupFrozenChanged(frozen, rootColumns) {
+      if (rootColumns === undefined || frozen === undefined) {
+        return;
+      }
+
+      // Don't propagate the default `false` value.
+      if (frozen !== false) {
+        this.__scheduleAutoFreezeWarning(rootColumns, 'frozen');
+
+        Array.from(rootColumns).forEach((col) => {
+          col.frozen = frozen;
+        });
+      }
+    }
+
+    /** @private */
+    _groupFrozenToEndChanged(frozenToEnd, rootColumns) {
+      if (rootColumns === undefined || frozenToEnd === undefined) {
+        return;
+      }
+
+      // Don't propagate the default `false` value.
+      if (frozenToEnd !== false) {
+        this.__scheduleAutoFreezeWarning(rootColumns, 'frozenToEnd');
+
+        Array.from(rootColumns).forEach((col) => {
+          col.frozenToEnd = frozenToEnd;
+        });
+      }
+    }
+
+    /** @private */
+    _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;
+    }
+
+    /** @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 */
+    _synchronizeHidden() {
+      if (this._childColumns && !this._preventHiddenSynchronization) {
+        this._childColumns.forEach((column) => {
+          column.hidden = this.hidden;
+        });
+      }
+    }
+
+    /** @private */
+    _colSpanChanged(colSpan, headerCell, footerCell) {
+      if (headerCell) {
+        headerCell.setAttribute('colspan', colSpan);
+        if (this._grid) {
+          this._grid._a11yUpdateCellColspan(headerCell, colSpan);
+        }
+      }
+      if (footerCell) {
+        footerCell.setAttribute('colspan', colSpan);
+        if (this._grid) {
+          this._grid._a11yUpdateCellColspan(footerCell, colSpan);
+        }
+      }
+    }
+
+    /**
+     * @param {!GridColumnGroup} el
+     * @return {!Array<!GridColumn>}
+     * @protected
+     */
+    _getChildColumns(el) {
+      return FlattenedNodesObserver.getFlattenedNodes(el).filter(this._isColumnElement);
+    }
+
+    /** @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.flush();
+    }
+
+    /**
+     * @param {!Node} node
+     * @return {boolean}
+     * @protected
+     */
+    _isColumnElement(node) {
+      return node.nodeType === Node.ELEMENT_NODE && /\bcolumn\b/u.test(node.localName);
+    }
+  };

package/src/vaadin-grid-column-group.d.ts

@@ -4,7 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { GridDefaultItem } from './vaadin-grid.js';
-import type { ColumnBaseMixinClass } from './vaadin-grid-column.js';
+import type { GridColumnGroupMixin } from './vaadin-grid-column-group-mixin.js';
+export * from './vaadin-grid-column-group-mixin.js';
 
 /**
  * A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and
@@ -35,20 +36,9 @@ import type { ColumnBaseMixinClass } from './vaadin-grid-column.js';
  * column2.renderer = (root, column, model) => { ... };
  * ```
  */
-declare class GridColumnGroup extends HTMLElement {
-  /**
-   * Flex grow ratio for the column group as the sum of the ratios of its child columns.
-   * @attr {number} flex-grow
-   */
-  readonly flexGrow: number | null | undefined;
+declare class GridColumnGroup extends HTMLElement {}
 
-  /**
-   * Width of the column group as the sum of the widths of its child columns.
-   */
-  readonly width: string | null | undefined;
-}
-
-interface GridColumnGroup<TItem = GridDefaultItem> extends ColumnBaseMixinClass<TItem> {}
+interface GridColumnGroup<TItem = GridDefaultItem> extends GridColumnGroupMixin<TItem, GridColumnGroup<TItem>> {}
 
 declare global {
   interface HTMLElementTagNameMap {