@vaadin/grid 25.3.0-alpha1 → 25.3.0-alpha11

package/custom-elements.json

@@ -497,7 +497,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -651,7 +651,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -863,7 +863,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -1041,7 +1041,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -1200,7 +1200,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align"
             }
           ],
@@ -1291,7 +1291,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign"
             }
           ],
@@ -1494,7 +1494,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -1671,7 +1671,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -2027,7 +2027,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -2240,7 +2240,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "ColumnBaseMixin",
@@ -2954,7 +2954,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -3163,7 +3163,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -3350,30 +3350,6 @@
               "name": "value-changed"
             }
           ],
-          "mixins": [
-            {
-              "name": "GridFilterElementMixin",
-              "module": "src/vaadin-grid-filter-element-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin"
-            },
-            {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
-            },
-            {
-              "name": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-grid-filter",
-          "customElement": true,
           "attributes": [
             {
               "name": "path",
@@ -3387,6 +3363,13 @@
                 "module": "src/vaadin-grid-filter-element-mixin.js"
               }
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            },
             {
               "name": "value",
               "type": {
@@ -3399,7 +3382,31 @@
                 "module": "src/vaadin-grid-filter-element-mixin.js"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "GridFilterElementMixin",
+              "module": "src/vaadin-grid-filter-element-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-grid-filter",
+          "customElement": true
         }
       ],
       "exports": [
@@ -3413,10 +3420,55 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-grid-header-footer-rendering-mixin.js",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "A mixin providing rendering of header and footer rows based on the column tree.",
+          "name": "HeaderFooterRenderingMixin",
+          "members": [],
+          "parameters": [
+            {
+              "name": "superClass"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HeaderFooterRenderingMixin",
+          "declaration": {
+            "name": "HeaderFooterRenderingMixin",
+            "module": "src/vaadin-grid-header-footer-rendering-mixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-grid-helpers.js",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "getClosestCell",
+          "parameters": [
+            {
+              "name": "node",
+              "type": {
+                "text": "Node"
+              }
+            }
+          ],
+          "description": "Returns the grid cell that contains the given node, or `undefined` if the\nnode is not inside a cell's content.",
+          "return": {
+            "type": {
+              "text": "HTMLElement | undefined"
+            }
+          }
+        },
         {
           "kind": "function",
           "name": "getBodyRowCells",
@@ -3693,6 +3745,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "getClosestCell",
+          "declaration": {
+            "name": "getClosestCell",
+            "module": "src/vaadin-grid-helpers.js"
+          }
+        },
         {
           "kind": "js",
           "name": "getBodyRowCells",
@@ -4713,6 +4773,10 @@
               "name": "DynamicColumnsMixin",
               "module": "src/vaadin-grid-dynamic-columns-mixin.js"
             },
+            {
+              "name": "HeaderFooterRenderingMixin",
+              "module": "src/vaadin-grid-header-footer-rendering-mixin.js"
+            },
             {
               "name": "ActiveItemMixin",
               "module": "src/vaadin-grid-active-item-mixin.js"
@@ -5583,7 +5647,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -5837,7 +5901,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -6249,7 +6313,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -6479,7 +6543,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -6742,6 +6806,39 @@
               }
             }
           ],
+          "attributes": [
+            {
+              "name": "direction",
+              "type": {
+                "text": "string"
+              },
+              "description": "How to sort the data.\nPossible values are `asc` to use an ascending algorithm, `desc` to sort the data in\ndescending direction, or `null` for not sorting the data.",
+              "fieldName": "direction",
+              "inheritedFrom": {
+                "name": "GridSorterMixin",
+                "module": "src/vaadin-grid-sorter-mixin.js"
+              }
+            },
+            {
+              "name": "path",
+              "type": {
+                "text": "string"
+              },
+              "description": "JS Path of the property in the item used for sorting the data.",
+              "fieldName": "path",
+              "inheritedFrom": {
+                "name": "GridSorterMixin",
+                "module": "src/vaadin-grid-sorter-mixin.js"
+              }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            }
+          ],
           "mixins": [
             {
               "name": "GridSorterMixin",
@@ -6769,33 +6866,7 @@
             "package": "lit"
           },
           "tagName": "vaadin-grid-sorter",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "direction",
-              "type": {
-                "text": "string"
-              },
-              "description": "How to sort the data.\nPossible values are `asc` to use an ascending algorithm, `desc` to sort the data in\ndescending direction, or `null` for not sorting the data.",
-              "fieldName": "direction",
-              "inheritedFrom": {
-                "name": "GridSorterMixin",
-                "module": "src/vaadin-grid-sorter-mixin.js"
-              }
-            },
-            {
-              "name": "path",
-              "type": {
-                "text": "string"
-              },
-              "description": "JS Path of the property in the item used for sorting the data.",
-              "fieldName": "path",
-              "inheritedFrom": {
-                "name": "GridSorterMixin",
-                "module": "src/vaadin-grid-sorter-mixin.js"
-              }
-            }
-          ]
+          "customElement": true
         }
       ],
       "exports": [
@@ -7123,7 +7194,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "attribute": "text-align",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -7332,7 +7403,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Aligns the columns cell content horizontally.\nSupported values: \"start\", \"center\" and \"end\".",
+              "description": "Aligns the columns cell content horizontally.",
               "fieldName": "textAlign",
               "inheritedFrom": {
                 "name": "GridColumn",
@@ -7511,34 +7582,6 @@
               "name": "expanded-changed"
             }
           ],
