@vaadin/grid 25.2.0-alpha9 → 25.2.0-beta1

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

@@ -20,9 +20,6 @@ function isDetailsCell(element) {
   return element.matches('[part~="details-cell"]');
 }
 
-/**
- * @polymerMixin
- */
 export const KeyboardNavigationMixin = (superClass) =>
   class KeyboardNavigationMixin extends superClass {
     static get properties() {
@@ -103,7 +100,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       ['_itemsFocusable', '_footerFocusable', '_headerFocusable'].forEach((prop) => {
         const focusable = this[prop];
         if (value) {
-          const parent = focusable && focusable.parentElement;
+          const parent = focusable?.parentElement;
           if (isCell(focusable)) {
             // Cell itself focusable (default)
             this[prop] = parent;
@@ -428,7 +425,7 @@ export const KeyboardNavigationMixin = (superClass) =>
       const rowGroup = row.parentNode;
       // Body rows have index property, otherwise DOM child index of the row is used.
       if (rowGroup === this.$.items) {
-        return bodyFallbackIndex !== undefined ? bodyFallbackIndex : row.index;
+        return bodyFallbackIndex ?? row.index;
       }
       return [...rowGroup.children].indexOf(row);
     }
@@ -1097,12 +1094,4 @@ export const KeyboardNavigationMixin = (superClass) =>
       }
       return null;
     }
-
-    /**
-     * Fired when a cell is focused with click or keyboard navigation.
-     *
-     * Use context property of @see {@link GridCellFocusEvent} to get detail information about the event.
-     *
-     * @event cell-focus
-     */
   };

package/src/vaadin-grid-mixin.js

@@ -42,25 +42,6 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
 
 /**
  * A mixin providing common grid functionality.
- *
- * @polymerMixin
- * @mixes A11yMixin
- * @mixes ActiveItemMixin
- * @mixes ArrayDataProviderMixin
- * @mixes ColumnResizingMixin
- * @mixes DataProviderMixin
- * @mixes DynamicColumnsMixin
- * @mixes FilterMixin
- * @mixes RowDetailsMixin
- * @mixes ScrollMixin
- * @mixes SelectionMixin
- * @mixes SortMixin
- * @mixes KeyboardNavigationMixin
- * @mixes ColumnReorderingMixin
- * @mixes EventContextMixin
- * @mixes StylingMixin
- * @mixes DragAndDropMixin
- * @mixes ResizeMixin
  */
 export const GridMixin = (superClass) =>
   class extends ColumnAutoWidthMixin(
@@ -417,7 +398,7 @@ export const GridMixin = (superClass) =>
       const slot = document.createElement('slot');
       slot.setAttribute('name', slotName);
 
-      if (column && column._focusButtonMode) {
+      if (column?._focusButtonMode) {
         const div = document.createElement('div');
         div.setAttribute('role', 'button');
         div.setAttribute('tabindex', '-1');
@@ -871,7 +852,7 @@ export const GridMixin = (superClass) =>
     _showTooltip(event) {
       // Check if there is a slotted vaadin-tooltip element.
       const tooltip = this._tooltipController.node;
-      if (tooltip && tooltip.isConnected) {
+      if (tooltip?.isConnected) {
         const target = event.target;
 
         if (!this.__isCellFullyVisible(target)) {
@@ -882,7 +863,7 @@ export const GridMixin = (superClass) =>
         this._tooltipController.setContext(this.getEventContext(event));
 
         // Trigger opening using the corresponding delay.
-        tooltip._stateController.open({
+        this._tooltipController.open({
           focus: event.type === 'focusin',
           hover: event.type === 'mouseenter',
         });
@@ -918,10 +899,7 @@ export const GridMixin = (superClass) =>
 
     /** @protected */
     _hideTooltip(immediate) {
-      const tooltip = this._tooltipController && this._tooltipController.node;
-      if (tooltip) {
-        tooltip._stateController.close(immediate);
-      }
+      this._tooltipController.close(immediate);
     }
 
     /**

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

@@ -6,8 +6,6 @@
 
 /**
  * A mixin to observe size changes of the grid and its main parts.
- *
- * @polymerMixin
  */
 export const ResizeMixin = (superClass) =>
   class extends superClass {

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

@@ -5,9 +5,6 @@
  */
 import { updatePart } from './vaadin-grid-helpers.js';
 
-/**
- * @polymerMixin
- */
 export const RowDetailsMixin = (superClass) =>
   class RowDetailsMixin extends superClass {
     static get properties() {

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

@@ -13,9 +13,6 @@ const timeouts = {
   UPDATE_CONTENT_VISIBILITY: 100,
 };
 
-/**
- * @polymerMixin
- */
 export const ScrollMixin = (superClass) =>
   class ScrollMixin extends superClass {
     static get properties() {

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

@@ -15,8 +15,6 @@ import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures
  * 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 {

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

@@ -5,10 +5,6 @@
  */
 import { GridSelectionColumnBaseMixin } from './vaadin-grid-selection-column-base-mixin.js';
 
-/**
- * @polymerMixin
- * @mixes GridSelectionColumnBaseMixin
- */
 export const GridSelectionColumnMixin = (superClass) =>
   class extends GridSelectionColumnBaseMixin(superClass) {
     static get properties() {

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

@@ -37,7 +37,9 @@ export * from './vaadin-grid-selection-column-mixin.js';
  *
  * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
  */
-declare class GridSelectionColumn<TItem = GridDefaultItem> extends HTMLElement {}
+declare class GridSelectionColumn<TItem = GridDefaultItem> extends HTMLElement {
+  hidden: boolean;
+}
 
 interface GridSelectionColumn<TItem = GridDefaultItem>
   extends GridSelectionColumnMixinClass<TItem>, GridColumnMixin<TItem, GridColumn<TItem>>, GridColumn<TItem> {

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

@@ -34,7 +34,6 @@ import { GridSelectionColumnMixin } from './vaadin-grid-selection-column-mixin.j
  *
  * @customElement vaadin-grid-selection-column
  * @extends GridColumn
- * @mixes GridSelectionColumnMixin
  */
 class GridSelectionColumn extends GridSelectionColumnMixin(GridColumn) {
   static get is() {

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

@@ -4,9 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-/**
- * @polymerMixin
- */
 export const SelectionMixin = (superClass) =>
   class SelectionMixin extends superClass {
     static get properties() {
@@ -42,7 +39,6 @@ export const SelectionMixin = (superClass) =>
          */
         isItemSelectable: {
           type: Function,
-          notify: (() => true)(), // prevent Polymer analyzer from documenting a changed event
         },
 
         /**
@@ -109,6 +105,16 @@ export const SelectionMixin = (superClass) =>
       }
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('isItemSelectable')) {
+        /** @internal to not document it in CEM */
+        this.dispatchEvent(new CustomEvent('is-item-selectable-changed'));
+      }
+    }
+
     /** @private */
     __selectedItemsChanged() {
       this._getRenderedRows().forEach((row) => {
@@ -131,20 +137,4 @@ export const SelectionMixin = (superClass) =>
 
       return selectedKeys;
     }
-
-    /**
-     * Fired when the `selectedItems` property changes.
-     *
-     * @event selected-items-changed
-     */
-
-    /**
-     * Fired when the user selects or deselects an item through the selection column.
-     *
-     * @event item-toggle
-     * @param {Object} detail
-     * @param {GridItem} detail.item the item that was selected or deselected
-     * @param {boolean} detail.selected true if the item was selected
-     * @param {boolean} detail.shiftKey true if the shift key was pressed
-     */
   };

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

@@ -4,9 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-/**
- * @polymerMixin
- */
 export const GridSortColumnMixin = (superClass) =>
   class extends superClass {
     static get properties() {

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

@@ -24,7 +24,9 @@ export * from './vaadin-grid-sort-column-mixin.js';
  *
  * @fires {CustomEvent} direction-changed - Fired when the `direction` property changes.
  */
-declare class GridSortColumn<TItem = GridDefaultItem> extends HTMLElement {}
+declare class GridSortColumn<TItem = GridDefaultItem> extends HTMLElement {
+  hidden: boolean;
+}
 
 interface GridSortColumn<TItem = GridDefaultItem>
   extends GridSortColumnMixinClass, GridColumnMixin<TItem, GridColumn<TItem>>, GridColumn<TItem> {

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

@@ -25,7 +25,6 @@ import { GridSortColumnMixin } from './vaadin-grid-sort-column-mixin.js';
  *
  * @customElement vaadin-grid-sort-column
  * @extends GridColumn
- * @mixes GridSortColumnMixin
  */
 class GridSortColumn extends GridSortColumnMixin(GridColumn) {
   static get is() {

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

@@ -6,9 +6,6 @@
 
 let defaultMultiSortPriority = 'prepend';
 
-/**
- * @polymerMixin
- */
 export const SortMixin = (superClass) =>
   class SortMixin extends superClass {
     static get properties() {

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

@@ -6,8 +6,6 @@
 
 /**
  * A mixin providing common sorter functionality.
- *
- * @polymerMixin
  */
 export const GridSorterMixin = (superClass) =>
   class GridSorterMixinClass extends superClass {

package/src/vaadin-grid-sorter.js

@@ -53,9 +53,6 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
  *
  * @customElement vaadin-grid-sorter
  * @extends HTMLElement
- * @mixes GridSorterMixin
- * @mixes ThemableMixin
- * @mixes DirMixin
  */
 class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {

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

@@ -34,7 +34,7 @@ export declare class StylingMixinClass<TItem> {
   cellPartNameGenerator: GridCellPartNameGenerator<TItem> | null | undefined;
 
   /**
-   * Runs the `cellPastNameGenerator` for the visible cells.
+   * Runs the `cellPartNameGenerator` for the visible cells.
    * If the generator depends on varying conditions, you need to
    * call this function manually in order to update the styles when
    * the conditions change.

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

@@ -5,9 +5,6 @@
  */
 import { iterateChildren, iterateRowCells, updatePart } from './vaadin-grid-helpers.js';
 
-/**
- * @polymerMixin
- */
 export const StylingMixin = (superClass) =>
   class StylingMixin extends superClass {
     static get properties() {

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

@@ -5,9 +5,6 @@
  */
 import { get } from '@vaadin/component-base/src/path-utils.js';
 
-/**
- * @polymerMixin
- */
 export const GridTreeColumnMixin = (superClass) =>
   class extends superClass {
     static get properties() {

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

@@ -20,7 +20,9 @@ import type { GridTreeColumnMixinClass } from './vaadin-grid-tree-column-mixin.j
  *    ...
  * ```
  */
-declare class GridTreeColumn<TItem = GridDefaultItem> extends HTMLElement {}
+declare class GridTreeColumn<TItem = GridDefaultItem> extends HTMLElement {
+  hidden: boolean;
+}
 
 interface GridTreeColumn<TItem = GridDefaultItem>
   extends GridTreeColumnMixinClass<TItem>, GridColumnMixin<TItem, GridColumn<TItem>>, GridColumn<TItem> {}

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

@@ -22,7 +22,6 @@ import { GridTreeColumnMixin } from './vaadin-grid-tree-column-mixin.js';
  * ```
  * @customElement vaadin-grid-tree-column
  * @extends GridColumn
- * @mixes GridTreeColumnMixin
  */
 class GridTreeColumn extends GridTreeColumnMixin(GridColumn) {
   static get is() {

package/src/vaadin-grid-tree-toggle-mixin.js

@@ -5,9 +5,6 @@
  */
 import { isFocusable } from './vaadin-grid-active-item-mixin.js';
 
-/**
- * @polymerMixin
- */
 export const GridTreeToggleMixin = (superClass) =>
   class extends superClass {
     static get properties() {

package/src/vaadin-grid-tree-toggle.js

@@ -61,9 +61,6 @@ import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
  *
  * @customElement vaadin-grid-tree-toggle
  * @extends HTMLElement
- * @mixes ThemableMixin
- * @mixes DirMixin
- * @mixes GridTreeToggleMixin
  */
 class GridTreeToggle extends GridTreeToggleMixin(
   ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),

package/src/vaadin-grid.d.ts

@@ -251,7 +251,7 @@ export type GridDefaultItem = any;
  *
  * @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.
- * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation.
+ * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation. Use the `context` property to read event details.
  * @fires {CustomEvent} column-reorder - Fired when the columns in the grid are reordered.
  * @fires {CustomEvent} column-resize - Fired when the grid column resize is finished.
  * @fires {CustomEvent} data-provider-changed - Fired when the `dataProvider` property changes.

package/src/vaadin-grid.js

@@ -252,7 +252,7 @@ import { GridMixin } from './vaadin-grid-mixin.js';
  *
  * @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.
- * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation.
+ * @fires {CustomEvent} cell-focus - Fired when a cell is focused with click or keyboard navigation. Use the `context` property to read event details.
  * @fires {CustomEvent} column-reorder - Fired when the columns in the grid are reordered.
  * @fires {CustomEvent} column-resize - Fired when the grid column resize is finished.
  * @fires {CustomEvent} data-provider-changed - Fired when the `dataProvider` property changes.
@@ -267,8 +267,6 @@ import { GridMixin } from './vaadin-grid-mixin.js';
  *
  * @customElement vaadin-grid
  * @extends HTMLElement
- * @mixes GridMixin
- * @mixes ThemableMixin
  */
 class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {