@vaadin/grid 24.8.4 → 25.0.0-alpha10

package/README.md

@@ -49,42 +49,6 @@ import '@vaadin/grid/vaadin-grid-sort-column.js';
 import '@vaadin/grid/vaadin-grid-tree-column.js';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/grid/vaadin-grid.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the components from the `theme/material` folder:
-
-```js
-import '@vaadin/grid/theme/material/vaadin-grid.js';
-import '@vaadin/grid/theme/material/vaadin-grid-filter-column.js';
-import '@vaadin/grid/theme/material/vaadin-grid-selection-column.js';
-import '@vaadin/grid/theme/material/vaadin-grid-sort-column.js';
-import '@vaadin/grid/theme/material/vaadin-grid-tree-column.js';
-```
-
-You can also import the Lumo version of the components explicitly:
-
-```js
-import '@vaadin/grid/theme/lumo/vaadin-grid.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid-filter-column.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid-selection-column.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid-sort-column.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid-tree-column.js';
-```
-
-Finally, you can import the un-themed components from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/grid/src/vaadin-grid.js';
-import '@vaadin/grid/src/vaadin-grid-column-group.js';
-import '@vaadin/grid/src/vaadin-grid-filter-column.js';
-import '@vaadin/grid/src/vaadin-grid-selection-column.js';
-import '@vaadin/grid/src/vaadin-grid-sort-column.js';
-import '@vaadin/grid/src/vaadin-grid-tree-column.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -25,6 +25,8 @@
     "lit.d.ts",
     "lit.js",
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -45,26 +47,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.8.4",
-    "@vaadin/checkbox": "~24.8.4",
-    "@vaadin/component-base": "~24.8.4",
-    "@vaadin/lit-renderer": "~24.8.4",
-    "@vaadin/text-field": "~24.8.4",
-    "@vaadin/vaadin-lumo-styles": "~24.8.4",
-    "@vaadin/vaadin-material-styles": "~24.8.4",
-    "@vaadin/vaadin-themable-mixin": "~24.8.4",
+    "@vaadin/a11y-base": "25.0.0-alpha10",
+    "@vaadin/checkbox": "25.0.0-alpha10",
+    "@vaadin/component-base": "25.0.0-alpha10",
+    "@vaadin/lit-renderer": "25.0.0-alpha10",
+    "@vaadin/text-field": "25.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.8.4",
-    "@vaadin/test-runner-commands": "~24.8.4",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

package/src/array-data-provider.js

