@vaadin/grid 23.1.0-alpha3 → 23.1.0-beta2

package/lit.d.ts

@@ -0,0 +1,2 @@
+export * from './src/lit/renderer-directives.js';
+export * from './src/lit/column-renderer-directives.js';

package/lit.js

@@ -0,0 +1,2 @@
+export * from './src/lit/renderer-directives.js';
+export * from './src/lit/column-renderer-directives.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +23,8 @@
     "all-imports.js",
     "src",
     "theme",
+    "lit.js",
+    "lit.d.ts",
     "vaadin-*.d.ts",
     "vaadin-*.js"
   ],
@@ -41,19 +43,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.1.0-alpha3",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/text-field": "23.1.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/checkbox": "23.1.0-beta2",
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/lit-renderer": "23.1.0-beta2",
+    "@vaadin/text-field": "23.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha3",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-beta2",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

package/src/array-data-provider.js

@@ -25,12 +25,12 @@ function checkPaths(arrayToCheck, action, items) {
   for (const i in arrayToCheck) {
     const path = arrayToCheck[i].path;
 
-    // skip simple paths
+    // Skip simple paths
     if (!path || path.indexOf('.') === -1) {
       continue;
     }
 
-    const parentProperty = path.replace(/\.[^.]*$/, ''); // a.b.c -> a.b
+    const parentProperty = path.replace(/\.[^.]*$/, ''); // A.b.c -> a.b
     if (get(parentProperty, items[0]) === undefined) {
       console.warn(`Path "${path}" used for ${action} does not exist in all of the items, ${action} is disabled.`);
       result = false;

package/src/lit/column-renderer-directives.d.ts

@@ -0,0 +1,152 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/* eslint-disable max-classes-per-file */
+import { TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit/directive';
+import { LitRenderer, LitRendererDirective } from '@vaadin/lit-renderer';
+import { GridItemModel } from '../vaadin-grid.js';
+import { GridColumn } from '../vaadin-grid-column.js';
+
+export type GridColumnBodyLitRenderer<TItem> = (
+  item: TItem,
+  model: GridItemModel<TItem>,
+  column: GridColumn,
+) => TemplateResult;
+
+export type GridColumnHeaderLitRenderer = (column: GridColumn) => TemplateResult;
+export type GridColumnFooterLitRenderer = (column: GridColumn) => TemplateResult;
+
+declare abstract class AbstractGridColumnRendererDirective<R extends LitRenderer> extends LitRendererDirective<
+  GridColumn,
+  R
+> {
+  /**
+   * A property to that the renderer callback will be assigned.
+   */
+  abstract rendererProperty: 'renderer' | 'headerRenderer' | 'footerRenderer';
+
+  /**
+   * Adds the renderer callback to the grid column.
+   */
+  addRenderer(): void;
+
+  /**
+   * Runs the renderer callback on the grid column.
+   */
+  runRenderer(): void;
+
+  /**
+   * Removes the renderer callback from the grid column.
+   */
+  removeRenderer(): void;
+}
+
+export declare class GridColumnBodyRendererDirective<TItem> extends AbstractGridColumnRendererDirective<
+  GridColumnBodyLitRenderer<TItem>
+> {
+  rendererProperty: 'renderer';
+}
+
+export declare class GridColumnHeaderRendererDirective extends AbstractGridColumnRendererDirective<GridColumnHeaderLitRenderer> {
+  rendererProperty: 'headerRenderer';
+}
+
+export declare class GridColumnFooterRendererDirective extends AbstractGridColumnRendererDirective<GridColumnFooterLitRenderer> {
+  rendererProperty: 'footerRenderer';
+}
+
+/**
+ * A Lit directive for rendering the content of the column's body cells.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `renderer` property. The renderer is called for each column's body cell when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnBodyRenderer((item, model, column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function columnBodyRenderer<TItem>(
+  renderer: GridColumnBodyLitRenderer<TItem>,
+  dependencies?: unknown,
+): DirectiveResult<typeof GridColumnBodyRendererDirective>;
+
+/**
+ * A Lit directive for rendering the content of the column's header cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `headerRenderer` property. The renderer is called once when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnHeaderRenderer((column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function columnHeaderRenderer(
+  renderer: GridColumnHeaderLitRenderer,
+  dependencies?: unknown,
+): DirectiveResult<typeof GridColumnHeaderRendererDirective>;
+
+/**
+ * A Lit directive for rendering the content of the column's footer cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `footerRenderer` property. The renderer is called once when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnFooterRenderer((column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function columnFooterRenderer(
+  renderer: GridColumnFooterLitRenderer,
+  dependencies?: unknown,
+): DirectiveResult<typeof GridColumnFooterRendererDirective>;

package/src/lit/column-renderer-directives.js

@@ -0,0 +1,149 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/* eslint-disable max-classes-per-file */
+import { directive } from 'lit/directive.js';
+import { microTask } from '@vaadin/component-base/src/async';
+import { Debouncer } from '@vaadin/component-base/src/debounce';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+import { CONTENT_UPDATE_DEBOUNCER } from './renderer-directives.js';
+
+class AbstractGridColumnRendererDirective extends LitRendererDirective {
+  /**
+   * A property to that the renderer callback will be assigned.
+   *
+   * @abstract
+   */
+  rendererProperty;
+
+  /**
+   * Adds the renderer callback to the grid column.
+   */
+  addRenderer() {
+    this.element[this.rendererProperty] = (root, column) => {
+      this.renderRenderer(root, column);
+    };
+  }
+
+  /**
+   * Runs the renderer callback on the grid column.
+   */
+  runRenderer() {
+    const grid = this.element._grid;
+
+    grid[CONTENT_UPDATE_DEBOUNCER] = Debouncer.debounce(grid[CONTENT_UPDATE_DEBOUNCER], microTask, () => {
+      grid.requestContentUpdate();
+    });
+  }
+
+  /**
+   * Removes the renderer callback from the grid column.
+   */
+  removeRenderer() {
+    this.element[this.rendererProperty] = null;
+  }
+}
+
+export class GridColumnBodyRendererDirective extends AbstractGridColumnRendererDirective {
+  rendererProperty = 'renderer';
+
+  addRenderer() {
+    this.element[this.rendererProperty] = (root, column, model) => {
+      this.renderRenderer(root, model.item, model, column);
+    };
+  }
+}
+
+export class GridColumnHeaderRendererDirective extends AbstractGridColumnRendererDirective {
+  rendererProperty = 'headerRenderer';
+}
+
+export class GridColumnFooterRendererDirective extends AbstractGridColumnRendererDirective {
+  rendererProperty = 'footerRenderer';
+}
+
+/**
+ * A Lit directive for rendering the content of the column's body cells.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `renderer` property. The renderer is called for each column's body cell when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnBodyRenderer((item, model, column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const columnBodyRenderer = directive(GridColumnBodyRendererDirective);
+
+/**
+ * A Lit directive for rendering the content of the column's header cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `headerRenderer` property. The renderer is called once when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnHeaderRenderer((column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const columnHeaderRenderer = directive(GridColumnHeaderRendererDirective);
+
+/**
+ * A Lit directive for rendering the content of the column's footer cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid column
+ * via the `footerRenderer` property. The renderer is called once when assigned and whenever
+ * a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid-column
+ *   ${columnFooterRenderer((column) => html`...`)}
+ * ></vaadin-grid-column>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const columnFooterRenderer = directive(GridColumnFooterRendererDirective);

package/src/lit/renderer-directives.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { TemplateResult } from 'lit';
+import { DirectiveResult } from 'lit/directive';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+import { Grid, GridItemModel } from '../vaadin-grid.js';
+
+export type GridRowDetailsLitRenderer<TItem> = (item: TItem, model: GridItemModel<TItem>, grid: Grid) => TemplateResult;
+
+export declare class GridRowDetailsRendererDirective<TItem> extends LitRendererDirective<
+  Grid,
+  GridRowDetailsLitRenderer<TItem>
+> {
+  /**
+   * Adds the row details renderer callback to the grid.
+   */
+  addRenderer(): void;
+
+  /**
+   * Runs the row details renderer callback on the grid.
+   */
+  runRenderer(): void;
+
+  /**
+   * Removes the row details renderer callback from the grid.
+   */
+  removeRenderer(): void;
+}
+
+/**
+ * A Lit directive for rendering the content of the row details cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid
+ * via the `rowDetailsRenderer` property. The renderer is called for each grid item that is in `detailsOpened`
+ * when assigned and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid
+ *   ${gridRowDetailsRenderer((item, model, grid) => html`...`)}
+ * ></vaadin-grid>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export declare function gridRowDetailsRenderer<TItem>(
+  renderer: GridRowDetailsLitRenderer<TItem>,
+  dependencies?: unknown,
+): DirectiveResult<typeof GridRowDetailsRendererDirective>;

package/src/lit/renderer-directives.js

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { directive } from 'lit/directive.js';
+import { microTask } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { LitRendererDirective } from '@vaadin/lit-renderer';
+
+export const CONTENT_UPDATE_DEBOUNCER = Symbol('contentUpdateDebouncer');
+
+export class GridRowDetailsRendererDirective extends LitRendererDirective {
+  /**
+   * Adds the row details renderer callback to the grid.
+   */
+  addRenderer() {
+    this.element.rowDetailsRenderer = (root, grid, model) => {
+      this.renderRenderer(root, model.item, model, grid);
+    };
+  }
+
+  /**
+   * Runs the row details renderer callback on the grid.
+   */
+  runRenderer() {
+    this.element[CONTENT_UPDATE_DEBOUNCER] = Debouncer.debounce(
+      this.element[CONTENT_UPDATE_DEBOUNCER],
+      microTask,
+      () => {
+        this.element.requestContentUpdate();
+      },
+    );
+  }
+
+  /**
+   * Removes the row details renderer callback from the grid.
+   */
+  removeRenderer() {
+    this.element.rowDetailsRenderer = null;
+  }
+}
+
+/**
+ * A Lit directive for rendering the content of the row details cell.
+ *
+ * The directive accepts a renderer callback returning a Lit template and assigns it to the grid
+ * via the `rowDetailsRenderer` property. The renderer is called for each grid item that is in `detailsOpened`
+ * when assigned and whenever a single dependency or an array of dependencies changes.
+ * It is not guaranteed that the renderer will be called immediately (synchronously) in both cases.
+ *
+ * Dependencies can be a single value or an array of values.
+ * Values are checked against previous values with strict equality (`===`),
+ * so the check won't detect nested property changes inside objects or arrays.
+ * When dependencies are provided as an array, each item is checked against the previous value
+ * at the same index with strict equality. Nested arrays are also checked only by strict
+ * equality.
+ *
+ * Example of usage:
+ * ```js
+ * `<vaadin-grid
+ *   ${gridRowDetailsRenderer((item, model, grid) => html`...`)}
+ * ></vaadin-grid>`
+ * ```
+ *
+ * @param renderer the renderer callback.
+ * @param dependencies a single dependency or an array of dependencies
+ *                     which trigger a re-render when changed.
+ */
+export const gridRowDetailsRenderer = directive(GridRowDetailsRendererDirective);

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

@@ -32,7 +32,7 @@ export const A11yMixin = (superClass) =>
       const bodyColumns = _columnTree[_columnTree.length - 1];
       this.$.table.setAttribute(
         'aria-rowcount',
-        size + this._a11yGetHeaderRowCount(_columnTree) + this._a11yGetFooterRowCount(_columnTree)
+        size + this._a11yGetHeaderRowCount(_columnTree) + this._a11yGetFooterRowCount(_columnTree),
       );
       this.$.table.setAttribute('aria-colcount', (bodyColumns && bodyColumns.length) || 0);
 
@@ -43,14 +43,14 @@ export const A11yMixin = (superClass) =>
     /** @protected */
     _a11yUpdateHeaderRows() {
       Array.from(this.$.header.children).forEach((headerRow, index) =>
-        headerRow.setAttribute('aria-rowindex', index + 1)
+        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)
+        footerRow.setAttribute('aria-rowindex', this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1),
       );
     }
 
@@ -137,8 +137,8 @@ export const A11yMixin = (superClass) =>
             'aria-sort',
             {
               asc: 'ascending',
-              desc: 'descending'
-            }[String(sorter.direction)] || 'none'
+              desc: 'descending',
+            }[String(sorter.direction)] || 'none',
           );
         }
       });

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

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ActiveItemMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<ActiveItemMixinClass<TItem>>;
 
 export declare class ActiveItemMixinClass<TItem> {

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

@@ -19,8 +19,8 @@ export const ActiveItemMixin = (superClass) =>
         activeItem: {
           type: Object,
           notify: true,
-          value: null
-        }
+          value: null,
+        },
       };
     }
 
