@vaadin/grid 22.0.0-alpha7

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

@@ -0,0 +1,158 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const A11yMixin = (superClass) =>
+  class A11yMixin extends superClass {
+    static get observers() {
+      return ['_a11yUpdateGridSize(size, _columnTree, _columnTree.*)'];
+    }
+
+    /** @private */
+    _a11yGetHeaderRowCount(_columnTree) {
+      return _columnTree.filter((level) => level.some((col) => col.headerRenderer || col.path || col.header)).length;
+    }
+
+    /** @private */
+    _a11yGetFooterRowCount(_columnTree) {
+      return _columnTree.filter((level) => level.some((col) => col.headerRenderer)).length;
+    }
+
+    /** @private */
+    _a11yUpdateGridSize(size, _columnTree) {
+      if (size === undefined || _columnTree === undefined) {
+        return;
+      }
+
+      const bodyColumns = _columnTree[_columnTree.length - 1];
+      this.$.table.setAttribute(
+        'aria-rowcount',
+        size + this._a11yGetHeaderRowCount(_columnTree) + this._a11yGetFooterRowCount(_columnTree)
+      );
+      this.$.table.setAttribute('aria-colcount', (bodyColumns && bodyColumns.length) || 0);
+
+      this._a11yUpdateHeaderRows();
+      this._a11yUpdateFooterRows();
+    }
+
+    /** @protected */
+    _a11yUpdateHeaderRows() {
+      Array.from(this.$.header.children).forEach((headerRow, index) =>
+        headerRow.setAttribute('aria-rowindex', index + 1)
+      );
+    }
+
+    /** @protected */
+    _a11yUpdateFooterRows() {
+      Array.from(this.$.footer.children).forEach((footerRow, index) =>
+        footerRow.setAttribute('aria-rowindex', this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1)
+      );
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @param {number} index
+     * @protected
+     */
+    _a11yUpdateRowRowindex(row, index) {
+      row.setAttribute('aria-rowindex', index + this._a11yGetHeaderRowCount(this._columnTree) + 1);
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @param {boolean} selected
+     * @protected
+     */
+    _a11yUpdateRowSelected(row, selected) {
+      // Jaws reads selection only for rows, NVDA only for cells
+      row.setAttribute('aria-selected', Boolean(selected));
+      Array.from(row.children).forEach((cell) => cell.setAttribute('aria-selected', Boolean(selected)));
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @protected
+     */
+    _a11yUpdateRowExpanded(row) {
+      if (this.__isRowExpandable(row)) {
+        row.setAttribute('aria-expanded', 'false');
+      } else if (this.__isRowCollapsible(row)) {
+        row.setAttribute('aria-expanded', 'true');
+      } else {
+        row.removeAttribute('aria-expanded');
+      }
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @param {number} level
+     * @protected
+     */
+    _a11yUpdateRowLevel(row, level) {
+      row.setAttribute('aria-level', level + 1);
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @param {boolean} detailsOpened
+     * @protected
+     */
+    _a11yUpdateRowDetailsOpened(row, detailsOpened) {
+      const detailsCell = row.querySelector('[part~=details-cell]');
+
+      Array.from(row.children).forEach((cell) => {
+        if (detailsCell) {
+          cell.setAttribute('aria-expanded', detailsOpened);
+        } else {
+          cell.removeAttribute('aria-expanded');
+        }
+      });
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @param {!HTMLElement} detailsCell
+     * @protected
+     */
+    _a11ySetRowDetailsCell(row, detailsCell) {
+      Array.from(row.children).forEach((cell) => {
+        if (cell !== detailsCell) {
+          cell.setAttribute('aria-controls', detailsCell.id);
+        }
+      });
+    }
+
+    /**
+     * @param {!HTMLElement} row
+     * @param {number} colspan
+     * @protected
+     */
+    _a11yUpdateCellColspan(cell, colspan) {
+      cell.setAttribute('aria-colspan', Number(colspan));
+    }
+
+    /** @protected */
+    _a11yUpdateSorters() {
+      Array.from(this.querySelectorAll('vaadin-grid-sorter')).forEach((sorter) => {
+        let cellContent = sorter.parentNode;
+        while (cellContent && cellContent.localName !== 'vaadin-grid-cell-content') {
+          cellContent = cellContent.parentNode;
+        }
+        if (cellContent && cellContent.assignedSlot) {
+          const cell = cellContent.assignedSlot.parentNode;
+          cell.setAttribute(
+            'aria-sort',
+            {
+              asc: 'ascending',
+              desc: 'descending'
+            }[String(sorter.direction)] || 'none'
+          );
+        }
+      });
+    }
+  };

package/src/vaadin-grid-active-item-mixin.d.ts

@@ -0,0 +1,19 @@
+declare function ActiveItemMixin<TItem, T extends new (...args: any[]) => {}>(
+  base: T
+): T & ActiveItemMixinConstructor<TItem>;
+
+interface ActiveItemMixinConstructor<TItem> {
+  new (...args: any[]): ActiveItemMixin<TItem>;
+}
+
+interface ActiveItemMixin<TItem> {
+  /**
+   * The item user has last interacted with. Turns to `null` after user deactivates
+   * the item by re-interacting with the currently active item.
+   */
+  activeItem: TItem | null;
+}
+
+declare function isFocusable(target: Element): boolean;
+
+export { ActiveItemMixin, ActiveItemMixinConstructor, isFocusable };

package/src/vaadin-grid-active-item-mixin.js

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const ActiveItemMixin = (superClass) =>
+  class ActiveItemMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * The item user has last interacted with. Turns to `null` after user deactivates
+         * the item by re-interacting with the currently active item.
+         * @type {GridItem}
+         */
+        activeItem: {
+          type: Object,
+          notify: true,
+          value: null
+        }
+      };
+    }
+
+    ready() {
+      super.ready();
+
+      this.$.scroller.addEventListener('click', this._onClick.bind(this));
+      this.addEventListener('cell-activate', this._activateItem.bind(this));
+      this.addEventListener('row-activate', this._activateItem.bind(this));
+    }
+
+    /** @private */
+    _activateItem(e) {
+      const model = e.detail.model;
+      const clickedItem = model ? model.item : null;
+
+      if (clickedItem) {
+        this.activeItem = !this._itemsEqual(this.activeItem, clickedItem) ? clickedItem : null;
+      }
+    }
+
+    /**
+     * We need to listen to click instead of tap because on mobile safari, the
+     * document.activeElement has not been updated (focus has not been shifted)
+     * yet at the point when tap event is being executed.
+     * @param {!MouseEvent} e
+     * @protected
+     */
+    _onClick(e) {
+      if (e.defaultPrevented) {
+        // Something has handled this click already, e. g., <vaadin-grid-sorter>
+        return;
+      }
+
+      const path = e.composedPath();
+      const cell = path[path.indexOf(this.$.table) - 3];
+      if (!cell || cell.getAttribute('part').indexOf('details-cell') > -1) {
+        return;
+      }
+      const cellContent = cell._content;
+
+      const activeElement = this.getRootNode().activeElement;
+      const cellContentHasFocus = cellContent.contains(activeElement);
+      if (!cellContentHasFocus && !this._isFocusable(e.target)) {
+        this.dispatchEvent(
+          new CustomEvent('cell-activate', {
+            detail: {
+              model: this.__getRowModel(cell.parentElement)
+            }
+          })
+        );
+      }
+    }
+
+    /**
+     * @param {!Element} target
+     * @return {boolean}
+     * @protected
+     */
+    _isFocusable(target) {
+      return isFocusable(target);
+    }
+
+    /**
+     * Fired when the `activeItem` property changes.
+     *
+     * @event active-item-changed
+     */
+
+    /**
+     * Fired when the cell is activated with click or keyboard.
+     *
+     * @event cell-activate
+     */
+  };
+
+/**
+ * @param {!Element} target
+ * @return {boolean}
+ * @protected
+ */
+export const isFocusable = (target) => {
+  if (!target.parentNode) {
+    return false;
+  }
+  const focusables = Array.from(
+    target.parentNode.querySelectorAll(
+      '[tabindex], button, input, select, textarea, object, iframe, label, a[href], area[href]'
+    )
+  ).filter((element) => element.getAttribute('part') !== 'cell body-cell');
+
+  const isFocusableElement = focusables.indexOf(target) !== -1;
+  return !target.disabled && isFocusableElement;
+};

package/src/vaadin-grid-array-data-provider-mixin.d.ts

@@ -0,0 +1,16 @@
+declare function ArrayDataProviderMixin<TItem, T extends new (...args: any[]) => {}>(
+  base: T
+): T & ArrayDataProviderMixinConstructor<TItem>;
+
+interface ArrayDataProviderMixinConstructor<TItem> {
+  new (...args: any[]): ArrayDataProviderMixin<TItem>;
+}
+
+declare interface ArrayDataProviderMixin<TItem> {
+  /**
+   * An array containing the items which will be passed to renderer functions.
+   */
+  items: TItem[] | null | undefined;
+}
+
+export { ArrayDataProviderMixin, ArrayDataProviderMixinConstructor };

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

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { createArrayDataProvider } from './array-data-provider.js';
+
+/**
+ * @polymerMixin
+ */
+export const ArrayDataProviderMixin = (superClass) =>
+  class ArrayDataProviderMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * An array containing the items which will be passed to renderer functions.
+         *
+         * @type {Array<!GridItem> | undefined}
+         */
+        items: Array
+      };
+    }
+
+    static get observers() {
+      return ['__dataProviderOrItemsChanged(dataProvider, items, isAttached, items.*, _filters, _sorters)'];
+    }
+
+    /** @private */
+    __setArrayDataProvider(items) {
+      const arrayDataProvider = createArrayDataProvider(this.items, {});
+      arrayDataProvider.__items = items;
+      this.setProperties({
+        _arrayDataProvider: arrayDataProvider,
+        size: items.length,
+        dataProvider: arrayDataProvider
+      });
+    }
+
+    /** @private */
+    __dataProviderOrItemsChanged(dataProvider, items, isAttached) {
+      if (!isAttached) {
+        return;
+      }
+
+      if (this._arrayDataProvider) {
+        // Has an items array data provider beforehand
+
+        if (dataProvider !== this._arrayDataProvider) {
+          // A custom data provider was set externally
+          this.setProperties({
+            _arrayDataProvider: undefined,
+            items: undefined
+          });
+        } else if (!items) {
+          // The items array was unset
+          this.setProperties({
+            _arrayDataProvider: undefined,
+            dataProvider: undefined,
+            size: 0
+          });
+          this.clearCache();
+        } else if (this._arrayDataProvider.__items === items) {
+          // The items array was modified
+          this.clearCache();
+          this.size = this._effectiveSize;
+        } else {
+          // The items array was replaced
+          this.__setArrayDataProvider(items);
+        }
+      } else if (items) {
+        // There was no array data provider before items was set
+        this.__setArrayDataProvider(items);
+      }
+    }
+  };

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