@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
 /**
  * Returns a sub-property of an object
  *

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

@@ -3,7 +3,6 @@
  * Copyright (c) 2017 - 2025 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 type { DirectiveResult } from 'lit/directive.js';
 import type { LitRenderer, LitRendererResult } from '@vaadin/lit-renderer';
 import { LitRendererDirective } from '@vaadin/lit-renderer';

package/src/styles/vaadin-grid-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const gridStyles: CSSResult;

package/src/styles/vaadin-grid-base-styles.js

@@ -0,0 +1,510 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css } from 'lit';
+
+export const gridStyles = css`
+  @keyframes vaadin-grid-appear {
+    to {
+      opacity: 1;
+    }
+  }
+
+  :host {
+    display: flex;
+    animation: 1ms vaadin-grid-appear;
+    max-width: 100%;
+    height: 400px;
+    min-height: var(--_grid-min-height, 0);
+    flex: 1 1 auto;
+    align-self: stretch;
+    position: relative;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    background: var(--vaadin-grid-background, var(--vaadin-background-color));
+    border: var(--_border-width) solid var(--vaadin-grid-border-color, var(--vaadin-border-color));
+    cursor: default;
+    --_border-width: 0;
+    --_row-border-width: var(--vaadin-grid-cell-border-width, 1px);
+    --_column-border-width: var(--vaadin-grid-cell-border-width, 0);
+    --_cell-padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container));
+    --_selection-background-image: none;
+    border-radius: var(--_border-radius);
+    --_border-radius: 0;
+  }
+
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+
+  /* Variant: No outer border */
+  :host(:not([theme~='no-border'])) {
+    --_border-width: var(--vaadin-grid-border-width, 1px);
+    --_border-radius: var(--vaadin-grid-border-radius, var(--vaadin-radius-l));
+  }
+
+  :host([all-rows-visible]) {
+    height: auto;
+    align-self: flex-start;
+    min-height: auto;
+    flex-grow: 0;
+  }
+
+  #scroller {
+    contain: layout;
+    border-radius: calc(var(--_border-radius) - var(--_border-width));
+    position: relative;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    align-self: stretch;
+    overflow: hidden;
+  }
+
+  #items {
+    flex-grow: 1;
+    flex-shrink: 0;
+    display: block;
+    position: sticky;
+    width: 100%;
+    left: 0;
+    min-height: 1px;
+  }
+
+  #table {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow: auto;
+    position: relative;
+    border-radius: inherit;
+    /* Workaround for a Chrome bug: new stacking context here prevents the scrollbar from getting hidden */
+    z-index: 0;
+  }
+
+  [no-scrollbars]:is([safari], [firefox]) #table {
+    overflow: hidden;
+  }
+
+  #header,
+  #footer {
+    display: block;
+    position: sticky;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+  }
+
+  :host([dir='rtl']) #items,
+  :host([dir='rtl']) #header,
+  :host([dir='rtl']) #footer {
+    left: auto;
+  }
+
+  #header {
+    top: 0;
+  }
+
+  #footer {
+    bottom: 0;
+  }
+
+  th {
+    text-align: inherit;
+  }
+
+  #header th,
+  [part~='reorder-ghost'] {
+    font-size: var(--vaadin-grid-header-font-size, 1em);
+    font-weight: var(--vaadin-grid-header-font-weight, 500);
+    color: var(--vaadin-grid-header-color, var(--vaadin-color));
+  }
+
+  [part~='row'] {
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    position: relative;
+  }
+
+  [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
+    visibility: hidden;
+  }
+
+  [column-rendering='lazy'] [part~='body-cell']:not([frozen]):not([frozen-to-end]) {
+    transform: translateX(var(--_grid-lazy-columns-start));
+  }
+
+  #items [part~='row']:empty {
+    height: 100%;
+  }
+
+  [part~='cell'] {
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  [part~='row'],
+  [part~='cell'] {
+    --_hover-background-image: var(--vaadin-grid-cell-background-hover, none);
+    background:
+      var(--_hover-background-image), var(--_selection-background-image),
+      var(--vaadin-grid-cell-background, var(--vaadin-background-color));
+  }
+
+  [part~='cell']:not([part~='details-cell']) {
+    flex-shrink: 0;
+    flex-grow: 1;
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    position: relative;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  :focus-visible,
+  [part~='row']::after {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
+  }
+
+  [part~='row']:focus-visible {
+    z-index: 1;
+  }
+
+  /* Used for focus outline and drag'n'drop target indication */
+  [part~='row']::after {
+    content: '';
+    position: absolute;
+    inset: calc(var(--_row-border-width) * -1) 0;
+    z-index: 3;
+    transform: translateX(var(--_grid-horizontal-scroll-position));
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  [part~='row']:focus-visible::after {
+    visibility: visible;
+  }
+
+  /* Variant: wrap cell contents */
+
+  :host([theme~='wrap-cell-content']) [part~='cell']:not([part~='details-cell']) {
+    white-space: normal;
+  }
+
+  /* Variant: row & column borders */
+
+  :host([theme~='no-row-borders']) {
+    --_row-border-width: 0;
+  }
+
+  :host([theme~='column-borders']) {
+    --_column-border-width: var(--vaadin-grid-cell-border-width, 1px);
+  }
+
+  [part~='cell']:not([part~='last-column-cell'], [part~='details-cell']) {
+    border-inline-end: var(--_column-border-width, 0) solid
+      var(--vaadin-grid-cell-border-color, var(--vaadin-border-color));
+  }
+
+  [part~='cell']:where(:not([part~='details-cell'], [part~='first-row-cell'])) {
+    border-top: var(--_row-border-width) solid var(--vaadin-grid-cell-border-color, var(--vaadin-border-color));
+  }
+
+  [part~='first-header-row-cell'] {
+    border-top: 0;
+  }
+
+  [part~='last-header-row-cell'] {
+    border-bottom: var(--_row-border-width, 1px) solid var(--vaadin-grid-cell-border-color, var(--vaadin-border-color));
+  }
+
+  [part~='first-footer-row-cell'] {
+    border-top: var(--_row-border-width, 1px) solid var(--vaadin-grid-cell-border-color, var(--vaadin-border-color));
+  }
+
+  /* Variant: row stripes */
+  :host([theme~='row-stripes']) [part~='odd-row'],
+  :host([theme~='row-stripes']) [part~='odd-row'] [part~='cell'] {
+    --vaadin-grid-cell-background: var(
+      --vaadin-grid-odd-row-cell-background,
+      linear-gradient(var(--vaadin-background-container), var(--vaadin-background-container))
+    );
+  }
+
+  [part~='details-cell'] {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+
+  [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: var(--_cell-padding);
+    flex: 1;
+    min-width: 0;
+  }
+
+  [frozen],
+  [frozen-to-end] {
+    z-index: 2;
+    will-change: transform;
+  }
+
+  /* Selected row */
+  [part~='row'][selected] [part~='body-cell']:not([part~='details-cell']) {
+    --_color: color-mix(in srgb, currentColor 8%, transparent);
+    --_selection-background-image: var(
+      --vaadin-grid-row-selected-background,
+      linear-gradient(var(--_color), var(--_color))
+    );
+  }
+
+  /* Empty state */
+  #scroller:not([empty-state]) #emptystatebody,
+  #scroller[empty-state] #items {
+    display: none;
+  }
+
+  #emptystatebody {
+    display: flex;
+    position: sticky;
+    inset: 0;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  #emptystaterow {
+    display: flex;
+    flex: 1;
+  }
+
+  #emptystatecell {
+    display: block;
+    flex: 1;
+    overflow: auto;
+    padding: var(--_cell-padding);
+  }
+
+  /* Reordering styles */
+  :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),
+  :host([reordering]) [part~='resize-handle'],
+  #scroller[no-content-pointer-events] [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+    pointer-events: none;
+  }
+
+  [part~='reorder-ghost'] {
+    visibility: hidden;
+    position: fixed;
+    pointer-events: none;
+    box-shadow:
+      0 0 0 1px hsla(0deg, 0%, 0%, 0.2),
+      0 8px 24px -2px hsla(0deg, 0%, 0%, 0.2);
+    padding: var(--_cell-padding) !important;
+    border-radius: 3px;
+
+    /* Prevent overflowing the grid in Firefox */
+    top: 0;
+    inset-inline-start: 0;
+  }
+
+  :host([reordering]) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  :host([reordering]) [part~='cell'] {
+    /* TODO expose a custom property to control this */
+    --_reorder-curtain-filter: brightness(0.9) contrast(1.1);
+  }
+
+  :host([reordering]) [part~='cell']::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    -webkit-backdrop-filter: var(--_reorder-curtain-filter);
+    backdrop-filter: var(--_reorder-curtain-filter);
+  }
+
+  :host([reordering]) [part~='cell'][reorder-status='allowed'] {
+    /* TODO expose a custom property to control this */
+    --_reorder-curtain-filter: brightness(0.94) contrast(1.07);
+  }
+
+  :host([reordering]) [part~='cell'][reorder-status='dragging'] {
+    --_reorder-curtain-filter: none;
+  }
+
+  /* Resizing styles */
+  [part~='resize-handle'] {
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 1;
+    opacity: 0;
+    width: var(--vaadin-focus-ring-width);
+    background: var(--vaadin-grid-column-resize-handle-color, var(--vaadin-focus-ring-color));
+    transition: opacity 0.2s;
+    translate: var(--_column-border-width);
+  }
+
+  [part~='last-column-cell'] [part~='resize-handle'] {
+    translate: 0;
+  }
+
+  :host(:not([reordering])) *:not([column-resizing]) [part='resize-handle']:hover,
+  [part='resize-handle']:active {
+    opacity: 1;
+    transition-delay: 0.15s;
+  }
+
+  [part~='resize-handle']::before {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 16px;
+    translate: calc(-50% + var(--vaadin-focus-ring-width) / 2);
+  }
+
+  :host([dir='rtl']) [part~='resize-handle']::before {
+    translate: calc(50% - var(--vaadin-focus-ring-width) / 2);
+  }
+
+  [first-frozen-to-end] [part~='resize-handle']::before,
+  :is([last-column], [last-frozen]) [part~='resize-handle']::before {
+    width: 8px;
+    translate: 0;
+  }
+
+  :is([last-column], [last-frozen]) [part~='resize-handle']::before {
+    inset-inline-end: 0;
+  }
+
+  [frozen-to-end] :is([part~='resize-handle'], [part~='resize-handle']::before) {
+    inset-inline: 0 auto;
+  }
+
+  [first-frozen-to-end] {
+    margin-inline-start: auto;
+  }
+
+  /* Hide resize handle if scrolled to end */
+  :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {
+    display: none;
+  }
+
+  #scroller:is([column-resizing], [range-selecting]) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Drag'n'drop styles */
+  :host([dragover]) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: calc(var(--_border-width) * -1);
+  }
+
+  [part~='row'][dragover] {
+    z-index: 100 !important;
+  }
+
+  [part~='row'][dragover]::after {
+    visibility: visible;
+  }
+
+  [part~='row'][dragover='above']::after {
+    outline: 0;
+    border-top: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    top: calc(var(--vaadin-focus-ring-width) / -2);
+  }
+
+  [part~='row'][dragover='below']::after {
+    outline: 0;
+    border-bottom: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    bottom: calc(var(--vaadin-focus-ring-width) / -2);
+  }
+
+  :is([part~='row']:first-child, [part~='first-row'])::after {
+    top: 0;
+  }
+
+  :is([part~='row']:last-child, [part~='last-row'])::after {
+    bottom: 0;
+  }
+
+  [part~='row'][dragstart] [part~='cell'] {
+    border-top: 0 !important;
+  }
+
+  [part~='row'][dragstart] [part~='cell'][last-column] {
+    border-radius: 0 3px 3px 0;
+  }
+
+  [part~='row'][dragstart] [part~='cell'][first-column] {
+    border-radius: 3px 0 0 3px;
+  }
+
+  /* Indicates the number of dragged rows */
+  /* TODO export custom properties to control styles */
+  #scroller [part~='row'][dragstart]:not([dragstart=''])::before {
+    position: absolute;
+    left: var(--_grid-drag-start-x);
+    top: var(--_grid-drag-start-y);
+    z-index: 100;
+    content: attr(dragstart);
+    box-sizing: border-box;
+    padding: 0.3em;
+    color: white;
+    background-color: red;
+    border-radius: 1em;
+    font-size: 0.75rem;
+    line-height: 1;
+    font-weight: 500;
+    min-width: 1.6em;
+    text-align: center;
+  }
+
+  /* Sizer styles */
+  #sizer {
+    display: flex;
+    visibility: hidden;
+  }
+
+  #sizer [part~='details-cell'],
+  #sizer [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+    display: none !important;
+  }
+
+  #sizer [part~='cell'] {
+    display: block;
+    flex-shrink: 0;
+    line-height: 0;
+    height: 0 !important;
+    min-height: 0 !important;
+    max-height: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+  }
+
+  #sizer [part~='cell']::before {
+    content: '-';
+  }
+`;

package/src/styles/vaadin-grid-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const gridStyles: CSSResult;

package/src/{vaadin-grid-styles.js → styles/vaadin-grid-core-styles.js}

@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 export const gridStyles = css`
   @keyframes vaadin-grid-appear {
@@ -21,6 +21,7 @@ export const gridStyles = css`
     flex: 1 1 auto;
     align-self: stretch;
     position: relative;
+    box-sizing: border-box;
   }
 
   :host([hidden]) {
@@ -75,7 +76,6 @@ export const gridStyles = css`
   #header,
   #footer {
     display: block;
-    position: -webkit-sticky;
     position: sticky;
     left: 0;
     overflow: visible;
@@ -104,7 +104,6 @@ export const gridStyles = css`
     flex-grow: 1;
     flex-shrink: 0;
     display: block;
-    position: -webkit-sticky;
     position: sticky;
     width: 100%;
     left: 0;

package/src/styles/vaadin-grid-filter-base-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const gridFilterStyles: CSSResult;

package/src/styles/vaadin-grid-filter-base-styles.js

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const gridFilterStyles = css`
+  :host {
+    display: inline-flex;
+    max-width: 100%;
+  }
+
+  ::slotted(*) {
+    width: 100%;
+    box-sizing: border-box;
+  }
+`;