@vaadin/grid 24.2.0-dev.f254716fe → 24.2.0

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

@@ -5,6 +5,7 @@
  */
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
+import { get } from '@vaadin/component-base/src/path-utils.js';
 
 /**
  * @polymerMixin
@@ -266,7 +267,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __isRowExpandable(row) {
       if (this.itemHasChildrenPath) {
         const item = row._item;
-        return item && this.get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
+        return item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
       }
     }
 
@@ -475,7 +476,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         // Row details navigation logic
         if (activeRowGroup === this.$.items) {
           const item = activeRow._item;
-          const { item: dstItem } = this._dataProviderController.getFlatIndexInfo(dstRowIndex);
+          const dstItem = this._cache.getItemForIndex(dstRowIndex);
           // Should we navigate to row details?
           if (isRowDetails) {
             dstIsRowDetails = dy === 0;
@@ -681,7 +682,26 @@ export const KeyboardNavigationMixin = (superClass) =>
         }
       }
 
-      return tabOrder[index];
+      let focusStepTarget = tabOrder[index];
+
+      // 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)) {
+        const firstVisibleColumn = this._getColumnsInOrder().find((column) => this.__isColumnInViewport(column));
+        if (firstVisibleColumn) {
+          if (focusStepTarget === this._headerFocusable) {
+            focusStepTarget = firstVisibleColumn._headerCell;
+          } else if (focusStepTarget === this._itemsFocusable) {
+            const rowIndex = focusStepTarget._column._cells.indexOf(focusStepTarget);
+            focusStepTarget = firstVisibleColumn._cells[rowIndex];
+          } else if (focusStepTarget === this._footerFocusable) {
+            focusStepTarget = firstVisibleColumn._footerCell;
+          }
+        }
+      }
+
+      return focusStepTarget;
     }
 
     /** @private */