@@ -0,0 +1,54 @@
+import { GridDefaultItem } from './interfaces';
+import { ColumnBaseMixin } from './vaadin-grid-column.js';
+
+/**
+ * A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and
+ * to configure additional headers and footers.
+ *
+ * Groups can be nested to create complex header and footer configurations.
+ *
+ * #### Example:
+ * ```html
+ * <vaadin-grid-column-group resizable id="columnGroup">
+ *   <vaadin-grid-column id="column1"></vaadin-grid-column>
+ *   <vaadin-grid-column id="column2"></vaadin-grid-column>
+ * </vaadin-grid-column-group>
+ * ```
+ *
+ * ```js
+ * const columnGroup = document.querySelector('#columnGroup');
+ * columnGroup.headerRenderer = (root, columnGroup) => {
+ *   root.textContent = 'header';
+ * }
+ *
+ * const column1 = document.querySelector('#column1');
+ * column1.headerRenderer = (root, column) => { ... };
+ * column1.renderer = (root, column, model) => { ... };
+ *
+ * const column2 = document.querySelector('#column2');
+ * column2.headerRenderer = (root, column) => { ... };
+ * column2.renderer = (root, column, model) => { ... };
+ * ```
+ */
+declare class GridColumnGroup extends HTMLElement {
+  /**
+   * Flex grow ratio for the column group as the sum of the ratios of its child columns.
+   * @attr {number} flex-grow
+   */
+  readonly flexGrow: number | null | undefined;
+
+  /**
+   * Width of the column group as the sum of the widths of its child columns.
+   */
+  readonly width: string | null | undefined;
+}
+
+interface GridColumnGroup<TItem = GridDefaultItem> extends ColumnBaseMixin<TItem> {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-grid-column-group': GridColumnGroup<GridDefaultItem>;
+  }
+}
+
+export { GridColumnGroup };