@@ -68,9 +68,9 @@ export const ActiveItemMixin = (superClass) =>
         this.dispatchEvent(
           new CustomEvent('cell-activate', {
             detail: {
-              model: this.__getRowModel(cell.parentElement)
-            }
-          })
+              model: this.__getRowModel(cell.parentElement),
+            },
+          }),
         );
       }
     }
@@ -108,10 +108,10 @@ export const isFocusable = (target) => {
   }
   const focusables = Array.from(
     target.parentNode.querySelectorAll(
-      '[tabindex], button, input, select, textarea, object, iframe, label, a[href], area[href]'
-    )
+      '[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;
+  const isFocusableElement = focusables.includes(target);
   return !target.disabled && isFocusableElement;
 };

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

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function ArrayDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<ArrayDataProviderMixinClass<TItem>>;
 
 export declare class ArrayDataProviderMixinClass<TItem> {

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

@@ -17,7 +17,7 @@ export const ArrayDataProviderMixin = (superClass) =>
          *
          * @type {Array<!GridItem> | undefined}
          */
-        items: Array
+        items: Array,
       };
     }
 
@@ -32,7 +32,7 @@ export const ArrayDataProviderMixin = (superClass) =>
       this.setProperties({
         _arrayDataProvider: arrayDataProvider,
         size: items.length,
-        dataProvider: arrayDataProvider
+        dataProvider: arrayDataProvider,
       });
     }
 
@@ -49,14 +49,14 @@ export const ArrayDataProviderMixin = (superClass) =>
           // A custom data provider was set externally
           this.setProperties({
             _arrayDataProvider: undefined,
-            items: undefined
+            items: undefined,
           });
         } else if (!items) {
           // The items array was unset
           this.setProperties({
             _arrayDataProvider: undefined,
             dataProvider: undefined,
-            size: 0
+            size: 0,
           });
           this.clearCache();
         } else if (this._arrayDataProvider.__items === items) {