-          "mixins": [
-            {
-              "name": "GridTreeToggleMixin",
-              "module": "src/vaadin-grid-tree-toggle-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin"
-            },
-            {
-              "name": "DirMixin",
-              "package": "@vaadin/component-base/src/dir-mixin.js"
-            },
-            {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
-            },
-            {
-              "name": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-grid-tree-toggle",
-          "customElement": true,
           "attributes": [
             {
               "name": "expanded",
@@ -7575,8 +7618,43 @@
                 "name": "GridTreeToggleMixin",
                 "module": "src/vaadin-grid-tree-toggle-mixin.js"
               }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "GridTreeToggleMixin",
+              "module": "src/vaadin-grid-tree-toggle-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin"
+            },
+            {
+              "name": "DirMixin",
+              "package": "@vaadin/component-base/src/dir-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-grid-tree-toggle",
+          "customElement": true
         }
       ],
       "exports": [
@@ -7921,6 +7999,25 @@
                 "module": "src/vaadin-grid-data-provider-mixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "i18n",
+              "privacy": "public",
+              "type": {
+                "text": "Object"
+              },
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n  // Accessible name (aria-label) for the select all checkbox in the\n  // selection column header cell.\n  selectAll: 'Select All',\n  // Screen-reader-only label announced for the selection column header cell\n  // when the Select All checkbox is hidden (data provider or conditional selection).\n  selectAllUnavailable: 'Select All unavailable',\n  // Accessible name (aria-label) for the select row checkbox in each\n  // selection column body cell. The `{rowHeader}` placeholder is replaced with the\n  // row header cell text content or row index if there is no row header column.\n  selectRow: 'Select Row {rowHeader}',\n  // Accessible name (aria-label) for the grid sorters. The `{column}`\n  // placeholder is replaced with the sorter text content.\n  sorter: 'Sort by {column}',\n}\n```",
+              "attribute": "i18n",
+              "return": {
+                "type": {
+                  "text": "!GridI18n"
+                }
+              },
+              "inheritedFrom": {
+                "name": "I18nMixin",
+                "package": "@vaadin/component-base/src/i18n-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "isItemSelectable",
@@ -8324,34 +8421,6 @@
               "name": "size-changed"
             }
           ],
-          "mixins": [
-            {
-              "name": "GridMixin",
-              "module": "src/vaadin-grid-mixin.js"
-            },
-            {
-              "name": "ElementMixin",
-              "package": "@vaadin/component-base/src/element-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
-            },
-            {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
-            },
-            {
-              "name": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-grid",
-          "customElement": true,
           "attributes": [
             {
               "name": "accessible-name",
@@ -8485,6 +8554,18 @@
                 "module": "src/vaadin-grid-drag-and-drop-mixin.js"
               }
             },
+            {
+              "name": "i18n",
+              "type": {
+                "text": "Object"
+              },
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "fieldName": "i18n",
+              "inheritedFrom": {
+                "name": "I18nMixin",
+                "package": "@vaadin/component-base/src/i18n-mixin.js"
+              }
+            },
             {
               "name": "is-item-selectable",
               "type": {
@@ -8616,8 +8697,47 @@
                 "name": "DataProviderMixin",
                 "module": "src/vaadin-grid-data-provider-mixin.js"
               }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "GridMixin",
+              "module": "src/vaadin-grid-mixin.js"
+            },
+            {
+              "name": "I18nMixin",
+              "package": "@vaadin/component-base/src/i18n-mixin.js"
+            },
+            {
+              "name": "ElementMixin",
+              "package": "@vaadin/component-base/src/element-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-grid",
+          "customElement": true
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "25.3.0-alpha1",
+  "version": "25.3.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -45,20 +45,20 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha1",
-    "@vaadin/checkbox": "25.3.0-alpha1",
-    "@vaadin/component-base": "25.3.0-alpha1",
-    "@vaadin/lit-renderer": "25.3.0-alpha1",
-    "@vaadin/text-field": "25.3.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha1",
+    "@vaadin/a11y-base": "25.3.0-alpha11",
+    "@vaadin/checkbox": "25.3.0-alpha11",
+    "@vaadin/component-base": "25.3.0-alpha11",
+    "@vaadin/lit-renderer": "25.3.0-alpha11",
+    "@vaadin/text-field": "25.3.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha1",
-    "@vaadin/chai-plugins": "25.3.0-alpha1",
-    "@vaadin/test-runner-commands": "25.3.0-alpha1",
+    "@vaadin/aura": "25.3.0-alpha11",
+    "@vaadin/chai-plugins": "25.3.0-alpha11",
+    "@vaadin/test-runner-commands": "25.3.0-alpha11",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha11",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -66,5 +66,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "5824d54c995945aafd50d30edc2cb763a58a18b6"
+  "gitHead": "7e0c61a37e68d8971def9cdf28ad0548a0f530a9"
 }

package/src/directives/cell-content-directive.js

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+
+/**
+ * A directive that manages the `<vaadin-grid-cell-content>` element for a cell.
+ */
+class CellContentDirective extends AsyncDirective {
+  #cell;
+
+  update(part, [grid, slotName, { textAlign } = {}]) {
+    this.#cell = part.parentNode;
+    this.#cell._content ??= document.createElement('vaadin-grid-cell-content');
+    this.#cell._content.slot = slotName;
+    this.#cell._content.style.textAlign = textAlign ?? '';
+
+    if (!grid.contains(this.#cell._content)) {
+      grid.appendChild(this.#cell._content);
+    }
+
+    return html`<slot name="${slotName}"></slot>`;
+  }
+
+  disconnected() {
+    this.#cell._content?.remove();
+  }
+}
+
+export const cellContent = directive(CellContentDirective);