feat: add hasChildren property to grid row model (#9956)

Author: vursen

packages/grid/src/vaadin-grid-column-mixin.d.ts

@@ -147,6 +147,7 @@ export declare class GridColumnMixinClass<
    *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
    *   - `model.selected` Selected state.
    *   - `model.detailsOpened` Details opened state.
+   *   - `model.hasChildren` Whether the item has children.
    */
   renderer: GridBodyRenderer<TItem, Column> | null | undefined;
 

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

@@ -885,6 +885,7 @@ export const GridColumnMixin = (superClass) =>
          *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
          *   - `model.selected` Selected state.
          *   - `model.detailsOpened` Details opened state.
+         *   - `model.hasChildren` Whether the item has children.
          *
          * @type {GridBodyRenderer | null | undefined}
          */

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

@@ -222,6 +222,15 @@ export const DataProviderMixin = (superClass) =>
       return this.__expandedKeys && this.__expandedKeys.has(this.getItemId(item));
     }
 
+    /**
+     * @param {!GridItem} item
+     * @return {boolean}
+     * @protected
+     */
+    _hasChildren(item) {
+      return this.itemHasChildrenPath && item && !!get(this.itemHasChildrenPath, item);
+    }
+
     /** @private */
     _expandedItemsChanged() {
       this._dataProviderController.recalculateFlatSize();

packages/grid/src/vaadin-grid-event-context-mixin.d.ts

@@ -13,6 +13,7 @@ export interface GridEventContext<TItem> {
   index?: number;
   selected?: boolean;
   detailsOpened?: boolean;
+  hasChildren?: boolean;
   expanded?: boolean;
   level?: number;
 }
@@ -34,6 +35,7 @@ export declare class EventContextMixinClass<TItem> {
    * - `detailsOpened`: whether the row details are open for the item
    * - `expanded`: the expanded state of the tree toggle
    * - `level`: the tree hierarchy level
+   * - `hasChildren`: whether the item has children
    *
    * The returned object is populated only when a grid cell, header, footer or row details is found in `event.composedPath()`.
    * This means mostly mouse and keyboard events. If such a grid part is not found in the path, an empty object is returned.

packages/grid/src/vaadin-grid-event-context-mixin.js

@@ -21,6 +21,7 @@ export const EventContextMixin = (superClass) =>
      * - `detailsOpened`: whether the row details are open for the item
      * - `expanded`: the expanded state of the tree toggle
      * - `level`: the tree hierarchy level
+     * - `hasChildren`: whether the item has children
      *
      * The returned object is populated only when a grid cell, header, footer or row details is found in `event.composedPath()`.
      * This means mostly mouse and keyboard events. If such a grid part is not found in the path, an empty object is returned.

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

@@ -7,7 +7,6 @@ import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
-import { get } from '@vaadin/component-base/src/path-utils.js';
 
 function isRow(element) {
   return element instanceof HTMLTableRowElement;
@@ -286,10 +285,7 @@ export const KeyboardNavigationMixin = (superClass) =>
 
     /** @private */
     __isRowExpandable(row) {
-      if (this.itemHasChildrenPath) {
-        const item = row._item;
-        return !!(item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item));
-      }
+      return this._hasChildren(row._item) && !this._isExpanded(row._item);
     }
 
     /** @private */

packages/grid/src/vaadin-grid-mixin.d.ts

@@ -62,6 +62,7 @@ export interface GridItemModel<TItem> {
   expanded?: boolean;
   level?: number;
   detailsOpened?: boolean;
+  hasChildren?: boolean;
 }
 
 /**

packages/grid/src/vaadin-grid-mixin.js

@@ -843,6 +843,7 @@ export const GridMixin = (superClass) =>
         level: this.__getRowLevel(row),
         expanded: this._isExpanded(row._item),
         selected: this._isSelected(row._item),
+        hasChildren: this._hasChildren(row._item),
         detailsOpened: !!this.rowDetailsRenderer && this._isDetailsOpened(row._item),
       };
     }

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

@@ -37,7 +37,7 @@ export const GridTreeColumnMixin = (superClass) =>
      *
      * @private
      */
-    __defaultRenderer(root, _column, { item, expanded, level }) {
+    __defaultRenderer(root, _column, { item, expanded, level, hasChildren }) {
       let toggle = root.firstElementChild;
       if (!toggle) {
         toggle = document.createElement('vaadin-grid-tree-toggle');
@@ -48,7 +48,7 @@ export const GridTreeColumnMixin = (superClass) =>
       toggle.__item = item;
       toggle.__rendererExpanded = expanded;
       toggle.expanded = expanded;
-      toggle.leaf = this.__isLeafItem(item, this._grid.itemHasChildrenPath);
+      toggle.leaf = !hasChildren;
       toggle.textContent = this.__getToggleContent(this.path, item);
       toggle.level = level;
     }
@@ -83,11 +83,6 @@ export const GridTreeColumnMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __isLeafItem(item, itemHasChildrenPath) {
-      return !item || !item[itemHasChildrenPath];
-    }
-
     /** @private */
     __getToggleContent(path, item) {
       return path && get(path, item);

packages/grid/src/vaadin-grid.d.ts

@@ -93,6 +93,7 @@ export type GridDefaultItem = any;
  * `expanded` | Boolean | True if the item's tree sublevel is expanded.
  * `selected` | Boolean | True if the item is selected.
  * `detailsOpened` | Boolean | True if the item's row details are open.
+ * `hasChildren` | Boolean | True if the item has children
  *
  * The following helper elements can be used for further customization:
  * - [`<vaadin-grid-column-group>`](#/elements/vaadin-grid-column-group)