@vaadin/grid 25.1.0-beta1 → 25.1.0-beta3

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

@@ -39,7 +39,6 @@ export const ColumnBaseMixin = (superClass) =>
         /**
          * When true, the column is frozen. When a column inside of a column group is frozen,
          * all of the sibling columns inside the group will get frozen also.
-         * @type {boolean}
          */
         frozen: {
           type: Boolean,
@@ -55,7 +54,6 @@ export const ColumnBaseMixin = (superClass) =>
          *
          * Column can not be set as `frozen` and `frozenToEnd` at the same time.
          * @attr {boolean} frozen-to-end
-         * @type {boolean}
          */
         frozenToEnd: {
           type: Boolean,
@@ -71,7 +69,6 @@ export const ColumnBaseMixin = (superClass) =>
          * while navigating to help user identify the current row as uniquely as possible.
          *
          * @attr {boolean} row-header
-         * @type {boolean}
          */
         rowHeader: {
           type: Boolean,
@@ -100,7 +97,6 @@ export const ColumnBaseMixin = (superClass) =>
          * Aligns the columns cell content horizontally.
          * Supported values: "start", "center" and "end".
          * @attr {start|center|end} text-align
-         * @type {GridColumnTextAlign | null | undefined}
          */
         textAlign: {
           type: String,
@@ -128,7 +124,6 @@ export const ColumnBaseMixin = (superClass) =>
         },
 
         /**
-         * @type {boolean}
          * @protected
          */
         _lastFrozen: {
@@ -138,7 +133,6 @@ export const ColumnBaseMixin = (superClass) =>
         },
 
         /**
-         * @type {boolean}
          * @protected
          */
         _bodyContentHidden: {
@@ -148,7 +142,6 @@ export const ColumnBaseMixin = (superClass) =>
         },
 
         /**
-         * @type {boolean}
          * @protected
          */
         _firstFrozenToEnd: {
@@ -275,7 +268,6 @@ export const ColumnBaseMixin = (superClass) =>
         '_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, path)',
@@ -384,13 +376,6 @@ export const ColumnBaseMixin = (superClass) =>
       });
     }
 
-    /** @private */
-    _orderChanged(order) {
-      this._allCells.forEach((cell) => {
-        cell.style.order = order;
-      });
-    }
-
     /** @private */
     _widthChanged(width) {
       if (this.parentElement && this.parentElement._columnPropChanged) {
@@ -847,7 +832,6 @@ export const GridColumnMixin = (superClass) =>
         /**
          * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
          * @attr {number} flex-grow
-         * @type {number}
          */
         flexGrow: {
           type: Number,
@@ -914,7 +898,6 @@ export const GridColumnMixin = (superClass) =>
          *
          * The column width may still grow larger when `flexGrow` is not 0.
          * @attr {boolean} auto-width
-         * @type {boolean}
          */
         autoWidth: {
           type: Boolean,

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

@@ -5,7 +5,7 @@
  */
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { addListener } from '@vaadin/component-base/src/gestures.js';
-import { iterateChildren, updateColumnOrders } from './vaadin-grid-helpers.js';
+import { getBodyRowCells, iterateChildren, updateColumnOrders } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -17,7 +17,6 @@ export const ColumnReorderingMixin = (superClass) =>
         /**
          * Set to true to allow column reordering.
          * @attr {boolean} column-reordering-allowed
-         * @type {boolean}
          */
         columnReorderingAllowed: {
           type: Boolean,
@@ -63,8 +62,24 @@ export const ColumnReorderingMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    _cancelReorderForMultiTouch(e) {
+      if (e.touches.length > 1) {
+        clearTimeout(this._startTouchReorderTimeout);
+        if (this._draggedColumn) {
+          this._onTrackEnd();
+        }
+        return true;
+      }
+      return false;
+    }
+
     /** @private */
     _onTouchStart(e) {
+      if (this._cancelReorderForMultiTouch(e)) {
+        return;
+      }
+
       // Touch event, delay activation by 100ms
       this._startTouchReorderTimeout = setTimeout(() => {
         this._onTrackStart({
@@ -78,6 +93,10 @@ export const ColumnReorderingMixin = (superClass) =>
 
     /** @private */
     _onTouchMove(e) {
+      if (this._cancelReorderForMultiTouch(e)) {
+        return;
+      }
+
       if (this._draggedColumn) {
         e.preventDefault();
       }
@@ -388,12 +407,28 @@ export const ColumnReorderingMixin = (superClass) =>
     }
 
     /**
+     * Swaps column orders and physically reorders cells in all rows.
      * @param {!GridColumn} column1
      * @param {!GridColumn} column2
      * @protected
      */
     _swapColumnOrders(column1, column2) {
+      // Swap order values and determine which column should come first
       [column1._order, column2._order] = [column2._order, column1._order];
+      const [firstColumn, secondColumn] = column1._order < column2._order ? [column1, column2] : [column2, column1];
+
+      // Reorder cells in all rows (header, footer, body, sizer)
+      [...this.$.header.children, ...this.$.footer.children, ...this.$.items.children, this.$.sizer].forEach((row) => {
+        const cells = getBodyRowCells(row);
+        const firstColumnCells = cells.filter((cell) => firstColumn.contains(cell._column));
+        const secondColumnFirstCell = cells.find((cell) => secondColumn.contains(cell._column));
+        firstColumnCells.forEach((cell) => secondColumnFirstCell.before(cell));
+        // row.__cells are out of sync with the actual cell order after the move, and must be updated
+        if (row.__cells) {
+          row.__cells = row.__cells.toSorted((a, b) => a._column._order - b._column._order);
+        }
+      });
+
       this._debounceUpdateFrozenColumn();
       this._updateFirstAndLastColumn();
     }

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

@@ -16,8 +16,23 @@ export const ColumnResizingMixin = (superClass) =>
       const scroller = this.$.scroller;
       addListener(scroller, 'track', this._onHeaderTrack.bind(this));
 
-      // Disallow scrolling while resizing
-      scroller.addEventListener('touchmove', (e) => scroller.hasAttribute('column-resizing') && e.preventDefault());
+      // Cancel resizing on multi-touch (e.g. pinch-zoom)
+      scroller.addEventListener('touchstart', (e) => {
+        if (e.touches.length > 1) {
+          scroller.removeAttribute('column-resizing');
+        }
+      });
+
+      // Disallow scrolling while resizing, but allow multi-touch gestures
+      scroller.addEventListener('touchmove', (e) => {
+        if (e.touches.length > 1) {
+          scroller.removeAttribute('column-resizing');
+          return;
+        }
+        if (scroller.hasAttribute('column-resizing')) {
+          e.preventDefault();
+        }
+      });
 
       // Disable contextmenu on any resize separator.
       scroller.addEventListener('contextmenu', (e) => e.target.part.contains('resize-handle') && e.preventDefault());
@@ -30,6 +45,11 @@ export const ColumnResizingMixin = (superClass) =>
     _onHeaderTrack(e) {
       const handle = e.target;
       if (handle.part.contains('resize-handle')) {
+        // Ignore track events after multi-touch cancelled resizing
+        if (e.detail.state !== 'start' && !this.$.scroller.hasAttribute('column-resizing')) {
+          return;
+        }
+
         const cell = handle.parentElement;
         let column = cell._column;
 
@@ -76,14 +96,10 @@ export const ColumnResizingMixin = (superClass) =>
           column.flexGrow = 0;
         }
         // Fix width and flex-grow for all preceding columns
-        columnRowCells
-          .sort((a, b) => a._column._order - b._column._order)
-          .forEach((cell, index, array) => {
-            if (index < array.indexOf(targetCell)) {
-              cell._column.width = `${cell.offsetWidth}px`;
-              cell._column.flexGrow = 0;
-            }
-          });
+        columnRowCells.slice(0, columnRowCells.indexOf(targetCell)).forEach((cell) => {
+          cell._column.width = `${cell.offsetWidth}px`;
+          cell._column.flexGrow = 0;
+        });
 
         const cellFrozenToEnd = this._frozenToEndCells[0];
 

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

@@ -18,7 +18,6 @@ export const DataProviderMixin = (superClass) =>
         /**
          * The number of root-level items in the grid.
          * @attr {number} size
-         * @type {number}
          */
         size: {
           type: Number,
@@ -38,7 +37,6 @@ export const DataProviderMixin = (superClass) =>
         /**
          * Number of items fetched at a time from the dataprovider.
          * @attr {number} page-size
-         * @type {number}
          */
         pageSize: {
           type: Number,

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

@@ -5,6 +5,7 @@
  */
 import { isChrome, isSafari } from '@vaadin/component-base/src/browser-utils.js';
 import {
+  getBodyRowCells,
   iterateChildren,
   iterateRowCells,
   updateBooleanRowStates,
@@ -41,7 +42,6 @@ export const DragAndDropMixin = (superClass) =>
          * - `on-top-or-between`: The drop event can happen either on top of or between Grid rows.
          * - `on-grid`: The drop event will not happen on any specific row, it will show the drop target outline around the whole grid.
          * @attr {between|on-top|on-top-or-between|on-grid} drop-mode
-         * @type {GridDropMode | null | undefined}
          */
         dropMode: {
           type: String,
@@ -446,11 +446,8 @@ export const DragAndDropMixin = (superClass) =>
     __formatDefaultTransferData(rows) {
       return rows
         .map((row) => {
-          return Array.from(row.children)
-            .filter((cell) => !cell.hidden && !cell.part.contains('details-cell'))
-            .sort((a, b) => {
-              return a._column._order > b._column._order ? 1 : -1;
-            })
+          return getBodyRowCells(row)
+            .filter((cell) => !cell.hidden)
             .map((cell) => cell._content.textContent.trim())
             .filter((content) => content)
             .join('\t');

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

@@ -5,7 +5,7 @@
  */
 import { microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
-import { ColumnObserver, updateCellState } from './vaadin-grid-helpers.js';
+import { ColumnObserver, getBodyRowCells, updateCellState } from './vaadin-grid-helpers.js';
 
 function arrayEquals(arr1, arr2) {
   if (!arr1 || !arr2 || arr1.length !== arr2.length) {
@@ -156,14 +156,10 @@ export const DynamicColumnsMixin = (superClass) =>
      * @protected
      */
     _updateFirstAndLastColumnForRow(row) {
-      Array.from(row.querySelectorAll('[part~="cell"]:not([part~="details-cell"])'))
-        .sort((a, b) => {
-          return a._column._order - b._column._order;
-        })
-        .forEach((cell, cellIndex, children) => {
-          updateCellState(cell, 'first-column', cellIndex === 0);
-          updateCellState(cell, 'last-column', cellIndex === children.length - 1);
-        });
+      getBodyRowCells(row).forEach((cell, cellIndex, cells) => {
+        updateCellState(cell, 'first-column', cellIndex === 0);
+        updateCellState(cell, 'last-column', cellIndex === cells.length - 1);
+      });
     }
 
     /**

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

@@ -82,7 +82,6 @@ export const KeyboardNavigationMixin = (superClass) =>
          * the grid from receiving focus, allowing the user to switch focus to
          * controls in adjacent cells, rather than focussing the outer cell
          * itself.
-         * @type {boolean}
          * @private
          */
         interacting: {
@@ -391,15 +390,13 @@ export const KeyboardNavigationMixin = (superClass) =>
             this.collapseItem(activeRow._item);
             return;
           }
-        } else {
+        } else if (activeCell === activeRow.firstElementChild || isDetailsCell(activeCell)) {
           // In cell focus mode
-          const activeRowCells = [...activeRow.children].sort((a, b) => a._order - b._order);
-          if (activeCell === activeRowCells[0] || isDetailsCell(activeCell)) {
-            // "If focus is on the first cell in a row and row focus is supported, moves focus to the row."
-            this.__rowFocusMode = true;
-            this._onRowNavigation(activeRow, 0);
-            return;
-          }
+
+          // "If focus is on the first cell in a row and row focus is supported, moves focus to the row."
+          this.__rowFocusMode = true;
+          this._onRowNavigation(activeRow, 0);
+          return;
         }
       }
 
@@ -524,15 +521,8 @@ export const KeyboardNavigationMixin = (superClass) =>
         return;
       }
 
-      let columnIndex = [...activeRow.children].indexOf(activeCell);
-      if (this.$.items.contains(activeCell)) {
-        // lazy column rendering may be enabled, so we need use the always visible sizer cells to find the column index
-        columnIndex = [...this.$.sizer.children].findIndex((sizerCell) => sizerCell._column === activeCell._column);
-      }
-
       const isCurrentCellRowDetails = isDetailsCell(activeCell);
       const activeRowGroup = activeRow.parentNode;
-      const currentRowIndex = this.__getIndexInGroup(activeRow, this._focusedItemIndex);
 
       // _focusedColumnOrder is memoized - this is to ensure predictable
       // navigation when entering and leaving detail and column group cells.
@@ -540,9 +530,9 @@ export const KeyboardNavigationMixin = (superClass) =>
         if (isCurrentCellRowDetails) {
           this._focusedColumnOrder = 0;
         } else {
-          this._focusedColumnOrder = this._getColumns(activeRowGroup, currentRowIndex).filter((c) => !c.hidden)[
-            columnIndex
-          ]._order;
+          // Use the cell's column order directly instead of indexing into _getColumns,
+          // since cells may be physically reordered and DOM order doesn't match _columnTree order
+          this._focusedColumnOrder = activeCell._column._order;
         }
       }
 
@@ -577,15 +567,12 @@ export const KeyboardNavigationMixin = (superClass) =>
           this._focusedColumnOrder = undefined;
         }
 
-        const columnIndexByOrder = dstColumns.reduce((acc, col, i) => {
-          acc[col._order] = i;
-          return acc;
-        }, {});
-        const dstColumnIndex = columnIndexByOrder[dstSortedColumnOrders[dstOrderedColumnIndex]];
+        // Get the target column from the sorted column orders
+        const dstColumn = dstColumns.find((col) => col._order === dstSortedColumnOrders[dstOrderedColumnIndex]);
 
         let dstCell;
         if (this.$.items.contains(activeCell)) {
-          const dstSizerCell = this.$.sizer.children[dstColumnIndex];
+          const dstSizerCell = [...this.$.sizer.children].find((cell) => cell._column === dstColumn);
           if (this._lazyColumns) {
             // If the column is not in the viewport, scroll it into view.
             if (!this.__isColumnInViewport(dstSizerCell._column)) {
@@ -599,7 +586,8 @@ export const KeyboardNavigationMixin = (superClass) =>
           // Ensure correct horizontal scroll position once the destination cell is available.
           this._scrollHorizontallyToCell(dstCell);
         } else {
-          dstCell = dstRow.children[dstColumnIndex];
+          // For header/footer, find the cell whose column contains the target column
+          dstCell = [...dstRow.children].find((cell) => cell._column.contains(dstColumn));
           this._scrollHorizontallyToCell(dstCell);
         }
 

package/src/vaadin-grid-mixin.js

@@ -8,6 +8,7 @@ import { animationFrame, microTask } from '@vaadin/component-base/src/async.js';
 import { isAndroid, isChrome, isFirefox, isIOS, isSafari, isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
+import { setTouchAction } from '@vaadin/component-base/src/gestures.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
@@ -133,7 +134,6 @@ export const GridMixin = (superClass) =>
          * Effectively, this disables the grid's virtual scrolling so that all the rows are rendered in the DOM at once.
          * If the grid has a large number of items, using the feature is discouraged to avoid performance issues.
          * @attr {boolean} all-rows-visible
-         * @type {boolean}
          */
         allRowsVisible: {
           type: Boolean,
@@ -248,6 +248,9 @@ export const GridMixin = (superClass) =>
     ready() {
       super.ready();
 
+      setTouchAction(this, '');
+      setTouchAction(this.$.scroller, '');
+
       this.__virtualizer = new Virtualizer({
         createElements: this._createScrollerRows.bind(this),
         updateElement: this._updateScrollerItem.bind(this),
@@ -488,6 +491,7 @@ export const GridMixin = (superClass) =>
 
       columns
         .filter((column) => !column.hidden)
+        .toSorted((a, b) => a._order - b._order)
         .forEach((column, index, cols) => {
           let cell;
 

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

@@ -55,7 +55,6 @@ export const ScrollMixin = (superClass) =>
          * and thus not rendered.
          *
          * @attr {eager|lazy} column-rendering
-         * @type {!ColumnRendering}
          */
         columnRendering: {
           type: String,
@@ -207,6 +206,8 @@ export const ScrollMixin = (superClass) =>
       }
 
       this._scrollHorizontallyToCell(column._headerCell);
+      // Update cell position synchronously
+      this.__updateHorizontalScrollPosition();
       // Synchronously update cells when using lazy column rendering
       this.__updateColumnsBodyContentHidden();
     }

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2026 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';
+import { addListener, setTouchAction } from '@vaadin/component-base/src/gestures.js';
 
 /**
  * A mixin that provides basic functionality for the
@@ -42,7 +42,6 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         /**
          * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
          * @attr {number} flex-grow
-         * @type {number}
          */
         flexGrow: {
           type: Number,
@@ -53,7 +52,6 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         /**
          * When true, all the items are selected.
          * @attr {boolean} select-all
-         * @type {boolean}
          */
         selectAll: {
           type: Boolean,
@@ -65,7 +63,6 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         /**
          * When true, the active item gets automatically selected.
          * @attr {boolean} auto-select
-         * @type {boolean}
          */
         autoSelect: {
           type: Boolean,
@@ -76,7 +73,6 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         /**
          * When true, rows can be selected by dragging over the selection column.
          * @attr {boolean} drag-select
-         * @type {boolean}
          */
         dragSelect: {
           type: Boolean,
@@ -118,6 +114,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       this.__onCellMouseDown = this.__onCellMouseDown.bind(this);
       this.__onGridInteraction = this.__onGridInteraction.bind(this);
       this.__onActiveItemChanged = this.__onActiveItemChanged.bind(this);
+      this.__onTouchStart = this.__onTouchStart.bind(this);
       this.__onSelectRowCheckboxChange = this.__onSelectRowCheckboxChange.bind(this);
       this.__onSelectAllCheckboxChange = this.__onSelectAllCheckboxChange.bind(this);
     }
@@ -130,6 +127,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         this._grid.addEventListener('keydown', this.__onGridInteraction, { capture: true });
         this._grid.addEventListener('mousedown', this.__onGridInteraction);
         this._grid.addEventListener('active-item-changed', this.__onActiveItemChanged);
+        this._grid.addEventListener('touchstart', this.__onTouchStart);
       }
     }
 
@@ -141,6 +139,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         this._grid.removeEventListener('keydown', this.__onGridInteraction, { capture: true });
         this._grid.removeEventListener('mousedown', this.__onGridInteraction);
         this._grid.removeEventListener('active-item-changed', this.__onActiveItemChanged);
+        this._grid.removeEventListener('touchstart', this.__onTouchStart);
       }
     }
 
@@ -178,6 +177,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
         checkbox.addEventListener('change', this.__onSelectRowCheckboxChange);
         root.appendChild(checkbox);
         addListener(root, 'track', this.__onCellTrack);
+        setTouchAction(root, 'pinch-zoom');
         root.addEventListener('mousedown', this.__onCellMouseDown);
         root.addEventListener('click', this.__onCellClick);
       }
@@ -234,6 +234,10 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       this.__dragCurrentY = event.detail.y;
       this.__dragDy = event.detail.dy;
       if (event.detail.state === 'start') {
+        // Don't start drag-select during multi-touch (e.g. pinch-zoom)
+        if (this.__multiTouchActive) {
+          return;
+        }
         const renderedRows = this._grid._getRenderedRows();
         // Get the row where the drag started
         const dragStartRow = renderedRows.find((row) => row.contains(event.currentTarget.assignedSlot));
@@ -266,6 +270,18 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __onTouchStart(e) {
+      if (e.touches.length > 1) {
+        this.__multiTouchActive = true;
+        // Cancel in-progress drag-select on multi-touch (e.g. pinch-zoom)
+        this.__dragStartIndex = undefined;
+        this.__dragStartItem = undefined;
+      } else {
+        this.__multiTouchActive = false;
+      }
+    }
+
     /** @private */
     __onCellClick(e) {
       if (this.__dragStartIndex !== undefined) {

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

@@ -23,7 +23,6 @@ export const GridSortColumnMixin = (superClass) =>
          * How to sort the data.
          * Possible values are `asc` to use an ascending algorithm, `desc` to sort the data in
          * descending direction, or `null` for not sorting the data.
-         * @type {GridSorterDirection | undefined}
          */
         direction: {
           type: String,

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

@@ -16,7 +16,6 @@ export const SortMixin = (superClass) =>
         /**
          * When `true`, all `<vaadin-grid-sorter>` are applied for sorting.
          * @attr {boolean} multi-sort
-         * @type {boolean}
          */
         multiSort: {
           type: Boolean,
@@ -48,7 +47,6 @@ export const SortMixin = (superClass) =>
          * `multiSort` property. If `multiSortOnShiftClick` is true, the multiSort property is effectively ignored.
          *
          * @attr {boolean} multi-sort-on-shift-click
-         * @type {boolean}
          */
         multiSortOnShiftClick: {
           type: Boolean,

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

@@ -16,13 +16,14 @@ export const GridSorterMixin = (superClass) =>
         /**
          * JS Path of the property in the item used for sorting the data.
          */
-        path: String,
+        path: {
+          type: String,
+        },
 
         /**
          * How to sort the data.
          * Possible values are `asc` to use an ascending algorithm, `desc` to sort the data in
          * descending direction, or `null` for not sorting the data.
-         * @type {GridSorterDirection | undefined}
          */
         direction: {
           type: String,

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

@@ -15,7 +15,6 @@ export const GridTreeToggleMixin = (superClass) =>
         /**
          * Current level of the tree represented with a horizontal offset
          * of the toggle button.
-         * @type {number}
          */
         level: {
           type: Number,
@@ -26,7 +25,6 @@ export const GridTreeToggleMixin = (superClass) =>
 
         /**
          * Hides the toggle icon and disables toggling a tree sublevel.
-         * @type {boolean}
          */
         leaf: {
           type: Boolean,
@@ -36,7 +34,6 @@ export const GridTreeToggleMixin = (superClass) =>
 
         /**
          * Sublevel toggle state.
-         * @type {boolean}
          */
         expanded: {
           type: Boolean,