@vaadin/grid 23.3.25 → 23.4.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.3.25",
+  "version": "23.4.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -46,17 +46,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "~23.3.25",
-    "@vaadin/component-base": "~23.3.25",
-    "@vaadin/lit-renderer": "~23.3.25",
-    "@vaadin/text-field": "~23.3.25",
-    "@vaadin/vaadin-lumo-styles": "~23.3.25",
-    "@vaadin/vaadin-material-styles": "~23.3.25",
-    "@vaadin/vaadin-themable-mixin": "~23.3.25"
+    "@vaadin/checkbox": "23.4.0-alpha1",
+    "@vaadin/component-base": "23.4.0-alpha1",
+    "@vaadin/lit-renderer": "23.4.0-alpha1",
+    "@vaadin/text-field": "23.4.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.4.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.4.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.4.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "~23.3.25",
+    "@vaadin/polymer-legacy-adapter": "23.4.0-alpha1",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
@@ -65,5 +65,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "61b55b7a7e925aa853530b363bfa3549e44c661c"
+  "gitHead": "a7cdbab591c62ee8dbc0e91fee877fbbf4b92bad"
 }

package/src/vaadin-grid-column.js

@@ -437,7 +437,7 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _textAlignChanged(textAlign) {
-      if (textAlign === undefined) {
+      if (textAlign === undefined || this._grid === undefined) {
         return;
       }
       if (['start', 'end', 'center'].indexOf(textAlign) === -1) {

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

@@ -389,6 +389,7 @@ export const DataProviderMixin = (superClass) =>
               });
 
             this.__scrollToPendingIndex();
+            this.__dispatchPendingBodyCellFocus();
           });
 
           if (!this._cache.isLoading()) {

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -662,7 +662,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       // If the target focusable is tied to a column that is not visible,
       // find the first visible column and update the target in order to
       // prevent scrolling to the start of the row.
-      if (focusStepTarget && focusStepTarget._column && !this.__isColumnInViewport(focusStepTarget._column)) {
+      if (focusStepTarget && !this.__isHorizontallyInViewport(focusStepTarget)) {
         const firstVisibleColumn = this._getColumnsInOrder().find((column) => this.__isColumnInViewport(column));
         if (firstVisibleColumn) {
           if (focusStepTarget === this._headerFocusable) {
@@ -688,9 +688,14 @@ export const KeyboardNavigationMixin = (superClass) =>
         // Assume frozen columns to always be inside the viewport
         return true;
       }
+      return this.__isHorizontallyInViewport(column._sizerCell);
+    }
+
+    /** @private */
+    __isHorizontallyInViewport(element) {
       return (
-        column._sizerCell.offsetLeft + column._sizerCell.offsetWidth >= this._scrollLeft &&
-        column._sizerCell.offsetLeft <= this._scrollLeft + this.clientWidth
+        element.offsetLeft + element.offsetWidth >= this._scrollLeft &&
+        element.offsetLeft <= this._scrollLeft + this.clientWidth
       );
     }
 
@@ -832,9 +837,12 @@ export const KeyboardNavigationMixin = (superClass) =>
         }
 
         if (cell) {
-          // Fire a public event for cell.
           const context = this.getEventContext(e);
-          cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
+          this.__pendingBodyCellFocus = this.loading && context.section === 'body';
+          if (!this.__pendingBodyCellFocus) {
+            // Fire a cell-focus event for the cell
+            cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true, detail: { context } }));
+          }
           this._focusedCell = cell._focusButton || cell;
 
           if (isKeyboardActive() && e.target === cell) {
@@ -848,6 +856,16 @@ export const KeyboardNavigationMixin = (superClass) =>
       this._detectFocusedItemIndex(e);
     }
 
+    /**
+     * @private
+     */
+    __dispatchPendingBodyCellFocus() {
+      // If the body cell focus was pending, dispatch the event once loading is done
+      if (this.__pendingBodyCellFocus && this.shadowRoot.activeElement === this._itemsFocusable) {
+        this._itemsFocusable.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      }
+    }
+
     /**
      * Get the focusable element depending on the current focus mode.
      * It can be a row, a cell, or a focusable div inside a cell.

package/src/vaadin-grid-row-details-mixin.js

@@ -153,6 +153,13 @@ export const RowDetailsMixin = (superClass) =>
         return;
       }
 
+      this.__updateDetailsRowPadding(row, cell);
+      // Ensure the row has correct padding after frame (the resize observer might miss it)
+      requestAnimationFrame(() => this.__updateDetailsRowPadding(row, cell));
+    }
+
+    /** @private */
+    __updateDetailsRowPadding(row, cell) {
       if (cell.hidden) {
         row.style.removeProperty('padding-bottom');
       } else {

package/src/vaadin-grid-selection-column-base-mixin.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @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 { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function GridSelectionColumnBaseMixin<TItem, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<GridSelectionColumnBaseMixinClass<TItem>> & T;
+
+/**
+ * A mixin that provides basic functionality for the
+ * `<vaadin-grid-selection-column>`. This includes properties, cell rendering,
+ * and overridable methods for handling changes to the selection state.
+ *
+ * **NOTE**: This mixin is re-used by the Flow component, and as such must not
+ * implement any selection state updates for the column element or the grid.
+ * Web component-specific selection state updates must be implemented in the
+ * `<vaadin-grid-selection-column>` itself, by overriding the protected methods
+ * provided by this mixin.
+ *
+ * @polymerMixin
+ */
+export declare class GridSelectionColumnBaseMixinClass<TItem> {
+  /**
+   * When true, all the items are selected.
+   * @attr {boolean} select-all
+   */
+  selectAll: boolean;
+
+  /**
+   * When true, the active gets automatically selected.
+   * @attr {boolean} auto-select
+   */
+  autoSelect: boolean;
+
+  /**
+   * When true, rows can be selected by dragging over the selection column.
+   * @attr {boolean} drag-select
+   */
+  dragSelect: boolean;
+
+  /**
+   * Override to handle the user selecting all items.
+   */
+  protected _selectAll(): void;
+
+  /**
+   * Override to handle the user deselecting all items.
+   */
+  protected _deselectAll(): void;
+
+  /**
+   * Override to handle the user selecting an item.
+   */
+  protected _selectItem(item: TItem): void;
+
+  /**
+   * Override to handle the user deselecting an item.
+   */
+  protected _deselectItem(item: TItem): void;
+}

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

@@ -0,0 +1,342 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { addListener } from '@vaadin/component-base/src/gestures.js';
+
+/**
+ * A mixin that provides basic functionality for the
+ * `<vaadin-grid-selection-column>`. This includes properties, cell rendering,
+ * and overridable methods for handling changes to the selection state.
+ *
+ * **NOTE**: This mixin is re-used by the Flow component, and as such must not
+ * implement any selection state updates for the column element or the grid.
+ * Web component-specific selection state updates must be implemented in the
+ * `<vaadin-grid-selection-column>` itself, by overriding the protected methods
+ * provided by this mixin.
+ *
+ * @polymerMixin
+ */
+export const GridSelectionColumnBaseMixin = (superClass) =>
+  class GridSelectionColumnBaseMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Width of the cells for this column.
+         */
+        width: {
+          type: String,
+          value: '58px',
+        },
+
+        /**
+         * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
+         * @attr {number} flex-grow
+         * @type {number}
+         */
+        flexGrow: {
+          type: Number,
+          value: 0,
+        },
+
+        /**
+         * When true, all the items are selected.
+         * @attr {boolean} select-all
+         * @type {boolean}
+         */
+        selectAll: {
+          type: Boolean,
+          value: false,
+          notify: true,
+        },
+
+        /**
+         * When true, the active gets automatically selected.
+         * @attr {boolean} auto-select
+         * @type {boolean}
+         */
+        autoSelect: {
+          type: Boolean,
+          value: false,
+        },
+
+        /**
+         * When true, rows can be selected by dragging over the selection column.
+         * @attr {boolean} drag-select
+         * @type {boolean}
+         */
+        dragSelect: {
+          type: Boolean,
+          value: false,
+        },
+
+        /** @protected */
+        _indeterminate: Boolean,
+
+        /** @protected */
+        _selectAllHidden: Boolean,
+      };
+    }
+
+    static get observers() {
+      return [
+        '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, selectAll, _indeterminate, _selectAllHidden)',
+      ];
+    }
+
+    /**
+     * Renders the Select All checkbox to the header cell.
+     *
+     * @override
+     */
+    _defaultHeaderRenderer(root, _column) {
+      let checkbox = root.firstElementChild;
+      if (!checkbox) {
+        checkbox = document.createElement('vaadin-checkbox');
+        checkbox.setAttribute('aria-label', 'Select All');
+        checkbox.classList.add('vaadin-grid-select-all-checkbox');
+        root.appendChild(checkbox);
+        // Add listener after appending, so we can skip the initial change event
+        checkbox.addEventListener('checked-changed', this.__onSelectAllCheckedChanged.bind(this));
+      }
+
+      const checked = this.__isChecked(this.selectAll, this._indeterminate);
+      checkbox.__rendererChecked = checked;
+      checkbox.checked = checked;
+      checkbox.hidden = this._selectAllHidden;
+      checkbox.indeterminate = this._indeterminate;
+    }
+
+    /**
+     * Renders the Select Row checkbox to the body cell.
+     *
+     * @override
+     */
+    _defaultRenderer(root, _column, { item, selected }) {
+      let checkbox = root.firstElementChild;
+      if (!checkbox) {
+        checkbox = document.createElement('vaadin-checkbox');
+        checkbox.setAttribute('aria-label', 'Select Row');
+        root.appendChild(checkbox);
+        // Add listener after appending, so we can skip the initial change event
+        checkbox.addEventListener('checked-changed', this.__onSelectRowCheckedChanged.bind(this));
+        addListener(root, 'track', this.__onCellTrack.bind(this));
+        root.addEventListener('mousedown', this.__onCellMouseDown.bind(this));
+        root.addEventListener('click', this.__onCellClick.bind(this));
+      }
+
+      checkbox.__item = item;
+      checkbox.__rendererChecked = selected;
+      checkbox.checked = selected;
+    }
+
+    /**
+     * Updates the select all state when the Select All checkbox is switched.
+     * The listener handles only user-fired events.
+     *
+     * @private
+     */
+    __onSelectAllCheckedChanged(e) {
+      // Skip if the state is changed by the renderer.
+      if (e.target.checked === e.target.__rendererChecked) {
+        return;
+      }
+
+      if (this._indeterminate || e.target.checked) {
+        this._selectAll();
+      } else {
+        this._deselectAll();
+      }
+    }
+
+    /**
+     * Selects or deselects the row when the Select Row checkbox is switched.
+     * The listener handles only user-fired events.
+     *
+     * @private
+     */
+    __onSelectRowCheckedChanged(e) {
+      // Skip if the state is changed by the renderer.
+      if (e.target.checked === e.target.__rendererChecked) {
+        return;
+      }
+
+      if (e.target.checked) {
+        this._selectItem(e.target.__item);
+      } else {
+        this._deselectItem(e.target.__item);
+      }
+    }
+
+    /** @private */
+    __onCellTrack(event) {
+      if (!this.dragSelect) {
+        return;
+      }
+      this.__dragCurrentY = event.detail.y;
+      this.__dragDy = event.detail.dy;
+      if (event.detail.state === 'start') {
+        const renderedRows = this._grid._getVisibleRows();
+        // Get the row where the drag started
+        const dragStartRow = renderedRows.find((row) => row.contains(event.currentTarget.assignedSlot));
+        // Whether to select or deselect the items on drag
+        this.__dragSelect = !this._grid._isSelected(dragStartRow._item);
+        // Store the index of the row where the drag started
+        this.__dragStartIndex = dragStartRow.index;
+        // Store the item of the row where the drag started
+        this.__dragStartItem = dragStartRow._item;
+        // Start the auto scroller
+        this.__dragAutoScroller();
+      } else if (event.detail.state === 'end') {
+        // If drag start and end stays within the same item, then toggle its state
+        if (this.__dragStartItem) {
+          if (this.__dragSelect) {
+            this._grid.selectItem(this.__dragStartItem);
+          } else {
+            this._grid.deselectItem(this.__dragStartItem);
+          }
+        }
+        // Clear drag state after timeout, which allows preventing the
+        // subsequent click event if drag started and ended on the same item
+        setTimeout(() => {
+          this.__dragStartIndex = undefined;
+        });
+      }
+    }
+
+    /** @private */
+    __onCellMouseDown(e) {
+      if (this.dragSelect) {
+        // Prevent text selection when starting to drag
+        e.preventDefault();
+      }
+    }
+
+    /** @private */
+    __onCellClick(e) {
+      if (this.__dragStartIndex !== undefined) {
+        // Stop the click event if drag was enabled. This click event should
+        // only occur if drag started and stopped on the same item. In that case
+        // the selection state has already been toggled on drag end, and we
+        // don't  want to toggle it again from clicking the checkbox or changing
+        // the active item.
+        e.preventDefault();
+      }
+    }
+
+    /** @private */
+    __dragAutoScroller() {
+      if (this.__dragStartIndex === undefined) {
+        return;
+      }
+      // Get the row being hovered over
+      const renderedRows = this._grid._getVisibleRows();
+      const hoveredRow = renderedRows.find((row) => {
+        const rowRect = row.getBoundingClientRect();
+        return this.__dragCurrentY >= rowRect.top && this.__dragCurrentY <= rowRect.bottom;
+      });
+
+      // Get the index of the row being hovered over or the first/last
+      // visible row if hovering outside the grid
+      let hoveredIndex = hoveredRow ? hoveredRow.index : undefined;
+      const scrollableArea = this.__getScrollableArea();
+      if (this.__dragCurrentY < scrollableArea.top) {
+        hoveredIndex = this._grid._firstVisibleIndex;
+      } else if (this.__dragCurrentY > scrollableArea.bottom) {
+        hoveredIndex = this._grid._lastVisibleIndex;
+      }
+
+      if (hoveredIndex !== undefined) {
+        // Select all items between the start and the current row
+        renderedRows.forEach((row) => {
+          if (
+            (hoveredIndex > this.__dragStartIndex && row.index >= this.__dragStartIndex && row.index <= hoveredIndex) ||
+            (hoveredIndex < this.__dragStartIndex && row.index <= this.__dragStartIndex && row.index >= hoveredIndex)
+          ) {
+            if (this.__dragSelect) {
+              this._grid.selectItem(row._item);
+            } else {
+              this._grid.deselectItem(row._item);
+            }
+            this.__dragStartItem = undefined;
+          }
+        });
+      }
+
+      // Start scrolling in the top/bottom 15% of the scrollable area
+      const scrollTriggerArea = scrollableArea.height * 0.15;
+      // Maximum number of pixels to scroll per iteration
+      const maxScrollAmount = 10;
+
+      if (this.__dragDy < 0 && this.__dragCurrentY < scrollableArea.top + scrollTriggerArea) {
+        const dy = scrollableArea.top + scrollTriggerArea - this.__dragCurrentY;
+        const percentage = Math.min(1, dy / scrollTriggerArea);
+        this._grid.$.table.scrollTop -= percentage * maxScrollAmount;
+      }
+      if (this.__dragDy > 0 && this.__dragCurrentY > scrollableArea.bottom - scrollTriggerArea) {
+        const dy = this.__dragCurrentY - (scrollableArea.bottom - scrollTriggerArea);
+        const percentage = Math.min(1, dy / scrollTriggerArea);
+        this._grid.$.table.scrollTop += percentage * maxScrollAmount;
+      }
+
+      // Schedule the next auto scroll
+      setTimeout(() => this.__dragAutoScroller(), 10);
+    }
+
+    /**
+     * Gets the scrollable area of the grid as a bounding client rect. The
+     * scrollable area is the bounding rect of the grid minus the header and
+     * footer.
+     *
+     * @private
+     */
+    __getScrollableArea() {
+      const gridRect = this._grid.$.table.getBoundingClientRect();
+      const headerRect = this._grid.$.header.getBoundingClientRect();
+      const footerRect = this._grid.$.footer.getBoundingClientRect();
+
+      return {
+        top: gridRect.top + headerRect.height,
+        bottom: gridRect.bottom - footerRect.height,
+        left: gridRect.left,
+        right: gridRect.right,
+        height: gridRect.height - headerRect.height - footerRect.height,
+        width: gridRect.width,
+      };
+    }
+
+    /**
+     * Override to handle the user selecting all items.
+     * @protected
+     */
+    _selectAll() {}
+
+    /**
+     * Override to handle the user deselecting all items.
+     * @protected
+     */
+    _deselectAll() {}
+
+    /**
+     * Override to handle the user selecting an item.
+     * @param {Object} item the item to select
+     * @protected
+     */
+    _selectItem(_item) {}
+
+    /**
+     * Override to handle the user deselecting an item.
+     * @param {Object} item the item to deselect
+     * @protected
+     */
+    _deselectItem(_item) {}
+
+    /**
+     * IOS needs indeterminate + checked at the same time
+     * @private
+     */
+    __isChecked(selectAll, indeterminate) {
+      return indeterminate || selectAll;
+    }
+  };

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