@@ -822,9 +842,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) {
@@ -838,6 +861,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-mixin.d.ts

@@ -0,0 +1,218 @@
+/**
+ * @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';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { ActiveItemMixinClass } from './vaadin-grid-active-item-mixin.js';
+import type { ArrayDataProviderMixinClass } from './vaadin-grid-array-data-provider-mixin.js';
+import type { GridColumn } from './vaadin-grid-column.js';
+import { GridBodyRenderer, GridHeaderFooterRenderer } from './vaadin-grid-column.js';
+import type { ColumnReorderingMixinClass } from './vaadin-grid-column-reordering-mixin.js';
+import type { DataProviderMixinClass } from './vaadin-grid-data-provider-mixin.js';
+import {
+  GridDataProvider,
+  GridDataProviderCallback,
+  GridDataProviderParams,
+  GridFilterDefinition,
+  GridSorterDefinition,
+  GridSorterDirection,
+} from './vaadin-grid-data-provider-mixin.js';
+import type { DragAndDropMixinClass } from './vaadin-grid-drag-and-drop-mixin.js';
+import { GridDragAndDropFilter, GridDropLocation, GridDropMode } from './vaadin-grid-drag-and-drop-mixin.js';
+import type { EventContextMixinClass } from './vaadin-grid-event-context-mixin.js';
+import { GridEventContext } from './vaadin-grid-event-context-mixin.js';
+import type { RowDetailsMixinClass } from './vaadin-grid-row-details-mixin.js';
+import { GridRowDetailsRenderer } from './vaadin-grid-row-details-mixin.js';
+import type { ScrollMixinClass } from './vaadin-grid-scroll-mixin.js';
+import type { SelectionMixinClass } from './vaadin-grid-selection-mixin.js';
+import type { SortMixinClass } from './vaadin-grid-sort-mixin.js';
+import type {
+  GridCellClassNameGenerator,
+  GridCellPartNameGenerator,
+  StylingMixinClass,
+} from './vaadin-grid-styling-mixin.js';
+
+export {
+  GridBodyRenderer,
+  GridCellClassNameGenerator,
+  GridCellPartNameGenerator,
+  GridDataProvider,
+  GridDataProviderCallback,
+  GridDataProviderParams,
+  GridDragAndDropFilter,
+  GridDropLocation,
+  GridDropMode,
+  GridEventContext,
+  GridFilterDefinition,
+  GridHeaderFooterRenderer,
+  GridRowDetailsRenderer,
+  GridSorterDefinition,
+  GridSorterDirection,
+};
+
+export interface GridItemModel<TItem> {
+  index: number;
+  item: TItem;
+  selected?: boolean;
+  expanded?: boolean;
+  level?: number;
+  detailsOpened?: boolean;
+}
+
+/**
+ * Fired when the `activeItem` property changes.
+ */
+export type GridActiveItemChangedEvent<TItem> = CustomEvent<{ value: TItem | null | undefined }>;
+
+/**
+ * Fired when the cell is activated with click or keyboard.
+ */
+export type GridCellActivateEvent<TItem> = CustomEvent<{ model: GridItemModel<TItem> }>;
+
+/**
+ * Fired when a cell is focused with click or keyboard navigation.
+ */
+export type GridCellFocusEvent<TItem> = CustomEvent<{ context: GridEventContext<TItem> }>;
+
+/**
+ * Fired when the columns in the grid are reordered.
+ */
+export type GridColumnReorderEvent<TItem> = CustomEvent<{ columns: Array<GridColumn<TItem>> }>;
+
+/**
+ * Fired when the grid column resize is finished.
+ */
+export type GridColumnResizeEvent<TItem> = CustomEvent<{ resizedColumn: GridColumn<TItem> }>;
+
+/**
+ * Fired when the `dataProvider` property changes.
+ */
+export type GridDataProviderChangedEvent<TItem> = CustomEvent<{ value: GridDataProvider<TItem> }>;
+
+/**
+ * Fired when the `expandedItems` property changes.
+ */
+export type GridExpandedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
+
+/**
+ * Fired when starting to drag grid rows.
+ */
+export type GridDragStartEvent<TItem> = CustomEvent<{
+  draggedItems: TItem[];
+  setDraggedItemsCount(count: number): void;
+  setDragData(type: string, data: string): void;
+}>;
+
+/**
+ * Fired when a drop occurs on top of the grid.
+ */
+export type GridDropEvent<TItem> = CustomEvent<{
+  dropTargetItem: TItem;
+  dropLocation: GridDropLocation;
+  dragData: Array<{ type: string; data: string }>;
+}>;
+
+/**
+ * Fired when the `loading` property changes.
+ */
+export type GridLoadingChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the `selectedItems` property changes.
+ */
+export type GridSelectedItemsChangedEvent<TItem> = CustomEvent<{ value: TItem[] }>;
+
+/**
+ * Fired when the `size` property changes.
+ */
+export type GridSizeChangedEvent = CustomEvent<{ value: number }>;
+
+export interface GridCustomEventMap<TItem> {
+  'active-item-changed': GridActiveItemChangedEvent<TItem>;
+
+  'cell-activate': GridCellActivateEvent<TItem>;
+
+  'cell-focus': GridCellFocusEvent<TItem>;
+
+  'column-reorder': GridColumnReorderEvent<TItem>;
+
+  'column-resize': GridColumnResizeEvent<TItem>;
+
+  'data-provider-changed': GridDataProviderChangedEvent<TItem>;
+
+  'expanded-items-changed': GridExpandedItemsChangedEvent<TItem>;
+
+  'grid-dragstart': GridDragStartEvent<TItem>;
+
+  'grid-dragend': Event;
+
+  'grid-drop': GridDropEvent<TItem>;
+
+  'loading-changed': GridLoadingChangedEvent;
+
+  'selected-items-changed': GridSelectedItemsChangedEvent<TItem>;
+
+  'size-changed': GridSizeChangedEvent;
+}
+
+export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEventMap<TItem> {}
+
+export declare function GridMixin<TItem, T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ActiveItemMixinClass<TItem>> &
+  Constructor<ArrayDataProviderMixinClass<TItem>> &
+  Constructor<ColumnReorderingMixinClass> &
+  Constructor<DataProviderMixinClass<TItem>> &
+  Constructor<DisabledMixinClass> &
+  Constructor<DragAndDropMixinClass<TItem>> &
+  Constructor<EventContextMixinClass<TItem>> &
+  Constructor<GridMixinClass<TItem>> &
+  Constructor<RowDetailsMixinClass<TItem>> &
+  Constructor<ScrollMixinClass> &
+  Constructor<SelectionMixinClass<TItem>> &
+  Constructor<SortMixinClass> &
+  Constructor<StylingMixinClass<TItem>> &
+  T;
+
+export interface GridMixinClass<TItem>
+  extends DisabledMixinClass,
+    ActiveItemMixinClass<TItem>,
+    ArrayDataProviderMixinClass<TItem>,
+    DataProviderMixinClass<TItem>,
+    RowDetailsMixinClass<TItem>,
+    ScrollMixinClass,
+    SelectionMixinClass<TItem>,
+    SortMixinClass,
+    ColumnReorderingMixinClass,
+    EventContextMixinClass<TItem>,
+    StylingMixinClass<TItem>,
+    DragAndDropMixinClass<TItem> {
+  /**
+   * If true, the grid's height is defined by its rows.
+   *
+   * 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
+   */
+  allRowsVisible: boolean;
+
+  /**
+   * Updates the `width` of all columns which have `autoWidth` set to `true`.
+   */
+  recalculateColumnWidths(): void;
+
+  /**
+   * Requests an update for the content of cells.
+   *
+   * While performing the update, the following renderers are invoked:
+   * - `Grid.rowDetailsRenderer`
+   * - `GridColumn.renderer`
+   * - `GridColumn.headerRenderer`
+   * - `GridColumn.footerRenderer`
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate(): void;
+}