@@ -5,6 +5,7 @@
  */
 import type { GridDefaultItem } from './vaadin-grid.js';
 import { GridColumn } from './vaadin-grid-column.js';
+import type { GridSelectionColumnBaseMixinClass } from './vaadin-grid-selection-column-base-mixin.js';
 
 /**
  * Fired when the `selectAll` property changes.
@@ -42,18 +43,6 @@ export interface GridSelectionColumnEventMap extends HTMLElementEventMap, GridSe
  * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
  */
 declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TItem> {
-  /**
-   * When true, all the items are selected.
-   * @attr {boolean} select-all
-   */
-  selectAll: boolean;
-
-  /**
-   * When true, the active gets automatically selected.
-   * @attr {boolean} auto-select
-   */
-  autoSelect: boolean;
-
   addEventListener<K extends keyof GridSelectionColumnEventMap>(
     type: K,
     listener: (this: GridSelectionColumn<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
@@ -67,6 +56,8 @@ declare class GridSelectionColumn<TItem = GridDefaultItem> extends GridColumn<TI
   ): void;
 }
 
+interface GridSelectionColumn<TItem = GridDefaultItem> extends GridSelectionColumnBaseMixinClass<TItem> {}
+
 declare global {
   interface HTMLElementTagNameMap {
     'vaadin-grid-selection-column': GridSelectionColumn<GridDefaultItem>;